# Typelist Upstatement · Design system migration spec

> Source: https://typelist.upstatement.com  ·  Curated by OpenDesign  ·  en

> An excellent example of how extreme restraint, bold geometry, and generous typography can create a powerful, expressive editorial experience.

## 1. Identity DNA

Typelist operates on the principle of a curated library of expressive display typefaces, where each specimen is given room to be studied and appreciated. Its identity is defined by a stark, high-contrast monochrome foundation that is deliberately interrupted by vibrant, flat geometric accents, creating a space of focused visual impact.

**One-liner:** A clean, expressive editorial showcase for creative typography.
**Keywords:** Typography · Curation · Display
**Analogy:** A curated library of expressive display typefaces.

## 2. Color

The color system is built on a stark, high-contrast monochrome base of near-black and white. This foundation is interrupted only by bold, flat, and highly saturated geometric accents that serve as deliberate points of visual interest.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--ink` | `#15181E` | body text |
| `--muted` | `#E5E5E5` | placeholder |
| `--line` | `rgba(21,24,30,1.0)` | divider |

**Color principle:** Stark, high-contrast monochrome base interrupted only by vibrant, flat geometric accents.

The principle is one of stark separation: color is used for emphasis and interruption, never for gradient or atmospheric blending.

## 3. Typography

The typographic voice is editorial and confident, relying on a humanist-sans for both display and body text to maintain a consistent, modern character. Key to its feel is the consistent use of uppercase transforms and generous letter spacing for labels and headings, creating an airy, structured rhythm.

- **Display:** humanist-sans
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 22px | 1.36 | 500 | 2px | Uppercase labels and primary headings |
| body | 16px | 1.0 | 400 | 0px | Standard interface text |
| caption | 12px | 1.36 | 400 | 2px | Small metadata and secondary labels |

**Type rules:**
- Uppercase transform is used consistently for labels and navigation
- Letter spacing is used generously to create an airy, editorial feel
- Serif fonts are utilized sparingly for specific stylistic emphasis

## 4. Spacing

Rhythm is established through open, airy spacing that relies on large, deliberate white space to frame bold visual elements.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Open and airy, relying heavily on large, deliberate white space to frame bold visual elements.

## 5. Surfaces

Surfaces are defined by flat color fields and stark white space, not by complex shadows or decorative borders. Separation is achieved through spatial contrast and the deliberate placement of geometric color blocks.

- **Radius:** sm 4px · md 8px · lg 0px · pill 999px
- **Borders:** Minimal to non-existent; separation is achieved through spatial contrast and flat color.

## 6. Layout

The layout skeleton is a highly asymmetrical, gallery-like composition that prioritizes visual impact over dense information grids. It frames content with expansive whitespace, treating the page as a canvas for geometric arrangement.

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

**Skeleton:** A highly asymmetrical, gallery-like layout that prioritizes visual impact over dense information grids.

## 7. Motion & Interaction

Motion is applied with elegant deliberation, using smooth, consistent transitions to guide focus without abruptness. The philosophy favors understated refinement, relying on a specific cubic-bezier easing curve to ensure visual changes feel considered and fluid.

- **Durations:** micro 100ms · small 300ms · medium 800ms
- **Easing:** `cubic-bezier(0.215, 0.61, 0.355, 1)`
- **Patterns:**
  - Smooth, deliberate transitions on interactive elements
  - Elegant easing curves that avoid abrupt movements

- **Hover:** Subtle visual state changes, likely involving color or slight spatial shifts.
- **Click:** Direct navigation or state change without aggressive visual feedback.
- **Transition:** Consistent application of 0.3s transitions across transform and color properties.
- **Keyboard:** Standard sequential focus order implied by the clean structural layout.

## 8. Voice & Don'ts

The editorial voice is confident, curated, and expert, with headlines that are uppercase, tightly tracked, and often geometrically integrated. Call to actions are deliberately understated, existing as pure typographic links that rely on the overall visual rhythm rather than explicit UI styling.

- **Tone:** Confident, curated, and expert with a focus on visual impact.
- **Headline style:** Uppercase, tightly tracked, and often geometrically integrated into the design.
- **CTA style:** Understated and purely typographic, relying on the overall visual rhythm.
- **Avoid:** Avoid generic or overly decorative UI patterns / Avoid cluttered information hierarchies / Avoid using gradients or complex shadows / Avoid informal or overly playful typographic treatments / Avoid dark mode interfaces / Avoid dense, traditional grid layouts

### Don'ts
- ❌ Don't use generic UI components like standard buttons or cards — screenshot shows flat, custom geometric shapes and simple typography links instead.
- ❌ Don't apply complex shadows or gradients — screenshot shows flat, solid color fields and stark white space.
- ❌ Don't use dense, cluttered layouts — screenshot shows expansive, deliberate whitespace framing minimal content.
- ❌ Don't use casual or overly playful typography — screenshot shows highly structured, uppercase tracking and geometric arrangements.
- ❌ Don't use dark mode or muted, low-contrast palettes — screenshot shows a stark white background with high-contrast black text and vibrant colors.
- ❌ Don't rely on traditional UI borders for separation — screenshot shows spatial contrast and flat color blocks as the primary visual dividers.

What is deliberately absent is as defining as what is present: it rejects dark mode, complex UI patterns, gradients, and cluttered hierarchies in favor of absolute restraint.

## System Prompt (paste into AI tool)

```
This site is a minimalist, expressive editorial showcase for typography, positioning itself as a curated gallery of display typefaces. The design DNA relies on a stark monochrome base of pure white (#FFFFFF) and near-black ink (#15181E), interrupted only by bold, flat geometric accents like vibrant purple and yellow. The primary typography categories are humanist-sans for both display and body text, characterized by generous letter spacing (2px) and consistent uppercase transforms. Critical design constraints include avoiding all complex UI patterns, rejecting dark mode or muted palettes, and maintaining expansive, deliberate whitespace instead of dense grid layouts. The interaction model is subtle, relying on smooth 0.3s transitions (cubic-bezier(0.215, 0.61, 0.355, 1)) rather than aggressive feedback.
```