flowmanceTotal Design System
Total is a bold, confident architecture and construction template. It feels like a contractor's site with good taste: bright white pages, a loud lime-green hero band, heavy geometric Poppins headlines and a warm book serif (Butler) for everything you read. Layout is boxed and orderly, grey panels hold screenshots and photos, and every action is an outlined pill (lime on white, white on the green band).
The published preview opens on an intro page with a features row and grids of the template's layouts, each in a grey panel with a white pill label. The same system runs through the layouts, which also come in dark variants on #212127.
Four signatures make it recognisable:
- The lime hero band with a ruler edge. A full-bleed #42DC2A band carries the white hero headline; below the boxed area it ends in a strip of measuring-tape ticks, like a ruler. Inner pages repeat it as green page headers.
- Poppins plus Butler. Headlines and UI labels are geometric Poppins 600–700; body text, labels on panels, the notice bar and menu links are the Butler serif. The contrast is the template's voice.
- Green outline pills. Buttons are transparent with a 2px lime border at 70% and lime text, 25px radius; on hover they fill solid lime with white text.
- Section titles between green rules. Big 45px titles sit between two thin lime lines (—— Shop Layouts ——).
Colors
Surfaces
#FFFFFFPage background, the boxed nav, white pill labels
#F1F1F7The --ghost-white variable: layout panels, inputs
#F3F3F7Dropdown and mega-menu link hover
#F1F1F7#212127Notice bar, .hero-black, the dark page variants
Ink
#42DC2AText on primary
#FFFFFFText on accent
#111111Headlines, nav links, the Total wordmark
#313137Butler labels on panels (Coming Soon, Pricing)
#616167Paragraphs (p in Butler 16px weight 300)
#717177Dropdown links
#919197Small text buttons, list items (#919196)
#FFFFFFText on inverse-canvas
#CACACANotice bar text
#FFFFFFText and 2px button borders on the green band
#FFFFFF · 53%Lines on media
Action
#FFFFFFButtons have no fill: transparent on white with lime text
#42DC2AButtons fill lime on hover
#42DC2AThe --lime-green variable: the hero band, active nav, rules beside titles, button hover fill, back-to-top square, blockquote panel
#42DC2A · 70%2px border on outline buttons
Lines & effects
#515157Input placeholders, Butler 15px weight 600
Typography
Poppins · display-hero
The quick brown fox jumpsThe most complete architecture Webflow template. 60px · 600 · 1.02
Poppins · headline-lg
The quick brown fox jumpsSection titles: Home Layouts, Inner Layouts, Project Layouts, Shop Layouts. 45px · 600 · 1.11
Butler · quote · shown in Playfair Display (fallback)
The quick brown fox jumpsBlockquote on a lime panel. 28px · 300 · 1.14
Butler · body-lead · shown in Playfair Display (fallback)
The quick brown fox jumpsHero lead Also for Interior Design, Construction and Business site. 22px · 300 · 1.36
Poppins · title-lg
The quick brown fox jumpsFeature titles 100+ Components, Dedicated Support. 21px · 600 · 1.14
Butler · label-serif · shown in Playfair Display (fallback)
The quick brown fox jumpsWhite pill labels on layout panels, the Introducing Total badge. 17px · 600 · 1.76
Spacing & shape
| Purpose | Value |
|---|---|
| Container | max 1200px, centred |
| Section rhythm | 190px top padding (.section, side padding 5% of the viewport), about 140px at the bottom of the long intro section |
| Breakpoints | 991px, 767px and 479px, plus a few min-width: 768px rules |
Spacing scale
| Token | Value | Preview |
|---|---|---|
hair | 2px | |
xs | 7px | |
sm | 10px | |
md | 12px | |
lg | 15px | |
xl | 25px | |
2xl | 30px | |
3xl | 100px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
grid-gap | 15px | |
nav | 95px | |
section-bottom | 140px | |
section | 190px |
Border radius
Surfaces
How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.
Motion
| Button hover | transition: all .2s: transparent → #42DC2A fill, lime → white text |
| Dropdown open | Lime triangle rotates over 400ms ease; menu fades in over 300ms ease and moves y to 0 over 300–400ms |
| Nav item underline | 2px border change over 200ms outSine |
| Image hover | Scale 1 → 1.1 over 400ms ease, back to 1 over 300ms ease |
| Text colour hover | 300ms ease |
| Page load | Opacity 0 → 1 over 1000ms outQuart |
| Scroll up / down | Scroll-direction pairs toggle elements such as the back-to-top square |
Do’s and don’ts
- Open pages with the full-bleed #42DC2A band, white Poppins 60px weight 600 headline and the ruler-tick strip at its foot.
- Pair Poppins 600–700 for headlines and nav with Butler 300 for paragraphs in #616167.
- Use the outline pill: 2px #42DC2A at 70%, lime text, 25px radius, filling lime with white text on hover in 200ms.
- Centre section titles at 45px between two thin lime rules, with 100px below.
- Put grouped previews on #F1F1F7 square panels with a white Butler pill label.
- Keep the nav boxed to 1200px under a #212127 notice bar.
- Add shadows, gradients or a second accent; the unused red, blue and teal variables stay out.
- Round panels, images or inputs; only pills (25px) and circles are rounded.
- Set lime text below 14px weight 600 or on long copy; lime on white is about 1.8:1, so keep it to button labels, the active nav link and rules.
- Set paragraphs in Poppins or headlines in Butler.
- Use thin Poppins weights for headlines; they are 600.
- Use uppercase or letter spacing.
- Put small white text on the lime band (white on #42DC2A is also 1.8:1; keep it to the 22px+ lead and 60px headline), or #717177 and #919197 text under 15px on #F1F1F7.
Example prompt
Any page in the Total style
More design systems like this
Construction 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 Total 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/total.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