Rare Leaves

rare-leaves-design · alpha

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

Overview

Rare Leaves ("Verriére & Vine") is a botanical-editorial storefront for a rare-houseplant nursery, rendered as if everything were kept under glass. The surface is a warm museum paper (#F0EEE4) printed in deep forest-green ink (#2A3A2A), with three voltages: brass gold (#A88A48) for hairlines, rings and eyebrows; leaf green (#4A7A4A) for primary actions and active states; and terracotta (#B26A46) for folio markers and "Rare" badges. The signature moves are tactile and glasshouse-themed: a full-bleed video hero with an .etched embossed serif title, a slowly revolving brass SVG ring (.spin-ring, 28s), frosted .glass-pane cards with inset highlights and a .refract-edge gold diagonal sheen, and forged .iron-shelf rails — a 3px ink border plus a hard offset shadow — that visually support each row of specimen cards. Type is a two-face system: an optically-set Fraunces serif carries display headlines (clamp(56px,8vw,112px)), prices, drop caps, and every italic Latin binomial, while Inter handles body copy and the wide letter-spaced uppercase eyebrows. The whole page is organized like a folio — "FOLIO II–V", "PANE №01", plate numbers, latitude/longitude coordinates — for an archival, catalog character.

Colors

Brand / voltages. brass #A88A48 is the gold throughout — section rules, the revolving ring, eyebrow numerals, Tabler icon color, and the footer's italic "& Vine". leaf #4A7A4A is the primary green: the "Enter the Catalog" CTA, active filter chip, drop-cap initial, status dots, and the chat send button. terracotta #B26A46 is the secondary accent for folio labels ("— FOLIO II"), the "Rare" badge, the cart count bubble, and the warm base of the Shipping gradient.

Surface. paper #F0EEE4 is the page background and the light text used on dark sections and inside badges. ink #2A3A2A (deep forest green) is the body text on paper and the full background of the Care Library and footer, plus the iron-shelf rail. warm-tan #E8D5C4 is only the mid-stop of the Shipping section's vertical gradient (#F0EEE4 → #E8D5C4 → #B26A46).

Text. Body on paper is ink; secondary copy is text-muted rgba(42,58,42,0.70); captions and shelf labels drop to text-faint (/50). On the dark Care Library and footer, body is text-on-dark rgba(240,238,228,0.85).

Hairlines. Dividers and card top borders use hairline-brass rgba(168,138,72,0.40); on dark sections, divider lines are hairline-light rgba(255,255,255,0.10).

Glass & gradient. .glass-pane fills with glass-fill rgba(255,255,255,0.45) and a glass-border rgba(255,255,255,0.60). The .refract-edge overlays a white→transparent→brass diagonal in overlay blend mode. The Shipping section is the only large gradient (ship-gradient).

Typography

Two Google-Fonts families. Fraunces (serif, optical sizing on, SOFT 50 variation) is the display/editorial face — used italic for all Latin binomials (.italic-latin), accent words, prices, drop caps, and headlines. Inter is the body and UI face, used for paragraphs, captions, and the heavily letter-spaced uppercase eyebrows. Both are open-source, so no substitution is needed.

Drop cap (.drop-cap::first-letter): Fraunces 500, 4.6rem, floated, colored leaf #4A7A4A. Etched hero title (.etched): near-white with layered text-shadows for an embossed-on-glass effect.

Layout

Base unit is 4px; sections breathe with py-28 (112px) vertical padding and a max-w-[1320px] centered content column. The composition runs as a folio of full-width sections: a 96vh video hero with a centered glass panel and revolving ring; a Specimen Catalog of 3-up card grids (md:grid-cols-3 gap-7) sitting on iron-shelf rails with labeled shelf metadata; a dark Care Library on a 12-column grid (sticky left index lg:col-span-3 + 9-col editorial articles with alternating image/text order); a Plant Doctor double-framed glass panel split into an upload column and a chat column; a Shipping gradient section with an intentionally offset photo gallery (md:mt-24 / md:mt-16 staggering) and a 3-up guarantee strip joined by 1px gaps; and a dark footer. Whitespace is generous and editorial, with corner coordinates and pane numbers anchoring the frame.

Elevation & Depth

Depth is built from glass and forged metal rather than ordinary cards. .glass-pane combines backdrop-filter: blur(14px), an inset top highlight (inset 0 1px 0 rgba(255,255,255,0.9)), an inset bottom brass line (inset 0 -1px 0 rgba(168,138,72,0.25)), and a soft green drop shadow (0 10px 30px -12px rgba(42,58,42,0.25)). .iron-shelf reads as a forged rail: a 3px solid ink bottom border, a hard 0 4px 0 -1px #2A3A2A offset, and a soft green shadow underneath. The hero glass panel adds a stronger drop (0 30px 80px -20px rgba(0,0,0,0.4)). .refract-edge layers a diagonal white→brass sheen in overlay blend mode for a glass-refraction edge. Section backgrounds use subtle radial color washes and a hatch pattern (.hatch).

Shapes

The system is deliberately near-square. Cards, images, badges, and most panels use rounded-sm (4px) or sharper — the hero glass panel is rounded-[2px] and all badges/buttons are fully sharp (0px). Pills are reserved for filter chips, status dots, avatars, the chat input, and the send button (rounded-full). Chat bubbles are the one soft exception at rounded-[14px] with a single squared tail corner (rounded-tl-sm / rounded-tr-sm). The overall feel is archival and architectural: glass panes with crisp edges, not soft modern cards.

Components

• Primary button — leaf green fill #4A7A4A, paper text, sharp corners, px-7 py-3.5, 12px/0.25em uppercase; hover darkens to ink. Label: "Enter the Catalog".
• Outline button — transparent with 1px ink border, ink text, sharp, px-9 py-4; hover fills ink with paper text. Label: "Browse all 247 specimens →".
• Glass card (.glass-pane .refract-edge rounded-sm p-5) — frosted fill, brass inset, refracted edge; holds product image (aspect-[4/5]), italic Latin name, Fraunces price, and a brass-iconed care row over a brass hairline.
• Filter chip — pill (rounded-full), px-3.5 py-1.5; inactive = 1px ink/20 border with italic family name; active = leaf fill + paper text ("All").
• Badge — square corner, px-2 py-1, 10px/0.3em uppercase; "Rare" (terracotta), "New" (leaf), "Last One" (brass).
• Iron shelf — forged rail under each card row (see Elevation), with three shelf labels below (location · category · temperature range).
• Chat bubble — doctor: ink fill, paper text, rounded-[14px] with squared rounded-tl-sm corner, ink avatar circle + brass stethoscope; user image bubble: paper fill, brass/30 border.
• Chat input — pill on white/60, brass/30 border, paperclip lead icon, leaf-green circular send button.
• Upload dropzone — border-2 dashed brass/60, white/30 fill, centered leaf-tinted cloud-upload icon, "Drop a photograph here".
• Guarantee tile — bg-[#F0EEE4]/85 backdrop-blur p-8, brass 3xl icon, Fraunces 24px heading, muted body; three tiles joined by 1px gaps.
• Top bar — uppercase 13px/0.18em meta nav with leaf status dot, currency, Tabler search + shopping-bag with terracotta count bubble.

Motion

Hover-driven and ambient. .breeze sways each card image when its .group is hovered (@keyframes breeze, 1.6s ease-in-out infinite, small rotate/translate about a bottom origin). .spin-ring rotates the hero's brass SVG ring a full 360° over 28s linear infinite. The Dr. Vine "online" dot uses Tailwind animate-pulse. Buttons and links carry hover color/background transitions (no explicit duration utility, so they use the browser default). No scroll-triggered or JS animation libraries are present.

Iconography

Tabler icons (webfont, ti ti-*, outline style) handle all UI: search, shopping-bag, sun, droplet, ruler-2, arrow-up-right, arrow-right, stethoscope, cloud-upload, paperclip, send, clock, shield-check, temperature-snow, leaf, truck, and brand-instagram/pinterest/mail in the footer. Default icon color is brass #A88A48; arrows in cards use leaf #4A7A4A. Sizes follow Tailwind text-scale (base 16px, lg 18px, 3xl 30px). Separately, game-icons leaf SVGs (solid-leaf, vine-leaf, falling-leaf) are decorative only — placed in the Plant Doctor background at ~6% opacity and hue-shifted green via CSS filter.

Do's and Don'ts

• Do keep Fraunces italic for every Latin binomial and accent word; let Inter carry body and the wide uppercase eyebrows.
• Do preserve the glass-under-glass language: .glass-pane + .refract-edge on cards/panels, iron-shelf rails under card rows, and the brass ring/hairlines.
• Do keep corners near-square (4px or sharper), reserving pills for chips, dots, avatars, and chat input/send only.
• Do maintain the folio framing — folio numbers, plate captions, pane numbers, coordinates, and letter-spaced uppercase metadata.
• Don't introduce large rounded "modern card" radii or drop the iron-shelf / glass treatment in favor of flat cards.
• Don't add new accent hues; the palette is paper/ink plus brass, leaf, and terracotta only.
• Don't set Latin names upright or in Inter, and don't lose the optical/SOFT Fraunces character.

Known Gaps

• The hero uses a remote MP4 video (b-cdn.net) and remote Pexels/Unsplash images; these are external assets, not part of the token system.
• The .etched / .etched-dark titles rely on layered text-shadows over the video; their exact appearance depends on the video background behind them.
• Spacing scale (xs–2xl) is inferred from the Tailwind 4px utilities actually used; only section (py-28) and maxWidth (1320px) appear as explicit values.
• Tabler ti-* glyph sizes follow Tailwind text-size utilities rather than fixed px; sizes listed are the computed Tailwind values.