Brand Identity, Palettes, and Typography

On this page

Context

CRAIG ships as a codebase, not as one state’s app. The identity here is the identity of the project: what shows on docs, in Studio, on the open-source site, and in the quiet "powered by CRAIG" signature inside every deployed state app. Each jurisdiction provides its own agency seal + agency name; CRAIG’s mark adopts the active theme color and steps back.

The Aegis mark

Aegis is the chosen mark: one arc, one dot. The open ring is a protective embrace; its upward terminals read as a child with arms raised; the solid center is the child held safe. Shelter and joy in the same stroke — and still a quiet "C" for CRAIG.

Construction rules

  • Single-color by construction. Survives a favicon, an embroidered polo, or a court-document footer equally.

  • Three variants: positive (ink on light), reversed (white on dark), filled (app badge / chrome tile).

  • Scales clean from 48 px → 16 px favicon. Minimum size 16 px.

  • Clearspace = one center-dot on all sides.

  • Lockup: mark + "CRAIG" wordmark + "Child Rights Advocacy & Information Governance" tagline. Line-mark for display use; filled badge for app icons + browser-tab favicons.

How CRAIG’s mark coexists with agency seals

Inside a deployed state app, the agency seal leads in chrome (top-left, alongside agency name). CRAIG appears as a small monochrome "powered by CRAIG" mark in the footer or about screen, adopting the active theme color — present for trust + provenance, never competing with the jurisdiction.

The CRAIG mark stays in neutral ink only on:

  • The open-source project website

  • Documentation (Antora, this page)

  • Jurisdiction Studio admin surface (which is core, not jurisdiction-branded)

  • Generic identity-provider (IdP) sign-in for the open-source project itself

Alternative directions considered + rejected during the engagement: Keystone (governance-leaning, more institutional) and Aperture (information-record-leaning, more bureaucratic). Aegis won on the human-protection read + 16 px favicon survival.

The two design-language palettes

The design language names two palettes as its baseline. As built, Simple Statehouse ships in the codebase as the product-default palette (crates/craig-state-bundle/theme/simple-statehouse.toml); The Foundation is fully specified in Theme Token Schema and becomes a shipped palette when the constituent portals it serves are built. Per ADR-036, a jurisdiction that selects a named palette ships no theme.toml of its own (it overrides only branding, in Rust); only a bundle defining a custom palette embeds its own theme.toml (see Contract 4).

The tables below name only the brand-defining tokens — the few hues that give each palette its identity. The complete, authoritative contract is the fixed role-token set (12 role groups, light + dark for every token): see Theme Token Schema. That page carries the full theme.toml token names, both baseline palettes' complete light/dark values, and the migration map from the legacy --color-* tokens. A jurisdiction recolors by supplying values for those fixed role names; it never invents new names.

Simple Statehouse — for worker UI

The professional palette. Dense, calm, federal-bureaucracy-friendly without being bureaucratic. (Full token values: Theme Token Schema § Simple Statehouse.)

Token Hex Use

--primary

#103052

Header chrome + site-nav + primary actions

--link

#244c8c

Inline links + icon strokes

--accent

#cca63b

Decoration only — gold accent on chrome tiles + focus ring + selected state. Never carries text contrast.

--page

#f3f7f5

Light page background (mode = light)

Worker surfaces built today: Worklist · Case workspace · Supervisor dashboard · Jurisdiction Studio. Two more are designed for this palette but not yet built: the command palette, and the provider portal for contracted child welfare contributing agencies (CWCAs) — the latter is Phase 11 (epic &50).

The Foundation — for household + constituent

The portal palette. Warm, trauma-informed, calm. Spaces breathe; type is larger; the visual register is gentler. (Full token values: Theme Token Schema § The Foundation.)

Token Hex Use

--primary

#02343d

Deep teal — primary actions + header

--accent

#fda578

Warm peach — decoration; selected states + chrome highlights

--accent-2

#c8481a

Terracotta — warm secondary; --focus ring reuses it

--page

#fdf7f0

Warm paper background (mode = light)

Constituent surfaces designed for this palette: the public reporting portal and report workflow, plus the Phase 11 family and foster portals (epic &50, not yet built). Note the built public report portal (craig-intake) currently renders the active jurisdiction bundle’s palette from /assets/theme.css rather than The Foundation — adopting this palette for constituent surfaces is part of the portal build-out.

