Design System
Style Guide
A comprehensive guide to Kyros's design language, components, and visual elements.
Typography
Hero Heading
The quick brown fox
Section Heading
The quick brown fox jumps
H3 Heading
The quick brown fox jumps over
H4 Heading
The quick brown fox jumps over the lazy dog
Paragraph 01
The quick brown fox jumps over the lazy dog. This is a sample paragraph to demonstrate the primary body text style used throughout the application.
Paragraph 02
The quick brown fox jumps over the lazy dog. This is a smaller paragraph style used for secondary text, captions, and supporting information.
Colors
Gradients
Cards
Card Title
This is a standard card component used throughout the application for content containers.
Popular Card
This card variant is used to highlight featured or popular content items.
Badges & Tags
Default Badge
Purple TagBlue TagSpacing
We use a consistent 4px base unit for spacing:
xs0.25rem (4px)
sm0.5rem (8px)
md1rem (16px)
lg1.5rem (24px)
xl2rem (32px)
2xl3rem (48px)
3xl4rem (64px)
4xl5rem (80px)