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

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