# Design Language for gazza.news ## Aesthetics and Tone gazza.news is a dopamine newsroom -- a hyper-saturated, candy-colored information machine that delivers game licensing news with the visual intensity of a pinball machine and the structural elegance of a luxury fashion lookbook. The dopamine aesthetic is unapologetic: colors are cranked to maximum saturation, type is oversized and demanding, and every scroll reveals another hit of visual pleasure. The site operates on the principle that information should be physically exciting to encounter -- that the eye should be rewarded for every movement. The tone is luxurious -- not the quiet luxury of old money, but the loud luxury of a limited-edition sneaker drop or a fashion week after-party. Content is presented as exclusive, curated, high-value. Headlines are declarations. Body text is precise and economical. The site does not explain itself; it announces. Visual inspiration: the editorial layouts of Virgil Abloh-era Off-White lookbooks with their oversized quotation marks and industrial type; the candy-colored data dashboards of Bloomberg Terminal reimagined by a graphic designer who only uses hot pink; the portfolio grids of Awwwards-winning studios where every project thumbnail is a saturated explosion; the visual density of a Japanese pachinko parlor's LED displays. ## Layout Motifs and Structure The layout uses a **portfolio-grid** -- a multi-column grid of visual tiles that showcase content as if each piece were a curated exhibit in a gallery of news. **Portfolio-Grid Architecture:** - Desktop: 3-column grid with varied tile heights (masonry-like but CSS Grid) - Gap: 8px (tight, creating visual density) - Background: #fafafa (near-white, letting the candy-bright tiles dominate) - Tiles span 1-2 columns and 1-3 rows, creating a dynamic rhythm - Each tile has a distinct candy-bright background color **Section Flow:** 1. **The Front Page (Hero):** Full-width, 90vh. "GAZZA.NEWS" in enormous humanist type, candy pink (#ff3388) on white. Below: a single sentence in smaller type. The hero is almost entirely negative space -- the eye rests before the candy storm begins. 2. **The Wire:** The main portfolio grid. 12-18 tiles containing news-style licensing content: headlines, data-viz sparklines, single large numbers, brief analysis paragraphs, and keyword callouts. Each tile is a different candy-bright color (pink, yellow, cyan, lime, coral, violet). The variety creates visual chaos that is held together by the grid's structural discipline. 3. **The Ticker:** A full-width horizontal strip with a CSS-animated scrolling marquee of licensing terms in small uppercase type, alternating candy colors on a dark (#1a1a2a) background. The marquee moves slowly (60s per loop) creating ambient information. 4. **The Deep Wire:** A second, tighter grid with smaller tiles and more text-dense content. The candy colors are slightly desaturated here (80% saturation vs. 100%), creating a subtle visual "cooling" that suggests depth and detail. 5. **The Masthead:** Domain name centered on white, in candy pink, with a small tech motif (a signal-wave SVG) beside it. ## Typography and Palette **Typography:** - **Display / Headlines:** "DM Sans" (Google Fonts) -- a geometric humanist sans-serif with low contrast and open counters. Used at 3rem-7rem for the hero and tile headlines. Weight: 700. The humanist warmth of DM Sans prevents the candy-bright colors from feeling cold or mechanical -- it adds an approachable quality to the high-intensity palette. - **Body / Content:** "DM Sans" at 15px/1.6 for body text within tiles. Weight: 400 for body, 500 for emphasis. Keeping a single type family across the site creates coherence that balances the chromatic chaos of the candy palette. - **Accent / Data:** "DM Sans" at weight 700, 11px, letter-spacing: 0.12em, uppercase for tile category labels and the ticker marquee. Numbers in tiles use DM Sans at weight 700, 4rem-6rem for large statistical callouts. **Palette:** | Role | Color | Hex | Usage | |------|-------|-----|-------| | Canvas White | Near-white | #fafafa | Page background, hero background | | Candy Pink | Hot magenta | #ff3388 | Primary accent, hero title, key tile backgrounds | | Candy Yellow | Electric lemon | #ffdd22 | Tile backgrounds, data highlights | | Candy Cyan | Vivid teal | #22ddcc | Tile backgrounds, link color | | Candy Lime | Acid green | #88ee22 | Tile backgrounds, positive data indicators | | Candy Coral | Warm neon | #ff6644 | Tile backgrounds, alert/emphasis | | Candy Violet | Electric purple | #8844ff | Tile backgrounds, rare accent | | Ticker Dark | Deep navy | #1a1a2a | Ticker strip background | | Text on Candy | Near-black | #141418 | All text on candy-bright tile backgrounds | | Text on White | Warm black | #1a1a1a | Body text on white backgrounds | The palette is candy-bright -- six fully saturated hues deployed across the portfolio grid with deliberate abandon. Each tile gets one candy color as its background, with text in near-black for maximum contrast. The near-white page background serves as the neutral frame that makes the candy tiles pop. ## Imagery and Motifs **Data-Viz as Editorial Illustration:** Instead of photographs or icons, content is illustrated with data-visualization elements: - Inline SVG sparklines (60px wide, 20px tall) showing trend lines in candy colors on white tiles - Large circular percentage indicators (SVG stroke-dasharray technique) in candy lime or coral, 100px diameter - Small bar-chart fragments (3-5 bars, 40px tall) used as decorative elements within text tiles - A single large radial chart (200px) in the Deep Wire section, using all six candy colors for segments - All data-viz elements are illustrative, not interactive -- they communicate the concept of data without requiring real datasets **Tech Motifs as Infrastructure:** Subtle tech-themed decorative elements reinforce the "news wire" concept: - Thin signal-wave SVG paths (sine-wave lines in candy cyan, 0.5px stroke) running horizontally between grid rows - Small satellite-dish or antenna icons (12px, line-art in candy pink) marking section starts - A barcode-like pattern (vertical lines of varying width in candy violet) as a decorative footer element - These tech elements are secondary to the candy-bright tile grid -- infrastructure, not focal points **Scroll-Triggered Animation:** Tiles enter the viewport with scroll-triggered animations: - Each tile begins at opacity: 0, transform: scale(0.92) - On viewport entry (IntersectionObserver, threshold: 0.1), tiles animate to opacity: 1, scale(1) over 500ms - Stagger: tiles animate with a 60ms offset based on their grid position (left-to-right, top-to-bottom) - The scale-up creates a "popping" effect that reinforces the dopamine-hit visual strategy - Easing: cubic-bezier(0.16, 1, 0.3, 1) -- a quick spring with minimal overshoot ## Prompts for Implementation **Full-Screen Narrative Experience:** The site delivers a dopamine-driven editorial experience: the calm, near-empty hero creates anticipation, then the portfolio grid explodes with candy-colored content tiles. The visual intensity builds through the Wire section, briefly pauses at the Ticker, then resumes at reduced intensity in the Deep Wire. The Masthead returns to calm. This rhythm -- silence, explosion, pause, ripple, silence -- is the site's emotional arc. **Portfolio Grid Implementation:** CSS Grid with grid-template-columns: repeat(3, 1fr). Tiles use grid-column and grid-row spans for size variation. Tile backgrounds: each nth-child gets a different candy color from the palette. Gap: 8px. Tiles have border-radius: 4px and subtle box-shadow: 0 2px 8px rgba(0,0,0,0.06). **Ticker Marquee Implementation:** A full-width div with overflow: hidden containing a div with display: flex; animation: marquee 60s linear infinite. The inner div is duplicated (two copies side by side) to create seamless looping. Each word is a span with a different candy color, separated by dot characters in muted grey. **Responsive Behavior:** On mobile (below 640px), the portfolio grid becomes single column. All tiles are full-width. The ticker remains full-width and animated. Hero text drops to 3rem. Candy colors and scroll-triggered animations remain fully active on mobile. **AVOID:** Dark backgrounds (except the ticker strip), muted colors, serif fonts, pricing tables, CTA buttons, comparison grids, testimonials, stock photography, anything subdued or corporate. ## Uniqueness Notes **Differentiators from other designs:** 1. **Dopamine aesthetic (5% frequency) with luxurious tone:** The dopamine visual strategy -- maximum saturation, maximum visual reward per scroll -- is rare, and pairing it with a luxurious (not playful) tone creates a fashion-editorial register unique in the collection. 2. **Portfolio-grid layout for news content (5% frequency):** Portfolio grids typically showcase visual projects. Using the portfolio grid for text-heavy news content -- treating each news item as a visual exhibit -- is a unique structural choice. 3. **Six-color candy-bright palette as tile system:** While candy-bright appears (7%), deploying six fully saturated hues as distinct tile backgrounds across a grid creates a unique chromatic density. Each tile is a different color, making the grid itself a color composition. 4. **Data-viz imagery as editorial illustration (7% frequency):** Using sparklines, percentage indicators, and bar-chart fragments as decorative illustration (not functional data display) is unique -- data visualization treated as visual art rather than information design. 5. **Scroll-triggered scale animation for grid tiles:** The specific combination of scale(0.92) to scale(1) with grid-position stagger creates a "tiles popping into existence" effect that reinforces the dopamine aesthetic in motion. **Documented Seed/Style:** aesthetic: dopamine, layout: portfolio-grid, typography: humanist, palette: candy-bright, patterns: scroll-triggered, imagery: data-viz, motifs: tech, tone: luxurious **Avoided Overused Patterns:** - corporate aesthetic (62%) -- dopamine (5%) instead - asymmetric layout (94%) -- portfolio-grid (5%) instead - warm palette (100%) -- candy-bright (7%) instead - parallax patterns (98%) -- scroll-triggered (7%) instead - mono typography (98%) -- humanist (5%) instead - friendly tone (64%) -- luxurious (3%) instead - minimal imagery (94%) -- data-viz (7%) instead