# Design Language for toron.day ## Aesthetics and Tone **toron.day** lives in the territory where goblincore meets the cultural archive — a portfolio site that feels like stumbling into a traveling market stall run by a maker who has crossed many borders. The aesthetic is **goblincore-as-cultural-cartography**: dark, earthy, treasure-dense, with the particular pride of someone who collects not whimsical forest trinkets but *meaningful objects from real places* — textiles, script fragments, ceremony photographs, hand-drawn route maps, objects passed between hands. The mood is **raw and unashamed**. Not rough for effect, but rough because that is what genuine things look like when they haven't been polished for consumption. The site does not perform professionalism; it performs *presence*. The person behind toron.day has been somewhere, made things, kept records. The site is where those records surface. Goblincore's signature traits are deployed with cultural weight: the hoarding impulse becomes a dense portfolio grid of irregular cards; the love of overlooked objects becomes watercolor-painted motif patches (coins, stamps, fragments of woven pattern, small maps); the earthy darkness of the palette gets deepened with navy and cold gunmetal rather than warm brown, giving it a northern-coastal quality — think harbor towns, midnight markets, rain on cobblestones. The tone is **raw-authentic**: no polish theater, no testimonials section, no mission statement. The work speaks through accumulation. If you stay long enough in the grid, a portrait emerges from the aggregate. --- ## Layout Motifs and Structure The layout is a **portfolio-grid structured as a market stall table** — items spread across an irregular surface with deliberate density and occasional air. Not masonry in the Pinterest sense, but a curated spread: some cards tall, some wide, some square, arranged in a 12-column CSS Grid with spanning rules that create visual rhythm without symmetry. **Grid Blueprint:** - Base: 12-column CSS Grid, `gap: clamp(8px, 1.2vw, 18px)`, `grid-auto-rows: minmax(160px, auto)` - Cards span: most items `col-span: 3` (square), featured items `col-span: 4–6` or `row-span: 2` - One item per every 12–16 cards spans full width (`col-span: 12`) — a long horizontal "table runner" with a single piece of text or a path-draw SVG illustration - The grid does NOT center itself. It aligns left, leaving a 12% right margin as breathing space. This creates the feeling of a surface that extends beyond the viewport's edge. **Spatial composition:** - Header: typographic-only, no navigation bar. Domain name in display-bold type, left-aligned, followed by a 3-word descriptor in small caps. No hamburger, no links — just the wordmark floating like a market signboard. - Above-fold: the grid begins immediately below the header, with 1.5rem gap only. The visitor is IN the work within seconds. - No hero section. No carousel. No full-bleed photograph opener. - Path-draw SVG lines — thin, ink-like, drawn with `stroke-dasharray` animation — appear as grid dividers and card overlays. They suggest hand-drawn borders, partial frames, cartographic route lines between items. - Footer: a single ruled line and the domain in monospace, 0.7rem. Nothing else. **Scrolling behavior:** standard vertical scroll, no parallax. The grid feels archaeological — you scroll *down through* the work, not *across* it. --- ## Typography and Palette **Typography (Google Fonts only — verified):** - **Display / Wordmark**: [`Bebas Neue`](https://fonts.google.com/specimen/Bebas+Neue) — all-caps, used exclusively for `toron.day` wordmark at `clamp(3.5rem, 8vw, 7rem)`, tracking `0.04em`. Also used for card category labels in uppercase at `0.75rem`, tracking `0.25em`. The blunt industrial geometry of Bebas Neue against the earthy palette creates productive friction — it reads as a maker's stamp. - **Body / Card titles**: [`Fraunces`](https://fonts.google.com/specimen/Fraunces) — a variable "wonky" serif with optical-size axis. Used at weights 300–700, with the optical size axis set low (`opsz: 9`) for body text at `clamp(0.85rem, 1.3vw, 1rem)` and high (`opsz: 144`) for standalone pull quotes. Fraunces has a hand-press quality that aligns with goblincore's love of imperfect, organic letterforms. - **Captions / Metadata**: [`Space Mono`](https://fonts.google.com/specimen/Space+Mono) — monospace, used at `0.7rem`, tracking `0.05em`, for dates, medium labels, and the SVG path annotation text. Its typewriter neutrality acts as counterpoint to the expressiveness of Fraunces. **Palette — Navy Metallic:** | Role | Name | Hex | |------|------|-----| | Background (primary) | Ink Harbor | `#0d1520` | | Background (card surface) | Oiled Slate | `#141f2e` | | Background (card hover) | Storm Timber | `#1c2b3a` | | Text (primary) | Worn Linen | `#e8dfc8` | | Text (secondary) | Fog Pearl | `#a8b4be` | | Accent (metallic cold) | Gunmetal Sheen | `#7a9aaa` | | Accent (warm counterpoint) | Amber Ochre | `#c4832a` | | Accent (highlight / path lines) | Verdigris | `#5aad90` | | Path-draw SVG ink | Pale Steel | `#8faab8` | The palette is night-harbor: deep navy grounds everything, cold gunmetal provides metallic shimmer through subtle `linear-gradient` card borders (`1px solid rgba(122,154,170,0.25)`), and amber ochre punctuates like a single lit window or a candle at a market stall after dark. Verdigris appears only on the path-draw SVG lines and as a focus ring. --- ## Imagery and Motifs **Watercolor patches as cultural motifs:** Each card may carry a watercolor-style SVG illustration at its top-right corner or as a faint background texture — rendered entirely in SVG using blur filters, low-opacity washes, and layered `feBlend` compositing. These are NOT photographs. They are hand-paint simulations: 1. **Textile fragment**: a woven grid of colored rectangles at varying opacities simulating embroidery or woven cloth (6–8 colors from the palette family) 2. **Postage stamp silhouette**: a rectangle with perforated-edge path (tiny scallop cutouts via SVG path), faintly inked with a geographic outline 3. **Coin rubbing**: circular form, subtle radial gradient with faint pattern relief — suggests a coin pressed with paper and charcoal 4. **Small cartographic fragment**: a 60×60px map excerpt — shoreline curve, a dotted route, two labeled points in Space Mono at 6px 5. **Script fragment**: a few lines of text in a non-Latin script rendered at 40% opacity as pure decoration — not readable, but culturally present. Rotated 5–8° off-axis. **Path-draw SVG lines:** The structural ornament system. Thin lines (`stroke-width: 1px`–`1.5px`, `stroke: #8faab8`, `opacity: 0.6`) animate in using `stroke-dasharray` / `stroke-dashoffset` — drawn as if by a moving pen: - Partial frames around cards (three sides only — suggesting an incomplete border, like a sketch) - Diagonal waypoint lines connecting two cards, like a map route - A horizontal "table runner" SVG that spans the full grid width at mid-page — a single illustrated borderline with small motif stamps at intervals (coin, stamp, leaf) **Cultural motifs vocabulary:** - Fragment aesthetics: nothing is shown whole. Stamps are partial. Maps are cropped. Scripts are illegible. - Multiplication and accumulation: meaning emerges from the pile, not the individual piece. - No human faces. No product photography. Pure object and surface. --- ## Prompts for Implementation **The experience to build:** The visitor arrives at `toron.day` and the screen is dark — `#0d1520` — and the wordmark appears letter-by-letter (Bebas Neue, not animated by JS, but by CSS `animation-delay` per letter, each letter `opacity: 0 → 1` over 0.05s with 0.08s stagger). Below it, the 3-word descriptor fades in as a single unit, 0.4s delay. Then the grid appears: all cards start at `opacity: 0, transform: translateY(8px)`, and enter in a rapid cascade (0.03s stagger per card, easing `cubic-bezier(0.22, 0.61, 0.36, 1)`). The whole entrance sequence completes in under 1.8s. **Card anatomy:** Each card is a `
` with: - Background: `#141f2e` with `1px` border using `linear-gradient` border trick for metallic shimmer - Top-right: watercolor SVG motif patch at `width: 48px`, `opacity: 0.7` - Card category label: Bebas Neue, 0.75rem, `#7a9aaa`, uppercase, tracking 0.25em - Title: Fraunces variable, weight 500, `opsz: 60`, 1.1rem, `#e8dfc8` - Metadata line: Space Mono, 0.65rem, `#a8b4be` - Hover state: `background: #1c2b3a`, border shimmer intensifies to `rgba(122,154,170,0.5)`, path-draw partial frame SVG becomes visible (transitions from `opacity: 0 → 0.6` over 0.25s) **Path-draw SVG animation:** Use `stroke-dasharray` equal to path length (measured via `getTotalLength()`), initial `stroke-dashoffset` equal to length, then transition to `0` via CSS or IntersectionObserver trigger. Duration: `1.2s`, easing `ease-in-out`. The "table runner" SVG animates once when scrolled into view. **Color application rules:** - All backgrounds: `#0d1520` or `#141f2e` only - Amber ochre (`#c4832a`) used max 3 times per viewport — on the most important card's category label, on the wordmark descriptor, and on one path-draw node circle - Verdigris (`#5aad90`) only on path-draw lines and interactive focus rings - No `box-shadow` on cards — use border gradient only for depth **Avoid:** - Hero sections, carousel, or full-bleed imagery - CTA buttons, pricing tables, testimonial blocks - Centered layouts — left-align everything - Light backgrounds — the entire site stays in the dark harbor palette - Hover effects that move cards (no `translateY` on hover — only color + opacity shifts) **Narrative framing (no visible copy needed):** The site doesn't explain itself. The grid IS the portfolio. The accumulation of cards IS the biography. If a `` is needed: "Work, places, things made — accumulated." --- ## Uniqueness Notes 1. **Goblincore as cultural cartography, not whimsy.** The corpus has goblincore at only 1% frequency, and those instances treat it as playful/fantasy. This design deploys goblincore's core logic — hoarding, the overlooked object, earthy darkness — through a specifically cultural and geographic lens: the market stall, the traveling maker, the fragment-collector. No mushrooms or forest sprites; instead postage stamps, coin rubbings, map fragments, script shards. 2. **Navy-metallic palette without tech/military connotations.** Navy-metallic appears in only 2% of the corpus, typically for SaaS dashboards or crypto products. Here it is used as a harbor-night palette — cold, atmospheric, artisanal — paired with amber ochre (a single warm counterpoint) and verdigris (the patina of old metal objects). The metallic quality comes from border gradients, not chrome effects or reflective surfaces. 3. **Watercolor imagery as SVG-native simulation, not raster.** The corpus's 8% watercolor usage relies entirely on raster images or CSS filters on photographs. This design renders watercolor-style patches purely in SVG using `feGaussianBlur`, `feBlend`, and layered rectangles — each patch is a data-URI inline SVG that can be generated programmatically. This means zero image HTTP requests for decorative imagery. 4. **Portfolio-grid as market-stall spread, not gallery.** The 3% of corpus designs using portfolio-grid treat it as a clean gallery (equal-size cards, tight symmetry). This design breaks symmetry intentionally — spanning rules, a left-aligned grid with right margin breathing space, and the "table runner" full-width SVG divider make the grid feel like objects spread on a surface rather than items hung on a wall. 5. **Path-draw SVG as structural system, not decoration.** Path-draw-svg at 10% in the corpus is typically used as a background pattern or hero illustration. Here it is the *structural grid ornament system*: partial card frames, inter-card route lines, the table-runner divider. The ink-draw animation is what makes cards feel individually selected and placed, not generated. **Planned seed:** aesthetic: goblincore, layout: portfolio-grid, typography: display-bold, palette: navy-metallic, patterns: path-draw-svg, imagery: watercolor, motifs: cultural, tone: raw-authentic **Avoided patterns (overused in corpus):** - `hand-drawn` at 54% — not used; watercolor-SVG replaces it with a more technical approach - `photography` at 87% imagery — entirely avoided; all imagery is SVG-native - `minimal` at 44% imagery — the design is deliberately dense, not minimal - Centered hero layouts (corpus default) — replaced with immediate left-aligned grid entry