---
name: Vibrants
description: "This site is a great example of a playful, consumer-focused wellness UI with a soft, calming aesthetic."
version: alpha

colors:
  background: "#FDFFFE"
  primary: "#021422"
  secondary: "#67727A"
  bg-soft: "#F3FAFF"
  line: "rgba(0,0,0,0.1)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 48px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-1px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

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

---

## Overview

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

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

## Colors

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

- **Background (`#FDFFFE`)** — uses `bg` token
- **Primary text (`#021422`)** — uses `ink` token
- **Secondary text (`#67727A`)** — uses `ink-soft` token
- **Borders (`rgba(0,0,0,0.1)`)** — uses `line` token

## Typography

- **Display:** humanist-sans
- **Body:** humanist-sans

## Layout

Centered column layout with generous vertical spacing.

*Rhythm:* Vertical spacing is consistent and uses multiples of 4px.

## Elevation & Depth

- rgba(0, 0, 0, 0.1) 0px 2px 4px 0px
- Borders: 1px solid

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

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

## Do's and Don'ts

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

---

## System Prompt (paste into AI agent)

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