A refined digital museum or curated gallery for award-winning web design.
02
Color
#FFCC00Accent
#404040Ink
#9A9A9AInk soft
#FFFFFFBG
#ECECECBG soft
#8E8E8EMuted
rgba(236, 236, 236, 1.0)Line
A monochromatic canvas that uses subtle texture and a single vibrant yellow accent to frame curated content.
03
Typography
grotesque-sans · humanist-sans · monospace
display56px · 400
body16px · 400
caption14px · 300
Uppercase text-transform for categorical labels and dates · Light weights (300) for secondary information · Strict left-alignment for all content blocks
04
Spacing
4px
8px
12px
16px
20px
24px
32px
40px
48px
64px
Consistent 4px grid used for all internal padding and margins.
05
Surfaces
sm · 2px
md · 4px
lg · 5px
pill · 999px
Thin 1px borders used to separate content blocks and define grid structures.
0 1px 3px rgba(0,0,0,0.1)
06
Layout
1280container
12columns
24pxgutter
768 / 1024breakpoints
Structured asymmetric grid combining large media blocks with narrow metadata columns.
07
Motion & Interaction
220msmicro
400mssmall
800msmedium
cubic-bezier(0.19, 1, 0.22, 1)easing
Opacity fades for interactive state changes · Slide-in animations for content reveals
Cursor changes to pointer with subtle opacity or color shifts. · Direct navigation or media play triggers.
08
Components
buttonText-based buttons and outlined pill shapes with clear padding.
cardLarge media cards featuring subtle pixel-pattern backgrounds and structured metadata labels.
chipSmall uppercase text labels for categories.
inputStandard dropdown selectors with thin borders.
heroFull-width media containers with overlaid text and interactive play controls.
09
Voice & Don'ts
ToneProfessional, authoritative, and highly curated.
HeadlinesClean, large numerals paired with straightforward project titles.
CTAsFunctional and direct (e.g., 'See Case', 'Launch Project').
Don't use complex gradients — the screenshot shows flat white backgrounds with subtle pixel textures.
Don't use bold font weights for everything — the ground-truth shows predominantly 400 and 300 weights.
Don't use vibrant colors everywhere — the palette is strictly monochromatic except for a single yellow accent.
Don't use rounded corners aggressively — the ground-truth shows very small 2px to 5px radii.
Don't use tight spacing — the ground-truth shows generous 20px and 44px padding in key areas.
Don't use centered text alignment — the screenshot shows a strict left-aligned typographic hierarchy.
Captured from the live site · real computed styles
11
System prompt
The FWA is a curated digital award gallery and portfolio showcase. The design DNA is built on a minimalist monochromatic palette using white (#FFFFFF) and charcoal (#404040), accented only by a vibrant yellow (#FFCC00). Typography relies on a humanist-sans for body text and a condensed grotesque-sans for display elements, prioritizing legibility and hierarchy through weight and size rather than color. The layout is a structured grid that uses thin lines and subtle pixel textures to define surfaces. Key critical don'ts: never use multiple accent colors, never center-align large blocks of text, and never use heavy font weights for standard UI elements. The overall feel is calm, refined, and content-first, allowing the featured projects to stand out against a restrained, gallery-like environment.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
