Typography tokens

Responsive typography presets ship as CSS custom properties that default to desktop and switch at max-width: 767px to mobile — i.e. viewports below M (S and XS bands). See Breakpoint tokens. The font stylesheet inlines 767px in @media because browsers do not allow var() in media query widths.

Source: packages/design-tokens/src/tokens/typography/typography.json (excluded from Style Dictionary). Build: build-typography-tokens.js (invoked from build-tokens.js) appends responsive rules to dist/css/default.css and desktop preset exports to dist/js/default.js.

@import "@signicat/catnip-design-tokens/css";

Use the composite variable for the full preset, or -font-size, -line-height, and other property variables. Examples: font: var(--catnip-font-display-l);, font: var(--catnip-font-paragraph-m);

Reference table

The table lists desktop values from JS exports; the same CSS bundle applies mobile overrides inside the appended @media block.

No tokens were found for this category. Build the design-tokens package (e.g. pnpm run build in packages/design-tokens) and restart the docs dev server.

Weight, underline, and other text styling

Each preset’s composite token (--catnip-font-*) includes a default weight from the type scale. If you need another weight, set it with font-weight after (or alongside) font:

.title {
  font: var(--catnip-font-heading-l);
  font-weight: 600;
}

For links, emphasis, or legal copy, use the same pattern: pick the preset that matches size and line rhythm, then adjust weight only where the design calls for it.

Underline, strikethrough, and other decoration are not part of the font presets. Use normal CSS: text-decoration, text-underline-offset, text-decoration-thickness, etc. Those properties compose cleanly with font: var(--catnip-font-…).

Why not more tokens for weight or decoration?

• Smaller surface area: One preset per role (e.g. paragraph M) stays in sync with Figma’s responsive size and line-height. We avoid a combinatorial set of variables (*-bold, *-underlined, …) that duplicate the same metrics.
• Clear separation: Tokens carry typographic rhythm (scale, leading, family) shared across the product; weight and decoration are usually contextual (link vs body, state vs default) and are easier to read and maintain as plain CSS properties.
• No breakpoint duplication: Size and line-height already switch at the typography breakpoint. Weight and decoration rarely need different values per breakpoint, so keeping them as properties avoids re-declaring presets for every combination.