Design systems, extracted.
Paste any URL to create a design system from it. Open any style for colors, type, spacing, components, and a DESIGN.md or tokens.json your agent can use.
CoreBuild
CoreBuild runs on a deep black foundation punched through with safety-vest orange — a visual language lifted straight from the job site. Every section sits inside heavily rounded, pill-edged containers that soften the industrial subject matter, while bold uppercase labels and chunky sans-serif headlines keep the tone direct and confident. This is a template built for firms who pour concrete and steel but want their website to feel as considered as their architecture: dark, serious, and punctuated with high-energy orange that signals action at every turn. Photography leans into real construction sites — hard hats, blueprints, drywall, scaffolding — desaturated and overlaid with dark gradients so white and orange type always stays legible. The orange is never decorative wallpaper; it is reserved for CTAs, icon chips, and the single dramatic skyline-illustration section that gives the brand its most memorable beat. Generous corner radii, large padding, and a near-black canvas throughout make the whole experience feel like a single continuous, deeply rounded card system floating on true black.
Colors
Canvas
Pill Ink
#222222
Secondary surface & hover state. Button hover fills and small pill labels.
True Black
#000000
Page canvas. Base background behind every rounded section panel.
Divider Mist
#d8dfe0
Hairline dividers. Subtle separators on light-adjacent form elements.
Jobsite Charcoal
#161616
Lifted surface. Fills section panels, cards, and footer blocks above the black canvas.
Ink
Blueprint Gray
#d9dae2
Secondary body text. Softens long-form copy against the near-black backgrounds.
Scaffold White
#ffffff
Primary text & headline ink. Used for all large type on dark surfaces.
Accent
Safety Vest Orange
#ff4f00
Primary accent & CTA fill. Buttons, icon chips, skyline hero panel, subscribe accents.
State — utility only
Alert Amber
#fbbc04
Warning utility. Reserved for status and alert iconography, not decorative use.
Typography
The quick brown fox jumps
Primary typeface for all headlines, UI, body copy, and navigation.
Spacing & shape
Purpose
Value
Preview
Density
spaciousMax width
1240pxSection gap
15pxCard padding
45pxElement gap
24pxSpacing scale
Purpose
Value
Preview
--spacing-5
5px--spacing-10
10px--spacing-15
15px--spacing-20
20px--spacing-30
30px--spacing-45
45px--spacing-50
50px--spacing-80
80px--spacing-100
100px--spacing-150
150pxBorder radius
cards50pxpills50pxsmall20pxbuttons30pxsections50pxicon-chips16pxSurfaces
Step from canvas (level 1) to lifted (level 2) to inset depth (level 3), then invert into the dark levels for full-bleed sections. Hex codes and roles live in the Colors section above; this ladder shows the layering only.
Level 1True Black
Level 2Jobsite Charcoal
Level 3Pill Ink
Level 4Safety Vest Orange
Do's and don'ts
- Keep every major section wrapped in a heavily rounded 50px-radius panel floating on the true-black canvas.
- Reserve Safety Vest Orange exclusively for CTAs, icon chips, and the one hero skyline moment — never as a background wash across multiple sections.
- Pair bold uppercase micro-labels (e.g. 'OUR SERVICES', 'MISSION AND VISION') with large, tight-leading headlines beneath them.
- Use real, desaturated construction-site photography with a dark gradient overlay so white headline type stays legible.
- Apply the 30px pill radius consistently to every button, regardless of size or placement.
- Keep body copy in Blueprint Gray at reduced opacity against dark backgrounds to maintain hierarchy against white headlines.
- Use circular orange plus-icon chips as the hover affordance on service and project cards.
- Don't introduce a second accent hue — the palette is strictly black, white, charcoal, and safety orange.
- Don't flatten the rounded-corner system; square panels break the template's signature soft-industrial feel.
- Don't place orange text on orange backgrounds or dilute the CTA orange into secondary UI elements.
- Don't use thin or light-weight type for headlines — the brand voice depends on heavy 600-weight display type.
- Don't crop out safety gear, hard hats, or vests from photography; they are core to the brand's visual identity.
- Don't let section padding drop below the spacious ~150px vertical rhythm on desktop — cramped sections undercut the confident scale.
- Don't use default Webflow blue (#3898ec) anywhere in production; it is a leftover commerce default and must be overridden.
Example prompts
New hero section
Service card grid
Stats or values section
CTA banner
# Design System Guide
> Unlock the template to access the full design system.
## Brand voice
A short paragraph describing the brand voice, mood, and visual
principles that anchor the system. Tone, cadence, and intent.
## Colors
| Token | Hex | Role |
| ------------ | -------- | ------------------------------------- |
| canvas-1 | #xxxxxx | Page background, large surfaces |
| canvas-2 | #xxxxxx | Lifted surfaces, cards |
| canvas-3 | #xxxxxx | Inset wells, depressed states |
| ink-1 | #xxxxxx | Primary body text |
| ink-2 | #xxxxxx | Secondary text, labels |
| ink-3 | #xxxxxx | Tertiary text, hints |
| accent-1 | #xxxxxx | Primary brand accent |
| accent-2 | #xxxxxx | Secondary accent |
| state-ok | #xxxxxx | Success, confirmations |
| state-warn | #xxxxxx | Warnings |
| state-err | #xxxxxx | Errors, destructive actions |
## Typography
- **Display** — heading scale, used for hero text and section titles.
- **Body** — primary reading text, optimized for paragraphs.
- **Mono** — code, data, and tabular numerals.
```
display: 32px / 40px / 48px / 64px / 80px
body: 14px / 16px / 18px
mono: 12px / 14px
```
## Spacing & shape
Base unit: 4px. Scale: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128.
Radii: sm (4px), md (8px), lg (12px), xl (20px), full (9999px).
## Surfaces
Layered elevation from canvas → lifted → inset. Surfaces invert in
dark sections for full-bleed contrast.
## Do's and don'ts
- Do use accent-1 sparingly for primary CTAs only.
- Do maintain at least 4.5:1 contrast on body text.
- Don't mix display and body in the same line.
- Don't use state colors for branding.
## Agent prompt guide
Prompts for AI design tools that respect this system.
Includes example prompts for sections, components, and layouts.
# ...
Unlock the full style guide