GitHub

Tokens

Primitives, semantic aliases, and component tokens — the foundation every component reads from.

§1

Color palettes

Tailwind 50–950 scale. 600 is the solid brand/CTA step; 700/800 pass WCAG AA as text on white; 900/950 are ink. Swatches read live from the token CSS vars.

primary
50
100
200
300
400
500
600
700
800
900
950
secondary
50
100
200
300
400
500
600
700
800
900
950
slate
50
100
200
300
400
500
600
700
800
900
950
infosky
50
100
200
300
400
500
600
700
800
900
950
successemerald
50
100
200
300
400
500
600
700
800
900
950
warningamber
50
100
200
300
400
500
600
700
800
900
950
helpcyan
50
100
200
300
400
500
600
700
800
900
950
dangerrose
50
100
200
300
400
500
600
700
800
900
950
§2

Semantic mapping

Tier 2 aliases that components reference. Brand bindings happen here.

Action

--color-action-primary
brand-primary.9
--color-action-primary-hover
brand-primary.10
--color-action-secondary
brand-secondary.9

Text

--color-text-default
slate.12
--color-text-muted
slate.11
--color-text-subtle
slate.10
--color-text-inverse
slate.1
--color-text-link
action-primary
--color-text-on-primary
slate.1

Surface

--color-surface-default
slate.1
--color-surface-subtle
slate.2
--color-surface-raised
slate.1 + elevation
--color-surface-inverse
slate.12
--color-surface-dark
slate.12

Border

--color-border-default
slate.6
--color-border-strong
slate.8
--color-border-brand
brand-primary.7
--color-border-focus
brand-primary.9

Status

--color-success
emerald.9
--color-info
indigo.9
--color-warning
amber.9
--color-danger
rose.9
§3

Spacing scale

Used by every gap, padding, and margin token.

space-10.25rem
space-20.5rem
space-41rem
space-61.5rem
space-82rem
space-123rem
space-164rem
§3b

Semantic spacing

Intent-based aliases over the raw scale — components should read these, not raw --space-* steps.

--spacing-gap-inline0.5remIcon-to-label, inline element gap
--spacing-gap-control0.75remBetween adjacent form controls
--spacing-gap-content1remWithin a content block
--spacing-gap-cards1.5remBetween sibling cards in a grid/list
--spacing-gap-section3remBetween stacked page sections
--spacing-gap-hero4remAround hero / marketing blocks
§4

Shape scale

Border radius steps the shape preset maps to. 4xl/5xl added for hero and marketing surfaces (Wise-inspired softness).

none
xs
sm
md
lg
xl
2xl
3xl
4xl
5xl
full
§5

Typography scale

Heading sizes from sm through 7xl — independent from semantic level.

sm

The quick brown fox

md

The quick brown fox

lg

The quick brown fox

xl

The quick brown fox

2xl

The quick brown fox

3xl

The quick brown fox

4xl

The quick brown fox

5xl

The quick brown fox

6xl

The quick brown fox

7xl

The quick brown fox

§6

Elevation

Shadow steps used by Card, Popover, Dialog, Toast. -on-gray variants carry more contrast for use on subtle-gray surfaces; glow tiers are the Idin Studio brand signature.

flat
raised
raised-hover
raised-on-gray
floating
floating-on-gray
overlay
glow
glow-subtle
glow-lg
§7

Density

A real, token-level axis. One attribute reflows spacing across the whole subtree.

Density axis is live in @idinstudio/tokens
Set data-density="compact", "regular" (default), or "spacious" on any ancestor to reflow the subtree. A single --density-scale multiplier (0.8 / 1 / 1.15) drives it: padding and gap tokens resolve throughcalc(var(--space-*) * var(--density-scale)), and interactive control heights usemax(base, calc(base * scale)) so compact never shrinks a control below its touch-target floor (WCAG 2.5.5). Not faked at the showcase layer — it's wired in the token JSON.