Style guide

The Veyro design system

Colours, type, components and the handful of rules that keep every page consistent. Change a style once and the whole template follows.

Colours

Typography

Buttons

Components

Radius & spacing

Customise

Colours

Sixteen colour styles

Every fill, border and text colour in the template points at one of these styles. Edit them in Assets → Colors and the whole site updates.

Accent/Base

#FF5B22

Primary actions, links and glows

Accent/Hover

#FF7443

Hover state for accent surfaces

Accent/Soft

rgba(255, 91, 34, 0.12)

Icon tiles, badges and tints

Accent/On Accent

#0A0A0B

Text and icons on orange

Background

#07080A

Page canvas

Surface/1

#0D0E11

Cards and panels

Surface/2

#131519

Inputs and nested cards

Surface/3

#1A1D22

Raised elements and hover fills

Text/Primary

#F5F4F0

Headings and key copy

Text/Secondary

#A3A3A8

Body copy

Text/Tertiary

#7C7D84

Captions, metadata, placeholders

On Media/Text

#FFFFFF

Text on photography

Border/Subtle

rgba(255, 255, 255, 0.07)

Card edges and dividers

Border/Strong

rgba(255, 255, 255, 0.14)

Hover borders and outlines

Glass/Fill

rgba(255, 255, 255, 0.04)

Pills and translucent chips

Status/Success

#3DDC97

Positive deltas and live states

Typography

Twenty-two text styles

General Sans for headlines, Geist for reading, Geist Mono for labels. Sizes step down automatically on tablet and phone — the numbers below read desktop / tablet / phone.

Display & headings

Display

General Sans 500 · 84 / 64 / 44 px

Line height 1.0 · Tracking −4.5%

Revenue on autopilot

Display 2

General Sans 500 · 84 / 64 / 44 px

Line height 1.0 · Tracking −4.5%

Forecasts you trust

Heading 1

General Sans 500 · 60 / 48 / 36 px

Line height 1.04 · Tracking −4.2%

Close the quarter with confidence

Heading 2

General Sans 500 · 56 / 44 / 34 px

Line height 1.04 · Tracking −4%

Every signal, one pipeline

Heading 3

General Sans 500 · 32 / 28 / 24 px

Line height 1.12 · Tracking −3%

Agents that update the CRM for you

Heading 4

General Sans 500 · 22 / 20 / 19 px

Line height 1.25 · Tracking −2%

Deal Health, scored every hour

Heading 5

General Sans 500 · 18 / 17 / 17 px

Line height 1.35 · Tracking −1%

Pipeline Radar flagged three at-risk deals

Body copy

Body Large

Geist 400 · 19 / 18 / 17 px

Line height 1.55 · Tracking −1%

Veyro connects your CRM, inbox, calls and billing — then deploys AI agents that forecast, follow up and fix your pipeline.

Body

Geist 400 · 16 / 16 / 15 px

Line height 1.6 · Tracking 0%

Signals watch every deal for stalled threads, missing stakeholders and slipping close dates, then tell you what to do about it.

Body Small

Geist 400 · 14 / 14 / 14 px

Line height 1.5 · Tracking 0%

Connect Salesforce or HubSpot in under ten minutes. No engineering tickets required.

Caption

Geist 400 · 13 / 13 / 12 px

Line height 1.4 · Tracking 0%

Updated 2 minutes ago · Synced from Salesforce

Labels & interface

Eyebrow

Geist Mono 500 · 12 / 12 / 11 px

Line height 1.2 · Tracking +8%

Revenue operations

Mono

Geist Mono 400 · 12 / 12 / 11 px

Line height 1.4 · Tracking 0%

Q3 FORECAST · $4.82M COMMITTED · 94% CONFIDENCE

Button

Geist 500 · 15 / 15 / 15 px

Line height 1.0 · Tracking −1%

Start free trial

Nav

Geist 500 · 14 / 14 / 15 px

Line height 1.0 · Tracking −0.5%

Features Pricing Customers Integrations

Stat

General Sans 500 · 64 / 52 / 38 px

Line height 1.0 · Tracking −4.5%

31.2%

Price

General Sans 500 · 52 / 46 / 42 px

Line height 1.0 · Tracking −4.5%

