Design System
Zehna's design system documentation with updated visual language
Color Palette
Brand Colors
A
Teal
#3CAC88
A
Light Teal
#99D2B4
A
Pink
#ec4899
Element Colors
♈
Fire
♉
Earth
♊
Air
♋
Water
Neutral Colors
White
#ffffff
Gray 50
#f8fafc
Gray 100
#f1f5f9
Gray 900
#1e293b
Gray 500
#64748b
Typography
Heading 1 - Plus Jakarta Sans
48px / 56px, Bold
Heading 2 - Plus Jakarta Sans
36px / 44px, Bold
Heading 3 - Plus Jakarta Sans
30px / 38px, Bold
Heading 4 - Plus Jakarta Sans
24px / 32px, Bold
Heading 5 - Plus Jakarta Sans
20px / 28px, Medium
Heading 6 - Plus Jakarta Sans
16px / 24px, Medium
Body text - Plus Jakarta Sans. This is a paragraph with regular body text. It demonstrates the base font size and line height used throughout the application.
16px / 24px, Regular
Small text - Plus Jakarta Sans. This is smaller text used for captions, footnotes, and other secondary information.
14px / 20px, Regular
Buttons
Cards
Sample Card
This is a sample card component with a header and content section.
Gradient Card
This is a card with a gradient background.