# Thefascination · Design system migration spec

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

> This site is a strong example of a modern, curated editorial platform that balances sophisticated typography with a clean, image-driven layout.

## 1. Identity DNA

The design system for The Fascination is built on the principle of a curated gallery, where each element is chosen and placed with the precision of a cultural artifact on display. The identity is one of quiet authority, blending the sophistication of a print magazine with the immediacy of a digital platform.

**One-liner:** A curated digital publication exploring the intersection of fashion, lifestyle, and modern culture.
**Keywords:** Editorial · Curated · Modern · Sophisticated · Cultured
**Analogy:** A high-end digital magazine focused on lifestyle, fashion, and culture.

## 2. Color

The color system establishes a warm, inviting atmosphere through a foundational off-white canvas, ensuring content remains the primary focus. Dark, readable text and vibrant blue and purple accents provide functional and expressive contrast without visual strain.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FAF8EF` | main background |
| `--ink` | `#1A202C` | body text |
| `--ink-soft` | `#797472` | secondary text |
| `--muted` | `#4C40E0` | placeholder |
| `--muted-soft` | `#797472` | weak hint |
| `--accent` | `#2EA3F2` | single accent |
| `--line` | `rgba(0,0,0,0.1)` | divider |

**Color principle:** A warm, off-white background with dark, readable text and vibrant blue and purple accents for emphasis.

The palette is applied with restraint, using accent hues sparingly to guide attention rather than dominate the composition.

## 3. Typography

Typographic voice is defined by a transitional-serif for headlines, imparting editorial authority and a timeless quality. A humanist-sans-serif for body text ensures modern readability, creating a harmonious hierarchy that feels both cultured and accessible.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 96px | 1.0 | 700 | normal | Main Headlines |
| headline | 30px | 1.02 | 700 | normal | Section Headlines |
| body | 18px | 1.7 | 400 | normal | Article Body |
| caption | 14px | 1.71 | 400 | normal | Categories and Metadata |

**Type rules:**
- Use a transitional-serif for display and headlines to add editorial authority.
- Use a humanist-sans for body text to ensure high readability and a modern feel.
- Combine a script font (like Qwitcher Grypen) sparingly for decorative, handwritten-style accents.

## 4. Spacing

Spacing follows a consistent 4px rhythmic grid, creating a structured yet breathable foundation for all layout decisions.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent and rhythmic, based on a 4px grid, creating a structured yet breathable layout.

## 5. Surfaces

Surfaces are rendered as clean, flat planes, prioritizing content clarity over depth effects. Borders are minimal and structural, appearing as fine 1px lines to separate elements without adding visual weight.

- **Radius:** sm 2px · md 6px · lg 12px · pill 999px
- **Shadows:**
  - none
  - 0 0 5px 0 rgba(128, 128, 128, 1)
- **Borders:** Minimal and clean, used primarily for structural separation with 1px lines.

## 6. Layout

The layout skeleton is a single, centered column that channels the reader's focus directly into the content. Generous whitespace and clear section headers provide the breathing room typical of a well-typeset page.

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

**Skeleton:** A clean, centered-column layout with generous whitespace and clear section headers.

## 7. Motion & Interaction

Motion is used as a subtle layer of feedback, not decoration. Transitions are smooth and purposeful, employing consistent cubic-bezier easing for all opacity and transform changes to ensure a cohesive interactive feel.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth opacity and transform transitions for modals and interactive elements.
  - Subtle hover effects on links and buttons.

- **Hover:** Subtle color changes or opacity shifts on interactive elements.
- **Click:** Immediate visual feedback with a slight transform or opacity change.
- **Transition:** Consistent use of 0.2s cubic-bezier(0.4, 0, 0.2, 1) for all transitions.
- **Keyboard:** Standard focus outlines for accessibility.

## 8. Voice & Don'ts

The editorial voice is curated, sophisticated, and carries a subtle playfulness, mirroring the site's content. Headlines are bold and declarative, while calls-to-action are direct and clear.

- **Tone:** Curated, sophisticated, and slightly playful.
- **Headline style:** Bold and declarative, often using a serif font for authority.
- **CTA style:** Direct and clear, using all-caps for emphasis.
- **Avoid:** Avoid overly aggressive or salesy language. / Avoid cluttered layouts or excessive visual noise. / Avoid using more than 2-3 font families. / Avoid overly bright or neon color palettes. / Avoid dense, unbroken blocks of text without imagery. / Avoid complex, multi-layered shadows or gradients.

### Don'ts
- ❌ Don't use a dark mode — the site exclusively uses a warm, light background (#FAF8EF).
- ❌ Don't use a sans-serif for headlines — the site primarily uses a transitional-serif for display text.
- ❌ Don't use a vibrant green as an accent — the site uses a vibrant blue (#2EA3F2) and a muted purple (#4C40E0).
- ❌ Don't use heavy drop shadows — the site favors clean, flat surfaces with minimal or subtle shadows.
- ❌ Don't use a multi-column text layout for articles — the site maintains a single, centered, readable column.
- ❌ Don't use rounded corners on cards — the site uses sharp or very slightly rounded corners (2-6px).

The system deliberately avoids aggressive sales language, excessive visual noise, and any aesthetic that would compromise the calm, readable environment.

## System Prompt (paste into AI tool)

```
This is a curated editorial website focused on lifestyle, fashion, and culture, positioned as a sophisticated digital magazine. The design DNA centers on a warm, off-white background (#FAF8EF) with dark, readable text (#1A202C) and vibrant blue (#2EA3F2) and purple (#4C40E0) accents. Typography pairs a transitional-serif for bold headlines with a humanist-sans for highly readable body text. Key critical donts: never use a dark mode, avoid using sans-serif for display headlines, and do not introduce a vibrant green accent color. The layout is clean, centered, and generous with whitespace, featuring image-forward cards and minimal, functional UI components.
```