# MatrixMD Brand Style Guide

> **Framework-Agnostic Design System**
>
> This style guide provides all the design specifications needed to create pages and applications that align with the MatrixMD brand. All values are provided in standard CSS format for maximum compatibility across any technology stack.

---

## Table of Contents

1. [Brand Identity](#1-brand-identity)
2. [Logo Usage](#2-logo-usage)
3. [Color Palette](#3-color-palette)
4. [Typography](#4-typography)
5. [Spacing System](#5-spacing-system)
6. [Border Radius](#6-border-radius)
7. [Shadows](#7-shadows)
8. [Buttons](#8-buttons)
9. [Cards](#9-cards)
10. [Form Inputs](#10-form-inputs)
11. [Navigation](#11-navigation)
12. [Footer](#12-footer)
13. [Glassmorphism Effects](#13-glassmorphism-effects)
14. [Background Patterns](#14-background-patterns)
15. [Animations](#15-animations)
16. [Responsive Breakpoints](#16-responsive-breakpoints)
17. [Icons](#17-icons)
18. [CSS Custom Properties](#18-css-custom-properties)

---

## 1. Brand Identity

**MatrixMD** is a modern medical software platform for healthcare professionals. The brand conveys:

- **Trust & Reliability** - Through consistent use of calming green tones
- **Modernity** - Clean interfaces with glassmorphism and subtle animations
- **Professionalism** - Clear typography and structured layouts
- **Approachability** - Rounded corners and friendly color palette

### Brand Voice

- Professional but approachable
- Clear and concise
- Technical when needed, but accessible
- Confident without being arrogant

---

## 2. Logo Usage

### Logo Assets

Always use the official logo files from the public URL. **Never recreate or modify the logo.**

| Logo Variant | URL | Usage |
|--------------|-----|-------|
| **Full Logo** | `https://matrixmdsoftware.com/logo-full.svg` | Primary logo with "MatrixMD" text. Use in navigation, headers, and marketing materials. |
| **Icon Only** | `https://matrixmdsoftware.com/logo-icon.svg` | Square icon with "MD" letters. Use for favicons, app icons, and small spaces. |
| **Text Only** | `https://matrixmdsoftware.com/logo-text.svg` | Text "MatrixMD" without icon. Use when icon is displayed separately nearby. |
| **Square Icon** | `https://matrixmdsoftware.com/icon-square.svg` | Alternative square format. Use for social media profiles and app stores. |

### Logo Sizing

```css
/* Navigation logo */
.nav-logo {
  height: 40px;
  width: auto;
}

/* Footer logo (icon only) */
.footer-logo {
  height: 40px;
  width: 40px;
}

/* Large marketing placement */
.hero-logo {
  height: 64px;
  width: auto;
}
```

### Logo Clear Space

Maintain clear space around the logo equal to the height of the "M" in MatrixMD on all sides.

### Logo Don'ts

- Do not stretch or distort the logo
- Do not change the logo colors
- Do not add effects (shadows, outlines, etc.)
- Do not place on busy backgrounds without contrast
- Do not rotate the logo

---

## 3. Color Palette

### Primary Colors

| Name | Hex | RGB | Usage |
|------|-----|-----|-------|
| **Primary** | `#47be96` | `rgb(71, 190, 150)` | Main brand color, buttons, links, accents, icons |
| **Primary Dark** | `#3da880` | `rgb(61, 168, 128)` | Hover states, gradient midpoints |
| **Primary Darker** | `#2d8a6a` | `rgb(45, 138, 106)` | Gradient endpoints, active states |
| **Primary Light** | `#eff9f4` | `rgb(239, 249, 244)` | Light backgrounds, success states, subtle highlights |

### Dark Colors

| Name | Hex | RGB | Usage |
|------|-----|-----|-------|
| **Dark Teal** | `#051b1e` | `rgb(5, 27, 30)` | Footer background, dark sections |
| **Slate 900** | `#0f172a` | `rgb(15, 23, 42)` | Primary headings, dark text |
| **Slate 800** | `#1e293b` | `rgb(30, 41, 59)` | Dark section backgrounds |
| **Slate 700** | `#334155` | `rgb(51, 65, 85)` | Navigation links, secondary text |

### Neutral Colors

| Name | Hex | RGB | Usage |
|------|-----|-----|-------|
| **Slate 600** | `#475569` | `rgb(71, 85, 105)` | Body text, descriptions |
| **Slate 500** | `#64748b` | `rgb(100, 116, 139)` | Muted text, labels |
| **Slate 400** | `#94a3b8` | `rgb(148, 163, 184)` | Placeholder text, disabled states |
| **Slate 300** | `#cbd5e1` | `rgb(203, 213, 225)` | Borders, dividers |
| **Slate 200** | `#e2e8f0` | `rgb(226, 232, 240)` | Light borders, input borders |
| **Slate 100** | `#f1f5f9` | `rgb(241, 245, 249)` | Backgrounds, scrollbar track |
| **Slate 50** | `#f8fafc` | `rgb(248, 250, 252)` | Page backgrounds |
| **White** | `#ffffff` | `rgb(255, 255, 255)` | Cards, navigation, content areas |

### Accent Colors (Secondary)

| Name | Hex | Usage |
|------|-----|-------|
| **Purple** | `#8b5cf6` → `#7c3aed` | Premium plans, special features |
| **Orange** | `#f97316` → `#ea580c` | Enterprise plans, warnings |
| **Blue** | `#60a5fa` | Decorative elements, info states |
| **Green (WhatsApp)** | `#22c55e` → `#16a34a` | WhatsApp integration buttons |

### Gradients

```css
/* Primary Button Gradient */
background: linear-gradient(to right, #47be96, #3da882);

/* Primary Text Gradient */
background: linear-gradient(135deg, #47be96 0%, #3da880 50%, #2d8a6a 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;

/* Dark Section Gradient */
background: linear-gradient(to right, #0f172a, #1e293b, #0f172a);

/* Page Background Gradient */
background: linear-gradient(to bottom right, #f8fafc, #eff6ff);

/* Glass Card Decorative Gradient */
background: linear-gradient(to bottom right, rgba(71, 190, 150, 0.1), rgba(96, 165, 250, 0.1));
```

### Color with Opacity

```css
/* Primary color with opacity */
rgba(71, 190, 150, 0.1)   /* 10% - Very subtle backgrounds */
rgba(71, 190, 150, 0.15)  /* 15% - Subtle hover states */
rgba(71, 190, 150, 0.2)   /* 20% - Icon backgrounds, decorative orbs */
rgba(71, 190, 150, 0.25)  /* 25% - Button shadows */
rgba(71, 190, 150, 0.3)   /* 30% - Stronger shadows, glow effects */
rgba(71, 190, 150, 0.5)   /* 50% - Glow animation peak */

/* White with opacity (for glassmorphism) */
rgba(255, 255, 255, 0.3)  /* Glass borders */
rgba(255, 255, 255, 0.4)  /* Stronger glass borders */
rgba(255, 255, 255, 0.6)  /* Semi-transparent backgrounds */
rgba(255, 255, 255, 0.7)  /* Glass panel backgrounds */
rgba(255, 255, 255, 0.8)  /* Navigation background */
```

---

## 4. Typography

### Font Family

MatrixMD uses system fonts for optimal performance and native feel:

```css
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
```

### Font Sizes

| Name | Size | Line Height | Usage |
|------|------|-------------|-------|
| **xs** | `12px` / `0.75rem` | 1.5 | Badges, fine print, labels |
| **sm** | `14px` / `0.875rem` | 1.5 | Form labels, descriptions, feature lists |
| **base** | `16px` / `1rem` | 1.5 | Body text, buttons (md) |
| **lg** | `18px` / `1.125rem` | 1.75 | Large buttons, card titles |
| **xl** | `20px` / `1.25rem` | 1.75 | Subtitles, footer brand name |
| **2xl** | `24px` / `1.5rem` | 1.4 | Card titles, section headers |
| **3xl** | `30px` / `1.875rem` | 1.3 | Banner titles, medium headers |
| **4xl** | `36px` / `2.25rem` | 1.2 | Page headers (mobile) |
| **5xl** | `48px` / `3rem` | 1.1 | Page headers (tablet/desktop) |
| **6xl** | `60px` / `3.75rem` | 1.1 | Large page headers |
| **7xl** | `72px` / `4.5rem` | 1.0 | Hero titles (large screens) |

### Font Weights

| Name | Weight | Usage |
|------|--------|-------|
| **normal** | `400` | Body text (rarely used) |
| **medium** | `500` | Button text, form labels, navigation |
| **semibold** | `600` | Footer headers, badges, emphasized text |
| **bold** | `700` | Card titles, section headers |
| **extrabold** | `800` | Page headers, hero titles |

### Text Colors

```css
/* Headings */
color: #0f172a; /* slate-900 */

/* Body text */
color: #475569; /* slate-600 */

/* Secondary/muted text */
color: #64748b; /* slate-500 */

/* Placeholder text */
color: #94a3b8; /* slate-400 */

/* Links */
color: #47be96; /* primary */

/* Links on hover */
color: #3da880; /* primary-dark */

/* Text on dark backgrounds */
color: #ffffff; /* white */

/* Muted text on dark backgrounds */
color: #94a3b8; /* slate-400 */
```

### Line Heights

```css
/* Tight - for large headings */
line-height: 1.1;

/* Snug - for medium headings */
line-height: 1.25;

/* Normal - default */
line-height: 1.5;

/* Relaxed - for readable body text */
line-height: 1.625;
```

---

## 5. Spacing System

MatrixMD uses a 4px base unit spacing system.

### Spacing Scale

| Token | Value | Usage |
|-------|-------|-------|
| **0** | `0` | Reset spacing |
| **1** | `4px` / `0.25rem` | Tight spacing, icon gaps |
| **1.5** | `6px` / `0.375rem` | Small button padding |
| **2** | `8px` / `0.5rem` | Small gaps, tight padding |
| **3** | `12px` / `0.75rem` | Input padding, small margins |
| **4** | `16px` / `1rem` | Standard padding, mobile container |
| **5** | `20px` / `1.25rem` | Medium spacing |
| **6** | `24px` / `1.5rem` | Card padding, section gaps |
| **8** | `32px` / `2rem` | Large padding, section margins |
| **10** | `40px` / `2.5rem` | Hero section padding |
| **12** | `48px` / `3rem` | Large section padding |
| **16** | `64px` / `4rem` | Major section separation |
| **20** | `80px` / `5rem` | Footer margin-top |

### Common Spacing Patterns

```css
/* Mobile container padding */
padding: 16px;

/* Desktop container padding */
padding: 24px 32px;

/* Card content padding */
padding: 24px;

/* Large card padding */
padding: 32px;

/* Hero section padding */
padding: 40px 16px;
padding: 48px 24px; /* desktop */

/* Label to input spacing */
margin-bottom: 8px;

/* Between form fields */
margin-bottom: 16px;

/* Between section elements */
margin-bottom: 24px;

/* Between major sections */
margin-bottom: 48px;
margin-bottom: 64px; /* larger */
```

### Container Max Widths

| Name | Width | Usage |
|------|-------|-------|
| **sm** | `640px` | Narrow forms |
| **md** | `768px` | Medium content |
| **lg** | `1024px` | Standard content |
| **xl** | `1280px` | Wide content |
| **2xl** | `1536px` | Full-width sections |
| **7xl** | `1280px` | Main site container (recommended) |

```css
/* Standard page container */
max-width: 1280px;
margin: 0 auto;
padding: 0 16px;

@media (min-width: 640px) {
  padding: 0 24px;
}

@media (min-width: 1024px) {
  padding: 0 32px;
}
```

---

## 6. Border Radius

| Name | Value | Usage |
|------|-------|-------|
| **none** | `0` | Sharp corners |
| **sm** | `4px` / `0.25rem` | Scrollbar thumb, small elements |
| **md** | `6px` / `0.375rem` | Form inputs, small buttons |
| **lg** | `8px` / `0.5rem` | Standard cards, buttons |
| **xl** | `12px` / `0.75rem` | **Default for buttons and cards** |
| **2xl** | `16px` / `1rem` | Modern buttons, featured cards |
| **3xl** | `24px` / `1.5rem` | Glass panels, hero cards |
| **full** | `9999px` | Pills, badges, circular elements |

```css
/* Standard button */
border-radius: 12px;

/* Standard card */
border-radius: 12px;

/* Modern/glass card */
border-radius: 24px;

/* Badge/pill */
border-radius: 9999px;

/* Form input */
border-radius: 6px;

/* Icon container */
border-radius: 12px;
```

---

## 7. Shadows

### Box Shadows

```css
/* Small shadow - subtle elevation */
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);

/* Standard card shadow */
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);

/* Medium shadow */
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);

/* Large shadow - buttons, elevated cards */
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);

/* Extra large shadow - modals, dropdowns */
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
```

### Primary Color Shadows

```css
/* Primary button shadow */
box-shadow: 0 10px 15px -3px rgba(71, 190, 150, 0.25);

/* Primary button hover shadow */
box-shadow: 0 20px 25px -5px rgba(71, 190, 150, 0.3);

/* Icon container shadow */
box-shadow: 0 10px 15px -3px rgba(71, 190, 150, 0.2);

/* Card hover shadow */
box-shadow: 0 20px 40px -12px rgba(71, 190, 150, 0.15);

/* Glass card shadow */
box-shadow: 0 8px 32px rgba(71, 190, 150, 0.1);

/* Glass card hover shadow */
box-shadow: 0 16px 48px rgba(71, 190, 150, 0.15);
```

### Drop Shadows (for SVG/images)

```css
/* Glow effect */
filter: drop-shadow(0 0 20px rgba(71, 190, 150, 0.3));

/* Intense glow (animation peak) */
filter: drop-shadow(0 0 40px rgba(71, 190, 150, 0.5));
```

---

## 8. Buttons

### Button Base Styles

```css
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  border: none;
  outline: none;
}

.button:focus {
  outline: 2px solid #47be96;
  outline-offset: 2px;
}
```

### Button Variants

#### Default (Primary)

```css
.button-default {
  background-color: #47be96;
  color: #ffffff;
}

.button-default:hover {
  background-color: #3da880;
}

/* With gradient (premium feel) */
.button-default-gradient {
  background: linear-gradient(to right, #47be96, #3da882);
  color: #ffffff;
  box-shadow: 0 10px 15px -3px rgba(71, 190, 150, 0.25);
}

.button-default-gradient:hover {
  box-shadow: 0 20px 25px -5px rgba(71, 190, 150, 0.3);
}
```

#### Outline

```css
.button-outline {
  background-color: transparent;
  color: #334155;
  border: 1px solid #cbd5e1;
}

.button-outline:hover {
  background-color: #f8fafc;
}

/* Outline with primary accent */
.button-outline-primary {
  background-color: transparent;
  color: #334155;
  border: 2px solid #e2e8f0;
}

.button-outline-primary:hover {
  border-color: #47be96;
  color: #47be96;
}
```

#### White

```css
.button-white {
  background-color: #ffffff;
  color: #47be96;
}

.button-white:hover {
  background-color: #eff9f4;
}
```

#### Outline White (for dark backgrounds)

```css
.button-outline-white {
  background-color: transparent;
  color: #ffffff;
  border: 1px solid #ffffff;
}

.button-outline-white:hover {
  background-color: #ffffff;
  color: #47be96;
}
```

### Button Sizes

```css
/* Small */
.button-sm {
  padding: 6px 12px;
  font-size: 14px;
}

/* Medium (default) */
.button-md {
  padding: 8px 16px;
  font-size: 16px;
}

/* Large */
.button-lg {
  padding: 12px 32px;
  font-size: 18px;
}
```

### Button with Icon

```css
.button-with-icon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.button-icon {
  width: 20px;
  height: 20px;
}
```

---

## 9. Cards

### Standard Card

```css
.card {
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

.card-header {
  padding: 24px 24px 0;
}

.card-title {
  font-size: 24px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}

.card-description {
  font-size: 14px;
  color: #64748b;
  margin-top: 4px;
}

.card-content {
  padding: 24px;
}
```

### Card with Hover Effect

```css
.card-hover {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -12px rgba(71, 190, 150, 0.15);
}
```

### Glass Card

```css
.card-glass {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 24px;
  box-shadow: 0 8px 32px rgba(71, 190, 150, 0.1);
}

.card-glass:hover {
  box-shadow: 0 16px 48px rgba(71, 190, 150, 0.15);
  transform: scale(1.02) translateY(-4px);
}
```

### Featured/Popular Card

```css
.card-featured {
  background-color: #0f172a;
  color: #ffffff;
  border: none;
  position: relative;
  z-index: 10;
  transform: scale(1.05);
}

.card-featured .card-title {
  color: #ffffff;
}

.card-featured .card-description {
  color: #94a3b8;
}
```

---

## 10. Form Inputs

### Text Input

```css
.input {
  width: 100%;
  padding: 12px 16px;
  font-size: 16px;
  color: #0f172a;
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.input::placeholder {
  color: #94a3b8;
}

.input:focus {
  outline: none;
  border-color: transparent;
  box-shadow: 0 0 0 2px #47be96;
}

/* Modern variant */
.input-modern {
  padding: 16px;
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 12px;
}
```

### Textarea

```css
.textarea {
  width: 100%;
  padding: 12px 16px;
  font-size: 16px;
  color: #0f172a;
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  resize: vertical;
  min-height: 120px;
  font-family: inherit;
}

.textarea:focus {
  outline: none;
  border-color: transparent;
  box-shadow: 0 0 0 2px #47be96;
}
```

### Select

```css
.select {
  width: 100%;
  padding: 12px 16px;
  font-size: 16px;
  color: #0f172a;
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,..."); /* Add chevron icon */
  background-repeat: no-repeat;
  background-position: right 12px center;
}

.select:focus {
  outline: none;
  border-color: transparent;
  box-shadow: 0 0 0 2px #47be96;
}
```

### Label

```css
.label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #334155;
  margin-bottom: 8px;
}
```

### File Input

```css
.file-input {
  width: 100%;
}

.file-input::file-selector-button {
  margin-right: 16px;
  padding: 8px 16px;
  border-radius: 9999px;
  border: none;
  font-size: 14px;
  font-weight: 600;
  background-color: #eff9f4;
  color: #47be96;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.file-input::file-selector-button:hover {
  background-color: rgba(71, 190, 150, 0.2);
}
```

---

## 11. Navigation

### Fixed Navigation Header

```css
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 64px;
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid #e2e8f0;
  z-index: 50;
}

.nav-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@media (min-width: 640px) {
  .nav-container {
    padding: 0 24px;
  }
}

@media (min-width: 1024px) {
  .nav-container {
    padding: 0 32px;
  }
}
```

### Navigation Links

```css
.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-link {
  color: #334155;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.nav-link:hover {
  color: #47be96;
}

.nav-link-active {
  color: #47be96;
}
```

### Mobile Menu

```css
.mobile-menu {
  background-color: #ffffff;
  border-top: 1px solid #e2e8f0;
  padding: 8px 16px;
}

.mobile-menu-link {
  display: block;
  padding: 8px 0;
  color: #334155;
  text-decoration: none;
}
```

---

## 12. Footer

```css
.footer {
  background-color: #051b1e;
  color: #ffffff;
  padding: 48px 0;
  margin-top: 80px;
}

.footer-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 32px;
}

@media (min-width: 768px) {
  .footer-container {
    grid-template-columns: repeat(5, 1fr);
  }
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.footer-brand-name {
  font-size: 20px;
  font-weight: 700;
}

.footer-description {
  color: #94a3b8;
}

.footer-heading {
  font-weight: 600;
  margin-bottom: 16px;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-link {
  color: #94a3b8;
  text-decoration: none;
  display: block;
  padding: 4px 0;
  transition: color 0.2s ease;
}

.footer-link:hover {
  color: #ffffff;
}

.footer-divider {
  border-top: 1px solid #1e293b;
  margin-top: 32px;
  padding-top: 32px;
  text-align: center;
  color: #94a3b8;
}

.footer-social-link {
  color: #94a3b8;
  transition: color 0.2s ease;
}

.footer-social-link:hover {
  color: #47be96;
}
```

---

## 13. Glassmorphism Effects

### Light Glass Panel

```css
.glass {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}
```

### Dark Glass Panel

```css
.glass-dark {
  background: rgba(5, 27, 30, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
```

### Glass Card with Gradient Border

```css
.glass-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 24px;
  box-shadow: 0 8px 32px rgba(71, 190, 150, 0.1);
}
```

---

## 14. Background Patterns

### Grid Pattern

```css
.bg-grid {
  background-image: 
    linear-gradient(rgba(71, 190, 150, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(71, 190, 150, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
}
```

### Dot Pattern

```css
.bg-dots {
  background-image: radial-gradient(rgba(71, 190, 150, 0.15) 1px, transparent 1px);
  background-size: 20px 20px;
}
```

### Page Background Gradient

```css
body {
  background: linear-gradient(to bottom right, #f8fafc, #eff6ff);
  min-height: 100vh;
}
```

### Decorative Orbs

```css
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
}

.orb-green {
  background-color: rgba(71, 190, 150, 0.2);
}

.orb-blue {
  background-color: rgba(96, 165, 250, 0.15);
}

.orb-purple {
  background-color: rgba(167, 139, 250, 0.15);
}
```

---

## 15. Animations

### Keyframe Definitions

```css
/* Float animation */
@keyframes float {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-20px) rotate(5deg);
  }
}

/* Float delayed (alternate direction) */
@keyframes float-delayed {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-30px) rotate(-5deg);
  }
}

/* Float slow (subtle) */
@keyframes float-slow {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-15px);
  }
}

/* Glow pulse */
@keyframes glow {
  0%, 100% {
    filter: drop-shadow(0 0 20px rgba(71, 190, 150, 0.3));
  }
  50% {
    filter: drop-shadow(0 0 40px rgba(71, 190, 150, 0.5));
  }
}

/* Scale pulse */
@keyframes pulse-slow {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

/* Gradient shift */
@keyframes gradient-x {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* Shimmer effect */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Fade in from below */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Simple fade */
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Scale in */
@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Slide in from right */
@keyframes slide-in-right {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
```

### Animation Classes

```css
.animate-float {
  animation: float 6s ease-in-out infinite;
}

.animate-float-delayed {
  animation: float-delayed 8s ease-in-out infinite;
}

.animate-float-slow {
  animation: float-slow 10s ease-in-out infinite;
}

.animate-glow {
  animation: glow 3s ease-in-out infinite;
}

.animate-pulse-slow {
  animation: pulse-slow 3s ease-in-out infinite;
}

.animate-gradient-x {
  background-size: 200% 200%;
  animation: gradient-x 15s ease infinite;
}

.animate-shimmer {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

.animate-fade-in-up {
  animation: fade-in-up 0.6s ease-out forwards;
}

.animate-fade-in {
  animation: fade-in 0.5s ease-out forwards;
}

.animate-scale-in {
  animation: scale-in 0.5s ease-out forwards;
}

.animate-slide-in-right {
  animation: slide-in-right 0.5s ease-out forwards;
}
```

### Animation Delays

```css
.animation-delay-100 { animation-delay: 100ms; }
.animation-delay-200 { animation-delay: 200ms; }
.animation-delay-300 { animation-delay: 300ms; }
.animation-delay-400 { animation-delay: 400ms; }
.animation-delay-500 { animation-delay: 500ms; }
.animation-delay-600 { animation-delay: 600ms; }
.animation-delay-700 { animation-delay: 700ms; }
.animation-delay-800 { animation-delay: 800ms; }
```

### Standard Transitions

```css
/* Fast (hover states) */
transition: all 0.2s ease;

/* Standard */
transition: all 0.3s ease;

/* Smooth cubic bezier */
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

/* Slow (page elements) */
transition: all 0.5s ease;
```

---

## 16. Responsive Breakpoints

| Name | Min Width | Typical Usage |
|------|-----------|---------------|
| **sm** | `640px` | Large phones, small tablets |
| **md** | `768px` | Tablets |
| **lg** | `1024px` | Small laptops, large tablets |
| **xl** | `1280px` | Desktops |
| **2xl** | `1536px` | Large desktops |

### Media Query Examples

```css
/* Mobile-first approach */

/* Base styles (mobile) */
.element {
  padding: 16px;
  font-size: 14px;
}

/* Small screens and up */
@media (min-width: 640px) {
  .element {
    padding: 24px;
    font-size: 16px;
  }
}

/* Medium screens and up */
@media (min-width: 768px) {
  .element {
    padding: 32px;
  }
}

/* Large screens and up */
@media (min-width: 1024px) {
  .element {
    padding: 48px;
    font-size: 18px;
  }
}

/* Extra large screens and up */
@media (min-width: 1280px) {
  .element {
    padding: 64px;
  }
}
```

---

## 17. Icons

MatrixMD uses **Lucide Icons** for consistent iconography.

- Website: https://lucide.dev
- Style: Outlined, 24px default size, 2px stroke width

### Icon Sizing

| Size | Pixels | Usage |
|------|--------|-------|
| **sm** | `16px` | Inline with small text |
| **md** | `20px` | Buttons, inline with body text |
| **lg** | `24px` | Default, standalone icons |
| **xl** | `32px` | Feature icons, cards |
| **2xl** | `48px` | Hero sections, large callouts |

### Icon Container

```css
.icon-container {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(to bottom right, #47be96, #3da882);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 15px -3px rgba(71, 190, 150, 0.2);
}

.icon-container svg {
  width: 24px;
  height: 24px;
  color: #ffffff;
}

/* Subtle variant */
.icon-container-subtle {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(to bottom right, rgba(71, 190, 150, 0.2), rgba(71, 190, 150, 0.05));
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-container-subtle svg {
  width: 24px;
  height: 24px;
  color: #47be96;
}
```

---

## 18. CSS Custom Properties

For easy theming and consistency, use these CSS custom properties:

```css
:root {
  /* Primary Colors */
  --color-primary: #47be96;
  --color-primary-dark: #3da880;
  --color-primary-darker: #2d8a6a;
  --color-primary-light: #eff9f4;
  
  /* Dark Colors */
  --color-dark-teal: #051b1e;
  --color-slate-900: #0f172a;
  --color-slate-800: #1e293b;
  --color-slate-700: #334155;
  
  /* Neutral Colors */
  --color-slate-600: #475569;
  --color-slate-500: #64748b;
  --color-slate-400: #94a3b8;
  --color-slate-300: #cbd5e1;
  --color-slate-200: #e2e8f0;
  --color-slate-100: #f1f5f9;
  --color-slate-50: #f8fafc;
  --color-white: #ffffff;
  
  /* Semantic Colors */
  --color-text-primary: var(--color-slate-900);
  --color-text-secondary: var(--color-slate-700);
  --color-text-body: var(--color-slate-600);
  --color-text-muted: var(--color-slate-500);
  --color-text-placeholder: var(--color-slate-400);
  --color-border: var(--color-slate-200);
  --color-background: var(--color-slate-50);
  
  /* Spacing */
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-10: 40px;
  --spacing-12: 48px;
  --spacing-16: 64px;
  --spacing-20: 80px;
  
  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-full: 9999px;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  --shadow-primary: 0 10px 15px -3px rgba(71, 190, 150, 0.25);
  --shadow-primary-lg: 0 20px 25px -5px rgba(71, 190, 150, 0.3);
  
  /* Typography */
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 30px;
  --font-size-4xl: 36px;
  --font-size-5xl: 48px;
  
  /* Transitions */
  --transition-fast: all 0.2s ease;
  --transition-base: all 0.3s ease;
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: all 0.5s ease;
  
  /* Z-Index */
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-fixed: 30;
  --z-modal-backdrop: 40;
  --z-modal: 50;
  --z-tooltip: 60;
}
```

### Using Custom Properties

```css
.button {
  background-color: var(--color-primary);
  border-radius: var(--radius-xl);
  padding: var(--spacing-2) var(--spacing-4);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  transition: var(--transition-fast);
}

.button:hover {
  background-color: var(--color-primary-dark);
  box-shadow: var(--shadow-primary);
}

.card {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--spacing-6);
}
```

---

## Quick Reference: Component Examples

### Page Header

```html
<div class="page-header">
  <h1 class="page-title">Page Title</h1>
  <p class="page-subtitle">
    Supporting description text goes here.
  </p>
</div>
```

```css
.page-header {
  text-align: center;
  margin-bottom: 48px;
  padding: 0 16px;
}

.page-title {
  font-size: 36px;
  font-weight: 800;
  color: #0f172a;
}

@media (min-width: 640px) {
  .page-title {
    font-size: 48px;
  }
}

.page-subtitle {
  margin-top: 16px;
  font-size: 20px;
  color: #475569;
  max-width: 768px;
  margin-left: auto;
  margin-right: auto;
}
```

### Badge/Pill

```html
<span class="badge">
  <span class="badge-dot"></span>
  Badge Text
</span>
```

```css
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(71, 190, 150, 0.2);
  font-size: 14px;
  color: #475569;
}

.badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #47be96;
  animation: pulse 2s ease-in-out infinite;
}
```

### Section Header with Accent Bar

```html
<div class="section-header">
  <div class="section-accent"></div>
  <h2 class="section-title">Section Title</h2>
</div>
```

```css
.section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.section-accent {
  width: 6px;
  height: 32px;
  border-radius: 9999px;
  background: linear-gradient(to bottom, #47be96, #3da882);
}

.section-title {
  font-size: 24px;
  font-weight: 700;
  color: #1e293b;
}
```

---

## Checklist for New Pages

When creating a new page following the MatrixMD style guide, ensure:

- [ ] Logo is loaded from `https://matrixmdsoftware.com/logo-full.svg`
- [ ] Primary color `#47be96` is used for CTAs and accents
- [ ] System font stack is applied
- [ ] 12px border radius is used for cards and buttons
- [ ] Navigation uses `backdrop-filter: blur(12px)` with white background
- [ ] Footer uses dark teal background `#051b1e`
- [ ] Responsive breakpoints follow mobile-first approach
- [ ] Transitions use `0.2s` or `0.3s` duration
- [ ] Focus states have visible `#47be96` outline
- [ ] Text colors follow the hierarchy (900 > 700 > 600 > 500)

---

*Last updated: January 2026*
*Version: 1.0*