Lippes Mathias intake app

Current: every token below is defined in globals.css.

Contrast is WCAG ratio · APCA Lc, text or mark first, computed with apca-w3 0.1.9 (APCAcontrast(sRGBtoY())) and culori (wcagContrast, OKLCH) on 2026-10-22.

Floors: text 4.5:1, with body sentences at Lc 75, labels, chips and button text at Lc 60, headings at Lc 45, and disabled text at Lc 30 (WCAG-exempt). Non-text controls and meaningful marks need 3:1; a fine line 1–5px across needs Lc 45, a solid mark at least 5.5px across Lc 30, and a card edge Lc 15.

Primitives

Two scales on one OKLCH lightness grid at hue 247° (D77, D100): step k (50 → 0, 100 → 1, … 900 → 9, half steps at k + 0.5) has L = 0.969 − 0.0775·k; blue chroma = min(0.112, 0.89 × the largest in-gamut sRGB chroma at that L and hue); slate chroma = blue chroma ÷ 2.8. The formula reproduces every step within one hex unit, except blue-700 and slate-700, which are anchored to the brand blue #005288 and its slate at the same lightness and hue, and step 50 of both scales, which sits at L 0.981 instead of the grid's 0.969 so secondary text (slate-600) clears the body floor on the ground and the tints (Lc 75.5 on slate-50, 75.3 on blue-50), because one more half step on the scale cost more than a ground a sixth of a step lighter (D100). Slate-950 is the only half step: ink, because it is today's ink exactly. No scale has a 650 step (D100).

A third scale, red, sits on the same grid at hue 25° with chroma capped at 0.15, for the danger buttons and error text (D25, D85). Its 50 step stays at L 0.969, because nothing sets text on it.

Primitive names: --blue-50 … --blue-900, --slate-50 … --slate-950, --red-50 … --red-900, and --white #ffffff (1.000 / 0 / —). Semantic tokens point at primitives with var(); components use semantic tokens only.

Semantic tokens

One row per token. "Primitive" is the step the token points at. Roles that share a step are merged on purpose (D100): slate-50 is the page ground, item tint, every row and menu hover and the waiting fill; slate-100 is dividers, disabled border and fill, pressed tint, record-chip fill and rail hover; slate-500 is control borders, the rail track and the waiting outline; slate-700 is headings, nav and the cut; blue-800 is primary hover, pressed text and needs-you. They never sit on top of each other, or shape and text tell them apart.

Text

Surfaces

Two surfaces only, because finer near-whites blend on ordinary office monitors (D100). Tints and hovers sit only inside white cards; a tint placed directly on the page ground would vanish.

Borders and dividers

Controls

Inputs, textareas, selects, checkboxes and radios (D81 as amended by D100, D86). Menu-item highlight is --color-bg-row-hover (slate-50), set on the menu-item components as an override of shadcn's shared --accent, which stays blue-50 for ghost-button hover (D100).

Buttons

Three tiers, each with every state (D25), with D85's darker pressed text, and a danger version of each tier on the red scale (see Danger buttons under Components).

Chips

State chips: one state per item, identifiable by icon and label, never by color alone (D40, D41); chips are non-interactive apart from a hover tooltip (D41). Done and blocked chips use the state families below. Record-status chips are borderless slate pills (D80, D83).

Rail

The rail's labels use --color-text-heading, turning --color-text on hover; its count pills use --color-action on --color-action-tint-hover; its state markers use the chip tokens (D41).

Header and nav

The header is --color-surface with a --color-border-card bottom border (D84); the avatar is --color-action-tint-hover with --color-action initials, and the count tag uses the same pair (7.74 · 83.7); the current nav item's underline is --color-action (D72).

State families

These keep their own hues, because a blue or slate step would erase the meaning they carry (D40, D41, D76, D85, D100). They are the only tokens off the blue, slate and red scales.

The blocked red is a state color, not a step of the red scale; danger buttons and error text use the scale (D25, D85).

