# Blackglove Design System

> High-contrast monochrome architecture punctuated by vivid amber pills and fluid, organic line geometry.

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

## TL;DR
Blackglove utilizes a stark monochrome foundation where absolute black (#000000) and deep charcoal (#171727) anchor heavy grotesque typography against a pure white (#ffffff) canvas. The brand's primary energy is derived from "Luminous Vivid Amber" (#ffb900) utilized for primary CTAs and decorative organic line-art that weaves through photographic elements. Layouts are defined by generous vertical spacing (80px sections) and cards that float on soft, expansive shadows (50px blur). Typography pairs the technical weight of BigCity Grotesque Pro for headlines with the clean legibility of Nunito Sans for body and interactive links.

## Signature DNA
1. **The Amber Punctuation:** High-saturation amber (#ffb900) is reserved strictly for primary actions and brand-mark accents, creating a singular focal point against the achromatic base.
2. **Organic Line Geometry:** Large-scale, thin-stroke outlines (pills and loops) in amber and cyan provide a fluid contrast to the rigid, heavy-weight typography.
3. **Heavy Grotesque Headers:** Headlines use BigCity Grotesque Pro Bold at 700 weight, often set at 32px with tight line-heights (1.5x) to create a "blocky" editorial feel.

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

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.black}` | `#000000` | Primary text, secondary buttons, footer background | 12 | 1.0 | `--wp--preset--color--black` |
| `{color.white}` | `#ffffff` | Page canvas, card surfaces, primary button text | 3 | 1.0 | `--wp--preset--color--white` |
| `{color.charcoal}` | `#171727` | High-contrast body text, shadow base | 12 | 0.8 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.amber}` | `#ffb900` | Primary CTA background, decorative line-art | 1 | 1.0 | `--wp--preset--color--luminous-vivid-amber` |
| `{color.slate}` | `#323f4b` | Deemphasized text (decorative_only) | 3 | 0.6 | Computed Style |
| `{color.purple}` | `#973999` | Quote attribution accent (decorative_only) | 3 | 0.6 | Computed Style |

### Semantic
*Not captured in source.*

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| BigCity Grotesque Pro Bold | 700 | Primary Headings | Archivo Black | Proprietary |
| Nunito Sans | 400, 700 | Body, Links, UI | Nunito Sans (Google) | OFL |
| Ubuntu | 700 | Testimonial Names | Ubuntu (Google) | UFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.h1}` | 32px | 48px | normal | 700 | Hero/Section Head | `p` (BigCity Grotesque) |
| `{type.h3}` | 20px | 24px | normal | 700 | Component titles | `h3.rs-component` |
| `{type.link}` | 18px | 18px | 0.9px | 700 | Navigation/Primary Links | `a.rs-component.rs-link` |
| `{type.body-lg}` | 16px | 24px | normal | 400 | Feature descriptions | `p` |
| `{type.body}` | 16px | 18.4px | normal | 400 | Standard body | `section#block_...` |
| `{type.link-sm}` | 16px | 16px | 0.8px | 700 | Inline CTAs | `a.rs-component.rs-link` |
| `{type.label}` | 14px | 20px | 2px | 700 | Testimonial names | `p.swiper-slide__name` |

### Principles
1. **Tight Heading Leading:** Large headings maintain a 1.5x line-height ratio to preserve visual density.
2. **Spaced Interactive Text:** Links and labels utilize positive letter-spacing (0.8px to 2px) to distinguish them from static body text.
3. **Achromatic Hierarchy:** Text color shifts from #000000 (headings) to #171727 (body) for subtle depth.

