# Design Language for tanso.day ## Aesthetics and Tone tanso.day embodies the visual energy of a late-night Tokyo street corner where neon kanji bleeds into rain-slicked asphalt -- where underground zine culture collides with precision engineering diagrams. The aesthetic is **street-style** filtered through the lens of technical documentation: imagine a subway tunnel covered in wheat-pasted circuit schematics, or a skater's deck printed with exploded isometric views of microprocessors. The tone is **tech-tutorial** -- instructive, direct, unapologetically nerdy -- but delivered with the raw, unpolished confidence of someone who learned by breaking things and documenting the wreckage. The mood draws from three specific intersections: (1) the utilitarian graphic language of Japanese train station signage systems -- dense, information-rich, beautiful in their functional clarity; (2) the DIY paste-up aesthetic of 1990s skateboard zine culture -- hand-cut headers, photocopied textures, anarchic layouts that somehow communicate perfectly; (3) the annotated precision of patent drawings and technical blueprints -- where every callout line and dimension marker carries visual weight. These three streams merge into a site that feels like discovering someone's obsessively detailed technical notebook left open on a concrete bench under flickering fluorescent light. The overall atmosphere is nocturnal and urban. The screen should feel like a surface -- a wall, a tabletop, a circuit board -- rather than a window. Content sits ON the surface rather than floating in empty space. There is a deliberate roughness to the presentation that coexists with surgical precision in the information hierarchy. Nothing is decorative for its own sake; every visual element either teaches or orients. ## Layout Motifs and Structure The layout is **full-bleed** -- content extends to every edge of the viewport with no margin padding, no comfortable frame of whitespace. The screen is treated as an infinite wall surface where sections butt up against each other like wheat-pasted posters competing for space on a construction hoarding. **Grid Architecture:** The underlying grid is a 12-column system, but columns are not used conventionally. Instead, content blocks snap to a 48px base unit grid (visible as faint ruling lines in low-opacity) and can span any number of columns at any position. The effect is closer to a drafting table than a web layout -- elements are positioned with technical precision but the composition feels hand-placed, as if someone taped printouts to a wall and stepped back to check alignment by eye. **Section Transitions:** There are no gradual fades between sections. Each content zone is demarcated by hard horizontal rules -- 2px solid lines in the accent color (#FF3D00) that span the full viewport width. These dividers pulse with a border-animate effect: a 1px bright line that travels along the rule from left to right over 3 seconds, creating the impression of a signal propagating through a circuit trace. Between major sections, a full-bleed band of the darkest background (#0D0D0D) with a single centered isometric icon serves as a visual breathing pause. **Content Zones:** - **Hero Zone:** Full viewport height. A single isometric technical illustration dominates the center-left, with the site title and tagline set flush-right in oversized type. No scroll indicators, no navigation -- just the drawing and the words. - **Tutorial Blocks:** Alternating between wide (10-column) text panels and narrow (4-column) annotation sidebars. The sidebar contains callout labels, code snippets, and small isometric diagrams that correspond to the adjacent text. Text panels have a subtle 1px left border in #FF3D00 that animates its height on scroll-enter. - **Diagram Spreads:** Full-bleed sections where isometric illustrations span the entire viewport width, with annotation lines (thin, angled, ending in small circles) pointing to labeled elements. These spreads function like technical plates in an engineering manual. - **Footer Zone:** A dense, information-packed strip inspired by the bottom margin of a blueprint -- containing metadata, version numbers, and colophon information in 10px mono type. **Navigation:** Minimal. A fixed top-left corner element shows the site name in small caps plus a hamburger icon built from three lines of varying thickness (1px, 2px, 1px). The navigation overlay, when triggered, slides in as a full-screen dark panel with section links arranged as a numbered vertical list, each preceded by a section symbol (a small isometric cube in wireframe). ## Typography and Palette **Typography:** - **Headlines / Display:** "Bebas Neue" (Google Fonts) -- a tall, condensed sans-serif with aggressive vertical proportions that channels the compressed energy of street poster type. Used at 4rem-7rem for primary headings. Weight: 400 (Regular, the only weight). All uppercase. Letter-spacing: +0.06em. Line-height: 0.95 (tight, letting ascenders nearly touch the line above for dense visual impact). - **Body / Instructional Text:** "Space Grotesk" (Google Fonts) -- a proportional sans with a technical, slightly squared character that reads as both contemporary and engineering-influenced. Used at 1rem-1.15rem for body text, 0.85rem for annotations. Weight: 300 (Light) for body, 500 (Medium) for emphasis. Letter-spacing: +0.01em. Line-height: 1.65 (generous for readability in tutorial-style content). - **Code / Labels / Annotations:** "JetBrains Mono" (Google Fonts) -- a monospaced typeface designed for code readability with distinctive character differentiation and ligature support. Used at 0.8rem-0.9rem for code blocks, dimension labels, and technical callouts. Weight: 400 (Regular). Letter-spacing: 0 (natural spacing). Background: rgba(255, 61, 0, 0.08) for inline code. Line-height: 1.5. - **Accent / Wayfinding:** "Barlow Condensed" (Google Fonts) -- a narrow grotesk used exclusively for section numbers, navigation labels, and metadata. Used at 0.7rem-0.85rem. Weight: 600 (SemiBold). All uppercase. Letter-spacing: +0.12em. This font appears only in the UI chrome, never in content. **Type Hierarchy Notes:** The eclectic-hybrid approach means these four typefaces coexist deliberately. Bebas Neue shouts from the wall; Space Grotesk explains calmly; JetBrains Mono annotates with precision; Barlow Condensed navigates quietly. The mix should feel like a technical publication designed by someone who also makes gig posters -- intentionally heterogeneous but disciplined. **Palette:** The palette is **high-contrast** -- dominated by near-black and near-white with a single searing accent color: | Role | Color | Hex | |------|-------|-----| | Primary Background | Void Black | #0D0D0D | | Secondary Background | Asphalt | #1A1A1A | | Tertiary Background | Concrete | #2A2A2A | | Primary Text | Chalk White | #F0EDE8 | | Secondary Text | Smoked Gray | #9A9590 | | Primary Accent | Signal Red-Orange | #FF3D00 | | Secondary Accent | Electric Amber | #FFB300 | | Tertiary Accent | Blueprint Cyan | #00BCD4 | | Code Background | Deep Charcoal | #141414 | | Border / Rule | Wire Gray | #3D3D3D | **Color Usage Rules:** - Signal Red-Orange (#FF3D00) is the primary interaction and emphasis color. It appears on border animations, active states, inline code backgrounds (at 8% opacity), and the animated circuit-trace dividers. Never used for large fills. - Electric Amber (#FFB300) is reserved for annotation callout lines, dimension markers, and hover states on navigation. It creates a two-tone accent system that recalls warning signage and technical marking. - Blueprint Cyan (#00BCD4) appears only in isometric illustrations as a highlight color for selected/active diagram elements. It never appears in text or UI chrome. - Background tones (#0D0D0D, #1A1A1A, #2A2A2A) create subtle depth through layering -- content panels float at #1A1A1A over a #0D0D0D ground, with #2A2A2A for recessed elements like code blocks and sidebars. ## Imagery and Motifs **Isometric Icons and Technical Illustrations:** The primary imagery vocabulary is **isometric-icons** -- all visual elements are rendered in a strict 30-degree isometric projection, as if every object exists on the same tilted plane. These are not cute, friendly isometric illustrations; they are technical, wireframe-heavy, and annotated. Think patent drawings rendered in isometric view rather than orthographic. Specific isometric elements to generate with CSS/SVG: 1. **Isometric Cubes (Wireframe):** The fundamental building block. Rendered with 1px strokes in #3D3D3D (Wire Gray), these appear as section markers, list bullets, and navigation icons. On hover, one face fills with #FF3D00 at 20% opacity while border-animate traces the edges. 2. **Exploded Component Diagrams:** Complex isometric illustrations showing abstract "components" (boxes, cylinders, planes) separated by gap space with thin connecting lines, as if disassembled for inspection. These serve as hero illustrations and section dividers. 3. **Isometric Grid Floor:** A perspective grid of thin lines (#2A2A2A) that creates the illusion of an infinite isometric plane receding into the background. Used sparingly as a section background texture. 4. **Callout Annotations:** Thin lines (1px, #FFB300) extending from diagram elements to small text labels set in JetBrains Mono. Lines are drawn at 30-degree or 60-degree angles to maintain isometric consistency, ending in small filled circles (4px diameter). **Flowing Curves Motif:** Counterbalancing the rigid isometric geometry, **flowing-curves** appear as decorative elements that represent signal flow, data paths, or energy transfer. These are CSS-drawn bezier curves (using SVG path elements) in #FF3D00 at 30% opacity, flowing between content sections like circuit traces on a PCB but with organic, swooping trajectories rather than right-angle routes. The curves animate slowly (8-12 second CSS animation loops), with a dashed stroke (dash-array: 8 4) that scrolls along the path, creating the illusion of signal propagation. Specific flowing-curve applications: - Between tutorial blocks, a single curve flows from the bottom-right of one section to the top-left of the next, visually connecting sequential content. - In diagram spreads, curves link related components with animated dashes. - The hero section features a large flowing curve that traces from the isometric illustration to the title text, suggesting a narrative connection. **Surface Textures:** - A very subtle noise texture (CSS `background-image` using SVG `feTurbulence`, baseFrequency: 0.9, opacity: 0.03) applied to all background surfaces, simulating the grain of photocopied paper or concrete. - Section dividers use a 1px repeating pattern of dots (4px spacing) in #2A2A2A as an alternative to solid rules in less prominent transitions. ## Prompts for Implementation **Full-Screen Narrative Experience:** The site should unfold as a guided technical exploration -- like walking through a street-art installation in an abandoned electronics factory. The experience begins with a full-viewport void (#0D0D0D) that holds for 1.5 seconds before a single isometric wireframe cube draws itself into existence at center-screen using SVG path animation (stroke-dashoffset transitioning from full length to 0 over 2 seconds). As the cube completes, the site title "tanso.day" appears letter-by-letter in Bebas Neue at 6rem, flush-right, each character dropping in from 20px above with a 50ms stagger delay and ease-out timing. Below the title, a subtitle in Space Grotesk 300 at 1.1rem fades in after a 500ms pause. **Border-Animate System:** The primary animation pattern is **border-animate** -- animated borders that create the visual language of electrical signals traveling through circuit traces: - Section dividers: A horizontal rule where a bright 1px line (#FF3D00) travels from left to right, leaving a fading trail. Implemented with CSS `background: linear-gradient()` animated via `background-position` with `@keyframes`. - Content panels: On scroll-enter (using IntersectionObserver), the left border of tutorial blocks grows from 0 to full height over 600ms, using `scaleY` transform with `transform-origin: top`. - Isometric cube icons: On hover, edges illuminate sequentially (top edges, then right edges, then left edges) over 400ms, creating a "power-on" effect. - Navigation links: Bottom border draws from left to right on hover (200ms, ease-in-out), using `scaleX` transform with `transform-origin: left`. **Scroll-Driven Progression:** As the user scrolls, content blocks enter with minimal but precise animations: - Tutorial blocks slide in from the right by 30px with 400ms ease-out, triggered at 15% viewport intersection. - Annotation sidebars fade in with a 200ms delay after their corresponding text block. - Isometric diagrams draw their SVG paths sequentially (element by element, 100ms stagger) when they reach 25% viewport intersection. - Flowing curve SVGs begin their dash animation only when scrolled into view, creating the impression that the user's scroll activates the signal flow. **Interactive Elements:** - Hovering over isometric illustrations highlights individual components: the hovered element's stroke changes from #3D3D3D to #FF3D00, and its callout annotation line becomes visible (opacity: 0 to 1, 200ms). - Code blocks feature a "copy" indicator in the top-right corner -- a small isometric clipboard icon in wireframe that fills with #FFB300 on hover. - The noise texture background subtly shifts its `seed` value on page load (randomized between 1-100), ensuring each visit has a microscopically different surface grain. **Technical Implementation Notes:** - All isometric illustrations should be inline SVG for animation control and color theming. - The flowing curves use `` elements with `stroke-dasharray` and `stroke-dashoffset` animated via CSS `@keyframes`. - Border animations use CSS transforms (not width/height) for GPU-accelerated performance. - The noise texture is a single inline SVG filter applied via `filter: url(#noise)` on a `::before` pseudo-element. - No external image files. All imagery is CSS/SVG generated. - AVOID: CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, feature comparison tables. This is a narrative technical document, not a product page. ## Uniqueness Notes **Differentiators from other designs:** 1. **Street-Style Technical Hybrid:** While street-style appears at only 2% frequency in the design corpus, it is always paired with graffiti or urban aesthetics elsewhere. This design uniquely combines street-style visual rawness with technical documentation precision -- the wheat-pasted poster meets the patent drawing. No other design in the portfolio attempts this collision of subcultures. 2. **Border-Animate as Primary Motion Language:** At 2% frequency, border-animate is one of the least-used animation patterns. This design elevates it from a hover micro-interaction to the site's primary visual language -- every transition, every section divider, every interactive element uses border animation to create a cohesive "signal propagation" metaphor. The circuit-trace dividers and power-on cube effects are entirely unique to this design. 3. **Isometric-Icons as Full Imagery System:** Isometric-icons at 2% frequency is typically used for small decorative touches. Here, the entire visual language is built on strict 30-degree isometric projection -- from hero illustrations to navigation icons to section dividers. The exploded-component diagrams and annotated callout system create a complete visual vocabulary that no other design achieves. 4. **Four-Font Eclectic-Hybrid Typography:** At 2% frequency, eclectic-hybrid typography is rare. This design deliberately deploys four distinct typefaces (Bebas Neue, Space Grotesk, JetBrains Mono, Barlow Condensed) in clearly defined roles that mirror the street-style collision of disparate visual elements. The combination of a condensed display face, a technical sans, a code mono, and a narrow grotesk creates typographic tension that is controlled but energetic. 5. **Tech-Tutorial Tone Without Corporate Context:** Tech-tutorial tone at 2% is almost always paired with corporate or professional aesthetics. This design pairs it with street-style rawness, creating instructional content that feels like underground knowledge sharing rather than corporate documentation -- a zine about circuit design rather than a product manual. **Avoided overused patterns:** - No centered layout (99% frequency) -- content uses full-bleed positioning with flush-left and flush-right alignment - No playful aesthetic (95%) -- the tone is instructive and direct - No warm palette (100%) -- high-contrast black/white with isolated chromatic accents - No vintage motifs (88%) -- all motifs are technical and contemporary - No friendly tone (99%) -- the voice is competent and matter-of-fact - No scroll-triggered as primary pattern (97%) -- border-animate is the primary motion language; scroll merely triggers entry, not the signature animation **Documented seed/style:** aesthetic: street-style, layout: full-bleed, typography: eclectic-hybrid, palette: high-contrast, patterns: border-animate, imagery: isometric-icons, motifs: flowing-curves, tone: tech-tutorial