Sentinel

§1.1

Color system

Two-layer architecture: Layer 1 primitive ramps + Layer 2 semantic aliases. Components reference only Layer 2.

Layer 1 — Primitive ramps

Primary navy (anchor 700 = #1B2A4A)

Accent orange — CTA anchor 500 = #FF9900 — bg-only, never text on light surface

Success

Warning

Error

Neutral warm gray (workhorse)

Layer 2 — Semantic aliases

Accent-CTA rule

WCAG accessibility verification

§1.2

Typography

Fixed px modular scale (ratio 1.125). Inter only — no serif, no fluid clamp(). Base 14px. Tabular numerals required on all data columns.

Type scale — 12 steps

Tabular numerals demo

§1.3

Spacing

Compact density. 4px base, 12-step scale. Section padding 24px standard. Page horizontal padding 32px.

§1.4

Elevation

Flat with hairline borders by default. Cold rgba shadows for floating elements only. Warm oklch shadows are banned (that is Harbor).

§1.5

Shape & borders

8-step radius scale. Default --radius-sm (4px) for cards, alerts, inputs. Pill shape for chips and filters. Circle for avatars and annotation pins.

§1.6

Motion

Functional motion only — state, position, visibility changes. Never decorative. prefers-reduced-motion: remove transforms, keep instantaneous opacity only.

§1.7

Iconography

Family: Lucide — the modern enterprise / SaaS convention. Tailwind, Vercel, Linear, Notion, Supabase and modern dashboards converge on it. Neutral, functional, instantly recognizable. 2px stroke matches Sentinel's compact density. Substitute Material Symbols (Google enterprise default) if Lucide is unavailable. Never Phosphor (too editorial) or Tabler (too monospace-tool — that is Lattice).

Sample icon grid — 16 Lucide icons at 24px, line style

Filled severity variants (fill encodes meaning)

§2

Voice & content

Three pillars: clear, helpful, respectful of expertise. Sentence case everywhere. Verb-first CTAs. No marketing fluff in product UI. No exclamation marks.

Do / Don't pairs

Error message formula

§3.F

Foundation components

Layer 1 primitives: Button, Icon button, Field, Selection controls, Tag/Badge, Chip, Avatar. All generated in this priority order.

Button — 4 variants × 3 sizes × all states

Field — text / with icon / error / disabled / select

Selection controls — checkbox / radio / switch

Tag / Badge — variants + sizes

Chips — static / removable / selected / icon-leading

Avatars — sm / md / lg / xl + photo / initials

§3.C

Composite components

Layer 2: Card variants, Alert, Toast, Tooltip, Dialog, Drawer, Tabs, Loading, Dropdown, Date picker mock, Command palette, Code block.

Card — 4 variants

Alert — info / success / warning / error

Toast notifications

Tabs — line style with badge counts

Loading states — spinner / progress bar / skeleton

Command palette (⌘K)

Code block — default / dark variant

function contrastRatio(l1: number, l2: number): number {
  const lighter = Math.max(l1, l2);
  const darker  = Math.min(l1, l2);
  return (lighter + 0.05) / (darker + 0.05);
}

--text-primary: var(--color-neutral-900);
--surface-card: #FFFFFF;
--border-focus: var(--color-accent-500);

§3.D

Domain layer components

Product-specific composites: Severity badge, Annotation pin, Critique card, Dropzone, Charts. Each composes Layer 1–3 with Sentinel rules.

Severity badges — all 5 levels (color + icon + text)

Annotation pins

Critique card

Dropzone

Charts mock (categorical palette)

§3.L

Application layouts

Every product page is one of these six layouts. The system assembles into a layout, never invents new chrome.

§3.K — NEW

Keyboard-first interaction

Sentinel users spend hours per day in the product. Keyboard fluency is a productivity multiplier. Less aggressive than Lattice's terminal-grade doctrine, but more rigorous than Harbor / Current / Meridian. Mouse remains first-class.

Standard shortcut map

Focus ring — visual specification

Sentinel-specific keyboard rules

Banned keyboard-breaking patterns

§4.1

Data table

The iconic Sentinel component. Sticky header, hoverable rows, sortable columns, tabular numerals on all numeric columns, bulk action bar. 50 rows rendered below.

§4.2

Form layout

Single-column. Labels above inputs. 16px between fields, 24px between groups. "(required)" parenthetical — never asterisk-only. Inline validation on blur.

§4.3

Empty state

Every empty state offers an action (CTA). Helpful, not apologetic. 64px circle icon (surface-sunken bg), h4 heading, 1–2 sentence body, primary CTA. Never a dead end.

§4.4

Search + filter pattern

Search input (icon-leading) + removable filter chips + sort dropdown — all in one row above data. ⌘F focuses search. Applied filters always visible as chips.

Showing 12 of 50 issues · 3 filters applied · Clear all

§4.5

Wizard / Stepper

Top progress with numbered steps and connectors. One step at a time. Sticky footer with Back (left) and Next / primary action (right). Max 5 steps.

§4.6

Detail header

Entity page header: breadcrumb + title (--text-h2) + status badge + metadata row + right-aligned actions. Page title is always h2 — h1 is reserved for the page shell.

§5

Accessibility

WCAG 2.1 AA minimum; AAA target for primary body text. Screen-reader tested on VoiceOver + NVDA. Keyboard navigable throughout. Color + icon + text for all status indicators.

WCAG conformance target

Screen-reader requirements

Keyboard navigation map (summary)

• Every interactive element reachable via Tab in DOM order
• Focus indicator visible: 3px --color-focus-ring, offset 2px, via :focus-visible
• Standard key bindings honored: Enter/Space, Esc, Arrows, Home/End, Tab/Shift+Tab
• Focus trap inside modals, drawers, command palette — Esc returns to trigger
• Skip-to-content link at top of page
• Roving tabindex on tab panels, radio groups, menu bars

Performance budgets (Sentinel tier)

§6

Versioning & changelog

SemVer (MAJOR.MINOR.PATCH). Deprecated tokens/components ship for 2 MINOR versions before removal. Deprecation warnings logged at build time.

SemVer policy

Changelog

Quality-gate checklist (PR / release blocking)

• Contrast ratios verified (AA minimum, AAA for primary body)
• Keyboard navigable — Tab / Space / Enter / Esc / Arrows all honored
• Screen-reader tested (VoiceOver + NVDA minimum)
• prefers-reduced-motion honored — transforms removed, not just shortened
• Both light and dark mode tokens defined for every Layer 2 semantic token
• No raw hex in component CSS — all colors through var(--token)
• No emoji in UI — SVG icons only
• Component implements default / hover / focus-visible / active / disabled
• Error messages follow What / Why / How formula
• Tabular numerals on all numeric columns
• Accent-CTA rule passes — no white-text-on-orange-500
• Components reference only Layer 2 semantic tokens
• Typography uses fixed px — no clamp()
• Changelog entry filed under correct semver bump

Governance overrides

Sentinel governance overrides

Inherits governance.spec in full. Sentinel additionally enforces these 10 rules on top of the universal gates.

BYOC — required color roles

Bring Your Own Colors

If you use a custom palette instead of Sentinel's canonical navy + orange, your supplied palette must cover these 7 ramps at minimum. 7 ramps × ~9 steps = ~63 required colors. Layer 2 semantic aliases are then auto-derived.

Required Layer 1 ramps

Required Layer 2 aliases (auto-derived)

BYOC validation rules

• Each ramp has minimum 6 steps (50/100/300/500/700/900)
• Accent-CTA rule passes: dark-text on accent-500 ≥ 4.5:1 contrast
• White-text on accent-500 explicitly rejected unless annotated "dark surfaces only"
• Components reference ONLY Layer 2 aliases — never primitives directly

When to pick

When to pick Sentinel

Use this section to route to the correct archetype. If three or more of your brand adjectives appear in the list below, Sentinel is likely your archetype.

Pick Sentinel if…

Real-world examples — calibrate against these

Do not pick Sentinel if…

Failure modes — NEW

Failure modes

When teams force Sentinel onto the wrong use case, predictable failures appear in this order. Knowing the failure pattern helps route to the correct archetype before shipping.