A no-code site builder that sells itself by being an outstanding site: 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 #ff5000, yellow #ffcc00, purple #8800ff, dark green #00362b — each a different mood, with slow ambient keyframe loops (animation_1_1…7_1 at 30-50s ease infinite) moving inside them. The headline face is a Readymag-hosted custom typeface set LIGHT at weight 400 at large sizes with dramatic negative tracking that tightens as it grows (-2px at 40px, up to -4.2px at 80px), so the type feels art-directed; the UI chrome is kept quiet in a plain system/Graphik sans so the display leads. Links use the deliberately retro classic-web blue #0000ee and purple #8800ff, and the primary CTA is a full orange #ec520b pill (radius 200px). Because Readymag publishes pixel-positioned fixed canvases, structure comes from a fine 1px #d6d6d6 hairline grid and 12px rounded cards rather than shadows — the shadow census is entirely empty — and the whole page carries essentially ONE responsive breakpoint (478px) plus a desktop layout, a genuine finding of the fixed-canvas model. Atmosphere is 68 raster layers, one 2D canvas and one video; no WebGL, no grain. The first expressive site-builder/design-tool showcase in the library’s under-represented Design category.
⚠ needs-dashboard
Browse Readymag in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: readymag.com (live DOM, computed styles), 2026-08-01 (desktop 1512px). Coverage: homepage (nav, hero, feature sections, footer). No login captured — editor isneeds-dashboard. All stylesheets same-origin (sheetsBlocked: 0). No:rootdesign 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 asnot capturedfor 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.
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.
| 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) |
| 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 |
| 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.
-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.#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.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.