Color

All tokens use light-dark() and resolve with color-scheme. The sepia and mint named themes override a subset on :root[data-theme].

Surface

• --color-bg Page background. light: #FFFFFF · dark: #11191F
• --color-code-bg Background for code blocks and inline code. light: #F3F5F7 · dark: #181C25

Ink

• --color-heading Headings and strong emphasis. light: #181C25 · dark: #F1F3F5
• --color-body Body paragraph text. light: #2B3440 · dark: #C2C7D0
• --color-meta Captions, labels, footnotes, secondary text. Passes WCAG AAA (7:1) against --color-bg. light: #46596D · dark: #9FA6B2

Border

• --color-border Table rules, card and code block borders, fieldsets, scrollbar track. light: #E0E5EB · dark: #2D3540

Interactive

• --color-link Links, buttons, and accent elements. Passes WCAG AAA (7:1) against --color-bg. light: #015887 · dark: #7AB4DF
• --color-link-hover Hovered links and buttons. light: #013F61 · dark: #B2D3EC
• --color-focus-ring Keyboard focus ring, a low-opacity tint of --color-link. light: rgba(1, 88, 135, 0.15) · dark: rgba(122, 180, 223, 0.2)
• --color-ink-on-accent Text on accent surfaces: buttons, file input button, checkbox checkmark. light: #FFFFFF · dark: #11191F
• --color-selection Text selection background, computed as color-mix(--color-link 20%, --color-bg). Updates automatically with theme and link color.

State

• --color-error Invalid form fields (:user-invalid), caution callouts. light: #CF222E · dark: #F85149
• --color-success Valid form fields (:user-valid), tip callouts. light: #1A7F37 · dark: #3FB950

Type scale

Three voices: serif for reading, sans for structure and labels, mono for code. Two weights only: 400 and 700. h1 and h2 are fluid (clamp()); h3 through h6 are fixed.

• Heading 1

  clamp(1.625rem, 1.35rem + 1.2vw, 2rem) · 26–32 px · serif 700

• Heading 2

  clamp(1.375rem, 1.2rem + 0.8vw, 1.625rem) · 22–26 px · serif 700

• Heading 3

  1.25rem · 20 px · sans 700

• Heading 4

  1rem · 16 px · sans 700

• Heading 5

  0.875rem · 14 px · sans 700

• Heading 6

  0.8125rem · 13 px · sans 700

• Body text

  clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem) · 17–19 px · serif 400

• Interface / label

  0.9375rem · 15 px · sans 400
• Inline code 0.875em of parent · mono 400
• Kbd 0.875em of parent · mono 400 · border

• Blockquote

  body size · serif 400 · meta color · left border
• 0.875rem · 14 px · sans 400 · meta color

• Highlighted text

  body size · no weight change · tinted background

Font family tokens

• --font-serif Reading voice. Used on body, h1, h2, blockquote. "Source Serif 4", "Iowan Old Style", "Apple Garamond", Baskerville, "Times New Roman", …, serif
• --font-sans Structure voice. Used on h3–h6, tables, labels, captions, form controls. "Source Sans 3", -apple-system, BlinkMacSystemFont, "Avenir Next", …, sans-serif
• --font-mono Code voice. Used on code, pre, kbd. "Source Code Pro", Menlo, Consolas, Monaco, …, monospace
• --font-serif-latin The Latin-only serif stack. Used as the base for --font-serif so that the :lang(ar) override can prepend Noto Sans Arabic without a cyclic custom property. Same value as --font-serif
• --font-sans-latin The Latin-only sans stack. Used as the base for --font-sans for the same reason. Same value as --font-sans

For Arabic content (lang="ar"), both --font-serif and --font-sans resolve to Noto Sans Arabic prepended to the Latin stacks.

Spacing

A nine-step scale from 4 px to 64 px. Every block margin and padding in the framework draws from one of these tokens. The bars are sized by the tokens themselves.

• --space-3xs0.25rem · 4 px
• --space-2xs0.5rem · 8 px
• --space-xs0.75rem · 12 px
• --space-s1rem · 16 px
• --space-m1.5rem · 24 px
• --space-l2rem · 32 px
• --space-xl2.5rem · 40 px
• --space-2xl3rem · 48 px
• --space-3xl4rem · 64 px

Motion

All transitions and animations are suspended under prefers-reduced-motion: reduce. Hover the boxes below to see the easing curves.

Duration

• --duration-fast Button presses, checkmark draws, quick state changes. 150ms
• --duration-medium Theme cross-fade, disclosure panel expand and collapse. 250ms

Easing

• --ease-out-strong Entering elements: checkbox checkmark, button press scale, image hover-lift. Fast start, smooth settle. cubic-bezier(0.23, 1, 0.32, 1)
• --ease-in-out On-screen morphs: disclosure panel slide, summary marker rotation. cubic-bezier(0.77, 0, 0.175, 1)

Color transitions (links, buttons, form fields, theme cross-fade) use plain ease with no custom curve.

Other

• --radius 4 px — buttons, inputs, code blocks, swatches.
• --weight-regular 400 — normal weight across all three typefaces.
• --weight-bold 700 — the only other weight in the font manifest.

Fixed values

These are not custom properties; they are hard-coded in the element rules in src/rana.css. They are listed here for completeness.

• Column measure 65 ch — max-inline-size on main and article.
• Body line-height 1.6 — body text and blockquote.
• h1 line-height 1.25 · letter-spacing: -0.02em
• h2 line-height 1.3 · letter-spacing: -0.01em
• h3 line-height 1.4
• h4 line-height 1.45
• h5 / h6 line-height 1.5 · letter-spacing: 0.06em · text-transform: uppercase