# Design Language for tanso.bar

## Aesthetics and Tone

tanso.bar channels the atmosphere of a 1920s Tokyo cocktail lounge reimagined through frosted glass -- where the geometric precision of Art Deco ceiling panels meets the soft diffusion of light through translucent screens. The word "tanso" (炭素, carbon) anchors the visual identity: carbon is elemental, structural, found in both diamond facets and graphite's layered planes. The aesthetic merges the ornamental geometry of Deco masters like Tamara de Lempicka and Erte with the hazy, light-refracting quality of modern glassmorphism, producing something that feels simultaneously archival and futuristic -- like finding a speakeasy menu printed on frosted acrylic.

The tone is **friendly** but not bubbly -- think the warmth of a bartender who remembers your name and your drink, not the forced enthusiasm of a brand mascot. There is an ease here, a confidence that comes from knowing the craft. Every interaction should feel like a quiet nod of recognition, not a sales pitch. The friendliness is expressed through generous spacing, soft edges on sharp geometry, and transitions that feel like inhaling rather than clicking.

The Deco influence is not pastiche. Rather than gold-leaf borders and Gatsby cliches, the Art Deco DNA appears in the structural logic: chevron rhythms, sunburst radiations from focal points, stepped profiles on container edges, and the relentless use of symmetry-within-asymmetry that defined the movement's best architecture (the Chrysler Building's lobby, the Palais de Tokyo's facade geometry). These patterns are rendered in muted, desaturated tones -- dusty rose, aged brass, warm slate -- that strip the era of its glamour and reveal the underlying mathematics.

## Layout Motifs and Structure

The page is organized around **diagonal sections** -- content panels that slice across the viewport at angles between 3 and 7 degrees, creating a dynamic zigzag rhythm as the user scrolls. Each section is a parallelogram of content that overlaps its neighbor by 60-80px, producing layered depth without resorting to conventional stacked rectangles. The diagonals alternate direction: the first section tilts top-left to bottom-right, the next reverses, creating a chevron cascade that echoes Art Deco's signature zigzag motif.

**Structural Grid:**
- The underlying grid is a 12-column system, but columns are grouped into asymmetric clusters: 5-2-5, 4-4-4, or 7-5 splits. Content never sits in a centered, symmetrical arrangement. Instead, text blocks anchor to the left or right of their diagonal panel while imagery or decorative elements occupy the opposing space, creating internal tension within each section.
- The diagonal clip is achieved via `clip-path: polygon()` on section containers, with the angle calculated as `calc(100% - 4vw)` for responsive diagonal slopes. Each section has a `z-index` that increases downward, so higher sections visually tuck under lower ones as the user scrolls.

**Navigation:**
- A thin vertical sidebar on the left edge (48px wide) contains a rotated domain name "tanso.bar" set vertically in small caps, plus 4-5 dot indicators for section position. The sidebar uses a frosted glass effect (`backdrop-filter: blur(12px) saturate(1.4)`) with a semi-transparent background of `rgba(58, 52, 65, 0.35)`. It stays fixed during scroll and collapses to a minimal icon on viewports below 768px.

