CURATED · OPEN · FREE

Vacation Inc

Retro-inspired sunscreen brand with a playful 1980s poolside aesthetic.

ProductConsumerPhotographicPlayfulWarm

↓ Download design system (24 MB)Open in OpenDesign

Visit: https://www.vacation.inc

📦 Browse pack contents →

Identity DNA

retroplayfulsunscreenpoolsidenostalgia

A vintage vacation brochure brought to life on the web.

Color

#333333Ink

#ebe6dcBG

#d8d4cbMuted

rgba(51,51,51,1.0)Line

Warm, off-white backgrounds with dark grey text for high readability.

Typography

transitional-serif · humanist-sans

display48px · 400
heading30px · 400
body16px · 400
small18px · 400

Use transitional-serif for large promotional and display text. · Use humanist-sans for body copy and navigation. · Maintain negative letter spacing for display typography.

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

Consistent spacing based on a 4px grid, with larger gaps for major sections.

Surfaces

sm · 4px

md · 8px

lg · 12px

pill · 999px

4px solid #333333

rgba(0, 0, 0, 0.1) 1px 1px 5px 0px · rgba(0, 0, 0, 0.75) 2px 2px 2px 0px

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Asymmetric grid with overlapping images and generous whitespace.

Motion & Interaction

220msmicro

400mssmall

800msmedium

cubic-bezier(0.25, 0, 0.75, 1)easing

Smooth color and transform transitions on interactive elements.

Subtle color shifts or image scaling. · Standard pointer cursor.

Components

button Full-width button with a rounded pill shape and warm yellow background.
card Image-heavy cards with thin borders and retro labels like 'FIG. 1'.
input Simple input with a bottom border and no background fill.
hero Full-width background image with a thin 4px border frame and overlaid text.

Voice & Don'ts

Tone Witty, nostalgic, and playfully authoritative.
Headlines Large, elegant serif typography.
CTAs Pill-shaped buttons with bold sans-serif text.

Don't use a stark white background — screenshot shows a warm off-white (#ebe6dc) instead.
Don't use a bright, high-chroma accent color for primary buttons — screenshot shows a warm muted yellow (#f1d27a) instead.
Don't use a heavy sans-serif for display text — screenshot shows a thin transitional-serif instead.
Don't use a 12-column symmetric layout with tight gutters — screenshot shows generous spacing and asymmetrical alignment.
Don't use sharp, rectangular corners for primary buttons — screenshot shows fully rounded pill shapes instead.
Don't use dark mode or black backgrounds — screenshot shows a light, paper-like background instead.
Avoid: Modern minimalism
Avoid: Cool or clinical color palettes
Avoid: Overly complex layouts

Inside the pack — real screenshots

Vacation Inc — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

Design a playful, retro-inspired consumer website for a sunscreen brand. The aesthetic is nostalgic 1980s poolside luxury, using warm off-white backgrounds (#ebe6dc) and dark grey text (#333333). Typography combines thin transitional-serif for display text and humanist-sans for body copy. Primary action buttons are full-width, pill-shaped, and filled with a warm muted yellow. Layout is spacious and asymmetrical, often featuring vintage photography and retro graphic elements like barcodes or dashed borders. Avoid modern minimalism, stark white backgrounds, or high-contrast neon accents. The overall feel is sophisticated yet whimsical.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko