Tokens

Typography

Cedar's type system is defined entirely as Figma variables. Two font families (Inter for UI, Fira Code for mono), a responsive size scale with Mobile and Desktop modes, and nine semantic role tokens.

Font families

font/base · --font-base

Inter — UI typeface

Used for all UI text, labels, and body copy.

font/mono · --font-mono

Fira Code — monospace

Used for token names, code examples, and technical references.

Size scale Responsive

Type sizes use Figma's variable modes to define separate Mobile and Desktop values. The CSS custom properties respond to viewport via media query.

TokenCSS varMobileDesktop
size/xs--size-xs12px14px
size/sm--size-sm16px18px
size/md--size-md18px20px
size/lg--size-lg20px24px
size/xl--size-xl24px32px
size/2xl--size-2xl32px40px
size/3xl--size-3xl40px56px
size/4xl--size-4xl48px72px

Role tokens

Semantic font-size roles that components use directly. Hardcoded at desktop values — a planned v2 improvement is to alias these to the responsive size tokens.

The quick brown fox jumps over the lazy dog.
body/sm·--body-sm·16px
The quick brown fox jumps over the lazy dog.
body/md·--body-md·18px
The quick brown fox jumps over the lazy dog.
body/lg·--body-lg·20px
Section heading, small
heading/sm·--heading-sm·18px
Section heading, medium
heading/md·--heading-md·20px
Section heading, large
heading/lg·--heading-lg·24px
Page title, small
title/sm·--title-sm·20px
Page title, medium
title/md·--title-md·24px
Page title, large
title/lg·--title-lg·32px