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.

type hierarchy

DO: Use color to help convey hierarchy. Three levels of gray are meant to reinforce the importance of the information being displayed.

type hierarchy

DON’T: Use lighter gray type on gray surfaces as it may not pass accessibility standards.

type color guidance

DO: Use color in a limited capacity to highlight important information.

type hierarchy

DON’T: Use the text-link color if the text is not a link.