FOUNDATION
Scale & Formatting
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.
text-primary
1C2B36
28, 43, 54
Gray 90
text-secondary
3E5463
62, 84, 99
Gray 70
text-tertiary
9FB1BD
159, 177, 189
Gray 40
text-link
186ADE
24, 106, 222
Blue 60
text-link-visited
6B30AB
107, 48, 171
Purple 70
text-reversed
#FFFFFF
255, 255, 255
White
text-destructive
D91F11
217,31,17
Red 60
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.
CONTENTS