Theme · dataset review

Are these briefs any good?

Fifty websites went in. Fifty written briefs came out. Before we train anything on them, people need to check them. Pick any ten rows and answer four questions each. Your marks save automatically on this device.

What you're doing

We turned 50 beautiful websites into 50 written design briefs. Your job is to say whether each brief is good. You don't need to code — you read the brief and answer four questions.

1 Does it name the company?

A brief should never say the brand or the industry it came from. It should describe a look, not a business.

× "Swedish furniture retailer"
✓ "flat-pack pragmatism, primary colour"
2 Could you build something else from it?

Pretend it's for a bakery instead. Does it still make sense? If the brief only works by rebuilding the original site, it's broken.

× "three-column pricing for the Pro plan"
✓ "three equal columns, generous gutters"
3 Is it specific enough to argue about?

You should be able to look at a finished page and say "that's wrong." Praise words score nothing.

× "elegant, modern typography"
✓ "headline 3× body size, tight letter spacing"
4 Does it tell you to draw the thing?

This is the big one. A "disco" brief must never say put a disco ball on it. It should say shiny type, dark ground, saturated colour.

× "an illustrated creature"
✓ "one dominant organic shape"
01 14islands nordic brutalism unreviewed
Capture of 14islands

The website this brief came from. Click to see it full size.

One-line prompt

An agency website with extreme typographic restraint and a single chromatic anchor

The 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.

Scoring rules

typographyMassive 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.
colorNear-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).
layoutAsymmetric 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.
motionSubtle 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.
textureFlat, 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.
Show what this brief forbids

Never depict

  • 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

Anything wrong with it? Tap all that apply

02 anthropic institutional research unreviewed
Capture of anthropic

The website this brief came from. Click to see it full size.

One-line prompt

A warm, earnest research foundation page with cream paper-like ground, high-contrast serif headlines, and a dramatic dark interruption block

The 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.

Scoring rules

typographyHigh-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
colorWarm 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
layoutAsymmetric 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
motionSubtle scroll-triggered reveals for cards; potential parallax on dark block; restrained motion befitting institutional seriousness
textureFlat, clean surfaces; no grain, noise, or decorative texture; paper-like quality comes from color alone; subtle shadows on cards for depth
Show what this brief forbids

Never depict

  • 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

Anything wrong with it? Tap all that apply

03 antinomy curatorial minimalism unreviewed
Capture of antinomy

The website this brief came from. Click to see it full size.

One-line prompt

A creative studio portfolio with gallery-like restraint and asymmetric editorial rhythm

The 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.

Scoring rules

typographyClean 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.
colorNear-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.
layoutAsymmetric 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.
motionSlow, 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.
textureWarm, 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.
Show what this brief forbids

Never depict

  • 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

Anything wrong with it? Tap all that apply

04 apple-airpods product luxury minimalism unreviewed
Capture of apple-airpods

The website this brief came from. Click to see it full size.

One-line prompt

A product page with extreme whitespace, single blue accent, concentric ripples behind the product, and gallery-like presentation

The 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.

Scoring rules

typographyClean 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
colorVery 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
layoutFixed 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
motionConcentric 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)
textureNo visible texture or pattern; extremely minimal surface; subtle circular gradient/radial glow effect behind product; floating product with soft shadow; clean flat surfaces throughout
Show what this brief forbids

Never depict

  • 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

Anything wrong with it? Tap all that apply

05 aristide-benoist brutalist editorial fragmentation unreviewed
Capture of aristide-benoist

The website this brief came from. Click to see it full size.

One-line prompt

A portfolio with compressed grotesk display type, strict monochromatic palette, and asymmetric layout with vertical image strips creating rhythmic alternation

The 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.

Scoring rules

typographyCompressed 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
colorNear-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
layoutAsymmetric 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
motionInferred: 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
textureNo visible borders, reduced contrast on imagery (crushed blacks, lifted shadows), slight fade/overlay reducing intensity to ~70%, film strip or contact sheet aesthetic
Show what this brief forbids

Never depict

  • 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

Anything wrong with it? Tap all that apply

06 audit-glossier-product clinical e-commerce minimalism unreviewed
Capture of audit-glossier-product

The website this brief came from. Click to see it full size.

One-line prompt

