Ordryth — Color Scheme & Design Tokens

★ Core 4-Color Foundation (Primary Identity)

Essential Minimal Palette

The four fundamental colors that establish Ordryth's visual identity. All extended shades derive from these four.

01 • Canvas

Warm Stone

--bg

#FAF9F5

02 • Typography

Deep Charcoal

--text

#191816

03 • Brand Accent

Terracotta Coral

--accent

#C85A32

04 • Structure

Hairline Sand

--border

#E8E4DB

Brand Mark & Palette Interaction

On Warm Stone (Canvas)

On Pure White (Surface)

Inverted on Deep Charcoal

Inverted on Terracotta

01 — Backgrounds & Surfaces (Extended)

Warm Stone Main

--bg-main

#FAF9F5

Surface Pure

--bg-surface

#FFFFFF

Parchment Warm

--bg-surface-alt

#F4F1EA

Ivory Tint

--bg-surface-tint

#EFECE3

Surface Hover

--bg-hover

#E9E5DB

02 — Typography & Neutrals

Deep Charcoal

--text-primary

#191816

Warm Slate

--text-secondary

#56534E

Muted Stone

--text-muted

#848079

Inverted Light

--text-inverted

#FAF9F5

03 — Brand & Schematic Accents

Terracotta Ember

--accent-terracotta

#C85A32

Terracotta Deep

--accent-terracotta-deep

#B34E29

Cobalt Slate

--accent-cobalt

#234E70

Deep Verdigris

--accent-verdigris

#1D685E

Aligned Sage

--accent-sage

#2C6E49

Warm Ochre

--accent-ochre

#A86A1D

Rosewood Crimson

--accent-crimson

#9E3A3A

Muted Iris

--accent-purple

#6A557A

Nordic Steel

--accent-steel

#4A6274

04 — Borders & Structure

Subtle Line

--border-subtle

#E8E4DB

Medium Border

--border-medium

#DCD6CA

Focus Charcoal

--border-focus

#191816

05 — CSS Variables Tokens

:root {
  /* ========================================================================
     00. THE CORE 4-COLOR FOUNDATION (Primary Minimal Identity)
     ======================================================================== */
  --bg: #FAF9F5;                   /* 1. Canvas: Warm stone background */
  --text: #191816;                 /* 2. Typography: Deep charcoal text */
  --accent: #C85A32;               /* 3. Brand: Signature terracotta coral */
  --border: #E8E4DB;               /* 4. Structure: Hairline subtle sand */

  /* ========================================================================
     TYPOGRAPHY (Technical Minimalist)
     ======================================================================== */
  --font-serif: "Space Grotesk", sans-serif;
  --font-sans: "Inter", sans-serif;
  --font-mono: "Space Mono", monospace;

  /* ========================================================================
     EXTENDED PALETTE (Surfaces, Neutrals & Schematic Accents)
     ======================================================================== */
  /* Backgrounds & Surfaces */
  --bg-main: #FAF9F5;              /* Primary canvas */
  --bg-surface: #FFFFFF;           /* Card & panel surface */
  --bg-surface-alt: #F4F1EA;       /* Warm parchment secondary */
  --bg-surface-tint: #EFECE3;      /* Subtle chip & tag tint */
  --bg-hover: #E9E5DB;             /* Interactive element hover */

  /* Text & Typography */
  --text-primary: #191816;         /* Deep espresso-charcoal headline */
  --text-secondary: #56534E;       /* Warm slate body text */
  --text-muted: #848079;           /* Soft stone caption & metadata */
  --text-inverted: #FAF9F5;        /* Light contrast on dark buttons */

  /* Brand & Schematic Accents */
  --accent-terracotta: #C85A32;    /* Primary brand coral/terracotta */
  --accent-terracotta-deep: #B34E29; /* Deep brand hover */
  --accent-cobalt: #234E70;        /* Infrastructure, SDK & telemetry */
  --accent-verdigris: #1D685E;     /* Formal proofs & verified invariants */
  --accent-sage: #2C6E49;          /* Safety passes & status green */
  --accent-ochre: #A86A1D;         /* Deliberation, critique & attention */
  --accent-crimson: #9E3A3A;       /* Red-teaming, boundary limits & alerts */
  --accent-purple: #6A557A;        /* Interpretability & monosemantic latents */
  --accent-steel: #4A6274;         /* Extended context & memory cache */

  /* Structural Borders */
  --border-subtle: #E8E4DB;        /* 1px clean editorial dividers */
  --border-medium: #DCD6CA;        /* Card & input borders */
  --border-focus: #191816;         /* Active state stroke */
}