# Design Language for chika.day ## Aesthetics and Tone chika.day is an **editorial magazine for a single recurring day** — the same date, every year, observed through a soft retro-futuristic lens. Imagine the Sunday supplement of a 1972 Tokyo newspaper that somehow time-slipped onto a 2049 plasma billboard: long-form columns, generous gutters, and disciplined editorial rules — but the masthead glows, the page corners shimmer like aurora curtains, and the lead photograph hums with halation as if printed onto warm cathode glass. The mood is **friendly without being cute, futuristic without being cold, editorial without being austere.** chika ("地下" — *underground*, but also a girl's nickname; "近" — *close, intimate*) carries an undertone of *intimate proximity*: a publication that addresses one reader directly, by lamplight, on a winter night when the sky outside is doing something quiet and impossible. The aurora is not a special effect — it is the page's weather. Inspirations drawn together with intent: - **Editorial:** *The New York Times Magazine* circa 2016 (Gail Bichler / Matt Willey era) — confident headline runs, deeply considered captions, photo-as-argument. - **Retro-futuristic:** Syd Mead concept boards (warm graphite + cool neon vapors), 1970s JAL inflight magazines, the desk-lamp glow of *Blade Runner 2049* interiors. - **Aurora-lights motif:** Sámi storytelling traditions where the lights are personalities, not weather; Frederic Edwin Church's *Aurora Borealis* (1865) for that warm-cool simultaneity. - **Friendly tone:** Yotam Ottolenghi cookbook intros — knowledgeable, generous, never performative. The site reads like **a slow column you would print and keep**, not a feed you scroll past. Every interaction should feel like turning a thick, slightly warm page. ## Layout Motifs and Structure The page is built on a **12-column asymmetric editorial grid where the gutter is allowed to *misbehave***. The grid is the rule; the breaks are the storytelling. **Macro structure (top to bottom, full-bleed sections):** 1. **Masthead band** — Domain wordmark *chika · day* anchored hard-left at column 1. The *date stamp* (today's date, live) sits at column 8–11, set in tabular figures, ranged-right. Between them: nothing. A vast horizontal gutter that the aurora ribbon traverses diagonally from upper-right to lower-left, behind the type. The masthead occupies 32vh on desktop — generously tall, like a print broadsheet folded in half. 2. **Lead spread** — 60/40 split where the *60* is the photograph (a single, full-bleed image with neon-glow halation) and the *40* is a stack: dropped headline (six words max), 4-line standfirst, byline. The split is offset: the photograph bleeds an extra 8% into the text column, so the headline is forced to wrap *over* the image edge — held legible by a backing aurora-blur plate that softens but does not box. 3. **Column run** — Three asymmetric text columns: column A is wide (5/12), column B is narrow (3/12), column C is medium (4/12). Column heights stagger by ~1em so the bottom edge is jagged like a coastline. Pull-quotes break the grid by occupying *between-column* gutters with negative margins — letters touching, but not overlapping, the body text. 4. **The Almanac** — A dense editorial sidebar that lists "what happened on this day" as a vertical timeline, but the timeline runs **diagonally** at 8° off vertical, so years stack like books leaning on a shelf. Each entry is its own micro-card with a thin aurora-keyline. 5. **Long read** — A full-width single column at 62 characters, set in the serif. The page background here shifts subtly to a warmer paper-tone (#F2EAD8 → #E9E0CB at the bottom), simulating the page's spine catching lamplight. 6. **Tonight's sky** — A horizontal scroll-locked panorama of the aurora as a generative SVG ribbon, framed top-and-bottom by editorial captions in mono. The panorama responds to cursor position with a parallax of 3 ribbon layers. 7. **Colophon** — Set at the foot in Futura small caps. Lists publication number, "issue 0001 of ∞," and the date in three calendars (Gregorian, Reiwa, Korean lunar). Aligned to a hairline rule that does *not* run full width — it stops at column 9, defiantly. **Asymmetry rules (codified, not random):** - Headlines align to column 1; standfirsts align to column 4. Never centered. - Image captions hang in the *left* margin of their image, never below. - Page numbers (yes, this site has page numbers, fixed top-right) jitter ±2px on scroll, like a riso-printed registration drift. - The aurora ribbon is the only element permitted to violate the 12-column grid; it is the *negative grid*. The composition uses **Ma (間)** — the Japanese principle of meaningful negative space — but treats that emptiness as charged, not empty. The aurora drifts through the Ma. ## Typography and Palette **Typography (Google Fonts only):** - **Display / Headlines:** **Futura PT** is unavailable on Google Fonts, so we use **Jost** — a careful, open-source homage to Futura with the same geometric DNA (perfect circles, single-story 'a', razor-clean apexes). Set in weights 200, 400, 700. Headlines run at clamp(2.8rem, 6.4vw, 5.6rem), tracked tight (-0.02em), leading set crisp at 0.95. - **Editorial body:** **Cormorant Garamond** at 400/500 italic. Long-form paragraphs use 1.125rem with 1.55 line-height and 0.01em tracking. The italic is reserved for standfirsts and for column B (the narrow column), giving it a deliberate change of voice. - **UI / Captions / Tabular:** **Space Mono** at 400/700. Used for date stamps, page numbers, the colophon, almanac years, and image captions. Set small (0.78rem), uppercase, +0.08em tracking. - **Pull-quotes:** **Jost** at weight 200 (extra-light), set huge (clamp(2rem, 5vw, 3.6rem)), italicised by CSS `font-style: italic` (Jost has a true italic), with the quote glyph rendered as a separate decorative SVG aurora-stroke. The **friendly** tone surfaces typographically through generous leading, an unforced italic for standfirsts, and tabular figures used to make data feel conversational rather than corporate. **Palette — *Retro-Futuristic Aurora* (8 colors, all hex):** Paper (warm, lamplit): - `#F2EAD8` — *Lampshade Cream* — primary page background - `#E9E0CB` — *Folded-Page Sand* — secondary surface (long-read section) - `#1B1A2E` — *Plum Ink* — body text on cream (warmer than pure black, never #000) Aurora ribbons (the cold-warm tension that defines the site): - `#5BE3C9` — *Aurora Mint* — primary aurora green-cyan - `#9D7BFF` — *Magnetic Violet* — secondary aurora violet (this is the magnetic pattern accent) - `#FF8FB8` — *Coral Halation* — warm aurora flush, used in lead-photo glow only - `#FFD27A` — *Filament Amber* — vintage CRT highlight, used sparingly for live-data dots and the date stamp underline Structural: - `#3A3450` — *Twilight Rule* — hairlines, keylines, almanac borders (60% opacity layered over cream) **Color rules:** - Aurora colors *only* appear as gradients, glows, or strokes — never as flat fills behind text. The page is paper; the aurora is light passing through. - Body text is `#1B1A2E` on `#F2EAD8`. No exceptions. - The Filament Amber dot animation marks "live now" — the only saturated solid in the entire layout. - A single section ("Tonight's sky") inverts to dark — `#0E0C1F` background with the aurora at full saturation. This is the only dark section. ## Imagery and Motifs **Lead photograph treatment:** A single hero photograph per issue. Treatment: warm-toned editorial portrait or quiet landscape, processed with a custom **neon-glow halation** pass — bright pixels above 70% luminance bloom outward in a soft radial gradient (CSS filter + duplicate layer with `mix-blend-mode: screen` and a 24px blur), tinted toward `#FF8FB8` in highlights and `#5BE3C9` in shadows. The result evokes a still from a 70mm projector with a slightly warm gate. **Aurora ribbons (the signature motif):** - Implemented as **animated SVG path** running across the masthead, between sections, and in the panorama footer. - Three stacked paths with different `stroke-dasharray` and slow drift (40s+ animation), filled with conic gradients that rotate independently. - The ribbons respond to cursor position with **magnetic pull**: the nearest control point on the path eases toward the cursor with a spring (stiffness 80, damping 22), causing the aurora to "lean" toward the reader. - Faint film-grain SVG turbulence overlay (3% opacity) keeps the aurora from looking digital-clean. **Aurora-lights as type ornament:** - Drop-cap on the long-read uses an oversized Cormorant initial filled with an aurora gradient and a soft outer glow. The drop cap is the only decorative letter on the page. - Section dividers are not horizontal rules — they are 1px **aurora-stroke arcs**, like a magnetic field line drawn between two invisible poles. **Editorial furniture:** - **Bylines** sit beneath standfirsts with a tiny SVG icon: a 4-pointed star (the visual code for "today" in old almanacs) in Filament Amber. - **Captions** are 2-3 lines, mono, italicized last line. Ranged left, hanging in the margin. - **Almanac entries** show the year in Space Mono, the event in Jost 400, and a hairline aurora-arc connecting consecutive entries. - **Page numbers** appear top-right, jitter on scroll, set "p. 03 / 12". **Magnetic decorative elements:** - Three small **iron-filing fields** (procedural CSS `radial-gradient`s arranged like the field lines around a bar magnet) appear at section transitions. They are not decorative noise — they encode the *magnetic* pattern of the seed by visualising actual dipole geometry. **Imagery NOT used:** - No stock photography. No emoji. No icons-as-bullets. No card thumbnails. No avatars. - No glassmorphism, no card-grid, no full-bleed video, no parallax photo backdrops (the aurora handles parallax). ## Prompts for Implementation **Storytelling-first, narrative-immersive, full-screen.** Every section is a *spread* in a magazine — meaningful in itself, designed to be paused on, not skimmed past. **HTML structure:** - One semantic `
` wraps the entire page; sections are `
` with prose-first ARIA roles. - The aurora is a `` at the top of ``, fixed-positioned at z-index 1, pointer-events: none. All content sits at z-index 2+ on its paper surfaces. - Headlines are `

