flowmanceConsultHQ Design System
ConsultHQ is a light, approachable consulting site. It reads as calm and trustworthy: a white page, near-black Inter set heavy (weight 600 for almost all text, even paragraphs), and a single soft cornflower blue (#8FAADF) that marks every action, highlight and icon. Sections are separated by generous white space rather than colour, with an occasional warm off-white (#FAFAF7) card or band.
Four signatures make it recognisable:
- The hand-drawn underline. The 95px hero title Unlock your business potential. has a blue scribble stroke under one word (business). It is the only decorative mark in the template.
- Two-tone headlines. Section titles and quotes switch from ink to the blue accent mid-sentence, so the last clause reads as the highlight: …We believe that success / is about making a positive impact on their lives.
- Cut-out portrait on a blue disc. The hero puts a smiling cut-out portrait over a large #8FAADF circle, with small white UI cards (a line chart, a donut ring) floating at the edges.
- Hairline logo grid. Client logos sit in full-bleed 200px tiles drawn with 1px #DDDDDD inset lines, edge to edge across the viewport.
ConsultHQ is a light-only design. A dark sibling (ConsultHQ Consulting) exists as a separate template.
Colors
Surfaces
#FFFFFFPage background
#FAFAF7Service cards, testimonial cards, the contact band (variable --gray-blue)
#FFFFFFInputs and the textarea, also on the off-white contact band
Ink
#FFFFFFText on primary
#121217Headlines, nav links, FAQ questions, footer links (variable --gainsboro)
#292929 · 70%Paragraphs and the hero lead
#8F8F8FFooter column titles, footer link hover, the role in an attribution (Founder)
#FFFFFFAction
#8FAADFFilled buttons, the CTA band, FAQ toggles
#8FAADF#8FAADFActive nav link and its underline, highlighted words in headlines, icons, outline-button text and borders
Lines & effects
#DDDDDDNav bottom rule, footer top rule, logo-grid lines, FAQ row dividers
#E1E1E11px input and textarea borders
Typography
Inter · display-hero
The quick brown fox jumpsHero H1 Unlock your business potential. 95px · 500 · 0.9 · -3px
Inter · headline-lg
The quick brown fox jumpsSection titles, the founder quote, FAQ title. 38px · 600 · 1.1 · -2px
Inter · title-lg
The quick brown fox jumpsBlog card titles (.blog-title-main). 30px · 600 · 1.2 · -1px
Inter · body-lg
The quick brown fox jumpsHero lead paragraph. 21px · 600 · 1.24 · -1px
Inter · label
The quick brown fox jumpsButton labels. 16px · 600 · 1.25
Inter · caption
The quick brown fox jumpsShort attribution lines (John Anderson, Founder). 15px · 600 · 1.1 · -1px
Spacing & shape
| Purpose | Value |
|---|---|
| Container | max 1200px, centred (.container) |
| Section rhythm | 100px top and bottom (.section { padding: 100px 5% }), 60px at ≤991px |
| Breakpoints | 991px, 767px and 479px, plus min-width steps at 768px, 1440px and 1920px |
Spacing scale
| Token | Value | Preview |
|---|---|---|
hair | 5px | |
xs | 10px | |
sm | 15px | |
md | 25px | |
lg | 30px | |
xl | 50px | |
2xl | 70px | |
3xl | 100px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
section-cta | 65px | |
gutter | 72px | |
nav-height | 98px | |
section | 100px | |
hero-top | 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 |
| Hero widgets follow the mouse | Small moves of ±4px and ±10px on x and y, 500ms, on mouse move over the hero |
| Scroll parallax | Elements drift on y by 30, 50 and 80px (and −50, −80px) over 500ms steps while in view |
| Icon hover pop | scale 1 → 1.1, 100ms ease, and back on mouse out |
| FAQ open | Height grows over 400ms outCubic; the + rotates over 400ms swingTo; the border changes over 200ms outSine |
| Button background | background-color 200ms cubic-bezier(.645,.045,.355,1) |
| Links and nav | Colour and opacity 300ms (transition: all .3s, opacity .3s) |
Do’s and don’ts
- Use Inter 600 for body text, labels and titles; reserve 500 for the 95px hero title.
- Use #8FAADF as the only colour: buttons, active nav, icons and the closing clause of key headlines.
- Set paragraphs in ink-muted (#292929B3) and headlines in ink (#121217).
- Put grouped content on surface-1 (#FAFAF7) cards with a 15px radius and leave the page itself white.
- Keep buttons at 52px tall, 5px radius, with a trailing →.
- Separate rows and regions with 1px #DDDDDD hairlines instead of shadows.
- Put white or blue text smaller than 16px semibold on or against #8FAADF; the contrast is only 2.3:1. Keep button labels at 16px+ weight 600.
- Use ink-subtle (#8F8F8F) for anything under 14px or for paragraphs; keep it for footer titles and roles.
- Add a second accent, gradients, glass or dark sections.
- Add drop shadows to cards; the only shadow is the 5% one on floating hero widgets.
- Use uppercase eyebrows or tracking on body text.
- Round buttons into pills; pills and circles are only for avatars, toggles and the hero disc.
Example prompt
Any page in the ConsultHQ 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 ConsultHQ 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/consulthq.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