{ "briefs": [ { "id": "14islands", "theme": "nordic brutalism", "prompt": "An agency website with extreme typographic restraint and a single chromatic anchor", "brief": "Build a studio or agency homepage that communicates confidence through radical subtraction. No buttons, no icons, no photography in the hero—just typography, whitespace, and a single gradient bar as the chromatic heartbeat. The design should feel Swiss in its precision but warm in its humanity. Asymmetry in the headline creates dynamic tension without chaos. This is anti-design-system design that sells craft through its own restraint.", "rubric": { "typography": "Massive neo-grotesque display for headline words (80-120px, bold/black weight), ampersand in lighter weight and smaller scale as secondary element creating visual pause. Navigation: extra small (12-14px), tightly-tracked uppercase sans-serif (+0.05em tracking). Body copy: small, regular weight, generous line-height. Micro-typography contrast against macro headline.", "color": "Near-white warm gray ground (#F5F5F5 or #F2F2F2). Black text (#1A1A1A). Single chromatic element: horizontal gradient bar (purple #8B2F5C → magenta #C13584 → rust/gold at right edge) acting as compositional anchor. Ampersand in medium gray (#999999).", "layout": "Asymmetric hero: 'Design' left-aligned, ampersand centered, 'Technology' right-aligned. Massive negative space—hero occupies ~30% of viewport height, 60-70% whitespace below. Generous margins (5-10% viewport width). Project previews at bottom corners suggesting horizontal scroll sections. Cookie notice integrated into gradient bar geometry.", "motion": "Subtle parallax on scroll—headline and gradient bar move at different rates. Hover states on navigation: slight opacity shift or underline. Project thumbnails at bottom should reveal on hover with smooth transition. No aggressive animations; motion should feel considered and slow.", "texture": "Flat, clean surfaces. No shadows, no gradients (except the intentional single bar), no decorative elements. The gradient bar provides all visual texture; everything else is deliberately stark." }, "banned_depiction": [ "device mockups", "team photos", "office imagery", "client logos", "award badges", "geometric decorative patterns" ], "must_not": [ "use photography in the hero section", "include more than one chromatic element", "center all content symmetrically", "use button-style CTAs", "include social proof elements (testimonials, client counts)", "use card-based layouts" ], "derived_from": "https://14islands.com", "source_screenshot": "data/screenshots/14islands.png" }, { "id": "anthropic", "theme": "institutional research", "prompt": "A warm, earnest research foundation page with cream paper-like ground, high-contrast serif headlines, and a dramatic dark interruption block", "brief": "Build a content-heavy page for any research, academic, or intellectual subject that uses a warm cream ground (#F5F0E8) to evoke archival paper and thoughtfulness. Pair high-contrast transitional serifs for editorial authority in headlines with clean geometric sans for functional body text. Include a single dramatic dark charcoal block (#1A1A1A) as a pivot point to arrest attention on a key message. Use zero photography or illustration—pure typographic composition. Layout should be asymmetric with a two-column hero, then full-width feature cards.", "rubric": { "typography": "High-contrast transitional serif (Tiempos/Freight-class) for hero headlines at 40-56px with tight letterspacing; clean geometric sans (Inter/SF Pro-class) for body and UI at 14-16px; serif/sans pairing creates tension between institutional gravitas and modern utility", "color": "Warm cream ground (#F5F0E8) as dominant background creating archival atmosphere; single dark charcoal block (#1A1A1A) with rounded corners for dramatic interruption; pure black (#000000) for primary text; muted beige/tan (#E8E0D5) for card backgrounds; zero accent colors—achromatic discipline", "layout": "Asymmetric two-column hero (headline left, descriptor right); full-width dark feature block centered; three-column equal-width card grid below; generous whitespace (80-120px section padding); 12-column underlying grid structure", "motion": "Subtle scroll-triggered reveals for cards; potential parallax on dark block; restrained motion befitting institutional seriousness", "texture": "Flat, clean surfaces; no grain, noise, or decorative texture; paper-like quality comes from color alone; subtle shadows on cards for depth" }, "banned_depiction": [ "tech industry cyberspace imagery", "AI robot illustrations", "corporate stock photography", "literal brain or thought imagery", "futuristic cityscapes" ], "must_not": [ "use tech-industry blues or neons", "include any photography or illustration", "use gradients or decorative effects", "create a literal 'research' theme with books or lab equipment" ], "derived_from": "https://www.anthropic.com", "source_screenshot": "data/screenshots/audit-anthropic.png" }, { "id": "antinomy", "theme": "curatorial minimalism", "prompt": "A creative studio portfolio with gallery-like restraint and asymmetric editorial rhythm", "brief": "Build a portfolio that treats work as art objects in a white cube gallery. The design should demonstrate confidence through asymmetry—no centering crutch, compositions feel considered rather than accidental. Typography should whisper, not shout, creating inverted hierarchy where imagery dominates. Use a warm neutral palette that softens minimalism into something tactile and human. The rhythm should feel magazine-like: zigzag editorial flow, massive breathing room, and a slow, deliberate pace.", "rubric": { "typography": "Clean neo-grotesque sans-serif throughout (Helvetica Neue-class, Söhne, or similar). Extremely restrained scale—compact caption-like body text (14-16px), tiny uppercase navigation (11-12px, +0.1em tracking). No display typography. Flat hierarchy: same weight used for navigation and body, differentiation through size and case only.", "color": "Near-monochrome foundation: stark white backgrounds (#FFFFFF) with soft warm gray section band (#E5E2DD or #DCD9D4). Near-black text (#1A1A1A or #222222). Zero accent colors—all color provided through photography. Warm undertones throughout, avoiding cold clinical whites.", "layout": "Asymmetric broken grid with intentional misalignment. Images float without strict column alignment. Zigzag editorial rhythm: text-left/image-right alternating with image-left/text-right. Massive vertical breathing room between sections (120-200px). Small text, huge images creating inverted visual hierarchy. Laptop/device frames used as curatorial framing devices.", "motion": "Slow, considered scroll experience. Subtle hover states on project images: slight scale or opacity shift. Images may reveal additional information on hover. No parallax, no aggressive scroll animations. Motion should feel gallery-like: stillness punctuated by small, intentional movements.", "texture": "Warm, paper-like tones. No gradients, minimal shadows (flat design). Photography feels candid and unretouched. Intentional cropping—images bleed unexpectedly. The warm gray band interrupts stark white, creating anti-corporate warmth." }, "banned_depiction": [ "hero headlines describing services", "skill charts", "process diagrams", "team photos with bios", "testimonials", "client logo grids" ], "must_not": [ "center all content", "use bold display typography", "include a services list", "use bright accent colors", "employ card-based layouts with shadows", "include social media feeds" ], "derived_from": "https://antinomy.studio", "source_screenshot": "data/screenshots/antinomy.png" }, { "id": "apple-airpods", "theme": "product luxury minimalism", "prompt": "A product page with extreme whitespace, single blue accent, concentric ripples behind the product, and gallery-like presentation", "brief": "Build a product landing page that communicates luxury through extreme restraint. Use a very light gray ground (#F5F5F7) with pure white sections and near-black text. The product should be presented as a precious object—floating, isolated, with concentric ripple or echo effects behind it suggesting technology or sound waves. Typography should use size contrast alone to create hierarchy. The single blue accent should be reserved exclusively for the primary CTA button.", "rubric": { "typography": "Clean geometric sans-serif throughout (SF Pro-class); large bold/black weight (700-800) for hero headline with tight leading (1.1-1.2); small regular weight (400) for product name and metadata; medium-large medium weight (500) for secondary headlines; small light weight (300) for navigation; size contrast as primary hierarchy tool—no weight variation in body text", "color": "Very light gray ground (#F5F5F7); pure white sections (#ffffff); black/dark gray (#1d1d1f) for primary text; medium gray (#86868b) for secondary text; single vivid blue accent (#0071E3) for CTA button only; white product photography with subtle shadows; no other accent colors or gradients", "layout": "Fixed navigation bar at top with centered menu items; large hero section with asymmetric layout—product image centered-top, headline left-aligned, price/CTA floating right; generous negative space throughout (120px+ vertical padding); clean horizontal division between sections; vast empty space below secondary content; single-column centered for product focus", "motion": "Concentric ripple/echo effect behind product with subtle pulse animation (scale 1.0 to 1.05, opacity fade, 3s loop); product image with gentle floating motion (translateY ±8px, 4s ease-in-out); scroll-triggered fade-in for content sections; minimal hover states—subtle brightness on CTA (1.05x)", "texture": "No visible texture or pattern; extremely minimal surface; subtle circular gradient/radial glow effect behind product; floating product with soft shadow; clean flat surfaces throughout" }, "banned_depiction": [ "headphones", "earbuds", "audio equipment", "sound waves", "music notes", "speakers", "concert scenes", "people wearing products", "lifestyle photography" ], "must_not": [ "Use multiple accent colors—stick to one blue for CTA", "Add decorative elements or patterns", "Fill the whitespace with content or features", "Use dark sections or contrasting backgrounds—keep it light and airy", "Add technical diagrams or spec callouts" ], "derived_from": "https://www.apple.com/airpods-pro/", "source_screenshot": "data/screenshots/audit-apple-airpods.png" }, { "id": "aristide-benoist", "theme": "brutalist editorial fragmentation", "prompt": "A portfolio with compressed grotesk display type, strict monochromatic palette, and asymmetric layout with vertical image strips creating rhythmic alternation", "brief": "Build a portfolio page for a developer or creative technologist. The design must use compressed grotesk display type (Oswald-class) for the wordmark with stylized letterforms, all-caps tightly tracked. Body text in microscopic functional sizes that nearly disappear. Strict monochromatic palette: near-black ground (#0a0a0a), charcoal surfaces (#141414), off-white text (#f5f5f5), mid-gray accents (#888888). All imagery desaturated to unified B&W treatment. Asymmetric layout: left third negative space with typographic anchor, right two-thirds occupied by 8-9 vertical image strips of varying widths creating rhythmic alternation. Images should be dramatically cropped—faces, architecture, landscapes partially revealed. The fragmented vertical strips force the viewer to mentally complete the scenes, implying motion capability through fragmentation.", "rubric": { "typography": "Compressed condensed sans-serif (Oswald/Bebas-class) for logo at 24-32px bold with tight tracking -20 to -40, body text very small 10-12px, wide tracking on metadata, vertical pipe pattern as decorative divider", "color": "Near-black ground #0a0a0a or #111111, off-white #e5e5e5 or #f5f5f5 for primary text, muted gray #888888 or #666666 for secondary text, mid-gray #444444 for dividers, strictly monochromatic with grayscale imagery at 60-70% brightness", "layout": "Asymmetric grid with left third negative space, right two-thirds for 8-9 vertical image strips (~10-15px gutters between), generous margins 60-80px from edges, image strip occupying ~40% of viewport width, strong left/right anchoring", "motion": "Inferred: horizontal parallax on scroll with different speeds per strip, hover expansion to full width, vertical header lines with draw-in animation, images partially revealed creating mystery", "texture": "No visible borders, reduced contrast on imagery (crushed blacks, lifted shadows), slight fade/overlay reducing intensity to ~70%, film strip or contact sheet aesthetic" }, "banned_depiction": [ "literal code snippets", "terminal or IDE screenshots", "programming language icons", "device mockups showing apps", "geometric grid patterns as decoration", "tech-related iconography" ], "must_not": [ "use color photography", "use a centered or symmetric layout", "include large body text paragraphs", "use card-based project presentation", "include prominent social media links" ], "derived_from": "https://aristidebenoist.com", "source_screenshot": "data/screenshots/aristide-benoist.png" }, { "id": "audit-glossier-product", "theme": "clinical e-commerce minimalism", "prompt": "A product page with extreme white minimalism, single soft pink accent badge, and natural skin texture photography showing realistic pores and glossy skin", "brief": "Build a product detail page for a beauty or skincare brand. The design must embrace extreme minimalism: white/off-white dominant ground with black text and single soft pink accent (#FFD1D9 or #FFC0CB) for badges. Use clean geometric sans-serif throughout (Helvetica Neue/Apercu-class). Two-column asymmetric layout (40% info left, 60% imagery right) with generous whitespace. Product photography should show natural skin texture—pores visible, fingers in frame, glossy/wet skin texture rather than airbrushed perfection. Size selector buttons should be pill-shaped with black border when active. Include expandable accordion sections for ingredients and how-to-use with numbered steps.", "rubric": { "typography": "Clean geometric sans-serif (Helvetica Neue/Apercu-class), product name bold 24-28px, subtitle regular 12-14px, body 13-14px with generous line-height 1.5, navigation all-caps 11-12px with wide tracking", "color": "Pure white #FFFFFF ground, near-black #000000 or #1A1A1A text, medium gray #666666 or #888888 secondary text, soft pink #FFD1D9 or #FFC0CB for Gloss badge, light gray #E5E5E5 borders", "layout": "Two-column asymmetric grid (40% / 60% split), left column sticky product info, right column scrolling imagery, max-width container 1200-1400px, section padding 60-80px vertical, thumbnail gallery below hero image", "motion": "Image gallery transitions, expandable accordion sections, hover states on size selectors, subtle shadow on product images", "texture": "Pill-shaped size selector buttons with 1px black border when active, subtle drop shadows on product images, natural skin texture photography with visible pores, glossy skin texture, fingers in frame" }, "banned_depiction": [ "airbrushed or heavily retouched skin", "models with full makeup looks", "luxury gold or black packaging backgrounds", "traditional beauty industry glamour shots", "multiple product bottles arranged decoratively", "sparkles or shimmer effects" ], "must_not": [ "use heavy makeup on models", "include aggressive conversion tactics like countdown timers", "use gold or metallic luxury cues", "show airbrushed perfect skin", "include star ratings prominently above fold" ], "derived_from": "https://www.glossier.com/products/milky-jelly-cleanser", "source_screenshot": "data/screenshots/audit-glossier-product.png" }, { "id": "brutalist-whatiswebbrutalism", "theme": "intentional brutalism", "prompt": "A stark monochrome page with massive condensed headline, broken across lines, and monospace section numbering", "brief": "Build an informational page that performs the concept of 'raw, unfinished' through typographic treatment alone. Use strictly monochrome black-on-white with zero gray tones, gradients, or imagery. The hero should feature a massive condensed sans-serif headline in heavy weight with tight tracking, intentionally broken across lines to create visual tension. Section numbering should use monospace numerals ('01.', '02.') to expose the catalog/technical structure. The layout should be single-column with generous whitespace and narrow measure for body text.", "rubric": { "typography": "Grotesque/neo-grotesque sans-serif throughout (Helvetica/Inter-class); massive bold/black weight (800-900) for headline with tight tracking (-0.02em); light/thin weight (300) for body text; monospace for numerals and navigation; all-caps for headline and navigation; sentence case for body; dramatic size hierarchy—headline at 48-72px spanning ~80% viewport width, body at 14-16px; wide letterspacing on navigation (0.05-0.1em)", "color": "Strictly monochromatic: black (#000000) text on white (#ffffff) background only; no accent colors, no gradients, no photographic color; maximum contrast ratio; zero gray tones—pure black and white only", "layout": "Single-column left-aligned text block; generous whitespace on all sides (80-120px margins); horizontal navigation bar at top with evenly spaced links; section numbering ('01.', '02.') left-aligned with section titles right-aligned on same baseline creating asymmetrical balance; narrow measure for body text (60-70 characters per line); indented numbered lists for subsections", "motion": "No decorative motion—static and immediate; headline with simple fade-in on load (opacity 0 to 1, 0.4s); no hover effects beyond standard cursor change; no transitions or easing—everything instant", "texture": "Zero imagery, zero photography, zero illustration; zero texture, zero shadows, zero borders or decorative rules; clean flat unadorned surface; whitespace as the only 'decoration'" }, "banned_depiction": [ "concrete textures", "building photographs", "architectural imagery", "brutalist buildings", "construction materials", "exposed brick", "raw wood", "industrial scenes" ], "must_not": [ "Add any color beyond black and white", "Use any imagery or photography", "Add decorative elements, shadows, or borders", "Use smooth animations or transitions", "Add gray tones—keep it pure black and white", "Use a colorful or warm accent" ], "derived_from": "https://www.whatiswebbrutalism.com", "source_screenshot": "data/screenshots/brutalist-whatiswebbrutalism.png" }, { "id": "buck", "theme": "gallery curatorial minimalism", "prompt": "A portfolio with an asymmetric bento-box grid, monochrome frame, and project-first hierarchy where imagery dominates", "brief": "Build a portfolio page that functions as a gallery—where the design framework disappears so the work can speak. Use a pure white ground with near-black text and a single warm accent (mustard yellow) reserved for functional CTAs. The layout should use an asymmetric bento-box grid with intentional irregularity: each project receives bespoke real estate rather than uniform cards. Typography should be restrained and utilitarian—small 'Work' labels outside image frames, medium-weight project titles, lighter descriptive text—creating a catalog/index aesthetic.", "rubric": { "typography": "Clean geometric or neo-grotesque sans-serif throughout; navigation and labels in light weight at small sizes (12-14px); project titles in medium weight (16-20px); descriptions in light weight (14px); logo as custom monogram in bold; all-caps for navigation; strong size contrast between functional text and project titles", "color": "Pure white ground (#FFFFFF); near-black text (#0a0a0a or #111111); single warm accent—mustard yellow/gold (#E5B800 or #fbbf24)—for CTAs only; all color variation comes from project imagery, not UI", "layout": "Asymmetric 2-column grid with varying image heights; 'Work' labels positioned outside image frames creating catalog aesthetic; generous whitespace between elements (80-120px); fixed top bar with logo left, navigation right; cookie banner as full-width bar at bottom; project-first hierarchy—imagery dominates, then title, then description", "motion": "Subtle hover scale on project images (1.02x, 0.3s ease); fade-in on scroll for project cards (staggered 0.1s delays); minimal parallax on images (±20px); no decorative motion—keep it functional and restrained", "texture": "Flat, clean surfaces throughout UI—no visible texture or ornament; imagery provides all visual interest and texture variation; mix of media types (3D renders, photography, illustration, collage) within grid" }, "banned_depiction": [ "client logos overlaid on images", "case study buttons", "social media icons", "award badges", "testimonial quotes", "team photos", "office photography" ], "must_not": [ "Use uniform card sizes—vary the grid intentionally", "Add decorative UI elements or patterns", "Use multiple accent colors—stick to one functional yellow", "Include 'View Project' buttons or overlays on images", "Use sidebar navigation or complex menus" ], "derived_from": "https://buck.co", "source_screenshot": "data/screenshots/buck.png" }, { "id": "celticseasalt", "theme": "artisanal heritage", "prompt": "An e-commerce site with hand-illustrated storybook aesthetic and vintage apothecary framing", "brief": "Build a product-focused site that justifies premium pricing through storytelling and craft aesthetics. The design should merge commerce with narrative through consistent illustration language—hand-drawn botanical elements, vintage label styling, and organic transitions. Use a deep navy and gold palette to signal quality while the illustrated aesthetic reinforces natural/authentic positioning. The product should feel like a discovered treasure, not a commodity.", "rubric": { "typography": "Ornate decorative serif for brand identity (high contrast, flourishes, vintage European packaging aesthetic). Italic classical serif for taglines (Baskerville-class). Clean sans-serif for product details, navigation, and functional text (Helvetica/Arial-class). Hierarchy: brand name largest with shadow effect, product names in medium serif, prices in bold sans.", "color": "Deep navy blue primary (#1A3A5C or #0D2B45) for brand areas, buttons, footer. Bright royal blue for accents (#1E4A8C). Golden yellow for CTAs and harvested areas (#D4A574 or #C9A227). Sky blue for water elements (#87CEEB). Sage and olive greens for foliage (#7A9B76, #5C7A3A). Dusty rose/mauve for flowers (#B8A0A8). Cream/off-white for contrast areas.", "layout": "Full-width illustrated hero with layered salt marsh scene. Brand name overlaid centrally in large type with decorative tagline frame below. Asymmetric two-column product section: decorative botanical illustration left (20%), product carousel center (50%), product details right (30%). Organic wave shape at footer creating transition rather than hard grid termination.", "motion": "Subtle parallax on illustrated layers (sky, trees, water, worker). Product carousel with smooth transitions. Hover states on buttons: slight scale or color shift. Botanical elements may have subtle sway or particle effects (dust, sparkles). Wave shape may animate gently.", "texture": "Hand-drawn vintage botanical aesthetic with cross-hatching and fine line work (19th-century scientific illustration style). Watercolor or digital watercolor textures. Subtle paper or canvas texture throughout. Ornate border/frame around tagline with corner flourishes. Irregular organic edges on wave element." }, "banned_depiction": [ "salt crystals", "ocean waves", "Celtic crosses", "clover", "rainbows", "factory photos", "modern clinical lab imagery" ], "must_not": [ "use stock photography", "employ flat material design", "use bright primary colors (red, yellow, blue)", "include generic e-commerce patterns (urgency timers, stock counters)", "use sans-serif for brand name", "employ hard rectangular grids without organic transitions" ], "derived_from": "https://celticseasalt.com", "source_screenshot": "data/screenshots/celtic-sea-salt.png" }, { "id": "chrissie-abbott", "theme": "playful Y2K maximalism", "prompt": "A portfolio with pale mint background, bold geometric sans type, emoji navigation icons, and asymmetric masonry grid", "brief": "Build a creative portfolio for any visual discipline that uses a pale mint/cool cyan background (#C5E0E0) as a distinctive flat ground. Use bold, wide geometric sans-serif (Futura Bold/Avenir Black-class) in all caps with extremely tight letter-spacing for the primary name/headline. Navigation should use emoji icons (💬, 🟡, 👀, 🍥, 🖤, 🍑) as bullet points before text labels, creating a playful, personal, early-2010s web aesthetic. Layout uses an asymmetric masonry grid with 3-column base and varied row heights—some images spanning 2 rows tall. Small consistent gaps between images (~4-8px). The artwork displayed should be vibrant and saturated—hot pink, electric purple, lime green—creating contrast against the muted mint ground.", "rubric": { "typography": "Bold wide geometric sans-serif (Futura Bold/Avenir Black-class) for primary headline at 48-72px, all caps, extremely tight letter-spacing; same family at smaller regular weight for subtitle/tagline; small sans-serif for navigation with emoji prefixes", "color": "Pale mint/cool cyan dominant (#C5E0E0) flat background; pure black (#000000) for text; artwork provides all vibrant color—hot pink, electric purple, lime green, royal blue; no gradients in background; flat solid color only", "layout": "Centered vertical stack header: name → tagline → nav; asymmetric masonry grid with 3-column base; varied row heights with some images spanning 2 rows; small consistent gaps (~4-8px); gallery-like presentation of visual work", "motion": "Subtle hover states on navigation; potential image zoom or reveal on hover; smooth scroll behavior", "texture": "Pure flat color on background; no grain, noise, or texture; artwork may have varied textures; clean digital precision in layout" }, "banned_depiction": [ "literal Y2K objects like flip phones or CD players", "retro computer interfaces", "literal 'playful' imagery like toys or games", "corporate headshots", "generic stock photography" ], "must_not": [ "use a white or neutral gray background", "use conventional navigation icons", "create a rigid aligned grid", "use muted or desaturated artwork", "add decorative Y2K elements like starbursts or chrome effects as overlays" ], "derived_from": "https://chrissieabbott.com", "source_screenshot": "data/screenshots/brutalist-chrissie-abbott.png" }, { "id": "claudio-guglieri", "theme": "refined technical minimalism", "prompt": "A designer portfolio with pure black ground, 3D rendered cursor objects as hero imagery, and dramatic scale hierarchy with floating scattered elements", "brief": "Build a portfolio page for a designer or creative technologist. The design must use pure black (#000000) ground with white text, creating a luxury constraint. Hero imagery should be 3D rendered interface objects (cursors, pointers) in glossy, candy-colored chrome against the black gallery frame. Use geometric grotesk (Inter-class) with dramatic scale hierarchy—large bold 48-56px display headlines against light-weight 11-12px secondary text in muted gray (#888888). Asymmetric two-column header with full-bleed sections and extreme vertical breathing room (~80-120px). Include 10+ distinct cursor icons in isometric 3D style with soft drop shadows, scattered in organic floating arrangement with slight rotation variations. Hero button should be pill-shaped with white fill, black arrow icon, and progress indicator.", "rubric": { "typography": "Geometric grotesk (Inter/Helvetica-class), hero headlines bold/black 48-56px with tight line-height ~1.1, navigation medium 12px with NEW in white and others in gray, body 13-14px gray, footer contact 16px white, Next section bold 32-40px", "color": "Pure black #000000 ground, pure white #FFFFFF text and UI, muted gray #888888 or #333333 for secondary text, blue #0066FF for loading indicator, rainbow gradient on one cursor (red, orange, yellow, green, blue, purple)", "layout": "Asymmetric editorial grid, two-column header (name/time left, bio right), left-aligned navigation below, centered hero content (~70vh), floating cursor cluster absolute positioned, full-bleed photography section at bottom (~40vh)", "motion": "Inferred: subtle float/parallax on cursor elements, arrow slide on pill buttons, progress indicator animation on hero button, image zoom on Next navigation", "texture": "3D rendered cursors with glossy beveled edges, soft diffused shadows beneath each cursor creating levitation effect, B&W photography with dark gradient overlay, pill-shaped button with white fill" }, "banned_depiction": [ "literal portfolio project screenshots", "device mockups showing app designs", "design tool interfaces like Figma or Sketch", "process diagrams or wireframes", "client logos as social proof", "multiple project case studies" ], "must_not": [ "show actual portfolio work as hero", "use colorful or gradient backgrounds", "include traditional project grid", "use sans-serif at single scale", "include extensive text biography" ], "derived_from": "https://guglieri.com", "source_screenshot": "data/screenshots/claudio-guglieri.png" }, { "id": "cooper-hewitt", "theme": "modernist institutional", "prompt": "A cultural institution page with heavy condensed sans-serif typography, Bauhaus grid system, and vibrant saturated accent colors against black header band", "brief": "Build a landing page for a museum, cultural institution, or educational organization. The design must embody modernist grid-based aesthetic with Bauhaus/Swiss International Style influences. Use heavy condensed sans-serif typography functioning as architectural building blocks—bold all-caps headlines with rectangular highlight backgrounds. Color strategy should avoid muted institutional tones in favor of energetic primaries: orange-red (#E85A2D) for CTAs, electric blue (#1E7FC4) and purple (#6B2CFF) for promotional blocks. Layout uses strict 2-, 3-, and 4-column grids with minimal whitespace in content areas, treating the page as a dense curatorial space. Black header band (#000000) with white text and thin horizontal rules separating navigation columns.", "rubric": { "typography": "Heavy condensed sans-serif (Cooper Hewitt-class or similar) as architectural elements, bold all-caps headlines with tight leading, horizontal rules (1px white) separating nav items, medium weight for navigation", "color": "Black header #000000, white text on dark, orange-red #E85A2D for primary CTAs, electric blue #1E7FC4 and purple #6B2CFF for section backgrounds, white/light gray content areas, vibrant object photography", "layout": "Strict 4-column grid (desktop) with ~2px tight gaps, 3-column feature section below, black header with two-tier navigation, horizontal CTA row below main nav, square 1:1 aspect ratio image grid", "motion": "Carousel indicators (orange active dot), hover states on CTAs, potential image carousel functionality", "texture": "1px white horizontal rules in navigation, rectangular highlight backgrounds behind headlines, minimal card styling with tight image grids, no shadows" }, "banned_depiction": [ "literal museum buildings", "traditional serif fonts for headings", "muted beige institutional colors", "ornate decorative borders", "stock photos of people looking at art", "classical architectural elements" ], "must_not": [ "use muted earth tones as primary palette", "use serif typefaces for headlines", "create sparse whitespace-heavy layout", "use rounded corners on buttons or cards", "include traditional navigation dropdowns" ], "derived_from": "https://www.cooperhewitt.org", "source_screenshot": "data/screenshots/cooper-hewitt.png" }, { "id": "disco-dekmantel", "theme": "psychedelic underground", "prompt": "A maximalist event page with acid neon colors, distorted typography, and dense flyer-style information layout", "brief": "Build an event landing page that communicates underground energy through pure design language rather than literal nightlife imagery. Use a near-black ground with clashing acid neons—lime, orange-red, and cyan—as the sole color system. Typography should be dense, bold, and intentionally difficult to parse at speed: all-caps blocks with minimal leading, interrupted by color-coded highlights. The hero should feature a massive organic shape (oval/blob) containing the event title in distorted, custom letterforms that appear to melt or wobble. The overall effect should be information overload as aesthetic strategy.", "rubric": { "typography": "Extremely bold condensed sans-serif for display text, custom/distorted letterforms with organic edges; body text in heavy bold sans, all caps, tightly packed with minimal leading (0.8-0.9 line-height); color-coded highlights within text blocks (lime, yellow) for emphasis; irregular baselines and 'melting' distortion on key letterforms", "color": "Near-black ground (#0a0a0f to #0f172a); acid lime/chartreuse (#a3e635) for primary accents and oval backgrounds; bright orange-red (#f97316) for main title lettering; cyan (#06b6d4) for borders and secondary accents; yellow (#facc15) for highlight text; high-contrast clashing relationships between all accent colors", "layout": "Single-column dense text flow filling viewport width; massive centered organic shape (oval/blob) containing hero title; small square abstract graphics positioned as interruptions in text flow; horizontal nav bar with small text links at top; no traditional grid—text flows as continuous mass", "motion": "Subtle wobble or distortion animation on hero letterforms (skew ±2°, 3-4s ease-in-out); floating/bobbing motion on organic oval shapes (translateY ±10px, 5-6s); color pulse or glow effect on acid accents; text blocks with slight parallax on scroll (different speeds for depth)", "texture": "Drop shadows on oval shapes creating pseudo-3D depth; biomorphic abstract shapes in contrasting colors; no photography—purely graphic/typographic treatment; organic blob motifs countering rigid geometry" }, "banned_depiction": [ "disco balls", "turntables", "speakers", "crowd photos", "DJ portraits", "stage lights", "vinyl records", "nightclub interiors", "dancers" ], "must_not": [ "Use clean, readable typography—embrace friction and density", "Add whitespace or breathing room—fill the frame", "Use subtle or harmonious colors—clash aggressively", "Include literal music or nightlife imagery" ], "derived_from": "https://dekmantelfestival.com", "source_screenshot": "data/screenshots/disco-dekmantel.png" }, { "id": "dogstudio", "theme": "dark cinematic editorial", "prompt": "A creative agency page with a Didone serif headline, a dramatic illustrated creature, and bioluminescent gradients on near-black", "brief": "Build a creative agency landing page that balances refined craft with deliberate irreverence. Use a near-black ground with bioluminescent gradients—rich purples, teals, and muted roses—creating a dark, atmospheric stage. The hero should feature a massive Didone-style serif headline with extreme contrast between thick and thin strokes, paired with a sculptural illustrated creature rendered in a painterly style. The vast lower portion should remain pure black, suggesting depth and mystery. Typography hierarchy should be extreme: massive display serif against tiny functional sans-serif.", "rubric": { "typography": "Didone-style high-contrast serif for hero headline (extreme thick/thin contrast, dramatic terminals); body text in small, light-weight grotesque sans-serif (300-400 weight, 14-16px); navigation in minimal sans-serif; strong scale contrast between display (48-72px) and body (14-16px); tracking slightly tight on headline (-0.01em)", "color": "Near-black ground (#0a0a0f to #0f172a); rich purple/violet gradients in upper zone (#7c3aed to #4c1d95); teal/cyan accents (#06b6d4) in illustrated elements; muted rose/pink undertones (#f472b6 at 30% opacity); white/off-white (#f8fafc) for primary text; gray (#94a3b8) for secondary text; single warm accent for CTAs (coral/red #ef4444)", "layout": "Asymmetrical broken grid: massive left-aligned headline counterweighted by right-aligned body text; content clustered in upper 40% of viewport; lower 60% as pure black negative space; minimal navigation (logo top-left, hamburger top-right, centered link); floating modal element integrated into composition", "motion": "Subtle parallax on illustrated creature (slower scroll speed than text); floating leaf/debris elements with gentle drift (translateX/Y ±20px, 10-15s ease-in-out); gradient background with slow color shift (hue rotate ±10°, 20s); headline with subtle scale on load (0.95 to 1.0, 0.8s ease-out); atmospheric haze with opacity pulse", "texture": "Painterly brushstroke texture on illustrated creature; subtle geometric line elements crossing behind headline (thin, 1px, low opacity); soft atmospheric gradient haze; floating organic debris; sculptural lighting with chiaroscuro effect on central figure" }, "banned_depiction": [ "wolves", "dogs", "animals", "creatures", "botanical illustrations", "leaves", "nature photography", "forest scenes" ], "must_not": [ "Use a literal creature or animal illustration—create an abstract sculptural form instead", "Fill the lower viewport with content—keep it as pure black void", "Use bright or cheerful colors—keep it dark and bioluminescent", "Add conventional navigation bars or sidebars" ], "derived_from": "https://dogstudio.co", "source_screenshot": "data/screenshots/dogstudio.png" }, { "id": "epic", "theme": "warm editorial luxury", "prompt": "An agency page with warm light gray ground, high-contrast serif headlines, and single saturated accent object breaking the grid", "brief": "Build a landing page for a creative agency or studio. The design must use warm light gray background (#D4D4D4 or #D8D8D8) rather than pure white—crucial to atmosphere, avoiding sterile corporate feel. Use high-contrast serif (Bodoni/Didot/Fleuron-class) for massive, lowercase, tightly-tracked headlines. Clean grotesque sans-serif for UI and body. Body copy should be generous in size (18-20px) with strategic bold weight applied to keywords. Micro-typography (dates, labels) should be extremely small, uppercase, widely letter-spaced (~0.3em). Include a single saturated accent object (like a red vehicle) as immediate focal point, positioned to break the horizontal plane and overlap the headline. Layout uses asymmetric balance with contained narrow central column (~800-900px) creating editorial intimacy.", "rubric": { "typography": "High-contrast serif display (Bodoni/Didot-class) for headlines at 60-80px, tight letter-spacing, mixed weight treatment; clean grotesque sans-serif (Inter/Helvetica-class) for body at 18-20px; micro-typography at 10-11px uppercase with 0.3em tracking", "color": "Warm light gray ground #D4D4D4 or #D8D8D8, near-black #1A1A1A or #222222 for primary text, medium gray #666666 for secondary text, single saturated accent color (red vehicle) as only color focal point", "layout": "Narrow centered container ~800-900px max-width, asymmetric hero with image breaking rightward into text column, generous section padding 80-120px vertical, single horizontal 1px gray dividers between sections", "motion": "Inferred: subtle parallax on floating image, smooth scroll transitions, play button with curved text animation", "texture": "Thin 1px gray horizontal rules, circular play button (~80px diameter) with curved text, video player with minimal white controls on black, soft shadow beneath floating product image" }, "banned_depiction": [ "literal agency team photos", "office interior shots", "award trophies or certificates", "client logos grid as hero", "multiple color accent objects", "bright gradient backgrounds" ], "must_not": [ "use pure white background", "use sans-serif for headlines", "create a wide full-width layout", "include multiple accent colors", "use card-based content containers" ], "derived_from": "https://www.epic.net/en", "source_screenshot": "data/screenshots/epic.png" }, { "id": "feltron", "theme": "personal data index", "prompt": "A chronological portfolio index with rainbow color-coding, single neo-grotesk typeface, and temporal scale variation", "brief": "Build an index or archive page for any body of work that uses a single neo-grotesk typeface (Helvetica/Akzidenz-Grotesk-class) with weight and scale as the only hierarchy tools. Assign each entry a distinct full-saturation hue from across the spectrum—red, cyan, teal, yellow, purple—creating a mnemonic indexing system where color becomes navigational. Layout uses horizontal flow with comma-separated entries and line breaks creating rhythmic chunks. Implement temporal scale variation: recent work expands into full project names (high information density), while older work compresses into year markers or minimal labels. The visual 'cooling' from named works to pure dates should mirror memory's fading specificity.", "rubric": { "typography": "Single neo-grotesk family (Helvetica/Arial-class) with no stylistic variation—no italics, bold, or condensed forms; uniform size across entries; hierarchy achieved through color and spatial grouping rather than typographic scale; neutral 'invisible' quality lets color carry semantic weight", "color": "Full-saturation spectral colors assigned per entry without fixed saturation/value rules—red, cyan, teal, yellow, purple, etc.; each entry gets unique visual identity; no fixed palette—span full hue rotation; pure black for UI chrome ('Feltron', 'Shop', 'Info')", "layout": "Horizontal text flow reading left-to-right; comma-separated lists; line breaks create rhythmic chunks without strict grid alignment; negative space surrounds text block centering attention; minimal UI chrome; chronological table of contents structure", "motion": "Subtle hover states on entries; potential color shifts or underlines on interaction; smooth scroll behavior", "texture": "Pure flat color on text; no background texture or decoration; clean digital precision; white or near-white ground" }, "banned_depiction": [ "literal calendar or timeline graphics", "clock or time imagery", "corporate portfolio grids", "project thumbnails or previews", "literal 'data' imagery like binary code" ], "must_not": [ "use more than one typeface", "create typographic hierarchy through size or weight", "use a fixed color palette or brand colors", "include project descriptions or previews", "use a conventional grid layout" ], "derived_from": "http://feltron.com", "source_screenshot": "data/screenshots/feltron.png" }, { "id": "figma", "theme": "playful professionalism", "prompt": "A SaaS creative tool homepage balancing professional credibility with approachable energy", "brief": "Build a product homepage for a creative tool that targets professional designers without feeling stodgy. The design should communicate the product's value through layered translucent mockups showing actual output rather than interface chrome. Use a clean geometric type system with clear weight hierarchy. A single lavender announcement banner adds event-driven energy to an otherwise restrained palette. This is friendly enterprise—professional but not corporate.", "rubric": { "typography": "Clean geometric sans-serif throughout (Inter or similar). Large display headlines (~48-56px, weight 500-600, tight line-height ~1.1). Body text smaller (~14-16px, weight 400, gray color #666666). Navigation links (~14px, weight 400-500). Button text (~14-16px, weight 500-600). Announcement banner uses custom/display typeface—bold, geometric, slightly stylized. Clear hierarchy through weight contrast alone.", "color": "Pure white (#FFFFFF) or near-white background. Pure black (#000000) for headlines and primary buttons. Dark gray (#333333) for secondary text. Medium gray (#666666) for body text. Soft lavender/purple (#D4A5D4 or #C8A2C8) for announcement banner—single chromatic accent. Product screenshots provide purple/blue tints creating cohesion with banner.", "layout": "Fixed navigation bar at top (~60-70px height) with logo left, product links center, CTAs right. Asymmetric two-column hero (~40% text / ~60% image) with text vertically centered to image. Layered translucent UI mockups in hero showing design output. Announcement banner below hero (~50-60px height) with event info. Two-column feature grid below with generous whitespace (~40-50vh) between sections.", "motion": "Subtle hover states on navigation and CTAs. Mockups may have subtle float or parallax effect. Smooth scroll behavior. Feature icons (simple geometric shapes) may animate on scroll into view. No aggressive animations—motion should feel responsive, not decorative.", "texture": "Clean, flat surfaces. Glassmorphism/translucent effects in hero imagery. No gradients on backgrounds. Rounded corners on buttons and mockups (4-8px). Subtle shadows on floating UI elements." }, "banned_depiction": [ "clowns", "circus imagery", "cartoon characters", "overly playful illustrations", "gradients", "sparkles", "emojis" ], "must_not": [ "use multiple bright accent colors", "employ corporate stock photography", "use serif typefaces", "include dense feature lists", "use aggressive popups or modals", "employ dark mode" ], "derived_from": "https://www.figma.com", "source_screenshot": "data/screenshots/audit-figma.png" }, { "id": "gianlucagradogna", "theme": "dual identity editorial", "prompt": "A portfolio website with split-screen duality, dark mode, and editorial catalog numbering", "brief": "Build a portfolio for a multidisciplinary creative that literally splits the practice into two visual zones—structured design versus organic photography. The design should use binary black-white palette to enforce this duality. Typography employs extreme scale contrast: tiny uppercase metadata with wide tracking versus massive bold headlines. Editorial numbering creates catalog-like pacing without decorative elements. This is anti-trend craft: no gradients, no glassmorphism, pure proportion and contrast.", "rubric": { "typography": "Extreme scale hierarchy: massive high-contrast serif for headlines (Fraunces-class, Playfair Display, or editorial serif—tight letter-spacing, dramatic scale). Clean sans-serif for metadata (Inter, Helvetica Neue, Söhne—microscopic 10-12px, all-caps, +0.15em tracking). Parenthetical numbering system: (1*), (2*) — adds editorial catalog feel. 'Scroll Up' and 'Scroll Down' indicators in small subtle sans-serif.", "color": "Strict monochromatic: deep charcoal ground (#0A0A0A) for left zone, pure white cards (#FFFFFF) and text. Near-black (#1A1A1A) for secondary dark areas. Muted gray (#888888 or #666666) for secondary text. Zero accent colors—natural greens from photography provide only chromatic variation.", "layout": "Asymmetrical split-screen: left 40% dark moody abstract imagery (organic/black fluid forms), right 60% full-bleed photography (Bali rice terraces). Center-left overlay: white rectangular card breaking the grid containing primary identity info. Small inset image (~200px) positioned between words in headline creating dimensional interaction. Z-depth: background image → dark overlay zones → white card → floating small image → typography.", "motion": "Parallax-driven storytelling with sequential reveals. Scroll indicators suggest vertical navigation with directional awareness. Hover states on scroll indicators. Smooth transitions between sections. Images may have subtle scale on scroll. No snap scrolling.", "texture": "Monochrome base with full-color photography. No gradients, no glassmorphism. Cinematic quality with atmospheric haze and dramatic lighting. Dark mode dominant with strategic white 'lightbox' moments." }, "banned_depiction": [ "skill bars", "software icons", "camera icons", "design tool logos", "process timelines", "client logos", "testimonials" ], "must_not": [ "use color beyond black/white/grays (except photography)", "center content symmetrically", "include a services list", "use button-style CTAs", "employ gradients or glassmorphism", "use sans-serif for headlines" ], "derived_from": "https://gianlucagradogna.com", "source_screenshot": "data/screenshots/gianluca-gradogna.png" }, { "id": "glossier", "theme": "clinical-cool commerce", "prompt": "A beauty e-commerce page with stark white ground, product-derived accent colors, and natural skin texture photography with diverse casting", "brief": "Build an e-commerce homepage for a beauty or skincare brand. The design must use clean geometric sans-serif (Apercu/Helvetica-class) as invisible infrastructure—all-caps navigation with generous letter-spacing creates airy editorial feel. Color system is stark white ground with product-derived accents, avoiding beauty-industry gold/black luxury cues or aggressive conversion colors. Layout demonstrates radical whitespace—roughly 40% of viewport is empty, products breathe in generous padding. Photography treatment shows visible skin texture and real faces rather than airbrushed perfection. Asymmetric grids and horizontal product scrolling feel discovered rather than enforced. Include 4-column product grid with color swatch selectors, 2x2 large category cards with centered labels, and full-bleed hero with text overlay.", "rubric": { "typography": "Clean geometric sans-serif (Apercu/Helvetica-class), all-caps navigation 11-12px with generous letter-spacing, H1 hero 24-28px medium weight, product names 13px medium, body 12-14px regular, prices with superscript cents", "color": "Off-white/cream ground #FAFAFA or #F5F5F5, near-black #1A1A1A text, medium gray #666666 secondary, Glossier red #E85D4E accent, burgundy navigation bar #4A2C2C, navy #1E3A5F for badges, product-derived pastel accents", "layout": "12-column grid, 4-column product grid with 20-24px gutters, 2x2 large category cards (~400px), asymmetric hero with text overlay top-left (~300px wide), container max-width 1200-1400px", "motion": "Horizontal product carousel, hover states on product cards, smooth scroll transitions", "texture": "Product cards with white backgrounds, 1px black border buttons with sharp corners (no radius), small color swatch squares (~16px) with active ring state, badges as small rectangles (BEST SELLER, FREE SHIPPING)" }, "banned_depiction": [ "airbrushed or retouched skin", "traditional beauty industry glamour photography", "gold or metallic luxury packaging", "heavy makeup looks on models", "decorative floral or feminine motifs", "celebrity endorsements" ], "must_not": [ "use gold or black luxury cues", "show airbrushed perfect skin", "use serif typefaces", "include aggressive sale messaging", "use rounded corners on buttons" ], "derived_from": "https://www.glossier.com", "source_screenshot": "data/screenshots/glossier.png" }, { "id": "guillaumecolombel", "theme": "zen immersive", "prompt": "A portfolio website that is a 3D environment rather than a page, with brutalist typography floating in atmosphere", "brief": "Build a project showcase that rejects the grid entirely in favor of an immersive 3D environment. The design should communicate craft through atmosphere—each project is a world to enter, not a case study to read. Combine Japanese minimalist aesthetics (wabi-sabi, ma) with confrontational brutalist typography. The single accent color should function as a focal point in an otherwise monochromatic environment. This is anti-portfolio: no thumbnails, no grids, no scroll hijacking—just presence.", "rubric": { "typography": "Extreme scale contrast: massive bold condensed grotesk for project titles (Monument Extended-class, all-caps, tight tracking), microscopic technical sans for metadata (Inter-class, 10-11px, all-caps, +0.15em tracking). Title should dominate 30-40% of viewport width. Metadata in dark pills or bars beneath title.", "color": "Monochromatic environment: muted sage/mint green atmosphere (#A8C5B5 to #7BA89A), pale cyan water/teal surfaces (#B8D4C8), soft misty aqua sky (#C5DDD2). Single warm accent: deep crimson/magenta (#C41E3A) as focal point. Pure white (#FFFFFF) for titles, off-white (#E8E8E8) for UI.", "layout": "True full-bleed immersive experience with no container constraints. 3D scene occupies 70-80% of viewport. Floating header with name left, navigation right. Vertical thumbnail rail fixed to right edge (project switcher). Z-depth layering with UI floating above 3D environment.", "motion": "WebGL atmosphere: subtle water ripple distortion, volumetric fog, floating dust particles in light rays. Parallax on mouse movement (multi-plane depth). Smooth camera transitions between project worlds. Chromatic aberration and film grain post-processing. Scroll triggers scale/fade on title reveals.", "texture": "Stylized low-poly 3D aesthetic. Volumetric atmosphere creating depth layers. Subtle film grain overlay. Depth of field blur on background elements. Soft diffused global illumination with warm rim lighting." }, "banned_depiction": [ "laptop mockups", "phone screens", "UI screenshots", "grid layouts", "process diagrams", "skill bars", "client logos" ], "must_not": [ "use a traditional grid layout", "include case study text blocks", "show project thumbnails in a gallery", "use scroll hijacking or snap scrolling", "include a 'hire me' CTA button", "use bright saturated colors throughout" ], "derived_from": "https://guillaumecolombel.fr", "source_screenshot": "data/screenshots/guillaume-colombel.png" }, { "id": "hellomonday", "theme": "minimal editorial gallery", "prompt": "A monochrome portfolio with elegant serif headlines, asymmetric masonry grid, and hand-drawn line art illustration", "brief": "Build a portfolio page for any creative work that uses strict monochrome: pure white (#FFFFFF) ground, pure black (#000000) for all typography and line art. Pair elegant high-contrast serif display for section headers with clean sans-serif for project titles and metadata. Layout uses an asymmetric masonry grid with 3 columns and varying card heights creating organic rhythm. Include a large hand-drawn line art illustration in the hero—thin continuous black lines, elongated elegant figures, minimal detail, no fill or shading. The style should feel human and artisanal against the precise digital grid.", "rubric": { "typography": "High-contrast serif (Times/Georgia-class) for display headlines at 48-72px with generous letter-spacing; clean sans-serif for project titles and body at 14-18px; light gray for metadata tags; extreme size contrast between oversized headers and minimal supporting text", "color": "Strict monochrome: pure white (#FFFFFF) dominant ground; pure black (#000000) for all text and illustration; light gray (#999999) for secondary metadata; zero color, gradients, or accent hues", "layout": "Asymmetric masonry grid with 3 columns and intentionally irregular card heights; generous white space between cards (24-40px gutters); no strict baseline alignment; cards stagger vertically to avoid rigid rows; fixed time indicator in top-right corner", "motion": "Subtle hover states on project cards; potential parallax on hero illustration; smooth scroll behavior befitting gallery experience", "texture": "Pure flat color only; no grain, noise, or texture; hand-drawn line art provides all visual interest; clean digital precision in grid" }, "banned_depiction": [ "color photography", "gradient backgrounds", "decorative patterns", "literal 'art gallery' interior photos", "corporate team portraits" ], "must_not": [ "use any color beyond black and white", "include photography without converting to monochrome", "use a rigid aligned grid", "add decorative elements beyond the line art", "use warm off-white or cream backgrounds—pure white only" ], "derived_from": "https://hellomonday.com", "source_screenshot": "data/screenshots/hellomonday.png" }, { "id": "henri-heymans", "theme": "brutalist fluid 3D", "prompt": "A portfolio with pure black ground, condensed grotesk all-caps typography, centered vertical stack layout, and blurred organic 3D form", "brief": "Build a portfolio page for any technical creative discipline that uses pure black (#000000) as the dominant ground with pure white (#FFFFFF) text for maximum contrast and dramatic effect. Typography uses condensed grotesque sans-serif (Neue Haas Grotesk/Helvetica Narrow-class) in all caps with tight letterspacing throughout—words become geometric blocks rather than readable sentences. Layout is rigidly centered on a vertical axis—a manifesto-like stack with labels ('MYSELF', 'TECHNOLOGIES', 'CONTACT') above content blocks. Hero features a heavily blurred, twisted 3D ribbon form—abstract continuous topological surface with soft Gaussian-blurred edges, self-intersecting möbius-like topology, high-key lighting. The blur creates atmospheric perspective and suggests WebGL/Three.js capability without showing literal code.", "rubric": { "typography": "Condensed grotesque sans-serif (Neue Haas Grotesk/Helvetica Narrow-class) in all caps throughout; tight letterspacing possibly negative tracking; multiple scales hierarchically: microscopic navigation, massive body text, small labels; density of all-caps condensed type creates visual texture as pattern", "color": "Binary palette only: pure black (#000000) dominant ground; pure white (#FFFFFF) for text and 3D form; grayscale gradients in 3D form for depth; zero additional colors—achromatic discipline", "layout": "Rigid axial symmetry—everything collapses to vertical centerline; centered vertical stack: hero form → bio text → tech stack → contact; monumentality like a plaque or specification sheet; horizontal lines as section dividers below", "motion": "3D form with slow rotational or morphing animation; blur responds to cursor or scroll; GSAP-powered smooth transitions; the form IS the demonstration of technical capability", "texture": "Gaussian blur on 3D form creating atmospheric perspective; crisp vector typography contrasting with organic blur; no grain or noise; pure digital precision except for the intentional blur effect" }, "banned_depiction": [ "literal code snippets", "computer or tech imagery", "corporate headshots", "project thumbnails or previews", "literal '3D' or 'animation' iconography" ], "must_not": [ "use any color beyond black and white", "include photography or conventional project previews", "use a conventional grid layout", "add decorative elements", "use readable sentence case typography—strict all caps" ], "derived_from": "https://henriheymans.com", "source_screenshot": "data/screenshots/henri-heymans.png" }, { "id": "ikea", "theme": "democratic functionalism", "prompt": "A mass-market retail homepage with Scandinavian clarity and bento-box promotional grid", "brief": "Build a retail homepage that maintains design integrity at mass-market scale. Use a bright blue color coding consistently across all promotions to signal 'deal/save.' Employ an asymmetric masonry grid that creates visual interest without chaos. Lifestyle photography should introduce warmth through real spaces rather than UI decoration. The design should feel democratic and accessible—functional, clear, with aspirational but achievable imagery.", "rubric": { "typography": "Clean geometric sans-serif throughout (Noto-class, Verdana, or similar custom). Strong weight hierarchy: bold (700) for promotional percentages and headlines, regular (400) for product names and terms. All caps used sparingly for labels. Sizes: large (24-32px) for discounts, medium (16-18px) for product names, small (12-14px) for terms and conditions.", "color": "Bright cyan-blue (#0058AB or #0078D4) dominant for CTAs, promotional banners, links. Yellow (#FFDB00 or #FBD914) restrained to logo/brand mark only—shows discipline. White (#FFFFFF) for backgrounds and text on dark. Dark gray/black (#111111 or #333333) for body text. Light gray (#F5F5F5 or #EEEEEE) for section backgrounds.", "layout": "Fixed sticky header with black top bar, white main nav with centered search. Horizontal scrollable category row with icon + text treatment. Asymmetric bento-box promotional grid: large hero cards (full-height), medium squares, horizontal rectangles, small promotional tiles. Mix of card sizes creates visual interest. 'Family price' badge (blue tag) in upper left of applicable items. Arrow icons (→) indicating clickability.", "motion": "Subtle hover states on cards: slight shadow elevation or scale. Smooth horizontal scroll on category row. Carousel functionality for promotions. No aggressive animations—motion should feel responsive and helpful, not decorative.", "texture": "Flat design with minimal shadows (4-8px radius on cards). No gradients. Rounded corners on cards and buttons. Photography: bright natural lighting, Scandinavian aesthetic, lifestyle contexts, diverse representation, clean uncluttered compositions." }, "banned_depiction": [ "Swedish flags", "meatballs", "furniture assembly diagrams", "warehouse interiors", "yellow and blue stripes", "cartoon characters" ], "must_not": [ "use yellow beyond the logo", "employ dark mode", "use serif typefaces", "include dense text blocks", "use aggressive urgency tactics (countdown timers, flashing)", "employ luxury styling" ], "derived_from": "https://www.ikea.com/us/en/", "source_screenshot": "data/screenshots/audit-ikea.png" }, { "id": "jordi-garreta", "theme": "cinematic dark minimalism", "prompt": "A portfolio with corner-anchored navigation, a central 3D cylindrical scroll element, and near-black void space", "brief": "Build a portfolio page that treats content as archival material in a dark, contemplative space. Use a near-black ground (#0a0a0a) with 60%+ of the viewport as intentional negative space. Navigation should be corner-anchored—name and metadata in the top corners, controls at the bottom—creating a frame around a central 3D cylindrical element. This cylinder should contain image planes mapped to its interior, suggesting a scrollable time tunnel or memory cylinder. Typography should be microscopic and light-weight, creating hierarchy through position rather than scale.", "rubric": { "typography": "Extremely small, thin sans-serif (300 weight) for all UI labels; all-caps treatment throughout; monospace or highly geometric sans for data-like text (timestamps, coordinates); minimal contrast in weight—everything light/regular; hierarchy achieved through position (corners) rather than size; point sizes in 10-12px range for navigation, 8-10px for metadata", "color": "Near-black ground (#0a0a0a to #1a1a1a); muted earth tones in cylindrical container—olive, tan, desaturated brown (#8b7355, #a0926b); faint purple/blue glow accents (#6366f1 at 20% opacity); soft skin tones in photography; extremely low saturation throughout; subtle warm-cool tension between earthy cylinder and cool background", "layout": "Asymmetrical corner anchoring: text pinned to all four corners; central cylindrical/tunnel form as focal point in upper third; horizontal band of cylinder cutting across viewport; generous negative space with lower 60% nearly pure black; navigation at bottom edge in bracketed format [ LABEL ]", "motion": "Cylindrical rotation mapped to vertical scroll with momentum-based inertia; subtle parallax on corner elements (different scroll speeds); gentle floating motion on cylinder (translateY ±5px, 8s ease-in-out); fade transitions between image planes on cylinder rotation; grain/noise texture with subtle animation (opacity fluctuation 0.03-0.05)", "texture": "Subtle film grain or noise throughout dark areas at 3-5% opacity; soft vignette darkening at cylinder edges; 3D rendered cylindrical form with curved image planes; faint architectural or structural imagery visible in upper cylinder portions" }, "banned_depiction": [ "laptop screens", "code snippets", "technical diagrams", "workspace photos", "coffee cups", "desk setups", "gadget collections" ], "must_not": [ "Use bright or saturated colors—keep it muted and dark", "Fill the viewport with content—embrace the void", "Use traditional navigation bars or hamburger menus", "Add decorative UI elements or icons", "Use large typography—keep it microscopic" ], "derived_from": "https://www.jordigarreta.com", "source_screenshot": "data/screenshots/jordi-garreta.png" }, { "id": "josh-comeau", "theme": "playful technical education", "prompt": "A personal site with soft blue gradient header, 3D meditating character, pink accent labels, and serif/sans name pairing", "brief": "Build a personal site for technical education that balances credibility with approachability. Use a soft sky blue gradient header that creates an open, airy mood against a white content ground. The hero should feature a 3D illustrated character in a meditative pose with colorful confetti particles, adding whimsical personality without sacrificing readability. Typography should pair a high-contrast serif for the first name with clean sans-serif for the rest, creating friendly-intellectual tension. Pink/magenta accents should be used sparingly for section labels.", "rubric": { "typography": "Clean geometric sans-serif for body and UI (Inter-class, 400 regular, 500 medium for nav); high-contrast serif for display name (Didone or transitional class, elegant editorial feel); all-caps small text for section labels (10-12px, wide tracking 0.1em); comfortable reading size for content (16-18px); size contrast between large display name and tiny meta text", "color": "Soft sky blue gradient header (#e0f2fe to #bae6fd); deep navy/black (#0f172a) for primary text; hot pink/magenta (#ec4899 or #db2777) accent for section labels only; white (#ffffff) content area background; multi-colored confetti particles (blues, pinks, purples) in header illustration; light gray (#e2e8f0) for subtle dividers", "layout": "Two-column asymmetric grid: left/main column (~65%) for article listings, right sidebar (~35%) for filters; full-width gradient header with centered navigation; article cards stacked vertically with generous vertical spacing (40-60px); clear hierarchy—title, description, 'Read more' link; wavy organic curves separating header from content; no borders on cards—rely on whitespace", "motion": "3D character with gentle floating motion (translateY ±10px, 5s ease-in-out); confetti particles with drift animation (translateX/Y ±20px, 8-12s); wavy separator with subtle parallax on scroll; article cards with fade-in on scroll (staggered 0.1s); hover states on links with color shift to pink accent", "texture": "3D stylized cartoon character with smooth surfaces; colorful particle/confetti dots streaming behind character; soft organic wavy curves as section dividers; clean flat design aesthetic—no heavy textures; gradient mesh in header background" }, "banned_depiction": [ "laptops", "code on screens", "keyboard typing", "developer workspace", "coffee cups", "whiteboard diagrams", "technical charts", "educational icons" ], "must_not": [ "Use a purely corporate or sterile aesthetic—embrace the playfulness", "Add dark mode as default—keep it light and airy", "Use only sans-serif—incorporate the serif accent", "Create a traditional blog layout with heavy borders or cards", "Use aggressive or salesy CTAs" ], "derived_from": "https://www.joshwcomeau.com", "source_screenshot": "data/screenshots/josh-comeau.png" }, { "id": "kidsuper", "theme": "gallery curatorial retail", "prompt": "An e-commerce page with white ground, bold condensed all-caps typography, rigid grid with border lines, and museum-like product presentation", "brief": "Build a product or collection page for any category of goods that treats merchandise as curated art objects. Use a pure white (#FFFFFF) ground as neutral exhibition space, allowing product photography to command all attention. Typography uses bold condensed sans-serif in all caps with tight letterspacing—evoking institutional signage, archival labeling, or exhibition didactics. Layout operates on a rigid modular grid with thin precise gray border lines demarcating territories—functioning like frames on museum walls. Products sit within cells like specimens in a vitrine. Photography should receive white or neutral backgrounds, mimicking art-object documentation with soft even lighting. One section may break convention with environmental context (saturated colored wall, display cases) before returning to white-field convention.", "rubric": { "typography": "Bold condensed sans-serif (Helvetica Condensed/Univers Black-class) in all caps throughout; tight letterspacing; efficient width suggesting modernity; weight ensures hierarchy at small sizes; use of × symbol for collaborations; no ornament—just information delivered with authority", "color": "Pure white (#FFFFFF) dominant ground as exhibition space; pure black (#000000) for typography; light gray (#CCCCCC) for border lines separating product cells; product photography provides all color; one section may use saturated environmental color (red wall) for contrast", "layout": "Rigid modular grid with thin border lines enforcing discipline; products in cells like vitrine specimens; visual pauses between items; scalable structure—2 columns for hero products, 4 for standard goods; gallery wall effect with framed cells", "motion": "Subtle hover states on product cells; potential image swap or zoom on hover; smooth scroll behavior; restrained motion befitting gallery atmosphere", "texture": "Thin precise border lines (1px) as frames; soft shadows on product photography; even lighting like conservation documentation; clean digital precision in grid" }, "banned_depiction": [ "literal museum interiors", "gallery or exhibition photography", "corporate retail photography", "lifestyle product shots with models", "literal 'luxury' imagery like gold or marble" ], "must_not": [ "use a dark or colored background for the main grid", "use conventional e-commerce layouts without border lines", "include prices or 'add to cart' buttons as primary focus", "use decorative elements beyond the grid lines", "create a literal 'art gallery' theme with paintings or sculptures" ], "derived_from": "https://kidsuper.com", "source_screenshot": "data/screenshots/kidsuper.png" }, { "id": "linear-app", "theme": "developer-tool minimalism", "prompt": "A dark mode SaaS landing page with pure black background, geometric sans-serif typography, and abstract 3D illustrations", "brief": "Build a landing page for a technical product or service. The design must communicate professional credibility through radical restraint: a near-black (#0a0a0a) ground creates depth and reduces eye strain. Use a geometric sans-serif (Inter-class) with extreme weight contrast—semibold 48-56px headlines with tight tracking (-0.02em) against light 14-16px body in muted gray (#a0a0a0). The palette should be monochromatic (black, white, mid-gray #888888) with minimal accent. Include abstract 3D geometric illustrations suggesting building blocks or system architecture. Generous whitespace (120px+ vertical padding) signals confidence. Product screenshots should be the only color focal point, framed with subtle borders (#262626) and soft shadows.", "rubric": { "typography": "Geometric sans-serif (Inter-class), H1 at 48-56px semibold with -0.02em tracking, body at 14-16px regular in #a0a0a0, three distinct text opacity levels for hierarchy", "color": "Near-black ground #0a0a0a, elevated surfaces at #141414, primary text white, secondary #a0a0a0, tertiary #666666, borders #262626 to #333333, minimal purple accent (#8b5cf6) only for interactive states", "layout": "Container max-width ~1200px, horizontal padding 24px→48px→80px+, vertical section spacing 120-160px, three-column feature grid with 24-32px gaps", "motion": "Inferred: subtle parallax on scroll, hover lift on cards with increased shadow, smooth transitions 200-300ms ease-out", "texture": "Subtle 1px borders on cards (#333333), large soft shadows with subtle purple/blue tint on product screenshots, 12-16px border radius on containers" }, "banned_depiction": [ "literal code screenshots", "terminal windows", "IDE interfaces", "programming language logos", "gears or cogs", "circuit board patterns" ], "must_not": [ "use blue as primary accent", "include generic tech stock photos", "use gradients in the UI", "include pricing tables", "use bright saturated colors" ], "derived_from": "https://linear.app", "source_screenshot": "data/screenshots/linear-app.png" }, { "id": "locomotive-agency", "theme": "editorial digital brutalism", "prompt": "A dark editorial portfolio with Didone serif headlines, monospace technical accents, and pixelated imagery suggesting digital transformation", "brief": "Build a portfolio page for any creative practice that uses a binary palette of deep black (#000000) and pure white (#FFFFFF) with a single vivid crimson accent (#E31B23) for atmospheric intensity. Pair high-contrast Didone serifs (thick-thin stroke modulation) for editorial authority with monospace for technical metadata. Include pixelated or mosaic-distorted photography in the hero to suggest digital craft through degradation. Use horizontal hairline rules as structural rhythm between project names. Layout should be deliberately asymmetric with elements floating in unexpected positions.", "rubric": { "typography": "Didone-style serif (Fleuron/Ogg/GT Super-class) for headlines with high stroke contrast and tight letterspacing; monospace for metadata and labels ('OPS DES DEV', 'UNIT') at 10-12px; clean sans for navigation; extreme scale contrast between massive headlines and whisper-small functional text", "color": "Binary foundation: deep black (#000000) and pure white (#FFFFFF); single vivid crimson accent (#E31B23) used sparingly for atmospheric intensity; no gradients or additional colors", "layout": "Asymmetric placement with deliberate misalignment; full-bleed hero with pixelated imagery; floating marginalia (dates, labels at right margin); centered project list with horizontal hairline dividers; generous negative space", "motion": "Pixelation effect on hero imagery suggesting real-time distortion; parallax layering between text and image; scroll-triggered reveals for project list items; potential hover states on monospace labels", "texture": "Mosaic pixelation on photography reducing fidelity to large color blocks; digital artifacts as aesthetic; sharp typographic edges; no decorative textures or patterns" }, "banned_depiction": [ "agency logos", "literal code snippets", "tech industry iconography", "corporate team photos", "literal 'digital' imagery like circuits or pixels as decoration" ], "must_not": [ "use more than one accent color", "include photography without distortion treatment", "use a conventional aligned grid", "add decorative elements beyond the horizontal rules" ], "derived_from": "https://locomotive.ca/en", "source_screenshot": "data/screenshots/locomotive-agency.png" }, { "id": "locomotive", "theme": "experimental digital craft", "prompt": "A bold experimental portfolio with complementary color tension, mixing classical serif typography with digital distortion effects", "brief": "Build a portfolio page for any creative discipline that uses aggressive complementary color pairing—warm red-coral (#E85A3C) against cool mint (#A8D5E5)—to create visual tension. Pair high-contrast transitional serifs for editorial headlines with clean grotesque sans for functional text. Include intentional digital artifacts like pixelation or dithering on imagery to suggest craft through distortion. Use asterisks as bracketing punctuation (*word*) to create signature rhythm. Layout should reject strict alignment in the hero, then shift to a rigid centered list with hairline horizontal rules for project names.", "rubric": { "typography": "High-contrast transitional serif (Farnham/Tiempos-class) for display headlines at 48-72px; clean grotesque sans (Neue Montreal/Helvetica-class) for body and UI at 14-16px; monospace for metadata badges ('OPS DES DEV') at 10-12px; tight tracking (-0.02em) on headlines", "color": "Warm red-coral dominant (#E85A3C) in hero against cool mint accent (#A8D5E5); pure black (#000000) for text; pure white (#FFFFFF) for content sections; zero gradients—flat color blocks only", "layout": "Anti-grid hero with overlapping z-layers and asymmetric placement; rigid centered list format for projects with 1px horizontal rules as rhythmic dividers; generous whitespace (120px+ section padding)", "motion": "Pixelation/mosaic distortion on hero imagery suggesting real-time shader effects; parallax layering between color blocks, photography, and text; scroll-triggered reveals for project list items", "texture": "Intentional lo-fi pixelation on photography; digital compression artifacts as aesthetic; flat color blocks with sharp edges; no shadows or gradients" }, "banned_depiction": [ "agency logos", "client logos", "team portraits", "literal train or locomotive imagery", "corporate office photography" ], "must_not": [ "use the actual asterisk motif without variation", "replicate the exact '4' shape from the hero", "use generic tech industry blues", "create a literal 'digital' theme with circuit patterns or code snippets" ], "derived_from": "https://locomotive.ca", "source_screenshot": "data/screenshots/locomotive.png" }, { "id": "luxury-byredo", "theme": "warm minimalism", "prompt": "A luxury brand page with custom geometric stencil wordmark, muted floral photography, and extreme scale contrast between monumental typography and microscopic details", "brief": "Build a landing page for a luxury or artisanal brand. The design must embody radical restraint rather than opulence: pure black-and-white foundation with desaturated painterly imagery (mauve, soft yellow, dusty blue, sage) providing emotional atmosphere without competing. Use a custom geometric stencil wordmark with characteristic cutouts as the primary brand asset—monumental scale (48-72px) against microscopic footer legal text (8-10px). Product photography should treat the hero object as a shrine-like icon against impressionistic botanicals. No pricing, no urgency CTAs, no social proof—pure brand meditation. Cookie consent should be unusually elegant: boxed, centered, refined button styling rather than crude banner.", "rubric": { "typography": "Custom geometric stencil display for wordmark (bold, distinctive letterform cutouts), neo-grotesque sans-serif for body (Helvetica-class), extreme scale contrast 48-72px logo vs 8-10px legal text, wide letter-spacing (0.1-0.15em) on footer labels", "color": "Pure white #FFFFFF ground, near-black #000000 text, off-white #F5F5F5 for secondary surfaces, strictly achromatic UI with colorful content from photography only", "layout": "Full-bleed hero image with centered logo overlay, generous vertical spacing (60-100px), 4-column asymmetric footer grid (35-40% / 20% / 20% / 20%), max-width container 1200-1400px", "motion": "Inferred: smooth fade transitions, subtle zoom on product hover, gentle parallax on scroll", "texture": "No visible borders or shadows on primary content, subtle 1px footer divider, outlined/stroke treatment on hero logo (hollow letters), shallow depth of field in photography" }, "banned_depiction": [ "literal perfume bottles", "flowers as decorative elements", "gold foil or metallic textures", "marble backgrounds", "script or cursive fonts", "ornate frames or borders" ], "must_not": [ "include pricing information", "use 'shop now' urgency language", "show star ratings or reviews", "use traditional luxury cues like gold or black backgrounds", "include social proof counters" ], "derived_from": "https://www.byredo.com", "source_screenshot": "data/screenshots/luxury-byredo.png" }, { "id": "madeinevolve", "theme": "corporate brutalism", "prompt": "An agency page with monumental condensed type, engineering grid lines, and a motion-blurred figure on near-black", "brief": "Build an agency landing page that treats commercial work with editorial gravity. Use a near-black ground with pure white text and zero chromatic accents—strictly achromatic. The hero should feature a monumental condensed sans-serif headline at massive scale, stacked tight and intersected by photography. The figure should be captured in motion, back to camera, suggesting velocity and dynamism. Service capabilities should be listed as dense vertical taxonomy in small type, right-aligned, treated as technical specifications rather than marketing claims.", "rubric": { "typography": "Extremely bold condensed sans-serif for display (compressed grotesque like Helvetica Compressed-class), all caps, massive scale (72-120px); clean lightweight sans-serif for body/UI (300-400 weight, 14-16px); monospace or tabular sans for service tags (UX/UI, Dev, SEO, etc.); extreme width contrast between ultra-condensed headlines and standard-width body; tight tracking on display (-0.02em)", "color": "Deep black ground (#0a0a0a); pure white text (#ffffff); dark grays (#1a1a1a to #2a2a2a) for service cards and subtle UI; strictly achromatic—no accent colors; extreme contrast between white text and black ground; minimal tonal range for high-end austerity", "layout": "Asymmetric editorial structure: split navigation (logo left, contact right, menu far right); centered massive headline with figure breaking the grid behind; thin horizontal divider separating hero from content; left column with minimal labels; right column with dense vertical service list; four dark gray rectangular cards in horizontal row at bottom; loose editorial grid with intentional negative space", "motion": "Motion-blurred figure suggesting dynamism; subtle parallax on headline and figure (different scroll speeds); service cards with hover state (brightness increase to 1.1); blueprint grid lines with subtle fade-in on scroll; headline with slight scale on load (0.98 to 1.0, 0.6s)", "texture": "Faint technical/blueprint grid lines in background at 5-10% opacity; desaturated photography with low-key lighting; motion blur on central figure; no decorative elements—no icons, illustrations, or patterns beyond photographic content" }, "banned_depiction": [ "shopping carts", "e-commerce interfaces", "product mockups", "laptop screens showing stores", "credit cards", "delivery trucks", "retail photography", "fashion models facing camera" ], "must_not": [ "Use color accents—keep it strictly black and white", "Add decorative icons or illustrations", "Use traditional service section layouts with icons and descriptions", "Show the figure's face or a posed portrait", "Use bright or warm photography—keep it desaturated and low-key" ], "derived_from": "https://madeinevolve.com", "source_screenshot": "data/screenshots/madeinevolve.png" }, { "id": "newyorker", "theme": "editorial authority", "prompt": "A prestigious magazine website with classical typography and restrained use of signature red", "brief": "Build a digital publication homepage that translates print editorial authority to the web. The design should signal serious, long-form journalism through classical typography while maintaining warmth and accessibility. Use a disciplined black-white-red palette where red functions as a strategic accent for urgency, not decoration. Create rhythmic pacing through asymmetric layouts and grid interruptions that reward deliberate reading rather than quick scanning.", "rubric": { "typography": "High-contrast classical serif (transitional or modern) for headlines—Irvin-class with sharp terminals and elegant proportions. Body: readable old-style or transitional serif. Navigation and metadata: clean geometric or neo-grotesque sans-serif. Italic styling for subheads and deck text. Hierarchy: massive headlines (48-64px), small all-caps section labels (11-12px, +0.1em tracking), body at comfortable 16-18px with generous line-height (1.6).", "color": "Strict black-white foundation with single vibrant red accent (#E30613 or similar). Red used ONLY for urgent/feature content, never for decoration. Grayscale photography preferred; color photography when present should be muted/desaturated. Thin 1px black rules as dividers.", "layout": "Asymmetric two-column hero (40/60 text/image split). Four-column equal grid for 'Today's Mix' section. Full-width immersive feature blocks that interrupt the grid with bold graphic backgrounds. Generous whitespace (40-60px section padding). Centered logo with thin horizontal rule separation.", "motion": "Minimal motion—this is a reading experience. Subtle hover states on article cards: slight underline or text color shift. 'Listen' buttons with headphone icons should respond to hover. No parallax, no scroll-triggered animations that distract from content.", "texture": "Clean, flat surfaces. No gradients, no shadows. Paper-white or true white backgrounds. Photography should feel documentary—black and white or natural color, never heavily processed or filtered." }, "banned_depiction": [ "magazine covers", "bylines with author photos", "social media icons", "trendy geometric patterns", "gradients" ], "must_not": [ "use red for buttons or generic CTAs", "employ sans-serif for headlines", "use card-based layouts with shadows", "include sticky social sharing bars", "use clickbait-style headline formatting" ], "derived_from": "https://www.newyorker.com", "source_screenshot": "data/screenshots/audit-newyorker.png" }, { "id": "niccolo-miranda", "theme": "neo-vintage editorial", "prompt": "A newspaper-inspired portfolio with massive condensed serif mastheads, paper grain texture, and asymmetric column grids", "brief": "Build a portfolio or publication page for any subject that treats the browser as a sheet of paper. Use a warm newsprint beige ground (#E8E0D5) with visible paper grain and fiber texture throughout. Typography should reference 19th-century broadsheets: massive condensed serif display (woodtype/Victorian masthead class) for headlines, slab serifs for subheads, and traditional serifs for body. Layout uses asymmetric column grids reminiscent of newspaper layouts with varying column widths, heavy horizontal rules, and black bands separating sections. Include stamp and postal elements like hand-stamped approval marks.", "rubric": { "typography": "Massive condensed serif display (Playfair Display Extra Bold/Bodoni Poster Compressed-class) for masthead headlines at 72-96px with extreme weight and tight letterspacing; slab serifs (Egyptian/Clarendon-style) for subheads in all-caps; traditional serif for body text; small caps and monospaced metadata; mixed case treatment for personal taxonomy", "color": "Warm newsprint beige/cream dominant (#E8E0D5) with visible paper texture; pure black (#000000) for primary text and rules; single red accent (#C41E3A or similar) used sparingly as 'breaking news' highlight; limited palette mimicking print production constraints", "layout": "Asymmetric columnar grid (3-4 vertical zones) with varying column widths; modular rectangular content blocks; heavy horizontal rules and black bands as section separators; 'above the fold' information density; dateline and publication title in masthead area; asymmetrical image placement with text wrapping", "motion": "Scroll-triggered animations suggesting printing press impressions; ink spread hover effects; parallax layering of paper textures; texture shifts on scroll", "texture": "Visible paper grain and fiber texture across all backgrounds; ink-on-paper depth where black sits atop substrate; slight imperfections suggesting creases and edge wear; halftone printing imperfections; hand-stamped postal marks" }, "banned_depiction": [ "actual newspaper clippings", "literal printing press imagery", "vintage camera or typewriter photos", "literal 'retro' elements like vinyl records", "actual postage stamps" ], "must_not": [ "use a stark white digital background", "employ smooth digital gradients", "use more than three colors", "create a literal 'old newspaper' collage aesthetic", "use skeuomorphic decoration like torn edges" ], "derived_from": "https://www.niccolomiranda.com", "source_screenshot": "data/screenshots/niccolo-miranda.png" }, { "id": "notion", "theme": "playful productivity", "prompt": "A SaaS landing page with white ground, extreme type scale contrast, rounded character illustrations, and card-based feature sections", "brief": "Build a product landing page for any tool or service that uses a near-pure white (#FFFFFF) ground with light gray (#F5F5F5) section backgrounds to create airy spaciousness. Typography uses clean geometric sans (Inter/SF Pro-class) with extreme scale contrast—massive hero headlines (60-80px) against tiny UI labels (12-14px). Include simple emoji-like vector character illustrations—circular heads, minimal facial features, flat colors with subtle shadows, diverse expressions suggesting activity. Use rounded rectangles (12-16px radius) throughout as cards with subtle borders or shadow-elevation. Feature cards should alternate between light and dark treatments, with one dark card (#1A1A1A) as visual anchor/CTA.", "rubric": { "typography": "Clean geometric sans-serif (Inter/SF Pro-class) with extreme scale contrast: hero headlines 60-80px bold tight leading; body copy 16px light weight ample line-height; section headers 32-40px bold; UI labels 12-14px; clear hierarchical separation", "color": "Near-pure white (#FFFFFF) dominant ground; light gray (#F5F5F5) for section backgrounds and card fills; soft lavender (#E8D5F7) for highlight pills; bright blue (#2563EB) for CTAs; muted yellows, blues, pinks in character illustrations; gentle gradients in UI mockups", "layout": "Card-based structure with rounded rectangles (12-16px radius); alternating full-bleed white and light gray sections; generous vertical whitespace (80-120px section padding); asymmetric balance with text left, visual right (or stacked); horizontal scroll for feature cards", "motion": "Subtle hover states on cards; smooth scroll behavior; potential floating animation on character illustrations; gentle transitions", "texture": "Subtle drop shadows on cards for elevation; soft gradients in UI mockups; flat colors on illustrations; clean digital surfaces" }, "banned_depiction": [ "literal office or workplace photography", "corporate team photos", "generic SaaS hero illustrations", "literal 'productivity' imagery like clocks or checklists", "futuristic cityscapes" ], "must_not": [ "use a dark or colored background", "create conventional feature lists without cards", "use realistic photography", "add decorative elements beyond the character illustrations", "use muted or corporate-only color palette" ], "derived_from": "https://www.notion.so", "source_screenshot": "data/screenshots/audit-notion.png" }, { "id": "playful-duolingo", "theme": "playful gamification", "prompt": "A language learning or education page with rounded geometric typography, bright lime green brand color, and flat 3D illustrations with friendly cartoon characters", "brief": "Build a landing page for an educational or consumer app. The design must embody playfulness through rounded geometric sans-serif typography, bright saturated lime green (#58CC02) as dominant brand color against clean white ground. Use flat 3D illustrations with soft shadows featuring friendly characters with oversized heads. Lowercase section headers with periods create conversational, approachable voice. Rounded corners on all containers, buttons (~12px radius), and device frames. Buttons should be generous, pill-like with uppercase text and subtle bottom shadow for depth. Two-column alternating layout for feature sections with characters and device mockups.", "rubric": { "typography": "Rounded geometric sans-serif (Nunito/Feather Bold-class), lowercase headers with periods (free. fun. effective.), body 14-16px in gray #777777, buttons uppercase bold 14px, tight letter-spacing on buttons", "color": "Bright lime green #58CC02 dominant, secondary lime #89E219 for gradients, dark green #42682B for shadows, white ground, yellow #FFC800 for rewards, orange #FF9600 for energy indicators, pink #FF4B4B for characters", "layout": "Container max-width ~1200px, alternating two-column layout (40/60 or 50/50 split), horizontal language flag carousel, generous section padding 80-100px vertical, device mockups tilted in 3D perspective", "motion": "Character illustrations with subtle bounce or float, button press states with shadow reduction, smooth scroll transitions, potential character eye-following cursor", "texture": "Flat 3D illustrations with soft shadows, rounded corners 12px on buttons and cards, subtle drop shadows on green elements for depth, geometric character design with oversized heads" }, "banned_depiction": [ "literal children or students in photos", "classroom settings", "traditional school imagery like apples or books", "alphabet or letter decorations", "graduation caps or diplomas", "chalkboards or whiteboards" ], "must_not": [ "use sharp corners on buttons or cards", "use dark or muted color palette", "include dense text paragraphs", "use formal or stiff typography", "include traditional educational iconography" ], "derived_from": "https://www.duolingo.com", "source_screenshot": "data/screenshots/playful-duolingo.png" }, { "id": "playful-poolsuite", "theme": "retro-computing leisure", "prompt": "A Windows 95-style interface with pastel pink desktop, media player window, taskbar navigation, and CRT effects", "brief": "Build a page that simulates a vintage desktop environment from the late 1990s, using the interface itself as the content rather than mere decoration. Use a soft pastel pink desktop ground with classic OS window chrome in off-white/cream with black accents. The focal point should be a centered media player window displaying content with CRT scanlines and 4:3 aspect ratio. Navigation should occur through a fixed taskbar at the bottom with pixel-art icons. The temporal fiction (dated timestamp, .avi filename) establishes a romanticized liminal space—the internet as imagined from 1997.", "rubric": { "typography": "System-style sans-serif for UI elements (MS Sans Serif-class); small caps/all-caps for headers and navigation; monospace for technical details (filenames, dimensions, timestamps); size contrast between large header text and tiny functional labels; pixel-perfect recreation of 90s UI conventions", "color": "Soft pastel pink desktop ground (#f5d5d5 or #fbcfe8); off-white/cream window chrome (#f5f5dc) with black (#000000) accents; saturated tropical colors in media content (turquoise water #06b6d4, azure sky #0ea5e9); muted pastel taskbar icons with yellow, green, blue, red accents; high contrast between muted UI and vibrant content", "layout": "Centered modal window with drop shadow floating on desktop; fixed horizontal taskbar at bottom with 8 equally-spaced icon buttons; full-width top bar with left-aligned utility, right-aligned system info; classic OS window chrome with title bar, close/minimize buttons, scroll bar; 4:3 video aspect ratio within player", "motion": "Window drag with shadow offset update; taskbar icon hover with subtle lift (translateY -2px); media player controls with immediate state change (no easing—instant 90s style); 'ON AIR' indicator with pulse animation (opacity 0.5 to 1.0, 1s loop); volume slider with stepped increments", "texture": "CRT scanline overlay on video content (horizontal lines at 2px intervals); pixelation and dithering on imagery; soft drop shadow beneath main window (8px offset, 20px blur); 90s-style pixel icons (16x16 or 32x32); beveled 3D button effects on window chrome" }, "banned_depiction": [ "beach scenes", "palm trees", "swimming pools", "tropical drinks", "sunsets", "vacation photos", "resort imagery", "travel brochures" ], "must_not": [ "Use modern UI patterns or flat design—commit to 90s aesthetics", "Add responsive breakpoints that break the desktop metaphor", "Use smooth animations or easing—keep it instant/stepped", "Include actual beach or pool imagery outside the media player—keep it in the interface" ], "derived_from": "https://poolsuite.net", "source_screenshot": "data/screenshots/playful-poolsuite.png" }, { "id": "poolsuite", "theme": "retro-computing leisure", "prompt": "Windows 95-style interface with pastel pink desktop and CRT scanline effects", "brief": "Build a page that creates a temporal fiction through interface design. The aesthetic should reference late-90s computing: beveled OS chrome, system-style sans-serif fonts, pixelated icons, and CRT scanline effects. The 'desktop' should be a soft pastel pink with a centered floating window metaphor. The content within the window should contrast cool digital blues against the warm surround. This is romanticized liminal space—the internet as imagined from 1997.", "rubric": { "typography": "System-style sans-serif (MS Sans Serif class) throughout. Bold condensed sans for header. Small all-caps sans for navigation. Monospaced or tabular sans for date/time display. Clear size contrast: large header, medium player text, small navigation labels.", "color": "Muted retro computing tones: pale pink/mauve desktop ground (#E8D5D5 range). Off-white/cream chrome with black borders and grey accents. Saturated tropical blues and greens in video content. Soft yellows, greens, blues for navigation icons.", "layout": "Centered floating window metaphor on desktop-like background. Primary window has classic OS chrome (title bar, close/minimize buttons, scroll bar, status bar). Horizontal dock/taskbar with evenly spaced icon-label pairs. Top-left and top-right utility elements. Strong symmetry.", "motion": "CRT scanline artifacts across video content. Beveled 3D chrome effects on window elements. Pixel-art icon hover states. Subtle noise/grain in background. Scroll-triggered content reveals below fold.", "texture": "CRT scanline overlay on video content. Beveled 3D shading on UI chrome. Pixelated/low-res icons. Subtle noise/grain in pink background. No modern gradients or glassmorphism." }, "banned_depiction": [ "literal pools", "beach scenes as background", "palm tree decorations", "vacation photos", "resort imagery outside the window" ], "must_not": [ "use modern flat design", "use glassmorphism", "use gradient backgrounds", "use rounded corners on buttons", "use contemporary sans-serif fonts like Inter or SF Pro" ], "derived_from": "https://poolsuite.net", "source_screenshot": "data/screenshots/playful-poolsuite.png" }, { "id": "pudding-love-songs", "theme": "data journalism scrollytelling", "prompt": "A scrollytelling data story with warm cream background, dark card spotlight, and card-based slide progression", "brief": "Build a narrative data story page for any subject that uses a warm cream background (#FDF6E3) to evoke aged paper and nostalgia. Present content through discrete card-based 'slides' rather than continuous scroll—each card centered in generous negative space like a museum exhibit. Use a dark charcoal card (#1A1A1A) against the light ground to create dramatic spotlight effect for key evidence or quotes. Typography pairs a chunky rounded sans-serif for brand voice with clean sans for UI and traditional serif for editorial authority. Include minimal navigation—a single accent button (soft purple #9B8AF7) with keyboard alternative noted.", "rubric": { "typography": "Chunky rounded sans-serif with irregular outlines for brand/display; clean sans-serif (Inter-class) for UI and card text at 14-16px; traditional serif (Tiempos/Georgia-class) for body copy lending authority; three-way typographic tension: playful brand vs neutral UI vs serious content", "color": "Warm cream dominant (#FDF6E3) creating soft, approachable feel; dark charcoal card (#1A1A1A) as high-contrast focal point; white/light gray text on dark card; soft purple accent (#9B8AF7) for interactive elements; high contrast monochrome lets content drive emotion", "layout": "Single-column centered composition with generous negative space; card-based storytelling with discrete slides; radical centering creates museum-like framing; fixed navigation cue with accessibility note; spacious design for pacing narrative revelation", "motion": "Card-based slide transitions; smooth scroll behavior; potential subtle animations on card entrance; keyboard navigation support", "texture": "Flat clean surfaces; no grain or noise; depth created through color contrast alone; subtle shadow or border treatment on cards" }, "banned_depiction": [ "literal charts and graphs as decoration", "spreadsheet interfaces", "corporate data visualization cliches", "literal 'story' imagery like books", "newsroom photography" ], "must_not": [ "use a stark white background", "create continuous long-scroll content without card breaks", "use bright primary colors for accents", "add decorative data viz elements that don't convey information", "use a conventional blog layout" ], "derived_from": "https://pudding.cool/2024/11/love-songs", "source_screenshot": "data/screenshots/pudding-love-songs.png" }, { "id": "refactoring-ui", "theme": "developer-tool elegance", "prompt": "A dark mode landing page for a technical product with gradient text headlines and 3D product mockups", "brief": "Build a landing page for a digital product targeting technical professionals. The design should feel like it belongs in the same visual universe as modern development tools—dark, precise, and quietly confident. Use a deep navy-to-black ground with a single cyan accent for CTAs and highlights. The hero should feature a gradient-filled headline (blue-to-cyan) that signals polish without being flashy, paired with a tangible 3D product representation that adds credibility. Trust signals should be woven into the top bar with minimal, all-caps typography.", "rubric": { "typography": "Geometric sans-serif throughout; headline at extra-light weight (200-300) with gradient color fill; body text at regular weight (400) in muted gray-white; top navigation in all-caps with generous letter-spacing (0.1em+); button text in medium weight with small-caps treatment", "color": "Deep navy ground (#0f172a to #0a0a0f); gradient headline fill from blue (#60a5fa) to cyan (#67e8f9); single cyan accent for primary CTA (#7dd3fc); text in white and gray-300/400 range; subtle geometric grid lines in background at 5-10% opacity", "layout": "Two-column asymmetric hero (~60/40 split); generous vertical padding (120px+); left-aligned content block; 3D product element with slight rotation (10-15°) and perspective; horizontal top bar with three centered items separated by dot separators", "motion": "Gradient headline with subtle shimmer or shift on load; 3D product element with gentle floating animation (translateY ±8px, 4-6s ease-in-out loop); hover states on buttons with brightness increase (1.1x) and subtle scale (1.02x); background grid lines with parallax depth on scroll", "texture": "Subtle geometric grid pattern in background at very low opacity; glassy reflection effect on 3D product element; faint glow effect on accent elements" }, "banned_depiction": [ "code editors", "IDE screenshots", "terminal windows", "keyboard shortcuts", "syntax highlighting examples", "developer caricatures", "coding symbols" ], "must_not": [ "Use multiple accent colors—stick to the single cyan", "Add decorative tech icons or illustrations", "Use high-contrast pure white text throughout—keep it muted", "Create a generic SaaS template layout" ], "derived_from": "https://refactoringui.com", "source_screenshot": "data/screenshots/refactoring-ui.png" }, { "id": "reformcollective", "theme": "warm editorial material", "prompt": "A portfolio with warm cream ground, bold grotesque vs italic serif type tension, hyper-realistic 3D soft forms, and dark project cards", "brief": "Build a portfolio page for any creative work that uses a warm cream ground (#F5F2EB) to create gallery-like sophistication. Create typographic tension between bold condensed grotesque (heavy/black weight, tight letterspacing) for headlines and elegant italic serif for accent words. Include hyper-realistic 3D soft-body forms in the hero—velvet or suede-like texture, inflated pillowy volumes, studio-quality lighting with soft shadows. Project cards should use near-black backgrounds (#0A0A0A) as aperture frames, floating on the cream ground with rounded corners. Service tags as horizontal pill buttons at the bottom of each card.", "rubric": { "typography": "Bold condensed grotesque (Neue Haas Grotesk/Helvetica Condensed-class) at heavy/black weight with tight letterspacing for headlines and logotype; elegant italic serif (high-contrast, flowing) for accent words like 'featured'; clean sans-serif all-caps for navigation and metadata at small sizes", "color": "Warm cream dominant (#F5F2EB) as gallery canvas; near-black (#0A0A0A) for project cards and navigation; vibrant accents pulled from project imagery (cyan-teal, amber, electric indigo) rather than fixed brand colors; no fixed accent palette—colors respond to content", "layout": "Full-width hero with immersive 3D scene; asymmetric section headers left-aligned with italic accent; bento-style project grid with varying aspect ratios—full-width featured project, then 2-column split; rounded corners (8-12px) on cards; generous cream gutters between cards", "motion": "3D forms with parallax-ready layering; soft-body physics suggesting compression and overlap; scroll-triggered card reveals; potential hover states on service tags", "texture": "Hyper-realistic fabric texture with visible fiber grain on 3D forms; soft shadows and subsurface scattering; velvet/suede material quality; smooth digital surfaces on UI elements" }, "banned_depiction": [ "literal fabric or textile products", "corporate office photography", "generic stock 3D renders", "literal 'creative' imagery like lightbulbs", "client logos as primary focus" ], "must_not": [ "use a stark white or dark background", "employ fixed brand accent colors", "use low-quality 3D renders", "create a literal 'soft' theme with pillows or cushions as decoration", "use conventional project thumbnails without 3D treatment" ], "derived_from": "https://reformcollective.com", "source_screenshot": "data/screenshots/reformcollective.png" }, { "id": "resn-studio", "theme": "digital craft precious object", "prompt": "A studio page with a dark faceted 3D crystal, chromatic aberration edges, and whisper-thin centered typography", "brief": "Build a studio landing page that treats the work as a precious artifact. Use a near-black ground with a single central 3D rendered object as the focal point—faceted, crystalline, with selective reflective highlights. Apply chromatic aberration (RGB edge fringing) to suggest digital-native craft. Typography should be ultra-light with generous letter-spacing on uppercase microcopy, creating significant size contrast between central brand statement and peripheral UI labels.", "rubric": { "typography": "Geometric sans-serif, light weight (200-300) throughout; large thin weight for central brand text with sentence case and centered alignment; microcopy in all caps with very small size (10-12px) and wide tracking (0.15-0.2em); significant size contrast between hero text and UI labels; minimal weight variation—everything light", "color": "Near-black ground (#1a1a1a to #0d0d0d); white/light gray (#e5e5e5 to #f5f5f5) for all typography; subtle chromatic aberration on 3D form—faint cyan (#06b6d4) and magenta (#ec4899) edge fringing; extremely restrained high-contrast dark mode with minimal color intrusion", "layout": "Strictly centered composition with strong vertical axis; three horizontal zones: top (navigation link), middle (hero content), bottom (instruction); hamburger menu icon top-right corner; small abstract mark bottom-right; generous negative space surrounding all elements; symmetrical balance", "motion": "3D form with subtle rotation on mouse position (parallax tilt ±5°); chromatic aberration intensity increases on hover; 'CLICK & HOLD' instruction implies press-and-hold interaction for transformation/expansion; gentle floating motion on crystal (translateY ±5px, 6s ease-in-out); fade-in on load with staggered timing (0.3s delays)", "texture": "Faceted crystalline 3D form with selective reflective highlights; chromatic aberration/RGB split effect on edges; clean textureless background; no other imagery, patterns, or decorative elements" }, "banned_depiction": [ "crystals", "gems", "diamonds", "jewelry", "treasure", "precious stones", "minerals", "geometric abstract art without context" ], "must_not": [ "Use bright or saturated colors beyond the subtle chromatic aberration", "Add multiple 3D objects or complex scenes—keep it to one focal form", "Use bold or heavy typography—keep it whisper-thin", "Add conventional navigation bars or sidebars", "Include project thumbnails or portfolio grids on the landing view" ], "derived_from": "https://www.resn.co.nz", "source_screenshot": "data/screenshots/resn-studio.png" }, { "id": "seedlip", "theme": "botanical sophistication", "prompt": "A premium brand website with organic minimalism and restrained green palette", "brief": "Build a product site for a premium lifestyle brand that references nature through palette and proportion rather than literal plant imagery. The design should feel like an elegant garden—airy, refined, with space to breathe. Use a warm cream ground with deep forest green as the sole accent, creating organic sophistication without rustic clichés. Typography should be light and generous, suggesting elegance through restraint. Rounded corners on imagery suggest organic growth without being literal.", "rubric": { "typography": "Elegant light-weight serif for hero headlines (Canela-class, Freight Display, or refined Didot/Bodoni—thin, delicate letterforms with high contrast). Generous letter-spacing (+0.02em to +0.05em), creating airy premium feel. Clean geometric or neo-grotesque sans-serif for navigation, buttons, and body copy (Söhne, Circular-class). All-caps treatment for section headers with wide tracking.", "color": "Warm cream/off-white dominant background (#F5EDE4 or #F7F0E8). Deep forest green for primary text, buttons, and accents (#1A3D2E or #0F2E1F). Pure white for hero text when overlaid on imagery. Single green used consistently—no secondary accent colors.", "layout": "Announcement bar at top (green background, white text). Minimal navigation below. Hero section with large serif headline and single CTA button on cream background. Centered value propositions with all-caps headers. Large product image with asymmetric rounded corners (top-right and bottom-left only). Icon + label trio for features. Generous vertical padding between sections (80-120px).", "motion": "Subtle hover states on buttons: slight scale or background shift. Product image may have subtle parallax or float effect. Iconography in circular containers with thin line weights. Smooth scroll behavior. Cookie modal with rounded corners and subtle shadow.", "texture": "Clean, flat surfaces with rounded corners on imagery creating soft organic feel. No gradients, minimal shadows (only on modals). Photography with soft diffused lighting and pastel backgrounds. Minimal line icons abstracted to geometric forms rather than illustrative." }, "banned_depiction": [ "leaves", "plants", "botanical illustrations", "garden scenes", "herbs", "botanical drawings", "vine decorations", "wood textures" ], "must_not": [ "use literal plant imagery", "employ green gradients", "use multiple accent colors", "include busy patterns", "use heavy display typography", "employ rustic or farmhouse styling" ], "derived_from": "https://www.seedlipdrinks.com", "source_screenshot": "data/screenshots/organic-seedlip.png" }, { "id": "stinkstudios", "theme": "dark editorial production", "prompt": "A production company portfolio with massive logotype overlaying hero imagery, near-black ground, and asymmetric editorial grid with broken alignment", "brief": "Build a portfolio page for a creative studio or production company. The design must use near-black ground (#000000) with white/gray typography, letting client work provide all color. Position a massive all-caps sans-serif logotype over hero imagery rather than contained in header, treating brand as graphic element. Secondary type should be lightweight and understated, creating extreme weight contrast. Layout uses asymmetrical editorial grid with broken alignment—projects float left/right without rigid matrix, negative space dominates. Generous vertical padding between sections (40-50% of viewport height as black space). Cookie notice should be designed as dark card with clear hierarchy, 'DENY/ALLOW' treated as intentional UI with rounded buttons.", "rubric": { "typography": "Bold grotesque sans-serif logotype (Helvetica-class) at extreme scale spanning viewport width, all-caps, heavy/black weight 800-900, secondary type small 12-14px regular, navigation in sentence case", "color": "Pure black #000000 dominant background, white #FFFFFF for primary text and UI, off-white/cream #F5F5F0 for project cards, client brand colors (cyan-blue #00A0E9, terracotta #5C3A3A) as only color accents", "layout": "Full-bleed hero with massive logo overlay, asymmetric two-column project grid with offset vertical positioning (~60% / 40% width split), staggered rhythm with third element as color block, extreme vertical whitespace", "motion": "Logo blending with hero image (multiply or overlay effect), subtle video backgrounds, smooth transitions between projects", "texture": "No visible borders on project cards, tight crop on images, dark rounded cookie banner (4-6px radius), cinematic 16:9 aspect ratio thumbnails, minimal shadows" }, "banned_depiction": [ "literal film cameras or equipment", "clapperboards", "director's chairs", "spotlights or stage lighting", "reels or film strips", "video player controls as decorative elements" ], "must_not": [ "use a traditional header with logo left and nav right", "create a rigid grid matrix for projects", "include prominent social media links", "use bright accent colors for UI elements", "include text-heavy project descriptions" ], "derived_from": "https://stinkstudios.com", "source_screenshot": "data/screenshots/stinkstudios.png" }, { "id": "stripe", "theme": "fintech warmth", "prompt": "A financial services landing page with flowing gradients, gradient-filled hero text, and soft 3D mesh shapes suggesting fluidity", "brief": "Build a landing page for a financial or infrastructure service. The design must avoid cold corporate blue by using vibrant flowing gradients: orange (#ff6118) through pink (#ffe0ef) to purple (#533afd). Use clean geometric sans-serif with a distinctive gradient fill on the hero headline—purple-to-blue transition makes the text itself feel technological and fluid. Layout balances dense product screenshots (proof) with generous whitespace (confidence). Include soft 3D mesh shapes in corners suggesting liquidity and flow without literal water imagery. Buttons use deep purple (#635BFF) as primary action color. Cards have subtle borders (#E5E7EB) and 12-16px border radius.", "rubric": { "typography": "Geometric sans-serif (Inter-class or custom), H1 48-56px weight 500-600 with -0.02em tracking, inline color variation in headlines (purple #635BFF for key phrases), body 16px in soft slate #425466", "color": "White ground #FFFFFF, deep purple #635BFF for primary buttons, dark navy #0A2540 for headings, coral-to-pink-to-purple gradients, light gray #F6F9FC for section backgrounds, medium gray #6B7280 for captions", "layout": "Container max-width ~1200px, bento-style grid layout with asymmetric card sizing (2-col large, 1-col medium, 3-col small), hero with absolute-positioned gradient graphic bleeding off-screen right", "motion": "Subtle card lift on hover with increased shadow, smooth gradient animations, 200-300ms ease transitions, floating notification card with avatars", "texture": "Soft 3D mesh gradient shapes in corners, 12-16px border radius on cards, 1px borders #E5E7EB or shadow-only cards, large sweeping diagonal gradients" }, "banned_depiction": [ "literal money or currency symbols", "bank buildings", "credit cards as hero images", "stock photos of business people", "shield or lock security icons", "traditional banking blue color schemes" ], "must_not": [ "use corporate blue as primary color", "include trust badges or security seals prominently", "use stock financial imagery", "include dense pricing tables above fold", "use serif typefaces for headings" ], "derived_from": "https://stripe.com", "source_screenshot": "data/screenshots/stripe.png" }, { "id": "studiofreight", "theme": "scattered editorial", "prompt": "A creative agency portfolio with radical asymmetry and kinetic scattered grid layout", "brief": "Build a portfolio that demonstrates momentum and forward movement through spatial relationships rather than literal animation. Project thumbnails should scatter across the viewport with no uniform grid, creating dynamic tension and visual momentum. The design should feel like a curated gallery where work floats in generous whitespace. Typography should be minimal punctuation—confidence through restraint. This is anti-corporate portfolio design: no case studies, no services list, just work and essence.", "rubric": { "typography": "Elegant transitional or modern serif for headline (Farnham-class, Tiempos, Canela—high contrast, refined serifs). Clean neutral sans-serif for UI (Neue Haas Grotesk, Söhne, Graphik-class). Small size, generous letter-spacing. Navigation uses minimal punctuation: bullet point for home, comma-separated center links, single word contact. All-caps or small caps for some elements.", "color": "Monochrome foundation: warm white background (#FAFAF8), near-black text (#1A1A1A). Zero interface color—project imagery provides all chromatic energy. Black monogram mark. The scattered images should be full-color, vibrant, creating contrast against the sterile container.", "layout": "Asymmetric, organic grid—not rigid columns. Images appear in varying sizes and positions, creating scattered, editorial, gallery-like feel. Left side: vertical stack of 6-7 images, varying widths. Right side: vertical stack of 6-7 images, more consistent sizing. Center: massive negative space with centered headline. Footer: three-part (social / studio name / copyright).", "motion": "Hover effects on images: scale, reveal text, cursor change. Smooth scroll-based animations: parallax, image reveals. Possible drag exploration given scattered layout. Images should feel like they float and respond to cursor proximity. No snap scrolling.", "texture": "Flat, clean surfaces. No gradients, minimal shadows. Generous whitespace dominates (~60% of viewport). Images create depth through overlap and scale variation. Brutalist elegance—raw, unadorned, but refined." }, "banned_depiction": [ "laptop mockups", "phone screens", "process diagrams", "team photos", "client testimonials", "skill bars", "service icons" ], "must_not": [ "use a uniform grid", "center all content symmetrically", "include case study text", "use button-style CTAs", "include social proof metrics", "employ card-based layouts with consistent sizing" ], "derived_from": "https://studiofreight.com", "source_screenshot": "data/screenshots/studio-freight.png" }, { "id": "typographica", "theme": "scholarly editorial", "prompt": "A sophisticated publication website for typography reviews with warm institutional character", "brief": "Build a content-focused editorial site for showcasing in-depth reviews of designed objects (typefaces, books, or similar). The design must feel like a scholarly journal with personality—authoritative yet warm, academic yet accessible. Use a strictly achromatic palette to force attention onto the specimens being reviewed. Create a gallery-like neutral environment where diverse content can coexist through consistent framing rather than visual competition.", "rubric": { "typography": "Layered masthead combining ultra-light extended sans-serif watermark (transparent, massive scale) with elegant italic serif tagline layered on top in solid black. Body: clean neo-grotesque for UI, high-contrast Didone or modern serif for article headlines. Scale hierarchy: masthead at 15-20% of viewport width, headlines at 3:1 over body copy.", "color": "Strictly monochrome: warm off-white ground (#f5f5f5), pure white cards (#ffffff), black text (#000000), light gray placeholders (#cccccc). Zero chromatic accents—color must come from content specimens only.", "layout": "Asymmetric two-column editorial grid: featured content left (60% width), thumbnail grid right (40%). Thumbnails in 2×3 or 3×2 grid with equal card sizing. Full-width black navigation bar. Generous internal padding on cards (24-32px).", "motion": "Subtle hover states on grid items: slight scale (1.02) or shadow elevation on hover, 200ms ease-out. Filter categories with diamond separators (◆) should highlight on hover. Smooth scroll behavior between sections.", "texture": "Paper-like warmth in background tone. No gradients, no shadows on cards (flat design), thin 1px rules as dividers. Sponsor boxes integrated using site's gray palette rather than disruptive banner styling." }, "banned_depiction": [ "type specimens", "font names", "letterforms as decoration", "printing press imagery", "ink bottles", "quill pens", "typography tools" ], "must_not": [ "use any color beyond black/white/grays", "center all content symmetrically", "use decorative graphics unrelated to reviewed content", "employ trendy glassmorphism or gradients", "use bold display type for the publication name" ], "derived_from": "https://typographica.org", "source_screenshot": "data/screenshots/typographica.png" }, { "id": "unseen-studio", "theme": "radical quiet luxury", "prompt": "A studio page with radical centered composition, dusty rose ground, and single letterform monogram against 80% negative space", "brief": "Build a landing page for a creative studio or agency. The design must embody radical minimalism through literal absence: no imagery, no decoration, no accent colors—only a single letterform and words. Use dusty rose ground (#EDDEDB or #E8D5D0) against charcoal text (#2D2D2D or #333333)—not pure black to reduce harsh contrast. Typography uses geometric/neo-grotesque sans-serif (Futura/Avenir-class) with extreme scale contrast: massive centered single letter U as monogram (~15-20% viewport height) against microscopic all-caps UNSEEN STUDIO with registered trademark symbol. Layout is radical centering with content occupying ~15% of viewport—confidence through restraint. Body text centered, constrained to 35-40 characters per line.", "rubric": { "typography": "Geometric sans-serif (Futura/Avenir-class), massive U monogram at light/regular weight 300-400, UNSEEN STUDIO all-caps at 11-12px with moderate tracking +50-100, registered trademark as superscript, body text 10-11px centered", "color": "Dusty rose/pale blush ground #EDDEDB or #E8D5D0 (RGB ~232, 213, 208), charcoal text #2D2D2D or #333333 (not pure black), strictly two-color monochromatic scheme", "layout": "Radical centered composition with radial symmetry, content occupying ~15% of viewport, ~60% empty space above, ~25% below, minimum 20% horizontal margins, optical center slightly above geometric center", "motion": "Inferred: subtle fade-in on load, potential letterform animation", "texture": "No rules, borders, or containers, no imagery or photography, no buttons or navigation visible, no texture or pattern, pure typographic expression" }, "banned_depiction": [ "any photography or imagery", "portfolio project thumbnails", "service icons or illustrations", "decorative geometric patterns", "multiple page sections or scroll", "social media links or icons" ], "must_not": [ "include any images or photography", "use pure white or pure black", "create multiple sections or scrolling content", "include navigation menu or buttons", "use more than two colors", "include any decorative elements beyond typography" ], "derived_from": "https://unseen.co", "source_screenshot": "data/screenshots/unseen-studio.png" }, { "id": "waaark", "theme": "artisanal play", "prompt": "A creative agency website with isometric whimsy and powder-blue sophistication", "brief": "Build an agency homepage that avoids startup clichés—no gradients, no sans-serif hero text, no device mockups. Use an isometric illustration as the primary communication device, creating a visual metaphor for craft through unexpected subject matter. The design should balance whimsy with professionalism: playful imagery balanced by restrained editorial typography. Japanese aesthetic influence in minimalism, negative space, and craft-orientation.", "rubric": { "typography": "Elegant high-contrast serif for headline (Playfair Display-class, Canela, or similar—light weight 300-400, generous letter-spacing, large point size for impact). White or very light color for contrast against blue background. Small sans-serif or same serif at much smaller size for meta text (copyright, etc.). Generous line-height creating airy sophistication.", "color": "Soft powder blue dominant (#9ECBE8 or #A8D0E6). Salmon/coral accent (#F26B6B or #E85D5D) for boat and right panel. Deep navy (#1E2A4A or #2C3E50) for grounding in right panel. Pure white (#FFFFFF) for text and elements. Black (#333333) for illustration details. Yellow (#F4D03F) and pink (#F5B7B1) for small accents in illustration. Limited 4-5 color cohesion.", "layout": "Asymmetrical split layout: main content zone left (~70-75% width), accent panels right (~25-30%). Left: isometric illustration occupying upper portion, generous negative space throughout, headline text positioned in lower-left quadrant aligned left, small copyright bottom-left. Right sidebar: divided horizontally into coral panel (top) and navy panel (bottom), contains subtle abstract iconography.", "motion": "Subtle hover states on illustration elements: slight scale or movement. Isometric elements may respond to cursor proximity. Smooth scroll behavior. No aggressive animations—motion should feel playful but refined.", "texture": "Flat vector aesthetic with minimal shading. Subtle depth through slightly darker tones on undersides of isometric elements. Grid lines beneath elements suggesting process, structure, or 'building blocks.' Clean, flat color blocks in right panels. No gradients, no shadows." }, "banned_depiction": [ "laptop mockups", "phone screens", "code brackets", "gears", "lightbulbs", "rocket ships", "mountain metaphors", "trendy Memphis patterns" ], "must_not": [ "use sans-serif for the hero headline", "include device mockups", "use gradients", "employ startup cliché metaphors", "use bright primary colors", "center all content symmetrically" ], "derived_from": "https://waaark.com", "source_screenshot": "data/screenshots/waaark.png" }, { "id": "whatiswebbrutalism", "theme": "intentional brutalism", "prompt": "stark monochrome editorial with extreme type scale and zero decoration", "brief": "Build an editorial or informational page that embodies raw, unadorned design. The page should use strictly monochrome palette—pure black text on pure white with no gray tones. A massive bold condensed headline should break across lines to visually perform the concept of 'raw, unfinished.' The layout should use an asymmetric two-column structure with generous whitespace. No photographs, no illustrations, no icons, no decorative elements whatsoever.", "rubric": { "typography": "Clean geometric sans-serif throughout (neo-grotesque like Helvetica). Extreme weight contrast: massive bold/black weight for headline versus light/regular for body. Condensed/compact width on massive headline creating vertical stacking. Normal width for body. Monospace for top navigation. Section numbers ('01.', '02.') at intermediate scale.", "color": "Strictly monochrome: pure black (#000000) text on pure white (#FFFFFF) background. No gray tints. No gradients. No accent colors. High contrast only through value.", "layout": "Asymmetric two-column structure: left column for section numbers, right column for section titles. Generous whitespace with large margins. Top navigation as horizontal line of small text. Centered massive headline in upper portion breaking the two-column rhythm below. Linear vertical flow for content.", "motion": "Minimal—this is static, declarative design. Possible subtle scroll-triggered reveals for sections. No hover animations, no parallax, no transitions. The stillness is the point.", "texture": "None whatsoever. No photographs, no illustrations, no icons except minimal hamburger menu. No decorative lines, borders, or shapes. No shadows, glows, or dimensional effects. No texture overlays. Pure flat text on flat background." }, "banned_depiction": [ "any imagery whatsoever", "icons", "decorative elements", "photographs", "illustrations", "geometric shapes as ornament" ], "must_not": [ "use any color other than black and white", "use gradients", "use shadows", "use rounded corners", "use more than one typeface", "use decorative UI elements of any kind" ], "derived_from": "https://www.whatiswebbrutalism.com", "source_screenshot": "data/screenshots/brutalist-whatiswebbrutalism.png" }, { "id": "y2k-neocities", "theme": "retro-futurist Y2K", "prompt": "A personal homepage with neon-on-black palette, pixel art characters, tiled classical wallpaper, and monospace typography", "brief": "Build a personal homepage that recreates late-1990s/early-2000s web aesthetics through intentional amateurism. Use a black ground with high-contrast saturated neons—hot pink for headers, bright green for links, cyan for accents. Typography should be monospace or pixelated throughout, with bold large headers and smaller body text. The layout should use a three-panel structure with rectangular bordered boxes. Background should feature a tiled pattern with classical silhouettes overlaid with vertical streaks suggesting rain.", "rubric": { "typography": "Monospace/terminal-style fonts throughout; bold large headers (18-24px) in hot pink; body text smaller but still bold and pixelated (12-14px); condensed/monospaced width; all-caps headers; underlined dates for update log; stylized serif with decorative crosses (†) for special links; significant size contrast between headers and body", "color": "Black (#000000) main background; hot pink/magenta (#FF0080) for primary text and headers; bright green (#00FF00) for navigation links; cyan (#00FFFF) for small decorative elements; yellow (#FFFF00) for accent text and borders; white (#ffffff) for pixel art details; high-contrast saturated neons with no gradients—classic web-safe extreme palette", "layout": "Three-panel structure: left column narrower for navigation hub with pixel character; top right for welcome intro box; bottom right for update log; rectangular borders around content boxes; asymmetrical composition; navigation box with six stacked menu items and horizontal rules; pixel art characters positioned within panels", "motion": "No smooth animations—use instant state changes or stepped animations only; cursor blink on terminal elements; possible marquee text for announcements (optional); hover states with color inversion or underline only; static pixel art—no animation on characters", "texture": "Tiled background wallpaper with repeating classical figure silhouettes (caryatids/columns) in dark green/black; vertical white streaks overlay suggesting rain or scanlines; pixel art sprites (character with red hair, bird creature, door icons); white rectangular borders around boxes; decorative flourishes (crosses †, diamonds ◆) as handcrafted ornaments" }, "banned_depiction": [ "skeletons", "gothic figures", "occult symbols", "horror imagery", "dark fantasy creatures", "vampires", "graveyards", "spooky themes" ], "must_not": [ "Use modern flat design or smooth gradients—stick to solid neons", "Add responsive breakpoints that break the retro aesthetic", "Use smooth animations or easing functions", "Employ modern typography—stick to monospace and pixel fonts", "Create a clean minimalist layout—embrace the cluttered panel structure" ], "derived_from": "https://y2k.neocities.org", "source_screenshot": "data/screenshots/playful-y2k-neocities.png" } ], "rubric": { "description": "Shared vocabulary and gradeable criteria for design briefs. Every brief must speak in these terms so that fifty briefs written by different agents grade on one consistent scale.", "principle": "Theme must live in the design LANGUAGE—typography, colour, motion, layout, spacing, texture—never in literal depiction of the theme's objects. Drawing the noun is the classic failure.", "gradeable_criteria": { "typography": { "display_type": { "description": "The primary headline/display typeface choice", "gradeable_values": [ "Didone-style serif (high contrast, thick-thin modulation, 200-400 weight)", "High-contrast transitional serif (Playfair Display-class, tight spacing)", "Classical old-style serif (readable, organic, moderate contrast)", "Geometric sans-serif (circular forms, uniform weight, Futura/Avenir-class)", "Neo-grotesque sans-serif (neutral, tight spacing, Helvetica/Inter-class)", "Grotesque sans-serif (condensed, industrial, 700-900 weight)", "Monospace (fixed-width, technical, 400 weight)", "Compressed/condensed grotesk (tight letter-spacing -0.02em to -0.05em, all-caps)", "Extended/expanded sans-serif (wide letterforms, +0.05em tracking, all-caps)", "Custom/display serif (unique letterforms, stencil cuts, geometric)", "Slab serif (mechanical, block-like, uniform stroke)", "Ultra-light sans-serif watermark (stretched, ethereal, 100-200 weight)", "Rounded geometric sans-serif (Nunito-class, friendly, 400-700 weight)" ], "measureable": "Name the specific type class, weight, and letter-spacing in em values" }, "body_type": { "description": "The supporting text typeface", "gradeable_values": [ "Geometric sans-serif (Inter-class, 400 weight, 14-16px)", "Neo-grotesque sans-serif (Helvetica-class, 400 weight, 14-16px)", "Humanist sans-serif (open apertures, calligraphic influence, 400 weight)", "Old-style serif (readable, organic, 400 weight, 16-18px)", "Transitional serif (crisp, moderate contrast, 400 weight)", "Monospace-grotesk hybrid (technical, 400 weight, 12-14px)", "Italic serif (for warmth, pull quotes, 400 weight)" ], "measureable": "Name the type class, weight, and size in px" }, "scale_contrast": { "description": "The ratio between largest and smallest text", "gradeable_values": [ "Extreme (72-120px display vs 10-12px body, 6:1 to 10:1 ratio)", "High (48-64px vs 12-14px, 4:1 to 5:1 ratio)", "Moderate (32-48px vs 14-16px, 2:1 to 3:1 ratio)", "Low (minimal hierarchy, flat, 1.5:1 ratio)" ], "measureable": "State pixel sizes or ratio, not 'dramatic' or 'subtle'" }, "weight_contrast": { "description": "The difference in font weights used", "gradeable_values": [ "Extreme (800-900 headline vs 300-400 body, 500+ difference)", "High (700 vs 400, 300 difference)", "Moderate (600 vs 400, 200 difference)", "Monoweight (single weight 400, hierarchy through size only)", "Flat (no weight variation, all 400)" ], "measureable": "State specific weight values (100-900 scale)" }, "letter_spacing": { "description": "Tracking/letter-spacing treatment", "gradeable_values": [ "Tight (-0.02em to -0.05em, display type)", "Normal (0em)", "Wide (0.05em to 0.1em, all-caps labels)", "Extreme (0.15em to 0.3em, watermark or micro-typography)" ], "measureable": "State em values, not 'generous' or 'tight'" }, "case_treatment": { "description": "Capitalization strategy", "gradeable_values": [ "All-caps (navigation, labels, metadata, 10-12px)", "Title case (headlines, 48-64px)", "Lowercase with periods (friendly, conversational, 'free. fun. effective.')", "Mixed strategy (hierarchy through case change)", "Sentence case (body text, 14-16px)" ], "measureable": "Specify where each case is applied" } }, "color": { "ground": { "description": "The dominant background color", "gradeable_values": [ "Near-black (#0a0a0a to #1a1a1a, dark mode luxury)", "Deep charcoal (#1a1a1a to #2d2d2d)", "Warm off-white/cream (#F5F0E8, #F5F2EB, archival)", "Pure white (#FFFFFF, clinical)", "Light warm gray (#D4D4D4, editorial)", "Near-white (#f5f5f7, Apple-style)", "Dusty rose/pale blush (#EDDEDB, #E8D5D0, quiet luxury)", "Powder blue (#9ECBE8, #A8D0E6, soft atmosphere)", "Pale mint/cool cyan (#D4E4E4, Y2K aesthetic)", "Saturated accent as ground (rare, high-energy, red #E30613)" ], "measureable": "State hex code or CSS color value" }, "palette_structure": { "description": "The organizational logic of colors", "gradeable_values": [ "Monochrome (black, white, grays only)", "Monochrome + single accent (black/white + one color)", "Monochrome + strategic accent (red only for urgent)", "Dual-tone (two colors in tension, 50/50 or 60/40)", "Full spectrum (rainbow/chromatic, 6+ distinct hues)", "Earth/natural (cream #F5F0E8, forest #1A3D2E, sage #7A9B76)", "Acid/neon (lime #a3e635, cyan #67e8f9, magenta #ec4899 on black)" ], "measureable": "Name the structure and specific hex codes for each color" }, "accent_usage": { "description": "How accent colors are deployed", "gradeable_values": [ "Single dominant accent (one color for CTAs, highlights, 10-15% of UI)", "Strategic/restrained (red only for urgent content)", "Project-derived (colors pulled from imagery)", "Functional accent (links, buttons only)", "No accent (pure monochrome)", "Rainbow assignment (each project gets distinct hue)" ], "measureable": "State where accent appears, what percentage of UI, and what it signals" }, "saturation_strategy": { "description": "Overall chromatic intensity", "gradeable_values": [ "Near-zero (grayscale, desaturated, 0-10% saturation)", "Muted/desaturated (pastel, dusty, 20-40% saturation)", "Full saturation (vibrant, energetic, 80-100% saturation)", "Acid/fluorescent (neon, blacklight, 100%+ saturation)" ], "measureable": "Describe the saturation level with percentage ranges" } }, "layout": { "grid_system": { "description": "The underlying structural logic", "gradeable_values": [ "Strict multi-column (4-column equal, Swiss, 25% each)", "Asymmetric two-column (40/60, 30/70 splits)", "Single-column centered (~680-720px max-width, editorial)", "Broken/asymmetric (intentional misalignment, no uniform grid)", "Bento-box (irregular grid cells, mixed sizes)", "Scattered/deconstructed (no uniform grid, organic placement)", "Split-screen (50/50 duality, vertical division)", "Full-bleed immersive (no container constraints, edge-to-edge)", "Corner-anchored (navigation at four corners, central void)" ], "measureable": "State column counts, ratios, or max-widths in px" }, "whitespace": { "description": "Negative space treatment", "gradeable_values": [ "Extreme (120px+ section padding, radical centering, 60-80% empty)", "Generous (80-120px padding, 40-60% empty)", "Moderate (40-80px padding, 20-40% empty)", "Dense (minimal padding, information-heavy, <20% empty)", "Asymmetric void (heavy left, light right or vice versa)" ], "measureable": "State padding values in px or viewport percentage" }, "composition": { "description": "How elements are arranged", "gradeable_values": [ "Centered/radical (content in 15-30% of viewport)", "Asymmetric balance (heavy left, light right or vice versa)", "Z-depth layering (overlapping planes, 3+ layers)", "Corner-anchored (navigation at corners, content central)", "Full-bleed interruptions (breaking the grid with edge-to-edge elements)" ], "measureable": "Describe spatial relationships with percentages or ratios" } }, "motion_implied": { "description": "How static design suggests movement (for briefs; actual motion specs for implementations)", "gradeable_values": [ "Fragmentation (vertical strips, partial revelation, 8-9 strips)", "Distortion (wobbly type, glitch effects, irregular baselines)", "Parallax layering (different scroll speeds implied, 2-3 planes)", "3D depth (cylindrical, portal compositions, WebGL environment)", "Ripple/echo effects (concentric rings, sound wave visualization)", "Chromatic aberration (RGB edge fringing, digital distortion)", "Motion blur (soft edges suggesting movement, 800-1200ms duration)" ], "measureable": "Describe the specific visual technique and implementation approach" }, "texture_materiality": { "description": "Surface qualities and material references", "gradeable_values": [ "Paper grain (visible fiber, ink-on-paper depth)", "Pixelation (retro-digital, glitch, 8-bit aesthetic)", "CRT/scanline (retro monitor aesthetic, horizontal lines)", "Glassmorphism (translucency, blur, 8-12px blur radius)", "Flat digital (no texture, pure color)", "3D rendered (glossy, atmospheric, soft shadows)", "Film grain (noise overlay, subtle texture)", "Newsprint (visible fiber, ink bleed, vintage paper)" ], "measureable": "Name the specific texture technique and opacity/visibility" }, "imagery_photography": { "description": "Visual content treatment", "gradeable_values": [ "Full-color photography (saturated, natural)", "Desaturated/muted (unified treatment, 50-70% saturation)", "Black & white (monochrome, grayscale)", "Abstract 3D (geometric, illustrative, rendered)", "Illustrated (hand-drawn, editorial, botanical)", "Zero imagery (pure typographic, no photos/illustrations)", "Product-as-hero (shrine-like presentation, centered)", "Natural texture (visible pores, real skin, unretouched)" ], "measureable": "State the treatment and subject matter explicitly" } }, "vocabulary_principles": { "ground_in_pixels": "Every value must be measurable: hex codes (#0a0a0a), pixel sizes (48-64px), em values (-0.02em), viewport percentages (40/60 split). 'Elegant' is not gradeable. 'Didone display at 64px with -0.02em tracking' is.", "avoid_literal_depiction": "A 'disco' brief must specify 'acid neon palette #a3e635, wobbly condensed sans-serif with irregular baselines, dense flyer layout'—never 'include a disco ball'. The theme lives in the design language.", "type_pairing_logic": "Always specify the relationship: 'Didone display at 8:1 scale over body grotesk' or 'Compressed grotesk headlines with monospace metadata accents'.", "color_relationships": "Specify the ground, the palette structure, and how accents are deployed. 'Blue CTA' is weak. 'Near-black ground #0a0a0a with single cyan accent #38bdf8 on functional elements' is strong.", "motion_specification": "For implementation briefs: specify trigger (hover, scroll, load), easing function (cubic-bezier values), and duration (ms). For concept briefs: describe the implied motion technique (fragmentation, distortion, parallax)." }, "anti_patterns": { "vague_adjectives": [ "elegant", "beautiful", "modern", "clean", "sophisticated", "premium", "bold", "playful", "warm", "cool", "dynamic", "professional", "friendly", "approachable", "innovative", "airy", "refined" ], "literal_instruction": "Any instruction to draw the theme's objects (disco balls for disco, leaves for organic, salt for coastal, etc.)", "brand_leakage": "Any mention of source site names, client names, industries, or actual copy from the reference", "template_swaps": "Generic template with color swap—no underlying design system" } }, "failure_modes": { "description": "Named ways a themed page goes wrong. The generation run builds its REJECTED half from this list. Each failure mode is concrete and gradeable.", "failure_modes": [ { "name": "literal_depiction", "description": "The brief instructs the builder to draw the theme's objects rather than express the theme through design language. This is the classic and most common failure.", "examples": { "disco": "Include a disco ball, platform shoes, or 70s retro imagery", "organic": "Add leaf decorations, tree illustrations, or nature photos", "playful": "Use cartoon characters, balloons, or clown imagery", "luxury": "Add gold foil effects, diamonds, or champagne glasses", "technical": "Include code snippets, terminal windows, or circuit board patterns", "brutalist": "Make it look broken or unfinished without intention", "coastal": "Show ocean waves, salt crystals, or beach scenes", "music": "Add vinyl records, speakers, or musical notes", "food": "Show literal ingredients, cooking utensils, or restaurant interiors" }, "why_it_fails": "The theme must live in typography, color, motion, layout, spacing—not in pictures of the theme's nouns. A disco brief that asks for a disco ball has already lost.", "detection": "Scan for nouns related to the theme being used as instructions for imagery or decoration.", "grade": "F_reject" }, { "name": "generic_template_color_swap", "description": "The brief describes a generic template (hero + features + testimonials + CTA) with only color changes to match the theme. No underlying design system or conceptual rigor.", "indicators": [ "Standard section progression without structural innovation", "Color is the only differentiating element", "No specific typographic system described", "Layout follows common patterns without variation", "Could apply to any theme by changing hex codes" ], "why_it_fails": "Teaches the model that themes are just color palettes, not holistic design languages.", "grade": "D_weak" }, { "name": "decoration_without_system", "description": "Decorative elements are added without a unifying logic. Gradients, shadows, illustrations, or effects are applied arbitrarily rather than systematically.", "indicators": [ "Multiple competing accent colors without hierarchy", "Decorative elements that don't relate to the core concept", "Effects applied inconsistently (some buttons have shadows, others don't)", "Illustrations that don't share a common style or logic", "Texture applied to some elements but not others without reason" ], "why_it_fails": "Design is a system, not a collection of decorative choices. Arbitrary decoration creates visual noise without meaning.", "grade": "C_acceptable" }, { "name": "vague_aesthetic_adjectives", "description": "The brief relies on subjective adjectives that cannot be objectively graded or implemented.", "forbidden_words": [ "elegant", "beautiful", "modern", "clean", "sophisticated", "premium", "bold", "playful", "warm", "cool", "dynamic", "professional", "friendly", "approachable", "innovative", "airy", "refined", "conversational", "minimalist", "luxurious" ], "examples": { "weak": "Use elegant typography with a warm color palette", "strong": "Use Didone-style serif display at 64px with -0.02em tracking against warm cream ground (#F5F0E8)" }, "why_it_fails": "Cannot grade 'elegant'—ten people will produce ten different results. Can grade 'Didone serif at 64px with -0.02em tracking'.", "grade": "C_acceptable" }, { "name": "brand_leakage", "description": "The brief contains references to the source site, its clients, its industry, or its actual copy. This prevents the brief from being generalizable.", "indicators": [ "Mentions the source company name or URL in the brief content (not just derived_from)", "References specific client work or case studies", "Includes actual copy from the reference site", "Mentions industry-specific terminology that reveals the source", "'In the style of [specific site]' language", "Product category references (perfume, salt, furniture) that tie to source" ], "test": "Someone who has never seen the original should be able to build a page about a totally different subject from your brief and land the same feeling.", "why_it_fails": "If the brief could only be satisfied by rebuilding the original site, it is broken. The goal is transferable design language, not imitation.", "grade": "F_reject" }, { "name": "missing_typographic_logic", "description": "The brief mentions typography only in vague terms or not at all. No type pairing, scale relationships, or hierarchy logic is specified.", "indicators": [ "'Clean sans-serif' without specifying grotesque vs geometric vs humanist", "No display type specified", "No scale contrast mentioned (no px values)", "No letter-spacing strategy (no em values)", "Hierarchy described only as 'bold headlines, light body'" ], "why_it_fails": "Typography is the primary carrier of tone and theme. Without specific typographic logic, the brief cannot produce consistent results.", "grade": "D_weak" }, { "name": "missing_color_relationships", "description": "Colors are listed without specifying their relationships: ground vs accent, saturation strategy, or functional usage.", "indicators": [ "List of hex codes without context ('use #FF0000, #00FF00, #0000FF')", "No dominant ground color specified", "No logic for when/where accents appear", "No saturation strategy (all vibrant vs muted vs monochrome)", "'Blue and white' without specifying which blue, how much white, their relationship" ], "why_it_fails": "Color is relational. A palette is not a list of colors but a system of relationships between them.", "grade": "C_acceptable" }, { "name": "missing_spatial_logic", "description": "Layout is described only in terms of sections or content order, not spatial relationships and proportions.", "indicators": [ "'Hero section with features below' without grid specification", "No whitespace values or proportions (no px or %)", "'Two columns' without specifying 50/50, 40/60, etc.", "No mention of alignment strategy (centered, asymmetric, etc.)", "Responsive breakpoints mentioned without layout logic" ], "why_it_fails": "Spatial logic creates the rhythm and hierarchy of the page. Without it, the brief produces generic layouts.", "grade": "C_acceptable" }, { "name": "false_motion_claims", "description": "The brief describes motion effects that are not actually visible in the reference or are technically implausible.", "indicators": [ "'Smooth animations throughout' without specifying what animates", "Parallax described on a static screenshot without evidence", "Easing functions mentioned without trigger or duration", "Complex WebGL effects described without reference evidence", "'Micro-interactions on all elements'—too vague to implement" ], "why_it_fails": "Motion must be grounded in what is visible or technically specified. Vague motion claims cannot be implemented or graded.", "grade": "C_acceptable" }, { "name": "theme_mismatch", "description": "The design language described does not actually evoke the stated theme. The connection is asserted but not demonstrated.", "examples": { "disco_with_pastels": "Disco theme described with soft pastels and gentle curves—contradicts the energy of disco", "brutalist_with_gradients": "Brutalist theme with glassmorphism and gradients—contradicts raw, unadorned principles", "luxury_with_bright_primaries": "Luxury theme with bright red, yellow, blue—contradicts restraint and sophistication", "playful_with_serious_typography": "Playful theme with formal transitional serif and muted colors" }, "why_it_fails": "The brief must demonstrate how the design language expresses the theme, not just assert that it does.", "grade": "D_weak" }, { "name": "over_specification", "description": "The brief is so prescriptive that it removes all creative decision-making, producing rigid, lifeless results.", "indicators": [ "Every pixel value specified without flexibility", "No room for content to breathe or adapt", "Decorative elements positioned to the pixel", "Copy provided that must be used verbatim", "No alternative states or variations described" ], "why_it_fails": "A brief should guide, not constrain. Over-specification produces mechanical results that lack the vitality of the reference.", "grade": "C_acceptable" }, { "name": "under_specification", "description": "The brief is so vague that it provides no meaningful guidance, producing inconsistent or generic results.", "indicators": [ "Single paragraph describing the entire design", "No specific values for any design element", "Relies entirely on 'inspiration' or 'feel'", "No differentiation from a generic template", "Could apply to literally any theme" ], "why_it_fails": "A weak brief is worse than no brief—it teaches the model that vague direction is acceptable.", "grade": "F_reject" }, { "name": "inconsistent_vocabulary", "description": "The brief uses design terms incorrectly or inconsistently, revealing lack of understanding.", "examples": [ "'Serif sans-serif' (contradictory terms)", "'Geometric grotesque' (different classifications)", "'Kerning' when tracking/letter-spacing is meant", "'Gradient' when solid color blocks are shown", "'Monospace' for proportional type" ], "why_it_fails": "Misused terminology produces incorrect implementations and teaches wrong concepts.", "grade": "D_weak" }, { "name": "screenshot_prose_mismatch", "description": "The written description contradicts what is actually visible in the screenshot.", "examples": [ "'Neutral white and grey palette' on a page that is saturated red", "'Minimal whitespace' on a page with extreme negative space", "'Serif headlines' when sans-serif is used", "'Dark mode' when the ground is white", "'Warm cream background' when the screenshot shows mint/cyan" ], "why_it_fails": "When prose and pixels disagree, the pixels win. The brief must be grounded in observable reality.", "grade": "C_acceptable" }, { "name": "duplicate_design_language", "description": "The brief describes a design language that is already covered by another brief in the set, adding no new range.", "indicators": [ "Same type pairing as existing brief (Didone + grotesk)", "Same color strategy (near-black + single accent)", "Same layout approach (asymmetric editorial)", "Only the subject matter differs", "Would produce visually similar results to existing brief" ], "examples": [ "Multiple 'dark mode luxury' briefs with near-black ground, geometric sans-serif, minimal accent", "Multiple 'warm editorial' briefs with cream ground, serif headlines, asymmetric layout" ], "why_it_fails": "The set needs range—fifty variations on dark editorial minimalism trains a model that can only do that.", "grade": "C_acceptable" }, { "name": "missing_banned_depiction", "description": "The brief fails to explicitly ban literal depictions of the theme, making it likely builders will include them.", "indicators": [ "No 'banned_depiction' section", "Banned depiction list is empty or incomplete", "Banned items are too generic ('no bad design')", "Missing obvious literal depictions for the theme" ], "why_it_fails": "Without explicit banned depictions, builders will default to literal representation. The brief must actively prevent this.", "grade": "C_acceptable" }, { "name": "industry_cues_in_rubric", "description": "The rubric contains industry-specific terminology that ties the design to a particular sector.", "examples": [ "'Scandinavian aesthetic' (furniture retail)", "'Museum curation' when the theme is actually about grid systems", "'Clinical' terminology that only applies to healthcare", "'Editorial' used to mean 'magazine' rather than layout approach" ], "why_it_fails": "Industry cues prevent the design language from being transferable to other subjects.", "grade": "C_acceptable" } ], "grading_rubric": { "A_excellent": "Specific, grounded, gradeable. Every design choice is measurable and justified. No literal depiction. No brand leakage. Transferable to any subject matter. Explicit banned depictions. Exact hex codes, px values, em values.", "B_good": "Mostly specific with minor vagueness. One or two gradeable criteria could be more precise. Theme expressed through language, not literal depiction. Some subjective adjectives but core system is measurable.", "C_acceptable": "Some specificity but significant vagueness in key areas (typography, color, or layout). May lean on adjectives. Theme connection asserted but partially demonstrated. Missing some banned depictions.", "D_weak": "Vague throughout. Relies on adjectives. Missing key design system elements. May hint at literal depiction. Brand leakage possible. Missing banned depiction section.", "F_reject": "Literal depiction, brand leakage, or extreme vagueness. Cannot be graded or implemented. Worse than no brief. Industry-specific language prevents transfer. Screenshot-prose mismatch." }, "positive_examples": [ { "brief": "disco-dekmantel", "why_good": "Specifies 'acid neon palette #a3e635, wobbly/blob-like condensed sans-serif with irregular baselines, dense all-caps text blocks'. Banned depiction explicitly lists 'disco balls, vinyl records, speakers, dancers, 70s retro imagery'. Energy comes from color vibration and typographic distortion, not literal objects." }, { "brief": "newyorker", "why_good": "Specifies 'Classical high-contrast serif (Irvin/New Yorker custom)', '48-64px headlines', '11-12px all-caps section labels with +0.1em tracking', 'Strict black-white-red palette with strategic red (#E02826) used only for urgent/feature content', 'Asymmetric two-column feature layout (40/60 text/image split)'. Every rubric line is measurable." }, { "brief": "unseen-studio", "why_good": "Specifies 'dusty rose ground #EDDEDB', 'single letterform U as monogram', 'content occupying ~15% of viewport', 'charcoal text #2D2D2D (not pure black)', 'geometric sans-serif (Futura/Avenir-class)', 'massive U monogram at light weight 300-400'. Radical minimalism with complete specificity." }, { "brief": "14islands", "why_good": "Specifies 'No buttons, no icons, no photography in the hero—just typography, whitespace, and a single gradient bar', 'Massive neo-grotesque display for headline words (80-120px, bold/black weight)', 'Single chromatic element: horizontal gradient bar (purple #8B2F5C → magenta #C13584 → rust/gold)', 'hero occupies ~30% of viewport height, 60-70% whitespace below'. Extreme restraint with exact values." } ], "negative_examples": [ { "brief": "celticseasalt", "why_bad": "Contains literal depiction: 'salt marsh scene at top', 'flowering plants', 'coastal landscape'. Brand leakage: 'Celtic crosses' in banned depiction. Industry-specific: references salt, ocean, coastal. Should focus on hand-drawn vintage illustration, botanical line work, organic wave transitions without subject matter." }, { "brief": "ikea", "why_bad": "Brand leakage: 'Scandinavian clarity', 'Scandinavian aesthetic'. Industry-specific: 'Swedish flags', 'meatballs', 'furniture assembly diagrams' in banned depiction. Should focus on mass-market retail clarity, bright blue promotional coding, asymmetric masonry grid without geographic or product references." }, { "brief": "seedlip", "why_bad": "Vague adjectives: 'Elegant light-weight serif', 'airy, refined', 'organic sophistication without rustic clichés', 'light and generous typography'. Should specify: 'High-contrast Didone-style serif at 300-400 weight with +0.02em letter-spacing', '80-120px section padding'." } ] } }