/design-system

Tokens, atoms, and widgets — all in one place.

Every component on every Bob surface — marketing, dashboard, portal — composes from the same tokens. This page lists them. Engineers building integrations or extensions should start here.

Atoms

Nine atoms compose everything else.

Mono · Pill · Dot · AIBlock · BobBtn · BobInput · HR · I (icon) · BobMark. All atoms read live from useBob(), so palette + density tweaks propagate everywhere.

BobBtn variants

BobBtn sizes

Pill tones

neutralaccentgreenamberred

Dot tones

Mono · dim and live

CUS-7180hash 0xa14f

BobMark

b/

b/

b/

Icons (sample)

voiceshieldmessagefiletrendingsparklebell

BobInput

AIBlock (Bob's voice)

Bob’s read. Premium creep above market on the auto line. Recommend a principal-led renewal call before Apr 18.

//cited · 4 sources · [email protected]

HR (hairline)

Widgets

Form, KV, Avatar, ThemeToggle, EmptyState.

Avatar tones

ThemeToggle

Checkbox + Slider

Remember me

Seats40seats

1120

FormField + FormInput + FormSelect

Role

KV (label / value rows)

CustomerTe Awa Holdings · CUS-7180

Premium$84,200

Risk92 / 100

Statusamber

EmptyState

No open claims

Bob is monitoring this customer's policies. If a photo or call comes in, you'll see it here within seconds.

CardEyebrow

Ledger head

Card

Renewals · today

Six renewals open. Two need broker review before 4pm.

KpiTiles

Open

11

of 14

At risk

12

+3 this week

Renewed

37

rolling 30d

Premium

$84.2k

vs $79.1k last yr

FilterPills

ConfirmDialog

ToastHost / useToast

Menu / MenuRow / MenuDivider

DataTable

Name

Date

Amount

Northbridge · April retainer

2026-04-30

$4,200

Harbour & Reid · onboarding

2026-05-02

$12,840

Claymore Risk · seat top-up

2026-05-08

$1,150

Te Awa Holdings · bespoke twin

2026-05-12

$28,400

SplitView (master-detail)

2 days

Northbridge · renewal

The right pane renders whatever you pass as content. Below 1024px this pane swaps the list, and the back-strip at the top returns to the list.

Tokens

Three palettes, three type pairings, three densities.

Every token lives in src/design-system/tokens.ts. To change a palette everywhere, edit one record.

PALETTES = paper, dark, carbon
TYPE_PAIRINGS = geist, inter, plex
DENSITY = compact, standard, comfortable
ICON_NAMES = 40 keys (see tokens.ts)

Marketing

Eight global components for the marketing site.

These live under src/features/marketing/ and are imported by every marketing page. None of them should be copied; if a page needs a variant, extend the component.

MarketingNavchrome.tsx

Sticky top bar · BobMark + nav links + Pillars hover panel · Sign in / Request demo / ThemeToggle · hamburger drawer below 768px.

MarketingFooterchrome.tsx

Brand block + Product/Company/Resources 3-col grid · audit-ledger strip · stacks below 768px.

MPageHeaderpage-headers.tsx

Sub-page header: accent dot + eyebrow + 52px display title + optional sub. Auto-scales to mobile-safe sizes.

PillarHeaderpage-headers.tsx

Inline section header: 1fr/2fr grid · mono eyebrow left · 40px h2 + optional sub right. Stacks below 768px.

SectionCTAsection-cta.tsx

Dark band closing CTA. Primary → /signup. Secondary mailto:founders. Used on every standalone marketing sub-page.

SectionPricingsection-pricing.tsx

Three-tier pricing table with feature matrix. Horizontal scroll on mobile; Recommended ribbon on Growth.

LegalPagelegal-page.tsx

Template for /legal/* (privacy · terms · dpa · fma · audit). MPageHeader + accent-rail scope callout + long-form body.

MarketingPillarpillar-page.tsx

Template for /pillars/[pillar]. Hero + demo frame at content width + how-it-works + adjacent-pillars row + SectionCTA.

Layout

Seven conventions every marketing page follows.

When a new page is needed, start from these — they keep the whole site coherent and hand-off ready without a design review.

Content width

maxWidth: 1280 on every section. Inner copy clamps tighter via explicit maxWidth on the text element (typically 520–880).

Page padding

padding: 32px lateral on desktop, 20px on mobile via the .bob-page-pad class. Vertical padding varies per section but always uses 8px multiples.

Accent-dot eyebrow

Section openers use a 5px accent dot + f.mono 11px uppercase label, separated by 8px. Used on home hero, MPageHeader, every sub-page header.

Accent-rail callout

A 2px-wide vertical bar (p.accent) inside a soft-accent panel (p.accentSoft) for "Bob is doing X" affordances. See AIBlock and the legal-page scope callout.

Dark CTA band

SectionCTA closes every standalone page with a dark band (p.text bg, p.bg text) — primary CTA cream-on-dark, secondary outlined.

Channel cards

Three cards in a row for "founders / sales / press" or "voice / claim / renewal" patterns. Mailto links with accent-border hover. Collapse to 1 column on mobile.

Status surfaces

Live · beta · soon → Pill green / accent / amber. AI-authored content → AIBlock with citation source. Hashes / IDs / timestamps → Mono.

Responsive

One breakpoint. Eleven utility classes.

Shipped inline in the SSR’d <head>so mobile’s first paint already has the right layout. Breakpoint is max-width: 768px. No JS hook, no hydration mismatch.

.bob-mobile-hide

display: none below 768px (desktop-only nav links, CTAs).

.bob-mobile-show

display: flex below 768px, hidden above. For hamburger + drawer.

.bob-grid-2/3/4/6

Collapses any grid-template-columns to 1fr below 768px.

.bob-row-stack

Flex row → column, align-items: stretch below 768px.

.bob-page-pad

Lateral padding 32px → 20px below 768px.

.bob-page-pad-y

Vertical padding shrinks below 768px (MPageHeader uses this).

.bob-h1-display

Display headline clamps to 36–44px / -1px tracking below 768px.

.bob-h2-display

Section headline clamps to 28–34px below 768px.

.bob-h3-display

Sub-headline clamps to 20–24px below 768px.

.bob-mobile-scroll

overflow-x: auto below 768px. For pricing table.

.bob-nav-cta-row

Tightens nav CTA cluster gap to 6px on mobile.

Source: src/app/layout.tsx → RESPONSIVE_CSS. Edit there to add a class or shift the breakpoint.

SEO · GEO

Every marketing route is indexable, cited, and NZ-geo-targeted.

Adding a new public route? Drop an adjacent layout.tsx next to your page.tsx and call pageMeta(). Sitemap + robots regenerate automatically.

Root metadata

src/app/layout.tsx — title template, metadataBase, OG/Twitter defaults, Schema.org Organization + WebSite JSON-LD, geo.* meta tags, viewport export.

Per-page metadata

Adjacent layout.tsx exporting metadata = pageMeta(...). See src/features/marketing/page-meta.ts.

Sitemap

src/app/sitemap.ts — 16 top-level + 7 pillar + 5 legal routes with relative priorities.

Robots

src/app/robots.ts — gates /app/, /portal/, /route-map, /api/, /_next/.

GEO target

NZ primary (Auckland · -36.85, 174.76), AU secondary. Wired via Schema.org areaServed + geo.region=NZ-AUK.

Language

lang="en-NZ" on <html> + locale: "en_NZ" on OG.

The next twenty insurance brokerages will not be built on spreadsheets.

We’re onboarding ten design-partner brokerages this quarter. If your book is between 1,000 and 12,000 policies, we should talk.