# Design Language for nfth.ing

## Aesthetics and Tone

**nfth.ing** is read as *en-eth-ing* — the suffix of a present continuous act that has no clear antecedent. Something is *nfth-ing*, but you are never told what. The domain name is a wound in language: a gerund with its root amputated. The site leans into that amputation. It is a **botanical data archive** — a living record of organisms whose names have been systematically erased, corrupted, or fragmented by colonial taxonomy, habitat destruction, and institutional neglect. The data is real. The plants are real. The incompleteness is real.

The aesthetic is **raw-authentic botanical**: not the polished herbarium plates of Kew Gardens, not the Instagram-ready foliage flats of a studio florist — but field botany executed under difficult conditions: smudged annotations, damaged specimens, corrupted measurement files, scans interrupted mid-transfer, CSV exports with missing rows. The page looks like a scientist's working folder that was never meant to be a website. It became one anyway, because the plants needed somewhere to exist.

**Mood board:** A field notebook left in a car during a rainstorm. A soil core sample sealed in wax. A macro photograph of a fern's sorus that someone has tried to annotate in a note-taking app that crashed. A vintage data logger with the final reading frozen on screen. The terracotta dust of dry-season fieldwork. The deep green of something alive against all odds.

The tone is **unsentimental directness** — no romance about nature, no pastoral nostalgia. Plants are documented the same way epidemiologists document outbreaks: precisely, obsessively, with visible uncertainty margins. When a data field is unknown, the site shows `—` not a placeholder illustration. When a species record is contested, the site shows the conflicting sources side by side, with their hash fingerprints. Authenticity is demonstrated, not claimed.

## Layout Motifs and Structure

The page is built on an **organic-flow spine** — the structural metaphor is a river drainage basin seen from above. There is a main channel (the primary scroll axis) and tributary branches that fork off at irregular intervals to the left and right, each carrying a data-specimen cluster before rejoining the main flow. No grid. No columns. The branches are implemented as absolutely-positioned `<aside>` elements that float off the scroll axis and collapse into inline footnotes on mobile.

**Macro structure (top to bottom, seven growth nodes):**

1. **Root Node** — full-viewport opening. A generative SVG of rhizome structures, procedurally grown using a recursive branching algorithm seeded by the domain's hex hash. The wordmark `nfth.ing` floats at the center of the rhizome, set in Instrument Sans, tracked wide, in terracotta `#C8553D`. A subtitle in DM Mono, 12px, reads: `346 species / 91 with incomplete records / 14 names contested`. These numbers animate as a count-up on first load — not a hero animation, a data load.

2. **First Branch Node** — three specimens displayed as data cards but shaped like organism cross-sections: elliptical containers with SVG clip-paths derived from actual leaf silhouettes (genus *Selaginella*, *Platycerium*, *Utricularia*). Each card shows: binomial, collection date, collector initials, GPS precision radius, and a miniature radial bar chart (using `<canvas>`) showing completeness score for each of 12 data fields. Fields with missing values show as a gap in the radial ring, not a zero-fill.

3. **Main Channel — Data Stream** — a horizontally scrollable table (scroll axis perpendicular to page flow) showing a subset of the archive, 80 rows × 12 columns. The table is not styled like a table: rows alternate between terracotta-tinted `#F2E2D4` and near-white `#FAF5F0` backgrounds. Column headers are rotated 45° in the style of field data sheets. Cells with errors trigger the **shake-error** pattern: a 4-frame horizontal CSS shake animation (translateX: -3px, 3px, -2px, 0) at 180ms total, triggered on hover and on scroll-into-view for cells flagged as contested. A red-ochre underline `#B03A2E` marks contested values. No tooltip. No modal. The shake is the annotation.

4. **Tributary Branch — Measurement Morphology** — a branching data-visualization section built with inline SVG. Each measurement type (leaf area, water retention index, spore density) is rendered as a blob-morphology diagram: organic-blob shapes, sized proportionally, arranged in a loose scatter with slight rotational variance. Blobs use `border-radius` values that animate slowly (8s loop) between four pre-calculated organic polygon states via CSS `@keyframes`. Colors span the terracotta-warm palette. No axes. No legends. The scale relationship is the message.

5. **Contested Record Node** — two conflicting taxonomy entries for the same organism, displayed side-by-side in a split format. Each side shows its institutional source, hash fingerprint, and the specific fields where they diverge. Diverging fields are highlighted in deep amber `#C87533` on one side and dusty rose `#D4826B` on the other. A thin vertical `#C8553D` separator runs between them. No resolution is offered. The visitor is shown the conflict in full.

6. **Archive Depth Node** — a timeline visualization. Not a conventional horizontal timeline — a vertical root system diagram where each year is a root hair extending laterally from a taproot. The thicker root hairs represent years with more records; the thinner ones represent data gaps. Root hairs that terminate early indicate collection programs that were defunded or lost. Drawn in SVG with `stroke-dasharray` animation on scroll-entry.

7. **Terminal Node** — a full-bleed terracotta `#C8553D` panel, the sole moment of strong chromatic saturation on the page. White text: the total count of species with zero confirmed surviving specimens. Just a number. No context. No call to action. The page ends.

