01/07
Brand Guidelines

The Skin
Journey

The complete platform for skincare professionals

Clinical Precision

Professional tools for treatment documentation and client care

Personal Touch

Every client's unique skin journey, beautifully managed

Transformation

Tracking progress from first visit to radiant results

Scroll to explore
01 / Color Palette

Skin-Inspired
Harmony

A palette inspired by natural skin tones, earthy warmth, and the subtle blush of healthy, radiant skin.

Primary

Nude Rose#D4A5A5
Rose Light#E8CECE
Rose Dark#B88A8A

Secondary

Warm Sand#E5D4C0
Soft Blush#F2E2DD
Blush Light#FBF5F3

Earth Accents

Clay#9B7E6B
Terracotta#C4846C
Sage#A3B18A

Neutrals

Porcelain#FAF7F5
Ivory#F5F0EB
Espresso#4A3F35
Light Mode

Porcelain backgrounds with Espresso text

Buttons

Nude Rose for primary actions

Success

Sage for positive states

02 / Typography

Elegant
Expression

A refined pairing of editorial elegance and modern clarity.

DisplayFraunces
Skin JourneyBeauty in every detail

Soft, rounded serif with warmth and substance — feminine yet bold

Light 300Regular 400Medium 500SemiBold 600Bold 700
BodyDM Sans
The complete platform for skincare professionals. Manage appointments, track client journeys, and grow your practice with tools designed specifically for skin specialists.

Clean, geometric sans-serif with excellent readability

Light 300Regular 400Medium 500SemiBold 600

Type Scale

Heroclamp(3rem, 8vw, 6rem)Aa
H1clamp(2.5rem, 5vw, 4rem)Aa
H2clamp(2rem, 4vw, 3rem)Aa
H3clamp(1.5rem, 3vw, 2rem)Aa
Body1rem (16px)Aa
Small0.875rem (14px)Aa
03 / Spacing

Breathing
Room

Generous whitespace reflects the calm, spa-like atmosphere of professional skincare.

Spacing Scale

--space-xs0.25rem (4px)
--space-sm0.5rem (8px)
--space-md1rem (16px)
--space-lg1.5rem (24px)
--space-xl2rem (32px)
--space-2xl3rem (48px)
--space-3xl4rem (64px)
--space-4xl6rem (96px)

Border Radius

--radius-sm8px
--radius-md12px
--radius-lg16px
--radius-xl24px
--radius-2xl32px
--radius-full9999px

Container Widths

sm: 640px
md: 768px
lg: 1024px
xl: 1280px
04 / Components

Refined
Elements

Every component reflects the blend of clinical precision and personal warmth.

Buttons

Inputs

Cards

90 min
Hydrating Facial

Deep moisture treatment for dry, dehydrated skin

€85

Tags & Badges

Skin Type: DrySensitiveNew Client3 visits

Alerts

Appointment confirmed
Allergy noted: Retinol

Progress

Treatment 4 of 6
05 / Visual Effects

Soft
Atmosphere

Subtle textures and organic shapes create an immersive, spa-like digital environment.

Grain Texture

Subtle noise overlay at 3% opacity adds organic warmth

Ambient Glows

Soft, floating color orbs with blur and low opacity

Organic Shapes

Morphing blob shapes with smooth radius transitions

Glass Effect

Glass Card

Frosted glass with backdrop blur and subtle border

Gradient Mesh

Layered radial gradients for depth and warmth

Warm Shadows

Elevated

Shadows tinted with warm espresso tones

06 / Motion

Gentle
Flow

Animations that feel organic, calming, and never jarring — like the flow of skincare routines.

Entrance Animation

opacity: 0 → 1translateY: 40px → 0duration: 1s

Hover States

scale: 1 → 1.02shadow: growduration: 300ms

Breathing

scale: 1 → 1.02 → 1opacity: 0.8 → 1duration: 4s infinite

Float

translateY: 0 → -10pxduration: 6s infiniteease: ease-in-out

Stagger Delays

delay: index × 0.1s

Easing

Expo Outcubic-bezier(0.16, 1, 0.3, 1)
Soft Outcubic-bezier(0.25, 0.46, 0.45, 0.94)
Soft In-Outcubic-bezier(0.45, 0, 0.55, 1)
"Every interaction should feel like a gentle touch — intentional, caring, and never rushed."
Merk en richtlijnen | SkinStack