Stratic
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
Eleven tokens, light and on dark.
Every fill, border and text colour in the template points at one of these. The last three belong to the dark sections and are shown on their real background.
Background Light
THEME
rgb(240, 237, 228)
Card Light
THEME
rgb(232, 228, 218)
Background Dark
THEME
rgb(8, 8, 8)
Brand
ACCENTS
rgb(229, 59, 23)
Heading
THEME
rgb(8, 8, 8)
Paragraph
THEME
rgba(7, 7, 7, 0.8)
Border V1
THEME
rgba(0, 0, 0, 0.1)
Transparent
THEME
rgba(230, 230, 230, 0)
White
THEME
rgb(255, 255, 255)
Border V2
THEME
rgba(255, 255, 255, 0.07)
Border V3
THEME
rgba(255, 255, 255, 0.04)
02
TYPOGRAPHY
Ten roles, two typefaces.
Halant for the headings, Geist for everything that has to be read. Every text on the site uses one of these.
Ag
Headings/Heading 1
h1 · 5.2rem · 0.9em
Ag
Headings/Heading 2
h2 · 4rem · 1em
Strategy that survives contact
Headings/Heading 3
h3 · 1.7rem · 1.2em
Strategy that survives contact
Headings/Heading 4
h4 · 1.4rem · 1em
Strategy that survives contact
Headings/Heading 5
h5 · 1.3rem · 1em
Strategy that survives contact
Headings/Heading 6
h6 · 1.1rem · 1em
We map the work, cost it, and stay until it runs.
Body/Text Main
p · 1rem · 1.4em
Book a call
Body/Text Button
p · 0.9rem · 1.1em
Read the case study
Body/Text Links
p · 0.85rem · 1.4em
SELECTED WORK
Body/Text Small
p · 0.75rem · uppercase
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
[01]
available for work
Section Tag
Component
Menu Link
Component
Logo Item
Component
Dots Item
Component
Data analysis models
Capabilities Item
Component
Switch
Component
Cards
repeatable content blocks
Metrix Card
Component
AI readiness audit
We map your data, tools and processes to see exactly where AI can create real value.
Benefits Card
Component
001
AI Strategy Sprint
We map, prioritise and plan the AI initiatives that remove repetitive work, reduce risk and free your team to focus on higher-value work.
Process Card
Component
AI readiness audit
We map your data, tools and processes to see exactly where AI can create real value.
Use-case mapping
Vendor shortlists
AI roadmaps
Team training
Services Card
Component
Strategy Plan
Yearly
For teams starting their AI journey.
/month
Readiness audit
AI use-case map
Adoption tracking
Real-time analytics
Vendor guidance
Up to 5 use cases
Pricing Card
Component
Unlimited use cases
Point Element
Component
Arlene McCoy
Co-Founder, CEO
Team Card
Component
Growly
AI Readiness
Support Reduced
+142%
Cost Savings
3.4×
Case Studies Card
Component
4.9
Rating
Stratic turned a vague AI ambition into a clear, practical roadmap. The guidance was outstanding!
Alex Thompson
CEO at BrightTech
Reviews Card
Component
Organic Traffic
+142%
Case Info Card
Component
Career Card
Component
Newsletter Form
Component
Radio Box Component
Component
Sections
full-width blocks, shown at page width
Section title
Section Head
Component
Navbar
Component
Footer
Component
How do we get started?
Will AI replace my team?
How do you measure performance?
Do you work with long-term contracts?
What makes your approach different?
Is this suitable for early-stage companies?
Do you guarantee results?
How long does it take to see results?
FAQs Component
Component
Question
Answer
Helper/FAQ Item
Component
Contact Form
Component
Grid Background
Component
Stratic
Page Loading
Component
04
CODE COMPONENTS
Four 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
SVG Icon
Code
Cost Calculator
Code