# Design Language for gabs.news ## Aesthetics and Tone gabs.news is a midnight newsroom where the front page is composed under the glow of neon desk lamps -- an editorial broadsheet about the news of value (gabs = price in Korean) laid out with the typographic rigor of the Financial Times but illuminated by the electric palette of a cyberpunk thriller. The editorial aesthetic means every element serves information hierarchy: headlines are unambiguously dominant, body text is precisely set, and the magazine-spread layout organizes content into columns, pull-quotes, and sidebars with the discipline of centuries-old newspaper composition. The tone is authoritative -- the voice of a senior editor who has spent decades covering value markets and has no patience for jargon, spin, or ambiguity. Sentences are clean. Facts lead. The authority comes not from volume but from precision -- every word is chosen for maximum clarity, every layout decision serves comprehension. Visual inspiration: the typography of The Guardian's redesign by Mark Porter; the dark-mode redesign of Bloomberg Businessweek; a 1940s newspaper printing press room lit only by neon signage visible through the windows; the editorial illustrations of the New Yorker rendered in electric color. ## Layout Motifs and Structure The layout uses a **magazine-spread** architecture -- content is organized in multiple columns with varying widths, pull-quotes that break column boundaries, and a masthead hierarchy that clearly signals what is a headline, what is a sub-headline, and what is body text. **Magazine Grid:** - Desktop: 12-column grid, 20px gutters, max-width 1200px - Content areas use 4-column, 6-column, and 8-column spans - Pull-quotes break across column boundaries, spanning 10 columns with increased font size - Sidebars occupy 3-4 columns alongside main content **Section Flow:** 1. **The Masthead (Hero):** Full-width banner. "GABS.NEWS" in garamond-classic display, centered, with a thin neon rule below. Date line in small caps. The masthead echoes traditional newspaper nameplate conventions. 2. **The Lead:** A 3-column spread with the primary story: large headline spanning full width, lead image area (duotone-treated), and body text flowing across columns. 3. **The Analysis:** Two-column layout with a sidebar. Main column: analytical essay about value concepts. Sidebar: key data points and quotes in book-scholarly framing. 4. **The Columns:** Multiple shorter items in a 3-column layout, each with a small headline and dense text. These mimic the "columns" section of a broadsheet. 5. **The Colophon:** Thin horizontal rule, publication info, domain name, date. Minimal, as in print newspapers. ## Typography and Palette **Typography:** - **Display / Headlines:** "EB Garamond" (Google Fonts) -- a faithful digital revival of Claude Garamond's typefaces, with the authority and beauty of 500 years of typographic tradition. Used at 3rem-6rem for headlines. Weight: 700. The garamond-classic choice is deliberate: newspaper headlines have historically relied on serif display faces, and EB Garamond carries that gravitas while being beautifully rendered on screen. - **Body / Articles:** "Source Serif 4" (Google Fonts) -- a refined serif designed for extended reading. Used at 16px/1.7 for body text. Weight: 400 for body, 600 for bylines and emphasis. The column-set body text with Source Serif 4 at this size and leading creates the authentic newspaper reading experience. - **Accent / Data / Sidebar:** "EB Garamond" at 12px, small-caps (font-variant: small-caps), letter-spacing: 0.1em for section labels, bylines, and datelines. "Fira Code" (Google Fonts) at 13px for any numerical data or statistical references. **Palette:** | Role | Color | Hex | Usage | |------|-------|-----|-------| | Newsroom Dark | Deep charcoal | #0f0f14 | Primary background | | Column Surface | Dark grey-blue | #1a1a24 | Article column backgrounds, sidebar tint | | Neon Red | Electric vermillion | #ff3344 | Primary accent: masthead rule, important headlines | | Neon Blue | Electric cobalt | #3366ff | Secondary accent: links, pull-quote marks | | Duotone Overlay | Neon red/blue | combination | Duotone treatment for editorial imagery | | Text Primary | Near white | #eeeef2 | All body text on dark backgrounds | | Text Secondary | Silver grey | #8888a0 | Bylines, datelines, metadata | | Rule Lines | Mid grey | #3a3a44 | Column rules, horizontal dividers | | Pull-Quote Gold | Warm accent | #dda040 | Pull-quote text, rare warm highlight | The palette is dark-neon -- a newsroom at night, lit by the neon glow of the city outside. The dark background creates reading focus (reduced eye strain for long-form text), while the neon red and blue provide the hierarchical signaling that newspapers achieve through bold weight and position. ## Imagery and Motifs **Duotone Photo Treatment:** Editorial imagery uses duotone-photo processing: - Base photograph converted to two-tone: shadows mapped to #0f0f14, highlights mapped to #ff3344 (neon red) or #3366ff (neon blue) - This creates the dramatic, stylized editorial photography seen in Bloomberg Businessweek - Images are placed within the column grid, respecting column boundaries - CSS implementation: filter: grayscale(1) contrast(1.2) combined with a colored overlay **Book-Scholarly Motifs:** The book-scholarly motif manifests as typographic conventions borrowed from academic publishing: - Drop caps at the beginning of major articles (EB Garamond at 4rem, neon red, float: left) - Footnote-style reference numbers (superscript in neon blue) - Pull-quotes set between thin horizontal rules with quotation marks in gold (#dda040) - The overall effect is of a scholarly journal rendered in newsroom aesthetics **Fade-Reveal Animation:** Content sections use fade-reveal on scroll: - Elements begin at opacity: 0 and transition to opacity: 1 over 600ms - No transform/movement -- pure opacity transition, maintaining the still authority of print - Stagger: 200ms between elements within the same section - This subtle reveal mimics the experience of a page being uncovered, rather than elements flying in ## Prompts for Implementation **Full-Screen Narrative Experience:** The magazine-spread layout creates a richly structured reading experience. Multiple columns give the eye choices within each section -- the reader can focus on the main article or glance at sidebar data, mimicking the scanning behavior of newspaper reading. The dark-neon palette transforms this traditional layout into something contemporary and atmospheric. **Multi-Column Implementation:** Use CSS Grid for the 12-column base. Articles use grid-column spans: headlines span 1/-1 (full width), body text spans 1/7 (6 columns), sidebars span 8/12 (4 columns). Pull-quotes use grid-column: 2/11 with increased font size (1.5rem) and a different weight (EB Garamond italic 400). **Drop Cap Implementation:** First paragraph of major articles: p::first-letter { font-family: 'EB Garamond'; font-size: 4rem; float: left; line-height: 0.8; padding-right: 12px; color: #ff3344; } **Responsive Behavior:** On mobile (below 768px), the multi-column layout collapses to single column. Sidebar content moves below main content. Pull-quotes become block-level (no column spanning). Headlines scale to 2.5rem. The masthead remains centered. Drop caps reduce to 3rem. **AVOID:** CTA buttons, subscription popups, cookie banners, photo carousels, video embeds, social share buttons, sidebar advertisements, anything that breaks the editorial purity. ## Uniqueness Notes **Differentiators from other designs:** 1. **Editorial aesthetic is underrepresented (33% detect rate but rarely as primary):** This is one of very few designs that commits fully to the editorial aesthetic with authentic magazine-spread layout, drop caps, and column typography. 2. **Magazine-spread layout (3% frequency):** The multi-column grid with pull-quotes and sidebars is extremely rare in the collection, creating a fundamentally different reading experience from the single-column/centered designs that dominate. 3. **Dark-neon palette applied to editorial design (7% frequency for dark-neon):** Traditional editorial design uses light backgrounds. The dark-neon treatment transforms newspaper conventions into something cinematic and atmospheric. 4. **Duotone-photo editorial imagery:** While photography is common (57%), duotone-photo treatment is unique -- images are processed into dramatic two-tone editorial illustrations rather than presented naturally. 5. **Garamond-classic typography (3% frequency):** One of the rarest typography choices in the collection, and the only design that pairs historical Garamond display with a neon-dark editorial context. **Documented Seed/Style:** aesthetic: editorial, layout: magazine-spread, typography: garamond-classic, palette: dark-neon, patterns: fade-reveal, imagery: duotone-photo, motifs: book-scholarly, tone: authoritative **Avoided Overused Patterns:** - corporate aesthetic (62%) -- editorial instead - asymmetric layout (94%) -- magazine-spread (3%) instead - warm palette (100%) -- dark-neon (7%) instead - parallax patterns (98%) -- fade-reveal (3%) instead - mono typography (98%) -- garamond-classic (3%) instead - tech motifs (96%) -- book-scholarly (5%) instead - friendly tone (64%) -- authoritative (27%) instead - minimal imagery (94%) -- duotone-photo instead