# Readymag — Marketing Site Design Spec

> Source: readymag.com (live DOM, computed styles), 2026-08-01 (desktop 1512px).
> Coverage: homepage (nav, hero, feature sections, footer). No login captured — editor is `needs-dashboard`. All stylesheets same-origin (`sheetsBlocked: 0`). No `:root` design tokens (the page is a Readymag-published fixed canvas, styles are per-element). Focus: not captured — the matcher found no focus rules and native inputs are essentially absent on the pixel-positioned canvas; recorded as `not captured` for that reason.
> Reality check: hint accurate — an "editorial site-builder, expressive type-driven showcase". Confirmed: a custom display face at weight 400 with dramatic negative tracking (-2px at 40px, -4.2px at 80px), a black/white base broken by full-bleed vivid colour sections (orange #ff5000, yellow #ffcc00, purple #8800ff, dark green #00362b), classic web-blue links, and — being a fixed-canvas builder — essentially ONE responsive breakpoint.

## 1. Visual Theme & Atmosphere

Readymag sells a site builder by being an outstanding site itself: expressive, editorial and maximalist, driven by big typography and full-bleed blocks of vivid colour rather than restrained SaaS chrome. The base is black and white, but the page marches through saturated full-width sections — orange, yellow, purple, dark green — each a different mood, with slow ambient animations looping inside them. The headline face is a custom typeface set light (weight 400) at large sizes with dramatic negative tracking, so the type feels art-directed, and links use the deliberately retro classic-web blue (#0000ee) and purple. Because pages are pixel-positioned canvases, structure comes from a fine 1px #d6d6d6 grid and rounded 12px cards, never shadows. Feels: expressive, editorial, maximalist, art-directed.

## 2. Color Palette & Roles

### Text
| Token | Hex | Role / usage |
|---|---|---|
| white | `#ffffff` | Text on dark / colour sections (dominant) |
| ink | `#282828` | Primary text on light |
| ink-deep | `#141414` | Darkest text, dark section fill |
| grey | `#808080` | Secondary text |
| muted | `#444444` | UI / control text (nav, consent) |

### Links & vivid accents
| Token | Hex | Role / usage |
|---|---|---|
| web-blue | `#0000ee` | Classic-web link colour (retro on purpose) |
| blue | `#1032cf` | Secondary link / accent blue |
| purple | `#8800ff` | Link / visited, accent |
| orange | `#ff5000` | Full-bleed section fill |
| orange-cta | `#ec520b` | Primary "Sign up" button + hero hover colour |
| yellow | `#ffcc00` | Full-bleed section fill |
| amber | `#ffa200` | Accent / highlight |
| green-deep | `#00362b` | Full-bleed dark-green section fill |

### Surfaces & borders
| Token | Hex | Role / usage |
|---|---|---|
| black | `#000000` | Page canvas (dark base) |
| light-grey | `#d6d6d6` | 1px hairline grid (dominant border, 615×) |
| grey-100 | `#e7e7e7` | Light section fill |

Rule: base is black/white; the full-bleed section colours (`#ff5000`, `#ffcc00`, `#8800ff`, `#00362b`) rotate mood section-to-section. Primary CTA is orange `#ec520b`; links stay classic-web blue/purple.

## 3. Typography Rules

- Display/body face: **custom_37866** — a Readymag-hosted custom typeface used for headlines and body at weight 400. UI chrome uses **Graphik** and the `-apple-system` stack. **Preview substitutes Space Grotesk for the expressive display and Inter for UI/body** (the custom face is unidentified; the swap is noted so the spec never implies the real face). A single Google Fonts link loads both.
- Body: 14px / 20px / 400 / `#282828`, tracking -0.2px.

| Role | Family | Size/Line | Weight | Tracking |
|---|---|---|---|---|
| Hero (largest) | custom_37866 | 80 / 40 | 400 | -4.2px |
| Display (h1) | custom_37866 | 40 / 40 | 400 | -2px |
| Section (h2) | custom_37866 | 30 / 30 | 400 | -0.8px |
| Body (p) | custom_37866 | 14 / 20 | 400 | -0.2px |
| Nav | -apple-system | 16 | 400 | normal |
| Button / consent | -apple-system | 12 | 500 | -0.08px |

Pattern: the expressive display is light (400), never bold, and leans on ever-tighter negative tracking as it grows (-2px at 40px → -4.2px at 80px). UI chrome is a plain system/Graphik sans, kept quiet so the display carries the art direction.

## 4. Component Stylings

### Buttons
- **Primary "Sign up"**: bg `#ec520b` orange, text `#ffffff`, radius `200px` (full pill), h 40px, padding `0 24px`, system 16px.
- **Secondary nav pill**: bg `rgba(244,244,244,.96)` light, text `#000000`, radius `200px`, h 40px, padding `0 24px`.
- **Consent "Allow all"**: bg `#ffffff`, text `#444444`, radius `40px`, h 28px, 12px/500.
- **Nav link**: transparent, text `#282828` (or `#ffffff` on colour), 16px, no radius.

| Component | Rest | Hover | Focus | Active | Disabled |
|---|---|---|---|---|---|
| Primary pill | `#ec520b` / white, 200px | text/colour → `#ec520b` on hero links | not captured | — | — |
| Nav link | `#282828` / `#ffffff` | colour → `#000000` | not captured | — | — |

### Inputs
- Native inputs are essentially absent on the fixed-canvas page (the extractor found none); form controls in the editor are behind login. Where fields appear they follow the 1px `#d6d6d6` hairline + 12px radius card style.

### Cards / panels
- Rounded blocks: radius `12px` (dominant, 269×), also `10px` / `6px` / `20px` / `16px`, pills at `60px` / `200px`, circles `100%`. Border `1px #d6d6d6` (the dominant grid line, 615×). **No shadows at all** — the shadow census is empty.

### Nav
- Top bar with the Readymag wordmark, plain 16px nav links, a light secondary pill and the orange "Sign up" pill. Inverts to white text over the dark/colour sections.

## 5. Layout Principles

- Full-bleed sections stacked vertically, each often a different saturated colour, with big art-directed type and imagery positioned within.
- Structure is a fine 1px `#d6d6d6` grid; rounded 12px cards hold content.
- Because Readymag renders pixel-positioned canvases, layouts are absolutely placed rather than flowed — the marketing site mirrors that fixed-canvas feel.
- Generous scale; the hero uses an 80px expressive word ("Hello!") with -4.2px tracking.

## 6. Depth & Elevation

- Radius scale: `12px` (dominant card), `6/10/16/20/32px`, pills at `60px` / `200px`, circles `100%`.
- **No shadows** — depth is refused entirely; the census returned none. Elevation is implied by full-bleed colour changes and the 1px grid, not by shadow.
- Borders: `1px #d6d6d6` hairlines everywhere (615×), plus occasional `1.5px #141414` / `1.5px #ffffff`.

## 7. Motion

| Property | Duration | Easing | Applies to |
|---|---|---|---|
| opacity | 0.2s | ease | House transition (dominant, 82×) |
| background-color | 0.4s | ease | Section / hover fills |
| opacity | 0.3s / 0.5s | ease | Reveals |
| filter | 0.5s | ease | Image / hover effects |
| transform | 0.3s | ease | Small movements |

- House transition: `opacity 0.2s ease`. Easings are simple (`ease`, `linear`, `ease-in-out`).
- Named `@keyframes`: `animation_1_1` … `animation_7_1` — slow ambient loops (`30-50s ease infinite`) that keep the showcase elements gently moving. These are Readymag's own generated animation names.
- No animation library detected (Readymag's own runtime). No `prefers-reduced-motion` block was found (`reducedMotionBlocks: 0`).

## 8. Backgrounds, Effects & WebGL

- Atmosphere comes from full-bleed saturated colour sections + heavy imagery: **68 raster layers**, **1 `<video>`**, and **1 2D `<canvas>`** (419×401, a live design/animation element). No WebGL/Three.js, no grain, no `backdrop-filter`.
- Gradients are used sparingly (5) — mostly white-to-transparent edge fades over images, not decorative colour washes.

## 9. Do's and Don'ts

### Do
- Drive the page with big expressive type at weight 400 and dramatic negative tracking (-2px at 40px, up to -4.2px at 80px).
- Break a black/white base with full-bleed saturated colour sections (`#ff5000`, `#ffcc00`, `#8800ff`, `#00362b`), one mood per section.
- Use the orange `#ec520b` full-pill (radius 200px) for the primary CTA and light pills for secondary nav.
- Keep links classic-web blue `#0000ee` / purple `#8800ff` — the retro link colour is deliberate.
- Draw structure with a fine 1px `#d6d6d6` grid and 12px rounded cards; no shadows.
- Add slow, long-loop ambient motion (30-50s) rather than snappy micro-interactions.

### Don't
- Don't use bold display weights — the expressive face stays at 400.
- Don't replace hairline structure with shadows; there are none.
- Don't mute the section colours — they are meant to be saturated and to rotate.
- Don't make the UI chrome expressive; keep nav/controls a quiet system sans so the display type leads.

## 10. Responsive Behavior

- **Essentially one breakpoint: `max-width: 478px`.** Readymag publishes pixel-positioned fixed canvases, so pages carry a desktop layout + a single mobile variant rather than a fluid breakpoint ladder — a genuine finding, not a gap.
- No dark theme media block (`darkSchemeBlocks: 0`, no toggle) — the "dark" is authored full-bleed sections, not a colour-scheme; 0 container queries.

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#000000` / `#ffffff` · Text `#282828` · Muted `#808080` · Border `#d6d6d6` · CTA `#ec520b` · Links `#0000ee`
- Fonts: custom display (Space Grotesk stand-in) 400 + system/Graphik UI (Inter) · Body 14/20 · Radius: 12px card / 200px pill · Control height: 40px
- Focus: not captured · Primary hover: colour → `#ec520b` · Section fills: `#ff5000` / `#ffcc00` / `#8800ff` / `#00362b`

<readymag_design_language>
Use the Readymag design language: expressive, editorial, maximalist site-builder design. A black #000000 / white base broken by full-bleed saturated colour sections — orange #ff5000, yellow #ffcc00, purple #8800ff, dark green #00362b — one mood per section, with slow 30-50s ambient loop animations inside them. Big art-directed type in a custom display face (Space Grotesk stand-in) at weight 400 — never bold — with dramatic negative tracking that tightens as it grows (-2px at 40px, -4.2px at 80px); body 14/20 -0.2px; UI chrome kept quiet in a plain system/Graphik sans (Inter). Links are the deliberately retro classic-web blue #0000ee and purple #8800ff. The primary CTA is a full orange #ec520b pill (radius 200px, 40px tall); secondary controls are light pills. Structure is a fine 1px #d6d6d6 hairline grid with 12px rounded cards and pills — and NO shadows at all, depth is refused. Because pages are pixel-positioned fixed canvases, the layout is absolutely placed with essentially one mobile breakpoint (478px). Motion is opacity 0.2s ease plus long ambient loops, no scroll library. Feels: expressive, editorial, maximalist, art-directed. Avoid: bold display weights, shadows, muted section colours, and expressive UI chrome — keep controls quiet so the type leads.
</readymag_design_language>