# Design Language for tanso.bar

## Aesthetics and Tone

`tanso.bar` is a **deep-space celestial observatory in neomorphic tactility** — imagine a high-altitude telescope control room where every surface has been milled from a single slab of light-gray blue-tinted composite material, every button extruded rather than carved, and the entire interface is illuminated only by the cold blue glow of stellar coordinates scrolling across embedded readouts. Neomorphism here is not the cliché "soft UI button" pattern. It is **tectonic**: every raised element is a console panel pulled from the same parent substrate, lit from a fixed overhead source at upper-left, casting shadows that behave like industrial instrument housings in microgravity. The sensation is of floating over a control surface that has been designed by astrophysicists who moonlight as product designers.

The tone is **professional, sparse, self-assured** — a specialist tool for people who measure carbon flux, atmospheric trace-gas spectroscopy, or stellar emission spectra. It does not explain itself. It presents data and context the way a scientific instrument does: precisely labeled, beautifully spaced, zero decorative noise. The domain `tanso.bar` (炭素 = carbon in Japanese; .bar = atmospheric pressure unit) suggests atmospheric science instrumentation — that subtext runs beneath every design decision.

Mood references: JAXA mission control, ESA Earth observation dashboards, night-mode Wolfram Mathematica, pre-iPhone Palomar Sky Survey interfaces — but rendered with 2025 softness rather than CRT harshness.

## Layout Motifs and Structure

The layout follows a **strict F-pattern reading anatomy**. This is not the lazy interpretation (two horizontal bands plus a vertical strip). It is the *eye-tracked* version: the page front-loads the top horizontal band with the single most important conceptual payload — a live duotone photograph of a night sky observatory occupying the full viewport width at reduced height (48vh) — and then the second horizontal band (immediately below) delivers the crystallized value statement and primary navigation in a 1280px max-width container. From there, the vertical left strip of the F descends through three sequenced content nodes: mission context, instrument readouts/key metrics, and contact/data-access endpoints.

**Grid system:** 12-column, `1fr` per column, with a `clamp(20px, 3.5vw, 48px)` gap. The F-pattern is enforced by column-span logic:
- Band 1 (hero image): spans all 12 columns, full bleed
- Band 2 (title + nav): spans columns 1–10, with column 11–12 empty (deliberate right-trim creates F-pattern dropout)
- Content node A (mission): columns 1–7
- Content node B (readouts): columns 1–5
- Content node C (contact): columns 1–4

Each nested content node is a neomorphic panel: a `border-radius: 16px` container with background identical to the page substrate, `box-shadow: 8px 8px 24px #a8b8d0, -6px -6px 18px #ffffff` (convex), and an inner inset shadow at focus/hover state: `inset 4px 4px 12px #a8b8d0, inset -3px -3px 9px #f0f5ff`. Panels do not have borders. They are the same color as the page — raised by shadow alone.

## Typography and Palette

**Palette — Ethereal Blue substrate:**

The page background is `#dce8f5` — a desaturated, slightly cool blue-gray that reads as neither white nor blue, the color of high-altitude overcast sky at 08:00. Every neomorphic shadow is derived from this: dark shadow `#a8b8cf` (−15% lightness, +3% saturation), light shadow `#f0f7ff` (+9% lightness, desaturated). Accent blue `#2d6fa3` is used sparingly — data labels, active states, the wordmark's period. A secondary accent `#6fa8d4` is the mid-tone used for graph lines, satellite track overlays, and the ripple animation origin rings. Text at full weight: `#1c2e42` (near-black with strong blue bias). Subdued text: `#5a7a96`. The duotone image is processed in `#2d6fa3` (shadows) ↔ `#dce8f5` (highlights) — the photograph dissolves into the substrate at its edges using a CSS `mask-image` radial gradient.

Full palette:
- Page substrate: `#dce8f5`
- Panel surface: `#dce8f5` (identical — relief is shadow only)
- Dark shadow: `#a8b8cf`
- Light highlight: `#f0f7ff`
- Primary text: `#1c2e42`
- Subdued text: `#5a7a96`
- Accent blue: `#2d6fa3`
- Mid-tone blue: `#6fa8d4`
- Duotone dark: `#2d6fa3`
- Duotone light: `#dce8f5`

**Typography (Google Fonts only, verified):**

- **Primary — `Space Mono`** (Google Fonts, regular 400 and bold 700 only — it has no variable axes). All body text, data labels, metric readouts, navigation items, and fine print run in Space Mono. This is not a compromise — it is the statement. Space Mono's fixed-pitch, slightly condensed letterforms read like instrument output: precise, unsentimental, deliberately mechanical. Set at `14px / 22px` for body, `12px / 18px` for data labels (tracking `+0.06em` to compensate for the condensed mono density at small sizes).

