Applications

Control

4px

Buttons, inputs, chips

Card

8px

Cards, tables, panels

Pill

9999px

Status pills, progress bars, dots

Card

0 1px 2px rgba(20,22,34,0.04), 0 1px 3px rgba(20,22,34,0.06)

Default card elevation

Card large

0 1px 2px rgba(20,22,34,0.04), 0 6px 24px -8px rgba(20,22,34,0.12)

Raised / overlay elevation

Container max

1280px

App content max width (.app-container / max-w-content)

• Background#F3F3F3
• Surface#FFFFFF
• Surface 2#F4F4F6
• Surface 3#ECEDF0
• Line#E7E7EB
• Line strong#D7D8DE

• Ink#191C35
• Ink 2#54586B
• Ink 3#8A8E9F
• Ink 4#B6B9C4

Button — primary

Main action, one per view.

rounded bg-accent px-4 py-2 text-[12px] font-semibold uppercase tracking-wide text-white hover:bg-accent-strong

Button — secondary

Lower-emphasis action.

rounded border border-line px-4 py-2 text-[12px] font-semibold uppercase tracking-wide text-ink-2 hover:border-line-strong hover:text-ink

Button — danger

Destructive action (delete, revoke).

rounded border border-bad/40 bg-surface px-4 py-2 text-[12px] font-semibold uppercase tracking-wide text-bad hover:bg-bad hover:text-white

Status pill

State of a record. Dot in the brighter -dot color, text in the base color. active=ok, paused=warn, canceled=bad.

inline-flex items-center gap-1.5 rounded-full bg-black/[0.04] px-2.5 py-0.5 text-[11px] font-semibold text-{status}

Tag

Accent tag for categories; neutral tag for metadata.

accent: rounded bg-accent/8 px-2 py-0.5 text-[11px] font-medium text-accent  ·  neutral: rounded bg-surface-3 px-2 py-0.5 text-[11px] font-medium text-ink-2

Input / Select

Text fields and dropdowns.

rounded border border-line bg-surface px-3 py-2 text-[13px] text-ink placeholder-ink-4 focus:border-accent focus:outline-none

Toggle

On/off setting. Track bg-accent when on, bg-line-strong when off; 16px knob slides.

track: relative h-5 w-9 rounded-full  ·  knob: absolute h-4 w-4 rounded-full bg-white shadow-card

Card

Default container.

rounded-lg border border-line bg-surface p-5 shadow-card

Table

Data lists. Sticky header optional (sticky top-16 z-20).

head: border-b border-line bg-surface-2, eyebrow text-[10px] text-ink-3  ·  rows: divide-y divide-line, hover:bg-accent/[0.03]

KPI tile

Headline metric with comparison context — no decorative charts.

rounded-lg border border-line bg-surface p-5 shadow-card  ·  label: eyebrow text-ink-3  ·  value: font-mono text-[28px] font-semibold tabular-nums text-ink  ·  delta: text-ok / text-ink-3

Glossary disclosure

Inline 'What do these terms mean?' for any unavoidable jargon.

<details> with summary (text-[13px] font-semibold) + dl of term/definition pairs; chevron rotates via group-open:rotate-180

Sticky white/90 header (border-black/5, backdrop-blur), square ink mark + 'BrandBot Admin', 5 primary tabs (active = text-accent, no pill), ⌘K search, operator chip. Secondary sections + build/env/operator in the footer.

Same tokens, lighter: mark + 'BrandBot · {Client}', section nav (Overview · Connections · Team · Billing · Settings), identity + sign out. No operator nav.