## Spacing
**Base unit:** 8
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xxs}` | 4px | 3 |
| `{space.md}` | 16px | 4 |
| `{space.lg}` | 32px | 5 |
| `{space.xl}` | 40px | 6 |
| `{space.section}` | 80px | 4 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.sharp}` | 0px | Global default, section containers | 27 occurrences |
| `{radius.md}` | 10px | Cards, standard buttons | Component: Card |
| `{radius.pill}` | 50px | Large decorative elements | `role: panel` |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.deep}` | `rgba(23, 23, 39, 0.08) 0px 4px 50px 0px` | Feature cards | Component: Card |

## Components

### Tier 1: Foundational

#### Button Primary
**Role:** Main call to action
**Pages observed:** https://blackglove.com
**Spec:** Background: `{color.amber}` (#ffb900) / Text: `{color.black}` (#000000) / Radius: 10px / Typography: `{type.link}`
**States observed:** Default: Captured | Hover/Active: Not captured

#### Button Secondary
**Role:** Alternative business action
**Pages observed:** https://blackglove.com
**Spec:** Background: `{color.black}` (#000000) / Text: `{color.white}` (#ffffff) / Radius: 10px / Typography: `{type.link}`
**States observed:** Default: Captured | Hover/Active: Not captured

### Tier 2: Patterns

#### Feature Card
**Role:** Service and benefit display
**Pages observed:** https://blackglove.com
**Spec:** Background: `{color.white}` (#ffffff) / Radius: 10px / Shadow: `{shadow.deep}` / Padding: 32px (visual estimate)
**States observed:** Default: Captured

#### Testimonial Slider
**Role:** Social proof
**Pages observed:** https://blackglove.com
**Spec:** Typography (Name): `{type.label}` / Typography (Body): `{type.body-lg}` / Layout: Swiper-based horizontal scroll.

### Tier 3: Surface-specific

#### Site Footer
**Role:** Global navigation and legal
**Pages observed:** https://blackglove.com
**Spec:** Background: `{color.charcoal}` (#171727) / Text: `{color.white}` (#ffffff) / Padding-top: 80px
**States observed:** Default: Captured

#### Navigation Bar
**Role:** Global header
**Pages observed:** https://blackglove.com
**Spec:** Background: `{color.white}` (#ffffff) / Height: 80px (visual estimate) / Typography: `{type.link-sm}`

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1200px (approx) |
| Section Gap | 80px |
| Column Grid | 12-column desktop |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; Hero text aligns center; 2-up grids stack to 1-up. |

## Imagery & decoration
- **Line Art:** Uses 2px stroke "pill" shapes that overlap photography.
- **Photography:** High-quality professional portraits with shallow depth of field.
- **Logos:** Grayscale/monochrome treatment for partner logos to maintain brand neutrality.

## Do's
- Use `{color.amber}` (#ffb900) for the most important action on the page.
- Apply `{shadow.deep}` to white cards sitting on white backgrounds.
- Maintain 80px of vertical breathing room between major content blocks.
- Set headlines in BigCity Grotesque Pro Bold at 700 weight.
- Use 10px border radius for all interactive surfaces (buttons, cards).

## Don'ts
- **Wrong:** Using a sub-brand color (like Vivid Red #cf2e2e) as a primary button background. **Right:** Use `{color.amber}`. **Reason:** Red is a declared token but not a validated brand primary.
- **Wrong:** Applying border-radius to section containers. **Right:** Keep containers at `{radius.sharp}` (0px).
- **Wrong:** Mixing serif fonts into the system. **Right:** Stick to the Grotesque/Sans-serif pairing.
- **Wrong:** Using saturated colors for body text. **Right:** Use `{color.charcoal}` (#171727).

## Similar brands
- Apple (Monochrome precision + specific accent)
- Framer (Heavy grotesque type + high-contrast surfaces)
- Linear (Shadow-based depth + dark/light mode neutrality)

## Quick start

### CSS Custom Properties
```css
:root {
  --bg-primary: #ffb900;
  --bg-black: #000000;
  --bg-white: #ffffff;
  --bg-charcoal: #171727;
  --font-heading: "BigCity Grotesque Pro Bold", sans-serif;
  --font-body: "Nunito Sans", sans-serif;
  --radius-md: 10px;
  --shadow-deep: 0px 4px 50px 0px rgba(23, 23, 39, 0.08);
}
```

## Agent prompt examples
- "Generate a feature card with a 10px border radius, a white background, and a 50px blur shadow using #171727 at 8% opacity."
- "Create a primary button using #ffb900 background and #000000 text with 10px rounded corners and Nunito Sans Bold."
- "Design a section header using BigCity Grotesque Pro Bold at 32px with 48px line height."

## Known gaps
- Hover and Active states for buttons were not captured in the static crawl.
- Success and Error semantic colors are declared in tokens but not observed in UI components.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://blackglove.com | 1440x900 | 2026-06-06 |
| Homepage (Mobile) | https://blackglove.com | 390x844 | 2026-06-06 |