---
version: alpha
name: Readymag
description: Clean white editorial canvas for design-forward website builders — proprietary grotesque display type with aggressive negative tracking, a single electric orange-red CTA, pill geometry at every scale, and a portfolio of multi-colored "Sign up" buttons that treat brand color as a per-project expression.

colors:
  # Surface / canvas
  background: "#ffffff"
  surface: "#f4f4f4"            # opaque approx of rgba(244,244,244,0.96) nav — Google format requires hex

  # Ink / text
  ink: "#282828"                 # primary text — near-black with warmth
  ink-secondary: "#808080"       # muted labels, captions
  on-primary: "#ffffff"          # text on colored CTAs

  # Brand accent — orange-red CTA
  primary: "#ec520b"             # "Try Readymag" / "Sign up" button fill
  primary-hover: "#d94400"       # opaque approx of hover state — darker burn
  primary-purple: "#8800ff"      # electric violet — alternate CTA used on select campaigns
  primary-purple-hover: "#a300ff"

  # Borders / chrome
  border: "#c7c7c7"              # hairline dividers, card edges
  link-default: "#0000ee"        # browser-default hyperlink blue — used sparingly

  # Shadow tints
  shadow-soft: "#e0e0e0"         # opaque approx of rgba(0,0,0,0.07) — card lift

typography:
  display-hero:
    fontFamily: "Graphik LC, Graphik, system-ui, -apple-system, sans-serif"
    fontSize: 80px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: -4.2px
  display:
    fontFamily: "Graphik LC, Graphik, system-ui, -apple-system, sans-serif"
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: -2px
  heading-section:
    fontFamily: "Graphik LC, Graphik, system-ui, -apple-system, sans-serif"
    fontSize: 30px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: -0.8px
  body-large:
    fontFamily: "Graphik LC, Graphik, system-ui, -apple-system, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.83
    letterSpacing: -0.9px
  body:
    fontFamily: "Graphik LC, Graphik, system-ui, -apple-system, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: -0.04px
  nav-link:
    fontFamily: "Graphik LC, Graphik, system-ui, -apple-system, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0px
  button-ui:
    fontFamily: "Graphik LC, Graphik, system-ui, -apple-system, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0px
  caption:
    fontFamily: "Graphik LC, Graphik, system-ui, -apple-system, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
    letterSpacing: -0.2px

spacing:
  xs: 6px
  sm: 12px
  md: 18px
  lg: 24px
  xl: 45px
  2xl: 64px
  3xl: 96px

rounded:
  none: 0px
  sm: 6px
  md: 12px
  lg: 20px
  pill: 200px
  full: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px

  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
  button-secondary-hover:
    backgroundColor: "{colors.border}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px

  button-ghost:
    backgroundColor: "#ffffff"       # transparent — using white surface as base
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 0px 24px
  button-ghost-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 0px 24px

  card:
    backgroundColor: "{colors.background}"
    rounded: "{rounded.md}"
    padding: 24px
  card-elevated:
    backgroundColor: "{colors.background}"
    rounded: "{rounded.lg}"
    padding: 32px

  nav:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.full}"
    padding: 0px 24px

  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 4px 12px

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 12px 0px
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 12px 0px
---

# Readymag Design System

## Overview

Readymag arrives at its homepage design the way a careful magazine art director might lay out a cover: maximum white space, a single dominant typeface in aggressive negative tracking, and exactly one accent color that punches through the quiet with the force of a carefully composed image caption. The {colors.background} canvas is pure and complete — not warm, not cool, simply open. Against it, {colors.ink} text at weight 400 reads with the purposeful restraint of editorial body copy, never raising its voice. Everything here defers to the work on display: a mosaic of user-created websites cycling through the hero — bold black typographic experiments, lush photography, playful grids — that silently argues Readymag's case better than any marketing copy could.

