# Design Language for ggaji.com ## Aesthetics and Tone A countdown/deadline tracker rendered in Japanese pop-minimalism -- ggaji.com (까지, "until/by") visualizes the concept of deadlines and endpoints through clean geometric countdowns, progress indicators, and the visual language of Japanese transit systems where timing is everything. The transit-minimalist aesthetic uses precise spacing, systematic color coding, and the calm urgency of a departure board. The tone is timer-precise: every word serves a purpose. Time is the only resource that cannot be recovered. The site counts. ## Layout Motifs and Structure **Countdown System:** Full-viewport countdown displays stacked vertically, each showing a different "until" metric. **Section Flow:** 1. **The Clock:** Hero with a large countdown timer display (HH:MM:SS format) in monospace. 2. **The Schedule:** Grid of event/deadline cards with countdown timers. 3. **The Timeline:** A horizontal timeline showing upcoming endpoints. 4. **The Zero:** Closing section -- "0:00:00" -- what happens when time runs out. ## Typography and Palette - **Display:** "IBM Plex Mono" at 4rem-10rem, weight 700, tabular-nums. - **Body:** "Noto Sans JP" (Google Fonts) at 0.95rem, weight 400, line-height 1.7. - **Labels:** "IBM Plex Mono" at 0.75rem, weight 400. **Palette:** Dark (#0e1018), Display White (#f0f0f0), Urgent Red (#e03030), Caution Amber (#f0a030), Safe Green (#30c060), Transit Blue (#2060d0), Muted (#506070). ## Imagery and Motifs **Countdown Numerals:** Large monospace numbers with tabular-nums for consistent width, creating the visual of transit departure boards. **Status Color Coding:** Deadlines use red (imminent), amber (approaching), green (distant) -- the universal urgency system. **Colon Blink:** The colons in countdown displays blink (opacity toggle, 1s interval) indicating active counting. **Progress Bars:** Thin horizontal bars below each countdown showing percentage of time elapsed, color-coded by urgency. ## Prompts for Implementation Build as a departure board for life's deadlines. The hero countdown activates immediately. Numbers update (or appear to) via CSS animation. Status colors communicate urgency without words. The timeline shows events positioned by their time distance. The Zero closing section is stark -- just the zeroed-out timer on dark background. Clean, precise, no decoration beyond the functional display. Japanese typography support via Noto Sans JP. ## Uniqueness Notes 1. **Transit departure board as life interface:** Applying train-station timing aesthetics to deadline tracking creates unique urgency. 2. **Color-coded countdown urgency:** The red/amber/green system for time remaining creates intuitive visual scanning. 3. **Blinking colon as active indicator:** The small animation detail communicates "running" with minimal visual cost. 4. **Korean-Japanese bilingual design:** Noto Sans JP supporting both languages reflects the domain's linguistic duality. Document chosen seed/style: aesthetic: transit-minimalist, layout: countdown-stack, typography: monospace-japanese, palette: dark-urgency-colors, patterns: status-coding, imagery: countdown-display, motifs: colon-blink, tone: timer-precise