Light + dark — both required

Every palette ships both light and dark modes. Bundles cannot opt out of dark mode; a deployment that overrides theme.toml MUST specify both modes or inherit them from a named palette. Auto-switch follows OS preference (dark tokens render into an @media (prefers-color-scheme: dark) block). A persisted per-user override is a design target; it is not built yet — today the OS preference is the only switch.

A high-contrast mode ships alongside light/dark for state systems that require it. Audited per release.

Typography

The design pair is Montserrat + JetBrains Mono, both open-source. As built, no font files ship yet: the UI resolves from a system-fallback stack led by Montserrat (--font-family in tokens.css), and mono surfaces use the generic monospace family. Bundling the pair as woff2 assets with @font-face declarations is the design target.

  • Montserrat — UI body + headings + form labels. Geometric sans; reads clean at small sizes; supports Spanish + extended Latin without separate weights.

  • JetBrains Mono — numeric alignment (case IDs, currency, timestamps) + code blocks. Tabular figures by default; mono numerals align in column reading.

Type scale

This scale is the design target; the --type- tokens are not implemented yet. The shipped structural type tokens today are the --fs- set in services/craig-web/static/css/tokens.css (a denser chrome scale), which this scale replaces when the type system lands.

Token Size Use

--type-display

32 / 40 px

Page titles · empty-state headlines

--type-h1

24 / 32 px

Section headings

--type-h2

20 / 28 px

Panel headings

--type-body

16 / 24 px

Body text · form fields

--type-meta

14 / 20 px

Timestamps · captions · helper text

--type-micro

12 / 16 px

Status pill labels · table column labels

Constituent surfaces (Family + Public portals) use one step up on --type-body (18 px / 28 px) for readability; constituent copy targets Grade 6 reading level + uses glossary tooltips for unavoidable terms.

Red is reserved exclusively for danger

Red is danger. Period.

  • Substantiated safety findings

  • Overdue work where overdue means risk

  • Destructive actions (delete, revoke, dismiss-against-policy)

  • Service-down banners

  • Form validation errors

Red is never used for:

  • Branding (no red CRAIG mark, no red agency seal, no red theme accent)

  • Selected state, hover state, focus state

  • Delight (no red confetti, no red badges)

  • Decoration

This rule is mechanically enforceable + will be enforced via build-time lint (see Accessibility Playbook § contrast + motion).

Where these rules land in code

  • Theme tokens emit as CSS custom properties: the bundle’s theme.toml is parsed at build time (craig-state-bundle’s build.rs) into the palette contribution, which is materialized and served as /assets/theme.css (Contract 4; see The Five Engineering Contracts and ADR-036). No TOML is parsed at runtime, and named-palette bundles ship no theme.toml at all.

  • Mark art currently lives in the engagement archive (docs/handoffs/2026-06-08-design-response/mockups/); a shipped assets/brand/aegis/ asset set (line mark + filled badge + reversed) is the design target. The agency-seal slot is real today: each jurisdiction bundle’s branding.logo_path.

  • Typography bundling (assets/fonts/ + core @font-face declarations) is the design target; see § Typography for the shipped fallback-stack state.

  • Red-is-danger enforcement: the shipped guard is the #643 test that --accent never carries text contrast (services/craig-web/src/theme.rs); the fuller build-time scanner that rejects red outside registered danger surfaces is planned, per § Red is reserved exclusively for danger above.

Source + provenance

  • External design team, settled 2026-06-08

  • Mark exploration: docs/handoffs/2026-06-08-design-response/mockups/CRAIG Core Identity.html

  • Final mark: docs/handoffs/2026-06-08-design-response/mockups/CRAIG Aegis Mark.html

  • Engagement-archive bundle: docs/handoffs/2026-06-08-design-response/

  • Token system locked 2026-06-14 — the engagement delivered the fixed role-token schema (light + dark for both baseline palettes) + the legacy --color-* migration map. The set has grown since the lock (on-state foregrounds, the affordance group); the schema page is authoritative for the current inventory. The durable contract lives at Theme Token Schema; the delivery package is archived under docs/handoffs/2026-06-14-token-system/ (provenance).

  • Related: Theme Token Schema (the full token contract) + The Five Engineering Contracts (Contract 4 is the theme + token export contract that operationalizes this page)

Edit this page · latest