KhabenKoi design system
The live reference for every token and component. The written rules live in docs/DESIGN_SYSTEM.md; the code lives in public/styles.css and src/web/ui/.
Colour
One accent. Red is reserved for things you can tap — never decoration. Semantic colours appear only in status chips.
CTAs, active tabs, inline links--color-primary#DC2626
Primary hover--color-primary-hover#B91C1C
Secondary hover, selected rows--color-primary-soft#FEF2F2
Promotions, rating stars--color-secondary#EA580C
Open / available--color-tertiary#16A34A
Temporarily closed--color-warning#D97706
Closed, errors--color-error#EF4444
Informational--color-info#2563EB
Assist highlight (teal)--color-assist#0D9488
Headings, body--text-primary#171717
Supporting text--text-secondary#525252
Meta lines, helper text--text-tertiary#737373
Input borders, dividers--color-border#E5E5E5
Chips, utility bar--color-surface-muted#F5F5F5
Footer--color-footer#141B2D
Type
Poppins for headings, DM Sans for everything else, Hind Siliguri for Bangla. At most two weights on a line.
Heading 1 — hero & page titlesPoppins 700 28/34
Heading 2 — section titlesPoppins 600 22/28
Heading 3 — restaurant namesPoppins 600 18/24
Heading 4 — dish namesPoppins 600 15/20
Body — descriptions and paragraphs.DM Sans 400 14/22
Small — prices, dates, helper text DM Sans 400 12/18
বনানীতে প্যান এশিয়ান খাবার — Hind Siliguri
Spacing, radius & elevation
6px base unit. Cards use 12px radius and a small shadow; shadows grow on hover and press.
xs · 3px
sm · 6px
md · 12px
lg · 18px
xl · 24px
2xl · 36px
3xl · 48px
Buttons
Solid red for the main action on a page; outlined red for per-card actions; glass on gradients. Always pill-shaped.
Chips, status & ratings
Search pill
The hero of the home page. Area, cuisine, budget, free text and one CTA in a row; stacks on phones.
Inputs
Restaurant card
One anatomy everywhere: photo (4:3) → bookmark → name → rating with count → meta line → social proof → outlined action.
Placeholder imagery: a soft tone picked from the cuisine, the restaurant's initial, and a cuisine label. Replaced by real photos when we have them.
Carousel
Section head + 'View all' + one round arrow at the edge
Tabs & accordions
Tabs switch between views of the same data, with a red underline. Accordions sit two to a row on desktop.
A question
An answer.
Another question
Another answer.
Second panel
Icons & illustrations
24px line icons with a 1.75 stroke in currentColor; 64px line illustrations with an orange accent stroke.