Design system
Every color, text style, surface and component Verity is built from. The styles on this page are live, so it always shows the current system.
How to use
Type /design-system in the Agent panel and describe the page you want. The Agent reads this page, the color and text styles and the components below, then builds the page from instances of the existing components.
/design-system Build a Security page at /security with a hero, four Benefits Cards, a Metrics row and the FAQ. End with the closing CTA from Home.
Recommended model: GPT 6.1 Sol or higher.
01 · Colors
Verity is dark and calm: a near-black page, two surface steps for cards, hairline white borders and one cyan accent. White text carries the hierarchy. The accent marks eyebrows and focus states only.
Backgrounds
Dark/Background
rgb(13, 13, 15)
Dark/Surface 1
rgb(17, 17, 19)
Dark/Surface 2
rgb(20, 20, 22)
Lines
Dark/Border
rgba(255, 255, 255, 0.06)
Light/White 30%
rgba(255, 255, 255, 0.12)
Text
Text/Primary
rgb(255, 255, 255)
Text/Secondary
rgb(176, 176, 176)
Light/White 70%
rgba(255, 255, 255, 0.7)
Light/White
rgb(255, 255, 255)
Text/Primary Dark
rgb(9, 9, 11)
Accent
Dark/Accent
rgb(33, 210, 237)
02 · Typography
One family, Onest, in regular weight with tight tracking on headings. Size and spacing carry the hierarchy, so there is no bold display style and no second font.
Headings
Heading 1 · 60px / 1.05 / -0.04em · Page title, once per page
Your AI workforce, built in minutes.
Heading 2 · 48px / 1.05 / -0.04em · Section titles, under an Eyebrow
Three ways Verity runs your busywork.
Heading 3 · 36px / 1.15 / -0.04em · Large statements inside a section
Your whole team. One platform.
Heading 4 · 28px / 1.3 / -0.02em · Plan names and column titles
Other tools
Heading 5 · 20px / 1.3 / -0.02em · Card titles and group labels
Build agents in minutes
Heading 6 · 18px / 1.4 · Questions, names and step labels
Aisha Kamara
Body
Body Large · 18px / 1.4 · Hero subtitle and lead lines
An all-in-one platform to build AI agents and run your operations without limits.
Body Medium · 16px / 1.45 · Regular copy and card descriptions
Describe what you need in plain language. Verity builds the AI agent that does it.
Body Small · 14px / 1.5 · Roles, captions and metric labels
Ops Lead at Corebit
Other
Other/Button Text · 15px / 500 · Inside buttons only
Try Verity Free
Other/Tag · 12px / 500 / uppercase · Inside the Eyebrow only
What Verity does
Other/Blog Heading · 28px · Reserved for article titles
Article title
03 · Radius
Corners get smaller as elements get smaller. Large cards and media use 16px, things nested inside them step down.
16px
Cards, panels, media
12px
Insets and compact cards
10px
Logo rows and media inside cards
8px
Small chips and codes
04 · Spacing
An 8px rhythm with a few larger steps for sections. Measure against Home before adding a new value.
8px
Lines inside a group, list rows
12px
Eyebrow to title, button rows
16px
Card grids, title to subtitle
24px
Card padding
32px
Inside large cards, title block to buttons
48px
Hero stack, stats row
64px
Section head to content
96px
Section padding top and bottom, 40px left and right
05 · Surfaces
Depth comes from three dark steps and a hairline border, never from shadows. Each level sits one step lighter than the one behind it.
Dark/Background · page and sections
Dark/Surface 1 · cards, 16px corners, 1px Dark/Border
Dark/Surface 2 · insets inside a card, 12px corners
Pages and sections sit on Dark/Background with no fill of their own.
Cards are Dark/Surface 1 with a 1px Dark/Border. Anything nested in a card steps up to Dark/Surface 2.
The only decoration is the Shader Background, and it lives inside cards. No shadows, glows or extra gradients.
06 · Components
Every page is built from these. Place them as linked instances, change their words through their controls and pick a variant before drawing anything new.
Actions
Button
Primary for the main action, OutlineWhite beside it for the second choice.
Labels
Eyebrow
Above every section title.
What Verity does
Cards
Feature Card
Rows of three, each with its own product shot and shader, as in What Verity does on Home.
Benefits Card
Short proof points in a grid.
Runs 24/7
Set it once. Your agents work nights, weekends and holidays without a break.
Testimonial Card
A quote with a name and role. Desktop1 and Desktop2 alternate.
Logo Card
Integration and customer logos, in ticker rows.
Data
Metrics
Real numbers only, separated by Vertical Dividers.
07 · Imagery
Verity shows the product on animated shader backgrounds. Product shots sit on a shader inside a card, never on the bare page.
Shader Background
Shader Background · Small1
Shader Background · Small2
Shader Background · Small3
Shader Background · Large1
Shader Background · Large2
Shader Background · Large3
Product shots
Verity's dashboards, each on its own Large shader through the Use Case Image component.
Dashboard 1 · Large1
Dashboard 2 · Large2
Dashboard 3 · Large3
Dashboard 4 · Large1
The three Feature Card shots from What Verity does, each on its own Small shader.
Build agents · Small1
Connect tools · Small2
Autopilot · Small3
Small variants go in Feature Cards and Use Case Images. Large variants fill wide panels.
Give each card in a row its own variant so neighbours never repeat.
Use project imagery and what the user provides. No stock photos or invented product screens.
08 · Sections
Larger modules that carry a whole section. Their content lives inside the component, so editing one changes it everywhere it appears.
Use Cases
Tabbed showcase. Change tabs inside the component.
Pricing
The only way to show plans. Monthly and yearly live inside it.
Accordion
Every FAQ. Questions are shared with Home.