CURATED · OPEN · FREE

Sandlandsleep

A minimalist wellness interface using a soft gradient background and bold yellow accents to guide users through a sleep struggle survey.

ConsumerPremiumCleanPlayfulProduct

↓ Download design system (8 MB)Open in OpenDesign

Visit: https://sandlandsleep.com

📦 Browse pack contents →

Identity DNA

sleepwellnessdiscountcomfort

a calm, premium invitation to better sleep

Color

#fae467Accent

#000000Ink

#9c9c9cInk soft

#dce4efBG

#f2ede8Muted

rgba(0,0,0,1)Line

High contrast between the vibrant yellow accent and the soft, cool gradient background.

Typography

humanist-sans · sans-serif

display48px · 600
subtitle20px · 400
body14px · 400

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

standard base-4 vertical rhythm with generous spacing for a relaxed feel

Surfaces

sm · 4px

md · 10px

lg · 20px

pill · 999px

solid 1px black borders used for the primary icon container and some UI elements

0 4px 12px rgba(0,0,0,0.1) · 0 4px 20px rgba(0,0,0,0.1)

Layout

400container

1columns

16pxgutter

768breakpoints

centered single-column stack for mobile and focused desktop overlays

Motion & Interaction

125msmicro

200mssmall

300msmedium

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

smooth color and box-shadow transitions on interactive elements

subtle change in background-color or box-shadow for buttons · immediate visual feedback via background-color change

Components

button Full-width pill-shaped buttons with high-contrast yellow backgrounds and dark text.
card N/A
chip N/A
input N/A
hero Centered promotional overlay with large typography and a simple illustration.

Voice & Don'ts

Tone playful, direct, and inviting
Headlines Conversational, second-person questions and statements
CTAs Clear, action-oriented statements for user selection

Don't use a dark, moody background — screenshot shows a light, soft blue gradient.
Don't use sharp, rectangular buttons — screenshot shows fully rounded pill-shaped buttons.
Don't use a small, cramped layout — screenshot shows a vertically stacked, well-spaced layout.
Don't use a complex, multi-column grid — screenshot shows a single centered column.
Don't use low-contrast button text — screenshot shows dark text on a bright yellow background.
Don't use subtle, pastel yellow accents — screenshot shows a vibrant, high-chroma yellow.
Avoid: clinical terminology
Avoid: aggressive sales language
Avoid: complex medical jargon

Inside the pack — real screenshots

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

Captured from the live site · real computed styles

System prompt

This is a minimalist, consumer-focused wellness interface centered around a sleep struggle survey. The design uses a soft, cool gradient background and vibrant yellow pill-shaped buttons to create a friendly, premium feel. Typography is a humanist-sans-serif with high contrast. Key hex colors include a dark ink (#000000) and a vibrant accent yellow (#fae467). The layout is a single centered column with generous spacing. Critical donts: do not use sharp button corners, do not use a dark background, and do not use low-contrast text on the yellow buttons. The tone is playful and direct, focusing on user needs.

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