# Design Language for tanso.group
## Aesthetics and Tone
`tanso.group` is a **pastel cyberpunk imperial court** — the aesthetic collision of a Heian-era lacquered cabinet thrown into a neon-soaked Tokyo data center, then frozen mid-shatter in chromatic glass. The word *tanso* (炭素, carbon) gives the site its molecular identity: carbon is the atom that forms both diamond and coal, both graphite and graphene — simultaneously mundane and extraordinary, ancient and hyper-future. The site embodies this duality.
Imagine a 15th-century Japanese feudal lord who has been uploaded to a cyberpunk megacity network. His retinue arrives not on horseback but in fragments of refracted light. His audience chamber is not a tatami room but a full-bleed void of deep indigo-black glass, where every surface is a soft mirror holding a reflection of itself in candy-orchid and mint vapor. Gold is still gold, but it's **gold that pulses at 0.8 Hz** — not warm amber gold, but cool **electrum-pale**, the color of a screen at maximum brightness behind fog.
The tone is **opulent-grand** without Western luxury conventions. No serif-and-marble hotel branding. No cream and navy. The grandeur is **cultural** — it speaks in chrysanthemum crests rendered as neon circuit-flowers, in kanji letterforms used as structural geometry, in the deep red-lacquer of a torii gate reinterpreted as a full-viewport threshold animation. The visitor doesn't arrive at tanso.group — they are **admitted** to it. The experience is ceremonial.
The palette is **pastel** — but these are not soft nursery pastels. They are **afterburn pastels**: the colors you see when you stare at neon too long and then look away. Candy violet-pink (#E8C6F5), electric mint (#C5F7E8), pale cobalt (#BFD9FF), and warm champagne-gold (#F9EFD0) against a dark-glass base (#0F0D1A, #1A1427). These pastels glow. They are not light — they are the **memory of light**.
---
## Layout Motifs and Structure
The layout is **full-bleed** — every section claims the entire viewport, edge-to-edge and top-to-bottom, with no border-radius, no container padding, and no white-space gutters at the viewport boundary. This is the **imperial full-bleed**: the kind of spatial command that says the content owns the space, not rents it.
**Grid architecture:**
The site is organized as a **vertical sequence of full-viewport panels**, each 100svh tall, designed to feel like sliding shoji screens — one gives way to the next through a **horizontal reveal swipe** driven by scroll. Each panel occupies the entire screen. There are no carousels, no tabs, no multi-column content grids.
Within each panel, content follows a **diagonal tension axis** — roughly NW-to-SE — rather than the standard Western reading axis. Elements are placed at 45° offsets from each other, creating a sense of compositional movement. A heading lands at the top-left. Its supporting content block lands at the bottom-right. The negative space between them holds a single decorative element: a glassmorphic card, a circuit-flower, or a vertical kanji stack.
**Threshold moment:** The first viewport is an entrance gate — a full-screen composition of the site's wordmark rendered in a split-tone: left half in pale cobalt against deep indigo-black, right half in candy orchid against deep indigo-black. A hairline of pure white (1px, 100svh tall) bisects the two halves. As the user scrolls, the two halves slide apart — left 45px left, right 45px right — revealing the site's tagline through the gap, as if parting a curtain.
**Glassmorphic cards** float within panels as accent objects, never as primary layout containers. Each card is a `backdrop-filter: blur(18px) saturate(160%)` surface with a 1px border at 35% white alpha, a background at 12% white alpha, and a subtle 8px box-shadow in one of the pastel accent colors at 20% alpha. Cards tilt on their magnetic axis when the cursor approaches — a 6° max tilt with transform-origin at the cursor's last known position relative to the card.
---
## Typography and Palette
**Type system (Google Fonts only):**
- **Display & wordmark — `Unbounded`** (Google Fonts, wght 200–900). Unbounded is a wide, geometric display face with extreme horizontal presence. Used at `clamp(48px, 9vw, 128px)`, `wght 800`, `letter-spacing: -0.04em`. Its geometric construction echoes grid circuits. The wordmark "tanso.group" is set in two lines: `tanso` above, `.group` below, with `.group` offset 1.2em to the right — creating a deliberate step asymmetry. The period before "group" is set in candy orchid (#E8C6F5).
- **Body & narrative — `Noto Serif JP`** (Google Fonts, wght 200–900). Japanese-script-aware serif. Used for body text at 16–18px, wght 300, line-height 1.85. Its native Japanese glyph design gives Western Latin characters a slightly wider, more ceremonial presence. When Japanese text appears (decorative kanji, section labels), it flows naturally in the same typeface at wght 700, producing kanji that feel structural rather than ornamental.
- **UI labels & metadata — `Space Grotesk`** (Google Fonts, wght 300–700). Used at 11–13px, wght 400, `letter-spacing: 0.12em`, all-caps. The contrast between Unbounded's display authority and Space Grotesk's compact technical legibility mirrors the site's duality: imperial ceremony + carbon-lattice precision.
**Palette:**
| Role | Hex | Name |
|------|-----|------|
| Background base | `#0F0D1A` | Deep void |
| Background secondary | `#1A1427` | Dark indigo glass |
| Surface (glassmorphic) | `rgba(255,255,255,0.08)` | Ghost surface |
| Accent 1 (orchid) | `#E8C6F5` | Candy orchid |
| Accent 2 (mint) | `#C5F7E8` | Electric mint |
| Accent 3 (cobalt) | `#BFD9FF` | Pale cobalt |
| Accent 4 (champagne) | `#F9EFD0` | Electrum pale |
| Accent 5 (rose-red) | `#FF8FAB` | Neon sakura |
| Text primary | `#F2EDFF` | Ghost white |
| Text secondary | `#9B91B8` | Muted violet |
| Border accent | `rgba(232,198,245,0.25)` | Orchid ghost |
These five pastels rotate through the UI in an **elementally assigned** system: orchid for identity and branding, mint for growth and output, cobalt for thought and information, champagne for achievement and material, sakura for motion and urgency. No pastel is used arbitrarily — each carries its element-role wherever it appears.
---
## Imagery and Motifs
**No photography.** The corpus shows photography at 87% — tanso.group refuses it entirely.
**Four visual families:**
1. **Circuit-chrysanthemum** — The site's signature decorative element. A chrysanthemum crest (kamon-style, 16 petals radially symmetric) where each petal is not a curved organic shape but a **PCB trace path**: straight runs, 45° turns, rounded-pad terminus. Built as inline SVG with a 0.8px stroke in one of the five accent pastels. The chrysanthemum appears: (a) as a 480px hero motif behind the wordmark at 8% opacity, (b) as 24px section markers in the nav spine, (c) as animated 8px microglyphs that orbit the cursor at 60px radius when the user pauses for >1.5s.
2. **Glassmorphic data-cards** — Floating accent surfaces described in Layout above. Content inside cards is sparse: a kanji character (single, large, 80px, `wght 700 Noto Serif JP`), a three-digit number in `Unbounded` at 48px, or a short phrase in `Space Grotesk`. Each card's glassmorphic layer has a gentle gradient overlay — a 120° diagonal from `rgba(accent,0.08)` to `rgba(0,0,0,0)`.
3. **Kanji geometry** — Large kanji characters (炭, 素, 群, 光, 境) used as structural visual elements: placed at 20–30% opacity in `#F2EDFF` at 120–200px, rotated 0° or 90°, they form a secondary typographic layer beneath body content. They are not translations of adjacent text — they are **visual weights** that counterbalance the asymmetric diagonal axis of each panel.
4. **Carbon lattice lines** — The site's background on dark panels is not flat. A very faint (`stroke: rgba(191,217,255,0.04)`) hexagonal carbon-lattice grid (graphene topology) covers the full viewport as a fixed SVG background. Cell diameter: 48px. The lattice is not purely geometric — cells nearest the cursor dilate by +4px over 400ms, creating a slow **magnetic breath** across the background. This is the magnetic pattern from the seed: the lattice is the field, and the cursor is the magnet.
**Cultural motifs:**
- Torii-gate threshold: used as a full-viewport entry animation (see Layout) — two vertical bars sliding apart on first scroll
- Kamon chrysanthemum: adapted as circuit-flower (see above)
- Kanji as visual geometry: carbon-vocabulary characters as structural decoration
- Shoji-screen reveal: the horizontal panel-slide transition echoing traditional sliding partitions
- Nodate ceremony: the cursor halo (a soft 120px radial gradient at 4% white) moves through the void like a hand approaching a tea bowl — deliberate, present, slow
---
## Prompts for Implementation
Build tanso.group as **a ceremony of entry** — the site does not present information, it **admits the visitor to a space**. Each scroll event moves the visitor one ritual step deeper into the carbon palace. There are five panels, each an audience chamber.
**Panel 0 — The Gate (entry threshold):**
Full-viewport black. The wordmark `tanso` and `.group` appear in two halves, split by a 1px white vertical hairline at viewport center. On first scroll, a custom GSAP scroll-trigger fires: the left half translates -48px, the right half +48px over 600ms with `ease: power3.out`. The tagline appears through the gap: set in `Space Grotesk` 13px all-caps, `letter-spacing: 0.2em`, in `#9B91B8`. Behind the wordmark, the 480px circuit-chrysanthemum rotates at 0.4rpm continuously, very faint (6% opacity).
**Panel 1 — The Lattice Hall:**
The carbon graphene lattice is most visible here — opacity boosted to 8% from global 4%. Three glassmorphic cards float at diagonal positions (NW, center, SE) carrying the three pillars of tanso.group's identity. On scroll-enter, cards appear via a `backdrop-filter` transition: blur starts at 0 and rises to 18px over 800ms while opacity goes 0→1 with `transform: translateY(20px)→translateY(0)`. Magnetic tilt is active on hover.
**Panel 2 — The Kanji Void:**
Near-empty. The character 炭 (carbon) fills 40% of viewport height in `Noto Serif JP wght 700`, centered, at 6% opacity. A single glassmorphic card holds a haiku-length statement (three lines, Noto Serif JP wght 200, 18px). The statement fades in line by line with 200ms stagger. The kanji 炭 pulses from 6% to 10% opacity at 3s intervals with a sine ease — like breath.
**Panel 3 — The Circuit Garden:**
Multiple small circuit-chrysanthemums (24px) distributed across the panel using a Fibonacci spiral layout — 13 flowers total, placed at `r = 12px * sqrt(n)` with `θ = n * 137.5°` from panel center. Each flower is in a different accent pastel. On scroll-enter they unfurl: `stroke-dashoffset` animation from full offset to 0, staggered by 80ms per flower. This is the magnetic pattern made botanical — 13 glowing circuit-flowers arranged in the growth pattern of nature.
**Panel 4 — The Audience Chamber (contact/cta):**
Full-bleed. The background gradient shifts here to a very subtle `radial-gradient(ellipse at 30% 70%, rgba(232,198,245,0.08) 0%, transparent 60%)` — the only panel where orchid appears in the background. A single large centered element: the wordmark again, but smaller (40px), in `#F2EDFF`. Below it, a one-line contact prompt in `Space Grotesk`. A `` styled as a glassmorphic surface (same card treatment) with a placeholder in `#9B91B8`. Submit button: no background, just the orchid border and orchid text, expanding to 100% orchid background on hover over 200ms.
**Animation philosophy:**
- All transitions use `will-change: transform, opacity` and CSS `transform` only — no layout-triggering properties
- Magnetic tilt on glassmorphic cards: track `mousemove`, compute card-relative cursor position, apply `perspective(800px) rotateX(Ydeg) rotateY(Xdeg)` where max rotation is 6°
- Carbon lattice magnetic breath: on `mousemove`, find the 7 nearest hexagon cells to cursor, expand their `r` attribute by 4px using GSAP `gsap.to` with `duration:0.4, ease:'power1.out'`, then return to baseline on `mouseleave` with `duration:0.8`
- Cursor halo: a `position:fixed` `
` 120px × 120px, `background: radial-gradient(circle, rgba(255,255,255,0.04) 0%, transparent 70%)`, `pointer-events:none`, tracks cursor with `lerp(currentX, targetX, 0.12)` per frame for liquid lag
- Panel transitions: use `IntersectionObserver` with `threshold:0.3` to trigger panel-specific animations; no scroll-linked continuous transforms except the Gate panel
- **AVOID**: CSS `animation: spin` on large elements (use GSAP for smooth 60fps rotation), `box-shadow` with blur >20px on animated elements (performance), any `filter: blur()` applied to full-viewport elements
**Story arc:** Visitor enters (Gate) → the foundation reveals itself (Lattice Hall) → the essence is named in silence (Kanji Void) → the living system is shown growing (Circuit Garden) → the visitor is invited to join (Audience Chamber). The site never explains itself — it only demonstrates.
**AVOID throughout:** navigation bars with hamburger menus, hero sections with a background image and a centered h1, card grids with three equal columns, any use of `box-sizing: content-box` as default, footer with social links in a 4-column grid, stat counters (e.g. "500+ clients"), pricing tables, testimonial carousels.
---
## Uniqueness Notes
**Chosen seed:** aesthetic = `cyberpunk`, layout = `full-bleed`, typography = `display-bold`, palette = `pastel`, patterns = `magnetic`, imagery = `glassmorphic-cards`, motifs = `cultural`, tone = `opulent-grand`.
**Differentiators from corpus:**
1. **Pastel cyberpunk + Japanese cultural motifs = zero prior instances.** The corpus has cyberpunk at 12%, cultural at 7%, but no design combines them. The afterburn-pastel interpretation of cyberpunk — pastels as neon persistence-of-vision rather than soft-neutral — is a genuine innovation on the aesthetic.
2. **Carbon (tanso) as literal generative system.** The domain name drives the visual language: hexagonal graphene lattice as background, chrysanthemum-as-carbon-ring, kanji 炭 as the hero void character. The site's imagery is not decorative applied to a brand — it IS the brand's molecular identity made visible.
3. **Magnetic pattern applied at field scale.** The corpus uses magnetic for card/button micro-interactions. tanso.group applies it at environmental scale: the entire background graphene lattice is a magnetic field that responds to cursor position, making the void itself sentient to the visitor's presence.
4. **Ceremony-of-entry narrative structure.** Five panels as ritual stages (gate → hall → void → garden → chamber) draws from Japanese spatial ceremony rather than Western product-page conventions (hero → features → testimonials → CTA). The site admits visitors rather than pitching them.
5. **Cultural motifs as structure, not decoration.** Kamon chrysanthemum = brand mark = circuit topology. Torii gate = entry animation = panel-split threshold. Shoji screen = panel transition = scroll mechanic. Kanji = visual weight = layout counterbalance. Every cultural reference does structural work — none are applied as ornamental exotica.
6. **Unbounded + Noto Serif JP = no other site in corpus uses this pairing.** The combination of the most geometrically extreme wide sans (Unbounded) with a Japanese-aware serif (Noto Serif JP) creates a typographic tension that is both futuristic and ceremonial, matching the dual nature of the site's identity.