The {colors.primary} button is the system's one concession to persuasion. A hot orange-red, the exact shade of a freshly lit neon sign, it surfaces only at the most critical decision points: "Try Readymag," "Sign up," "Get started." The color doesn't appear anywhere else in the chrome. This economy gives it a genuine signal-to-noise ratio that most SaaS products squander by overusing their brand color. The pill geometry — 200px border-radius on every button — rounds off what might otherwise feel like urgency into something approachable, almost playful. On dedicated campaign pages a second CTA, a charged electric violet {colors.primary-purple}, rotates into that same pill form, suggesting brand expression is something Readymag deliberately leaves open.

Typography anchors the whole system in a single self-hosted grotesque — Graphik LC — rendered at extreme negative letter-spacing at display scale (−4.2px at 80px), easing to subtler tracking as size decreases. Weight stays at 400 across nearly every size, from 80px hero text to 14px captions. The effect is a studied evenness: no moment of typographic loudness, no bolded summary line, no weight hierarchy to lean on. Visual hierarchy is engineered entirely through scale and spacing, a distinctly editorial discipline applied to a product interface.

**Key Characteristics:**
- {colors.background} pure white canvas — no off-white tint, no warm undertone; the design relies on content imagery for visual interest
- {colors.ink} near-black at #282828 rather than true black — a warmth that softens the editorial rigor just enough
- {colors.primary} orange-red CTA appears on exactly one button per viewport; all secondary actions remain in {colors.surface} or text-only
- Graphik LC at weight 400 throughout — hierarchy lives in scale, not weight variation
- Extreme negative letter-spacing (−4.2px at 80px display) — a hallmark of early-2020s grotesque display work
- {rounded.pill} at 200px shapes every button, large and small — pill geometry as brand signature
- {rounded.md} at 12px on cards and panels — tighter radius that reads architectural, not bubbly
- Mosaic hero layout: live user-built websites tiled to fill the viewport — the product as its own best portfolio
- Flat elevation model: no drop shadows in the main chrome; depth is structural (whitespace, scale) not decorative
- Breakpoint system at 478 → 601 → 1280 → 1510px — wider desktop pivot than typical SaaS (1510px target)
- Gallery/showcase navigation dominant: "Examples" and "Templates" carry equal weight to "Pricing" in the top nav
- {colors.primary-purple} electric violet surfaces as an alternate CTA on campaign and feature announcement pages

## Colors

### Primary

- **White** (`{colors.background}`): The total canvas — pure, unmodulated white. Every element lives against this field; no warm undertone, no tint.
- **Near-Black** (`{colors.ink}`): Primary text color at #282828 — warm enough to read as editorial rather than technical.

### Brand Accent

- **Orange-Red** (`{colors.primary}`): The system's single brand CTA color. Applied exclusively to primary call-to-action buttons. Its heat is amplified by appearing only once per viewport — overuse would collapse its signal.
- **Electric Violet** (`{colors.primary-purple}`): A secondary accent used on campaign and feature-launch pages as an alternate CTA. The {colors.primary-hover} and {colors.primary-purple-hover} darken on interaction without shifting hue.

### Text States

- **Muted Gray** (`{colors.ink-secondary}`): Caption text, nav metadata, supporting labels at reduced contrast.
- **Surface Gray** (`{colors.surface}`): Nav background and secondary button fills — barely off-white, distinguishable only by a thin layer of context.

### Borders and Shadows

- **Border** (`{colors.border}`): Hairline dividers and card edges. Low contrast, barely present — the system prefers whitespace over explicit boundary markers.
- **Shadow Soft** (`{colors.shadow-soft}`): Opaque approximation of a very subtle card lift (original rgba(0,0,0,0.07)). Not used on main marketing surfaces — reserved for embedded demo panels.

## Typography

### Font Family

- **Primary**: `Graphik LC` (self-hosted woff2), with fallbacks: `Graphik, system-ui, -apple-system, sans-serif`
- Graphik LC is a condensed-metrics variant of Commercial Type's Graphik — narrower than standard Graphik, designed for tightly-tracked display work
- **Monospace**: Not present — the system uses no monospace text on the marketing site

### Hierarchy

The complete type scale is declared in the `typography:` token block above.

