flowmanceEnterprise X Design System
Enterprise X is a dark, product-led SaaS site. It feels like a cloud-infrastructure dashboard turned into a landing page: a slate #1F2631 canvas, slightly lighter #353F50 cards, Inter semibold for every line, and one electric blue (#0022FF) that glows from the hero edge, fills the buttons from below and colours the key words in headlines. Product screenshots (dashboards, charts, a phone app) carry most of the imagery.
Four signatures make it recognisable:
- Gradient-glow pills. Buttons are 100px pills whose fill fades from transparent at the top to #0022FF at the bottom, with a thin white-14% border, so they look lit from below (Sign Up →, Get Started, Learn more →). The secondary pill does the same in white (Contact us).
- Blue words in headlines. Part of a headline is set in #0022FF (manage and publish your content, Automatic database scaling and optimization), or one word gets a blue underline bar (content, information).
- Dashboard mockups. The hero shows a browser-window dashboard with line charts bleeding off the right edge, lit by a blue radial glow from the edge of the screen.
- A solid blue band. One full-width #0022FF section with fine white line art and a phone mockup breaks the slate rhythm.
Enterprise X is dark-only.
Colors
Surfaces
#1F2631Page background (--gray-second)
#353F50Cards, inputs, dropdown hover, the bottom of card gradients (--gray-first)
#353F50Inputs; the border turns blue on hover and focus
#FFFFFF · 16%With field: Inputs; the border turns blue on hover and focus
#0022FFWith field: Inputs; the border turns blue on hover and focus
Ink
#FFFFFFText on primary
#FFFFFF#FFFFFF#FFFFFFHeadlines, nav, labels
#FFFFFF · 60%Paragraphs; Webflow sets p { opacity: .6 }
#FFFFFF · 55%Grey helper text (.gray-text), dashboard captions
#FFFFFFAction
#0022FFButton gradient end, icon tiles (--medium-purple, which is actually blue)
#0022FF#FFFFFF · 56%Bottom of the white secondary-button gradient
#0022FFHighlighted headline words, underline bars, the blue band, the hero glow
Lines & effects
#303A49FAQ row rules
#FFFFFF · 7%Card borders
#FFFFFF · 14%Primary button border
#FFFFFF · 20%Section dividers
#FFFFFF · 50%Top edge of the secondary button
#F3EAFF · 35%2px border of tag pills (--pale-turquoise)
#FFFFFF · 11%Small translucent chips
Typography
Inter · display-metric
The quick brown fox jumpsMetric figures: 47%, $4.1M, 10x, 37%. 70px · 600 · 1.2
Inter · headline-xl
The quick brown fox jumpsFAQ title An extensive FAQ section for quick and easy access to information. 50px · 600 · 1.2 · -1px
Inter · title-lg
The quick brown fox jumpsShowcase card titles and the blue-band title. 33px · 600 · 1.3
Inter · body-lg
The quick brown fox jumpsHero lead. 20px · 600 · 1.5 · -0.5px
Inter · label-nav
The quick brown fox jumpsNav and footer links (1.1rem). 17.6px · 600 · 1.14
Inter · caption
The quick brown fox jumpsCheckbox label at 65%. 15px · 500 · 1.5
Spacing & shape
| Purpose | Value |
|---|---|
| Container | max 1200px, centred |
| Section rhythm | 100px top and bottom (.section), 60px from ≤991px; the CTA section uses 50px, 30px at ≤479px |
| Breakpoints | 991px, 767px and 479px, plus min-width steps at 768, 1280 and 1920px |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xs | 15px | |
sm | 20px | |
md | 30px | |
lg | 40px | |
xl | 50px | |
2xl | 60px | |
3xl | 70px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
section-cta | 50px | |
section | 100px | |
nav-height | 102px | |
hero-top | 175px | |
hero-bottom | 200px |
Border radius
Surfaces
How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.
Motion
| Scroll reveal | Elements move from y ±50px, ±80px or x ±80px to 0 over 500ms; opacity 0 → 1, 1000ms outQuart |
| Slide panel | x 200% → 0%, 600ms outExpo |
| Arrow nudge | x 0 → 3px (4px / 10px variants), 500ms outQuint |
| Icon hover | scale 1 → 1.1, 100ms ease |
| Dropdown | Size change 300ms ease / 400ms outCubic; border 200ms outSine |
| Card press | Scale 0.97, 300ms |
| Secondary button | Gradient change, 400ms |
| Links | Opacity 0.7 (nav) and 0.55 (footer), 300ms |
| Button background | 200ms cubic-bezier(0.645, 0.045, 0.355, 1) |
Do’s and don’ts
- Use the #1F2631 canvas with #353F50 cards (15–20px radius) and 1px white-7% borders.
- Make every main action a 100px pill with a transparent-to-#0022FF gradient and a →.
- Set all type in Inter 600; headlines 42–53px with −0.5 to −2px tracking.
- Highlight 2–3 headline words in #0022FF or underline one word with a blue bar.
- Show the product: dashboards and charts in browser or phone frames.
- Keep paragraphs at 16px weight 600, white at 60%.
- Use #0022FF for text under 33px: blue on #1F2631 is low contrast, so keep blue words to large headlines.
- Add a second accent colour (no green from --lavender, no purple).
- Use flat, square or small-radius buttons; buttons are always gradient pills.
- Put the white secondary pill on a light or blue background, or shrink its label: it is about 2.6:1 at the gradient's brightest point, so keep the label 16px semibold on the dark canvas.
- Use paragraph text below 15px or below 55% white.
- Add heavy drop shadows; depth comes from gradients and the blue glow.
- Use ink-subtle (white at 55%) for small text on #353F50 cards; it is about 4.4:1 there, so keep it to 16px+ semibold helper text or use ink-muted.
Example prompt
Any page in the Enterprise X style
More design systems like this
Tech 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 Enterprise X 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/enterprise.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