Typography

Font family

font-primary (Plus Jakarta Sans), font-secondary (DM Sans), font-code (monospace).

Font size

Fluid sizes that scale with the viewport, on a t-shirt scale anchored at base (16px). Each class also applies its paired line-height token (--cffy-fs-{step}--line-height):

fs-4xs · fs-3xs · fs-2xs · fs-xs · fs-sm · fs-base · fs-lg · fs-xl · fs-2xl · fs-3xl · fs-4xl · fs-5xl

Display styles

Use the display scale for prominent marketing and editorial headings. Every class applies the primary font, a unit line height, and its paired weight and tracking:

• display-1 — 2.5rem to 4.5rem, weight 800
• display-2 — 2rem to 3.625rem, weight 500
• display-3 — 1.625rem to 2.5rem, weight 500
• display-4 — 1.375rem to 2rem, weight 500

<h1 class="display-1">Build vibrant UIs</h1>
<h2 class="display-2">Designed for every screen</h2>
<h3 class="display-3">A flexible design system</h3>
<h4 class="display-4">Thoughtful details included</h4>

Font weight

fw-400, fw-500, fw-600, fw-700, fw-800.

<p class="font-primary fs-2xl fw-700">Bold display text</p>

Alignment, wrapping & transform

• Align: text-left, text-start, text-center, text-right, text-end (+ responsive text-{bp}-center, …)
• Wrap: text-wrap, text-nowrap, text-break, text-keep-all, text-wrap-balance, text-truncate
• Transform: text-lowercase, text-uppercase, text-capitalize
• Line height: lh-1, lh-sm, lh-base, lh-md, lh-lg

Semantic text styles

Ready-made hierarchy styles:

• text-hero — largest display text
• text-heading (+ heading-lg, heading-xl) — section headings with variable-font weight
• text-subheading (+ subheading-m1 for a tight gutter, subheading-m0 for none) — subheadings, with an optional anchor hash on data-link
• text-title-description — title with an animated underline on a following .subtitle-1

<h1 class="text-hero">Build vibrant UIs</h1>
<h2 class="text-heading heading-lg">A bold section title</h2>

Extras

tabular-numbers (aligned figures), text-decoration-side-lines (centered text with flanking rules), and text-gradient (see Colors & Gradients).

CSS variables

The base styles for links (a, .anchor-link), <code> and <kbd> read these. Set them on :root, or on any wrapper to restyle only the text inside it. Components that style their own links (navbar, sidebar, buttons, …) and .kbd-dark keep their own colors.

:root {
  --cffy-link-color: var(--cffy-accent-a10);
  --cffy-kbd-radius: var(--cffy-radius-sm);
}