Design System
Brand Guidelines
The BB Dental Care Visual Identity
Our brand is rooted in the intersection of wellness, artisan craftsmanship, and modern innovation. Every element — from our color palette to our typography — communicates calm confidence and premium care.
01 — Logo
The Mark
Always use the approved logo files. Do not recreate, recolor, or alter the logo in any way.
02 — Color Palette
Primary Colors
Our palette draws from nature — deep teal greens grounded by near-black charcoal, lifted by soft sage tones.
Emerald#00786fPrimary / CTAs / Links
Charcoal#0f1c1cHeadings / Dark backgrounds
Mint#cbdad9Accents / Hover states
Extended Palette
Accent
Gold Sparkle#ffd700Stars / Highlights only
White#ffffffBackgrounds / Reverse text
03 — Gradients
Brand Gradients
Gradients should be used sparingly — for hero backgrounds, section dividers, and decorative elements. Never apply gradients to text or the logo.
Emerald Depthlinear-gradient(135deg, #00786f 0%, #004d46 100%)Hero sections, CTA backgrounds
Teal Cascadelinear-gradient(135deg, #009d91 0%, #00786f 50%, #004d46 100%)Feature banners, cards
Mint Mistlinear-gradient(135deg, #cbdad9 0%, #e6f0ef 100%)Soft section backgrounds, cards
Charcoal Fadelinear-gradient(135deg, #0f1c1c 0%, #385353 100%)Dark sections, overlays
Emerald to Mintlinear-gradient(135deg, #00786f 0%, #cbdad9 100%)Dividers, decorative accents
Radial Glowradial-gradient(ellipse at top left, #009d91 0%, #00786f 40%, #0f1c1c 100%)Hero backgrounds, full-bleed sections
04 — Duotones
Duotone Treatments
Apply duotone filters to photography to maintain visual consistency and brand cohesion across image-heavy layouts. Use CSS mix-blend-mode or SVG filters in production.
Emerald DuotoneShadows → #004d46 · Highlights → #cbdad9Primary imagery treatment
Charcoal DuotoneShadows → #0f1c1c · Highlights → #cbdad9Editorial / article headers
Mint DuotoneShadows → #00786f · Highlights → #f3f8f8Soft / welcoming contexts
05 — Typography
Type System
We use two typefaces. Plus Jakarta Sans anchors our body copy and headings with warmth and legibility. Outfit provides structural contrast in UI elements.
DisplayHealthy Smiles
H1 · 3rem · 700Boutique Dentistry
H2 · 2.5rem · 700Wellness First
H3 · 1.75rem · 700Your Care, Your Way
Body · 1.1rem · 400At BB Dental Care, every visit is designed around you. We blend advanced technology with a spa-like atmosphere to make dental care something you actually look forward to.
Small · 0.9rem · 400Caption text, footnotes, and supporting copy appear at this scale.
Nav · 0.95rem · 500DENTAL CARE · INSURANCE · BLOG · ABOUT US
Eyebrow · 0.9rem · 700RESTORATIVE CARE
Button · 0.9rem · 600BOOK ONLINE · LEARN MORE
Label · 0.8rem · 700MOST INSURANCES ACCEPTED
06 — Buttons
Button System
Buttons use the Outfit typeface, uppercase, with 1px letter-spacing. The pill shape (50px border-radius) reflects our approachable, modern character.
Variants
Sizes
On Dark Backgrounds
07 — Design Tokens
Spacing & Radius
Consistent spacing and rounding create visual rhythm across every layout.
Border Radius
sm · 8px--border-radius-sm md · 12px--border-radius-md lg · 24px--border-radius-lg Spacing Scale
16px / 1remInline spacing 24px / 1.5remComponent gap 32px / 2remSection padding sm 80px / 5remSection padding 128px / 8remMajor section gap 08 — Voice & Tone
Brand Voice
Our words should feel the same as our practice: warm, expert, and reassuring. We speak to patients like a trusted friend who happens to be a dentist.
✨
Warm & WelcomingWe make people feel at ease before they even walk through the door. Avoid cold clinical language.
✓ "We'd love to help you feel confident in your smile again."
✗ "Patient must schedule an appointment for evaluation."
🎓
Expert but AccessibleWe use correct terminology, then immediately explain it in plain language. Never talk down.
✓ "Scaling and root planing — a deep clean below the gumline — stops gum disease in its tracks."
✗ "SRP procedure performed subgingivally."
🌿
Wellness-OrientedWe frame dentistry as part of whole-body health, not just a chore to check off. Connect oral health to life quality.
✓ "A healthy mouth is one of the most powerful investments you can make in your overall wellbeing."
✗ "Come in for your routine cleaning."
🤝
EmpoweringWe give patients the information they need to make decisions. We never pressure or alarm.
✓ "Here are your options — let's find the one that fits your life and goals."
✗ "You need to get this done right away or you'll lose the tooth."