A product page with extreme white minimalism, single soft pink accent badge, and natural skin texture photography showing realistic pores and glossy skin

The 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.

Scoring rules

typographyClean 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
colorPure 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
layoutTwo-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
motionImage gallery transitions, expandable accordion sections, hover states on size selectors, subtle shadow on product images
texturePill-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
Show what this brief forbids

Never depict

  • 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

Anything wrong with it? Tap all that apply

07 brutalist-whatiswebbrutalism intentional brutalism unreviewed
Capture of brutalist-whatiswebbrutalism

The website this brief came from. Click to see it full size.

One-line prompt

A stark monochrome page with massive condensed headline, broken across lines, and monospace section numbering

The 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.

Scoring rules

typographyGrotesque/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)
colorStrictly 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
layoutSingle-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
motionNo 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
textureZero imagery, zero photography, zero illustration; zero texture, zero shadows, zero borders or decorative rules; clean flat unadorned surface; whitespace as the only 'decoration'
Show what this brief forbids

Never depict

  • 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

Anything wrong with it? Tap all that apply

08 buck gallery curatorial minimalism unreviewed
Capture of buck

The website this brief came from. Click to see it full size.

One-line prompt

A portfolio with an asymmetric bento-box grid, monochrome frame, and project-first hierarchy where imagery dominates

The 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.

Scoring rules

typographyClean 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
colorPure 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
layoutAsymmetric 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
motionSubtle 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
textureFlat, 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
Show what this brief forbids

Never depict

  • 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

Anything wrong with it? Tap all that apply

09 celticseasalt artisanal heritage unreviewed
Capture of celticseasalt

The website this brief came from. Click to see it full size.

One-line prompt

An e-commerce site with hand-illustrated storybook aesthetic and vintage apothecary framing

The 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.

Scoring rules

typographyOrnate 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.
colorDeep 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.
layoutFull-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.
motionSubtle 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.
textureHand-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.
Show what this brief forbids

Never depict

  • 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

Anything wrong with it? Tap all that apply

10 chrissie-abbott playful Y2K maximalism unreviewed
Capture of chrissie-abbott

The website this brief came from. Click to see it full size.

One-line prompt

A portfolio with pale mint background, bold geometric sans type, emoji navigation icons, and asymmetric masonry grid

The 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.

Scoring rules

typographyBold 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
colorPale 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
layoutCentered 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
motionSubtle hover states on navigation; potential image zoom or reveal on hover; smooth scroll behavior
texturePure flat color on background; no grain, noise, or texture; artwork may have varied textures; clean digital precision in layout
Show what this brief forbids

Never depict

  • 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

Anything wrong with it? Tap all that apply

11 claudio-guglieri refined technical minimalism unreviewed
Capture of claudio-guglieri

The website this brief came from. Click to see it full size.

One-line prompt

A designer portfolio with pure black ground, 3D rendered cursor objects as hero imagery, and dramatic scale hierarchy with floating scattered elements

The 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.

Scoring rules

typographyGeometric 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
colorPure 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)
layoutAsymmetric 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)
motionInferred: subtle float/parallax on cursor elements, arrow slide on pill buttons, progress indicator animation on hero button, image zoom on Next navigation
texture3D 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
Show what this brief forbids

Never depict

  • 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

Anything wrong with it? Tap all that apply

12 cooper-hewitt modernist institutional unreviewed
Capture of cooper-hewitt

The website this brief came from. Click to see it full size.

One-line prompt

A cultural institution page with heavy condensed sans-serif typography, Bauhaus grid system, and vibrant saturated accent colors against black header band

The 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.

Scoring rules

typographyHeavy 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
colorBlack 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
layoutStrict 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
motionCarousel indicators (orange active dot), hover states on CTAs, potential image carousel functionality
texture1px white horizontal rules in navigation, rectangular highlight backgrounds behind headlines, minimal card styling with tight image grids, no shadows
Show what this brief forbids

Never depict

  • 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

Anything wrong with it? Tap all that apply

13 disco-dekmantel psychedelic underground unreviewed
Capture of disco-dekmantel

The website this brief came from. Click to see it full size.

One-line prompt

A maximalist event page with acid neon colors, distorted typography, and dense flyer-style information layout

The 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.

Scoring rules

