name: herbaria-design
version: alpha
description: >
  An evidence-based botanical-skincare apothecary rendered as a scientific
  specimen folio. The system runs on a deep forest-green surface (#1A4D2E) and a
  warm parchment-cream (#F2EADA), wired to a high-voltage citron (#C8D400) and a
  vermillion ink-stamp red (#B83A1A), with burnt-amber (#8B5E0A) hairlines and
  labels. Type is a three-voice editorial stack: a Gilda Display serif for
  romantic headings and italic species names, a condensed Archivo Narrow for
  body, and Azeret Mono for kickers, lab tables, prices and nav — all-caps,
  wide-tracked, set in §-numbered "plates." Everything is sharp-cornered (zero
  radius), depth comes from flat color blocks, dotted/solid hairlines and
  translucent green glass, and the page is a sequence of full-viewport pinned
  scroll acts (split-clip hero, formulary swap, ingredient dossier list,
  SVG-drawn botanical, theme-inverting sourcing cartogram).
colors:
  # Surface
  bg-primary: '#1A4D2E'      # deep forest green — nav, formulary, footer, hero-left, dark sections
  bg-secondary: '#F2EADA'    # parchment cream — page background, library, ledger
  bg-surface: '#EDE4CC'      # warmer cream — formulation sticky + stats panel
  # Text
  text-primary: '#1C1612'    # near-black ink — body on cream, headings on cream
  text-cream: '#F2EADA'      # cream text on green surfaces, hero title line 1
  # Brand / Accent
  accent-citron: '#C8D400'   # high-voltage chartreuse — primary CTA, numerals, hover, active stat
  accent-vermillion: '#B83A1A' # ink-stamp red — kickers, map pins, rules, drop-cap, links
  accent-amber: '#8B5E0A'    # burnt amber — eyebrows, labels, hairlines, dossier table values
  # Hairlines / dividers (alpha tints of amber/citron/cream)
  hairline-amber: 'rgba(139,94,10,0.35)'   # dotted ingredient/table dividers
  hairline-citron: 'rgba(200,212,0,0.2)'   # formulary column divider
  hairline-cream: 'rgba(242,234,218,0.15)' # footer bottom border
  # Glass / overlay
  nav-glass: 'rgba(26,77,46,0.85)'         # blurred translucent green nav
  map-gold: '#C4A030'                       # cartogram continents + grid (SVG only)
typography:
  display:
    fontFamily: "'Gilda Display', serif"
    fontSize: clamp(60px,7.5vw,110px)
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0.02em
  display-italic:
    fontFamily: "'Gilda Display', serif"
    fontSize: clamp(32px,4vw,48px)
    fontWeight: 400
    fontStyle: italic
    lineHeight: 1.1
  body:
    fontFamily: "'Archivo Narrow', sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.65
  kicker:
    fontFamily: "'Azeret Mono', monospace"
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.25em
    textTransform: uppercase
  mono-label:
    fontFamily: "'Azeret Mono', monospace"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.2em
    textTransform: uppercase
  table-mono:
    fontFamily: "'Azeret Mono', monospace"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.5
rounded:                      # radius scale — none used; system is fully sharp
  sm: 0px
  md: 0px
  lg: 0px
spacing:                      # base unit 4px; section padding leans on 60px gutter
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  xxl: 60px
  section: 100px
components:
  nav:
    backgroundColor: '{colors.nav-glass}'
    textColor: '{colors.text-cream}'
    typography: '{typography.mono-label}'
    rounded: '{rounded.sm}'
    padding: '18px 60px'
    # fixed; backdrop-filter blur(6px), darkens to rgba(26,77,46,0.97) on scroll
  btnPrimary:
    backgroundColor: '{colors.accent-citron}'
    textColor: '{colors.text-primary}'
    typography: '{typography.mono-label}'
    rounded: '{rounded.sm}'
    padding: '10px 22px'
    # hover background #b0ba00; label "Browse Apothecary →"
  btnSecondary:
    backgroundColor: 'transparent'
    textColor: '{colors.bg-primary}'
    typography: '{typography.mono-label}'
    rounded: '{rounded.sm}'
    padding: '0 0 2px'
    # 1px bottom-border underline; hover turns vermillion; label "Read Library"
  ingredientRow:
    backgroundColor: 'transparent'
    textColor: '{colors.bg-primary}'
    typography: '{typography.display-italic}'
    rounded: '{rounded.sm}'
    padding: '20px 0'
    # italic species name; bottom hairline {colors.hairline-amber}; hover name → citron
  concTable:
    backgroundColor: 'transparent'
    textColor: '{colors.text-cream}'
    typography: '{typography.table-mono}'
    rounded: '{rounded.sm}'
    padding: '8px 0'
    # dotted amber row borders; value column right-aligned in citron
  hoverPreview:
    backgroundColor: '{colors.bg-primary}'
    textColor: '{colors.text-cream}'
    typography: '{typography.kicker}'
    rounded: '{rounded.sm}'
    padding: '0'
    # fixed 180x220 image card, 1px amber border, tracks cursor, scale 0.92→1
  footerInput:
    backgroundColor: 'transparent'
    textColor: '{colors.text-cream}'
    typography: '{typography.body}'
    rounded: '{rounded.sm}'
    padding: '0 0 8px'
    # underline-only form; placeholder rgba(242,234,218,0.45); Subscribe link in citron
motion:
  hero-panel-reveal: 'clip-path inset wipe (top/bottom) 1.2s cubic-bezier(.86,0,.07,1)'
  hero-windup: 'title letter-spacing 0.35em→0.02em + fade-in, 0.9s cubic-bezier(.2,.8,.2,1), staggered 0.2s/0.45s'
  hero-pull-apart: 'panels translateX ± on scroll, max 22vw, rAF-driven'
  formulary-swap: 'pinned 600vh; 6 panels swap by scroll index; form-name-inner translateY(100%)→0 0.7s'
  svg-draw: 'botanical stroke-dashoffset drawn over 300vh scroll (stem→leaf1→leaf2→leaf3)'
  numeral-parallax: 'oversized 14 translateY at -0.18× scroll'
  theme-inversion: 'sourcing bg/text/map-stroke lerp green→cream over 300vh; pins pulse citron at midpoint'
  blur-to-sharp: 'library heading words filter blur(14px)→0 + fade, 0.6s, 0.07s stagger'
  list-stagger: 'ledger/footer items fade+translateY in via IntersectionObserver, 0.08–0.12s stagger'
icons:
  library: inline SVG
  style: line / outline
  stroke: 0.7px–1.2px
  sizes: { sm: 16px, md: 24px, lg: 24px }
  color: '{colors.accent-citron}'

Herbaria Officina

herbaria-design · alpha

Design spec — version alpha. Source: static HTML (index.html); tokens read from inline styles + class rules. Fictional/sample product; described factually.

Overview

Herbaria Officina dresses an evidence-based botanical skincare brand as a scientific specimen folio — a "plate"-numbered apothecary catalogue. Two surfaces carry the whole system: a deep forest green #1A4D2E and a warm parchment cream #F2EADA (with a slightly warmer #EDE4CC for the formulation chapter). Against them, two voltages do the talking: a chartreuse citron #C8D400 for CTAs, giant numerals, hover states and active stats, and an ink-stamp vermillion #B83A1A for kickers, rules, map pins, the drop-cap and links. A burnt amber #8B5E0A quietly handles eyebrows, labels and the dotted hairlines that rule off every table. The type story is three voices: Gilda Display serif for romantic display headings and italic Latin species names, condensed Archivo Narrow for running body, and Azeret Mono for everything clinical — kickers, §-section markers, concentration tables, prices, nav and footer. Nothing is rounded — the geometry is uniformly sharp — and depth is built from flat color blocks, hairline rules and translucent green glass rather than shadows. The page reads as a sequence of full-viewport pinned scroll acts: a split-clip hero that pulls apart, a pinned formulary that swaps six formulas, a cursor-tracked ingredient dossier list, an SVG botanical that draws itself, and a sourcing cartogram that inverts from dark to light as you scroll.

Colors

Surface. bg-primary #1A4D2E (deep forest green) is the dominant dark — the fixed nav, the pinned formulary, the footer, the hero's left panel and the dark phase of the sourcing section. bg-secondary #F2EADA (parchment cream) is the page background and the light sections (ingredient library, supply ledger). bg-surface #EDE4CC, a marginally warmer cream, backs the formulation chapter and its oversized-numeral stats.

Text. text-primary #1C1612 is near-black ink used for body and headings on cream. text-cream #F2EADA reverses it onto green surfaces, and carries the hero's first title line.

Brand / Accent. accent-citron #C8D400 is the high-voltage chartreuse: the primary button fill, the giant formulary numerals, hover color on nav and ingredient names, the active-stat numeral, the cart label, and the citron map-pin pulse. accent-vermillion #B83A1A is the ink-stamp red: kickers, the formulation rule and pull-quote border, the drop-cap, map pins at rest, dossier table values and inline reference links. accent-amber #8B5E0A is the burnt secondary: hero/section eyebrows, mono labels, and the dotted/solid hairlines.

Hairlines. Dividers are alpha tints: rgba(139,94,10,0.35) dotted amber for ingredient and table rows, rgba(200,212,0,0.2) citron for the formulary column split, rgba(242,234,218,0.15) cream for the footer base rule.

Glass / overlay. The nav is translucent green glass rgba(26,77,46,0.85) with backdrop-filter: blur(6px), darkening to 0.97 on scroll. The hero info bar uses rgba(26,77,46,0.88) and rgba(242,234,218,0.92) blocks. The sourcing cartogram is drawn in a muted gold #C4A030 (SVG continents and grid only).

Typography

Three families, all loaded from Google Fonts in one request: Gilda Display (display serif), Archivo Narrow (400/500, condensed body), and Azeret Mono (400/500, the clinical mono). All are open-source Google faces, so no substitution is needed.

Token	Size	Weight	Line-height	Tracking	Usage
display	clamp(60px,7.5vw,110px)	400	1.0	0.02em	Hero title lines, section headings (formulary/library/sourcing scale down via own clamps)
display-italic	clamp(32px,4vw,48px)	400 italic	1.1	—	Species names, hero subhead, pull-quote, ledger names, formulation heading
body	15px	400	1.65	—	Archivo Narrow running copy, manifesto, dossier text
kicker	10px	400	1.4	0.25em	§-numbered section markers, eyebrows (vermillion/amber, uppercase)
mono-label	11px	400	1.4	0.2em	Nav, buttons, prices context, footer nav, stat labels (uppercase)
table-mono	13px	400	1.5	—	Concentration tables; dossier tables drop to 12px

Display numerals run very large: formulary form-num at clamp(120px,14vw,200px) citron, and the formulation "14" numeral-bleed at clamp(180px,20vw,320px) vermillion. Prices use Gilda at 36px; footer brand at clamp(42px,5.5vw,72px).

Layout

Base unit 4px; the macro grid leans on a generous 60px page gutter and 80–100px vertical section padding. The page is a vertical sequence of full-viewport acts, several of them position: sticky pinned over tall outer scroll tracks:

• Hero — 100vh two-panel 50/50 split (green/cream), title overlaid across the seam, a two-column info bar pinned to the bottom.
• Formulary — 600vh outer track, sticky 100vh two-column grid (number+name | spec table) swapping through 6 formulas by scroll index.
• Ingredient Library — cream section, 60px padding, a bordered list of rows; each row expands a three-column dossier grid and shows a cursor-tracked preview.
• Formulation — 300vh outer track, sticky 1fr/1.2fr grid (drawing-SVG | text with drop-cap + pull-quote), then a numeral-bleed stats block.
• Sourcing — 300vh outer track, sticky full-height flex column with an 800×400 SVG cartogram; theme inverts dark→light on scroll. Followed by the cream supply ledger.
• Footer — green, 2fr/1fr/1fr/1fr grid with newsletter form and nav columns.

Whitespace is editorial and confident; content is ruled off by hairlines and right-aligned numeric columns, evoking a lab spec sheet.

Elevation & Depth

Flat by design. There are no drop shadows on UI elements — depth comes from (1) flat full-bleed color blocks, (2) hairline rules (solid 1px and dotted amber), and (3) translucent green glass with backdrop-filter: blur(6px–8px) on the nav and hero bars. The only shadows are soft text-shadows on the hero title and nav links for legibility over imagery (e.g. 0 2px 12px rgba(26,77,46,0.7), 0 0 40px glows). The hover preview is a flat image card with a 1px amber border, not a shadowed pop-over.

Shapes

Uniformly sharp. Every surface, button, card, table, input and image is square (border-radius: 0) — there is not a single rounded corner or pill in the system. The only curves are organic: the SVG botanical leaves/stem and the hand-drawn cartogram continents. Rules are thin and exacting (1–3px), and the botanical SVG strokes are 2.5px round-capped.

Components

• Nav — fixed translucent-green glass bar, 18px 60px padding; mono-label cream links, citron hover; logo is a 24px inline botanical SVG + "Herbaria Officina · est. 2019"; cart label citron.
• Primary button — citron fill #C8D400, near-black text, mono-label uppercase, 10px 22px, sharp; hover #b0ba00; label "Browse Apothecary →".
• Secondary button — text-only with a 1px green bottom-border underline; hover flips to vermillion; label "Read Library".
• Formulary panel — left: giant citron number + mono type + Gilda name that slides up on activation; right: mono concentration table with dotted amber rows and citron right-aligned values, form-desc body, amber DOI link, price row.
• Ingredient row — italic Gilda species name, amber family tag + vermillion index, dotted amber divider; click expands a three-column dossier (mechanism / evidence table / reference); hover shows a fixed cursor-tracked 180×220 preview image with amber border on green.
• Pull-quote — Gilda italic 22px green with a 3px vermillion left border.
• Drop-cap — Gilda italic 72px vermillion first-letter, floated.
• Stat block — oversized Gilda numerals (green / citron) with mono labels.
• Ledger row — Gilda italic name + mono note, right-aligned vermillion origin code; dotted amber divider; "Download full ledger (PDF) ↓" link.
• Footer — green; large Gilda brand wordmark, amber tagline, underline-only email form with citron Subscribe, three mono nav columns; base rule + colophon.

Motion

Heavy scroll choreography, all hand-rolled (no libraries):

• Hero clips open with clip-path inset wipes (left panel top-down, right panel bottom-up), 1.2s cubic-bezier(.86,0,.07,1); the title "winds up" from letter-spacing: 0.35em to 0.02em while fading in (0.9s, staggered). On scroll the two panels pull apart horizontally (rAF, max 22vw).
• Formulary is pinned over 600vh; scroll position picks one of six panels; the active name slides up from translateY(100%), the right panel fade-slides up 0.5s.
• Formulation draws the botanical SVG via stroke-dashoffset across 300vh (stem → leaf1 → leaf2 → leaf3), and parallaxes the "14" numeral at -0.18×.
• Sourcing lerps background, text and map-stroke colors from green to cream across 300vh (theme inversion), pulsing the pins to citron at the midpoint.
• Library heading resolves word-by-word from blur(14px) to sharp.
• Ledger / footer items fade + translate in on IntersectionObserver with small staggers (0.08–0.12s). Most transitions use cubic-bezier(.2,.8,.2,1).

Iconography

Minimal; icons are inline SVG only — no icon font. The nav logo is a hand- drawn botanical mark (circle + leaf outline + midrib) stroked in citron at 0.7–1.2px. The largest "iconography" is illustrative: the drawn botanical plant in the formulation chapter (2.5px green strokes) and the world cartogram with gold continents and pulsing vermillion/citron supply pins. UI affordances (close, links, arrows) are typographic glyphs (×, →, ↓), not icons.

Do's and Don'ts

• Do keep everything sharp-cornered — zero border-radius is a defining trait.
• Do reserve citron for action/positive emphasis and vermillion for marks, rules and links; let amber carry labels and hairlines.
• Do set all clinical metadata (tables, prices, kickers, nav) in Azeret Mono, uppercase, wide-tracked, and number the sections with §.
• Do use Gilda italic for Latin species names and editorial pull-quotes.
• Do build depth from flat blocks, hairlines and green glass — not shadows.
• Don't introduce rounded corners, pills, or soft drop-shadows.
• Don't mix the two voltages into gradients or use citron and vermillion interchangeably — they have distinct jobs.
• Don't set body copy in the serif or run the mono at body length; keep the three voices in their lanes.
• Don't flatten the scroll choreography — the pinned acts are the experience.

Known Gaps

• The sourcing theme-inversion colors (#1A4D2E→#F2EADA, text and a #8B5E0A→#2A5A2A map-stroke) are interpolated at runtime in JS; intermediate values are computed, not authored. #2A5A2A appears only as a JS lerp target.
• map-gold #C4A030 is an SVG-only stroke default, not a page UI token.
• Section heading sizes (formulary/library/sourcing/footer) each carry their own clamp(); the display token records the hero's largest clamp as the canonical display size.
• Spacing scale is inferred from a 4px base; the recurring real gutters are 40px and 60px with 80–100px section padding rather than a strict ramp.