# pleasecallmechamp.com — Design System

## 1. Visual Theme & Atmosphere
pleasecallmechamp.com is an experimental personal brand site that pushes type as the sole visual medium. The design's central gesture is a single typeface ("sa" — likely a custom variable font) rendered at an extreme 421px with ultra-tight tracking (-17.9px) and a weight of 750. A purely black-and-white palette removes any distraction. This is typographic maximalism: the font IS the design. The site embodies a creative director's manifesto — one idea, executed at maximum scale.

## 2. Color Palette & Roles
| Role | Value | Notes |
|------|-------|-------|
| Background | `rgb(29, 29, 29)` | Deep near-black |
| Foreground | `rgb(255, 255, 255)` | Pure white text |

Two colours. The entire visual system is black-and-white. Any personality comes from the typography's scale and variable-weight properties.

## 3. Typography Rules
- **Display font**: "sa" — custom variable font (likely "Sa" or "Satoshi" variant), rendered at 421px / weight 750 / line-height 358px (0.85 — collapsed, overlapping-adjacent-lines territory).
- **Body**: Same "sa" font, 17px / weight 570.
- Tracking at -17.9px on the display size creates extreme letter compression.
- The variable font weight axis (570 for body vs 750 for display) adds a mechanical quality to the hierarchy.
- No fallback font specified in the name — the custom font is load-bearing for the entire identity.

## 4. Component Stylings
- No border-radius values detected.
- No shadows detected.
- No card or button components extracted.
- The site appears to be purely typographic/editorial — minimal or no interactive UI components.

## 5. Layout Principles
- Full-viewport typographic composition.
- The massive 421px letterforms likely span the full viewport width.
- Overlapping line-height creates a dense, collaged text texture at hero level.
- Scroll-based reveals or transitions are probable but not extractable from static CSS.

## 6. Depth & Elevation
No depth system. Flat monochrome. The only "depth" is created by the extreme size differential between the 421px hero text and 17px body copy.

## 7. Do's and Don'ts
**Do:**
- Treat the "sa" font as the entire visual system — load it first
- Use the extreme tracking (-17px) only at the hero display scale
- Keep the palette strictly black-and-white

**Don't:**
- Add any colour — it would dilute the concept
- Use the display weight (750) below 100px
- Add decorative elements (borders, shadows, icons) that compete with the typography

## 8. Responsive Behavior
At 421px, the hero font must scale with the viewport — likely `font-size: clamp()` or `vw`-based units. The layout is probably a single-scroll composition that reflows vertically on mobile.

## 9. Agent Prompt Guide
> Reproduce pleasecallmechamp.com style: near-black `rgb(29,29,29)` background, white text, custom variable font "sa" at 421px display / weight 750 / -17.9px tracking. Pure black-and-white. Zero UI components. Typography-as-design maximalism. Overlapping line-height at hero scale.

*Generated by Sparkbites — extracted from live CSS analysis*