---
title: "Isla Beauty design system"
variant: extended
source: https://isla-beauty.com/
captured_at: 2026-10-12
theme: light
industry: beauty
generator: Design DNA (https://four.wiralomi.com/style/isla-beauty-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Isla Beauty · Design System

> Concentrated skincare, with room to breathe.

**Theme:** light · **Industry:** beauty · **Source:** https://isla-beauty.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Isla pairs a restrained skincare shop with an editorial story about concentrated formulas and fewer products. Warm neutral panels, expressive serif headlines, and a precise red accent keep the experience calm but distinctive.

## North star

Let editorial serif headlines and real product imagery tell the story, while warm whitespace and precise red accents keep shopping actions unmistakable.

## Overview

The visual strategy balances a clean white canvas with warm, pale-neutral panels that create gentle section changes without heavy colour blocking. Signal red (#e4263d) is reserved for the wordmark, emphasis, links and purchase actions, giving a focused point of energy against mostly black typography. Large editorial headlines use a confident serif treatment, while navigation, body copy and product information rely on compact sans-serif styles. The hero is centered and spacious, then the page shifts into practical four-column product cards and a warm-toned comparison section. Skincare packaging, shelf comparisons and real-skin before-and-after photography carry the story; images are presented plainly rather than surrounded by decorative effects. Comfortable gaps, restrained hairlines and simple card edges keep the long homepage readable and product-led.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Signal Red | `#e4263d` | `--color-signal-red` | accent | Brand wordmark, emphasized phrases, inline links, and primary add-to-cart and shop actions. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas and the clean backdrop for navigation, hero content, and product areas. |
| Oat Veil | `#f8f6f3` | `--color-oat-veil` | surface | Warm section and card background, especially the product comparison and skincare story panels. |
| True Ink | `#000000` | `--color-true-ink` | neutral | Primary navigation, headings, body text, and high-contrast interface labels. |
| Soft Charcoal | `#3a3a3a` | `--color-soft-charcoal` | semantic | Muted supporting copy and descriptive text beneath stronger headings. |
| Linen Line | `#eae6e2` | `--color-linen-line` | semantic | Fine borders and hairlines separating understated cards and product links. |
| Stone Text | `#6f6f6f` | `--color-stone-text` | semantic | Secondary labels and muted badge text, including product-detail metadata. |
| Near Ink | `#1a1a1a` | `--color-near-ink` | neutral | Dark card copy and headings, including text over pale product and comparison surfaces. |
| Warm Ash | `#8a8580` | `--color-warm-ash` | neutral | A subdued warm-gray text tone found in supporting page copy. |
| Footer Ink | `#212121` | `--color-footer-ink` | neutral | Dark footer text and supporting lower-page interface content. |
| Blush Clay | `#f2dbcf` | `--color-blush-clay` | surface | Occasional softly tinted product-card surface; keep it secondary to the larger warm-neutral panels. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f8f6f3` (Oat Veil) · `--color-surface-2` → `#f2dbcf` (Blush Clay) · `--color-text` → `#000000` (True Ink) · `--color-text-muted` → `#3a3a3a` (Soft Charcoal) · `--color-text-subtle` → `#6f6f6f` (Stone Text) · `--color-border` → `#eae6e2` (Linen Line) · `--color-accent` → `#e4263d` (Signal Red) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f8f6f3` | 19.47:1 | AAA |
| `#000000` | `#f2dbcf` | 15.81:1 | AAA |
| `#3a3a3a` | `#ffffff` | 11.37:1 | AAA |
| `#3a3a3a` | `#f8f6f3` | 10.54:1 | AAA |
| `#3a3a3a` | `#f2dbcf` | 8.56:1 | AAA |
| `#6f6f6f` | `#ffffff` | 5.02:1 | AA |
| `#6f6f6f` | `#f8f6f3` | 4.66:1 | AA |
| `#6f6f6f` | `#f2dbcf` | 3.78:1 | AA-large |
| `#e4263d` | `#ffffff` | 4.52:1 | AA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Nimbus Sans | `--font-body` | system | 400, 500, 700 | Display and body copy, with the measured body style also supporting product and button text. | Inter |
| Soehne Buch | `--font-soehne-buch` | webfont | 400 | Captions, links, navigation, and form text. | Inter |
| AGaramondPro | `--font-display` | system | 600 | H1, H2, and H3 editorial headings. | EB Garamond |
| Soehne Kraftig | `--font-soehne-kraftig` | webfont | 400, 500 | Buttons, navigation labels, and uppercase eyebrow text. | Inter |
| EB Garamond | `--font-eb-garamond` | webfont | 600, 500 | Additional serif emphasis and supporting editorial type. | EB Garamond |
| Garamond Italic | `--font-garamond-italic` | system | 400 | Italic serif emphasis in short editorial phrases. | Cormorant Garamond |

- **Nimbus Sans:** Neutral sans-serif for clear product communication; the large display treatment is notably spacious and lightly tracked.
- **Soehne Buch:** Use regular weight for compact interface copy and keep casing natural rather than decorative.
- **AGaramondPro:** Use a confident semibold serif for story headings, with natural casing and restrained tracking.
- **Soehne Kraftig:** Medium weight; button and eyebrow styles use uppercase lettering with wide tracking.
- **EB Garamond:** Measured in medium and semibold weights; complements the main editorial serif voice.
- **Garamond Italic:** Reserve italic styling for brief highlighted statements rather than long passages.

### Type scale — Augmented Fourth (ratio ≈ 1.431, base 15.5px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 65px | 400 | 1.05 | -0.02em | — | Nimbus Sans | Large hero statement and prominent brand display moments. |
| h1 | 30px | 600 | 1.2 | -0.01em | — | AGaramondPro | Primary editorial heading for major page stories. |
| h2 | 26px | 600 | 1.25 | 0 | — | AGaramondPro | Secondary section headings and comparison titles. |
| h3 | 20px | 600 | 1.25 | 0 | — | AGaramondPro | Smaller feature and product-story headings. |
| body | 15.5px | 400 | 1.55 | 0 | — | Nimbus Sans | Explanatory copy, product details, and supporting paragraphs. |
| caption | 12px | 400 | normal | 0 | — | Soehne Buch | Small labels, captions, and compact product metadata. |
| button | 12px | 500 | 1 | 0.1em | uppercase | Soehne Kraftig | Uppercase purchase and action labels. |
| nav | 14px | 500 | normal | 0 | — | Soehne Kraftig | Header navigation and compact menu labels. |
| link | 16px | 400 | normal | 0 | — | Soehne Buch | Inline and product links. |
| eyebrow | 12px | 500 | 1 | 0.1em | uppercase | Soehne Kraftig | Uppercase introductory labels above headings. |

OpenType features in use: `"lnum", "tnum"`.

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 3, 4, 6, 7, 8, 10, 12, 15, 16, 20, 32, 40, 50, 56 px.
- Section rhythm 56px · element gap 10px · card padding 32px · max content width 1128px.

The measured content max width is 1128px, with comfortable density and a 56px section rhythm. The hero is centered, followed by a four-column product grid; comparison content uses two side-by-side cards, awards sit in a centered row, and customer results form a three-column gallery. The lower formula section moves to a six-column product lineup, then the newsletter and footer use a two-column arrangement. Preserve generous whitespace and clear changes between story, proof, and shopping areas.

## Shape & elevation

- Radius: button `3px` · input `3px` · card `3px` · badge `2px` · nav `50%` · xs `2px` · sm `3px` · md `4px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.28s ease` on interactive elements.

The measured interface has no shadows or gradients. Cards feel mostly flat, relying on warm surface fills, small restrained corner radii, and thin pale borders where needed. Let spacing and background shifts define layers; avoid floating panels or strong depth effects.

## Imagery

Use clean product photography of Isla bottles and tubes on pale neutral backgrounds, with consistent, uncluttered framing. Real-skin customer photographs and before-and-after pairs provide evidence in the results section; shelf imagery supports the fewer-products comparison. Keep images natural and direct, with no added illustrative or 3D treatment that competes with the photographed products.

## Components

### Announcement strip

Repeat a small red free-shipping message across the top; keep it visually light above the main navigation.

### Product card

Show a large product image, product and descriptor text, price or rating, then a full-width red add-to-cart button with white uppercase labeling.

### Comparison cards

Set the typical crowded shelf beside Isla's smaller routine on pale neutral surfaces, combining short headings, imagery, and clear product-count messaging.

### Results gallery

Arrange real-skin before-and-after pairs in three columns, with concise editorial headlines and restrained labels.

### Formula lineup

Present a horizontal set of six products with small product imagery, names, and concise active-ingredient notes.

### Newsletter form

Use a compact email sign-up area with supporting discount copy and a simple submit action in the lower-page layout.

### Measured component styles

- **Primary button** (“ADD TO CART”): background #e4263d · text #ffffff · border 1px solid #e4263d · radius 3px · padding 15px · 500 12px Soehne Kraftig · uppercase
- **Link** (“The Elixir 5 dosed actives”): background #fdf9f4 · text #1a1a1a · border 1px solid #eae6e2 · radius 0px · padding 16px · 400 16px Nimbus Sans
- **Input**: transparent background · text #000000 · radius 3px · padding 12px 20px 12px 0px · 400 16px Soehne Buch
- **Card** (“THE TYPICAL SHELF 14 bottles. Most half-”): background #fefcf8 · text #1a1a1a · radius 4px · padding 32px · 400 16px Nimbus Sans
- **Badge** (“CLEANSE”): background #81807e · text #ffffff · radius 999px · padding 6px 12px · 500 10px Nimbus Sans · uppercase
- **Navigation item** (“Shop Why Isla Works About Us”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Soehne Buch

## Do

- Keep the main canvas white and section surfaces warm and pale.
- Use red for brand emphasis and high-priority purchase actions.
- Pair editorial serif headings with practical sans-serif product details.
- Use real product and skin photography as the main evidence.
- Preserve the centered, spacious hero before denser shopping content.
- Separate long-page stories with subtle surface shifts and generous gaps.

## Don't

- Do not add gradients or decorative shadows.
- Do not introduce extra brand colours beyond the measured palette.
- Do not make every heading red; reserve red for selective emphasis.
- Do not crowd product cards with unnecessary copy or ornament.
- Do not replace real-skin imagery with glossy illustrations.
- Do not use heavy borders or high-contrast section dividers.

## Agent prompt

Build a new Isla Beauty page using a bright white canvas (#ffffff), warm Oat Veil section surfaces (#f8f6f3), and Signal Red (#e4263d) only for focused brand emphasis and primary actions. Pair expressive editorial serif headings with clean sans-serif navigation, body copy, and product details. Keep the layout comfortable and centered within the measured 1128px content width; use clear grids for product cards and customer results, with open space between story sections. Use authentic skincare product and real-skin photography on quiet backgrounds. Keep components flat, using subtle Linen Line (#eae6e2) borders where useful and no shadows or gradients. Make the page feel like a considered skincare editorial that still supports easy product discovery and purchase.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered hero on white with large headline, supporting copy, and product imagery beginning below. | brand proposition, supporting explanation | serif display headline, selective red emphasis, open white canvas |
| 2 | product-grid | Four-column shopping grid with product photography and purchase actions. | product discovery, quick add to cart | pale image backdrops, product details, red action buttons |
| 3 | comparison | Two-column comparison cards on a warm neutral section surface. | before-and-after concept, product-count comparison, shop call to action | paired cards, editorial heading, warm pale background |
| 4 | logo-cloud | Centered award heading above a horizontal row of award marks. | trust signals | small centered label, award-logo row |
| 5 | gallery | Three-column real-skin results gallery with paired images and captions. | customer proof, before-and-after results | photo pairs, editorial headline, concise captions |
| 6 | product-showcase | Editorial introduction followed by a six-item product lineup. | formula education, product browsing | split text introduction, product thumbnails, small ingredient notes |
| 7 | newsletter | Two-column lower-page area for email signup and grouped site links. | newsletter signup, footer navigation | simple email field, light divider, compact link groups |

## Source CSS custom properties (selected)

```css
---color-video-bg: #f2f2f2;
---color-bg: #ffffff;
---color-bg-secondary: #f0f0f0;
---color-bg-rgb: 255, 255, 255;
---color-a5: rgba(0, 0, 0, 0.05);
---color-a10: rgba(0, 0, 0, 0.1);
---color-a15: rgba(0, 0, 0, 0.15);
---color-a20: rgba(0, 0, 0, 0.2);
---color-a25: rgba(0, 0, 0, 0.25);
---color-a30: rgba(0, 0, 0, 0.3);
---color-a35: rgba(0, 0, 0, 0.35);
---color-a40: rgba(0, 0, 0, 0.4);
---color-a45: rgba(0, 0, 0, 0.45);
---color-a50: rgba(0, 0, 0, 0.5);
---color-a55: rgba(0, 0, 0, 0.55);
---color-a60: rgba(0, 0, 0, 0.6);
---color-a65: rgba(0, 0, 0, 0.65);
---color-a70: rgba(0, 0, 0, 0.7);
---color-a75: rgba(0, 0, 0, 0.75);
---color-a80: rgba(0, 0, 0, 0.8);
---color-a85: rgba(0, 0, 0, 0.85);
---color-a90: rgba(0, 0, 0, 0.9);
---color-a95: rgba(0, 0, 0, 0.95);
---color-border: rgb(0, 0, 0);
---color-border-light: #666666;
---color-border-hairline: #f7f7f7;
---color-border-dark: #000000;
---color-primary: #e4263d;
---color-primary-hover: #b20c20;
---color-primary-fade: rgba(228, 38, 61, 0.05);
---color-primary-fade-hover: rgba(228, 38, 61, 0.1);
---color-primary-opposite: #ffffff;
---color-secondary: #e4263d;
---color-secondary-hover: #b20c20;
---color-secondary-fade: rgba(228, 38, 61, 0.05);
---color-secondary-fade-hover: rgba(228, 38, 61, 0.1);
---color-secondary-opposite: #ffffff;
---color-link: #e4263d;
---color-link-hover: #e4263d;
---color-link-fade: rgba(228, 38, 61, 0.05);
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/isla-beauty-com