Font Families

Headings & Display Type

Headings h1–h6 are styled by the Decanter base layer. .splash-text is for hero banners, and .types applies heading styles (weight, line height, spacing) to any element without changing its size.

Splash Text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

A paragraph with .types .type-3 styled like a heading

Modular Type Scale

.type-0 through .type-10. Each step scales responsively at the md and lg breakpoints with letter spacing proportional to size. .type-0 equals the base font size (1em).

Fluid Type Scale

.fluid-type-0 through .fluid-type-10 scale smoothly and linearly with the viewport between 360px and 1500px using clamp() — resize the window to see it. Min/max sizes match the modular scale. Good for hero banners and horizontal cards.

Font Size Utilities

.text-<number> uses one pixel-equivalent step, so the number reads as pixels under either root-size entry — .text-18 is 18px at the browser's default font size. Any integer works. .text-1em, .text-09em, and .text-input (18px) are also available.

.text-14 — The quick brown fox jumps over the lazy dog.

.text-16 — The quick brown fox jumps over the lazy dog.

.text-18 — The quick brown fox jumps over the lazy dog.

.text-21 — The quick brown fox jumps over the lazy dog.

.text-24 — The quick brown fox jumps over the lazy dog.

.text-30 — The quick brown fox jumps over the lazy dog.

.text-62 — The quick brown fox jumps over the lazy dog.

Base Font Classes

.basefont-19 through .basefont-23 set a responsive base font size on a container so all em-based typography inside scales together. The default body base is 21 (18px → 19px → 21px).

Text Styles

.intro-text — Larger opening text with a comfortable reading measure.

.big-paragraph — Slightly larger than body text. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

.card-paragraph — Slightly smaller, tighter text for card teasers, with a 16px floor so it never becomes too small to read.

.subheading — A subheading introduces or supports the heading above it.

.quote-text — “A quotation styled with the quote-text class.”

.caption — Caption styling for any element; same look as a native figcaption without the Cool Grey color, but usable anywhere.

Line Heights

Decanter's leading scale. half and trim are for tightly cropped display text like the wordmark.

Inline Elements & Code

This is a text link — digital blue, semibold, underlined; black on hover/focus.

Strong importance, emphasis, bold, italic, and underlined annotation.

Deleted text, inserted text, and strikethrough.

Superscript^® and subscript for H₂O. Small text for fine print.

Abbreviation: HTML, a short inline quotation, a citation, and a definition — cite, var, dfn, and address render unitalicized by design.

The mark element highlights, and x = y uses the var element.

The time element: July 7, 2026

Keyboard input Cmd, inline code <div>code</div>, and sample output program output render at 0.9em in the mono stack.

Preformatted Text

  P R E F O R M A T T E D T E X T
  ! " # $ % & ' ( ) * + , - . /
  0 1 2 3 4 5 6 7 8 9 : ; < = > ?
  

Lists

WYSIWYG

The .wysiwyg wrapper sets vertical rhythm for unstructured rich text such as CMS output — heading top margins, paragraph and list spacing, and trimmed first/last children.

Primary & Grayscale

Cardinal Red

Grayscale

Web Interactive

Digital Red

digital-red-dark shares its value with cardinal-red-dark.

Digital Blue

Digital Green

Accent

Palo Alto

Palo Verde

Olive

Bay

Sky

Lagunita

Lagunita 20 and 40 are used for form elements.

Poppy

Spirited

Illuminating

Plum

Brick

Archway

Stone

Fog

Centered Container

.centered-container (alias .cc) applies Stanford's responsive screen margins on both sides — 20px at XS up to 100px at XL — and caps content at 1500px, centered, above the 3XL breakpoint. Every section of this page is wrapped in one. Nested containers get no extra padding.

Grid Gap

.grid-gap applies Decanter's responsive gutters in one class: gap-xs (20px) → gap-lg (36px) at LG → gap-xl (40px) at XL → gap-2xl (48px) at 2XL. The gap tokens can also be used directly, e.g. gap-xs lg:gap-lg.

Responsive Spacing

The rs-* utilities apply spacing that grows at the md and 2xl breakpoints in steps 0 through 10. Available for padding (rs-p, rs-px, rs-py, rs-pt, rs-pr, rs-pb, rs-pl), margin (rs-m and friends), and gap (rs-gap, rs-gap-x, rs-gap-y). The shaded area below is the padding — resize the window to watch it change.

.rs-gap-2

Spacing Scale

Decanter sets --spacing to one pixel-equivalent unit, so numeric spacing utilities read as pixels under either entry: p-16 is 16px and w-300 is 300px. Em-based steps 01em–1em are for typography rhythm (e.g. mb-05em), and prose-wide (75ch) complements the core prose (65ch) measure.

Aspect Ratios

Tailwind v4 accepts bare ratios — no brackets needed: e.g., aspect-3/2 just works. aspect-square covers 1x1. aspect-video covers 16x9.

Breakpoints

Decanter's breakpoints differ from Tailwind's defaults and add 3xl and 4xl.

Current breakpoint: XS <576px SM ≥576px MD ≥768px LG ≥992px XL ≥1200px 2XL ≥1500px 3XL ≥1700px 4XL ≥2000px

Stanford Logo

The .logo component sets the Stanford wordmark font, trim line height, and cardinal red. Override the color for dark backgrounds.

Buttons

The .button component works on buttons, inputs, and links. Hover/focus transitions use Decanter's default 0.25s duration.

Button element Link styled as button

Tables

Default table (base styles)

.table-borderless

Forms

Decanter's form classes (.input, .select, .textarea, .checkbox, .radio, .label, .legend, .fieldset) are opt-in: they ship together with the @tailwindcss/forms reset via @import 'decanter/forms'.

Images & Captions

The base layer styles figcaption automatically; .caption gives any element the same treatment.

Stretched Link

Add .stretched-link to a link inside a relative container to make the whole container clickable.

Skip Link

This page starts with <a href="#main-content" class="skiplink">. It is visually hidden until focused — reload and press Tab to reveal it in the top left corner.

Link Utilities

These utilities style <a> tags nested inside the element they are applied to — ideal for WYSIWYG content and components with open fields. .link-* and .link-hocus-* accept any palette color.

.link-digital-green — a link colored digital green.

.link-plum — a link colored plum.

.link-hocus-poppy-dark — turns poppy dark on hover/focus.

.link-no-underline — a link with no underline.

.link-underline — a link with an underline.

.link-normal — a normal weight link.

.link-semibold — a semibold link.

.link-bold — a bold link.

Text Shadow (Legacy)

Decanter's v7 text shadows are kept as .text-shadow-legacy*; Tailwind v4 now ships its own text-shadow-* scale.

Custom Variants

Decanter adds hocus: (hover or focus), hocus-visible:, and hocus-within:. The group versions (group-hocus: etc.) come along automatically. Hover or tab through the cards: