flowmanceInvest X Design System
Invest X is a sleek dark fintech and analytics site. It is black, with electric blue as the only colour: glossy 3D glass objects lit in cobalt, blue gradient buttons, a blue testimonial band, and floating white dashboard cards (Total Sales $89,000, Deposit Paypal +$2,500) that make the hero look like a product. Type is a single family, Inter Tight 600, with headlines that fade from white into grey.
Signatures:
- Fading headlines. 13 headings and metrics are filled with linear-gradient(90deg, #FFFFFF 34%, #FFFFFF66 85%) clipped to the text, so the start of the line is white and the end is grey: Welcome to the future of analytics, Sharing and cross promotion, 47%.
- Blue gradient pill. Every main action is a 30px pill filled with linear-gradient(50deg, #0019FD, #5A6AFD) and white text: Get started, Get more traffic, Send Message.
- Slate gradient tiles. Icon tiles and metric cards use linear-gradient(23–45deg, #1D2838, #334053), a cool navy slate that lifts them off the black.
- Blue glass 3D objects. Hero and section art are translucent blue glass shapes (a bowl, a tumbler, a slab) floating on black.
Invest X is a dark-only design, with one blue band and white testimonial cards.
Colors
Surfaces
#000000Page background (named --white in the CSS; the variable names are swapped)
#1D2838Start of the slate gradient on icon tiles and metric cards
#334053End of the slate gradient
#FFFFFFTestimonial cards (white to 95% white gradient) and their dark grey text
Ink
#FFFFFFButton text
#FFFFFFHeadlines, nav, feature titles, links
#A3ADBBLeads, FAQ questions, footer links, metric labels
#616D7EParagraphs (p colour), tag outlines
#999999Input placeholders
#FFFFFF · 40%End stop of the fading headline gradient
#444C58Text on inverse-canvas
#FFFFFFAction
#0019FDButton gradient start (--blue), the blue band, the X in the logo
#5A6AFDButton gradient end; on hover the gradient reverses to start here
Lines & effects
#616D7E1px outline of date tags
#FFFFFF · 20%Cart borders and dividers
#333333Dropdown link hover
Typography
Inter Tight · display-metric
The quick brown fox jumpsMetrics 47%, 10x, $4.1M, 37%, with the fading gradient. 70px · 600 · 1.2
Inter Tight · headline-lg
The quick brown fox jumpsSection titles Innovative features to tackle obstacles. 50px · 600 · 1.2
Inter Tight · title-lg
The quick brown fox jumpsTestimonial quotes on white cards. 25px · 600 · 1.4
Inter Tight · body-lg
The quick brown fox jumpsHero and section leads in #A3ADBB. 21px · 500 · 1.4
Inter Tight · field
The quick brown fox jumpsForm input text. 18px · 400 · 1.11
Inter Tight · footer-title
The quick brown fox jumpsFooter column headings. 18px · 500 · 1.11
Spacing & shape
| Purpose | Value |
|---|---|
| Container | max 1200px, centred |
| Section rhythm | 120px top and bottom (.section), 80px at ≤991px, 70px at ≤767px and 50px at ≤479px |
| Breakpoints | 991px, 767px and 479px |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xs | 8px | |
sm | 15px | |
md | 20px | |
lg | 35px | |
xl | 50px | |
2xl | 60px | |
3xl | 100px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
gutter | 72px | |
section | 120px | |
logo-gap | 150px |
Border radius
Surfaces
How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.
Motion
| Fade in | opacity 0 → 1, 1000ms or 1250ms outQuart |
| Rise | y −100px start positions settling over 500ms |
| Pop in | scale 0 → 1, 400ms or 600ms outExpo |
| Button hover | Size and background colour, 300ms ease; a fill moves x 100% → 0%, 300ms ease |
| Arrow nudge | x 3px, y −3px, 300ms ease |
| Hover slide | x 0 → 6px, 500ms outQuint |
| Parallax | y −7% ↔ 7%, 500ms, while in view |
| Card press | Testimonial cards scale(.97), CSS transform .3s, color .3s |
| Logo carousel | Logos scroll sideways in a continuous loop |
Do’s and don’ts
- Keep the page black (#000000) and use #0019FD as the only hue.
- Fill headlines and metrics with linear-gradient(90deg, #FFFFFF 34%, #FFFFFF66 85%) clipped to text.
- Use the gradient pill (#0019FD → #5A6AFD, white text, 30px radius, 50px tall) for every main action.
- Put icons and metrics on slate gradient tiles (#1D2838 → #334053), 19px radius for icon tiles.
- Set everything in Inter Tight: 600 for headings and labels, 500 for paragraphs.
- Pair the split sections with a blue glass 3D render.
- Use #616D7E (ink-subtle) below 18px; it is about 4.0:1 on black. Use #A3ADBB for anything smaller, and never put #616D7E on the slate tiles (2–2.8:1).
- Shrink button labels: white on the #5A6AFD end of the gradient is about 4.3:1, so keep labels at 16.8px semibold or larger.
- Add a second accent colour or warm tones to the UI.
- Use flat grey headlines instead of the white-to-grey fade.
- Put white surfaces anywhere except testimonial and dashboard cards.
- Add drop shadows beyond the faint 6% ring.
- Animate longer than 1250ms or bounce.
Example prompt
Any page in the Invest 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 Invest 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/invest.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