Bold

Bold

Mission

Make an unapologetic visual statement through massive typography, stark contrast, and minimal distraction — every element fights for attention and wins.

Brand

🎨 Colors

• #000000 — Black
• #ffffff — White
• #ff3b30 — High-impact red
• #ffcc00 — Electric yellow
• #0066ff — Bold blue

🔤 Typography

• Headings: Bebas Neue (Google Fonts)
• Body: DM Sans (Google Fonts)
• Scale: xs 0.875rem, sm 1rem, base 1.125rem, lg 1.5rem, xl 3rem, 2xl 5rem, 3xl 8rem

📐 Spacing

• Grid: 12-column but frequently overridden with full-bleed breakouts
• Section padding: 6rem vertical, 2rem horizontal (or full-bleed)
• Card gaps: 2rem

🧩 Components

• Buttons: Massive — 64px+ height, heavy weight (700+), black or accent fill, sharp or slight (4px) corners
• Cards: Minimal structure, often just an image with a bold text overlay, no visible borders or shadows
• Nav: Ultra-minimal — logo left, 2-3 links right, no dropdowns, no decoration
• Hero: One colossal headline (3xl-4xl), one short supporting line, one button — that's it
• Footer: Simple 3-column max, small text, nothing competes with content above

♿ Accessibility

• Minimum contrast ratio 7:1 (AAA) for all text — black on white or white on black
• Focus states: Thick 3px black outline with 4px offset
• Reduced motion: Instant transitions, no hover animations
• Minimum font size 0.875rem for body text

✍️ Writing Tone

• Voice: Direct, confident, imperative — like a headline from a 1960s ad agency
• Labels: ALL CAPS or Sentence case — no mixed styles
• Fewer than 8 words in any primary headline

Do / Don't

✅ Do

• Use extreme type scale jumps — 3xl headlines against base body text
• Limit color palette to 2-3 colors per page, often just black + white + 1 accent
• Fill the viewport with typography — headlines should occupy 30-50% of hero height
• Use negative space aggressively around bold statements
• Pair bold typography with bold photography (high contrast, dramatic angles)

❌ Don't

• Use more than 2 font families
• Add subtle, low-contrast, or muted colors — commit to the contrast
• Place more than 3 interactive elements in the hero area
• Use thin or light font weights anywhere
• Add decorative UI chrome — borders, dividers, badges, icons

Quality Gates

• All text passes WCAG AAA contrast (7:1 minimum)
• Headline occupies at least 25% of hero section height on desktop
• No font weight below 400 on any text element
• Maximum 3 colors in use on any single page
• Focus indicators are thick and unmistakable
• Content is readable at 200% browser zoom