typographyExtremely 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
colorNear-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
layoutSingle-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
motionSubtle 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)
textureDrop 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
Show what this brief forbids

Never depict

  • 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

Anything wrong with it? Tap all that apply

14 dogstudio dark cinematic editorial unreviewed
Capture of dogstudio

The website this brief came from. Click to see it full size.

One-line prompt

A creative agency page with a Didone serif headline, a dramatic illustrated creature, and bioluminescent gradients on near-black

The 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.

Scoring rules

typographyDidone-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)
colorNear-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)
layoutAsymmetrical 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
motionSubtle 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
texturePainterly 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
Show what this brief forbids

Never depict

  • 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

Anything wrong with it? Tap all that apply

15 epic warm editorial luxury unreviewed
Capture of epic

The website this brief came from. Click to see it full size.

One-line prompt

An agency page with warm light gray ground, high-contrast serif headlines, and single saturated accent object breaking the grid

The 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.

Scoring rules

typographyHigh-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
colorWarm 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
layoutNarrow 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
motionInferred: subtle parallax on floating image, smooth scroll transitions, play button with curved text animation
textureThin 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
Show what this brief forbids

Never depict

  • 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

Anything wrong with it? Tap all that apply

16 feltron personal data index unreviewed
Capture of feltron

The website this brief came from. Click to see it full size.

One-line prompt

A chronological portfolio index with rainbow color-coding, single neo-grotesk typeface, and temporal scale variation

The 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.

Scoring rules

typographySingle 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
colorFull-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')
layoutHorizontal 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
motionSubtle hover states on entries; potential color shifts or underlines on interaction; smooth scroll behavior
texturePure flat color on text; no background texture or decoration; clean digital precision; white or near-white ground
Show what this brief forbids

Never depict

  • 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

Anything wrong with it? Tap all that apply

17 figma playful professionalism unreviewed
Capture of figma

The website this brief came from. Click to see it full size.

One-line prompt

A SaaS creative tool homepage balancing professional credibility with approachable energy

The 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.

Scoring rules

typographyClean 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.
colorPure 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.
layoutFixed 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.
motionSubtle 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.
textureClean, 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.
Show what this brief forbids

Never depict

  • 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

Anything wrong with it? Tap all that apply

18 gianlucagradogna dual identity editorial unreviewed
Capture of gianlucagradogna

The website this brief came from. Click to see it full size.

One-line prompt

A portfolio website with split-screen duality, dark mode, and editorial catalog numbering

The 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.

Scoring rules

typographyExtreme 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.
colorStrict 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.
layoutAsymmetrical 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.
motionParallax-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.
textureMonochrome 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.
Show what this brief forbids

Never depict

  • 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

Anything wrong with it? Tap all that apply

19 glossier clinical-cool commerce unreviewed
Capture of glossier

The website this brief came from. Click to see it full size.

One-line prompt

A beauty e-commerce page with stark white ground, product-derived accent colors, and natural skin texture photography with diverse casting

The 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.

Scoring rules

typographyClean 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
colorOff-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
layout12-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
motionHorizontal product carousel, hover states on product cards, smooth scroll transitions
textureProduct 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)
Show what this brief forbids

Never depict

  • 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

Anything wrong with it? Tap all that apply

20 guillaumecolombel zen immersive unreviewed
Capture of guillaumecolombel

The website this brief came from. Click to see it full size.

One-line prompt

A portfolio website that is a 3D environment rather than a page, with brutalist typography floating in atmosphere

The 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.

Scoring rules

typographyExtreme 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.
colorMonochromatic 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.
layoutTrue 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.
motionWebGL 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.
textureStylized 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.
Show what this brief forbids

Never depict

  • 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

Anything wrong with it? Tap all that apply

21 hellomonday minimal editorial gallery unreviewed
Capture of hellomonday

The website this brief came from. Click to see it full size.

One-line prompt

A monochrome portfolio with elegant serif headlines, asymmetric masonry grid, and hand-drawn line art illustration

The 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.

Scoring rules

typographyHigh-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
colorStrict 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
layoutAsymmetric 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
motionSubtle hover states on project cards; potential parallax on hero illustration; smooth scroll behavior befitting gallery experience
texturePure flat color only; no grain, noise, or texture; hand-drawn line art provides all visual interest; clean digital precision in grid
Show what this brief forbids

