# Design Language for perso.news ## Aesthetics and Tone perso.news channels a luxury-premium aesthetic — the restrained elegance of haute couture editorial design and fine typography applied to a personalized news curation platform. The site commands attention through quiet quality — every typographic detail considered, every whitespace measured, and the confident restraint of a platform that lets the quality of its curation speak louder than any visual decoration. Inspiration draws from the editorial design of Monocle magazine, the typographic precision of The New York Times Magazine redesign, the restrained luxury of Cereal magazine, and the considered whitespace of Kinfolk's editorial layouts. The tone is raw-authentic — unfiltered, direct language that treats personalized news as genuine, unvarnished truth delivered without editorial spin. ## Layout Motifs and Structure The layout uses an **f-pattern** architecture — content organized in the natural F-shaped reading pattern of news consumption, with strong horizontal scanlines and a dominant left-column hierarchy. **F-Pattern Architecture:** - Strong left margin anchor with headline hierarchy - Top horizontal bar: featured/breaking story spanning full width - Left-weighted content: primary stories at 65%, sidebar at 30% - Scanline emphasis: bold headlines at consistent left-margin positions - Container: max-width: 960px centered - The F-pattern mirrors natural news-reading eye movement **Section Sequence:** 1. **Headline:** Hero with geometric-sans title on earth-tones editorial gradient, photography curated editorial photography, star-celestial quality-mark accents 2. **Feed:** Personalized stories in F-pattern flow — micro-interactions interactive story engagement with photography editorial image treatments 3. **Deep:** Long-form features in expanded F-pattern with photography immersive visual storytelling and star-celestial editorial constellation 4. **Brief:** Quick-read items in scanline-optimized format with photography thumbnail treatments 5. **Masthead:** Footer as editorial identity — raw-authentic closing with star-celestial quality constellation and editorial commitment ## Typography and Palette **Typography:** - **Headlines:** "Outfit" (Google Fonts) — geometric sans at 2.2rem-3rem, weight 700. Its clean geometric forms create the precise, authoritative voice of premium editorial typography. - **Body Text:** "Lora" (Google Fonts) — serif at 0.95rem, weight 400, line height 1.8 for comfortable long-form reading. - **Accent:** "Outfit" at 1rem, weight 600 for bylines, section labels, and story categories. - **Labels:** "Outfit" at 0.65rem, weight 600, uppercase, letter-spacing 0.1em. **Color Palette:** - **Ink Dark:** #0c0a08 — deep ink dark for backgrounds - **Newsprint:** #1c1810 — warm newsprint for panels - **Earth Clay:** #b88050 — warm earth clay for primary accent - **Earth Olive:** #788848 — muted earth olive for secondary accent - **Earth Slate:** #607080 — cool earth slate for tertiary accent - **Paper Light:** #f4f0e8 — warm paper for text on dark - **Shadow Ink:** #605040 — muted ink for secondary text - **Border Edit:** rgba(184,128,80,0.1) — editorial border ## Imagery and Motifs **Photography Editorial Treatments:** News stories accompanied by carefully treated photography — CSS filter: contrast(1.05) brightness(0.98) for editorial quality. Images with thin borders (1px, Border Edit) and subtle shadow (box-shadow: 0 2px 12px rgba(12,10,8,0.15)). The treatment gives every photo the curated quality of a premium magazine spread. **Micro-Interactions Story Engagement:** Stories respond to interaction with subtle feedback — headlines shifting color (Shadow Ink to Earth Clay) on hover over 200ms, story cards with subtle translateY(-2px) lift, category labels gaining underline on hover. The micro-interactions create the responsive quality of a living editorial surface. **Star-Celestial Editorial Quality Marks:** Small star/diamond markers (SVG, 8-12px) in Earth Clay at varying opacities used as section dividers, story importance indicators, and quality markers. Thin connecting lines between stars at 0.04 opacity create constellation patterns mapping the editorial structure. **Earth-Tones Editorial Warmth:** The palette uses natural earth tones — warm clay, olive, and slate creating the sophisticated, grounded quality of premium print journalism. Backgrounds: subtle radial warmth (rgba(184,128,80,0.02)) centered behind featured content. **F-Pattern Scanline Emphasis:** Headlines positioned at consistent left-margin positions with descending visual weight — featured: 2.4rem, secondary: 1.6rem, tertiary: 1.2rem. Thin horizontal rules (1px, Border Edit) between story groups reinforcing the scanline rhythm. ## Prompts for Implementation Build the page as a luxury editorial news platform. F-pattern: .news-layout { max-width: 960px; margin: 0 auto; padding: 60px 24px; } .story-grid { display: grid; grid-template-columns: 65fr 30fr; gap: 30px; } .featured-story { grid-column: 1 / -1; } Micro-interactions: .story-headline { color: #605040; transition: color 200ms ease; } .story-headline:hover { color: #b88050; } .story-card { transition: transform 200ms ease; } .story-card:hover { transform: translateY(-2px); } Photo treatment: .editorial-photo { filter: contrast(1.05) brightness(0.98); border: 1px solid rgba(184,128,80,0.1); box-shadow: 0 2px 12px rgba(12,10,8,0.15); } Star markers: .quality-mark { display: inline-block; width: 8px; height: 8px; background: #b88050; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); } Scanline rules: .story-divider { border: none; border-top: 1px solid rgba(184,128,80,0.1); margin: 32px 0; } AVOID: Clickbait news aggregators, corporate media dashboards, and social media-style feed layouts. Let luxury editorial restraint and raw-authentic directness create a news platform where every story is curated with the care of a premium magazine feature. ## Uniqueness Notes 1. **Luxury-premium for personalized news:** High-end editorial design communicates curation quality through typographic restraint and considered whitespace. 2. **F-pattern as natural reading flow:** News content organized in the eye's natural scanning pattern creates effortless, comfortable reading. 3. **Micro-interactions as editorial responsiveness:** Subtle story feedback creates the living quality of a premium editorial surface. 4. **Star-celestial as quality markers:** Star and diamond markers function as editorial quality indicators mapping the curation structure. 5. **Earth-tones as journalistic authority:** Natural, grounded palette communicates the trustworthy, unvarnished quality of premium journalism. **Seed/Style:** aesthetic: luxury-premium, layout: f-pattern, typography: geometric-sans, palette: earth-tones, patterns: micro-interactions, imagery: photography, motifs: star-celestial, tone: raw-authentic **Avoided Overused Patterns:** corporate aesthetic (84%), parallax patterns (90%), asymmetric layout (88%), mono typography (91%), warm palette (93%), friendly tone (84%), minimal imagery (89%). This design uses luxury-premium aesthetic, f-pattern layout, earth-tones palette, photography imagery, and raw-authentic tone.