← ClaudeAtlas

editoriallisted

Use when building or styling a UI in the Editorial aesthetic — A magazine-grade design system that makes typography the hero, pairing structured grids with generous whitespace and confident headlines. For Claude Code, Cursor, and Codex.
x77jh8gvrn-alt/staqd-skills · ★ 0 · Code & Development · score 75
Install: claude install-skill x77jh8gvrn-alt/staqd-skills
# Editorial Editorial treats the page like a printed spread. Type is not decoration here — it is the architecture. The style leans on a refined serif voice, a warm paper background, and disciplined grids so that words breathe and imagery feels curated rather than crammed. Reach for Editorial when the content itself is the product: essays, journalism, brand stories, and any interface where reading is the primary act. The result should feel like a beautifully art-directed magazine that happens to live on a screen — calm, confident, and unmistakably premium. ## Design principles - **Lead with typography.** Headlines do the heavy lifting; everything else stays quiet and supportive. - **Respect the measure.** Keep body text around 60-72 characters per line so reading never strains. - **Use rules, not boxes.** Hairline dividers and column gutters create structure without heavy containers or drop shadows. - **Restrain color.** A single warm accent marks links and emphasis; the rest is ink on paper. - **Honor the grid, then break it** intentionally for a single dramatic image or pull quote. - **Whitespace is content.** Generous vertical rhythm signals quality and confidence. ## Color The foundation is a warm paper background (`#FAF8F3`) with near-black ink (`#1A1714`) for text, which reads softer and more premium than pure black on white. Surfaces such as cards or callouts lift to pure white (`#FFFFFF`) to feel like an inset clipping pasted onto the page. The rust accent (`#B2