# Design Language for desca.work ## Aesthetics and Tone desca.work channels the visual precision of a botanical field guide published on synthetic paper -- the kind of document that sits flat on a laboratory bench under fluorescent tubes, its illustrations printed in inks so vivid they seem to emit light. The aesthetic is **flat-design** in the truest sense: zero shadows, zero gradients within elements, zero pretense of depth. Every surface is a single unmodulated color. But this flatness is not sterile -- it is *electric*. The palette operates in the dopamine-neon register: acid greens, hot magentas, and ultraviolet blues that vibrate against one another with the optical intensity of a risograph overprint gone wrong in the best possible way. The tone is **minimal** -- not minimal as in "not much there," but minimal as in "everything extraneous has been surgically removed." There is no warmth, no friendliness, no conversational register. The site speaks with the quiet authority of a specimen label: factual, precise, economical. Text does not persuade; it names. Headlines do not excite; they classify. The overall mood is that of a neon-lit herbarium: a place where living things are catalogued with dispassionate exactness, but the cataloguing system itself is so chromatic and so geometrically rigorous that it becomes its own form of beauty. Inspiration draws from Karl Blossfeldt's plant photography (the obsessive repetition of organic form), Otl Aicher's Munich Olympics graphics (flat color, systematic modularity), and the contemporary risograph printing scene (saturated ink, deliberate misregistration, paper-as-surface). The result is a site that feels like a scientific publication from a parallel universe where taxonomy is practiced in nightclub lighting. ## Layout Motifs and Structure The layout is **full-bleed**: every section expands to the absolute edges of the viewport with no margins, no gutters visible at the page level, no safe area. Content bleeds to all four edges. Within each full-bleed section, content is organized using a strict **8-column modular grid** with 16px gutters, but the grid is not centered -- it is anchored to the left edge of the viewport with a 48px left margin and zero right margin, allowing content blocks to literally run off the right edge of the screen on certain breakpoints, reinforcing the specimen-that-exceeds-its-frame metaphor. **Section Architecture:** Each section occupies exactly 100vh (one full viewport height) and functions as a discrete specimen plate. Sections do not scroll continuously; instead, they snap into place using CSS `scroll-snap-type: y mandatory` on the container and `scroll-snap-align: start` on each section. This creates a page-turning rhythm rather than a scroll-flowing one -- each "page" arrives in its entirety, holds, then yields to the next when the user commits to scrolling past the threshold. **Floating Elements System:** The key structural motif is **floating elements** -- botanical illustration fragments (leaves, stems, seed pods, petal cross-sections) that exist in a separate visual layer above the grid content. These illustrations are positioned with `position: fixed` relative to the viewport, not the scroll container, so they remain stationary as sections snap past them. This creates the illusion that the user is sliding specimen plates beneath a glass surface on which botanical drawings have been printed. The floating elements are rendered at 40-60% opacity with `mix-blend-mode: multiply` against the neon backgrounds, producing unexpected color interactions: a magenta leaf over a cyan section yields deep purple; a lime-green stem over a hot-pink background produces a bruised ochre. **Navigation:** There is no visible navigation bar. Orientation is provided by a thin (2px) vertical progress indicator fixed to the left edge of the viewport -- a line that grows downward as the user advances through sections, rendered in the current section's complementary neon color. Section numbers appear as small monospaced numerals (01, 02, 03...) aligned to this vertical bar, fading in/out as their corresponding sections snap into view. ## Typography and Palette **Typography:** - **Headlines / Section Titles:** "Space Grotesk" (Google Fonts) -- weight 700, tracking -0.03em, set between 3rem and 7rem depending on content hierarchy. Space Grotesk's squared-off terminals and open counters give it a mechanical, engineered quality that pairs naturally with the flat-design aesthetic. Headlines are always set in uppercase with `letter-spacing: 0.08em` to evoke specimen labels. Line height is compressed to 0.92 to create dense, block-like text masses that read as visual objects rather than sentences. - **Body / Descriptive Text:** "Inter" (Google Fonts) -- weight 400 for body, weight 500 for emphasis. Set at 1rem (16px base) with `line-height: 1.65` and `letter-spacing: 0.01em`. Inter's tall x-height and open apertures ensure readability at small sizes against the high-saturation backgrounds. Body text is always set in sentence case, never uppercase. Maximum line length is capped at 48ch using `max-width` to maintain readability in the left-anchored layout. - **Captions / Labels / Metadata:** "IBM Plex Mono" (Google Fonts) -- weight 400, set at 0.75rem with `letter-spacing: 0.04em`. Used for botanical nomenclature, specimen numbers, section labels, and any taxonomic or categorical information. The monospace treatment reinforces the scientific-catalogue feel. Captions are always set in lowercase with no periods. **Palette:** The palette operates on the principle of maximum chromatic energy with zero gradients. Every color is a flat, unmodulated field. Adjacent sections use colors that create strong simultaneous contrast. | Role | Color | Hex | Usage | |------|-------|-----|-------| | Neon Magenta | Hot pink-magenta | `#FF2D78` | Primary accent, section backgrounds (odd), floating element strokes | | Electric Cyan | Bright cyan | `#00F0FF` | Section backgrounds (even), interactive highlight states | | Acid Lime | Vivid yellow-green | `#BAFF29` | Secondary accent, botanical illustration fill, hover states | | Deep Ultraviolet | Near-black violet | `#0D0021` | Primary text color, used on all light/neon backgrounds | | Searing White | Blue-tinted white | `#F0F4FF` | Body text on dark sections, negative-space breathing areas | | Phantom Coral | Desaturated neon orange | `#FF6B4A` | Tertiary accent, progress indicators, link underlines | | Void Black | True rich black | `#050008` | Full-bleed dark sections, max contrast backgrounds | | Signal Yellow | Pure saturated yellow | `#FFE600` | Sparingly used for warnings, emphasis, one-off callouts | Color pairings are always high-contrast: `#FF2D78` text on `#0D0021` background, `#00F0FF` text on `#050008` background, `#0D0021` text on `#BAFF29` background. No mid-tone pairings are permitted. Every color combination must exceed WCAG AA contrast ratio purely as a side effect of the neon-on-void aesthetic, not as a design goal. ## Imagery and Motifs **Botanical Illustration as Primary Visual Language:** All imagery is **botanical illustration** -- detailed, scientific-style line drawings of plant anatomy: longitudinal cross-sections of stems, radial views of flower heads, branching diagrams of root systems, magnified surface textures of leaves showing cellular structure. These are not decorative florals; they are technical drawings executed with the precision of an 18th-century natural history engraving, but rendered in flat neon colors instead of traditional sepia or watercolor washes. **Illustration Specifications:** - Style: Clean vector line art with uniform 2px stroke weight at all scales - Color: Single flat fill per element (no gradients, no shading) using palette neon colors - Composition: Each illustration is deconstructed into anatomical components -- a single petal, a stamen cluster, a thorn detail, a seed-dispersal mechanism -- rather than complete flowers. This fragmentary approach reinforces the taxonomic feel and provides modular visual assets that can be arranged independently - Scale: Illustrations are deliberately oversized, extending beyond their containers. A root system might span 200% of the viewport width, with only its central portion visible, creating a sense of biological abundance pressing against the constraints of the flat grid **Floating Element Inventory:** The floating elements (described in Layout) draw from a library of 12-16 botanical fragments: 1. A single elongated leaf with visible venation, rendered in `#BAFF29` with `#0D0021` veins 2. A cross-sectional view of a stem showing xylem/phloem rings, in `#FF2D78` on transparent background 3. A cluster of three seed pods in varying stages of opening, `#00F0FF` outlines with `#FF6B4A` seeds 4. A spiral arrangement of petals seen from above (phyllotaxis pattern), `#FFE600` fill 5. A branching root tip with fine root hairs, drawn in `#F0F4FF` for dark sections 6. A magnified stomata pattern (repeated organic ovals), `#FF2D78` on `#BAFF29` These fragments rotate slowly (CSS `animation: rotate 120s linear infinite`) and translate subtly with elastic easing on scroll events, creating a living-specimen-under-glass effect. **Motif: Floating Elements** The floating-elements motif extends beyond botanical illustrations to include typographic fragments: stray Latin binomial names (Helianthus annuus, Monstera deliciosa, Drosera rotundifolia) set in IBM Plex Mono at 0.65rem, rotated 90 degrees, positioned at viewport edges, and rendered at 20% opacity. These create a subliminal taxonomy that enriches the botanical theme without demanding attention. ## Prompts for Implementation **Full-Screen Snap-Scroll Narrative:** The entire site is a vertical sequence of full-viewport snap-scroll sections. There is no traditional page structure -- no header, no footer, no sidebar navigation. The user experiences the site as a series of specimen plates viewed through a magnifying device. Each section snaps into place with CSS scroll-snap, creating a deliberate, plate-by-plate viewing rhythm. **Section Transition Animation (Elastic Pattern):** When a new section snaps into view, its content enters with **elastic easing** (`cubic-bezier(0.68, -0.55, 0.265, 1.55)`) -- elements overshoot their final position slightly, then settle back, like a leaf finding equilibrium after being released from a pressed specimen book. Implementation: each section's child elements have staggered entry animations triggered by IntersectionObserver with `threshold: 0.1`. The stagger interval is 60ms per element. The elastic overshoot is 8-12% of the element's final position. **Botanical Fragment Animation:** The fixed-position floating botanical illustrations respond to scroll velocity, not scroll position. When the user scrolls faster, the fragments translate horizontally by a factor proportional to scroll delta (captured via `wheel` event), creating an elastic lag: they drift sideways as if caught in a breeze, then spring back to their rest positions using CSS `transition: transform 1.2s cubic-bezier(0.68, -0.55, 0.265, 1.55)`. This elastic behavior is the primary interaction pattern and should feel physically responsive -- like disturbing specimens floating in resin. **Color Field Transitions:** As sections snap into view, the viewport's dominant color changes dramatically (magenta to cyan to lime to void-black). To smooth the perceptual shock, each section's background color is animated via a 200ms `background-color` transition on the snap container, creating a brief chromatic smear between sections that mimics risograph ink bleeding between passes. **Typography as Architecture:** Headlines in Space Grotesk 700 Uppercase should be treated as architectural elements: oversized (5rem-7rem on desktop), left-aligned to the grid's left edge, occasionally breaking out of the grid by extending into the left margin. On the opening section, the domain name "desca.work" is rendered at 12vw in Space Grotesk 700 Uppercase, filling the entire width of the viewport, with the period between "desca" and "work" replaced by a small inline SVG of a botanical cross-section (a circular stem diagram) that serves as a visual pun on the typographic period. **Interaction Details:** - Links: No underlines. On hover, a 2px line in `#FF6B4A` draws from left to right beneath the text using `background-size` animation (0% to 100% width over 300ms, elastic easing). - Cursor: Custom cursor -- a small circle (12px) with a `#BAFF29` fill and `mix-blend-mode: difference`, creating color-inverted halos that shift hue depending on the background color beneath. - Section numbers: Fade in as the section snaps into view, positioned at the left progress bar, IBM Plex Mono at 0.7rem, rendered in the section's complementary neon. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, hamburger menus, hero images with stock photography, gradient backgrounds, drop shadows, rounded corners exceeding 2px, any warm/friendly copywriting tone. **Implementation Stack Guidance:** - Use CSS `scroll-snap-type` for section snapping -- no JavaScript scroll-hijacking libraries - Use `IntersectionObserver` for triggering section-entry animations - Floating elements use `position: fixed` with `will-change: transform` for GPU compositing - All elastic animations use the cubic-bezier(0.68, -0.55, 0.265, 1.55) curve - Botanical illustrations are inline SVG for crisp rendering at all scales and easy color manipulation via CSS custom properties - Color scheme is managed via CSS custom properties (`--section-bg`, `--section-text`, `--section-accent`) toggled per section via data attributes ## Uniqueness Notes **Differentiators from other designs:** 1. **Flat-Design Botanical Taxonomy:** No other design in the portfolio combines rigorous flat-design aesthetics (zero shadows, zero gradients, zero depth cues) with detailed botanical illustration. Botanical-illustration imagery appears at only 1% frequency across the portfolio and is never paired with flat-design (also 1%). This collision of scientific illustration precision with uncompromising chromatic flatness creates a visual language that has no precedent in the existing collection -- it reads as a neon herbarium, a nightclub field guide, a taxonomic rave. 2. **Snap-Scroll Specimen Plates with Fixed Floating Layer:** The combination of CSS scroll-snap sections functioning as discrete specimen plates with position-fixed botanical fragments floating in a separate visual layer is structurally unique. No other design uses scroll-snap as a primary navigation paradigm combined with fixed-position decorative elements that remain stationary while content snaps beneath them. The resulting parallax-like depth (without actual parallax scrolling) creates a viewing experience closer to a scientific instrument than a website. 3. **Elastic Interaction Physics on Scroll-Velocity:** The floating elements respond to scroll *velocity* (not position) with elastic easing, creating a unique physical simulation where botanical fragments behave like specimens suspended in a viscous medium -- they drift when disturbed and spring back when at rest. This scroll-velocity-driven elastic behavior is not implemented in any other design and creates a fundamentally different interaction feel from standard parallax (position-based) or standard spring animations (click/hover-based). 4. **Left-Anchored Asymmetric Grid with Bleed-Off:** The 8-column grid anchored to the left edge with content bleeding off the right side of the viewport is a distinctive structural choice. The existing portfolio heavily favors centered layouts (98%). This left-anchored bleed creates a compositional tension -- the eye is pulled leftward by the grid anchor but rightward by the overflowing botanical illustrations -- that is absent from centered or even standard asymmetric layouts. 5. **Dopamine-Neon Palette without Gradients:** The dopamine-neon palette (3% frequency) is always implemented elsewhere with gradients. Here, every neon color exists as a pure, flat, unmodulated field -- no gradients, no glow effects, no radial fades. This creates a screen-print / risograph quality where colors interact through adjacency and overlay (mix-blend-mode) rather than through blending, producing a distinctly different chromatic experience from gradient-based neon designs. **Chosen Seed/Style:** - aesthetic: flat-design - layout: full-bleed - typography: sans-grotesk - palette: dopamine-neon - patterns: elastic - imagery: botanical-illustration - motifs: floating-elements - tone: minimal **Avoided Patterns (from frequency analysis):** - AVOIDED playful aesthetic (97% overused) -- used flat-design (1%) instead - AVOIDED centered layout (98% overused) -- used full-bleed with left-anchored grid instead - AVOIDED mono typography (98% overused) -- used sans-grotesk primary (4%) with mono only for captions - AVOIDED warm palette (100% overused) -- used dopamine-neon (3%) with cool-shifted neons - AVOIDED scroll-triggered as primary pattern (97% overused) -- used elastic (16%) as primary interaction paradigm; scroll-snap replaces continuous scroll - AVOIDED minimal imagery category (96% overused) -- used botanical-illustration (1%) as primary imagery - AVOIDED vintage motifs (67% overused) -- used floating-elements (not in frequency list, extremely underused) - AVOIDED friendly tone (96% overused) -- used minimal tone (not in frequency list)