Ilia Beauty-inspired

# Visual style inspired by Ilia Beauty's storefront (Makeup)

A full style reference in DESIGN.md format: tokens in the front matter, then type scale, components, layout, do's and don'ts. Use it for colour, type, spacing and components only — never Ilia Beauty's name, logo, product photos, copy or trademarks.

---
version: alpha
name: "Ilia Beauty"
description: |-
  Ilia Beauty is clean makeup that doesn't whisper "natural" — it speaks in a warm, earthy palette of #271f1f, #5e5047, and #bba293, punctuated by a signature pop of #ffcf2a that feels like a sunlit moment. The brand lives in the tension between raw, organic textures and a polished, modern sensibility, using a canvas of #f7f7f8 and #fafafa to let its hero products breathe. Typography leans on the rounded, humanist warmth of Brown and Post Grotesk, with display sizes that feel approachable rather than authoritative — a deliberate choice that mirrors the brand's "skin first, makeup second" philosophy. Buttons and cards carry soft radii (`{rounded.sm}` to `{rounded.md}`), while the occasional sharp accent in #0018ff or #ff5742 adds a jolt of unexpected energy. The overall mood is grounded, optimistic, and quietly luxurious — a clean beauty brand that trusts its ingredients, its colors, and its customer's intelligence.

colors:
  primary: "#271f1f"
  primary-active: "#5e5047"
  primary-disabled: "#cccccc"
  ink: "#1a1a1a"
  body: "#271f1f"
  muted: "#5e5047"
  muted-soft: "#9da1a0"
  hairline: "#dedede"
  hairline-soft: "#e5e5e5"
  canvas: "#fafafa"
  surface-soft: "#f7f7f8"
  surface-card: "#ffffff"
  on-primary: "#ffffff"
  accent-sun: "#ffcf2a"
  accent-coral: "#ff5742"
  accent-teal: "#00caaa"
  accent-sky: "#1990c6"
  accent-deep: "#272d45"
  accent-muted-teal: "#0e7a82"
  accent-lavender: "#676986"
  accent-soft-pink: "#efe6e1"
  accent-electric: "#0018ff"
  accent-neon-green: "#4efac0"
  star-rating: "#ffcf2a"
  badge-new: "#ff5742"
  badge-sale: "#00caaa"
  scrim: "#121212"

typography:
  display-xl:
    fontFamily: "'Brown', 'Post Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.15
    letterSpacing: -0.5px
  display-lg:
    fontFamily: "'Brown', 'Post Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 36px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -0.3px
  display-md:
    fontFamily: "'Brown', 'Post Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 28px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: 0
  display-sm:
    fontFamily: "'Brown', 'Post Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 22px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0
  title-lg:
    fontFamily: "'Brown', 'Post Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: 0
  title-md:
    fontFamily: "'Brown', 'Post Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.35
    letterSpacing: 0
  title-sm:
    fontFamily: "'Brown', 'Post Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0
  body-md:
    fontFamily: "'Inter', 'Helvetica Neue', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0
  body-sm:
    fontFamily: "'Inter', 'Helvetica Neue', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0
  caption:
    fontFamily: "'Inter', 'Helvetica Neue', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.2px
  caption-sm:
    fontFamily: "'Inter', 'Helvetica Neue', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0.1px
  badge:
    fontFamily: "'Inter', 'Helvetica Neue', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif"
    fontSize: 11px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.5px
    textTransform: uppercase
  button-md:
    fontFamily: "'Brown', 'Post Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: 0.5px
    textTransform: uppercase
  button-sm:
    fontFamily: "'Brown', 'Post Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: 0.5px
    textTransform: uppercase
  link:
    fontFamily: "'Inter', 'Helvetica Neue', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0
  nav-link:
    fontFamily: "'Brown', 'Post Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0.3px

rounded:
  none: 0px
  xs: 4px
  sm: 8px
  md: 12px
  lg: 20px
  xl: 32px
  full: 9999px

