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

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