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.
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
02anthropicinstitutional researchunreviewed
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
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
03antinomycuratorial minimalismunreviewed
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.
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
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
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
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
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
08buckgallery curatorial minimalismunreviewed
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
09celticseasaltartisanal heritageunreviewed
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
10chrissie-abbottplayful Y2K maximalismunreviewed
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
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)
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
12cooper-hewittmodernist institutionalunreviewed
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
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
14dogstudiodark cinematic editorialunreviewed
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
15epicwarm editorial luxuryunreviewed
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
16feltronpersonal data indexunreviewed
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
17figmaplayful professionalismunreviewed
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.
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
19glossierclinical-cool commerceunreviewed
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
20guillaumecolombelzen immersiveunreviewed
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
21hellomondayminimal editorial galleryunreviewed
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
22henri-heymansbrutalist fluid 3Dunreviewed
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
23ikeademocratic functionalismunreviewed
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
24jordi-garretacinematic dark minimalismunreviewed
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
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
26kidsupergallery curatorial retailunreviewed
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
27linear-appdeveloper-tool minimalismunreviewed
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
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
28locomotive-agencyeditorial digital brutalismunreviewed
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
29locomotiveexperimental digital craftunreviewed
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
30luxury-byredowarm minimalismunreviewed
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
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
31madeinevolvecorporate brutalismunreviewed
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
32newyorkereditorial authorityunreviewed
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
33niccolo-mirandaneo-vintage editorialunreviewed
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
34notionplayful productivityunreviewed
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.
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
35playful-duolingoplayful gamificationunreviewed
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
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
37poolsuiteretro-computing leisureunreviewed
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
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
39refactoring-uideveloper-tool eleganceunreviewed
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
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
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
42seedlipbotanical sophisticationunreviewed
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
43stinkstudiosdark editorial productionunreviewed
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
44stripefintech warmthunreviewed
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
45studiofreightscattered editorialunreviewed
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
46typographicascholarly editorialunreviewed
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
47unseen-studioradical quiet luxuryunreviewed
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
48waaarkartisanal playunreviewed
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.
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
50y2k-neocitiesretro-futurist Y2Kunreviewed
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