Design System
Visual guidelines and component library for Hoofs & Paws
Colors
Primary Blue
Blue 600
#0284c7
Primary actions, links, CTAs
Blue 500
#0ea5e9
Hover states
Blue 700
#0369a1
Active states
Status Colors
Green
#16a34a
Success, active, completed
Yellow
#eab308
Warning, pending
Red
#dc2626
Error, cancelled, declined
Purple
#9333ea
In progress
Grayscale
Gray 900
#111827
Gray 700
#374151
Gray 500
#6b7280
Gray 50
#f9fafb
Typography
Heading 1
text-5xl font-extrabold
Page titles, hero sections
Heading 2
text-4xl font-bold
Section titles
Heading 3
text-3xl font-bold
Subsection titles
Heading 4
text-2xl font-semibold
Body Large - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
text-lg
Body - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
text-base
Small - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
text-sm
Extra Small - Lorem ipsum dolor sit amet
text-xs
Buttons
Primary Buttons
Secondary Buttons
Danger Buttons
Icon Buttons
Form Elements
This field is required
Cards
Basic Card
Simple card with shadow and padding
Bordered Card
Card with border instead of shadow
Colored Card
Card with colored background
Badges & Status
Alerts & Notifications
Success! Your action was completed.
Error! Something went wrong.
Warning! Please review this information.
Info: Here's some helpful information.
Spacing Scale
1 (0.25rem / 4px)
p-1, m-1, gap-1
2 (0.5rem / 8px)
p-2, m-2, gap-2
4 (1rem / 16px)
p-4, m-4, gap-4
6 (1.5rem / 24px)
p-6, m-6, gap-6
8 (2rem / 32px)
p-8, m-8, gap-8
Shadows
Shadow SM
shadow-sm
Shadow
shadow
Shadow LG
shadow-lg
Icons
We use Heroicons (SVG) and custom PNG icons from the /icons directory.
Add
Close
Search
Back