Mana Design System
Alle UI-Komponenten und Patterns im Ãœberblick
Typography
Headings
Heading Size 1
Heading Size 2
Heading Size 3
Heading Size 4
Heading Size 5
Heading Size 6
Text Variants
Extra Small Text (xs)
Small Text (sm)
Base Text (base)
Large Text (lg)
Extra Large Text (xl)
2X Large Text (2xl)
Light Weight
Normal Weight
Medium Weight
Semibold Weight
Bold Weight
Colors
Mana Blue
#3B82F6
Text Primary
gray-900 / gray-100
Text Muted
gray-600 / gray-400
Gradient
Blue to Purple
Buttons
Variants
Sizes
States
With Icons
Cards
Flat Card
This is a flat card variant with no shadow or border.
Bordered Card
This card has a border around it.
Elevated Card
This card has a shadow effect for elevation.
Card Padding Options
No Padding
Small Padding
Medium Padding
Large Padding
Layout Components
Grid System
2 Columns
3 Columns
4 Columns
Flex Layouts
Justify Options
Gap Options
Section Components
Hero Section Example
This is how a hero section looks with different options
Image Text Section This component displays content alongside an image. Perfect for feature explanations.
Pricing Components
Starter
Start-Mana
Regeneration
Mana/Tag
Max. Speicher
-
Basic Features
-
Email Support
-
5 Projects
Professional
pro Monat
Start-Mana
Regeneration
Mana/Tag
Max. Speicher
-
Alle KI-Tools
-
Priority Support
-
API-Zugang
-
Team-Features
Enterprise
pro Monat
Start-Mana
Regeneration
Mana/Tag
Max. Speicher
-
All Features
-
Priority Support
-
Unlimited Projects
-
Custom Integration
UI Elements
Badges
Icons
Image Component
Default
Rounded
With Shadow
