COLOR SYSTEM

Brand Colors

Our carefully crafted color palette for consistent branding

Primary Colors

Photon Blue
#2368FF

Quantum Teal
#00B7C3

Quantum Violet
#6C63FF

Deep Purple
#7C3AED

Accent Colors

Success Green
#10B981

Soft Gold
#F59E0B

Error Red
#DC2626

/* Use in your CSS */ color: var(--photon-blue); background: var(--quantum-teal); border-color: var(--success-green);

TYPOGRAPHY

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.

BUTTONS

Button Styles

Interactive elements for user actions

Primary Buttons

<button class="btn btn-primary"> <i class="fas fa-rocket"></i> Primary Action </button>

Secondary Buttons

<button class="btn btn-secondary"> <i class="fas fa-info-circle"></i> Learn More </button>

CARDS

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.

<div class="card"> <h3>Card Title</h3> <p>Card content...</p> </div> <div class="card accent-top green-card">  </div>

BADGES

Badge Components

Status indicators and labels

Status Badges

Active In Development Planned

Category Badges

Tier 1 MCP General

<span class="badge status-active">Active</span> <span class="badge badge-tier1">Tier 1</span>

STATS & METRICS

Data Visualization

Showcase key metrics and statistics

Metric Cards (Light Theme)

99.9%

Uptime

50%

Cost Reduction

24/7

Support

<div class="metric-card"> <div class="metric-value">99.9%</div> <div class="metric-label">Uptime</div> </div>

LISTS

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

<ul class="feature-list"> <li><i class="fas fa-check-circle"></i> Feature 1</li> <li><i class="fas fa-check-circle"></i> Feature 2</li> </ul>

DARK THEME

Dark Theme Components

Perfect for developer portals and technical content

Stats Grid

12+

MCP Servers

AI Agents

40+

Context Files

∞

Possibilities

Dark Cards

Azure MCP

Enterprise Azure resource management with deployment orchestration.

Active

AI Toolkit

AI agent development with tracing and evaluation framework.

Tier 1

GitHub MCP

Pull request management and automated merge workflows.

MCP

Agent List

Expert Lead Engineer

Supervises full agent mesh and coordinates specialists

Code Intelligence Agent

Analyzes and generates code with best practices

Context Audit Specialist

Validates context files and ensures data quality

Breadcrumb Navigation

<body class="dark-theme">  <div class="dark-card">...</div> <div class="stats-grid">...</div> <div class="agent-list">...</div>

LAYOUT

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

Pricing Tiers

Complete pricing card example

Starter

$49/month

Perfect for small teams

5 team members
10GB storage
Email support
Basic features

Professional

$99/month

For growing businesses

20 team members
100GB storage
Priority support
Advanced features
API access

Enterprise

Custom pricing

For large organizations

Unlimited members
Unlimited storage
24/7 support
All features
Custom integration
SLA guarantee

UTILITIES

Utility Classes

Quick styling helpers

Spacing Utilities

.mt-1, .mt-2, .mt-3, .mt-4 /* Margin top */ .mb-1, .mb-2, .mb-3, .mb-4 /* Margin bottom */

Text Alignment

.text-center /* Center align */ .text-left /* Left align */ .text-right /* Right align */

Animations

.animate-fade-in /* Fade in animation */ .animate-slide-up /* Slide up animation */ .animate-float /* Floating animation */

← This icon floats!