Internal Reference

Brand Guidelines

Typography system, font pairings, color palette, and usage examples for Atlanta Foot & Ankle Center.

01 — Font Families

Font Family

Playfair Display

Tailwind Class

.font-display

Used for headlines, hero text, doctor names, section titles, and pull quotes. Elegant serif with editorial feel.

Regular 400

The quick brown fox

Medium 500

The quick brown fox

SemiBold 600

The quick brown fox

Bold 700

The quick brown fox

ExtraBold 800

The quick brown fox

Black 900

The quick brown fox

Bold Italic

The quick brown fox

Full Alphabet

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9 ! @ # $ % & * ( ) — " " ' '

Font Family

Space Grotesk

Tailwind Class

.font-body

Used for body copy, descriptions, button labels, form fields, and general UI text. Modern geometric sans-serif.

Light 300

The quick brown fox

Regular 400

The quick brown fox

Medium 500

The quick brown fox

SemiBold 600

The quick brown fox

Bold 700

The quick brown fox

Full Alphabet

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9 ! @ # $ % & * ( ) — " " ' '

Font Family

Syne

Tailwind Class

.font-accent

Used for labels, eyebrows, uppercase tracking text, navigation, badge text, and small caps UI elements.

Regular 400

The quick brown fox

Medium 500

The quick brown fox

SemiBold 600

The quick brown fox

Bold 700

The quick brown fox

ExtraBold 800

The quick brown fox

Full Alphabet

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9 ! @ # $ % & * ( ) — " " ' '

02 — Typography in Use

Page Eyebrow

font-accent text-xs uppercase tracking-[0.25em] text-teal

Atlanta Foot & Ankle Center

Hero Headline

font-display text-6xl font-bold text-foreground leading-tight

Your Feet. Our Passion.

Hero Italic Accent

font-display text-6xl font-bold italic gradient-text leading-tight

Our Passion.

Section Title

font-display text-4xl font-bold text-foreground

A Legacy Reinvented.

Section Subtitle (Italic)

font-display text-4xl font-bold italic gradient-text

Reinvented.

Pull Quote

font-display text-2xl font-bold italic text-foreground leading-snug

"Best Surgeons. Best Techniques. Best Experience."

Body Copy

font-body text-base text-muted-foreground leading-relaxed

Three decades of Atlanta expertise. Two board-certified podiatrists. One practice, elevated.

Body Emphasis

font-body text-base text-foreground font-semibold

Dr. Daalia Jones

Button Label

font-body font-semibold text-base

Book Your Visit

Badge / Label

font-body text-xs uppercase tracking-[0.18em]

Now Accepting New Patients

Stat Number

font-display text-4xl font-bold gradient-text

35+

Stat Label

font-body text-sm text-muted-foreground

Years Serving Atlanta

Card Eyebrow

font-accent font-bold text-xs uppercase tracking-[0.2em] text-muted-foreground

Areas of Expertise

Small Caption

font-accent text-[10px] uppercase tracking-[0.2em] text-muted-foreground

Scroll

03 — Color Palette

Coral
hsl(24 100% 66%)

Primary accents, CTAs, icons

Coral Red
hsl(358 100% 67%)

Gradient midpoint

Deep Pink
hsl(340 58% 53%)

Doctor accents, tags

Rich Purple
hsl(300 50% 36%)

Gradient end, dark accents

Teal
hsl(168 100% 37%)

Success states, highlights

Foreground
hsl(0 0% 6%)

Primary text, dark backgrounds

Muted
hsl(350 20% 95%)

Section backgrounds, subtle fills

Border
hsl(350 15% 88%)

Dividers, card borders

Brand Gradient
linear-gradient(135deg, coral → coral-red → deep-pink → rich-purple)

Used on primary buttons, gradient text, hero accents, stat numbers

04 — Pairing Example

Atlanta Foot & Ankle Center

Expert Care for
Every Step.

Two board-certified podiatrists delivering compassionate, world-class foot and ankle care to Atlanta and beyond.

Book Your Visit
Meet the Doctors