# Design Language for yesan.xyz ## Aesthetics and Tone yesan.xyz is **a botanical laboratory run by a neon taxonomist** — the visual language of a 19th-century herbarium that has been entirely redrawn in electric pigment on flat white paper. The mood is the exact moment when a scientist forgets to be clinical and starts to be enchanted: a pressed flower sample labeled in razor-clean type, but the ink is #00FFB3 and the label glows. The aesthetic is **flat-design botanical professionalism** — no gradients, no shadows, no depth illusions. Every element sits cleanly on a matte white or near-black ground with hard edges, as if cut from construction paper and pinned. The neon palette is not candy-bright; it is the precise saturated green of a laboratory safety sign, the cyan of a cathode tube, the magenta of a highlighter dragged across graph paper. These colors appear in flat, unmodulated fills — no glow, no blur radius, no inner shadow — which paradoxically makes them feel more electric than any drop-shadow neon treatment could. The site communicates **professional competence with botanical obsession**: the typography is immaculately controlled, the layout is spare and intentional, but the decorative system is entirely botanical — stems, petals, leaves, seed-pods — all redrawn as flat geometric shapes in the neon palette. The tone is confident and expert, not cold or corporate. Inspiration reference points: Muji catalog precision meets Risograph botanical print meets Swiss systems typography — then the whole thing is colorized with a neon highlighter. ## Layout Motifs and Structure **Single-page vertical narrative with minimal navigation.** The header is a slim horizontal bar — domain name on the left, three text links on the right, no hamburger, no mega-menu, no sticky behavior. The header disappears after the hero and reappears only when the cursor enters the top 80px zone. **Page structure — four full-width sections, each occupying exactly 100svh:** 1. **Specimen Plate (hero):** Full-width flat white ground. A single oversized botanical form — a stylized seed pod rendered as interlocking flat polygons in three neon colors — sits left of center at ~60vw tall. The domain name `yesan.xyz` is set in one massive line at `clamp(5rem, 12vw, 14rem)`, aligned right, baseline anchored to the pod's midpoint. A fine 1px rule runs horizontally at the exact vertical center of the viewport. The cursor-follow: a custom SVG crosshair (thin lines, no fill) with a 3px neon-cyan dot at its center tracks the mouse at a 0.3× velocity lag — the crosshair feels like a botanist's loupe hovering over the specimen. 2. **Classification Grid (content):** A flat grid of exactly 9 rectangular specimen cards, 3×3, each containing: a flat geometric botanical icon (leaf, petal, stem-node) in one neon hue on a near-black background, a classification label in mono-caps, and a single short descriptor. Cards have no border-radius, no shadow. The grid has 2px gaps filled with a single neon accent color — the color changes per row (cyan, green, magenta). 3. **Process Scroll (narrative):** A horizontal two-column split: left column is 65% width, a pure flat surface; right column is 35%, near-black. The left column hosts a kinetic text treatment: three short declarative sentences appear one at a time, each letter individually positioned and animated via CSS — letters drop in from above along their own timing curve, stagger is 12ms per character. No scroll trigger — animation fires on section enter, once. The right column hosts a static flat botanical diagram: a cross-section of a flower rendered as pure geometric shapes (circles, polygons, line segments), all flat neon colors, no gradients. 4. **Contact / Footer:** Single centered column, maximum 640px wide. Flat white on near-black. Large email address set in display type. Below it, a single botanical ornament (one stylized leaf, 48px, in neon-green). Below that, copyright in 11px mono. **Layout rules:** No decorative border-radius anywhere. No box-shadows. No `filter: blur()`. No CSS gradients except as color fills on SVG paths. Strict 8px baseline grid. All spacing is multiples of 8. ## Typography and Palette **Typography — kinetic-animated, precision botanical, all Google Fonts.** - **Display / Wordmark:** [Space Grotesk](https://fonts.google.com/specimen/Space+Grotesk), weight 700. Used for `yesan.xyz` hero wordmark and section headers. The slightly irregular stroke terminals of Space Grotesk read as handcrafted against the flat geometric layout — a subtle reminder of a botanist's handwriting beneath the typeset label. Letter-spacing: −0.03em for display, 0 for headings. - **Classification Labels / Navigation:** [IBM Plex Mono](https://fonts.google.com/specimen/IBM+Plex+Mono), weight 500, all-caps, tracking 0.12em. Used for specimen card labels, nav links, and the right-column content. Mono evokes laboratory taxonomy catalogs — every character is the same width, like rows in a classification table. - **Body / Descriptors:** [Inter](https://fonts.google.com/specimen/Inter), weight 400, size 15–16px, line-height 1.6. Used for card descriptors and the footer text. Inter disappears into the layout as intended — it is the background language; everything interesting is happening in Space Grotesk and IBM Plex Mono. **Palette — neon-electric on flat grounds:** - `#F5F5F0` — Specimen White (near-white with warm undertone, primary background) - `#0D0D0D` — Press Black (near-black, secondary background for dark sections) - `#00E5B3` — Taxonomy Cyan (primary neon, crosshair dot, grid gap color row 1, key botanical accents) - `#B8FF00` — Chlorophyll Green (secondary neon, leaf fills, botanical diagram, grid gap row 2) - `#FF2D78` — Stamen Magenta (tertiary neon, grid gap row 3, hover states, ornamental petal fills) - `#F5F5F0` at 8% opacity over `#0D0D0D` — creates a near-invisible frost line used only for the header bar background All neon colors are used as flat fills — no opacity, no blur, no glow effects. When neon sits on Specimen White, it reads as pigment. When it sits on Press Black, it reads as light. Both are correct. ## Imagery and Motifs **No photography. No illustration of people. No stock imagery.** The entire visual vocabulary is built from one motif family: **flat botanical geometry**. All botanical forms are SVG-native, constructed from basic geometric primitives: - **Leaves:** Three-point polygon paths with a single median vein line (1px, contrasting neon color) - **Petals:** Intersecting arcs — four to six identical arc paths rotated around a center point, each in a different neon hue - **Seed pods:** Elongated hexagonal shapes with internal segmentation lines, suggesting cross-section diagrams - **Stems:** Single 2px line paths with periodic 45-degree branching nodes, each node a filled circle (4px diameter) The botanical forms function as **wayfinding ornaments**: one form appears at each section transition, increasing in complexity from top to bottom — a single leaf at the hero → a full flower diagram at the process section → a complex seed pod at the footer. The progression mirrors the site's conceptual arc. **The cursor-follow element** is a botanical crosshair: two intersecting 1px lines (24px long each), with the four quadrant corners occupied by tiny 3px neon-cyan dots. As the cursor moves, the crosshair follows at 30% velocity with an elastic easing (`cubic-bezier(0.22, 0.61, 0.36, 1)`). On hover over interactive elements, the crosshair expands to a 64px circle (1px stroke, neon-cyan, no fill) — like placing a loupe over a specimen. **The kinetic text animation** (section 3) works as follows: each character in the three sentences is wrapped in a `` with `display: inline-block`. On section enter, characters animate from `translateY(-32px) opacity: 0` to `translateY(0) opacity: 1` with staggered delay (12ms × character index). The motion is terse and botanical: each letter falls into place like a dried leaf settling onto a flat surface — no bounce, `ease-out` cubic, duration 280ms per character. ## Prompts for Implementation The implementation goal is a **precise botanical specimen catalog** — the experience of opening a flat-design research archive where every pixel is intentional and the neon is the only warmth. There is no hero video, no particle system, no ambient audio. The site earns attention through restraint and exactness. **Technical approach:** - CSS custom properties define the six colors as `--specimen-white`, `--press-black`, `--tax-cyan`, `--chloro-green`, `--stamen-magenta` - All botanical SVG shapes are inline — no external files, no `` tags for decoration - The crosshair tracker uses a single `mousemove` listener on `document`, updating a `translate(x, y)` CSS property on the crosshair element via `requestAnimationFrame`. Velocity lag: `x = x + (targetX - x) * 0.3` per frame - On mobile (pointer: coarse), crosshair is hidden and replaced by a small neon-cyan dot in the bottom-right corner that pulses once on load (scale 1 → 1.6 → 1, 400ms, neon-cyan, flat fill) - All animations respect `prefers-reduced-motion: reduce` — kinetic text becomes instant-reveal, cursor crosshair becomes static **Section 1 (Specimen Plate):** - The seed pod SVG: build from 7 elongated hexagon paths, each rotated 25 degrees from the previous, sharing a central axis. Colors alternate: `--tax-cyan`, `--press-black`, `--chloro-green` in a 3-cycle pattern. The pod should fill roughly 55% of viewport height. - Wordmark position: `position: absolute; right: 8vw; top: 50%; transform: translateY(-50%)`. The large type sits right-flush, its baseline tangent to the pod's widest point. - The horizontal rule: `position: fixed; top: 50vh; width: 100%; height: 1px; background: --tax-cyan; opacity: 0.4` — it persists across the entire page scroll as a thin ghost line. **Section 2 (Classification Grid):** - CSS grid: `grid-template-columns: repeat(3, 1fr); gap: 2px`. Gap color is not a gap — it is the background color of the grid container set to alternate neon per row via nth-of-type targeting. - Each card: `background: --press-black; padding: 32px 24px`. Icon top, classification label (`IBM Plex Mono`, 11px, `--tax-cyan`), descriptor (`Inter`, 14px, `#999`). - Hover state: card background shifts to `--tax-cyan` at 100% opacity (flat, instant, no transition) for 80ms then fades out over 200ms — a flash like a camera shutter documenting the specimen. **Section 3 (Process Scroll):** - Left column: white background, the kinetic text. Use `IntersectionObserver` with `threshold: 0.4` to trigger animation once. - Right column: flat botanical diagram. Build as inline SVG, ~400×400px viewBox, depicting a stylized cross-section flower: center circle (32px, `--stamen-magenta`), four petal polygons (each 60×140px, `--chloro-green`), four sepal polygons between petals (`--tax-cyan`), outer dotted circle (2px dash array, `--press-black`, opacity 0.3). **Section 4 (Contact/Footer):** - Near-black background, centered layout. - Email address in Space Grotesk 700, size `clamp(1.8rem, 5vw, 4rem)`. - On hover, each character of the email address individually highlights to `--stamen-magenta` (using the same character-wrapping technique as the kinetic text, triggered by hover rather than scroll). - Leaf ornament: single inline SVG, 48px, `--chloro-green` fill. **AVOID:** No gradient backgrounds. No box-shadow on cards. No border-radius on any rectangle. No hero with a large background image. No stat grids with numbers. No pricing tables. No testimonial carousels. No sticky navigation bar that follows scroll. ## Uniqueness Notes 1. **Neon-on-flat is rare.** The corpus uses neon almost exclusively with dark backgrounds, glow effects, and blur radii — vaporwave or cyberpunk registers. This site uses neon as laboratory pigment: pure flat fills on a near-white ground, no glow, no ambient light simulation. The result is a neon that reads as ink, not light — a fundamentally different visual register that does not appear elsewhere in the corpus. 2. **Cursor crosshair as scientific instrument.** Cursor-follow in the corpus is typically a magnetic blob, a trailing dot, or a gradient orb — decorative. This design repurposes cursor-follow as a botanist's loupe: a crisp SVG crosshair with 1px lines, botanical corner markers, and a loupe-expansion on hover. The cursor interaction reinforces the scientific narrative rather than adding generic decoration. 3. **Kinetic typography without scroll-trigger dependency.** The corpus heavily overuses scroll-triggered animations (36%) and parallax (74%). The kinetic text here fires on section-enter via IntersectionObserver and plays once — there is no scroll-position dependency, no parallax offset. The animation is the section's first and only motion event; silence follows. 4. **9-card specimen grid with neon-gap taxonomy.** The 2px grid gaps are colored neon, row by row, functioning as a visual taxonomy system (cyan = row 1 category, green = row 2, magenta = row 3). This repurposes a typically neutral structural element as a semantic color-coding device — unusual in the corpus. 5. **Botanical flat geometry as the entire visual vocabulary.** Most designs that reference botanical motifs use photography or watercolor illustration. This site rebuilds all botanical forms from SVG primitives (polygons, arcs, line segments) — pure flat geometry with zero painterly quality. The botanical shapes are recognizable but diagrammatic, as if drawn by a scientific illustrator who was told to use only a ruler and compass. Seed: aesthetic: flat-design, layout: minimal-navigation, typography: kinetic-animated, palette: neon-electric, patterns: cursor-follow, imagery: minimal, motifs: floral-botanical, tone: professional