spacing:
  xxs: 2px
  xs: 4px
  sm: 8px
  md: 12px
  base: 16px
  lg: 24px
  xl: 32px
  xxl: 48px
  section: 64px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-md}"
    rounded: "{rounded.sm}"
    padding: 14px 28px
    height: 48px
  button-primary-active:
    backgroundColor: "{colors.primary-active}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-md}"
    rounded: "{rounded.sm}"
    padding: 14px 28px
    height: 48px
  button-primary-disabled:
    backgroundColor: "{colors.primary-disabled}"
    textColor: "{colors.muted-soft}"
    typography: "{typography.button-md}"
    rounded: "{rounded.sm}"
    padding: 14px 28px
    height: 48px
  button-secondary:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.primary}"
    typography: "{typography.button-md}"
    rounded: "{rounded.sm}"
    padding: 13px 27px
    height: 48px
    border: "2px solid {colors.primary}"
  button-secondary-active:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.primary-active}"
    typography: "{typography.button-md}"
    rounded: "{rounded.sm}"
    padding: 13px 27px
    height: 48px
    border: "2px solid {colors.primary-active}"
  button-accent-sun:
    backgroundColor: "{colors.accent-sun}"
    textColor: "{colors.ink}"
    typography: "{typography.button-md}"
    rounded: "{rounded.sm}"
    padding: 14px 28px
    height: 48px
  button-accent-teal:
    backgroundColor: "{colors.accent-teal}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-md}"
    rounded: "{rounded.sm}"
    padding: 14px 28px
    height: 48px
  button-ghost:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    typography: "{typography.button-md}"
    rounded: "{rounded.sm}"
    padding: 14px 28px
    height: 48px
  text-input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
    height: 48px
    border: "1px solid {colors.hairline}"
  text-input-focus:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
    height: 48px
    border: "2px solid {colors.primary}"
  text-input-error:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
    height: 48px
    border: "2px solid {colors.accent-coral}"
  select-input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
    height: 48px
    border: "1px solid {colors.hairline}"
  textarea:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
    border: "1px solid {colors.hairline}"
  nav-bar:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.primary}"
    typography: "{typography.nav-link}"
    height: 72px
    border-bottom: "1px solid {colors.hairline-soft}"
  nav-bar-scrolled:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.primary}"
    typography: "{typography.nav-link}"
    height: 64px
    border-bottom: "1px solid {colors.hairline}"
    boxShadow: "0 2px 8px rgba(0,0,0,0.05)"
  nav-link-active:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    typography: "{typography.nav-link}"
    border-bottom: "2px solid {colors.primary}"
  nav-link-inactive:
    backgroundColor: transparent
    textColor: "{colors.muted}"
    typography: "{typography.nav-link}"
  product-card:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: 0px
    border: "1px solid {colors.hairline-soft}"
  product-card-hover:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: 0px
    border: "1px solid {colors.hairline}"
    boxShadow: "0 8px 24px rgba(0,0,0,0.08)"
  product-card-image:
    rounded: "{rounded.md} {rounded.md} 0 0"
    aspectRatio: "1 / 1"
    objectFit: "cover"
  product-card-title:
    typography: "{typography.title-sm}"
    textColor: "{colors.ink}"
    padding: "{spacing.sm} {spacing.base} 0 {spacing.base}"
  product-card-price:
    typography: "{typography.body-sm}"
    textColor: "{colors.muted}"
    padding: "{spacing.xs} {spacing.base} {spacing.base} {spacing.base}"
  product-card-rating:
    typography: "{typography.caption-sm}"
    textColor: "{colors.muted-soft}"
    padding: "0 {spacing.base} {spacing.sm} {spacing.base}"
  product-card-badge:
    typography: "{typography.badge}"
    textColor: "{colors.on-primary}"
    backgroundColor: "{colors.badge-new}"
    rounded: "{rounded.xs}"
    padding: "2px 8px"
    position: "absolute"
    top: "{spacing.sm}"
    left: "{spacing.sm}"
  product-card-badge-sale:
    typography: "{typography.badge}"
    textColor: "{colors.on-primary}"
    backgroundColor: "{colors.badge-sale}"
    rounded: "{rounded.xs}"
    padding: "2px 8px"
    position: "absolute"
    top: "{spacing.sm}"
    left: "{spacing.sm}"
  hero-section:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.display-lg}"
    padding: "{spacing.section} {spacing.xl}"
    minHeight: "400px"
  hero-section-accent:
    backgroundColor: "{colors.accent-soft-pink}"
    textColor: "{colors.ink}"
    typography: "{typography.display-lg}"
    padding: "{spacing.section} {spacing.xl}"
    minHeight: "400px"
  hero-heading:
    typography: "{typography.display-xl}"
    textColor: "{colors.ink}"
    marginBottom: "{spacing.base}"
  hero-subheading:
    typography: "{typography.display-sm}"
    textColor: "{colors.muted}"
    marginBottom: "{spacing.lg}"
  hero-cta:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-md}"
    rounded: "{rounded.sm}"
    padding: "14px 32px"
  search-bar:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.full}"
    padding: "12px 20px"
    height: 48px
    border: "1px solid {colors.hairline}"
  search-bar-focus:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.full}"
    padding: "12px 20px"
    height: 48px
    border: "2px solid {colors.primary}"
  footer-section:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body-sm}"
    padding: "{spacing.xxl} {spacing.xl}"
  footer-link:
    typography: "{typography.link}"
    textColor: "{colors.on-primary}"
    hoverTextColor: "{colors.accent-sun}"
  footer-heading:
    typography: "{typography.title-sm}"
    textColor: "{colors.on-primary}"
    marginBottom: "{spacing.base}"
  footer-newsletter-input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.sm}"
    padding: "10px 16px"
    height: 44px
    border: "1px solid {colors.hairline}"
  footer-newsletter-button:
    backgroundColor: "{colors.accent-sun}"
    textColor: "{colors.ink}"
    typography: "{typography.button-sm}"
    rounded: "{rounded.sm}"
    padding: "10px 20px"
    height: 44px
  accordion-item:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    borderBottom: "1px solid {colors.hairline-soft}"
    padding: "{spacing.base} 0"
  accordion-trigger:
    typography: "{typography.title-sm}"
    textColor: "{colors.ink}"
    padding: "{spacing.sm} 0"
  accordion-content:
    typography: "{typography.body-sm}"
    textColor: "{colors.muted}"
    padding: "{spacing.sm} 0"
  tab-active:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    typography: "{typography.button-md}"
    borderBottom: "2px solid {colors.primary}"
    padding: "{spacing.sm} {spacing.base}"
  tab-inactive:
    backgroundColor: transparent
    textColor: "{colors.muted}"
    typography: "{typography.button-md}"
    borderBottom: "2px solid transparent"
    padding: "{spacing.sm} {spacing.base}"
  tab-panel:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    padding: "{spacing.lg} 0"
  color-swatch:
    rounded: "{rounded.full}"
    width: "32px"
    height: "32px"
    border: "2px solid {colors.hairline}"
  color-swatch-selected:
    rounded: "{rounded.full}"
    width: "32px"
    height: "32px"
    border: "2px solid {colors.primary}"
  quantity-selector:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.sm}"
    padding: "8px 12px"
    height: 40px
    border: "1px solid {colors.hairline}"
  quantity-selector-button:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    typography: "{typography.body-md}"
    rounded: "{rounded.xs}"
    padding: "4px 8px"
    height: 32px
  star-rating:
    color: "{colors.star-rating}"
    fontSize: "16px"
    gap: "{spacing.xxs}"

