PawaPay Brand System Preview
A preview of the design system tokens and components used throughout the application.
Color Palette
Brand Colors
Primary Orange
#FF6B35
Orange Dark
#E5532C
Secondary Green
#00C851
Semantic Colors
Success
Success states
Warning
Warning states
Error
Error states
Info
Informational
Neutral Colors
50
100
200
300
400
500
600
700
800
900
Typography
Heading 1 - Inter Font
Heading 2 - Inter Font
Heading 3 - Inter Font
Heading 4 - Inter Font
Heading 5 - Inter Font
Heading 6 - Inter Font
Large paragraph text. This is how body text appears at a larger size for emphasis or introductory content.
Regular paragraph text. This is the standard body text size used throughout the application. It provides good readability across all device sizes.
Small text for captions, footnotes, or secondary information.
Monospace font: Used for code, IDs, and technical content.
Components
Buttons
Cards
Card Title
This is an example of a card component with consistent styling.
Another Card
Cards provide a clean way to organize content into sections.
Spacing Scale
0.25rem
0.5rem
0.75rem
1rem
1.5rem
2rem
3rem
4rem