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).
Tailwind 4
WEFA uses Tailwind 4 with the Vite plugin. Design tokens are defined in src/index.css.
Radix UI
Accessible primitives for: dialogs, sheets, tabs, toggle groups. No custom accessibility reimplementation needed.