Design system · kamalathedesigner.com
The system behind this site.
Most of my design system work sits behind a password because it belongs to my employer. This one is mine, so you can inspect it. Every color, type style, and component on this page is the real one the site uses. The values are read from the site's own code as the page loads, so the page cannot drift from what it describes.
One set of tokens
Every page draws on the same named colors, typefaces, and shapes.
AA on every pair
Each text color passes WCAG AA contrast on each background. The table below shows the numbers.
Reads itself
The color values and contrast ratios here are calculated in your browser from the live tokens.
01 · Why document a portfolio
Small system, same method.
This is a much smaller system than the ones I build at work. It supports one site, not a product with several engineering teams. The method is the same, though: settle the foundations, build components only from those foundations, and keep the documentation next to the thing it describes.
I'm sharing it because a design system claim is easy to make and hard to check. Here you can check it. Open your browser's inspector on any page and you'll find the same names you see below.
02 · Color
Ten colors, each with one job.
Three backgrounds for depth, three text colors for hierarchy, one accent, and three low-opacity lines and fills. These ten do nearly all the work. The homepage's opening section adds a few darker shades of its own.
--bg
#090810
Page background
--bg2
#110D1A
Cards and figures
--bg3
#1A1428
Raised surfaces
--tx
#EDE3F6
Headings, key text
--tx2
#C49CF5
Body text
--tx3
#9E74D4
Labels, captions
--accent
#B97EF0
Links, emphasis, focus
--accent-lt
rgba(185,126,240,.10)
Tinted fills
--accent-bd
rgba(185,126,240,.28)
Highlighted borders
--bd2
rgba(237,227,246,.14)
Dividers, outlines
| Text color | On --bg | On --bg2 | On --bg3 |
|---|---|---|---|
| --tx | 16.1:1 | 15.4:1 | 14.4:1 |
| --tx2 | 8.9:1 | 8.6:1 | 8.0:1 |
| --tx3 | 5.6:1 | 5.4:1 | 5.0:1 |
| --accent | 6.9:1 | 6.7:1 | 6.2:1 |
WCAG AA asks for at least 4.5:1 for normal text. The lowest pair here is 5.0:1. Ratios are calculated in your browser from the current token values.
03 · Type
Two typefaces, a short scale.
DM Serif Display carries headings and anything that should feel like a statement. DM Sans carries everything you read at length. Italic serif in the accent color is the one flourish, used once per heading at most.
Page title
DM Serif Display · 2.2 to 4rem · 1.05
Design that earns trust.
Section heading
DM Serif Display · 1.6 to 2.4rem · 1.15
Build the system first.
Lede
DM Sans · 1.05 to 1.2rem · 1.7
A short opening paragraph that says what the page is about before any detail.
Body
DM Sans · 1.0625rem · 1.75 · 68 characters wide
Body text is set a little larger than default, with generous line height and a capped line length, because case studies are long reads.
Label
DM Sans 600 · 0.7rem · uppercase · 0.12em
01 · The problem
Caption
DM Sans · 0.82rem · 1.6
Captions describe what an image actually shows.
04 · Shape, depth, and motion
A few values, used everywhere.
--r
10px
Cards, small images
--r-lg
16px
Figures, callouts
Pill
100px
Buttons only
--sh-sm
0 2px 8px rgba(0,0,0,.35)
Slight lift
--sh
0 8px 32px rgba(0,0,0,.50)
Dialogs
--ease
cubic-bezier(.25,.46,.45,.94)
Every transition. Hover the box.
Motion is optional. If your device is set to reduce motion, the site turns its animations off.
05 · Components
Built only from the tokens above.
These are the live components, not pictures of them. Each one is used across the site, and each is labeled with the name it has in the code.
Buttons .btn-primary .btn-ghost
Result .case-stat
Short result
One sentence saying what the result means and where it came from.
3 of 3
Numbers only appear when they can be backed up.
Plain words
When there is no number, a plain statement does the job.
Process flow .case-flow, with .is-human for steps a person owns
Step 1
Gather
Inputs come in.
Step 2
Draft
A first version is made.
Step 3 · Person
Review
A person checks it.
Step 4
Save
The result is kept.
Pull quote .case-quote
One sentence that carries the argument of the section.
Decision .case-decision
Topic
The decision, written as a sentence about what I did.
Then the reasoning, and what it cost or made possible.
Callout .case-redo
Used for "What I'd do differently," so the honest part of a case study is easy to find.
06 · Accessibility
Part of the system, not a final check.
Keyboard first
Press Tab on any page. A "Skip to content" link appears first, and every link and button shows a clear focus outline in the accent color.
Contrast set in the tokens
Because every text color passes on every background, a page built from the tokens passes without a separate contrast review.
Motion you can turn off
Animations follow your device's reduced-motion setting.
Structure for screen readers
Each page has a main region the skip link jumps to, image descriptions that say what the image shows, and diagrams that read as lists.
07 · What I'd do next
The tokens are identical on every page, but each page currently carries its own copy of the stylesheet. The next step is one shared file, so a change to a token is made in one place. It's the same move I made on a much larger scale in the Tidal Cyber design system.