CURATED · OPEN · FREE

Periodaisle

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

ConsumerProductWarmCleanMobile UI

↓ Download design system (42 MB)Open in OpenDesign

Visit: https://periodaisle.com

📦 Browse pack contents →

Identity DNA

sustainablebody-positiveperiod-careinclusivewellness

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

Color

#144747Accent

#292623Ink

rgba(41,38,35,0.7)Ink soft

#FFFFFBBG

#E9EEEABG soft

#F5F5F2BG quiet

#D3CEC5Muted

rgba(41,38,35,1.0)Line

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

Typography

transitional-serif · humanist-sans

display72px · 700
heading24px · 700
body14px · 400
caption12px · 400

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.

Spacing

4px

8px

12px

16px

20px

24px

32px

40px

48px

64px

96px

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

Surfaces

sm · 2px

md · 4px

lg · 8px

pill · 50px

1px solid rgba(41,38,35,1.0)

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)

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

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

Motion & Interaction

125msmicro

250mssmall

400msmedium

ease-in-outeasing

Color and box-shadow transitions on hover and focus. · Transform transitions for interactive elements.

Color changes and box-shadow updates. · Visual feedback via state changes.

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.

Voice & Don'ts

Tone Empowering, inclusive, and straightforward.
Headlines Bold, all-caps or large serif headlines that lead with a clear benefit.
CTAs Direct, action-oriented verbs like 'Unlock' or 'Shop'.

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.
Avoid: Medical jargon
Avoid: Overly clinical language
Avoid: Aggressive sales tactics

Inside the pack — real screenshots

Periodaisle — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko