How Kwik dashboards and apps are built: one typeface, ink for action, one yellow accent, white cards that float on a soft grey canvas, numbers as the hero. Every value here comes from shipped Kwik product. Click any value to copy it.
If you only read one section, read this one. Everything else is detail.
Our build of Poppins. Weights 400 / 500 / 600 / 700, base 14px, line-height 1.4. 800 is the wordmark only.
Primary buttons, active segments and the active view are Ink. Yellow is the accent bar, the one accent button, the #1 badge, the chart series. Never a background.
Canvas #F2F2F3. Cards white, radius 20, padding 18, no border and no shadow at rest — the canvas does the lifting. Shadow only on hover and on sheets/menus.
App cards open with an 18/700 title and a link. Dashboard data cards open with the 8×24 accent bar and a 16/600 title. No coloured icon tiles, no pastel fills — the only icon box is the stat tile’s white hairline one.
No navy, indigo or blue-tinted greys. Greys are warm-neutral. Notices are yellow-soft, never blue.
The Ink summary card (one per screen, with a yellow sparkline) and the soft-grey feature card. Everything else is white.
20 cards · 16 media & user panel · 14 panels & inputs · 12 nav, icon buttons, inline form buttons · 10 segments & icon box · 999 buttons, chips, pills, search, avatars.
Tabular numerals everywhere. Cash amount 52/800, dashboard metric 36–40/700, stat tiles 24/700 — each with one muted line of context. Buttons are pills.
Ink, yellow, white and warm-neutral greys. Peach is the only secondary accent-bar colour. Click a swatch to copy it.
#0B0B0F#3A3A40#6A6A70#84848A#EDEDEF#E7E7E9#F0F0F2#ECECEF#138A5B#C2410C#1FB57A#6A6A70#D99A00#0E744BRule: money is never yellow — yellow is the series colour in charts, not the number. Dark mode tokens live in tokens.css.
One family. Weight does the hierarchy; size stays restrained. Tabular numerals on every number.
feature-amount · 52 / 800 / −.04emhero-metric · 36–40 / 700 / −.02emstat-value · 24 / 700 / −.02emgreeting · 26 / 700 / −.02emdashboard greeting · 28 / 600app-section-title · 18 / 700card-metric · 20 / 700dashboard-card-title · 16 / 600body-strong · 14 / 600body · 14 / 400 / 1.4label · 12 / 600 mutedcaption · 12–13 / 400 mutedoverline · 11 / 500 / .08em capsSpace 4 · 8 · 12 · 16 · 20 · 24 · 32 · 40 · 48. Radius is locked to the role.
20 cards, sheets · 16 media images, user panel · 14 inner panels, inputs, segmented track · 12 inline form buttons, nav items, icon buttons, notices, value tiles · 10 segments, stat-tile icon box · 999 buttons, chips, pills, search, avatars, rank badges, switches.
48 · 36 · 30 · 4448 · 44 · 4032 · 38 · 36 · 2246 · 44 · 56–6476 (64 mobile) · 256 · 360 · 14808×24 · 28 · 36 / 56 · 36 · 52Elevation: resting cards cast no shadow. 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.05) appears on hover of a tappable card and on sheets, menus and the scrolled topbar. Active light segment 0 1px 3px rgba(0,0,0,.10). Nothing else casts a shadow.
Buttons are pills. Yellow is the app’s primary CTA (one per view); black is the dashboard primary. The only non-pill is the inline action that sits beside an input.
Default h48 · pad 0 20 · r999 · 15/600 Small h36 · 13/600 XS h30 · 12/600 Inline (next to an input) h44 · r12 · 14/600 Icon button 44×44 r12, hover #F4F4F5 Press scale(.97) 120ms. Disabled fill #CFCFD4.
Ranges use the segmented filter. Views use the view switch. Filters use chips. States use pills.
Light: track #F4F4F5 p4 r14, segment h38 r10 13/500, active white + shadow. Dark (dashboards): no track, segment h32 r999 12/600, active Ink fill, white label.
View switch track #F4F4F5 p4 r999, segment h36 r999 13/600, active Ink. Chip h32 r999 #F4F4F5 13/600, on = Ink. Pill h22 r999 11/600. Switch 40×22, on = yellow.
Quiet fields, a clear label, one black action. The goal block is the canonical inline form.
Input h48 r14, 1px #E7E7E9, pad 0 14, 15px; focus border Ink. Amount h76 r12 1.5px, 28/700 −.02em, focus ring #FFEFC2. Search pill h40 r999 #F2F2F3 with a 1px #EDEDEF hairline, w260. Label 12/600 muted, 6px above.
October 2026 · Month-to-date sales, independent of the chart range
No target set for this month.
Goal block: label → [input h44 r12] + [black h44] gap 8 → 13/600 sold line → 6px track #ECECEF, Ink fill (green when complete) → 13 muted helper. Empty copy: what's missing, one verb.
Flat white cards on grey. Two header styles, one feature card, one summary card, stat tiles with a hairline icon box — no coloured tiles anywhere.
Hero metric card: bar + 16/600 title + refresh + (right) dark segmented filter → 36–40/700 value → 13 muted subline → chart.
Feature card (soft): #E6E6E9 r20 p20 · amount 52/800 −.04em · legend dots + 18/700 · bars 30 r8, current month green · pill actions, equal width.
Stat tile: white r20 p16, tappable · 36×36 r10 white icon box with a 1px hairline + 17px line icon · status 11/600 coloured text top-right · 24/700 value · 12 muted label. Grid gap 12. No coloured tiles.
Ranked lists lead with a 28px badge — #1 is yellow. Tables are 13px with a muted 12px header.
App section title: 18/700 + 13/600 link, no bar. Value tile: 52 r12 #FFF6CC 15/800 with a 22px brand mark. Row: 14/600 title, 12/700 status, 12 muted sub, 6px bar (green when full).
Media card: image block r16 (h280 in the app) with a bottom scrim rgba(0,0,0,0) 35% → .7 so a pill and title can sit on it. Product/giveaway photography is content — this is the only place it appears.
Ranked list: row 56–64, divider #F0F0F2, badge 28 round (#1 #FFD836, others #F4F4F5), name 14/600 truncates, value 14/700 + 12 muted meta right-aligned.
Yellow is the series. Green dashed is the secondary. Grey dashed gridlines, faint axis labels, legend top-right.
Line 2px #FFD836, area 18%→0. Secondary 2px #1FB57A dashed 5 5. Grid 1px dashed #ECECEF, axis 11 #84848A. Legend 10px dot (dashed stub for dashed series) + 12 label, top-right. Sparkline 1.8px yellow, no area. Bars r4 yellow, empty #D4D4D8.
The whole system on one screen. This is what "on-brand Kwik software" looks like — build to this.
October 2026 · Month-to-date sales, independent of the chart range
No target set for this month.
Layout: sidebar 256 · topbar 76 · page pad 24 28 40, max 1480 · main 1fr + rail 360, gap 20 · cards r20 (p24 here) · section gap 20. Mobile: single column, pad 16, sidebar → drawer, topbar 64.
The one that changed in v2: card headers are text-led. The accent bar is the only decoration.
8×24 bar + 16/600 title. Numbers do the talking.
Pastel icon tiles, coloured squares, lilac / mint / sky bars — retired. They made every card look like a widget.
Pill buttons. One yellow primary, a quiet white secondary beside it.
Two yellow buttons in one view. Square corners. Any blue, ever.
Flat white r20 on the grey canvas; a white hairline icon box; coloured status text.
Outlined r8 cards, blue-tinted surfaces, shadows on buttons or inputs.
Before you ship a Kwik screen, every box is ticked.