TechnicalCollectible prompt
Editorial magazine design system for your website
Act as a senior brand designer. Restyle the existing site for {{business_name}}, a {{business_type}}, as a complete editorial magazine design system. Keep every page, route, component and line of content; change only the visual layer, through shared tokens in the current styling system. Read the existing styles first and tell me what you'll replace. Our brand colors are {{brand_colors}}: map them onto the roles below where they fit, and if they fight the style, keep one as the accent and use the pack's neutrals.
Type: Instrument Serif 400 and italic for display headlines; Newsreader 400, 600 and italic for body at 19px, line height 1.6, 65-character measure. Scale 1.25: 19, 24, 30, 37, 47, 59, and 80px for the lead story. Kickers and bylines in Newsreader 600 at 13px, uppercase, +0.08em.
Palette: paper #FAF7F2, surface #F1ECE3, ink #1A1A1A, muted #5E5A54, rule #D9D2C5, accent oxblood #9E2A22 (hover #7D1F19) for kickers, links and drop caps.
Shape: radius 0 to 2px; 1px rules; a double rule under the masthead; no shadows.
Grid: 12 columns, 24px gutters at 1280px. Text in a centered 7-column well; pull quotes and images break out to 10 or 12 columns. One column at 360px with 20px margins.
Imagery: documentary photos with captions and credits, full-bleed plates between sections; illustration as spot drawings in one ink color.
Motion: quiet. 300ms fades as sections enter; link underlines thicken on hover.
Signature details: a masthead header with an issue number or date; a three-line drop cap on the first paragraph; a kicker above every headline; italic pull quotes at 32px with a hanging quotation mark; numbered captions.
Do: write headlines like headlines, let long text breathe, lay out the homepage like a front page.
Avoid: card grids for everything, sans-serif body text, centered paragraphs, icons, gradients.
Check: text contrast of at least 4.5:1, visible focus, 44px touch targets, no horizontal scroll at 360px, reduced motion respected. Finish with a short change list and the reason for each decision.
Technicalnvoka.com/library/nvoka-editorial-magazine-design-system-for-your-websiteScan to open
Technical
Editorial magazine design system for your website
Serif headlines, a reading column, drop caps and pull quotes that make your site read like a magazine.
Curated by Nvoka
Lovablev0CursorClaude Code
Make it yours
Fill in the blanks and change any word. Only your copy changes, never the card.
Fill in the blanks
0 of 3 filledYour prompt
Act as a senior brand designer. Restyle the existing site for {{business_name}}, a {{business_type}}, as a complete editorial magazine design system. Keep every page, route, component and line of content; change only the visual layer, through shared tokens in the current styling system. Read the existing styles first and tell me what you'll replace. Our brand colors are {{brand_colors}}: map them onto the roles below where they fit, and if they fight the style, keep one as the accent and use the pack's neutrals.
Type: Instrument Serif 400 and italic for display headlines; Newsreader 400, 600 and italic for body at 19px, line height 1.6, 65-character measure. Scale 1.25: 19, 24, 30, 37, 47, 59, and 80px for the lead story. Kickers and bylines in Newsreader 600 at 13px, uppercase, +0.08em.
Palette: paper #FAF7F2, surface #F1ECE3, ink #1A1A1A, muted #5E5A54, rule #D9D2C5, accent oxblood #9E2A22 (hover #7D1F19) for kickers, links and drop caps.
Shape: radius 0 to 2px; 1px rules; a double rule under the masthead; no shadows.
Grid: 12 columns, 24px gutters at 1280px. Text in a centered 7-column well; pull quotes and images break out to 10 or 12 columns. One column at 360px with 20px margins.
Imagery: documentary photos with captions and credits, full-bleed plates between sections; illustration as spot drawings in one ink color.
Motion: quiet. 300ms fades as sections enter; link underlines thicken on hover.
Signature details: a masthead header with an issue number or date; a three-line drop cap on the first paragraph; a kicker above every headline; italic pull quotes at 32px with a hanging quotation mark; numbered captions.
Do: write headlines like headlines, let long text breathe, lay out the homepage like a front page.
Avoid: card grids for everything, sans-serif body text, centered paragraphs, icons, gradients.
Check: text contrast of at least 4.5:1, visible focus, 44px touch targets, no horizontal scroll at 360px, reduced motion respected. Finish with a short change list and the reason for each decision.