Shadows are not color tokens; see Elevation & Depth.

Mapping to globals.css

The app has two token sets: the shadcn contract (--primary and friends, OKLCH) and the pre-shadcn --legacy-* palette for hand-rolled screens. Each existing name takes the semantic token's value; the first column's values are the old ones, as hex, so a stray one is easy to spot and replace.

--color-border-control-hover (slate-600) and --color-focus-ring (blue-700) are also new (D86, D100).

Current. One family, Figtree, loaded with next/font/google in src/app/layout.tsx and bound to --font-sans. Figtree is a variable font, so one file serves every weight; don't pass a weight array, which would download static files instead. Use four weights only: 400 for body and small text, 500 for button labels, 600 for headings, chips and the current rail item, 700 sparingly for emphasis inside text. 500 and 600 must stay visibly distinct, because button labels and headings rely on the difference.

The scale is a perfect fourth (1.333): H3, H2 and H1 are each a fourth apart, and body and small sit half a step below H3 and body, so the app's existing 16 and 12 land on the scale. The heading sizes are registered in @theme inline, so the Tailwind class names carry them.

Current. Spacing sits on an 8pt scale: 4, 8, 16, 24, 32, 40, 48 (the spacing tokens; Tailwind 1, 2, 4, 6, 8, 10, 12). Page spacing, padding and row heights land on the scale; icons, table cells and similar small details may be bespoke.

• The page ground is --color-bg-page; content sits in white cards on it, separated by the card edge rather than by shadows or gaps alone.
• Buttons are 32px tall (h-8); no clickable target drops under 32px, including wrapped lookup buttons (current: min-h-8 on the professional-discovery buttons).
• The workbench has an always-open section rail on the left, the form in the middle and a sticky action bar at the bottom of the viewport; the review queue is one table with whole-row links.

The app is flat. Hierarchy comes from the card edge, the two surfaces and type weight, never from shadows on cards.

• Cards, the header, the sticky bar, status boxes and chips have no shadow (current).
• Floating layers, which sit over content, take a --color-border-card edge plus --shadow-popover 0 4px 12px rgba(22,31,39,.12) (the alpha base is the ink): the select menu, popovers, dropdown menus and alert dialogs (current).
• Tints and hovers sit only inside white cards. A tint placed directly on the page ground vanishes, because the ground is the same slate-50.

• Surfaces are square (current): --radius: 0px, so every shadcn surface (card, popover, dialog, menu, tooltip) and every hand-rolled surface (status box, item tint, the rail, the sticky bar) has 0 radius. The brand is square-cornered, and the 10px shadcn radius is the most recognizable stock default.
• Controls are 2px (current): --radius-control: 2px on buttons, inputs, textareas, selects, checkboxes and the avatar (rounded-(--radius-control)).
• Chips are pills (current): rounded-full on every state and record chip and the rail count tag, the one exception to square corners, because a 2px chip reads as a mini button and chips must never compete with buttons. Never use rounded-4xl or another --radius multiple for a pill; with --radius at 0 it goes square.
• Radios stay round, because a square radio reads as a checkbox.
• The avatar is square at the 2px control radius (current), to match everything else in the header.
• The cut (current): the brand's angle as a 64° slanted edge (90° − 26°, measured from the vertical), drawn in --color-mark-cut with clip-path. Two sizes share the angle: the 40×24 title tab before the page <h1> (polygon(0 0, 100% 0, calc(100% - 11.7px) 100%, 0 100%), since 24 ÷ tan 64° = 11.7) and the 12×8 marker on the rail's current item (calc(100% - 3.9px)). The title tab appears once per page, only on request headers and the two queue pages, and is aria-hidden. Both sizes are the .cut rule in globals.css, which derives the slant from the height (var(--cut-height) / tan(64deg)); the title tab is the TitleCut component.

