# Design Language for archetype.works ## Aesthetics and Tone archetype.works is a sun-bleached herbarium pressed between the pages of a forgotten typographer's field journal -- a site that feels like discovering a century-old botanical sketchbook where every page has been photocopied one too many times, gaining beautiful grain and texture degradation with each generation. The domain name "archetype" suggests the original pattern, the Platonic ideal from which all copies derive, and this site embodies that concept by presenting itself as the master template from which all other botanical references were traced. The aesthetic is deliberately analog in a digital world: every surface carries the visible texture of aged paper stock, every image looks like it was printed on a 1970s Risograph with slightly misregistered color layers, and every interaction produces the satisfying grit of physical materials being manipulated. The tone is optimistic-bright but tempered by material honesty -- this is not the saccharine brightness of a startup landing page, but the warm, earned optimism of morning light hitting a greenhouse full of thriving specimens. There is joy in the grain, beauty in the imperfection, and a persistent sense that every textured surface tells a story of real use. The overall feeling is that of a living archive that celebrates its own patina: a botanical workshop where the tools are well-worn, the paper is foxed with age spots, and the flowers pressed between pages are somehow still radiating color through translucent vellum. The visual direction draws from Risograph printing, Victorian botanical illustration, and the textured warmth of letterpress ephemera -- all filtered through a cool, silvered-gray light that gives everything the quality of an overcast morning in an English conservatory. This is not warm nostalgia; it is cool clarity layered with material texture. ## Layout Motifs and Structure The layout is built on a hexagonal-honeycomb grid system -- a deliberate rejection of the rectangular grids that dominate 97% of existing designs. The honeycomb is not decorative but structural: content is organized into hexagonal cells that tessellate across the viewport, each cell functioning as a discrete specimen card in the botanical archive. The hexagonal geometry references both the natural structure of honeycombs (connecting to the floral-botanical motif) and the crystallographic grids used in scientific illustration. **Honeycomb Grid System:** - The viewport is divided into a hexagonal tessellation with each hexagon measuring approximately 320px across (flat-to-flat) on desktop, scaling to 160px on mobile - Hexagons are implemented using CSS clip-path: `polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)` applied to grid cells - Every other row is offset by half a hexagon width, creating the classic honeycomb interlock - The grid is built on a CSS Grid foundation: `grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))` with JavaScript adjusting the offset rows - Hexagons are not uniform in content density -- some contain full botanical specimen cards, others hold only a single pressed-flower silhouette, and others are empty with just the paper-grain texture, creating breathing room through deliberate emptiness **Scroll Architecture:** The page is a continuous vertical scroll divided into five "folios" -- each folio representing a chapter of the botanical archive. Between folios, the honeycomb grid dissolves and reforms with a new arrangement, as if the user is turning to a new spread in the field journal. The dissolution effect is achieved through Lottie animations that morph hexagonal outlines into organic floral tendrils before reforming into the next grid configuration. There is no navigation bar; the only wayfinding is a vertical progress indicator on the right edge rendered as a growing vine that blooms at each folio boundary. **Spatial Principles:** - No fixed header or footer -- the honeycomb extends to all edges, with hexagons at the periphery fading into paper-grain noise - Content density follows a center-weighted distribution: the densest, most detailed specimen cards occupy the central hexagons, while peripheral cells carry lighter content or pure texture - Gaps between hexagons (4px) are filled with a hairline botanical illustration -- thin vine tendrils that connect adjacent cells as if the specimens are growing through the grid itself ## Typography and Palette **Typography:** - **Display / Headings:** "Zilla Slab" (Google Fonts) -- a robust, open-source slab-serif with strong bracketed serifs and generous x-height. Used at 48px-88px, weight 700 (Bold), letter-spacing: 0.02em. The slab-serif's mechanical precision evokes the stamped metal type of a Victorian printing press, while its modern proportions keep it readable at display sizes. Headings are set in sentence case with a subtle CSS text-shadow using the paper-grain overlay color (#b8b4ae at 0.3 opacity, offset 1px 1px) to create the illusion of ink pressed into textured stock. Line-height: 1.05 for tightly stacked multi-line headlines. - **Body / Prose:** "Bitter" (Google Fonts) -- a slab-serif designed specifically for screen reading, with slightly heavier horizontal strokes that survive the grain overlay without becoming muddy. Used at 17px, weight 400, line-height: 1.72, letter-spacing: 0.01em. The generous line-height compensates for the visual noise of the paper-grain texture layer, ensuring readability. Paragraph max-width: 38em to match the natural reading width of a field journal page. - **Captions / Labels:** "IBM Plex Mono" (Google Fonts) -- a humanist monospace that bridges the slab-serif warmth with technical precision, used for specimen labels, hex codes, and metadata. Used at 13px, weight 400, letter-spacing: 0.08em, text-transform: uppercase. Each label is preceded by a small botanical bullet (a tiny SVG leaf glyph at 10px) rather than a standard bullet or dash. **Palette -- Cool Grays with Botanical Accents:** The palette is built on cool grays -- a deliberate counter to the warm palettes used in 100% of existing designs. Every gray carries a blue-green undertone, as if the paper stock has been stored in a damp greenhouse and taken on the faintest chlorophyll tint. | Role | Name | Hex | Description | |------|------|-----|-------------| | Background Primary | Herbarium Linen | #e8e6e1 | Warm-cool off-white with visible grain; the base paper stock | | Background Secondary | Greenhouse Fog | #d1cfc9 | Slightly darker cool gray for alternate hexagonal cells | | Text Primary | Press Ink | #2c2c2e | Near-black with a cool blue undertone, like iron-gall ink | | Text Secondary | Foxing Gray | #6b6966 | Medium cool gray for body text and secondary information | | Accent Primary | Specimen Green | #5a7a62 | Muted sage green -- the color of dried botanical specimens | | Accent Secondary | Petal Blush | #c4897a | Dusty terracotta-rose -- pressed flower petals that have oxidized | | Accent Tertiary | Vellum Gold | #b8a472 | Aged paper gold -- foxing spots and gilded page edges | | Highlight | Morning Dew | #8faab2 | Cool blue-gray with green undertones -- greenhouse condensation | | Border / Hairline | Vine Thread | #9e9a92 | Neutral warm-cool gray for hexagonal cell borders and vine illustrations | **Color Application Rules:** - Backgrounds alternate between Herbarium Linen and Greenhouse Fog across hexagonal cells in a checkerboard-like pattern - Accent colors appear sparingly -- Specimen Green for interactive states, Petal Blush for botanical illustration accents, Vellum Gold for folio dividers - No gradients anywhere -- all color transitions are hard-edged or achieved through grain dithering, reinforcing the print-material aesthetic - Text is exclusively Press Ink on light backgrounds; Herbarium Linen on the rare dark-background hexagons ## Imagery and Motifs **Paper-Aged Texture System (Primary Visual Element):** Every surface in the site carries a visible paper-grain texture overlay. This is implemented as a repeating SVG noise pattern (using `` with baseFrequency: 0.85, numOctaves: 4) composited over all content using CSS `mix-blend-mode: multiply` at 0.12 opacity. The grain is not uniform -- it varies in density across the page, with heavier grain concentration at hexagon edges (simulating ink bleed at cut lines) and lighter grain at cell centers. A second, coarser noise layer (baseFrequency: 0.15) at 0.06 opacity adds larger foxing spots -- the brown age marks that appear on old paper. These foxing spots use Vellum Gold (#b8a472) rather than the base grain color, creating warm speckles that punctuate the cool gray surface. **Floral-Botanical Motifs:** The site's decorative language is built entirely from botanical illustration: pressed flowers, dried leaves, seed pods, and vine tendrils rendered as single-color SVG silhouettes. These are not photographic -- they have the quality of Victorian copperplate engravings reduced to flat silhouettes. Each of the five folios features a different botanical family: 1. **Folio I -- Ranunculaceae** (buttercup family): delicate, multi-petaled flowers with fine stamens 2. **Folio II -- Apiaceae** (carrot/parsley family): lace-like umbel clusters and feathery compound leaves 3. **Folio III -- Asteraceae** (daisy family): radial symmetry, ray florets, composite flower heads 4. **Folio IV -- Fabaceae** (legume family): bilateral symmetry, pod shapes, trifoliate leaves 5. **Folio V -- Lamiaceae** (mint family): whorled flower clusters, square-stemmed branches, aromatic leaf shapes Each botanical silhouette is rendered in Specimen Green (#5a7a62) at 0.25 opacity, positioned behind content as watermark-like background elements within hexagonal cells. On hover, the silhouette sharpens to full opacity with a 600ms ease-out transition, as if the pressed specimen is being lifted from the page and examined closely. **Risograph Print Registration Artifacts:** Occasional content elements (particularly headings and the folio divider illustrations) are rendered with a deliberate color mis-registration effect: the element is duplicated with a 2px offset, one layer in Petal Blush (#c4897a) and one in Specimen Green (#5a7a62), with the overlap creating a muted third tone. This is achieved through layered CSS text-shadow or duplicated SVG elements with transform: translate(2px, -1px). The effect is subtle -- just enough to suggest a two-color Risograph print run where the paper shifted slightly between passes. **Vine Connection System:** Between hexagonal cells, thin SVG path illustrations of twisting vine tendrils connect adjacent specimens. These vines are drawn with stroke-width: 1.5px in Vine Thread (#9e9a92) and serve as both decorative elements and visual connectors that guide the eye across the honeycomb grid. The vines are not static -- they are drawn progressively using Lottie animation as the user scrolls, growing from cell to cell as if the botanical specimens are slowly reclaiming the grid structure. ## Prompts for Implementation **Full-Screen Botanical Archive Experience:** The site must be built as a continuous vertical scroll through five folios of a botanical field journal. There is no navigation menu, no hamburger icon, no footer links. The hero is a full-viewport honeycomb grid where the central hexagon contains the site title ("archetype.works") set in Zilla Slab 88px Bold on a paper-textured background, surrounded by hexagonal cells containing faint botanical silhouettes that sharpen on hover. The only persistent UI element is the vine progress indicator on the right edge -- a vertical SVG path that grows downward as the user scrolls, sprouting small leaf nodes at each folio boundary. **Hexagonal Grid Implementation:** Use CSS Grid with clip-path for the honeycomb structure. Each hexagonal cell is a `
` with `clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)` and an internal padding of 24px. The grid container uses `grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))` with odd rows offset via `margin-left: calc(var(--hex-width) / 2)`. Each cell has the paper-grain SVG filter applied as a background layer. Interactive cells (those containing specimen content) respond to hover with a 400ms transition that lifts the cell via `transform: translateY(-4px)` and increases the paper-grain opacity from 0.12 to 0.20, simulating the tactile effect of picking up a card from a stack. **Lottie Animation Integration:** Lottie animations are the primary motion system -- no CSS parallax or stagger animations. Three Lottie sequences are required: 1. **Grid Dissolution:** Played between folios, this animation morphs hexagonal grid lines into organic floral tendrils over 2.4 seconds, then reforms them into the next folio's grid configuration. Triggered at scroll position using Intersection Observer. 2. **Vine Growth:** The right-edge progress vine is a single Lottie animation scrubbed to the current scroll position using `lottie.goToAndStop(frame)` where frame = scrollPercent * totalFrames. The vine grows continuously, sprouting leaf buds at 20%, 40%, 60%, 80% scroll positions. 3. **Specimen Reveal:** When a botanical specimen hexagon enters the viewport, a Lottie animation draws the botanical silhouette stroke-by-stroke over 1.8 seconds, from stem to petals, as if an invisible hand is illustrating it in real time. Each folio's five primary specimen cells use this reveal animation, triggered once via Intersection Observer with a 0.3 threshold. **Paper-Grain Texture Layer:** Apply the grain as an SVG filter defined once in a hidden `` element at the top of the document. The filter uses `` composited with `` to tint the noise to the Herbarium Linen base tone. This filter is applied to a fixed-position `
` covering the entire viewport at `pointer-events: none; mix-blend-mode: multiply; opacity: 0.12`. A second, independent noise layer for foxing spots uses baseFrequency: 0.15 with Vellum Gold coloring at opacity: 0.06. **Interaction Model:** - Hovering a hexagonal cell: cell lifts 4px, botanical silhouette sharpens from 0.25 to 1.0 opacity, paper grain intensifies (600ms ease-out) - Clicking a specimen cell: the hexagon expands to fill the viewport (800ms cubic-bezier(0.16, 1, 0.3, 1)) revealing a full botanical description, illustration provenance, and a "close" glyph (a small "x" rendered as two crossed vine tendrils) - Scrolling between folios: the honeycomb grid dissolves via Lottie animation, a new botanical family header fades in with a Risograph mis-registration effect, and the grid reforms with the new folio's specimens - No parallax scrolling anywhere -- motion comes exclusively from Lottie playback and CSS transitions **Performance Notes:** - Lottie JSON files should be inlined in the HTML as script-injected JSON blobs, not loaded as external files - The paper-grain SVG filter is GPU-composited via `will-change: opacity` on the overlay div - Hexagonal clip-paths are applied via CSS classes, not inline styles, enabling browser caching of the computed paths - Only visible hexagons render their botanical silhouettes; off-screen cells use `content-visibility: auto` to defer rendering **AVOID:** CTA buttons, pricing tables, feature comparison grids, testimonial carousels, stat counters, newsletter signup forms, hero background videos, hamburger menus, sticky headers, gradient backgrounds, parallax scroll effects, stagger-entry animations. ## Uniqueness Notes **Differentiators from other designs in this collection:** 1. **Hexagonal-Honeycomb Layout (2% frequency):** Only one other design in the entire collection uses a hexagonal grid. archetype.works makes the honeycomb the foundational structural system, not a decorative accent -- all content is organized into tessellating hexagons that function as specimen cards. This is a radical departure from the asymmetric (97%) and centered (85%) layouts that dominate the collection. The hexagonal geometry creates natural visual rhythm without relying on conventional rectangular grids. 2. **Cool-Gray Palette with No Gradients (2% frequency):** While 100% of existing designs use warm palettes and 97% use gradients, archetype.works is built entirely on cool grays with blue-green undertones and zero gradient transitions. All color changes are hard-edged or achieved through grain-dithering. This produces a distinctly different temperature and material quality -- the coolness of an English greenhouse morning rather than the warmth of a California tech office. 3. **Paper-Aged Imagery System (0% frequency in existing designs):** No other design uses paper-aged imagery as its primary visual language. The combination of SVG feTurbulence grain overlays, foxing spot simulation, and Risograph mis-registration artifacts creates a material texture system that is entirely unique to this site. Every surface tells a story of physical aging and use. 4. **Lottie-Only Animation Strategy (5% frequency):** While 97% of designs use parallax and 94% use stagger animations, archetype.works uses exclusively Lottie-driven motion. The vine growth indicator, grid dissolution transitions, and stroke-by-stroke specimen reveals are all Lottie sequences scrubbed or triggered by scroll position. This produces organic, hand-animated motion quality that CSS keyframes cannot achieve. 5. **Floral-Botanical Motif System (2% frequency):** Only one other design uses floral-botanical motifs, and archetype.works develops this into a rigorous taxonomic system -- five distinct botanical families, each with specific morphological characteristics rendered as SVG silhouettes. The botanical illustrations are not decorative wallpaper but structured content that organizes the five-folio narrative arc. 6. **Slab-Serif Typography (5% frequency):** In a collection dominated by monospace (97%), the use of Zilla Slab and Bitter as the primary type system creates immediate visual distinction. The mechanical bracketed serifs of slab-serif typefaces perfectly complement the letterpress/Risograph printing aesthetic while maintaining excellent screen readability through the paper-grain overlay. **Documented Seed/Style:** - aesthetic: grainy-textured - layout: hexagonal-honeycomb - typography: slab-serif - palette: cool-grays - patterns: lottie-animation - imagery: paper-aged - motifs: floral-botanical - tone: optimistic-bright **Avoided Patterns from Frequency Analysis:** - asymmetric layout (97%) -- replaced with hexagonal-honeycomb - centered layout (85%) -- replaced with center-weighted honeycomb distribution - warm palette (100%) -- replaced with cool-grays - gradient palette (97%) -- eliminated entirely; hard-edged color only - parallax animation (97%) -- eliminated; Lottie-only motion - stagger animation (94%) -- eliminated; Lottie-only motion - mono typography (97%) -- replaced with slab-serif system (IBM Plex Mono used only for captions) - tech motifs (97%) -- replaced with floral-botanical - minimal imagery (91%) -- replaced with paper-aged texture and botanical illustration - photography imagery (55%) -- eliminated; all imagery is illustrated/textured