# Design Language for tanso.wiki ## Aesthetics and Tone tanso.wiki inhabits the visual world of a Victorian natural history museum's mineralogy wing at closing time -- the kind of room where mahogany display cases hold specimens of quartz and tourmaline under bell jars, where brass placards are engraved in a hand that took apprentices seven years to master, and where the gaslight has been replaced by soft electric bulbs that still cast the same amber warmth. The aesthetic is **victorian-ornate** filtered through the lens of crystallography: every decorative element draws from the geometry of crystal lattices, mineral cleavage planes, and the hexagonal symmetry found in snowflakes and bismuth formations. "Tanso" (炭素) means carbon in Japanese, and this site treats knowledge as something with the density and structure of diamond -- carbon atoms arranged in perfect tetrahedral bonds, information organized with the same inevitability. The tone is **calm-serene** -- not the emptiness of minimalism but the deep quiet of a library where every book has been catalogued, every specimen labeled, every drawer closed with a satisfying click. There is a Victorian confidence here: the world can be known, classified, and made beautiful in the knowing. But it is not pompous or stiff. It is the serenity of a curator who has spent forty years with these objects and loves them with an understated tenderness. Interactions are slow, deliberate, and rewarding -- nothing shouts, nothing blinks, nothing demands. The user discovers rather than consumes. ## Layout Motifs and Structure The layout follows a **stacked-sections** architecture that evokes the layered shelves and tiered display cabinets of a Victorian collection room. Each section is a distinct "case" -- a self-contained exhibit with its own border treatment, background variation, and internal logic. Sections do not blend into each other; they are separated by ornamental dividers that reference crystalline growth patterns: chevron lines reminiscent of herringbone crystal twinning, or thin rules decorated with small diamond-shaped nodes at regular intervals. **Structural Principles:** - **Cabinet Grid:** Within each stacked section, content is arranged in a **2x2 or 3-column cabinet layout** that references the compartmentalized drawers of a specimen cabinet. Each compartment has a thin border (1px solid #6B5E4F) with slightly rounded corners (2px) and an inset shadow that suggests depth, as if the content sits recessed into the surface. Compartments are never perfectly uniform -- the grid uses `grid-template-columns: 1.1fr 0.9fr 1fr` or similar subtle asymmetries to avoid the sterility of perfect grids. - **Vertical Rhythm as Geological Strata:** The spacing between stacked sections increases subtly as the user scrolls deeper -- 4rem between the first two sections, 5rem between the next, 6rem further down -- mimicking the way geological strata thicken with depth. This creates an unconscious sense of descending into richer, denser material. - **Ornamental Headers:** Each section begins with a header treatment where the section title is flanked by decorative rules. The rules use CSS `border-image` with a repeating diamond pattern generated from a small inline SVG. The title itself is centered within a "cartouche" -- a rounded rectangular frame with small ornamental flourishes at the four corners, drawn with CSS borders and pseudo-elements. The cartouche references Victorian bookplate designs. - **No Global Navigation Bar:** Navigation is handled through a fixed, narrow sidebar on the left (64px wide) that contains only icon-based links -- small crystalline SVG icons (a hexagonal prism for home, a faceted gem for categories, a stacked-crystal formation for archives). These icons scale on hover with a smooth 300ms ease-out transition. The sidebar has no background color, only a faint right border (1px solid #D4C5B0) that appears on scroll after the first viewport. - **Footer as Mineral Specimen Card:** The footer is styled as a vintage specimen label -- centered text block with a double-rule border, the domain name in small caps, and a date stamp in the style of a museum accession number. ## Typography and Palette **Typography:** - **Display / Headlines:** "Alfa Slab One" (Google Fonts) -- a robust, high-contrast slab serif with the weight and authority of Victorian industrial signage. Its thick serifs and heavy strokes evoke the engraved lettering on brass museum placards. Used at 2.8rem-4.5rem for primary headings, always in sentence case. Letter-spacing: +0.02em. Line-height: 1.15. The typeface's solidity anchors each section visually, grounding the ornamental elements with typographic mass. - **Section Titles / Subheadings:** "Rokkitt" (Google Fonts) -- a friendlier slab serif with more open counters and a slightly softer presence than Alfa Slab One. Weight 500 at 1.4rem-2rem for section subtitles and card headers. Letter-spacing: +0.01em. Line-height: 1.3. Rokkitt bridges the gap between the monumental display type and the readable body text, maintaining the slab-serif family identity while adding warmth. - **Body Text:** "Lora" (Google Fonts) -- a well-balanced serif with roots in calligraphy, providing excellent readability at body sizes while retaining enough character to harmonize with the slab-serif headings. Weight 400 for body, 600 for emphasis. Size: 1.05rem. Line-height: 1.72. The generous line-height gives body text the breathing room of a well-typeset Victorian reference book. Paragraph spacing: 1.4em. - **Captions / Labels / Metadata:** "IBM Plex Sans" (Google Fonts) at weight 300, 0.8rem, letter-spacing +0.04em. Used for dates, categories, specimen-card labels, and sidebar icon tooltips. The clean sans-serif provides functional contrast against the serif-heavy hierarchy, playing the role of the penciled annotations a curator might add to a printed label. **Palette:** The palette is **muted** in the specific register of aged museum interiors -- colors that have deepened and mellowed over decades, absorbing the amber of gaslight and the dust of scholarship. Every color references a specific mineral or museum material: | Color | Hex | Reference | |-------|-----|-----------| | Smoky Quartz | `#3D3228` | Primary text, deepest tone -- the near-black of smoky quartz crystals | | Aged Mahogany | `#6B5E4F` | Secondary text, borders, divider lines -- polished Victorian cabinet wood | | Mica Flake | `#B8A998` | Tertiary elements, hover states, muted accents -- the silvery warmth of mica | | Selenite Glow | `#E8DED1` | Primary background, section surfaces -- the translucent warmth of selenite | | Calcite White | `#F4F0EA` | Card backgrounds, elevated surfaces -- the clean cream of calcite specimens | | Bismuth Iridescence | `#7B6D8A` | Accent color for links, active states, icon highlights -- the muted purple of oxidized bismuth | | Pyrite Gleam | `#A89040` | Sparingly used accent for special elements, awards, featured content -- fool's gold | | Rose Quartz | `#C4A6A0` | Soft accent for callouts, blockquotes, gentle emphasis -- pink quartz | Background gradient: sections alternate between `#F4F0EA` and `#E8DED1`, creating a subtle rhythm of lighter and warmer without jarring contrast. The alternation reinforces the stacked-sections structure, making each "cabinet" visually distinct. ## Imagery and Motifs **Icon-Heavy Visual Language:** The primary imagery mode is **icon-heavy** -- every concept, category, and navigation element is represented by a bespoke SVG icon drawn in a style that merges Victorian engraving linework with crystallographic geometry. Icons are not flat or minimal; they have internal detail, hatching lines, and faceted surfaces that reward close inspection. Each icon is built from a limited set of geometric primitives (hexagons, rhombuses, triangles, circles) arranged to suggest crystalline growth. Specific icon treatments: 1. **Faceted Gem Icons:** Category icons are rendered as top-down views of cut gemstones -- each category gets a unique cut (brilliant, emerald, marquise, pear, cushion). The facet lines are drawn with 1px strokes in `#6B5E4F`, and each facet plane gets a subtly different shade from the muted palette, creating the illusion of light refraction without gradients or glow effects. On hover, the facets shift color slightly (a 200ms transition), as if the gem is being rotated under a lamp. 2. **Crystal Growth Diagrams:** Decorative illustrations between sections show schematic crystal growth patterns -- dendritic branching, hexagonal columnar formations, twinned crystals. These are rendered as thin-line SVGs (stroke-width: 0.75px) in `#B8A998` and serve as visual breathing space. They are not background images; they are foreground decorative elements centered between sections, scaled at roughly 120px by 80px, small enough to register as ornament rather than illustration. 3. **Specimen Labels:** Metadata blocks (dates, tags, reading time) are styled as museum specimen labels -- a small rectangular card with a thin double border, the metadata text in IBM Plex Sans at small size, and a small decorative element (a tiny crystal icon or a miniature engraved rule) at the top. These labels are positioned consistently in the upper-right corner of content cards, slightly overlapping the border, as if pinned to the specimen. 4. **Hatching Patterns:** Background textures use CSS-generated hatching -- fine diagonal lines (45deg, 1px wide, spaced 8px apart) in `rgba(59, 50, 40, 0.03)` overlaid on section backgrounds. This mimics the cross-hatching technique of Victorian engravings and adds tactile depth without images. Different sections vary the hatching angle (45deg, 135deg, 90deg) for subtle variation. **Crystalline Motifs:** The overarching motif system is **crystalline** -- referencing the ordered, geometric beauty of mineral crystals. This manifests as: - Section dividers shaped like crystal cross-sections (hexagonal outlines with internal facet lines) - Corner ornaments on section frames that resemble the termination points of quartz crystals -- pointed, angular, but delicate - A repeating background pattern of tiny diamond shapes (3px by 3px) in `rgba(59, 50, 40, 0.015)` that tiles across the full page, barely visible but adding a subtle lattice texture - The cartouche frames around section titles incorporate crystal geometry: the corners extend into small pointed projections, and the top edge has a shallow chevron peak, referencing a crystal's natural termination ## Prompts for Implementation **Full-Screen Narrative Experience:** The site opens to a full-viewport screen of Selenite Glow (`#E8DED1`) with the hatching texture barely visible. The domain name "tanso.wiki" is set in Alfa Slab One at 4rem, positioned at 40% from the top, centered horizontally. Below the name, a single line in Lora italic at 1rem reads as a subtitle -- something like "A crystallography of knowledge" -- in Mica Flake (`#B8A998`). There is no navigation visible, no menu, no call to action. Just the name, the line, and the faintest suggestion of crystal lattice pattern in the background. After 60vh of emptiness, the first section begins to appear. **Scale-Hover Interaction Pattern:** All interactive elements use the **scale-hover** pattern as the primary interaction feedback: - Content cards scale to `transform: scale(1.02)` on hover with a `transition: transform 280ms cubic-bezier(0.25, 0.46, 0.45, 0.94)`. The scale is subtle -- barely perceptible but enough to create a sense of the card lifting toward the viewer, like a specimen drawer being pulled open slightly. - Sidebar icons scale to `transform: scale(1.15)` on hover with the same timing, and simultaneously shift their stroke color from `#B8A998` to `#7B6D8A` (Bismuth Iridescence). - Section headers with cartouche frames: on hover, the cartouche border transitions from `#6B5E4F` to `#A89040` (Pyrite Gleam) over 400ms, as if the brass frame is catching light. - Links within body text do not scale but instead gain a subtle `border-bottom: 1px solid #7B6D8A` that draws in from the left using a `width` transition on a pseudo-element (underline-draw complementing the scale-hover). **Stacked Section Reveal:** As the user scrolls, each stacked section fades in with a combined `opacity` and `translateY(12px)` animation, triggered when the section enters 15% of the viewport. The animation duration is 600ms with an ease-out curve. Sections do not stagger -- each one animates independently when it enters view. This creates a gentle, unhurried sense of each display case being illuminated as you walk past it in the museum. **Crystal Growth Animation:** The decorative crystal diagrams between sections animate their stroke paths on scroll-entry. Using CSS `stroke-dasharray` and `stroke-dashoffset`, the crystal lines appear to grow outward from a central seed point over 1200ms, mimicking actual crystal growth. This animation plays once and does not repeat, leaving the completed crystal diagram as a static ornament. **Cabinet Card Interaction:** Within the grid layouts, clicking a cabinet card expands it smoothly to fill the section width (the other cards in the row fade to 0.3 opacity), revealing additional content. This expansion uses `max-height` and `grid-column: 1 / -1` with a 400ms transition. A small "close" icon (a crystalline X shape -- two crossed crystal needles) appears in the upper right. This progressive-disclosure pattern keeps the initial view clean while rewarding exploration. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, hero images with stock photography, gradient overlays on images, floating chat widgets, cookie banners as design elements, hamburger menus, parallax scrolling (overused at 73%), scroll-triggered animations on every element (overused at 97%), warm palette as primary approach (overused at 100%), playful tone (overused at 99%). ## Uniqueness Notes **Differentiators from other designs:** 1. **Victorian-Ornate Aesthetic at 0% Frequency:** No other design in the portfolio uses the victorian-ornate aesthetic. This is a completely unrepresented visual territory. While "vintage" motifs appear at 88%, the specific Victorian approach -- museum cabinets, specimen labels, cartouche frames, engraved hatching, brass-and-mahogany material language -- is architecturally distinct from generic vintage styling. The Victorian frame is further specialized through crystallography rather than the typical botanical or industrial associations. 2. **Crystalline Motif System as Structural Logic:** The crystalline motif (8% frequency) is used here not as decoration but as the fundamental organizing principle. Crystal geometry dictates the shape of dividers, the angles of corner ornaments, the pattern of background textures, and the animation metaphor (crystal growth). No other design uses a motif system as a structural logic that governs layout, ornament, and animation simultaneously. 3. **Icon-Heavy Imagery at 3% Frequency:** Most designs rely on minimal imagery (95%) or photography (72%). This design inverts that by making detailed, faceted SVG icons the primary visual content. Each icon is a small artwork referencing gemstone cuts and crystal formations, not a generic line icon from a free icon set. The icon-heavy approach combined with Victorian engraving linework creates a visual density that is entirely absent from the portfolio. 4. **Slab-Serif Typography Family at 4% Frequency:** The triple slab-serif stack (Alfa Slab One / Rokkitt / Lora) creates a typographic identity rooted in Victorian industrial confidence. Most designs default to mono (99%) or humanist (39%) typography. The slab-serif approach, with its heavy serifs and mechanical rhythm, directly reinforces the museum-placard aesthetic and provides a weight and gravitas that lighter type families cannot achieve. 5. **Mineral-Referenced Color Naming:** Every color in the palette is named after a specific mineral specimen (Smoky Quartz, Selenite, Bismuth, Pyrite, Rose Quartz), creating a color system that is both functionally clear and thematically integrated. This naming convention reinforces the crystallographic identity at the design-token level, ensuring that even in code, the design language remains coherent. **Chosen seed/style:** aesthetic: victorian-ornate, layout: stacked-sections, typography: slab-serif, palette: muted, patterns: scale-hover, imagery: icon-heavy, motifs: crystalline, tone: calm-serene **Avoided overused patterns:** playful aesthetic (95%), centered layout (99%), mono typography (99%), warm palette (100%), scroll-triggered animations (97%), parallax (73%), stagger (59%), minimal imagery (95%), photography (72%), vintage motifs (88%), friendly tone (99%). The design intentionally steers into underrepresented territory across every category.