Design teardown
Raycast
A near-black product page with a floating capsule nav, one light primary button, and short spoken lines over a red light field.
raycast.com
Design character
Night command surface
The page is a full-bleed near-black stage. A centered column holds a huge two-line title, one short support paragraph, a light button, and a small pill. Later sections alternate product scenes, a horizontal card rail, and large rounded panels. Copy is brief and spoken: titles are a few words, support is one or two short sentences, and card text is about a line. Tone is plain, second-person, and dry. Hierarchy runs from a 64px title to 18px support, then 20–32px section lines, then 16px card text. System notes drop to 12px mono.
Typography
Marketing and UI text use Inter. Footnotes and install lines use Geist Mono at 12px with slight tracking. A product label uses JetBrains Mono at 12px with wide tracking. Window mocks use SF Pro for menu labels. Display type is semibold with a tight line box and no extra tracking; smaller UI type is medium with about 0.2px tracking.
Color system
The stage is near black. Text is white, with two grey steps for nav and inactive items. The only solid action fill is light gray with dark ink. Surfaces are the stage plus a faint white wash. Hairlines are a few percent white. The hero art peaks at a vivid red; the announcement pill uses a dark red fill, a darker red rim, and a pale rotating stroke.
Spacing and geometry
An 8px step set, used loosely. The hero is nearly a full viewport, cards keep 24px insets, and the column gap is 32px. Controls are compact inside that airy page.
Layout
A centered column on a full-bleed dark page. The nav floats at the top. The hero stacks title, support, button, notes, and a pill over a red canvas. Below, product scenes sit beside short copy, then a horizontal card rail, then a bento of large panels, then community and footer blocks.
Motion
Entrance is a slow rise. The hero text waits one second, then fades and moves up 20px over one second. The announcement rim rotates on a three-second linear loop. Controls change color in 0.2s, and the primary button also eases its shadow in 0.2s and its transform in 0.1s. Product mocks blink a caret. Panels reveal with a short fade.
UI fingerprint
- Light button on black The only solid fill in the chrome is a light gray button with dark ink and a dark ring.
- Floating capsule nav Links sit in a rounded bar with a hairline edge, separated from the page edge.
- Red light field Diagonal streaks behind the hero peak near #e11127 and fall off into the stage.
- Mono footnotes Requirements and install lines switch to 12px Geist Mono under the main actions.