BackKaidoStyle guide

00 — System

The Kaido design system

"Warm African-modern": cream paper base, clay primary, deep indigo secondary and ochre accent. Bricolage Grotesque display, Hanken Grotesk UI text, Spline Sans Mono metadata. Every component below is driven by design tokens — nothing hard-coded.

Textile motifs & grain

Abstract, non-literal motifs built from clay/indigo/ochre — for section dividers, brand panels and hero/CTA backdrops. Pair with the .grain paper texture (2–3% opacity).

MotifWeave — divider

MotifSteps — border row

MotifDiamonds — brand panel

Colors

background
--bg
surface
--surface
surface-2
--surface-2
foreground
--fg
muted-foreground
--fg-muted
border
--border
primary · clay
--primary
primary-soft
--primary-soft
secondary · indigo
--secondary
secondary-soft
--secondary-soft
accent · ochre
--accent-warm
accent-soft
--accent-warm-soft
success
--success
warning
--warning
danger
--danger
info
--info

Typography

Display / Bricolage Grotesque

Heading 1 — warm and certain

Heading 2 — quiet confidence

Heading 3

Body large — Hanken Grotesk. Support that feels like a conversation.

Body base — Hanken Grotesk. This is the default paragraph.

Small / muted — helper text and captions.

Metadata — Spline Sans Mono · 01 — Omnichannel · #4821 · 2m ago

Buttons

Form controls

We'll never share this.

Please enter a valid email.

Block: PasswordInput — used on /auth and /reset-password.

Block: InfoHint — keeps pages self-explanatory without static clutter.

Badges & channels

Default
Secondary
Outline
Destructive
WebWhatsAppMessengerInstagramEmailVoice

Cards, alerts & avatars

Card title

Cards use surface + border.

YOACJP

Tabs, accordion, skeleton

Recent inbox items…

Composed blocks

Reusable blocks live in src/components/blocks/ — reuse, never re-implement: Logo, TopNav, Footer, AppShell + PageHeader, Section (mono index eyebrow), ChannelBadge, WorkspaceSwitcher (sidebar workspace picker + create dialog), and the Motif set above. New reusable patterns get added there and documented here.

Status colors

Success
Info
Warning
Danger