Brand Foundation
The strategic layer that sits above every visual decision. This section defines what BRAVE Books is, what it stands for, and how it shows up — so that every touchpoint, from a Shopify page to a Meta ad, feels like it came from the same team.
BRAVE Books is the trusted home for values-driven children's books from authors and voices families already know and love. Our site exists to make it effortless to discover, preview, and purchase the right books for your family — whether you're here for a specific author or browsing the full collection.
Core Values
We pursue continuous, compounding improvement — in our products, our site experience, and the stories we put into families' hands. Progress over perfection, every single day.
Growth lives outside the comfort zone. We take on hard conversations, enter crowded markets, and back authors who say what others won't. If it's easy, someone else is already doing it.
We lead with honesty and warmth in equal measure. Our books don't shy from real values, and our brand doesn't shy from real conversations — but we always do it with kindness.
Brand Personality
| Attribute | We Are | We Are Not |
|---|---|---|
| Confident |
We are "Books your kids will love." Bold assertions backed by 250,000+ families. We know what we're selling and why it matters. |
Not Aggressive or combative. We don't define ourselves by what we're against. No culture-war framing in customer-facing copy. |
| Warm |
We are "For families who care about character." Approachable and genuine — the kind of brand you'd recommend to a friend. |
Not Saccharine or performative. No "For the most amazing parents ever!" We respect our audience, we don't flatter them. |
| Clear |
We are "Free book when you subscribe." Direct, scannable, no jargon. Every headline and CTA earns its space. |
Not Clever for clever's sake. No "Unlock your complimentary literary companion." Clarity always beats creativity. |
| Trustworthy |
We are Quality and storytelling come first. We let the books and the authors speak for themselves. Values come through naturally. |
Not Preachy or didactic. We never lecture parents. The values are in the stories, not in the marketing copy. |
| Author-Celebratory |
We are Proud of the voices behind our books. We spotlight authors because families deserve to know who's shaping the stories their kids read. |
Not A faceless publisher. We don't hide the people behind the pages. But we also don't let any single name overshadow the BRAVE Books mission. |
Positioning Statement
For parents and gift-givers who want children's books that reflect their values, BRAVE Books is the children's publishing home that brings together trusted voices and quality storytelling in one place — making it easy to find, preview, and buy books the whole family will love.
Business Priority Stack
Every design decision on the site should be filtered through this hierarchy. When two priorities compete for space or attention, the higher-ranked line wins.
How to use this section: Share this page with anyone joining the project — designers, developers, copywriters, ad buyers, or influencer partners. If a decision doesn't align with the mission, values, and priority stack above, it needs to be reconsidered.
Logo & Logo Usage
The BRAVE Books logo features an origami lion, a symbol of courage, strength, and craftsmanship. These rules ensure it's always presented with the care and consistency the brand deserves.
Logo Variations
Use the version that best fits the layout and context. Never recreate, redraw, or substitute any version.
.png)
.png)
.png)
Color on Background
The logo must always maintain sufficient contrast against its background. Below are the four approved background treatments.
Clear Space & Minimum Size
Minimum clear space around the logo equals the cap-height of the "B" in BRAVE. No text, imagery, or other graphic elements may enter this zone.
Horizontal: 120px wide
Lion mark: 24px
Below these sizes, details in the origami lion become illegible. For very small applications (under 24px), use the lion mark only.
Usage Rules
- Use only the approved logo files. Never recreate or retype
- Maintain clear space around the logo at all times
- Use the white version on dark or colored backgrounds
- Use the full-color version on light or white backgrounds
- Scale proportionally. Always lock the aspect ratio
- Place on solid or near-solid backgrounds for maximum legibility
- Stretch, skew, or distort the logo in any direction
- Change the logo colors or apply gradients
- Add drop shadows, outlines, or effects
- Place on busy photography without a solid backing
- Rotate or flip the logo or lion mark
- Rearrange the lion and wordmark relationship
- Crop or partially obscure the logo
- Use low-resolution or pixelated versions
Color Palette
Every color has a defined role. Use them consistently across the site, email, ads, and social to build instant recognition. Click any swatch or hex code to copy it to your clipboard.
Core Palette
Eight foundational colors that govern every page on the site. The primary pair (BRAVE Red + Navy) carries the brand identity; the backgrounds (Warm White + Cream) create the bookstore atmosphere; the supporting colors handle accents, text, and UI details.
Extended & State Colors
Derived colors for interactive states, UI feedback, and dark-mode variants. These extend the core palette without introducing new brand colors.
Color Roles & Application
Every color has a job. This table defines where each color appears across the site so that any designer or developer can make consistent decisions without guessing.
| Element | Color | Usage Notes |
|---|---|---|
| Primary CTA Buttons | BRAVE Red background, white text. 8px border-radius, bold sans-serif, all-caps. Hover state darkens to #A31515. | |
| Secondary Buttons | Navy outline, Navy text. On dark backgrounds, switch to white outline + white text. | |
| Headings (H1–H3) | Navy. On dark (Navy) backgrounds, switch to white. | |
| Body Text | Charcoal. On dark backgrounds, switch to white or rgba(255,255,255,0.92). | |
| Page Backgrounds | Warm White as default. Alternate with Cream between sections to create visual rhythm. | |
| Navigation & Footer | Navy background, white text. BRAVE Red for active link underline. | |
| Star Ratings | Gold Accent. Filled stars are solid Gold; empty stars use Light Gray. | |
| Badges (New, Pre-Order) | BRAVE Red background, white text. "Bestseller" and "Free with Sub" use Gold background. | |
| Sale / Alert Banners | Soft Red background with BRAVE Red text. For full-bleed urgency, use BRAVE Red background with white text. | |
| Borders & Dividers | Light Gray. 1px solid. Used between sections, table rows, card edges. | |
| Section Eyebrows | BRAVE Red, all-caps, 11px, 600 weight, 0.14em letter-spacing. |
Accessibility & Contrast
All text/background pairings must meet WCAG AA at minimum (4.5:1 for body text, 3:1 for large text and UI components). These are the approved pairings with their calculated contrast ratios.
Gold on light backgrounds: Gold Accent (#D4A853) does not meet AA contrast for body text on Warm White or Cream. Use it only for decorative elements (star icons, badge fills, decorative accents) — never for standalone text that must be readable. When gold text is needed, pair it with a Navy or Charcoal background instead.
Color Usage Rules
- Use BRAVE Red for primary CTAs site-wide — never Navy or Gold on buttons
- Alternate Warm White and Cream backgrounds between sections for visual rhythm
- Use Navy for all headings and navigation on light backgrounds
- Use Charcoal (not black) for all body text
- Reserve Gold Accent for star ratings, premium badges, and subtle highlights
- Apply Soft Red for callout boxes, alert backgrounds, and sale-tag tints
- Switch to white text/buttons when placed on Navy or BRAVE Red backgrounds
- Verify contrast ratios when creating any new color combination
- Use pure black (#000000) for text — always use Charcoal
- Use the old blue-gray (#D6E4EC) background anywhere on the new site
- Place BRAVE Red text on Navy backgrounds (poor contrast)
- Use Gold for body text on light backgrounds (fails WCAG AA)
- Stack two Cream sections in a row — always alternate with Warm White
- Use more than one BRAVE Red full-bleed section per page (dilutes urgency)
- Introduce new brand colors outside this palette without approval
- Use Navy full-bleed sections more than twice per page (loses impact)
Shopify Dawn Theme Schemes
Five pre-configured color schemes mapped to the Dawn theme's seven color fields. Assign these per-section in the Shopify theme editor via the "Color scheme" dropdown. This eliminates guesswork and keeps every section on-brand.
Online Store → Themes → Customize → Theme Settings
→ Colors
Why these five schemes? Dawn supports up to 21 schemes, but restraint creates consistency. These five cover every foreground/background combination the site needs. If you need a new scheme, validate it against this style guide first — chances are one of the existing five already handles your use case.
Typography
Two fonts. Clear roles. Mingler carries the bold, friendly energy of headings and CTAs; DM Sans handles everything else with clean legibility. This pairing gives the site a distinctive, hand-crafted personality while keeping UI elements sharp and modern.
Font Stacks
Two typeface families cover every use case across the site, email, ads, and print. The heading font creates bold, approachable energy; the body font provides clean, highly legible UI text at every size.
abcdefghijklmnopqrstuvwxyz
0123456789 & !? @ # $ %
abcdefghijklmnopqrstuvwxyz
0123456789 & !? @ # $ %
Font Pairing
Mingler's warm, hand-painted character pairs with DM Sans' geometric clarity. The contrast creates a clear visual hierarchy — Mingler commands attention for headlines and actions, DM Sans disappears into comfortable reading for everything else.
BRAVE Books brings together trusted authors and beloved voices to create children's books that teach real values — courage, honesty, kindness, and faith — through stories kids actually want to read. Discover your family's next favorite book.
Heading Scale
All headings use Mingler Bold (700) — the only loaded weight. Sizes are defined at desktop breakpoints (≥1024px). On mobile (<640px), headings scale down by roughly 20%. Line heights are kept tight to maintain the bold, punchy character of the typeface.
| Level | Specimen | Specs | Usage |
|---|---|---|---|
| H1 | Books Your Kids Will Love | 40px / 2.5rem Bold 700 Line-height: 1.15 Mobile: 30px | Page titles, hero headlines, launch page main heading |
| H2 | Shop by Author | 32px / 2rem Bold 700 Line-height: 1.2 Mobile: 26px | Homepage section titles, collection headings, major page divisions |
| H3 | New & Trending | 24px / 1.5rem Bold 700 Line-height: 1.2 Mobile: 20px | Subsection titles, PDP section headings, card group titles |
| H4 | Complete the Set | 20px / 1.25rem Bold 700 Line-height: 1.25 Mobile: 18px | Module headings, bundle titles, author page subsections, sidebar headings |
| H5 | Related Products | 17px / 1.0625rem Bold 700 Line-height: 1.3 Mobile: 16px | Product card titles, inline headings within content blocks |
| H6 | More from BRAVE | 14px / 0.875rem Bold 700 Line-height: 1.35 Mobile: 14px | Small headings, footer column titles, mega menu group labels |
Body & UI Text Styles
All body and UI text uses DM Sans. Three core sizes cover every non-heading use case — paragraphs, product descriptions, navigation, labels, captions, and fine print.
Special Text Styles
Beyond headings and body copy, these standardized styles handle buttons, navigation, labels, prices, badges, and other repeating UI typography. Mingler appears in CTAs and badges; DM Sans handles everything else.
| Element | Specimen | Specs |
|---|---|---|
| Section Eyebrow | New Release | DM Sans SemiBold 600 · 11px · All-caps · Letter-spacing: 0.14em · Color: BRAVE Red |
| Navigation Link | Shop Authors BRAVE+ | DM Sans SemiBold 600 · 15px · Sentence case · Active state: BRAVE Red |
| Primary CTA Button | Shop Now | Mingler Bold 700 · 14px · All-caps · Letter-spacing: 0.06em · BRAVE Red bg, white text · 8px radius |
| Secondary CTA Button | Learn More | Mingler Bold 700 · 14px · All-caps · Letter-spacing: 0.06em · Navy outline + text · 8px radius |
| Product Price | $24.99 $29.99 | DM Sans Bold 700 · 20px · Tabular nums · Compare-at: Medium 500, 15px, strikethrough @ 0.45 opacity |
| Badge / Tag | Pre-Order Bestseller | Mingler Bold 700 · 11px · All-caps · Letter-spacing: 0.06em · 4px radius · BRAVE Red or Gold bg |
| Filter / Tag Chip | Ages 3–5 Courage | DM Sans Medium 500 · 13px · Sentence case · Cream bg · 20px radius (pill shape) |
| Breadcrumb / Meta | Home / Authors / Kirk Cameron | DM Sans Medium 500 · 12px · Charcoal @ 0.5 opacity · Separator: " / " |
Specimen — In Context
The full hierarchy from eyebrow to heading to body to CTA, rendered on a Navy background as it would appear in a hero banner or launch page section.
Typography Rules
- Use Mingler Bold for all headings (H1–H6), CTA button labels, and product badges
- Use DM Sans for all body text, navigation links, form inputs, product specs, and captions
- Set body text at 15–17px for comfortable reading on all devices
- Keep heading line-heights tight (1.15–1.35) — Mingler's character shines when compact
- Use tabular numerals (font-variant-numeric: tabular-nums) for prices and data in DM Sans
- Scale headings down ~20% on mobile viewports (below 640px)
- Set CTA buttons in all-caps Mingler Bold with 0.06em letter-spacing
- Use DM Sans SemiBold (600) for eyebrows and section labels in all-caps
- Use Mingler for body text or paragraphs — it's a display face, not a reading font
- Use DM Sans for page titles or hero headlines — that's Mingler's role
- Attempt to use Mingler in Regular, Italic, or any weight other than Bold — only Bold is loaded
- Set body text below 13px — legibility suffers on mobile screens
- Mix in additional typefaces — two fonts is the system, three is a mess
- Use Mingler at very small sizes (below 12px) — the character details get lost
- Set line-height below 1.5 for DM Sans body text — readability drops fast
- Use DM Sans Bold for CTA buttons — Mingler is the action font
Components & Layout
The structural building blocks that turn the color palette and typography into a consistent, production-ready section system. Spacing tokens, button variants, section wrappers, and the product card — the four components every homepage and template section depends on.
Spacing Scale
An 8px base unit creates a predictable rhythm across every section, card, and component. Use these tokens instead of arbitrary pixel values — they keep vertical rhythm tight and horizontal alignment consistent without second-guessing.
Mobile scaling: Section padding (56px) drops to 40px below 640px. Container side padding stays at 24px on all breakpoints. Grid gaps (20px) drop to 12px on small screens. The hero's 72px padding drops to 48px.
Buttons
Four button variants cover every context on the site. Primary (BRAVE Red) is the default action button. Secondary (Navy outline) is for supporting actions on light backgrounds. Ghost (white outline) works on Navy and dark backgrounds. Inverted (white fill) works on BRAVE Red backgrounds. Each variant comes in three sizes.
Button Specifications
All buttons use Mingler Bold 700 in uppercase. The consistent letter-spacing, border-radius, and border-width create a unified system across all four variants and three sizes.
| Property | Value | Notes |
|---|---|---|
| Font | Mingler Bold 700 | All-caps, letter-spacing: 0.06em. Consistent across all variants. |
| Border Radius | 8px | All buttons, all sizes. Matches card radius feel without being too round. |
| Border Width | 2px solid | On all variants. Primary/Inverted: border matches fill. Secondary: Navy. Ghost: white @ 0.35 opacity. |
| Large (hero, CTA) | 14px / 14px 32px | Font size / Padding. Use in hero banners, launch page CTAs, standalone sections. |
| Medium (default) | 13px / 11px 24px | Font size / Padding. Default for most contexts: bundles, callout sections, product actions. |
| Small (compact) | 12px / 8px 18px | Font size / Padding. Product cards, inline actions, mobile-tight contexts. |
| Hover — Primary | Background darkens to #A31515, translateY(-1px) | Subtle lift effect. Active state removes the lift. |
| Hover — Secondary | Fill flips: Navy background, white text | Border stays Navy. No lift — the fill change is the feedback. |
| Hover — Ghost | Border goes full white, background adds rgba(255,255,255,0.06) | Subtle presence increase without competing with primary CTA. |
| Disabled | opacity: 0.4, pointer-events: none | Applied to any variant. Use for "Sold Out" or inactive states. |
| Focus Ring | 2px offset outline, matching button's primary color | Keyboard accessibility. Use outline-offset: 2px for separation from button edge. |
Section Wrapper & Layout
Every homepage section follows the same structural pattern: full-width background color (assigned by Dawn color scheme), contained content at 1200px max-width, consistent vertical padding, and 24px horizontal padding on all breakpoints. This creates the alternating warm white / cream rhythm described in the color guide.
Section Wrapper Specs
Section Header Pattern
Most content sections share the same header layout: a Mingler Bold heading on the left with an optional "See All" link on the right, followed by the section content. This pattern creates consistent entry points as visitors scroll.
| Element | Spec | Notes |
|---|---|---|
| Section heading | Mingler Bold, 26px, Navy | H2 equivalent. Mobile: 22px. Line-height: 1.2. |
| "See All" link | DM Sans SemiBold 600, 14px, BRAVE Red | Right-aligned. Arrow (→) shifts right 4px on hover via gap transition. |
| Header-to-content gap | 28px | Space between the heading row and the first content element below. |
| Layout | display: flex; align-items: baseline; justify-content: space-between | Baseline alignment ensures the heading and link text sit on the same optical line. |
Grid Patterns
Three grid configurations cover every layout on the homepage. All use 20px gaps at desktop and 12px at mobile. Product rows use 4 columns, author grids use 6, and feature sections use a 2-column split.
| Pattern | Grid | Used in |
|---|---|---|
| Product Grid | repeat(4, 1fr) · gap: 20px | New & Trending, Beyond the Books, collection pages. Collapses to 2-column at ≤900px. |
| Author Grid | repeat(6, 1fr) · gap: 20px | Shop by Author. Collapses to 3-column at ≤900px. Centered text, circular avatars. |
| Review Grid | repeat(3, 1fr) · gap: 20px | Customer testimonials. Collapses to 1-column at ≤900px. |
| Two-Column Feature | 1fr 1fr · gap: 48px | Hero, Featured Bundle, BRAVE+, Book Club. Collapses to single column at ≤900px. |
Product Card
The product card is the single most reused component on the site — it appears in at least three homepage sections, every collection page, author pages, and launch page cross-sells. This spec defines the canonical structure that every card instance follows.
Card Anatomy
Card Specifications
| Property | Value | Notes |
|---|---|---|
| Container | background: white · border: 1px solid #E5E7EB · border-radius: 12px | Overflow: hidden to clip image area corners. |
| Image Aspect Ratio | 3:4 (books) · 1:1 (non-book products) | Books use portrait orientation. Plushes, games, activities use square. |
| Info Padding | 14px 16px | Consistent on all card sizes. Contains author, title, price, and age tag. |
| Hover State | transform: translateY(-4px) · box-shadow: 0 8px 24px rgba(0,0,0,0.08) | 200ms transition. Entire card is clickable (linked wrapper). |
| Badge Position | absolute · top: 10px · left: 10px | Overlays the image. Only one badge per card — use the highest-priority state. |
| Badge Priority | Pre-Order → Free w/ Sub → New → Bestseller | If a product qualifies for multiple badges, show only the highest priority. |
Component Rules
- Use the spacing scale tokens instead of arbitrary pixel values — they keep rhythm consistent
- Use 56px section padding as the default — only deviate for hero (72px) and trust bar (16px)
- Keep product cards at a 3:4 image ratio for books and 1:1 for non-book products
- Show only one badge per product card, following the priority order above
- Use Primary (BRAVE Red) buttons for the single most important action in any section
- Pair a Primary button with either a Secondary or Ghost button — never two Primaries
- Alternate Warm White and Cream backgrounds between consecutive sections
- Use the section header pattern (heading + "See All" link) consistently for browsable rows
- Invent new spacing values outside the scale — if 20px doesn't exist, use 16px or 24px
- Use more than one Primary CTA button in the same section — it dilutes the action hierarchy
- Stack two Navy (Scheme 3) sections back-to-back — break them with a light section
- Mix card border-radius values within the same page — all cards use 12px
- Add DM Sans buttons anywhere — Mingler Bold is the only button font
- Use the hover lift effect (translateY) on non-interactive elements — it implies clickability
- Skip the author name on product cards — it's the primary trust signal for new visitors
- Set product card images to anything other than 3:4 or 1:1 — mixed ratios break grid alignment
Translating to Shopify: These specs map directly to
the brave-sections.css foundation file. Each property
listed here becomes a reusable CSS class (e.g.,
.brave-btn--primary, .brave-section,
.brave-product-card) that individual section
.liquid files reference. Build the CSS file first, then
each section composes from these building blocks.