Lattice · Archetype Spec

§1.1

Color System

Lattice enforces a strict two-color-system architecture. Chrome and data palettes are separate — they cannot share a hex value. Chrome is maximally restrained (grays + one accent). Data uses purpose-fit palettes. Color in chrome competes with color in data, and color in data carries meaning.

CHROME 14 colors · restrained grays + one accent

Surfaces (5)

--chrome-bg#0A0A0A

--chrome-bg-elevated#141414

--chrome-bg-input#1C1C1C

--chrome-bg-row-hover#1F1F1F

--chrome-bg-row-selected#2A2A2A

Borders (3)

--chrome-border-subtlergba 6%

--chrome-border-defaultrgba 10%

--chrome-border-strongrgba 18%

Text (4)

--chrome-text#E5E5E5

--chrome-text-muted#999999

--chrome-text-faint#666666

--chrome-text-disabled#4A4A4A

Accent — SPARINGLY (2)

--chrome-accent#4DA3FF

--chrome-accent-subtlergba 12%

DATA ~22 colors · status · diverging · sequential · categorical

Status pairs (9)

--status-success-*#2CA02C

--status-warning-*#E8B24D

--status-error-*#D62728

--status-info-*#1F77B4

Success Warning Error Info

Diverging — neg ↔ neutral ↔ pos (5)

neg-strongnegneutralpospos-strong

Sequential — magnitude ramp (5–9)

seq-1 (low)seq-9 (high)

Categorical — D3 tableau10 (8)

cat-1…8 · Colorblind audit pass (deuteranomaly + protanomaly)

WCAG 2.1 Accessibility Verification

Foreground	Background	Hex values	Ratio	Status	Use
--chrome-text	--chrome-bg	#E5E5E5 / #0A0A0A	16.5:1	AAA	Body text (primary)
--chrome-text-muted	--chrome-bg	#999999 / #0A0A0A	8.2:1	AAA	Secondary labels
--chrome-text-faint	--chrome-bg	#666666 / #0A0A0A	4.7:1	AA	Metadata, timestamps
--chrome-text-disabled	--chrome-bg	#4A4A4A / #0A0A0A	2.9:1	FAIL	Disabled only — WCAG SC 1.4.3 exempt
--chrome-accent	--chrome-bg	#4DA3FF / #0A0A0A	7.1:1	AAA	Active states, focus rings
--status-success-text	--chrome-bg	#2CA02C / #0A0A0A	4.6:1	AA	Success pills — always + icon + text
--status-error-text	--chrome-bg	#D62728 / #0A0A0A	4.5:1	AA	Error pills — always + icon + text
--status-warning-text	--chrome-bg	#E8B24D / #0A0A0A	7.3:1	AAA	Warning pills — always + icon + text
--status-info-text	--chrome-bg	#1F77B4 / #0A0A0A	4.5:1	AA	Info pills — always + icon + text
--chrome-text	--chrome-bg-elevated	#E5E5E5 / #141414	14.8:1	AAA	Pane body text

§1.2

Typography

Sans — Inter

Inter · UI text, labels, headers

ABCDEFGHIJKLMNOPQRSTUVWXYZ · 0123456789

Mono — JetBrains Mono

JetBrains Mono · Numbers, IDs, code

1,234,567.89 · $40.1K · P95 4.2ms

8-Step Scale — Dense, fixed px

--text-micro

10px · row counts

Axis labels · row counts · micro metadata · legends

--text-xs

11px · table cells

Table cell text · dense UI · filter chips · tooltips

--text-sm

12px · DEFAULT base

Default reading size — terminal convention minimum that scans at 80+ visible rows

--text-base

13px · emphasis

Emphasized values in tables · selected row

--text-lg

14px · pane headers

Pane headers · section labels

--text-xl

16px · section titles

Section titles (rare)

--text-2xl

18px · workspace title

Workspace title

--text-display

22px · MAX — nav only

Lattice

Tabular Numerals — Non-negotiable for numeric columns

font-feature-settings: "tnum" 1, "lnum" 1 — columns stay aligned regardless of digit width

