00
Design System
One system. Every new page.
Type /design-system in the Agent panel with your prompt to create your first page based on this design system.
Recommended model: GPT 5.6 Sol or above.
01
Typography
1. Core text styles
Headings/Heading 1 · Satoshi · 56px / 105% · 400
Read the right one.
Headings/Heading 2 · Satoshi · 40px / 110% · 300
A foundation for better research.
Section titles and secondary headings
Headings/Heading 3 · Geist · 24px / 140% · 300
A foundation for better research.
Headings/Heading 4 · Geist · 20px / 140% · 300
A foundation for better research.
Body/Body Medium · Geist · 16px / 140% · 400
Clarity in every sentence. Answers grounded in the sources that matter.
Paragraphs, descriptions, and supporting copy
Other/Tag · Geist Mono · 12px / 140% · 600
Metadata, dates, categories, statuses
Body/Body Large · Geist · 18px / 140% · 400
A foundation for better research.
Body/Body Small · Geist · 14px / 120% · 400
A foundation for better research.
Other/Quote · Geist · 32px / 120% · 400
Clarity in every sentence. Answers grounded in the sources that matter.
Other/Link · Geist · 16px / 120% · 500
A foundation for better research.
2. CMS text styles
Headings/Heading 1 · Satoshi · 56px / 105% · 400
Evidence you can trust.
Body/Body Large · Geist · 18px / 140% · 400
A concise introduction for long-form updates and research stories.
Body/Body Medium · Geist · 16px / 140% · 400
Citation checks run in parallel while keeping the same evidence standard.
3. Link styles
Link Inline · Default and hover
Link Dark · Default and hover
Link Black · Default
02
Colours
Other/White
rgb(255, 255, 255)
Other/Black
rgb(10, 10, 10)
Primary/Primary
rgb(120, 148, 204)
Other/Elevation
rgb(242, 242, 250)
Other/Border
rgba(46, 46, 46, 0.12)
Primary/Primary Dark
rgb(103, 130, 184)
Text/Text White
rgb(255, 255, 255)
Text/Text Light
rgba(255, 255, 255, 0.8)
Text/Text Dark
rgb(69, 80, 105)
Text/Text Black
rgb(10, 13, 18)
Other/Background
rgb(252, 252, 255)
Primary/Primary Light
rgb(227, 233, 245)
Status/Error
rgb(255, 34, 68)
03
Imagery
04
Components
A complete reference of the reusable interface components available across the Sift website.
Navigation Link
Inline Link
CTA
Submit
FAQ Accordion
How do I choose the right treatment?
Tag
WHY US
Service Card
Overview Card
Review Card
Pricing Row
01
Cut & finish
From $65
Appointment Form
Process Card
50/50 section
Icon Card
Email Beauty
Enquiry form
Team Card
Edward Collins
Hair & styling specialist
Heading
WHY US