Design Language & Tokens

The approval surface for Triform's visual language: typography, spacing, color, surfaces, motion, prose, and accessibility. Every component should prove itself here before it moves into the platform.

Design Contract

Start in /components

New primitives become real here first: documented, token-backed, responsive, accessible, and reviewable outside workspace state.

Use tokens, not taste

Fonts, spacing, color, radius, elevation, motion, and focus states must resolve through the shared token families below.

Promote only when settled

The platform should consume approved primitives instead of copying one-off CSS from product surfaces back into the design system.

Keep iteration cheap

Identity details such as the heading accent stay configurable, so we can tune the language without rewriting every caller.

Color Palette

Identity, Signals, Text

The 16 brand colors that compose every Triform surface. Identity hues map elements to channels (data, structure, compute, …); signal hues drive status indicators; text hues form the type hierarchy.

--tf-cta#F5D96E
--tf-data#3B82F6
--tf-structure#8B5CF6
--tf-compute#10B981
--tf-experience#F59E0B
--tf-external#EC4899
--tf-governance#F97316
--tf-actions#84CC16
--tf-cognition#06B6D4
--tf-agents#D946EF
--tf-signal-good#22C55E
--tf-signal-caution#EAB308
--tf-signal-bad#EF4444
--tf-text-primary#D4D4D8
--tf-text-secondary#A1A1AA
--tf-text-muted#71717A

Spacing Scale

10 Spacing Tokens

The canonical spacing scale. Each --spacing-* token resolves to a multiple of the 4px grid. The bar widths below show the relative sizes — visual ratio is the spec.

--spacing-xs
4px
--spacing-sm
8px
--spacing-3
12px
--spacing-3p5
14px
--spacing-md
16px
--spacing-5
20px
--spacing-lg
24px
--spacing-xl
32px
--spacing-2xl
48px
--spacing-3xl
64px

Typography Scale

Type Ramp

Seven type sizes — every body and heading lands on this scale.

The quick brown fox--text-xs0.625rem
The quick brown fox--text-sm0.75rem
The quick brown fox--text-base1rem
The quick brown fox--text-lg1.125rem
The quick brown fox--text-xl1.25rem
The quick brown fox--text-2xl1.5rem
The quick brown fox--text-3xl2rem

Type Axes

Three independent axes shape the text: weight, line-height, and letter-spacing. Each card shows the available steps in one axis.

Font Weight

The quick brown fox--font-weight-normal

The quick brown fox--font-weight-medium

The quick brown fox--font-weight-semibold

The quick brown fox--font-weight-bold

Line Height

Two lines of body text demonstrate vertical rhythm and paragraph density--line-height-none

Two lines of body text demonstrate vertical rhythm and paragraph density--line-height-tight

Two lines of body text demonstrate vertical rhythm and paragraph density--line-height-snug

Two lines of body text demonstrate vertical rhythm and paragraph density--line-height-normal

Two lines of body text demonstrate vertical rhythm and paragraph density--line-height-relaxed

Letter Spacing

TYPOGRAPHY--letter-spacing-tight

TYPOGRAPHY--letter-spacing-normal

TYPOGRAPHY--letter-spacing-wide

TYPOGRAPHY--letter-spacing-wider

Prose Rhythm

MarkdownView

Long-form generated or authored content should use the MarkdownView prose surface. The default heading rule is intentionally quiet; the brand accent is available when the content needs a stronger identity mark.

Operational Notes

Document density is for READMEs, generated docs, legal text, and longer platform explanations.

  • Headings carry rhythm and an adjustable identity mark.
  • Inline tokens and links stay readable.

Panel density

Panel prose is tighter and avoids decorative heading rules. Use it inside inspectors, drawers, and narrow work surfaces.

Chat density is compact for streaming output, status explanations, and assistant messages.

Radius Scale

6 Radius Tokens

From hairline (xs) through pill (full). Each swatch applies the same radius to a tile, button, and chip so small-step differences are visible at real component sizes.

--radius-xs2px
--radius-sm4px
--radius-md6px
--radius-lg8px
--radius-xl12px
--radius-full50%

Shadow Scale

8 Shadow Presets

Shadows compose elevation. The first four use the active circle color as glow tint; the rest are neutral depth overlays.

--shadow-glowIdentity halo
--shadow-glow-lgStrong identity halo
--shadow-cardResting card
--shadow-card-hoverHover lift
--shadow-subtleSubtle depth
--shadow-elevationModal elevation
--shadow-windowFloating window
--shadow-window-lgLarge window lift

Motion Scale

6 Transition Presets

Each preset pairs duration with easing. Every row uses the same travel distance; frame marks show the position at shared time ticks so snap, glide, and overshoot stay comparable.

--transition-instantreset0ms
no tween
--transition-microhover / focus80ms
blink
--transition-quicktoast / tooltip120ms
snap
--transition-standardoverlay / layout200ms
default
--transition-expressivecelebrate300ms
spring
--transition-gentlenavigation400ms
glide

0 / 100 / 200 / 300 / 400ms frame marks

Canvas Island Drill

Enter / leave the island

On the canvas, clicking a category island reveals its members in place — the camera stays fixed and the members bloom out from the clicked island's centre. Drilling back out reassembles the category map from the middle. Both directions share one envelope: incoming tiles scale 0.35 → 1 and fade 0 → 1 while translating from the anchor to their resting cell, on the island-open motion preset (the gentle / navigation tier — 400ms). Hover the stage to replay.

Members bloom from the island anchor · --animation-island-open