Foundations — InsideBoard Design System

Primary palette

primitive.color.*

The five foundational colors of the brand. Ink and Ivory are the primary pair — every surface starts from them. Ember is the signal color, used sparingly. Gray-50 and Stone are structural grays for backgrounds and separators.

--ink #1B1712

--ivory #FAFAF9

--white #FFFFFF

--gray-50 #F4EFE6

--stone #EAE6DF

--ember #EE2E20

Warm gray scale

--gray-100 → --gray-950

Ten steps of warm gray from near-white to near-black. Used for borders, muted text, dividers, and subtle backgrounds. All grays carry a warm (slightly golden) undertone to stay in harmony with Ink and Ivory.

--gray-100 #EAE3D6

--gray-200 #DDD4C4

--gray-300 #C9BEAB

--gray-400 #AFA38E

--gray-500 #8F8472

--gray-600 #6F6656

--gray-700 #4F483C

--gray-800 #332E26

--gray-900 #1B1712

--gray-950 #0D0B08

Functional palette

--fn-*

Twelve semantic colors for data visualization, status indicators, and category coding. Never used as brand colors — they carry meaning through context, not through identity. Always on an Ink or Ivory background, never on each other.

--fn-steel #4A7FBF

--fn-slate #4A5F8A

--fn-teal #2E7A82

--fn-pine #3D7A62

--fn-moss #6B8F5A

--fn-amber #C8882A

--fn-ochre #B8963E

--fn-brick #D4725A

--fn-red #C94040

--fn-plum #7A5A8F

--fn-mauve #9E6B82

--fn-brown #7A4F35

IRON Agents

--fn-coral --fn-blue --fn-sage --fn-lavender Reserved

Four colors reserved exclusively for the IRON agent system. Each maps to one agent type. Not available for general use — assigning these to other purposes would break the agent color convention.

--fn-coral #F08B73

--fn-blue #7DA8E8

--fn-sage #B8D29C

--fn-lavender #B79BE8

Semantic tokens

semantic.*

Intent-based aliases that sit above the primitive palette. Use these in components and layouts — never reference primitive tokens directly. A semantic token says what a color does (--bg-canvas, --text-primary), not what it is (--ivory, --ink). This makes future palette changes non-breaking.

--bg-canvas → var(--ivory) #FAFAF9

--bg-paper → var(--white) #FFFFFF

--bg-surface → var(--stone) #EAE6DF

--text-primary → var(--ink) #1B1712

--text-primary-inverse → var(--ivory) #FAFAF9

--text-muted → rgba(250, 250, 249, 0.55) ivory · 55%

--text-on-color → var(--ivory) #FAFAF9

Typography

--serif --sans --mono

Three typefaces, three roles. The serif carries the brand register — weight, authority, editorial tone. The sans handles the product register — clarity, function, neutral presence. The mono is reserved for technical references, labels, and code.

Display — Outfit 300 · 88px

The brand
in motion

Title — Outfit 600 · 44px

Section heading

Body — Outfit 400 · 16px · leading 1.55

InsideBoard augments human managers with AI agents that act, not just advise. Every decision a manager makes is an opportunity to learn, adapt, and improve the system.

Mono — JetBrains Mono 400 · 13px

const signal = await agent.observe(context);
return signal.confidence > 0.8 ? act(signal) : defer();

Spacing scale

--s1 → --s9

Nine steps of spacing, from 4px to 80px. Always use a spacing token — never a raw pixel value in a component. The scale is geometric: each step roughly doubles the previous. --s4 (16px) and --s5 (24px) are the most commonly used.

--s1 · 4px

--s2 · 8px

--s3 · 16px

--s4 · 24px

--s5 · 32px

--s6 · 48px

--s7 · 64px

--s8 · 96px

--s9 · 128px

Density

--density

A single multiplier token that scales spacing globally. Adjusted via the density tweaks panel in the Brand OS. Compact mode reduces spacing throughout; comfortable mode increases it. Components consume --density indirectly through spacing tokens.

--density :root (default) 1

--density [data-density="comfortable"] 1.15

--density [data-density="compact"] 0.85

Component tokens

component.*

Scoped tokens that encode the design intent of specific components — nav, hero, chapter, callout, formula. They reference primitive or semantic tokens and document what was previously implicit in the CSS. Not yet consumed by brandOS-components.css — adoption is an incremental future step.

Nav

--nav-bg → var(--white) #FFFFFF

--nav-border → var(--gray-200) #DDD4C4

--nav-accent → var(--ember) #EE2E20

Hero

--hero-accent → var(--ember) #EE2E20

--hero-lede → var(--gray-600) #6F6656

--hero-border → var(--gray-200) #DDD4C4

Chapter

--chapter-accent → var(--ember) #EE2E20

--chapter-principle → var(--gray-600) #6F6656

Callout

--callout-border → var(--gray-300) #C9BEAB

--callout-border-warn → var(--ember) #EE2E20

Formula

--formula-bg → var(--ink) #1B1712

--formula-text → var(--text-primary-inverse) #FAFAF9