- **Display / Wordmark — `Rajdhani`** (Google Fonts, weight 600). Rajdhani is a geometric sans with subtle South Asian construction logic — angular ink traps, optically-precise joints — that reads as high-precision industrial lettering at display sizes. Used exclusively for the wordmark `tanso.bar` (42px, weight 600, tracking `−0.02em`) and for the three F-pattern section titles (`H2`: 28px, weight 600, uppercase, tracking `+0.12em`). No other headings. The contrast between Rajdhani's geometric construction and Space Mono's mechanical fixed-pitch creates a controlled type tension — the brand voice versus the instrument voice.

- **Accent numerals — `Space Mono`** at `clamp(36px, 5vw, 64px)` bold, used for the three key metric readouts in the instrument panel: atmospheric CO₂ ppm, measurement epoch, sensor altitude km. These numbers are the emotional heart of the page. They are displayed with real-looking precision (e.g., `424.62 ppm`, `2024.03.11 18:42 UTC`).

## Imagery and Motifs

**Duotone photography (single image, hero):**
One carefully selected high-contrast night sky photograph — a wide-angle shot of an observatory dome against Milky Way — processed as a CSS duotone: the image sits in a `<div>` with `filter: grayscale(1) contrast(1.1)`, overlaid by a CSS `mix-blend-mode: multiply` layer in `#2d6fa3`, and a `mix-blend-mode: screen` layer in `#dce8f5`. The result: the stars resolve as bright `#dce8f5` points against a deep `#2d6fa3` sky — the image becomes part of the substrate's color world rather than a foreign photographic intrusion. At 48vh height, the bottom 30% of the image dissolves using `mask-image: linear-gradient(to bottom, black 60%, transparent 100%)`, merging the photograph into the neomorphic page substrate.

**Star-celestial motifs:**
Stars appear in three contexts, all generated in SVG, never rasterized:
1. **Micro-star field** in the hero image periphery: an SVG overlay (position: absolute, pointer-events: none) containing ~120 `<circle>` elements, radii 0.5–2px, fill `#f0f7ff`, opacity randomized 0.3–0.9, scattered across the viewport with a slight upward concentration density gradient — they are denser near the observatory dome and sparser near the page bottom, reinforcing the illusion that the photograph continues into the UI.
2. **Constellation connector lines**: within the hero band, 6 selected star circles are connected by `<line>` elements, 0.5px stroke, `#6fa8d4` at 40% opacity, forming an abstract minimal asterism (not a named constellation — a proprietary tanso.bar pattern).
3. **Instrument panel star marker**: in the metrics readout section, a 12-pointed `<path>` star (10px diameter, `#2d6fa3`, no fill, 1px stroke) marks each live data point label — a disciplined icon that says "measurement taken at this coordinate." This star is the only decorative element that appears in the body of the page outside the hero.

**Ripple pattern:**
The ripple motif is used in exactly one place: a hover/focus state for the three neomorphic content panels. When a panel receives focus (keyboard) or hover (pointer), a circular ripple originates from the interaction point. The ripple is an SVG `<circle>` injected via JavaScript, starting at `r: 0, opacity: 0.35, stroke: #6fa8d4, stroke-width: 1.5px, fill: none`, animating to `r: 80px, opacity: 0` over 420ms with a cubic-bezier ease-out. It is clipped to the panel's border-radius. There is no fill flash, no color change — only the expanding ring. Multiple overlapping ripples are permitted and look like sonar returns on a tracking display.

## Prompts for Implementation

Build `tanso.bar` as a **single-page, no-scroll-jank, professionally restrained atmospheric science presence**. The page must feel like a precision instrument dashboard that happens to also communicate a company's identity — not a landing page that happens to use dark data aesthetics.

**Architecture:**
- Single `index.html` — no framework, no build step, no dependencies beyond two Google Fonts imports
- One `<style>` block with CSS custom properties for all palette values and shadow formulas
- One `<script>` block at end of body for ripple and micro-interaction logic only
- Hero image is a real `<img>` element with `object-fit: cover`, duotone applied via CSS filter stack
- All SVG (star field, constellation lines, instrument stars, ripple containers) inlined — no external SVG files

**Neomorphic shadow system (CSS custom properties):**
```
--shadow-raised: 8px 8px 24px #a8b8cf, -6px -6px 18px #f0f7ff;
--shadow-inset:  inset 4px 4px 12px #a8b8cf, inset -3px -3px 9px #f0f7ff;
--radius-panel: 16px;
--surface: #dce8f5;
```
Every interactive panel transitions from `--shadow-raised` to `--shadow-inset` on active state over `120ms ease`. This single rule defines the tactile language of the entire site — panels depress on click like physical console buttons.

