# Design Language for valuator.dev

## Aesthetics and Tone

valuator.dev is a tool for people who think in signal, not noise — analysts, founders, engineers who distill complex systems down to a single honest number. The site must feel like the moment before a verdict: still, precise, weighted with implication. It holds a tension the rest of the internet refuses to sit with: the tension between ancient organic life (botanical illustration's patient, hand-traced accuracy) and the aurora-lit frontier of machine intelligence.

The aesthetic is **japanese-minimal meets futuristic-cutting-edge** — a negative-space discipline where every pixel earns its place, crossed with the uncanny glow of next-generation computation. Wabi-sabi's comfort with imperfection is reinterpreted here as tolerance for honest ambiguity: a valuation is never perfectly certain, and the design says so. The page does not sell. It does not persuade. It demonstrates.

The tone is **futuristic-cutting-edge**: confident without arrogance, spare without coldness, precise without sterility. There are no case studies. No pricing tiers. No testimonial carousels. There is a field — a living botanical specimen under aurora light — and a number that emerges from it.

Earth tones ground the palette: deep humus, oxidized copper, pale bone. Against these, a glitch aurora flickers — not decorative, but diagnostic. The glitch is the tool doing work. The aurora is the output.

## Layout Motifs and Structure

The layout is **hero-dominant** — but the hero is not a headline and a button. The hero is a full-viewport botanical specimen rendered in SVG, illuminated by an aurora-light gradient that shifts slowly in the background. The text emerges from the botanical, as if the specimen itself is annotated.

**Macro structure (single scroll, no navigation bar, no footer links):**

1. **Hero — The Specimen** (100vh): A large-format botanical illustration occupies the right 60% of the viewport. It is a precise, scientific line drawing of a root system — the underground kind, not a decorative flower. Roots suggest hidden value, unseen structure, the thing beneath what is visible. The left 40% is deep humus background with the site wordmark in bone-white at the top-left and a single sparse sentence below it in the vertical center. Aurora bands pulse slowly behind the root illustration, rendered as low-opacity CSS gradients animating through 120-second cycles — so slow the visitor may not consciously notice the shift.

2. **The Glitch Interlude** (50vh): As the visitor scrolls from the hero, a horizontal glitch-scan effect passes across the viewport — a single 2px horizontal bar of inverted color travels top-to-bottom over 1.2 seconds, distorting the text beneath it momentarily. This is the transition between "what you see" and "what the tool computes." The section beneath it is blank except for one line of oversize type.

3. **The Method** (120vh): Three sparse annotation blocks, each resembling a botanical specimen label — hand-style font (but a real Google Font, not a custom one), small caps, ruled lines above and below. Each block describes one layer of the valuation method. The blocks are positioned on a 12-column grid at columns 1–4, 5–8, and 9–12, but vertically staggered by 15vh each — not a grid-of-cards, but a scatter of pinned specimens.

4. **The Interface Preview** (80vh): A single dark terminal-style panel occupying columns 3–10 displays the tool's output format — a specimen readout: domain, signal vectors, final score. The panel has a faint aurora gradient border (1px, animated). The terminal font is monospace but the values are displayed with the weight of calligraphy.

5. **Cold Close** (30vh): The page ends with only the wordmark and a single action: an input field. No label, no button text beyond a right-facing chevron. Earth-tone background returns. The botanical root motif reappears at 10% opacity as a watermark behind the input.

**Grid:** 12-column, 1440px max-width, 80px side gutters. Content rarely spans full width — the whitespace is load-bearing. No sticky headers. No modals. No scroll-jacking.

## Typography and Palette

**Typography — eclectic-hybrid, all from Google Fonts.**

Two typefaces in total; they should feel like they were never meant to coexist but do so with dignity:

- **Display / Wordmark:** [Playfair Display](https://fonts.google.com/specimen/Playfair+Display) — high-contrast editorial serif with optical sharpness at large sizes. Used only for the wordmark (6vw, tracking -0.02em, weight 700) and the single oversize line in the glitch interlude (12vw, italic). Never used at body sizes. Its roots-and-tendrils letterform details echo the botanical illustration.

- **Body / Interface / Labels:** [Space Mono](https://fonts.google.com/specimen/Space+Mono) — monospace with a dry, precise texture. Used for specimen labels (12px, small-caps via `font-variant: all-small-caps`), interface readout values (14px, weight 400), and the terminal panel. The monospace grid reinforces the idea of computation as careful measurement.

**Palette — earth-tones with aurora accent.**

| Role | Hex | Name |
|------|-----|------|
| Background base | `#1C1710` | Humus — near-black brown, the soil beneath everything |
| Surface panel | `#2E2519` | Bark — dark warm brown for the terminal panel |
| Primary text | `#E8DFCC` | Bone — warm off-white, never pure white |
| Secondary text / rules | `#8A7E6A` | Loam — muted warm gray-brown |
| Specimen label border | `#4A3F2F` | Sediment — border lines, ruled lines |
| Aurora band 1 | `#3EB489` | Celadon aurora — cool mint-green, low opacity (0.15) |
| Aurora band 2 | `#7B4FDB` | Violet aurora — deep violet, low opacity (0.12) |
| Aurora band 3 | `#D4A843` | Amber aurora — warm gold, low opacity (0.10) |
| Glitch accent | `#E8DFCC` | Bone inverted to `#1C1710` during glitch scan |
| Interface border | `#3EB489` | Celadon at 0.6 opacity for terminal panel border |

Aurora gradients never appear at full opacity. They exist as atmospheric phenomenon — present at the edge of perception, not as decoration but as diagnostic signal.

## Imagery and Motifs

**Botanical illustration — scientific, not decorative.**

The hero specimen is an SVG root system: a central taproot descending vertically, with lateral roots branching at precise angles (30°, 45°, 60°), root tips bearing fine root-hair detail. The illustration is rendered in Bone (`#E8DFCC`) with Loam (`#8A7E6A`) for secondary lines and Sediment (`#4A3F2F`) for the finest detail. No color, no fill — pure line work. The botanical accuracy is deliberate: a root system has a topology, a structure that can be read. Valuators read structure.

The secondary botanical motif is the **specimen pin** — a small circular marker (12px diameter, Celadon border, Humus fill) placed at key branching points on the root illustration. On hover, a specimen label expands from the pin with a small delay (200ms ease-out): `Space Mono`, 11px, Loam color. These labels are purely visual — they do not describe the illustration, they reinforce the annotation metaphor.

**Aurora-lights motif** — three layered `radial-gradient` bands, each a different aurora hue, positioned in the upper-right quadrant of the hero section. The gradients are animated with `@keyframes` on `background-position`, cycling through a 120-second loop with `ease-in-out`. The aurora never moves fast enough to be noticed as animation — it is discovered, not watched.

**Glitch pattern** — a single horizontal scan line: a `div` with `height: 2px`, `background: linear-gradient(90deg, transparent, #E8DFCC, transparent)`, `mix-blend-mode: difference`, animated via `transform: translateY` from `-2px` to `100vh` over 1.2 seconds on scroll trigger. A secondary glitch effect distorts the first line of text beneath: `clip-path` animation shifting a 3px vertical slice by ±4px for 80ms at the peak of the scan. These are the only glitch effects — not a texture, not a filter. Surgical.

## Prompts for Implementation

Build valuator.dev as a **specimen examination** — the experience of a scientist placing a sample under examination and receiving a structured readout. The visitor is not a buyer. They are an observer watching the tool work.

**Implementation priorities:**

1. **SVG root illustration.** Hand-encode the root system as an SVG `<path>` element in the HTML. No external file fetch. The root system uses a recursive tree-like structure: main trunk at x=50%, branching left and right at 3 levels of depth, with terminal root hairs as `<line>` elements with `stroke-linecap: round` at 0.5px width. The root should feel measured, not decorative.

2. **Aurora background.** Three absolutely-positioned `<div>` elements behind the root illustration, each with a `radial-gradient` in one aurora hue at low opacity. Animate `background-position` with a 120s, 80s, and 140s cycle respectively (offset phases so they never align). No JavaScript required — pure CSS `@keyframes`.

3. **Glitch scan on scroll.** Use an `IntersectionObserver` to trigger the glitch scan when the visitor reaches the 80vh mark of the hero. The scan div animates downward, then is removed from the DOM. The text distortion is a `clip-path` flicker: `polygon(0 48%, 100% 48%, 100% 52%, 0 52%)` shifting by `translateX(4px)` for one 80ms frame. Fire once per session (sessionStorage flag).

4. **Specimen labels.** Position pin markers on the SVG using absolute coordinates. Each pin is a `<button>` element with `role="presentation"` (decorative). On hover/focus, a `<span>` with `position: absolute` expands from `width: 0` to `width: auto` over 200ms, revealing the Space Mono label. The labels read as specimen annotations: `"root depth: 3"`, `"branching factor: 0.618"`, `"signal: coherent"`.

5. **Terminal panel.** Build as a `<pre>` block with `font-family: 'Space Mono', monospace`, `background: #2E2519`, `border: 1px solid rgba(62, 180, 137, 0.6)`. The border is animated: a `box-shadow: 0 0 0 1px rgba(62, 180, 137, 0.6)` pulses from 0.6 to 0.2 opacity over 3s. The readout inside uses Playfair Display for the value line only — one anomalous serif in a field of monospace, like a handwritten annotation in a printed log.

6. **Typography constraints.** Playfair Display loads at `font-display: optional` (no layout shift). Space Mono loads at `font-display: swap`. Never use Playfair Display below 24px. Never use Space Mono above 14px in body contexts (the oversize wordmark is the exception). The eclectic-hybrid feel comes from the radical size difference, not from mixing more than two faces.

7. **No parallax.** The root illustration is pinned — it does not scroll. As the visitor scrolls past the hero, the illustration fades at `opacity` from 1.0 to 0 over 50vh of scroll using a CSS `position: sticky` and `opacity` interpolation. No `transform: translateY`. The botanical stays still; the reader moves through it.

8. **Avoided patterns.** No parallax, no staggered card entrances, no CTA buttons, no pricing blocks, no hero headline + subheadline + button layout, no testimonials, no sticky navigation bar. The page has no persistent chrome. The first interaction the visitor can take is the input field at the bottom — and even then, it is a single field with no label, trusting the visitor to know what it is for.

## Uniqueness Notes

- **Differential:** No other design in this corpus uses a scientific root system illustration as a structural metaphor for valuation. The root topology (branching factor, depth, terminal density) directly mirrors how valuation models work: a root cause analysis rendered as botanical specimen. The connection between the metaphor and the tool's function is not decorative — it is explanatory.

- **Aurora as diagnostic, not decoration.** In most sites using aurora palettes, the gradient is a background texture. Here the aurora is positioned only behind the specimen — it illuminates the root system from behind, as if the plant is growing toward the aurora's light. This makes the aurora a purposeful compositional element, not an ambient wash.

- **Glitch as measurement artifact.** The glitch effect is not aesthetic noise. It is framed as the tool performing a scan — a single horizontal read-pass, like a scanner head. The 1.2-second duration is calibrated to feel like processing time, not decoration. This reframes glitch from "edgy visual" to "evidence of computation."

- **Eclectic-hybrid typography as epistemological statement.** The collision of Playfair Display (humanist, historical, serif) and Space Mono (mathematical, digital, monospace) is not arbitrary. It says: valuation is the act of translating human judgment (the serif) into computable signal (the monospace). The two fonts never appear at the same size — the editorial serif towers over the computational mono, until the terminal panel where the single Playfair Display value line appears at the same size as the mono data around it. That moment of parity is the site's thesis.

- **Seed:** aesthetic: japanese-minimal, layout: hero-dominant, typography: eclectic-hybrid, palette: earth-tones, patterns: glitch, imagery: botanical-illustration, motifs: aurora-lights, tone: futuristic-cutting-edge

- **Overused patterns avoided:** parallax (74%), stagger (49%), asymmetric layout without purpose (43%), hero-as-billboard with CTA.

- **Underused patterns prioritized:** aurora-lights as structural illumination (4%), botanical-illustration as metaphorical architecture (3%), earth-tones as primary palette (3%), japanese-minimal spatial discipline (2%).
<!-- DESIGN STAMP
  timestamp: 2026-05-12T01:21:32
  domain: valuator.dev
  seed: unspecified
  aesthetic: valuator.dev is a tool for people who think in signal, not noise — analysts, fou...
  content_hash: 21fc40be9b99
-->