00
DESIGN SYSTEM
One system. Every new page.
Every colour, text style and component this template is built from, on one page. Give it to the Agent as the reference when you build something new, and the new page comes out looking like the rest of the site.
/design-system
Type this in the Agent panel with your prompt to build your first page from this system.
Recommended model: GPT 5.6 Sol or above.
01
COLOURS
Fourteen tokens. Nothing hard-coded.
Every fill, border and text colour in the template points at one of these. Change a token and it changes everywhere it is used.
Background
BACKGROUNDS
rgb(247, 245, 243)
Card 1
BACKGROUNDS
rgb(238, 234, 230)
Card 2
BACKGROUNDS
rgb(255, 255, 255)
Card 3
BACKGROUNDS
rgb(26, 26, 26)
Brand
ACCENT
rgb(242, 65, 0)
Brand Soft
ACCENT
rgba(242, 65, 0, 0.12)
Error Soft
ACCENT
rgba(255, 34, 68, 0.15)
Heading
TEXT
rgb(38, 38, 38)
Paragraph
TEXT
rgb(38, 38, 38)
Muted
TEXT
rgb(79, 79, 79)
Border V1
BORDERS
rgb(214, 208, 200)
Border V2
BORDERS
rgba(0, 0, 0, 0.05)
Border V3
BORDERS
rgba(0, 0, 0, 0.15)
Transparent
BACKGROUNDS
rgba(7, 7, 7, 0)
02
TYPOGRAPHY
Eleven roles, two typefaces.
Libre Caslon Condensed for the headings, Public Sans for everything that has to be read.
Ag
Headings/Heading 1
h1 · 4.8rem · 1.15em
Ag
Headings/Heading 2
h2 · 3.5rem · 1.1em
Agents that run the queue
Headings/Heading 3
h3 · 1.5rem · 1.3em
Agents that run the queue
Headings/Heading 4
h4 · 1.3rem · 1.1em
Agents that run the queue
Headings/Heading 5
h5 · 1.2rem · 1.2em
Agents that run the queue
Headings/Heading 6
h6 · 0.95rem · 1.1em
Work that runs itself
Body/Statement Large
p · 2.9rem · 1.1em
Work that runs itself
Body/Statement
p · 2rem · 1.3em
Set the workflow once and let the agents keep it moving.
Body/Text Main
p · 1rem · 1.4em
Start free
Body/Text Button
p · 1rem · 1.1em
BUILT FOR OPERATIONS
Body/Text Small
p · 0.8rem · 0.8em
03
COMPONENTS
Every component, one card each.
Each card shows the component in its main state. Point the Agent at the one you want and it reuses it instead of drawing something new.
Controls
buttons, badges, markers
Button Primary
Component
Newsletter Button
Component
Contact Form Button
Component
available for work
Section Tag
Component
Navbar Link
Component
Footer Link
Component
Website Logo
Component
Logo Item
Component
Yes
Check Item
Component
Dots Item
Component
Icon Component
Component
Animated Line
Component
Cards
repeatable content blocks
Design Retainer
For teams with focused design needs.
/month
Automation engine
AI workflow agent
Execution monitoring
Real-time analytics
Core integrations
Up to 5 workflows
Pricing Card
Component
Unlimited requests
Features Item
Component
Reviews Card
Component
Metrics Card
Component
Subscribe
Choose a plan and get instant access to your design workspace. No long-term contracts. Cancel or pause anytime.
Main Card
Component
CTA Block
Component
New lead in HubSpot
Enrich + score with AI
Notify owner in Slack
Sync to Salesforce
UI-1
Component
UI-2
Component
Monthly efficiency
▲ 23.4%
Feb
Mar
Apr
May
Jun
UI-3
Component
UI Element
Component
Workflow sync
Configuration Item
Component
Newsletter Form
Component
Contact Form
Component
/Chat to sales
Contact Info Card
Component
Category
Title
Blog Card
Component
Arlene McCoy
Co-Founder, CEO
Team Card
Component
Sections
full-width blocks, shown at page width
Section title
Section Head
Component
Navbar
Component
Footer
Component
Pricing Component
Component
Compare Table
Component
AI Smart Replies
Compare Item
Component
Feature Card
Component
What does the membership include?
How do I get started with your services?
Can I cancel my membership anytime?
Do I need technical expertise to use your tools?
Are there additional costs beyond the membership fee?
How often do you release updates?
How often do you release updates?
FAQ Component
Component
Question
Answer
Helper/FAQ Item
Component
Reviews Card Large
Component
Version 1.0.0
Data
Visual Automation Workspace
Content
Changelog Item
Component
04
CODE COMPONENTS
Seven coded pieces, edited like any other.
These carry the interaction the canvas cannot. They follow the text styles and colour tokens above, and their content is a list on the instance.
Digit Up
Code
Logo Slider
Code
Social Share
Code
Typewriter
Code
Applied to the footer year as a code override, so the copyright line stays current on its own. It has no visual of its own.
Current Year
Code override
Cost Calculator
Code
Hiring takes months. Manual work never ends. Brittle automations break the moment you scale. Syncrun is an AI workforce on demand - agents that triage, resolve, and automate, live in days. No code, no engineering review, no surprises.
Reveal Text
Code