Fondly design system
From the Fondly template.
Included with Everything
Colour
Type
- Young Serifdisplay · 400 · SIL Open Font License 1.1
- Commissionerbody · 400, 600, 640, 650, 700 · SIL Open Font License 1.1
- Display95 / 46px · 400Everything from the first jab to the big op.
- H253 / 36px · 400A vet visit they don’t dread.
- H330 / 30px · 400Spread the year’s care into one small monthly.
- Lead22 / 22px · 400Fondly Animal Hospital: unhurried vet care in Madison for dogs, cats, rabbits, birds and reptiles.
- Body19 / 18px · 400Wellness, dentistry, surgery and urgent care, health plans, and appointments you can book in a minute.
- Small14 / 14px · 400Every Fondly vet and nurse is trained in low-stress handling.
- Eyebrow15 / 15px · 600Atwood Open until 9 pm
Components
FondlyHealth plansOur vetsNew clientsPet careBook a visit
Book a visit
Choose Complete
Cat
Atwood Open until 9 pm
Spread the year’s care into one small monthly.
Wellness, dentistry, surgery and urgent care, health plans, and appointments you can book in a minute.
Six vets. Nine of their own pets.
Every Fondly vet and nurse is trained in low-stress handling.
Shape and motion
- sm · 14px
- md · 28px
- lg · 40px
- pill · 9999px
- shadow sm
- shadow md
- out ·
cubic-bezier(.2, .8, .25, 1) - in-out ·
cubic-bezier(.65, 0, .35, 1) - fast · 250ms
- base · 400ms
- slow · 1100ms
Exports
- DESIGN.md
DESIGN.md23 KBEverything - CSS variables
tokens.css5 KBEverything - Tailwind v4
tailwind.css6 KBEverything - shadcn/ui theme
shadcn.css5 KBEverything - Figma variables
figma-variables.json29 KBEverything - Webflow variables
webflow-variables.json9 KBEverything - W3C tokens (JSON)
tokens.json18 KBEverything
Everything unlocks every format of every system in the app and through the MCP server. Ask your agent for get_design_system("fondly") with the MCP server.
- Source
- Fondly template
- Palette
- Sanzo Wada 341: Grenadine Pink, Cossack Green, Deep Slate Olive, Light Glaucous Blue
- Fonts
- Young Serif (OFL 1.1), Commissioner (OFL 1.1)
- Themes
- Light and dark
- Contrast
- Text 12.29:1 · muted 8.1:1
Inside DESIGN.md
- At a glance
- Setup
- Colour
- Typography
- Layout and spacing
- Shape and depth
- Motion
- Components
- Voice and copy
- Do and don’t
- Tokens