Typography

The type scale and font pairing used across the Bones design system.

Fonts

Sans — Lato

The quick brown fox

Default UI and body text. --font-sans / font-sans

Mono — Geist Mono

The quick brown fox

Code, tokens, and technical values. --font-mono / font-mono

Bones type scale

The design system’s own named sizes — each bundles font size, line height, letter spacing, and weight into one utility class.

Page and section headers

StyleUsage

Page title

text-page-title
  • Page titles

Page subtitle

text-page-subtitle
  • Page subtitles

Section title

text-section-title
  • Section titles

Section subtitle

text-section-subtitle
  • Section subtitles
  • Accordion section labels

Container title

text-container-title
  • Container titles

Base styles

StyleUsage

Base — the default body text size for this system.

text-base
  • Default text
  • Body copy
  • Table data
  • Table drawers
  • Input field text

Base semibold

text-base-semibold
  • Text links
  • Filter label

Base semibold italic

text-base-semibold-italic
  • Guidance
  • Special situations

Base small

text-base-small
  • Pagination text
  • Labels
  • Badges
  • Captions
  • Success & Error messaging
  • Values in Filter Panel

Base small italic

text-base-small-italic
  • Guidance
  • Special situations

Supporting styles

StyleUsage

Button label

text-button
  • Button text

Tab label

text-tab-label
  • Tab labels

Tab label small

text-tab-label-small
  • Tab labels small

Table header

text-table-header
  • Table column headers

const bones = true

text-code font-mono
  • Code snippets and queries

Badge small

text-badge-small
  • Small Badges