# Artworld Agency · Design system migration spec

> Source: https://artworld.agency  ·  Curated by OpenDesign  ·  en

> This site is an excellent example of restraint and how typography alone can create a premium, editorial atmosphere.

## 1. Identity DNA

Artworld Agency operates as a curated gallery, where the architecture is built entirely from type and contrast. Its design DNA is a study in restraint, treating the interface not as a container but as a page in a high-end art catalogue.

**One-liner:** A high-contrast, typography-led portfolio for a creative agency.
**Keywords:** agency · editorial · photography · creative
**Analogy:** A curated gallery of creative talent presented with classical typographic elegance.

## 2. Color

The color system is an exercise in absolute purity: a strict monochrome of black, white, and a single gray for metadata. This palette functions as the blank wall of a gallery, ensuring the creative work itself is the only source of color.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--ink` | `#000000` | body text |
| `--muted` | `#BABABA` | placeholder |
| `--line` | `rgba(0,0,0,0.1)` | divider |

**Color principle:** Strict high-contrast monochrome to prioritize the creative work and typographic hierarchy.

The principle is one of editorial clarity—color exists to provide legibility and hierarchy, never to decorate.

## 3. Typography

The typographic voice is defined by a classical pairing: the sharp, high-contrast silhouette of Cardinal Fruit (a didone-serif) for display, set against the clean humanist forms of Graphik. This serif/sans-serif dialogue creates immediate distinction between artist names and supporting text, all unified by a single, light weight of 300.

- **Display:** didone-serif
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 75px | 1.0 | 300 | -1px | Large typographic hero element |
| h1 | 75px | 1.0 | 300 | -0.78px | Artist names |
| body | 16px | 1.5 | 300 | 0 | General text |
| caption | 12px | 1.5 | 300 | 0 | Roles and metadata |

**Type rules:**
- Use 'Cardinal Fruit' (didone-serif) for large display text and artist names.
- Use 'Graphik' (humanist-sans) at weight 300 for body text and smaller UI elements.
- Strictly maintain a single font weight (300) across all typography for a cohesive, refined aesthetic.

## 4. Spacing

Spacing operates on a generous, unstructured rhythm, treating whitespace as an active compositional element.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous, unstructured whitespace between typographic blocks to allow the text to breathe.

## 5. Surfaces

Surfaces are deliberately flat and borderless. Depth and separation are achieved solely through typographic scale and the strategic deployment of empty space.

- **Radius:** sm 0px · md 0px · lg 0px · pill 0px
- **Borders:** None; separation is achieved through spacing and typography.

## 6. Layout

The layout skeleton is a clean, single-column typographic flow, prioritizing vertical reading and sequential discovery. This column culminates in a massive, full-width typographic logo anchored at the bottom of the viewport, grounding the entire composition.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** A clean, single-column typographic flow with a massive logo anchored at the bottom.

## 7. Motion & Interaction

Motion is philosophy of subtlety, employing smooth fade-in transitions and color shifts. All interaction is designed to feel like a page turn—responsive yet never intrusive.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.77, 0, 0.18, 1)`
- **Patterns:**
  - Subtle fade-in transitions for elements appearing on scroll.
  - Smooth color transitions on hover states.

- **Hover:** Text color transitions from black to white, typically over a dark background overlay.
- **Click:** Cursor pointer indicates clickable links.
- **Transition:** Smooth opacity and color changes over 0.5s.
- **Keyboard:** Standard focus states follow the same transition rules as hover.

## 8. Voice & Don'ts

The editorial voice is refined and authoritative, communicated through headline scale and minimalist text links. The system deliberately avoids busy layouts, clashing colors, and any playful UI elements that would undermine its classical tone.

- **Tone:** Refined, authoritative, and quietly confident.
- **Headline style:** Large, classical serif typography that commands attention.
- **CTA style:** Minimalist text links that blend seamlessly into the typography.
- **Avoid:** Busy layouts / Clashing colors / Playful UI elements

### Don'ts
- ❌ don't use bright accent colors — screenshot shows a strict black-and-white monochrome palette
- ❌ don't use heavy font weights — screenshot shows all text at a light weight (300)
- ❌ don't use border-radius on elements — screenshot shows purely rectangular, sharp-edged layouts
- ❌ don't use complex card layouts — screenshot shows a flat, typographic list of names
- ❌ don't add decorative shadows — screenshot shows zero elevation or drop shadows
- ❌ don't mix many font families — screenshot relies purely on a serif/sans-serif pairing

They deliberately do not employ accent colors, heavy font weights, decorative shadows, or rounded corners, treating each omission as a core design principle.

## System Prompt (paste into AI tool)

```
Artworld Agency is a refined, typography-led creative portfolio. The design DNA is built on a strict black-and-white monochrome palette (#000000 ink, #FFFFFF background) to prioritize the creative work. The typography features a prominent didone-serif for display text (artist names) paired with a clean humanist-sans for body copy, both strictly at a light font weight (300). Critical design rules: do not introduce accent colors, do not use heavy font weights, and do not add decorative elements like shadows or rounded corners. The layout relies on generous whitespace and a massive typographic logo anchored at the bottom of the page.
```