flowmanceCorporata Design System
Corporata is a calm, dark corporate site for an investment firm. The whole page sits on one deep teal (#143132), headlines are white Inter at weight 500 that fade to 40% white halfway through, and a single slate blue (#474EE0) marks the active nav item, the phone button, the hero blob and the testimonial card. Photos of smiling professionals are tilted a few degrees in rounded frames, which keeps a formal palette friendly.
Four signatures make it recognisable:
- Two-tone headlines. The hero and section headings start in white and finish in white at 40% (card and blog titles stay white): We pour capital into / stellar companies.; Showcasing our / latest investment.
- The slate-blue blob. The hero portrait is a cut-out person standing in front of a large organic #474EE0 shape that bleeds off the right edge.
- Tilted photos. Secondary photos are rotated by about 5° (left or right) with a 20px radius, as if laid on a desk.
- Outlined metrics. Figures such as 6x, $3bn, 70% are 130px with no fill, only a thin light outline, rising from a mask between two full-width hairlines.
Corporata is a dark-only design.
Colors
Surfaces
#143132Page background everywhere, including the footer
#FFFFFF · 10%Translucent white fill measured on 7 small elements; use it for subtle chips and hover fills
#47595APlay button, placeholder fills behind photos
#E5E4E2 · 15%Contact input border on a transparent field
#EFF0F1Footer subscribe field; placeholder #838383
Ink
#47595AText on primary
#FFFFFFText on primary-hover
#FFFFFFText on accent
#FFFFFFHeadline first halves, links, labels
#FFFFFF · 70%Paragraphs, the hero lead, metric labels, the phone number
#FFFFFF · 47%Footer links at rest
#FFFFFF · 40%The faded second half of headlines (40px and larger only)
#E5E4E2 · 90%Nav links at rest; white on hover
#202125Text on field-light
Action
#E5E4E2The filled button View full portfolio, Join us today
#474EE0Button hover
#474EE0Active nav pill, phone circle, hero blob, testimonial card
Lines & effects
#47595A1px hairlines around the video block, logo tiles, metric band; 2px tag outlines
#FFFFFF · 40%The 1px underline under text links
#838383#E7F6FCLogo tile background on hover
Typography
Inter · display-metric
The quick brown fox jumpsOutlined figures 6x, $3bn, 70%. 130px · 600 · 1
Inter · headline-lg
The quick brown fox jumpsSection titles, two tones. 40px · 500 · 1.1
Inter · title-lg
The quick brown fox jumpsBlog card titles. 28px · 500 · 1.3
Inter · body-lg
The quick brown fox jumpsHero lead and section leads. 19px · 500 · 1.37
Inter · label
The quick brown fox jumpsNav links, footer titles. 17px · 500 · 1.18
Inter · caption
The quick brown fox jumpsCategory tags. 14px · 500 · 1.43
Spacing & shape
| Purpose | Value |
|---|---|
| Container | max 1200px, centred, with 5% side padding (72px at 1440px) |
| Section rhythm | 130px top and bottom (.section), 60px at ≤991 |
| Breakpoints | 991px, 767px, 479px, plus min-width 768 and 1920px |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xs | 10px | |
sm | 16px | |
md | 30px | |
lg | 35px | |
xl | 50px | |
2xl | 100px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
section-band-bottom | 40px | |
hero-bottom | 50px | |
section-band-top | 70px | |
footer-top | 80px | |
hero-top | 100px | |
section | 130px | |
logo-tile | 150px |
Border radius
Surfaces
How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.
Motion
| Fade in on scroll | opacity 0 → 1, 1000ms outQuart |
| Text brighten | opacity 0.24 → 1, 1250ms outQuart (text rests at 24% until revealed) |
| Hero image rise | y 15em → 0em, 1500ms outQuart, with scale 1.5 → 1 over 2000ms outQuart |
| Curtain reveal | A cover moves y 0 → −102%, 1250ms inOutCirc |
| Link underline | x −101% → 0% in 300ms ease; out to x 100% in 300ms ease |
| Hover scale | scale 1 → 1.1, 100ms ease, and back |
| Tilt swing | rotate, 400ms swingTo (slight overshoot) |
| Slide in | x 0%, 600ms outExpo |
| Cursor parallax | y ±50px on mouse move (500ms) |
| Size and border | 400ms outCubic; border 200ms outSine |
| CSS transitions | opacity 0.3s on nav links; all 0.3s on footer links; background-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) on the round arrow button |
Do’s and don’ts
- Keep every page on canvas #143132 with white Inter 500 headlines.
- Split headings into a white first part and a 40%-white (ink-faint) second part.
- Use #474EE0 for the one active or emphasised element per area: nav pill, phone circle, testimonial card.
- Use the #E5E4E2 button with #47595A text and turn it #474EE0 / white on hover.
- Frame bands with 1px #47595A hairlines and tilt secondary photos about 5° with a 20px radius.
- Show numbers as large outlined figures with a 70% label underneath.
- Add shadows, gradients on UI, or a second accent colour.
- Use the Newsreader serif or uppercase labels.
- Use ink-subtle (white 47%, about 4.3:1 on teal) for paragraphs; keep it for 16px footer links and meta.
- Use ink-faint (40%) below 40px; it is only for headline second halves.
- Set the line colour #47595A as text on teal except for the tiny Some metrics label; it is barely readable.
- Make the primary button white or blue at rest.
Example prompt
Any page in the Corporata style
More design systems like this
Business 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 Corporata 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/corporata.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