# Design Language for tanso.news ## Aesthetics and Tone **tanso** (炭素) is the Japanese word for carbon — element six, the backbone of every organic molecule, the black residue left by fire, the crystalline lattice of graphite and diamond alike. The site is a news aggregator that treats information the way geology treats pressure: stories accumulate in strata, each layer denser than the last, compressed into something permanent and faceted. The aesthetic is **isometric-crystalline** — the visual language of graphite's hexagonal lattice translated into a news interface. Every content block is a faceted slab tilted 30° from horizontal, stacked in a masonry arrangement that resembles the cross-section of a carbon nanotube viewed under electron microscopy. There are no curves. There are no gradients. There is only the intersection of flat planes at precise angles, lit from a consistent upper-left light source to give every block a top-face highlight, a front-face midtone, and a right-face shadow. Tone is **calm-serene**. This is not a shouty breaking-news product. It is the slow accumulation of signal. The visual pace is unhurried — skeleton loaders breathe like a sleeping animal before content arrives; typography settles into place without bounce or spring. The user feels they are reading something that will still exist in fifty years. The site's mood board: the polished face of an anthracite sample; a section through the Greenland ice core at 800 metres depth; a graphite rubbing of a gravestone inscription; the surface of a carbon-fibre composite under raking light. Cold precision. Geologic patience. ## Layout Motifs and Structure The layout is **isometric masonry** — a strict conceptual departure from the 83% of registry designs that use centered composition and the 63% that use full-bleed. Content cards are arranged in a continuous masonry flow, but each card is rendered as an isometric face rather than a flat rectangle. The illusion is of looking down at a spread of carbon-crystal tablets from a 30° overhead angle. **Grid system:** - Viewport is divided into a 3-column masonry base (columns: 1fr 1fr 1fr, gap: 1.5rem) on desktop, collapsing to 2-column at 900px and single-column at 560px. - Each card has a `transform: rotateX(4deg) skewY(-1deg)` subtle tilt to reinforce the isometric crystal-face metaphor without making the content unreadable. - Cards have an explicit top-face pseudo-element (`::before`) that draws a parallelogram highlight across the top edge — the illuminated apex of the crystal block. - No card has equal height. The masonry flow is the composition. Taller cards (feature stories) are approximately 2× the column unit height. **Isometric accent geometry:** - A persistent isometric grid of 60°/120° diamond lines covers the background at 4% opacity in `Graphite-Light` — like graph paper for crystallographers, invisible at a glance but present when you stop and look. - Section dividers are not horizontal rules. They are the top edge of a new isometric "layer" — a full-width parallelogram that shifts the plane by 12px. - The masthead sits above the masonry in a full-width isometric banner: the logotype on a deep slate face, with a top-face stripe in amber-gold. **Spatial hierarchy:** - Foreground (z=1): active / featured cards, logotype - Midground (z=0): standard news cards in masonry flow - Background (z=-1): isometric grid, ambient texture layer ## Typography and Palette **Typography (Google Fonts only, verified):** The typographic system is built around **expressive-variable** fonts — typefaces that use OpenType variable axes to shift weight, width, or slant in response to hierarchy and state. This is rare in the registry (5%) and entirely unused in carbon/news contexts. - **Display / Masthead:** [Unbounded](https://fonts.google.com/specimen/Unbounded) — a geometric sans-serif variable font with a `wght` axis from 200–900. Used for the logotype "tanso.news" and all section headers. Set at `font-weight: 800`, `font-variation-settings: 'wght' 800`, `letter-spacing: -0.04em`. The font's perfectly geometric circulars reinforce the crystalline aesthetic. The logotype uses `font-weight: 200` italic for "tanso" and `font-weight: 900` for ".news" — the contrast within a single typeface mirrors the duality of graphite (soft) and diamond (hard). - **Body / Article cards:** [DM Sans](https://fonts.google.com/specimen/DM+Sans) — a variable sans with optical sizes and `wght` 100–900. Body text at `font-size: 0.9rem`, `font-weight: 400`, `line-height: 1.6`. Card titles at `font-weight: 600`. The optical size axis (`opsz`) is used: small print-style reading comfort at body size, optical expansion at display size. - **Timestamps / metadata:** [Space Grotesk](https://fonts.google.com/specimen/Space+Grotesk) — fixed weight, 400, `font-size: 0.7rem`, `letter-spacing: 0.06em`, uppercase. Its slightly technical character distinguishes metadata from prose without resorting to monospace (already 74% in registry). - **Variable animation:** On hover, a card's title transitions `font-variation-settings: 'wght' 400` → `'wght' 650` over 180ms, a subtle weight-gain that feels like pressing a key rather than a click. **Color Palette (complementary — slate-blue opposed by amber-gold):** The complementary scheme places `#2D4B6B` (deep slate-blue, the color of fresh graphite dust on blue-grey paper) against `#C97B2E` (warm amber-gold, the color of carbonized resin). These hues sit at opposite positions on the color wheel: HSL approximately 210° vs 30°. They do not fight — at these saturations they are geologically balanced, the cold and the heat of carbon's formation. | Role | Hex | Name | |------|-----|------| | Background deep | `#0F1923` | Carbon Void | | Background surface | `#1A2B3C` | Graphite Plane | | Background card | `#1E2F40` | Carbon Face | | Accent primary | `#2D4B6B` | Slate Vein | | Accent complement | `#C97B2E` | Amber Seam | | Accent complement light | `#E8A84E` | Sinter Gold | | Text primary | `#D8E4EE` | Frost Script | | Text secondary | `#8BA4B8` | Graphite Ash | | Text muted | `#4A6278` | Deep Vein | | Isometric top-face | `#2A3F52` | Crystal Apex | | Isometric right-face | `#131F2A` | Shadow Cleavage | | Skeleton base | `#1A2B3C` | — | | Skeleton shimmer | `#243748` | — | ## Imagery and Motifs **Imagery system: marble-texture (recontextualized as graphite lamination)** The seed specifies `marble-texture` imagery. Here, marble texture is not white Carrara stone — it is the veined, layered surface of polished anthracite coal and compressed graphite shale. The textures share the same structural language (parallel strata, random micro-fractures, reflective flat planes) but the palette is black-to-grey-to-silver with occasional amber-gold mineral inclusions. - **Background texture layer:** An SVG noise pattern (`feTurbulence type="turbulence" baseFrequency="0.35 0.8" numOctaves="4"`) rendered in greyscale and composited at 6% opacity over `Carbon Void`. The turbulence scale emphasizes the Y-axis, producing horizontal striations that read as geological layers — carbon strata rather than marble swirls. - **Card texture:** Individual cards have a `background-image` composed of a CSS `radial-gradient(ellipse at 80% 20%, #243748 0%, transparent 60%)` — a subtle specular highlight suggesting a polished stone face under a single light source. - **Sharp-angle motifs:** The primary decorative system is a family of three SVG motifs, each built from triangles and parallelograms with no curves: 1. **Carbon Hex** — a regular hexagon outlined in `Amber Seam` at 1px stroke, 0 fill, used as a stamp on featured cards. Represents the hexagonal lattice of graphite's sp² carbon bonds. 2. **Crystal Facet** — a flattened diamond (parallelogram) with a hairline `Slate Vein` border, used as a bullet marker in body text and as a corner accent on section headers. 3. **Strata Band** — a full-width parallelogram (the "top face" of the isometric layer), drawn in `Crystal Apex` at 2% opacity, used as a section separator. This is the only decorative element that crosses the full viewport width. - **No photography** — the registry uses photography at a high rate. tanso.news uses zero photographic imagery. All article thumbnails are replaced by a generated color block: a mini isometric face tile tinted to a hue derived from the article's category tag, with the Carbon Hex stamp overlaid. - **Skeleton loaders:** The skeleton loading state is the primary animation signature of the site. Before content arrives, every card shows a skeleton composed of correctly proportioned isometric rectangles — not generic grey bars. The shimmer sweeps at a 30° angle (matching the isometric viewing angle), so the light source of the skeleton matches the light source of the final content. The shimmer color transitions `#1A2B3C` → `#2A3F52` → `#1A2B3C` over 1.4s `ease-in-out` infinite — slow enough to feel like breathing, not loading. ## Prompts for Implementation **The story to tell.** A reader opens a geological survey of the day's news. They are not bombarded with red notification badges and auto-playing video. They are handed a tray of polished carbon samples, each labeled in precise technical script, each illuminated from the same single light source in the upper left of the specimen room. They pick up samples (hover), they examine them (card expand), they set them aside (dismiss). The interface is a laboratory, not a newsroom. **Key implementation guidance:** 1. **Isometric card structure in CSS.** Do NOT use actual 3D transforms for the isometric effect — it will break the masonry flow. Instead, use `box-shadow` to simulate depth: `box-shadow: -4px 4px 0 #131F2A, -8px 8px 0 #0F1923`. The top-face highlight is a `::before` pseudo-element: a 100%-width, 6px-height parallelogram using `clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 100%, 6px 100%)` in `Crystal Apex`. Together these give the isometric reading without disrupting document flow. 2. **Variable font weight on hover.** Card titles use `transition: font-variation-settings 180ms ease`. On hover: `font-variation-settings: 'wght' 650`. This is the only hover animation — no scaling, no lifting, no shadow change. The weight-gain is the interaction. 3. **Skeleton loading as first-class design.** Do NOT show skeleton as a degraded state. Show it as the page's opening sequence. The page renders with all skeletons visible (server-side or instant JS paint), and content replaces them asynchronously. The 30°-angled shimmer uses a CSS `linear-gradient(120deg, transparent 30%, #2A3F52 50%, transparent 70%)` animated with `background-position` from `-200%` to `200%`. 4. **Masonry via CSS columns.** Use `columns: 3` with `column-gap: 1.5rem` and `break-inside: avoid` on each card. This is the most semantically clean masonry approach and works without JavaScript. On resize, `columns` transitions from 3→2→1. 5. **Isometric background grid.** An SVG `` element with `patternUnits="userSpaceOnUse"` draws a 60°/120° diamond grid: two diagonal lines at +60° and -60° from vertical, separated by 32px. Render this as a `background-image` on the page body at 4% opacity. The grid lines are `#2D4B6B` (Slate Vein). 6. **Carbon Hex category stamps.** Each category (world, technology, economy, culture, science) maps to a specific tint modifier applied to the card's color block thumbnail. World: +hue 0 (pure graphite). Technology: +hue towards `Slate Vein`. Economy: +hue towards `Amber Seam`. Culture: slightly warmer grey. Science: slightly cooler grey. The Carbon Hex SVG stamp is the same across all categories — only the background tint varies. 7. **Section layer transitions.** Between masonry sections (e.g., "Top Stories" to "Latest"), a `Strata Band` parallelogram spans full width. It has a 2px top border in `Amber Seam` and a `Crystal Apex` fill — the visual illusion of turning a new page of the geological log. 8. **Typography rhythm.** Set the document's `font-size` at `clamp(14px, 1.1vw, 16px)` for fine control. All spacing values are multiples of `0.25rem`. The masthead logotype uses `font-size: clamp(2.4rem, 6vw, 5rem)` with `font-variation-settings: 'wght' 800` for the `.news` portion. 9. **Do NOT build:** CTA buttons, subscription prompts, newsletter capture forms, stat grids, testimonial rails, pricing tables, social share counters, "trending" badges in red, auto-refreshing feeds, notification dots, hamburger mega-menus, hero video, or any element that competes with the calm geological reading experience. 10. **Ambient sound motif (optional progressive enhancement).** If implementing audio: a single 4-second looping tone — a low 80Hz carbon-tube resonance — that plays at 2% volume when the page is focused and fades to silence on blur. This is a whisper, not a feature. ## Uniqueness Notes 1. **Isometric card architecture via CSS box-shadow and clip-path pseudo-elements, not CSS 3D transforms.** No other design in the registry uses this specific technique. The registry's 7% masonry usage never combines masonry with isometric visual language — masonry is always used for flat card grids. Here, every card has dimensional presence while remaining in a flat document flow. 2. **Skeleton-loading as the opening performance, not a fallback state.** The skeleton state is designed to be seen. It is intentionally beautiful — 30°-angled shimmer matching the page's isometric light source — so the first experience of the site (before any content loads) is not a blank screen or a spinner but a perfectly formed graphite specimen tray. This inverts the usual skeleton-loading pattern (3% in registry, always a degraded state). 3. **Variable font weight as the sole hover interaction.** Every other design in the registry uses hover-lift, scale, border-animate, or color transitions for card hover states. This design uses ONLY `font-variation-settings` weight change. The card does not move. The card does not glow. The title simply becomes heavier, as if the letters absorbed the reader's attention and grew denser. This is unprecedented in the registry. 4. **Complementary palette built from industrial mineralogy, not design-convention color theory.** Registry uses warm (88%) and gradient (76%) overwhelmingly. The complementary pair here (`#2D4B6B` slate-blue vs `#C97B2E` amber-gold) is derived from the actual optical colors of graphite-under-light versus carbonized-resin-inclusion — not from a color wheel exercise. The dark base (`#0F1923`) ensures these colors function as geological accent seams, not dominant hues. 5. **Marble-texture recontextualized as graphite lamination.** The registry's marble-texture usage (4%) defaults to white/cream stone aesthetics. This design takes the same structural vocabulary (parallel striations, micro-fractures, specular highlights on flat planes) and renders it in the graphite palette — a complete genre subversion. The texture is the same; the material is entirely different. **Chosen seed:** aesthetic: isometric, layout: masonry, typography: expressive-variable, palette: complementary, patterns: skeleton-loading, imagery: marble-texture, motifs: sharp-angles, tone: calm-serene **Avoided patterns (from frequency analysis):** centered (83% — not used at all), full-bleed (63%), warm palette (88%), gradient (76%), parallax (74%), stagger (49%), scroll-triggered (35%), mono typography (74%), vintage motifs (33%), tech motifs (24%).