Loading the home page
Dark canvas, Gilroy, an 8 px grid, a rem type scale with 8 px line heights, 1 accent, 1 colour per moment, and frames only on the things you can press. Everything on this page is live - it reads the same tokens the site does.
Used as a dot, a glyph, a glow and a label. Never as a fill behind text, so it never has to pass a contrast test it would fail.
Orange, from the logo, is the 1 accent - the 10 in 60-30-10. Fills use the ember gradient, amber to orange to rose: the Search button, idea pins, the glow behind the end of the page, and 1 word of a headline. Small things use the flat orange: links, labels, dots and thin rules. Text on the gradient is dark ink. Accent-2 is a lighter orange for hover and thin rules. Red is only ever for errors.
Sizes in rem, line heights in multiples of 8 px. Tighter tracking as the size grows. Geist Mono for labels, indices and timings.
4 px is the half step for icon gaps. Sections sit 96 / 128 / 176 px apart on phone / tablet / desktop; inside a section the gaps are 16 to 48.
Buttons, the search box, segmented controls and the phone demo carry a frame. Lists, cards and sections do not - they use space and hairlines.
Isometric, 1 px lines in the moment's colour, a 7% glass fill on the top face. Generated from scripts/iso.py - adding a pattern means describing 1 object, not drawing it.
The mark: an open tray - the person’s hands - with the work rising out of it as an orange arrow. The person hands over, the agent takes it. The orange is the Delegate moment’s colour. The word: AX in Gilroy Bold, patterns in Gilroy Medium. The mark alone is the app icon.
From Apple's WWDC design talks. Glass is only for the layer that floats above content - the nav once you scroll, menus, search and the demo controls. Never glass on glass. Bigger glass reads thicker. Controls answer on press, and menus open from the button you tapped.
Every demo on the site plays inside 1 of these 3 frames: a phone with a camera pill and side buttons, a 4:3 tablet, and a laptop with a browser bar. No brand, always the same.
Assistant
Plan my launch week in 3 steps
Here is a 3-step plan for your launch week.
Assistant
Plan my launch week in 3 steps
Here is a 3-step plan for your launch week.
Assistant
Plan my launch week in 3 steps
Here is a 3-step plan for your launch week.