# Design Language for archetype.works ## Aesthetics and Tone `archetype.works` is **a Bauhaus seed-packet catalog photographed at golden hour through a beekeeper's veil**. The domain reads as a *workshop where Platonic forms are grown* — not manufactured, not coded, but *raised* the way a smallholder raises pole-beans. The site treats every primitive (circle, square, triangle, the Futura `o`, the underline, the grid line) as a **cultivar**: a thing with a season, a soil, a yield, and a slightly different specimen every harvest. The visitor is walking the rows of a *form garden* in late-July sun. The collision at the heart of the seed is non-negotiable and load-bearing: **cottagecore** (warm, pastoral, hand-tended, romantic, slow) is set against **futura-geometric** (1927, Renner, mechanical perfection, drafting-table cold) under a single condition — the geometry has been **left outside**. Futura's perfect circles have weathered. The modernist grid has **moss in its joints**. The optimistic-bright palette is not the manic neon of dopamine sites; it is the optimism of *six-thirty pm in the second week of June* — the hour and season at which a lawn looks edible. The mood is **sun-warmed, breeze-moved, generous, and a little dazzled**. There are no sharp commercial edges. There are no urgency triggers. The visitor never feels sold-to; they feel *invited to walk through*. The page smells (figuratively) of warm linen, beeswax, cut grass, and the faint hot-paper smell of a Vandercook proof-press in the corner of a barn. Every interaction earns the right to a small visible pleasure — a Lottie bee crossing a gridline, a duotone cloud sliding behind a Futura `Ⓞ`, a bokeh-blur lensing through a wildflower stem. The tone is `optimistic-bright`, which here means: **cheerful without being naive, gentle without being sleepy, generous without being saccharine.** Inspirations, named explicitly so the implementer can chase the references: - The *Whole Earth Catalog*, 1971 spring edition, but typeset by Paul Renner. - A Beatrix Potter watercolor reproduced on Risograph in two ink drums (sage green + apricot). - Josef Albers' *Homage to the Square* if Albers had painted them on the side of a chicken coop. - The first thirty seconds of any Studio Ghibli morning scene — *Totoro*'s opening, the bus stop in the rain, but at noon and dry. - A John Deere 1953 tractor manual reset in 64-pt Futura Bold by a designer who has just been paid for the first time in their life. This is the only registered design with the cottagecore/futura-geometric/optimistic-bright triad, and the design exists *because* of that contradiction. Lean into the contradiction. Never let it dissolve into either pure cottage (twee) or pure modernism (cold). ## Layout Motifs and Structure The page is **full-bleed**, but the bleed is a *meadow*. There is no centered column, no card grid, no bento. The viewport is divided by **a single horizon line** placed at exactly `62vh` from the top — the golden ratio inverted, because in a meadow the sky takes the larger portion. Above the horizon: warm sky, diffuse bokeh, drifting Lottie clouds, the largest typographic forms. Below the horizon: meadow-tone gradient, taller Lottie elements (grass, bees, a slow-pacing watering-can), inline body text set on a clearly visible **agricultural grid**. **The grid is the principal motif.** It is not the invisible 12-column scaffold of a normal site; it is *visible, declared, and celebrated* — drawn at 1px in `#3A4A2E` (deep field-green) at 64px on 64px squares, with major lines every 4 cells. This is `motifs: grid-lines`, but treated as **a kitchen garden's planting grid**: a thing the gardener walks between, kneels on, weeds within. Body type sits *on the grid lines* the way seedlings sit on string. Headlines break the grid the way a sunflower breaks a row. The grid is on top of the bokeh, not under it — like a chicken-wire trellis seen against summer sky. Sections are not boxes. They are **plots**. Each plot occupies the full width and a variable height (440–960px), separated only by the continued grid and a small plot-marker — a hand-drawn wooden stake icon in the left margin labeling the plot in 11px Futura Bold uppercase letterspaced +120 units (`PLOT 03 ⋅ ROOTSTOCK`, `PLOT 07 ⋅ POLLINATORS`). The page reads as a **walk down a single garden path** from sky-plot at the top to soil-plot at the bottom, with the horizon gently rising 2vh per scroll-screen until, at the footer, the visitor is *underground* — a final dark-loam plot showing root systems drawn in single-stroke Futura-circle geometry. Specific spatial rules: - Outer margin: **0**. The meadow goes edge-to-edge. - Inner gutter (between body text and grid edge): **64px on desktop, 32px on mobile**. - Maximum text measure: **52ch**, centered in its plot, but each plot's text is offset horizontally by a different amount (the row is *furrowed* — text-block-1 sits at 12vw from left, text-block-2 at 36vw, text-block-3 at 8vw). This breaks the flat-grid feel and makes the visitor's eye walk a sinuous path. - Vertical rhythm: every block aligns to a 32px sub-grid, which aligns to the 64px main grid. The grid is *real*, not decorative — it is `--grid: 64px` in CSS and every margin/padding is a clean multiple. - Headers are **sown into** the grid: a 200px-tall H1 like `WORKS` sits with its baseline on a major grid line and its cap-line two cells above, so two horizontal grid-lines pass *through* the letterforms. The grid is allowed to occlude the type — Futura's perfect circles look extraordinary when bisected by a 1px green horizon. There is no hero CTA. There is no nav bar. Navigation is a thin strip at the top showing only the four cardinal plots (`SKY · MEADOW · BED · LOAM`) in 12px Futura Light spaced like fenceposts, with a 1px grid-line beneath them. ## Typography and Palette **Typography (all Google Fonts, verified):** - **Display & headings — `Jost`** (Google Fonts, variable, wght 100–900). Jost is the production-grade open-source revival of Renner's Futura, with cleaner ink-traps and a fuller weight range. Set H1 in `Jost` 800 at clamp(96px, 18vw, 320px), `letter-spacing: -0.02em`, `font-feature-settings: "ss01"` to access the geometric single-storey `a`. Headlines are always **lowercase** — Renner's circles are at their best in lowercase, and lowercase reads warmer in a cottagecore context. The `o`, `e`, `a`, `c` of Jost are near-perfect circles; the design treats those circles as **suns, moons, plot markers, hayballs** — they are visual events. - **Body — `Inter`** (Google Fonts, variable). Set at 17px/1.7, weight 380, tracking +0.005em. Inter is used because it survives at small sizes against a busy bokeh background and pairs cleanly with Jost's geometry without competing with it. - **Plot labels & captions — `JetBrains Mono`** (Google Fonts, weight 500). Used at 11px UPPERCASE letter-spaced +0.12em for plot stakes, image captions, and the seed-packet metadata blocks. The mono is the *clipboard handwriting* of the gardener; it grounds the romance in something procedural. - **Decorative quote — `Caveat`** (Google Fonts, weight 500). Used **once per page maximum**, for a hand-written marginal note pinned beside one image, like a label written on a string-tag tied to a tomato cage. Single-use only — Caveat is the rosemary, not the salad. **Palette (duotone-led, eight specified hexes):** The page is a true duotone *system*: every photograph and every Lottie animation is rendered in exactly two inks chosen from the palette below, never four. Different plots use different duotone pairings, but the eight master hexes are: - `#FFF6E3` — *unbleached linen* (paper / sky-base / page background) - `#F2D89A` — *late-honey* (mid-light, pollen, sunbeam glow) - `#E89B6C` — *apricot risograph* (duotone ink A, primary accent, the warm half of every duotone pair) - `#7FA67A` — *sage-leaf* (duotone ink B for sky/meadow plots, soft chlorophyll) - `#3A4A2E` — *field-green* (the grid line, body text on light, primary structural ink) - `#1F2410` — *loam-black* (deepest text, footer underground, used sparingly) - `#A4C7D8` — *summer-veil blue* (sky-bokeh, far-distance haze, used only above the horizon) - `#C9385A` — *poppy* (single accent — links, the one Lottie bee's body, the heart of one flower; never two poppies on screen at once) Duotone pairings by plot: - **SKY plot:** `#A4C7D8` + `#F2D89A` (summer-veil + late-honey) — high airy contrast, low saturation. - **MEADOW plot:** `#7FA67A` + `#E89B6C` (sage + apricot) — the iconic cottagecore riso pair. - **BED plot:** `#E89B6C` + `#3A4A2E` (apricot + field-green) — vegetable-bed contrast, where most photography lives. - **LOAM plot:** `#3A4A2E` + `#1F2410` (field-green + loam-black) — underground, the only dark plot, pulls the visitor down at page end like cool soil. The palette is `optimistic-bright` because every hex except loam-black has high luminance and warm undertone; bright but never electric, never neon. The brightness comes from `#FFF6E3` and `#F2D89A` flooding 70%+ of the visible area, never from saturation spikes. ## Imagery and Motifs **Bokeh-background** is the foundational image layer. The entire page sits on a **single huge bokeh field** — a 4000×2400 image of out-of-focus wildflower meadow at golden hour, rendered as a CSS `background-image` on `` with `background-attachment: fixed`. The bokeh is **duotoned per plot** using CSS `filter: sepia(1) hue-rotate(...) saturate(...)` plus a `mix-blend-mode: multiply` overlay in the plot's secondary ink. As the visitor scrolls between plots, the bokeh's duotone tint *shifts* through the four pairings via a smooth `transition: filter 1.2s ease-in-out`. The bokeh is real photography, but it is processed past recognition into pure light-shape — circles of confusion, the same circles that obsess Renner's Futura. **The bokeh is the meadow's way of being a Futura `o`.** This is the secret unifying gesture of the whole design. **Lottie animations** are the page's living inhabitants. The frequency report shows `lottie-animation` at 2% — almost unused — so this design leans hard into Lottie as a primary motif, not a garnish. Specific Lotties (all to be authored as new JSON, hand-drawn in After Effects style with two-color limit per piece): 1. **The bee.** A single bee crosses the viewport at a slow diagonal every 38–44 seconds, body in `#C9385A`, wings in `#F2D89A` 50% opacity. Path is a hand-drawn wandering curve, not a straight line. Loops with a long offscreen pause so the bee is rare and noticed. 2. **The cloud caravan.** Three duotoned clouds drift across the SKY plot at 0.6vw/sec, 0.4vw/sec, 0.3vw/sec (parallax). Each cloud is a Lottie of slowly morphing simple shapes — circles deflating and inflating like real cumulus. Sage on summer-veil ground. 3. **The watering can.** Pinned to the BED plot, animates a slow tilt every 12 seconds, with three apricot-ink water-droplets falling and being absorbed into the field-green grid below. 4. **The grid sprout.** When a plot scrolls into view, a single seedling Lottie pushes up through one of the grid intersections inside that plot — two cotyledons unfurl over 2.4 seconds, then the seedling stays (does not loop). On page reload, sprouts appear in different intersections (deterministic per visitor IP for stability across scroll). 5. **The wind ripple.** A ground-level Lottie in the MEADOW plot of grass blades bending in a left-to-right wave every 9 seconds. Field-green strokes over apricot ground. 6. **The page breathes.** A whole-page subtle Lottie at 3% opacity laid over everything, with slowly drifting motes of pollen-light. This is the page's pulse. **Grid-lines** as a motif appear three ways: - The visible 64px planting grid (described in Layout). - The horizon line itself, a single 1.5px field-green stroke at `top: 62vh`. - **Stake-shadows**: every plot label is connected to its plot's first heading by a single 1px grid-aligned dotted line, like the line a gardener strings between two stakes when sowing in a row. **Photography**: minimal, used at most twice on the page. Each photo is hard-duotoned (`` rendered through SVG `` to the plot's two inks), aspect 4:5, and *cropped to fit a grid cell exactly*. The photos are: (1) a hand opening a seed packet, (2) a single Futura `o` pressed into clay (commissioned, not stock). **No icons** in any conventional UI sense. Icons are replaced by **glyphic Lottie marks** — a tiny animating sun, a tiny animating leaf, a tiny animating spade — each drawn as a single Futura-circle abstraction. **Texture**: `#FFF6E3` page background carries an extremely subtle 200dpi paper-grain noise (SVG `` at 4% opacity), so the unbleached linen reads as *paper*, never as flat hex. ## Prompts for Implementation Build this as **a single golden-hour walk through a planting grid**, scrolled vertically, narrated by what is growing. The implementation must obey four vows. **Vow 1 — The grid is real, declared, and beautiful.** Set `:root { --grid: 64px; --grid-line: 1px; --grid-color: #3A4A2E; }` and *use these as the backbone of the entire layout*. Use CSS subgrid for the plots so child elements snap to the same lattice as the parent. Render the grid as a `` `position: fixed; inset: 0; pointer-events: none; z-index: 1;` covering the viewport, with `` elements at every 64px. Make the major lines (every 4th) `stroke-opacity: 0.65` and minor lines `stroke-opacity: 0.18`. The grid scrolls *with* the page (not fixed) so plot-elements line up with their grid coordinates as the visitor moves. **Do not hide the grid.** It is the most cottagecore-modernist thing on the page. **Vow 2 — Lottie carries the life, never JS animation libraries.** Use the official `lottie-web` (or `@lottiefiles/lottie-player`) for every animated mark. Author at least six distinct Lottie JSONs — do not reuse stock files. Each Lottie must obey the duotone discipline of its plot (two colors, no more). Lottie playback rules: - Use `IntersectionObserver` to start each Lottie when its host plot is ≥30% in view, freeze when <10%. - Use `requestIdleCallback` to queue Lottie loads after the bokeh image, never before. - The bee is the only Lottie that animates outside of viewport-gated triggers — it is on a free 40-second loop with `setInterval` because the bee is *the time-keeper of the page*. **Vow 3 — Every photograph and every Lottie is duotoned by its plot.** Implement a single SVG `` per duotone pair (four total) using `` to map luminance to a two-color ramp. Apply via CSS `filter: url(#duotone-meadow)`. Lotties are duotoned by *authoring* — there are only ever two `fill` colors in each Lottie JSON. Photos are duotoned by *filter*. Bokeh background is duotoned by `mix-blend-mode: multiply` on a full-bleed colored overlay layer that swaps color via `requestAnimationFrame`-driven scroll progress. Test the swap at slow scroll: the duotone change should feel like a cloud crossing the sun, not a hard cut. **Vow 4 — Optimism is structural, never decorative.** `optimistic-bright` does not mean exclamation marks or smiley emoji. It means: the page is **brighter at the bottom of every plot than at its top**, the visitor literally walks into more light. Implement this with a per-plot `linear-gradient` from the plot's secondary ink at 0% (top) to `#FFF6E3` at 100% (bottom), behind the bokeh. The horizon line rises 2vh per plot. The cumulative effect is that scrolling = sunrise. The final LOAM plot inverts this — going underground — and the final 200vh of the page transitions to dark loam, where the *form of the seed* (a Futura `o` in `#F2D89A` on `#1F2410`) is the only bright element. **The page ends with a sown seed, not a CTA.** **Build sequence (in order):** 1. **The grid** — first thing rendered, always visible, all subsequent layout snaps to it. 2. **The bokeh** — second layer, full-bleed, fixed, duotoned by scroll. 3. **The horizon** — single line at 62vh, rising as plots progress. 4. **The plots** — four full-width sections (SKY, MEADOW, BED, LOAM), each with one large Jost lowercase headline that *intersects* the grid lines, one paragraph of Inter body text on a furrowed offset, one stake-label in JetBrains Mono. 5. **The Lotties** — sown into specific grid intersections, never floating freely. 6. **The poppy accent** — the single `#C9385A` element on the page, used only once: as the dot of the `i` in the H1 of the MEADOW plot. The whole page's saturation is paid for by that one dot. **Content texture (write copy in this register):** Treat `archetype.works` as a workshop that *grows* the platonic forms — circle, square, triangle, line — like vegetables. Page copy is in the second-person voice of a generous gardener: warm, concrete, never marketing-jargon, never bulleted feature lists. Sample copy register: *"In the third row, where last summer the tomatoes leaned, we are raising a cold-frame of right-angles. They are pale yet, but the yellow ones are ahead. By August we expect the first squares."* The tone is `optimistic-bright` because the page genuinely believes the forms will come up. **AVOID (hard list):** - Hero CTAs of any kind. There is no "Get Started," no "Try Free," no "Book Demo." - Pricing blocks, stat grids, feature cards, testimonial sliders, logo bars, comparison tables. - Any sticky header beyond the four-plot fence-row strip at top. - Hamburger menus, mega-nav, footer link grids — the footer is the LOAM plot itself. - Modals, popups, cookie banners with personality, urgency timers. - Glassmorphism, gradient meshes, neon glows. The brightness must come from cream + honey, never from bloom-filter. - Generic bokeh stock — the bokeh must be authored once and duotoned per plot. - Any animation library other than Lottie + native CSS transitions. No GSAP, no Framer Motion. The page's life is *grown*, not *driven*. - Any photograph not hard-duotoned to its plot's two inks. - Caveat font in more than one location. **Storytelling spine:** The visitor arrives at noon-sky. They scroll into a meadow at golden hour. They kneel at a planted bed. They go underground to the seed. The narrative of the site is *the day cycle compressed into a scroll*, and `archetype.works` is what is being grown. ## Uniqueness Notes **Chosen seed (per assignment):** aesthetic = **cottagecore**, layout = **full-bleed**, typography = **futura-geometric**, palette = **duotone**, patterns = **lottie-animation**, imagery = **bokeh-background**, motifs = **grid-lines**, tone = **optimistic-bright**. **Frequency context (from the registry's 34 prior designs):** - `cottagecore` aesthetic: **2%** (one prior use). This is a deliberately rare lane. - `futura-geometric` typography: **0%**. *Never used in the registry.* This design is the first. - `lottie-animation` patterns: **2%** (one prior use). Treated here as a primary motif rather than a flourish. - `optimistic-bright` tone: **2%** (one prior use). Uncommon — explicitly distinct from the dominant `professional` (32%) and `friendly` (29%) tones. - `bokeh-background` imagery: **5%** — uncommon. - `grid-lines` motifs: **5%** — uncommon, and used here as *visible structural element* rather than texture. - `duotone` palette: **17%** — moderate, but used here as a *per-plot system* rather than a single global pair. - `full-bleed` layout: **88%** — common, but inverted into a horizontal *meadow* with a single horizon line and walked plot-by-plot, never as a hero/cards stack. **Patterns avoided that dominate the registry:** - `parallax` (88%): used minimally — only the cloud caravan has differential drift speeds. No parallax-section structure. - `scroll-triggered` (61%): present only in plot-entry Lottie sprouts; not used for fade-in choreography of every block. - `stagger` (61%): not used at all. The page is grown, not staggered. - `photography` (91%): reduced to two photos maximum, both heavily duotoned — the page is a Lottie + bokeh world, not a photo grid. - `mono` typography (94%): present only as small captions/plot-labels, never as primary type. Jost's geometric sans dominates. - `centered` layout (91%): explicitly broken — body text is *furrowed*, offset horizontally per plot in a sinuous walk. - `vintage` motifs (85%): refused. The cottagecore here is *current and warm*, not nostalgic-vintage. **Three or more concrete differentiators from every other design in the registry:** 1. **The grid is the protagonist, the type is sown into it, and both are visible at the same time.** No prior design treats `grid-lines` as a celebrated 64px-on-64px planting lattice that *occludes its own headlines*. Most designs hide structural grids; this one displays them as agricultural infrastructure. Headlines like `works` in 320px Jost lowercase have horizontal grid lines passing through their `o`-counters — a cottagecore-Bauhaus collision that exists nowhere else in the registry. 2. **Duotone is per-plot and animated by scroll progress, with the bokeh as a single image re-tinted four times.** Other duotone designs (17% of registry) pick one global pair. This design uses four pairs (sky / meadow / bed / loam) and transitions between them as the visitor scrolls — the bokeh background literally shifts ink palette as if a cloud were passing the sun. No prior design ties palette to vertical scroll position this way. 3. **Lottie is the page's circulatory system, not garnish.** With Lottie at 2% across the registry, this design commits to six distinct authored Lottie pieces (bee, cloud-caravan, watering-can, grid-sprout, wind-ripple, pollen-motes) each duotoned to its plot. The bee is a 40-second time-keeper that crosses the viewport at slow diagonals — a piece of *animal infrastructure*, unprecedented. 4. **The narrative is a single day-cycle scroll ending underground at a seed.** No CTA, no signup, no nav. The page resolves to a Futura `o` planted in loam-black soil. The `archetype` of the site — the platonic circle — is shown being *sown*, not sold. This is the only design in the registry that ends below ground. 5. **The collision of `cottagecore` + `futura-geometric` + `optimistic-bright` is uniquely combinatoric.** The registry shows each of these is rare individually (2%, 0%, 2%); the triad has no prior. Cottagecore is usually paired with handwritten/serif. Futura-geometric is usually paired with corporate or Swiss. Optimistic-bright is rare full-stop. Holding all three at once — warm pastoralism, cold modernist circles, and unreserved daylight cheerfulness — is the design's defining bet. 6. **The single poppy accent.** A page-wide chromatic discipline: the entire site uses one `#C9385A` poppy stroke, deployed exactly once (as the dot of the `i` in the MEADOW plot's headline). The brightness budget for the page is paid for by that single 18px circle. No prior registry design constrains its accent color to a single visible element.