TechnicalCollectible prompt

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.

Lovablev0Cursor

Curated by Nvoka

Nvoka wordmark logo
Nvoka wordmark logoTechnical

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.

Nvoka logo

Curated by Nvoka

Lovablev0CursorClaude Code
Add to my library

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 filled

Your 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.
See all