Creative Director Folio

Creative Director Folio

Product World

• Who: CMOs and brand directors at companies like Stripe, Airbnb, and Figma evaluating a senior creative director for a rebrand or new product identity. Creative leads at agencies considering collaboration. Startup founders who need a design partner, not a vendor. They have refined taste, limited time (90 seconds), and zero tolerance for self-congratulatory portfolio websites.
• What: Independent creative director portfolio — 12 years at Pentagram, Wolff Olins, Collins. Case studies, process, identity systems.
• Vibe: pentagram.com/work (each project fills the frame, the site recedes) meets tokujin.com (Japanese restraint, massive whitespace, single-image focus)
• Domain conventions: Case study structure (tension, insight, result), client/role/duration metadata, deliverables as typed artifacts, recognition by award name + category + year

Core Principle

The work speaks. The site disappears.

Visual Vibe

Confident restraint, gallery silence, monograph warmth, editorial precision, material texture, curated stillness, considered authority, typographic gravity

What It's NOT

• NOT a creative agency homepage — no manifesto headlines, no culture photography, no team grid, no client logo wall
• NOT Dribbble-core — no thumbnail grids, no hover-to-reveal overlays, no category filters
• NOT Squarespace portfolio — no template structure (hero, about me, services, contact)
• NOT a personal brand exercise — no headshot, no "about Ren" section, no skill badges
• NOT dark mode with neon accents — the warm ivory ground is load-bearing
• NOT self-promotional language — no "Award-winning creative director," no manifesto
• NOT metrics-heavy case studies — "40% increase in brand recognition" is for marketing portfolios

Section Archetypes

• Atmospheric hero — photography layer behind display serif headline, subtitle as factual credential
• Full-bleed project gallery — one project per viewport, real portfolio images, numbered watermarks, info bar below
• Photo break — full-bleed editorial image between major sections, captioned with location/year
• Process reel — video as content in a dark-ground section, introduced with label + display heading
• Case study narrative — story-structured deep dive (tension, insight, result) with sticky sidebar metadata and inline portfolio images
• Approach philosophy — four numbered steps with counter-increment, border-top separators
• Recognition strip — award names in display serif, three-column grid
• Direct contact — large italic serif CTA + email/social links

Hero Archetype

Photography-typography hero. Atmospheric photo layer (opacity 0.35, desaturated) with gradient overlay, display serif headline at bottom of viewport. The photo provides texture and context — a studio environment, workspace, or architectural detail. Typography carries the message. The whitespace above the headline is the primary visual statement.

Asset Direction

• Photography subjects: Workspaces, architectural details, design process shots, editorial layouts, material textures. Desaturated or grayscale-tinted to sit under the warm ivory palette.
• Photography mood: Quiet authority. Considered composition. Natural or studio light. One subject per image, generous negative space.
• Video: Process reel or motion identity work. Displayed as content in its own dark section (not ambient wallpaper). Opacity 0.85+, visible and intentional.
• Typography-as-art: Oversized project numbers as ghosted watermarks (12-15% opacity). Display serif headline as primary visual. Italic serif for emotional moments (hero title, contact CTA).
• What NOT to show: Screenshots of finished websites. Laptop/phone mockups. Headshots. Stock photos of brainstorming. Client logos as credibility strip. Before/after comparisons.

Typography

• Cormorant Garamond (display) — High-contrast transitional serif with old-style proportions. It signals editorial intelligence and typographic literacy. The 300 weight at large sizes creates the elegance of a printed monograph. Italic 300 provides warmth for the hero title and contact CTA.
• Instrument Sans (body/UI) — Clean geometric sans with enough personality to avoid being invisible, but restrained enough to never compete with the serif. Carries all functional text: navigation, labels, body copy, metadata.

Color

OKLCH palette with warm-tinted neutrals (hue 50-70):

• oklch(0.97 0.005 70) — ground: warm ivory paper, the dominant surface
• oklch(0.94 0.008 70) — elevated surface: approach section, cards
• oklch(0.14 0.01 60) — primary text: near-black with warmth, headings
• oklch(0.45 0.01 60) — body text: descriptions, narratives
• oklch(0.62 0.008 60) — metadata: years, tags, labels
• oklch(0.38 0.02 50) — accent: section labels, warm stone emphasis
• oklch(0.88 0.008 70) — divider: subtle warm rules
• oklch(0.12 0.01 60) — dark ground: showreel section background

Bold Choices

1. Atmospheric hero photo — photography layer behind headline at 0.35 opacity with gradient overlay; the studio/workspace image grounds the abstract title
2. One project per viewport — full-bleed portfolio images scroll vertically with no gap; sequential gallery, not a grid
3. Process reel as dark section — video plays in its own dark-ground section; a genuine showreel, not ambient decoration
4. Full-bleed photo break — editorial image between major sections with subtle caption; pacing like a printed monograph
5. Case study images inline — real portfolio photography embedded in the narrative flow, not thumbnails
6. Project numbers as ghosted watermarks — large serif numerals at 15% opacity overlaid on images
7. Mix-blend-mode: difference header — fixed navigation inverts color against any content beneath
8. Contact as large italic serif — the portfolio's single moment of warmth

Workflow

1. Read https://joincommons.cc/api/items/creative-director-folio/raw/design-language for the full visual system
2. Read references/asset-direction.md for asset sourcing guidance
3. Build following the product world and design system above
4. Self-critique against https://joincommons.cc/api/items/creative-director-folio/raw/anti-patterns

Gotchas

• The warm ivory ground is load-bearing — switching to dark mode or pure white destroys the monograph quality
• Video must be CONTENT (a showreel, process reel) displayed in its own section — never ambient wallpaper behind text
• Photography must feel editorial, not stock — desaturated, composed, material textures over generic workspace shots
• Case studies are stories (tension, insight, result), not spec sheets (brief, solution, metrics)
• Maximum 4-6 projects — showing volume kills the curation quality
• No about section — the case study narrative IS the about