Brand Style Guide

Palette

Six anchors. The app is built from these — do not introduce new hues.

Infrastructure Blue#234B7D

--brand-blue / --primary

Identity. Page titles, active nav, primary buttons, brand chrome.

Structural Green#0F8B72

--brand-green / --success

Continuity. Success, connected, active, completed states.

Construction Orange#F28C32

--brand-orange / --warning

Attention only. Pending, blocked, alerts, important indicators. Never dominant.

Deep Slate (Ink)#1E293B

--foreground

Body text in light mode, dark mode surfaces.

Paper#F6F8FA

--background (light)

Light app background.

Night#0E1116

--background (dark)

Dark app background.

Gradients

Used for primary CTAs and the landing hero wash only. Do not splash on cards.

Brand gradient

var(--gradient-brand)

Apply via the btn-brand utility or <Button variant="brand">. Reserve for primary action.

Hero wash

var(--gradient-hero)

Apply via the bg-hero-brand utility. Use behind heroes, empty states, and brand headers only.

Tokens to use

Everything in components must route through these — never hard-code hex or Tailwind palette colors (no amber-500, sky-300, etc.).

Token	Use for	Avoid
`primary`	Brand identity, primary buttons, active nav, headings emphasis	Body text, large backgrounds
`success`	Completed, active, resolved, selected, healthy	Warnings, danger
`warning`	Pending, blocked, draft, attention badges, timeline issue accents	Large fills, success states
`destructive`	Cancelled, delete, irreversible danger	Routine errors that aren't destructive
`muted / muted-foreground`	Secondary text, captions, neutral chips	Active states
`accent`	Subtle hover surfaces, tinted info chips	Primary actions
`border / input`	Card outlines, dividers, form inputs	Decorative strokes — keep matte

Components

Reach for these before writing custom styling.

Buttons

Primary CTAs use variant="brand" with size="xl" or size="hero". All other accents come from variants — never restyle with custom gradient classes.

Status pills

ActivePlannedOn holdCompletedCancelledOpenMonitoringResolved

Use <StatusPill status={...} /> for every status surface so the color mapping stays consistent across modules.

Inline alerts

Pending approval — show in warning soft tone.

Synced and connected — success soft tone.

Operational info — primary soft tone.

Pattern: border-{token}/30 bg-{token}/8 text-{token}. Never use solid fills.

Surfaces

Matte card — operational content. bg-surface + border-border.

Glass — chrome only (nav, headers, sheets, chips). .glass

Glass chip — filter chips, status badges in chrome.

Hierarchy rules

Blue is identity. Green is continuity. Orange is attention. Never invert these roles.
Operational content stays matte. Liquid glass is for chrome only.
Status surfaces always use soft tinted backgrounds — never full saturation.
Reach for <Button variant="brand"> for primary CTAs; never re-create the gradient inline.
Never import a Tailwind palette color (amber, sky, emerald, rose, etc.) — only semantic tokens.