Typography

The single reference for type in Wildflower — families, weights, the size scale, heading styles, and spacing. If you are picking a font size, this page is the place to look it up.

Source of truth: packages/web-tailwind/partials/typography.css.

Font families

Three families, all loaded from a single Typekit kit in src/app/layout.tsx. Each font-* utility maps to a --font-* custom property declared in @theme.

Every family falls back through -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'segoe ui', 'Ubuntu', 'roboto', 'noto', Arial (or ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas for mono).

dbt Summit faces

Three extra display faces exist for the dbt Summit microsite and Summit campaign blocks. Do not use them in general marketing pages.

bugrino is self-hosted via an @font-face rule in typography.css (weight 500) so it works outside the Summit layout, which loads it through next/font.

Type scale

Twelve steps, declared as --text-* properties in @theme. Sizes are in rem and assume a 16px root.

Three steps are deliberately retuned from Tailwind's stock scale — text-3xl (30px → 32px), text-6xl (60px → 64px), and text-8xl (96px → 88px). If a design comp says 32px, that is text-3xl here, not text-4xl.

Headings

Six heading utilities. Each one applies font-display, a size, font-semibold, and a line height — and all but heading-5 step up a size at the xl breakpoint (1280px).

The live specimens below render at your current viewport width, so widen or narrow the window to see the xl step.

Heading utilities are not heading tags

Appearance and document structure are separate decisions. Pick the tag from the page outline and the appearance from the design.

Use the base components in packages/web-ui/components/Elements.tsx. Nine times out of ten these are all you need — each one pairs a heading-* utility with its matching semantic tag, and the as prop overrides the tag when the outline calls for something different.

import { H2, SuperH1 } from '@dbt-labs/web-ui'
 
{/* Standard case — appearance and tag already agree */}
<H2>How data gets done</H2>
 
{/* A page title that should look smaller than heading-1:
    keep the h1 tag, borrow the heading-2 appearance */}
<H2 as='h1'>Pricing</H2>
 
{/* A visually large statement that is not the page title */}
<SuperH1 as='h2'>How data gets done</SuperH1>

The same file also exports Tag (a span with the tag utility), UL, and OL.

Props: as sets the rendered tag, className is appended to the component's default classes, and customID overrides the id. Every component derives an id from its own text content by default, so headings are deep-linkable for free.

Reach for a raw heading-* class only in the rare case where you are adjusting text outside these components and the as and className props cannot express it. Prefer the components by default.

Keep one h1 per page and do not skip levels in the tag hierarchy.

Body and mono text

text-body is the default for paragraph copy. For secondary or dense UI text, drop to text-sm with an explicit leading-[1.5].

Pair text color with a semantic token

Size and color are separate decisions. Use the semantic text tokens rather than raw palette values.

<p className='text-body text-neutral-secondary'>
  Body copy in the standard secondary text color.
</p>

See Design tokens for the full list.

Line height

There is no leading-* theme override, so Tailwind's stock leading utilities apply. The type system uses only two ratios in practice:

Rules of thumb: as type gets larger, leading gets tighter. Body copy needs 1.5 for readability at long measures; display type at 64px and up needs 1 or the lines drift apart.

Letter spacing

Wildflower does not override Tailwind's tracking-* scale, and normal text — body copy and headings alike — should use default tracking. Never letter-space lowercase body copy.

The one established exception is uppercase eyebrow labels, where tracking is required to keep all-caps legible. The de-facto recipe across the site is:

<p className='font-mono text-xs font-normal uppercase tracking-[0.2em] text-brand-primary'>
  Case study
</p>

Tracking values in use for eyebrows range from tracking-[0.1em] to tracking-[0.2em] (tracking-widest is 0.1em). Prefer tracking-[0.2em] for small mono eyebrows and tracking-[0.1em] at text-sm and above.

Text spacing and measure

The theme provides no vertical-rhythm utility, so spacing between text elements is set per layout with standard Tailwind spacing. Use these defaults for consistency.

Vertical spacing

Prefer a space-y-* on the container over margins on individual children — it keeps the first and last child flush with the container edges.

<div className='space-y-6'>
  <div>
    <p className='mb-3 font-mono text-xs uppercase tracking-[0.2em] text-brand-primary'>
      Platform
    </p>
    <h2 className='heading-2 mb-4'>How data gets done</h2>
    <p className='text-body text-neutral-secondary max-w-2xl'>
      Body copy, constrained to a readable measure.
    </p>
  </div>
</div>

Measure (line length)

Long lines are hard to read. Constrain body copy to a maximum width rather than letting it span a full 12-column grid.

Aim for 60–80 characters per line. Headings can run wider than body copy because they are short.

Choosing a size

1. Is it a heading? Use a base component from Elements.tsx (H1–H6, SuperH1), chosen by hierarchy, not by pixel value — with as if the tag needs to differ.
2. Is it paragraph copy? Use text-body, constrained with max-w-2xl.
3. Is it code, a token, or an eyebrow? Use font-mono with an explicit size.
4. Is it dense or secondary UI text? Use text-sm with leading-[1.5] and a text-neutral-tertiary token.
5. Only if none of the above fit, use a raw text-* size — and set leading-* explicitly.

Source files