Design system
Every style and component in one place.
This page is the source of truth for Forelight. The Framer agent reads it, and so should anyone adding a new section.
Colour
Nineteen colour styles, named by role.
One dark theme, with the same value in both modes so nothing flips. Pick by role, never by how the colour looks.
Background
Page background
Surface
Cards and raised panels
Surface Muted
Quiet panels, chips
Inverse
Dark bands, primary button
Text
Headings and strong text
Text Muted
Body and supporting text
On Inverse
Text on Inverse
On Inverse Muted
Supporting text on Inverse
Primary
Links, highlights, brand
On Primary
Text on Primary
Accent
Small highlights only
On Accent
Text on Accent
Border
Decorative dividers
Border Strong
Inputs and controls, 3 to 1
Success
Positive feedback
Error
Errors and warnings
Glow
Hero and panel glow
Glow End
Where the glow fades out
Overlay
Scrims behind overlays
Typography
Sixteen text styles: twelve core, four for articles.
Sizes step at 1440, 1200, 810 and 390 pixels. General Sans carries headings and body, and Geist Mono carries labels.
Display · H1 · 88 to 36
Build the site that sells
H2 · 56 to 28
Section headings state a benefit
H3 · 32 to 22
Sub-section heading
H4 · 22 to 19
Card titles and questions
H5 · 18 to 17
Small titles and names
Quote · 32 to 20
A quote set large and light.
Stat · 64 to 36
98%
Body Large · 20 to 17
Lead paragraphs under a heading.
Body · 16
Default paragraph text. Never below sixteen pixels.
Body Small · 14
Captions, legal and meta.
Button · 16
Button label
Label · 12
Eyebrow label
Article H1 · 52 to 27
Post title inside rich text
Article H2 · 32 to 22
Post sub-heading
Article H3 · 22 to 19
Post minor heading
Article H6 · 17
Smallest post heading
Components
Ten components cover the conversion path.
Each one exposes its text as properties. Edit the instance, not the layers.
Button
Four variants: Primary, Brand, Secondary and Ghost, plus a Submit Button for forms. Each has hover and pressed states and a 48 pixel target.
Cards
Feature, Step, Stat and Testimonial cards. Grid children stretch to equal height.
98%
Of buyers launch within a week
Pricing card
Default and Featured variants. Use Featured once per row.
FAQ item
Closed and Open variants. The trigger is a real button and exposes its expanded state.
Like this. The answer sits directly under its question and the icon turns into a close mark.
Layout rules
Six rules keep every page consistent.
Made by Anthony Mendes