🎨 Design Sandbox — Not Live
Blue & Green Palette Options — Pick Your Favourite
Three blue/green directions below. All components shown use Palette A (Ocean Teal). Scroll to Section 0 to compare all three side-by-side.
0. Palette Comparison — Three Options
Each shows nav, a card, and buttons in that palette
7 Days in Tokyo
Tokyo, Japan · 34 items
A — Ocean Teal
Deep teal primary with seafoam accents on warm sand. Calm, premium, travel-forward.
7 Days in Tokyo
Tokyo, Japan · 34 items
B — Slate & Mint
Cool slate blue with fresh mint green. Airy, modern, professional yet approachable.
7 Days in Tokyo
Tokyo, Japan · 34 items
C — Deep Sage
Earthy dark green primary with soft blue-gray accents on ivory. Grounded, sophisticated, timeless.
1. Color Palette
From soft pastels → structured navy/slate system
Primary Navy
#1F7A6E
Steel Blue
#5BA3A0
Forest Green
#E8A87C
Surface White
#FFFFFF
Alt Surface
#EBF4F2
Primary Light
#E4F3F1
Body Text
#1C2B2A
Muted Text
#8DADA9
Current theme: Uses pastel pinks (#F6E1DC), lavenders (#ECD9E9), mint (#CDEAC0) — very soft/lifestyle.
Proposed: Deep navy primary, steel blue secondary, forest green for confirmations/success. Much more structured and professional.
2. Typography
Tighter, more structured type hierarchy
H1 — Page Title
Discover New Destinations
H2 — Section Header
My Itineraries
H3 — Card Title
7 Days in Tokyo, Japan
Body
A curated itinerary covering the best of traditional temples, modern architecture, world-class dining, and hidden local neighborhoods.
Caption / Meta
Updated 3 days ago · 12 days · 47 items
3. Buttons
Sharper radius (rounded-md vs rounded-full), structured variants
Current: rounded-full pills. Proposed: rounded-md (8px) — feels more structured/professional.
4. Badges & Tags
Rectangular with subtle borders instead of pill-shaped pastels
5. Cards
Tighter shadows, sharper corners, more structured layout
7 Days in Tokyo
Paris Long Weekend
Southeast Asia Backpacker
Item Card (List View)
Tsukiji Outer Market
teamLab Borderless
Shinjuku Capsule Hotel
6. Form Elements
Clean, minimal inputs with structured borders
Search & Filters
7. Before vs After — Nav & Page Header
Key difference is tone and weight
← Current (Lifestyle / Pastel)
My Items
Your collection of activities, places, and experiences
→ Proposed (Corporate / Structured)
My Items
Your collection of activities, places, and experiences
8. Summary of Changes
Colors
Now: Pastel pinks, lavenders, mint greens
Proposed: Muted plum primary, dusty rose secondary, sage green accents on warm cream backgrounds
Shapes
Now: rounded-full pills, rounded-xl cards (16px)
Proposed: rounded-md buttons (8px), rounded-lg cards (12px)
Typography
Now: Light weight, moderate contrast
Proposed: Semibold labels, tighter letter-spacing, stronger hierarchy
Borders
Now: rgba shadows, minimal borders
Proposed: Explicit 1px borders (#DDE3EA) + subtle shadows
Icons
Now: Used alongside pastel backgrounds
Proposed: Monochromatic, use navy primary for active states
Overall Tone
Now: Lifestyle / Consumer app
Proposed: Productivity / Professional tool