# Dancebug Design System

> High-energy performance digital canvas anchored by deep royal purple and vibrant athletic gold.

**Source:** https://dancebug.com | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Dancebug utilizes a high-contrast, multi-chromatic palette that leans heavily on Royal Purple (#6d2a84) and Athletic Gold (#ffce00) to signal energy and competition. The system is built on a Bootstrap foundation but heavily customized with a signature display typography move: Poppins at weight 300 for large-scale headlines. Interactive elements are defined by high-radius "pill" geometry (27.84px or 20px) and saturated backgrounds. Layouts alternate between clean white foundation surfaces and full-bleed purple sections, often utilizing geometric overlays or gradients to maintain visual momentum.

## Signature DNA
1. **The Royal Contrast** (The pairing of #6d2a84 purple and #ffce00 gold is used for primary CTAs and hero section accents to create a high-visibility, "performance" atmosphere.)
2. **Lightweight Display** (Poppins at weight 300 is used for the largest display text, creating a modern, airy contrast against the saturated brand colors.)
3. **Pill-Form Interaction** (All primary action buttons use a high border-radius of 20px to 27.84px, softening the dense color blocks.)

## Family Map
*No sub-brands captured in source.*

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.white}` | `#ffffff` | Page background, text on dark, button text | 134 | 1 | `--bs-white` |
| `{color.dark}` | `#212529` | Primary body text, secondary surfaces | 101 | 1 | `--bs-body-color` |
| `{color.black}` | `#000000` | Footer background, emphasis text | 13 | 1 | `--c-black` |
| `{color.gray-border}` | `#ced4da` | Input borders, subtle dividers | 10 | 1 | `--bs-gray-400` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.purple}` | `#6d2a84` | Primary brand color, button backgrounds, shadows | 14 | 1 | `--c-purple` |
| `{color.blue}` | `#007dbb` | Secondary action color, button backgrounds | 14 | 1 | `--c-blue` |
| `{color.gold}` | `#ffce00` | Primary CTA background, highlight text | 24 | 0.8 | Computed Style |
| `{color.deep-purple}` | `#53266e` | Dark purple text emphasis | 18 | 0.8 | Computed Style |
| `{color.bootstrap-blue}` | `#0d6efd` | Links, focus rings | 20 | 1 | `--bs-primary` |
| `{color.danger}` | `#dc3545` | Error states (decorative only) | 1 | 1 | `--bs-red` |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------|------|------|------|
| Poppins | 300, 400, 500, 600, 700 | Heading, Display, UI | Poppins (Google Fonts) | OFL |
| Oswald | 400, 600 | Body, Navigation | Oswald (Google Fonts) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display-lg}` | 40px | 60px | normal | 300 | Hero display | `p.lgText` |
| `{type.display-md}` | 40px | 40px | normal | 500 | Slide titles | `div.slide-text-title` |
| `{type.heading-lg}` | 36px | 54px | 2px | 500 | Section titles | `div.title-2` |
| `{type.heading-md}` | 28px | 42px | normal | 400 | Sub-section headers | `a.text-white.fs-3` |
| `{type.heading-sm}` | 26px | 38.4px | normal | 300 | Content headers | `p.mdText` |
| `{type.nav}` | 23px | 34.5px | 2px | 600 | Main navigation | `a.nav-link` |
| `{type.body-lg}` | 19px | 28.8px | normal | 700 | Large buttons | `a.btnRound` |
| `{type.body}` | 16px | 24px | normal | 400 | Default body | `header` |
| `{type.caption}` | 12px | 18px | 1px | 300 | Small labels | `label.d-flex` |

### Principles
1. **Wide Navigation:** Nav links use Oswald with 2px letter spacing for a structured, athletic feel.
2. **Lightweight Headers:** Large headings (40px) prioritize weight 300 to prevent the interface from feeling heavy despite saturated colors.
3. **Uppercase Buttons:** Primary actions frequently use `text-uppercase` to increase visual weight.

## Spacing
**Base unit:** 4px (Bootstrap-aligned)
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 8px | 31 |
| `{space.sm}` | 12px | 38 |
| `{space.md}` | 16px | 108 |
| `{space.lg}` | 24px | 12 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.none}` | 0px | Sections, footer | 263 occurrences |
| `{radius.sm}` | 4px | Inputs, secondary buttons | `{radius.input}` |
| `{radius.lg}` | 20px | Cards, secondary inputs | `{radius.card}` |
| `{radius.pill}` | 27.84px | Primary Rounded Buttons | `btnRound` |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.subtle}` | `rgb(128, 128, 128) 0px 0px 5px 0px` | Content cards | Card component |

## Components

### Tier 1: Foundational

#### Rounded Button (Primary Gold)
**Role:** Primary site CTA (Login, Details)
**Pages observed:** Home, About
**Spec:** Background `#ffce00` | Text `#6d2a84` | Radius `27.84px` | Padding `9.6px 27.84px` | Type `19.2px`
**States observed:** Default | Hover: captured

