Andrew Williams's design system for his own apps and sites: Koshiams Kitchen, a recipe and meal-planning app, and Commentaries, his essays. Every screen below is built from the same tokens. The kitchen screens use the doing setting: dark, large controls. The essays use the reading setting: light, a reading typeface, a comfortable line length. Switch the accent and both products change together.
Mode
Accent
Commentaries, in the reading setting
Light by default. Essay text in Literata, a typeface made for long reading on screens; headings stay in Hearth's serif, so it still looks like the same family as the kitchen app.
The archive
Andrew WilliamsCommentaries
Commentaries on the Golden Path
Columns written for Alarm magazine between 2004 and 2010.
#37
Spiritual Values
Summer 2010
Johnny Cash's "Spiritual," scarcity, and a future where entire lives are recorded, priced, and relived.
#36
Unite and Conquer
Winter 2009
How civilization homogenized human culture, and the danger of a planet that all lives, trades, and thinks the same way.
#35
Cult Psychology
Fall 2009
On the psychology of cults, the line between cult and religion, and why democracy depends on worshipping ideas rather than prophets.
#34
God Particles & Black Holes
2009
The Large Hadron Collider as a lens on the war between fundamentalists who answer to the past and progressives who face the future.
#33
The American Balladeer General
Oct/Nov 2008
Seeing Tom Waits live in Mobile, and finding the beautiful, real America worth fighting for against homogeny.
Seeing Tom Waits live in Mobile, and finding the beautiful, real America worth fighting for against homogeny.
Alarm #33Oct/Nov 2008Mobile, Alabama
I started looking for alternatives in high school. I'm not sure if I was truly uninterested in the forms of entertainment that were made available to me as a 14 year old, or if I purposely chose to reject the teenage culture that seemed to be rejecting me. Regardless, my foothold into the world of the peripheral was 88.1 WESU, Wesleyan University Radio.
By a twist of fate, Roshni and I had the chance to see the man live this week in Mobile, Alabama. I knew it could be the best shot I ever get, so we flew in on an expensive plane and checked into a cheap motel.
He's the Sandy Koufax of vocal power and command.
The 60-year-old was a sight for sore eyes, but what hit me like a train was the voice. He went into "Falling Down," and tears came. I could barely take how beautiful he was.
p.1
The column as printedAlarm #33, page scan
Koshiams Kitchen, in the doing setting
Dark by default, for a phone propped up while cooking. Controls are 52 points tall, the current step is the biggest thing on screen, and finished items fade rather than disappear.
Cooking a recipe
← RecipesStep 5 of 7
Baked potato
425°F400°F convection50 to 70 min
Now
Bake 50 to 70 minutes. In the toaster oven, start checking at 45.
Timer
44:12
Next: ready when a knife slides easily into the center, or it reads 205 to 210°F.
The shopping list
This week5 items
Shopping list
Produce
✓Russet potatoesBaked potato4
ChivesBaked potato1 bunch
BroccoliBaked potato1 head
Pantry
✓Olive oilhave
Kosher salt1 box
Example items, from the baked potato recipe
The tokens
The whole system: these values as CSS custom properties, a JSON copy, and written rules every build follows. A project overrides a token; it never edits a component.
Colour
Token
Light
Dark
paper
#f2f0ec
#1a1816
surface
#ffffff
#25221f
ink
#221e1a
#f3ece2
muted
#6c635a
#b6ab9c
line dividers
#dfd9d1
#3a3530
edge control outlines
#8a8075
#7d746a
accent saffron
#9a5a00
#eda63a
accent chili, chosen
#b8321c
#ef6a4f
accent basil
#356b26
#8cc27a
Measured 14 Oct: body text 14.5:1 light, 15.1:1 dark; secondary text 5.2:1 and 7.8:1; chili text and button labels 5.2 to 6.0:1; control outlines 3.4 to 3.9:1.
Type
headYoung Serif
uiFigtree, for doing
readLiterata, for reading
monoMartian Mono 425°F
scale12 14 16 18 22 28 44 60
Shape, space, settings
Token
Doing
Reading
tap (control height)
52px
44px
body typeface
Figtree 18
Literata 19
measure (line length)
60ch
66ch
default mode
dark
light
radius
8 / 16 / pill
space
4 8 12 16 24 32 48 64
motion
180ms, eased; off with reduced motion
Rules
Declare the setting (doing or reading) and the accent before building.
Every value from a token. No one-off sizes or colours.
One accent per project; it marks the one thing to act on now.
Young Serif for headings only, never paragraphs.
Sentence case. No hype words, exclamation marks or decorative emoji.
Contrast checked by number: text at least 4.5:1, control outlines at least 3:1. Colour never the only signal.
Fonts stored with the code, nothing loaded from the internet at run time.
Checked in a real browser, at phone and desktop width, in both modes.