# Design Language for toron.day ## Aesthetics and Tone toron.day (토론, Korean for "debate/discussion") channels Scandinavian design clarity into the heated arena of discourse. The visual identity merges the clean, functional elegance of Nordic furniture showrooms with the electric energy of a live debate stage. Think Alvar Aalto's bentwood chairs arranged around a neon-lit podium. The mood is mysterious yet intellectually charged -- a midnight debate salon in Helsinki where arguments glow like aurora borealis against winter darkness. Cool functional surfaces contrast with bursts of neon energy at interaction points. Inspiration from Nordic public broadcasting studios, Scandinavian wayfinding systems, and the electric blue of Arctic twilight. ## Layout Motifs and Structure A **horizontal-scroll** layout that mirrors the back-and-forth nature of debate -- arguments flow laterally like opposing viewpoints crossing paths. **Primary structure:** - **Opening panel (100vw x 100vh):** The word "토론" rendered in enormous grotesque-neo type, filling 80% of the viewport height. Behind it, a subtle neon glow (#00ff88 at 0.1 opacity) pulses gently. Below the Korean, a smaller English subtitle: "The Day of Debate." - **Debate panels (5-7 panels, each 100vw):** Each panel presents a topic or proposition. Left half contains the thesis (bright neon text on dark), right half contains the antithesis (inverted -- dark text on neon-washed surface). Horizontal scrolling creates the sensation of physically moving between positions. - **Timeline strip:** A thin fixed bar at the bottom (height: 3px) showing horizontal scroll progress as a neon-green (#00ff88) fill, with small tick marks for each panel. - **Final panel:** A centered input prompt: "What do you think?" in typewriter-animated text, as if the site itself is asking the user to take a position. **Spatial logic:** Panels use 100vw width with internal padding of clamp(32px, 6vw, 96px). Content within panels uses a 50/50 split-screen for thesis/antithesis. The horizontal scroll uses CSS scroll-snap-type: x mandatory. ## Typography and Palette **Fonts:** - **Headlines/Debate topics:** "Space Grotesk" (Google Fonts) -- a proportional grotesque with geometric personality, used at clamp(36px, 6vw, 84px). Weight 700. The squared-off terminals feel authoritative and debate-ready. Used for both Korean and English headings. - **Body/Arguments:** "IBM Plex Sans" (Google Fonts) -- a corporate-humanist sans-serif at 16px/1.65 line-height. Weight 400 for body, 600 for key claims. The IBM heritage lends credibility to argumentative text. - **Typewriter prompt:** "JetBrains Mono" (Google Fonts) -- a developer monospace used specifically for the final panel's typing animation at 20px with standard character width for authentic typewriter rhythm. **Color Palette:** - **Primary dark:** #0a0f0d (near-black with green undertone) - **Panel dark:** #141c18 (dark forest for panel backgrounds) - **Neon green:** #00ff88 (primary accent -- debate energy, highlights, progress bar) - **Neon cyan:** #00d4ff (secondary accent for antithesis panels) - **Text primary:** #e0f0e8 (green-tinted white for readability) - **Text muted:** #6a8a78 (muted sage for metadata) - **City urban accent:** #ff6b35 (warm orange used sparingly for critical debate moments) ## Imagery and Motifs **Core visual motifs:** - **Neon glow effects:** Key text and interactive elements wrapped in CSS text-shadow/box-shadow with neon green (#00ff88) creating a soft luminous halo. The glow represents the heat of debate -- ideas that are literally incandescent. - **City-urban silhouettes:** Faint skyline silhouettes along the bottom edge of certain panels, rendered as simple SVG paths in muted sage (#6a8a78 at 0.15 opacity). The urban backdrop places debates in the public square, the city as arena of discourse. - **Typewriter text effect:** The final panel's question types out character by character (60ms per character) with a blinking cursor (CSS animation: opacity 0/1 at 530ms intervals). This creates a moment of direct address. - **Versus dividers:** Where thesis meets antithesis within a panel, a thin vertical line (1px, neon green) with a small "VS" label rotated 90 degrees serves as the divider. The line pulses gently (opacity 0.5 to 1.0, 2s cycle). - **Horizontal scroll indicators:** Small animated arrows (CSS chevrons) at the right edge of each panel hint at the scrollable continuation. ## Prompts for Implementation **Full-screen horizontal narrative:** The entire site scrolls horizontally. Implement with a flex container (display: flex, flex-direction: row, overflow-x: auto, scroll-snap-type: x mandatory) on the main wrapper. Each panel is a flex child with min-width: 100vw and scroll-snap-align: start. **Debate panel split-screen:** - Within each debate panel, use CSS grid: grid-template-columns: 1fr 1fr with the neon VS divider as a pseudo-element on the grid container. - Thesis side: dark background, neon green text for key claims. - Antithesis side: neon green background at 0.08 opacity wash, dark text. This asymmetry creates visual tension. **Typewriter animation (final panel):** - Use JavaScript to reveal characters one at a time from a string array. Each character appended to a span with 60ms setTimeout intervals. - Blinking cursor: a span with CSS animation (border-right: 2px solid #00ff88, animation: blink 1.06s step-end infinite). **Neon glow implementation:** - text-shadow: 0 0 10px #00ff88, 0 0 20px #00ff88, 0 0 40px #00ff8844 for glowing text. - box-shadow: 0 0 15px #00ff8833, inset 0 0 15px #00ff8811 for glowing containers. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, vertical-scroll-only experiences. The horizontal movement IS the argument. ## Uniqueness Notes **Differentiators from other designs:** 1. **Horizontal scroll as debate metaphor:** The lateral movement between panels physically embodies the back-and-forth of debate -- no other design uses horizontal scrolling as a conceptual metaphor for argumentative discourse. 2. **Thesis/antithesis split-screen panels:** The visual inversion within each debate panel (dark/neon vs neon/dark) creates a structured dialectical format that is content-aware, not merely decorative. 3. **Typewriter direct-address finale:** The final panel breaking the fourth wall with a typed-out question to the user transforms the passive viewer into an active participant, a technique unique among the designs. **Chosen seed/style:** aesthetic: scandinavian, layout: horizontal-scroll, typography: grotesque-neo, palette: neon-electric, patterns: typewriter-effect, imagery: neon-glow, motifs: city-urban, tone: mysterious-moody **Avoided overused patterns:** photography imagery (90%), centered layout (98%), card-grid layout (96%), warm palette (94%), parallax patterns (99%), mono typography (81%).