Never depict

  • 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

Anything wrong with it? Tap all that apply

22 henri-heymans brutalist fluid 3D unreviewed
Capture of henri-heymans

The website this brief came from. Click to see it full size.

One-line prompt

A portfolio with pure black ground, condensed grotesk all-caps typography, centered vertical stack layout, and blurred organic 3D form

The 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.

Scoring rules

typographyCondensed 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
colorBinary 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
layoutRigid 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
motion3D 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
textureGaussian 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
Show what this brief forbids

Never depict

  • 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

Anything wrong with it? Tap all that apply

23 ikea democratic functionalism unreviewed
Capture of ikea

The website this brief came from. Click to see it full size.

One-line prompt

A mass-market retail homepage with Scandinavian clarity and bento-box promotional grid

The 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.

Scoring rules

typographyClean 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.
colorBright 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.
layoutFixed 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.
motionSubtle 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.
textureFlat 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.
Show what this brief forbids

Never depict

  • 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

Anything wrong with it? Tap all that apply

24 jordi-garreta cinematic dark minimalism unreviewed
Capture of jordi-garreta

The website this brief came from. Click to see it full size.

One-line prompt

A portfolio with corner-anchored navigation, a central 3D cylindrical scroll element, and near-black void space

The 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.

Scoring rules

typographyExtremely 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
colorNear-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
layoutAsymmetrical 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 ]
motionCylindrical 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)
textureSubtle 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
Show what this brief forbids

Never depict

  • 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

Anything wrong with it? Tap all that apply

25 josh-comeau playful technical education unreviewed
Capture of josh-comeau

The website this brief came from. Click to see it full size.

One-line prompt

A personal site with soft blue gradient header, 3D meditating character, pink accent labels, and serif/sans name pairing

The 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.

Scoring rules

typographyClean 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
colorSoft 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
layoutTwo-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
motion3D 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
texture3D 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
Show what this brief forbids

Never depict

  • 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

Anything wrong with it? Tap all that apply

26 kidsuper gallery curatorial retail unreviewed
Capture of kidsuper

The website this brief came from. Click to see it full size.

One-line prompt

An e-commerce page with white ground, bold condensed all-caps typography, rigid grid with border lines, and museum-like product presentation

The 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.

Scoring rules

typographyBold 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
colorPure 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
layoutRigid 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
motionSubtle hover states on product cells; potential image swap or zoom on hover; smooth scroll behavior; restrained motion befitting gallery atmosphere
textureThin precise border lines (1px) as frames; soft shadows on product photography; even lighting like conservation documentation; clean digital precision in grid
Show what this brief forbids

Never depict

  • 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

Anything wrong with it? Tap all that apply

27 linear-app developer-tool minimalism unreviewed
Capture of linear-app

The website this brief came from. Click to see it full size.

One-line prompt

A dark mode SaaS landing page with pure black background, geometric sans-serif typography, and abstract 3D illustrations

The 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.

Scoring rules

