Call the turf about the 2AM slot on Friday
ThinkPadjust now7d left
v0.1Design system
Paper, ink,
and one signal.
The tokens, type, components and motion behind flux. Every value here is read live from globals.css, so changing a token updates this page and the product together.
Principles
01
Paper, ink, hairlines
Warm off-white surfaces, near-black ink, 1px borders. Depth comes from lines before shadows.
02
Sharp by default
Zero radius everywhere. Squares, not circles: status dots, handles and markers are all square.
03
One signal
Orange means live, new or needs attention. If everything is orange, nothing is.
04
Motion explains
Things move to show where they came from and where they went. Never just to decorate.
Color
Warm neutrals do the work. Signal is a scalpel, not a paintbrush.
Surfaces
paper
…
Page background. Warm, never pure white.
surface
…
Cards, windows, inputs.
wash
…
Hover, sidebars, quiet fills.
wash-strong
…
Selected rows, skeletons.
Ink
ink
…
Headlines, primary buttons.
ink-2
…
Body copy.
ink-3
…
Secondary copy, icons.
ink-4
…
Meta, placeholders, muted headline lines.
Lines
line
…
Hairlines: card borders, dividers, grids.
line-strong
…
Inputs, secondary buttons, keycaps.
Signal & semantic
signal
…
Liveness and the one thing that matters. Use sparingly.
signal-wash
…
Search highlights, selection.
kept
…
Pinned and permanent items.
link
…
URLs and link previews.
Typography
Arpona Light for display, Geist for interface, Geist Mono for machine voice.
Aa
Arpona Light
Display, headlines, big numbers
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
Aa
Geist
UI, body, buttons
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
Aa
Geist Mono
Meta, labels, code, keys
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
Display XL
Arpona Light · 88 / 0.96 · -3.5%
Send it.
Display L
Arpona Light · 56 / 1.02 · -3.5%
Keep what matters.
Display M
Arpona Light · 26 / 1
Stream
Lead
Geist 400 · 18 / 1.6
A private stream between your phone and your computer.
Body
Geist 400 · 14.5 / 1.6
Links get previews, codes get a big copy button, commands get monospace.
UI
Geist 400–500 · 13
Stream · Kept · Links · Files
Mono
Geist Mono · 12
ssh deploy@203.0.113.7 -p 2222
Label
Geist Mono · 11 · +6% · caps
Median phone → laptop
Space & depth
A 4px grid. Hairlines first, soft shadows only for things that float.
Spacing
4px
8px
12px
16px
24px
32px
48px
64px
96px
Elevation
Flat
Default for everything
Float
Hover, popovers, toasts
Lift
Windows, sheets, the hero
Radius
0 · everything
2px · the ceiling
never
Components
Buttons
Inputs
Badges, tags, keys
7d left19h leftKeptLinkSoonread-laterkeys⌘KC⏎ live
Stream items
The core of the product. Type is detected automatically; the hairline at the bottom shows remaining life, and kept items get a green spine.
Designing calm software: notes on attention
calm.software/essays
Pixeljust nowread-later7d left
482 913
One-time code from your bank
Pixeljust now54m left
ssh deploy@203.0.113.7 -p 2222Pixeljust nowwork7d left
whiteboard-sprint-12.jpg
2.4 MB · 4032×3024
Pixel2h ago4d left
Studio Wi-Fi: flux-guest / meadow-lantern-42
Pixeljust nowkeys kept
Icons
16px grid, 1.4px stroke, square caps, mitered joins.
ArrowUpRight
Bolt
Clock
Close
Code
Download
File
Hash
Image
Key
Laptop
Link
Logout
Menu
Phone
Pin
Plus
Search
Send
Settings
Share
Shield
Terminal
Text
Trash
Undo
Motion
Fast for feedback, slower for stories. Always honours reduced-motion settings.
150ms
Feedback
Hover, press, copy
250ms
UI
Toggles, menus, toasts
500ms
Layout
Items entering the stream
800ms+
Story
Hero, reveals, diagrams
ease-out-quint
cubic-bezier(0.22, 1, 0.36, 1)
Entrances, reveals, travel
ease-in-out-quart
cubic-bezier(0.76, 0, 0.24, 1)
Panels, sheets, page moves
linear
linear
Progress, marquees only
Brand
The mark is a flow line arriving at a signal square: something sent, something received.
flux
flux
16
24
32
48
Voice: do
- Short, plain sentences. “Sent to ThinkPad.”
- Lowercase wordmark, sentence case everywhere else.
- Say what happened, then stop.
Voice: don't
- Exclamation marks, emoji, “Oops!”
- Hype words: revolutionary, seamless, supercharge.
- Title Case Buttons.