EAS Station Design Standards
Enterprise-Grade Design System Guidelines
Version: 3.0 - Professional Edition
Last Updated: December 2025
Status: ✅ MANDATORY - All new pages and components MUST follow these standards
🎯 Mission Statement
EAS Station is a professional, enterprise-grade emergency alert management system. Every aspect of the user interface must reflect this standard. No exceptions.
📋 Core Principles
1. Consistency is Non-Negotiable
- Every page uses the same components
- Same spacing, same colors, same patterns
- If it looks different, it's wrong
2. Professional Over Flashy
- Subtle animations, not distracting
- Clean gradients, not rainbow colors
- Enterprise users, not consumers
3. Accessibility First
- WCAG AA minimum standard
- Keyboard navigation always works
- Screen readers properly supported
4. Performance Matters
- 60fps animations or none at all
- No jank, no lag, no stuttering
- Smooth professional experience
🎨 Visual Design System
Color Palette
Primary Brand Colors
--primary-color: #1e3a8a; /* Deep Professional Blue */
--primary-soft: #3b82f6; /* Bright Blue */
--secondary-color: #7c3aed; /* Professional Purple */
--accent-color: #3b82f6; /* Accent Blue */
Status Colors
--success-color: #10b981; /* Green - Success */
--danger-color: #ef4444; /* Red - Danger/Error */
--warning-color: #f59e0b; /* Amber - Warning */
--info-color: #3b82f6; /* Blue - Info */
Neutrals
--bg-color: #f1f5f9; /* Page background */
--surface-color: #ffffff; /* Card/surface */
--text-color: #0f172a; /* Primary text */
--text-secondary: #475569; /* Secondary text */
--text-muted: #94a3b8; /* Muted text */
--border-color: #e2e8f0; /* Borders */
Typography Scale
Font Families
- Body: System font stack (San Francisco, Segoe UI, Roboto, etc.)
- Mono: UI monospace (SF Mono, Menlo, Monaco, etc.)
Type Scale (Perfect Fourth - 1.333 ratio)
--font-size-xs: 0.75rem; /* 12px - Small labels */
--font-size-sm: 0.875rem; /* 14px - Body small, buttons */
--font-size-base: 1rem; /* 16px - Body text */
--font-size-lg: 1.125rem; /* 18px - Large text */
--font-size-xl: 1.333rem; /* 21px - Small headings */
--font-size-2xl: 1.777rem; /* 28px - Medium headings */
--font-size-3xl: 2.369rem; /* 38px - Large headings */
Font Weights
--font-weight-normal: 400; /* Body text */
--font-weight-medium: 500; /* Emphasis */
--font-weight-semibold: 600; /* Headings, buttons */
--font-weight-bold: 700; /* Strong emphasis */
--font-weight-extrabold: 800; /* Extra emphasis */
Spacing System
Base Unit: 4px
Scale: Powers and multiples of 4
--spacing-1: 0.25rem; /* 4px */
--spacing-2: 0.5rem; /* 8px */
--spacing-3: 0.75rem; /* 12px */
--spacing-4: 1rem; /* 16px */
--spacing-5: 1.25rem; /* 20px */
--spacing-6: 1.5rem; /* 24px */
--spacing-8: 2rem; /* 32px */
--spacing-10: 2.5rem; /* 40px */
--spacing-12: 3rem; /* 48px */
--spacing-16: 4rem; /* 64px */
Shadows
--shadow-sm: 0 1px 2px 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);
Border Radius
--radius-sm: 0.375rem; /* 6px - Small elements */
--radius-md: 0.5rem; /* 8px - Buttons, inputs */
--radius-lg: 0.75rem; /* 12px - Cards */
--radius-xl: 1rem; /* 16px - Large cards */
--radius-2xl: 1.5rem; /* 24px - Extra large */
🧩 Component Standards
Page Header (MANDATORY)
Every page MUST start with this:
<div class="page-header">
<div class="container-fluid">
<div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
<div>
<h1 class="page-title mb-0">
<i class="fas fa-icon-name me-2"></i>Page Title
</h1>
<p class="page-subtitle mb-0">Brief page description</p>
</div>
<div class="page-header-actions">
<button class="btn btn-success">
<i class="fas fa-plus me-1"></i>Primary Action
</button>
<a href="#" class="btn btn-outline-light">
<i class="fas fa-cog me-1"></i>Secondary
</a>
</div>
</div>
</div>
</div>
Rules:
- Page title must have an icon with
me-2spacing - Subtitle is optional but recommended
- Actions go in
page-header-actions - Primary actions use solid buttons
- Secondary actions use
btn-outline-light
Section Headers
<div class="section-header">
<div>
<h3 class="section-title mb-0">
<i class="fas fa-icon me-2"></i>Section Title
</h3>
<p class="section-subtitle mb-0">Optional description</p>
</div>
<div class="section-actions">
<button class="btn btn-sm btn-primary">Action</button>
</div>
</div>
Cards
<!-- Standard Card -->
<div class="card">
<div class="card-header">
<h5 class="mb-0">Card Title</h5>
</div>
<div class="card-body">
Card content here
</div>
</div>
<!-- Colored Header Card -->
<div class="card">
<div class="card-header bg-success">
<h5 class="mb-0">Success Card</h5>
</div>
<div class="card-body">
Content
</div>
</div>
Available header classes:
bg-primary- Primary gradientbg-success- Success gradientbg-warning- Warning gradientbg-danger- Danger gradientbg-info- Info gradient
Statistics Cards
<div class="stats-grid">
<div class="card bg-success-gradient text-white">
<div class="card-body text-center">
<h3 class="mb-0">125</h3>
<small>Label</small>
</div>
</div>
<!-- More stat cards -->
</div>
Available classes:
.bg-success-gradient.bg-warning-gradient.bg-danger-gradient.bg-info-gradient.stat-card(default primary gradient)
Buttons
<!-- With Icon (REQUIRED) -->
<button class="btn btn-primary">
<i class="fas fa-save me-1"></i>Save Changes
</button>
<!-- Button Variants -->
<button class="btn btn-primary">Primary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-outline-primary">Outline</button>
<button class="btn btn-outline-light">Light (for dark backgrounds)</button>
<!-- Button Sizes -->
<button class="btn btn-sm">Small</button>
<button class="btn">Default</button>
<button class="btn btn-lg">Large</button>
Rules:
- ALL buttons must have icons
- Icon spacing:
me-1(0.25rem gap) - Use solid for primary actions
- Use outline for secondary actions
- Use
btn-outline-lighton gradient backgrounds
Info Boxes
<!-- Info -->
<div class="info-box">
<div class="info-box-title"><i class="fas fa-info-circle me-2"></i>Title</div>
Message content
</div>
<!-- Variants -->
<div class="info-box success">...</div>
<div class="info-box warning">...</div>
<div class="info-box danger">...</div>
Empty States
<div class="empty-state">
<div class="empty-state-icon">
<i class="fas fa-inbox"></i>
</div>
<div class="empty-state-title">No Items</div>
<div class="empty-state-text">Description</div>
<button class="btn btn-primary">
<i class="fas fa-plus me-1"></i>Create Item
</button>
</div>
Layout Grids
<!-- 2 Column -->
<div class="content-grid content-grid-2">
<div class="card">...</div>
<div class="card">...</div>
</div>
<!-- 3 Column -->
<div class="content-grid content-grid-3">
<div class="card">...</div>
<div class="card">...</div>
<div class="card">...</div>
</div>
<!-- 4 Column -->
<div class="content-grid content-grid-4">
<div class="card">...</div>
<div class="card">...</div>
<div class="card">...</div>
<div class="card">...</div>
</div>
🚫 DO NOT Do These Things
❌ NO Inline Styles
<!-- WRONG -->
<div style="color: red; padding: 10px;">
Content
</div>
<!-- CORRECT -->
<div class="info-box danger">
Content
</div>
❌ NO Hardcoded Colors
/* WRONG */
.custom-box {
background: #FF0000;
color: #0000FF;
}
/* CORRECT */
.custom-box {
background: var(--danger-color);
color: var(--primary-color);
}
❌ NO Random Spacing
<!-- WRONG -->
<div style="margin-bottom: 13px;">
<!-- CORRECT -->
<div class="mb-3"> <!-- Uses standard spacing scale -->
❌ NO Mixed Component Styles
<!-- WRONG - Mixing different patterns -->
<div class="some-custom-header-style">
<h2>Page Title</h2>
</div>
<!-- CORRECT - Use standard page header -->
<div class="page-header">
<div class="container-fluid">
<h1 class="page-title"><i class="fas fa-icon me-2"></i>Page Title</h1>
</div>
</div>
❌ NO Buttons Without Icons
<!-- WRONG -->
<button class="btn btn-primary">Save</button>
<!-- CORRECT -->
<button class="btn btn-primary">
<i class="fas fa-save me-1"></i>Save
</button>
✅ Best Practices
1. Consistent Spacing
- Use margin bottom classes:
mb-3,mb-4,mb-5 - Section spacing:
mb-5(3rem) - Card spacing:
mb-4(1.5rem) - Element spacing:
mb-3(1rem)
2. Icon Usage
- Font Awesome 6.4.0
- Always prefix text with icons
- Use
me-1orme-2for spacing - Match icon to action (save → fa-save, edit → fa-edit)
3. Visual Hierarchy
Page Header (largest, gradient background)
↓
Section Header (medium, subtle background)
↓
Cards (contained content)
↓
Form elements / Lists
4. Color Usage
- Primary: Main actions, headers
- Success: Positive actions (save, create, confirm)
- Warning: Caution, review needed
- Danger: Destructive actions (delete, cancel, error)
- Info: Informational, neutral actions
5. Responsive Design
- Use Bootstrap grid:
col-12 col-md-6 col-lg-4 - Flex utilities:
d-flex,justify-content-between - Responsive spacing:
mb-3 mb-md-4 - Mobile-first approach
📐 Layout Templates
Standard Page Layout
<div class="container-fluid">
<!-- Page Header -->
<div class="page-header">
<!-- ... -->
</div>
<!-- Stats Cards (Optional) -->
<div class="stats-grid">
<!-- ... -->
</div>
<!-- Section 1 -->
<div class="section-header">
<!-- ... -->
</div>
<div class="card">
<!-- ... -->
</div>
<!-- Section 2 -->
<div class="section-header">
<!-- ... -->
</div>
<div class="content-grid content-grid-2">
<!-- ... -->
</div>
</div>
Form Page Layout
<div class="container-fluid">
<!-- Page Header -->
<div class="page-header"><!-- ... --></div>
<!-- Form Card -->
<div class="card">
<div class="card-header">
<h5 class="mb-0">Form Title</h5>
</div>
<div class="card-body">
<form>
<div class="row g-3">
<div class="col-md-6">
<label class="form-label">Field Label</label>
<input type="text" class="form-control">
</div>
<!-- More fields -->
</div>
<div class="mt-4">
<button type="submit" class="btn btn-primary">
<i class="fas fa-save me-1"></i>Save
</button>
<button type="button" class="btn btn-outline-secondary">
<i class="fas fa-times me-1"></i>Cancel
</button>
</div>
</form>
</div>
</div>
</div>
🎬 Animation Guidelines
Timing
--transition-fast: 150ms; /* Button hovers, small changes */
--transition-medium: 250ms; /* Card hovers, modals */
--transition-slow: 350ms; /* Page transitions */
Easing
--ease-smooth: cubic-bezier(0.4, 0.0, 0.2, 1); /* Default */
--ease-enter: cubic-bezier(0.0, 0.0, 0.2, 1); /* Elements entering */
--ease-exit: cubic-bezier(0.4, 0.0, 1, 1); /* Elements leaving */
What to Animate
- ✅ Opacity
- ✅ Transform (translate, scale)
- ✅ Box-shadow
- ✅ Background-color
- ❌ Width/Height (causes reflow)
- ❌ Top/Left (use transform instead)
🧪 Testing Checklist
Before committing any page changes:
- Page uses standard page header
- All sections have section headers
- Cards use proper card classes
- All buttons have icons
- Spacing follows the scale
- Colors use CSS variables
- Responsive on mobile (320px+)
- Keyboard navigation works
- No console errors
- Tested in light and dark themes
📚 Reference Files
- Live Style Guide:
/style_guideroute (view in browser) - Component Templates:
templates/partials/ - CSS Variables:
static/css/styles.css(lines 1-150)
🆘 Getting Help
When Unsure
- Check the style guide page (
/style_guide) - Look at recently updated pages for examples
- Copy patterns from
alerts.html(good example)
Questions to Ask
- "Does this page look like it came from the same designer as others?"
- "Would a Fortune 500 company use this interface?"
- "Is every element consistent with the design system?"
If the answer to any is "no", it needs revision.
📝 Version History
- v3.0 (December 2025): Professional design system overhaul
- v2.0 (November 2025): Theme improvements and gradients
- v1.0 (October 2025): Initial design system
Remember: Consistency is not optional. It's mandatory. Every page, every component, every interaction must follow these standards. No exceptions.
This document is served from docs/architecture/DESIGN_STANDARDS.md in the EAS Station installation.