FOUNDATION
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.
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.
| Term | Description | Values |
|---|---|---|
| Action | Describes the type of action to be taken and defines color | Primary, Secondary, Info, Contrast, Destructive |
| Alignment | Alignment of component contents | Top, Right, Bottom, Left, Center, Justify, and all cross permutations |
| Clearable | Component has a clear icon that removes any input | False / True |
| Color | Component color from a ramp in the color system | Gray, Red, Orange, Yellow, Lime, Green, Teal, Turquoise, Aqua, Blue, Ultramarine, Purple, Pink |
| Density | Spacing within a component or around the elements of a component. | Extra Compact, Compact, Standard, Spacious |
| Direction | Direction an arrow or tip points | Up, Down, Left, Right, all cross permutations |
| Disabled | The component is not allowing user interaction | False / True |
| Dismissible | Component has a dismiss icon that removes it from view | False / True |
| Elevation | Visually elevates the component on the screen | 00 - 08, with 08 as highest elevation |
| Emphasis | Visual emphasis of component | Bold, Subtle, Minimal |
| Expandable | Component can expand to show more detail | False / True |
| Expanded | Component is expanded to show content | False / True |
| Icon | Adds or overwrites the component icon, includes before or after text variations | Leading, Trailing |
| Orientation | How a group of content is arranged | Horizontal, Vertical |
| Placement | Where the component renders in relation to other components | Top, Right, Bottom, Left, and all cross permutations |
| Position | Places a component at the start or end of its container | Leading / Trailing |
| Selection | Selected option(s) of a component | |
| Shape | Shape of the component container | Circle, Square, Rounded |
| Size | Size of component | Extra Small (xs), Small (sm), Medium (md), Large (lg), Extra large (xl) |
| Start Value, End Value | Values when the component is selecting a range | |
| Status | Visual status of component, overrides color | None, Information, Success, Warning, Error, Loading |
| States | Html element states that have been styled | Default, Hover, Active, Disabled, Focused, Checked |
| Title | Text used when there is supporting content | String, custom content |
| Value | Value of a component | String, number, etc. |
| Visible | Component is visible on the screen | False / 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.
| Term | Used for |
|---|---|
| Primary | The most important call to action on the page that need high visibility |
| Secondary | Non-primary actions on the page |
| Info | Informational or main calls to action that require less prominence than primary action |
| Contrast | Designed to specifically sit over imagery and dark backgrounds with any call to action |
| Destructive | Actions that will permanently delete or remove data or end a process |
Alignment is used to define the alignment of elements inside of the component.
Clearable indicates that the component has a clear icon that can remove any data that has been entered.
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.
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.
Spacing within a component or around the elements of a component.
The component has a dismiss icon that removes it from view.
Elevation visually elevates the component on the screen. There are eight possible values with 00 being the lowest value and 08 being the highest.
| Depth Level | Uses |
|---|---|
| Elevation 00 | Background |
| Elevation 01 | Panels, Cards Minimal |
| Elevation 02 | Panels, Cards Subtle |
| Elevation 03 | No Specific Use |
| Elevation 04 | Panels, Navigation Bars, Cards Bold |
| Elevation 05 | Menus, Date Picker |
| Elevation 06 | Modals |
| Elevation 07 | No 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.
| Value | Typical style | Use for |
|---|---|---|
| Bold | Dark, bright colors and bolder text | Distinction and alerting |
| Subtle | Muted colors and regular weight text | Nuanced designs and balance |
| Minimal | Transparency, no color or limited color | Juxtaposition to bold and lower priority items |
Component can expand to show more detail.
Component is expanded to show content.
Orientation is the direction that a group of content is arranged on the screen.
Placement refers to where a component renders in relation to other components.
Position places a component at the start or end of its container, typically leading or trailing.
Icon position is a specific implementation of position.
Shape defines the component container shape and can be square, rounded or circle.
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.
| Value | Typical Height | Typical Text Size | Usage |
|---|---|---|---|
| Extra Small (xs) | 20px | 11pt | High density applications, ancillary design items |
| Small (sm) | 24px | 12pt | Desktop productivity applications |
| Medium (md) | 32px | 14pt | Default recommended size |
| Large (lg) | 40px | 16pt | Mobile applications, consumer applications |
| Extra Large (xl) | 48px | 18pt | Mobile applications, consumer applications |
State defines styles for HTML element states.
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.
| Status | Usage |
|---|---|
| None | Default status set for components |
| Information | Typically blue in color and used for general information |
| Warning | Typically 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. |
| Error | Typically red in color and used for critical errors and system alerts |
| Success | Typically green in color and used for when a successful action has gone through |
| Loading | Typically 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.
| Term | Description |
|---|---|
| Body | Content section of a container component |
| Fill | Colored portion of a component |
| Footer | Bottom section of a container component, often holding actions |
| Handle | Component that is dragged along a track |
| Header | Header section within a container component |
| Label | A string showing information about a component |
| Secondary Label | Additional label that provides supporting text in an implied hierarchy |
| Separator | Line that separates between components |
| Tip | Pointed tip attaching one component to another |
| Track | Horizontal line that another component slides across |
| Term | Description |
|---|---|
| Body | Content section of a container component |
| Footer | Bottom section of a container component, often holding actions |
| Header | Header section within a container component |
| Term | Description |
|---|---|
| Fill | Colored portion of a component |
| Tip | Pointed tip attaching one component to another |
| Term | Description |
|---|---|
| Label | A string showing information about a component |
| Secondary Label | Additional label that provides supporting text in an implied hierarchy |
| Term | Description |
|---|---|
| Separator | Line that separates between components |
| Term | Description |
|---|---|
| Handle | Component that is dragged along a track |
| Track | Horizontal line that another component slides across |
CONTENTS