Colors
Colors
The Perido UI palette lives in @perido/tailwind-config. Use main for primary UI actions and complementary for secondary emphasis. Contextual palettes follow Tailwind conventions.
Core palettes
| Token | Use case | Notes |
|---|---|---|
main | Primary actions, key UI surfaces | Cool blue hue scale |
complementary | Secondary emphasis, accents | Warm violet hue scale |
perido | Brand-specific moments | Green brand spectrum |
levigo | Product-specific accents | Purple brand spectrum |
Status palettes
| Token | Use case |
|---|---|
success | Positive feedback |
warning | Cautionary actions |
danger | Errors or destructive actions |
info | Informational highlights |
Grey scale
Use grey for backgrounds, borders, and low-emphasis text.
Example usage
<button class="bg-main-500 text-white hover:bg-main-600">Primary</button><button class="bg-complementary-500 text-white hover:bg-complementary-600">Secondary</button><div class="border border-grey-300 text-grey-700">Neutral surface</div>Palette samples
Main
main-100
main-200
main-300
main-400
main-500
main-600
main-700
main-800
main-900
Complementary
complementary-100
complementary-200
complementary-300
complementary-400
complementary-500
complementary-600
complementary-700
complementary-800
complementary-900
Perido
perido-100
perido-200
perido-300
perido-400
perido-500
perido-600
perido-700
perido-800
perido-900
Levigo
levigo-100
levigo-200
levigo-300
levigo-400
levigo-500
levigo-600
levigo-700
levigo-800
levigo-900
Success
success-100
success-200
success-300
success-400
success-500
success-600
success-700
success-800
success-900
Warning
warning-100
warning-200
warning-300
warning-400
warning-500
warning-600
warning-700
warning-800
warning-900
Danger
danger-100
danger-200
danger-300
danger-400
danger-500
danger-600
danger-700
danger-800
danger-900
Info
info-100
info-200
info-300
info-400
info-500
info-600
info-700
info-800
info-900
Grey
grey-100
grey-200
grey-300
grey-400
grey-500
grey-600
grey-700
grey-800
grey-900