flowmanceKonsultant Design System
Konsultant is a calm, dark financial-consulting site. It feels like a private banking lounge: a warm charcoal page (#242424) with faint curved shapes in the background, white Inter headlines, grey supporting text and small rounded #3B3B3B controls. There is no accent colour in the interface; the only strong colour on the page is one full-width abstract-wave photo behind the founder quote.
Four signatures make it recognisable:
- Headlines that fade out. The hero statement runs white for two lines and ends in grey #6E6E6E (… ensuring / a lasting financial legacy.). Section headings start at 24% opacity and brighten as they scroll in, so a mid-reveal heading reads grey.
- Hairline grids. Client logos sit in a strip of 150px cells divided by 1px #333438 lines, and services sit in a 2-column grid of cells with 1px #333333 borders, each centred around a 90px #3B3B3B icon circle.
- Charcoal controls. Buttons, the active nav pill, category pills, the phone circle and the newsletter field are all #3B3B3B on #242424. Shapes vary by role: 9px buttons, 20px nav pills, 50px category pills, full circles.
- One colour band. A full-bleed coral-to-violet abstract wave image carries a round founder portrait, a 1px vertical rule and a 33.1px white quote.
Colors
Surfaces
#242424Page background (--black-4)
#272727Client-logo strip background
#3B3B3BButtons, active nav pill, category pills, icon and phone circles, newsletter field
#444444Dropdown link hover
#3B3B3BInk
#FFFFFF#FFFFFFHeadlines, button labels, underline links
#E5E4E2Card and value titles, FAQ questions, form placeholders
#E5E4E2 · 80%Nav links at rest
#FFFFFF · 59%Paragraphs, the address and phone number
#FFFFFF · 47%Footer links
#6E6E6EThe greyed last line of the hero statement
#FFFFFFAction
#3B3B3BButtons, active nav pill, category pills, icon and phone circles, newsletter field
#6E6E6EButton background on hover
Lines & effects
#838383Newsletter field placeholder
#3333331px borders of the service grid
#333438Logo-strip cell lines (drawn with inset box-shadows)
#E5E4E2 · 15%Contact input and textarea borders
#FFFFFF1px rule under the testimonial block
Typography
Inter · display-hero
The quick brown fox jumpsHero statement (three lines, last one in ink-tail). 60px · 600 · 1.1
Inter · headline-md
The quick brown fox jumpsSection titles (The society operates…, Consultō forges strong client bonds…). 40px · 600 · 1.1
Inter · title-lg
The quick brown fox jumpsBlog card titles. 23px · 600 · 1.3
Inter · body
The quick brown fox jumpsParagraphs, address, phone. 16px · 400 · 1.3
Inter · label
The quick brown fox jumpsUnderline links (Learn More, Get a Consultation), footer titles, the quote author. 16px · 600 · 1.25
Inter · caption
The quick brown fox jumpsCategory pills. 14px · 500 · 1.43
Spacing & shape
| Purpose | Value |
|---|---|
| Container | max 1200px, centred, with 5% side padding (72px at 1440px) |
| Section rhythm | 140px top, 150px bottom, 60px top and bottom at ≤991 |
| Breakpoints | 991px, 767px and 479px (Webflow defaults), plus 1920px |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xs | 10px | |
sm | 15px | |
md | 30px | |
lg | 40px | |
xl | 50px | |
2xl | 100px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
section-compact | 70px | |
gutter | 72px | |
section-top | 140px | |
section-bottom | 150px | |
logo-cell | 150px |
Border radius
Surfaces
How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.
Motion
| Heading brighten on scroll | Starts at opacity 0.24, goes to 1 as it scrolls in view (1250ms outQuart) |
| Fade-in on scroll | opacity 0 → 1, 1000ms, 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 |
| Underline slide | x −101% → 0% on hover, → 100% on leave, 300ms ease |
| Dropdown | Chevron rotate 400ms swingTo; height 300ms ease / 400ms outCubic |
| Colour hovers | all 0.3s on links; nav opacity 0.3s; round button background-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) |
Do’s and don’ts
- Use #242424 for the page and #3B3B3B for the filled controls (buttons, active nav pill, category pills, icon circles); the newsletter arrow is the one #242424 circle.
- End the hero statement in #6E6E6E so the headline fades out.
- Set card titles in #E5E4E2 and paragraphs in white at 59%.
- Divide logo and service grids with 1px #333333 / #333438 hairlines instead of using cards.
- Keep radii by role: 9px buttons and inputs, 20px nav pills, 50px category pills, circles for icons.
- Use one full-bleed colourful photo band per page and keep everything else greyscale.
- Add an accent colour, gradients on UI, or drop shadows.
- Use pure #000000 or white backgrounds for sections; stay on #242424 and #272727.
- Put #6E6E6E or 47%-white text in paragraphs; keep them for the hero tail (60px) and 16px footer links on the canvas, and never put ink-subtle on #3B3B3B controls.
- Use Newsreader or any second typeface; Inter is the only family in use.
- Mix radii inside one component, or round the service cells.
- Animate longer than 2000ms or use bounce easing on content.
Example prompt
Any page in the Konsultant 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 Konsultant 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/konsultant.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