P&L+$1,402,845.22

P&L-$3,201,007.80

P95 latency4.215ms

P99 latency12.094ms

Row count1,400,293 rows · 3 filtered

Job #4821timeout after 30.000s

Font Weights

Token	Value	Use
--weight-regular	400	Body, table cells
--weight-medium	500	Column headers, labels
--weight-semibold	600	Emphasized values, totals
--weight-bold	700	Reserved for primary alerts ONLY

§1.3

Spacing

2px base — half of other archetypes. 4px base would still waste pixels at terminal density. 2px increments allow finer tuning of dense rows.

Token	Value	Use
--space-25	2px	Inline gap, badge inner padding
--space-50	4px	Tight pair (icon+number)
--space-75	6px	Row internal padding
--space-100	8px	DEFAULT cell padding
--space-150	12px	Between cells / form fields (rare)
--space-200	16px	Pane internal padding
--space-300	24px	Between sections (rare)
--space-400	32px	Page-level breaks (very rare)

Row Height Tokens — user-toggleable

compact · 24px

Power user / dense view

50+ rows visible per screen

standard · 32px · DEFAULT

Default row height

30–40 rows per screen

comfy · 40px

Accessibility / new user

20–25 rows per screen

§1.4

Elevation

Lattice is the FLATTEST archetype — zero shadows on default surfaces. Shadows are reserved strictly for transient overlays (popovers, tooltips, command palette). Visual weight reduces the information zone.

Pane (default chrome)

Pane surface

box-shadow: none

ZERO shadow · hairline border only

Popover (overlay)

Popover

--shadow-overlay

0 4px 12px rgba(0,0,0,0.4)

Modal (floating)

Modal

--shadow-modal

0 12px 40px rgba(0,0,0,0.6)

Token	Value	Use	Banned on
none	box-shadow: none	ALL default chrome surfaces	Required for panes, rows, cells
--shadow-overlay	0 4px 12px rgba(0,0,0,0.4)	Popovers, tooltips, dropdowns	–
--shadow-modal	0 12px 40px rgba(0,0,0,0.6)	Modal dialogs only (use sparingly)	–

Banned: shadows on panes (would suggest float), shadows on rows/cells (visual noise; density killer), warm oklch shadows (Harbor pattern), gradient backgrounds on any chrome surface.

§1.5

Shape & Borders

Sharp corners reinforce the tabular grid. Lattice is not trying to feel friendly — it's trying to feel precise.

--radius-none
0 · cells, panes

--radius-xs
2px · badges

--radius-sm
4px · DEFAULT

--radius-md
6px · dialogs

--radius-lg
8px · rare CTAs

--radius-circle
50% · kbd hint

Banned: --radius-pill / fully rounded UI (too playful) · --radius-xl+ (visual weight wasted) · rounded table cells (breaks column alignment perception).

§1.6

Motion

--duration-instant: 0ms is the DEFAULT. Motion fatigue is real. Power users in terminals for 8 hours will viscerally hate any animation that triggers on common actions. Instant > smooth.

Token	Value	Use	Banned for
--duration-instant	0ms · DEFAULT	State changes (selected row, sort, filter, hover row — ALL instant)	–
--duration-fast	80ms	Hover color shift only	Data updates
--duration-base	120ms	Popover entry, focus shift	Row hover
--duration-slow	200ms	Pane resize commit (drag)	Sort / filter
--easing-linear	linear	Default — no flourish	Bouncing easing
--easing-standard	cubic-bezier(0.4, 0, 0.2, 1)	Popovers, overlays	–

Banned: animation on data updates (cell flash, row pulse — distraction over 8h) · animation on state change (selected row, sort, filter) · bouncing easing · scroll-jacking · skeleton shimmer · transitions on every hover.

prefers-reduced-motion: Lattice's default is already minimal (0ms). Reduced-motion fallback: instant transitions (already the default).

§1.7

Iconography — Tabler Icons

Family

TABLER ICONS — pixel-precise, grid-aligned at 24px, 1.5px default stroke, optical alignment correct at 16px (where Lucide breaks down). Reads as a tool — Coda, Codeium, monitoring dashboards converge on Tabler.

