# Isla Beauty · Design system migration spec

> Source: https://isla-beauty.com  ·  Curated by OpenDesign  ·  en

> The site is a great example of using a strong, singular accent color and expressive typography to create a premium, memorable brand identity in a crowded market.

## 1. Identity DNA

Isla Beauty's design system is built on the analogy of a luxury skincare formulation: a clean, creamy base with a potent, singular active ingredient. The identity combines minimalist beauty with scientific efficacy, using a warm palette and expressive typography to create a premium, modern aesthetic.

**One-liner:** A premium skincare brand offering concentrated, effective beauty products with a minimalist, modern aesthetic.
**Keywords:** premium skincare · minimalist beauty · effective routines
**Analogy:** A luxury skincare brand that combines clean aesthetics with scientific efficacy.

## 2. Color

The color system establishes a warm, sophisticated foundation of creamy off-whites and deep charcoal, creating a refined backdrop for product and photography. A single, vibrant red accent serves as the system's concentrated active, providing energetic punctuation and directing visual attention.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FDF9F4` | main background |
| `--bg-soft` | `#F2DBC8` | card background |
| `--ink` | `#1A1A1A` | body text |
| `--ink-soft` | `#6F6F6F` | secondary text |
| `--muted` | `#8A8580` | placeholder |
| `--accent` | `#E4263D` | single accent |
| `--line` | `rgba(0,0,0,0.1)` | divider |

**Color principle:** A warm, sophisticated palette dominated by creamy off-whites and charcoal, punctuated by a vibrant, energetic red accent that demands attention.

The principle is restraint: a muted, warm canvas that allows one deliberate color to command focus.

## 3. Typography

Typography in the system draws a clear line between expression and function. **Transitional-serif** faces provide bold, refined character for display headlines, while **humanist-sans** delivers clarity and readability for body copy and navigation.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 64px | 1.0 | 400 | -1.5px | Large, expressive headline in the hero |

**Type rules:**
- Use transitional-serif for bold, expressive display headlines.
- Use humanist-sans for clear, readable body copy and navigation.
- Maintain tight letter-spacing for display text to create a refined feel.

## 4. Spacing

Spacing follows a consistent 4px grid, creating a measured rhythm that structures content without feeling rigid.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** A consistent 4px grid provides structure, with generous spacing in promotional areas to maintain a premium, uncluttered feel.

## 5. Surfaces

Surface depth is achieved through subtlety, employing very light, diffused shadows and thin, dark borders to define components. The approach prioritizes a clean, flat aesthetic where elevation is indicated with care, never heaviness.

- **Radius:** sm 2px · md 4px · lg 8px · pill 999px
- **Shadows:**
  - rgba(0, 0, 0, 0.06) 0px 2px 8px 0px
  - rgba(0, 0, 0, 0.1) 0px 5px 10px 0px
- **Borders:** Thin, subtle borders using black or dark grays define interactive elements and sections without being heavy.

## 6. Layout

The layout skeleton is clean and centered, anchored by a persistent top navigation bar. Large, immersive photographic sections break the grid, creating focal points that showcase product in a premium, uncluttered context.

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

**Skeleton:** A clean, centered layout with a persistent top navigation bar and large, immersive photographic sections.

## 7. Motion & Interaction

Motion is purposeful and understated, used to clarify interaction rather than decorate. Transitions are smooth and quick, applying fade-ins for modal overlays and subtle transforms to guide the user's focus during state changes.

- **Durations:** micro 250ms · small 400ms · medium 600ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Smooth fade-in transitions for modal overlays.
  - Subtle hover transitions on interactive elements.
  - Transformations for moving promotional banners.

- **Hover:** Subtle color or opacity changes on interactive elements to provide clear feedback.
- **Click:** Immediate visual response, often accompanied by a transition to a new state or modal.
- **Transition:** Smooth transitions (0.25s - 0.4s) for opacity and transform properties.
- **Keyboard:** Standard keyboard navigation supported, with clear focus indicators.

## 8. Voice & Don'ts

The editorial voice is confident, minimalist, and benefit-driven. Headlines are expressive and conversational, often mixing typefaces for emphasis, while calls to action remain direct and action-oriented.

- **Tone:** Confident, minimalist, and benefit-driven.
- **Headline style:** Expressive and often conversational, using a mix of serif and sans-serif typefaces for emphasis.
- **CTA style:** Direct and action-oriented, often using uppercase text in buttons.
- **Avoid:** Cluttered or busy layouts / Loud or neon colors / Overly complex typography

### Don'ts
- ❌ Don't use complex gradients — the screenshot shows solid, clean background colors instead.
- ❌ Don't use dark mode — the site uses a light, creamy color scheme throughout.
- ❌ Don't use playful or rounded sans-serif fonts for display — the screenshot uses a transitional-serif for expressive headlines.
- ❌ Don't use heavy drop shadows on components — the screenshot shows very subtle, soft shadows for elevation.
- ❌ Don't use bright neon or primary colors — the screenshot uses a specific, vibrant red accent against a muted, warm palette.
- ❌ Don't use multi-column text blocks — the screenshot uses generous whitespace and centered, single-column layouts for readability.

The system deliberately avoids dark modes, neon palettes, and complex gradients, committing fully to a light, warm, and clean visual language.

## System Prompt (paste into AI tool)

```
This is a premium, minimalist skincare e-commerce site. Its design DNA is defined by a warm, creamy off-white background (#FDF9F4) contrasted with a vibrant red accent (#E4263D) and charcoal ink (#1A1A1A). Typography mixes expressive transitional-serif headlines with clean humanist-sans body copy. The layout is clean and spacious, using high-quality photography to create an immersive, premium feel. Critical donts: don't use dark mode, don't use neon colors, and don't clutter the interface with complex gradients or heavy shadows. Maintain a refined, confident, and benefit-driven voice.
```