$49

Quote

General Sans 500 · 30 / 26 / 22 px

Line height 1.28 · Tracking −2.5%

“We stopped arguing about the forecast and started fixing the pipeline.”

Editorial (CMS rich text)

Article H2

General Sans 500 · 32 / 28 / 24 px

Line height 1.15 · Tracking −3%

Why your forecast is wrong by Tuesday

Article H3

General Sans 500 · 22 / 20 / 19 px

Line height 1.3 · Tracking −2%

Start with the deals that moved

Article H4

General Sans 500 · 18 / 17 / 17 px

Line height 1.4 · Tracking −1%

A note on data freshness

Article Body

Geist 400 · 18 / 18 / 17 px

Line height 1.75 · Tracking −0.5%

Spreadsheet forecasts decay the moment they’re shared. By the time leadership reviews the number, three deals have slipped and nobody updated the tab.

Buttons

One button, three variants

Primary for the main action, Secondary beside it, Ghost for quieter links. Each variant has its hover state built in — set the label and link on the instance.

Start free trial

Primary

One per view · main action

Book a demo

Secondary

Paired with Primary

Read the docs

Ghost

Tertiary and inline actions

Submit Button

Default · Loading · Success — switched automatically by Framer forms

Components

Built once, reused everywhere

Cards and controls are Framer components with hover states and CMS-ready properties. Edit the main component and every instance on every page follows.

Platform

Tag

label

New

Veyro Agents 2.0 is live

Announcement Pill

badge · label · link

Which CRMs does Veyro support?

How long does it take to get set up?

Most teams connect their CRM and inbox in an afternoon. Forecasts calibrate on your history within 48 hours, and Agents start with read-only suggestions until you switch them on.

FAQ Item

variant (Closed, Open) · question · answer

+38%

win rate in two quarters

We stopped arguing about the forecast. Veyro called our Q2 within 2% and our reps got a day a week back.

Maya Lindqvist

VP Revenue

Ferrow

Testimonial Card

quote · name · role · company · avatar · metric

RevOps

Sep 12, 2026

7 min read

Why your forecast is wrong by Tuesday

Spreadsheet forecasts decay the moment they’re shared. Here’s how continuous forecasting keeps the number honest.

Blog Card

title · excerpt · image · category · link

Radius & spacing

Soft corners, generous rhythm

A small set of radii and spacing values does most of the work. Stick to them and every new section will feel native.

Corner radius

Nested corners step down so inner radius + padding matches the outer card.

8 px

Badges

12 px

Inputs

16 px

Stages

22 px

Cards

Full

Pills

22 − 8 = 14 px

Outer radius minus padding gives the inner radius, so nested corners stay concentric.

Spacing

Values read desktop / tablet / phone. Content never runs wider than the 1360 px container.

Section spacing

140 / 112 / 96 px

Hero top padding

96 / 80 / 64 px

Header to content

48–56 px

Side padding

40 / 32 / 20 px

Card padding

24–32 px

Grid gap

16–24 px

Customise

How to customise this template

Ten steps from purchase to launch. Most take minutes — the whole list fits comfortably in an afternoon.

Set your brand colour

Edit Accent/Base, Accent/Hover and Accent/Soft in Assets → Colors. Buttons, glows, charts and links all follow.

Swap the logo

Replace the mark inside the Logo component once — the navbar and footer update together.

Choose your fonts

Change the font on each text style in Assets → Text. Keep one family for headings and one for reading.

Replace the CMS content

Articles, Customers, Integrations, Jobs, Releases, FAQs, Team and Testimonials live in the CMS — edit items, not pages.

Rewrite the home page

Update the hero, product mockups and stats to match your product. Every section is a plain frame you can restyle.

Connect your forms

Contact, newsletter and job application forms submit to Framer Forms. Add an email or webhook destination in each form’s settings.

Swap imagery and logos

Replace the generated photos and portraits with your own and keep only the integration logos you really support. See Licenses.

Review the legal pages

The Privacy Policy and Terms are sample copy. Have counsel adapt them to your product and jurisdiction.

Set SEO, then publish

Add titles, descriptions, a favicon and a social image in Site Settings, connect your domain and publish. This page stays noindexed.