---
name: Serpentine
description: "This site is an excellent example of how bold, architectural typography can drive a high-end cultural brand identity without the need for complex color schemes."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#141414"
  neutral: "#D6D6D6"
  bg-soft: "#F2F2F2"
  line: "rgba(20,20,20,1)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-1px"
  body:
    fontFamily: transitional-serif
    fontSize: 16px
    lineHeight: 1.6
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: transitional-serif
    fontSize: 13px
    lineHeight: 1.4
    fontWeight: 700
    letterSpacing: "0.1px"

rounded:
  sm: 0px
  md: 0px
  lg: 0px
  pill: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

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

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

## Colors

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

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#141414`)** — uses `ink` token
- **Muted (`#D6D6D6`)** — uses `muted` token
- **Borders (`rgba(20,20,20,1)`)** — uses `line` token

## Typography

- **Display:** geometric-sans
- **Body:** transitional-serif

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

## Layout

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

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

## Elevation & Depth

- rgba(0,0,0,0.3) 0px 32px 68px 0px
- Borders: Strict 1px solid borders in black or white to maintain sharp edges.

## Shapes

- `sm`: 0px
- `md`: 0px
- `lg`: 0px
- `pill`: 0px

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

## Do's and Don'ts

**Don't:**
- 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

---

## System Prompt (paste into AI agent)

```
Design a premium, editorial art gallery interface that prioritizes visual content and sophisticated typography. Use a high-contrast monochrome palette of deep black (#141414) and stark white (#FFFFFF). The typography must pair a bold, uppercase geometric sans for structural headings and navigation with a refined transitional-serif for body copy. Layouts should be clean, spacious, and content-forward, utilizing large photographic backgrounds. Strictly avoid rounded corners, playful fonts, and vibrant accent colors to maintain a serious, curated aesthetic. All UI elements must be sharp, minimalist, and functional.
```