Design System.
O’Brien Design Studios · Divi 5 · v3.0 · 2026. Fully fluid clamp system. Every type size, spacing token, and section padding scales continuously from 390px to 1200px — no hard breakpoints required.
v3.0 — Full clamp system · anchored 390px → 1200px
01 · Colour tokens
Six canonical tokens. UI stays dark.
Click any swatch to copy. Purple sparingly — labels, accents, one word in a headline.
Core palette
Void#0e0e1a--obds-void
Ink#1a1a2e--obds-ink
Brand Purple#7c6af7--obds-purple
Purple Light#9d8ff8--obds-purple-light
Purple Deep#534ab7--obds-purple-deep
Tint#f4f3fe--obds-tint
Dark Card#14142a--obds-card-dark
Border Dark#1e1e3a--obds-border-dark
Semantic — state use only
Success#1eaa52--obds-success
Error#d30005--obds-error
Warning#fca600--obds-warning
Info#1151ff--obds-info
02 · Typography
Every size is a clamp token.
All type sizes are fluid clamp expressions anchored 390px → 1200px. Resize to see live scaling.
display Build. Grow. Scale. 36→52px
h1 Page Title Example 28→36px
h2 Section Heading 20→26px
h3 Card Title / Sub-section 16→19px
eyebrow 01 · SECTION LABEL 10→11px
body Paragraph text scales continuously. Line height stays fixed at 1.7. 15→16px
body-sm Supporting copy, descriptions, card sub-text 13→14px
button CTA Button Label 13→14px
badge MOST CLIENTS 9→10px
caption Footnotes, meta information, timestamps 11→12px
03 · Spacing & Border Radius
Fluid spacing. Fixed radii.
Spacing tokens fluid-clamp. Border radii remain fixed — rounding is a design choice, not a size.
Spacing tokens — live (resize to see)
xs3→4px
sm6→8px
md12→16px
lg16→24px
xl32→48px
2xl48→80px
3xl64→96px
Border radius — fixed values
0pxHero images
4pxLogo icon
6pxButtons
8pxInputs
12pxCards
16pxCTA section
20pxBadges
24pxSearch
04 · Buttons
Three states. 6px radius. Fixed, never fluid.
btn-primary btn-secondary btn-ghost-light btn-ghost-dark
05 · Service Cards
Flat, dark, no shadows.
Starter
Starter Site
Artists, early nonprofits, solo practitioners.
$2,500–$3,500
MOST CLIENTS
Core Build
Core Build
6–12 pages, CRM integration, full SEO setup.
$5,000–$8,000
E-commerce
E-commerce
Products, merch, ticketing and payment flows.
$8,000–$14,000
06 · Form Elements
8px radius inputs. Purple focus rings.
07 · Elevation
Radically flat. One divider. One focus ring.
Flatno shadow
Divider dark0px -1px 0px 0px #1e1e3a inset
Focus ring0 0 0 2px rgba(124,106,247,.6)
Error ring0 0 0 2px rgba(211,0,5,.5)
08 · Layout Patterns
Real sections built from the system.
Hero pattern · dark bg
Build. Grow. Scale.
Tagline text goes here at body size, colour #9090b0, max-width 520px.
Alternate section · tint bg
Where the real partnership begins
Every project should end with a retainer conversation.
Ready to start?
Every project begins with a discovery conversation.
09 · Do’s & Don’ts
Rules that protect the brand.
Do
- ✓ Use
var(--obds-fs-*)tokens for every font-size - ✓ Use
var(--obds-sp-*)tokens for all padding and gap - ✓ Use
var(--obds-pad-section)for section vertical padding - ✓ Set Divi module fields to clamp max values (16px, 52px, 80px etc.)
- ✓ Apply
var(--obds-focus)to all interactive elements - ✓ Keep buttons 6px radius — fixed, not fluid
- ✓ Use 700 heading / 400 body weight split always
- ✓ Lead every section with eyebrow + bold headline
- ✓ Keep service cards flat — no shadows, no hover lifts
- ✓ Size all touch targets 44×44px minimum
Don’t
- ✗ Don’t hardcode
pxfont sizes — always usevar(--obds-fs-*) - ✗ Don’t hardcode spacing px values — always use
var(--obds-sp-*) - ✗ Don’t use
vwunits directly — the clamp tokens handle it - ✗ Don’t add extra breakpoints for type sizing — clamp handles that
- ✗ Don’t make border radii fluid — they should be fixed values
- ✗ Don’t add shadows to cards or sections
- ✗ Don’t use mid-weights (500/300) in headings
- ✗ Don’t use pure #000000 — use #0e0e1a or #1a1a2e
- ✗ Don’t use pill-shaped buttons (30px+ radius)
- ✗ Don’t skip the eyebrow label on section headings
10 · CSS Variables
Paste into Divi → Theme Options → Additional CSS.
/* Paste into Divi → Theme Options → Additional CSS */
:root {
/* Colour tokens */
--obds-ink: #1a1a2e;
--obds-void: #0e0e1a;
--obds-purple: #7c6af7;
--obds-purple-light: #9d8ff8;
--obds-purple-deep: #534ab7;
--obds-tint: #f4f3fe;
--obds-border-dark: #1e1e3a;
--obds-card-dark: #14142a;
/* Type scale */
--obds-fs-display: clamp(2.25rem, 1.769rem + 1.975vi, 3.25rem);
--obds-fs-h1: clamp(1.75rem, 1.509rem + 0.9877vi, 2.25rem);
--obds-fs-h2: clamp(1.25rem, 1.069rem + 0.7407vi, 1.625rem);
--obds-fs-h3: clamp(1rem, 0.9097rem + 0.3704vi, 1.188rem);
--obds-fs-eyebrow: clamp(0.625rem, 0.5949rem + 0.1235vi, 0.6875rem);
--obds-fs-body: clamp(0.9375rem, 0.9074rem + 0.1235vi, 1rem);
--obds-fs-body-sm: clamp(0.8125rem, 0.7824rem + 0.1235vi, 0.875rem);
--obds-fs-nav: clamp(0.75rem, 0.7199rem + 0.1235vi, 0.8125rem);
--obds-fs-button: clamp(0.8125rem, 0.7824rem + 0.1235vi, 0.875rem);
--obds-fs-badge: clamp(0.5625rem, 0.5324rem + 0.1235vi, 0.625rem);
--obds-fs-caption: clamp(0.6875rem, 0.6574rem + 0.1235vi, 0.75rem);
/* Spacing */
--obds-sp-xs: clamp(0.1875rem, 0.1574rem + 0.1235vi, 0.25rem);
--obds-sp-sm: clamp(0.375rem, 0.3148rem + 0.2469vi, 0.5rem);
--obds-sp-md: clamp(0.75rem, 0.6296rem + 0.4938vi, 1rem);
--obds-sp-lg: clamp(1rem, 0.7593rem + 0.9877vi, 1.5rem);
--obds-sp-xl: clamp(2rem, 1.519rem + 1.975vi, 3rem);
--obds-sp-2xl: clamp(3rem, 2.037rem + 3.951vi, 5rem);
--obds-sp-3xl: clamp(4rem, 3.037rem + 3.951vi, 6rem);
/* Padding tokens */
--obds-pad-section: clamp(3rem, 2.037rem + 3.951vi, 5rem);
--obds-pad-hero-top: clamp(4rem, 3.037rem + 3.951vi, 6rem);
--obds-pad-gutter: clamp(1.25rem, 0.6481rem + 2.469vi, 2.5rem);
/* Border radius (fixed) */
--obds-radius: 12px;
--obds-radius-btn: 6px;
--obds-radius-badge: 20px;
--obds-radius-input: 8px;
--obds-radius-search: 24px;
/* Focus rings */
--obds-focus: 0 0 0 2px rgba(124,106,247,.6);
--obds-focus-input: 0 0 0 2px rgba(124,106,247,.25);
/* Layout */
--obds-max-width: 1200px;
--obds-nav-height: 52px;
}