Tropical

Lush, vibrant design for island paradise experiences.

A bold, warm design system drenched in coral sunsets, jungle greens, and lagoon blues. Built for interfaces that radiate energy and warmth.

Bold gradients Vivid palette Warm energy Organic shapes
System Tokens
Spacing 4 / 8 / 16 / 32 / 64 / 128
Radius 8 / 14 / 22 / 36
Motion Bounce ease - 350ms
Fonts Poppins + Quicksand

Color Palette

Saturated tropical hues drawn from island landscapes: lush jungle greens, coral reefs, lagoon waters, hibiscus blooms, and golden-hour sunsets.

Jungle Coral Lagoon
Palm #1a6b3c
Jungle #2d8a4e
Canopy #3ba55d
Fern Light #8fd4a4
Coral #ff6b6b
Hibiscus #ff3e9d
Sunset #ff8c42
Golden Sand #ffe4a0
Lagoon #00b4d8
Ocean #0077b6
Seafoam #90e0ef
Sand Light #fff5dc
Sunset Gradient Coral to Gold
Ocean Gradient Deep Blue to Foam
Paradise Gradient Hibiscus to Sunset

Typography

Poppins brings bold, friendly headlines. Quicksand keeps body text warm and approachable with its rounded letterforms.

H1 - Display

Island Mornings

Poppins 800 / clamp(2.8rem, 6.5vw, 4.5rem)
H2 - Section

Lagoon Depth

Poppins 700 / clamp(1.8rem, 4vw, 2.8rem)
H3 - Subsection

Coral Gardens

Poppins 600 / 1.4rem
H4 - Card Title

Palm Canopy

Poppins 600 / 1.15rem
H5 - Label
Tide Schedule
Poppins 600 / 1rem
H6 - Overline
Wind Direction
Poppins 600 / 0.875rem / Uppercase
Body Text

The warm breeze carried the scent of plumeria across the lagoon as sunlight danced across turquoise shallows. Every element in this system is designed to evoke that feeling of warmth, energy, and lush natural beauty that defines the tropics.

Quicksand 500 / 1rem / Line height 1.65

Spacing System

A 4px base scale that grows generously, giving elements room to breathe like an open-air pavilion.

--space-1 (4px)
--space-2 (8px)
--space-3 (12px)
--space-4 (16px)
--space-5 (24px)
--space-6 (32px)
--space-7 (48px)
--space-8 (64px)
--space-9 (96px)
--space-10 (128px)

Buttons

Bold, rounded buttons with vivid colors and satisfying hover effects. The primary coral grabs attention; the accent sunset gradient adds flair.

Standard Size
Small Size
Large Size
Full Width

Forms

Clean, rounded inputs with lagoon-blue focus states. Warm placeholder text and generous padding keep forms inviting.

Cards

Four card variants ranging from clean and airy to bold and immersive, each capturing a different tropical mood.

4 Variants

Beach Pavilion

A clean, elevated surface for content. Rounded corners and subtle lift on hover keep things breezy.

Standard Card

Golden Hour

Gradient header for featured or highlighted content.

The warm gradient header immediately draws the eye, making this variant ideal for promotions and callouts.

Sunset Card

Reef Explorer

A left accent border in lagoon blue gives this card a focused, informational feel. Great for lists and details.

Lagoon Card

Canopy Lodge

A dark jungle-green card for bold contrast. White text on rich green feels immersive and premium.

Jungle Card

Data Table

Clean tabular data with warm hover states, jungle-green headers, and status indicators in tropical hues.

Destination Status Region Rating Season
Coral Bay Resort Open South Pacific 4.9 Year-round
Jungle Canopy Lodge Open Southeast Asia 4.7 Nov - Apr
Sunset Cove Villa Renovating Caribbean 4.8 Dec - May
Hibiscus Garden Inn Fully Booked Hawaii 4.9 Year-round
Lagoon Drift Camp Open Maldives 4.6 Jan - Apr

Badges & Tags

Color-coded labels for categorization, status, and emphasis. Each badge maps to a core palette color.

Semantic Badges
Active Urgent Info Warning New Neutral Archived
Content Tags
Beachfront Snorkeling Sunset Tour Spa Adventure Family
Size Variants
Small Default Large

Alerts

Notification panels with left-border accents. Each severity level uses a distinct tropical color.

Lagoon Update

Water conditions are perfect for snorkeling today. Visibility is excellent across the reef.

Booking Confirmed

Your beachfront bungalow is reserved for 7 nights. Welcome kit and island map included.

Tropical Advisory

Light rain expected this afternoon. Outdoor excursions may be rescheduled to morning hours.

High Tide Warning

Beach access restricted until 4 PM. Please use the elevated walkway to reach the lagoon deck.

Design Principles

Four guiding ideas that keep every Tropical interface feeling warm, bold, and authentically paradise-inspired.

Guidelines
01

Vibrant, Not Garish

Use saturated color with intention. Bold coral for primary actions, vivid lagoon for accents, but always balanced with warm neutrals and generous whitespace.

02

Warm Energy

Every interaction should feel inviting. Sunset gradients, bouncy hover effects, and rounded shapes create an atmosphere of relaxed enthusiasm.

03

Natural Depth

Layer surfaces like a tropical landscape: sand in the back, palms in the middle, vivid flowers up front. Use shadows and elevation to create rich spatial hierarchy.

04

Lush Detail

Small touches make the experience memorable. Gradient accents on headers, colored status dots, leaf patterns in backgrounds -- the paradise is in the details.