Skip to main content

​
Design philosophy

Stripe-inspired sophistication meets tropical warmth. Every visual element serves the brand’s core tension: premium and authoritative, yet warm and approachable. Green-tinted shadows ground the interface in the brand palette. Cream backgrounds create breathing room. Glass effects add depth without weight.

​
Shadow system

All shadows use a green undertone — rgba(24, 99, 77, X) — instead of neutral black. This subtly reinforces the Pine Green brand color throughout the interface, creating a cohesive visual layer that feels intentional rather than generic.

​
Strain-typed shadows

Strain type shadows add a colored glow that reinforces the sativa/indica/hybrid identity on hover or feature states.

​
Gradient system

The primary page background gradient. A radial ellipse of Pine Green overlays a cream-to-white linear gradient, creating a subtle green glow at the top of pages.
Subtle cream-to-transparent for section backgrounds. Creates visual separation between content blocks without hard borders.
An inset highlight effect with a white highlight at the top darkening to the bottom. Adds subtle dimension to filled buttons.
A 135-degree white sweep used as a pseudo-element for premium hover effects on cards. The transparent-white-transparent pattern creates a polished surface reflection.
Low-opacity colored overlays that tint card backgrounds to match strain types. Applied as background gradients on strain cards, detail pages, and collection views.

​
Glassmorphism

Glass effects create depth through translucent, blurred backgrounds. The system defines multiple glass tiers for different elevation contexts.
Cream at 75% opacity with a 16px blur radius. Used for content cards that float over page backgrounds.
A glassmorphism badge system with pill and square variants. Badges accept a configurable accent color and render a multi-stop gradient background with backdrop blur, colored borders, and inner glow shadows. Used for tags, status indicators, strain type labels, and category markers.

​
Animation system

Animations use a constrained duration scale and premium easing curves. Every motion should feel purposeful — fast enough to not block the user, smooth enough to feel refined.

​
Easing curves

Keep animations under 400ms for perceived speed. Use easeOutExpo for premium-feeling transitions — it decelerates dramatically, making elements feel like they glide into place. Stagger sequential animations by 50-100ms for visual flow.

​
Interaction patterns

​
Touch target minimums

All interactive elements must meet minimum sizing for comfortable touch interaction, following WCAG 2.2 Target Size guidelines.

​
Pre-built transitions

These shorthand transition values are available as design tokens for the most common interaction patterns:

​
For developers

Source of truth files:
  • apps/website/src/config/design-system/effects.ts — shadows, animation durations, easing curves, pre-built transitions
  • apps/website/src/config/design-system/interactive-tokens.ts — card tokens, button tokens, glass effects, gradients, focus states, touch targets
  • apps/website/src/config/design-system/glassmorphism.ts — badge system with pill/square variants, inline style generators, CSS string generators, Tailwind class utilities
  • apps/mobile/src/_config/design-system/effects.ts — mobile animation and shadow tokens