Consultio Design System

Get DESIGN.md Download View template Works with

Consultio website template preview detail 2

Consultio website template preview detail 3

Consultio is a dark, calm consulting site. Everything sits on a deep midnight navy (#050422) that is almost black but clearly blue, with a single electric violet (#6F00FF) used for buttons, tags, play buttons and the glow in the imagery. Type is Inter Tight semibold at friendly sizes; there is no tracking trickery and no uppercase except one small tag. Content is centred in a 1200px column, with large rounded navy cards and plenty of empty space between sections.

Four signatures make it recognisable:

Two-tone headlines. Section intros and the hero lead start in full white and finish at 60% opacity in the same sentence: Build a customer-focused / business approach., Unlock your business's highest capabilities with us, / a Webflow template crafted for professional excellence.
The violet scribble. The last word of the hero title (power.) has a hand-drawn violet underline stroke under it.
Centred-logo header. Social icons on the left, the lowercase consultio wordmark in the middle, and Menu plus a large thin + on the right. The menu opens a full-screen navy overlay.
Violet light. The key photos and video are lit or graded violet (a particle wave in the hero, violet studio portraits, a violet gradient block behind a phone mockup), so the accent colour lives in the imagery as much as in the UI.

Consultio is a dark-only design.

Colors

Surfaces

canvas#050422

Page background (--black)

surface-1#0F0E31

Service cards, the testimonial card, contact inputs (--blue-light)

field#0F0E31

Contact form inputs

field-subscribe#81818B · 20%

The footer subscribe field

inverse-canvas#FFFFFF

The white square arrow button that submits the subscribe form

Ink

on-primary#FFFFFF

Text on primary

ink#FFFFFF

Headlines, labels, links, the first half of two-tone headlines

ink-muted#FFFFFF · 60%

Paragraphs and the second half of two-tone headlines (p { opacity: .6 })

ink-subtle#999999

List items and placeholder text in the subscribe field (--grey)

on-media#FFFFFF

inverse-ink#050422

Text on inverse-canvas

Action

primary#6F00FF

The filled buttons (except the white subscribe arrow), the tag, the play button, step numbers (--tomato, despite the name)

primary-hover#050422

The small .button turns navy on hover; the big animated button keeps its violet

Lines & effects

line#FFFFFF · 20%

The rule on top of the steps grid, the 1px step dividers, the cart border

line-faint#FFFFFF · 15%

A single faint 1px border

glass#FFFFFF · 20%

The round app-store icon buttons

Typography

Inter Tight · display-number

The quick brown fox jumps

The giant 18 behind years of experience. 590px · 700 · 0.8

Inter Tight · headline-lg

The quick brown fox jumps

Section titles such as Case studies. 44px · 600 · 1.3

Inter Tight · lead

The quick brown fox jumps

Hero lead under the title. 28px · 600 · 1.4

Inter Tight · title-lg

The quick brown fox jumps

Blog card titles. 27px · 600 · 1.4

Inter Tight · body-lg

The quick brown fox jumps

Paragraphs, at 60%. 18px · 500 · 1.3

Inter Tight · label-lg

The quick brown fox jumps

Big button label, Menu (footer titles are 18px at 700, no token). 18px · 600 · 1.11

Spacing & shape

Purpose	Value
Container	max 1200px, centred (.container)
Section rhythm	.section pads 100px top and bottom with 2% sides (80px at ≤991px, 60px at ≤479px); the video section uses 120px with 5% sides (80px with 2% sides at ≤991px, 60px at ≤479px); the hero is min-height: 100svh with 150px top, 130px bottom and 5% sides, and drops the min-height below 991px with 180 / 160px (≤991px), 190 / 170px (≤767px) and 130 / 147px (≤479px)
Breakpoints	991px, 767px and 479px (Webflow defaults), plus a min-width: 1440px rule

Spacing scale

Token	Value	Preview
`xs`	10px
`sm`	15px
`md`	25px
`lg`	30px
`xl`	50px
`2xl`	100px
`3xl`	150px

Layout spacing

Token	Value	Preview
`card-gap`	15px
`footer-bottom`	30px
`section`	100px
`section-video`	120px
`hero-bottom`	130px
`hero-top`	150px

Border radius

xs7px

field9px

sm10px

side20px

md30px

lg40px

xl50px

pill100px

Surfaces

How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.

Level 1canvas

Level 2surface-1

Motion

Headline reveal	Text moves from y 200% to 0% inside a mask, 1100ms outQuint, with a skew of y 7deg → 0deg over 500ms
Fade-in	opacity 0 → 1, 1000ms outQuart
Button roll	Label moves out and the arrow moves in, 500ms; transition: all on the button
Menu open	Overlay display: none → flex, panel size grows over 500ms, links roll up in their 72px masks
Mouse parallax	Elements shift ±5px and ±10px on x and y as the cursor moves, 500ms
Hover fades	Opacity, filter and border changes, 300ms ease; footer links opacity .6 → 1 in 300ms
Small button hover	background-color to #050422, 300ms
Subscribe button	background-color, 200ms cubic-bezier(0.645, 0.045, 0.355, 1)

Do’s and don’ts

Keep every page on #050422 with #0F0E31 cards and white type.
Use #6F00FF for the filled actions; the only other fills are the white subscribe arrow and the 20% white app buttons.
Split section intros into a white first half and a 60% second half.
Round cards at 30px, the testimonial panel at 50px, and buttons as pills.
Set all type in Inter Tight weight 600 for headings and 500 for paragraphs, with normal tracking.
Grade photos violet and fade them into the canvas.
Set typed input text to ink (#FFFFFF): the live inputs compute #333333, which disappears on #0F0E31.
Use pure black, grey cards or a second accent colour (the unused #E64007, #66FF00 and #8A2BE2 in the CSS).
Add drop shadows or backdrop blur.
Put paragraphs in full white; they are white at 60%.
Use uppercase outside the small violet tag.
Mix square and rounded cards; nothing structural has a radius under 30px except inputs.
Run reveals longer than 1100ms or add bouncy easing.

Example prompt

Any page in the Consultio style

Prompt

Build your page in the Consultio style. Use a #050422 page background and Inter Tight everywhere, headings at weight 600 with normal tracking. Centre content in a 1200px container with 100px section padding. Open each section with a centred two-tone 32px headline: the first half white, the second half white at 60% opacity. Put services in three #0F0E31 cards with a 30px radius, about 50px padding, an about 100px #050422 icon circle with a thin white line icon at the top, a 23px title and 18px body text at 60%. The main button is #6F00FF with white 18px/600 text, 40px radius, 70px tall, padding 25px 45px; on hover the label slides out and a white arrow slides in over 500ms. Use violet-graded photography, no shadows, and IX2 reveals that move text up from 200% over 1100ms outQuint.

# Consultio Design System

> Measured from the Consultio template. Drop it into
> Claude, ChatGPT, Gemini, Cursor or v0.

## Overview

Consultio is a dark, calm consulting site. Everything
sits on a deep midnight navy (#050422) that is almost
black but clearly blue, with a single electric violet
(#6F00FF) used for buttons, tags, play buttons and the
glow in the imagery. Type is Inter Tight semibold at

## Colors

| Token        | Hex         | Role                     |
| ------------ | ----------- | ------------------------ |
| canvas       | #050422     | Page background (--blac… |
| surface-1    | #0F0E31     | Service cards, the test… |
| field        | #0F0E31     | Contact form inputs      |
| field-subsc… | #81818B 20% | The footer subscribe fi… |
| inverse-can… | #FFFFFF     | The white square arrow … |
| on-primary   | #FFFFFF     | Text on primary          |
| ink          | #FFFFFF     | Headlines, labels, link… |
| ink-muted    | #FFFFFF 60% | Paragraphs and the seco… |
| ink-subtle   | #999999     | List items and placehol… |
| on-media     | #FFFFFF     |                          |
| inverse-ink  | #050422     | Text on inverse-canvas   |
| primary      | #6F00FF     | The filled buttons (exc… |
| primary-hov… | #050422     | The small .button turns… |
| line         | #FFFFFF 20% | The rule on top of the … |

## Typography

- display-number: Inter Tight 590px / 700
- display-hero: Inter Tight 92px / 600
- display-menu: Inter Tight 80px / 600
- headline-lg: Inter Tight 44px / 600

{
  "$description": "Consultio design tokens from its DESIGN.md (Flowmance), in the W3C Design Tokens format. Values measured from the template.",
  "color": {
    "primary": {
      "$type": "color",
      "$value": "#6F00FF",
      "$description": "The filled buttons (except the white subscribe arrow), the tag, the play button, step numbers (--tomato, despite the name)"
    },
    "primary-hover": {
      "$type": "color",
      "$value": "#050422",
      "$description": "The small .button turns navy on hover; the big animated button keeps its violet"
    },
    "on-primary": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Text on primary"
    },
    "canvas": {
      "$type": "color",
      "$value": "#050422",
      "$description": "Page background (--black)"
    },
    "surface-1": {
      "$type": "color",
      "$value": "#0F0E31",
      "$description": "Service cards, the testimonial card, contact inputs (--blue-light)"
    },
    "ink": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Headlines, labels, links, the first half of two-tone headlines"
    },
    "ink-muted": {
      "$type": "color",
      "$value": "#FFFFFF99",
      "$description": "Paragraphs and the second half of two-tone headlines (p { opacity: .6 })"
    },
    "ink-subtle": {
      "$type": "color",
      "$value": "#999999",
      "$description": "List items and placeholder text in the subscribe field (--grey)"
    },
    "line": {
      "$type": "color",
      "$value": "#FFFFFF33",

/* Consultio theme for Tailwind CSS v4, from its DESIGN.md (Flowmance).
 * Use it after Tailwind:  @import "tailwindcss";  @import "./theme.css";
 * Then use the utilities: bg-canvas, text-ink, text-headline-lg, rounded-md, p-lg */

@theme {
  /* Colors */
  --color-primary: #6F00FF;
  --color-primary-hover: #050422;
  --color-on-primary: #FFFFFF;
  --color-canvas: #050422;
  --color-surface-1: #0F0E31;
  --color-ink: #FFFFFF;
  --color-ink-muted: #FFFFFF99;
  --color-ink-subtle: #999999;
  --color-line: #FFFFFF33;
  --color-line-faint: #FFFFFF26;
  --color-glass: #FFFFFF33;
  --color-field: #0F0E31;
  --color-field-subscribe: #81818B33;
  --color-on-media: #FFFFFF;
  --color-inverse-canvas: #FFFFFF;
  --color-inverse-ink: #050422;

  /* Fonts */
  --font-sans: "Inter Tight", sans-serif;
  --font-inter-tight: "Inter Tight", sans-serif;

  /* Type styles (text-<name> sets size, line height, letter spacing and weight together) */
  --text-display-number: 590px;
  --text-display-number--line-height: 0.8;
  --text-display-number--letter-spacing: 0px;
  --text-display-number--font-weight: 700;
  --text-display-hero: 92px;
  --text-display-hero--line-height: 1.1;
  --text-display-hero--letter-spacing: 0px;
  --text-display-hero--font-weight: 600;
  --text-display-menu: 80px;
  --text-display-menu--line-height: 0.9;
  --text-display-menu--letter-spacing: 0px;
  --text-display-menu--font-weight: 600;
  --text-headline-lg: 44px;
  --text-headline-lg--line-height: 1.3;
  --text-headline-lg--letter-spacing: 0px;
  --text-headline-lg--font-weight: 600;
  --text-headline-md: 36px;
  --text-headline-md--line-height: 1.3;

/* Consultio design tokens as plain CSS custom properties, from its DESIGN.md (Flowmance).
 * Paste into any stylesheet and use them anywhere: color: var(--color-ink); border-radius: var(--radius-md); */

:root {
  /* Colors */
  --color-primary: #6F00FF; /* The filled buttons (except the white subscribe arrow), the tag, the play button, step numbers (--tomato, despite the name) */
  --color-primary-hover: #050422; /* The small .button turns navy on hover; the big animated button keeps its violet */
  --color-on-primary: #FFFFFF; /* Text on primary */
  --color-canvas: #050422; /* Page background (--black) */
  --color-surface-1: #0F0E31; /* Service cards, the testimonial card, contact inputs (--blue-light) */
  --color-ink: #FFFFFF; /* Headlines, labels, links, the first half of two-tone headlines */
  --color-ink-muted: #FFFFFF99; /* Paragraphs and the second half of two-tone headlines (p { opacity: .6 }) */
  --color-ink-subtle: #999999; /* List items and placeholder text in the subscribe field (--grey) */
  --color-line: #FFFFFF33; /* The rule on top of the steps grid, the 1px step dividers, the cart border */
  --color-line-faint: #FFFFFF26; /* A single faint 1px border */
  --color-glass: #FFFFFF33; /* The round app-store icon buttons */
  --color-field: #0F0E31; /* Contact form inputs */
  --color-field-subscribe: #81818B33; /* The footer subscribe field */
  --color-on-media: #FFFFFF;
  --color-inverse-canvas: #FFFFFF; /* The white square arrow button that submits the subscribe form */
  --color-inverse-ink: #050422; /* Text on inverse-canvas */

  /* Fonts */
  --font-inter-tight: "Inter Tight", sans-serif;

  /* Type styles: size, weight, line height, letter spacing */
  --text-display-number: 590px;
  --text-display-number-font: var(--font-inter-tight);
  --text-display-number-weight: 700;
  --text-display-number-line-height: 0.8;
  --text-display-number-tracking: 0px;
  --text-display-hero: 92px;
  --text-display-hero-font: var(--font-inter-tight);
  --text-display-hero-weight: 600;
  --text-display-hero-line-height: 1.1;
  --text-display-hero-tracking: 0px;
  --text-display-menu: 80px;
  --text-display-menu-font: var(--font-inter-tight);
  --text-display-menu-weight: 600;
  --text-display-menu-line-height: 0.9;
  --text-display-menu-tracking: 0px;
  --text-headline-lg: 44px;
  --text-headline-lg-font: var(--font-inter-tight);
  --text-headline-lg-weight: 600;
  --text-headline-lg-line-height: 1.3;
  --text-headline-lg-tracking: 0px;

Unlock the full design systemSee plansIncluded with any plan that has this template’s platformUpgrade to All AccessAlready a member? Log inOr add this template’s platform to your plan

Download DESIGN.md

More design systems like this

Business design systems, the same colors first.

Browse all 398

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 Access Upgrade to All Access

Colors

Surfaces

Ink

Action

Lines & effects

Typography

Inter Tight · display-number

Inter Tight · headline-lg

Inter Tight · lead

Inter Tight · title-lg

Inter Tight · body-lg

Inter Tight · label-lg

Spacing & shape

Spacing scale

Layout spacing

Border radius

Surfaces

Motion

Do’s and don’ts

Example prompt

Any page in the Consultio style

More design systems like this

Coachina

Noter X

Planify

Strategx

Bring any of them to your AI tool