Brand Colors
Our carefully crafted color palette for consistent branding
Primary Colors
#2368FF
#00B7C3
#6C63FF
#7C3AED
Accent Colors
#10B981
#F59E0B
#DC2626
Typography Scale
Consistent text hierarchy for all content
Heading 1 - 3rem
Heading 2 - 2.25rem
Heading 3 - 1.875rem
Heading 4 - 1.5rem
Heading 5 - 1.25rem
Heading 6 - 1rem
Body text - Regular paragraph with proper line height and spacing for optimal readability.
Secondary text - Used for supporting information and descriptions.
Card Components
Flexible containers for content organization
Standard Card
Basic card with hover effects and clean styling for general content.
Accent Card
Card with colored top border accent for visual hierarchy and categorization.
Featured Card
Purple accent for premium or featured content that needs extra attention.
Badge Components
Status indicators and labels
Status Badges
Category Badges
Data Visualization
Showcase key metrics and statistics
Metric Cards (Light Theme)
Feature Lists
Organized content with icons
Standard Feature List
- Real-time synchronization
- Advanced analytics dashboard
- 24/7 customer support
- API access included
- Unlimited team members
Premium Features
- Priority support
- Custom integrations
- Enhanced security
- Early access to features
- SLA guarantee
Dark Theme Components
Perfect for developer portals and technical content
Stats Grid
Dark Cards
Azure MCP
Enterprise Azure resource management with deployment orchestration.
ActiveAI Toolkit
AI agent development with tracing and evaluation framework.
Tier 1GitHub MCP
Pull request management and automated merge workflows.
MCPAgent List
Breadcrumb Navigation
Grid System
Responsive grid layouts for any content
2 Column Grid
Column 1
Column 2
3 Column Grid
Column 1
Column 2
Column 3
4 Column Grid
Col 1
Col 2
Col 3
Col 4
Pricing Tiers
Complete pricing card example
Starter
Perfect for small teams
- 5 team members
- 10GB storage
- Email support
- Basic features
Professional
For growing businesses
- 20 team members
- 100GB storage
- Priority support
- Advanced features
- API access
Enterprise
For large organizations
- Unlimited members
- Unlimited storage
- 24/7 support
- All features
- Custom integration
- SLA guarantee
Utility Classes
Quick styling helpers
Spacing Utilities
Text Alignment
Animations
← This icon floats!