# Design Language for bada.news ## Aesthetics and Tone bada.news ("바다" -- Korean for *sea*) treats the news as **dispatches from a bathyal depth** -- a bioluminescent press bureau operating three kilometres below the surface, where headlines arrive as slow luminous signals rather than the punchy banners of a typical news site. The aesthetic is **abyssopelagic editorial** -- think of a research submersible's interior fused with a classical Korean 신문 (shinmun) broadsheet that has been soaked in ink-black seawater until the fibres swelled. Stories don't scroll onto the page; they *rise* like marine snow, drift across dark water, and settle at the reader's eye-level with the unhurried gravity of deep currents. The tone is **mysterious-moody crossed with scholarly-intellectual** -- not the panicked chatter of breaking news, but the considered voice of a lighthouse keeper reading the day's events aloud to nobody, letting the words echo off the water. Every headline is treated as though it were a siphonophore: delicate, elongated, translucent, potentially dangerous, and undeniably alive. There is no red banner, no ticker, no urgency theatre. Urgency, in the deep sea, is measured in tides. The site's emotional register draws from three specific sources: (1) the hushed, reverent atmosphere of the *Abyss* gallery at the Monterey Bay Aquarium Research Institute, (2) the ink-painted seascapes of Jeong Seon's 겸재 *Inwangjesaekdo* re-imagined as marine vistas, and (3) the long-take underwater cinematography of Lucien Castaing-Taylor's *Leviathan* -- cold, patient, unhuman, and strangely tender. ## Layout Motifs and Structure The layout rejects the **card-grid** (92% use) and **centered** (85% use) patterns outright. Instead it uses a **ma-negative-space** composition (17%, underused) combined with **organic-flow** positioning (15%, underused) to evoke a water column: a vast, mostly empty vertical space in which discrete content-organisms suspend themselves at varying depths and drift with slow parallax. **Primary structure -- "the water column" (single-column, full-bleed, 7 depth zones):** 1. **Epipelagic Zone (Sunlit surface, 0-100vh):** The masthead. The glyph "바다" is rendered at display scale in a weight-variable serif, filled with a slow-looping caustic-light shader (CSS `mix-blend-mode: screen` over an animated SVG `feTurbulence` pattern). Below it, a single wordmark in Korean: "오늘의 물결" (today's waves). No nav bar is visible here -- navigation is implied by descent. 2. **Mesopelagic Zone (Twilight, 100-200vh):** The headline brief. One lead story only. Its title occupies up to 70% of the viewport width, set in an oversized serif. The story's kicker appears to the left, in a narrow vertical column of Hangul characters set rotated -90deg (tategaki-style vertical reading), echoing the bamboo-slip manuscripts of classical Korean newsletters. The story image is a duotone still, cropped to a tall rectangle, with a slow Ken-Burns zoom of ~1.02x over 20 seconds. 3. **Bathypelagic Zone (Midnight, 200-400vh):** Feature dossiers suspended in darkness. Five to seven stories arranged in an **organic-flow** pattern -- not a grid. Each story-card is a thin horizontal "jellyfish" shape (an asymmetric rounded rectangle, ~60% viewport width, variable height) tethered to the left or right margin by a hair-thin SVG line that animates with a gentle sine-wave pulse (period ~6 seconds). Headlines within each card are set in a humanist serif, body previews in a Korean sans-serif. Cards drift 8-20px vertically on parallax, at different rates, creating the sensation that the viewport is a porthole into moving water. 4. **Abyssopelagic Zone (The abyss, 400-600vh):** The archive trench. A long vertical **timeline-vertical** (22%, moderate use) runs down the centre, but it is rendered as a bioluminescent plumb-line -- a glowing SVG path with pulsing nodes. Older stories branch outward from the line in alternating left/right "arms" at irregular intervals (Poisson-distributed, not evenly spaced), each node labelled with a date in the format "YYYY.MM.DD" in IBM Plex Mono. 5. **Hadalpelagic Zone (The trench, 600-700vh):** Correspondence from the deep. A single column of reader letters / editorial notes rendered as translucent "specimen cards" -- frosted-glass panels with handwritten-style text rotated by small random angles (±1.5deg), layered on top of each other with 20-30% overlap. 6. **Benthic Zone (Seafloor, 700-800vh):** The masthead footer, inverted. The publication's colophon appears here, set as if it were a brass submarine plate -- monospace text over a dark textured background with an embossed effect. Contains issue number, publication depth metaphor ("Issue No. 47 / Depth 3,420m"), and credits. 7. **Return to Surface (800-900vh):** A single "ascend" link -- a thin vertical line with a small circle that, when clicked, triggers a 2.5-second smooth-scroll back to zone 1 with a reversed bubble-rise animation. **Horizontal composition within each zone:** - Left gutter (10% viewport): reserved for vertical Hangul date stamps and running marginalia. - Main body (60-70%): content-organism area. - Right gutter (15-20%): reserved for biometric-style metadata -- depth indicators, read-time estimates rendered as pressure gauges, category icons shaped like marine silhouettes. - Asymmetric breathing room: no two consecutive stories share the same horizontal alignment. The eye must swim. ## Typography and Palette **Typography (Google Fonts only):** - **Display / Masthead:** **"Noto Serif KR"** (Google Fonts) at weight 900, used exclusively for the "바다" glyph and zone titles. Rendered at `clamp(3.5rem, 14vw, 12rem)` with `letter-spacing: -0.04em` so the Hangul blocks feel compressed, dense, the way deep water compresses things. A single Latin subtitle uses **"Cormorant Garamond"** weight 500 italic for contrast -- a serif whose delicate ball terminals and elongated ascenders suggest antennae of a deep-sea creature. - **Headlines:** **"Noto Serif KR"** weight 700 for Korean, **"Cormorant Garamond"** weight 600 for Latin-script headlines. Body text uses **"Gowun Batang"** (Google Fonts) -- a warm Korean serif with a hand-chiseled quality, weight 400, size `clamp(1rem, 1.2vw, 1.125rem)`, line-height 1.85, giving a slow, deliberate reading rhythm. - **Metadata / Marginalia:** **"IBM Plex Mono"** weight 400 for depth-stamps, timestamps, reference numbers, and the pressure-gauge indicators. All caps `font-feature-settings: "tnum"` for tabular numerals that align like dials on a bathysphere. - **Kicker / Labels:** **"Inter"** weight 500, tracking `+0.12em`, size 0.75rem, uppercase -- used sparingly for category tags only. - **Vertical Hangul marginalia:** **"Noto Serif KR"** weight 400, rotated -90deg using `writing-mode: vertical-rl`. **Palette -- "Hadal Library":** Avoids the overused **gradient** (97%) and **warm** (95%) palettes. Uses a **monochrome** + **duotone** approach with accent bioluminescence: - `#03060D` -- **Hadal Black**: the deepest seawater, primary background. Not true black -- it carries a trace of blue, the way even six-kilometre water glows faintly from below. - `#0A1824` -- **Trench Indigo**: secondary background for zone 4-6, cards, elevated surfaces. - `#122C3A` -- **Midnight Kelp**: card borders, divider lines, low-contrast rules. - `#7FBFD4` -- **Caustic Pale**: primary text over dark ground. A washed, slightly desaturated blue-white -- the colour of refracted sunlight ninety metres down. - `#EAE3D2` -- **Foam Cream**: display text for the masthead glyph only. Warm, papery, evoking aged newsprint floated to the surface. - `#F6B93B` -- **Siphonophore Gold**: accent, used for link hovers, active timeline nodes, the "ascend" button. Restricted to 3% of the palette coverage -- bioluminescence is precious. - `#8E5DBF` -- **Ctenophore Violet**: second accent, used only for the caustic shader shimmer and the pulse-ring animation around timeline nodes. - `#2F5D4A` -- **Abyssal Moss**: subtle background tint for the benthic zone footer, the colour of sediment dusted with organic detritus. Contrast ratios are calibrated so body text (#7FBFD4 on #03060D) sits at ~9.5:1 -- legible but never glaring. The palette never brightens beyond #EAE3D2; there is no white. White does not exist at 3,420m. ## Imagery and Motifs **Core visual motif: the bioluminescent dispatch.** Every interactive element on the site emits or responds to light the way deep-sea organisms do -- in controlled, rare, meaningful flashes. - **Caustics shader on the masthead:** An animated SVG filter composed of `feTurbulence` (baseFrequency=0.008, numOctaves=2) composited through `feDisplacementMap` and `feColorMatrix` biased toward blues. Rendered at 30% opacity over the "바다" glyph, looping at 40s per cycle. The effect is of sunlight refracted through a metre of water above the reader's head. - **Marine snow particle system:** Between all sections, a thin layer of slowly-falling particles drift across the viewport at varying z-depths and speeds (`@keyframes` with durations between 15s and 90s). Implemented with ~40 absolutely-positioned `div` elements, each a 2-4px circle with a `box-shadow` glow of #7FBFD4 at 10% opacity, a random horizontal drift (sine-based `translateX`), and a `will-change: transform` hint. No mouse interaction -- the snow is indifferent. - **Silhouette fauna as category icons:** Each news category is represented by a hand-drawn SVG silhouette of a deep-sea creature. *Politics* = anglerfish (esca as the one accent dot). *Economy* = nautilus (spiral logarithm). *Culture* = jellyfish (translucent, tentacled). *Technology* = isopod (segmented, slow). *Opinion* = squid (ink-trail on hover). *World* = sperm whale (scale-breaking, occupies 1.3x the card height). All silhouettes are drawn with SVG `stroke-dasharray` animation on viewport-entry -- they *draw themselves* in 1.2 seconds as if sketched by a lamplit hand. - **Inkwash backgrounds:** Zone 4 (the archive trench) has a subtle layered background built from three superimposed CSS radial gradients with very soft edges, meant to evoke *sumi-e* ink diffusion in water. Never high-contrast, always whispering. An additional 4% noise texture (generated via SVG `feTurbulence` with type="fractalNoise") is overlaid for organic grain. - **The plumb-line:** The central timeline SVG is a single `` that descends the archive zone, gently wavering horizontally using a `path-draw-svg` animation (30%, moderate use, but deployed here in a novel way -- the line re-draws itself on every scroll-trigger entry, not once on load). Nodes are circles with three layered `drop-shadow` glows that pulse (3s ease-in-out, alternating). - **Pressure gauges:** Read-time and publication-date indicators are rendered as small circular SVG dials (24px diameter) with a single rotating needle, calibrated in metres rather than minutes ("depth: 1,840m = 4 minute read"). The needle animates once on entry, then holds. - **Specimen-card texture:** In the hadal zone, reader-letter cards use a `backdrop-filter: blur(8px) saturate(1.1)` combined with a 1px border in #122C3A at 40% opacity -- suggesting a preservation jar rather than a card. - **NO photography.** bada.news deliberately rejects the 92% photography norm. There are no stock photos, no journalist portraits, no images of events. The visual vocabulary is entirely illustrated (SVG silhouettes), generative (shaders, noise), and typographic. The absence of photography is itself a statement: at this depth, there is nothing to photograph -- only to listen for. ## Prompts for Implementation **Narrative architecture.** bada.news is not a news portal -- it is a *descent*. The entire site is a single vertical document of roughly 800vh that the reader falls through. There is no homepage vs. article distinction; articles expand in-place within their zone when the reader clicks a headline, using an `element.animate()` morph that stretches the card vertically while marine-snow above it redistributes. There is no hamburger menu, no horizontal nav, no search bar visible by default. A single "search the deep" affordance sits in the left gutter, revealing itself only on hover as a thin line that grows into an input. **Scroll choreography.** Scroll-triggered animations are universal (95% use in the portfolio), so bada.news must use them *differently*: instead of fade-reveals, elements arrive with a **"buoyancy easing"** -- they overshoot upward by 12-18px and settle back down with a low-damped spring (React Spring / custom `cubic-bezier(0.2, 1.4, 0.3, 1.0)`), mimicking the bob of something finding neutral buoyancy. Headlines animate one line at a time with a 180ms stagger. There is no parallax background -- the parallax is in the *content itself* (cards at different depths drift at different speeds relative to scroll). **Interaction moments.** Hover states are minimal and oceanic: - Link hover: a thin #F6B93B underline draws itself left-to-right over 240ms. No colour change. - Card hover: a 2px #7FBFD4 glow expands around the card edges over 400ms; marine snow around the card accelerates by 30% for the duration of the hover, then returns to base speed on exit. - Timeline node hover: the node's pulse intensifies; a small popover rises from below (not appears -- *rises*) containing the date and headline preview. - Ascend button: on hover, a small bubble particle releases from the button and rises up the edge of the viewport over 1.5s, then dissolves. **Audio (optional, default off).** A toggle in the benthic zone footer enables an ambient audio layer: a looped recording of deep-water hydrophone ambience (distant whale song, pressure groans, the slow clicks of invertebrates) at -24dB. When enabled, a small `∿` glyph appears in the top-right and pulses gently with the low-frequency envelope. **Do NOT include:** CTA blocks ("Subscribe now!"), pricing grids, testimonials, hero buttons, statistic counters ("10M readers served"), email capture modals, social proof widgets, or any feature that disrupts the meditative vertical flow. No "breaking news" banner. No red. No urgency theatre. The reader is already in the deep; there is no surface to hurry back to until they choose to ascend. **Full-screen narrative priority.** Each zone must occupy its full vertical slot -- no zone is shorter than 100vh. Transitions between zones are marked by a 20vh "dissolve interval" in which marine snow density increases slightly and the background hue shifts ~6% toward the next zone's tone (`transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1)` over the scroll range, implemented with a scroll-linked CSS custom property `--depth`). **Korean typography specifics.** All Hangul must use font-feature-settings `"kern" 1, "liga" 1` and word-break `keep-all` to prevent awkward line breaks mid-word. Line-height for Korean body text should be ~1.85 (looser than Latin text at 1.6) to honour Hangul's vertical density. Vertical-writing-mode marginalia must use `text-orientation: mixed` so Latin numerals within rotated Hangul remain upright. **Performance-conscious poetry.** The marine-snow particle count, caustic shader resolution, and backdrop filters should all be moderated on `prefers-reduced-motion: reduce` -- in which case marine snow freezes, shaders pause on a single frame, and transitions collapse to simple fades. The poetry survives at reduced intensity; nothing breaks. ## Uniqueness Notes **Differentiators from other designs in the portfolio:** 1. **Abyssopelagic editorial as a news-site idiom.** No other site in the portfolio treats news content as dispatches from the deep sea. The 40-site corpus includes ocean-adjacent palettes ("ocean-deep", "ethereal-blue", "coastal-blend") but none commits to the *specific* imaginary of the mesopelagic-to-hadal zones as a structural and thematic backbone. bada.news doesn't use the sea as decoration -- the sea *is* the information architecture. 2. **Rejection of dominant patterns at the structural level.** Frequency analysis showed corporate aesthetic (87%), card-grid layout (92%), centered layout (85%), gradient palette (97%), warm palette (95%), mono typography (87%), photography imagery (92%), and scroll-triggered animation (95%) are all dominant. bada.news explicitly avoids all eight: it is anti-corporate (its tone is contemplative-editorial), uses organic-flow instead of card-grid, is asymmetric rather than centered, uses monochrome + duotone rather than gradient, is cool rather than warm, uses serif rather than mono for its primary register, uses SVG silhouettes rather than photography, and while it uses scroll triggers (the pattern is nearly universal), it subverts them with buoyancy-easing rather than standard fade-reveals. 3. **Seven-zone water-column layout.** The site is literally a 800vh vertical scroll divided into oceanographic strata (epipelagic through benthic, with a final return-to-surface). This is a structural metaphor that also functions -- the deeper the user scrolls, the older and more archival the content becomes, mirroring how biological specimens accumulate at depth. 4. **Vertical Hangul marginalia + horizontal Latin text + rotated tategaki-style kickers.** The mixed writing-mode composition (horizontal Korean body + vertical Korean marginalia + occasional horizontal Latin) creates a multilingual spatial rhythm that no other design in the collection attempts. This references classical East Asian newspaper layout while using modern CSS `writing-mode`. 5. **Marine snow + bioluminescent nodes + inkwash backgrounds: zero photography.** The total absence of photographic imagery in a *news* site is the strongest uniqueness signal. News sites are 99% photography-driven in the real world; bada.news reimagines news as illumination (bioluminescence) rather than illustration (photograph). 6. **Deep-sea creature silhouettes as category icons.** Anglerfish / Nautilus / Jellyfish / Isopod / Squid / Sperm-whale replace the typical generic icon set (chevron, tag, folder). Each icon hand-drawn in SVG, each animating in with `stroke-dasharray`. 7. **Buoyancy easing instead of standard easing curves.** A custom `cubic-bezier(0.2, 1.4, 0.3, 1.0)` spring that overshoots upward and settles -- a physically-motivated motion signature unique in the corpus. **Chosen seed / style:** `ocean deep calming spa` -- but radically reinterpreted. The seed's "calming spa" register is rejected in favour of the mesopelagic research-vessel register. "Calm" becomes "pressurised stillness"; "spa" becomes "observatory." The ocean depth remains, the commercial-wellness framing is discarded. **Referenced avoided patterns from frequency analysis:** - AVOIDED: `corporate` (87%), `card-grid` (92%), `centered` (85%), `gradient` (97%), `warm` (95%), `mono`-dominant typography (87%), `photography` (92%). - USED (underused in corpus): `organic-flow` layout (15%), `ma-negative-space` (17%), `monochrome` palette (5%), `duotone` palette (15%), `timeline-vertical` (22%), `ethereal` tone (7%), `mysterious-moody` (37% -- moderate, but appropriate here). - USED (unique deployment): `path-draw-svg` (30% but used here as a biometric plumb-line), `scroll-triggered` (95%, unavoidable, but subverted with buoyancy easing).