← Index
Brand / Styleguide

The DBiz brand, distilled.

One palette. One primary typeface. Every future homepage variant — light, dark, animated, editorial, brutalist — pulls from these tokens. Source of truth lives in src/app/globals.css.

01 — Color

Navy anchors. Orange ignites.

Navy is the institutional voice — authority, trust, depth. Orange is the spark — action, energy, every CTA. Everything else is surface and type.

Primary — Navy
#0D1B3E
Navy
var(--brand-navy)
Primary anchor
#070F22
Navy Deep
var(--brand-navy-deep)
Dark surfaces, CTA bg
#1A2D5A
Navy Light
var(--brand-navy-light)
Hover, secondary
Accent — Orange
#E86A2A
Orange
var(--brand-orange)
Accent, CTAs, highlights
#D45A1A
Orange Hover
var(--brand-orange-hover)
Button hover
rgba(232,106,42,0.1)
Orange Glow
var(--brand-orange-glow)
Soft fills
Surfaces
#FAFAFA
BG
var(--brand-bg)
Page background
#FFFFFF
BG Card
var(--brand-bg-card)
Cards, elevated surfaces
#F3F0EC
BG Warm
var(--brand-bg-warm)
Warm section background
Text
#111111
Text
var(--brand-text)
Primary text
#555555
Text 2
var(--brand-text-2)
Body, secondary
#999999
Text 3
var(--brand-text-3)
Muted, captions
Borders
rgba(0,0,0,0.06)
Border
var(--brand-border)
Default border
rgba(0,0,0,0.12)
Border Hover
var(--brand-border-hover)
Hover border
02 — Typography

DM Sans is the voice.

DM Sans is the primary typeface — everywhere, across all variants. DM Mono is for labels, metadata, and code.

Display — DM Sans 800 / clamp(2.6rem, 5vw, 4.5rem)
Your enterprise. Agent-operated.
H2 — DM Sans 800 / clamp(1.7rem, 3vw, 2.5rem)
Proven where it matters.
H3 — DM Sans 700 / 1.35rem
AI-Ready Infrastructure
Body — DM Sans 400 / 1.05rem / 1.65

Most enterprises have tried AI. Most of it didn't scale — not because the technology failed, but because no one connected the ambition to what actually got built. We close that gap.

Label — DM Mono 500 / 0.76rem / tracking 0.14em
Human-Led | Agent-Operated | Data-Powered
03 — Core patterns

Buttons, pills, cards.

The building blocks every variant can re-skin. Keep the shapes; swap the surface.

Or talk to our team
▲ The Frontier OrganisationSnowflakeAWS AdvancedAnthropic
Industry
50+
Outcome headline

One-line business outcome describing what shipped.

On dark
AI-Ready Infrastructure
Multi-hyperscaler · Purpose-built

Navy card pattern for dark sections. Same radius, same type scale, inverted surface.

04 — Usage

How to pull from tokens.

Every variant imports these vars from globals.css. Never hard-code a brand hex in a variant — reference the token so future theme shifts propagate.

.my-cta {
  background: var(--brand-orange);
  color: #fff;
  font-family: var(--font-sans);
  border-radius: var(--brand-r-sm);
}

/* Dark mode: flip surface, keep orange */
[data-theme='dark'] .my-cta { ... }