---

## Components

### Buttons
**`button-primary`** — The primary call-to-action, rendered in the brand's deep brown `{colors.primary}` (#271f1f) with white text and an uppercase Brown typeface. On hover, it shifts to `{colors.primary-active}` (#5e5047) for a subtle lift, and when disabled it fades to `{colors.primary-disabled}` (#cccccc) with muted text. The `button-secondary` variant inverts the scheme with a white background, brown text, and a 2px solid border, ideal for ghosted actions like "Learn More" or "Add to Wishlist." Accent buttons (`button-accent-sun`, `button-accent-teal`) use the brand's signature yellow (#ffcf2a) or teal (#00caaa) for promotional or highlight moments, while `button-ghost` stays transparent for low-emphasis inline actions.

### Text Inputs & Forms
**`text-input`** — A clean, minimal input with a white background, 1px hairline border (#dedede), and 8px corner rounding. On focus, the border thickens to 2px and adopts the primary brown for clear visual feedback. Error states swap to `{colors.accent-coral}` (#ff5742) for immediate recognition. The `select-input` and `textarea` follow the same visual language, ensuring a cohesive form experience across the site. All inputs use Inter body text at 16px for readability.

### Navigation
**`nav-bar`** — A fixed-height 72px bar on a white canvas, with nav links set in Brown at 14px with 0.3px letter spacing. The active link is underlined with a 2px primary-brown border, while inactive links sit in `{colors.muted}` (#5e5047). On scroll, the bar shrinks to 64px and gains a subtle shadow for depth. The nav is designed to accommodate a central logo, left-aligned category links, and right-aligned utility icons (search, account, cart).

### Product Cards
**`product-card`** — The core shopping unit, a white card with a 1px soft hairline border and 12px rounding. The card image fills the top with a 1:1 aspect ratio, followed by the product title in `{typography.title-sm}`, price in muted text, and an optional star rating. On hover, the border strengthens and a shadow lifts the card. Badges (`product-card-badge` for "New" in coral, `product-card-badge-sale` for "Sale" in teal) are absolutely positioned over the image for immediate visual hierarchy.

### Hero Section
**`hero-section`** — A full-width banner with a soft background (`{colors.surface-soft}` #f7f7f8) and generous padding. The heading uses `{typography.display-xl}` (48px Brown bold) with a muted subheading beneath. A single primary CTA button anchors the composition. An accent variant (`hero-section-accent`) uses the brand's soft pink (#efe6e1) for seasonal or campaign hero blocks.

### Search
**`search-bar`** — A pill-shaped search input with full rounding, white background, and a 1px hairline border. On focus, the border becomes a 2px primary brown ring. The bar is designed to expand into a full overlay or dropdown on interaction, with recent searches and suggestions.

### Footer
**`footer-section`** — A dark footer anchored in `{colors.primary}` (#271f1f) with white text. Links are set in Inter at 14px and turn yellow (`{colors.accent-sun}`) on hover. The footer includes a newsletter signup with a white input and a yellow submit button, plus accordion-style mobile navigation for brand, support, and social links.

### Accordion
**`accordion-item`** — Used for product details, FAQ, and mobile navigation. Each item has a bottom border, a trigger in `{typography.title-sm}`, and expandable content in `{typography.body-sm}`. The trigger toggles with a simple rotate animation on a chevron icon.

### Tabs
**`tab-active`** and **`tab-inactive`** — Underlined tabs for product detail pages (e.g., "Description," "Ingredients," "How to Use"). The active tab has a 2px primary-brown underline and bold text, while inactive tabs are muted and borderless.

### Color Swatches
**`color-swatch`** — A 32px circular swatch with a 2px hairline border. When selected, the border switches to primary brown for clear selection state. Used extensively in product cards and PDPs for shade selection.

### Quantity Selector
**`quantity-selector`** — A compact horizontal control with minus/plus buttons flanking a numeric display. The container has a 1px hairline border and 8px rounding, while the buttons are transparent with primary-brown text.

### Star Rating
**`star-rating`** — A row of 16px star icons in `{colors.star-rating}` (#ffcf2a), with 2px gaps. Used on product cards and review sections to convey customer satisfaction at a glance.

## Responsive Behavior

| Name | Width | Key Changes |
|---|---|---|
| Mobile | < 744px | Single-column layout; nav collapses to hamburger; product cards stack full-width; hero padding reduces to 32px; footer accordions expand; search bar becomes full-width; typography scales down (display-xl becomes 32px, display-lg becomes 28px) |
| Tablet | 744–1128px | Two-column product grid; nav links remain visible but condensed; hero uses 2/3 + 1/3 split; side-by-side form fields; footer columns stack to 2x2 |
| Desktop | 1128–1440px | Three-column product grid; full nav bar with all links; hero uses full-width imagery; multi-column footer; search bar in nav; product detail page uses 50/50 image + info split |
| Wide | > 1440px | Max-width container at 1440px; four-column product grid; extended hero with parallax; larger typography (display-xl scales to 56px); additional whitespace around sections |

### Touch Targets
- All buttons and interactive elements maintain a minimum 44px height for touch accessibility
- Nav links have 48px tap targets on mobile
- Quantity selector buttons are 40px tall with 32px tap areas
- Color swatches are 44px on mobile for easier selection
- Accordion triggers have 48px touch targets

### Collapsing Strategy
- Primary nav collapses to a hamburger menu at < 744px, with a slide-out drawer
- Product filters collapse to a "Filter" button with a modal overlay on mobile
- Footer sections collapse to accordion panels on mobile, expanding on tap
- Multi-column layouts collapse to single column on mobile
- Hero sections reduce padding and stack content vertically on mobile
- Search bar collapses to an icon on mobile, expanding to full-width on tap

## Known Gaps

- **Agent usage policy:** Historical tokens are unverified. Do not use them as current-site measurements or claim a faithful reconstruction.






- **Historical provenance:** The original capture time and raw evidence are unavailable. Token values have not been freshly verified; the [collection manifest](../../data/manifest.json) records this entry as historical_unverified.

- Hover states for secondary and ghost buttons (exact color shifts not extracted)
- Active/pressed states for text inputs and select inputs
- Error message styling (text color, background, icon placement)
- Focus-visible ring styles and color
- Dark mode color palette (no dark mode detected on live site)
- Sub-brand or collection-specific color palettes (e.g., "Skin Tint," "Limitless Lash")
- Animation durations and easing curves for transitions and hover effects
- Dropdown menu styles for nav (mega menu, flyout)
- Modal and overlay styles (background scrim opacity, close button)
- Tooltip and popover styles
- Loading spinner and skeleton screen styles
- Disabled state for text inputs and select inputs
- Checkbox and radio button styles
- Slider and range input styles
- Breadcrumb navigation styles
- Pagination styles
- Table styles (for ingredient lists or size charts)
- Video player styles (for hero or product demos)
- Cookie consent banner styles
- Accessibility focus indicators beyond basic border changes
- Print stylesheet considerations