Every component below is current: each one reads the tokens, with no hex or Tailwind palette class left in src outside globals.css. The YAML components block gives the same values as references; borderColor there is the one property the format doesn't define.

Buttons

Three tiers, each with every state, plus a danger version of each (see Danger buttons). One primary per page. The tier names and legacyVariants in ui/button.tsx stay.

Every size uses rounded-(--radius-control). No variant sets its own focus-visible:outline-* color; the base rule's ring shows on all of them.

Danger buttons

Each tier has a danger version on the red scale with its own states, so a danger button never borrows the blue tiers' pressed blue or turns slate only when disabled (D25). Primary and secondary step 600, 800, 900 from rest to pressed; disabled is neutral on every tier, because slate-100 is the blue primary's disabled fill and still shows a shape on a white card (1.38:1). Focus is D86's one blue ring on every tier, and the hero's white override still applies.

Text pairs: white on red-600 6.39 · −85.9, on red-800 12.06 · −99.9, on red-900 15.59 · −104.4; red-600 on white 6.39 · 80.8; red-800 on red-100 8.55 · 74.0; red-900 on red-200 8.46 · 64.9; red-700 on white 8.92 · 89.0, on red-100 6.32 · 66.9; disabled slate-400 on slate-100 2.25 · 37.1 (exempt).

Focus ring

Current for every control, button and row link. One rule for every control, button and row link: outline: 2px solid var(--color-focus-ring); outline-offset: 2px, set in @layer base on button, a, input, textarea, [role="checkbox"], [role="radio"], [data-slot=select-trigger] and [data-slot=combobox-chip]. The resting outline-color of every element is --color-focus-ring too, so transition-colors has nothing to fade. Because that rule is in a layer, a utility outline-none or shadcn's focus-visible:ring-* beats it, so components must not set either. The offset is never 0, because against the primary and needs-you fills the ring itself is near 1:1 and the offset gap carries the contrast. The one exception is the queue row link, which draws its ring 2px inside the row (outline-offset: -2px), because the table clips an outside ring. Two more scoped changes (D86, 2026-10-22): .hero redefines --color-focus-ring as white and its sign-in button uses the secondary tier, because blue-700 is 1.95:1 on the navy; and a menu or combobox item that keyboard focus reaches keeps its slate-50 highlight and draws the same ring 2px inside (focus-visible:-outline-offset-2 on dropdown and select items; data-highlighted while the popup is in keyboard mode on combobox items), because the highlight alone is 1.06:1 on white.

Form controls

Inputs, textareas, selects, checkboxes and radios: border --color-border-control (through border-input), hover border --color-border-control-hover with no fill change, disabled fill and border --color-action-disabled-bg/--color-border-disabled with --color-text-disabled, radius --radius-control (radios round), checked checkbox and radio fill and border --color-action with a white mark. --input is the control border and --border is the divider; they are separate tokens and must stay separate. Menu items in select.tsx and dropdown-menu.tsx highlight with focus:bg-(--color-bg-row-hover) focus:text-(--color-text), not shadcn's focus:bg-accent, because --accent is blue-50 for ghost-style hovers and a blue menu highlight would read as an action.

Cards and surfaces

