# Sandlandsleep · Design system migration spec

> Source: https://sandlandsleep.com  ·  Curated by OpenDesign  ·  en

> A great example of a focused, minimalist consumer interface that uses a single high-contrast accent to guide user attention.

## 1. Identity DNA

Sandlandsleep functions as a calm, premium invitation to better sleep, its identity built on the interplay between soft comfort and clear direction. The system’s one-liner defines it as a minimalist wellness interface, using a soft gradient background and bold yellow accents to guide users through a sleep struggle survey.

**One-liner:** A minimalist wellness interface using a soft gradient background and bold yellow accents to guide users through a sleep struggle survey.
**Keywords:** sleep · wellness · discount · comfort
**Analogy:** a calm, premium invitation to better sleep

## 2. Color

The palette establishes a dialogue between a cool, soft gradient background and a single, high-chroma yellow accent. This contrast is the system’s primary visual anchor, directing attention with deliberate warmth against a calm field.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#dce4ef` | main background |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#9c9c9c` | secondary text |
| `--muted` | `#f2ede8` | placeholder |
| `--accent` | `#fae467` | single accent |
| `--line` | `rgba(0,0,0,1)` | divider |

**Color principle:** High contrast between the vibrant yellow accent and the soft, cool gradient background.

The principle is clear: the high-contrast relationship between the vibrant accent and the cool background is the engine of visual hierarchy.

## 3. Typography

Typography adopts a humanist-sans-serif category, lending a clean but approachable voice to the interface. The scale is structured for three distinct functions: a main promotional headline, sub-headlines for survey questions, and standard text for labels and body copy.

- **Display:** humanist-sans
- **Body:** humanist-sans
- **Mono:** sans-serif

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 48px | 1.1 | 600 | -1.2px | Main promotional headline |
| subtitle | 20px | 1.4 | 400 | 0px | Sub-headline and survey questions |
| body | 14px | 1.4 | 400 | 0px | Standard text and button labels |

## 4. Spacing

Spacing is governed by a standard base-4 vertical rhythm, creating a predictable structural grid. Generous application of this rhythm produces a relaxed, unhurried feel appropriate for the wellness context.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** standard base-4 vertical rhythm with generous spacing for a relaxed feel

## 5. Surfaces

Surfaces are defined by subtle depth through layered, semi-transparent shadows and minimal, purposeful borders. A solid 1px black border is reserved for specific icon containers and UI elements, providing crisp definition where needed.

- **Radius:** sm 4px · md 10px · lg 20px · pill 999px
- **Shadows:**
  - 0 4px 12px rgba(0,0,0,0.1)
  - 0 4px 20px rgba(0,0,0,0.1)
- **Borders:** solid 1px black borders used for the primary icon container and some UI elements

## 6. Layout

The layout skeleton is a centered, single-column stack, optimized for both mobile viewports and focused desktop overlays. This structure eliminates navigational complexity, funneling user attention linearly through the survey flow.

- **Container max:** 400px
- **Paragraph max:** 350px
- **Grid:** 1 columns, gutter 16px
- **Breakpoints:** 768 px

**Skeleton:** centered single-column stack for mobile and focused desktop overlays

## 7. Motion & Interaction

Motion philosophy is functional and subtle, designed to provide immediate feedback rather than to decorate. Interactions employ smooth color and box-shadow transitions, with durations calibrated for responsiveness over ornamentation.

- **Durations:** micro 125ms · small 200ms · medium 300ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - smooth color and box-shadow transitions on interactive elements

- **Hover:** subtle change in background-color or box-shadow for buttons
- **Click:** immediate visual feedback via background-color change
- **Transition:** all properties transition smoothly over 125ms or 300ms
- **Keyboard:** standard focus outlines implied by accessibility

## 8. Voice & Don'ts

The editorial voice is playful, direct, and inviting, using conversational, second-person questions to engage the user personally. Headlines pose inquiries, while CTAs are framed as clear, action-oriented statements for selection.

- **Tone:** playful, direct, and inviting
- **Headline style:** Conversational, second-person questions and statements
- **CTA style:** Clear, action-oriented statements for user selection
- **Avoid:** clinical terminology / aggressive sales language / complex medical jargon

### Don'ts
- ❌ 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.

The system deliberately avoids clinical terminology, aggressive sales language, and complex medical jargon, maintaining its accessible and comforting tone.

## System Prompt (paste into AI tool)

```
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.
```