# Periodaisle · Design system migration spec

> Source: https://periodaisle.com  ·  Curated by OpenDesign  ·  en

> A strong example of a modern, empathetic DTC brand that uses design to normalize a category often treated with clinical coldness.

## 1. Identity DNA

Periodaisle's design system is built on a foundation of warmth and trust, translating its identity as a sustainable period-care brand into every visual decision. The system operates like a well-considered home: its earthy neutrals and deep teal provide the structural palette, while its typographic and spatial rules create the welcoming, uncluttered rooms within.

**One-liner:** A direct-to-consumer sustainable period care brand using warm, earthy tones and inclusive photography.
**Keywords:** sustainable · body-positive · period-care · inclusive · wellness
**Analogy:** A warm, earthy wellness brand that feels like a friend.

## 2. Color

The color system is defined by a grounded, earthy palette of warm off-whites, deep browns, and a signature teal accent. This combination avoids the clinical coldness often associated with the category, instead establishing a trustworthy and natural visual foundation.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFB` | main background |
| `--bg-soft` | `#E9EEEA` | card background |
| `--bg-quiet` | `#F5F5F2` | quiet area |
| `--ink` | `#292623` | body text |
| `--ink-soft` | `rgba(41,38,35,0.7)` | secondary text |
| `--muted` | `#D3CEC5` | placeholder |
| `--muted-soft` | `rgba(255,255,251,0.6)` | weak hint |
| `--accent` | `#144747` | single accent |
| `--line` | `rgba(41,38,35,1.0)` | divider |

**Color principle:** Earthy neutrals and deep teal provide a grounded, trustworthy foundation.

Every hue is chosen for its muted, approachable quality, rejecting high-saturation tones in favor of a palette that feels organic and human.

## 3. Typography

The typographic voice balances clean readability with moments of quiet elegance. A humanist sans-serif handles the body text with clarity, while a transitional serif is reserved for large display moments, adding a layer of considered sophistication to headlines and hero sections.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 72px | 1.0 | 700 | -1px | Large hero headline |
| heading | 24px | 1.2 | 700 | 0 | Section headings |
| body | 14px | 1.2 | 400 | 0 | Primary body text |
| caption | 12px | 1.2 | 400 | 0.36px | Small captions and labels |

**Type rules:**
- 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.

## 4. Spacing

Spacing follows a disciplined 4px grid, creating a consistent and predictable rhythm across the interface.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 20 / 24 / 32 / 40 / 48 / 64 / 96 px
- **Rhythm:** Standard 4px grid with specific padding overrides for buttons and inputs.

## 5. Surfaces

Depth is communicated through subtle, tactile details rather than overt layering. Borders are thin and dark, while shadows are used sparingly as inset effects, giving components like buttons and inputs a grounded, physical presence on the warm off-white surfaces.

- **Radius:** sm 2px · md 4px · lg 8px · pill 50px
- **Shadows:**
  - 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)

## 6. Layout

The layout skeleton is clean and spacious, built on a full-width hero that anchors the page. Content blocks are stacked below in a clear hierarchy, leading into a well-organized product grid that prioritizes imagery and straightforward categorization.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

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

## 7. Motion & Interaction

Motion in this system is functional and discreet, designed to provide clear feedback without demanding attention. Transitions are fast and understated, using color and shadow shifts to confirm interaction states with precision.

- **Durations:** micro 125ms · small 250ms · medium 400ms
- **Easing:** `ease-in-out`
- **Patterns:**
  - Color and box-shadow transitions on hover and focus.
  - Transform transitions for interactive elements.

- **Hover:** Color changes and box-shadow updates.
- **Click:** Visual feedback via state changes.
- **Transition:** 0.125s ease-in-out for colors, 0.25s ease-out for transforms.
- **Keyboard:** Standard focus states using inset box-shadows.

## 8. Voice & Don'ts

The editorial voice is empowering, inclusive, and straightforward. It uses bold, clear headlines to lead with benefits and direct, action-oriented calls to action, while consciously avoiding medical jargon, clinical language, and aggressive sales tactics.

- **Tone:** Empowering, inclusive, and straightforward.
- **Headline style:** Bold, all-caps or large serif headlines that lead with a clear benefit.
- **CTA style:** Direct, action-oriented verbs like 'Unlock' or 'Shop'.
- **Avoid:** Medical jargon / Overly clinical language / Aggressive sales tactics

### Don'ts
- ❌ 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.

What the system deliberately avoids is as defining as what it includes: no neon colors, no geometric sterility, and no complex, clinical white space.

## System Prompt (paste into AI tool)

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