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.

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