Sun-kissed shores, swaying palms, and warm coral sunsets — a design language as vivid and joyful as a tropical island at its peak.
Components
Every component is infused with tropical warmth — round, inviting, and full of color.
Primary — Ocean Teal
Outline — Breeze Style
Gradient — Island Fusion
rounded-full on all buttons. shadow-[0_4px_16px_rgba(0,137,123,0.3)] lifts elements. hover:scale-105 adds tropical bounce.
Palette
Five tropical hues drawn from ocean depths, coral reefs, mango groves, and endless sunshine.
Ocean Teal
Sunshine
Coral Sunset
Mango
Palm Green
Ocean + Palm
From Reef to Forest
Coral + Mango
Sunset at Golden Hour
Teal on Cream
Primary Combination
Destinations
Cards built with rounded-2xl, colorful teal shadows, and group-hover scale effects that feel as alive as the tropics.
Step through ancient stone gates into a world of cascading waterfalls, incense-scented temples, and emerald rice terraces stretching to the horizon.
Sleep suspended above a turquoise lagoon. Stingrays drift beneath your glass floor at dawn. Coral gardens wait just steps from your deck.
Wake to howler monkeys and cloud-forest mist. Zip through jungle canopy by day. Soak in volcanic hot springs beneath stars by night.
Typography
Roomy, bold letterforms that radiate warmth and confidence — never condensed, never cold.
Tropical Paradise
clamp(3rem,7vw,5.5rem) / weight 800
Sunshine & Coral
clamp(2rem,4vw,3.5rem) / weight 700
Ocean Breeze
clamp(1.5rem,3vw,2.25rem) / weight 700
Every wave carries the warmth of endless summer days. Sand between your toes, salt on your lips.
1.125rem / weight 400
PALM SPRINGS / ISLAND GETAWAY
0.75rem / weight 600
Real-World Pairing
Bold teal headlines anchor the hierarchy. Coral accents spark desire. Body copy breathes in open leading, never rushed.
Principles
Rules for keeping the tropical spirit alive — what to embrace and what to leave on the mainland.
Splash with Teal Shadows
Apply colorful shadows like shadow-[0_4px_20px_rgba(0,137,123,0.25)] to lift cards off the warm cream background like a surf board on a wave.
Embrace Rounded Shapes
Use rounded-2xl on cards and rounded-full on buttons and badges. Organic curves mirror the softness of palm leaves and ocean waves.
Let Colors Sing Together
Pair ocean teal #00897b with coral #ff6f61 as complementary accents. Mango #ffc107 and palm green #4caf50 add tropical depth.
Animate with Life
hover:scale-105 transition-transform on cards and hover:-translate-y-1 on buttons give the interface a lively, breathing quality.
Use Gradient Backgrounds
Gradient from-[#00897b] to-[#4caf50] captures the lush transition from deep ocean to tropical foliage.
No Dark Moody Tones
Avoid charcoal, near-black, or desaturated color palettes. Tropical paradise thrives on warmth and daylight — not midnight vibes.
No Sharp Angular Corners
Remove rounded-none and sharp rectangles. Hard angles contradict the organic, island-shaped softness this style celebrates.
No Monochrome Palettes
Gray-on-gray or single-hue designs strip all the tropical energy. The palette needs at least three saturated colors working in harmony.
No Heavy Condensed Fonts
Avoid ultra-compressed typefaces. Bold, roomy letterforms feel warm and inviting. Condensed fonts read as corporate and cold.
No Flat Static Interactions
Elements must respond to touch and hover with warmth. Static, non-animated components feel like a resort with no ocean view.
"Every interaction should feel like stepping off a plane in paradise — warm, vibrant, and full of the promise of adventure."
Tropical Paradise Design PrincipleReserve
A form built with rounded-full inputs, teal focus rings, and a mango submit button.