flowmanceRepairs Design System
Repairs is a bright, trustworthy site for a local handyman or renovation business. It reads like a tidy service brochure: a white page, black semibold headlines in the rounded geometric face THICCCBOI, and one electric blue (#5174FF) that marks every action, icon and highlight. The tone is practical and approachable rather than editorial. Photography of smiling tradespeople in blue overalls picks up the brand blue, so the whole page feels like one uniform.
Four signatures make it recognisable:
- The // eyebrow. Most sections open with two blue slashes and an uppercase label in 14px bold black: // LET'S GET TO WORK, // WHAT TO EXCEPT, // BLOG INSIGHT.
- Blue pills with an arrow. Main actions are 120px-radius pills in #5174FF with white 17px semibold text and a → arrow (Get a Quote →, About us →). The phone number sits in the same pill at the top right of the nav, with a phone icon.
- Title left, button right. The process and services headers put the eyebrow and a 42px title on the left and a blue Get a Quote → pill aligned to the right on the same row; Latest news has no pill.
- Cut-out hero portrait. The hero places a cut-out worker with crossed arms on the right, over a washed-out white interior photo (the photo sits at 46% opacity under a 70% white layer).
Repairs is a light-only design.
Colors
Surfaces
#FFFFFFPage background, service and testimonial cards
#F7F7F7The grey section gray bands (services, blog), step cards, dropdown hover
#F1F1F7A faint blue-grey tint used on a few small fills (3 uses)
#5174FFFull-width blue bands: the CTA and the free-consultation form
#FFFFFFForm inputs (they sit on the blue band)
Ink
#FFFFFFText on primary
#000000Headlines, nav, body text, eyebrows
#000000Body copy
#121212The first line of two-line button labels (.button-first-line)
#000000Text on secondary
#FFFFFFText on inverse-canvas
#FFFFFFAction
#5174FFFilled pills, the nav phone pill, step numbers, play button, icons, stars, // marks
#5174FF#FFFFFFThe white Get a Quote pill on the blue CTA band
Lines & effects
#E3E6EE1px borders of service and testimonial cards (18 uses)
#DDDDDD1px dividers in the cart and footer
#E2E2E2--line-color: the 1px vertical rule in the CEO grid
#FFFFFF · 15%1px borders of inputs and dividers on the blue band
#FFFFFF · 70%Gradient layer over the hero photo
Typography
THICCCBOI · display-hero · shown in Poppins (fallback)
The quick brown fox jumpsH1 Affordable home repair services. 59px · 600 · 1.15
THICCCBOI · headline-lg · shown in Poppins (fallback)
The quick brown fox jumpsLarger section titles such as Latest news (2 uses). 54px · 600 · 1.15
THICCCBOI · title-lg · shown in Poppins (fallback)
The quick brown fox jumps.contact-text: phone and email in the contact strip, white. 30px · 600 · 1.2
THICCCBOI · body-lg · shown in Poppins (fallback)
The quick brown fox jumpsParagraphs (p), card text, roles, Learn more. 17px · 600 · 1.4
THICCCBOI · label · shown in Poppins (fallback)
The quick brown fox jumpsButton labels. 17px · 600 · 1.18
THICCCBOI · eyebrow · shown in Poppins (fallback)
The quick brown fox jumps// LET'S GET TO WORK. 14px · 700 · 1.5
Spacing & shape
| Purpose | Value |
|---|---|
| Container | max 1200px, centred |
| Section rhythm | 100px top and bottom for every .section, dropping to 60px at ≤991px |
| Breakpoints | 991px, 767px and 479px, plus min-width steps at 1280, 1440 and 1920px |
Spacing scale
| Token | Value | Preview |
|---|---|---|
hair | 7px | |
xs | 12px | |
sm | 15px | |
md | 20px | |
lg | 35px | |
xl | 50px | |
2xl | 100px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
card-gap | 25px | |
blog-gap | 31px | |
footer-top | 70px | |
gutter | 72px | |
section | 100px | |
nav-height | 100px |
Border radius
Surfaces
How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.
Motion
| Scroll-in rise | y 50px → 0 (also 30px and 80px), 500ms, on scroll into view |
| Scroll-in slide | x ±80px → 0, 500ms |
| Fade-in | opacity 0 → 1, 1000ms outQuart (also 300ms ease) |
| Image settle | scale → 1, 1000ms ease |
| Icon hover pop | scale 1 → 1.1, 100ms ease, back on mouse out |
| Arrow nudge | x 0 → 3px, 500ms outQuint |
| Underline grow | Size change, 300–400ms ease / outCubic |
| Play button | A ring scaling to 0 over 1500ms ease, repeating |
| Dropdown arrow | Rotate, 400ms swingTo |
| Button colour | background-color 200ms cubic-bezier(0.645, 0.045, 0.355, 1) |
| Nav link, dropdown, footer | Opacity or all, 300ms |
Do’s and don’ts
- Open most sections with // in #5174FF plus an uppercase eyebrow, then a headline-md title.
- Put one blue button-primary pill (#5174FF, white, 120px radius, 52px tall, →) on the right of a section header, as on the process and services sections.
- Set all text in THICCCBOI weight 600, black (#000000), including paragraphs.
- Alternate white, #F7F7F7 and #5174FF bands at 100px vertical padding.
- Use 8px radius and a 1px #E3E6EE border on white cards.
- Keep the phone number visible in the nav as a pill.
- Add a second accent colour. The green .button-2 and #F1F4FF in the CSS are unused.
- Use grey body text; it is black at weight 600.
- Use drop shadows on cards. Only the dropdown has one.
- Put small text on #5174FF: white on blue is about 4:1. Keep text on blue at 17px semibold or larger, and keep blue text (button-submit, links) at 17px+ semibold.
- Use Inter or any second family, or weights below 500 for headlines.
- Round cards beyond 8px or buttons below the full pill.
Example prompt
Any page in the Repairs 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 Repairs 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/repairs.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