Design system
The parts Dayshift is built from.
Six colours, nine text styles, a few components and one rule for motion. Use them as they are, and copy the closest section before you draw a new one.
01
Colours.
Colour styles only, never a hex value. Signal yellow marks one thing at a time.
Paper
Background of every page
Ink
Headings, body text, button labels
Muted
Secondary text, captions, labels
Line
Rules and card borders
Surface
Cards and boxed sections
Accent
Primary button, selection frame, small marks
02
Text styles.
Geist for reading, Geist Mono for labels and numbers. Sizes step down on tablet and phone on their own.
H1
Plan the day.
H2
Every crew on one board.
H3
Proof at every stop
Body Large
The sentence that follows a title, one or two lines long.
Body
Paragraphs, answers and the text of cards. Short sentences, concrete words.
Small
Captions, customer names, fine print
Label
Eyebrows, tags and dates
Stat
42 jobs
Article H2
Headings inside an article
03
Components.
Reuse them, never rebuild them from frames. The Selection Frame appears once per page at most.
Button
Primary for the main action of a section, once. Secondary for the second action.
Most popular
On site
Pill
Default on paper, On photo over a photo. Tags and the plan mark.
UI / Today card
The interface fragment laid over a photo. Same team, same names, same day everywhere.
Shelf B · 24 pots
Counted 09:10
Selection Frame
The signature: a thin signal-yellow frame around one detail of a photo.
04
Motion.
One entrance, one way of revealing titles, nothing that loops.
Hero
Enters once on load: a rise of 16 to 24 px with a fade, all in under 1.2 s.
Titles
Enter once when they scroll into view, about a fifth visible, never replayed.
Selection Frame
Draws itself once around its detail.
Curve
0.19, 1, 0.22, 1 for every movement.
Never
Loops, parallax, moving prices, forms or long text. Reduced motion stays on.