The GS Design System type scales are a proportional set of type sizes and weights designed to establish consistent hierarchies of type.
Display styles should be used for content-based layouts such as news articles or content-heavy pages and larger marketing page layouts where larger fonts are needed.
Sans-serif headings are used in product-based UI designs such as panels, cards, and menus.
Base styles define the foundational type size within an application or website.
Supporting styles are designed to be used generically for text and labels in UI components or to display data points.
GS Design System typography styling can be applied to standard text elements, including styles for font-family, font-size, and margins. The HTML elements styled include heading elements h1 through h6, block elements such as p, and inline elements including span and code.
Sabon, a serif typeface, and Basis, a sans-serif typeface, are companion typefaces and their use should be limited to marketing pages and editorial websites. Both are only available at in display sizes and larger heading tokens. They should not be used at smaller sizes as they will not render well.
The Goldman Sachs Design System has several pre-built color tokens that should be used for most text colors. If other colors need to be used, the color choice should consider accessiblity and legibility. Reference the Color foundation section for additional guidance.
28, 43, 54
62, 84, 99
159, 177, 189
24, 106, 222
107, 48, 171
255, 255, 255
Text links provide a way to navigate to another section or page and can displayed as standalone items or displayed inline within a sentence or paragraph.
Bulleted lists are used when items should be grouped together but have no inherent order. When using a bulleted list, it is recommended that the text for each bullet is not longer than two sentences.
Use a numbered list when items have an inherent order, such as step by step instructions.
DO: Use color to help convey hierarchy. Three levels of gray are meant to reinforce the importance of the information being displayed.
DON’T: Use lighter gray type on gray surfaces as it may not pass accessibility standards.
DO: Use color in a limited capacity to highlight important information.
DON’T: Use the text-link color if the text is not a link.