# The Marginalian · Design system migration spec

> Source: https://www.themarginalian.org  ·  Curated by OpenDesign  ·  en

> This site is a masterclass in text-first editorial design, proving that a single bold color and a focus on typography can create a deeply memorable and premium brand identity.

## 1. Identity DNA

The Marginalian operates as a curated library of ideas, its architecture designed to house and connect disparate fields of human thought. Every structural decision—from the generous white space to the signature yellow accents—serves the singular purpose of elevating text and thought above digital noise.

**One-liner:** A digital magazine dedicated to multidisciplinary storytelling and humanistic inquiry.
**Keywords:** editorial · longform · humanities · intellectual · curation
**Analogy:** A curated library of ideas blending science, philosophy, and art.

## 2. Color

The color system is stark and deliberate: a deep ink provides the foundation, while a vibrant yellow acts as the sole chromatic signal. This palette doesn't decorate; it structures, highlighting key concepts and creating visual hierarchy within the longform experience.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F6F6F6` | card background |
| `--bg-quiet` | `#E6E6E6` | quiet area |
| `--ink` | `#262626` | body text |
| `--ink-soft` | `#333333` | secondary text |
| `--muted` | `#8C8C8C` | placeholder |
| `--accent` | `#FFDB00` | single accent |
| `--line` | `rgba(38, 38, 38, 1)` | divider |

**Color principle:** High-contrast, text-first palette with a signature vibrant yellow for emphasis and structure.

The principle is function over flourish, where color is a tool for emphasis and navigation rather than a field for expression.

## 3. Typography

The typographic voice is that of a well-appointed study, employing a highly legible transitional serif for sustained reading. This humanist foundation is contrasted only by clean, geometric sans-serifs for functional labels, ensuring the primary text remains the unchallenged focus.

- **Display:** didone-serif
- **Body:** transitional-serif
- **Mono:** geometric-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.1 | 700 | -0.5px | masthead logo |
| headline | 36px | 1.2 | 400 | 0px | article title |
| body | 18px | 1.8 | 400 | 0px | article body text |
| caption | 12px | 1.5 | 400 | 1.2px | author attribution |

**Type rules:**
- Body text uses a highly legible transitional serif (ff-tisa-web-pro / Georgia) with generous line-height.
- Headlines often feature bold yellow rectangular highlights.
- Captions and labels use a clean geometric sans-serif with uppercase transformation and tracked spacing.

## 4. Spacing

Vertical rhythm is dictated by the body text's line-height of 1.8, a spacious cadence that transforms dense columns into a gentle, rolling landscape.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 px
- **Rhythm:** A vertical rhythm based on generous line-heights (1.8) for the primary body text.

## 5. Surfaces

Depth is implied through restraint. Surfaces are flat and clean, using subtle shadows only where separation is critical, and borders to quietly delineate content blocks like a book's chapter breaks.

- **Radius:** sm 3px · md 8px · lg 25px · pill 999px
- **Shadows:**
  - rgba(0, 0, 0, 0.2) 0px 4px 10px 0px
- **Borders:** Solid borders in muted grey or primary ink color.

## 6. Layout

The layout is a classic three-column editorial grid, with a wide central column dedicated to uninterrupted prose. Flanking sidebars provide contextual support without breaking the primary reading flow, mimicking the structure of a scholarly volume with marginalia.

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

**Skeleton:** Three-column grid on desktop with a wide main content area, flanked by a sidebar for related content or callouts.

## 7. Motion & Interaction

Motion is a utilitarian courtesy, not a feature. It exists to smooth the user's journey through dense material, with smooth scrolling and subtle fades ensuring focus remains on the content's substance.

- **Durations:** micro 220ms · small 300ms · medium 500ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth scrolling for longform content
  - Subtle fades for image and section transitions.

- **Hover:** Color shift on links and subtle opacity changes on sidebar items.
- **Click:** Standard text selection and navigation.
- **Transition:** A global 'all 0.3s' transition rule is applied to elements.
- **Keyboard:** Standard tab navigation for links and interactive elements.

## 8. Voice & Don'ts

The editorial voice is deeply humanistic and reflective, rejecting corporate jargon in favor of language that engages with complex ideas. Calls to action are framed as invitations to support the ongoing labor of curation and creation.

- **Tone:** Intellectual, humanistic, reflective, and deeply curated.
- **Headline style:** Descriptive and philosophical, often formatted with bold yellow highlights.
- **CTA style:** Supportive and mission-driven, focusing on the value of human labor and patronage.
- **Avoid:** Corporate jargon / Buzzwords / Overly technical language / Aggressive sales pitches

### Don'ts
- ❌ Don't use stark geometric fonts for body text — the screenshot shows a traditional, highly readable serif instead.
- ❌ Don't use a complex multi-column grid for articles — the screenshot shows a single, narrow column for optimal reading flow.
- ❌ Don't use neutral, desaturated palettes — the screenshot prominently features a vibrant, high-chroma yellow.
- ❌ Don't use heavy drop shadows — the screenshot shows flat surfaces with minimal depth.
- ❌ Don't use tight line-heights — the screenshot uses a very generous line-height of 1.8 for body text.
- ❌ Don't use cluttered navigation — the screenshot shows a clean, minimal header with a focus on the brand identity.

The system deliberately avoids modern digital noise: no aggressive sales language, no overly technical UI components, and no visual clutter that would compete with the written word.

## System Prompt (paste into AI tool)

```
The Marginalian is a digital magazine focused on multidisciplinary storytelling, combining science, philosophy, and art with a warm, intellectual tone. The visual system is defined by a signature vibrant yellow (#FFDB00) used for headers and text highlights, paired with a clean white background (#FFFFFF) and high-contrast ink (#262626). Typography relies on humanist and transitional serifs for a refined, book-like feel. The layout is strictly text-first, prioritizing longform readability over flashy visuals. Key constraints: don't use sans-serifs for body text, don't use tight line spacing, and don't use complex, cluttered UI components. The design must feel like a curated library, emphasizing clarity, human-centric content, and intellectual depth over modern digital noise.
```
