LATENT

K00 · COVER & INDEX

LATENT

A UI kit for AI companies. AI thinks in latent space. LATENT makes that thinking legible: what the AI did, where its answer came from, and where a person stays in control.

  1. Start with tokens (K02). Everything else reads from them.
  2. Compose pages from components (K08) and patterns (K09) only.
  3. Re-brand by overriding eight semantic tokens. Nothing else.

K01 · PRINCIPLES

Value before signup. Proof before promises.

DESIGN

Show the work.
Every AI output carries its sources, model, version, time and verification state. If it can’t be traced, it isn’t shown as fact.
Label the machine.
AI content always wears the AI mark and a Mist tint. Human actions use lime. Nobody wonders who said what.
Calm over spectacle.
Editorial type, hairlines and paper. Moments of wonder are quiet and explain something.
Keyboard first.
⌘K everywhere. Every action is reachable without a pointer.

CONVERSION

Value before signup.
The first meaningful AI moment happens in under 10 seconds, without an account.
Proof before promises.
Outcomes come with methodology. Benchmarks come with dates. Limitations sit next to strengths.
Two doors, both open.
Start free and Book a demo are always visible. Enterprise features never block self-serve.
No dark patterns.
No fake scarcity, pre-checked consent, confirmshaming or hidden cancellation. Ever.

ACCESSIBILITY

Readable first.
16 px minimum body, AAA contrast for body text, 60–75 characters per line.
Motion explains or stays still.
Every animation marks a state change. Reduced motion shows full text at once; continuous motion can be paused.
Never color alone.
States combine color, icon and label, so they survive color blindness and grayscale.
Announce in sentences.
Streaming output is announced on completion, never token by token.

K02 · COLOR & TOKENS

Lime for people. Mist for machines.

Attention lime marks every human action and decision. Mist tints everything the AI produced. Paper and ink carry the rest. At any glance you can tell who said what.

--action · Attention
Human CTAs, approvals, decisions. Always ink text. Never text on light. #D4F25A
--machine-tint · Mist
Machine Surfaces holding AI-generated content. Paired with the AI mark. #E6EAF2 · ink #5B6B86
--canvas · Paper
Prose Warm editorial light. Default theme, with a subtle paper grain. #F4F2EC · ink #121212
[data-theme=terminal]
Code Focused dark for developers, docs and the console. #0B0C0E · text #E8E6E1

Primitives

Raw values. Never referenced by components directly.

  • paper-50#FBFAF7
  • paper-100#F4F2EC
  • paper-200#EAE7E0
  • paper-300#D9D5CB
  • white#FFFFFF
  • graphite-400#8A867C
  • graphite-500#6B6860
  • graphite-700#3A3935
  • graphite-900#121212
  • term-950#0B0C0E
  • term-900#131519
  • term-800#1B1E23
  • term-700#2A2D33
  • term-300#B9B6AE
  • term-100#E8E6E1
  • lime-400#D4F25A
  • mist-100#E6EAF2
  • mist-300#C9D0DC
  • mist-400#9AA6BA
  • mist-600#5B6B86
  • mist-dark#1A2030
  • green-700#1F5132
  • green-100#DCEBDF
  • amber-800#6B4500
  • amber-100#F6E6C4
  • crimson-700#8A1C1C
  • crimson-100#F7DEDC

Semantic tokens

Primitives → semantic → component. Themes swap the semantic layer via data-theme. Rows marked ● are the eight brand overrides.

TokenPaperTerminalUse
●--canvas #F4F2EC #0B0C0E Page background
●--surface #FFFFFF #131519 Cards, inputs, panels
--surface-2 #FBFAF7 #1B1E23 Side panels, sidebar
●--ink #121212 #E8E6E1 Primary text
--ink-2 #3A3935 #B9B6AE Secondary text
--ink-3 #6B6860 #9A9890 Meta, captions (AA)
●--hairline #D9D5CB #2A2D33 1 px borders and dividers
●--action #D4F25A #D4F25A Human actions: CTAs, approvals
●--on-action #121212 #121212 Text on action
●--machine-tint #E6EAF2 #1A2030 AI-generated surfaces
●--machine-ink #5B6B86 #9AA6BA AI mark, machine labels
--success #1F5132 #8FD3A6 Verified, operational
--warning #6B4500 #F0C46A Needs review, degraded
--error #8A1C1C #F2A09A Errors, unsupported, outage
--focus #121212 #D4F25A 2 px focus ring

One component set, three themes

Identical markup reading var(--token). Nordhafen overrides eight tokens to white-label the assistant (see D12).

PAPERdefault
Ask about this workspace…
◇ CAIRN · SUMMIT 2.1✓ Grounded
Helio Print can be cancelled until August 31 2
ApproveEdit
TERMINALdocs · console
Ask about this workspace…
◇ CAIRN · SUMMIT 2.1✓ Grounded
Helio Print can be cancelled until August 31 2
ApproveEdit
NORDHAFEN8 overrides
Ask about this workspace…
◇ ASSIST · SUMMIT 2.1✓ Grounded
Helio Print can be cancelled until August 31 2
ApproveEdit

Contrast, verified

Computed from the token values with the WCAG 2.2 formula. Body text targets AAA (7:1); nothing ships below AA (4.5:1).

  • Aa16.73 Ink on canvasAAA
  • Aa10.33 Ink-2 on canvasAAA
  • Aa4.97 Ink-3 on canvasAA
  • Aa18.73 Ink on surfaceAAA
  • Aa15.54 Ink on MistAAA
  • Aa5.40 Mist Deep on surfaceAA
  • Aa4.47 Mist Deep on MistAA large
  • Aa14.85 Ink on limeAAA
  • Aa7.45 Grounded chipAAA
  • Aa6.88 Needs review chipAA
  • Aa7.26 Unsupported chipAAA
  • Aa15.69 Terminal textAAA
  • Aa9.02 Terminal text-2AAA
  • Aa15.51 Lime on TerminalAAA
  • Aa7.37 Nordhafen actionAAA
  • Aa don’t1.13 Lime on Paper ✕Decorative only

