---
name: Substack
description: "This site is worth including as a prime example of a modern, content-first publishing platform that balances editorial aesthetics with clear, functional UI."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#363737"
  secondary: "#777777"
  tertiary: "#FF6719"
  neutral: "#999999"
  bg-soft: "#F4F4F4"
  bg-quiet: "#EEEEEE"
  muted-soft: "#C8C8C8"
  line: "rgba(0,0,0,0.1)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 40px
    lineHeight: 1.1
    fontWeight: 600
    letterSpacing: "-0.5px"
  h1:
    fontFamily: humanist-sans
    fontSize: 24px
    lineHeight: 1.2
    fontWeight: 600
    letterSpacing: "0px"
  h2:
    fontFamily: humanist-sans
    fontSize: 20px
    lineHeight: 1.3
    fontWeight: 600
    letterSpacing: "0px"
  body:
    fontFamily: humanist-sans
    fontSize: 15px
    lineHeight: 1.35
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: humanist-sans
    fontSize: 13px
    lineHeight: 1.3
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 9999px

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

---

## Overview

A clean, content-first publishing platform with a bold orange accent and a focus on readability.

*A clean, editorial-focused platform that feels like a modern, digital magazine or a curated feed for independent writers and readers.*

## Colors

White background with high-contrast ink for readability; a single, vibrant orange accent provides energy and call-to-action focus.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#363737`)** — uses `ink` token
- **Secondary text (`#777777`)** — uses `ink-soft` token
- **Accent (`#FF6719`)** — uses `accent` token
- **Muted (`#999999`)** — uses `muted` token
- **Borders (`rgba(0,0,0,0.1)`)** — uses `line` token

## Typography

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

- Use the serif font family for prominent headlines and editorial display.
- Use the system sans-serif stack for body text, navigation, and UI elements.
- Maintain clear hierarchy through size and weight differences between titles and body.

## Layout

Fixed left sidebar navigation (desktop), central feed column, right sidebar for login/search (desktop); single-column stack with bottom navigation (mobile).

*Rhythm:* Consistent 8px-based vertical rhythm for spacing between elements, with 4px increments for tighter gaps.

## Elevation & Depth

- 0 1px 0 0 rgba(255,255,255,0.2) inset, 0 -1px 0 0 rgba(0,0,0,0.1) inset
- 0 2px 4px -1px rgba(0,0,0,0.06), 0 4px 6px -1px rgba(0,0,0,0.1)
- Borders: 1px solid rgba(0,0,0,0.1)

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 9999px

## Components

- **button:** Solid orange for primary CTAs ('Create', 'Start your Substack'); secondary buttons use white background with a subtle border or light grey fill.
- **card:** Feed items are separated by thin borders, featuring an author avatar, metadata, text content, media, and an action bar (like, comment, share).
- **chip:** Minimal use; the 'Subscribe' text acts as a secondary action link.
- **input:** Search fields use a clean white background with a subtle border and rounded corners.
- **hero:** A large, dark teal banner with a serif headline and two distinct CTA options (solid orange button vs. white text link).

## Do's and Don'ts

**Don't:**
- Don't use a dark theme — the screenshot shows a predominantly white background with light grey accents.
- Don't use multiple accent colors — the screenshot shows orange as the single, dominant high-chroma color.
- Don't use rounded cards for the main feed — the screenshot shows items separated by simple horizontal lines.
- Don't use a sans-serif font for major headlines — the screenshot shows serif fonts (like Cahuenga/Spectral) for display text.
- Don't use heavy, drop shadows on cards — the screenshot shows very subtle or no shadows on feed items.
- Don't use a dense, multi-column grid for content — the screenshot shows a single, focused column for the main feed.
- Don't use decorative elements or illustrations in the UI — the screenshot shows a clean, functional layout with icons and photos only.

---

## System Prompt (paste into AI agent)

```
This design is for a publishing and newsletter platform. It prioritizes readability and content discovery with a clean, white-background layout. The primary accent is a vibrant orange (#FF6719) used for CTAs and branding. Typography uses a mix of a serif font (like Cahuenga or Spectral) for display headlines and a system sans-serif stack for body text. The layout features a fixed sidebar (desktop), a central feed, and a right sidebar for login, transitioning to a single-column mobile layout with bottom navigation. Critical don'ts: don't use dark mode, don't introduce multiple accent colors, and don't use complex animations.
```