Youssef
78167667a2
REMOVED (per user direction — imagery is on hold for now): - site/img/generated/ (18 watercolor PNGs + contact sheet + URL cache) - scripts/generate-marketing.mjs - skill/_assets/scripts/generate.mjs (user-recipe drop-in) - skill/references/generated-imagery.md - All imagery markup in site/index.html (transitions, foundation panel plates, harness plates, footer mark) - The .wc / .transition / .slot--hero::before / #study::before / .found-panel__plate / .harness__plate / .foot-mark CSS block from sections.css - Tier C "peer of Tier B" rewrite reverted — back to "last resort, only when characters demand it" - Anti-pattern "Raw generated stills" entry reverted - assets.md Tier C catalog reverted to Nanobanana 2 / Gemini 2.5 Flash baseline - README v0.9.0 release note rewritten without imagery mentions KEPT: - Editorial theme (#23) — open-design-inspired premium · warm cream + coral + Inter Tight × Playfair italic - Open-design steal utilities — Roman-numeral section heads (.num--roman), corner-bracket image annotation (.fig-corners), dark-slab section reversal (.section--invert), pulse animation (.pulse), .tnum tabular-numerals utility, smart-hide banner stub (.banner--smart) - 22 → 23 theme catalog refresh across SKILL.md, custom-theme.md, structure.md, README, site - Version 0.8.0 → 0.9.0 NEW: Spacing pass — normalized internal rhythm across all 23 themes - --section-gap normalized: was 4.5–12rem (huge variance), now 5.5–6.5rem (uniform feel) · Atelier 12 → 6.5 (biggest cut) · Quiet 10 → 6.5 · Linen 10 → 6.5 · Aurora 10 → 6.5 · Garden 9 → 6.5 · Salon 9 → 6.5 · Bloom 9 → 6.5 · Specimen 8 → 6.5 · Almanac 4.5 → 5.5 (slight bump) - --section-head-gap normalized: was 1–3.5rem, now 1.25–1.75rem (smaller spread) - .section { gap: var(--space-2xl) } → var(--space-xl) — content sits closer to its head; less air inside each section - Editorial theme block gains explicit --section-gap + --section-head-gap (was inheriting from :root) Visual: every theme now has the same vertical rhythm (~6rem between sections, ~1.5rem under heads). The page reads as one document instead of 23 different ones.
2.3 KiB
hallmark study — input
The user pasted a screenshot of a design studio's portfolio site they admire. Below is the description the skill works from. (In real use, the skill reads the actual image; here, we describe it for the test artifact.)
What the screenshot shows
A New York editorial design studio's portfolio homepage. Above-the-fold composition, screen ratio 16:10, captured at desktop width.
Top-left: a large italic-serif word — the studio name "Aperture" — set at approximately 5–6 rem, ink-black, low-contrast against a warm-cream paper. The display face has high optical size, a soft axis, and italic-only weights.
Body of the page: a single column of project rows. Each row has a left-margin number (
01,02,03…, set in small-caps geometric sans, hairline weight) followed by the project name (set in the same italic-serif as the studio mark, but smaller — ~1.5 rem) and a one-line description (set in geometric sans, body weight). Rows are separated by a single 1 px hairline rule.The third row from the top uses a soft warm-orange accent on its number label — the only colour in the entire viewport apart from the cream paper and ink-black type. The implication: the project is the "active" or "featured" pick.
Right margin: wide. The text occupies the left two-thirds of the viewport; the right third is blank cream.
Vertical rhythm: generous. Large vertical padding between rows — at least 4–5 rem.
Footer (just visible at the bottom of the viewport): a single thin line — studio name, year, contact, three small links — set in small-caps geometric sans.
Notable: a hover-state on one of the number labels shows a slow ease-in-out 800 ms colour fade. Footer text is set at approximately 11 px with 0.06 em tracking.
What the user said
"I want my portfolio to feel like this. I'm a small product-design studio called Coelho — three people, mostly working with early-stage Lisbon companies. I have six projects to show. Use this design's DNA."
Refusal heuristics check
The screenshot is a public reference (a real studio's published portfolio, not a paid template). The user is in a related domain (small studio) but not a direct competitor. Proceed with DNA extraction at the structural level only — no copy, no pixel-faithful reproduction.