# perryw.ca — Design System

## 1. Visual Theme & Atmosphere

Perry W's portfolio operates in a stark, editorial register: an off-white ground, pure black for every typographic element, and a single dark panel that creates one moment of contrast. There are no accent colors, no rounded corners, no shadows. The design philosophy is deliberate reduction — every unnecessary element has been removed until what remains is text, space, and structure. Built in Framer, it achieves a handcrafted typographic feel through font choice rather than visual ornament.

## 2. Color Palette & Roles

**Backgrounds**
- `rgb(245, 245, 245)` — Site background; warm near-white, not pure white
- `rgb(0, 0, 0)` — Single dark panel surface; creates visual anchor

**Text & Ink**
- `rgb(0, 0, 0)` — All text; no grey hierarchy, no softening

**Borders & Decoration**
- None detected. Division is implied through spacing and layout alone.

The palette is binary. The off-white (`#F5F5F5`) gives the page a slightly papery quality without being warm or aged. Black is absolute. There is no third colour.

## 3. Typography Rules

Two weights of **PP Neue Montreal** carry the entire typographic system — a contemporary geometric sans-serif with Swiss roots and a slightly warmer personality than pure Helvetica.

| Role | Family | Size | Weight |
|------|--------|------|--------|
| Body / Labels | PP Neue Montreal Medium | 14px | 500 |
| Supporting / Links | PP Neue Montreal Light | 14px | 300 |

Font size is flat at 14px across all text roles — there is no size-based hierarchy. The only typographic contrast is weight: Medium (500) vs Light (300). Line height is 19.6px (1.4×), comfortable for short-form reading. No letter-spacing adjustments, no transforms.

Note: no display sizes, no large hero type. Hierarchy comes entirely from weight and position.

## 4. Component Styling

**Links**: Transparent background, pure black text. No underline detected in default state. No hover colour change — the interaction is structural (position/layout change) rather than coloristic.

**Panels**: One black surface panel (`rgb(0,0,0)`) serves as the defining visual component — likely a featured project or hero block. It floats against the light background with no shadow or border.

**No buttons, no cards, no badges** detected in the CSS data. This is a text-first, layout-first portfolio.

## 5. Layout Principles

Framer-driven layout with a single responsive breakpoint at `1199.98px`. Below this, the layout likely collapses from a multi-column arrangement to a single-column flow. The design likely uses absolute and relative positioning (Framer's default approach) rather than a traditional grid system.

Spacing is generous and implicit — not from a token system. The absence of explicit padding/gap tokens suggests visual spacing was set by eye in the Framer canvas.

## 6. Depth & Elevation

No shadows detected. No border-radius detected. Depth is achieved purely through the contrast between the light background and the black panel — a flat, planar approach to elevation. No layering, no blur, no glass effects.

## 7. Do's and Don'ts

**Do:**
- Use PP Neue Montreal at exactly two weights: 500 (primary) and 300 (supporting)
- Keep the palette strictly binary — `#F5F5F5` and `#000000`
- Let spacing do the work that color and decoration would in other systems
- Use the black panel for exactly one focal element per section
- Keep font size consistent at 14px; vary only weight

**Don't:**
- Don't add a third color — even a grey would dilute the system
- Don't add border-radius to any element
- Don't add box shadows
- Don't introduce type larger than the design's implicit scale
- Don't use hover color changes on links — the design avoids coloristic interactivity

## 8. Responsive Behavior

One breakpoint: `1199.98px`. This is a desktop-first layout that makes a single reflow at approximately tablet-landscape width. Below 1200px, the Framer-generated layout adapts — likely stacking columns vertically. No further granularity below 1200px is defined, suggesting the design prioritizes desktop presentation.

## 9. Agent Prompt Guide

> Recreate the perryw.ca aesthetic. Background is `#F5F5F5` (not pure white). All text is `#000000` at 14px using PP Neue Montreal — weight 500 for primary content, 300 for secondary/links. No accent colors, no rounded corners, no shadows. Use a single black `#000000` panel as the sole contrast element. Typography is the only hierarchy tool — size stays fixed at 14px. Layout breaks once at 1200px. Keep everything flat, editorial, and stripped of decoration.

---

*Generated by Sparkbites — extracted from live CSS analysis*