Color & Typography
Master Brave's design system to create a cohesive, on-brand store experience. Learn how to use color schemes and typography effectively.
Overview
Consistent colors and typography are the foundation of a professional-looking store. Brave's flexible design system lets you match any brand aesthetic.
Color Schemes
Shopify 2.0 introduced color schemes—palette presets you can apply to any section.
How Color Schemes Work
Instead of setting individual colors for each section, you:
- Define color schemes in Theme Settings (e.g., "Light", "Dark", "Accent")
- Apply schemes to sections with one click
- Update all sections using that scheme by changing the scheme
Default Color Schemes
Brave includes these default schemes:
Background 1 (Light)
Light background, dark text. Default for most sections.
Background 2 (Off-White)
Slightly tinted background for visual variety.
Inverse (Dark)
Dark background, light text. For dramatic sections.
Accent
Brand color background. For CTAs and highlights.
Customizing Color Schemes
Access Theme Settings
Go to Theme Editor → Theme Settings → Colors.
Select a Scheme
Click on a color scheme to edit (Background 1, Background 2, etc.).
Set Colors
Define colors for:
- Background
- Text
- Button background
- Button text
- Links
- Accents
Apply to Sections
In each section, choose the color scheme from the dropdown.
Create custom schemes for special purposes like holiday promotions or sale sections. Name them clearly: "Holiday Red", "Summer Sale", etc.
Choosing Colors
Brand Color Strategy
Color Psychology for E-commerce
Black & White
Premium, luxury, timeless. Fashion, jewelry, high-end products.
Earth Tones
Natural, organic, sustainable. Skincare, wellness, food.
Bold Colors
Energetic, youthful, creative. Streetwear, sports, kids.
Pastels
Soft, feminine, gentle. Beauty, baby products, lifestyle.
Contrast Requirements
For accessibility (WCAG), maintain sufficient contrast:
| Element | Minimum Ratio | |---------|---------------| | Body text | 4.5:1 | | Large text (18px+) | 3:1 | | Buttons | 4.5:1 | | Links | 4.5:1 |
Check contrast: Use WebAIM's Contrast Checker to verify your color combinations.
Typography
Font Selection
Brave integrates with Google Fonts, offering hundreds of options.
Heading Fonts
Best for: Titles, section headings, brand statements
Popular choices:
- Playfair Display — Elegant serif, luxury feel
- Oswald — Bold condensed, modern impact
- Montserrat — Clean geometric, versatile
- Bebas Neue — Display font, high impact
Body Fonts
Best for: Product descriptions, paragraphs, UI text
Popular choices:
- Inter — Clean, highly readable
- Roboto — Modern, versatile
- DM Sans — Geometric, contemporary
- Source Sans Pro — Neutral, professional
Font Pairing Guidelines
Contrast Approach
Pair a decorative heading font with a simple body font. E.g., Playfair Display + Inter.
Family Approach
Use one versatile font family for everything. E.g., Montserrat for both headings and body.
Stick to 2 fonts maximum. More fonts = slower loading and visual noise.
Typography Settings
In Theme Settings → Typography, configure:
- Heading font family
- Body font family
- Font scale (base size for the entire site)
- Letter spacing adjustments
- Font weights for different elements
Design Consistency
Creating a Cohesive Look
Define Your Palette
Choose 3-5 colors max: primary, secondary, background, text, accent.
Create Color Schemes
Build 2-3 schemes using your palette for different contexts.
Choose Fonts
Select one heading and one body font that reflect your brand.
Apply Consistently
Use the same schemes and fonts across all pages and sections.
Avoiding Common Mistakes
Don't:
- Use more than 2-3 fonts
- Use too many colors without a system
- Mix conflicting styles (e.g., playful fonts with serious colors)
- Use low-contrast color combinations
Dark Mode Considerations
Creating Dark Sections
For dark backgrounds:
- Use high-contrast light text (white or near-white)
- Reduce image brightness if needed
- Consider using different logo variant (light version)
- Test button visibility
When to Use Dark Sections
- Hero sections with dramatic images
- Footer (common convention)
- Callout banners for attention
- Alternating sections for visual variety
Testing Your Design
Visual Consistency Checklist
- [ ] All headings use the same font
- [ ] All body text uses the same font
- [ ] Colors are consistent across sections
- [ ] Buttons have consistent styling
- [ ] Links are clearly identifiable
- [ ] Adequate contrast throughout
Cross-Device Testing
- [ ] Colors render correctly on different monitors
- [ ] Fonts fall back gracefully if blocked
- [ ] Text remains readable on small screens
- [ ] Dark sections work on OLED screens
Brand Examples
Luxury/Fashion
- Colors: Black, white, gold accents
- Heading font: Playfair Display or similar serif
- Body font: Clean sans-serif like Inter
- Schemes: Mostly light with dramatic dark hero
Modern/Tech
- Colors: Deep blues, grays, bright accent
- Heading font: Bold geometric like Montserrat
- Body font: Functional like Inter or Roboto
- Schemes: Clean whites with occasional dark sections
Natural/Organic
- Colors: Greens, beiges, warm whites
- Heading font: Organic serif like Cormorant
- Body font: Readable like DM Sans
- Schemes: Warm, earthy tones throughout
Bold/Street
- Colors: Black, white, neon accents
- Heading font: Impact fonts like Bebas Neue
- Body font: Clean geometric sans
- Schemes: High contrast, mostly dark
Quick Reference
Color Scheme Application
| Section Type | Recommended Scheme | |--------------|-------------------| | Hero/Slideshow | Inverse (Dark) or custom with overlay | | Product grids | Background 1 (Light) | | Callout banners | Accent or custom promotional | | Reviews/testimonials | Background 2 (Off-white) | | Footer | Inverse (Dark) |
Typography Hierarchy
| Element | Typical Size | Weight | |---------|--------------|--------| | H1 (Hero) | 48-72px | Bold | | H2 (Section) | 32-48px | Bold | | H3 (Subsection) | 24-32px | Semi-bold | | Body | 16-18px | Regular | | Small/Caption | 12-14px | Regular |