NEVER Lucide (broader strokes compete with dense data)

Grid & stroke

Property	Value
Grid	16px standard · 14px in dense rows · 20px in nav
Stroke	1.5px at all sizes (Tabler default)
Color	inherit via currentColor
Style	Line icons by default; filled for binary states

16 Sample Tabler Icons — 16px · 1.5px stroke · currentColor

search

filter

sort-asc

refresh

x

check

alert-triangle

terminal-2

columns

download

adjustments

chevron-right

copy

player-pause

bell

keyboard

Sparklines — Lattice Innovation

Sparklines replace "open chart" chrome with an inline glance. First-class in Lattice — 80–120px wide, single-hue, inside table cells.

line · latency

bar · volume

win-loss · trades

area · CPU %

§2

Voice & Content

Terse · technical · abbreviated · mono numbers with units. Use technical vocabulary — do not explain it (operators know what P95 means).

Do

"0 results"

Terse beats friendly in terminals.

Don't

"Nothing here yet — let's get started!"

Marketing voice in operator context.

Do

"Job #4821 failed: timeout after 30s"

Name the record + cause + duration.

Don't

"Oops! Something went wrong. Please try again."

Zero specificity. No record ID. No cause.

Do

"P95 latency 4.2ms"

Precision · technical vocabulary · mono rendering.

Don't

"Your average latency is around 4 milliseconds"

Approximation. Sentence structure. No P95 specificity.

Do

"Refresh — R" (in tooltip)

Action + shortcut. No instruction prefix.

Don't

"Click to refresh the data"

Mouse-centric. No shortcut. Too wordy.

Do

"1.4M rows · 3 filtered"

Abbreviated unit · mono digit · scannable.

Don't

"1,400,000 total records, 3 of which match your filters"

Verbose. Proportional numerals. Wastes scan time.

Column header rules

STATUS

Noun · clear

P95 (ms)

Abbrev + unit

Is this active?

Never a sentence

Click to sort

Never instructional

§3.F

Foundation Components

Buttons — 4 variants × 3 sizes (NO LG)

xs · h:24px

sm · h:28px

md · h:32px

Lattice rule: NO LG button. Filled accent buttons are RARE — only for singular primary commit action ("Run query", "Commit changes").

Icon Buttons — every action has a documented shortcut

Tooltips shown persistent here for demo. Production: hover delay 200ms.

Fields — default / search / number (mono) / error states

Search

Price (mono numeric)

Owner Invalid format. Try team-x (no @ symbol).

Selection Controls — 14px checkbox, 28×16px switch

Checked

Unchecked

Disabled

Auto-tail: on

Alerts: off

Tags · Status Dot · Keyboard Hint Pills

neutral neutral success warning error info 99+ 1.4k

Active

Queued

Failed

Idle

J K R E N ⌘K ⌘F ⌘/ Esc ⌘↵ ? ← keyboard hint pills · always visible next to actions

§3.C

Composite Components

Pane Primitive — 3-Pane Workspace (W1 Multi-Pane)

Navigator

Views

Jobs

Logs

Alerts

Metrics

status=failed ×

owner=team-x ×

env=prod ×

Job ID	Status	Duration	Owner
job-4821	Failed	30.0s	team-x
job-4820	Running	4.2s	team-y
job-4819	Queued	—	team-x

job-4821 detail

STATUS

Failed

ERROR

Timeout after 30s

OWNER

team-x

Active pane: 1px chrome-accent left-border. Splitters: 4px hit-zone, 1px visual. Keyboard: Tab to pane, J/K cycle rows, Esc closes drawer.

Toolbar — shortcuts visible inline

Filter Bar — active filters always visible as chips

status=failed ×

env=prod ×

p95>10ms ×

Tooltip — always shows keyboard shortcut if one exists

Shadow: --shadow-overlay (overlays only). Trigger: hover 200ms + focus. Max-width: 240px.

Loading States — prefer no loader for sub-100ms ops