| Token | Use |
|---|---|
| `display-hero` | Hero headline ("Design and launch outstanding websites") — 80px, −4.2px tracking |
| `display` | Section-level headings and feature callouts — 40px, −2px tracking |
| `heading-section` | Sub-section titles, testimonial attribution — 30px, −0.8px tracking |
| `body-large` | Feature descriptions, expanded copy blocks — 18px, −0.9px tracking |
| `body` | Standard body copy and nav items — 16px |
| `nav-link` | Navigation links — 16px, 0 tracking |
| `button-ui` | All button labels — 16px weight 400, no tracking |
| `caption` | Image captions, metadata, badge labels — 14px |

### Principles

- Weight 400 used exclusively — no bold, no medium, no semibold in the main site. Hierarchy is scale-only.
- Negative letter-spacing scales with font size: tighter at large, neutral at small. At 80px the −4.2px tracking creates a nearly condensed optical feel.
- Graphik LC's inherent narrowness compounds with the tracking to produce very dense large text — optically correct at headline scale without feeling compressed at body size.
- No secondary typeface. The system is typographically monolithic — one family, one weight, one axis of variation (size).
- Line height at display scale is essentially 1.0 or below — 0.50 at the extreme hero level, tightening the leading to match the tracking.

## Layout

### Spacing System

The complete spacing scale is in the `spacing:` token block above. Base unit: 6px — a tighter-than-usual base (most systems use 4px or 8px) that reflects Readymag's European editorial sensibility.

The spacing personality is generous at macro scale and tight at micro. Component-level gaps use 6–18px; section padding runs to 45–96px. The effect is a consistent sense of breathing room between content sections without padding between inline elements.

### Grid & Container

- Max content width: 1510px — unusually wide desktop target, suited to a tool that produces wide-canvas websites
- Primary layout: centered single column with constrained max-width for body copy, unlocked for full-bleed hero mosaics
- Gallery hero: fluid CSS grid, tile-based layout that fills viewport width at every breakpoint

### Whitespace Philosophy

- Whitespace is the primary compositional tool — not decoration, but structure. Most sections are separated by vertical space alone, no dividers.
- Padding is asymmetric by intent: more top than bottom on section transitions, following print editorial convention.
- The hero mosaic is the exception to the whitespace rule: tiles fill wall-to-wall, creating visual density that frames the spacious landing copy below.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Main marketing chrome, navigation, text sections |
| Subtle (Level 1) | `box-shadow: 0 2px 8px {colors.shadow-soft}` | Embedded demo panels, screenshot frames |
| Card (Level 2) | `box-shadow: 0 4px 16px {colors.shadow-soft}` | Hover states on gallery tiles |
| Elevated (Level 3) | Not used | — |
| Dialog (Level 4+) | `0.5s ease` modal transition | Cookie dialog, modal overlay |
| Focus Ring | `outline: 3px solid {colors.ink}` | Keyboard navigation |

**Shadow Philosophy**: Readymag's elevation system is practically invisible in normal use. Shadows exist as optional layer cues for interactive states and embedded previews, not as a structural tool. The product demonstrates trust in spatial layout — if the grid says "this is a card," no shadow is needed to confirm it. The motion system adds exactly one transition signature: a 0.5s ease transform/opacity for modals, measured and unshowy.

## Shapes

The complete radius scale is in the `rounded:` token block above. The system uses:

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Text inputs, inline images at edge |
| `sm` | 6px | Small interactive chips, tag-like elements |
| `md` | 12px | Cards, panels, thumbnail frames, gallery tiles |
| `lg` | 20px | Larger panel containers, featured image frames |
| `pill` | 200px | All buttons (primary, secondary, ghost, nav) |
| `full` | 9999px | Avatar circles, small badge counts |

Two strong poles define the shape language: the absolute square (`{rounded.none}`) for structural content containers, and the extreme pill (`{rounded.pill}` at 200px) for every interactive element. There is no "medium" button — no 8px or 16px compromise. Buttons are pills or nothing. This binary discipline creates a clear semantic signal: if it's rounded like a pill, it's tappable.

## Components

The complete component spec lives in the `components:` token block above.

### Button Variants

