flowmanceConsulta Design System
Consulta is a clean, bright financial-consulting site. It feels trustworthy and a little editorial: square-cornered blocks on white, black Inter 600 headlines where the closing words turn cyan, and a book-like Newsreader serif for every paragraph. Colour comes from one cyan (#00AEEF) and its pale tints; there are no shadows and almost no rounded corners.
Four signatures make it recognisable:
- Two-tone headlines. The first half of a heading is black and the second half is cyan #00AEEF: Generational wealth, crafted together., Real experiences, real results. The CEO quote runs grey, then black, then cyan as you scroll.
- Parallelogram hero photo. The hero image on the right is cropped to a slanted parallelogram (about 60°) running off the right edge, set against plain white.
- Stacked services bands. Services sit in full-width bands that stack as you scroll, each a deeper cyan tint (#E9F9FF, #D3EEF8, #BAE5F5). Each band has a small cyan label (01. Wealth Management), a huge ghost title in cyan at 30%, and three white cards that overlap the bottom of that ghost title.
- Inter over Newsreader. All headings, labels and buttons are Inter 600; all paragraphs, quotes, names and the address line are the Newsreader serif.
Colors
Surfaces
#E9F9FFThe three stacked services bands, lightest first
#D3EEF8The three stacked services bands, lightest first
#BAE5F5The three stacked services bands, lightest first
#FFFFFFPage background, service cards
#F7F8FCTestimonial cards, dropdown hover, the newsletter field
#EFF0F1The pale grey button (Schedule A Free Consultation, Learn More)
#F7F8FCInk
#00AEEFButton labels, the second half of headlines, active nav link, arrow links, stars, icons
#FFFFFFText on secondary
#000000Headlines, nav links, names
#000000Body copy
#26272BFooter links, form text and the 1px input border
#838383Roles after names (CEO, Founder), footer link hover
#FFFFFFAction
#EFF0F1The pale grey button (Schedule A Free Consultation, Learn More)
#EFF0F1#00AEEFForm submit (Get in Touch) and the round newsletter arrow button
#5FC1E6Round arrow button on hover
#00AEEFButton labels, the second half of headlines, active nav link, arrow links, stars, icons
#00AEEF · 30%Ghost service titles (Wealth Management) behind the cards
#E7F6FCTag chips (Testimonials, Clients)
Lines & effects
#E1E1E1The one hairline border on the page
#26272B1px contact-form input borders
Typography
Inter · display-hero
The quick brown fox jumpsHero H1, also the ghost service titles in accent-faint. 65px · 600 · 1.1 · -1px
Inter · headline-lg
The quick brown fox jumpsPhoto CTA band (Crafting wealth,). 54px · 600 · 1.1 · -1px
Inter · title-lg
The quick brown fox jumpsBlog card titles. 21px · 600 · 1.3
Newsreader · body-lg
The quick brown fox jumpsHero lead paragraph. 20px · 400 · 1.3
Newsreader · caption
The quick brown fox jumpsBlog category text. 15px · 500 · 1.3
Newsreader · micro
The quick brown fox jumpsAddress under the logo (7 Broadway, New York, NY 001). 14px · 400 · 1.3
Spacing & shape
| Purpose | Value |
|---|---|
| Container | max 1200px, centred |
| Section rhythm | 100px top and bottom (.section), 60px at ≤991 |
| Breakpoints | 991px, 767px and 479px (Webflow defaults), plus 1440px and 1920px steps |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xs | 5px | |
sm | 10px | |
md | 15px | |
lg | 20px | |
xl | 30px | |
2xl | 50px | |
3xl | 100px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
card-gap | 15px | |
section-compact | 60px | |
gutter | 72px | |
section | 100px | |
column-gap | 100px |
Border radius
Surfaces
How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.
Motion
| Scroll text brighten (CEO quote) | Lines start at opacity 0.24 and go to 1 while scrolling in view (500ms steps) |
| Fade-in on scroll | opacity 0 → 1, 1000–1250ms, outQuart |
| Heading rise | y 15em → 0em, 1500ms, outQuart |
| Image settle | scale 1.5 → 1, 2000ms, outQuart |
| Icon hover | scale 1 → 1.1, 100ms ease, and back |
| Button fill slide | x −101% → 0% on hover, → 100% on leave, 300ms ease |
| Dropdown | Chevron rotate 400ms swingTo; list height 300ms ease / 400ms outCubic |
| Link and colour hovers | all 0.3s; round button background-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) |
Do’s and don’ts
- Split each headline into black and cyan: black #000000 first, the last words in #00AEEF.
- Set every paragraph in Newsreader 17px / 1.3 in black, and every heading, label and button in Inter 600.
- Keep corners square (0px) on buttons, cards, tags, inputs and images.
- Use the #EFF0F1 grey button with a cyan 15px 600 label for the main action, and a cyan → text link next to it.
- Put service cards on tint bands (#E9F9FF, #D3EEF8, #BAE5F5) and let them overlap a 30% cyan ghost title.
- Use #F7F8FC flat panels for testimonials and the newsletter field, with no border or shadow; contact inputs are transparent with a 1px #26272B border.
- Add shadows, gradients or blur. Depth is tint steps and overlap only.
- Introduce a second hue. Cyan #00AEEF and its tints are the only colour.
- Set body copy in Inter or in grey. Grey #838383 is only for roles and meta at 15px and above.
- Use cyan text below 15px or on the tint bands for long text; #00AEEF on white is low contrast, so keep it to 15px+ semibold labels and large headline words.
- Round cards or buttons. The only rounded shapes are the newsletter pill and the 50px circle button.
- Animate longer than 2000ms or use bounce easing on content.
Example prompt
Any page in the Consulta 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 Consulta 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/consulta.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