# Bold

> High contrast, oversized type, and strong visual statements that demand attention.

- Skill: `jdsadminllc/bold` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add jdsadminllc/bold`
- Raw SKILL.md: https://api.skillmd.com/api/skills/jdsadminllc/bold/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: jdsadminllc (https://skillmd.com/u/jdsadminllc)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/jdsadminllc/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