**F-pattern enforcement:**
The CSS grid parent uses `grid-template-columns: repeat(12, 1fr)`. Band 2 (title/nav row) explicitly sets `grid-column: 1 / 11` — the missing 11–12 columns create white space dropout that anchors the F-pattern. Content nodes A, B, C each have different right-side column endpoints (7, 5, 4) — the descending taper of the F's vertical spine is structural, not decorative.

**Ripple implementation:**
```javascript
panels.forEach(panel => {
  panel.addEventListener('pointerdown', e => {
    const rect = panel.getBoundingClientRect();
    const cx = e.clientX - rect.left;
    const cy = e.clientY - rect.top;
    const svg = panel.querySelector('.ripple-layer');
    const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
    circle.setAttribute('cx', cx);
    circle.setAttribute('cy', cy);
    circle.setAttribute('r', 0);
    circle.setAttribute('fill', 'none');
    circle.setAttribute('stroke', '#6fa8d4');
    circle.setAttribute('stroke-width', '1.5');
    svg.appendChild(circle);
    circle.animate([
      { r: '0', opacity: 0.35 },
      { r: '80', opacity: 0 }
    ], { duration: 420, easing: 'cubic-bezier(0.4, 0, 0.2, 1)' }).onfinish = () => circle.remove();
  });
});
```

**Content specifics (no placeholders):**
- Wordmark: `tanso.bar` — Rajdhani 600, `#1c2e42`, 42px. Period in `#2d6fa3`. Below it in Space Mono 12px subdued: `atmospheric carbon measurement infrastructure`
- Hero image alt: `Wide-angle photograph of Mauna Loa Observatory dome against Milky Way, processed in ethereal blue duotone`
- Section A title (Rajdhani, uppercase, tracked): `MISSION` — followed by 3 paragraphs in Space Mono 14px about continuous CO₂ monitoring, high-altitude sensor networks, open scientific data
- Section B title: `CURRENT READINGS` — three metric panels showing `CO₂: 424.62 ppm`, `EPOCH: 2024.03.11 18:42 UTC`, `ALT: 3397m ASL`, each with star marker, each neomorphic inset
- Section C title: `DATA ACCESS` — Space Mono form with single email input and submit, neomorphic button styling

## Uniqueness Notes

**Chosen seed:** aesthetic: neomorphism, layout: f-pattern, typography: mono, palette: ethereal-blue, patterns: ripple, imagery: duotone-photo, motifs: star-celestial, tone: professional

**Differentiators from other designs in the registry:**

1. **Neomorphism as instrument housing, not soft UI cliché.** The registry shows neomorphism at 2% — and the few existing uses apply it decoratively to cards. tanso.bar uses neomorphism tectonically: the shadows are calibrated to simulate a physical control surface lit from a fixed overhead-left source, and every interactive panel behaves like a physical console button (depresses on active). This is neomorphism with mechanical rationale, not cosmetic softness.

2. **F-pattern as structural CSS grid logic, not a coincidence of stacking.** F-pattern appears at only 3% in the registry. Here it is not achieved through content width alone but through explicit `grid-column` endpoints that taper from 10/12 → 7/12 → 5/12 → 4/12 as the user's eye descends the page — the F's spine is encoded in the CSS grid, visible and intentional. No other design in the corpus has implemented the F-pattern this way.

3. **Duotone photography dissolved into substrate.** Duotone-photo sits at 3% usage. What makes tanso.bar distinct: the photograph does not float as a card or hero with hard edges — it melts into the page substrate via CSS mask and filter, so that the `#dce8f5` page color and the `#dce8f5` duotone highlight are the same value. The image fades out; the page fades in. The transition is invisible to the eye and structurally seamless.

4. **Space Mono as a conceptual choice, not a typographic default.** The registry shows mono typography at moderate frequency, but tanso.bar's mono selection is domain-specific: Space Mono was designed for code editors and technical instruments. On a site about atmospheric measurement infrastructure, it is not a stylistic quirk — it is a claim that the site itself is a data instrument, not a marketing presence. The type carries semantic weight.

5. **Ripple as sonar metaphor.** Ripple patterns at 10% in registry, typically used as click feedback. Here the single-panel ripple is explicitly framed as a sonar/radar return — expanding rings from interaction points on a scientific monitoring dashboard. The implementation details (no fill, stroke-only, multiple simultaneous rings permitted) enforce this reading. The ripple is not "you clicked something" — it is "a signal was emitted and is propagating."
<!-- DESIGN STAMP
  timestamp: 2026-05-11T21:31:02
  domain: tanso.bar
  seed: seed:
  aesthetic: `tanso.bar` is a **deep-space celestial observatory in neomorphic tactility** — ...
  content_hash: 538c4115016a
-->