Paws & Paths
V0.0.1
Typography
display Plus Jakarta Sans
The quick brown fox
Size: 44px / Weight: 800 / Lead: 52px
headline-lg Plus Jakarta Sans
The quick brown fox
Size: 32px / Weight: 700 / Lead: 40px
headline-md Plus Jakarta Sans
The quick brown fox
Size: 24px / Weight: 700 / Lead: 32px
title-lg Plus Jakarta Sans
The quick brown fox
Size: 20px / Weight: 600 / Lead: 28px
body-lg Plus Jakarta Sans
The quick brown fox
Size: 18px / Weight: 400 / Lead: 28px
body-md Plus Jakarta Sans
The quick brown fox
Size: 16px / Weight: 400 / Lead: 24px
label-md Plus Jakarta Sans
The quick brown fox
Size: 14px / Weight: 600 / Lead: 20px
label-sm Plus Jakarta Sans
The quick brown fox
Size: 12px / Weight: 500 / Lead: 16px
Components
button-primary
Preview
backgroundColor #855300 textColor #ffffff typography 14px Plus Jakarta Sans rounded 1rem padding 24px
button-primary-hover
Preview
backgroundColor #f59e0b textColor #613b00
button-secondary
Preview
backgroundColor #0058be textColor #ffffff typography 14px Plus Jakarta Sans rounded 1rem padding 24px
button-secondary-hover
Preview
backgroundColor #2170e4 textColor #fefcff
card-profile
Preview
backgroundColor #ffffff rounded 1.5rem padding 24px
card-walk-stat
Preview
backgroundColor #2170e4 textColor #fefcff rounded 0.75rem padding 12px
input-field
Preview
backgroundColor #f0f3ff textColor #151c27 typography 16px Plus Jakarta Sans rounded 0.5rem padding 12px
list-item-walker
Preview
backgroundColor transparent padding 12px rounded 0.75rem
list-item-walker-hover
Preview
backgroundColor #e2e8f8
badge-status
Preview
backgroundColor #1abdff textColor #004966 typography 12px Plus Jakarta Sans rounded 9999px padding 4px
Spacing
base
8px
xs
4px
sm
12px
md
24px
lg
40px
xl
64px
gutter
16px
margin
24px
Rounding
sm
0.25rem
DEFAULT
0.5rem
md
0.75rem
lg
1rem
xl
1.5rem
full
9999px