Status & verification

Always color + icon + label. Never color alone.

✓ Grounded ! Needs review ✓✓ Verified by a human × Unsupported Operational Degraded Outage

Data visualization

Eight categorical colors ordered for deuteranopia and protanopia safety, plus sequential (Mist) and diverging scales. Cluster colors for the Semantic Map are a separate, quieter set.

Categorical · 8
#1F5F8B #D07A2A #2E7D5B #B8407A #4FA3D1 #8C7324 #6B5BA6 #6B6860
Sequential · Mist
#EEF1F6 #C9D0DC #9AA6BA #6F7E99 #4A5870 #2C3647
Diverging · orange ↔ blue
#A6511B #D9894D #F1CFAE #EAE7E0 #B9D3E6 #5C98C4 #1F5F8B
Semantic Map clusters
#A0562F #3E6F8C #3F6E4E #8C7324 #5B6B86 #8E4B5E

K03 · TYPOGRAPHY & VOICE

Three typefaces, three voices.

The typeface tells you who is speaking. All three are open-license (OFL) and self-hosted, so no font request leaves the EU.

HUMAN · --font-serif
Source Serif 4Headlines, stories, manifestos, and the questions people ask.
“What do we owe Brightline if we exit early?”
INTERFACE & AI · --font-sans
Hanken GroteskUI labels, body copy and every AI response.
Clause 14.2 caps liability at 12 months of fees.
MACHINE · --font-mono
Red Hat MonoModel names, tokens, latency, cost, code and shortcuts.
summit-2.1 · 412 tokens · p95 1.9 s

Fluid scale

Sizes shown at your current viewport. Body never drops below 16 px.

displayclamp(52px, 7vw, 96px) / 1.02 · 400
AI that shows its work.
h1clamp(40px, 5.4vw, 76px) / 1.02
Trust, documented.
h2clamp(38px, 4.4vw, 60px) / 1.05
Agents that ask before they act.
h3clamp(26px, 2.6vw, 34px) / 1.2
Every answer comes with receipts.
title20px / 1.3 · 600
Connect a source
leadclamp(18px, 1.5vw, 20px) / 1.55
Cairn answers from your team’s documents.
body16–18px / 1.6
Three vendor contracts auto-renew before October 1.
small14px / 1.45
No training on your data by default
meta · mono12–13px / 1.4 · mono
Summit 2.1 · p95 1.9 s · 412 tokens
label · mono11–12px / 1 · 500 · +.08em
HOW CAIRN SHOWS ITS WORK

Long-form answers

68 characters per line, 1.7 leading, citations inline, a limitations line next to the output.

Brightline’s German entity signed a separate data processing agreement in March 2025 2. It survives termination, so data deletion obligations continue for 30 days after you exit. The master agreement doesn’t mention sub-processors outside the EU, and I couldn’t find a list in the workspace.

Summit 2.1 · Sep 24, 2026 · 09:41 · AI can make mistakes. Check the sources.

Notation

Mono, tabular numerals, a thin space before units.

Token count
18k tokens
Context
18.4k / 200k
Price
$3 / 1M input tokens
Latency
p95 420 ms
Model version
Summit 2.1
Timestamp
Sep 24, 2026 · 09:41
Uptime
99.97% · 90 d
Shortcuts
⌘K ⇧↵ esc

Voice: confident humility

HEADLINE

× Don’tRevolutionary AI that never hallucinates.

✓ DoCites its sources. Flags what it can’t verify.

OUTCOME CLAIM

× Don’t10× faster contract review!

✓ Do62% less review time at Norrland Legal, 412 contracts, Jan–Jun 2026.

ERROR · RATE LIMIT

× Don’tOops! Something went wrong 😬

✓ DoYou’ve hit this hour’s limit. Your draft is saved, and you can continue at 10:00.

K04 · LAYOUT & APP SHELLS

Room for prose. Density for work.

Marketing pages breathe on a 12-column grid. Product surfaces tighten into shells built for sources, artifacts and code. Both sit on a 4-point spacing scale.

Grid

Desktop · 144012 col · gutter 24 · margin 48 · content max 1280
Tablet · 10248 col · gutter 20 · margin 32
Mobile · 3904 col · gutter 16 · margin 20

Spacing · 4-pt

  • space-4
  • space-8
  • space-12
  • space-16
  • space-20
  • space-24
  • space-32
  • space-40
  • space-48
  • space-64
  • space-80
  • space-96
  • space-128
  • space-160

Geometry

  • 6 · chips, code
  • 10 · controls
  • 16 · cards
  • pill · filters
  • elev-0 · flat
  • elev-1 · hairline
  • elev-2 · overlays only

Density

COMFORTABLE · marketing
Ridge 2.0$3 / 1M
Pebble 1.4$0.25 / 1M
row 48 · text 16 · control 40
COMPACT · console, docs
Ridge 2.0$3 / 1M
Pebble 1.4$0.25 / 1M
Summit 2.1$12 / 1M
row 32 · text 14 · control 32

App shells

Three shells cover every product surface. Machine regions are tinted Mist.

Assistantsidebar 264 · main fluid (max 760 prose) · panel 360 · Comfortable
Docsnav 264 · content 720 · toc 220 · Paper or Terminal · Compact
Consolenav 232 · 12-col dashboard grid · Terminal · Compact