CURATED · OPEN · FREE

Vibrants

A playful, wellness-focused landing page with a soft gradient background and colorful, inviting buttons.

PlayfulConsumerCalmWarmCuration

↓ Download design system (18 MB)Open in OpenDesign

Visit: https://vibrants.com

📦 Browse pack contents →

Identity DNA

vibrantwellnessplayfulinvitingfriendly

A friendly wellness brand greeting you with a colorful, energetic, yet calm vibe.

Color

#021422Ink

#67727AInk soft

#FDFFFEBG

#F3FAFFBG soft

rgba(0,0,0,0.1)Line

Soft, light backgrounds with high-contrast text and colorful accents.

Typography

humanist-sans

display48px · 700
body16px · 400

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

Vertical spacing is consistent and uses multiples of 4px.

Surfaces

sm · 4px

md · 8px

lg · 12px

pill · 999px

1px solid

rgba(0, 0, 0, 0.1) 0px 2px 4px 0px

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Centered column layout with generous vertical spacing.

Motion & Interaction

220msmicro

400mssmall

800msmedium

cubic-bezier(0.4, 0.0, 0.2, 1)easing

Subtle opacity change on buttons. · Button press effect.

Components

button Large, outlined buttons with rounded corners and distinct colors for each action.
hero Centered layout with a logo, headline, subtext, and a vertical stack of action buttons.

Voice & Don'ts

Tone friendly
Headlines Playful and encouraging.
CTAs Direct and action-oriented.

Don't use a stark white background — screenshot shows a soft, pastel gradient.
Don't use a single accent color — screenshot shows multicolored buttons.
Don't use sharp corners on buttons — screenshot shows rounded rectangles.
Don't use small, dense text — screenshot shows generous spacing and large touch targets.
Don't use a dark theme — screenshot shows a light, airy design.
Don't use a strict grid layout — screenshot shows a centered, vertical stack.
Avoid: formal
Avoid: technical
Avoid: aggressive

Inside the pack — real screenshots

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

Captured from the live site · real computed styles

System prompt

This design is a playful, wellness-focused landing page. Key colors include a soft white/light blue gradient background (#FDFFFE, #F3FAFF) with a dark navy ink (#021422). Typography uses humanist-sans fonts (Montserrat, Inter). Layout is centered with generous vertical spacing. Critical donts: Don't use a stark white background, don't use a single accent color, don't use sharp corners on buttons. The overall feel is friendly, inviting, and calm.

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