# Creative Director Folio > Gallery-like portfolio for independent creative directors. Warm ivory ground (oklch 0.97 hue 70), Cormorant Garamond display serif + Instrument Sans body. Full-bleed project images, atmospheric hero photography, process reel video, deep case study narratives. For CMOs evaluating taste, strategic thinking, and design leadership. - Skill: `heyzgj/creative-director-folio` (Agent Skill) - Install (CLI): `npx skillmds@latest add heyzgj/creative-director-folio` - Raw SKILL.md: https://api.skillmd.com/api/skills/heyzgj/creative-director-folio/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Coding & Dev Tools - Author: heyzgj (https://skillmd.com/u/heyzgj) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/heyzgj/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