# Design Language for desca.work ## Aesthetics and Tone desca.work is staged as **a sun-bleached oceanographic mission console adrift in the upper photic zone of a freshwater lagoon at high noon — a working portfolio reframed as the soft pastel HUD of a research seaplane that has been moored, lazily, to a coral reef of pale rose and mint, its instruments still humming, its readouts still printing, but every bit of its language now turned toward optimism, tide-charts, and the small daily delight of work that floats**. The site is an inverted seapunk: not the dim, lava-lampy late-night seapunk of dolphins-and-marble Tumblr, but the **high-key dawn version** — pastel salt-spray, aquarelle-blue aurora drifting along the horizon line of the screen, sea-foam pink, and the low buoyant hum of a console that thinks the ocean is mostly good news. The tone is **optimistic-bright** without being chirpy or saccharine. The voice is the voice of a marine biologist on the third good day of a long expedition: warm, slightly amused by her own instruments, never selling, always pointing at the water and saying *look*. The cursor is treated as the visitor's small periscope across the readout. Hover is met with gentle bobbing in the pastel HUD reticules — like buoys nodding in chop. There is no urgency. There is no scarcity. There is no "book a call." There is only a wide, well-lit pastel cockpit and the soft pleasure of well-organized work, presented like a dive log. Inspirations: the pastel weather diagrams of NOAA's 1972 atlas reprints; Jacques Cousteau's *Calypso* silver-and-aqua interior caught in dawn light; a Game Boy Color save-screen if it had been redrawn by a Tokyo aquarium illustrator; the iridescent test charts of a calibrated reef-camera; Y2K's seapunk Tumblr era *but* run through a Studio Ghibli morning palette. The whole document should feel as if the visitor has just slipped on a pair of polarized lenses on a pastel-blue afternoon and the surface tension of the page resolves into a single warm console of *yes, today is a good day for work*. ## Layout Motifs and Structure The page is **a single full-bleed pastel HUD overlay (2% in the registry — explicitly claimed)** layered over a slow-drifting aurora-and-water field. The browser viewport *is* the cockpit canopy. There is no scroll-into-card-grid here, no card-grid at all — and that is the load-bearing structural deviation. Instead the document is **one fixed-height "instrument deck" + one long but architecturally thin scroll-channel that runs as a vertical sonar tape down the right margin**. The HUD is composed of **seven pastel reticule panels** floating against the aurora field: - **TL (top-left): Identification reticule.** A 360×220 px hairline frame containing the visitor's coordinates (live `Date.now()` rendered as a fictional dive-time MM:SS:cs counter, ticking), a pastel sea-foam compass rose, and the masthead `desca.work` set in serif-revival italic at 92px. Tilt-3d rest pose: `rotateX(8deg) rotateY(-6deg) translateZ(0)` — the panel is angled like a chart pinned to a sloped console. - **TR (top-right): Aurora horizon strip.** A 480×140 px panoramic instrument that renders the aurora as a thin pastel oscilloscope trace — a soft cubic-bezier curve sweeping from `#A7D8E8` through `#F4C9D7` into `#C9E8C7` and back, breathing on a 12-second loop. - **CL (center-left): Work-log reticule.** A 320×420 px vertical pastel terminal listing six recent works as numbered dive entries: `0001 / 0002 / 0003 …`, each followed by a sea-buoy bullet and a single-line description in mono. Tilt rest pose: `rotateY(-9deg) rotateZ(-1.2deg)`. - **CC (center-center): The main viewing window.** A 56vw × 38vh circular pastel porthole with a hairline cyan ring, holding **abstract-shapes (2% in the registry — claimed)** that drift slowly across the aperture: pale-coral lozenges, sea-foam rounded triangles, a single mint half-disc. Tilt rest pose: zero. This is the calm eye of the HUD. - **CR (center-right): Sonar tape.** A 64×62vh narrow vertical strip with horizontal pastel tick-marks every 1vh, descending. The tape is the *only* element that responds to scroll — its tick-marks count downward as the visitor scrolls, exposing one new annotated dive entry per 80vh of scroll. The rest of the HUD remains fixed. - **BL (bottom-left): Status reticule.** A 280×120 px hairline panel showing four pastel status pips: `LINK · TIDE · AIR · LIGHT`. Each pip pulses on a slightly different cycle (1.4s, 1.8s, 2.3s, 3.1s) so the heartbeat is never quite synchronous, the way real instruments never are. Tilt rest pose: `rotateX(-6deg) rotateY(8deg)`. - **BR (bottom-right): Aurora telemetry caption.** A 360×100 px pastel ribbon that reads, in serif-revival italic, the current aurora intensity as a fictional pastel reading (e.g., `aurora index — 0.62 nominal — bright`). Updates softly every 4s with a small fade-cross. Between the seven reticules, the **aurora field** itself fills the rest of the canopy: a slow-moving 4-stop gradient mesh (rose → seafoam → cyan → mint) animated on a 32-second cycle so the canopy is never perceptibly "static" but never visibly "moving" either — it is *atmospheric*, the way actual aurora is. The document height is exactly **640vh** so the sonar-tape can deliver eight discrete dive-entries (intro + six works + colophon) before the tape resets to surface. The HUD itself does not move. **All scroll-induced motion happens inside the CR sonar tape.** This is the inverse of the corpus default, in which the scroll moves whole sections. Here the scroll moves *one ribbon* and the rest of the cockpit holds steady — the way a real cockpit holds steady while the depth gauge counts down. ## Typography and Palette **Typefaces — Google Fonts only, three families, used as serif-revival (3% in the registry — claimed) intentionally promoted to load-bearing.** - **`DM Serif Display`** (regular + italic) — the *serif-revival* lead face. DM Serif Display is the cleanest contemporary revival of a Didone-inflected display serif on Google Fonts: high contrast, narrow ball terminals, an italic that bows like a wave-crest. Used at: `clamp(64px, 9vw, 132px)` for the masthead `desca.work` in italic 400; `clamp(28px, 3.6vw, 56px)` for each dive-entry title in roman 400; `clamp(16px, 1.4vw, 22px)` for the aurora telemetry ribbon in italic 400. The italic is the site's voice — it carries the warmth of the optimistic-bright tone in its forward slope. - **`Cormorant Garamond`** (italic 300, italic 500) — the *secondary* serif-revival face. Used only for inline annotations within the work-log reticule entries, set 14px italic 300, leading 1.5, tracking +0.04em. Cormorant lets DM Serif Display carry the title weight while supplying a slightly older, more contemplative italic underneath — a softer second voice murmuring in the margin of the dive log. - **`JetBrains Mono`** (regular 400, medium 500) — the *instrument* face. Used at 12px for the live MM:SS:cs counter in the identification reticule, the dive numbers `0001 / 0002 …`, the four status pip labels (`LINK · TIDE · AIR · LIGHT`), and the sonar-tape tick annotations. JetBrains Mono's open apertures and hairline punctuation give the readouts the unmistakable feel of a calibrated instrument — without the dystopian heaviness of a bolder mono. No fourth font. No `font-weight: 700+`. No display sans. The serif carries the warmth, the mono carries the precision, and the contrast between the two — italic display serif beside thin mono — is the site's typographic signature. **Palette — pastel (16% in the registry, deliberately steered into a *seapunk-pastel* corner that the corpus has not occupied):** - `#F6F2EC` — *Salt-bleached canvas* — the canopy base. The aurora drifts over this. Almost-white but sun-warmed, never cold-white. - `#A7D8E8` — *Photic cyan* — the dominant pastel. Hairline reticule frames, status `LINK` pip, aurora-trace cool stop. - `#F4C9D7` — *Coral foam* — the warm pastel counterweight. Aurora-trace warm stop, status `LIGHT` pip, `desca` italic shadow halo. - `#C9E8C7` — *Sea-foam mint* — the secondary cool pastel. Compass rose, status `TIDE` pip, aurora-trace mid stop. - `#FFE6B3` — *Buoy cream* — accent pastel for the status `AIR` pip and the dive-number `0001` glyphs. - `#3E5A6E` — *Deep-channel ink* — the only "dark" hue in the document. Used for body text on canvas, the hairline of every reticule frame, and the mono readouts. Never black; always the muted blue-graphite of a wet chart. - `#7A98A8` — *Mid-water graphite* — half-tones for status pip rims, sonar tick-marks, the secondary annotations in Cormorant italic. - `#E97B9E` — *Single signal pink* — used **once** per page-load, as the color of the active dive-entry's number on the sonar tape. Every other element on the page is pastel. This single saturated coral-pink is the only "loud" hue in the document — it appears, blooms, and recedes as the sonar tape advances. The contrast ratio between `#3E5A6E` and `#F6F2EC` carries body legibility; everything else lives in the soft midband, deliberately, because legibility-via-saturation is not the design's goal — *atmospheric pastel cohesion* is. ## Imagery and Motifs The visual world is built from four motif families, **all rendered in CSS, SVG, and a single procedurally-generated WebGL aurora plane**. Zero photography (98% in the registry — its exclusion is the largest single deviation). Zero stock illustration. Zero icons. Zero Lottie. Zero video. Zero 3D models. **1. Aurora-lights (1% in the registry — explicitly claimed as the dominant motif).** A single full-canopy `` element runs a tiny GLSL fragment shader (≤80 lines) that computes a four-stop pastel gradient mesh whose control points drift along Lissajous curves with periods 32s / 41s / 53s / 67s. The four stops are exactly the four pastels (`#A7D8E8`, `#F4C9D7`, `#C9E8C7`, `#FFE6B3`). The shader applies a 0.6-strength simplex-noise displacement so the gradient never resolves into a clean band — the aurora always shimmers, slightly. There is no pulse, no flash, no flare. The aurora is *quiet weather*. It plays at 30fps with a 0.4 alpha multiplier, layered behind the seven reticules. On `prefers-reduced-motion`, the canvas freezes on a single hand-curated frame — still beautiful, but motionless. **2. Abstract-shapes (2% in the registry — explicitly claimed).** Inside the CC main porthole, six pastel abstract shapes drift slowly in 2D — each ~120–280 px across, each a pure SVG with one fill, no stroke, no gradient. They are not icons; they are not symbols; they are *flotsam*: a coral lozenge (`#F4C9D7`, 240×80, ellipse), a mint half-disc (`#C9E8C7`, 200×100, half-ellipse), a seafoam rounded-triangle (`#A7D8E8`, 180×180, 8% corner radius), a buoy-cream pill (`#FFE6B3`, 160×60, full pill), a deep-channel hairline ring (`#3E5A6E`, stroke 1, 220×220), and a coral-foam crescent (`#F4C9D7`, 200×200, boolean). Each shape has its own slow drift — speeds 14–28 px/s, with subtle phase offsets — so the porthole always shows a *different* arrangement. The shapes wrap around the porthole edge with a soft pastel feather. There is no parallax. Drift is constant. Motion is calm. **3. Pastel HUD reticules (the structural motif).** Every reticule frame is a 1px hairline rectangle in `#3E5A6E` with rounded corners (radius 4px) and four corner cartouches drawn in 1px hairlines in `#A7D8E8`. The cartouches are **L-shaped tick marks** at each corner — 18px arms — reminiscent of camera focus brackets. Each reticule has a `data-tilt-rest="rx=Xdeg ry=Ydeg rz=Zdeg"` attribute that defines its base 3D rotation; the seven reticules together form a gentle inward-cupped "cockpit canopy" geometry, as though the visitor sits inside a low-poly pastel sphere. Tilt-3d (23% in the registry — claimed and *amplified*: most corpus uses are single-card hover; here it is the entire layout's resting geometry). **4. Sonar tick-marks and dive-numbers (the secondary motif).** The CR sonar tape is built from 100 horizontal hairline ticks descending in JetBrains Mono — every fifth tick is labeled with a depth in fictional pastel meters (`8.0m / 8.5m / 9.0m …`). As the visitor scrolls, ticks pass upward through the tape's viewport and the active dive-entry blooms in single-signal-pink (`#E97B9E`) at the current tape position. This is the only place in the document where saturated color appears. **No motifs from the overused band.** No photography. No glassmorphism. No hand-drawn. No card-grids. No magnetic cursor blob. No cursor-follow trail. No spring-easing card-lift. The motion vocabulary is restricted to: aurora drift, reticule tilt-3d resting geometry, gentle hover-bob (2px pastel y-translate), sonar-tape scroll, and the once-per-load bloom of the active dive-number. ## Prompts for Implementation Build desca.work as **one HTML document, one CSS file, one small ES module, and two assets: an 80-line GLSL fragment shader (`aurora.frag`) and a single SVG sprite-sheet of the seven reticule cartouches and six porthole abstract shapes (`hud.svg`, ~6kb)**. No framework. No build step beyond a single esbuild pass. No bundler beyond that. No React. No SPA. No router. No Lottie. No `` for anything except the aurora. No video. No webfont self-host (use the Google Fonts CSS API). No images. No analytics. No cookies. No CTA buttons. No pricing block. No stat-grid. No testimonials. No call-to-action of any kind. No newsletter signup. No "book a call". No social-proof logos. No team avatars. No feature comparison table. **The page tells one story, in eight beats, all rendered through the sonar tape:** 1. **Beat 1 (surface).** The visitor lands. The aurora canopy fades in over 1200ms from a held first-frame. The seven reticules tilt into place from a flat 0deg state to their rest tilt-3d geometry over 1800ms with staggered delays of 60ms each, eased on `cubic-bezier(0.16, 1, 0.3, 1)`. The masthead `desca.work` types into the TL identification reticule — but not as `typewriter-effect` (10% in the registry, avoided). Instead, the italic letters fade in **right-to-left**, one every 80ms, as if the title is being calligraphically drawn in reverse by a slow brush. The MM:SS:cs counter starts ticking. The aurora horizon-strip oscilloscope begins its 12-second sweep. Total intro length: 2400ms. After that, the cockpit is awake and the visitor is on the surface, dive-entry `0000`. 2. **Beats 2–7 (six works).** Each scroll of 80vh advances the sonar tape one dive-entry. The CR tape's tick-marks scroll up by 80vh-equivalent ticks. The active dive number blooms pink. The corresponding entry in the CL work-log reticule highlights with a 1px pastel cyan inset-stroke for 600ms, then settles to its resting hairline. The CC porthole's abstract shapes do not change — they are the calm eye, always — but a thin pastel caption fades in beneath the porthole, in serif-revival italic, naming the work in question. Each beat lasts as long as the visitor stays. There is no auto-advance. There is no autoplay. There is no countdown. 3. **Beat 8 (surface return).** At scroll position 640vh, the tape resets. The active dive number returns to `0000`. The masthead pulses once — softly, a single 1.04× pastel breath over 1200ms. The aurora warms by ~6% (the warm stops gain a touch more weight in the gradient mesh). The page is back at the surface. The visitor can scroll back up; nothing is gated, nothing is locked. **Animation budget.** The aurora canvas runs continuously at 30fps. Every other animation is `requestAnimationFrame`-throttled to event-driven (hover, scroll, focus). No always-on JS RAF loop outside the aurora. The seven reticules use CSS `transform: rotateX/Y/Z()` with `will-change: transform` only on hover. Tilt-3d on hover is `+/- 4deg` from rest pose, eased on a 240ms `cubic-bezier(0.34, 1.56, 0.64, 1)` with a soft overshoot — the reticules nod the way buoys nod. Status pip pulses are pure CSS keyframes. The single signal-pink bloom is a 360ms ease-out scale + opacity. **Magnetic cursor (70% in the registry) is not used.** **Cursor-follow trail (80% in the registry) is not used.** **Spring physics (80% in the registry) is not used.** This is a HUD, not a playground. The cursor is a periscope, not a wand. **Storytelling thesis.** The narrative the visitor experiences is: *I am sitting in the cockpit of a small, pastel, optimistic research console at high noon over a calm lagoon. The aurora is up. The instruments are humming. The work I am here to see is being read off the sonar tape, one entry at a time, by an instrument that is genuinely fond of the work it is describing.* That sentence is the brief. Every line of CSS, every shader pixel, every italic letter must support that sentence. If a candidate animation, color, or layout cannot be defended with that sentence, it does not ship. **Bias toward full-screen narrative.** The HUD never breaks into a "section." The page never collapses to a single column. There is no mobile-stacked card list. On viewports below 720px, the seven reticules contract their geometry and the CR sonar tape moves to a horizontal bottom-strip — but the HUD remains a HUD. There is no fallback to a generic responsive document. **AVOID, hard.** No CTA-heavy layouts. No pricing blocks. No stat-grids. No "trusted by". No "as featured in". No FAQ accordion. No newsletter-on-scroll modal. No exit-intent popup. No cookie banner (the page sets none). No testimonial carousel. No team-section avatar wall. No before/after slider. No comparison table. No "see how it works" step diagram. No `dashboard` (28% in registry). No `card-grid` (79%). No `sidebar` (25%). No `bento-box` (15%). ## Uniqueness Notes This design commits to the following differentiators, chosen explicitly to avoid duplicating any other CMassC site and to lean hard into the underused patterns surfaced by the frequency report: 1. **Seapunk reframed as high-key dawn optimism, not late-night Tumblr.** Seapunk sits at 2% in the registry and where it appears at all in the broader web, it is almost always rendered in the dim, lava-lampy, dolphins-and-marble idiom of 2012 Tumblr — heavy cyan saturation, neon coral, vaporwave flotsam. desca.work *inverts the entire affective frame*: pastel salt-bleached canvas, sea-foam mint, dawn coral-foam pink, no neon, no marble, no dolphin, no ``, no Y2K chrome. The aesthetic is rebuilt as a calm pastel cockpit at high noon over a freshwater lagoon, with the optimistic-bright tone (6% in the registry) doing the affective heavy lifting. 2. **Hud-overlay (2% in the registry) promoted from a stat-dashboard ornament to the entire page's structural skeleton.** Most corpus uses of hud-overlay apply the HUD framing to a single hero or to a stats panel. desca.work makes seven reticules at fixed cockpit positions the *entire* document structure — the page never collapses to a section list, never resolves to a card-grid, never opens a sidebar. The HUD *is* the page, and the only motion across that HUD is one vertical sonar tape on the right margin. From the frequency report, no other site treats hud-overlay this way. 3. **Aurora-lights (1% in the registry) as the page's living atmosphere, not a decorative banner.** A four-stop pastel gradient-mesh shader runs continuously across the full canopy on a 32-second drift cycle with simplex-noise displacement, so the aurora is *quiet weather*, not a marketing flourish. It is the only continuously-animated element on the page; everything else is event-driven. No other site in the corpus uses aurora-lights as the always-on environmental layer of the document. 4. **Abstract-shapes (2% in the registry) restricted to a single 56vw × 38vh porthole as drifting flotsam.** Most corpus uses of abstract-shapes scatter geometry across hero backgrounds. desca.work confines all abstract shapes to one porthole and lets six pure-SVG, single-fill, no-stroke shapes drift slowly across that aperture as the *only* representational imagery on the page. There is no photography (98% baseline — the largest single deviation), no icon-set, no illustration. The porthole is the only "image" on the page, and what it shows is shapes, not things. 5. **Serif-revival (3% in the registry) carrying the entire site's voice, paired with mono in a HUD context.** The corpus typically reaches for grotesque-sans or display-bold for HUD contexts; desca.work pairs DM Serif Display italic with JetBrains Mono so the readout has the warmth of a marine biologist's handwritten dive log *and* the precision of a calibrated instrument. The italic is the only voice; there is no display sans, no rounded-sans, no eclectic-hybrid. From the frequency report, no other site in the corpus uses serif-revival in this register. 6. **Tilt-3d (23% in the registry) amplified from a single hover trick to the layout's resting geometry.** Corpus uses of tilt-3d are almost universally on-hover card-tilts. desca.work makes tilt-3d the *base* state of the seven reticules — the cockpit is permanently angled inward at rest, and hover only nudges each reticule by ±4deg from that angled rest pose. The HUD is never flat. This re-claims tilt-3d from "hover ornament" to "spatial architecture." 7. **No card-grid, no card, no card.** Card-grid sits at 79% in the registry. desca.work has zero cards. Zero. The work is not presented in cards. Each work is a single line on a sonar tape. This is the structural deviation that most distinguishes the page from the corpus default. 8. **Single signal-pink (`#E97B9E`) used exactly once per scroll-position.** The entire palette is pastel; the lone saturated hue appears only as the active dive-entry on the sonar tape, blooming and receding. This single-saturation-discipline is rare in the corpus, which tends toward gradient-everywhere (97% baseline). **Avoided patterns from the frequency report:** photography (98%, avoided), gradient-as-marketing-flourish (97%, replaced with continuous aurora), warm palette (96%, replaced with pastel), parallax (95%, avoided — the cockpit doesn't parallax), full-bleed marketing hero (92%, avoided — the document is HUD, not hero), centered marketing column (81%, avoided), card-grid (79%, avoided), spring physics (80%, avoided), cursor-follow trail (80%, avoided), magnetic cursor (70%, avoided), stagger-as-reveal (75%, used only for the 60ms-staggered reticule intro, avoided thereafter), hand-drawn aesthetic (96%, avoided), glassmorphism (68%, avoided), warm-inviting tone (24%, replaced with optimistic-bright at 6%), pastoral-romantic tone (29%, avoided). **Chosen seed:** aesthetic: seapunk, layout: hud-overlay, typography: serif-revival, palette: pastel, patterns: tilt-3d, imagery: abstract-shapes, motifs: aurora-lights, tone: optimistic-bright.