Foundation
UI Standards
These rules apply to every page, template, email, and social post we produce. They are non-negotiable. They exist to create a cohesive, premium experience that our audience — interior designers, architects, and design-conscious consumers — expects.
The UI Palette: Grays + Orange
All interface elements use our gray and orange palette only. The 13 signature brand colors appear exclusively on products and in the color strip. They are never used as section backgrounds, button fills, icon colors, or UI accents.
Primary #4A4A4A
Text, headers, footers, dark hero backgrounds
Muted #6B6B6B
Secondary text, descriptions, labels
Accent #FF9912
CTAs, active states, overlines, links
Surface #F7F5F2
Section backgrounds, form areas, subtle fills
Allowed Section Backgrounds
Dark Gray — Homepage hero, Trade hero, footers
Warm Off-White — Blog, FAQ, About, testimonials
White — Collections, PDP, cart, forms
Clean Corners
UI elements use a minimal border-radius: 4px.
Buttons, cards, inputs, images, panels — everything stays clean and straight-edged with
a subtle soften. We favor precision over the rounded-everything trend, but avoid harsh
zero-radius edges.
One exception: Color swatches are circular. They represent color as a material, not a UI element. Round swatches are how the eye reads color samples.
Three Font Weights
Ship Poppins in three weights only: 300 (Light), 400 (Regular), and 600 (Semibold). No 500. No 700.
Light 300
The dominant voice. Body text, descriptions, headlines at large sizes. This is what makes it feel premium.
Regular 400
Functional UI. Navigation links, form inputs, labels, captions, secondary text.
Semibold 600
Emphasis. Overlines, CTAs, button text, key headings. Use sparingly.
Image Ratios
Products — All product cards, PDP main images, and product-related photography
Editorial — Blog featured images, article thumbnails, lifestyle photography
Applies To
- Website (Shopify Dawn theme) — all pages, sections, and components
- Email templates — marketing, transactional, trade program
- Social media templates — post images, stories, ads
- Print collateral — spec sheets, lookbooks, trade show materials
- Advertising — Google Ads, Meta Ads, Pinterest Ads
Visual Identity
Color System
Dutton Brown uses a strict two-tier color system. Our 5 brand colors — oranges and grays — are the only colors used for UI, layouts, text, buttons, and all general branding. Click any swatch to copy its hex value.
Brand Colors Use everywhere
These five colors are our identity. All UI elements — text, backgrounds, buttons, cards, navigation, footers — use only these colors. No exceptions.
Powder Coat Swatches Decorative & product use only
Our 13 signature powder coat colors represent our product customization options. They are not general-purpose brand colors. Use them only for:
- Product color swatches and graphics that portray our color options
- Decorative color strips flowing top-to-bottom or as section separators for visual flair
- Accent gradients and color-bar effects that showcase the breadth of the palette
Visual Identity
The 5 Brand Colors
These are the five colors that are the Dutton Brown brand. They are the only colors allowed for UI, layouts, and branding. Each has a specific role so every page, email, and post feels consistent without a designer in the room. The 13 powder coat swatches are reserved for product graphics and decorative separators only.
Primary
--db-primary
Headings, body text, primary buttons. Our default ink — easier on the eyes than pure black, but still carries authority.
Secondary
--db-text-muted
Captions, helper text, timestamps, metadata. Anything that supports without competing.
Surface
--db-surface
Card backgrounds, section dividers, input borders. The neutral stage that lets color-forward elements pop.
Accent
--db-accent
CTAs, active states, badges, highlights. The “look here” color. Use boldly but not everywhere — if everything is orange, nothing is.
Accent Deep
--db-accent-hover
Hover and pressed states. Also the safer choice when accent text sits on a white background (passes WCAG AA at 4.56:1).
Visual Identity
Color Pairing
Our UI uses the 5 brand colors (grays + orange) exclusively. The 13 powder coat swatches only appear as product graphics, decorative color strips, or section separators — never as backgrounds, button fills, or text colors. Here’s how to pair correctly.
Do
Don't
Visual Identity
Accessibility & Contrast
Every touchpoint we produce must meet WCAG 2.1 AA at minimum. This isn’t optional — it’s how we make sure everyone can experience our brand.
Contrast Reference
| Combination | Ratio | Rating | Notes |
|---|---|---|---|
| Primary on White | 9.73:1 | AAA | Body text, headings — excellent |
| Secondary on White | 5.36:1 | AA | Captions, muted text — solid |
| Accent on White | 3.14:1 | AA Large | Large text (18px+) and icons only |
| Accent Deep on White | 4.56:1 | AA | Safe for any text size |
| White on Accent | 3.14:1 | AA Large | Button text at 14px semibold+ or 18px+ |
| White on Cobalt | 11.2:1 | AAA | Trade CTA sections — excellent |
Practical Rules
- Never use Accent (
#FF9912) for small body text on white — switch to Accent Deep (#D97706) - All images require alt text. All buttons lead with a verb
- Interactive elements need visible focus states — a 2px Accent outline works everywhere
- Don’t rely on color alone to communicate meaning (e.g., success/error). Pair color with icons or text labels
Visual Identity
Typography
Poppins is our only typeface. No serifs, no secondary fonts. We ship three weights: 300 (Light), 400 (Regular), and 600 (Semibold). Light weight at large sizes is what makes us feel premium — size creates hierarchy, not boldness.
Layout System
Spacing Scale
A consistent spacing scale keeps layouts harmonious. All values are based on a 4px base unit.
Components
Buttons
All buttons lead with a verb for ADA compliance. Keep button text under 4 words. Typically 2 is all that's needed.
Variants
Sizes
Do
"Shop Now" — verb-first, clear
"View Collection" — actionable
"Apply Now" — direct
Don't
"I want to shop" — not verb-led
"Click here to see all products" — too long
"Submit" — too generic
Button Specs
| Property | Value | Token |
|---|---|---|
| Font family | Poppins | --db-font-primary |
| Font weight | 600 (Semibold) | --db-font-semibold |
| Font size | 14px (sm: 12px, lg: 16px) | --db-text-sm |
| Text transform | Sentence case (none) | — |
| Letter spacing | Normal (0) | --db-tracking-normal |
| Border radius | 4px | --db-radius |
| Border | 2px solid | — |
| Padding | 12px 24px (sm: 8px 16px, lg: 16px 32px) | --db-space-3 / --db-space-6 |
| Transition | 250ms ease | --db-transition-normal |
Variant Colors
| Variant | Default | Hover |
|---|---|---|
| Primary | #4A4A4A fill, white text |
#3D3832 fill |
| Secondary (outline) | #4A4A4A border + text, transparent fill |
#4A4A4A fill, white text |
| Accent | #FF9912 fill, white text |
#D97706 fill |
Letter Spacing Rule
Buttons use sentence case with letter-spacing: normal.
Wide tracking (0.05em+) is reserved for uppercase-only elements:
overlines, mega-menu headers, and table column headers. Mixed-case text at any size
uses the font’s natural spacing.
Visual Identity
Logo Usage
The Dutton Brown logo is our most recognizable brand asset. Use it consistently.
Versions
Primary
Gray wordmark with orange bar. Default for light backgrounds.
Dark Background
White wordmark with orange bar — footer, Cobalt, Black sections.
Monogram
d|b mark alone — favicons, social avatars, small-format placements.
Specifications
Clear Space
Maintain clear space equal to the height of the “d” in the monogram on all sides. Nothing — no text, no imagery, no other logos — enters this zone.
Minimum Sizes
- Full wordmark: 120px wide (digital), 1.5” (print)
- Monogram: 24px (digital), 0.375” (print)
Backgrounds
- Light backgrounds: gray-orange logo
- Dark backgrounds: white-orange logo
- The orange bar is always present — never remove it
- On photography: only where contrast is sufficient
Don’t
- Stretch, rotate, or skew the logo
- Make the logo all-white or all-black — the orange bar stays
- Place on busy, low-contrast backgrounds
- Add effects (shadows, glows, outlines, gradients)
Messaging
Voice & Tone
Our copy should feel confident, design-forward, and honest. We write like experts who love what we do — never stiff, never salesy, and never trying too hard.
Confident & Assured
We speak with clarity and authority. No unnecessary hedging.
Conversational & Human
Friendly, direct, and natural — like talking to a smart friend.
Clever, Not Cheesy
Wit adds personality but never sacrifices clarity.
Design-Literate
We assume baseline design awareness without exclusionary jargon.
Tone Guardrails
We Are
Confident, not arrogant
Playful, not silly
Clear, not complicated
Elevated, but approachable
We Are Not
Stiff or formal
Salesy or pushy
Vague or wishy-washy
Pretentious or gatekeeping
Copy Examples
On-Brand
"Lighting should never be boring. Neither should choosing it."
"Built to your spec, finished in our Minneapolis studio."
"13 signature colors. Thousands of possibilities."
Off-Brand
"Check out our amazing must-have lighting collection!"
"We try to make high-quality products maybe you'll like."
"Artisan-crafted timeless elegance for your home."
The Gut Check
Before publishing anything, ask yourself:
- ✓ Does this sound like a confident design brand?
- ✓ Is it clear without being boring?
- ✓ Would we say this out loud?
- ✓ When applicable: Is it fun?
Messaging
Brand Vocabulary
Specific words and phrases that define how we talk about ourselves.
Say This
"Made to order"
"Color-forward"
"Designed to be customized"
"Built in our Minneapolis studio"
"Handcrafted"
Not This
"Must-have" / "Hot right now"
"Timeless elegance"
"Artisan-crafted" (without context)
"Just" / "Maybe" / "We try to"
Vague superlatives
Positioning
We Are / We Are Not
A quick reference for staying on-brand in any context.
We Are
- Expressive — our work sparks joy, curiosity & creative freedom
- Colorful — color is central, intentional, and celebrated
- Modern — rooted in contemporary design, not nostalgia
- Cheeky — confident, clever, a little playful
- Handcrafted — made with care, skill, and attention to detail
We Are Not
- Generic — we don't design for the lowest common denominator
- Mass-produced — our work is made to order, not pulled from a shelf
- Overly serious — elevated without being stiff or precious
- Disposable — no cheap materials or short lifespans
- Gatekeeping — sophisticated without being confusing or exclusive
Audience
Customer Personas
Who we're talking to, and how our voice shifts for each audience.
Interior Designer Dana
Design-Driven • Exploratory
- Wants quick lead times
- Needs samples + specs
- Works in coordinated palettes
- Uses Instagram for discovery
Voice: Confident, creative, responsive
Homeowner Max
Design-Curious • Guidance-Seeking
- Wants color + personality
- Shops visually
- Loves customization
- Active on Pinterest
Voice: Approachable, encouraging, clear
Architect Avery
Design-Driven • Risk-Aware
- Needs precision, CAD files
- Values consistency & execution
- May use BIMobject
- Wants clear specifications
Voice: Precise, knowledgeable, dependable
For Developers
Design Tokens
Copy these CSS custom properties into any project to instantly apply the Dutton Brown
design system. All tokens live in css/tokens.css.