` once, `

` per section. Pull-quotes are `
`. Almanac is `
    `. Captions are `
    `. **CSS approach:** - CSS custom properties for the entire palette and the asymmetric grid columns. Grid uses `grid-template-columns: repeat(12, 1fr)` with `column-gap: clamp(1rem, 2vw, 2rem)` and explicit `grid-column` placements that produce the deliberate asymmetry described above. - `font-feature-settings: "liga", "dlig", "tnum"` enabled on body; tabular figures everywhere numeric. - Aurora gradients via `conic-gradient` and `radial-gradient` layered with `mix-blend-mode: screen` over the cream paper for true *light passing through paper*, not paint on top. - Long-read section uses `text-wrap: pretty` and `hanging-punctuation: first last`. - The dark "Tonight's sky" section uses `color-scheme: dark` to invert form controls if any sneak in. **JavaScript / Animation:** - **Aurora ribbons:** Three SVG paths animated with `requestAnimationFrame`, control points drifting via Perlin noise (custom 200-line noise function, no external lib). The cursor magnetic pull uses spring physics (no easing curves). - **Magnetic interactions on links and headlines:** when cursor enters a 120px radius around a link, the link translates up-to-8px toward the cursor with a damped spring. Release returns it to origin in ~600ms. - **Date-stamp ticker:** the live date stamp re-renders every second using `Intl.DateTimeFormat`, with the seconds digit fading between values (200ms crossfade), giving a quiet "this page is *now*" pulse. - **Drop-cap aurora:** the gradient fill of the drop cap rotates its conic angle at 0.2 deg/sec — almost imperceptible, but if you stare it shifts. - **Scroll behavior:** smooth scroll, but each section snaps gently (CSS `scroll-snap-type: y proximity`) so each editorial spread can settle. No scroll-jacking; the user remains in control. - **Reduced motion:** all animations gate behind `prefers-reduced-motion: no-preference`. With reduced motion, aurora becomes a static gradient, magnetic pull disables. **Narrative experience guidance:** - The site opens with the masthead taking the entire viewport for ~1.4 seconds (no preloader bar — just the aurora drawing itself across the masthead in a single SVG path-draw, then the rest fades in). A ten-word "Issue 0001 of ∞ — for today, only today" appears beneath the date stamp. - The reader is led downward by editorial cadence (lead spread → columns → almanac → long read → panorama → colophon), not by buttons. There is no "next" or "subscribe" or "learn more." - The almanac is the emotional center. It quietly says: *this day has happened before, will happen again, and here is what it has carried.* Build that with copy and rhythm, not decoration. - The panorama is the closing gesture: the aurora finally goes full-saturated against the dark sky, and the captions become poetic rather than journalistic. **AVOID strictly:** - No CTA-heavy layouts. No "Get started" / "Sign up" / "Subscribe" buttons. There is no funnel. - No pricing blocks. No tiered plans. No comparison tables. - No stat-grids ("10,000+ users / 99.9% uptime / 4.9★ rating"). The almanac is the only data display. - No carousels, no testimonial sliders, no logo walls. - No hero with three feature columns underneath. - No "as seen in" press strips. ## Uniqueness Notes **Differentiators from the other 110 designs in this corpus:** 1. **Aurora-lights motif (0% used in corpus, 110 designs surveyed).** This site is the first instance of *aurora-lights* as the dominant motif — and crucially, treats it not as a background flourish but as the **negative grid** that violates the editorial 12-column structure. The aurora is an active typographic actor, not wallpaper. 2. **Retro-futuristic palette (4% used).** Most corpus designs in the warm/gradient category collapse into pastel-creamy or dopamine-neon territory. This palette deliberately occupies the rare warm-paper + cool-aurora dual register: lampshade cream paper underneath, mint-violet-coral aurora layered above with `mix-blend-mode: screen`. The combination of paper-warmth and aurora-cool is unique in the corpus. 3. **Futura-geometric typography (3% used) + Cormorant Garamond editorial pairing.** Most editorial designs pair a humanist or grotesque sans with a serif. Pairing a *strictly geometric* sans (Jost-as-Futura) with Cormorant's high-contrast romantic serif is a deliberately uncommon dialect — cold geometry conducting warm prose. 4. **Editorial aesthetic (36%) executed as a single-day publication (no equivalent in corpus).** Other editorial designs in the corpus serve blogs, magazines, or news products with archives. chika.day is structurally a *single recurring day* — Issue 0001 of ∞, every day a new issue, no archive, no future, no past. The "Almanac" section is the only acknowledgement of time's repetition. This narrative conceit shapes every layout decision. 5. **Asymmetric layout (53%) with codified rule-breaking, not random asymmetry.** The site documents *why* each column breaks: headlines align to col 1, standfirsts to col 4, captions hang left, the aurora is the only permitted grid-violator. Most asymmetric designs in the corpus are merely off-center; this one is editorially asymmetric. 6. **Magnetic patterns (62%) reframed as physically literal.** Rather than the usual "buttons that drift toward the cursor," this design renders actual **iron-filing field-line decorations** that visualise dipole geometry. The cursor's magnetic interaction is unified with the visual motif — the aurora itself responds magnetically. The pattern is not just an interaction; it is the page's physics. 7. **Friendly tone (10%) without playful aesthetic.** The friendly tone in the corpus almost always pairs with hand-drawn or playful aesthetics. Here the tone is friendly *through editorial restraint* — generous leading, a soft italic standfirst, an Ottolenghi-cookbook voice — proving that friendliness can coexist with editorial discipline. **Avoided patterns (from frequency analysis):** - Avoided: hand-drawn (95%), glassmorphism (68%), card-grid (73%), photography as default imagery (98%), parallax/spring/cursor-follow as the *primary* interaction signature (94/75/73%), warm-gradient-pastoral palette (the corpus default). - Selected because rare or absent: aurora-lights (0%), retro-futuristic palette (4%), futura-geometric (3%), editorial single-day conceit (unique), iron-filing magnetic visualisation (no precedent in corpus). **Chosen seed (from assignment):** `aesthetic: editorial, layout: asymmetric, typography: futura-geometric, palette: retro-futuristic, patterns: magnetic, imagery: neon-glow, motifs: aurora-lights, tone: friendly` This seed positions chika.day at the intersection of **editorial discipline** and **retro-futuristic atmosphere** — a publication that feels printed and projected at the same time, addressing one reader on one day, with the lights doing something quiet and impossible above the masthead.