HPY Design System
Component library and brand guidelines for hpy.
Last updated: 2025-10-28
Brand Colors
Dark Blue
#2C3845
Yellow
#F6DD1C
White
#FFFFFF
Typography
Font Family: Poppins (geometric, rounded, friendly)
Poppins Bold (700)
Used for headlines and hero text
Poppins SemiBold (600)
Used for subheadings and buttons
Poppins Regular (400)
Used for body text and paragraphs
Cards
Default Card
This is a default card with white background and subtle shadow. Perfect for content blocks.
variant="default"Highlight Card
This is a highlight card with yellow background. Great for featured content. Try hovering!
variant="highlight" hoverableYou are capable of more than you think.
This is an affirmation card with dark blue background. Perfect for displaying daily affirmations.
variant="affirmation"Input Fields
Please enter a valid email address
Component Composition Example
Get Daily Affirmations
Join thousands rebuilding their lives, one day at a time.