> ## Documentation Index
> Fetch the complete documentation index at: https://docs.highailabs.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Visual elements

> Shadows, gradients, glassmorphism, animations, patterns, and the visual language that makes the brand distinctive.

## 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

<AccordionGroup>
  <Accordion title="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.

    ```css theme={null}
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(24, 99, 77, 0.15), transparent),
    linear-gradient(180deg, #F7F4ED 0%, white 100%)
    ```
  </Accordion>

  <Accordion title="Section gradient">
    Subtle cream-to-transparent for section backgrounds. Creates visual separation between content blocks without hard borders.

    ```css theme={null}
    linear-gradient(180deg, #F7F4ED 0%, rgba(247, 244, 237, 0.5) 100%)
    ```
  </Accordion>

  <Accordion title="Button gradient">
    An inset highlight effect with a white highlight at the top darkening to the bottom. Adds subtle dimension to filled buttons.

    ```css theme={null}
    linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%, rgba(0, 0, 0, 0.05) 100%)
    ```
  </Accordion>

  <Accordion title="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.

    ```css theme={null}
    linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%)
    ```
  </Accordion>

  <Accordion title="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%)` |
  </Accordion>
</AccordionGroup>

## Glassmorphism

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

<AccordionGroup>
  <Accordion title="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)` |
  </Accordion>

  <Accordion title="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)`    |
  </Accordion>

  <Accordion title="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        |
  </Accordion>

  <Accordion title="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                                            |
  </Accordion>
</AccordionGroup>

## 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      |

<Tip>
  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.
</Tip>

## 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

<Note>
  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
</Note>