— v1.0 · Design system

A warm, modern foundation for premium dental care.

Terracotta meets cream. Editorial type, generous spacing, soft glass cards. These are the tokens and components that compose the Jace Dental Care experience.

01 · Colors

Palette

Warm terracotta as the lead, cream as the canvas, sand as the supporting accent, and deep ink for type.

--primary
Primary
#8C4B2D
--accent
Accent · Clay
#E6C7B2
--background
Background · Cream
#F5F1EC
--ink
Ink
#1B1B1B
--card
Card
#FBF8F4
--muted
Muted
#EEE7DE
primary10%
primary30%
primary60%
02 · Typography

Type scale

Fraunces for editorial display, Inter for clean body text. Tight tracking on display, comfortable line-height on body.

Display · Fraunces 500

Smile, brightly.

H1 · 60 / 64

Modern dental care

H2 · 48 / 52

Designed around your smile

H3 · 32 / 38

Comprehensive services

Lead · Inter 18 / 28

Personalized cosmetic and family dentistry with advanced technology and a patient-first experience.

Body · Inter 16 / 24

We combine modern dentistry with compassionate care to create healthy, confident smiles for every patient.

Eyebrow · 12 / uppercase / 0.25em
— Section label
03 · Spacing & Radius

Rhythm

Generous editorial whitespace and large, soft radii are core to the brand feel.

Spacing scale
4 · 1rem
6 · 1.5rem
10 · 2.5rem
16 · 4rem
24 · 6rem
32 · 8rem
Radius
sm
lg
xl
pill
04 · Shadows & Effects

Depth

Soft, warm-tinted shadows and translucent glass surfaces — never harsh.

Soft

--shadow-soft · primary-tinted

Glass

--shadow-glass · cool neutral

glass utility
05 · Buttons

Actions

Always pill-shaped. Primary is terracotta on cream; cream-on-dark inverts on dark surfaces.

06 · Cards

Surfaces

Large rounded containers carry most of the content. Inverted brown surfaces add rhythm.

Feature card

Neutral card surface with icon chip and large headline.

Featured

Primary card

Used for service sections, pricing highlights and CTAs.

Accent card

Soft sand background — testimonials and supporting content.

Glass card

Floating overlay used on imagery and the hero composition.

07 · Forms

Inputs

Pill or rounded inputs with subtle borders. Labels small, uppercase, lightly tracked.

08 · Accordion

Disclosure

Editorial accordion with thin dividers and large display headings.

09 · Motion

Movement

Subtle and warm: gentle reveals, soft scale-on-hover, no bounce. Curve: cubic-bezier(.2,.7,.2,1).

.reveal

Fade + translateY(24px → 0) over 900ms.

hover:scale-105

Hover scale

300ms transform — used on CTAs and image cards.

Caption reveal
hover me

Caption slide

Used on smile gallery tiles.