---
name: Sandlandsleep
description: "A great example of a focused, minimalist consumer interface that uses a single high-contrast accent to guide user attention."
version: alpha

colors:
  background: "#dce4ef"
  primary: "#000000"
  secondary: "#9c9c9c"
  tertiary: "#fae467"
  neutral: "#f2ede8"
  line: "rgba(0,0,0,1)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 48px
    lineHeight: 1.1
    fontWeight: 600
    letterSpacing: "-1.2px"
  subtitle:
    fontFamily: humanist-sans
    fontSize: 20px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0px"
  body:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 4px
  md: 10px
  lg: 20px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

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

*a calm, premium invitation to better sleep*

## Colors

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

- **Background (`#dce4ef`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`#9c9c9c`)** — uses `ink-soft` token
- **Accent (`#fae467`)** — uses `accent` token
- **Muted (`#f2ede8`)** — uses `muted` token
- **Borders (`rgba(0,0,0,1)`)** — uses `line` token

## Typography

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

## Layout

centered single-column stack for mobile and focused desktop overlays

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

## Elevation & Depth

- 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

## Shapes

- `sm`: 4px
- `md`: 10px
- `lg`: 20px
- `pill`: 999px

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

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

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