🎨 Style Guide
Design system, colors, and CSS guidelines for all wiki pages.
🎯 Color Palette
Background Black
Main background color
Card Background
For cards and containers
Secondary Background
For inner containers
Border Color
For borders and dividers
Accent Colors
Sky Blue
Primary accent color
Emerald Green
Success, online status
Amber Yellow
Warnings, highlights
Red Orange
Errors, danger alerts
Violet Purple
Secondary accent
🔤 Typography
Font Family
Text Colors
Primary Text
Main body text color
Secondary Text
For less important text
Link Color
All clickable links
Font Sizes
| Element | Size | Example |
|---|---|---|
| Page Title (h1) | 2.5rem | Page Title |
| Section Title (h2) | 1.8rem | Section Title |
| Subsection (h3) | 1.4rem | Subsection |
| Body Text (p) | 1rem | Body text |
| Small Text (.status-detail) | 0.9rem | Small detail text |
📐 Spacing & Layout
Margins & Padding
Grid System
Status Grid
Automatically responsive grid
Nav Cards Grid
For navigation links
🎨 Component Examples
Navigation Cards
Status Cards
Normal Card
Standard information card
Online Status
Special styling for online/active status
Warning Card
Custom border color for warnings
Alert Boxes
⚠️ Warning
Use for important warnings or cautions
💡 Information
Use for helpful tips or notes
✅ Success
Use for success messages or confirmations
Stat Items
🔗 Links & Buttons
Navigation Links
Example navigation bar:
Back Buttons
Inline Links
This is a paragraph with an inline link in the middle of the text. Links should always use #7dd3fc color.
💻 Code Display
Inline Code
Use <code> tags for inline code snippets like const x = 5 or function() {}.
Code Blocks
Use <pre><code> for multi-line code:
// Example JavaScript
function calculateTotal(price, tax) {
return price + (price * tax);
}
const total = calculateTotal(100, 0.08);
console.log(total); // 108HTML Code Example
<!-- Example card structure -->
<div class="status-card">
<h3>Card Title</h3>
<p>Description text goes here.</p>
<div class="status-detail">Additional details</div>
</div>📱 Responsive Design
Desktop
900px max-width for main content
Tablet
768px breakpoint
Mobile
Single column layout
💡 Design Principles
Consistency: Use the same colors, spacing, and typography across all pages
Hierarchy: Clear visual hierarchy with proper heading sizes
Contrast: Ensure good contrast between text and backgrounds
Responsiveness: All components should work on mobile devices
Accessibility: Maintain sufficient color contrast and readable fonts