All about period
The foundation layer for the website redesign. Clean, editorial, and easy on the eyes — magenta works as an accent against a mostly-white canvas, never a flood. Tokens for colour, type, and spacing, plus the core component kit.
Two brand colours carry the identity; neutrals carry the page. The discipline: white and near-white do 80–90% of the work, magenta marks the moments that matter, purple supports.
Poetsen One brings the brand's confident, rounded personality to headlines — used sparingly so it stays special. Inter handles everything readable: body, UI, captions. Clean geometry, strong on screen at every size.
When women feel protected and at ease, they move through life with greater confidence. That's the promise behind every Jeunesse pad.
Each pad is built with secure leak guards, breathable materials, and an integrated anion strip designed to help reduce odour and support a fresher, more hygienic experience throughout your cycle.
Available nationwide in drugstores, convenience stores, and supermarkets, as well as online.
All about period
| Token | Face / Weight | Size | Line | Use |
|---|---|---|---|---|
| display-1 | Poetsen One | 40–68px | 1.05 | Hero headline |
| display-2 | Poetsen One | 30–46px | 1.1 | Section titles |
| display-3 | Poetsen One | 22–30px | 1.15 | Card / feature titles |
| lede | Inter 400 | 21px | 1.55 | Intro paragraphs |
| body | Inter 400 | 16px | 1.7 | Default copy |
| small | Inter 400 | 14px | 1.65 | Secondary copy |
| caption | Inter 600 | 12px | 1.4 | Eyebrows, labels, meta |
An 8px base with a 1.5 rhythm. Generous whitespace is doing the heavy lifting for the "clean, uncluttered" feel — when in doubt, add a step, not subtract one.
From the brand book's voice — these translate the words into how the tokens get used.
Magenta earns attention because it's rare. Flood the page and it stops meaning anything.
Rounded display type and soft surfaces keep an intimate category feeling human, not medical.
Whitespace is the premium signal. Let elements breathe rather than filling every gap.
Strong contrast for text, generous line height, one idea per block. Navigation should feel obvious.
The core kit, built entirely from the tokens above. Soft surfaces, pill shapes, magenta reserved for action and emphasis. Every interactive element keeps a visible keyboard focus ring.
Primary magenta, soft shadow, reserved for the main action — one per view. Secondary outlined for alternates. Ghost for tertiary links. On magenta surfaces the button flips to white. Hover lifts 2px; focus shows a purple ring.
Active state uses a 2px magenta underline; hover shifts link colour to magenta. The "Where to buy" action sits in the bar as the primary CTA so retail access is always one tap away.
Enjoy the day without worries.
View product →Wake up to no stains, even on heavy nights.
View product →Stay fresh and dry all day, every day.
View product →Thumbnails carry the variant colour system from the brand book — each product line keeps its own colour, used only here against the white tile so the grid stays calm. Hover lifts the card with a soft magenta-tinted shadow.
Helps reduce odour and supports a fresher, more hygienic experience.
Stays confidently in place to support daily movement without compromise.
Advanced absorbency with breathable materials for everyday ease.
Quiet white cards with a soft magenta icon dot. Icons in production would be simple line glyphs; the dot keeps colour minimal while still anchoring each benefit.
For the knowledge hub the client referenced (Betadine-style). Category eyebrow in magenta, generous title, light meta line. Cover image replaces the gradient in production.
Solid for status, soft and purple tints for product attributes, outline for neutral filters. Used sparingly to label, never to decorate.
Anions are negatively charged ions found in nature — near mountains, beaches, and waterfalls. They're associated with feeling energised and refreshed.
Change your pad every 3–4 hours before it gets full. Regular changes help you stay hygienic and comfortable throughout the day.
It's "zhoe-ness ah-nion" — a French word meaning young.
Hairline dividers keep it light; the magenta icon rotates from plus to cross on open. One panel open shown for reference. Each trigger is a real button with aria-expanded and a visible focus ring.
Inputs sit quiet with a hairline border that turns magenta on focus. The newsletter pairs a pill input with the primary button — matching the footer signup on the live site.
Jeunesse Anion — Design System v1.0 · Tokens (colour, type, spacing) and core component kit, built on the 2026 Brand Book. Display face Poetsen One, body Inter — both Google Fonts, web-ready.