# Design Language for continua.club

## Aesthetics and Tone

**Design Thesis:** A pond viewed from directly above — frosted glass panels float on an earth-colored surface like lily pads over sediment; each panel is a card that flips to reveal the fish moving in the dark water beneath. The site is a membership club experienced as an observation deck over a Japanese garden pool.

The tone is not club-as-nightclub. It is club-as-members-room in a Kyoto machiya: hushed, unhurried, spatially aware. Every element has earned its place on the page the way stones are earned in a zen garden arrangement. Nothing performs. Nothing persuades. The site exists to be inhabited.

Formally: the page is a field of translucent panels — each one a frosted glass rectangle with a faint frost texture (not gradient blur, but a fine crystalline noise that reads as depth). The panels rest on a background that is warm earth: terracotta-adjacent, the color of dried river clay. Against that warmth the frost panels read cold and transparent. When hovered, each panel flips on its vertical axis to reveal the other face — the water-side — dark teal with a slow-moving tropical fish illustration in sparse ink lines. The flip is the site's only interaction ritual.

Monospace typography operates as haiku notation: every text element is set in a single mono font, kerned tight, set at rationed sizes. Text appears as a measured inscription, not marketing copy.

**What this site is not:** it is not a startup landing page in "Japanese minimalist clothing brand" aesthetic (white void, Noto Sans, strategic cherry blossoms). It is not glassmorphic blur-everything tech UI. It is not a nightclub promotional site. It is not aspirational luxury lifestyle photography.

**Why it fits continua.club:** "Continua" implies unbroken continuation, a membership that persists, a line that does not end. The pond metaphor is continuous — water never stops, fish are always present, the surface recomposes after every perturbation. The card-flip gesture is the only discontinuity: you choose to look below.

## Layout Motifs and Structure

**Macro structure:** Single centered column, 560px max-width on desktop. This is not the corpus's 85%-use-case "hero/CTA centered stack" — it is a **specimen sheet** format: items arrayed on a neutral ground, no chrome, no navigation rail, no sidebar. The page is a single vertical sequence of frosted cards.

**The card grid:** Cards are arranged in a strict 2-column CSS grid (on desktop) inside the 560px column, each card 240px × 320px, portrait format — the proportions of a specimen card or a playing card. On mobile, single column, same proportions. Cards do not break outside the column. The grid does not reflow into bento shapes or masonry.

**Spatial rhythm:** Cards are separated by 24px gaps. Between thematic groups of cards, a 60px spacer holds a single hairline (1px horizontal rule, 40% opacity). This spacer is the only divider — no headings, no section labels. The page scrolls as a single uninterrupted field.

**The frost surface:** The background is a full-viewport wash of `--clay` (the warm earth tone). Cards sit directly on this ground. There is no outer container, no frosted background behind the grid — the cards ARE the frost against the clay. No card has a drop shadow. Separation is achieved by the contrast between the card face and the ground, not by elevation.

**Off-center weight distribution:** The page header — wordmark and tagline — is set flush-left within the 560px column, not centered within it. This creates a deliberate left-lean against the otherwise grid-governed symmetry. The footer haiku sits flush-right. Left anchor and right anchor frame the card field between them without being present simultaneously on screen (they live at opposite vertical ends).

**Card anatomy (front face):**
- Top: a fine horizontal ink rule, 1px, `--ink` color, 100% card width
- Below rule: card title in mono, 11px, letter-spacing 0.15em, uppercase
- Main body: a single line-illustration of a tropical fish motif, rendered as SVG, `--ink` stroke, no fill, 1.2px stroke-width, centered in the card with 24px padding
- Bottom: a single line of mono body text, 13px, 80% opacity

**Card anatomy (back face, revealed on flip):**
- Background: `--abyss` (very dark teal)
- A tropical fish in slow, idle animation (fin-wave using SVG SMIL or CSS path interpolation)
- Two or three characters of mono text: a classification or a number, set at 10px, `--frost` color
- The fish does not fill the card — it occupies approximately 60% of the card area, positioned slightly off-center toward the bottom-left

