---
name: Periodaisle
description: "A strong example of a modern, empathetic DTC brand that uses design to normalize a category often treated with clinical coldness."
version: alpha

colors:
  background: "#FFFFFB"
  primary: "#292623"
  secondary: "rgba(41,38,35,0.7)"
  tertiary: "#144747"
  neutral: "#D3CEC5"
  bg-soft: "#E9EEEA"
  bg-quiet: "#F5F5F2"
  muted-soft: "rgba(255,255,251,0.6)"
  line: "rgba(41,38,35,1.0)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 72px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-1px"
  heading:
    fontFamily: humanist-sans
    fontSize: 24px
    lineHeight: 1.2
    fontWeight: 700
    letterSpacing: "0"
  body:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "0"
  caption:
    fontFamily: humanist-sans
    fontSize: 12px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "0.36px"

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

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 20px
  2xl: 24px
  3xl: 32px

---

## Overview

A direct-to-consumer sustainable period care brand using warm, earthy tones and inclusive photography.

*A warm, earthy wellness brand that feels like a friend.*

## Colors

Earthy neutrals and deep teal provide a grounded, trustworthy foundation.

- **Background (`#FFFFFB`)** — uses `bg` token
- **Primary text (`#292623`)** — uses `ink` token
- **Secondary text (`rgba(41,38,35,0.7)`)** — uses `ink-soft` token
- **Accent (`#144747`)** — uses `accent` token
- **Muted (`#D3CEC5`)** — uses `muted` token
- **Borders (`rgba(41,38,35,1.0)`)** — uses `line` token

## Typography

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

- Use uppercase for navigation and labels.
- Use humanist sans-serif for body text for readability.
- Use transitional serif for large display typography to add elegance.

## Layout

Full-width hero with stacked content blocks and a clean product grid.

*Rhythm:* Standard 4px grid with specific padding overrides for buttons and inputs.

## Elevation & Depth

- 0px 0px 0px 2px inset rgb(20, 71, 71)
- 0px 0px 0px 2px inset rgb(255, 255, 251)
- 0px 1px 0px 0px rgb(255, 255, 255)
- Borders: 1px solid rgba(41,38,35,1.0)

## Shapes

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

## Components

- **button:** Pill-shaped and rectangular with inset box-shadows for a tactile feel.
- **card:** Clean, unbordered cards with subtle background color shifts.
- **chip:** Simple text labels with a teal background highlight.
- **input:** Simple rectangular inputs with a thin border and rounded corners.
- **hero:** Large, immersive photography with a strong serif headline.

## Do's and Don'ts

**Don't:**
- Don't use high-saturation neon colors — screenshot shows earthy, muted tones like #E9EEEA and #D3CEC5.
- Don't use purely geometric sans-serif fonts — screenshot shows a humanist sans-serif (Montserrat) for body text.
- Don't make the UI overly complex with many layers — screenshot shows a clean, flat hierarchy.
- Don't use sharp, aggressive corners on primary elements — screenshot shows rounded rectangles and pill shapes.
- Don't use stark, clinical white backgrounds everywhere — screenshot shows a warm off-white (#FFFFFB).
- Don't use a purely monochrome palette — screenshot uses a deep teal accent (#144747) for visual interest.

---

## System Prompt (paste into AI agent)

```
Aisle is an inclusive, sustainable period care brand using a warm, earthy color palette (off-white #FFFFFB, deep teal #144747, and various grays/browns). The design relies on a humanist-sans body font (Montserrat) and a transitional-serif for display typography. Key critical don'ts: avoid neon colors, don't use purely geometric fonts, and don't create a clinical or overly complex UI. The layout is clean and spacious, focusing on inclusive photography and straightforward product education.
```