---
name: The Marginalian
description: "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."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#262626"
  secondary: "#333333"
  tertiary: "#FFDB00"
  neutral: "#8C8C8C"
  bg-soft: "#F6F6F6"
  bg-quiet: "#E6E6E6"
  line: "rgba(38, 38, 38, 1)"

typography:
  display:
    fontFamily: didone-serif
    fontSize: 56px
    lineHeight: 1.1
    fontWeight: 700
    letterSpacing: "-0.5px"
  headline:
    fontFamily: transitional-serif
    fontSize: 36px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "0px"
  body:
    fontFamily: transitional-serif
    fontSize: 18px
    lineHeight: 1.8
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: transitional-serif
    fontSize: 12px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "1.2px"

rounded:
  sm: 3px
  md: 8px
  lg: 25px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px

---

## Overview

A digital magazine dedicated to multidisciplinary storytelling and humanistic inquiry.

*A curated library of ideas blending science, philosophy, and art.*

## Colors

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

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#262626`)** — uses `ink` token
- **Secondary text (`#333333`)** — uses `ink-soft` token
- **Accent (`#FFDB00`)** — uses `accent` token
- **Muted (`#8C8C8C`)** — uses `muted` token
- **Borders (`rgba(38, 38, 38, 1)`)** — uses `line` token

## Typography

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

- 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.

## Layout

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

*Rhythm:* A vertical rhythm based on generous line-heights (1.8) for the primary body text.

## Elevation & Depth

- rgba(0, 0, 0, 0.2) 0px 4px 10px 0px
- Borders: Solid borders in muted grey or primary ink color.

## Shapes

- `sm`: 3px
- `md`: 8px
- `lg`: 25px
- `pill`: 999px

## Components

- **button:** Text-based links or rounded pills, often using uppercase tracking.
- **card:** Text-heavy sidebar cards with thin top/bottom borders.
- **chip:** No standard chips; emphasis is created through bold yellow background highlights.
- **input:** Minimalist text inputs with subtle bottom borders.
- **hero:** Full-width yellow header with a large, stylized black logotype.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```