## Typography and Palette

**Typography is frutiger-clean** — the system uses two families from the clean, humanist sans tradition that Frutiger himself pioneered: legible at every scale, warmly geometric, optimized for extended reading in both data-dense and prose contexts.

- **Display and UI: [Instrument Sans](https://fonts.google.com/specimen/Instrument+Sans)**, weights 400 and 600. Used for the wordmark, section headings, and card labels. At display sizes (clamp(2.8rem, 6vw, 6.4rem)), tracked at +0.04em. At label sizes (11–13px), tracked at +0.08em. The letterforms have just enough optical personality — the single-story `a`, the slightly narrowed `G` — to feel like a working instrument rather than a neutral system font. No italic.

- **Body and annotations: [DM Sans](https://fonts.google.com/specimen/DM+Sans)**, weights 300 and 400. All prose, footnotes, data descriptions, and contested-record narratives are set in DM Sans. Line-height 1.72 for paragraph text, 1.4 for data annotations. Optical sizing enabled.

- **Data and codes: [DM Mono](https://fonts.google.com/specimen/DM+Mono)**, weight 400 only. Used for GPS coordinates, hash fingerprints, measurement values, and the contested-record fingerprints. 13px / 1.6 line-height. Prevents monospace from feeling like a "developer aesthetic" — DM Mono is warm-cut enough to read as a field instrument readout.

**Palette — terracotta-warm:**

| Role | Name | Hex |
|---|---|---|
| Primary accent | Field clay | `#C8553D` |
| Secondary accent | Dry ochre | `#C87533` |
| Error / contested | Raw sienna | `#B03A2E` |
| Surface warm | Specimen cream | `#FAF5F0` |
| Surface tinted | Dry parchment | `#F2E2D4` |
| Mid-tone earth | Fieldwork tan | `#D4826B` |
| Data ground | Soil dark | `#2C1810` |
| Text primary | Carbon ink | `#1A1008` |
| Text secondary | Clay gray | `#7A6355` |
| Divider | Vellum line | `#E8D5C4` |

No pure black. No pure white. No gray derived from a neutral base. Every color has a warm undertone — even the near-black `#1A1008` is brown-shifted. The site has no "digital" feeling. It feels like paper, earth, and oxidized iron.

## Imagery and Motifs

**Primary imagery is data-viz** — not photography, not illustration. The visual language is built from data rendered into shape:

- **Radial completeness rings** on every specimen card. Each ring has 12 segments representing 12 data fields. A complete segment is filled with `#C8553D`; an incomplete segment is a gap — the background shows through. The rings are drawn in `<canvas>` with a 0.8s draw animation on entry. No legend is shown for the rings on first view; hovering any ring reveals a tooltip-free overlay that expands the ring into a labeled spoke diagram in-place.

- **Organic-blob morphology visualizations** for measurement comparison. Blobs are generated using a custom CSS keyframe system that interpolates between four `clip-path: polygon()` states, each with 8 vertices placed on a near-circular distribution with ±18% radial variance. Five blobs in each morphology cluster, sized by measurement value, colored across the terracotta palette. The animation loop is 8–12s per blob (varied to prevent synchronization), `ease-in-out`, infinite. These blobs are the site's primary decorative and analytical element simultaneously.

- **Rhizome generative SVG** at the root node. Generated at page-load using a recursive `drawBranch()` function that takes the domain string `nfth.ing` as its entropy seed (SHA-256 the string, use first 32 bits as float for initial branching angle). Each branch forks at an angle derived from the golden ratio (137.5°), with a length decay of 0.72 per level and a maximum recursion depth of 9. Stroke color is `#C8553D` at the root, fading to `#D4826B` at depth 5+, at 15% opacity. Rendered as static SVG, not animated — a fossil record, not a live organism.

- **Root-system timeline** at Archive Depth Node. Lateral root hairs are horizontal SVG `<line>` elements with stroke-width proportional to record count. Root hairs drawn using `stroke-dasharray` / `stroke-dashoffset` with `IntersectionObserver`-triggered animation. Color: `#7A6355` for data-present years, `#E8D5C4` for gap years.

- **Shake-error micro-interaction** on contested data cells. The CSS animation uses `@keyframes shake { 0%{transform:translateX(0)} 20%{transform:translateX(-3px)} 40%{transform:translateX(3px)} 60%{transform:translateX(-2px)} 80%{transform:translateX(1px)} 100%{transform:translateX(0)} }` at 180ms total, `ease-in-out`, triggered both on hover and on initial scroll-entry (once, via `IntersectionObserver`). A red-ochre underline `#B03A2E` is always visible on contested cells; the shake adds temporal weight to an otherwise static marker.

**Absent imagery:** no photography, no stock illustration, no icon libraries, no background video. The only images on the page are data-rendered.

## Prompts for Implementation

Build nfth.ing as a **single-page botanical data archive** — a working scientific record that became a website by accident, and is indistinguishable from the kind of self-hosted data portal a small research institute would deploy with two weeks of Python and whatever CSS the grad student remembered. The visitor is a peer, not a customer.

**Every visual element must double as information.** The organic blobs are not decoration — they carry measurement data. The rhizome is not a logo background — it is the site's conceptual index. The shake is not whimsy — it is a data quality flag. If a visual element cannot be read for information, remove it.

**Narrative rhythm:** The page moves between dense data (the 80-row table, the radial rings) and sparse statement (the terminal node's single number). The density-sparsity oscillation is the storytelling. Do not smooth it. Do not add transitional prose. The juxtaposition is deliberate.

**Animation philosophy:** All animation is data-driven or interaction-driven. No decorative entrance animations. The blob morphology loops because measurement data is continuous, not because it looks nice. The rhizome is static because the record it represents is closed. The count-up on load communicates that data is being fetched/processed, not that a hero section is being revealed.

**Color discipline:** Terracotta is used structurally — as accent, error indicator, and terminal panel — never as background for prose. All prose sits on cream or parchment. Terracotta backgrounds get white text only. Never terracotta text on cream (contrast insufficient).

**Do not implement:** modal dialogs, hover tooltips (shake-error is the tooltip), sliding panels, sticky headers, navigation menus, filter controls, sorting controls, search bars, pagination UI, loading spinners (show a dashed `#E8D5C4` border rectangle while data loads — no spinner), CTA buttons, pricing blocks, testimonial rails, feature grids, newsletter signup, social proof, "above the fold" calls to action.

**Do implement:** CSS `scroll-snap` on the seven nodes (snap-type: y mandatory, snap-align: start), `IntersectionObserver` for the shake trigger and the root-hair timeline animation, `ResizeObserver` for the organic blob recalculation, `<canvas>` for the radial rings, inline SVG for everything structural.

**The horizontal data table** should use CSS `overscroll-behavior: contain` on its scroll container so the table scroll does not propagate to the page scroll. The table does not have a visible scrollbar — two faint terracotta arrows (◂ ▸) float at the table edges and fade on full scroll.

**Font loading:** Preload all three families via `<link rel="preload">`. Use `font-display: swap`. Fallback stack for Instrument Sans: `system-ui, -apple-system, sans-serif`. Fallback for DM Mono: `ui-monospace, "Cascadia Code", monospace`.

## Uniqueness Notes

1. **Data-viz as sole imagery, zero photography.** The frequency report shows photography at 89% — the most overused imagery pattern in the entire registry. nfth.ing uses no photographs. Every visual element is data-rendered: radial rings, organic blobs, generative rhizome SVG, root-hair timeline. This is not a stylistic rejection of photography; it follows directly from the domain premise (an archive of plants documented by incomplete records — the incompleteness is the image).

2. **Shake-error pattern deployed as a data quality flag, not as a form validation pattern.** The frequency report shows shake-error at 4% — underused and flagged as an error pattern. Most shake implementations are on form submit errors. nfth.ing uses shake on table cells containing contested taxonomy data, triggered both on hover and on scroll-entry. The shake is taxonomic uncertainty made kinetic. This is a novel use of the pattern that the frequency analysis implies no other site has attempted.

3. **Terracotta-warm palette with no neutral grays and no digital tones.** The frequency report contains no entry for terracotta as a palette. The site's entire chromatic range is derived from earth minerals (iron oxide, ochre, sienna, carbonized organic matter). No `#333`, no `#f5f5f5`, no HSL-neutral. The warm-shifted near-black `#1A1008` is a deliberate rejection of the digital-dark convention that dominates 13% of the registry as dark-mode.

4. **Organic-flow layout using a river-drainage basin metaphor.** The frequency report shows no entry for organic-flow as a layout pattern — it is genuinely unused. The tributary `<aside>` structure (branches forking off the main scroll axis) is an architectural decision derived from the domain's content (plant root systems, drainage morphology) rather than a grid convention. On desktop it creates a genuinely non-rectilinear reading path; on mobile it collapses to a single channel without losing content.

5. **Frutiger-clean typography (Instrument Sans + DM Sans + DM Mono) used in a scientific-instrument register, not a tech-startup register.** The frequency report shows frutiger-clean at 4% — underused. The three-family system (humanist sans for display, humanist sans for body, monospace for data values) is structured like a physical instrument's output: a printout from a device that was built to be read accurately, not attractively. No decorative type. No display serif. No italic.

**Chosen seed:** aesthetic: botanical, layout: organic-flow, typography: frutiger-clean, palette: terracotta-warm, patterns: shake-error, imagery: data-viz, motifs: organic-blobs, tone: raw-authentic

**Avoided patterns from frequency analysis:** photography (89% — most overused), hand-drawn (58% — heavily overused), editorial (52% — heavily overused), terminal aesthetic (31% — overused), glassmorphism (20% — overused), standard hero/CTA layout, neutral gray palette, dark-mode color convention.
<!-- DESIGN STAMP
  timestamp: 2026-05-09T19:48:46
  seed: seed:
  aesthetic: nfth.ing** is read as *en-eth-ing* — the suffix of a present continuous act that...
  content_hash: 46972c714a1e
-->