Cloud School - Component Library & Style Guide

📋 Table of Contents

1. Color Palette
2. Typography
3. Buttons
4. Cards & Stats
5. Form Elements
6. Status Badges
7. Category Items
8. AI Insights
9. Payment Options
10. Shadow System
11. Spacing System

1. 🎨 Color Palette

Primary Colors

Primary Blue

#2563eb

Primary Dark

#1e40af

Primary Light

#dbeafe

--primary: #2563eb;
--primary-dark: #1e40af;
--primary-light: #dbeafe;

Secondary Colors

Success Green

#10b981

Warning Orange

#f59e0b

Danger Red

#ef4444

Neutral Colors

Background Primary

#f8fafc

Background Secondary

#ffffff

Text Primary

#1e293b

Text Secondary

#64748b

2. 🔤 Typography

Font Family

-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif

Headings

H1 Heading - 28px / 700

H2 Heading - 20px / 600

H3 Heading - 18px / 600

H4 Heading - 15px / 600

Body Text

Standard Body Text - 14px / 400

Small Text - 13px / 400

Extra Small Text - 12px / 400

3. 🔘 Buttons

Button Variants

<button class="btn btn-primary">Primary Button</button>
<button class="btn btn-secondary">Secondary Button</button>

Icon Buttons

4. 📊 Cards & Stats

Stat Cards

KSh 847,500

Total Expenses

💰

KSh 652,300

Approved

✓

KSh 145,200

Pending

⏳

KSh 50,000

Rejected

5. 📝 Form Elements

Input Fields

Text Input

Select Dropdown

Textarea

6. 🏷️ Status Badges

Approved Pending Rejected

<span class="status-badge approved">Approved</span>
<span class="status-badge pending">Pending</span>
<span class="status-badge rejected">Rejected</span>

7. 📂 Category Items

📚

Learning Materials

34 transactions

KSh 285,400

33.7%

🏢

Infrastructure

18 transactions

KSh 198,500

23.4%

8. 💡 AI Insights

ℹ️

Information Insight

This is an informational insight card with important details about expenses.

✓

Success Insight

This is a success insight card showing positive performance metrics.

⚠️

Warning Insight

This is a warning insight card highlighting areas that need attention.

9. 💳 Payment Options

📱

M-Pesa

🔗

PesaLink

💳

Card

🏦

Bank

💵

Cash

📋

Cheque

10. 🌑 Shadow System

shadow-sm

shadow

shadow-md

shadow-lg

shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05)
shadow: 0 1px 3px rgba(0, 0, 0, 0.1)
shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1)
shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1)

11. 📏 Spacing System

Padding & Margin Scale

xs: 8px

sm: 12px

md: 16px

lg: 20px

xl: 24px

Ready to Build?

Use this design system to create consistent and beautiful UIs for Cloud School

Design Version 1.0 | October 2025

🏫 Cloud School Design System