# obodo.io — Design System

## 1. Visual Theme & Atmosphere
Obodo is a design-forward product built with Webflow and GSAP animation. The aesthetic is quiet sophistication: a near-black base (`#191621`) with creamy off-whites and restrained pastel accents (pink, yellow, sage green, periwinkle blue). It feels like a thoughtfully curated design studio portfolio — structured but with personality. The dual-font system (Roboto for UI, Gelion for editorial body) separates functional and expressive roles. Obodo doesn't shout; it invites.

## 2. Color Palette & Roles
| Role | Value | Notes |
|------|-------|-------|
| Deep base | `#191621` | Primary dark background |
| Eggshell | `#f5f3ef` | Light sections, card backgrounds |
| Pink | `#f0dbdf` | Soft accent, feminine warmth |
| Yellow | `#f8e889` | Playful highlight |
| Blue | `#86a6d5` | Calm informational accent |
| Sage | `#626f5a` | Earthy tertiary |
| Card | `#f3f3f6` | Elevated card surface |
| Muted text | `#9b9b9b` → `#666` | Secondary and tertiary copy |

Color tells a nature-meets-craft story. Pastels never appear on the dark base together — they're used singly as section or card accents.

## 3. Typography Rules
- **Body/Headings**: Gelion — a contemporary geometric sans with editorial warmth (sits on Georgia as fallback). Used at 14px body.
- **UI/Functional**: Roboto — standard weight 500 for labels, navigation, metadata.
- Heading sizes modest (16–18px Roboto for labels) — Gelion carries the bigger text moments.
- Body line-height: generous, `1.5+` for Gelion.
- No display-scale giants; this system prefers restraint.

## 4. Component Stylings
- **Cards**: Rounded at 12–32px, very light shadow (`rgba(0,0,0,0.04) 0px 8px 60px`). Hover state likely via GSAP.
- **Buttons**: Mixed radius — 12–20px, aligning with card language.
- **Top-radius sections**: Some cards use `6px 6px 0px 0px` — partial radius for stacking panels.
- **Borders**: Hairline, near-invisible.
- **Animations**: GSAP-powered — expect smooth entrance and scroll-trigger transitions.

## 5. Layout Principles
- Webflow grid system. Clean column-based layouts.
- Dark-to-light section alternation (deep base → eggshell).
- Card grids for content inventory, generous gap.
- GSAP scroll triggers likely animate section entrances.

## 6. Depth & Elevation
Single shadow level: `rgba(0,0,0,0.04) 0px 8px 60px` — a wide, ultralight bloom. Cards lift almost imperceptibly. The dark base creates natural depth contrast with light content surfaces.

## 7. Do's and Don'ts
**Do:**
- Use Gelion for all editorial/content copy; Roboto for UI chrome
- Introduce pastel accents one at a time per section
- Animate with GSAP scroll triggers for entrance effects

**Don't:**
- Stack multiple pastels in the same view
- Use pure black (use `#191621` instead)
- Skip the GSAP animation layer — it's load-bearing for the experience

## 8. Responsive Behavior
Webflow's responsive system handles column reflow. GSAP animations should respect `prefers-reduced-motion`. Card stacks collapse to single column. Typography remains modest and readable at all breakpoints.

## 9. Agent Prompt Guide
> Reproduce obodo.io style: deep near-black `#191621` base, eggshell `#f5f3ef` light sections, Gelion serif for editorial body, Roboto for UI. Pastel accents (pink `#f0dbdf`, yellow `#f8e889`, blue `#86a6d5`). Cards at 12–32px radius, ultralight shadow. GSAP scroll-trigger animations on section entrances.

*Generated by Sparkbites — extracted from live CSS analysis*