Design System Concepts

These concepts form the underlying functional language that allows the Design System to use the same terminology across components and create a cohesive system.

Design System Language

These terms are used within our foundations and components to describe the features and properties and are meant to create a shared language within the design system.

TermDescriptionValues
ActionDescribes the type of action to be taken and defines colorPrimary, Secondary, Info, Contrast, Destructive
AlignmentAlignment of component contentsTop, Right, Bottom, Left, Center, Justify, and all cross permutations
ClearableComponent has a clear icon that removes any inputFalse / True
ColorComponent color from a ramp in the color systemGray, Red, Orange, Yellow, Lime, Green, Teal, Turquoise, Aqua, Blue, Ultramarine, Purple, Pink
DensitySpacing within a component or around the elements of a component.Extra Compact, Compact, Standard, Spacious
DirectionDirection an arrow or tip pointsUp, Down, Left, Right, all cross permutations
DisabledThe component is not allowing user interactionFalse / True
DismissibleComponent has a dismiss icon that removes it from viewFalse / True
ElevationVisually elevates the component on the screen00 - 08, with 08 as highest elevation
EmphasisVisual emphasis of component Bold, Subtle, Minimal
ExpandableComponent can expand to show more detail False / True
ExpandedComponent is expanded to show contentFalse / True
IconAdds or overwrites the component icon, includes before or after text variationsLeading, Trailing
OrientationHow a group of content is arrangedHorizontal, Vertical
PlacementWhere the component renders in relation to other componentsTop, Right, Bottom, Left, and all cross permutations
PositionPlaces a component at the start or end of its containerLeading / Trailing
SelectionSelected option(s) of a component
ShapeShape of the component containerCircle, Square, Rounded
SizeSize of componentExtra Small (xs), Small (sm), Medium (md), Large (lg), Extra large (xl)
Start Value, End ValueValues when the component is selecting a range
StatusVisual status of component, overrides colorNone, Information, Success, Warning, Error, Loading
StatesHtml element states that have been styledDefault, Hover, Active, Disabled, Focused, Checked
TitleText used when there is supporting contentString, custom content
ValueValue of a componentString, number, etc.
VisibleComponent is visible on the screenFalse / True

Action type is used to describe the type of action that is displayed within the button and is also used to define button styling. There are five available— primary, secondary, info, contrast and destructive.

Concept - Action
TermUsed for
PrimaryThe most important call to action on the page that need high visibility
SecondaryNon-primary actions on the page
InfoInformational or main calls to action that require less prominence than primary action
ContrastDesigned to specifically sit over imagery and dark backgrounds with any call to action
DestructiveActions that will permanently delete or remove data or end a process

Alignment is used to define the alignment of elements inside of the component.

Concept - Alignment

Clearable indicates that the component has a clear icon that can remove any data that has been entered.

Concept - Clearable

Color allows for the component to choose a pre-defined color from each distinctive color ramp. Color can be combined with Emphasis to choose a bolder or lighter color from a specific color ramp.

Concept - Color

A color ramp is a progression of colors that can be used to create a gradient or heat map. Goldman Sachs has monochromatic color ramps established for each distinctive color numbered from 010 to 100, with 010 being the lightest in the ramp and 100 being the darkest.

Concept - Color Ramp

Spacing within a component or around the elements of a component.

Concept - Density

The component has a dismiss icon that removes it from view.

Concept - Dismissible

Elevation visually elevates the component on the screen. There are eight possible values with 00 being the lowest value and 08 being the highest.

Concept - Elevation
Depth LevelUses
Elevation 00Background
Elevation 01 Panels, Cards Minimal
Elevation 02Panels, Cards Subtle
Elevation 03No Specific Use
Elevation 04Panels, Navigation Bars, Cards Bold
Elevation 05Menus, Date Picker
Elevation 06Modals
Elevation 07No Specific Use
Elevation 08 No Specific Use

Emphasis values include bold, subtle and minimal. These are applied to components to help create hierarchy and priority throughout the interface. All emphasis types are not available on all components.

Concept - Emphasis
ValueTypical styleUse for
BoldDark, bright colors and bolder textDistinction and alerting
SubtleMuted colors and regular weight textNuanced designs and balance
MinimalTransparency, no color or limited colorJuxtaposition to bold and lower priority items

Component can expand to show more detail.

Concept - Expandable

Component is expanded to show content.

Concept - Expanded

Orientation is the direction that a group of content is arranged on the screen.

Concept - Orientation

Placement refers to where a component renders in relation to other components.

Concept - Placement

Position places a component at the start or end of its container, typically leading or trailing.

Icon position is a specific implementation of position.

Concept - Position

Shape defines the component container shape and can be square, rounded or circle.

Concept - Shape

Size value range from extra small to extra large. Most sizes can be used in any interface type depending on the user needs and interface requirements. Not all components come in all sizes. Small, medium and large are the core sizes.

Concept - Size
Value Typical HeightTypical Text SizeUsage
Extra Small (xs)20px11ptHigh density applications, ancillary design items
Small (sm)24px12ptDesktop productivity applications
Medium (md)32px14ptDefault recommended size
Large (lg)40px16ptMobile applications, consumer applications
Extra Large (xl)48px18ptMobile applications, consumer applications

State defines styles for HTML element states.

Concept - State

Status is the visual status of component and the component, which can be used to either define the component color or temporarily override the component color.

Concept - Status
StatusUsage
NoneDefault status set for components
InformationTypically blue in color and used for general information
WarningTypically yellow or orange in color and used for non-critical errors. Orange has higher contrast on light backgrounds and should be used for icons, text or thin lines. Yellow can be used for a background fill with dark text.
ErrorTypically red in color and used for critical errors and system alerts
SuccessTypically green in color and used for when a successful action has gone through
LoadingTypically used to indicate system loading

Value is the set value of a component and can be a string or numerical value. When numerical there can also be maximum and minimum values set. When a range can be selected the endpoints are called start and end values.

Concept - Value
TermDescription
BodyContent section of a container component
FillColored portion of a component
FooterBottom section of a container component, often holding actions
HandleComponent that is dragged along a track
HeaderHeader section within a container component
LabelA string showing information about a component
Secondary LabelAdditional label that provides supporting text in an implied hierarchy
SeparatorLine that separates between components
TipPointed tip attaching one component to another
TrackHorizontal line that another component slides across
Header & Body
TermDescription
BodyContent section of a container component
FooterBottom section of a container component, often holding actions
HeaderHeader section within a container component
Tooltip
TermDescription
FillColored portion of a component
TipPointed tip attaching one component to another
Label & secondary label
TermDescription
LabelA string showing information about a component
Secondary LabelAdditional label that provides supporting text in an implied hierarchy
Separator
TermDescription
SeparatorLine that separates between components
Track & Handle
TermDescription
HandleComponent that is dragged along a track
TrackHorizontal line that another component slides across