Design system
Build every new page from these parts.
Use these styles and components on every page. To build with them, ask the agent with /design-system.
Foundations
The rules every page shares. Keep them when you add a section.
Page
Every page uses the Main layout template, which holds the header and footer. Never add a second header or footer.
Width
Sections are full width with 20px side padding. Content sits in a frame with a 1400px max width.
Spacing
Sections have 96px of vertical padding on desktop, 72px on tablet and 56px on phone. Cards sit 12px apart.
Corners
Use 32px on panels and large cards, 20px on nested cards and 10 to 12px on controls.
Colors
Use color styles by role. Never type a hex value. Text Primary on light backgrounds, white on Accent and Panel Deep.
Color/Background
#FFFFFF
Default page background and cards on color.
Color/Background Warm
#F5F2EA
Alternate sections and warm cards.
Color/Background Tint
#DCE8FF
Soft blue sections and cards.
Color/Text Primary
#10182B
Headings, body text and dark buttons.
Color/Text Secondary
#4E586C
Supporting text and captions.
Color/Border
#E3DFD4
Dividers and quiet outlines.
Color/Border Strong
#7C8496
Form inputs and secondary buttons.
Color/Accent
#1E48C8
Links, kickers, primary panels.
Color/Highlight
#E4F222
One accent per section: a button or a key number.
Color/Panel Deep
#0C1F5C
Dark panels and gradient starts.
Color/Panel Light
#A9CCFF
Gradient ends and line art.
Color/Success
#0B6E47
Booked and paid states.
Color/Success Tint
#DDF3E8
Backgrounds behind success icons.
Color/Error
#C4321A
Warnings and failed checks.
Color/Error Tint
#FBE6E1
Backgrounds behind error icons.
Typography
Use a text style for every text layer. Never set font size, weight or line height by hand. Text styles scale at each breakpoint.
Win it on the first ring.
Text/Display XL · 84 / 64 / 44
Hero headline on the home page and price amounts.
Talk to a real person.
Text/Display L · 64 / 52 / 40
Page hero headlines.
+$210K
Text/Stat · 112 / 84 / 64
Large numbers and step numbers.
Grow like these crews
Text/H1 · 48 / 40 / 32
Section headings.
Answer every call.
Text/H2 · 32 / 28 / 26
Card and panel headings.
Show up first.
Text/H3 · 22 / 20 / 20
Small card headings and FAQ questions.
PickAi answers your phone and fills your calendar.
Text/Body Large · 19 / 18 / 17
Intro text under headings.
The short version.
Text/Body Large Bold · 19 / 18 / 17
Emphasis at intro size.
Every call gets picked up in your business’s name.
Text/Body · 16
Default paragraph text.
Job booked, $420
Text/Body Bold · 16
Names and emphasis.
Mon to Sat, 7am to 7pm
Text/Body Small · 14
Details and supporting text.
Get a free demo
Text/Label · 14
Buttons, nav and form labels.
Marcus Bell
Text/Caption Bold · 12
Names on cards and tags.
Keystone Roofing
Text/Caption · 10
Small metadata.
You’re missing about $2,140
Text/UI Heading · 20
Headings inside app screens.
The phone never stopped
Text/Article H2 · 32 / 28 / 26
Headings in CMS articles.
Marcus and his wife ran Keystone from their kitchen.
Text/Article Body · 19 / 18 / 17
Body text in CMS articles.
Components
Reuse these before building anything new. Change their content through their properties, and only add a variant when no existing one fits.
Button
Primary for the main action. Accent once per section. Secondary beside a Primary. Brand on light backgrounds. Ghost on dark panels.
Submit Button
Use inside forms, set as the form’s submit button. It is the only button that submits.
Notification Card
Short status messages over panels and phone mockups. Call for activity, Booked for a result.
Call answered, 9:04am
Karen W. has a water heater leak
Job booked, $420
On your calendar for Tue at 9:00am
Proof Card
One owner and one result. Link it to a case study. Canvas and Tint alternate in a grid.
Review Card
Short customer quotes. Used in rows on the home page.
“Paid for itself in the first week”
SH
Sam H.
Story Card
Case study cards in CMS lists, bound to the Case Studies collection.
Plumbing
+$48K
Booked in 90 days
Dan Ortega
Ortega & Sons Plumbing
Plumbing
+$48K
Booked in 90 days
Dan Ortega
Ortega & Sons Plumbing
Guide Card
Blog cards in CMS lists, bound to the Blog collection.
Interview
How a two-van plumber booked $1M in a year
FAQ Item
Stack these for any questions list. One open at a time.
Is there a contract?
No. Plans run month to month, and you can cancel any time.
Will customers know it's AI?
Tool Cards
Booking Card, Search Card and Repeat Card show one product idea each, with a looping animation.
Tuesday
8:00
9:00
11:30
1:00
2:30
4:00
Easy booking
Your customers book everything on their phones. PickAi gives you the same easy booking
#1
Ortega & Sons Plumbing
#2
A rival down the road
#3
A national chain
Local search
Get found by the people searching nearby, with a site built to rank in your towns.
1
Reminder sent
2
Customer replied
3
Job rebooked
Repeat work
Turn one-off jobs into regulars with reminders that send themselves.
Media Card
A photo or video with a play button that opens the video popup.
Video: Dan by the van
Header and Footer
Both live in the Main layout template, so every page gets them automatically. Edit them there, never on a page. The Header switches to its compact menu on tablet and phone.
Section components
Full-width blocks. Drop one into a Content frame and edit its properties.
Feature Tabs
Four tabs, each with copy and a product scene. Use the stacked variants on tablet and phone.
Case Study
An owner story with a video, a quote and two results. Use Stacked on tablet and phone.
Pricing Plans
Three plans with a Monthly and Yearly toggle. Growth is the highlighted plan.
Monthly
Yearly, save 20%
Starter
Get found and stop missing calls.
$149
/month
AI answering, day or night
Missed-call text back
Local website
Listings sync
Growth
Most popular
Everything you need to fill the calendar.
$299
/month
Everything in Starter
Online booking and instant quotes
Reviews engine
Service reminders and follow-ups
Crew
For busy teams with more than one van.
$499
/month
Everything in Growth
Schedule & dispatch
Invoices & payments
Reports and a dedicated contact
Example sections
How the parts combine. Copy these patterns for new sections.
Heading and cards
Grow like these crews
Title and questions
Questions, answered
Is there a contract?
No. Plans run month to month, and you can cancel any time.
How long does setup take?
Closing call to action