System Theme

A comprehensive guide to the Pawpaths design system, featuring organic color palettes, material textures, and typography standards.

Color Palette

#
Color Name
Variable
Preview
Hex Code
Usage
01
Pawpath Brown
--brand-color-01
Primary Brand
02
Pawpath Cream
--brand-color-02
Secondary Brand
03
Pawpath Amber
--brand-color-03
Accent
04
Pawpath Yellow
--brand-color-04
Warning / Highlight
05
Taupe
--brand-secondary
UI Element
Message & Warning Colors
06
Crimson
--system-color-01
Error State
07
Emerald
--system-color-02
Success State
08
Azure
--system-color-03
Info State
Surfaces & Backgrounds
09
Ivory
--surface-ivory
Warm & High-end
10
Halo
--surface-warm
Warm Background
11
Glacier
--surface-cool
Cool Background
12
Mint
--surface-fresh
Fresh Background
Premium Light Surfaces
13
Pearl White
--surface-pearl
Ultra-pure Base
14
Silk Cream
--surface-silk
Sophisticated Comfort
15
Peach Cream
--surface-peach
Warm & Friendly
16
Mint Whisper
--surface-mint
Fresh & Organic
17
Sky Light
--surface-sky
Open & Spacious

Materials & Depth

Glass Standard

bg-white/60 backdrop-blur-xl

Glass Warm

bg-surface-warm/80 backdrop-blur-md

Glass Dark

bg-brand-text-02/90 backdrop-blur-xl

Gradients & Borders

#
Gradient Name
Variable
Fill
Border
Full Preview
01
Brand Soft
--gradient-brand-soft
02
Surface Light
--gradient-surface-light
03
Card Warm
--gradient-card-warm
04
Card Cool
--gradient-card-cool
05
Card Fresh
--gradient-card-fresh
06
Card Neutral
--gradient-card-neutral
07
Stats Blue
--gradient-stats-blue
08
Stats Orange
--gradient-stats-orange
09
Stats Purple
--gradient-stats-purple
10
Stats Emerald
--gradient-stats-emerald

Application Gradients

Footer Section

bg-gradient-to-r from-brand-color-04 to-brand-color-03

DirectionTo Right (90deg)
Start Color
--brand-color-04
End Color
--brand-color-03
Transparency100% (Opaque)

Header Bar

bg-surface-warm (Solid)

TypeSolid Color
Fill Color
--surface-warm
Border Bottomborder-white/50
UsageSticky Top Nav

Typography

Aa

Inter

sans-serif

A typeface carefully crafted & designed for computer screens. Featuring a tall x-height to aid in readability of mixed-case and lower-case text.

WeightsRegular (400) — Black (900)
Character SetAa Bb Cc Dd Ee Ff Gg Hh Ii Jj 123
HeadingsFont: Inter

Heading 1

28px•Bold (700)•36px Line Height

Heading 2

24px•SemiBold (600)•32px Line Height

Heading 3

20px•SemiBold (600)•28px Line Height

Heading 4

18px•SemiBold (600)•28px Line Height
Heading 5
16px•SemiBold (600)•24px Line Height
Heading 6
14px•SemiBold (600)•20px Line Height
BodyFont: Inter

Large body text for introductions.

text-lg (18px)•Regular (400)

Standard body text used for most content. Clean, readable, and well-spaced.

text-base (16px)•Regular (400)

Small text for secondary information and captions.

text-sm (14px)•Regular (400)

Extra small text for metadata, timestamps, or hints.

text-xs (12px)•Regular (400)

Tiny Label

text-[10px]•Bold (700)