---
name: Isla Beauty
description: "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."
version: alpha

colors:
  background: "#FDF9F4"
  primary: "#1A1A1A"
  secondary: "#6F6F6F"
  tertiary: "#E4263D"
  neutral: "#8A8580"
  bg-soft: "#F2DBC8"
  line: "rgba(0,0,0,0.1)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 64px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-1.5px"

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

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

---

## Overview

A premium skincare brand offering concentrated, effective beauty products with a minimalist, modern aesthetic.

*A luxury skincare brand that combines clean aesthetics with scientific efficacy.*

## Colors

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

- **Background (`#FDF9F4`)** — uses `bg` token
- **Primary text (`#1A1A1A`)** — uses `ink` token
- **Secondary text (`#6F6F6F`)** — uses `ink-soft` token
- **Accent (`#E4263D`)** — uses `accent` token
- **Muted (`#8A8580`)** — uses `muted` token
- **Borders (`rgba(0,0,0,0.1)`)** — uses `line` token

## Typography

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

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

## Layout

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

*Rhythm:* A consistent 4px grid provides structure, with generous spacing in promotional areas to maintain a premium, uncluttered feel.

## Elevation & Depth

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

## Shapes

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

## Components

- **button:** Minimalist buttons with subtle borders or solid fills, often using uppercase text and pill-shaped or slightly rounded corners.
- **card:** Clean product presentations that rely on high-quality photography and generous whitespace.
- **chip:** Simple text-based selection chips for filtering or questionnaire options.
- **input:** Clean, unobtrusive input fields with minimal borders.
- **hero:** A full-width, immersive photographic hero section with large, expressive typography overlaid.

## Do's and Don'ts

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

---

## System Prompt (paste into AI agent)

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