# Design Language for tanso.wiki ## Aesthetics and Tone tanso.wiki channels a holographic aesthetic — the prismatic shimmer, spectral color-shifting, and iridescent depth of holographic materials applied to a carbon (炭素/tanso) knowledge wiki. The site refracts — with the rainbow-edge beauty of holographic security labels, the layered depth of lenticular prints, and the color-shifting wonder of a carbon encyclopedia where knowledge literally shimmers with prismatic complexity. Inspiration draws from the holographic packaging designs of luxury brands, the prismatic data art of Refik Anadol, the iridescent interface experiments of iOS dark mode's adaptive colors, and the comprehensive knowledge architecture of Wikipedia's best scientific articles. The tone is nostalgic-retro — warm, backward-looking language that treats carbon science as a subject with deep historical roots, creating endearing contrast with the futuristic holographic visuals. The holographic treatment transforms carbon wiki content from dry encyclopedia entries into visually prismatic knowledge experiences — article categories shimmer with different spectral colors, cross-references create rainbow threads connecting related carbon topics, and scientific diagrams carry iridescent highlights suggesting the multi-faceted complexity of carbon chemistry and climate science. Each component carries holographic iridescence — subtle rainbow-edge effects on borders, color-shifting backgrounds that respond to scroll position, and prismatic accent highlights on important terms. The nostalgic tone creates unexpected warmth — futuristic holographic visuals paired with the voice of a beloved science teacher explaining carbon with fond historical perspective. ## Layout Motifs and Structure The layout uses a **parallax-sections** architecture — layered sections with parallax depth creating the holographic-depth quality of lenticular images where background and foreground move at different rates. **Parallax Depth System:** - Background layer: fixed with slow parallax (0.3x scroll speed) - Content layer: normal scroll speed with 800px max-width centered - Accent layer: faster parallax (1.2x) for decorative crystalline elements - Section spacing: 100px between major wiki sections - The parallax creates the holographic-depth quality of looking into layered prismatic surfaces **Section Sequence:** 1. **Prismatic Portal:** Hero with display-bold typography floating over holographic gradient, crystalline geometric prismatic shapes, 3d-render holographic knowledge-gem imagery 2. **Knowledge Spectrum:** Wiki categories in parallax-separated sections — skeleton-loading interactive prismatic content loading with 3d-render crystalline category icons 3. **Article Depths:** Detailed wiki content in deep-parallax layered reading with crystalline simplified prism motifs and holographic depth effects 4. **Reference Lattice:** Cross-references in parallax-linked article connections with crystalline network patterns 5. **Spectral Close:** Footer as holographic fade — nostalgic farewell with crystalline final prism geometry and rainbow-edge dissolution **Spatial Philosophy:** - Parallax depth creates the holographic quality of looking through layered prismatic knowledge - Different scroll speeds create the visual depth that holographic materials achieve physically - The combination of depth and shimmer makes browsing a carbon wiki feel like exploring a knowledge crystal ## Typography and Palette **Typography:** - **Headlines:** "Archivo Black" (Google Fonts) — display-bold at 2.0rem-3.0rem, weight 400. Its solid geometric forms anchor holographic shimmer with typographic stability. - **Body Text:** "Lora" (Google Fonts) — serif at 0.9rem, weight 400, line height 1.8. Its classical serif forms create the encyclopedic quality of established reference works. - **Data:** "IBM Plex Mono" (Google Fonts) — monospace at 0.8rem for chemical formulas, emissions data, and scientific references. - **Labels:** "Archivo Black" at 0.6rem, weight 400, uppercase, letter-spacing 0.15em. **Color Palette:** - **Deep Space:** #0e0e1a — deep near-black with blue tint for primary background - **Midnight Panel:** #161628 — slightly lighter dark for card surfaces - **Prismatic Violet:** #7c4dff — vivid violet for primary holographic accent - **Spectrum Teal:** #18ffff — bright teal for secondary prismatic highlight - **Rainbow Gold:** #ffd740 — warm gold for tertiary spectral accent - **Cool White:** #e8eaf0 — slightly blue-tinted white for text - **Dim Lavender:** #5c5c7a — muted lavender for secondary text - **Prism Border:** rgba(124,77,255,0.15) — violet-tinted border for holographic elements ## Imagery and Motifs **3D-Render Holographic Knowledge Gems:** Carbon topics visualized as holographic gem-like 3D forms — CSS 3D transforms creating crystalline polyhedron shapes with prismatic gradient fills. The gems create the precious-knowledge quality of carbon science crystallized into iridescent visual objects. **Skeleton-Loading Prismatic Content Loading:** Wiki articles load with holographic shimmer — skeleton screens using animated linear-gradient(90deg, transparent, rgba(124,77,255,0.08), transparent) sweeping across placeholder blocks at 1.5s intervals. The loading creates the holographic-activation quality of prismatic surfaces charging before revealing their content. **Crystalline Prismatic Geometry:** Decorative crystal structures — SVG multi-faceted diamond shapes with gradient-filled faces suggesting light refraction (each face a slightly different color from the prismatic palette at 0.06 opacity). The crystals create the crystallography quality of carbon's actual molecular geometry reflected in holographic visual language. **Rainbow-Edge Border Treatment:** Card borders with subtle rainbow effect — border-image: linear-gradient(135deg, #7c4dff, #18ffff, #ffd740, #7c4dff) 1. The rainbow edges create the holographic-security-label quality of authenticated knowledge entries. **Parallax Star Field:** Background fixed layer with subtle star-like dots — radial-gradient(circle at random positions, Cool White at 0.03 opacity) creating the cosmic quality of carbon knowledge floating in deep knowledge space. ## Prompts for Implementation Build the page as a holographic carbon knowledge wiki. Parallax sections: .parallax-bg { position: fixed; inset: 0; z-index: 0; } .content-layer { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; } .accent-layer { position: absolute; transform: translateY(calc(var(--scroll) * 0.2)); } Rainbow border: .holo-card { background: #161628; border: 1px solid transparent; border-image: linear-gradient(135deg, #7c4dff, #18ffff, #ffd740, #7c4dff) 1; padding: 32px; } Skeleton shimmer: .skeleton { background: #161628; position: relative; overflow: hidden; } .skeleton::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(124,77,255,0.08), transparent); animation: shimmer 1.5s infinite; } @keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } AVOID: Standard wiki platforms, plain encyclopedia layouts, and corporate knowledge bases. Let holographic prismatic beauty and parallax depth create a carbon wiki where scientific knowledge shimmers with the iridescent complexity of the subject it documents. ## Uniqueness Notes 1. **Holographic for carbon wiki:** Prismatic iridescence transforms encyclopedic content into visually stunning knowledge experiences. 2. **Parallax as holographic depth:** Multi-speed scrolling creates the lenticular-image quality of physical holographic materials. 3. **Nostalgic tone with futuristic visuals:** Warm backward-looking language creates endearing contrast with cutting-edge holographic aesthetics. 4. **Crystalline geometry as carbon molecular connection:** Prismatic crystal shapes reference carbon's actual crystalline molecular structures. 5. **Skeleton-loading as prismatic activation:** Holographic shimmer loading patterns make content appearance feel like activating a holographic display. **Seed/Style:** aesthetic: holographic, layout: parallax-sections, typography: display-bold, palette: cool-grays, patterns: skeleton-loading, imagery: 3d-render, motifs: crystalline, tone: nostalgic-retro **Avoided Overused Patterns:** corporate aesthetic, asymmetric layout, mono typography, warm palette, friendly tone, minimal imagery. This design uses holographic aesthetic, parallax-sections layout, display-bold typography, cool-grays palette, skeleton-loading patterns, 3d-render imagery, and nostalgic-retro tone.