Text styles

Type scale

<div class="dsgn-stack" data-gap="s">
  <p class="dsgn-eyebrow">Eyebrow</p><p class="dsgn-display">Display</p><p class="dsgn-heading">Heading</p><p class="dsgn-heading-s">Heading S</p>
  <p class="dsgn-title">Title</p><p class="dsgn-lead">Lead text for an intro under a heading.</p><p class="dsgn-body">Body</p><p class="dsgn-body-s">Body S</p><p class="dsgn-caption dsgn-muted">Caption, muted</p>
</div>

Usage

Opt-in page base (low specificity, easy to override):

Text styles as classes, same names as the Figma text styles: .dsgn-display .dsgn-heading .dsgn-heading-s .dsgn-title .dsgn-body .dsgn-body-s .dsgn-caption .dsgn-lead (body, muted, for intros) · .dsgn-muted · .dsgn-eyebrow (caption, accent, spaced caps) With .dsgn-page on <body>, links to a section (#id) scroll smoothly (instantly with reduced motion).

Details

Classes

.dsgn-page .dsgn-display .dsgn-heading .dsgn-heading-s .dsgn-title .dsgn-body .dsgn-body-s .dsgn-caption .dsgn-lead .dsgn-muted .dsgn-eyebrow

Tokens used

--dsgn-accent-text --dsgn-font-sans --dsgn-font-size-body --dsgn-font-size-body-s --dsgn-font-size-caption --dsgn-font-size-display --dsgn-font-size-heading --dsgn-font-size-heading-s --dsgn-font-size-title --dsgn-font-weight-semibold --dsgn-line-height-body --dsgn-line-height-body-s --dsgn-line-height-caption --dsgn-line-height-display --dsgn-line-height-heading --dsgn-line-height-heading-s --dsgn-line-height-title --dsgn-surface-base --dsgn-text --dsgn-text-muted

In Figma

display … caption (text styles)

Import alone

dsgn.systems/components/base.css