# Iveeapp · Design system migration spec

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

> The site effectively balances a clinical medical feel with a premium lifestyle brand through its thoughtful color and typography choices.

## 1. Identity DNA

The Iveeapp design system operates on a central analogy: a boutique medical clinic meets a lifestyle brand. It merges clinical trust with premium warmth, creating an interface that feels both professionally safe and personally inviting.

**One-liner:** Premium at-home and clinic-based IV therapy and wellness services.
**Keywords:** Healthcare · IV Therapy · Wellness · Premium · Medical
**Analogy:** A boutique medical clinic meets a lifestyle brand

## 2. Color

The palette establishes a soothing, clinical trust anchored by sky blue, punctuated by a warm coral action color. This combination provides high-impact focus without introducing visual stress.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#C4E3FA` | main background |
| `--bg-soft` | `#F5F9FD` | card background |
| `--bg-quiet` | `#FAF4E6` | quiet area |
| `--ink` | `#0C4170` | body text |
| `--muted` | `#0C4170` | placeholder |
| `--muted-soft` | `rgba(12,65,112,0.2)` | weak hint |
| `--accent` | `#FC6B42` | single accent |
| `--line` | `rgba(12,65,112,0.2)` | divider |

**Color principle:** Clinical trust anchored by a soothing sky blue, punctuated by a warm coral action color.

The core principle is restraint: a two-tone scheme that feels clean, calming, and deliberately unhurried.

## 3. Typography

Typography pairs a classic transitional-serif for major headlines with a clean humanist-sans for UI and body text. This combination creates a voice that is both sophisticated and approachable.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 52px | 1.2 | 400 | -1px | Hero headlines and section titles |
| body | 14px | 1.4 | 400 | 0.28px | Main body text and descriptions |
| label | 12px | 1.4 | 500 | 0.96px | Navigation, buttons, and overlines |

**Type rules:**
- Use transitional-serif for all major headlines and pricing
- Use humanist-sans for UI labels and navigation
- Apply generous letter-spacing to uppercase labels
- Maintain a clean, airy typographic rhythm

## 4. Spacing

Spacing follows an open rhythm designed to emphasize a premium, unhurried feel.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Open spacing to emphasize a premium, unhurried feel

## 5. Surfaces

Surfaces are defined by lightness and subtlety. Shadows are virtually transparent, and boundaries are marked by gentle 1px borders.

- **Radius:** sm 4px · md 10px · lg 20px · pill 40px
- **Shadows:**
  - 0px 0px 30px 0px rgba(0,0,0,0)
- **Borders:** Subtle 1px borders using primary ink color or transparent ink

## 6. Layout

The structural skeleton is a standard full-width hero section, designed to showcase high-quality lifestyle imagery. Over this base, a centered modal overlay pattern manages focused interactions.

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

**Skeleton:** Standard full-width hero with centered modal overlay

## 7. Motion & Interaction

Motion philosophy prioritizes smooth, subtle transitions that provide polish without distraction. The system employs gentle opacity and color shifts that guide focus and confirm interaction.

- **Durations:** micro 150ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth opacity transitions for overlays and modals
  - Gentle color and background-color transitions on hover

- **Hover:** Subtle color shifts and opacity changes on interactive elements
- **Click:** Immediate visual response via transition properties
- **Transition:** Consistent 0.2s ease-in-out for borders and colors
- **Keyboard:** Standard focus outlines for accessibility

## 8. Voice & Don'ts

Editorial voice is professional, welcoming, and clear. Headlines are direct and benefit-driven, while calls to action are action-oriented and uppercase.

- **Tone:** Professional, welcoming, and clear
- **Headline style:** Direct and benefit-driven using transitional-serif
- **CTA style:** Action-oriented and uppercase
- **Avoid:** Aggressive medical terminology / Overly complex technical jargon / Cluttered or dense layouts

### Don'ts
- ❌ Don't use neon or harsh colors — screenshot shows a calming palette of sky blue and coral
- ❌ Don't use heavy geometric sans-serifs — screenshot shows a softer humanist-sans and transitional-serif pairing
- ❌ Don't use dark backgrounds as the primary theme — screenshot is dominated by light blue and white
- ❌ Don't use sharp, blocky UI elements — screenshot features rounded corners and pill-shaped buttons
- ❌ Don't clutter the interface with too many colors — screenshot primarily uses a two-tone blue and coral scheme
- ❌ Don't use small, cramped typography — screenshot displays generous letter-spacing and clear hierarchy

The system deliberately avoids aggressive medical jargon, complex technical language, and any cluttered or dense layouts.

## System Prompt (paste into AI tool)

```
This is a premium healthcare and wellness service website. The design DNA centers around a calming, clinical yet approachable aesthetic using a primary sky-blue background (#C4E3FA) and a vibrant coral accent (#FC6B42) for calls to action. The typography pairs a classic transitional-serif for impactful headlines with a clean humanist-sans-serif for UI elements and body text, creating a sophisticated and trustworthy feel. Critical design constraints: avoid overly dark or clinical color palettes; do not use harsh geometric typography; ensure all interactive elements use rounded corners and pill shapes to maintain a friendly, premium atmosphere. The layout should remain airy with generous white space to reflect the high-end nature of the services offered.
```