# Apartamento · Design system migration spec

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

> Worth including as a prime example of blending classic print magazine sensibilities with bold, modern web UI accents.

## 1. Identity DNA

This system translates the tactile authority of a sophisticated print magazine into a digital framework, anchoring itself in a refined, muted warmth while reserving a single, unapologetic graphic gesture for moments of highest interaction. The analogy is a well-curated apartment: calm, considered spaces punctuated by a single, bold piece of art.

**One-liner:** A lifestyle magazine site blending classic editorial typography with bold, high-contrast graphic accents.
**Keywords:** editorial · lifestyle · magazine · interiors · culture
**Analogy:** A sophisticated print magazine adapted for the web with a bold, distinctive pop.

## 2. Color

The palette operates on a principle of quiet restraint, built upon a foundation of warm off-white that reads less as blank canvas and more as textured paper. A single, vibrant yellow serves not as decoration but as a functional beacon, reserved exclusively for critical interactive overlays.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#F8F4EC` | main background |
| `--ink` | `#000000` | body text |
| `--muted` | `#767676` | placeholder |
| `--accent` | `#FFEE42` | single accent |
| `--line` | `rgba(0,0,0,1)` | divider |

**Color principle:** Muted, warm neutrals dominate the canvas, punctuated by a single, intense high-chroma yellow for critical interactive elements.

The governing rule is discipline: the high-chroma yellow exists only to command action within modals, never as a decorative element on the main canvas.

## 3. Typography

The typographic voice is built on a classic editorial contrast: a high-contrast transitional serif commands the hierarchy of major headlines, evoking the prestige of printed titles. This is paired with a clean, geometric humanist sans-serif for all navigational and body text, its wide letter-spacing contributing to the system's airy, modern clarity.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 42px | 1.1 | 700 | -0.5px | Main section headings and modal titles |
| h2 | 24px | 1.3 | 700 | -0.3px | Article titles |
| body | 16px | 1.5 | 400 | 0.6px | Navigation links and body copy |

**Type rules:**
- Use a high-contrast transitional serif for major headings to evoke print magazine prestige.
- Use a geometric humanist sans-serif for UI elements, navigation, and body text for clean legibility.
- Apply wide letter-spacing to sans-serif text to enhance its modern, airy feel.

## 4. Spacing

Spacing is rhythm, and this system opts for a generous, deliberate cadence.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** generous padding and whitespace to support the editorial layout and let images breathe

## 5. Surfaces

Depth is communicated not through shadow but through flat, clean planes and the strategic use of thin borders. This approach maintains a graphic, print-like quality where separation is achieved through line and color contrast alone.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Borders:** minimal, using thin black borders for inputs and navigation underlines

## 6. Layout

The skeletal structure follows a classic magazine grid, allowing photography to command full-viewport presence in hero sections. Below, a structured column layout organizes editorial cards, ensuring a clean, breathable presentation of content.

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

**Skeleton:** Classic magazine grid with a dominant, full-width hero image and a structured column layout for article cards.

## 7. Motion & Interaction

Motion is a functional courtesy, not a dramatic device. Its philosophy is one of smooth, understated transitions—primarily fades for modals and basic 0.3s state changes—that acknowledge interaction without interrupting the editorial flow.

- **Durations:** micro 150ms · small 300ms · medium 400ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - fade-in modals
  - smooth transitions on interactive elements

- **Hover:** subtle color shifts or underlines on text links
- **Click:** standard pointer cursor on interactive elements
- **Transition:** smooth 0.3s ease-out transitions for basic state changes
- **Keyboard:** standard focus states for accessibility

## 8. Voice & Don'ts

The editorial voice is sophisticated, inviting, and cultured, with headlines that rely on typographic impact rather than loud declarations. It is the tone of a knowledgeable host, offering clear invitations and straightforward calls to action that integrate seamlessly into the narrative.

- **Tone:** sophisticated, inviting, and cultured
- **Headline style:** Direct, bold, and slightly understated, relying on typography for impact.
- **CTA style:** Clear, straightforward, and integrated into the editorial flow.
- **Avoid:** aggressive marketing language / loud, clashing neon palettes / heavy drop shadows / overly playful or rounded UI components

### Don'ts
- ❌ don't use a stark white background — screenshot shows a warm off-white (#F8F4EC) base
- ❌ don't make every button bright yellow — screenshot shows yellow is strictly reserved for the modal overlay
- ❌ don't use a sans-serif for major headings — screenshot shows a high-contrast transitional serif for 'Latest stories'
- ❌ don't use heavily rounded squares for inputs — screenshot shows extreme pill-shape rounding
- ❌ don't clutter the layout with dense UI patterns — screenshot shows a clean, breathing editorial grid
- ❌ don't add complex drop shadows to UI cards — screenshot shows completely flat, shadowless components

What the system deliberately omits is as defining as what it includes: it rejects aggressive marketing language, complex shadows, loud gradients, and the clutter of dense UI patterns in favor of its own calm, curated presence.

## System Prompt (paste into AI tool)

```
Design a sophisticated editorial website inspired by Apartamento Magazine. Use a warm off-white background (#F8F4EC) and black (#000000) ink. Typography should feature a transitional serif for major headlines and a geometric humanist sans-serif for navigation and body text. Use a bold, vibrant yellow (#FFEE42) sparingly as a high-contrast accent for critical overlays like newsletter modals, but keep the rest of the interface restrained and elegant. The layout should be an airy editorial grid with generous whitespace. Never use drop shadows, loud gradients, or aggressive marketing language. Maintain a calm, cultured, and premium feel throughout.
```