Design System / Foundations

Show the receipts.

Every value below is read live from echo-tokens.css — not retyped — so this page can’t drift from the system the screens ship. Toggle the contract on the right.

… tokens · one source of truth

Color

Monochrome at rest. Hue only where it carries meaning — Crimson / Saffron / Emerald for signal, Iris for active only.

Neutrals · resting palette
Text
Signal
Brand · Iris

Type scale

Roles, not free sizes. Proof text on the left; live token + computed size on the right.

Fonts

Two families. Inter for UI copy; JetBrains Mono for IDs, metrics, timestamps.

ECHO Threat Intel
--font-sans ·
42.8K · IOC_185.220
--font-mono ·

Guidelines

The rules that keep the system from drifting.

Do

  • Read tokens (var(--…)), never retype hex or px into screens.
  • Keep one page background (--background). Reserve --card for elevated surfaces — never full-bleed sections.
  • Treat Iris (--brand) as active/selected fill or ring only. Use --brand-foreground for Iris text.
  • Pair every signal color with an icon or label — never color alone.
  • Snap spacing to --sp-*. Keep nav in echo-chrome.js.

Don’t

  • Don’t hardcode a hex or a px. If it isn’t a token, it doesn’t ship.
  • Don’t put Iris on buttons or use it as decoration.
  • Don’t invent a third text brightness — dim tiers are documented exceptions only.
  • Don’t use radius 13 or 16 — they’re off-scale and lint-fail.
  • Don’t animate for ornament. Every motion must communicate state.

← Overview · DESIGN.md · design-tokens.json

Copied