# Design Language for prototypic.dev ## Aesthetics and Tone prototypic.dev channels the visual authority of a Fortune 500 annual report that has been hijacked by a calligrapher with a taste for velocity. The corporate aesthetic is not the beige-carpeted cubicle farm of the 1990s -- it is the glass-and-steel boardroom of a venture studio where decisions move at 200bpm, where whiteboards are covered in hand-scrawled equations that somehow look like poetry, and where the energy in the room is palpable enough to taste. Think Rem Koolhaas designing a pitch deck for a biotech startup while listening to drum and bass. The tone is **energetic** -- not the shallow energy of bouncing animations and exclamation marks, but the deep kinetic energy of a system under pressure, of ideas colliding and reorganizing at speed. Every element on the page should feel like it is in motion even when static, like a photograph of a sprinter frozen mid-stride. The corporate foundation provides the structural rigor -- clean sight lines, deliberate hierarchy, systematic spacing -- while the handwritten typography and terracotta warmth inject the human pulse that prevents the whole thing from becoming another lifeless SaaS landing page. The result is something that feels like opening a confidential document stamped with hand-lettered marginalia by someone who understood it better than anyone in the room. ## Layout Motifs and Structure The layout follows a **sidebar** architecture that divides the viewport into a persistent left navigation rail (roughly 220px wide on desktop) and a main content area that breathes and expands to fill the remaining space. The sidebar is not a traditional navigation column -- it functions as a living index, a vertical spine of hand-lettered section markers that track the user's position through the narrative like margin notes in a Renaissance manuscript. **Spatial Architecture:** - **The Rail (Sidebar):** Fixed-position left column with a background of deep terracotta (#6B3A2A) that anchors the entire composition. Section labels are rendered in the handwritten typeface (Caveat) at 1rem, rotated 0 degrees but stacked vertically with generous 2.5rem spacing. The active section marker is indicated by a ripple effect that emanates from the text -- a concentric circle animation in warm clay (#C4714E) that pulses once and fades. No hamburger menus, no collapse toggles. The rail is always present, always legible, always grounding. - **The Stage (Main Content):** The right 80% of the viewport is the performance space. Content is organized in full-width horizontal bands that alternate between dense information panels and breathing zones of negative space. Each band occupies a minimum of 70vh, creating a rhythm of compression and release as the user scrolls. Within each band, content is aligned to a 12-column grid but deliberately breaks it -- text blocks span 7 columns, then a decorative ripple element bleeds across 3 more, creating controlled asymmetry within the corporate grid framework. - **The Gutter:** Between the rail and the stage, a 2px vertical line in muted terracotta (#D4956A at 40% opacity) runs the full height of the page. This line is not decorative -- it is structural, functioning as the visual seam between navigation and narrative, between index and content. At scroll thresholds, the line briefly intensifies to full opacity and emits a horizontal ripple that washes across the stage, marking the transition between sections. - **Vertical Rhythm:** All spacing follows an 8px base unit with a 1.618 golden ratio scale: 8, 13, 21, 34, 55, 89px. Section padding uses 89px top/bottom. Paragraph spacing uses 21px. The mathematical precision of the spacing grid is deliberately contrasted with the organic irregularity of the handwritten typography, creating a tension between system and soul. - **Responsive Behavior:** Below 768px, the sidebar collapses into a top bar with horizontal section markers that scroll horizontally. The ripple indicator transforms from concentric circles to a horizontal underline wave. The grid simplifies to a single column but maintains the alternating compression/breathing rhythm. ## Typography and Palette **Typography:** - **Display / Headlines:** "Caveat" (Google Fonts) -- a handwritten typeface with the casual velocity of notes scrawled in the margin of a physics textbook. Weight 700 at sizes ranging from 2.8rem to 5.5rem. The slight irregularity of each letterform injects organic energy into the corporate grid. Headlines are always set in sentence case with `letter-spacing: -0.01em` to maintain the tight, urgent quality of hurried handwriting. Line height at 1.1 for large display sizes, creating dense, impactful blocks of handwritten text that read like declarations. - **Body / Narrative:** "Source Sans 3" (Google Fonts) -- a clean, professional sans-serif that provides the corporate backbone. Weight 400 for body text at 1.05rem, weight 600 for emphasis. Line height 1.7 for generous readability. `letter-spacing: 0.015em` for airy, confident spacing. The contrast between Source Sans 3's mechanical precision and Caveat's handwritten chaos is the typographic thesis of the entire design -- the human operating within the system. - **Sidebar Labels / Metadata:** "Caveat" at weight 400, 0.9rem, in a lighter terracotta (#D4956A). Used for the navigation rail labels, timestamps, and any marginalia-style annotations. These feel like someone has annotated the corporate document by hand. - **Accent / Code-like Elements:** "IBM Plex Mono" (Google Fonts) -- weight 400 at 0.85rem for any technical identifiers, version numbers, or data labels. Set in uppercase with `letter-spacing: 0.12em` for a systematic, engineered quality that grounds the handwritten energy with machine precision. **Palette:** The palette is rooted in **terracotta-warm** -- the color of fired clay, sunbaked earth, and the oxidized copper of old industrial buildings. It rejects the cold blues and clinical whites that dominate corporate web design. | Role | Color | Hex | Description | |------|-------|-----|-------------| | Primary Deep | Burnt Sienna Dark | #6B3A2A | The sidebar background, deep and grounding like kiln-fired brick | | Primary Mid | Terracotta Core | #C4714E | Primary accent, the warm clay that gives the palette its name | | Primary Light | Clay Wash | #D4956A | Secondary accent, used for hover states and active indicators | | Surface | Parchment Warm | #F7EDE2 | Main background, the color of sun-aged linen paper | | Surface Alt | Cream Stone | #EDE0D0 | Alternating section backgrounds, slightly warmer than parchment | | Text Primary | Espresso Dark | #2C1810 | Body text, near-black with a warm brown undertone | | Text Secondary | Umber Medium | #6B5B4E | Secondary text, metadata, captions | | Accent Electric | Copper Flash | #E8834A | High-energy accent for ripple effects and active states | | Neutral Border | Clay Mist | #C8B8A8 | Subtle borders, dividers, structural lines | ## Imagery and Motifs **Minimal Imagery Approach:** prototypic.dev operates in the **minimal** imagery mode -- the page communicates through typography, color, and spatial rhythm rather than photographs or illustrations. The absence of imagery is itself a statement: this is a site that trusts its words and its structure to carry meaning. **Futuristic Motifs:** The futuristic motif vocabulary manifests not through cliche sci-fi chrome and holographic rainbows, but through the language of prototyping itself -- wireframe ghosts, version numbers, iteration markers, and the visual grammar of systems under construction. 1. **Ripple Signatures:** The primary decorative pattern is the **ripple** -- concentric circles that emanate from interaction points. When a user hovers over a sidebar label, a ripple of terracotta (#C4714E at 30% opacity) expands outward in three concentric rings, each ring thinner than the last, fading over 800ms with an ease-out-cubic timing function. These ripples also appear as static decorative elements: SVG circles in groups of 3-5, placed at section boundaries, rendered in Clay Wash (#D4956A) at 15% opacity. They suggest the moment of impact -- a stone dropped into still water, an idea landing in a receptive mind. 2. **Prototype Grid Lines:** Faint dotted-line grids (1px dots in #C8B8A8 at 20% opacity, spaced 40px apart) appear as background patterns in alternating sections. These grids evoke the graph paper and dot-grid notebooks of industrial designers, reinforcing the "prototypic" identity. The grid dots are rendered as a CSS repeating radial gradient, not an image, ensuring crispness at any resolution. 3. **Version Markers:** Small typographic motifs appear in the margins -- "v0.1", "v0.2", "draft", "rev.3" -- rendered in IBM Plex Mono at 0.7rem in Umber Medium (#6B5B4E) at 50% opacity. These markers are purely decorative, suggesting a document in perpetual iteration, a prototype that is always becoming. They appear at irregular intervals along the right edge of the content area, rotated -90deg, like the crop marks on a printer's proof. 4. **Pulse Lines:** Horizontal lines that span the full width of the content area at section breaks. These are not static rules -- they are animated SVG paths that draw themselves from left to right over 1200ms when they enter the viewport, with a stroke-dasharray animation. The line color transitions from transparent to Terracotta Core (#C4714E) to transparent, creating a pulse of warmth that marks each narrative threshold. 5. **Corner Brackets:** At the corners of key content blocks, thin L-shaped brackets (2px, Clay Mist #C8B8A8) suggest the selection handles of a design tool, reinforcing the prototyping metaphor. On hover, these brackets shift to Copper Flash (#E8834A) and expand by 4px, as if the element is being selected for editing. ## Prompts for Implementation **Full-Screen Narrative Experience:** The site opens to a full-viewport hero state where the sidebar rail is already visible at left, establishing the persistent architecture from the first frame. The main stage displays the domain name "prototypic.dev" in Caveat at 5.5rem, positioned at approximately 40% from the top, left-aligned to the content grid's third column. Below the name, a single line in Source Sans 3 at 1.1rem reads as a tagline or descriptor. The background is Parchment Warm (#F7EDE2). No navigation links are visible in the main stage -- the sidebar rail is the only orientation device. A ripple animation emanates slowly from behind the domain name text, three concentric terracotta circles expanding over 3 seconds and fading, giving the hero state a sense of quiet energy, like a heartbeat made visible. **Ripple Interaction System:** Every interactive element on the page triggers a ripple on activation. Sidebar labels ripple on hover. Content section headings ripple on scroll-into-view. The ripple is always the same: concentric circles in Terracotta Core (#C4714E) at decreasing opacity (30%, 20%, 10%), expanding from the interaction point with staggered delays (0ms, 150ms, 300ms), each ring taking 800ms to reach its maximum radius (60px) before fading. This creates a unified interaction language -- a single gesture repeated across every touchpoint, building muscle memory and visual consistency. **Section Transitions:** As the user scrolls between content bands, the gutter line between sidebar and stage pulses to full opacity and emits a horizontal ripple across the stage background -- a wash of Terracotta Core (#C4714E at 8% opacity) that sweeps from left to right over 600ms. This ripple serves as a section divider that is felt rather than seen, a kinetic threshold that replaces the static horizontal rule. **Sidebar Active State Animation:** The active section label in the sidebar undergoes a subtle scale transform (1.0 to 1.08) with a spring-physics easing (CSS `cubic-bezier(0.34, 1.56, 0.64, 1)`) over 300ms. Simultaneously, the label's color shifts from Clay Wash (#D4956A) to Copper Flash (#E8834A). Inactive labels maintain their muted state but respond to hover with a 200ms color transition to Terracotta Core. **Pulse Line Draw Animation:** Section divider lines use SVG `` elements with `stroke-dasharray` equal to the line's total length and `stroke-dashoffset` animated from full length to 0 when the element enters the viewport (detected via IntersectionObserver with a threshold of 0.3). The draw animation uses ease-in-out timing over 1200ms. The stroke color is Terracotta Core (#C4714E) with a gradient opacity that peaks at center and fades at edges, achieved via an SVG linear gradient on the stroke. **Scroll Velocity Response:** The handwritten Caveat headlines respond to scroll velocity -- as the user scrolls faster, headlines gain a subtle `skewX` transform (up to 3deg) that relaxes back to 0 over 500ms when scrolling stops. This creates the impression that the handwritten text is being blown by the wind of the user's movement, reinforcing the energetic tone and the organic quality of the typography. Implemented via a lightweight scroll velocity detector (tracking `window.scrollY` delta over 16ms frames) mapped to a CSS custom property `--scroll-skew`. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, feature comparison tables, cookie consent overlays styled as primary UI, hero sliders, stock photography, gradient mesh backgrounds, particle.js effects. **BIAS TOWARD:** Full-screen narrative sections, typographic drama, controlled negative space, interaction patterns that reward slow exploration, ambient animation that creates atmosphere without demanding attention. ## Uniqueness Notes **Differentiators from other designs:** 1. **Corporate-Handwritten Collision:** No other design in the portfolio pairs the corporate aesthetic with handwritten typography. Corporate appears at 29% frequency and is typically paired with geometric-sans or mono typography for predictable professional results. The deliberate injection of Caveat's hand-scrawled energy into a corporate grid creates a visual paradox -- the precision of the boardroom annotated by the urgency of a human hand -- that is entirely unique in the portfolio. 2. **Ripple as Unified Interaction Language:** While ripple appears as a pattern at only 7% frequency, no other design uses it as the sole interaction motif applied universally across all interactive elements. Most designs mix multiple interaction patterns (hover-lift + scroll-triggered + stagger). prototypic.dev commits to a single gesture -- the expanding concentric circle -- repeated everywhere, creating a meditative consistency that paradoxically generates more energy through rhythm than variety ever could. 3. **Prototyping Metaphor as Visual Identity:** The version markers (v0.1, draft, rev.3), corner brackets, and dot-grid backgrounds create a cohesive prototyping metaphor that no other design in the portfolio employs. This transforms the site from a finished product into a living document that embraces its own iterative nature -- a prototype about prototyping, a self-referential design that makes its own process visible. 4. **Terracotta Corporate Palette:** The terracotta-warm palette at only 2% frequency is never paired with corporate aesthetics elsewhere in the portfolio. Corporate sites default to blues, grays, and safe neutrals. By grounding a corporate structure in the warm, earthy tones of fired clay, prototypic.dev creates an unexpected warmth that subverts the cold authority typically associated with corporate design. 5. **Scroll Velocity Typography:** The skewX response to scroll speed on handwritten headlines is a micro-interaction that appears in no other design. It creates a physical relationship between the user's movement and the typographic expression, making the handwriting feel alive and responsive in a way that static text never can. **Chosen Seed:** aesthetic: corporate, layout: sidebar, typography: handwritten, palette: terracotta-warm, patterns: ripple, imagery: minimal, motifs: futuristic, tone: energetic **Avoided Overused Patterns:** Centered layout (99%), mono typography (99%), scroll-triggered as primary pattern (96%), playful aesthetic (95%), friendly tone (98%), vintage motifs (87%), parallax (75%), stagger (60%). Instead, this design commits to sidebar layout, handwritten typography, ripple patterns, corporate aesthetic, and energetic tone -- all at moderate-to-low frequency in the portfolio.