#### Text Input (Standard)
**Role:** Form fields
**Pages observed:** Home, About
**Spec:** Background `#ffffff` | Text `#212529` | Border `1px #ced4da` | Radius `4px` | Padding `16px 12px`
**States observed:** Default | Focus: captured

### Tier 2: Patterns

#### Rounded Button (Secondary Blue)
**Role:** Action buttons (Get Started)
**Pages observed:** Home, About
**Spec:** Background `#007dbb` | Text `#ffffff` | Radius `27.84px` | Padding `9.6px 27.84px`
**States observed:** Default | Active: captured

#### Card
**Role:** Content grouping
**Pages observed:** Home, About
**Spec:** Background `transparent` | Border `0px` | Radius `2px` | Shadow `rgb(128, 128, 128) 0px 0px 5px 0px`
**States observed:** Default

### Tier 3: Surface-specific

#### Footer
**Role:** Global site closure
**Pages observed:** Home, Pricing, About
**Spec:** Background `#000000` | Text `#ffffff` | Padding `16px 0px` | Type `16px Poppins`
**States observed:** Default

#### Purple Surface Section
**Role:** High-impact content bands
**Pages observed:** Home, About
**Spec:** Background `#8d5ca6` | Text `#ffffff` | Radius `0px`
**States observed:** Default

## Layout
| Property | Value |
|------|-------|
| Max-width | 1320px (Bootstrap Container) |
| Section Padding | 48px - 80px |
| Gutter | 1.5rem (24px) |

## Responsive
| Breakpoint | Width | Key changes |
|------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; text aligns center; buttons become full-width. |
| Desktop | 1440px | Multi-column grids (3-up or 4-up); horizontal navigation visible. |

## Imagery & decoration
Dancebug uses circular iconography (icons inside colored circles) to represent features. Backgrounds often feature subtle diagonal geometric gradients in purple tones to add depth without distracting from the content.

## Do's
- Use Poppins 300 for display text over 32px.
- Pair Gold (#ffce00) buttons with Purple (#6d2a84) text for maximum contrast.
- Maintain a 27.84px radius for primary "pill" buttons.
- Use Oswald with 2px letter spacing for navigation and labels.
- Alternate white and purple sections to define content hierarchy.

## Don'ts
- **Wrong:** Using `#0d6efd` (Bootstrap Blue) for primary brand CTAs. **Right:** Use `#ffce00` (Gold). **Reason:** Bootstrap blue is a system default; Gold is the brand signature.
- Do not use bold weights for display headings; stick to weight 300 or 500.
- Do not use shadows on primary buttons; they rely on flat color contrast.
- Do not use sharp corners for interactive elements; stick to the defined radius scale.

## Similar brands
- Varsity Spirit
- FloDance
- Hudl

## Quick start

### CSS Custom Properties
```css
:root {
  --color-purple: #6d2a84;
  --color-gold: #ffce00;
  --color-blue: #007dbb;
  --color-dark: #212529;
  --font-display: 'Poppins', sans-serif;
  --font-body: 'Oswald', sans-serif;
  --radius-pill: 27.84px;
}
```

## Agent prompt examples
- "Create a primary CTA button using the Dancebug Gold #ffce00 background and Purple #6d2a84 text with a 28px border radius."
- "Generate a hero section with a Poppins weight 300 headline at 40px on a white background."
- "Design a feature card with a subtle 5px gray shadow and a circular icon using #007dbb."

## Known gaps
- Hover and active states for all button variants were not fully captured in the CSS variable mapping.
- Specific mobile breakpoint transitions for typography were inferred from viewport captures rather than explicit tokens.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|------|------|------|------|
| Homepage | https://dancebug.com | 1440px | 2026-06-06 |
| Pricing | https://dancebug.com/pricing | 1440px | 2026-06-06 |
| About | https://dancebug.com/about | 1440px | 2026-06-06 |