Design System
WEFA's visual language is warm, friendly, and nature-inspired. The design targets youth audiences with clean layouts, generous whitespace, and soft rounded shapes.
Element Colors
| Element | Primary | Badge Color | Use |
|---|---|---|---|
| Water | Blue | #3B82F6 | Creature badges, gradients |
| Earth | Green | #22C55E | Creature badges, gradients |
| Fire | Red | #EF4444 | Creature badges, gradients |
| Air | Purple | #A855F7 | Creature badges, gradients |
Plant Type Colors
| Type | Badge Color |
|---|---|
| Fruit | Yellow |
| Vegetable | Green |
| Herb | Teal |
| Flower | Pink |
Key UI Patterns
Energy Header
Teal rounded pill with sun icon, "ENERGY" label, and count. Appears at the top of the Deck view.
Bottom Navigation
Three tabs: Deck / Garden / Profile. Active tab is teal (filled), inactive is gray (outline). 44px minimum touch targets, 56px height on phone / 64px on tablet.
Cards
Full-width rounded cards with:
- Name (left-aligned, bold)
- Type/element badge chip (colored)
- Thumbnail image (right side, square, rounded corners)
- Optional CTA ("Nurture now!")
Detail Sheets
Bottom sheets with drag handle, hero image on gradient background, tabbed content (Info/Care for plants, Nurture/Evolution for creatures).
Filter Sheets
Bottom sheets with:
- Element chip row (Fire, Water, Earth, Air)
- Health status icons
- Level/growth stage chips
Celebration Modals
Centered cards with hero image, bold heading, subtitle, and dual CTAs (Share outlined, View teal filled).
Layered CSS Tokens
WEFA uses plain CSS cascade layers, semantic custom properties, and reusable .wefa-* primitives. Design tokens live under packages/app/src/styles/tokens.css; component and view CSS should reuse tokens before introducing local values.
Radix UI
Accessible primitives for: dialogs, sheets, tabs, toggle groups. No custom accessibility reimplementation needed.