---
name: Ilia
description: "Clean beauty brand with strong photographic presence and restrained, premium UI that prioritizes product imagery."
version: alpha

colors:
  background: "#FAF7F8"
  primary: "#271F1F"
  secondary: "#5E5047"
  neutral: "#756E65"
  bg-soft: "#FFFFFF"
  bg-quiet: "#F5F5F5"
  muted-soft: "#E5E7EB"
  line: "rgba(229, 231, 235, 1)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 40px
    lineHeight: 1.1
    fontWeight: 400
    letterSpacing: "-1.6px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"

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

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

---

## Overview

Clean, photographic beauty e-commerce with warm neutrals and refined typography.

*A minimalist beauty counter in a sunlit gallery*

## Colors

Warm neutrals dominate the background with dark brown as the primary foreground color, creating a high-contrast but soft aesthetic.

- **Background (`#FAF7F8`)** — uses `bg` token
- **Primary text (`#271F1F`)** — uses `ink` token
- **Secondary text (`#5E5047`)** — uses `ink-soft` token
- **Muted (`#756E65`)** — uses `muted` token
- **Borders (`rgba(229, 231, 235, 1)`)** — uses `line` token

## Typography

- **Display:** geometric-sans
- **Body:** humanist-sans
- **Mono:** ui-monospace

- Uppercase for navigation and button labels
- Tight letter-spacing for large display text
- Mixed font weights for hierarchical emphasis

## Layout

Modal overlay with centered white card on left, full-bleed lifestyle photography on right

*Rhythm:* Base-4 system with consistent 16px gutters and padding

## Elevation & Depth

- 0px 4px 6px -1px rgba(0, 0, 0, 0.1)
- 0px 2px 4px -2px rgba(0, 0, 0, 0.1)
- Borders: 1px solid rgb(229, 231, 235) for dividers, 2px solid rgb(39, 31, 31) for primary buttons

## Shapes

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

## Components

- **button:** Dark brown (#271F1F) filled buttons with white uppercase text, rectangular with 8px radius
- **card:** White (#FFFFFF) modal cards with 12px border-radius
- **chip:** Category selection buttons in a grid layout with consistent 8px gaps
- **input:** Not visible in screenshot
- **hero:** Full-viewport split layout with modal overlay and lifestyle product photography

## Do's and Don'ts

**Don't:**
- Don't use dark mode — screenshot shows light #FAF7F8 background
- Don't use bright accent colors — screenshot shows monochromatic warm neutrals
- Don't use script or decorative fonts — screenshot shows clean geometric and humanist sans-serifs
- Don't use heavy drop shadows — screenshot shows subtle box-shadows with low opacity
- Don't use rounded pill buttons — screenshot shows rectangular buttons with 8px radius
- Don't use complex layouts — screenshot shows simple centered modal overlay pattern

---

## System Prompt (paste into AI agent)

```
Clean beauty e-commerce brand with warm neutral palette (#FAF7F8 background, #271F1F text) and refined typography. Uses geometric and humanist sans-serif font categories with tight letter-spacing for display text. Features photographic product imagery with minimalist UI components. Key design principles: restraint in color, emphasis on whitespace, high-contrast typography. Critical don'ts: avoid dark mode, saturated colors, decorative fonts, heavy shadows, complex gradients, or aggressive animations. The modal overlay pattern shows the brand's approach to conversion-focused design.
```