typographyGeometric 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
colorNear-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
layoutContainer max-width ~1200px, horizontal padding 24px→48px→80px+, vertical section spacing 120-160px, three-column feature grid with 24-32px gaps
motionInferred: subtle parallax on scroll, hover lift on cards with increased shadow, smooth transitions 200-300ms ease-out
textureSubtle 1px borders on cards (#333333), large soft shadows with subtle purple/blue tint on product screenshots, 12-16px border radius on containers
Show what this brief forbids

Never depict

  • 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

Anything wrong with it? Tap all that apply

28 locomotive-agency editorial digital brutalism unreviewed
Capture of locomotive-agency

The website this brief came from. Click to see it full size.

One-line prompt

A dark editorial portfolio with Didone serif headlines, monospace technical accents, and pixelated imagery suggesting digital transformation

The 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.

Scoring rules

typographyDidone-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
colorBinary foundation: deep black (#000000) and pure white (#FFFFFF); single vivid crimson accent (#E31B23) used sparingly for atmospheric intensity; no gradients or additional colors
layoutAsymmetric 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
motionPixelation 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
textureMosaic pixelation on photography reducing fidelity to large color blocks; digital artifacts as aesthetic; sharp typographic edges; no decorative textures or patterns
Show what this brief forbids

Never depict

  • 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

Anything wrong with it? Tap all that apply

29 locomotive experimental digital craft unreviewed
Capture of locomotive

The website this brief came from. Click to see it full size.

One-line prompt

A bold experimental portfolio with complementary color tension, mixing classical serif typography with digital distortion effects

The 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.

Scoring rules

typographyHigh-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
colorWarm 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
layoutAnti-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)
motionPixelation/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
textureIntentional lo-fi pixelation on photography; digital compression artifacts as aesthetic; flat color blocks with sharp edges; no shadows or gradients
Show what this brief forbids

Never depict

  • 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

Anything wrong with it? Tap all that apply

30 luxury-byredo warm minimalism unreviewed
Capture of luxury-byredo

The website this brief came from. Click to see it full size.

One-line prompt

A luxury brand page with custom geometric stencil wordmark, muted floral photography, and extreme scale contrast between monumental typography and microscopic details

The 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.

Scoring rules

typographyCustom 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
colorPure white #FFFFFF ground, near-black #000000 text, off-white #F5F5F5 for secondary surfaces, strictly achromatic UI with colorful content from photography only
layoutFull-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
motionInferred: smooth fade transitions, subtle zoom on product hover, gentle parallax on scroll
textureNo 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
Show what this brief forbids

Never depict

  • 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

Anything wrong with it? Tap all that apply

31 madeinevolve corporate brutalism unreviewed
Capture of madeinevolve

The website this brief came from. Click to see it full size.

One-line prompt

An agency page with monumental condensed type, engineering grid lines, and a motion-blurred figure on near-black

The 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.

Scoring rules

typographyExtremely 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)
colorDeep 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
layoutAsymmetric 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
motionMotion-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)
textureFaint 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
Show what this brief forbids

Never depict

  • 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

Anything wrong with it? Tap all that apply

32 newyorker editorial authority unreviewed
Capture of newyorker

The website this brief came from. Click to see it full size.

One-line prompt

A prestigious magazine website with classical typography and restrained use of signature red

The 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.

Scoring rules

typographyHigh-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).
colorStrict 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.
layoutAsymmetric 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.
motionMinimal 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.
textureClean, 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.
Show what this brief forbids

Never depict

  • 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

Anything wrong with it? Tap all that apply

33 niccolo-miranda neo-vintage editorial unreviewed
Capture of niccolo-miranda

The website this brief came from. Click to see it full size.

One-line prompt

A newspaper-inspired portfolio with massive condensed serif mastheads, paper grain texture, and asymmetric column grids

The 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.

Scoring rules

typographyMassive 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
colorWarm 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
layoutAsymmetric 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
motionScroll-triggered animations suggesting printing press impressions; ink spread hover effects; parallax layering of paper textures; texture shifts on scroll
textureVisible 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
Show what this brief forbids

Never depict

  • 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

Anything wrong with it? Tap all that apply

34 notion playful productivity unreviewed
Capture of notion

The website this brief came from. Click to see it full size.

One-line prompt

A SaaS landing page with white ground, extreme type scale contrast, rounded character illustrations, and card-based feature sections

The 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.

Scoring rules

typographyClean 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
colorNear-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
layoutCard-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
motionSubtle hover states on cards; smooth scroll behavior; potential floating animation on character illustrations; gentle transitions
textureSubtle drop shadows on cards for elevation; soft gradients in UI mockups; flat colors on illustrations; clean digital surfaces
Show what this brief forbids

Never depict

  • 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

Anything wrong with it? Tap all that apply

35 playful-duolingo playful gamification unreviewed
Capture of playful-duolingo

The website this brief came from. Click to see it full size.

One-line prompt

A language learning or education page with rounded geometric typography, bright lime green brand color, and flat 3D illustrations with friendly cartoon characters

The 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.

Scoring rules

typographyRounded 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
colorBright 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
layoutContainer 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
motionCharacter illustrations with subtle bounce or float, button press states with shadow reduction, smooth scroll transitions, potential character eye-following cursor
textureFlat 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
Show what this brief forbids

Never depict

  • 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

Anything wrong with it? Tap all that apply

36 playful-poolsuite retro-computing leisure unreviewed
Capture of playful-poolsuite

