Readymag

**Quick Color Reference** - Text (primary): #282828 Graphite - Text (headings): #0f0e0e Near Black - Background: #ffffff Paper White - Border: #e7e7e7 Mist Gray - Accent (brand): #8800ff Electric Violet - primary action: no distinct CTA color **Example Component Prompts** No distinct primary action color was observed; use the extracted neutral button treatments instead of inventing a filled CTA color. 3. **Black feature card** — Full panel, background #000000, padding 48px, headline in custom display face 40px weight 700 at -0.053em tracking in #ffffff, body copy in Graphik 16px in #e7e7e7. No border, no shadow. 4. **Section heading** — Left-aligned, custom display face 40px weight 400 at -0.053em in #0f0e0e, 86px margin top, followed by Graphik 16px body in #282828. On a #ffffff canvas with no enclosing container. 5. **Cobalt interactive demo panel** — Full-width rectangle, fill #1551ff, 16px corner radius, containing four floating white pill controls (Snap, Sizes, Guides, Grid) at 200px radius with 12px text in #1551ff, arranged in a 2x2 grid offset to the upper left.

Readymag's type behaves like a magazine masthead, not a product interface. The custom display face is the only face that should be used at 30px and above — at those sizes, its tight tracking (-0.067em at 80px down to -0.044em at 30px) creates a visual density where letters nearly touch, which gives headlines a printed, set-in-stone quality. Below 30px, switch to Graphik at 16px or the system stack at 12–14px; the display face at small sizes loses the geometric confidence and starts to look like a slightly awkward body font. The dramatic line-height on 30px and 40px sizes (2.67 and 1.43) is deliberate — it leaves generous air between lines for breathing room and lets the tight tracking do its work without crowding. Headlines should never be centered unless deliberately emulating the layered display type stack inside a solid color card; left-alignment is the default editorial mode.

The single most distinctive design decision in Readymag's system is the refusal to use shadows for depth. Instead, depth is created by filling entire regions with saturated color — #000000, #ff5000, #1551ff, #8800ff, #ffcc00 — and letting those solid panels sit directly on the white canvas. This gives the page a print-editorial quality where each section feels like a magazine spread rather than a stacked web component. When designing new pages: identify the feature or message that deserves a 'spread', fill it with one of the saturated brand colors, and place a single large headline on top in white or near-black. Do not decorate the panel further — no patterns, no gradients, no inner cards. The flatness is the design.