# Design Language for prototypic.dev ## Aesthetics and Tone `prototypic.dev` is a **functional Swiss-grid specimen board running at candy frequency** — imagine the 1960s Basel typography workshops if they had been sponsored by a 2025 Tokyo bubble-tea brand and built on a CRT monitor that has been overclocked to emit pastels instead of phosphor green. The site is not warm. It is not friendly. It is precise to the millimeter and then assaults you with color. The guiding analogy: a typographer's proof sheet — the kind printed for final sign-off on a logotype — but the ink wells have been filled with #FF6BD6 magenta, #00E5FF electric cyan, and #AAFF00 acid chartreuse. Every rule is ruled. Every column is measured. Every grid intersection is visible as a faint 0.4px `#E0E0E0` hairline. And then a word explodes into being one letter at a time, and you realize this precision is not calm — it is controlled detonation. Tone is **minimal but kinetic**: zero decorative illustration, zero photography, zero texture overlays. The entire visual energy comes from letterforms moving through a perfect Swiss grid. The site reads like a design manual that has been taken over by something that wants very badly to be noticed. ## Layout Motifs and Structure The page uses a strict **Z-pattern composition** executed on a 12-column Swiss baseline grid (8px base unit, `gap: 16px` gutters, `max-width: 1440px`). **Z-pattern anatomy:** - **Zone A (top-left anchor):** Wordmark `prototypic` set in `Space Grotesk` 900 weight, 96px, tracked at `-0.04em`. This is the scanner's first entry point. It does not animate — it is already there, static, a fixed north-west point of gravity. - **Zone B (top-right):** A single geometric SVG composition — a circle inscribed in a square inscribed in a regular hexagon, all at 0.8px `#AAFF00` stroke, no fill. It rotates at 0.3rpm on load, continuously. This is the eye-catcher that pulls the gaze right along the first Z-bar. - **Zone C (diagonal sweep):** A single tagline travels diagonally from top-right to bottom-left as the user's eye naturally falls. The tagline is set in `DM Mono` 400 weight, 18px, and each word appears via typewriter — one character per 40ms, word by word, with a blinking `_` cursor between words. The text: `build fast _ ship clean _ stay weird`. The underscores are literal blinking cursors rendered as `` elements with CSS `blink` animation at 500ms interval. - **Zone D (bottom-left):** Navigation — four items, flush-left, set in `Space Grotesk` 500 weight, 14px, spaced 48px apart vertically. These are the final landing of the Z. Each nav item has a 2px `#FF6BD6` left-border that grows from 0px to 100% height on hover over 120ms. **Grid rules that must be visible:** A faint 12-column overlay is permanently rendered as a `position: fixed` SVG behind all content, columns stroked `#F0F0F0` at 0.4px. This grid does not disappear. It is part of the design. **Section below the fold:** A single full-width `section.manifesto` block — one column of prose, centered, `max-width: 640px`, `line-height: 1.75`. This block uses a countdown-style reveal: each paragraph appears only when its top edge crosses 80% viewport height. No parallax. No easing circus. Just a hard cut-in at the threshold. ## Typography and Palette **Type system (Google Fonts only, verified):** - **Display & wordmark — `Space Grotesk`** (variable, `wght 300–700`). Used at 900-equivalent weight via `font-weight: 900` fallback to boldest available. Set the wordmark at 96px desktop / `clamp(48px, 10vw, 96px)` fluid. Zero letter-spacing on display; tightened to `-0.04em` for the wordmark specifically. Color: #1A1A2E (near-black, not pure black — holds warmth against the candy accents). - **Monospace body & typewriter — `DM Mono`** (variable, `wght 300–500`). All body copy, all typewriter sequences, all code-style labels at 400 weight, 16px, `line-height: 1.75`. This is the typewriter voice. Cursor blink is `animation: blink 500ms step-start infinite`. - **UI micro-labels — `Space Grotesk`** at 11px, `wght 500`, `letter-spacing: 0.12em`, ALL-CAPS. Used for section labels (`§ MANIFESTO`, `§ WORK`, `§ CONTACT`), grid annotations, and nav items. **Palette — candy-bright on near-white:** | Role | Hex | Usage | |------|-----|-------| | Background | `#FAFAFA` | Page ground — near-white, not warm cream | | Near-black | `#1A1A2E` | All text, wordmark, body | | Candy magenta | `#FF6BD6` | Nav left-borders, hover states, active cursor | | Acid chartreuse | `#AAFF00` | Geometric SVG stroke, geometric motif accents | | Electric cyan | `#00E5FF` | Typewriter cursor blink color, link underlines | | Soft grid | `#E8E8E8` | Permanent column-grid lines | | Zone separator | `#1A1A2E` at 8% | Hairline rules between Z-zones | The three candy colors are never used simultaneously in the same visual zone. They rotate by section: magenta leads, then chartreuse, then cyan — each getting a full section before passing to the next. ## Imagery and Motifs **No photography. No illustration. No texture.** All imagery is constructed from three families of SVG geometry, each embodying the "futuristic precision" motif: 1. **The Inscribed Forms (top-right hero).** A 280×280px SVG: a circle (r=100) inscribed in a square (200×200, rotated 45° so it becomes a diamond), inscribed in a regular hexagon (r=130). All elements share the same center. Stroke: 0.8px `#AAFF00`. No fill. The hexagon rotates at 0.3rpm via CSS `animation: spin 200s linear infinite`. The circle counter-rotates at 0.15rpm. The diamond is static. The composition suggests planetary orbits, precision measurement, and something that does not stop. 2. **The Baseline Tick Marks.** Along the bottom edge of the hero zone, 60 vertical tick marks — each 1px wide, `#E8E8E8` at full opacity, heights alternating 8px / 16px / 8px / 8px / 24px (a repeating 5-unit rhythm). These are ruler marks. They are not decorative; they communicate that this page is measured. 3. **The Typewriter Cursor as Motif.** The blinking `_` underscore — rendered as an inline `` with color cycling: 200ms magenta → 200ms cyan → 200ms chartreuse → repeat. This cursor appears in three locations: the tagline, the manifesto block opening, and the footer byline. It is the single repeating decorative element. It is never static. **Motifs:** Futuristic precision. Swiss rationalism corrupted by candy signal. The visual language of a missile guidance spec sheet printed on bubblegum paper. Every form is geometric; every geometry is exact; every exactness is then lit in a color that has no business being on a spec sheet. ## Prompts for Implementation Build `prototypic.dev` as **a single-page specimen of controlled restraint exploding through candy-bright kinetics**. The page has exactly two scroll zones: the above-the-fold Z-layout hero, and the below-the-fold manifesto column. **Implementation contract:** **The grid comes first.** Before any content layer, build the permanent 12-column SVG grid overlay as `position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none`. The grid has `max-width: 1440px`, centered via `margin: auto`. Column widths are exact fractions; gutters are 16px. The grid is always visible — it does not hide on scroll. **The hero Z is CSS Grid.** Use `display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: auto auto`. Zone A (wordmark) spans columns 1–6, row 1. Zone B (geometric SVG) spans columns 7–12, row 1. Zone C (typewriter tagline) spans columns 1–12, row 2, and uses `text-align: center` to let the natural eye-path simulate the diagonal sweep. Zone D (nav) spans columns 1–3, row 3. **Typewriter implementation:** Use vanilla JS — no libraries. `const typewriter = (el, text, speed = 40) => { let i = 0; const tick = () => { el.textContent = text.slice(0, i++) + (i % 2 === 0 ? '' : '_'); if (i <= text.length + 1) requestAnimationFrame(() => setTimeout(tick, speed)); }; tick(); }`. After the final character, the trailing `_` becomes a persistent blinking cursor via CSS class swap. **Geometric SVG rotations:** Use CSS `@keyframes spin { to { transform: rotate(360deg); } }` applied at `animation-duration: 200s` for hexagon and `400s` for the counter-rotating circle (achieved by `animation-direction: reverse`). These must run at CSS layer — no JS timers. This is performance-critical for smoothness. **Manifesto text:** Write one screen of real prose about the philosophy of building prototypes: the disposable-by-design ethic, the value of speed over polish, the courage of shipping before you're ready. Three paragraphs. Each paragraph appears via a hard cut-in (JavaScript IntersectionObserver at `threshold: 0.1`, adds class `visible`, CSS transition `opacity 0ms` — instant, not faded). The Swiss aesthetic demands hard edges, not dissolves. **Color rotation by section:** Apply `data-candy="magenta"`, `data-candy="chartreuse"`, `data-candy="cyan"` to the three major structural zones. Use CSS `[data-candy="magenta"] .accent { color: #FF6BD6; }` pattern. This ensures no section bleeds into another's color identity. **AVOID:** Cards with drop shadows. Gradient backgrounds. Any image that is not an SVG. Rounded corners on structural elements (only the geometric SVG may have circles). Sticky navigation bars. Scroll-triggered parallax. Any font not named above. ## Uniqueness Notes **Chosen seed:** aesthetic: swiss, layout: z-pattern, typography: kinetic-animated, palette: candy-bright, patterns: typewriter-effect, imagery: geometric-abstract, motifs: futuristic, tone: minimal. **Differentiators from the 406-design corpus:** 1. **Z-pattern as a committed architectural system, not an afterthought.** The corpus shows z-pattern at low frequency. Here, the Z is named, zoned (A/B/C/D), and enforced by CSS Grid column assignments. The tagline occupies its own full-width row to simulate the diagonal sweep without resorting to `transform: rotate()` on text. No other design in the corpus treats the Z-pattern as a typographic argument. 2. **Swiss precision as the container for candy-bright color violence.** The corpus has swiss at 7% and candy-bright at a similarly low frequency, but no design combines them as intentional collision — the Swiss grid as the rational cage that makes the candy colors legible instead of chaotic. The permanent visible grid overlay is unique: no other design in the corpus keeps the design grid permanently on-screen as a content element. 3. **The typewriter cursor as the sole repeating decorative motif, color-cycling through all three candy accents.** The corpus has typewriter-effect patterns, but treats the cursor as a transient animation artifact. Here, the persistent blinking cursor — cycling magenta → cyan → chartreuse at 200ms intervals — is the site's heartbeat, the only element that never stops moving, the single thread connecting all three Z-zones through color. 4. **No dissolves, no easing, no parallax.** The manifesto reveal uses `threshold: 0.1` IntersectionObserver with zero-duration opacity transition — a hard snap from invisible to visible. This is anti-trend in a corpus where `ease-in-out` and `cubic-bezier` transitions are near-universal. The Swiss design tradition demands the hard cut; the futuristic motif makes it feel deliberate rather than unfinished.