Design system
Everything you need
to make it yours.
Change a colour or text style here and every page follows. Spectrum colours are reserved for beams, rules and focus rings, so the interface stays calm.
Colour styles
Night
#070B1A
Page background
Raised
#0E1430
Icon boxes, inputs
Glass
White 5%
Cards and panels
Line
White 9%
Borders and dividers
Ink
#EEF1FA
Headings and key text
Muted
#9AA3BF
Body text, 7.8:1
Faint
#5F6886
Large text only
Button
#FFFFFF
Primary button
On Button
#070B1A
Text on the button
Spectrum Cyan
#5CE1E6
Beams, rules, focus
Spectrum Violet
#8B7CFF
Beams, rules, focus
Spectrum Amber
#FFB86B
Beams, rules, focus
Text styles
Display
Geist 76 / 60 / 44
Ask once.
H1
Geist 60 / 48 / 38
See the whole picture.
H2
Geist 40
Three ways to take part.
H3
Geist 22
Answers with sources
Section
Geist 20
Earlier posts
Lead
Funnel Sans 20
Lanthorn reads your team’s docs and answers with its sources.
Body
Funnel Sans 16
Every answer ends with the exact passages it used.
Small
Funnel Sans 14
Times are shown in your own time zone.
Mono
Spline Sans Mono 13
POST /v1/answers
Label
Spline Sans Mono 12, capitals
Integrations · 12 sources
Number
Geist 48
$14
Components
Button
Primary for the main action, Secondary for the rest. Set the label and the link in the properties panel.
Filter chip
A real button with a pressed state. The active chip shows the spectrum dot. Used by the Integrations filter.
FAQ item
Closed by default. The question is a button that announces whether it is open.
Submit button
Used by forms. Pending, success and error states are set on the form, not by hand.
Motion and rules
Spectrum is a light, not a paint
Cyan, violet and amber appear only in beams, thin rules, the active dot and focus rings. Never as a button or a block of colour.
Two-tone titles
Section titles end on a second line in Faint. Keep the first line short and concrete.
One sticky window
On the home page the assistant window stays in place while the four steps scroll past. On tablet and phone it sits above the steps.
Short, quiet transitions
Hover states take 0.2 seconds with an ease curve. Nothing bounces, nothing loops forever.
Reduced motion
When a visitor asks for reduced motion, entrances and beams stay still and every state is readable without animation.
Real photos only
Use photos with a clear commercial licence. Mark any AI image with the line “Illustrative photos generated by AI”.