CURATED · OPEN · FREE

Serpentine

A refined, editorial museum interface featuring dramatic black-and-white typography and a content-forward layout.

01

Identity DNA

A curated gallery space that balances bold architectural typography with serene, photographic backdrops.

02

Color

High-contrast monochrome palette that prioritizes the artwork through stark black and white elements.

03

Typography

geometric-sans · transitional-serif

• display56px · 700
• body16px · 400
• caption13px · 700

All navigation and UI labels must be set in uppercase geometric sans. · Article paragraphs must use the transitional serif for readability. · Maintain tight negative letter-spacing on large display headings.

04

Spacing

Consistent 4px base unit ensuring clean alignment of large typographic elements.

05

Surfaces

Strict 1px solid borders in black or white to maintain sharp edges.

rgba(0,0,0,0.3) 0px 32px 68px 0px

06

Layout

Full-bleed photographic hero sections followed by structured, wide-margin content blocks.

07

Motion & Interaction

Smooth color and opacity transitions on interactive elements · Standard linear fades for modal overlays

Subtle opacity changes or color inversions on text links. · Immediate visual feedback through standard browser focus states.

08

Components

• button Minimalist rectangles with solid black or white fills and uppercase text.
• card Clean, borderless image containers that rely on large typography for hierarchy.
• chip Simple underlined text tabs for navigation.
• input Standard form fields with bottom-border emphasis.
• hero A high-contrast photographic background with an oversized typographic overlay.

09

Voice & Don'ts

• Tone Authoritative, culturally sophisticated, and minimalist.
• Headlines Short, punchy, all-caps commands that grab attention.
• CTAs Direct and unadorned, using plain text buttons or simple arrows.

• don't use rounded corners — screenshot shows strict sharp 0px radius on all containers
• don't use decorative script fonts — screenshot shows bold geometric sans and transitional serif only
• don't use playful, vibrant colors — screenshot shows a strict high-contrast black and white palette
• don't use heavily shadowed buttons — screenshot shows flat, solid-fill buttons with simple borders
• don't use small, hidden navigation — screenshot shows bold, uppercase text links in the header
• don't use dense, cluttered grids — screenshot shows generous white space and full-bleed photography
• Avoid: Avoid playful or overly casual language.
• Avoid: Avoid decorative or script-style fonts.
• Avoid: Avoid rounded corners on primary UI elements.
• Avoid: Avoid excessive use of vibrant colors.
• Avoid: Avoid drop shadows on standard buttons.
• Avoid: Avoid cluttered or dense layouts.

10

Inside the pack — real screenshots

Captured from the live site · real computed styles

11

System prompt

en · zh-CN · zh-TW · ja · ko