The website this brief came from. Click to see it full size.

One-line prompt

A Windows 95-style interface with pastel pink desktop, media player window, taskbar navigation, and CRT effects

The 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.

Scoring rules

typographySystem-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
colorSoft 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
layoutCentered 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
motionWindow 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
textureCRT 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
Show what this brief forbids

Never depict

  • 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

Anything wrong with it? Tap all that apply

37 poolsuite retro-computing leisure unreviewed
Capture of poolsuite

The website this brief came from. Click to see it full size.

One-line prompt

Windows 95-style interface with pastel pink desktop and CRT scanline effects

The 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.

Scoring rules

typographySystem-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.
colorMuted 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.
layoutCentered 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.
motionCRT 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.
textureCRT 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.
Show what this brief forbids

Never depict

  • 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

Anything wrong with it? Tap all that apply

38 pudding-love-songs data journalism scrollytelling unreviewed
Capture of pudding-love-songs

The website this brief came from. Click to see it full size.

One-line prompt

A scrollytelling data story with warm cream background, dark card spotlight, and card-based slide progression

The 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.

Scoring rules

typographyChunky 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
colorWarm 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
layoutSingle-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
motionCard-based slide transitions; smooth scroll behavior; potential subtle animations on card entrance; keyboard navigation support
textureFlat clean surfaces; no grain or noise; depth created through color contrast alone; subtle shadow or border treatment on cards
Show what this brief forbids

Never depict

  • 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

Anything wrong with it? Tap all that apply

39 refactoring-ui developer-tool elegance unreviewed
Capture of refactoring-ui

The website this brief came from. Click to see it full size.

One-line prompt

A dark mode landing page for a technical product with gradient text headlines and 3D product mockups

The 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.

Scoring rules

typographyGeometric 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
colorDeep 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
layoutTwo-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
motionGradient 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
textureSubtle geometric grid pattern in background at very low opacity; glassy reflection effect on 3D product element; faint glow effect on accent elements
Show what this brief forbids

Never depict

  • 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

Anything wrong with it? Tap all that apply

40 reformcollective warm editorial material unreviewed
Capture of reformcollective

The website this brief came from. Click to see it full size.

One-line prompt

A portfolio with warm cream ground, bold grotesque vs italic serif type tension, hyper-realistic 3D soft forms, and dark project cards

The 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.

Scoring rules

typographyBold 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
colorWarm 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
layoutFull-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
motion3D forms with parallax-ready layering; soft-body physics suggesting compression and overlap; scroll-triggered card reveals; potential hover states on service tags
textureHyper-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
Show what this brief forbids

Never depict

  • 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

Anything wrong with it? Tap all that apply

41 resn-studio digital craft precious object unreviewed
Capture of resn-studio

The website this brief came from. Click to see it full size.

One-line prompt

A studio page with a dark faceted 3D crystal, chromatic aberration edges, and whisper-thin centered typography

The 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.

Scoring rules

typographyGeometric 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
colorNear-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
layoutStrictly 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
motion3D 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)
textureFaceted crystalline 3D form with selective reflective highlights; chromatic aberration/RGB split effect on edges; clean textureless background; no other imagery, patterns, or decorative elements
Show what this brief forbids

Never depict

  • 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

Anything wrong with it? Tap all that apply

42 seedlip botanical sophistication unreviewed
Capture of seedlip

The website this brief came from. Click to see it full size.

One-line prompt

A premium brand website with organic minimalism and restrained green palette

The 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.

Scoring rules

typographyElegant 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.
colorWarm 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.
layoutAnnouncement 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).
motionSubtle 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.
textureClean, 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.
Show what this brief forbids

Never depict

  • 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

Anything wrong with it? Tap all that apply

43 stinkstudios dark editorial production unreviewed
Capture of stinkstudios

The website this brief came from. Click to see it full size.

One-line prompt

A production company portfolio with massive logotype overlaying hero imagery, near-black ground, and asymmetric editorial grid with broken alignment

The 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.

Scoring rules

typographyBold 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
colorPure 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
layoutFull-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
motionLogo blending with hero image (multiply or overlay effect), subtle video backgrounds, smooth transitions between projects
textureNo visible borders on project cards, tight crop on images, dark rounded cookie banner (4-6px radius), cinematic 16:9 aspect ratio thumbnails, minimal shadows
Show what this brief forbids

