flowmanceBuilderX Design System
BuilderX is a bold, dark construction-company site. It feels like a hard-hat brand: a black page, white text, and safety orange #F94D00 used in big confident doses: pill buttons, 80–100px circles, a full-width quote band and a cut-out worker in a hi-vis vest. Large, sunny site photography (cranes, concrete, modern towers) runs edge to edge.
Four signatures make it recognisable:
- Glass slide panel on a full-screen photo. The hero is a photo slider. Each slide has a black 80% panel with a 5px backdrop blur, a 3px orange rule on its left edge, a 38px headline, a short line and an orange pill.
- Orange circles. 80px slider arrows, 100px icon circles that overlap the bottom-right corner of service photos, 34px menu indexes.
- Outlined tag pills. Most sections open with a small white-outlined pill (Services, Mission and Value, Our Work, Featured on, From Blog), 2px white border, 30px radius, then a centred title.
- Orange bands. Full-width #F94D00 sections break the black: the values band with the worker, and the quote band.
BuilderX is a dark-only design.
Colors
Surfaces
#000000Page background
#131313The blog section band
Ink
#FFFFFFText on primary
#FFFFFFTitles and body text (footer titles are #757575)
#FFFFFFTitles and body text (footer titles are #757575)
#A1A1A1Blog dates
#757575Footer column titles
#FFFFFF#000000Black text on orange: the form button and menu indexes
#FFFFFFAction
#F94D00Pill buttons, slider arrows, icon circles
#FD7133Pill button hover
#838383Footer link hover
#F94D00The values panel and the quote band
Lines & effects
#FFFFFF2px tag outlines, 1px input borders
#000000 · 80%Hero slide panel
#000000 · 40%Overlays on background photos
#000000 · 60%With scrim: Overlays on background photos
Typography
Hauora · display-lg · shown in Inter (fallback)
The quick brown fox jumpsRecent Project, Latest Insight. 60px · 600 · 1
Inter Tight · headline-slide
The quick brown fox jumpsHero slide titles (Home renewal and revamping.). 38px · 500 · 1.15
Hauora · title-project · shown in Inter (fallback)
The quick brown fox jumpsProject names on photos (MODERN INDUSTRIAL); base class is 40px. 29px · 600 · 1
Inter Tight · body
The quick brown fox jumpsParagraphs, phone numbers. 18px · 500 · 1.3
Inter Tight · label-button
The quick brown fox jumpsPill buttons. 18px · 600 · 1.11
Inter Tight · eyebrow
The quick brown fox jumpsOutlined tag pills, blog dates. 16px · 500 · 1.1
Spacing & shape
| Purpose | Value |
|---|---|
| Container | max 1200px, centred, 5% side padding (72px at 1440) |
| Section rhythm | 150px top and bottom; the quote band 110px (70px at ≤991, 40px with 3% sides at ≤479); the projects intro 90px (50px at ≤479); .section is 80px at ≤991 and 50px at ≤767 |
| Breakpoints | 991px, 767px, 479px |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xs | 10px | |
sm | 16px | |
md | 35px | |
lg | 50px | |
xl | 100px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
gutter | 72px | |
section-short | 90px | |
section-band | 110px | |
nav-height | 110px | |
section | 150px |
Border radius
Surfaces
How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.
Motion
| Headline reveal | Text in a mask moves y 200% → 0% with skewY 7° → 0° over 500ms; some reveals use y → 0% over 1100ms outQuint |
| Fade in | opacity 0 → 1, 1000ms outQuart |
| Button label swap | Label moves y 0 → −100% while the arrow moves in, 300ms ease |
| Menu link roll | y 0 → −100%, 400ms inOutCubic; back in 300ms |
| Size changes | Width and height 300ms ease (menu lines, bars) |
| Small nudges | ±6px on hover, 500ms; icons rotate in 200ms outSine |
| Hover colours | all 0.3s on buttons and footer links; slider arrows all 0.2s |
Do’s and don’ts
- Keep the page black #000000 with white text everywhere, including paragraphs.
- Use #F94D00 for pills, circles and whole bands, and #FD7133 for the pill hover.
- Open most sections with a white-outlined tag pill (2px, 30px radius) above a centred title.
- Use full-bleed construction photos with 40–60% black scrims where text sits on them.
- Overlap 100px orange icon circles onto the corner of service photos.
- Use Hauora only for short display titles, project names and footer titles.
- Put white text under 18px on orange; it is only 3.4:1. Keep white-on-orange labels at 18px 600 or larger, and use black for small text on orange.
- Add a second accent colour or gradients on UI elements (gradients are only photo fades).
- Use #757575 for anything but small uppercase footer titles.
- Add box shadows or borders to cards.
- Round project tiles or hero photos; only service photos (14px) and blog covers (6px) are rounded.
- Use Oswald or Hubot Sans; they are loaded or declared but unused.
Example prompt
Any page in the BuilderX 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 BuilderX 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/builderx.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