SEF Beauty foundation

Design system preview

A calm, accessible visual language for thoughtful beauty commerce: warm surfaces, confident pink accents and generous rhythm.

Color tokens

Pink is reserved for emphasis and actions; dark pink provides readable text contrast.

Primary pink

var(--sef-primary-pink)

Dark pink

var(--sef-dark-pink)

Light blush

var(--sef-light-blush)

Soft pink

var(--sef-soft-pink)

Primary black

var(--sef-primary-black)

Secondary text

var(--sef-secondary-text)

Background gray

var(--sef-background-gray)

Success

var(--sef-success-green)

Keyboard focus remains visible on every interactive control.

Success: your routine is ready.

Note: some products may have limited stock.

Error: please review the highlighted field.

Common controls share labels, states, focus behavior and responsive hit areas.

New In stock Low stock Unavailable

We will never share your email.

Routine type

Send me routine updates

Standard delivery

Saved

Your preferences were saved successfully.

Loading your collection…

Your saved routines will appear here when you create one.

4px base spacing

12px control radius

24px card radius

1280px content width