Never depict

  • 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

Anything wrong with it? Tap all that apply

44 stripe fintech warmth unreviewed
Capture of stripe

The website this brief came from. Click to see it full size.

One-line prompt

A financial services landing page with flowing gradients, gradient-filled hero text, and soft 3D mesh shapes suggesting fluidity

The 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.

Scoring rules

typographyGeometric 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
colorWhite 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
layoutContainer 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
motionSubtle card lift on hover with increased shadow, smooth gradient animations, 200-300ms ease transitions, floating notification card with avatars
textureSoft 3D mesh gradient shapes in corners, 12-16px border radius on cards, 1px borders #E5E7EB or shadow-only cards, large sweeping diagonal gradients
Show what this brief forbids

Never depict

  • 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

Anything wrong with it? Tap all that apply

45 studiofreight scattered editorial unreviewed
Capture of studiofreight

The website this brief came from. Click to see it full size.

One-line prompt

A creative agency portfolio with radical asymmetry and kinetic scattered grid layout

The 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.

Scoring rules

typographyElegant 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.
colorMonochrome 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.
layoutAsymmetric, 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).
motionHover 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.
textureFlat, 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.
Show what this brief forbids

Never depict

  • 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

Anything wrong with it? Tap all that apply

46 typographica scholarly editorial unreviewed
Capture of typographica

The website this brief came from. Click to see it full size.

One-line prompt

A sophisticated publication website for typography reviews with warm institutional character

The 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.

Scoring rules

typographyLayered 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.
colorStrictly 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.
layoutAsymmetric 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).
motionSubtle 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.
texturePaper-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.
Show what this brief forbids

Never depict

  • 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

Anything wrong with it? Tap all that apply

47 unseen-studio radical quiet luxury unreviewed
Capture of unseen-studio

The website this brief came from. Click to see it full size.

One-line prompt

A studio page with radical centered composition, dusty rose ground, and single letterform monogram against 80% negative space

The 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.

Scoring rules

typographyGeometric 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
colorDusty rose/pale blush ground #EDDEDB or #E8D5D0 (RGB ~232, 213, 208), charcoal text #2D2D2D or #333333 (not pure black), strictly two-color monochromatic scheme
layoutRadical 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
motionInferred: subtle fade-in on load, potential letterform animation
textureNo rules, borders, or containers, no imagery or photography, no buttons or navigation visible, no texture or pattern, pure typographic expression
Show what this brief forbids

Never depict

  • 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

Anything wrong with it? Tap all that apply

48 waaark artisanal play unreviewed
Capture of waaark

The website this brief came from. Click to see it full size.

One-line prompt

A creative agency website with isometric whimsy and powder-blue sophistication

The 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.

Scoring rules

typographyElegant 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.
colorSoft 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.
layoutAsymmetrical 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.
motionSubtle 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.
textureFlat 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.
Show what this brief forbids

Never depict

  • 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

Anything wrong with it? Tap all that apply

49 whatiswebbrutalism intentional brutalism unreviewed
Capture of whatiswebbrutalism

The website this brief came from. Click to see it full size.

One-line prompt

stark monochrome editorial with extreme type scale and zero decoration

The 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.

Scoring rules

typographyClean 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.
colorStrictly monochrome: pure black (#000000) text on pure white (#FFFFFF) background. No gray tints. No gradients. No accent colors. High contrast only through value.
layoutAsymmetric 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.
motionMinimal—this is static, declarative design. Possible subtle scroll-triggered reveals for sections. No hover animations, no parallax, no transitions. The stillness is the point.
textureNone 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.
Show what this brief forbids

Never depict

  • 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

Anything wrong with it? Tap all that apply

50 y2k-neocities retro-futurist Y2K unreviewed
Capture of y2k-neocities

The website this brief came from. Click to see it full size.

One-line prompt

A personal homepage with neon-on-black palette, pixel art characters, tiled classical wallpaper, and monospace typography

The 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.

Scoring rules

typographyMonospace/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
colorBlack (#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
layoutThree-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
motionNo 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
textureTiled 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
Show what this brief forbids

Never depict

  • 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

Anything wrong with it? Tap all that apply