Spinner · 16px

Skeleton (NO pulse)

Analyzing — 68%

§3.D

Domain Layer — 5 Named Components

Domain components compose Layers 1–3 with Lattice rules: mono numbers, dense spacing, keyboard shortcuts visible in tooltips, color+icon+text triple encoding on every status.

1 · Trade Ticket Row — trading desk

Time

Symbol

Side

Qty

Price

P&L 30d

Status

14:32:08.214 AAPL BUY 500 $182.40 Filled

14:31:55.087 TSLA SELL 200 $241.15 Partial

14:31:22.441 MSFT BUY 1,000 $379.80 Pending

2 · Streaming Log Row — log analytics (W5)

Timestamp (UTC)

Level

Message

Source

Corr ID

14:32:08.214882ERRORconnection pool exhausted: max 50 connections reached, 12 queueddb-primary-1cid-7a4f2

14:32:07.998341WARNslow query detected: SELECT * FROM events WHERE... — 2.8s > threshold 1sdb-replica-2cid-7a4f1

14:32:07.441102INFOjob-4820 started: pipeline=etl-prod, cluster=us-east-1b, workers=8worker-pool-3cid-7a4e9

14:32:06.118777INFOcheckpoint written: offset=142,441,882, lag=0.8s, partition=7kafka-consumercid-7a4e7

3 · Cluster Node Cards — observability (W3 Chart Grid)

prod-node-01

uptime: 14d 3h · CPU 5min:

CPU: 34% RAM: 62%

deploy: 2h ago · v2.4.1

prod-node-07

uptime: 14d 3h · CPU 5min:

CPU: 87% RAM: 91%

High CPU — possible memory leak

prod-node-12

uptime: 0s · unreachable

— no data —

CPU: N/A RAM: N/A

Unreachable since 2m ago

4 · Alert Escalation Row — incident response · shortcuts A=ack S=silence E=escalate P=page

Sev

Alert

Asset

Age

Acked by

State

A

S

E

CRIT Connection pool exhausted — db-primary db-primary-1 2m ago — Firing

HIGH CPU usage above 85% threshold prod-node-07 4m ago jp Acked

INFO Scheduled maintenance window all-nodes 32m ago auto Silenced

5 · Query Plan Node — database / dataframe explorer

EXPLAIN ANALYZE · job-4821 · SELECT events WHERE partition=7

Hash Join est: 142K act: 139K

Seq Scan: events est: 10K act: 142K

Index Scan: pk_idx est: 1 act: 1

Seq Scan: under-estimated by 14.2x — re-plan suggestion: ANALYZE events;

§3.W

Workspace Layouts

Every Lattice screen is one of these six. Operators learn the chrome once and never re-learn it.

W1 Multi-Pane

Nav

Table

Detail

W2 Full Table

Filter bar

W3 Chart Grid

CPU · 24h

RPS · 24h

W4 Split Editor

Query

Results

W5 Streaming Log

Filters · paused

W6 Modal / Settings

Layout	Primary use	Required features
W1 Multi-Pane	Lattice default — nav + table + detail	Drag-to-resize splitters, keyboard resize (Shift+Arrow), min-width per pane
W2 Full Table	Exploration — logs, events, transactions	Virtualization (10K+ rows), sticky header + filter bar
W3 Chart Grid	Monitoring dashboards — multi-metric	Resizable/draggable chart cards, shared crosshair, independent time ranges
W4 Split Editor	Query, config, log filter builders	Synced scroll option, Ctrl+Shift+P to swap sides
W5 Streaming Log	Log tailing — ops, incident response	Pause-on-scroll-up, resume-on-scroll-bottom, Cmd+End to jump to tail
W6 Modal	Only when input doesn't fit in a pane	Esc to close, Cmd/Ctrl+Enter to submit, focus trap

§4

Data Grid — 50+ Realistic Rows

The iconic Lattice component. Sticky header · zebra striping · mono tabular numerics · status pills (color+icon+text) · sparklines · heatmap cells · P95 numbers · compact 24px rows.

env=prod ×

52 rows · compact