**Flip mechanics:** On card hover (desktop) or card tap (mobile), the card rotates 180deg on the Y axis. Duration: 0.6s, ease: `cubic-bezier(0.4, 0, 0.2, 1)`. The flip is not a pop or bounce — it is a smooth, single-axis rotation with backface-visibility: hidden on both faces. No JavaScript required — pure CSS 3D transform.

**Header:** The wordmark `continua.club` is set at 28px mono, weight 400, no letter-spacing. Below it: the tagline in 11px mono, letter-spacing 0.2em, uppercase — set as a sparse phrase of seven words or fewer. The header occupies the top of the page with 60px top padding, 40px bottom padding before the grid begins.

**Footer:** A haiku — three lines of mono, 11px, right-aligned, `--ink` color at 60% opacity. 60px top padding. No links, no copyright line, no legal text.

## Typography and Palette

**Typography — single family, all weights:**
- [`IBM Plex Mono`](https://fonts.google.com/specimen/IBM+Plex+Mono) — weights 300, 400, 500 only. IBM Plex Mono was designed for technical documentation with humanist ink-trap details; at small sizes the ink traps read as quiet imperfection, like letterpress on thin stock. No other font is used anywhere on the page.
  - Wordmark: 28px / weight 400 / `--ink` / no letter-spacing
  - Card title: 11px / weight 500 / `--ink` / letter-spacing 0.15em / uppercase
  - Card body: 13px / weight 300 / `--ink` at 80% opacity
  - Tagline: 11px / weight 400 / `--ink` at 60% opacity / letter-spacing 0.2em / uppercase
  - Back-face classification: 10px / weight 400 / `--frost` / no letter-spacing
  - Footer haiku: 11px / weight 300 / `--ink` at 60% opacity / right-aligned

**Palette — authored, not borrowed:**

| Token | Hex | Role |
|-------|-----|------|
| `--clay` | `#c8a882` | Page ground: warm dried-river clay, the earth the pond sits in |
| `--clay-deep` | `#9e7c5a` | Hairline rules, bottom-edge accents — clay darkened by shadow |
| `--frost` | `#e8eff4` | Card face: pale cold white with a faint blue pull — frost on glass |
| `--frost-border` | `#c2d0d8` | Card edge: the rim of the glass panel, barely darker than the face |
| `--abyss` | `#1d3a3a` | Card back: deep teal, the dark water beneath the glass |
| `--abyss-mid` | `#2d5050` | Subtle panel texture on the back face |
| `--ink` | `#2a2018` | All text and SVG strokes: warm near-black, not cold gray |
| `--fish-line` | `#3a5a52` | Fish ink lines on the front face (muted teal, not black) |
| `--fish-live` | `#6bada0` | Fish color on the back face — the fish gains color when alive |

The palette logic: the warm earth tones (`--clay` family) are the world above the water; the cold teal tones (`--abyss` family) are the world below; `--frost` is the glass membrane between them. Text (`--ink`) reads warm against both the frost and the clay. The fish lines use the teal family to tie the illustration to the water world even when displayed on the frost face.

## Imagery and Motifs

**All imagery is custom inline SVG — no external images, no photography, no raster assets.**

**The fish library (five tropical fish, each unique):**
Each fish is a single-line-weight ink drawing in SVG, rendered in two versions: a front-face version using `--fish-line` stroke and an abyss-face version using `--fish-live` stroke with gentle SMIL animation. Fish are not cartoon; they are close to an ichthyology field-guide illustration — accurate lateral profile, visible fin structure, no eyes except a single circle, no fill, no gradient. Stroke-width 1.2px throughout.

1. **Moorish Idol** — the tall dorsal fin makes a dramatic vertical mass above a compact body; long trailing snout; three bold vertical stripes marked by varying density of parallel ink lines
2. **Mandarinfish** — compact body with elaborate psychedelic stripes; on the front face drawn in minimal line; on the back face given `--fish-live` stroke
3. **Longfin Bannerfish** — elongated dorsal filament extends to twice body length; elegant and structurally asymmetric without being decorative-asymmetric
4. **Copperband Butterflyfish** — narrow body, long snout, vertical copper stripes (ink-density hatching, no color fills)
5. **Leafy Seadragon** — the most elaborate; appendages read as plant matter; used as the footer haiku companion, the only fish that escapes its card

**The frost texture:** Each card face carries a very fine grain texture applied as an SVG `<feTurbulence>` filter at extremely low opacity (3–5%) — enough to break the flat fill and suggest crystalline surface without becoming a visible pattern. This is not noise-as-decoration; it is the physical quality of frosted glass.

**Pond surface motif:** The header area has a single full-width horizontal SVG element below the tagline: a ripple pattern — two or three concentric partial ellipses, `--clay-deep` stroke at 20% opacity, suggesting a stone just dropped. This is the only decorative non-card element on the page.

**The hairline grid:** Between card groups, the 1px horizontal rule uses `--clay-deep` at 40% opacity. It reads as a register mark, a specimen sheet separation. No label accompanies it.

## Prompts for Implementation

**The story:** A visitor opens the door to a members-only garden. They step onto a wooden veranda above a koi pond. Frosted glass panels are laid across the pond surface at regular intervals — each panel is a card in the club's collection. Looking at the panels, they see only frosted reflections of the sky and their own face. Reaching down and flipping a panel reveals the water beneath: a fish moving in its element, dark teal, slow. The visitor can flip each panel in turn. That is the entire site.

**HTML structure:**
- One `<main>` element with `background: var(--clay)`
- Inside: a `<header>` with wordmark and tagline, followed by a `<section class="pond">` containing the card grid, followed by a `<footer>` with the haiku
- The card grid is `display: grid; grid-template-columns: repeat(2, 240px); gap: 24px;` inside a centered 560px container
- Each card is a `<div class="card">` with two children: `<div class="card-front">` and `<div class="card-back">`, both absolutely positioned
- The flip uses `transform-style: preserve-3d` on the parent and `rotateY(180deg)` on `.card:hover`

**CSS 3D flip — exact prescription:**
```css
.card {
  width: 240px; height: 320px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}
.card:hover { transform: rotateY(180deg); }
.card-front, .card-back {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  border: 1px solid var(--frost-border);
}
.card-front { background: var(--frost); }
.card-back {
  background: var(--abyss);
  transform: rotateY(180deg);
}
```

**Fish animation on back face (SMIL):** Each fish SVG on the back face has its tail-fin path animated via `<animateTransform>` — a subtle ±2deg rotation on the fin's base point, 1.5s period, indefinite, begin 0. The body does not move. The fin reads as breathing, not swimming. The fish on the front face is static.

**Frost texture implementation:** Apply a CSS `backdrop-filter: none` (no blur — the frost is about texture, not blur). Use an SVG filter on each card-front:
```html
<svg width="0" height="0" style="position:absolute">
  <defs>
    <filter id="frost">
      <feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" result="noise"/>
      <feColorMatrix type="saturate" values="0" in="noise" result="gray"/>
      <feBlend in="SourceGraphic" in2="gray" mode="overlay" result="blend"/>
      <feComposite in="blend" in2="SourceGraphic" operator="in"/>
    </filter>
  </defs>
</svg>
```
Apply `filter: url(#frost)` to `.card-front` at very low opacity blending. If SVG filter creates performance issues, fall back to a CSS `background-image: url("data:image/svg+xml,...")` noise pattern at 4% opacity.

**Typography rendering:** Set `font-variant-numeric: tabular-nums` on all mono text. No antialiasing hints needed — IBM Plex Mono renders correctly at system defaults.

**What NOT to do:**
- Do not add `backdrop-filter: blur()` to cards — this destroys the pond-glass concept
- Do not add hover shadows or elevation changes — cards do not lift, they flip
- Do not add color fills to fish SVGs — line only
- Do not add section headings or labels — the page is silent except for the card titles and haiku
- Do not add a navigation bar — no nav exists
- Do not animate the background — the clay ground is static; only the fish move
- Do not make cards different sizes — strict 240×320px uniformity is the formal system
- Do not add call-to-action buttons — this is not a marketing page

**Responsive:** At ≤540px, the grid collapses to a single column of 240×320px cards, centered. The header and footer reflow to match the card width. Tap on mobile triggers the flip; no hover state needed.

**Page rhythm check:** At full desktop scroll, the user sees approximately two rows of cards (four cards) at a time, with the card aspect ratio creating a measured, page-like cadence. The page should feel like slowly turning through a catalogue of specimens, not scanning a product grid.

## Uniqueness Notes

1. **Card-flip as the only interaction, deployed as a pond-depth metaphor.** The corpus uses card-flip at approximately 3% (very rare). Those uses are typically "flashcard" UI or "pricing tier" toggles — functional, not atmospheric. Here the flip is the entire site concept: the glass panel above water. The flip has ontological meaning.

2. **Translucent-frost realized as crystalline SVG noise, not CSS blur.** The corpus treats translucent/glass as `backdrop-filter: blur()` uniformly. This site refuses blur entirely — the frost is texture (fine fractalNoise at low opacity), making the card look like actual frosted glass rather than a blurred window. No other design in the corpus uses SVG feTurbulence for its primary surface material.

3. **Tropical fish as ichthyology field-guide illustration in dual-state ink.** Motifs in the corpus at 85% use hand-drawn with loose organic energy. These fish are the opposite: precise lateral-profile drawings close to 19th-century natural history plates, with a second state (back face) where the fish gains color and motion. The illustration quality registers as scientific specimen, not decoration.

4. **Warm earth palette as the direct structural foil to a cool frost surface.** The corpus is dominated by warm palettes (97%) used uniformly throughout a design. Here the warmth is the background (clay ground) and the coolness is the foreground (frost card). The thermal contrast is the entire compositional logic — warm world / cold glass / dark water below. This split thermal palette has no precedent in the existing corpus.

5. **IBM Plex Mono used at haiku-scale sparsity across all text roles.** The corpus uses mono typography at 97% but typically as a secondary code-display or accent font alongside a display sans. This site commits mono as the *only* typeface for every text element — wordmark, title, body, footer — making it a typographic monolith. The IBM Plex Mono choice specifically brings humanist ink-trap warmth to an otherwise technical face, aligning with the warm/cool thermal palette logic.

**Seed:**
- aesthetic: japanese-minimal
- layout: centered
- typography: mono
- palette: translucent-frost
- patterns: card-flip
- imagery: line-illustration
- motifs: tropical-fish
- tone: grounded-earthy

**Design Thesis:** Frosted glass panels over a koi pond — each card is a membrane between the warm world above and the dark water below; flipping it is the only way in.

**Avoid Tropes:**
- Japanese-minimal as white void + cherry blossom + Noto Sans
- Frost as generic `backdrop-filter: blur()` glassmorphism
- "Club" as nightclub promotion energy
- Tropical fish as emoji or clip-art decoration

**Privilege:**
- Frost-as-texture over frost-as-blur
- Card-flip as ontological gesture, not UI pattern
- Thermal palette contrast (warm earth / cold glass / dark water)
- Mono typography as haiku notation — spare, measured, precise
<!-- DESIGN STAMP
  timestamp: 2026-05-07T09:01:06
  seed: unspecified
  aesthetic: Design Thesis:** A pond viewed from directly above — frosted glass panels float ...
  content_hash: db40da3eb7af
-->