flowmanceProFixers Design System
ProFixers is a warm, practical site for a handyman and renovation business. A cream-to-white hero, near-black Inter Tight headlines and one safety orange (#FF6C20) give it a trustworthy trade feel, and the photography of real tradespeople at work does the selling. Almost everything is square-cornered and plain, so the orange buttons and the booking form read as the clear next step.
Four signatures make it recognisable:
- The booking form in the hero. Instead of a lead paragraph, the hero holds a white form card with a 3px orange top border and a soft halo shadow: Repairs done on your preferred schedule, fill the form, four square fields and an orange Make Appointment bar.
- The cut-out handyman on a peach disc. A tradesman in overalls and a tool belt, arms crossed, stands in front of a circle that fades from peach (#FFC0A0) to transparent, with an orange hand-drawn arrow pointing at the form and a small orange dot.
- Square orange buttons. Buttons and slider arrows are flat #FF6C20 rectangles with no radius, unlike the round avatars and pill tags.
- Pink icon tiles and photo service cards. Features use 80px pale-pink (#FFEBEB) square tiles with orange line icons; services are full-height photo cards with white text over a dark bottom gradient.
Colors
Surfaces
#FFFFFFPage background, the form card, testimonial cards (--white)
#F5F5F7Grey bands: services and testimonials
#FEF9ECThe hero wash, a vertical gradient from #FEF9EC to #FFFFFF (the --alice-blue variable holds this cream)
#F1F1F1Dropdown link hover
#333333Typed field text; placeholders are #252525
#000000Footer band; links at 70% white, full white on hover
Ink
#FFFFFFText on primary
#121212Headlines, nav links, labels (--black)
#121212 · 75%Paragraphs (p has opacity: .75)
#121212 · 60%Company names and roles in testimonials
#FFFFFFService card titles and text over photos
#FFFFFF · 70%Muted text on media
#FFFFFFText on inverse-canvas
#FFFFFF · 70%Action
#FF6C20Buttons, slider arrows, the active nav link, the form's top border, icons, the CTA accent word
#121212Hover of the solid submit button, at 80% opacity
#FFEBEBFeature icon tiles
#FFC0A0The hero disc, as a gradient to transparent at 58%
Lines & effects
#DDDDDD1px borders on form fields
#1212122px outlines on blog tags
Typography
Inter Tight · display-xl
The quick brown fox jumpsThe footer call to action (.cta-title, 5vw, white with an orange .color-text span) and the large year figure above the about split. 72px · 600 · 1.2
Inter Tight · headline-lg
The quick brown fox jumpsSection h2: Building our reputation since 2001., Our working process. 45px · 600 · 1.3
Inter Tight · title-xl
The quick brown fox jumpsBlog card titles. 28px · 600 · 1.2
Inter Tight · body-lg
The quick brown fox jumpsParagraphs at 75%. 18px · 500 · 1.4
Inter Tight · label-link
The quick brown fox jumpsThe phone link, testimonial names, the submit label. 17px · 600 · 1.4
Inter Tight · footer-title
The quick brown fox jumpsFooter column titles. 18px · 500 · 1.11
Spacing & shape
| Purpose | Value |
|---|---|
| Container | max 1200px, centred |
| Section rhythm | 150px top and bottom for every section, white and #F5F5F7 bands alternating |
| Breakpoints | 991px, 767px and 479px, plus a 768px+ rule |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xs | 8px | |
sm | 15px | |
md | 20px | |
lg | 30px | |
xl | 50px | |
2xl | 100px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
hero-bottom | 20px | |
form | 27px | |
footer-bottom | 40px | |
nav-height | 90px | |
footer-top | 100px | |
hero-top | 140px | |
section | 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 over 1000ms outQuart (1250ms on some) |
| Pop-in | scale 0 → 1 over 600ms outExpo; out over 400ms outExpo |
| Link and line width | Size over 300ms ease and 500ms, used on the short link dash |
| Arrow nudge | x 0 → 6px over 500ms outQuint; a diagonal x 3px, y −3px over 300ms ease |
| Slide fill | x 100% → 0% over 300ms ease |
| Mouse-move drift | y ±7% over 500ms; a y −100px parallax on two elements |
| CSS transitions | Buttons, nav, dropdown and footer links all .3s; service cards transform .3s to scale(.96); testimonial cards transform .3s, color .3s to scale(.97) |
Do’s and don’ts
- Keep the canvas white with #121212 headlines and #FF6C20 as the only strong colour.
- Keep buttons, arrows, fields, cards and images square (0px radius); round only avatars, tags and the hero disc.
- Put a booking form with a 3px orange top border and a 0 0 4px 4px #1018280F halo near the top of the page.
- Use 80px #FFEBEB tiles with orange line icons for features.
- Use full-height photo cards with a bottom gradient to black for services.
- Alternate white and #F5F5F7 bands with 150px vertical padding.
- Pair each orange button with a phone number link.
- Put small text on #FF6C20: white on it is about 2.8:1, so keep button labels at 16.8px weight 600 or larger and short.
- Round the buttons or cards; the square shape is part of the look.
- Add another accent colour; keep tints in the orange family (#FEF9EC, #FFC0A0, #FFEBEB).
- Use grey hex values for paragraphs; use #121212 at 75%.
- Use uppercase or letter spacing outside the 13px tags.
- Use heavy drop shadows; only the soft 6% halos are allowed.
- Use orange text below 17px weight 600. The orange active nav link is about 2.8:1 on white, so orange text stays short, semibold and never carries body copy.
Example prompt
Any page in the ProFixers 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 ProFixers 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/profixers.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