Job ID	Status	Pipeline	Cluster	Owner	Duration	P95 (ms)	Rows	Cost	Started
job-4821	Failed	etl-prod	us-east-1b	team-x	30.0s	4,215	—	$0.82	14:32:08
job-4820	Running	ml-train	gpu-1	team-ml	4.2s	82	142,441	$2.40	14:31:44
job-4819	Queued	etl-staging	us-west-2	team-x	—	—	—	—	14:31:22
job-4818	Success	report-daily	eu-central-1	team-bi	12.8s	1,089	2,100,482	$1.10	14:30:55
job-4817	Failed	sync-s3	us-east-1b	team-infra	8.1s	3,782	—	$0.44	14:30:10
job-4816	Success	etl-prod	us-east-1a	team-x	22.3s	1,441	5,882,100	$3.21	14:28:44
job-4815	Cancelled	backfill-2026	us-west-2	team-data	1.2s	—	—	$0.02	14:28:01
job-4814	Success	ml-infer	gpu-2	team-ml	1.8s	44	88,200	$0.88	14:27:30
job-4813	Success	report-hourly	eu-central-1	team-bi	3.4s	287	182,041	$0.40	14:27:00
job-4812	Failed	sync-warehouse	us-east-1b	team-data	45.2s	5,102	—	$5.60	14:25:42
job-4811	Success	etl-prod	us-east-1a	team-x	18.4s	1,204	5,441,092	$2.85	14:24:10
job-4810	Partial	backfill-q1	ap-southeast-1	team-data	34.1s	2,890	1,002,841	$4.10	14:22:05
job-4809	Success	ml-train	gpu-1	team-ml	8.4m	28	400,000	$12.20	14:14:00
job-4808	Success	report-daily	eu-central-1	team-bi	11.2s	988	2,050,400	$1.08	14:12:30
job-4807	Failed	sync-s3	us-west-2	team-infra	7.8s	3,442	—	$0.41	14:10:18
job-4806	Success	etl-staging	us-east-1b	team-x	9.1s	620	882,110	$0.95	14:09:44
job-4805	Success	ml-infer	gpu-3	team-ml	1.6s	38	90,400	$0.82	14:08:10
job-4804	Queued	backfill-2025	us-east-1a	team-data	—	—	—	—	14:07:55
job-4803	Success	report-hourly	eu-central-1	team-bi	3.1s	262	181,200	$0.38	14:07:00
job-4802	Success	etl-prod	us-east-1a	team-x	20.1s	1,380	5,780,200	$3.10	14:05:12
job-4801	Success	sync-warehouse	us-east-1b	team-data	41.0s	4,810	8,200,000	$5.20	14:03:40
job-4800	Success	ml-train	gpu-2	team-ml	7.1m	24	402,100	$11.80	13:55:20
job-4799	Failed	etl-prod	us-east-1b	team-x	30.0s	4,102	—	$0.80	13:50:05
job-4798	Success	report-daily	eu-central-1	team-bi	13.2s	1,120	2,080,110	$1.12	13:48:00
job-4797	Success	sync-s3	ap-southeast-1	team-infra	6.4s	510	1,200,800	$0.70	13:45:12
job-4796	Partial	backfill-q4	us-west-2	team-data	28.8s	2,110	900,400	$3.40	13:42:00
job-4795	Success	etl-prod	us-east-1a	team-x	19.0s	1,280	5,602,400	$2.90	13:40:10
job-4794	Success	ml-infer	gpu-1	team-ml	1.9s	41	89,200	$0.85	13:38:44
job-4793	Success	report-hourly	eu-central-1	team-bi	3.0s	244	179,800	$0.36	13:37:00
job-4792	Failed	sync-warehouse	us-east-1b	team-data	43.1s	4,992	—	$5.40	13:34:22
job-4791	Success	etl-prod	us-east-1a	team-x	17.8s	1,190	5,320,100	$2.70	13:32:40
job-4790	Success	ml-train	gpu-3	team-ml	6.8m	22	398,400	$11.40	13:25:10
job-4789	Cancelled	backfill-2024	us-east-1b	team-data	0.4s	—	—	$0.01	13:22:00
job-4788	Success	report-daily	eu-central-1	team-bi	12.0s	1,002	2,010,040	$1.05	13:18:00
job-4787	Success	etl-staging	us-west-2	team-x	8.8s	600	880,400	$0.90	13:14:22
job-4786	Success	sync-s3	us-east-1b	team-infra	5.8s	490	1,180,000	$0.65	13:10:05
job-4785	Failed	etl-prod	us-east-1b	team-x	30.0s	4,080	—	$0.79	13:08:44
job-4784	Success	ml-infer	gpu-2	team-ml	1.7s	36	88,800	$0.83	13:06:00
job-4783	Success	report-hourly	eu-central-1	team-bi	3.3s	270	180,500	$0.37	13:07:00