- **`button-primary`** — {colors.primary} orange-red fill, white text, 200px pill radius. Used only for the single primary CTA per section ("Try Readymag," "Sign up"). The fill + pill combination makes it immediately scannable in a white canvas.
- **`button-secondary`** — {colors.surface} near-white fill, {colors.ink} text, same pill geometry. Nav items like "Pricing" and "Examples" use this treatment — accessible but visually de-emphasized.
- **`button-ghost`** — Text-only inside pill bounds, white base, {colors.ink} label. Used for "Learn" and secondary nav items where presence is needed without weight.

### Cards

Gallery tiles and portfolio preview cards use `{rounded.md}` (12px) for a clean architectural frame. Hover states introduce a subtle elevation via `{colors.shadow-soft}`. Cards are content-first — no header bar, no footer metadata strip — the image fills the tile completely.

### Inputs

Form inputs use `{rounded.none}` — flat bottom border only, no box enclosure. This echoes editorial form design where the input is flush with the page rather than boxed into its own container. Focus state brings `{colors.background}` fill with no added outline — the lack of a focus ring is a notable accessibility gap (see Do's and Don'ts).

### Navigation

The global nav is a {colors.surface} pill container — a floating rounded bar that sits above the hero mosaic. Items are `{typography.nav-link}` at 16px weight 400 with 0 tracking. The "Sign up" CTA button inside the nav adopts `{colors.primary}` fill even at small pill scale.

### Badges

Category and template-type labels use `{rounded.full}` with `{colors.surface}` fill and `{colors.ink}` text. Typography is `{typography.caption}` — small, quiet, informational.

## Do's and Don'ts

### Do

