Visual elements

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.

Level	CSS value	Usage
xs	`0 1px 2px rgba(24, 99, 77, 0.04)`	Subtle depth for flat elements
sm	`0 2px 4px rgba(24, 99, 77, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04)`	Cards at rest, input fields
md	`0 4px 12px rgba(24, 99, 77, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04)`	Elevated cards, dropdowns
lg	`0 8px 24px rgba(24, 99, 77, 0.10), 0 4px 8px rgba(0, 0, 0, 0.06)`	Modals, floating panels
xl	`0 16px 48px rgba(24, 99, 77, 0.12), 0 8px 16px rgba(0, 0, 0, 0.08)`	Major floating elements
2xl	`0 24px 64px rgba(24, 99, 77, 0.16), 0 12px 24px rgba(0, 0, 0, 0.10)`	Maximum elevation

Special shadow	CSS value	Usage
hover	`0 20px 40px rgba(24, 99, 77, 0.15), 0 8px 16px rgba(0, 0, 0, 0.08)`	Card hover states
focus	`0 0 0 3px rgba(24, 99, 77, 0.15)`	Focus rings
glow	`0 0 24px rgba(24, 99, 77, 0.25)`	Highlighted/featured elements

Strain-typed shadows

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

Type	CSS value
Sativa	`0 8px 24px rgba(249, 115, 22, 0.20)`
Indica	`0 8px 24px rgba(147, 51, 234, 0.20)`
Hybrid	`0 8px 24px rgba(16, 185, 129, 0.20)`

Gradient system

Hero gradient

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.

radial-gradient(ellipse 80% 50% at 50% -20%, rgba(24, 99, 77, 0.15), transparent),
linear-gradient(180deg, #F7F4ED 0%, white 100%)

Section gradient

Subtle cream-to-transparent for section backgrounds. Creates visual separation between content blocks without hard borders.

linear-gradient(180deg, #F7F4ED 0%, rgba(247, 244, 237, 0.5) 100%)

Button gradient

An inset highlight effect with a white highlight at the top darkening to the bottom. Adds subtle dimension to filled buttons.

linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%, rgba(0, 0, 0, 0.05) 100%)

Shine effect

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.

linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%)

Strain type gradients

Low-opacity colored overlays that tint card backgrounds to match strain types. Applied as background gradients on strain cards, detail pages, and collection views.

Type	Gradient
Sativa	`linear-gradient(135deg, rgba(249, 115, 22, 0.1) 0%, rgba(249, 115, 22, 0.05) 100%)`
Indica	`linear-gradient(135deg, rgba(147, 51, 234, 0.1) 0%, rgba(147, 51, 234, 0.05) 100%)`
Hybrid	`linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%)`

Glassmorphism

Glass effects create depth through translucent, blurred backgrounds. The system defines multiple glass tiers for different elevation contexts.

Card glass

Cream at 75% opacity with a 16px blur radius. Used for content cards that float over page backgrounds.

Property	Value
Background	`rgba(247, 244, 237, 0.75)`
Backdrop blur	16px
Border	`rgba(255, 255, 255, 0.4)`
Shadow	`0 8px 32px rgba(24, 99, 77, 0.08), 0 0 1px rgba(24, 99, 77, 0.12)`

Navigation glass

Cream at 85% opacity with enhanced saturation. Used for sticky headers, navigation bars, and toolbars that need to remain readable over scrolling content.

Property	Value
Background	`rgba(247, 244, 237, 0.85)`
Backdrop blur	12px
Saturate	180%
Border	`rgba(24, 99, 77, 0.08)`

Modal glass

Cream at 90% opacity with maximum blur. Used for overlays, modals, and dialogs that demand focus while maintaining a connection to the content beneath.

Property	Value
Background	`rgba(247, 244, 237, 0.90)`
Backdrop blur	20px
Shadow	2xl elevation shadow

Badge system

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.

Property	Value
Backdrop blur	12px
Backdrop saturate	150%
Border radius	Full (pill) or xl (square)
Background opacity	20% (light stop), 18% (mid stop), 12% (dark stop)
Gradient angle	135deg

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.

Token	Duration	Usage
instant	100ms	Toggles, state changes
fast	150ms	Hovers, small reveals
normal	250ms	Standard transitions
slow	400ms	Panel slides, complex reveals
slower	600ms	Full-page transitions

Easing curves

Curve	CSS	Usage
easeOut	`cubic-bezier(0, 0, 0.2, 1)`	General transitions
easeInOut	`cubic-bezier(0.4, 0, 0.2, 1)`	Symmetrical animations
easeOutExpo	`cubic-bezier(0.16, 1, 0.3, 1)`	Premium reveals (preferred)
spring	`cubic-bezier(0.175, 0.885, 0.32, 1.275)`	Bouncy, playful effects
easeOutBack	`cubic-bezier(0.34, 1.56, 0.64, 1)`	Overshoot for emphasis

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

Pattern	Effect	Timing
Card hover	translateY(-6px) + enhanced shadow	normal (250ms), easeOutExpo
Button hover	translateY(-1px) + slight lift	fast (150ms), easeOutExpo
Button press	translateY(0) on active	instant (100ms), easeOut
Image hover	scale(1.08)	slow (400ms), easeOut

Touch target minimums

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

Element	Minimum size
Button	48px
Icon button	44px
List item	56px
Input field	52px
Spacing between targets	8px

Pre-built transitions

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

Token	Value
cardHover	`transform 250ms easeOutExpo, box-shadow 250ms easeOutExpo`
button	`all 150ms easeOutExpo`
fade	`opacity 200ms ease-out`
transform	`transform 250ms easeOutExpo`
color	`color 150ms ease-out, background-color 150ms ease-out, border-color 150ms ease-out`

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

Foundation

Identity

Design System

Content & application

Design philosophy

Shadow system

Strain-typed shadows

Gradient system

Glassmorphism

Animation system

Easing curves

Interaction patterns

Touch target minimums

Pre-built transitions

For developers

Foundation

Identity

Design System

Content & application

​Design philosophy

​Shadow system

​Strain-typed shadows

​Gradient system

​Glassmorphism

​Animation system

​Easing curves

​Interaction patterns

​Touch target minimums

​Pre-built transitions

​For developers

Design philosophy

Shadow system

Strain-typed shadows

Gradient system

Glassmorphism

Animation system

Easing curves

Interaction patterns

Touch target minimums

Pre-built transitions

For developers