flowmanceZigy Design System
Zigy is a bright, developer-flavoured SaaS landing page. The hero is a diagonal purple-to-royal-blue gradient (#7B4397 → #4465EB) covered with thin topographic contour lines, with a big white Space Grotesk headline and an inline sign-up form. Below it the page is white and orderly: two-column splits with gradient-filled line illustrations, a row of big metrics, bordered feature cards, and one near-black band of integration cards. All running text is set in Lekton, a typewriter-style face, which gives the page its "code" feel.
Four signatures make it recognisable:
- The purple-to-blue gradient. One diagonal gradient from #7B4397 to #4465EB (51° on buttons, 39–45° on the hero) fills the hero, the main buttons, and the people in the illustrations.
- Typewriter body text. Paragraphs, buttons, labels and text links are all Lekton weight 700 (View Careers, View App Profile →), while headlines are Space Grotesk 700.
- Contour lines. Thin, low-contrast topographic line patterns sit behind the hero and the dark integrations band.
- Tracked uppercase tags. Most sections open with a 12px Lekton tag, 2px tracking: white-on-30%-white on the gradient (MEET ZIGY), white on #4465EB on white or dark sections (CORE FEATURES, INTEGRATIONS), or plain blue text (POWERFUL AND FLEXIBLE).
Zigy is a light design with one dark band and a dark footer.
Colors
Surfaces
#FFFFFFPage background, cards, inputs
#FAFAFFAlternate light sections (--ghost-white-2)
#F1F1F7Declared as --ghost-white; not seen on the home page, keep for light chips
#0C0E16Scrolled nav, integrations band, footer (--black-2)
#FFFFFFHero form inputs
#333333Text on field
Ink
#FFFFFFText on primary
#FFFFFFText on secondary
#111111Headlines, metrics, link text
#434B61Paragraphs and metric labels (--dark-slate-blue)
#838FAFCard meta (Website, Tutorial)
#AFAFBBSmall dates and secondary meta
#FFFFFFText on inverse-canvas
#FFFFFF · 70%Small uppercase intro text and footer links on dark
Action
#4465EBGet Started, Schedule a Demo, tags on light and dark sections, NEW badge
#4465EB#7B4397The Sign In button; the start of the gradient
Lines & effects
#E1E1E11px borders on feature cards and integration logos, section rules
#EDEDEDCart footer divider
#1E2028Footer newsletter field
#FFFFFF · 10%Footer title rules, nav-link hover fill
#FFFFFF · 30%Tag background on the gradient hero
#999999Placeholder text on field
#000000PREMIUM corner badge
Typography
Space Grotesk · display-hero
The quick brown fox jumpsBuild your website with Zigy template. 71px · 700 · 1.08
Space Grotesk · headline-lg
The quick brown fox jumpsCentred section titles (.top-title-text). 50px · 700 · 1.1
Space Grotesk · logo
The quick brown fox jumpsZigy wordmark. 34px · 700 · 1.06
Space Grotesk · title-lg
The quick brown fox jumpsBlog card titles. 26px · 700 · 1.27
Space Grotesk · label
The quick brown fox jumpsNav links. 15px · 700 · 1.33
Lekton · body-lg
The quick brown fox jumpsCheck-list items (Build to scale, Professional Support). 16px · 700 · 1.38
Spacing & shape
| Purpose | Value |
|---|---|
| Container | max 1200px, centred |
| Section rhythm | 120px top and bottom, 100px at ≤991 and 60px at ≤479 |
| Breakpoints | 991px, 767px and 479px (Webflow defaults) |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xs | 10px | |
sm | 16px | |
md | 20px | |
lg | 30px | |
xl | 50px | |
2xl | 100px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
button-y | 19px | |
button-x | 32px | |
footer-top | 70px | |
section-band | 80px | |
nav-height | 110px | |
section | 120px |
Border radius
Surfaces
How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.
Motion
| Button hover | transition: all 0.2s, opacity 1 → 0.8 |
| Text link hover | Opacity 1 → 0.6 |
| Nav link hover | Background to white at 10% |
| Nav on scroll | Background transparent → #0C0E16, 500ms; height shrinks (size, 300–500ms) |
| Dropdown caret | Rotates 200–300ms ease |
| Dropdown and menu items | opacity 0 ↔ 1 and y 10–20px → 0, 300–400ms ease |
| Footer links | Opacity 0.7 → 1 |
Do’s and don’ts
- Use the 51° gradient #7B4397 → #4465EB for the hero and the main buttons, and solid #4465EB for tags.
- Set headlines and nav links in Space Grotesk 700 and every paragraph, button and text link in Lekton 700.
- Open most sections with a 12px uppercase Lekton tag with 2px tracking.
- Keep buttons at padding 19px 32px, 58px tall, 4px radius, with an opacity-only hover.
- Separate white cards with 1px #E1E1E1 borders, and put white cards on #0C0E16 for contrast bands.
- Keep paragraphs in #434B61.
- Add drop shadows or rounded corners beyond 8px.
- Introduce a third brand colour, or use the gradient on text or small UI.
- Use pure black for dark bands; use #0C0E16.
- Put #838FAF meta text below 14px or use it for paragraphs; it is about 3.2:1 on white. Keep ink-subtle for short meta like Website.
- Set paragraphs in Space Grotesk or headlines in Lekton.
- Add a hover colour to buttons; the measured hover is opacity 0.8.
Example prompt
Any page in the Zigy style
More design systems like this
SaaS 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 Zigy 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/zigy.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