Background/Page
Light #F4F5F7 · Dark #141518
The page itself, and the fades over hero photos.
Design system
Every page, built from
these parts.
Commands for the agent
/design-system
New pages and sections, built from these parts.
Try: “Add a careers page for our open roles.”
/rebrand
Your name, logo, colors and fonts, in light and dark.
Try: “Make this site ours. Our brand kit is attached.”
/write-copy
Words that fit each element.
Try: “Make the pricing intro sound more premium.”
/add-content
Posts, stories, releases, people and integrations.
Try: “Turn these notes into a blog post.”
/before-publish
A last check before the site goes live.
Try: “Is the site ready to publish?”
The default skill applies to every edit, command or not.
01 · Color
Background
Background/Scrim
Light #F4F5F7 at 85% · Dark #141518 at 85%
Behind an open overlay, such as a team bio.
Surface
Surface/White
Light #FFFFFF · Dark #1F2024
The card color: cards, panels and FAQ rows.
Surface/Ink
Light #181818 · Dark #38393F
Featured surfaces only, like the featured plan.
Surface/Glass
Light #FFFFFF at 70% · Dark #1F2024 at 80%
The nav pill, under a background blur.
Surface/Footer
Light #181818 · Dark #0B0B0D
The footer band only, darkest in either theme.
On Light
Aa
On Light/Primary
Light #181818 · Dark #F4F5F7
Headings, labels, list text and every icon.
Aa
On Light/Muted
Light #181818 at 60% · Dark #F4F5F7 at 62%
Paragraphs, subtitles, captions and meta lines.
On Light/Dot
Light #181818 at 20% · Dark #F4F5F7 at 22%
Separator dots between items, and never text.
On Light/Wash
Light #181818 at 6% · Dark #F4F5F7 at 8%
A faint fill behind small controls and guides.
Aa
On Light/Tab Idle
Light #181818 · Dark #F4F5F7 at 62%
Idle tab labels and icons in the product tabs.
On Dark
Aa
On Dark/Primary
Light #FFFFFF · Same in both themes
White text on brand and ink fills, in both themes.
Aa
On Dark/Muted
Light #FFFFFF at 60% · Same in both themes
Quieter text on ink, like the footer’s small print.
Accent
Accent/Brand
Light #3D4FF5 · Same in both themes
The Primary button’s fill, never small text.
Accent/Brand Light
Light #97A9FF · Same in both themes
The gradient’s light stop on the Primary button.
Aa
Accent/Brand Text
Light #3D4FF5 · Dark #7A88FF
Small accent text and marks, like eyebrows.
Line
Line/Hairline
Light #E8E8E8 · Dark #2E2F34
The Secondary button’s edge, and dividers between rows.
Button
Button/Secondary Shade
Light #F1F1F1 · Dark #27282D
The Secondary button’s middle sheen stop.
Button/Dark Sheen
Light #424248 · Dark #505158
The sheen on the Dark button’s gradient.
Status
Status/Live
Light #34C759 · Same in both themes
The live status dot only, never a brand color.
Tints and masks
Logo Tint/Gray
Light clear · Dark #9699A1
Turns baked customer logos gray in dark mode.
See Dark Mode
Logo Tint/Ink
Light clear · Dark #F4F5F7
Turns baked ink marks light in dark mode.
See Dark Mode
Logo Tint/Brand
Light clear · Dark #7A88FF
Keeps baked brand checks in the brand color in both themes.
See Dark Mode
Theme/Dark Only
Light clear · Dark #000000
A mask that shows a layer in dark mode only.
See Dark Mode
Theme/Light Only
Light #000000 · Dark clear
A mask that shows a layer in light mode only.
See Dark Mode
02 · Type
Headings
Heading/Display
h1 · Open Sauce One 500 · 64 / 56 / 36 · line 100% · track -0.06em
The one headline
on the page.
The page’s one h1, in the hero only.
Heading/Section
h2 · Open Sauce One 500 · 48 / 40 / 32 · line 120% · track -0.04em
This heading ends
with a period.
Every section heading, tagged h2.
Heading/Panel
h3 · Open Sauce One 500 · 32 / 24 / 24 · line 110% · track -0.04em
A panel title shares its card with a photo.
Titles inside split cards and panels.
Heading/Card
h3 · Open Sauce One 500 · 20 / 16 / 18 · line 120% · track -0.02em · paragraph 32
Short card titles
Card titles and names on cards, tagged h3.
Heading/Question
p · Open Sauce One 500 · 20 / 16 / 18 · line 120% · track -0.02em · paragraph 32
What goes in a question row?
FAQ rows, the paragraph twin of Heading/Card.
Body
Body/Paragraph
p · Open Sauce One 400 · 16 / 14 / 15 · line 150% · track -0.02em · paragraph 16
Subtitles and card text use this style. It sits under a heading in the muted color and rarely runs past two lines.
Paragraphs, subtitles and card text.
Body/List
p · Open Sauce One 400 · 16 / 14 / 15 · line 130% · track -0.02em
One item to a line, no period
List items, plan features and table rows.
Small
Small/Compact
p · Open Sauce One 400 · 14 / 12 / 13 · line 130% · track -0.02em
Meta line · Under a title
Meta lines under a title, like a place or a date.
Small/Relaxed
p · Open Sauce One 400 · 14 / 12 / 13 · line 150% · track -0.02em
A feature line sits under a short title and wraps to two lines at most.
Feature lines under a small title.
Small/Caption
p · Open Sauce One 400 · 12 / 12 / 12 · line 130% · track -0.02em
A label under a figure
Labels under a stat.
Interface
Label
p · Open Sauce One 500 · 14 / 12 / 13 · line 130% · track -0.02em
Small titles and text links
Small titles, tabs and text links.
Button
p · Open Sauce One 500 · 14 / 12 / 14 · line 100% / 100% / 20px · track -0.02em
Title Case
Labels inside buttons only.
Eyebrow
p · Geist Mono 400 · 12 / 11 / 11 · line 100% · track 0.01em · uppercase
Above a heading
Above headings only, always in capitals.
Footer/Link
p · Open Sauce One 400 · 14 / 14 / 15 · line 150% / 28px / 28px · track -0.02em
Footer Link
Links in the footer only.
Wordmark
p · Open Sauce One 500 · 24 / 20 / 20 · line 100% · track -0.06em
Wordmark
The name set as text beside the logo.
Numbers and quotes
Stat/Large
p · Open Sauce One 500 · 40 / 32 / 24 · line 112% · track -0.04em
0123456789
Large figures in a stats row, each said once.
Stat/Small
p · Open Sauce One 500 · 20 / 16 / 18 · line 112% · track -0.04em
0123456789
Small figures, such as the stats under a quote.
Quote
p · Open Sauce One 400 · 20 / 18 / 18 · line 120% · track -0.02em
A quote is one person’s own words, kept to a few lines. It sits beside their name and role, and any proof under it is real or left out.
Quotes in a testimonial, kept to a few lines.
Long-form
Heading/Article
h2 · Open Sauce One 500 · 32 / 28 / 24 · line 110% · track -0.04em · paragraph 40
Article sections start here
Section headings inside CMS articles.
Body/Article
p · Open Sauce One 400 · 16 / 14 / 15 · line 150% · track -0.02em · paragraph 16
Blog posts, stories and policies set their paragraphs in this style. It is the paragraph style with wrapping built in, because CMS rich text has no wrap setting of its own.
Paragraphs inside CMS articles.
The link preset sits in an article under Patterns. Quotes and images show in posts.
See Patterns
Wrap is set on each text, never on the style, except the two article styles.
03 · Layout
Widths
Breakpoints
Desktop 1200 and up · Tablet 810 to 1199 · Phone below 810
Grid
12 columns of 74, gutters 24
Spans
n columns = 98n - 24 · 4 = 368 · 5 = 466 · 6 = 564 · 8 = 760 · 10 = 956
Three-up cards
302 · 243 · 358
Text measures
Headings 564 · subtitles 486, hero 544 · articles 600 · lists and FAQ 760
Cap the text, never the block.
Spacing
Section bottom
160 / 120 / 96
First section top
80 / 64 / 48
Side margin
24 / 24 / 16
Block gap
80 / 64 / 48
Header gap
24 / 20 / 16
Card row gap
24 / 16 / 16
Card padding
32 / 24 / 24
Jump offset
128 / 112 / 88
Each bar is the value at the width you are viewing.
Section › Grid › helper + Content › Section Header › body. Every section on this page is built this way.
04 · Surface
Card
Radius 24, corners smoothed 60%, on the page color.
Inset
Radius 12, set 12 in, so both curves match.
Capsule
Full round, never smoothed. Corner changes are for cards.
Hairline
A one-pixel line divides the rows of a list and edges the Secondary button.
Text link
Text links dim at rest and brighten on hover. Cards have no hover.
See Patterns
05 · Components
Elements/Button
Every call to action, at a fixed width so pairs align.
Variants: Primary · Secondary · Dark · Primary Hover · Secondary Hover · Dark Hover · Controls: Title, Link
Elements/Submit Button
Every form’s submit, with sending, sent and error states.
Variants: Default 480 · Pending 480 · Success 480 · Error 480 · Controls: Label, Pending Label, Success Label, Error Label
Sections/FAQ
Every set of questions, with one answer open at a time.
Variants: Closed 760 · Open 1 760 · Open 2 760 · Open 3 760 · Open 4 760 · Open 5 760 · Open 6 760 · Closed · Phone 358 · Open 1 · Phone 358 · Open 2 · Phone 358 · Open 3 · Phone 358 · Open 4 · Phone 358 · Open 5 · Phone 358 · Open 6 · Phone 358 · Controls: Question 1, Answer 1, Question 2, Answer 2, Question 3, Answer 3, Question 4, Answer 4, Question 5, Answer 5, Question 6, Answer 6, Six Questions
Click a question to open it.
Elements/FAQ Item
One question row inside the FAQ, never used on its own.
Variants: Open 760 · Closed 760 · Open · Phone 358 · Closed · Phone 358 · Controls: Question, Answer, On Toggle
Sections/Testimonial
A quote with proof, its stats shown only when they are real.
Variants: Desktop 956 · Tablet 762 · Phone 358 · Controls: Portrait, Quote, Name, Role, Logo, Show Stat 1, Stat 1 Value, Stat 1 Label, Show Stat 2, Stat 2 Value, Stat 2 Label, Show Stat 3, Stat 3 Value, Stat 3 Label, Logo Tint
Sections/Plans
Section variant off the pricing page; Page variant on it.
Variants: Section 956 · Page 956 · Section Yearly 956 · Page Yearly 956 · Section · Tablet 762 · Page · Tablet 762 · Section Yearly · Tablet 762 · Page Yearly · Tablet 762 · Section · Phone 358 · Page · Phone 358 · Section Yearly · Phone 358 · Page Yearly · Phone 358 · Controls: Launch Link, Scale Link, Enterprise Link
Sections/Closing
Ends marketing pages; not on the blog index, posts, legal pages or 404.
Variants: Desktop 956 · Tablet 762 · Phone 358 · Controls: Book Demo Link, Start Free Link
Sections/Logos
A scrolling logo strip; a new logo needs a new tint mask.
Variants: With Label 956 · Strip 956 · With Label · Tablet 762 · Strip · Tablet 762 · With Label · Phone 358 · Strip · Phone 358 · Controls: Label
Elements/Story Card
Stories from the CMS; an empty result hides its stat.
Variants: Desktop 302 · Tablet 243 · Phone 358 · Controls: Logo, Industry, Headline, Summary, Result Value, Result Caption, Show Result
Elements/Post Feature
The featured blog post, and the next post under an article.
Variants: Desktop 956 · Tablet 762 · Phone 358 · Controls: Cover, Title, Summary, Date, Read Time, Link
Elements/Post Card
Every other blog post, in the post grid.
Variants: Desktop 302 · Tablet 243 · Phone 358 · Controls: Cover, Title, Date, Read Time
Elements/Team Card
Team members from the CMS; the page owns the bio.
Variants: Desktop 302 · Tablet 243 · Phone 286 · Controls: Photo, Name, Role, Read Bio, Show Bio
Sections/Newsletter
Ends the blog and every post, with Send To set on its form.
Variants: Desktop 956 · Tablet 762 · Phone 358 · Controls: none
Open Blog
Sections/Product Tabs
The product tour, for the home page only.
Variants: The Queue 956 · Agent Builder 956 · Analytics 956 · Knowledge 956 · Channels 956 · Billing 956 · Tablet · The Queue 762 · Tablet · Agent Builder 762 · Tablet · Analytics 762 · Tablet · Knowledge 762 · Tablet · Channels 762 · Tablet · Billing 762 · Phone · The Queue 390 · Phone · Agent Builder 390 · Phone · Analytics 390 · Phone · Knowledge 390 · Phone · Channels 390 · Phone · Billing 390 · Controls: Tab 1 Name, Tab 1 Body, Tab 1 Point 1, Tab 1 Point 2, Tab 1 Point 3, Tab 2 Name, Tab 2 Body, Tab 2 Point 1, Tab 2 Point 2, Tab 2 Point 3, Tab 3 Name, Tab 3 Body, Tab 3 Point 1, Tab 3 Point 2, Tab 3 Point 3, Tab 4 Name, Tab 4 Body, Tab 4 Point 1, Tab 4 Point 2, Tab 4 Point 3, Tab 5 Name, Tab 5 Body, Tab 5 Point 1, Tab 5 Point 2, Tab 5 Point 3, Tab 6 Name, Tab 6 Body, Tab 6 Point 1, Tab 6 Point 2, Tab 6 Point 3
Open Home
Elements/Nav
Lives in the Site layout; keep the Phone Open name and the Close menu label.
Variants: Desktop 1200 · Tablet 810 · Phone 390 · Phone Open 390 · Controls: none
The nav at the top of this page is the live one.
Elements/Theme Toggle
Lives inside the nav, never on a page.
Variants: Theme Toggle 40 · Plain 40 · Controls: none
Code and overrides
TableOfContents
The contents list beside long articles; change its properties, never its code.
See Patterns
LogoTint
Tints a CMS or property logo in dark mode; change its properties, never its code.
See Dark Mode
withThemeToggle
The override that makes the toggle in the nav switch the theme.
withHideOnScroll
The override that hides the nav on the way down and brings it back on the way up.
Collections
Blog
The blog page and every post page.
Open Blog
Customers
The customers page, each story and the quotes on the home page.
Open Customers
Team
The team on the about page.
Open About
Changelog
The changelog page, newest release first.
Open Changelog
Integrations
The searchable directory on the integrations page.
Open Integrations
Legal
The privacy and terms pages, linked in the footer.
Open Privacy
06 · Patterns
One idea
Each card makes a single point in two lines.
Short titles
One to three words, never with a period.
Same height
A grid holds the row, so the cards match.
Split card
A photo on one side, the words on the other.
Use it for one idea that needs a picture. Short copy keeps the photo and the words in balance at every width.
One heading and a short paragraph
Up to three checks, one line each
A real photograph, never a screen
Its mirror on the about page puts the words first and the photo second.
Three across
Short features sit three to a row under a product screen.
One icon each
A solid icon on top, from one set, in the primary text color.
Two lines at most
A short title, then one line of detail that wraps to two.
How long pages work
Long pages put a contents list beside the text. It reads the section headings, follows along as you scroll, and folds into one card on a phone.
Headings and paragraphs
Each section opens with a heading like the one above. Paragraphs stay short, and no word in the body is set in bold.
Links and images
A link sits in the text like this one to the privacy notice, underlined in the accent color. Images run the width of the article, cropped to three by two.
More on the site
Overlap
A product screen over a photo card.
Open Home
Stats
Figures with a label each, said once.
Open Home
Showcase
A whole product screen on a photo.
Open Product
Form over a photo
The contact form, set on a photo backdrop.
Open Contact
Directory with search
A searchable grid of CMS items.
Open Integrations
Release list
Dated entries, newest first.
Open Changelog
CMS card grid
Cards from a collection, three to a row.
Open Blog
Swipe row on phone
Cards that scroll sideways on a phone.
Open About
Next or previous item
The next post under an article, or the previous one.
Open Blog
07 · Motion
Once, in view
Cards rise once, as they scroll into view.
In reading order
Each card starts a step after the one before.
Media follows
An image inside a card settles a beat after it.
They play once. Reload the page to watch again.
Presets
Curve
tween 0.4,0,0,1, always written with its duration and delay
When
The hero on load, the rest once in view
Eyebrow
Whole, rises 8 over 0.8s
Heading
By line, from 0.1s: rises 16 over 0.9s, 0.06s per line
Subtitle
By line, from 0.3s: rises 12 over 0.9s, 0.1s per line
Cards
Rise 24 over 1s, 0.12s apart in reading order; CMS lists stagger 0.12s
Media in cards
Scales up from 0.9, 0.25s after its card
Hero buttons
Rise 16 over 0.8s
Text links
80% at rest, 100% on hover, over 0.2s
Phone
No delays, headings enter whole, one entrance per swipe row
No entrance
Nav, forms, the logo strip, the bottom blur, body text in cards, and photos in Testimonial and Closing
Blur
0 on every effect
Built in
FAQ open and close, button hover, footer wordmark and product tab screens. Leave them as they are.
08 · Imagery
Backdrops
Soft photos behind product screens, never on their own.
Icons
One solid set at 20, in the primary text color.
Text links carry a 16 arrow.
The only exceptions: menu, search, moon and sun.
Checks are a frame filled with Accent/Brand Text and masked by the check.
09 · Dark mode
Baked logo or icon
Add a frame over the image, fill it with a Logo Tint style, and mask it with the same image. The style sets the tint in each theme.
Logo from the CMS
Masks cannot take an image from the CMS or a property. Use the LogoTint component, with its color set to a Logo Tint style.
You are viewing light.
You are viewing dark.
Theme masks
Theme/Light Only and Theme/Dark Only each show a layer in one theme, so only one of the two lines above is ever visible.
The canvas shows light only. Check dark in Preview.
A new color is a new style with a dark value.
Small accent text and marks use Accent/Brand Text, never Accent/Brand.
Inline SVG ignores color styles. Fill a frame with the style and mask it with the SVG.
10 · Voice
Headings are usually short sentences that end with a period.
“Every color is a style.”
Write in the site’s language. This template ships in US English.
Color, center, gray.
No em dashes. Use a period or a comma.
“Reuse, never rebuild.”
Match the line count of the text you replace.
A two-line subtitle stays two lines.
Two-line headings put the long line first, with two words or more on the second.
“Start a new section from / one of these.”
Buttons are usually two words in Title Case.
“Book Demo”, “Start Free”
Never count CMS items in a heading.
“Newest release first” stays true as releases come and go.
Never invent a customer, a number, a quote or a logo.
Ask, or keep the sample and flag it.
Say each number once, and keep it matching the screens.
Timings on this page appear only under Motion.