One card style everywhere: --color-surface, a 1px --color-border-card edge, 0 radius, no shadow, no ring (shadcn's ring-1 ring-foreground/10 goes). Dividers inside a card are --color-border-divider. Item blocks (status and conflict boxes) are --color-surface-tint with 0 radius, inside a white card. One tint marks where you act: --color-action-tint-hover (blue-50) for a review item's action header, and blue-50 with a 4px --color-action left edge for its return form and the evidence panel, while slate-50 stays the tint for items and rows (D100); every pairing on blue-50 passes (secondary text 5.53 · 75.3). Queue rows, workbench row links and menu items hover with --color-bg-row-hover. The tooltip is --color-text with white text, 0 radius, and its arrow uses the same token. Legacy surfaces (.form-card, .notice, .conditional-panel, .error-summary, .code-block, .view-switcher) take the same card rule.

Chips

A state chip names one state per item, by icon and label, never by color alone; chips are non-interactive apart from a hover tooltip naming the state. Color follows whose move it is.

Record-status chips have no border and no shadow, so they stay apart from the waiting chip's outline. The unqualified "Ready for ProLaw" record chip keeps an amber warning look, because amber stays the app's warning color; its warning fill, border and text tokens are --color-warning-bg, --color-warning-border and --color-warning-text (current). The Badge's general variants map onto the same tokens: secondary and outline are neutral pills (--color-record-bg fill, --color-border-control edge, --color-record-text), info is --color-action-tint-hover with a --color-action edge and text, and default is --primary. My Requests uses state chips from the secretary's side (Draft, Changes Requested and Rejected read needs you, Submitted and In Review read waiting, Ready for ProLaw and Ready for Conflict Search read done), not record chips.

Section rail

Every section and item label --color-text-heading (current item weight 600, idle 400); count pills --color-action on --color-action-tint-hover; idle item ticks and the track --color-rail-track, 2px; link hover --color-rail-hover (slate-100, because blue-50 is 1.00:1 on the slate-50 ground) with the label turning --color-text; the current item's marker is the 12×8 cut in --color-mark-cut (the compact rail too); the count tag is --color-action-tint-hover with --color-action text. One state marker per open item, each with its own shape: a filled --color-state-needs-you-bg circle with a target (needs you), a --color-state-waiting-bg circle with a --color-state-waiting-border outline and a --color-state-waiting-text clock (waiting), a --color-state-blocked octagon with "!" (blocked). Done items leave the rail.

Header and nav

The header is --color-surface with a --color-border-card bottom border. Nav links are --color-text-nav; the current item's underline is --color-action. The avatar is --color-action-tint-hover with --color-action initials at --radius-control; the count tag uses the same pair. The demo and integration-status banner is --color-bg-banner with a --color-border-banner bottom border.

The intake app is where Lippes Mathias secretaries submit new-matter requests, paralegals review and correct them, and approvers sign off before ProLaw. It should read as the firm's own tool: quiet, square and dense, with the firm's blue #005288 as the only action color and a slate neutral made from the same hue, so every screen comes from one brand hue plus a few state colors that carry meaning. Users scan long forms and queues all day on ordinary office monitors, so the system favors clear edges, high contrast and few near-white surfaces over subtle tints.

Methodology: the design-craft base: one OKLCH lightness grid for both scales, tinted neutrals, and contrast computed rather than eyeballed (WCAG ratio and APCA Lc, both given for every key pair below).

How this file maps to code. Every token here is a CSS custom property in src/app/globals.css :root with the same name: the primitives (--blue-*, --slate-*, --white) hold the hexes, and the semantic tokens (--color-*) point at them with var(), except the state families, which hold their own values. Components use semantic tokens only, as arbitrary-value utilities: bg-(--color-surface-tint), text-(--color-text-secondary), border-(--color-border-card). The tokens are deliberately not registered in @theme, because Tailwind's built-in --color-slate-* and --color-blue-* are different palettes and the --color-* theme namespace would turn each token into a clashing utility name. shadcn's own names (--primary, --border, --input …) and the older hand-rolled names (--ink, --line …) point at the semantic tokens; see "Mapping to globals.css" under Colors.

Status markers. Current means it ships in globals.css and the components today; target means it is decided and specified here but a component still hard-codes an older value. Build new work to the target, and when you move a component onto it, flip the marker in this file in the same commit. Today everything in this file is current: the tokens, the type, the radius scale, the focus ring, and the button, chip, card, control, rail, cut and header rules in Components.

Dark mode. Only the home hero sets .dark (a navy section on --legacy-navy), so .dark and dark: utilities are live there and nowhere else. App-wide dark mode is out of scope: there is no theme toggle, and the .dark block in globals.css is left as it is rather than guessing a palette nobody designed.