BRAND & DESIGN SYSTEM · v1.0
Modulo
The design system behind a modern modular and prefab construction brand — engineered for credibility, built to toggle, and ready to rebrand.
PRECISION-BUILT HOUSING
WCAG AA / AAA
LIGHT + DARK
FRAMER-READY TOKENS
01 / IDENTITY
Brand identity
Who Modulo is, what it stands for, and how it sounds. The voice is the same whether a buyer is reading a headline or an error message.
MISSION
We build better homes off-site — engineered with precision, delivered with certainty, and made to last. Modulo exists to make high-quality housing faster to build, easier to trust, and within reach for more people.
CORE VALUES
V.01
Precision by default
Every module is engineered to the millimeter. The quality you can’t see is still quality you can feel.
V.02
Built to be trusted
Clear timelines, fixed scope, real proof. We earn confidence before we pour a foundation.
V.03
Less waste, more home
Factory building means less material lost and less time wasted — and more value in the finished home.
V.04
Designed for living
Modular is a method, not a look. We make homes people are genuinely proud to come home to.
VOICE & TONE
Confident, plain-spoken, and precise — an expert builder who respects your time. We lead with specifics and let the work speak.
● Do
Lead with specifics: “Move-in ready in 90 days.” Use active voice and name the benefit. Keep sentence case and plain verbs. Let proof do the persuading.
● Don’t
Avoid hype words like “revolutionary” or “next-gen.” Don’t use vague adjectives, jargon dumps, apologies in errors, or filler that makes buyers decode the message.
REWRITE IN PRACTICE
Instead of “Innovative next-gen building solutions,” say: Homes built in a factory, finished on your lot, in half the time.
02 / COLOR
Color tokens
A cool, engineered palette — concrete neutrals and graphite ink, with cobalt as the signature and a single signal amber for sparing emphasis. All text pairings are checked against WCAG.
PRIMARY · COBALT — brand, links, primary actions
50
100
200
300
400
500
600
700
800
SECONDARY · STEEL / GRAPHITE — structure, text, neutral buttons
50
100
200
300
400
500
600
700
900
ACCENT · AMBER — signal, badges, highlights
300
400
500
600
SEMANTIC TOKENS — mode-aware roles
TOKEN
ROLE
LIGHT
DARK
--bg-canvas
Page background
#F3F5F6
#101316
--text-primary
Headings / body
#14181B · AAA
#F3F5F6 · AAA
--brand
Links / brand text
#2A43D0 · AAA
#8B9DF2 · AAA
--accent
Signal / badges
#E0972A · large only
#EDB24E · signal
Accessibility rule of thumb: cobalt and ink carry all text and actions. Amber is decorative only — never set body text in amber on a light surface.
03 / TYPOGRAPHY
Typography matrix
One typeface, the full scale. Satoshi runs from 68px display headlines down to 12px uppercase labels. Different weights and tracking values carry the hierarchy rather than swapping faces. The result is a system that stays legible, cohesive, and fast to implement.
Ag
DISPLAY · SATOSHI
Headlines, numbers, the wordmark. Tight tracking, weights 500–700.
Ag
BODY · SATOSHI
Paragraphs, UI, anything read for more than a line. Weights 400–600.
Ag
UTILITY · SATOSHI
Eyebrows, specs, dimension labels, code. The drawing-annotation voice.
Built off-site
Display - Satoshi Regular - 68px - line-height 102%
High-density housing, reimagined
H1 - Satoshi Regular - 48px - tracking -0.025em
Six models, your finishes
H2 - Satoshi Regular - 34px - tracking -0.02em
Building envelope specs
H3 - Satoshi Medium - 26px - tracking -0.015em
Delivery timeline
H4 - Satoshi Regular - 18px - tracking -0.01em
Modules are assembled in a controlled environment, then delivered and set on your foundation - typically in a single day.
Body - Satoshi Regular - 16px - line-height 1.3
Permit-ready in 45 days. Factory-built to local code.
Small - Satoshi Regular - 14px - line-height 1.3
PROJECT PHASE
Label - Satoshi Regular - 12px - uppercase - tracking 0.06em
SHEET A-03 - ELEVATION - 1:50
Mono - Satoshi Regular - 13px - uppercase - tracking 0.04em
Get a quote
Button Label - Satoshi Medium - 15px
04 / COMPONENTS
Component states
Core UI states for a modular construction brand: visible focus, restrained hover lift, clear disabled affordances, and code-style documentation directly beside the example.
BUTTONS
Get a quote
View models
Booked
MODEL · M2 · 980 SQFT
TWO-BED · SINGLE-STORY
The Meridian
A compact two-bedroom built for fast permitting and easy living.
From $189,000
MODEL · M4 · 1,640 SQFT
THREE-BED · TWO-STORY
The Foundry
A stacked-module family home with a double-height living core.
From $312,000
.btn-primary { background: var(--brand-solid); color: #fff; } .mcard:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
MODULO · BRAND & DESIGN SYSTEM · v1.0
Built for light + dark, WCAG AA/AAA.