02
Color — bone, ink,
iodine, and one warm coral.
Three working colors, two surfaces. Bone is the page. Ink is
the linework and the type. Iodine is the agent — the system, the
signal, the live channel. Coral is the human — the mascot,
warmth, escalation. Everything else is restraint.
Roles · ramps · contrast · tokens · in-the-wild
02.1
Roles three colors · three jobs
A · INK
ink.
The spine. Every line, every glyph, every rule. The wordmark. Always readable, never decorative.
Linework · type · structure
HEX#0B0B0F
OKLCH0.16 0.012 290
CONTRAST17.9 : 1 on bone
B · IODINE — LEAD ACCENT
iodine.
The agent. The live signal. Everything Beora does on its own wears iodine.
Agent · live · system
HEX#C8D900
OKLCH0.86 0.18 113
USE WITHink type
C · CORAL — SUPPORT
coral.
The human note. Mascot, escalation, warmth. Demoted from primary in V4.
Human · escalation · accent
HEX#E06148
OKLCH0.66 0.16 30
USE WITHink or bone
The single most important rule: iodine leads, coral supports. If you find yourself reaching for coral as a primary button, a header glow, or a chart highlight — stop. Iodine is the system color. Coral is reserved for the mascot and for the few moments where a human voice needs to push through clinical chrome.
02.2
The ink ramp five steps · type, lines, hairlines
INK#0B0B0F
INK·2#1E1E24
INK·3#5A5A64
INK·4#A3A3AC
INK·5#D4D4D8
INK is for type and 1px linework. INK·2 is secondary type. INK·3 is metadata and captions. INK·4 is light dividers. INK·5 is the hairline (`var(--hair)`) — the most common rule in the system.
02.3
The bone ramp page · panel · sunken · paper
PAPER#FFFFFF
BONE#FAFAF7
BONE·2#F2F2EE
BONE·3#E8E8E3
BONE is the page — warm, slightly off-white. PAPER is for cards and dialogs that need to lift off the page. BONE·2 is the sunken panel (lists, sidebars). BONE·3 is the deepest sunken — hover, selected.
02.4
The iodine ramp tint · ink · fill · ramp · deep · bottom
IOD·50#F4F6D2
IOD·200#E4EC5C
IOD·500#C8D900
IOD·INK#D8E820
IOD·700#7A8A00
IOD·900#1F2600
✓
IOD·500 is the pop, IOD·700 is the type
IOD·500 is a fill color — never type below 24px. For text, use IOD·700 on bone or IOD·INK on ink.
✓
IOD·50 is the tint background
When you want the agent's voice to whisper rather than shout — drafts, AI-generated narrative, trace highlights — use IOD·50 with ink type.
02.5
The coral ramp tint · base · deep
CORAL·TINT#FCE9E3
CORAL#E06148
CORAL·DEEP#B84830
CORAL is the mascot's body. CORAL·DEEP is for type and small UI moments (escalation badges, critical indicators). CORAL·TINT is a campaign background — never a default surface.
02.6
Signal colors ok · warn · critical · live
OK#0B7A3B
WARN#C67A00
CRITICAL#B3261E
LIVE#D43838
Signal colors are flat — never gradients, never with shadow. OK and WARN are for vital ranges. CRITICAL is for breach. LIVE is the recording-red dot — only for live state, never for buttons or type.
02.7
Contrast approved pairings only
ink on bone
INK / BONE17.9 · AAA
bone on ink
BONE / INK17.9 · AAA
ink on iodine
IOD-900 / IOD-5009.4 · AAA
iodine type on bone
IOD-700 / BONE5.7 · AA
iodine on ink
IOD-INK / INK12.1 · AAA
coral on coral-tint
CORAL-DEEP / CORAL-TINT5.0 · AA
coral type on bone
CORAL-DEEP / BONE4.9 · AA
bone on iodine fill
BONE / IOD-5002.1 · FAIL
bone on coral
BONE / CORAL3.6 · LARGE-AA ONLY
Two things never to do: bone on iodine-500, and bone on coral as body text. They look fine on the screenshot you took at 100%; they fail at 12px. The system is built to be readable for the night-shift caregiver squinting at a phone — keep it that way.
02.8
In the wild five canonical surfaces
A · BONE PAGE — DEFAULT
All twelve dimensions green. Sleep 7h 12m.
B · INK PANEL — CLASSIFIED CHROME
CLASSIFIED · CARE TEAM
Serenity House · Bluebell wing.
C · IODINE TINT — AGENT DRAFT
"Proposing 18:00 metoprolol shift — awaiting your countersign."
D · IODINE FILL — LIVE BADGE
Beora is live. Listening on three channels.
E · CORAL TINT — ESCALATION
Critical: third nocturnal BP spike this month.
02.9
Role rules do · don't
✓
Iodine is the agent's color
When the system speaks on its own — drafts, summaries, suggestions, the live dot — use iodine. The user learns: iodine = Beora is doing something.
✕
Don't make iodine a primary button
Iodine is a signal, not a CTA. Primary buttons are ink-on-bone, then bone-on-ink. Iodine is the color the eye lands on after — never the call to action.
✓
Coral for the human, coral for the breach
The mascot wears coral. So does the rare moment where care-team attention is genuinely needed: an unread critical, an unsigned draft. Coral earns a glance.
✕
Don't decorate with coral
No coral underlines, no coral hairlines, no coral hover states on links. If you're using coral and nothing is on fire, the system is shouting at the wrong moment.
✓
Two surfaces, one accent per screen
A given screen is bone or ink. Pick one accent — usually iodine. Coral may join only if there's an actual critical. Three accents on one screen is two too many.
✕
Don't gradient anything
No iodine→coral, no bone→bone-3, no soft glows. The system reads as instrumentation; instrumentation is flat. The single exception: the live-dot's iodine glow, which is a focal moment, not a surface.
02.10
CSS tokens use these · not raw hex
VARIABLEVALUEUSESAMPLE
--ink #0B0B0Ftype, 1px linework, the wordmark
--ink-3 #5A5A64metadata, captions, mono labels
--ink-5 #D4D4D8hairlines (the most common rule)
--bone #FAFAF7the page · default background
--bone-2 #F2F2EEsunken panels, sidebars
--bone-3 #E8E8E3hover, selected row
--paper #FFFFFFcards, dialogs, raised surfaces
--iodine-50 #F4F6D2agent draft tint · whisper
--iodine-500 #C8D900live fill · the pop
--iodine-700 #7A8A00iodine TYPE on bone
--iodine-ink #D8E820iodine type on dark ink
--coral #E06148mascot body · the human note
--coral-deep #B84830coral TYPE · escalation badge
--coral-tint #FCE9E3campaign background · escalation panel
--signal-ok #0B7A3Bin range · vital green
--signal-warn#C67A00watch · vital amber
--signal-crit#B3261Ecritical · breach