Advisor OS showcase · V7 · Design guide

Botanica

A herbarium folio for an operating system.

1 · Concept

The folio in two sentences

Botanica treats the Advisor OS product line as a herbarium folio: four tools pressed, mounted and labelled as specimens, with a career told as cultivation — get licensed, fill the calendar, do the work, read the room. Victorian botanical-atlas discipline (cream paper, engraved plates, museum labels, mounting tape) carries one living gesture: a vine that grows up the page's spine only as far as the reader has read.

2 · Palette

Pressed, not printed

One bloom accent, spent in exactly two places: the closing seal and the fourth specimen's flower. Product colours appear only as wax-seal dots on labels.

Herbarium cream

#f6f1e3

page ground

Plate paper

#fbf7ee

mounted cards

Ink umber

#2f2a1d

text, engraving line

Leaf green

#3f6b42

vine, stems, actions

Light leaf

#7ca457

young growth, accents

Bloom

#c25b4e

flowering moments only

CMFAS Prep seal

#2dd4bf

wax dot, Plate I

Pick a Time seal

#7aa2ff

wax dot, Plate II

ActivityTracker seal

#ff6b3d

wax dot, Plate III

FourLens seal

#b79bff

wax dot, Plate IV

3 · Type system

Atlas display, field-note labels

A Working Flora

Cormorant Garamond 600–700Headings, specimen names, folio display. Balanced wrapping, tight leading.

Examina praeparata

Cormorant Garamond italic 400–600Latin-style binomials, figure captions, marginal whimsy, the title page itself.

Collected · Habitat · Price

Work Sans 600, letter-spaced capsLabel furniture: plate numbers, dt terms, buttons, the fixed folio links.

Mock exams and chapter practice, scored the way the real papers are.

Work Sans 400–500Body copy, answers, notes — quiet against the serif display.

4 · Signature element

The climbing vine

A single hand-drawn SVG stem grows up the folio's left spine, its stroke revealed in step with scroll position — the vine is the page's progress bar, and the page's thesis. It buds a hatched leaf beside each of the four specimen plates as the reader reaches them, and it flowers exactly once: a bloom-red blossom at the closing call to action.

Why: a herbarium shows finished, pressed things — the vine is the one living element, and it lives only where the reader has been. Growth as navigation; flowering as the ask. Under reduced motion the vine stands fully grown, leaves open, flower out.

5 · Techniques

What is actually doing the work

Organic SVG path animation.The vine is generated at runtime — sampled sine meander fitted with Catmull-Rom-to-Bézier smoothing — then drawn by scroll-linked stroke-dashoffset over getTotalLength().
Geometry-anchored budding.Leaf nodes are placed by binary-searching getPointAtLength() against each plate's document position, rotated to the local tangent; unfurl is a CSS transform from the stem node (transform-box: fill-box).
Engraving in pure SVG.All four botanical plates are hand-authored vectors; shading is patterned hatch strokes (<pattern> at four angles) plus stipple — no bitmaps anywhere on the site.
CSS paper physics.Plates rest 3px proud and settle on entry (IntersectionObserver) with a deepening two-layer shadow; mounting tape is clipped translucent gradient; stains are radial gradients.
Typographic specimen labels.Museum-label grids (dl/dt/dd) carrying only the honest numbers; whimsical binomials are footnoted as whimsy.
Scroll-linked progress with dignity off.prefers-reduced-motion renders the vine fully grown and every transition inert; overflow-x: clip on both html and body guards against transform overflow.

6 · Scorecard

Rubric score — pending final pass

This plate awaits the examiner's hand.