Twelve design systems. Copy the file, paste the vibe.

---
version: alpha
name: Paper Editorial
description: "Off-white paper, serif headlines, ink black text and a generous reading measure."
colors:
  background: "#f5f3ee"
  surface: "#ffffff"
  surface-elevated: "#ffffff"
  on-background: "#0d0d0d"
  on-surface-muted: "#5f5b54"
  outline: "#e0dcd3"
  primary: "#0d0d0d"
  primary-strong: "#000000"
  on-primary: "#f5f3ee"
  success: "#2f7a4f"
  warning: "#a06b00"
  danger: "#a02121"
typography:
  display-hero:
    fontFamily: ""Iowan Old Style", Georgia, "Times New Roman", serif"
    fontSize: "4.5rem"
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: "-0.025em"
  headline-lg:
    fontFamily: ""Iowan Old Style", Georgia, "Times New Roman", serif"
    fontSize: "1.5rem"
    fontWeight: 700
    lineHeight: "2rem"
  title-md:
    fontFamily: ""Iowan Old Style", Georgia, "Times New Roman", serif"
    fontSize: "1.125rem"
    fontWeight: 600
    lineHeight: "1.75rem"
  body-md:
    fontFamily: "ui-sans-serif, system-ui, sans-serif"
    fontSize: "0.9375rem"
    fontWeight: 400
    lineHeight: "1.5rem"
  label-sm:
    fontFamily: "ui-sans-serif, system-ui, sans-serif"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: "1rem"
    letterSpacing: "0.06em"
  code-sm:
    fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: "0.875rem"
    fontWeight: 400
    lineHeight: "1.25rem"
rounded:
  control: "2px"
  card: "2px"
  pill: "9999px"
spacing:
  xs: "4px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  "2xl": "32px"
  "3xl": "48px"
  container-padding: "24px"
layout:
  container-max: "1120px"
  header-height: "64px"
  sidebar-expanded: "256px"
motion:
  fast: "150ms"
  normal: "220ms"
  slow: "320ms"
  easing-standard: "cubic-bezier(0.4, 0, 0.2, 1)"
components:
  button-primary:
    backgroundColor: "#0d0d0d"
    textColor: "#f5f3ee"
    rounded: "2px"
    height: "40px"
    padding: "0 16px"
  button-secondary:
    backgroundColor: "transparent"
    textColor: "#0d0d0d"
    border: "1px solid #e0dcd3"
    rounded: "2px"
    height: "40px"
  input:
    backgroundColor: "#ffffff"
    textColor: "#0d0d0d"
    border: "1px solid #e0dcd3"
    rounded: "2px"
    height: "40px"
  card:
    backgroundColor: "#ffffff"
    textColor: "#0d0d0d"
    border: "1px solid #e0dcd3"
    rounded: "2px"
    padding: "24px"
  badge:
    backgroundColor: "#ffffff"
    textColor: "#5f5b54"
    rounded: "9999px"
    padding: "4px 10px"
---

## Overview
Paper Editorial is a reading-first system. The page behaves like a well-set magazine: warm paper background, ink-black serif headlines, a narrow measure for body copy and almost no chrome. Colour is used for meaning only, never for decoration.

## Colors
One warm paper tone, one ink tone, one muted grey. The accent is the ink itself — emphasis comes from weight, size and rules rather than hue.

## Typography
Serif for headlines at large sizes with tight tracking; sans for body at 1.0625rem and 1.7 line height. Body measure caps at 68 characters. Small caps and hairline rules replace coloured labels.

## Layout & Spacing
1120px container, single centred column for prose, 80px vertical rhythm between sections. Images run full-bleed inside the column or break to the margin.

## Elevation & Depth
Effectively flat. Separation is done with 1px hairline rules and whitespace. No shadows anywhere except modals.

## Shapes
Near-square: 2px radius, straight image corners, no pills. Buttons are rectangles with a 1px ink border.

## Components
Buttons are ink outlines that invert on hover. Inputs are underlined rather than boxed. Cards are borderless blocks separated by rules. Pull quotes use an oversized serif with a left rule.

## Do's and Don'ts
- Do protect the reading measure
- Do use hairline rules instead of borders and boxes
- Do let typography carry all hierarchy
- Do keep the palette to paper, ink and one grey

- Don't add coloured buttons or badges
- Don't round corners
- Don't compress line height below 1.6 for body
- Don't add gradients or shadows