§4P

Print Behavior

Operators print Lattice views: incident reports, audit exports, shift handoff docs, regulatory compliance snapshots. Print is a first-class concern. ⌘P must "just work" for any view. Sticky header on every page. Status text-prefix for B&W printers. Mono numerics preserved.

Canonical @media print stylesheet

/* ─── Lattice Print Stylesheet ─── */
@media print {
  /* Hide all chrome — only data prints */
  .sidebar, .toolbar, .filter-bar, .splitter,
  .keyboard-hint, .command-palette { display: none; }

  /* Force light mode for paper (dark monitors → light printers) */
  :root {
    --chrome-bg:           #FFFFFF;
    --chrome-bg-elevated:  #FFFFFF;
    --chrome-text:         #1A1A1A;
    --chrome-text-muted:   #555555;
    --chrome-border-default: #CCCCCC;
  }

  /* Expand panes to full printable width */
  .pane, .data-grid, .workspace { width: 100% !important; }

  /* Sticky header on every page (forensic multi-page exports) */
  .data-grid thead { display: table-header-group; }
  .data-grid tr    { page-break-inside: avoid; }

  /* Status color → text prefix for B&W printers */
  .status-pill::before { content: attr(data-status) " — "; }

  /* Timestamps: relative → absolute for forensics */
  .timestamp-relative::after {
    content: " (" attr(data-utc) ")";
    color: var(--chrome-text-muted);
  }

  /* Show full IDs — don't truncate for paper */
  .id-truncated { white-space: nowrap; overflow: visible; }

  /* Page setup */
  @page {
    margin: 1cm;
    @top-left  { content: "Lattice export"; font-size: 9pt; }
    @top-right { content: "Page " counter(page) " of " counter(pages); }
  }

  /* Preserve sparklines + heatmap cell colors */
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

Sticky header

display: table-header-group on thead ensures column labels appear on every printed page — non-negotiable for forensic review.

B&W status prefix

::before injects "FAILED — " / "SUCCESS — " text before status pills so B&W printers convey severity without color.

Mono numerics preserved

font-family and font-feature-settings carry to print. Columns stay aligned. IDs stop truncating.

§4.K

Keyboard-First Interaction Map

Lattice is keyboard-primary. Mouse is supported but not optimized for. Every action must have a shortcut. Every icon button has a shortcut documented in its tooltip. Operators who learn these never reach for a mouse.

Shortcut	Action	Context
`⌘K`	Command palette — primary input method; all actions reachable	Global
`⌘/` / `?`	Keyboard shortcut help overlay	Global
`⌘F` / `/`	Focus search / filter field	Global
`⌘↵`	Submit / commit (forms, modals, query run)	Global
`Esc`	Close popover · clear focus · dismiss drawer · cancel	Global
`J`	Next row in table / next alert in list	Table / list
`K`	Previous row in table / previous alert	Table / list
`↵`	Open selected row in detail drawer	Table
`Space`	Select / deselect row (adds to selection)	Table
`⇧↓`	Extend selection down (range select)	Table
`⌘A`	Select all rows in current view	Table
`N`	New item (context-sensitive)	Global
`E`	Edit selected item	Global
`D`	Delete selected (with undo snackbar — no confirm dialog)	Global
`R`	Refresh current view	Global
`A`	Acknowledge alert	Alert view
`S`	Silence alert	Alert view
`P`	Page on-call	Alert view
`GI`	Go to inbox (G then I)	Global nav
`⇧←→`	Resize focused pane (Shift+Arrow)	Workspace

§5

Accessibility

WCAG 2.1 Conformance

Gate	Status
Body text contrast ≥ 4.5:1 AA	AAA 16.5:1
Focus indicator visible (2px, offset 2px)	Pass
Tab order matches visual order	Pass
All icon-only buttons have aria-label	Pass
Status indicators: color + icon + text	Pass
Form fields have programmatic labels	Pass
prefers-reduced-motion honored	Pass
Skip-to-content link present	Pass
Data tables have aria-label	Pass

Screen Reader Notes

Triple encoding on all status indicators — color + icon (aria-hidden) + text label. Never color-only (governance fail; colorblind a11y broken).

Sparklines: role="img" with aria-label describing the trend (e.g., "P&L sparkline positive trend over 30 days").

Data grid: aria-label on table, cells read as "job-4821, Failed, etl-prod, 30.0s, 4215ms, team-x".

Live regions: aria-live="polite" on filter count updates, row count changes. aria-live="assertive" on error states.

Color + Icon + Text Triple Encoding

Success Failed Warning

color + icon + text · never color alone

Lattice minimum body type: 11px in chrome (10px only for axis labels and micro-metadata). Enforced at lint time. --text-disabled (2.9:1) is intentionally below AA but only used for interactive-disabled states where WCAG SC 1.4.3 provides the exception.

§6

Governance + BYOC

Lattice Governance Overrides (adds to universal gates)

Rule	Enforcement	Rationale
Two-color-system architecture (chrome ≠ data)	lint flag	Chrome and data tokens cannot share the same hex value
Monospace + tabular figures on all numeric columns	lint flag	font-feature-settings: "tnum" 1 — column alignment collapses without
Every interactive element has a documented keyboard shortcut	lint flag	Icon-buttons without shortcut metadata fail
Animation on data updates banned	motion review	Cell flash, row pulse — motion fatigue over 8h sessions
Shadows on default surfaces banned	lint flag	Panes, cells, rows — any non-overlay shadow fails
Confirmation dialogs banned for reversible actions	workflow review	Use undo snackbar pattern instead
Pagination banned for data tables — must virtualize	lint flag	Pagination breaks scroll context; filter resets
Color-only encoding banned	lint flag	Every status = color + icon + text (governance baseline)
Body type ≥ 11px in chrome	lint flag	10px only for axis labels / micro-metadata
Pane resizability required	workspace lint	Non-resizable splitter fails; operators have different preferences

BYOC — Required Color Roles (Bring Your Own Colors)

If using the BYOC variant (Prompt 1b), your palette MUST cover BOTH systems separately. ~14 chrome colors + ~22 data colors = ~36 total. Prompt 1b validation rejects any BYOC that shares chrome and data hex values, is missing light mode, or uses pastel data colors.

CHROME ~14 colors restrained · one accent

Surfaces (5)

bg

elevated

input

row-hover

row-sel

Borders (3)

subtle 6%

default 10%

strong 18%

Text (4)

text

muted

faint

disabled

Accent — SPARINGLY (2)

accent

subtle 12%

Validation: NO hex value in this system may appear in the data system. Lint flags shared values.

DATA ~22 colors semantic · purpose-fit

Status (9 — bg + text + strong)

success-bg

success-text

warning-bg

warning-text

error-bg

error-text

info-bg

info-text

success-strong

Diverging (5 — neg ↔ neutral ↔ pos)

neg-strong

neg

neutral

pos

pos-strong

Sequential (5–9 minimum)

seq-1seq-9

Categorical (8 — D3 tableau10)

cat-1 blue

cat-2 orange

cat-3 green

cat-4 red

cat-5 purple

cat-6 brown

cat-7 pink

cat-8 gray

Rejected: single-hue accent for data · chrome+data sharing accent · pastel data colors · dark-only (light mode required).

§7

When to Pick Lattice

Pick Lattice if…

User stares at the screen for hours, not minutes

Information density beats whitespace in every decision

Monospace alignment of numeric data matters

Primary UX is scanning tables, not navigating pages

Keyboard is the primary input device

Operators have technical expertise (abbreviations OK)

Multi-pane resizable workspaces are the norm

Domains

Trading Observability Monitoring Log analysis Query consoles Cluster managers BI exploration

Do NOT pick Lattice if…

Mobile is a primary target → Current

Single-screen task focus (CRM, ticketing) → Sentinel

Reading-heavy (docs, articles) → Meridian

Marketing site or onboarding → Harbor

User base is non-technical → Sentinel

5–20 rows is the typical view → Sentinel

Sample Adjectives — archetype routing aid

If 3+ of your brand adjectives appear below, Lattice is likely your archetype (Finding 5 demoted-adjective routing).

terse technical dense scannable instant operator-grade monospace keyboard-first multi-pane low-chrome forensic streaming power-user abbreviated grid-aligned

Real-World Examples — calibrate against these

Bloomberg Terminal

Canonical reference. Multi-pane, monospace numerics, keyboard-primary, dark-first. Every Lattice pattern originates here.

Datadog

Observability dashboards, streaming logs, status pills with color+icon+text triple encoding.

Grafana

Multi-pane workspace, sparklines in cells, time-range scrub, chart cards grid (W3).

Linear's command bar (⌘K) / Raycast

Lattice-grade keyboard-first interaction inside otherwise Sentinel apps. Command palette IS the product.

Elastic Kibana

Log explorer, dense tables, virtualized rows, W2 Full-Table workspace.

New Relic / Sentry

Error monitoring with severity rows, alert escalation rows (Domain Layer §3.D item 4).

Snowflake / BigQuery query consoles

Split editor (W4) — query left, results right. Synced scroll. Query plan node visualization.

Cursor / Codeium

Split editor + completions. Partial Lattice — keyboard-first, mono everywhere, instant state changes.

§8

Failure Modes

When teams force Lattice onto the wrong use case, predictable failures appear in this order.

1

New-user paralysis

Symptom: First-time users open the product, see dense rows of monospace data, abbreviated labels ("Qty", "P95"), no onboarding. Bounce rate near 100%. Support tickets ask "how do I use this?"

Root cause: Lattice's terse vocabulary + density assume technical expertise. Non-experts need scaffolding.

Switch to Sentinel — gentler density, less abbreviated, more discoverable navigation.

2

Mobile collapse

Symptom: Multi-pane workspace can't fit on phone. Data grid horizontal-scrolls forever. 12px text at arm's length unreadable. Keyboard shortcuts irrelevant on touch.

Root cause: Lattice is desktop-first by definition — large monitors, keyboard, 8-hour sessions. None of that translates to mobile.

Switch to Current for mobile companion. Limit Lattice features to desktop routes.

3

Marketing-page absurdity

Symptom: Marketing page reads as a Bloomberg terminal. Visitors leave instantly. Brand reads as cold, hostile, inaccessible.

Root cause: Lattice's restraint is purposeful for operators. It reads as alienating to prospects who need warm onboarding.

Switch to Harbor for marketing surface. Keep Lattice for the in-product terminal view.

4

Reading exhaustion

Symptom: 12px text at 1.3 leading in a single column is unreadable for sustained prose. Eye strain in minutes.

Root cause: Lattice optimizes for scan, not read. Dense rows help operators find data; they destroy prose comprehension.

Switch to Meridian — 17–19px body, 1.75 leading, 68ch reading-width.

5

The "feels broken" failure (missing keyboard discipline)

Symptom: New developers ship Lattice features without keyboard shortcuts. Operators who learned the rest of the product can't extend their muscle memory. They file bugs against the new feature.

Root cause: Lattice's contract IS keyboard-first. Half-measures fail more visibly than they would in other archetypes.

Not an archetype switch — a discipline fix within Lattice. Every interactive action must have a documented shortcut at lint time.