Audience: designers and engineers building GoBuild UI. 🟢 This is the living
port of the brand system into the wiki. It pairs with two files in the repo that
remain the canonical sources — keep them versioned together:
docs/GOBUILD_BRAND.md — the full brand & style guide (prose + recipes).docs/gobuild-theme.css — the drop-in theme (CSS custom properties + base .gb-* classes).Use this page as a copy-paste reference. When in doubt, the two files above win.
Construction management with a human hand — built by people who've run Jobs.
Personality: builder-grade, confident, plain-spoken, premium-but-practical.
Editorial and bold, never corporate or fussy. Think blueprint + jobsite, not
SaaS pastel. The AI assistant is named "Keystone" — a sharp assistant, not
autopilot.
House terms: we say Job (a project of work for a Client) and Client
(the customer an org sells to). Use them consistently in UI copy.
GoBuild uses two related palettes. Pick the right one for what you're building.
| Surface | Where | Background | Body font | Accent |
|---|---|---|---|---|
| Product / App UI | the hub, the CRM, dashboards, Client portals | cool slate-50 #f8fafc |
Space Grotesk | orange-600 #ea580c |
| Marketing | gobuild.ca site | warm paper #f6f2ea |
Inter | flame #f5470c |
Building anything inside the app (including the CRM)? Use the Product / App UI
palette. Headings (Archivo), numbers (JetBrains Mono), and the logo are shared
across both surfaces.
Wordmark: "GoBuild" set in Archivo, weight 900, tight tracking
(-0.035em). Use the .gb-display class. One word, capital G and B.
App mark: a hexagon (Lucide hexagon, stroke 2.6) in a slate-900
rounded square with the icon in orange-400 #fb923c. This is the mark the
wiki's own logo now uses — see docs/wiki/_assets/gobuild-mark.svg (a
#0f172a rounded rect with a #fb923c hexagon stroke).
<span class="inline-flex w-8 h-8 rounded-lg bg-slate-900 text-orange-400 items-center justify-center">
<i data-lucide="hexagon" style="width:18px;height:18px;stroke-width:2.6"></i>
</span>
<span class="gb-display text-slate-900 text-xl">GoBuild</span>
Or with the theme classes: <span class="gb-mark">…</span> renders the
slate-900 rounded square with the orange-400 icon color built in.
Marketing mark: a solid flame #f5470c rounded square (.brand-dot) +
the wordmark. Use only on the marketing site.
Clear space ≥ the height of the mark on all sides. Never stretch, recolor
the wordmark, or add effects. On dark, the wordmark goes paper/white.
| Token | Hex | Use |
|---|---|---|
| Ink | #111114 |
brand black; dark sections; text on light |
| Paper | #f6f2ea |
marketing background (warm) |
| Paper-2 | #efe9dd |
marketing alt surface |
| Flame | #f5470c |
brand accent — logo, marketing CTAs |
| Flame-2 | #ff7a3c |
lighter flame; gradients (135deg, flame-2 → flame) |
| Blueprint Blue | #15598c |
secondary / steel accent |
| Tactical Cyan | #22d3ee |
field-app accent, "active" in field UI |
| Token | Hex | Tailwind | Use |
|---|---|---|---|
| App bg | #f8fafc |
slate-50 |
page background |
| Surface | #ffffff |
white |
cards, panels, modals |
| Text | #0f172a |
slate-900 |
primary text, dark UI (active nav) |
| Text muted | #64748b |
slate-500 |
secondary text |
| Text faint | #94a3b8 |
slate-400 |
labels, icons-at-rest |
| Border | #e2e8f0 |
slate-200 |
inputs, dividers |
| Ring | rgba(15,23,42,.05–.10) |
ring-slate-900/5 |
card hairlines |
| Token | Hex | Tailwind | Use |
|---|---|---|---|
| Accent | #ea580c |
orange-600 |
primary buttons, links, active |
| Accent hover | #c2410c |
orange-700 |
hover / pressed |
| Accent bright | #f97316 |
orange-500 |
focus ring, highlights |
| Accent icon | #fb923c |
orange-400 |
icons on dark (logo, active nav icon) |
| Accent tint | #fff7ed |
orange-50 |
tinted chips / badges |
| Accent tint text | #c2410c |
orange-700 |
text on the tint |
Why two oranges?
flame #f5470cis the brand color (logo, marketing).
orange-600 #ea580cis the product interactive accent (slightly warmer, reads
better as UI on slate). In the app, use orange-600 for actions and keep
flame for the logo only. They're visually compatible.
Reserved for anything AI-generated. Gradient sky-400 → indigo-500 → purple-600:
linear-gradient(135deg,#38bdf8,#6366f1,#9333ea). Focus/hover violet #a78bfa.
Avatars use amber-500 → orange-600 (#f59e0b → #ea580c).
| Meaning | Solid | Tint bg | Tint text |
|---|---|---|---|
| Success | emerald-600 #059669 |
emerald-50 #ecfdf5 |
emerald-700 #047857 |
| Danger | rose-600 #e11d48 |
rose-50 #fff1f2 |
rose-700 #be123c |
| Warning | amber-600 #d97706 |
amber-50 #fffbeb |
amber-700 #b45309 |
| Info | sky-600 #0284c7 |
sky-50 #f0f9ff |
sky-700 #0369a1 |
Four families (Google Fonts). Load them once:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
Note: the
<link>above loads Archivo, Space Grotesk, and JetBrains Mono.
Inter (marketing body) is loaded separately on the marketing site.
| Role | Family | Weights | Notes |
|---|---|---|---|
| Headings / display | Archivo | 800 (h2–h4), 900 (h1, display) | heavy + tight tracking; the brand's signature |
| App UI / body | Space Grotesk | 400/500/600/700 | the app + CRM body font |
| Marketing body | Inter | 400–800 | marketing site only |
| Numbers / code | JetBrains Mono | 400–700 | always with tabular-nums |
Type rules (already baked into gobuild-theme.css):
h1 → Archivo 900, letter-spacing:-.03emh2,h3,h4 → Archivo 800, -.02em.gb-display → Archivo 900, -.035em (hero numbers, big KPIs, wordmark).gb-eyebrow → Space Grotesk 700, UPPERCASE, letter-spacing:.14em, ~.66remtabular-nums via .gb-num so columns align.gobuild-theme.css) and how to use themImport the file once, then reference the custom properties or use the base
.gb-* component classes. The tokens are the contract — prefer var(--gb-*)
over hard-coded hex so a future retheme is a one-file change.
:root{
/* —— Brand core (marketing: Paper · Ink · Flame) —— */
--gb-ink:#111114; /* near-black brand dark / text on light */
--gb-paper:#f6f2ea; /* warm off-white — MARKETING background */
--gb-paper-2:#efe9dd;
--gb-flame:#f5470c; /* brand flame (logo, marketing accent) */
--gb-flame-2:#ff7a3c; /* lighter flame for gradients */
--gb-blue:#15598c; /* blueprint steel — secondary accent */
--gb-cyan:#22d3ee; /* tactical cyan — field-app accent */
/* —— Product / app UI (the app + CRM use THESE) —— */
--gb-bg:#f8fafc; /* app background (slate-50) */
--gb-surface:#ffffff; /* cards, panels */
--gb-text:#0f172a; /* primary text (slate-900) */
--gb-text-muted:#64748b; /* secondary text (slate-500) */
--gb-text-faint:#94a3b8; /* tertiary text (slate-400) */
--gb-border:#e2e8f0; /* hairline border (slate-200)*/
--gb-ring:rgba(15,23,42,.06);
/* Interactive accent — product orange (buttons, links, focus, active) */
--gb-accent:#ea580c; /* orange-600 — primary action */
--gb-accent-hover:#c2410c; /* orange-700 — hover */
--gb-accent-bright:#f97316; /* orange-500 — focus ring */
--gb-accent-icon:#fb923c; /* orange-400 — icons on dark */
--gb-accent-tint:#fff7ed; /* orange-50 — tinted bg */
--gb-accent-tint-text:#c2410c;
/* AI / "Keystone" assistant accent (sky → indigo → purple) */
--gb-ai-from:#38bdf8; --gb-ai-via:#6366f1; --gb-ai-to:#9333ea;
--gb-ai-focus:#a78bfa;
/* Semantic */
--gb-success:#059669; --gb-success-tint:#ecfdf5; --gb-success-text:#047857;
--gb-danger:#e11d48; --gb-danger-tint:#fff1f2; --gb-danger-text:#be123c;
--gb-warning:#d97706; --gb-warning-tint:#fffbeb; --gb-warning-text:#b45309;
--gb-info:#0284c7; --gb-info-tint:#f0f9ff; --gb-info-text:#0369a1;
/* Radii */
--gb-r-sm:8px; --gb-r-md:12px; --gb-r-lg:16px; --gb-r-xl:24px; --gb-r-pill:9999px;
/* Shadows (soft + low) */
--gb-shadow-sm:0 1px 2px rgba(15,23,42,.06);
--gb-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 10px 30px -24px rgba(15,23,42,.5);
--gb-shadow-pop:0 20px 50px -30px rgba(15,23,42,.45);
/* Fonts */
--gb-font-ui:'Space Grotesk',ui-sans-serif,system-ui,sans-serif; /* app UI */
--gb-font-display:'Archivo','Space Grotesk',ui-sans-serif,sans-serif; /* headings */
--gb-font-body-marketing:'Inter',system-ui,sans-serif; /* marketing */
--gb-font-mono:'JetBrains Mono',ui-monospace,monospace; /* numbers */
}
| Class | What it does |
|---|---|
.gb-app |
app shell: slate bg, slate-900 text, Space Grotesk, antialiased. Put on <body>. |
.gb-display |
Archivo 900, -.035em — wordmark, hero numbers, big KPIs |
.gb-eyebrow |
uppercase Space Grotesk 700 section label |
.gb-num / .gb-mono |
JetBrains Mono + tabular-nums — for any figure |
.gb-btn + .gb-btn-primary / -dark / -ghost |
button base + variants |
.gb-card |
white surface, hairline ring, shadow-sm, 1.25rem padding |
.gb-input |
text input with orange focus ring |
.gb-badge / .gb-pill |
tinted badge / rounded pill |
.gb-mark |
the slate-900 rounded-square logo mark w/ orange-400 icon color |
.gb-ai-grad |
Keystone gradient (sky → indigo → purple) |
.gb-accent-grad |
flame-2 → flame gradient |
.gb-avatar-grad |
amber-500 → orange-600 avatar gradient |
<!-- 1) Theme classes -->
<body class="gb-app">
<button class="gb-btn gb-btn-primary">Save</button>
<div class="gb-card">
<div class="gb-eyebrow">Pipeline</div>
<div class="gb-display">$48k</div>
</div>
</body>
<!-- 2) Reference tokens directly in your own CSS -->
.my-total{ font-family:var(--gb-font-mono); color:var(--gb-accent); }
Both idioms are fine, and they interoperate with the Tailwind utility recipes in
docs/GOBUILD_BRAND.md §8 (primary button, card, input, badge, sidebar nav,
avatar, Keystone header, Kanban card).
8px buttons/inputs · 12px · 16px cards · 24px modals/feature9999px pills/avatars.1px slate-200, or ring-1 ring-slate-900/5 on white.shadow-sm; popovers/modalsshadow-xl shadow-slate-900/10. No hard/dark drop shadows.text-sm (14px) is the workhorse; labels text-[11px] uppercase.2.4–2.6, UI sizes15–18px. Active/brand in orange; at-rest in slate-400..15s–.2s ease). Buttons nudge translateY(1px)✅ Do
tabular-nums (.gb-num) so columns align.var(--gb-*) tokens over raw hex.❌ Don't
#f5470c for buttons — that's orange-600's job. Flame is logo/marketing only.#000 surfaces.Generated from and kept in sync with:
docs/GOBUILD_BRAND.md — full brand guide, component recipes, Tailwind config.docs/gobuild-theme.css — the drop-in tokens + base classes.docs/wiki/_assets/gobuild-mark.svg — the app mark, now used as the wiki logo.Which in turn derive from the live codebase (marketing/assets/site.css,
templates/base.html, templates/app.html).