Rejuvenate Wellness

Design System

Tokens and core components for the Rejuvenate Wellness site. Mirrors the Faith Medical design language — monochrome OKLch palette, Playfair Display + Montserrat type pair, light-weight luxury typography.

Brand

Logo

Foundations

Color Palette

bg-background

--background

oklch(1 0 0)

bg-foreground

--foreground

oklch(0.145 0 0)

bg-primary

--primary

oklch(0.205 0 0)

bg-primary-foreground

--primary-foreground

oklch(0.985 0 0)

bg-secondary

--secondary

oklch(0.97 0 0)

bg-secondary-foreground

--secondary-foreground

oklch(0.205 0 0)

bg-muted

--muted

oklch(0.97 0 0)

bg-muted-foreground

--muted-foreground

oklch(0.556 0 0)

bg-accent

--accent

oklch(0.97 0 0)

bg-accent-foreground

--accent-foreground

oklch(0.205 0 0)

bg-card

--card

oklch(1 0 0)

bg-card-foreground

--card-foreground

oklch(0.145 0 0)

bg-popover

--popover

oklch(1 0 0)

bg-popover-foreground

--popover-foreground

oklch(0.145 0 0)

bg-destructive

--destructive

oklch(0.577 0.245 27.325)

bg-border

--border

oklch(0.922 0 0)

bg-input

--input

oklch(0.922 0 0)

bg-ring

--ring

oklch(0.708 0 0)

Foundations

Typography

H1 / Display

Playfair Display · Light · 72px

A New You

H2 / Section

Playfair Display · Light · 48px

Premium Medical Aesthetics

H3 / Subsection

Playfair Display · Regular · 30px

Advanced Aesthetics

H4 / Card title

Playfair Display · Regular · 24px

Laser Hair Removal

Playfair Display · Regular · 20px

Nurse Practitioner

H6 / Eyebrow

Montserrat · Medium · 14px · tracking-widest · uppercase

Our Services

Body / Large

Montserrat · Light · 18px

Experience premium medical aesthetics with a personal, compassionate touch.

Body

Montserrat · Regular · 16px

Our mission is to provide innovative, professional care to our community and treat every patient like family.

Small

Montserrat · Regular · 14px

Born and raised in Carroll County.

Caption / Label

Montserrat · Regular · 12px · tracking-widest · uppercase

01 · Featured Treatment

Foundations

Spacing Scale

1 · 0.25rem

2 · 0.5rem

3 · 0.75rem

4 · 1rem

6 · 1.5rem

8 · 2rem

10 · 2.5rem

12 · 3rem

16 · 4rem

20 · 5rem

24 · 6rem

32 · 8rem

Foundations

Border Radius

rounded-sm

calc(var(--radius) - 4px)

rounded-md

calc(var(--radius) - 2px)

rounded-lg

var(--radius) · 0.625rem

rounded-xl

calc(var(--radius) + 4px)

rounded-2xl

1rem

rounded-full

9999px

Foundations

Shadows

shadow-xs

shadow-sm

shadow-md

shadow-lg

shadow-xl

shadow-2xl

Components

Buttons

default

secondary

outline

ghost

link

destructive

Components

Cards

Laser Hair Removal

Lumenis Splendor X with chilling machine for a virtually pain-free experience.

Featured treatment — precision targeting, minimal discomfort, and fast results for all skin types.

Microneedling

Collagen-inducing treatment for texture, tone, and fine lines.

Botox & Fillers

Natural, stunning results tailored to your unique features.

Components

Form Elements

Patterns

Section Header

Our Services

Premium Medical Aesthetics

The signature Faith-derived pattern: a small uppercase eyebrow in muted tone with wide tracking, above a large, light-weight serif headline.

Usage

<SectionHeader eyebrow="Our Services" title="Premium Medical Aesthetics" />