# Vibrants · Design system migration spec

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

> This site is a great example of a playful, consumer-focused wellness UI with a soft, calming aesthetic.

## 1. Identity DNA

The Vibrants design system is built as a welcoming entry point, where every component serves to greet the visitor rather than demand attention. Its identity DNA combines playful wellness with a calm, inviting energy—think of a friendly practitioner’s office where the colors soothe and the typography speaks with warmth. This balance of vibrancy and serenity defines every decision from palette to spacing.

**One-liner:** A playful, wellness-focused landing page with a soft gradient background and colorful, inviting buttons.
**Keywords:** vibrant · wellness · playful · inviting · friendly
**Analogy:** A friendly wellness brand greeting you with a colorful, energetic, yet calm vibe.

## 2. Color

The color palette establishes a serene atmosphere through a soft gradient background, anchored by high-contrast ink for readability and punctuated by multicolored button accents that inject playful energy. This approach rejects monotone branding in favor of a lively, approachable spectrum.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FDFFFE` | main background |
| `--bg-soft` | `#F3FAFF` | card background |
| `--ink` | `#021422` | body text |
| `--ink-soft` | `#67727A` | secondary text |
| `--line` | `rgba(0,0,0,0.1)` | divider |

**Color principle:** Soft, light backgrounds with high-contrast text and colorful accents.

The guiding principle is restraint: soft, light backgrounds provide the canvas, while high-contrast text and colorful accents deliver focus without visual noise.

## 3. Typography

Typographic voice is delivered through humanist-sans fonts—Montserrat and Inter—that balance approachability with clarity. The category choices favor warmth over clinical precision, supporting the site’s friendly, encouraging tone in both headlines and body text.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 48px | 1.0 | 700 | -1px | Headlines |
| body | 16px | 1.5 | 400 | 0px | Body text |

## 4. Spacing

Spacing follows a strict 4px-based vertical rhythm, creating consistent, predictable gaps that let content breathe and maintain visual harmony across the centered layout.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Vertical spacing is consistent and uses multiples of 4px.

## 5. Surfaces

Surfaces employ minimal depth through subtle shadows and a consistent 1px solid border, grounding elements without heavy layering. This restraint keeps the interface light and airy, avoiding visual weight that could disrupt the calming aesthetic.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - rgba(0, 0, 0, 0.1) 0px 2px 4px 0px
- **Borders:** 1px solid

## 6. Layout

The layout skeleton is a centered column with generous vertical spacing, prioritizing readability and touch-friendly targets over dense grid systems. Components stack vertically in a clear hierarchy, guiding the eye naturally from logo to headline to call-to-action.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Centered column layout with generous vertical spacing.

## 7. Motion & Interaction

Motion philosophy favors subtlety and purpose—durations are tiered from quick micro-interactions (220ms) to longer medium transitions (800ms), all using a standard easing curve. The goal is to acknowledge user actions without becoming performative, keeping interactions calm and focused.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0.0, 0.2, 1)`

- **Hover:** Subtle opacity change on buttons.
- **Click:** Button press effect.
- **Transition:** opacity 0.2s, transform 0.3s
- **Keyboard:** Standard tab navigation.

## 8. Voice & Don'ts

Editorial voice is friendly, playful, and encouraging, with headlines that invite and calls-to-action that speak directly without formality. The system deliberately avoids technical jargon, aggressive language, and stiff corporate tone.

- **Tone:** friendly
- **Headline style:** Playful and encouraging.
- **CTA style:** Direct and action-oriented.
- **Avoid:** formal / technical / aggressive

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

What Vibrants intentionally omits is as telling as what it includes: no stark white backgrounds, no single-accent palettes, no sharp corners, no dense text blocks, no dark themes, and no strict grid layouts.

## System Prompt (paste into AI tool)

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