# AnOther · Design system migration spec

> Source: https://www.anothermag.com  ·  Curated by OpenDesign  ·  en

> Worth including as a benchmark for premium editorial design that achieves sophistication through restraint, generous whitespace, and letting photography carry the visual weight.

## 1. Identity DNA

AnOther Magazine's design system operates like a curated gallery: its architecture exists to frame, not to compete. The digital publication adopts the discipline of a contemporary art space, where stark monochrome surfaces and generous negative space cede all visual authority to the photography within.

**One-liner:** An elegant, image-forward editorial magazine focused on art, fashion, and culture.
**Keywords:** editorial · art · fashion · culture · premium
**Analogy:** A curated gallery of contemporary art and fashion in digital magazine form

## 2. Color

The color system is one of deliberate absence. A strict monochrome palette of near-black ink on white grounds places every element of visual interest in the hands of the photography.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#ffffff` | main background |
| `--ink` | `#000011` | body text |
| `--ink-soft` | `#686868` | secondary text |
| `--muted` | `#686868` | placeholder |
| `--line` | `rgba(0,0,17,1.0)` | divider |

**Color principle:** A predominantly monochrome palette where stark black text on white provides maximum contrast, allowing photography to carry all color and visual interest.

This restraint is the core principle: the interface is a neutral container, allowing editorial imagery to be the sole carrier of color and mood.

## 3. Typography

Typography establishes a clear editorial voice through a considered pairing: a transitional serif commands all headlines, lending cultural authority, while a humanist sans handles body text and navigation with quiet legibility.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 52px | 1.0 | 400 | -1px | Article headlines and section headers |
| headline | 32px | 1.1 | 400 | 0px | Secondary headlines and category labels |
| body | 18px | 1.6 | 400 | 0px | Article summaries and body text |
| caption | 12px | 1.4 | 400 | 0.6px | Navigation links and metadata |

**Type rules:**
- Use transitional-serif for all headlines and display text.
- Use humanist-sans for body copy and navigation.
- Maintain generous line-height for readability.

## 4. Spacing

Rhythm is established through a consistent 4px base scale and expansive vertical padding, creating measured breathing room between content sections.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent 4px base scale with generous vertical padding around sections (approx. 206px top padding on content sections) to create visual breathing room.

## 5. Surfaces

Surfaces are defined by clean, flat planes. Borders are used sparingly as functional dividers rather than decorative elements, and the design strictly avoids shadows to maintain a graphic, two-dimensional quality.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Borders:** 1px solid borders used sparingly; primary navigation separated by a thin 1px solid black line.

## 6. Layout

The layout skeleton is anchored by full-bleed hero imagery. Below, a multi-column grid organizes content within a centered structure, prioritizing ample whitespace to avoid visual density.

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

**Skeleton:** Full-width hero images followed by multi-column grids (4-column for article previews). Content centered with generous whitespace.

## 7. Motion & Interaction

Motion philosophy is one of subtlety and restraint. All transitions—limited to color shifts and opacity fades—serve to acknowledge interaction without ever distracting from the editorial content.

- **Durations:** micro 150ms · small 400ms · medium 600ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1.0)`
- **Patterns:**
  - Color and background transitions on hover states (0.15s ease-in-out)
  - Opacity fade transitions for content reveals

- **Hover:** Subtle color transitions on interactive elements.
- **Click:** Standard pointer cursor on all clickable elements.
- **Transition:** Smooth transitions for color changes and opacity updates.
- **Keyboard:** Standard tab navigation through interactive elements.

## 8. Voice & Don'ts

The editorial voice is sophisticated, cultured, and authoritative, supported by a typographic system that favors elegant, commanding headlines over decorative flourish.

- **Tone:** Sophisticated, cultured, and authoritative.
- **Headline style:** Large, elegant serif headlines that command attention.
- **CTA style:** Minimal, understated calls to action that don't compete with editorial content.
- **Avoid:** Bright or neon accent colors / Rounded corners on UI elements / Heavy decorative borders / Playful or casual typography / Dense, cluttered layouts

### Don'ts
- ❌ Don't use rounded corners — screenshot shows sharp 0px corners on all elements including buttons and cards.
- ❌ Don't use bright accent colors — screenshot shows strictly monochrome black/white/gray palette.
- ❌ Don't use bold font weights — screenshot shows all elements at fontWeight 400.
- ❌ Don't use dense layouts with minimal whitespace — screenshot shows generous padding (206px) between sections.
- ❌ Don't use sans-serif for headlines — screenshot shows transitional-serif (Kepler3) for all display text.
- ❌ Don't add drop shadows to cards or UI elements — screenshot shows completely flat, shadow-free surfaces.

The system deliberately excludes bright accents, rounded corners, bold weights, and dense layouts—maintaining its identity through consistent, disciplined omission.

## System Prompt (paste into AI tool)

```
This is a premium editorial magazine website (AnOther Magazine) focused on art, fashion, and culture. Position it as a refined, image-forward digital publication with gallery-like presentation. Key hex colors are #ffffff (background), #000011 (primary ink/text), and #686868 (muted/secondary text). Typography uses transitional-serif (Kepler3) for headlines and humanist-sans (HelveticaNowText) for body text, all at fontWeight 400. Critical donts: never use rounded corners on any element; never introduce bright or neon accent colors; never use bold font weights; never create dense layouts without generous whitespace; never use sans-serif for headlines; never add drop shadows to surfaces.
```