01 / Voice
Quiet confidence
Earn attention, don't demand it. Defaults low-stimulation — color, motion, and noise are opt-in for moments that matter.
COLORS
36
Design System · Release Candidate
APR 20 2026 / 2.1.0
Depth.
Not noise.
A single source of truth for a product built on quiet confidence — where materials earn their surface and position on the depth gradient encodes meaning.
/ RECONCILIATION RELEASE
Resolves 26 points of drift. Formalizes Liquid Glass. Adopts five 2025–26 trends at aggression 6/10 — chosen, not copy-pasted.
FOAM
TRENCH
0mShallowSurfaceMidDeepTwilightAbyss–11,000m
MATERIALS
05
CARDS
05
TYPEFACES
03
§ 01 · PRINCIPLES
Five
guardrails.
These are product-level expressions of the Sage × Creator archetypes. Nothing in the system breaks them.
02 / Metaphor
Depth as meaning
Sage → Ocean → Abyss is not decoration. Position on the depth gradient encodes informational weight.
03 / Systems
Calm defaults
The system rewards restraint. One Liquid Depth card per screen, maximum. A flat card is the default; a glass card is a promotion.
04 / Dark mode
Abyss is a place
Not an absence of light. Text tokens carry a 2–3% purple undertone. Never neutral grey — it flattens the character.
05 / Materials · new
Earn their surface
Glass, depth, and gradient are not decoration. They're assigned to surfaces that move, float, or emphasize.
∴ Ratio
50 / 20 / 10 / 10 / 10
Sand · Navy · Sage · Ocean · Ember. Any surface that breaks this is deliberate and time-boxed within the flow.
§ 02 · COLOR
The depth
gradient.
Canonical values are OKLCH. Perceptually uniform lightness means dark-mode brightening is predictable.
/ HEX IS FALLBACK. OKLCH IS SOURCE.
010m · Foam
Foam
#D4EDE4
02−10m · Shallow
Shallow
#7EC8C8
03−200m · Surface
Resonance Teal
#3B8C8C
04−600m · Mid
Ocean Mid
#2B6E8A
05−1500m · Deep
Ocean Deep
#1E4D7A
06−3000m · Twilight
Twilight
#1E3364
07−6000m · Abyss
Abyss
#2A1B4E
08−11000m · Trench
Trench
#1A1232
Brand accents
Warm. Grounded. Human.
15.8 AAA
Deep Navy
#1A1F2E
oklch(21.3% .028 275)
CANVAS
Warm Sand
#FAF8F5
oklch(97.5% .005 75)
4.52 AA
Sage Deep
#6B8F7A
oklch(60.8% .035 160)
4.72 AAₗ
Resonance
#3B8C8C
oklch(55.1% .061 193)
5.10 AA
Clarity Blue
#5B7FBF
oklch(55.0% .103 262)
4.46 AAₗ
Ember
#C75C3A
oklch(54.8% .122 35)
Secondary · editorial
Atmosphere, not alarm.
5.93 AAA
Storm Blue
#4A5E78
oklch(42.8% .047 250)
5.7 AA
Slate
#525868
oklch(42.1% .014 268)
ATTN
Sunlit Amber
#D4A952
oklch(74.8% .125 80)
FILL
Dusk Rose
#C4A08A
oklch(73.5% .045 40)
ACC
Twilight Lav.
#9B8EB0
oklch(63.5% .055 305)
3.05 DEC
Sage Mist
#8FA89A
oklch(69.2% .029 158)
Two different "dark mode Teal" hexes, each computed against a different mental model. OKLCH ends that ambiguity.
— v2.1 Reconciliation, § 2.2
Dark-mode lift, predicted
OKLCH LIGHTNESS AXIS
§ 03 · TYPOGRAPHY
Three
voices.
Variable-font native with optical sizing. Fluid scale interpolates smoothly from mobile-small to 1920px — no breakpoint table.
/ 01 · BRAND
Neue Haas Grotesk Display
wght 300 · opsz 144
Aa
/ 02 · PRODUCT
Inter variable
wght 400–700 · opsz auto
Rg
/ 03 · EDITORIAL
Spectral
wght 300 · italic 400
Fg
/ 04 · UTILITY
JetBrains Mono
wght 400–600
</>
Fluid Type Scale
clamp() interpolates the viewport. Designers stop choosing.
320px ──────────── 1920px
displayDepth. Not noise.clamp(56, 3rem+3vw, 120)
5xlA place, not absence.clamp(48, 2.4+2vw, 80)
4xlMaterials earn surface.clamp(38, 2+1.2vw, 56)
3xlThe one contrast table.clamp(30, 1.7+.8vw, 40)
2xlOKLCH is canonical.clamp(24, 1.4+.5vw, 30)
xlLiquid Depth is a promotion.clamp(20, 1.2+.3vw, 24)
baseSystem floor — 17px. Never smaller for interactive body.clamp(15, .95+.15vw, 17)
xsCaptions · metadata · labelsclamp(11, .72+.05vw, 12)
Spectral may appear in a product screen only inside an editorial container. It must not appear in UI chrome, nav, data displays, or Shore, Glass, Depth, or Liquid Depth cards.
— § 3.1 · Revised from v2.0
Focus Mode
The floor lifts to 20px.
Not an alternate scale — a multiplier applied via [data-density="focus"]. Body shifts from 17 to 20; captions from 12 to 14; line-height loosens one step.
MAX 3 WEIGHTS PER SCREEN · 400 / 500 / 700
§ 04 · MATERIALS · new
Liquid
glass.
Sequoia-lineage, scoped to Kaivoo's voice. We borrowed thinner translucency, saturation boost, and vibrancy. We left out refractive lensing and cursor specular.
/ MATERIAL STACK
The glass sits over the depth.
5 MATERIALS
Opaque · Default
background: warm-sand
DEFAULT
Glass · thin
blur(12px) saturate(1.4)
TOOLTIP · POPOVER
Glass · regular
blur(20px) saturate(1.5) · 0.72α
MODAL · NAV · SHEET
Glass · thick
blur(28px) saturate(1.4) · 0.88α
SIDEBAR · DRAWER
Glass · tinted (teal) ★
blur(24px) saturate(1.8) · chroma pull
LIQUID DEPTH CARD
Adopted from Sequoia
- ✓Thinner translucency — 0.72α regular, not 0.55
- ✓Saturation boost · colors appear more saturated through glass
- ✓Vibrancy via a second filter layer
Deliberately left out
- ✕Refractive lensing at glass edges — too playful for the voice
- ✕Cursor-tracking specular highlights — reserved for celebratory moments only
- ✕Full content color sampling — computationally expensive, static tints instead
Card taxonomy — five surfaces.
If you reach for glass, ask whether the surface actually needs to show what's behind it. If not, use Shore.
Shore
Default product card
OPAQUE · SAND
Sand
a quiet reflection, testimonial, reading passage
EDITORIAL · SPECTRAL
Depth
Emphasis over ocean backdrop
GRADIENT · DEEP→TWILIGHT
Glass
Floating overlays — modal, popover, sheet
REGULAR · BLUR 20
Liquid Depth
Flagship · premium emphasis · ONCE per screen
TINTED GLASS · ★
§ 05 · RESONANCE
Depth
visualized.
The depth metaphor isn't abstract — it's a continuous axis with measurable positions. Here's how it sounds, moves, and breathes.
Confidence sigil
AI · § 6.3
Direct recommendation
"You might…"
"One option would be…"
DOTS ARE 6PX · GAP 4PX · FRAMING IS PART OF THE RULE
Escalation ladder
§ 2.5
RoutineStandard insight
AttentionWorth noting
ImportantAct today
UrgentHealth / system
ONE RED IN THE SYSTEM
§ 06 · AI-NATIVE
Streaming.
Confidence.
Handoff.
Kaivoo has an Agents system shipping. v2.1 formalizes the UI primitives it needs — streaming text, tool-use cards, confidence sigils, handoff breadcrumbs.
Streaming response
agent · research
Position on the depth gradient encodes informational weight — shallow surfaces carry the day's active content, deeper layers hold reflection, and the Abyss band is where context crystallizes quietly
RESEARCH
search("sequoia glass vibrancy")
✓ 142ms
FILE
read("daily-flow/src/index.css")
✓ 18ms
CALENDAR
events(range: today+7d)
● RUNNING
/ LIQUID DEPTH · ACTIVE
Today's focus is the v2.1 migration — one block.
14:30 → 16:00 · deep
Agent handoff
§ 6.4
Dev Director
─→
Agent 3 · Architect
· thinking…
/ LINGUISTIC FRAMING
A 2-of-3 card never says "you should." It says "you might."
§ 07 · MOTION
Spring
physics.
Cubic-bezier curves from v2.0 stay. v2.1 adds four springs — snap, gentle, floaty, overshoot — for Framer Motion and CSS @spring when supported.
snap
stiffness 400 · damping 30
TOGGLES · SWITCHES
gentle
stiffness 200 · damping 25
CARDS · SHEETS
floaty
stiffness 120 · damping 18
EMPTY · CELEBRATE
overshoot
stiffness 300 · damping 15
USE SPARINGLY
§ 08 · GUARDRAILS
Two rules
enforced.
The contrast table is one. Reconciled against the WCAG 2.2 relative-luminance formula — replaces both of v2.0's conflicting tables.
✓
Resonance Teal — display 18pt+ or fill only
As a fill color with a white label. As inline link? Use Clarity Blue instead — it passes AA body at 5.10:1.
✕
Never Resonance Teal as body text on Warm Sand
4.72:1 fails AA for sub-18pt. A slightly darker brand color is still a brand color.
✓
Sage Mist for line-art, dividers, large-format
Decorative non-text graphics. Its low-chroma softness is the whole point.
✕
Never Sage Mist for small text
3.05:1 fails AA body. For small sage text, Sage Deep (4.52:1) is the answer.
✓
One Liquid Depth per screen, max
It's a promotion. More than one and nothing is emphasized.
✕
Never mix Spectral with UI chrome
Spectral only lives inside editorial containers — Sand Card, Reading Modal, Journal.
§ 09 · TOKENS
One file.
One truth.
Numbers live in exactly one place. If a number appears in two files, exactly one of them is wrong — and we know which.
→ tokens.v2.1.json · 361 lines · 20 KB
KEY
VALUE
KIND
color.brand.resonanceTeal
oklch(55.1% 0.061 193) · #3B8C8C
color
color.dark.resonanceTeal
#4DB8B8 · supersedes #4BBFBF
color
gradient.depthCard
linear-gradient(180deg, #1E4D7A, #1E3364)
gradient
gradient.aiStream
linear-gradient(90deg, #3B8C8C, #9B8EB0, #3B8C8C)
gradient
material.glass.regular.light.background
rgba(250, 248, 245, 0.72)
material
material.glass.tinted.teal.light.backdropFilter
blur(24px) saturate(1.8)
material
typography.fluidScale.base
clamp(15px, 0.95rem + 0.15vw, 17px)
type
motion.spring.gentle
{ stiffness: 200, damping: 25, mass: 1.0 }
motion
shadow.ocean
0 4px 16px rgba(59, 140, 140, 0.12)
shadow