01
Editorial / Magazine
Editorial / Magazine — Architecture Studio
Print-magazine editorial — asymmetric grid, oversized photography, curator-style captions.
- Best for
- Architecture, interior and branding studios, creative agencies.
- Fonts
- Fraunces (display serif) + Archivo (body) + Fragment Mono (captions).
Use the frontend-design and ui-ux-pro-max skills if installed. If taste-skill is
present, set its dials to VARIANCE 9, MOTION 6, DENSITY 3. Ban lists remove
cliches, never scale, texture or color: when any ban or restraint line conflicts
with the GRAPHIC LANGUAGE or BOLDNESS FLOOR below, the bolder instruction wins.
Build a single self-contained index.html (embedded CSS/JS, Google Fonts allowed) for
[Atelier Tanah — an architecture studio in Yogyakarta focused on tropical-modern
houses]. Audience: [affluent homeowners and developers]. The page's single job:
make visitors request a project consultation. Write all on-page copy in [English] —
real, specific copy, no lorem ipsum, no "elevate your" clichés.
BEFORE writing any code, produce a short design plan: palette tokens, type scale,
ASCII wireframe of every section, and the one signature element. Critique the plan
against generic AI defaults, revise once, then build.
ART DIRECTION — editorial print magazine:
- Typography: Fraunces (display, weights 300 & 600, optical size high) for headlines;
Archivo for body; Fragment Mono for captions/labels in uppercase, letter-spaced.
- Palette: gallery white #FAFAF8, ink #141414, deep moss #2F4A38 as the only accent,
warm gray #8A8578 for captions. No gradients anywhere.
- Layout: asymmetric 12-column grid where images and text deliberately overlap.
Headlines may break across the grid and sit partially on top of photos.
Generous but UNEVEN whitespace — some pairings tight, some vast.
- Signature: the hero is a magazine cover — a massive Fraunces headline (clamp up to
9rem) overlapping a full-bleed architectural photo, with a vertical "ISSUE 01 —
[2026]" label running along the left margin in Fragment Mono.
SECTIONS (in order):
1. Cover hero as described above, with a small italic standfirst paragraph.
2. "Approach" — two-column editorial spread: large drop-cap paragraph left,
numbered principles right (numbers only because the process IS sequential).
3. Selected works — alternating full-bleed and half-width project photos, each with
a mono caption block (project name, location, year, area in m²) like a plate
caption in a monograph.
4. A pull-quote section: one client sentence set huge in Fraunces italic.
5. Studio — small team portraits, short bios, real-sounding names.
6. Footer as a colophon: contact, address, Instagram, set like a magazine imprint.
MOTION (CSS-first, respect prefers-reduced-motion):
- Page load: headline lines slide up with 80ms stagger, photo scales from 1.06 to 1.
- Scroll: images reveal with a clip-path wipe; captions fade in 150ms later.
Use CSS scroll-driven animations (animation-timeline: view()) with an
IntersectionObserver fallback.
- Hover on projects: photo shifts 8px and desaturates slightly, caption underlines.
- Nothing else. No floating particles, no tilt cards.
Use placeholder images from https://picsum.photos or CSS-composed placeholders with
correct aspect ratios; note in a comment where real photos go.
GRAPHIC LANGUAGE (this is what makes the page eye-catching; execute all of it):
- Texture: fine film grain (SVG noise, ~4% opacity) over the entire page.
- Scale: cover headline up to 12vw; a ghost issue numeral "01" at 38vw in moss
at 6% opacity behind the works section.
- Image treatment: every photo gets a deep-moss duotone (grayscale + moss
multiply overlay). Never ship a raw photo.
- Devices: the vertical issue label; a 14rem Fraunces quotation mark opening the
pull-quote; mono plate rules with small index ticks.
- Color blocking: the pull-quote section is full-bleed solid moss with paper
type; the colophon sits on ink with paper type.
- Break the grid: plate B bleeds off the right viewport edge; its caption
overlaps the photo's bottom-left corner on a paper slug.
- Scroll set-piece: the "Selected works" headline renders as outlined text that
fills with ink as it scrolls through the viewport.
BOLDNESS FLOOR (as binding as the quality floor): display type at the stated
scale; at least one full-bleed color section; at least two deliberate overlaps;
texture page-wide; one choreographed scroll set-piece; hovers that transform,
not just underline; no photo shipped without its treatment.
QUALITY FLOOR: semantic HTML, one h1, visible keyboard focus, WCAG AA contrast,
responsive to 360px (grid collapses to single column but keeps editorial overlap
moments), font-display: swap, lazy-load below-fold images.
02
Swiss / International Style
Swiss / International Style — Design Consultancy
Swiss International Typographic Style — rigid grid, precision, objectivity, zero decoration.
- Best for
- Design/strategy consultancies, typography studios, designer portfolios.
- Fonts
- Archivo (all roles, many weights) + IBM Plex Mono (data/labels).
Use the frontend-design and ui-ux-pro-max skills if installed. If taste-skill is
present, set its dials to VARIANCE 7, MOTION 3, DENSITY 4. Ban lists remove
cliches, never scale, texture or color: when any ban or restraint line conflicts
with the GRAPHIC LANGUAGE or BOLDNESS FLOOR below, the bolder instruction wins.
Build a single self-contained index.html (embedded CSS/JS, Google Fonts allowed) for
[Bentuk — a design consultancy in Jakarta that fixes broken product experiences for
banks and airlines]. Audience: [heads of product and CMOs]. Single job of the page:
get qualified companies to book a working session. Copy language: [English].
Copy voice: factual, confident, zero empty adjectives — every claim has a number or
a name attached.
BEFORE code: produce a design plan (tokens, type scale, ASCII wireframes, signature
element), self-critique against generic defaults, revise once, then build.
ART DIRECTION — Swiss International Typographic Style, executed strictly:
- One typeface family only: Archivo (weights 400/500/700/900, plus Archivo Expanded
for the wordmark). IBM Plex Mono for figures, indices and labels.
- Palette: pure white #FFFFFF, near-black #0A0A0A, signal red #E63312 used ONLY for
interactive elements and one hero word, cool gray #D8DAD6 for rules and dividers.
- Layout: rigorous 12-column grid, flush-left ragged-right, no centered text
anywhere. Strong horizontal rules (2px black) separate sections. Zero border-radius,
zero shadows, zero gradients.
- Type does the design: hero is a full-viewport typographic statement set in Archivo
900 across 3 lines, with ONE word in signal red. Font sizes jump in a strict scale
(e.g. 14 / 18 / 28 / 44 / 96+px) — no in-between sizes.
- Signature: a small "GRID" toggle button fixed in the corner that overlays the
12-column grid in translucent red, showing the layout discipline. Ship it working.
SECTIONS:
1. Typographic hero + one-line description + index number "001".
2. Services as a numbered table (001–004): service name, one-line outcome, typical
duration. Table rows are a real <table> or definition list — structure IS the design.
3. Case studies: strict 2-column entries — client name in 700, problem → result in
one sentence each, metric in IBM Plex Mono red (e.g. "+34% conversion").
4. Manifesto: 3 short numbered statements, set large.
5. Contact: email set huge as the final typographic moment, hover turns it red.
MOTION — restraint is the aesthetic:
- No scroll animations at all. Content is simply there.
- Hover states are instant and precise: red fill sweeps a link's underline in 120ms
linear; table rows get a red index number on hover.
- Use the View Transitions API for the grid-toggle state change (progressive
enhancement).
- Respect prefers-reduced-motion trivially (there is almost no motion).
GRAPHIC LANGUAGE (Swiss boldness is scale and red, not ornament; execute all):
- Texture: none. Pure white is the texture; make emptiness deliberate and vast.
- Scale: hero statement at 14vw Archivo 900; section index numerals as 24vw
ghost figures at 4% black behind each section.
- Image treatment: no photos. Typography, rules and one geometric mark are the
imagery.
- Devices: 2px black rules; ONE signal-red square anchoring the hero
composition; 90deg-rotated mono labels on section margins (Swiss poster
convention, allowed here).
- Color blocking: the manifesto section is full-bleed signal red with white
Archivo 900 type.
- Break the grid: one hero line shifts hard right across 8 columns; the red
square overlaps the headline baseline.
- Scroll set-piece: the working grid-toggle, plus manifesto statements that
snap in line-by-line at 120ms linear — mechanical, never floaty.
BOLDNESS FLOOR (as binding as the quality floor): display type at the stated
scale; the full-bleed red section present; at least two deliberate overlaps;
one choreographed scroll set-piece; hovers that transform (red floods, not just
underlines).
QUALITY FLOOR: semantic HTML with real tables/lists, one h1, visible focus states
(2px red outline, offset 2px), AA contrast, responsive to 360px (grid drops to 4
columns, rules stay), font-display: swap.
03
Dark Luxury + Video Background
video bg
Dark Luxury + Video Background — Premium Real Estate
Quiet, dark luxury — slow aerial video, classic serif, muted bronze, room to breathe.
- Best for
- Premium property/villas, watches, jewelry, private clubs, yachts.
- Fonts
- Marcellus (display) + Figtree (body) + wide letter-spaced small caps for labels.
Use the frontend-design and ui-ux-pro-max skills if installed. If taste-skill is
present, set its dials to VARIANCE 8, MOTION 6, DENSITY 2. Ban lists remove
cliches, never scale, texture or color: when any ban or restraint line conflicts
with the GRAPHIC LANGUAGE or BOLDNESS FLOOR below, the bolder instruction wins.
Build a single self-contained index.html (embedded CSS/JS, Google Fonts allowed) for
[Larasati Estates — a collection of five private cliff-top villas in Uluwatu, Bali,
for sale to international buyers]. Audience: [high-net-worth buyers and their
advisors]. Single job: request a private viewing. Copy language: [English].
Copy voice: quiet confidence — short sentences, concrete details (view, materials,
square meters), never salesy, never exclamation marks.
BEFORE code: produce a design plan (tokens, type scale, ASCII wireframes, signature
element), self-critique against generic defaults, revise once, then build.
ART DIRECTION — dark, slow luxury:
- Typography: Marcellus for headlines and the wordmark (never bold — its elegance is
the weight); Figtree 300/400 for body; small caps labels with letter-spacing 0.35em.
- Palette: espresso black #101010 base, ivory #EDE8DD text, bronze #8C6A3F for thin
rules and hover states only, smoke gray #5C5A55 for secondary text. NO pure white,
NO gold gradients, no glitter effects.
- Layout: vast vertical spacing (160px+ between sections on desktop), narrow measure
(max 34rem body text), content mostly centered on an invisible axis.
HERO — full-viewport background video:
- <video autoplay muted loop playsinline poster preload="metadata" aria-hidden="true">
with WebM+MP4 sources. Use a slow aerial coastline clip placeholder from Coverr or
Pexels (leave a clearly commented URL slot); poster image required.
- Dark overlay rgba(16,16,16,0.55) plus a subtle bottom gradient for legibility.
- On mobile (<768px) hide the video and show the poster image instead.
- Pause the video with IntersectionObserver when scrolled past.
- On load: the wordmark "LARASATI" fades in while letter-spacing animates from
0.6em to 0.35em over 1.6s — this is the signature moment. Below it, one line:
"[Five villas. One cliff. Uluwatu.]" fades in 400ms later.
SECTIONS:
1. Video hero as above, with a hairline bronze scroll cue.
2. "The Estate" — one large statement paragraph, then three facts in a row set in
small caps (e.g. 5 VILLAS · 42 ARE · 70M ABOVE THE OCEAN).
3. The villas — full-width imagery, each villa: name, sqm, bedrooms, one sensory
sentence. Images reveal with a slow 1.2s opacity+scale(1.04→1) on scroll.
4. Materials & craft — two-column: macro texture images (stone, teak, linen) with
short captions.
5. A single testimonial or press line set in Marcellus italic.
6. "Private viewing" — minimal form (name, email, preferred date) with underline-only
inputs, bronze focus states.
7. Footer: coordinates, contact, small print.
MOTION: everything slow and weighted — 800–1200ms fades, cubic-bezier(0.22,1,0.36,1),
generous stagger. Light parallax (max 40px) on section images. Absolutely no bounce,
no spin, no particles. Respect prefers-reduced-motion: static poster, instant reveals.
GRAPHIC LANGUAGE (luxury boldness is scale, grade and framing; execute all):
- Texture: film grain over everything + a subtle vignette per section.
- Scale: wordmark at 10vw for the letter-spacing entrance; a 20rem bronze serif
ampersand ghosted behind the materials section.
- Image treatment: warm dark grade on ALL imagery (slight sepia + lifted
contrast, bronze-tinted shadows). Never a raw frame.
- Devices: hairline bronze frames inset 24px on full-bleed imagery; small-caps
labels at 0.35em tracking.
- Color blocking: one full-bleed bronze-on-black band carrying a single line
("Five villas. No neighbours."); footer solid black.
- Break the grid: villa images alternate bleeding off the left/right viewport
edges; the testimonial overlaps the preceding image by 4rem.
- Scroll set-piece: the villa gallery pins while the three villas crossfade
with their names, slow 1.2s each.
BOLDNESS FLOOR (as binding as the quality floor): display type at the stated
scale; the bronze band present; at least two deliberate overlaps; grain
page-wide; the pinned villa set-piece; hovers that transform (frames draw in,
images warm); no imagery shipped without its grade.
QUALITY FLOOR: semantic HTML, one h1, keyboard-visible focus (bronze outline), AA
contrast over video via overlay, responsive to 360px, lazy-load below-fold media,
total video budget under 5 MB.
04
Neobrutalism
Neobrutalism — Dev Tool / Indie SaaS
Neobrutalism — thick black borders, hard shadows, flat bright colors; loud but organized.
- Best for
- Dev tools, indie SaaS, technical products, communities, hackathons.
- Fonts
- Archivo Black (display) + Space Grotesk (body) + JetBrains Mono (code/labels).
Use the frontend-design and ui-ux-pro-max skills if installed. If taste-skill is
present, set its dials to VARIANCE 9, MOTION 7, DENSITY 4. Ban lists remove
cliches, never scale, texture or color: when any ban or restraint line conflicts
with the GRAPHIC LANGUAGE or BOLDNESS FLOOR below, the bolder instruction wins.
Build a single self-contained index.html (embedded CSS/JS, Google Fonts allowed) for
[Kernelworks — an open-source CLI that watches your APIs and screams before your
users do]. Audience: [backend developers and SRE teams]. Single job: get GitHub
stars and `npm install`s. Copy language: [English]. Copy voice: developer-to-developer,
dry humor allowed, zero corporate speak. Headlines state facts bluntly
("Your API is down. You found out from Twitter.").
BEFORE code: produce a design plan (tokens, type scale, ASCII wireframes, signature
element), self-critique against generic defaults, revise once, then build.
ART DIRECTION — neobrutalism, disciplined:
- Typography: Archivo Black for headlines (tight leading, can be huge); Space
Grotesk for body; JetBrains Mono for code, badges and labels.
- Palette: warm paper #F2F0E9 background, black #111111 for all borders and text,
cobalt #2B4BF2 primary, bright red #FF5D5D and yellow #FFD23F as block colors.
All colors FLAT — no gradients, no transparency.
- Construction rules: every card/button has border: 3px solid #111 and a hard
offset shadow (8px 8px 0 #111). Border-radius is either 0 or a deliberate 16px
pill — never 8px default. Elements may be slightly rotated (-1deg to 1.5deg) for
a pasted-on feel, but text stays straight.
- Signature: in the hero, a fake terminal window (black bg, mono text) that types
out a realistic command and alert output on loop:
$ kernelworks watch api.example.com
✓ 200 GET /users (34ms)
✗ 500 POST /checkout — alert sent to #ops (2.1s)
Typing effect in JS, respects prefers-reduced-motion (shows final state).
SECTIONS:
1. Hero: giant Archivo Black headline, subline, two buttons ("npm install
kernelworks" in mono — click copies to clipboard — and "Star on GitHub"),
terminal window on the right, slightly rotated.
2. A full-width marquee strip (yellow bg, black border top/bottom) scrolling
real-sounding alert messages. Pausable on hover, hidden under reduced motion.
3. Features as a messy-but-gridded set of colored blocks (cobalt/red/yellow/paper),
different sizes, each with a blunt headline + 2 lines + a mono tag like
[--flag]. NOT three equal cards.
4. "How it works" — 3 steps as a numbered list with a thick connecting line, each
step shows a one-line code snippet.
5. Social proof: sticker-style quotes from developers with GitHub-style handles.
6. Big final CTA block: black bg, yellow headline, one install command.
7. Footer: mono, links, license note.
MOTION — snappy and physical:
- Buttons/cards on hover: translate(-3px,-3px), shadow grows to 11px; on active:
translate(4px,4px), shadow collapses to 0 — the "press". 100ms ease-out.
- Scroll reveals: blocks snap in with a 150ms translateY, stagger 60ms — fast, not
floaty. CSS scroll-driven animations with IO fallback.
- Marquee via CSS animation, linear, ~40s loop.
GRAPHIC LANGUAGE (neobrutalism must be LOUD; execute all of it):
- Texture: halftone dot pattern on section backgrounds; every surface carries
its hard 8px offset shadow.
- Scale: hero headline at 14vw Archivo Black; a 30vw outlined "500" (the error
code) ghosted behind the features.
- Image treatment: no photos — flat color blocks, stamps and the terminal ARE
the imagery.
- Devices: stamp badges ("OPEN SOURCE", "0 DEPS") rotated -6deg; cross-hatch
pattern fills; oversized asterisks as bullets.
- Color blocking: alternate full-bleed cobalt, paper and yellow sections; the
final CTA is solid black with yellow type.
- Break the grid: cards rotated up to 2deg; the marquee crosses section
boundaries; the terminal overlaps the hero's edge.
- Scroll set-piece: features snap in like stamped blocks (150ms hits, 60ms
stagger) and the marquee reverses direction between sections.
BOLDNESS FLOOR (as binding as the quality floor): display type at the stated
scale; at least three full-bleed color sections; at least two rotations and two
overlaps; the stamped-entrance set-piece; hovers that press, grow shadows and
swap colors.
QUALITY FLOOR: semantic HTML, one h1, visible focus (thick cobalt outline fits the
style), AA contrast (on yellow bg use black text only), responsive to 360px
(blocks stack, shadows shrink to 5px), clipboard copy has a visible "copied!" state.
05
Dark Glassmorphism
Dark Glassmorphism — Fintech / Payment Platform
Frosted-glass panels over a dark aurora background — deep, modern, trustworthy.
- Best for
- Fintech, SaaS, payment platforms, dashboards, serious crypto.
- Fonts
- Clash Display (display, Fontshare) + General Sans (body, Fontshare) + tabular numerals.
Use the frontend-design and ui-ux-pro-max skills if installed. If taste-skill is
present, set its dials to VARIANCE 8, MOTION 7, DENSITY 3. Ban lists remove
cliches, never scale, texture or color: when any ban or restraint line conflicts
with the GRAPHIC LANGUAGE or BOLDNESS FLOOR below, the bolder instruction wins.
Build a single self-contained index.html (embedded CSS/JS; load Clash Display and
General Sans from Fontshare CDN, https://api.fontshare.com) for [Arus — a payment
platform that settles cross-border transfers for Southeast Asian SMEs in minutes,
not days]. Audience: [finance managers at SMEs]. Single job: sign-ups for early
access. Copy language: [English]. Copy voice: precise and calm — talk about money
with numbers, fees, and time saved; never hype words like "revolutionary".
BEFORE code: produce a design plan (tokens, type scale, ASCII wireframes, signature
element), self-critique against generic defaults, revise once, then build.
IMPORTANT anti-slop constraint: NO purple-to-blue gradients anywhere. The palette
is navy/teal/amber only.
ART DIRECTION — dark glassmorphism with a warm counterpoint:
- Background: deep navy #0A1128 with a slowly drifting CSS gradient mesh (two
radial-gradient blobs: teal #19C9B6 at 12% opacity, amber #F5A524 at 8% opacity),
animated over ~30s. Add a very subtle noise texture overlay for depth.
- Glass panels: background rgba(255,255,255,0.08), backdrop-filter: blur(20px),
1px inner border rgba(255,255,255,0.18), radius 20px. Use glass ONLY for elevated
surfaces (cards, nav, the hero mock) — body text sits on the plain dark bg.
- Typography: Clash Display (semibold, tight tracking) for headlines; General Sans
for body; font-variant-numeric: tabular-nums for every number.
- Amber is reserved for the primary CTA and key numbers. Teal for positive deltas
and micro-accents.
SECTIONS:
1. Sticky glass navbar (logo, 3 links, CTA).
2. Hero: left — headline stating the concrete outcome ("Transfers to 6 countries.
Settled in minutes."), subline with a real fee number, CTA + "no hidden fees"
microcopy. Right — the SIGNATURE: a glass dashboard card showing a transfer in
progress (amount in USD→SGD, live status steps, fee breakdown), subtly tilting
toward the cursor (max 6deg, transform-only), with a second smaller glass card
overlapping behind it.
3. Trust strip: 4 stats with count-up numbers (e.g. median settlement time,
monthly volume) in tabular nums.
4. How it works: 3 horizontal glass steps connected by a thin animated teal line
that draws on scroll (SVG stroke-dashoffset).
5. Feature split sections (2): alternating text + glass UI mock (fee calculator,
FX rate lock). The calculator should actually work with JS.
6. Security section on a slightly darker band: short factual bullets (licenses,
encryption), no shield emoji, no padlock clip-art — use text and layout.
7. Final CTA glass panel + minimal footer.
MOTION:
- Reveals: blur(8px)+opacity → sharp, 600ms, stagger 90ms — the "glass focusing"
effect. CSS scroll-driven animations with IO fallback.
- Hero cards float idle (translateY ±6px, 6s ease-in-out infinite).
- Count-ups trigger once on first view, 1.2s.
- Everything transform/opacity/filter only; full prefers-reduced-motion support
(no idle float, instant reveals).
GRAPHIC LANGUAGE (glass needs atmosphere behind it; execute all of it):
- Texture: noise overlay page-wide; the aurora mesh runs stronger (teal 18%,
amber 12%) and visibly drifts.
- Scale: headline at 9vw; a ghost 28vw currency glyph drifting slowly behind
the hero glass cards.
- Image treatment: any imagery gets a navy duotone under glass; UI mocks are
real working panels, never screenshots.
- Devices: conic teal-to-amber gradient rings as data markers; frosted chips
with 1px inner borders.
- Color blocking: the security section is a full-bleed deep-teal band; the
final CTA panel carries a slow amber border glow.
- Break the grid: hero glass cards overlap the metrics strip below them; one
feature mock bleeds off-screen right.
- Scroll set-piece: the "how it works" line draws across the three glass steps
while each card assembles (blur-to-sharp + rise) as the line reaches it.
BOLDNESS FLOOR (as binding as the quality floor): display type at the stated
scale; the teal band present; at least two overlaps; texture page-wide; the
line-draw set-piece; hovers that transform (glass brightens, rings spin up).
QUALITY FLOOR: check text contrast on glass (add rgba(10,17,40,0.4) tint inside
panels if needed to hit AA), semantic HTML, one h1, visible focus rings (teal),
responsive to 360px (hero stacks, tilt disabled on touch), backdrop-filter fallback
(solid rgba panel) via @supports.
06
Bento Grid
Bento Grid — Productivity App
Bento box — features laid out in tiles of different sizes, each tile a living mini-demo.
- Best for
- Productivity apps, multi-feature products, mobile apps, AI tools.
- Fonts
- Bricolage Grotesque (display) + Schibsted Grotesk (body).
Use the frontend-design and ui-ux-pro-max skills if installed. If taste-skill is
present, set its dials to VARIANCE 8, MOTION 7, DENSITY 4. Ban lists remove
cliches, never scale, texture or color: when any ban or restraint line conflicts
with the GRAPHIC LANGUAGE or BOLDNESS FLOOR below, the bolder instruction wins.
Build a single self-contained index.html (embedded CSS/JS, Google Fonts allowed) for
[Tumpuk — a task app that automatically batches your small to-dos into one focused
hour a day]. Audience: [busy professionals drowning in micro-tasks]. Single job:
app download / waitlist signup. Copy language: [English]. Copy voice: friendly but
concrete — name real task examples ("pay the electric bill", "reply to the
landlord"), never abstract productivity jargon.
BEFORE code: produce a design plan (tokens, type scale, ASCII wireframes including
the bento layout map, signature element), self-critique against generic defaults,
revise once, then build.
ART DIRECTION — warm bento:
- Typography: Bricolage Grotesque (700/800) for headlines — its quirky details keep
the page from feeling sterile; Schibsted Grotesk for body and UI text.
- Palette: warm off-white #F7F7F5 page bg, ink #1A1917, tiles in white plus soft
tints (sky #E8F1F8, leaf #EAF2E6, sand #F5EEDF, gray-lavender #EEECF4). One
saturated accent for CTAs: [#1F5AF0]. Radius 24px on tiles, 12px inside.
- The bento is NOT a uniform grid: use CSS Grid with named areas — tiles span 1x1,
2x1, 1x2 and one 2x2. Deliberate asymmetry, consistent 16px gaps.
SECTIONS:
1. Compact hero: headline + one subline + CTA, centered, short — the bento IS the
main event and starts within the first viewport.
2. THE BENTO (8 tiles):
- 2x2 SIGNATURE tile: a working mini demo of the app — a list of 5 real tasks
with checkboxes; checking them fills a progress ring and triggers a small
confetti-free "done" state (checkmark draw animation). Fully functional JS.
- 2x1: "One focused hour" — a stylized daily timeline visualization (CSS bars).
- 1x1: a big stat ("avg. 23 small tasks/week") with count-up.
- 1x1: a notification mock showing the daily batch summary.
- 1x2: a vertical phone mock (CSS-drawn, no image) with the app's today screen.
- 1x1: integration names as plain text chips (Gmail, WhatsApp, Calendar).
- 1x1: a short user quote with a name.
- 2x1: "How it works" in 3 tiny numbered steps inside one tile.
Each tile has an eyebrow label, and content that TEACHES something specific —
no tile may be pure decoration.
3. One text section: the philosophy in 2 short paragraphs, narrow measure.
4. Pricing: two simple cards (Free / Pro) using the same tile language.
5. Final CTA band + footer.
MOTION:
- Load/scroll: tiles rise 24px + fade with 70ms stagger in reading order.
CSS scroll-driven animations (view()) with IO fallback.
- Hover: tile lifts (translateY(-4px), shadow 0 12px 32px rgba(0,0,0,0.08)) and
its inner demo nudges (e.g. the progress ring ticks). 200ms ease-out.
- In-tile micro-animations run only when the tile is in view; pause offscreen.
- Full prefers-reduced-motion support.
GRAPHIC LANGUAGE (a bento must not be a polite pastel grid; execute all):
- Texture: soft paper grain on the page background; tiles stay crisp.
- Scale: headline at 9vw Bricolage; every tile carries a ghost index numeral at
6rem in a darker shade of its own tint.
- Image treatment: the phone mock and any imagery are tinted to their tile's
palette; no raw screenshots.
- Devices: sticker chips for integrations; the working progress ring; one tile
set solid ink with paper type (the quote tile).
- Color blocking: two tiles are FULL saturated color (cobalt, deep leaf) with
white type, punching through the pastel field.
- Break the grid: the 2x2 demo tile rotates -1deg and overflows its row by
16px; one 1x1 tile is a perfect circle.
- Scroll set-piece: the bento assembles center-out (70ms stagger, slight
overshoot), then the demo checklist ticks its first item by itself once.
BOLDNESS FLOOR (as binding as the quality floor): display type at the stated
scale; the two saturated tiles present; the rotated overflow tile present;
texture on the page; the center-out assembly set-piece; hovers that transform
(tiles lift AND their inner demo reacts).
QUALITY FLOOR: semantic HTML (the bento is a <ul> of <li> tiles), one h1, keyboard
focus visible on checkboxes and links, AA contrast on all tints, responsive: bento
reflows 4-col → 2-col → 1-col at 1024/640px keeping the 2x2 demo first,
font-display: swap.
07
Kinetic Typography + Video BG
video bg
Kinetic Typography + Video BG — Music Festival
Giant type in motion — headlines split per letter, marquee lineups, stage energy.
- Best for
- Music festivals, events, conferences, cultural product launches.
- Fonts
- Syne (display, 800) + Instrument Sans (body) + Space Mono (schedule/labels).
Use the frontend-design and ui-ux-pro-max skills if installed. If taste-skill is
present, set its dials to VARIANCE 10, MOTION 9, DENSITY 3. Ban lists remove
cliches, never scale, texture or color: when any ban or restraint line conflicts
with the GRAPHIC LANGUAGE or BOLDNESS FLOOR below, the bolder instruction wins.
Build a single self-contained index.html (embedded CSS/JS; Google Fonts; GSAP +
ScrollTrigger via CDN is allowed and expected) for [Gelora Fest — a two-day
independent music festival in Bandung, 14–15 August 2026, 30+ acts across 3 stages].
Audience: [18–30 music fans]. Single job: sell early-bird tickets. Copy language:
[English]. Copy voice: short, loud, confident — like a good poster, not like a
corporate event page.
BEFORE code: produce a design plan (tokens, type scale, ASCII wireframes, signature
element), self-critique against generic defaults, revise once, then build.
ART DIRECTION — kinetic type over film:
- Typography IS the design. Syne 800 for display (can hit 14vw), Instrument Sans
for supporting text, Space Mono for schedule data and labels.
- Palette: near-black #0C0C0E, electric ultramarine #2400FF, hot coral #FF4D6D,
off-white #F4F3F0. Duotone treatment on all imagery/video (black + ultramarine)
via CSS filter/blend so photos feel art-directed, not stocky.
HERO — video + signature type moment:
- Background video: crowd/stage clip (commented placeholder URL from Pexels/Coverr),
720p ≤5MB, autoplay muted loop playsinline, poster, WebM+MP4, hidden on mobile
(poster instead), paused offscreen via IntersectionObserver. Overlay: ultramarine
multiply layer + dark gradient. aria-hidden on the video.
- SIGNATURE: "GELORA" set at ~14vw. On load, letters drop in one by one with GSAP
(rotation ±8deg randomized, back.out easing, 60ms stagger). After settling, the
headline subtly scales 1.00→1.04 tied to scroll position (ScrollTrigger scrub) —
it breathes. Date + city in Space Mono, then a coral ticket CTA.
SECTIONS:
1. Hero as above.
2. Marquee band: two full-width marquee rows scrolling opposite directions with
headliner names in outlined Syne (webkit-text-stroke), coral fill on hover.
3. Lineup: artists as a typographic wall — names in varying sizes by billing tier
(not a boring grid of cards). Hover: name skews 2deg and turns ultramarine;
a Space Mono tag shows stage + day.
4. Schedule: tabbed by day (working JS tabs), each row mono: time — artist — stage.
Underline the current tab with a sliding indicator.
5. Tickets: three tiers as big typographic blocks (EARLY / REGULAR / VIP), price
huge in Syne, benefits in 3 mono lines each. The early tier gets a rotating
"ALMOST GONE" badge (CSS animation).
6. Venue: map placeholder + essential info in mono.
7. Footer: sponsors as plain text, socials, one last marquee row.
MOTION RULES:
- GSAP for: hero letter drop, scroll-scrub breathing, section headline reveals
(SplitText-style via manual span-splitting, no paid plugins), marquees.
- Reveals fast and punchy: 500ms, power3.out, stagger 40ms.
- Cap it: max ONE ambient animation visible per viewport besides the marquees.
- prefers-reduced-motion: kill marquees, scrub and letter animation; simple fades
remain; video replaced by poster.
GRAPHIC LANGUAGE (this page is a poster that moves; execute all of it):
- Texture: film grain over the video; a scanline hint on marquee bands.
- Scale: festival name at 16vw; headliner names up to 8vw; a 30vw outlined "26"
(the year) ghosted behind the tickets.
- Image treatment: strict black-ultramarine duotone on every photo and the
video; coral exists only as flat graphic color.
- Devices: outlined text that fills on hover; barcode-style tick rows as
dividers; the rotating "ALMOST GONE" badge.
- Color blocking: full-bleed ultramarine lineup section; a coral ticket band;
black everywhere else.
- Break the grid: marquees run at -2deg; headliner names overlap each other's
baselines in the typographic wall.
- Scroll set-piece: the hero letter-drop plus scroll-scrub breathing, AND
lineup names that fill from outline as they pass the center of the screen.
This brief's identity needs both opposing marquees — the one-marquee cap
does not apply here.
BOLDNESS FLOOR (as binding as the quality floor): type at the stated scales;
three full-bleed color fields; overlapping type in the lineup wall; grain on
all film; both set-pieces working; hovers that fill outlines and skew names.
QUALITY FLOOR: semantic HTML (real headings, lists, table or dl for the schedule),
one h1, keyboard focus visible (coral outline), AA contrast (outlined text must
have a filled fallback at small sizes), responsive to 360px (the lineup wall wraps,
hero type stays huge), font-display: swap.
08
Organic / Natural + Video BG
video bg
Organic / Natural + Video BG — Skincare / Wellness
Calm, botanical, natural textures — deep green, subtle grain, motion as soft as wind.
- Best for
- Skincare, wellness, artisan tea/coffee, natural products, yoga studios.
- Fonts
- Newsreader (display, italic for emphasis) + Karla (body).
Use the frontend-design and ui-ux-pro-max skills if installed. If taste-skill is
present, set its dials to VARIANCE 8, MOTION 6, DENSITY 3. Ban lists remove
cliches, never scale, texture or color: when any ban or restraint line conflicts
with the GRAPHIC LANGUAGE or BOLDNESS FLOOR below, the bolder instruction wins.
Build a single self-contained index.html (embedded CSS/JS, Google Fonts allowed) for
[Rumpun — a small-batch skincare brand from Ubud using cold-pressed moringa and
rice ferment]. Audience: [women 25–40 who read ingredient lists]. Single job: sell
the hero product ("Morning Press" facial oil). Copy language: [English].
Copy voice: honest and sensory — name real ingredients, textures and routines;
never medical claims, never "miracle" words.
BEFORE code: produce a design plan (tokens, type scale, ASCII wireframes, signature
element), self-critique against generic defaults, revise once, then build.
Anti-slop note: do NOT default to cream + terracotta. This brand is deep green.
ART DIRECTION — botanical calm:
- Typography: Newsreader for headlines (regular weight, generous size; italic for
emphasized words within headlines); Karla for body and UI. Ample line-height.
- Palette: deep fern #1E3D2F as the PRIMARY background for most sections (light
text on dark green — unusual and premium), pale pistachio #E7EDDD for alternating
light sections, sun ochre #D9A441 accents, earth brown #4A3F32 secondary text on
light. Subtle film-grain noise overlay (CSS/SVG) across the page at ~3% opacity.
- Organic shapes: section transitions use gentle curved SVG dividers (asymmetric,
not the cliché wave-generator look); product imagery sits in soft blob masks.
HERO — video:
- Slow botanical macro clip (leaves in wind / light through canopy — commented
placeholder URL from Pexels/Coverr), 720p ≤5MB, autoplay muted loop playsinline,
poster, WebM+MP4, static poster on mobile, paused offscreen, aria-hidden.
- Deep green overlay rgba(30,61,47,0.5). Headline in Newsreader with ONE italic
word ("Calm skin, a *slower* morning."), subline, ochre CTA button (pill).
SIGNATURE — growing botanical line:
- A thin hand-drawn-style SVG vine/branch runs down the page margin, drawing itself
via stroke-dashoffset tied to scroll progress (CSS scroll-driven animation with
animation-timeline: scroll(); JS fallback). It blooms a small leaf at each section
boundary. Under prefers-reduced-motion it renders fully drawn, static.
SECTIONS:
1. Video hero.
2. "What's in the bottle" — ingredient spread: each of 3 ingredients gets a circular
macro image, name in Newsreader italic, origin + why it's there in 2 honest lines.
3. Product focus (light section): bottle image placeholder center, radiating
annotation lines to short notes (texture, scent, how to use, 30ml). Annotations
fade in sequentially on scroll.
4. Ritual: 3 steps with times of day, set as an unhurried vertical rhythm with
lots of whitespace.
5. Sourcing story: two-column — farm photo placeholder + 2 paragraphs naming the
place and the people. A pull line in italic.
6. Reviews: 3 quotes with first names and skin types (combination, dry, sensitive).
7. Purchase block: price, size, "Buy — $[42]" button, small shipping note.
8. Footer: full ingredients list (builds trust), contact, Instagram.
MOTION: all reveals are slow fades + 16px rise, 700ms, ease-out, no bounce.
Light parallax (max 30px) on macro images. Nothing moves fast anywhere.
GRAPHIC LANGUAGE (calm is not plain; the page should feel like a forest floor):
- Texture: heavy film grain (~5%) plus paper fiber on light sections.
- Scale: hero line at 10vw Newsreader; a 26vw ghost pressed-leaf silhouette
(SVG) behind the ritual section.
- Image treatment: deep-fern duotone on all botanical macros, held in circular
and arch masks; nothing raw.
- Devices: arch-topped image frames; pressed-leaf silhouettes between sections;
italic annotations with hand-drawn underline strokes.
- Color blocking: alternate full-bleed fern and pistachio sections; ochre only
for the CTA and one highlighted word per section.
- Break the grid: ingredient circles overlap the text column; the bottle image
breaks out of its section into the next.
- Scroll set-piece: the margin vine draws continuously AND the product
annotations bloom outward one by one as the bottle settles into place.
BOLDNESS FLOOR (as binding as the quality floor): display type at the stated
scale; alternating color-blocked sections; two overlaps; grain page-wide; both
set-piece moments; hovers that transform (masks morph, leaves stir); no photo
without its duotone.
QUALITY FLOOR: semantic HTML, one h1, focus states (ochre outline), AA contrast
(test ochre on green — darken the text version if needed), responsive to 360px,
lazy-load, font-display: swap, video budget ≤5MB.
09
Y2K / Retro-futurism
Y2K / Retro-futurism — Streetwear Label
Chrome, iridescence, 2000s nostalgia executed cleanly — not messily.
- Best for
- Streetwear, music labels, young creative studios, product drops.
- Fonts
- Unbounded (display) + IBM Plex Mono (body/labels).
Use the frontend-design and ui-ux-pro-max skills if installed. If taste-skill is
present, set its dials to VARIANCE 9, MOTION 8, DENSITY 3. Ban lists remove
cliches, never scale, texture or color: when any ban or restraint line conflicts
with the GRAPHIC LANGUAGE or BOLDNESS FLOOR below, the bolder instruction wins.
Build a single self-contained index.html (embedded CSS/JS, Google Fonts allowed) for
[MONSUN — a Jakarta streetwear label dropping a 12-piece capsule called "SIGNAL"
on 30 August 2026]. Audience: [17–28 streetwear collectors]. Single job: waitlist
signups before the drop. Copy language: [English, with drop-culture terms as the
scene actually talks]. Copy voice: cryptic-cool but not nonsense; every line still
communicates (date, pieces, price range).
BEFORE code: produce a design plan (tokens, type scale, ASCII wireframes, signature
element), self-critique against generic defaults, revise once, then build.
ART DIRECTION — Y2K chrome, executed with discipline:
- Typography: Unbounded for display (400/700 — it already looks techy, don't
over-style it); IBM Plex Mono for everything else including body.
- Palette: deep violet-black #1B1033 base, silver #C9CCD6, bubble cyan #6FE7FF,
lilac #B9A8E8. Iridescence comes from gradients BETWEEN these colors only.
- Texture: faint starfield/scanline background (CSS), thin 1px silver borders with
rounded-capsule shapes, occasional [BRACKETED] mono labels like old UI.
- SIGNATURE: the wordmark "MONSUN" in huge Unbounded with a chrome effect — a
metallic linear-gradient (silver→white→violet→cyan) clipped to the text
(background-clip: text) whose gradient position shifts with cursor X (JS,
transform-only cheap). On mobile it shimmers slowly on its own.
SECTIONS:
1. Hero: chrome wordmark, "SIGNAL — 12 PIECES — 30.08.2026" in mono, countdown
timer (working JS, mono digits), waitlist input + button in a capsule shape.
2. Ticker: a slim marquee with [SIGNAL] [12 PCS] [ONE RUN ONLY] [NO RESTOCK]
repeating in mono, cyan on violet.
3. The capsule: product grid, each piece shot on a silver-gradient placeholder
card with mono metadata (name, fabric, qty made). Hover: card gets a holographic
sheen sweep (a moving diagonal gradient overlay, 600ms) and the image skews 1deg.
4. Lookbook strip: horizontal scroll-snap gallery with mono captions; edges fade.
5. "Rules of the drop": numbered mono list (waitlist gets 24h early access, 2 pcs
max per person, etc.) inside a bordered terminal-like panel.
6. Final CTA: repeat the waitlist input, big, with the chrome wordmark small above.
7. Footer: socials as [IG] [TIKTOK] [DISCORD] mono brackets.
CURSOR & MICRO-DETAILS:
- Custom cursor: a small cyan ring that scales up over interactive elements
(desktop only, pointer:fine media query).
- Selection color: cyan bg, violet text. Scrollbar styled thin silver.
- Buttons: capsule border; on hover a cyan→lilac gradient fill sweeps across.
MOTION: hovers 150–250ms; the only ambient motions are the ticker and slow chrome
shimmer. Scroll reveals: simple 300ms fades — the surfaces are busy enough.
prefers-reduced-motion: stop ticker, shimmer and countdown pulse; static gradient.
GRAPHIC LANGUAGE (Y2K is maximal chrome; execute all of it):
- Texture: starfield + scanlines + chrome gradients layered.
- Scale: wordmark at 15vw chrome; a 30vw outlined "12" (piece count) rotating
very slowly behind the capsule grid.
- Image treatment: products on silver-gradient plates with holographic sheen
sweeps; lookbook shots in cool chrome duotone.
- Devices: orbit rings around the countdown; pixel-block dividers; holographic
sticker badges; [BRACKET] mono labels.
- Color blocking: full-bleed violet sections split by one silver band carrying
the ticker.
- Break the grid: capsule cards rotated up to 2deg; the wordmark clips slightly
off the top of the viewport.
- Scroll set-piece: the chrome shimmer scrubs with scroll position across the
wordmark, and product cards flip from silver back to face as they enter view.
BOLDNESS FLOOR (as binding as the quality floor): type at the stated scale;
violet/silver color blocking present; rotations and the clipped wordmark
present; layered texture; the shimmer-scrub set-piece; hovers with holographic
sweeps.
QUALITY FLOOR: semantic HTML, one h1, focus states (cyan ring), AA contrast
(silver on violet passes; verify cyan on violet at small sizes), responsive to
360px (chrome wordmark scales via clamp, grid stacks), custom cursor never breaks
native focus/keyboard use, working countdown handles timezones via UTC date.
10
Minimal Monochrome
Minimal Monochrome — Photographer Portfolio
Nearly designless — white, black, one accent; the photographs are everything.
- Best for
- Photographers, artists, architects, any visual portfolio.
- Fonts
- Hanken Grotesk (one family for all roles, playing with weight & size).
Use the frontend-design and ui-ux-pro-max skills if installed. If taste-skill is
present, set its dials to VARIANCE 7, MOTION 5, DENSITY 2. Ban lists remove
cliches, never scale, texture or color: when any ban or restraint line conflicts
with the GRAPHIC LANGUAGE or BOLDNESS FLOOR below, the bolder instruction wins.
Build a single self-contained index.html (embedded CSS/JS, Google Fonts allowed) for
[Dian Prakasa — a documentary photographer based in Surabaya shooting industrial
landscapes and port workers]. Audience: [photo editors, curators, NGOs]. Single
job: get commissioning inquiries. Copy language: [English].
Copy voice: almost silent — series titles, years, locations, one-line artist
statement. The photographs speak; the words only label.
BEFORE code: produce a design plan (tokens, type scale, ASCII wireframes, signature
element), self-critique against generic defaults, revise once, then build.
ART DIRECTION — disappearing design:
- One typeface: Hanken Grotesk. Hierarchy through size and weight only
(300 for large display, 400 body, 500 labels). No italics, no letterspacing
tricks except small uppercase meta labels.
- Palette: white #FFFFFF, near-black #111110. Vermilion #FF3E00 appears ONLY on
hover/focus/active states — the page is strictly monochrome at rest.
- Layout: huge margins, a small amount of content per viewport. No cards, no
borders, no shadows — separation by whitespace alone.
SECTIONS:
1. Top bar: name left, "Info" link right. Nothing else.
2. SIGNATURE — the index: series titles as a large text list (Hanken 300, ~5vw),
each with year + location in small uppercase to the right. On hover: the title
turns vermilion AND a 320px photo preview follows the cursor with a slight
lag (transform with lerp in JS). On touch devices, a static thumbnail shows
next to each title instead.
3. Clicking a title opens its gallery as an overlay state (same page): full-bleed
photos in a vertical flow, caption in small type under each, close button top
right, arrow-key navigation. Animate open/close with the View Transitions API
(document.startViewTransition) with a graceful no-transition fallback.
4. Info overlay: portrait, a 5-line bio naming real publications, email set large,
a list of selected exhibitions with years.
5. Footer: copyright line only.
IMAGERY: use https://picsum.photos grayscale placeholders (?grayscale) at correct
aspect ratios; comment where real photos go. All photos get a 200ms opacity fade
on load; no other treatment — no zoom-on-hover, no overlays on the photos ever.
MOTION:
- Page load: the index list rises 12px + fades, 400ms, 60ms stagger. That is the
only entrance animation on the page.
- The cursor preview uses transform only, requestAnimationFrame, lerp factor ~0.12.
- View Transitions for gallery open/close, 350ms.
- prefers-reduced-motion: no cursor-follow (static thumbnails), instant states.
GRAPHIC LANGUAGE (minimal means violent restraint, not timidity; execute all):
- Texture: none. Vast whitespace IS the texture — make emptiness so generous it
reads as a statement.
- Scale: index titles at 8vw; a single 20vw ghost counter (the series count) on
the info overlay.
- Image treatment: strict grayscale everywhere; the cursor preview is large
(480px) and razor sharp.
- Devices: an index-numbering column in small type; a thin rule that tracks the
visitor's position in the list.
- Color blocking: hover floods the ENTIRE index row with vermilion and inverts
its type to white — the one violent moment on a silent page.
- Break the grid: between index rows 2 and 3, one photograph bleeds
full-viewport with zero margin.
- Scroll set-piece: that full-bleed photograph reveals through a clip-path mask
as it enters; View Transitions carry gallery open/close.
BOLDNESS FLOOR (as binding as the quality floor): titles at the stated scale;
the vermilion row-flood hover working; the full-bleed photograph present; the
mask-reveal set-piece; whitespace so large it is unmistakably deliberate.
QUALITY FLOOR: semantic HTML (nav, main, the index is an <ol>), one h1, keyboard:
index fully tabbable, Enter opens a gallery, Esc closes, focus trapped in the
overlay and returned on close; visible vermilion focus outline; AA contrast;
responsive to 360px; lazy-load gallery images; font-display: swap.
11
Cinematic Video-First
video bg
Cinematic Video-First — Resort / Hospitality
A scrollable travel film — each page chapter is a video scene with a chapter title.
- Best for
- Resorts, boutique hotels, destinations, retreats, small cruise lines.
- Fonts
- Prata (display) + Figtree (body).
Use the frontend-design and ui-ux-pro-max skills if installed. If taste-skill is
present, set its dials to VARIANCE 8, MOTION 8, DENSITY 2. Ban lists remove
cliches, never scale, texture or color: when any ban or restraint line conflicts
with the GRAPHIC LANGUAGE or BOLDNESS FLOOR below, the bolder instruction wins.
Build a single self-contained index.html (embedded CSS/JS; Google Fonts; GSAP +
ScrollTrigger via CDN allowed) for [Svarga Ubud — a seven-villa jungle retreat
above the Ayung river with a riverside spa and open-air restaurant]. Audience:
[couples and honeymooners planning 3–5 night stays]. Single job: direct booking
inquiries. Copy language: [English]. Copy voice: sensory and specific — sounds,
temperatures, times of day ("the river is loudest at dawn") — never generic
paradise clichés like "escape to paradise".
BEFORE code: produce a design plan (tokens, type scale, ASCII wireframes of the
chapter structure, signature element), self-critique against generic defaults,
revise once, then build.
ART DIRECTION — a scrollable film:
- Typography: Prata for chapter titles and headlines (its high-contrast strokes
read cinematic); Figtree 300/400 body; thin brass rules as dividers.
- Palette: jungle green #0E1F18, mist #E9EDEA, brass #B08D57. All video overlaid
with rgba(14,31,24,0.45) so text always reads and clips feel color-graded.
STRUCTURE — 4 chapters, each a pinned full-viewport scene (GSAP ScrollTrigger):
Chapter I "Arrival" — jungle canopy / winding road clip
Chapter II "The Villas" — interior / pool edge clip
Chapter III "The River" — water / spa clip
Chapter IV "The Table" — open-fire kitchen / dining clip
Behavior: as the user scrolls, the current scene pins; its chapter number (Roman,
brass, small) and title (Prata, large) rise in; a 2-line sensory description
follows; continued scrolling crossfades to the next chapter's video. Between
chapters, short light-background interludes (mist #E9EDEA) carry practical
content so the page is not ONLY film.
VIDEO DISCIPLINE (critical — 4 videos must not sink the page):
- Each clip 720p, 6–8s loop, target ≤3MB each, WebM+MP4, no audio track.
- preload="none" for all but the first (metadata); lazy-attach src for chapters
2–4 when the previous chapter enters view (IntersectionObserver).
- Only the ACTIVE chapter's video plays; others are paused.
- Poster for every video. On mobile (<768px) and prefers-reduced-motion: replace
all videos with posters, and the pinned scenes become normal stacked sections
with simple fades — the page must fully work without GSAP pinning.
- Leave commented placeholder URLs (Pexels/Coverr search terms per chapter).
INTERLUDE CONTENT (light sections between chapters):
- After Ch. II: villa comparison — 7 villas in a horizontal scroll-snap row, each
card: name, sqm, view, rate from $[380]/night in brass.
- After Ch. III: spa & experiences list with times and durations.
- After Ch. IV: a short factual block — location, transfer time from the airport,
best months to visit.
Ending: booking section on jungle green — dates + guests inquiry form (working
validation), brass submit button, and a final line in Prata italic.
MOTION: chapter titles rise 40px with 900ms power2.out; crossfades 800ms;
interlude reveals are simple 500ms fades. No parallax inside videos (they move
enough on their own).
GRAPHIC LANGUAGE (make it feel like cinema, not a hotel template; execute all):
- Texture: film grain over everything; 4vh letterbox bars framing chapter
scenes.
- Scale: chapter titles at 9vw Prata; ghost roman numerals (I–IV) at 30vw
behind each interlude.
- Image treatment: jungle-green grade on all video and posters (overlay +
saturation lift), brass-tinted highlights; nothing raw.
- Devices: a fixed chapter-progress rail (thin brass line, four ticks) on the
right margin; inset hairline frames on interlude photography.
- Color blocking: chapters are full-bleed film; interludes alternate mist and
deep green; the booking section is solid green with brass type.
- Break the grid: villa cards in the horizontal strip overlap the section
above; chapter titles sit half over the letterbox bar.
- Scroll set-piece: the pinned chapter crossfades plus the progress rail
filling per chapter — the page IS the set-piece.
BOLDNESS FLOOR (as binding as the quality floor): titles at the stated scale;
the letterbox + grain treatment on all film; the ghost numerals present; the
progress rail working; two overlaps; hovers that transform (cards lift into
frame, brass rules draw).
QUALITY FLOOR: semantic HTML (chapters are <section> with real headings), one h1,
keyboard focus visible (brass), AA contrast over video via overlays, responsive
to 360px, total media budget ≤12MB with lazy loading, font-display: swap.
12
3D Depth / Tech
3D Depth / Tech — Data & AI Platform
Three-dimensional depth — parallax layers, subtle particles, technical precision. No "AI purple" clichés.
- Best for
- Data/AI platforms, infrastructure, APIs, developer platforms.
- Fonts
- Sora (display) + IBM Plex Sans (body) + IBM Plex Mono (code).
Use the frontend-design and ui-ux-pro-max skills if installed. If taste-skill is
present, set its dials to VARIANCE 8, MOTION 7, DENSITY 4. Ban lists remove
cliches, never scale, texture or color: when any ban or restraint line conflicts
with the GRAPHIC LANGUAGE or BOLDNESS FLOOR below, the bolder instruction wins.
Build a single self-contained index.html (embedded CSS/JS, Google Fonts allowed)
for [Nadi — a streaming data platform that moves events from app to warehouse in
under a second]. Audience: [data engineers and CTOs]. Single job: "Start free"
signups and docs visits. Copy language: [English]. Copy voice: engineer-precise —
latency numbers, throughput, guarantees; zero buzzwords ("revolutionize",
"unleash", "supercharge" are banned).
BEFORE code: produce a design plan (tokens, type scale, ASCII wireframes,
signature element), self-critique against generic defaults, revise once, then
build. HARD anti-slop constraints: no purple, no blue-violet gradients, no robot
imagery, no sparkle emoji.
ART DIRECTION — engineered depth:
- Typography: Sora (600) for headlines; IBM Plex Sans for body; IBM Plex Mono for
code, metrics and labels. tabular-nums everywhere numbers appear.
- Palette: carbon #0B0D10 base, electric cyan #38E1FF (data/flow accents), warm
signal #FFB224 (CTAs and alerts only), interface gray #9BA3AE. Thin 1px
#1E232A borders delineate panels — flat surfaces; depth comes from MOTION, not
drop shadows.
SIGNATURE — living pipeline (hero, canvas 2D):
- A full-hero canvas particle system: ~80 dots drifting slowly, connected by
faint lines when near each other; a stream of brighter cyan particles flows
left-to-right along a curved path (the "pipeline"), pulsing roughly every
second to echo the sub-second latency claim.
- Particles ease away from the cursor (gentle repulsion). Canvas capped at 60fps,
devicePixelRatio-aware, paused when the tab is hidden or the hero is offscreen,
disabled entirely under prefers-reduced-motion (replaced by a static SVG of the
same network) and on viewports <768px.
SECTIONS:
1. Hero: canvas behind; headline states the number ("Events in your warehouse in
under 1 second."); mono subline with real-sounding specs; amber CTA + "Read
docs" ghost button; below, a mono metrics bar: p50 latency, events/sec,
uptime — counting up on load.
2. DEPTH SCROLL section: three stacked layers (SQL snippet panel, schema panel,
dashboard panel) that move at different rates while scrolling through the
section (translateY at 0.9x / 1x / 1.1x — CSS scroll-driven animations with
animation-timeline, JS fallback), creating parallax depth between panels.
3. Code-first section: tabbed working code samples (JS / Python / SQL) in Plex
Mono with syntax highlighting done via simple span classes; copy button per tab.
4. Architecture diagram: an SVG flow (sources → Nadi → destinations) where the
connecting paths animate a dash flow continuously (slow, subtle); nodes
highlight on hover with a cyan glow.
5. Proof: three terse case rows — company type, before → after metric in mono
(e.g. "ETL 40 min → 0.8 s").
6. Pricing: two panels (Free / Scale) with mono spec lists, amber CTA on Scale.
7. Footer: docs, GitHub, status page link, SOC2 mention in plain text.
MOTION: reveals rise 20px/400ms/stagger 60ms; metric count-ups 1s once; dash-flow
and the canvas are the only ambient motion. Everything transform/opacity.
GRAPHIC LANGUAGE (engineered does not mean sterile; execute all of it):
- Texture: a blueprint grid (32px cells, 1px #151A21) on section backgrounds;
a faint scanline pass on panels.
- Scale: headline at 9vw Sora; a ghost 26vw mono "0.38s" in cyan at 5% behind
the depth-scroll section.
- Image treatment: no photos — panels, canvas and the diagram ARE the imagery;
give every panel 1px cyan corner ticks like a drawing frame.
- Devices: measurement tick rows as section dividers; mono unit badges ([ms],
[evt/s]); node status glyphs in the diagram.
- Color blocking: the proof section sits on a full-bleed cyan-tinted band
(#0E2A31); the final CTA block is solid amber with carbon type.
- Break the grid: depth panels overlap each other AND bleed past the container
edge; the metrics bar overlaps the hero's bottom border.
- Scroll set-piece: the depth section pins while its three panels assemble from
staggered depths (scale 0.96→1 + parallax), reading as one machine clicking
together.
BOLDNESS FLOOR (as binding as the quality floor): display type at the stated
scale; the ghost numeral, cyan band and amber block present; blueprint texture
page-wide; panel overlaps and bleeds present; the pinned assembly set-piece;
hovers that transform (ticks light up, nodes glow).
QUALITY FLOOR: semantic HTML, one h1, focus visible (cyan outline), AA contrast
(gray #9BA3AE only for large/secondary text), responsive to 360px, canvas has
aria-hidden + a static fallback, font-display: swap, the page still fully
communicates with JS disabled.
13
Corporate Premium
Corporate Premium — Consulting Firm / Enterprise B2B
Serious, expensive, controlled — like an annual report designed extremely well.
- Best for
- Consulting firms, law firms, corporate finance, enterprise B2B.
- Fonts
- General Sans (primary, Fontshare) + Source Serif 4 (pull quotes & large figures).
Use the frontend-design and ui-ux-pro-max skills if installed. If taste-skill is
present, set its dials to VARIANCE 6, MOTION 4, DENSITY 4. Ban lists remove
cliches, never scale, texture or color: when any ban or restraint line conflicts
with the GRAPHIC LANGUAGE or BOLDNESS FLOOR below, the bolder instruction wins.
Build a single self-contained index.html (embedded CSS/JS; General Sans from
Fontshare CDN, Source Serif 4 from Google Fonts) for [Meridian Advisory — a
15-person strategy firm in Singapore advising family conglomerates on succession
and expansion]. Audience: [owners and boards of family businesses]. Single job:
request a confidential conversation. Copy language: [English]. Copy voice:
measured and senior — short declarative sentences, specific sectors and deal
sizes, absolutely no exclamation marks, no "solutions" clichés.
BEFORE code: produce a design plan (tokens, type scale, ASCII wireframes,
signature element), self-critique against generic defaults, revise once, then
build. This must NOT look like a template corporate site (no stock handshake
imagery, no 3-icon-card row, no blue #2563EB).
ART DIRECTION — annual report, perfected:
- Typography: General Sans (400/500/600) for everything structural; Source
Serif 4 ONLY for pull quotes and the large result figures — the serif signals
gravitas exactly where it matters.
- Palette: ink navy #101B2D, warm paper #F8F7F4, steel #5B6B7C secondary,
oxblood #7A2E2B used perhaps four times on the whole page (rules under active
items, one word in the hero, link hovers).
- Layout: calm 12-column grid, strong left alignment, generous top/bottom section
padding (140px desktop), thin 1px rules organizing content like a printed
report. No cards with shadows — flat panels separated by rules and background
alternation (paper/navy).
SECTIONS:
1. Hero (paper): eyebrow "MERIDIAN ADVISORY — SINGAPORE", headline stating the
firm's actual position ("Succession and expansion counsel for family-held
groups."), one supporting line, quiet CTA link with arrow.
2. SIGNATURE — results band (navy): four large figures set in Source Serif 4
(e.g. "$2.8B in transactions advised", "23 generational transitions",
"15 senior advisors", "11 years"). Numbers count up once on first view;
labels in small caps General Sans. The figures ARE the visual centerpiece.
3. Practice areas: a two-column indexed list (01 Succession / 02 Regional
expansion / 03 Governance / 04 Transactions) — each expands on click
(accordion, real <details>/<summary> styled) with 3 lines of concrete scope.
An oxblood rule slides under the open item.
4. Selected engagements: three anonymized case rows ("Manufacturing group,
$400M assets — second-generation transition, 18 months") — the anonymity
itself signals discretion. A serif pull-quote from one client between rows.
5. People: partner grid, formal portraits (grayscale placeholder), name, role,
two-line bio each. No hover gimmicks — a simple oxblood underline on the name.
6. Perspective: two recent one-line insights with dates, styled like a journal
index (title + date + arrow), suggesting ongoing thinking.
7. Contact (navy): "Conversations are held in confidence." + name/email/phone
form with underline inputs, or a direct partner email. Footer: address, legal
line.
MOTION — authority through restraint:
- Section content fades up 12px in 250ms, no stagger theatrics.
- Number count-ups (800ms) and the oxblood rule slide (200ms) are the only
noticeable animations. Accordions open at 250ms ease.
- No parallax, no floating elements, nothing ambient. prefers-reduced-motion:
everything instant.
GRAPHIC LANGUAGE (corporate boldness = scale and color fields, never ornament):
- Texture: fine laid-paper grain on paper sections only.
- Scale: the four result figures at 10vw serif — poster scale, the visual
centerpiece of the page; ghost serif numerals (01–04) at 16rem behind the
practice list.
- Image treatment: partner portraits in a navy duotone (not plain grayscale) on
one shared backdrop tone.
- Devices: report folio marks (thin double rules) opening each section; a
small-caps running header line.
- Color blocking: navy occupies at least half the page; the client pull-quote
is a full-bleed OXBLOOD band with paper serif type — the single loud moment.
- Break the grid: the result figures overhang the top edge of their navy band
into the hero's whitespace; the oxblood band bleeds full width.
- Scroll set-piece: the four figures count up while their band briefly pins;
the oxblood rule draws under the open practice item.
BOLDNESS FLOOR (as binding as the quality floor): figures at the stated poster
scale; navy ≥ half the page; the oxblood band present; the overhang overlap
present; grain on paper sections; the pinned count-up set-piece; portraits
duotoned, never raw.
QUALITY FLOOR: semantic HTML (details/summary, address element), one h1, visible
focus (oxblood outline), AAA-leaning contrast (this audience skews older —
minimum 16px body, 1.65 line-height), responsive to 360px, bonus print stylesheet
(this page will be printed), font-display: swap.
14
Dopamine / Maximalist
Dopamine / Maximalist — Playful Creative Agency
Joyfully clashing colors, big shapes, spring physics — loud, but with a system.
- Best for
- Creative agencies, youth brands, social apps, fun products.
- Fonts
- Anton (display) + DM Sans (body).
Use the frontend-design and ui-ux-pro-max skills if installed. If taste-skill is
present, set its dials to VARIANCE 10, MOTION 8, DENSITY 3. Ban lists remove
cliches, never scale, texture or color: when any ban or restraint line conflicts
with the GRAPHIC LANGUAGE or BOLDNESS FLOOR below, the bolder instruction wins.
Build a single self-contained index.html (embedded CSS/JS, Google Fonts allowed)
for [Ramai Studio — a creative agency in Bandung making brand campaigns for snack,
beverage and entertainment brands]. Audience: [brand managers 25–35 who are bored
of safe agencies]. Single job: project inquiries. Copy language: [English].
Copy voice: playful and punchy but professional underneath — jokes allowed,
vagueness not; every service line names a concrete deliverable.
BEFORE code: produce a design plan (tokens, type scale, ASCII wireframes,
signature element), self-critique against generic defaults, revise once, then
build. Maximalism needs a SYSTEM: define rotation angles (-3/-1.5/1.5/3 deg
only), sticker shapes, and which color pairs may touch — then obey it.
ART DIRECTION — dopamine with discipline:
- Typography: Anton for display (huge, uppercase, tight); DM Sans for body.
- Palette: white base, ink #141414 text and 3px borders, then tangerine #FF7A00,
bubblegum #FF4FA3, lime #B5E32F, sky #35C4F0 as big flat shape colors.
Never gradients — flat shapes only, like cut paper.
- Vocabulary: sticker shapes (starburst, blob, pill, arch) with thick ink
borders, slight rotations from the allowed set, hard offset shadows (6px).
Oversized punctuation and arrows as graphic elements.
SECTIONS:
1. SIGNATURE hero: the headline "MAKE / BRANDS / LOUD" stacked in Anton at ~12vw,
each word on a colored sticker shape, each DRAGGABLE — on release it springs
back to its slot with bouncy physics (simple spring integrator in vanilla JS:
stiffness/damping, transform-only). A hint label "drag me ✦" in DM Sans.
Under it: a one-liner + a big ink CTA button that squishes (scaleX 1.05 /
scaleY 0.95) on hover.
2. Marquee of client/category names with starburst separators, alternating
colors, pausable on hover.
3. Work grid: 4 case tiles in the 4 colors, each with a blunt result line
("Snack X: +40% mentions during the 2-week launch"). Hover: the tile rotates
to 0deg from its resting -1.5deg and its sticker badge spins once (400ms).
4. Services: a table (real <table>) played straight — the joke is the contrast:
a plain black-on-white table with tiny sticker icons; deliverables and
starting prices listed concretely.
5. "How we work": 3 steps, each on an arch shape, connected by a hand-drawn
squiggly SVG arrow that draws itself on scroll.
6. Team strip: photos in blob masks, names + one true fun fact each.
7. CTA block: lime background, huge Anton "GOT A PROJECT?", email set giant,
sticker stamps around it. Footer minimal ink-on-white.
MOTION — springy, orchestrated:
- All entrances are spring pops: scale 0.9→1 with slight overshoot, 90ms stagger.
Implement with CSS spring-approximation keyframes or a tiny JS spring; CSS
scroll-driven trigger with IO fallback.
- Hover interactions as listed above; nothing idles constantly except the
marquee.
- prefers-reduced-motion: drag disabled (words static), pops become fades,
marquee stops.
GRAPHIC LANGUAGE (the page is a stack of posters; execute all of it):
- Texture: dot-grid pattern on white sections; hard 6px shadows everywhere.
- Scale: hero words at 15vw Anton; a 30vw outlined starburst spinning slowly
behind the CTA block.
- Image treatment: team photos posterized into the 4-color palette inside blob
masks; work tiles carry giant flat-color numerals.
- Devices: starbursts, squiggle arrows, badge stamps ("EST. 2019", "BANDUNG"),
oversized punctuation marks opening sections.
- Color blocking: EVERY section is a different full-bleed color (white,
tangerine, sky, lime, bubblegum, ink) — a stack of posters.
- Break the grid: everything sits at an allowed rotation; the marquee crosses
two sections; the hero words drag off their slots and spring back.
- Scroll set-piece: sections snap in like flipped poster pages (fast scale-pop
with overshoot) and the squiggle arrow draws across the process spread.
BOLDNESS FLOOR (as binding as the quality floor): words at the stated scale;
every section color-blocked; rotations everywhere within the system; the
draggable hero working; the poster-flip set-piece; hovers that squish, spin
and recolor.
QUALITY FLOOR: semantic HTML, one h1, focus visible (thick ink outline), AA
contrast (ink on lime/sky verified; white text never on lime), responsive to
360px (words stack and shrink but stay draggable on desktop), the draggable hero
is fully keyboard-skippable and never traps focus, font-display: swap.
15
Industrial / Technical
Industrial / Technical — Robotics / Manufacturing
Engineering-drawing aesthetics — spec sheets, measurement ticks, schematics, safety orange.
- Best for
- Manufacturing, robotics, logistics, hardware, heavy industry.
- Fonts
- Saira Condensed (display, caps) + Archivo (body) + JetBrains Mono (specs).
Use the frontend-design and ui-ux-pro-max skills if installed. If taste-skill is
present, set its dials to VARIANCE 8, MOTION 6, DENSITY 5. Ban lists remove
cliches, never scale, texture or color: when any ban or restraint line conflicts
with the GRAPHIC LANGUAGE or BOLDNESS FLOOR below, the bolder instruction wins.
Build a single self-contained index.html (embedded CSS/JS, Google Fonts allowed)
for [Vektor Dynamics — a manufacturer of six-axis robotic arms for electronics
assembly lines]. Audience: [plant engineers and operations directors]. Single
job: request a technical consultation / datasheet download. Copy language:
[English]. Copy voice: engineering-factual — payloads, cycle times, tolerances,
certifications. If a sentence could appear in a brochure for any company, delete
it.
BEFORE code: produce a design plan (tokens, type scale, ASCII wireframes,
signature element), self-critique against generic defaults, revise once, then
build.
ART DIRECTION — the engineering drawing as a design language:
- Typography: Saira Condensed (600/700, uppercase, tight) for headlines — it
reads like machine labeling; Archivo for body; JetBrains Mono for every number,
spec and annotation.
- Palette: gunmetal #23262A base, drafting white #F1F2F4 text and line-work,
safety orange #FF6A13 strictly for CTAs, active states and warning-style
accents, line gray #3A3E44 for grid and rules.
- Texture: a faint blueprint grid (1px lines, 32px cells) on section backgrounds;
corner tick marks on panels like a technical drawing frame; section numbers
formatted "DWG-01", "DWG-02" in mono.
SIGNATURE — self-drawing schematic:
- In the hero (right side), an SVG line drawing of the robotic arm (simplified,
isometric-ish, drawn with 2px strokes) that draws itself via stroke-dashoffset
as the page loads, then dimension lines + mono annotations (reach 1.4 m,
payload 12 kg, repeatability ±0.02 mm) fade in one by one. On scroll through
the specs section, the schematic's joints highlight in orange one at a time.
Under prefers-reduced-motion: fully drawn, annotations visible.
SECTIONS:
1. Hero: eyebrow "VEKTOR DYNAMICS — DWG-01", headline in Saira Condensed
("SIX AXES. ±0.02 MM. THREE-SHIFT RELIABILITY."), subline, orange CTA
"Request datasheet", schematic right.
2. Spec table: a real <table> in mono — model variants as columns, rows for
payload, reach, cycle time, IP rating, footprint. Row hover: orange left rule.
This table is a centerpiece, styled beautifully, not hidden.
3. Applications: 3 wide rows (electronics, automotive, pharma), each with a
photo placeholder treated with a gunmetal duotone, a blunt outcome line and
one mono metric ("cycle time 4.1 s → 2.8 s").
4. Process/integration timeline: horizontal stepper (site audit → simulation →
install → training) with mono durations; the connecting line draws on scroll.
5. Certifications & facts strip: ISO/CE marks as TEXT badges in bordered mono
chips (no clip-art logos), plus counters (units in field, uptime %).
6. CTA panel: "Send us your cycle-time problem." + form (name, company, email,
message) with sharp rectangular inputs, mono labels, orange submit.
7. Footer: address, phone, a small blueprint-frame border, legal line.
MOTION — mechanical precision:
- Reveals: elements slide in 16px on the X axis (like parts on a rail), 300ms,
linear-ish easing (cubic-bezier(0.3,0,0.2,1)), 50ms stagger.
- The schematic draw (1.4s) and timeline draw are the only long animations.
- Hovers are instant state changes (orange fills), 100ms. No bounce anywhere —
machines don't bounce.
GRAPHIC LANGUAGE (a machine catalog with poster energy; execute all of it):
- Texture: blueprint grid plus fine crosshatch on gunmetal; 45deg safety-stripe
(orange/black) divider bands between major sections.
- Scale: hero headline at 12vw Saira Condensed caps; a ghost "±0.02" at 28vw
behind the spec table.
- Image treatment: gunmetal duotone with an orange highlight pass on all
photos; drawing-frame tick borders around imagery.
- Devices: dimension annotation lines with arrowheads; stamped plate labels
(DWG-01); hazard-stripe tape strips as accents.
- Color blocking: the applications section inverts to full-bleed drafting white
with dark type; one full safety-orange band carries a single claim line.
- Break the grid: the schematic bleeds off the right edge; the spec table runs
edge-to-edge with its frame ticks outside the container.
- Scroll set-piece: the schematic draws itself while its section pins, joints
highlighting in sequence as mono annotations count in.
BOLDNESS FLOOR (as binding as the quality floor): type at the stated scale;
the orange band and inverted section present; safety-stripe dividers present;
texture page-wide; the pinned schematic set-piece; hovers that transform (rows
flood orange, dimensions extend); no photo without its duotone.
QUALITY FLOOR: semantic HTML (real table with th/scope, ordered list for the
stepper), one h1, focus visible (orange outline), AA contrast, responsive to
360px (spec table becomes horizontally scrollable with a visible scroll hint),
font-display: swap, SVG has aria-label describing the machine.
16
Museum / Gallery
Museum / Gallery — Exhibition Site
The white cube, digital — huge artworks, minimal chrome, scholarly captions, one deep accent.
- Best for
- Museums, galleries, exhibitions, archives, cultural institutions, art fairs.
- Fonts
- Spectral (display & body serif) + Fragment Mono (captions/wall labels).
Use the frontend-design and ui-ux-pro-max skills if installed. If taste-skill is
present, set its dials to VARIANCE 7, MOTION 4, DENSITY 2. Ban lists remove
cliches, never scale, texture or color: when any ban or restraint line conflicts
with the GRAPHIC LANGUAGE or BOLDNESS FLOOR below, the bolder instruction wins.
Build a single self-contained index.html (embedded CSS/JS, Google Fonts allowed)
for [Chandra Gallery — an exhibition titled "Woven Signals: Contemporary Textile
Art of Southeast Asia", running 12 Sep – 30 Nov 2026]. Audience: [art audiences,
collectors, press]. Single job: plan a visit (hours, tickets) and explore the
works. Copy language: [English]. Copy voice: curatorial — precise, unhurried,
knowledgeable; wall-label conventions (artist, title in italic, year, medium,
dimensions); never marketing superlatives.
BEFORE code: produce a design plan (tokens, type scale, ASCII wireframes,
signature element), self-critique against generic defaults, revise once, then
build.
ART DIRECTION — the white cube, digital:
- Typography: Spectral (300/400, generous sizes) for headlines and body — a
scholarly serif; Fragment Mono for wall labels, dates and way-finding.
- Palette: gallery white #FBFBF9, carbon #1A1A18, lapis #23408E used only for
links, the ticket CTA and ONE word of the exhibition title. Nothing else.
- Layout: enormous whitespace; artworks get room the way they would on a wall.
Chrome (nav, buttons) is nearly invisible — thin, small, quiet.
SECTIONS:
1. Hero: the exhibition title set large in Spectral (the word "Signals" in
lapis), dates + venue in Fragment Mono, one full-width key artwork below with
a proper wall label.
2. Curatorial statement: a single centered column (max 32rem), 3 paragraphs,
drop cap, with the curator's name and title at the end.
3. SIGNATURE — the exhibition wall: a horizontally scrolling strip (native
scroll, scroll-snap, momentum) of 8 artworks "hung" at consistent centerline
like a physical gallery wall, each with a mono wall label beneath (artist,
*title*, year, medium, dimensions). Scroll progress shown as a thin lapis line
at the strip's bottom. Keyboard: arrow keys move between works. A subtle
"scroll →" hint in mono.
4. Clicking an artwork opens a detail view (same page overlay): the work large
on white, full label, a 2-sentence curatorial note, prev/next navigation.
Use the View Transitions API for open/close (fallback: instant).
5. Artists index: a simple two-column list of the 8 artists (name + country +
b. year), each row linking to their work in the strip.
6. Visit: hours, address, ticket prices in a clean mono table; lapis "Book
tickets" button; a small static map placeholder.
7. Footer: institution name, supporters as plain text, contact, colophon-style.
IMAGERY: use https://picsum.photos placeholders with varied, realistic artwork
aspect ratios (portrait, landscape, square); comment where real images go.
Artworks are NEVER cropped, overlaid, or filtered — respect the work.
MOTION — reverent:
- Images fade in slowly (600ms) as they enter view; labels follow 150ms later.
CSS scroll-driven animations with IO fallback.
- The horizontal strip is user-driven only — no auto-scroll.
- View Transitions 300ms. Nothing else moves. prefers-reduced-motion: instant.
GRAPHIC LANGUAGE (the white cube is a stage, not an empty room; execute all):
- Texture: barely-there gallery paper grain; artworks stay pristine.
- Scale: exhibition title at 9vw Spectral; ghost catalog numerals (No. 1–8) at
14rem behind each wall label.
- Image treatment: artworks are NEVER treated — treat their surroundings
instead: soft plinth shadows, generous mat-board margins.
- Devices: the wall-label typography system; a lapis thread underlining the
current position in the horizontal wall.
- Color blocking: the curatorial statement is a full-bleed lapis section with
white Spectral type; everything else stays gallery white.
- Break the grid: one artwork in the wall is deliberately oversized, taller
than the strip, breaking the hanging line.
- Scroll set-piece: the horizontal exhibition wall with its progress thread;
View Transitions into artwork detail.
BOLDNESS FLOOR (as binding as the quality floor): title at the stated scale;
the lapis section present; the oversized artwork breaking the line; ghost
numerals present; the wall set-piece working; hovers that transform (labels
ink in, plinth shadows deepen).
QUALITY FLOOR: semantic HTML (figure/figcaption for every artwork, address for
the venue), one h1, keyboard focus visible (lapis outline), AA contrast,
responsive to 360px (the wall becomes a vertical single column of works — a
"catalog view"), lazy-load artworks, font-display: swap.
17
Fine Dining + Video BG
video bg
Fine Dining + Video BG — Chef's Table Restaurant
Candlelit and intimate — dark plum, macro food film, a menu treated like poetry.
- Best for
- Fine dining, chef's tables, omakase, wine bars, boutique culinary brands.
- Fonts
- Gilda Display (display serif) + Albert Sans (body).
Use the frontend-design and ui-ux-pro-max skills if installed. If taste-skill is
present, set its dials to VARIANCE 8, MOTION 6, DENSITY 3. Ban lists remove
cliches, never scale, texture or color: when any ban or restraint line conflicts
with the GRAPHIC LANGUAGE or BOLDNESS FLOOR below, the bolder instruction wins.
Build a single self-contained index.html (embedded CSS/JS, Google Fonts allowed)
for [Lembayung — a 16-seat chef's table in Jakarta serving a seven-course menu
built around Indonesian fermentation and open fire]. Audience: [food-obsessed
diners booking 2–6 weeks ahead]. Single job: reservations. Copy language:
[English]. Copy voice: restrained and sensory — name the ingredient, the
technique, the farm; short lines; no "culinary journey" clichés, no "exquisite".
BEFORE code: produce a design plan (tokens, type scale, ASCII wireframes,
signature element), self-critique against generic defaults, revise once, then
build.
ART DIRECTION — candlelight:
- Typography: Gilda Display for headlines and course names (its fine serifs read
like a menu card); Albert Sans 300/400 for body; small caps with wide tracking
for labels (COURSE III, WINE PAIRING).
- Palette: deep plum-black #2A0F1E base, blush #E8C7C2 text, aged gold #C79A4B
for rules, numerals and the reserve button, smoke #6E5A62 secondary. No pure
black, no pure white — everything slightly warm.
- Texture: a barely-there vignette on sections (radial darkening at edges) to
create the candlelit feel; hairline gold rules as dividers.
HERO — video:
- Slow-motion macro clip: open flame / plating / steam (commented placeholder
URL from Pexels/Coverr; search "open fire cooking slow motion", "chef plating
macro"), 720p ≤5MB, autoplay muted loop playsinline, poster, WebM+MP4, poster
only on mobile, paused offscreen, aria-hidden.
- Plum overlay rgba(42,15,30,0.55). Wordmark "LEMBAYUNG" in Gilda, one line
beneath ("Sixteen seats. Seven courses. One fire."), gold "Reserve" button.
SIGNATURE — the menu as a scroll journey:
- Section 3 is the tasting menu: seven courses, each a full-width moment that
fades in as you scroll (one at a time, generous spacing): a gold Roman numeral,
the course name in Gilda (e.g. "Aged snapper, kecombrang, charred coconut
cream"), one line naming technique/origin, optional pairing in small caps.
A thin gold vertical line grows down the left margin connecting courses as
scroll progresses (CSS scroll-driven animation, JS fallback). It should feel
like courses arriving one by one. prefers-reduced-motion: all visible, line
fully drawn.
SECTIONS:
1. Video hero.
2. Intro: 2 short paragraphs on the chef and the fire-and-ferment idea, with the
chef's name; a small portrait placeholder treated warm-toned.
3. The menu journey (SIGNATURE, as above) + price and duration at the end in
small caps ("SEVEN COURSES — RP 1.850.000 — ± 2.5 HOURS").
4. The room: two atmospheric photo placeholders (16 seats, the counter, the
hearth) with one-line captions.
5. Practicalities in a quiet grid: seatings (18:00 / 20:30), days, dietary notes
policy, dress, location — factual, mono-spaced feel using small caps.
6. Reservation: date + guests + email form with underline inputs, gold focus,
note about the waitlist. Working client-side validation.
7. Footer: address, hours, Instagram, "no photography after course V" as a
charming small-print detail.
MOTION: slow and warm — 700–1000ms fades, tiny 8px rises, no parallax on food
imagery (respect the plate). The reserve button glows faintly on hover
(box-shadow gold, subtle). Nothing bounces.
GRAPHIC LANGUAGE (candlelight with theatrical staging; execute all of it):
- Texture: film grain plus candlelight vignette; a linen texture on the menu
section.
- Scale: wordmark at 10vw Gilda; ghost roman course numerals at 24vw behind
each course as it arrives.
- Image treatment: deep plum duotone with warm highlights on all food imagery;
nothing bright or raw.
- Devices: gold hairline frames inset on imagery; a course-progress line of
seven gold points; small-caps pairing labels.
- Color blocking: one full-bleed blush section (the room) inverts the palette;
the reservation block is solid plum under a gold rule.
- Break the grid: course images alternate bleeding left/right past the text
measure; the chef portrait overlaps the intro text block.
- Scroll set-piece: the tasting-menu journey where each course's ghost numeral
parallaxes slower than its text — courses arriving at the table.
BOLDNESS FLOOR (as binding as the quality floor): wordmark at the stated
scale; the blush inversion present; ghost numerals with parallax; grain and
vignette page-wide; image bleeds and the portrait overlap present; hovers that
transform (frames draw, gold points ignite); no photo without its grade.
QUALITY FLOOR: semantic HTML (the menu is an <ol>), one h1, focus visible (gold
outline), AA contrast (blush on plum passes; verify gold on plum for small
text), responsive to 360px, video ≤5MB with poster fallback, font-display: swap.
18
Collage / Handmade
Collage / Handmade — Coffee Roastery / Indie Brand
A zine scrapbook — kraft paper, tape, polaroids, doodles, grain. The maximum anti-AI look.
- Best for
- Roasteries, indie brands, zines, markets, craft products, community projects.
- Fonts
- Caprasimo (display) + Epilogue (body) + Caveat (handwritten notes).
Use the frontend-design and ui-ux-pro-max skills if installed. If taste-skill is
present, set its dials to VARIANCE 10, MOTION 6, DENSITY 4. Ban lists remove
cliches, never scale, texture or color: when any ban or restraint line conflicts
with the GRAPHIC LANGUAGE or BOLDNESS FLOOR below, the bolder instruction wins.
Build a single self-contained index.html (embedded CSS/JS, Google Fonts allowed)
for [Piknik Coffee Roasters — a small-batch roastery in Bandung roasting single-
origin Indonesian beans, selling online and at weekend markets]. Audience:
[home brewers 20–35]. Single job: sell the current three coffees. Copy language:
[English]. Copy voice: like the founder talking at a market stall — warm, direct,
opinionated about coffee, a little funny; tasting notes are specific ("stewed
strawberry, cocoa nib"), never "premium quality beans".
BEFORE code: produce a design plan (tokens, type scale, ASCII wireframes,
signature element), self-critique against generic defaults, revise once, then
build. The whole point of this brief: it must look assembled by human hands, not
generated. Perfection is the enemy here — but mess needs a system too: rotation
set (-2.5/-1/1.5/3 deg), three tape styles, one shadow recipe.
ART DIRECTION — the zine pinboard:
- Typography: Caprasimo for big headlines (chunky, friendly); Epilogue for body
and UI; Caveat for handwritten margin notes and price tags.
- Palette: kraft paper #E8DFCE background, ink #26221D, tomato #E23E1C, sky
#7FB7D9, butter #F2C94C as sticker/accent colors. Flat colors, no gradients.
- Texture system: a subtle paper-grain overlay on the kraft background; "taped"
corners on cards (small semi-transparent rectangles at angles); torn-paper
edges on section dividers (SVG clip-path with an irregular edge, NOT a smooth
wave); polaroid frames (white border, thicker at bottom) on photos; hand-drawn
SVG doodles — a coffee cup, an arrow, a star — scattered sparingly with Caveat
labels ("our roaster!!").
SECTIONS:
1. Hero: "PIKNIK" in huge Caprasimo on kraft, a Caveat note pinned next to it
("roasted every tuesday"), a polaroid of the roastery taped at an angle, and
a tomato sticker-button "Shop the drop →".
2. Marquee in butter yellow with ink text: "THIS WEEK: GAYO — KINTAMANI — TORAJA"
with hand-drawn star separators.
3. SIGNATURE — the coffee pinboard: the three coffees as polaroid cards, each
rotated differently, each with: photo placeholder, name in Caprasimo, origin
+ process in Epilogue, tasting notes underlined in crayon-style (thick
irregular SVG underline), a Caveat price tag ("Rp 145k / 200g"), and a
working "Add to cart" that updates a cart count badge. Hover: the card
straightens to 0deg and lifts slightly, tape corners stay.
4. "How we roast" — 3 steps with hand-drawn doodle icons and short honest text,
connected by a squiggly arrow that draws itself on scroll.
5. Brew guide strip: ratio/temp/time for V60 in a hand-drawn table look (uneven
borders), with a Caveat annotation ("don't stress, it's just coffee").
6. Market dates: a taped-on list of upcoming weekend markets with dates.
7. Footer: ink on kraft, socials, a final doodle and "made with too much
caffeine" line.
MOTION — handmade, not smooth:
- Reveals: elements "settle" in — a quick 250ms rotation from ±3deg to their
resting angle + fade, staggered 80ms — like items being placed on a board.
- Hover wobble on stickers/buttons: rotate ±2deg keyframe, 300ms, once (not
looping).
- The squiggle arrow draws on scroll (stroke-dashoffset). Marquee linear.
- prefers-reduced-motion: everything static and settled, marquee stopped.
GRAPHIC LANGUAGE (a pinboard should feel piled-on, not arranged; execute all):
- Texture: kraft grain + torn edges + tape strips + subtle coffee-ring stains
(SVG) layered together.
- Scale: "PIKNIK" at 13vw Caprasimo; a 26vw doodle star behind the pinboard.
- Image treatment: photos are polaroids OR posterized two-color prints; nothing
untouched.
- Devices: tape corners, price tags, a sticker sheet (3+ shapes), crayon
underlines, doodle arrows.
- Color blocking: a full-bleed butter marquee band; a sky-blue brew-guide
section; kraft everywhere else.
- Break the grid: every element rotated within the allowed set; one polaroid
hangs half off the viewport edge; the marquee band has torn top and bottom
edges.
- Scroll set-piece: the pinboard settles item-by-item (rotate-in, like being
pressed onto the board) and the squiggle arrow draws through the roast steps.
BOLDNESS FLOOR (as binding as the quality floor): wordmark at the stated
scale; both color-blocked bands present; rotations everywhere; layered texture
including torn edges; the settle-in set-piece; hovers that wobble, straighten
and peel; no photo without its polaroid frame or posterization.
QUALITY FLOOR: semantic HTML, one h1, focus visible (thick ink outline), AA
contrast (ink on kraft/butter/sky verified), responsive to 360px (polaroids
stack, rotations reduced to ±1.5deg), cart state persists in localStorage,
font-display: swap, decorative doodles aria-hidden.
19
Data-Driven / Financial
Data-Driven / Financial — Market Analytics Platform
The chart IS the design — live-feeling data, tabular numerals, terminal seriousness with modern polish.
- Best for
- Analytics platforms, market research, fintech data, trading tools, BI products.
- Fonts
- Red Hat Display (display/UI) + Red Hat Mono (all numbers/data).
Use the frontend-design and ui-ux-pro-max skills if installed. If taste-skill is
present, set its dials to VARIANCE 7, MOTION 6, DENSITY 6. Ban lists remove
cliches, never scale, texture or color: when any ban or restraint line conflicts
with the GRAPHIC LANGUAGE or BOLDNESS FLOOR below, the bolder instruction wins.
Build a single self-contained index.html (embedded CSS/JS, Google Fonts allowed)
for [Kompas Capital — a market intelligence platform tracking commodity prices
and shipping flows across Southeast Asia]. Audience: [analysts, traders, supply
chain managers]. Single job: start a 14-day trial. Copy language: [English].
Copy voice: analyst-terse — every sentence carries a number, a market or a
timeframe; headlines read like insights, not slogans ("Palm oil moved 4.2%
before the news did.").
BEFORE code: produce a design plan (tokens, type scale, ASCII wireframes,
signature element), self-critique against generic defaults, revise once, then
build. Anti-slop constraints: no purple, no generic dashboard stock screenshots,
no "unlock insights" copy.
ART DIRECTION — data as material:
- Typography: Red Hat Display (500/700) for headlines and UI; Red Hat Mono for
every numeral, label, axis and table cell. font-variant-numeric: tabular-nums
globally. Numbers are ALWAYS aligned.
- Palette: dark slate #0F1417 for the hero and data sections, light paper
#F4F6F5 for explanatory sections (a deliberate dark/light alternation —
"terminal" vs "report"), market green #16C784 and market red #EA3943 used
ONLY semantically (up/down), neutral #8A949E for axes and secondary text.
CTA color: green, since green = up = the product's promise.
- Grid: baseline-aligned, chart gridlines (1px #1E252B) reused as a decorative
system across the dark sections.
SIGNATURE — the living hero chart:
- A full-width SVG line chart (custom JS, no chart library) of a plausible
commodity price series: on load the line draws itself left to right (1.2s,
stroke-dashoffset), the area under it fills at 8% opacity, axis labels in
mono fade in. Then every 2 seconds a new point appends and the line shifts —
a live feed feel. A mono readout above shows last price + delta, green or red
by direction. Runs only while in view; static full chart under
prefers-reduced-motion.
SECTIONS:
1. Hero (slate): headline insight, one subline naming coverage ("11 commodities,
6 ports, updated every 15 minutes"), green CTA + ghost "See coverage" link,
the living chart below, and a thin ticking strip of mono price chips
(commodity — price — delta) that updates with the chart.
2. Proof strip (paper): three insight cards written like real analyst notes,
each with a mini sparkline (tiny SVG, drawn on scroll) and a dated headline.
3. Product: two split sections alternating text + a data-table mock — a real
<table> with mono numerals, right-aligned figures, green/red deltas,
hoverable rows. Tables must be beautiful; they are the product.
4. Coverage map section (slate): a simplified SVG map or stylized route diagram
of ports with pulsing dots (subtle, 2s), mono labels.
5. Methodology: 3 short numbered points on data sources and update cadence —
factual trust-building, no security theater.
6. Pricing: two plans in bordered panels, every feature line containing a
number (refresh rate, history depth, seats). Green CTA on the pro plan.
7. Footer (slate): mono, data disclaimer line, contact.
MOTION: chart/sparkline draws 800–1200ms; count-ups 1s once; reveals are quick
250ms fades — the data provides the life, the layout stays still. All
transform/opacity/stroke only. Full prefers-reduced-motion support.
GRAPHIC LANGUAGE (a terminal with poster moments; execute all of it):
- Texture: chart-grid lines (1px #1A2126) as section backgrounds; strict
tabular rhythm everywhere.
- Scale: the hero insight at 8vw Red Hat Display; a ghost 30vw rising sparkline
(SVG path) behind the proof section.
- Image treatment: no photos — charts, tables and numbers ARE the imagery;
tables get zebra tints and heat-cell accents on extremes.
- Devices: mono unit badges, delta chips with ▲▼ glyphs, axis-tick rulers as
section dividers.
- Color blocking: dark slate and light paper alternate HARD; one full-bleed
market-green band carries the single claim line, white type.
- Break the grid: the hero live chart bleeds full viewport width; one insight
card turns its sparkline vertical.
- Scroll set-piece: the hero chart draws and ticks live, and the proof
section's three sparklines draw in sequence while the ghost sparkline
parallaxes behind them.
BOLDNESS FLOOR (as binding as the quality floor): insight at the stated scale;
the green band present; hard slate/paper alternation; the full-bleed chart;
grid texture; both chart set-pieces; hovers that transform (rows heat-map,
chips flip).
QUALITY FLOOR: semantic HTML (real tables with th/scope/caption), one h1, focus
visible (green outline), AA contrast (green/red on slate verified — lighten if
needed; never rely on color alone for up/down, add ▲▼ glyphs), responsive to
360px (tables scroll horizontally with a hint, chart simplifies its axis
labels), font-display: swap.
20
Personal Brand Narrative
Personal Brand Narrative — Author / Speaker / Founder
A person's story told as a scroll — big portrait, chaptered career timeline, a hand-signed feel.
- Best for
- Writers, keynote speakers, founders, coaches, academics.
- Fonts
- Petrona (display serif) + Mulish (body).
Use the frontend-design and ui-ux-pro-max skills if installed. If taste-skill is
present, set its dials to VARIANCE 8, MOTION 6, DENSITY 3. Ban lists remove
cliches, never scale, texture or color: when any ban or restraint line conflicts
with the GRAPHIC LANGUAGE or BOLDNESS FLOOR below, the bolder instruction wins.
Build a single self-contained index.html (embedded CSS/JS, Google Fonts allowed)
for [Maya Chen — author of two books on cities and technology, keynote speaker,
former urban policy advisor]. Audience: [event organizers, publishers, media].
Single job: speaking inquiries. Copy language: [English]. Copy voice: first
person, warm but substantial — specific books, cities, years and stages; zero
"thought leader" self-labeling (show it, never say it).
BEFORE code: produce a design plan (tokens, type scale, ASCII wireframes,
signature element), self-critique against generic defaults, revise once, then
build.
ART DIRECTION — a printed memoir, alive:
- Typography: Petrona (400/600) for headlines and pull lines; Mulish for body
and UI; small caps for dates and labels.
- Palette: porcelain #F4F4F0, ink #1C1C1A, marigold #E0A526 for the timeline
thread, links and exactly one highlighted word in the hero, stone #7C7A72
secondary. No other colors.
- Layout: a strong asymmetric split — content sits on a left-weighted column
while the right margin carries the timeline thread and floating dates.
SECTIONS:
1. Hero: a large duotone portrait placeholder (right, ink-toned), name set big
in Petrona, one line stating what she does concretely ("I write and speak
about how technology is quietly redrawing our cities."), with one word in
marigold. Below: an SVG signature that draws itself once on load (1.4s,
stroke-dashoffset; static when prefers-reduced-motion). Two quiet CTAs:
"Invite me to speak" / "Read the books".
2. SIGNATURE — the chapters: a vertical timeline of 5 career chapters (e.g.
2014 policy desk → 2017 first book → 2020 TED main stage → 2023 second book
→ now). A thin marigold thread draws down the margin as the user scrolls
(CSS scroll-driven animation, JS fallback); each chapter: a small-caps year,
a Petrona headline, 2–3 first-person lines, and one artifact (book cover
placeholder, stage photo placeholder, or a pull-quote from press). Chapters
fade in as the thread reaches them.
3. Speaking: three signature talk titles with one-line descriptions and where
each was last delivered; a short list of past stages as plain text (no logo
walls); one embedded-video placeholder styled as a poster with a play glyph.
4. Books: the two books side by side — cover placeholder, title in Petrona, one
honest sentence each, publisher + year in small caps, "buy" links.
5. A single testimonial from an organizer, set as a large Petrona pull-quote
with name and event.
6. Inquiry: "For 2027 programming, write me directly." + a short form (name,
organization, event date, email) with underline inputs and marigold focus;
her direct email visible as text too.
7. Footer: city, representation contact, socials as plain text links.
MOTION — gentle and few:
- Reveals: 500ms fade + 14px rise, ease-out, modest stagger.
- The signature draw (once) and the timeline thread are the only signature
motions. Portrait gets a very subtle slow zoom (1.03 over 8s, once).
- No parallax, no counters, no marquees. prefers-reduced-motion: all static.
GRAPHIC LANGUAGE (a memoir with presence, not a resume; execute all of it):
- Texture: soft paper grain; visible ink-pressure variation in the signature
stroke.
- Scale: the name at 11vw Petrona; ghost chapter years (2014, 2017, 2020,
2023) at 20vw behind each chapter.
- Image treatment: all photography in warm ink duotone; the portrait runs
large and bleeds off the right edge of the viewport.
- Devices: the self-drawing signature; the marigold thread with year ticks;
oversized serif quotation marks on the testimonial.
- Color blocking: the speaking section is a full-bleed marigold block with ink
type; the footer is solid ink.
- Break the grid: the portrait bleeds; the pull-quote overlaps the chapter
above it; book covers sit at ±2deg.
- Scroll set-piece: the timeline thread draws while ghost years crossfade
behind their chapters, ending exactly at the inquiry block.
BOLDNESS FLOOR (as binding as the quality floor): name at the stated scale;
the marigold block present; ghost years present; portrait bleed and quote
overlap present; grain page-wide; the thread set-piece; hovers that transform
(covers straighten, links ink in); no photo without its duotone.
QUALITY FLOOR: semantic HTML (the timeline is an <ol>, blockquote/cite for the
testimonial), one h1, focus visible (marigold outline), AA contrast, responsive
to 360px (the timeline thread moves to the left edge, portrait stacks above
name), lazy-load below-fold imagery, font-display: swap.
No designs match that filter.