Sample data while we build. Names, prices and register numbers are illustrative.
search
Sign in
Design system · v1

Bob design system

Tokens and components for every Bob surface: the public platform, Bob tools and the white-label screens. Built from the design package. New UI uses these; generated pages are converging on them.

ColourTypeSpaceButtonsStatusCardsFormsDataOverlaysRules
Foundations

Colour

Use semantic names in components. Primitives are catalogued from the design package and named family-lightness; their count is the drift still to consolidate.

--color-bg
paper-980 · oklch(0.98 0.004 95)
--color-surface
paper-995 · oklch(0.995 0.003 95)
--color-surface-sunken
paper-970 · oklch(0.97 0.006 95)
--color-surface-subtle
paper-955 · oklch(0.955 0.006 95)
--color-border
line-900 · oklch(0.9 0.008 95)
--color-border-soft
line-920 · oklch(0.92 0.006 95)
--color-border-strong
line-880 · oklch(0.88 0.01 95)
--color-text-strong
ink-140 · oklch(0.14 0.02 265)
--color-heading
ink-160 · oklch(0.16 0.02 265)
--color-text
ink-180 · oklch(0.18 0.02 265)
--color-text-body
ink-440 · oklch(0.44 0.02 265)
--color-text-muted
ink-460 · oklch(0.46 0.02 265)
--color-text-subtle
grey-500 · oklch(0.5 0.015 265)
--color-text-faint
grey-600 · oklch(0.6 0.015 265)
--color-link
blue-500 · oklch(0.5 0.13 258)
--color-accent-subtle
blue-965 · oklch(0.965 0.014 258)
--color-accent-border
blue-910 · oklch(0.91 0.025 258)
--status-info-bg
blue-945 · oklch(0.945 0.028 258)
--status-info-fg
blue-420 · oklch(0.42 0.12 258)
--status-success-bg
green-950 · oklch(0.95 0.035 158)
--status-success-fg
green-420 · oklch(0.42 0.1 158)
--status-warning-bg
amber-960 · oklch(0.96 0.035 70)
--status-warning-fg
amber-480 · oklch(0.48 0.1 60)
--status-danger-bg
red-960 · oklch(0.96 0.03 25)
--status-danger-fg
red-500 · oklch(0.5 0.15 25)
--status-neutral-bg
paper-955 · oklch(0.955 0.006 95)
--status-neutral-fg
grey-500 · oklch(0.5 0.015 265)
amber · 7 primitives
blue · 34 primitives
green · 20 primitives
grey · 15 primitives
ink · 42 primitives
line · 12 primitives
paper · 15 primitives
red · 8 primitives
Foundations

Type

Space Grotesk for headings, IBM Plex Sans for body and UI, IBM Plex Mono for labels and data. Use the named styles: font: var(--type-h2).

--type-displayEvery policy, compared openly
--type-h1Every policy, compared openly
--type-h2Every policy, compared openly
--type-h3Every policy, compared openly
--type-statEvery policy, compared openly
--type-titleEvery policy, compared openly
--type-title-smEvery policy, compared openly
--type-leadEvery policy, compared openly
--type-bodyEvery policy, compared openly
--type-body-smEvery policy, compared openly
--type-uiEvery policy, compared openly
--type-ui-smEvery policy, compared openly
--type-ui-xsEvery policy, compared openly
--type-captionEvery policy, compared openly
--type-labelEvery policy, compared openly
--type-label-smEvery policy, compared openly
--type-label-xsEvery policy, compared openly
Foundations

Space, radius, elevation

Spacing only from the scale. Corners are 4px; circles and pills use full. Three shadows.

--space-0
0px
--space-1
4px
--space-2
8px
--space-3
12px
--space-4
16px
--space-5
24px
--space-6
32px
--space-7
48px
--space-8
64px
--space-9
80px
--shadow-menu
--shadow-pop
--shadow-raised
Components

Buttons

Three sizes (48 / 40 / 32), one primary action per view. href renders a link; internal routes navigate client-side.

Variants
<Button>Primary</Button>  <Button variant="secondary">…</Button>  <Button variant="ghost">…</Button>
Sizes and icons
<Button size="lg" icon="search">Find my matches</Button>
Icon buttons
<IconButton icon="more_vert" label="More actions" />
Components

Status, tags and dots

Badges carry review status and missing-data states. Never show a blank or a zero for missing data.

Badges
ReviewedAI · 91%UnknownNot offeredNot applicableLiveSoon
<Badge tone="success">Reviewed</Badge>  <Badge tone="info">AI · 91%</Badge>
Tags and dots
Income protectionLifeAroha Tane Bob is live
<Tag>Income protection</Tag>  <StatusDot tip="Uses Bob: …" />
Components

Cards and navigation

Whole-card links for feature grids and 'Keep exploring'. Breadcrumbs always start at Home.

Compare policiesEvery reviewed policy, sorted alphabetically or your way.Learn moreFind an adviserChecked against the official register.Learn more
Card

A plain surface for grouped content.

Breadcrumbs
<Breadcrumbs items={[{ label: "Compare", href: "/insurance" }, { label: "Life" }]} landmarkLabel="Breadcrumb demonstration" />
Components

Forms

Labels above fields, inline errors in plain language, focus ring in the primary colour.

Patterns

Tables, filters and row actions

The Compare table pattern: category tabs, filter dropdowns with counts, sortable headers, whole-row links, a ⋮ menu for row actions, pagination.

ReviewActions
Harbourline Life Protect
Harbourline Life Ltd		Own occupationReviewed$31.00 NZD/mo
Kererū Term Life
Kererū Assurance Ltd		Any occupationAI · 91%$28.00 NZD/mo
Waka Life Cover
Waka Insurance Ltd		UnknownReviewed$26.00 NZD/mo
Showing 11–20 of 46 policies
Components

Dialogs and drawers

Modal for side-by-side compare and confirmations; drawer for record detail. Escape and outside click close; focus moves in and returns.

No enquiries yet
When someone contacts you from the directory, it appears here.
Improve your listing
Rules

Using the system

The short version of docs/design-system/README.md.

  1. New UI: compose from @/components/ui; style with semantic tokens (var(--color-text), var(--type-h2)). No raw colours, no off-scale spacing.
  2. Generated pages: change the design file in design-reference/, run npm run gen. Shared chrome lives in design-reference/parts.
  3. Fairness is a design rule: alphabetical or user-chosen order, no paid position, Unknown / Not applicable / Excluded shown, evidence on every term.
  4. Copy: plain, warm, short; disclose AI; no em-dashes; quotes are indicative.
  5. Accessibility: every icon button has a label, focus is visible, overlays trap and return focus, motion respects reduced-motion.