Cōnstruc Design System

Get DESIGN.md Download View template Works with

Cōnstruc website template preview detail 2

Cōnstruc website template preview detail 3

Cōnstruc is a clean, bright construction and architecture site: white pages, warm ivory bands, black Inter Tight text and one safety-yellow (#FFDD00) used for buttons, number dots and a big circle behind the hero building. It feels like a modern architecture brochure: lots of white space, crisp building photography and calm, rounded small parts.

Four signatures make it recognisable:

Half-outline wordmark hero. Vision in sits above a 172.8px Hauora headline where BUILD is solid black and ING is a 1px black outline (.line-text). A cut-out tower photo with a yellow circle behind it fills the right edge.
Yellow dots and buttons. The main calls to action are yellow 5px-radius buttons with black uppercase labels and an arrow (GET A QUOTE →, BOOK A FREE CALL →); form submits use the square yellow block button. Accordion rows are numbered with 30px yellow circles (01–04).
Two-tone section titles. A 35px title starts in black and ends in grey: A comprehensive suite of solutions.
Stacked project photos. Full-container-width building photos stack as you scroll, each with a white pill tag top-right (Project Management) and an uppercase white Hauora title on a soft bottom shade (COASTAL VILLA).

Cōnstruc is a light-only design.

Colors

Surfaces

canvas#FFFFFF

Page background

surface-1#FFFDF0

Ivory bands (.section.gray), feature cards, testimonial cards (--ivory)

surface-2#FFFBE5

Slightly warmer cream blocks (--cornsilk)

inverse-canvas#FFDD00

Full-screen yellow menu

Ink

on-primary#000000

Text on primary

on-secondary#FFDD00

Text on secondary

ink#000000

Headlines, paragraphs, accordion titles

ink-muted#000000

Body copy is full black too (the same as ink)

ink-subtle#757575

Footer column titles

ink-faint#949494

Grey second half of two-tone titles, 35px only

ink-footer#26272B

Footer links and their hover

ink-footer-hover#838383

Footer links and their hover

ink-tag#151414 · 75%

Text in white project tags

on-media#FFFFFF

Project titles over photos

inverse-ink#000000

Text on inverse-canvas

Action

primary#FFDD00

Buttons, accordion number dots, hero circle, icon fills (--yellow)

primary-hover#FFDD00

secondary#000000

34px black count badges with yellow figures in the menu

link#A1A1A1

Default a colour (--dark-grey)

Lines & effects

line#000000

1px accordion rules, 2px field borders, the 1px hero outline

media-shade#151414 · 20%

Bottom of the photo gradient (transparent 71% → 20%)

tag#FFFFFF

Project tag pill

Typography

Hauora · display-hero · shown in Inter (fallback)

The quick brown fox jumps

BUILDING, with ING outlined. 172.8px · 700 · 1.0

Hauora · headline-project · shown in Inter (fallback)

The quick brown fox jumps

Project titles URBAN OASIS, COASTAL VILLA. 40px · 600 · 1.0

Inter Tight · title-lg

The quick brown fox jumps

Blog titles. 26px · 600 · 1.3

Inter Tight · body-lg

The quick brown fox jumps

Hero lead. 21px · 500 · 1.4

Inter Tight · label

The quick brown fox jumps

Testimonial names. 17px · 600 · 1.47

Hauora · eyebrow · shown in Inter (fallback)

The quick brown fox jumps

Footer column titles. 15px · 700 · 1.33

Spacing & shape

Purpose	Value
Container	.container max 1200px, centred
Section rhythm	.section 150px top and bottom (80px at ≤991px, 50px at ≤767px); the projects section 150px / 50px; the CTA 100px top, 0 bottom; the footer 91px / 30px (80px top at ≤479px) with a 120px logo centred on its top edge (offset −71px)
Breakpoints	991px, 767px and 479px (plus 768px+ and 1440px+ steps)

Spacing scale

Token	Value	Preview
`xs`	7px
`sm`	13px
`md`	15px
`lg`	25px
`xl`	30px
`2xl`	40px
`3xl`	50px
`4xl`	70px
`5xl`	100px

Layout spacing

Token	Value	Preview
`column-gap`	25px
`footer-top`	91px
`section-cta`	100px
`section`	150px

Border radius

button5px

image6px

sm7px

card10px

field30px

tag40px

full9999px

Surfaces

How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.

Level 1canvas

Level 2surface-1

Level 3surface-2

Motion

Heading rise	Text moves y 100–200% → 0% with a skew 7deg → 0deg over 500ms; some lines over 1100ms outQuint
Scroll-in fade	opacity 0 → 1 over 1000ms outQuart
Label roll on hover	y 0% → −100% over 300ms ease or 400ms inOutCubic, back over 300ms
Accordion	+ rotates over 200ms outSine; panel height changes over 300ms ease (click to open, second click to close)
Press feedback	Scale to 0.8 over 300ms outQuad
Mouse-move parallax	Images shift ±6px over 500ms
Background colour	300ms ease on hover; button background 200ms cubic-bezier(.645, .045, .355, 1)
Footer links	transition: all .3s

Do’s and don’ts

Use #FFDD00 for every primary button (5px radius, padding 14px 23px, black 14px weight-700 uppercase label with →).
Number list rows with 30px #FFDD00 circles and separate them with 1px #000000 rules.
Alternate white #FFFFFF and ivory #FFFDF0 sections, with 150px vertical padding.
Split section titles into black and #949494 halves at 35px weight 600.
Put white 40px-radius tags (padding 7px 18px) in the top-right corner of project photos.
Keep body copy black Inter Tight 18px weight 500, line height 1.3.
Use #949494 (ink-faint, 3:1 on white) below 24px; it is only for the grey half of large titles.
Put #757575 (ink-subtle) meta text on cream #FFFBE5 (4.4:1); keep it for 15px+ footer titles on white.
Set text in yellow, or add a second accent colour.
Add shadows or dark section bands.
Round project photos; only cards (7–10px), a few framed images (6px), tags, fields and buttons are rounded.
Use Oswald or Hubotsans; they are loaded or declared but not part of the design.
Invent a hover colour for the yellow button: no colour change is measured for it.

Example prompt

Any page in the Cōnstruc style

Prompt

Build your page in the Cōnstruc style. Use a white #FFFFFF page with ivory #FFFDF0 bands, black text and one accent, #FFDD00, for filled shapes only. Set text in Inter Tight: paragraphs 18px weight 500 line height 1.3, section titles 35px weight 600 with the last words in #949494. Display words use Hauora 700; for a hero, make the first half solid black and the end a 1px black outline at 172.8px. Primary buttons are #FFDD00 with black 14px weight-700 uppercase text and a →, 5px radius, padding 14px 23px. Numbered rows get a 30px yellow circle and a 1px black rule. Cards are ivory with a 7–10px radius and about 40px padding. Project photos are full width, square-cornered, with a white 40px-radius tag top-right and an uppercase white Hauora 40px title. Use a 1200px container and 150px section padding. No shadows. Reveal headings with a 500ms rise and a 7° skew settling to 0.

# Cōnstruc Design System

> Measured from the Cōnstruc template. Drop it into
> Claude, ChatGPT, Gemini, Cursor or v0.

## Overview

Cōnstruc is a clean, bright construction and
architecture site: white pages, warm ivory bands, black
Inter Tight text and one safety-yellow (#FFDD00) used
for buttons, number dots and a big circle behind the
hero building. It feels like a modern architecture

## Colors

| Token        | Hex         | Role                     |
| ------------ | ----------- | ------------------------ |
| canvas       | #FFFFFF     | Page background          |
| surface-1    | #FFFDF0     | Ivory bands (.section.g… |
| surface-2    | #FFFBE5     | Slightly warmer cream b… |
| inverse-can… | #FFDD00     | Full-screen yellow menu  |
| on-primary   | #000000     | Text on primary          |
| on-secondary | #FFDD00     | Text on secondary        |
| ink          | #000000     | Headlines, paragraphs, … |
| ink-muted    | #000000     | Body copy is full black… |
| ink-subtle   | #757575     | Footer column titles     |
| ink-faint    | #949494     | Grey second half of two… |
| ink-footer   | #26272B     | Footer links and their … |
| ink-footer-… | #838383     | Footer links and their … |
| ink-tag      | #151414 75% | Text in white project t… |
| on-media     | #FFFFFF     | Project titles over pho… |

## Typography

- display-hero: Hauora 172.8px / 700
- display-menu: Inter Tight 96px / 600
- display-metric: Inter Tight 76px / 500
- headline-project: Hauora 40px / 600

{
  "$description": "Cōnstruc design tokens from its DESIGN.md (Flowmance), in the W3C Design Tokens format. Values measured from the template.",
  "color": {
    "primary": {
      "$type": "color",
      "$value": "#FFDD00",
      "$description": "Buttons, accordion number dots, hero circle, icon fills (--yellow)"
    },
    "primary-hover": {
      "$type": "color",
      "$value": "#FFDD00"
    },
    "on-primary": {
      "$type": "color",
      "$value": "#000000",
      "$description": "Text on primary"
    },
    "secondary": {
      "$type": "color",
      "$value": "#000000",
      "$description": "34px black count badges with yellow figures in the menu"
    },
    "on-secondary": {
      "$type": "color",
      "$value": "#FFDD00",
      "$description": "Text on secondary"
    },
    "canvas": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Page background"
    },
    "surface-1": {
      "$type": "color",
      "$value": "#FFFDF0",
      "$description": "Ivory bands (.section.gray), feature cards, testimonial cards (--ivory)"
    },
    "surface-2": {
      "$type": "color",
      "$value": "#FFFBE5",
      "$description": "Slightly warmer cream blocks (--cornsilk)"
    },
    "ink": {
      "$type": "color",
      "$value": "#000000",
      "$description": "Headlines, paragraphs, accordion titles"

/* Cōnstruc theme for Tailwind CSS v4, from its DESIGN.md (Flowmance).
 * Use it after Tailwind:  @import "tailwindcss";  @import "./theme.css";
 * Then use the utilities: bg-canvas, text-ink, text-title-lg, rounded-sm, p-lg */

@theme {
  /* Colors */
  --color-primary: #FFDD00;
  --color-primary-hover: #FFDD00;
  --color-on-primary: #000000;
  --color-secondary: #000000;
  --color-on-secondary: #FFDD00;
  --color-canvas: #FFFFFF;
  --color-surface-1: #FFFDF0;
  --color-surface-2: #FFFBE5;
  --color-ink: #000000;
  --color-ink-muted: #000000;
  --color-ink-subtle: #757575;
  --color-ink-faint: #949494;
  --color-ink-footer: #26272B;
  --color-ink-footer-hover: #838383;
  --color-ink-tag: #151414BF;
  --color-link: #A1A1A1;
  --color-line: #000000;
  --color-on-media: #FFFFFF;
  --color-media-shade: #15141433;
  --color-tag: #FFFFFF;
  --color-inverse-canvas: #FFDD00;
  --color-inverse-ink: #000000;

  /* Fonts */
  --font-sans: "Inter Tight", sans-serif;
  --font-inter-tight: "Inter Tight", sans-serif;
  --font-hauora: "Hauora", "Inter", sans-serif;

  /* Type styles (text-<name> sets size, line height, letter spacing and weight together) */
  --text-display-hero: 172.8px;
  --text-display-hero--line-height: 1.0;
  --text-display-hero--letter-spacing: 0px;
  --text-display-hero--font-weight: 700;
  --text-display-menu: 96px;
  --text-display-menu--line-height: 0.9;
  --text-display-menu--letter-spacing: 0px;
  --text-display-menu--font-weight: 600;
  --text-display-metric: 76px;
  --text-display-metric--line-height: 1.0;
  --text-display-metric--letter-spacing: 0px;

/* Cōnstruc design tokens as plain CSS custom properties, from its DESIGN.md (Flowmance).
 * Paste into any stylesheet and use them anywhere: color: var(--color-ink); border-radius: var(--radius-md); */

:root {
  /* Colors */
  --color-primary: #FFDD00; /* Buttons, accordion number dots, hero circle, icon fills (--yellow) */
  --color-primary-hover: #FFDD00;
  --color-on-primary: #000000; /* Text on primary */
  --color-secondary: #000000; /* 34px black count badges with yellow figures in the menu */
  --color-on-secondary: #FFDD00; /* Text on secondary */
  --color-canvas: #FFFFFF; /* Page background */
  --color-surface-1: #FFFDF0; /* Ivory bands (.section.gray), feature cards, testimonial cards (--ivory) */
  --color-surface-2: #FFFBE5; /* Slightly warmer cream blocks (--cornsilk) */
  --color-ink: #000000; /* Headlines, paragraphs, accordion titles */
  --color-ink-muted: #000000; /* Body copy is full black too (the same as ink) */
  --color-ink-subtle: #757575; /* Footer column titles */
  --color-ink-faint: #949494; /* Grey second half of two-tone titles, 35px only */
  --color-ink-footer: #26272B; /* Footer links and their hover */
  --color-ink-footer-hover: #838383; /* Footer links and their hover */
  --color-ink-tag: #151414BF; /* Text in white project tags */
  --color-link: #A1A1A1; /* Default a colour (--dark-grey) */
  --color-line: #000000; /* 1px accordion rules, 2px field borders, the 1px hero outline */
  --color-on-media: #FFFFFF; /* Project titles over photos */
  --color-media-shade: #15141433; /* Bottom of the photo gradient (transparent 71% → 20%) */
  --color-tag: #FFFFFF; /* Project tag pill */
  --color-inverse-canvas: #FFDD00; /* Full-screen yellow menu */
  --color-inverse-ink: #000000; /* Text on inverse-canvas */

  /* Fonts */
  --font-inter-tight: "Inter Tight", sans-serif;
  --font-hauora: "Hauora", "Inter", sans-serif;

  /* Type styles: size, weight, line height, letter spacing */
  --text-display-hero: 172.8px;
  --text-display-hero-font: var(--font-hauora);
  --text-display-hero-weight: 700;
  --text-display-hero-line-height: 1.0;
  --text-display-hero-tracking: 0px;
  --text-display-menu: 96px;
  --text-display-menu-font: var(--font-inter-tight);
  --text-display-menu-weight: 600;
  --text-display-menu-line-height: 0.9;
  --text-display-menu-tracking: 0px;
  --text-display-metric: 76px;
  --text-display-metric-font: var(--font-inter-tight);
  --text-display-metric-weight: 500;

Unlock the full design systemSee plansIncluded with any plan that has this template’s platformUpgrade to All AccessAlready a member? Log inOr add this template’s platform to your plan

Download DESIGN.md

More design systems like this

Construction design systems, the same colors first.

Browse all 398

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 Access Upgrade to All Access

Colors

Surfaces

Ink

Action

Lines & effects

Typography

Hauora · display-hero · shown in Inter (fallback)

Hauora · headline-project · shown in Inter (fallback)

Inter Tight · title-lg

Inter Tight · body-lg

Inter Tight · label

Hauora · eyebrow · shown in Inter (fallback)

Spacing & shape

Spacing scale

Layout spacing

Border radius

Surfaces

Motion

Do’s and don’ts

Example prompt

Any page in the Cōnstruc style

More design systems like this

Build X

Tower

Zork

LunaArc

Bring any of them to your AI tool