flowmanceVeox Design System
Veox is a dark digital-marketing agency site with a space theme. The hero is a black starfield with a glowing neon-purple Earth behind a huge white headline, and that purple returns as a gradient that bleeds through the second half of every section title. The rest is calm and square: white Instrument Sans, small uppercase monospace labels, thin hairlines, and full-colour product and portrait photography with 0px corners.
Four signatures make it recognisable:
- Purple-to-grey headline tails. Section titles start in white, then the last clause turns into a text gradient, linear-gradient(21deg, #AA05CF, #FFFFFF4A 90%) (10 instances): Experience hassle free setup with our three step onboarding, designed to optimize your tasks and boost your productivity effortlessly.
- Space and globe imagery. A starfield with a neon-purple globe sits behind the hero and comes back behind the sticky testimonial section.
- Mono eyebrows with a dot. Each section opens with an 8px white dot and an uppercase Red Hat Mono label: • WHAT WE DO. Testimonial names and roles use the same mono.
- Outlined pill with a scrolling label. The nav's GET IN TOUCH button is a fixed-width (10rem) black pill with a 1px white border whose uppercase label runs as a marquee, and the whole button inverts to white on hover.
Veox is dark-only. It is a Webflow Ecommerce build (plans, package products and checkout).
Colors
Surfaces
#020203Page, sections, nav (--main-color)
#121212Testimonial cards, the grey blog section, the subscribe field
#212121Tag pills on work cards, the form submit (#222)
#080808Contact inputs
Ink
#FFFFFFText on primary
#000000Text on primary-hover
#FFFFFF#FFFFFFHeadlines, nav, card titles
#F1F3F8Arrow text links (.button-line) and checkbox labels
#FFFFFF · 70%Paragraphs (p { opacity: .7 }), dates
#FFFFFF · 60%Tag text, testimonial roles
#FFFFFFAction
#020203The outlined pill button
#FDFDFCThe same pill under filter: invert() on hover
#AA05CFStart of the headline gradient; a link colour in the base CSS (--second-color)
Lines & effects
#FFFFFF · 20%The nav's bottom rule
#FFFFFF · 15%Section dividers and the service grid's vertical rules
#FFFFFF · 26%Circular icon-button borders
#FFFFFF · 12%Input borders
Typography
Instrument Sans · display-marquee
The quick brown fox jumpsThe giant scrolling word row near the footer, words split by white bars (14 instances). 216px · 600 · 1.2 · -2px
Instrument Sans · headline-lg
The quick brown fox jumpsSection titles (.second-heading) with the gradient tail. 44px · 600 · 1.2
Instrument Sans · title-lg
The quick brown fox jumpsThe hero lead (Tailored digital strategies to refine and empower your sales processes.). 31px · 600 · 1.4
Instrument Sans · body-lg
The quick brown fox jumpsStatement paragraphs in white. 22px · 600 · 1.4
Instrument Sans · label-link
The quick brown fox jumpsLet's Work Together ↗, View all works ↗; footer titles at 76% use 21px. 24px · 400 · 1.0
Red Hat Mono · eyebrow
The quick brown fox jumpsWHAT WE DO after an 8px dot. 16px · 400 · 1.1
Spacing & shape
| Purpose | Value |
|---|---|
| Container | max 1200px, centred; narrow text blocks at 620px; the hero text block at 740px |
| Breakpoints | 991, 767 and 479px (Webflow defaults), plus ≥1280px steps |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xs | 8px | |
sm | 16px | |
md | 25px | |
lg | 34px | |
xl | 45px | |
2xl | 100px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
column-gap | 25px | |
section-gutter | 43px | |
nav-height | 114px | |
section | 150px |
Border radius
Surfaces
How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.
Motion
| Headline word reveal | Each word skews y 15° → 0° and rises y 150–200% → 0%, 800ms outExpo, on load and on scroll into view |
| Heading wipe | A #020203 overlay sits over the title at translate(-100%) and slides away to reveal it |
| Text roll on hover | Label y 0% → −100% while the copy moves in, 800ms outQuint |
| Slide-in | x −30px → 0, 500ms outQuart; x 30px → 0, 800ms outExpo |
| Parallax | y 10% → 0 and 10vh → 0vh, scroll-linked; rotations at 500ms on decorative elements |
| Arrow-link underline | Width grows, 300ms ease / 500ms |
| Button hover | filter: invert() with the default all transition |
| Menu panel | Moves x ±45vw, 500ms |
Do’s and don’ts
- Keep the page #020203 with a starfield or the globe image behind the hero.
- Start every section with the dot-and-mono eyebrow, then a headline-lg title whose last clause carries the #AA05CF gradient.
- Use the outlined pill (button-primary, 40px radius, 1px white border) for the one main action and link-arrow for the rest.
- Keep images, cards and inputs square (0px).
- Use #121212 surface-1 for testimonial cards and the blog band.
- Use Red Hat Mono only in uppercase at 13–18px.
- Fill buttons or panels with #AA05CF; it is a text gradient only, at 42px or larger.
- Round cards or images, or add drop shadows.
- Set body copy in full white; paragraphs are 70% (ink-muted).
- Use the gradient on paragraphs, links or labels.
- Animate with bounce or for longer than 800ms.
- Add a second accent colour; the photos already bring their own hues.
Example prompt
Any page in the Veox style
More design systems like this
Marketing design systems, the same colors first.
Bring any of them to your AI tool
All Access unlocks all 398 design systems, ready for Claude, ChatGPT, Gemini, Cursor, v0 and Lovable, plus 400+ templates on all 5 platforms.
Get All AccessUpgrade to All AccessHow to use the Veox design system
Pick a file to see what it’s for and where it goes.
What it is
The whole design system in one markdown file, written for AI: every color, type style, spacing value, component and motion rule, plus do's, don'ts and a ready prompt.
Best for
Claude, ChatGPT, Gemini, Cursor and v0, or any other AI tool that builds pages or code.
How to use it
- Put
DESIGN.mdin your project and mention it in your request, or save it as.cursor/rules/veox.mdc - For the rule file, start it with a front-matter block that sets
alwaysApply: true, so every chat uses it - Ask: “Build a pricing page using DESIGN.md.” Cursor follows the colors, fonts, spacing and rules
- Put
DESIGN.mdin the project root - Add one line to
CLAUDE.md: “Follow DESIGN.md for all UI.” - Ask for any page or component; Claude reads the file first
- Attach
DESIGN.mdto the chat (or paste it in) - Ask: “Build a landing page in this design system.”
- Keep the file in the chat or project knowledge, so follow-up pages stay on style
What it is
Every token as data, in the W3C Design Tokens format: colors with their roles, type styles, radius, spacing, and component tokens that point at them.
Best for
Figma (Tokens Studio), Style Dictionary and other design-token tools, and build scripts.
How to use it
- In Figma, open Tokens Studio, choose Import, and pick
tokens.json - Or point Style Dictionary’s
sourceat it to generate tokens for any platform - In code, import it like any JSON file
What it is
A Tailwind CSS v4 theme: every color, font, type style, radius and spacing value becomes a Tailwind utility, like bg-canvas, text-headline-lg or rounded-md.
Best for
Tailwind v4 projects, and AI builders that write Tailwind (v0, Lovable, Bolt).
How to use it
- Save
theme.cssnext to your main CSS file - Import it after Tailwind:
@import "tailwindcss"; @import "./theme.css"; - Use the classes:
bg-canvas text-ink rounded-md p-lg
What it is
The same tokens as plain CSS variables on :root. Component values point at the color variables, so changing one color updates everything that uses it.
Best for
Any website: plain CSS, Webflow custom code, Framer, WordPress.
How to use it
- Add it to your stylesheet, or in Webflow paste it into Site settings → Custom code inside a
<style>tag - Use the variables anywhere:
color: var(--color-ink) - Change a token once and every place that uses it follows