# Design Language for desca.work ## Aesthetics and Tone desca.work is an imaginary studio where a botanist and a glassblower share a single enormous skylit workshop — the botanist catalogs living leaf specimens under a loupe while the glassblower inflates organic forms into big, buoyant, impossibly glossy 3D objects. The aesthetic is **inflated-botanical-3d**: physical leaves and vines rendered as if they were mouth-blown glass bubbles, swelling with internal light, catching reflections of a forest canopy above. The mood is **playful-lush** — not precious, not corporate-green, not medicinal. Think of a terrarium designed by a candy factory: deep forest greens that almost glow, creamy warm whites catching the light the way a soap bubble does at the moment before it pops. The tone is **whimsical-confident** — desca.work knows exactly what it is doing and does it with a delighted grin. Copy is short, pointed, and slightly irreverent. No bullet lists of features. No stock-photo handshakes. No earnest sustainability pledges. The page tells a single spatial story: you walk into the workshop, you look around at the glowing leaf-forms filling the space, you understand immediately what desca.work makes. Reference moods: Mikkeller brewery illustration culture (giant inflated forms, botanical precision), Ryo Takemasa illustration (leaf-flat-but-dimensional), Aēsop store interiors (forest green, warm clay, raw material confidence), Studio Drift inflatable sculpture. ## Layout Motifs and Structure The page is built on **diagonal-sections** as its organizing grammar — but these are not mere slanted dividers. Each section is a rhombus-cut viewport: the content plane is rotated approximately 5–8° on alternating axes so that as the user scrolls, the entire canvas feels like a series of glass plates tilted in a light table, each plate holding a different botanical specimen. Desktop: three diagonal content bands fill 100vw, with content occupying a 1200px max-width column that runs straight while the container's clip-path tilts around it. Mobile: the diagonals collapse to 3° cuts, preserving the rhythm without cramping small screens. **Spatial logic:** - **Band 1 — Entry (forest-canopy green background, white text, large inflated leaf hero):** Full-viewport opening. One enormous inflated 3D leaf form centered, tilted 12° clockwise, lit from upper-left. The studio name floats in Playfair Display italic below the leaf at 10vw. No nav — just the mark, the leaf, a single scroll cue arrow. - **Band 2 — Work Gallery (cream background, green type):** A 3×2 asymmetric grid of work items. Each item is a photograph set inside a leaf-shaped clip-path (organic ovate shape, CSS clip-path polygon). Hovering a work item inflates the clip-path outward (cubic-bezier spring) and reveals a brief project title in Playfair italic. Counter-animated numbers (01 → 06) appear in the lower corner of each leaf-cell, counting up as the section scrolls into view. - **Band 3 — About (deep green, white + leaf-cream accent):** Single column, 640px measure. Large drop cap in Playfair Display. One full-width photograph of the workspace, edge-to-edge, framed by the diagonal clip-path cut. No statistics grid. No team cards. A paragraph of studio voice, then a single contact link. - **Band 4 — Contact footer (cream, forest-green type):** Minimal. Studio mark, email, a leaf-vein line drawing as horizontal rule. Scroll behavior: native CSS scroll-snap between bands (optional, not forced). No horizontal scroll. No sticky header competing for attention. ## Typography and Palette **Typography (Google Fonts only):** - **Display — [Playfair Display](https://fonts.google.com/specimen/Playfair+Display)**, italic 700 and upright 400. The voice of the studio. Set at extreme sizes: 10–16vw for hero lines, 4–6vw for section headers. The italic is botanical — its calligraphic swash connects naturally to the leaf-vein motifs. Letter-spacing -1.5% on display, -0.5% on subheads. Optical size: maximum contrast between hairline serifs and thick stems echoes the delicate vein-vs.-lamina contrast of a real leaf. - **Body — [DM Sans](https://fonts.google.com/specimen/DM+Sans)**, weight 300 and 500. Clean humanist grotesque. Crisp against the rich greens. Body text at 17–19px, 1.7 line-height, measure 60–66 characters. Navigation (if any) and captions in DM Sans 500 uppercase, 0.12em letter-spacing, 12px. - **Accent numeral — [Playfair Display SC](https://fonts.google.com/specimen/Playfair+Display+SC)**, used only for the counter-animated project numerals (01, 02 … 06) and pull-quote attributions. Small-caps optical weight anchors the numerals without drawing attention away from the leaf imagery. **Palette:** - `--canopy` `#1B3A2D` — Deep, slightly desaturated forest green. Primary background for hero and about bands. Never used for text on white. - `--grove` `#2D5A3D` — Mid forest green. Card borders, hover states, leaf-vein SVG strokes. - `--fern` `#4A7C5F` — Lighter green. Secondary accent, link underlines, drop caps. - `--cream` `#F5EFE0` — Warm off-white. Background for work gallery and footer. Body text on dark bands. - `--pith` `#C9B99A` — Warm tan-beige. Tertiary accent, horizontal rules, caption text on cream backgrounds. - `--glass-white` `rgba(255,255,255,0.92)` — Used only for the inflated 3D leaf highlight specular — a CSS radial-gradient overlay giving the leaf its glassy internal glow. ## Imagery and Motifs **Photography:** Real workspace photography — not lifestyle, not product mockup, not stock. Images show hands, materials, surfaces at close range. Treated with a subtle green-shift color grade (CSS `filter: saturate(0.85) hue-rotate(5deg)`) to unify with the palette. All photographs are set inside **leaf-shaped clip-paths** (CSS `clip-path: path(…)`) — organic ovate or lanceolate silhouettes, never rectangular crops. **Inflated-3D leaf form (hero element):** The central visual element is a single enormous inflated leaf rendered entirely in CSS/SVG — no raster, no WebGL. Construction: a large elliptical SVG path with a radial-gradient fill simulating subsurface light scatter (chartreuse at center, deepening to `--canopy` at edges), overlaid with a semi-transparent `--glass-white` radial highlight at the upper-left third, and a fine `stroke` in `--grove` along the primary midrib and six lateral veins. The form has a `filter: drop-shadow(0 24px 48px rgba(27,58,45,0.35))` giving it mass and float. On scroll entry, it scales from `0.6` to `1.0` with a spring easing (cubic-bezier 0.34, 1.56, 0.64, 1). **Leaf-vein decorative system:** Every section separator is a horizontal SVG of branching leaf veins — not a line, not a divider rectangle, but a hand-traced primary vein with 8–12 lateral veins branching at 30–45° angles, rendered in `--grove` at 40% opacity, stroke-width 1px. These are path-drawn with CSS animation: `stroke-dasharray` / `stroke-dashoffset` reveal on scroll, drawing left-to-right over 1.2s. **Motif vocabulary:** 1. **Leaf silhouettes as image frames** — all photography clipped to organic ovate shapes. 2. **Inflated bubble leaf** — the hero and the conceptual anchor of the brand. One variant appears in each band, scaled down (12–18vw) and placed off-axis to the right margin as a recurring punctuation. 3. **Vein-line separators** — path-drawn on scroll, never static. 4. **Counter-animated project numerals** — formatted in Playfair Display SC, counting 00 → project number over 0.8s as the work grid enters viewport. ## Prompts for Implementation Treat desca.work as a **single diagonal-sectioned narrative scroll**, not a portfolio homepage. The user does not browse a grid — they walk through four tilted glass plates, each holding something different, all lit from the same forest-canopy light source above. **Diagonal section implementation:** ``` clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 95%); /* Band 2 top-in, bottom-out */ clip-path: polygon(0 5%, 100% 0, 100% 95%, 0 100%); /* Band 3 reversed */ ``` Each band has `margin-top: -5vw` to close the gap left by the cut, creating the overlapping-plates effect. **Inflated leaf CSS (hero):** ``` .leaf-hero { width: clamp(320px, 55vw, 680px); aspect-ratio: 3/4; background: radial-gradient(ellipse 60% 70% at 40% 35%, #8BC48A 0%, #4A7C5F 40%, #1B3A2D 100%); border-radius: 50% 50% 45% 55% / 60% 40% 60% 40%; box-shadow: inset 0 -30px 60px rgba(27,58,45,0.4), 0 30px 80px rgba(27,58,45,0.4); position: relative; } .leaf-hero::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(ellipse 45% 35% at 30% 25%, rgba(255,255,255,0.72) 0%, transparent 70%); } ``` **Counter-animate pattern:** Use Intersection Observer on the `.work-grid` section. When 60% visible, trigger `requestAnimationFrame` counter from 0 to project number over 800ms with an ease-out curve. Numbers display in Playfair Display SC, positioned bottom-left of each leaf-clipped cell at 2rem. **Photography treatment:** All `` tags inside `.work-item` get `clip-path: path('M 0,80 C 0,35 35,0 80,0 … Z')` (normalized to the element's coordinate space via `clipPathUnits="objectBoundingBox"`). CSS-only, no canvas, no JS crop. On hover: `clip-path` transitions from resting ovate to slightly expanded ovate over 0.4s with `transition: clip-path 0.4s cubic-bezier(0.34,1.56,0.64,1)`. **Vein separator animation:** ```css .vein-separator path { stroke-dasharray: 600; stroke-dashoffset: 600; transition: stroke-dashoffset 1.2s ease-in-out; } .vein-separator.in-view path { stroke-dashoffset: 0; } ``` **AVOID:** - Sticky navigation bars covering the diagonal cuts - Card-grid layouts with rectangular thumbnails - Statistics/number grids (the counter-animate pattern is for project numerals only, not vanity metrics) - CTA buttons with rounded pill shapes (use text links only, with a leaf-vein underline drawn in CSS) - Any usage of `warm` palette markers — this is a cool-green palette with warm cream accents, not an earthy warm palette **Bias toward:** Single continuous scroll. The diagonal-sections create natural chapter breaks without requiring the user to click. Transitions between bands should feel like physically tilting a glass plate, not a slide carousel. ## Uniqueness Notes 1. **Inflated-3d applied to botanical subject matter, not tech or product.** The frequency report shows `inflated-3d` at 3% of the corpus, and all existing uses apply it to abstract forms or tech product renders. desca.work is the first to apply the inflated-glassy-bubble treatment to *leaves specifically*, creating a collision between precision botanical illustration and candy-gloss material language that has no precedent in the corpus. 2. **Diagonal-sections used as optical tilted-glass-plate metaphor, not decorative chevrons.** `diagonal-sections` appears at 3% of the corpus. Existing designs use the diagonal cut as a decorative framing device. desca.work makes the diagonal the *structural logic* of the narrative — each cut is a tilted glass plate in a light table, and all content is organized around that metaphor. 3. **Forest-green palette at 1% corpus frequency, deployed as a lush physical green rather than a brand safety color.** The only existing `forest-green` design (archaic.studio) uses it as a scholarly-humidity intellectual cue. desca.work uses forest green as *literal forest* — the colour of light filtered through a canopy, saturated and alive, not muted or academic. 4. **Counter-animate used for project numerals in leaf-cells, not vanity stats.** `counter-animate` appears at 5% corpus. Every existing use is for hero stat counters (users, projects completed, years of experience). desca.work deploys it only for the project index number inside each leaf-shaped work cell, giving the animation a tactile, *cataloguing* quality — as if a botanist is labeling specimens in real time. 5. **Playfair-elegant typography as botanical calligraphy, not luxury branding.** `playfair-elegant` appears at 3% corpus, always paired with luxury/fashion/premium contexts. desca.work pairs Playfair Display italic with botanical leaf veins and inflated-3D forms, using the swash calligraphic quality of the typeface to *echo the curvature of leaf margins and vein branching*, not to signal exclusivity. 6. **Seed:** aesthetic: inflated-3d, layout: diagonal-sections, typography: playfair-elegant, palette: forest-green, patterns: counter-animate, imagery: photography, motifs: leaf-organic, tone: playful. Avoided from frequency analysis: photography as hero background (instead used as leaf-clipped specimens), centered layout, warm palette, parallax pattern, mono typography.