The Kwapso design language
Work,
structured.
Every value measured off the live site — not invented, not approximated. A design language you can drop onto an existing app in one line.
What the site actually does
Restraint, counted.
box-shadows across 5,142px
accent, per view
curves in the system
weights. no bold
Four decisions
Everything else follows from these.
It is flat
kwapso.com uses zero box-shadows across its entire length. Not subtle ones — none. A card is sand on paper, and that colour step is the elevation. Only a genuinely detached surface — a modal, a popover — may opt out, and every use is counted by the linter.
One accent, held back
Mango means “this is the next action.” Across a five-thousand-pixel page it appears on eleven filled elements. Used twice on a view it stops being an instruction and becomes a colour. This is the rule people most want to break and the one that matters most.
Two faces, two weights
A condensed serif for statements, set at 0.8 line-height — the line box smaller than the type. A grotesk at 300 and 500 for everything else. There is no bold.
Tracking opens, not tightens
Headings carry +0.5px. Nearly every system of the last decade tightens heading tracking. This one opens it — which is why the brand reads deliberate rather than urgent.
In use
Four real screens, built only from the language.
Nothing below is a mockup or an image. Every screen is live HTML using the same classes you get on install — which is the only demonstration that actually proves anything.
01 — Marketing page · comfortable density
Process audit & design
From chaos to full overview.
We map how work actually moves through your business, price the bottlenecks, and hand you a roadmap in priority order.
02 — Operations dashboard · compact density
Operations
Week 34 · updated 8 minutes ago
| Process | Owner | Status | Hrs / wk | Automatable |
|---|---|---|---|---|
| Quote to order | Sales | Blocked | 21.25 | 82% |
| Invoice approval | Finance | In review | 12.50 | 64% |
| Onboarding | People | Live | 8.00 | 45% |
| Supplier intake | Ops | Draft | 4.75 | 30% |
03 — Assistant · compact density
04 — Scorecard, one question at a time · mobile
When someone new joins, is there a written process to follow?
Type
Two faces. Two weights. No bold.
Serrif Condensed Light · display only
line-height 0.8 — negative leading
Make work
visible.
ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890
Saans · 300 and 500
+0.5px tracking on headings
Structure you can see, data you can trust, and a team that works from one system instead of ten.
The scale
Saans and Serrif Condensed are licensed typefaces. This page loads a local copy that is gitignored and never published; consuming apps self-host their own. Without them the language falls back to an open stack that keeps the proportions but not the letterforms.
Colour
Ink and paper carry every screen.
Mango is the single accent. Sky, forest and poppy are marks — a dot, a series, a rule down the side of an alert. None of them is ever a section background.
The first run failed 12 of them — including one where the value's own
documented ratio was wrong. Two tokens exist purely to make meaning safe: sky-deep for the
informational role (brand sky is 1.99:1 on paper, invisible as a status mark), and the stroke rule,
which outlines every chart mark so the boundary carries what a pale fill cannot. Deliberate exemptions print
their reason on every run, so they must be re-argued rather than inherited.
Parts
Nearly two hundred, framework-free.
A sample below. The full gallery lives on Components, whole-screen scaffolds on Screens, and the waiting vocabulary on Loaders & states.
Buttons
44px · 24px padding · pill · 500 · 0.2s cubic-bezier(.645,.045,.355,1)
Marks
Colour never carries meaning alone — every dot ships with its label.
Form
As it appears on your invoices.
Enter a valid email address.
Navigation & disclosure
- ✓Audit
- 2Design
- 3Build
Who or what is kwapso?
How long does the scorecard take?
Scale · the scorecard's core interaction
Feedback
Motion
Alive, without decoration.
Gradients, glow, drift and bounce are the usual answer to “make it feel alive”, and all four
are forbidden here. So life comes from four other places — each under 400ms, each using one of
only two easings, and all of it gone entirely under prefers-reduced-motion.
01 — arrival & stagger
Capped at eight items — past that the last row arrives late enough to feel broken rather than choreographed.
02 — continuity: figures count, bars travel
03 — selection carries the relationship
04 — response: the press, on the down stroke
Gradients, glow, saturated multi-colour panels and bouncy overshoot all read as “alive” at a glance, and every one of them contradicts a rule this language is built on. The floating tab bar and the card rhythm came across; the decoration did not.
Cognitive load
Most systems ship taste. Taste loses to a deadline.
So the budgets are counted by the build. They live in
tokens.json, which makes them versioned and arguable in a pull request rather than buried in a script.
| Rule | Budget | Why |
|---|---|---|
accent-budget | 1 | A second mango makes both mean “something”. |
type-scale | 3 | Every size added is another thing the eye must rank. |
grouping | 7 | Past seven, a list stops being scanned and starts being searched. |
flatness | 2 | Only detached overlays may cast a shadow. |
motion-budget | 400ms | Beyond this, motion reads as a wait, not feedback. |
touch-target | 44px | The brand's control height and the WCAG floor agree. |
hardcoded-value | 0 | A literal colour cannot be re-themed or dark-moded. |
colour-only-meaning | 0 | Colour alone is invisible to about one man in twelve. |
Building this page, the grouping rule caught an eight-item sidebar and the flatness rule caught a regex bug that was silently passing every shadow. Both were real.
Adopt
Three doors. Take as much as you want.
01
Reskin, one line
Semantic HTML is styled for you. No markup changes, no build step, no framework. This is the Webflow path too.
02
Tokens only
Map the variables onto components you already have. CSS, SCSS, typed JS, Tailwind preset, or Figma.
03
React
Components that render exactly the same class names — one implementation, two front doors, so they cannot drift.
<link rel="stylesheet" href="structure.css">
<body data-density="comfortable"> <!-- or "compact" for app screens -->