# Design Language for bada.news ## Aesthetics and Tone bada.news (bada = 바다, Korean for "sea") is a cyberpunk ocean news terminal -- a late-night broadcast from an underwater data center where maritime intelligence, tidal reports, and ecological alerts stream through modular display panels against the hum of cooling fans and the blue glow of server racks. The visual identity fuses the dense, data-saturated aesthetic of cyberpunk (Blade Runner's data terminals, Ghost in the Shell's scrolling code overlays, the ticker-tape chaos of a Bloomberg terminal) with the fluid dynamism of ocean systems. This is not pristine sci-fi -- the interface has character: slightly misaligned modules, a panel that flickers, data that updates at irregular intervals. The .news TLD is literal: this is a news source, but filtered through the neon-washed, rain-soaked visual language of a world where the ocean has become the dominant geopolitical force. The tone is conversational: urgent dispatches delivered in accessible language, like a knowledgeable friend translating complex oceanographic data into something you'd actually want to read at 2 AM. ## Layout Motifs and Structure The layout uses a **modular-blocks** composition -- a dense, dashboard-like arrangement of content modules that can be rearranged and resized, reflecting the modular nature of news feeds and data dashboards. **Primary structure:** - **Opening viewport (100vh):** A dark background (#0D1117) with a subtle noise texture overlay (CSS grain at 0.03 opacity). Across the top: a "broadcast bar" -- a full-width strip (40px height) with scrolling ticker text in retro-display font announcing headlines ("CURRENT: PACIFIC GYRE SHIFT DETECTED... ADVISORY: EAST SEA SALINITY UP 2.3%..."). This ticker scrolls continuously via CSS translateX animation. Below the ticker: the "bada.news" logotype in a retro-display typeface with a subtle blue neon underglow. Flanking it: a live clock display and a "SIGNAL STATUS" indicator (three blinking dots). - **Modular content grid:** The main content area uses CSS Grid with `grid-template-columns: repeat(12, 1fr)` and items spanning varying column/row counts. Modules include: (1) a 6-column "lead story" panel with headline and summary, (2) a 3-column "tide data" panel with animated wave visualization, (3) a 3-column "temperature map" panel with a color-coded grid, (4) multiple 3-4 column "dispatch" panels for shorter news items, (5) a 12-column "deep dive" panel for feature stories. Each module has a 1px border in #1E3A5F with a dark background. - **Ripple interaction:** When clicking/tapping on any module, a ripple animation emanates from the click point -- a circular wave in #00A8CC that expands outward while fading, simulating a stone dropped in water. This connects the cyberpunk UI to the ocean theme through interaction rather than decoration. - **Floating elements:** Small data fragments float between modules -- numbers, coordinates, chemical formulas (NaCl, H2O) -- drifting slowly upward like bubbles. These are rendered in #1E3A5F at 0.4 opacity, serving as ambient texture that reinforces the underwater data-center atmosphere. - **Footer broadcast:** A closing "END OF TRANSMISSION" styled panel with archive links and an animated wave-form visualization (CSS-generated sine wave in #00A8CC that oscillates continuously). ## Typography and Palette **Fonts:** - **Headlines/Ticker:** "Orbitron" (Google Fonts) -- a geometric, futuristic display font with a distinctly technological character. Weight 700 for the logotype and lead headlines, 500 for module headers. Size: clamp(20px, 3vw, 36px) for headlines. Letter-spacing: 0.06em. Its wide, squared letterforms evoke control-room displays and sci-fi data terminals. - **Body text:** "Barlow" (Google Fonts) -- a slightly rounded, slightly condensed grotesque sans designed for screen use. Weight 400 for body, 500 for emphasis. Line-height: 1.7. Size: clamp(14px, 1.1vw, 16px). Its neutral character allows it to carry dense news copy without visual fatigue, while its slight narrowness helps fit more content into modular panels. - **Data/Readouts:** "Chakra Petch" (Google Fonts) -- a Thai-inspired geometric typeface with a tech-forward character, used for all data displays, timestamps, ticker text, and numerical readouts. Weight 400, size: 12-13px. Its angular construction references the cyberpunk aesthetic's blend of East Asian typography with technological display systems. **Color Palette:** - **Terminal Dark** #0D1117 -- primary background, the dark blue-black of a powered monitor in a dim room - **Depth Blue** #1E3A5F -- borders, subtle backgrounds, and secondary UI elements - **Cyan Signal** #00A8CC -- primary accent for headlines, links, active states, and the ripple interaction - **Neon Amber** #F0A500 -- secondary accent for warnings, alerts, breaking news indicators, and the ticker - **Ghost Text** #8B9DC3 -- body text color, a cool gray-blue that reads clearly against dark backgrounds without being harsh white - **Pulse Red** #FF4757 -- used strictly for urgent alerts and breaking-news markers - **Water Foam** #D4F1F9 -- rare highlight color for featured/special content, suggesting bioluminescence An analogous palette rooted in ocean depths -- blues and cyans dominating, with amber and red as emergency/attention signals. The palette reads like a submarine's control panel. ## Imagery and Motifs **Core visual motifs:** - **Scrolling news ticker:** A persistent top-bar with infinitely scrolling text in Chakra Petch. The ticker uses CSS translateX animation on a duplicated text string (seamless loop). Background: #1E3A5F. Text: #F0A500. Small separator dots (•) in #00A8CC between stories. The ticker never stops -- it's the heartbeat of the broadcast. - **Water-bubble data fragments:** Small text elements (12px, #1E3A5F at 0.4 opacity) containing data snippets (coordinates, chemical symbols, numerical readings) that float upward slowly via CSS animation (translateY from bottom to top over 15-25s, infinite). 10-15 fragments visible at once, each at different horizontal positions and animation speeds. They represent data literally bubbling up from the deep. - **Module border glow:** When a news module is hovered, its 1px #1E3A5F border transitions to #00A8CC with a soft glow (box-shadow: 0 0 8px rgba(0,168,204,0.3)). This "activation" glow mimics a display panel coming into focus on a control dashboard. - **Animated wave-form:** In the tide-data module and footer, a CSS-generated wave visualization -- multiple overlapping sine waves (created with SVG path or CSS clip-path animation) in #00A8CC, #1E3A5F, and #D4F1F9 at varying opacities, oscillating continuously. The waves have different frequencies, creating a complex interference pattern that references both ocean waves and audio signal displays. - **Floating elements (data bubbles):** Semi-transparent circles (6-14px diameter) in #00A8CC at 0.08-0.15 opacity that drift across the background, representing the underwater atmosphere. Some contain tiny numbers or symbols visible on hover. - **Ripple click-response:** Every interactive element on click generates a circular ripple: a ring of #00A8CC that scales from 0 to 200px diameter while fading from 0.5 to 0 opacity over 600ms. Multiple rapid clicks produce overlapping ripples. This is the site's signature interaction -- water responding to touch. ## Prompts for Implementation **Full-screen narrative experience:** The page loads with Terminal Dark background. The ticker bar appears first: it slides down from above the viewport (translateY: -40px to 0, 300ms) and immediately begins scrolling. The "bada.news" logotype materializes with a brief static-burst effect (2 frames of horizontal displacement at 50ms each, then resolving to final position -- simulating a CRT signal lock). The clock display activates (numbers counting). Then the modular grid panels fade in with staggered timing: lead story first (400ms), then surrounding modules in a ripple-outward pattern from the lead story (100ms stagger per module based on distance from center). **Module grid implementation:** Use CSS Grid with explicit grid-template-areas or span values. Each module is a `
` with defined `grid-column: span N` and `grid-row: span N`. Modules have consistent internal padding (16px), 1px border, and 4px border-radius. The grid gap is 2px (tight, dashboard-style). Modules marked as "breaking" have an animated border-color (alternating between #FF4757 and #1E3A5F every 2s). **Ripple implementation:** Add a click event listener to the document. On click, create a span element at click coordinates, apply the expanding-ring animation (scale + opacity), then remove the element after animation completes. Use requestAnimationFrame for smooth performance. Multiple simultaneous ripples should be supported (array of active ripple elements). **Ticker seamless loop:** Duplicate the ticker text content. Set both copies in a row (display: flex). Animate the container with translateX from 0 to -50% (the width of one copy). Set animation-iteration-count: infinite, animation-timing-function: linear. Duration: calculate based on text length for comfortable reading speed (~60px/s). **Responsive approach:** On mobile (<768px), the 12-column grid becomes 4 columns. Lead story spans full width. Side panels stack vertically. The ticker reduces font-size. Floating data fragments reduce to 5. The wave-form visualization simplifies to a single wave. Module borders remain but glow effects reduce. The live clock moves into the ticker bar. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids (despite the data theme -- this is news, not analytics), light backgrounds, card-grid with uniform sizing, parallax, serif typography, pastoral/warm aesthetics. No photography. **Storytelling emphasis:** The narrative is an ongoing broadcast. There's no beginning or end -- the user is tuning into a live feed. The ticker never stops. The clock keeps running. Data bubbles continuously rise. The site communicates that the ocean is always happening, always generating news, and this terminal is always listening. The conversational tone in the actual copy cuts through the techno-aesthetic, making dense oceanic data feel like gossip from the deep. ## Uniqueness Notes **Differentiators from other designs:** 1. **Modular news-dashboard grid with variable-span modules:** No other design uses a true 12-column modular grid where content blocks span different column/row combinations to create a dense, dashboard-style composition. The tight 2px gap and bordered modules create a control-room information density unique in the collection. 2. **Ripple-as-universal-click-response:** While ripple appears in other designs, bada.news makes it the universal interaction feedback for every click on the page. Multiple overlapping ripples from rapid clicks create a water-surface simulation that ties every user action to the ocean theme. 3. **Ascending data-bubble ambient layer:** The floating chemical formulas, coordinates, and numbers rising upward like underwater bubbles is a distinctive ambient effect that merges the cyberpunk data aesthetic with literal ocean physics. No other design has ambient text elements that float as background decoration. 4. **Infinite news ticker as persistent UI element:** The continuously scrolling headline ticker at the top creates a broadcast-station atmosphere unique among designs. Combined with the live clock and signal indicator, it establishes bada.news as a living, real-time feed rather than a static page. **Chosen seed/style:** cyberpunk aesthetic, modular-blocks layout, retro-display typography (Orbitron), analogous palette, ripple patterns, water-bubbles imagery, floating-elements motifs, conversational tone **Avoided overused patterns:** Avoided centered layout (93%), card-grid uniform sizing (80%), photography (73%), gradient-dominant palette (96%), parallax (90%), scroll-triggered as primary (83%), mono as primary typography (90%), mysterious-moody tone (73%). Instead used modular-blocks (not previously tracked), ripple (26% but here as universal interaction), retro-display (3%), analogous (3%), water-bubbles (3%), floating-elements (16%), conversational tone (not previously tracked).