**Section Transitions:**
- Between diagonal panels, narrow "reveal strips" (20-30px tall) expose a continuous decorative pattern beneath all content -- a repeating wave-form SVG in muted brass (#A89272) on a dark ground. This pattern is only ever glimpsed through these strips, creating an archaeological sense of layered surfaces.

## Typography and Palette

**Typography:**

- **Display / Headlines:** "Poiret One" (Google Fonts) -- a geometric Art Deco display typeface with perfectly circular O's, pointed A's, and an unmistakable 1920s character. Used at weights 400 (its only weight), sizes 3rem-7rem. The geometric purity of Poiret One carries the Deco identity without requiring decorative borders or ornamental frames. Headlines are set in `text-transform: uppercase` with `letter-spacing: 0.12em` to emphasize the architectural quality of the letterforms. Line height is tight at 0.95 for large display sizes, allowing ascenders and descenders to nearly touch across lines.

- **Body / Running Text:** "Nunito" (Google Fonts) -- a rounded-sans typeface with friendly terminal shapes and excellent readability. Used at weights 300 (light) for body copy and 600 (semi-bold) for emphasis. Sizes range from 1rem to 1.15rem with line-height of 1.7 for comfortable reading. The rounded terminals of Nunito soften the angular Deco geometry, creating the "friendly" tonal balance -- sharp architecture, soft typography. `letter-spacing: 0.015em` for body text ensures airiness.

- **Accent / Labels:** "Josefin Sans" (Google Fonts) -- a geometric sans-serif with vintage Scandinavian character, used for navigation labels, section indicators, and metadata. Weight 300-400 at 0.75rem-0.9rem, all uppercase with `letter-spacing: 0.18em`. Josefin Sans bridges the gap between Poiret One's ornamental geometry and Nunito's soft roundedness.

**Palette:**

The muted-vintage palette draws from the specific color world of oxidized Art Deco metalwork and aged cocktail-lounge upholstery:

| Role | Color | Hex | Description |
|------|-------|-----|-------------|
| Background Primary | Charcoal Velvet | #2E2A35 | Deep warm-purple charcoal, the darkness of a dimly lit lounge |
| Background Secondary | Slate Smoke | #3A3440 | Slightly lighter warm gray for alternating diagonal panels |
| Accent Primary | Dusty Rose | #C4908A | Muted pink-terracotta, like faded Deco ceramic tiles |
| Accent Secondary | Aged Brass | #A89272 | Warm metallic tone for borders, rules, wave-form SVGs |
| Text Primary | Parchment | #E8E0D4 | Warm off-white with yellow undertone for body text |
| Text Secondary | Faded Linen | #B8AFA3 | Desaturated warm gray for secondary text and labels |
| Highlight | Verdigris | #7A9E8E | Muted green-teal for interactive states and focus indicators |
| Deep Accent | Oxblood | #6B3A3A | Dark muted red for hover states and decorative details |

The palette avoids pure whites and pure blacks entirely. All contrasts are achieved through the warm charcoal-to-parchment range, maintaining the muted-vintage character even at maximum contrast points. Gradients, when used, are subtle: `linear-gradient(135deg, #2E2A35, #3A3440)` for panel backgrounds, never more than two stops, never vivid.

## Imagery and Motifs

**Glassmorphic Cards:**
The primary visual element throughout the site is the glassmorphic card -- translucent panels that float above the diagonal section backgrounds. These cards use:
- `background: rgba(58, 52, 65, 0.25)` (a tinted version of the charcoal background)
- `backdrop-filter: blur(16px) saturate(1.3)`
- `border: 1px solid rgba(232, 224, 212, 0.12)` (a ghostly parchment border)
- `border-radius: 2px` (nearly sharp corners -- Deco prefers geometry over softness)
- A subtle inner shadow: `box-shadow: inset 0 1px 0 rgba(232, 224, 212, 0.08), 0 8px 32px rgba(0,0,0,0.25)`

Cards are used for text blocks, image containers, pull-quotes, and navigation overlays. They never appear centered -- always offset within their diagonal section, anchored to one edge with 60-70% width, allowing the diagonal background pattern to breathe around them.

**Wave-Form Motifs:**
The signature decorative element is a generative wave-form pattern rendered as inline SVG. These waves reference both Art Deco's love of repetitive geometric patterns and the carbon/tanso concept (electron orbital wave functions). The wave-form is constructed from layered sine curves with varying amplitudes and frequencies:
- Base wave: `amplitude: 12px, frequency: 0.008, phase: 0` in Aged Brass (#A89272) at 60% opacity
- Second harmonic: `amplitude: 6px, frequency: 0.016, phase: Math.PI/3` in Dusty Rose (#C4908A) at 40% opacity
- Third harmonic: `amplitude: 3px, frequency: 0.032, phase: Math.PI/6` in Verdigris (#7A9E8E) at 25% opacity

These wave SVGs serve as section dividers (running horizontally between diagonal panels), as background textures (tiled and faded to 8% opacity behind glassmorphic cards), and as decorative borders inside the fixed sidebar. The waves animate slowly via `requestAnimationFrame`, shifting phase by 0.002 per frame, creating an ambient breathing motion that is felt more than seen.

**Art Deco Geometric Accents:**
Stepped corner ornaments appear on glassmorphic cards -- small L-shaped bracket decorations at two opposing corners (top-left and bottom-right) rendered as CSS pseudo-elements. These use the Aged Brass color at 40% opacity and are constructed from three nested right angles, each stepping inward by 4px, echoing the stepped-pyramid motif found in Deco architecture. The ornaments are 24px x 24px and scale down to 16px x 16px on smaller viewports.

**Sunburst Focal Points:**
At the intersection of each diagonal section transition, a subtle radial gradient creates a sunburst effect: `radial-gradient(ellipse at center, rgba(168, 146, 114, 0.15), transparent 60%)`. This catches the eye at the moment of transition and reinforces the Deco sunburst motif without being literal or kitschy.

## Prompts for Implementation

**Full-Screen Narrative Experience:**
The site opens to a full-viewport scene: the deep Charcoal Velvet (#2E2A35) background with a single large glassmorphic panel floating slightly off-center (55% from left, 40% from top). Inside this panel, "tanso.bar" is set in Poiret One at 6rem, uppercase, letter-spaced at 0.14em, in Parchment (#E8E0D4). Below the name, a single wave-form SVG animates gently across the full width of the card. Below the wave, a line in Nunito Light at 1.1rem reads as a subtitle. No navigation is visible. No call to action. The vertical sidebar fades in after 1.5 seconds. The first scroll event triggers the diagonal cascade.

**Slide-Reveal Animation System:**
All content within diagonal sections enters via slide-reveal animations. As a section scrolls into the viewport (detected via `IntersectionObserver` with `threshold: 0.15`), its glassmorphic cards slide in from the direction of the diagonal's tilt -- if the section tilts left-to-right, cards slide in from the left; if right-to-left, from the right. The slide uses CSS transforms: `translateX(-80px)` to `translateX(0)` combined with `opacity: 0` to `opacity: 1`, eased with `cubic-bezier(0.25, 0.46, 0.45, 0.94)` over 800ms. Cards within the same section stagger by 150ms, creating a cascading reveal that follows the diagonal's direction.

**Wave-Form Animation Details:**
The wave-form SVGs are generated via a small JavaScript function that draws `<path>` elements using `M` and `C` (cubic bezier) commands. On each animation frame, the phase offset shifts, causing the waves to drift horizontally. The animation is paused when the element is outside the viewport (using the same `IntersectionObserver` setup) to conserve performance. On hover over a glassmorphic card that contains a wave-form, the wave's amplitude increases by 50% over 400ms (`transition: all 0.4s ease`), creating a gentle "breathing" response to interaction.

**Diagonal Section Construction:**
Each section is a `<section>` element with:
```css
.diagonal-section {
  position: relative;
  padding: 6rem 0;
  clip-path: polygon(0 4vw, 100% 0, 100% calc(100% - 4vw), 0 100%);
  margin-top: -4vw;
}
.diagonal-section:nth-child(even) {
  clip-path: polygon(0 0, 100% 4vw, 100% 100%, 0 calc(100% - 4vw));
  background: #3A3440;
}
.diagonal-section:nth-child(odd) {
  background: #2E2A35;
}
```
The overlapping `margin-top: -4vw` ensures panels interlock seamlessly, and the alternating clip-paths create the chevron rhythm.

**Glassmorphic Card Interaction:**
On hover, glassmorphic cards undergo three simultaneous changes over 300ms:
1. `backdrop-filter: blur(20px) saturate(1.5)` (increased blur and saturation)
2. `border-color: rgba(200, 144, 138, 0.25)` (border shifts toward Dusty Rose)
3. `transform: translateY(-2px)` (subtle lift)
These interactions are gentle and never jarring -- the friendly tone expressed through motion.

**Storytelling Flow:**
The diagonal sections tell a vertical story. Each section is a "chapter" that reveals more about the domain's identity. The narrative structure is: Introduction (hero) -> Philosophy (what tanso means) -> Craft (what is made here) -> Process (how it is made) -> Connection (how to reach out). No section contains a pricing table, stat grid, or call-to-action button. The final section's glassmorphic card contains only a single line of text and an email address, set in Josefin Sans, letting the viewer decide if they want to reach out. AVOID: CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, feature comparison tables.

**Responsive Behavior:**
Below 768px, diagonal angles reduce from 4vw to 2vw (less dramatic but still present). Glassmorphic cards expand to 90% width. The sidebar collapses into a small fixed icon (a stepped Deco bracket) at the top-left corner that, on tap, expands into a full-screen frosted overlay with navigation dots. Wave-form SVGs reduce to a single layer (base wave only) to conserve rendering budget.

## Uniqueness Notes

**Differentiators from other designs:**

1. **Diagonal-Section Chevron Cascade:** Only 2% of designs use diagonal-sections. This design makes the diagonal not merely decorative but structural -- the entire page architecture is built on interlocking parallelogram panels with reveal strips between them that expose a hidden wave-form substrate. The chevron rhythm created by alternating diagonals is a direct Art Deco quotation (the zigzag motif of the Chrysler Building's crown) translated into CSS clip-paths, which is architecturally distinct from every centered, stacked, or grid-based layout in the portfolio.

2. **Glassmorphic Cards on Muted-Vintage Ground:** Glassmorphism at 3% frequency is typically paired with bright, modern palettes (blues, purples, neon accents). This design subverts the convention by placing glassmorphic blur effects against a muted-vintage palette of warm charcoals, dusty rose, and aged brass. The result is glass that looks like frosted antique mirrors rather than iOS notification panels -- the same technique producing an entirely different emotional register.

3. **Generative Wave-Form as Structural Ornament:** Wave-form motifs at 3% frequency are typically background decoration. Here, the layered sine-curve SVGs serve triple duty: section dividers visible through reveal strips, ambient card backgrounds, and sidebar decorative elements. The three-harmonic wave system (base + second + third harmonic in three different palette colors) creates a scientific/mathematical visual language that ties directly to the "tanso" (carbon) concept -- electron orbitals rendered as Art Deco ornamental borders.

4. **Poiret One + Nunito Typographic Tension:** The pairing of a severe geometric Deco display face (Poiret One) with a soft rounded-sans body face (Nunito) creates a specific tonal contrast: architectural precision softened by human warmth. This pairing does not appear in any existing design in the portfolio and directly encodes the "friendly Art Deco" concept at the typographic level.

5. **Reveal Strips as Archaeological Layering:** The narrow gaps between diagonal sections that expose the wave-form substrate beneath create a sense that the page surface is an excavation -- that there are layers beneath the visible content. This archaeological metaphor is unique to this design and gives the scroll experience a quality of uncovering rather than simply consuming.

**Chosen seed/style:** aesthetic: art-deco, layout: diagonal-sections, typography: rounded-sans, palette: muted-vintage, patterns: slide-reveal, imagery: glassmorphic-cards, motifs: wave-forms, tone: friendly

**Avoided patterns from frequency analysis:**
- Avoided centered layout (99%) -- used diagonal-sections instead
- Avoided mono typography (99%) -- used rounded-sans (Nunito) with Deco display (Poiret One)
- Avoided warm palette as primary descriptor (100%) -- used muted-vintage with warm undertones but desaturated, not warm-dominant
- Avoided scroll-triggered as primary pattern (97%) -- used slide-reveal as the signature animation, with IntersectionObserver as the trigger mechanism but the visual identity being the directional slide, not the scroll-trigger itself
- Avoided minimal imagery (95%) -- used glassmorphic-cards as primary imagery mode with generative wave-form SVGs
- Avoided vintage motifs (89%) -- used wave-forms as primary motif, with Deco geometry as secondary
- Avoided playful aesthetic (96%) -- used art-deco which carries formality softened by friendly tone rather than playfulness
<!-- DESIGN STAMP
  timestamp: 2026-03-11T10:21:26
  domain: tanso.bar
  seed: seed
  aesthetic: tanso.bar channels the atmosphere of a 1920s Tokyo cocktail lounge reimagined th...
  content_hash: 31e1f555c1e5
-->