- Use `{colors.primary}` exclusively for the single primary CTA in any given section — one orange-red button per viewport area preserves its signal power
- Set display type at weight 400 with `{typography.display-hero}` tracking — the system's strength lives in tight-tracked lightness, not bold reassurance
- Maintain `{rounded.pill}` on all interactive controls — the binary pill-vs-square distinction is the system's clearest component signal
- Use `{colors.ink}` (#282828) rather than true black for body text — the warmth prevents the white canvas from feeling clinical
- Allow `{colors.background}` to breathe — rely on vertical whitespace alone to separate sections; resist the temptation to add dividers or background color changes
- Keep the typography stack to Graphik LC at a single weight — introduce variation only via size and letter-spacing per the `typography:` token scale
- Use the `{spacing.xl}` (45px) unit as the default vertical section gap — it creates the distinctive spaciousness of the Readymag editorial grid
- Reserve `{colors.primary-purple}` for campaign or feature-announcement contexts only, not recurring UI chrome

### Don't

- Don't introduce a bold or semibold weight for emphasis — use `{typography.display}` or `{typography.heading-section}` scale difference instead
- Don't use `{colors.primary}` for decorative elements, icon fills, or hover states outside of primary CTAs — it will erode the button's unique visual authority
- Don't round cards or images with `{rounded.pill}` — that geometry is reserved for interactive controls exclusively
- Don't add drop shadows to marketing sections — the flat model is intentional; shadow on text blocks reads as design-tool amateur work
- Don't introduce a secondary typeface — the system's typographic coherence depends on Graphik LC as the sole family
- Don't override `{rounded.none}` on text inputs with a box border radius — the flat open-ended input form is an intentional editorial choice
- Don't set letter-spacing to 0 on display-scale text — the negative tracking is the signature; removing it makes large type feel bloated
- Don't center-align body copy sections — the system is rigidly left-aligned; centered body text undermines the editorial grid

---

## Responsive Behavior

### Breakpoints

| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <478px | Single-column layout, hero mosaic collapses to 1-up tiles, nav collapses to hamburger |
| Mobile | 478–601px | Nav pill hidden, primary CTA remains visible, gallery 2-up |
| Tablet | 601–1280px | Gallery 3-up grid, section headings scale down from `{typography.display-hero}` to `{typography.display}` |
| Desktop | 1280–1510px | Full nav exposed, gallery fills available width, hero mosaic fully visible |
| Large Desktop | >1510px | Content max-width constrains at 1510px; canvas extends but content centers |

### Touch Targets

Pill buttons at 200px radius and 40–48px minimum height provide comfortable touch targets. Nav items are padded to 45px height minimum. Gallery tiles have large tap areas (the full tile surface). Cookie dialog buttons use 40px height with 16px padding on each side.

### Collapsing Strategy

The navigation pill collapses to a hamburger icon at tablet breakpoint (601px). The hero mosaic switches from a multi-column tile fill to a stacked 1-up preview at mobile. Section headings step down one size level (from 80px to 40px) rather than using viewport units. The single-column reading flow dominates below 601px with {spacing.md} (18px) horizontal padding.

### Image Behavior

Gallery tile images fill their containers at all sizes using `object-fit: cover`. Hero mosaic tiles are responsive grid cells that redistribute to fewer columns as the viewport narrows. Template preview thumbnails adopt `{rounded.md}` (12px) corners at all breakpoints.

---

## Agent Prompt Guide

### Quick Color Reference

- Background: `{colors.background}`
- Text: `{colors.ink}`
- Brand accent: `{colors.primary}`
- Secondary text: `{colors.ink-secondary}`
- Border: `{colors.border}`
- CTA: `{colors.primary}`

### Example Component Prompts

- "Build a Readymag-style hero section: {colors.background} white canvas, `{typography.display-hero}` (Graphik LC 80px weight 400 letter-spacing −4.2px) headline in {colors.ink}, one `{components.button-primary}` (orange-red {colors.primary}, 200px border-radius, 12px 24px padding) CTA. No shadows, no gradients. Below the headline, tile a 4-column grid of screenshot cards using `{rounded.md}`."
- "Create a Readymag navigation pill: `{colors.surface}` background, `{rounded.full}` border-radius, five `{components.button-ghost}` nav items at `{typography.nav-link}` and one `{components.button-primary}` 'Sign up' at the right edge. Floating bar, no border, subtle `{colors.shadow-soft}` lift."
- "Build a Readymag feature card: `{colors.background}` card with `{rounded.md}`, `{typography.display}` heading in `{colors.ink}` at 40px −2px tracking, `{typography.body}` description at 16px, one `{components.button-secondary}` at bottom-left. Flat — no shadow. `{spacing.lg}` internal padding."
- "Design a Readymag gallery tile grid: 12px `{rounded.md}` on each tile, cover image fills tile, no caption overlay, no inner shadow. On hover, apply `box-shadow: 0 4px 16px {colors.shadow-soft}` and a 0.2s ease scale(1.01) transform. Gap between tiles: `{spacing.sm}`."
- "Create a Readymag-style text input: flat open field, `{rounded.none}` (no box border-radius), `{typography.body}` placeholder in `{colors.ink-secondary}`, 1px solid `{colors.border}` bottom border only. On focus, background becomes `{colors.background}` — no added outline. `{typography.body}` typed text in `{colors.ink}`."
- "Build a Readymag section break: `{spacing.2xl}` (64px) vertical space between sections, no HR divider, no background color change. Section heading uses `{typography.heading-section}` Graphik LC 30px −0.8px tracking. Left-aligned flush with body column."

### Iteration Guide

1. Start with `{colors.background}` white and `{colors.ink}` text — establish the blank canvas before adding any other color
2. Place exactly one `{components.button-primary}` in orange-red per major section — treat it as a scarce resource
3. Set all display text to `{typography.display-hero}` weight 400 with the matching letter-spacing token — do not increase weight for emphasis
4. Build all interactive controls as `{rounded.pill}` (200px) — reserve `{rounded.md}` (12px) for passive containers like cards and image frames
5. Rely on `{spacing.xl}` (45px) and `{spacing.2xl}` (64px) vertical rhythm for section separation — no dividers, no background color bands
6. Keep shadows invisible in the static state — add `{colors.shadow-soft}` lift only on hover/active
7. Introduce `{colors.primary-purple}` only for campaign contexts, never alongside `{colors.primary}` in the same viewport area

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Readymag. Brand names and trademarks belong to their respective owners.