status.health logo status.health logo status.health

status.health Blog Design System Guide

status.health Blog Design System Guide

This guide ensures exact fidelity with the status.health website styling. All styles must match the parent site precisely.

Core Design Principles

1. CSS Variables (From status.health main.css)

:root {
    /* Base color scheme - light mode */
    --bg-color: #ffffff;
    --text-color: #333333;
    --heading-color: #222222;
    --highlight-color: #4a90e2;
    --highlight-bg: rgba(74, 144, 226, 0.1);
    --muted-color: #777777;
    --border-color: #eeeeee;
    --card-bg: #ffffff;
    --footer-bg: #f8f8f8;
    --toc-hover: #f0f4f8;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --transition-speed: 0.3s;
}

/* Dark mode - Applied to :root.dark-theme */
:root.dark-theme {
    --bg-color: #121212;
    --text-color: #e0e0e0;
    --heading-color: #ffffff;
    --highlight-color: #64a0ff;
    --highlight-bg: rgba(100, 160, 255, 0.1);
    --muted-color: #a0a0a0;
    --border-color: #333333;
    --card-bg: #1e1e1e;
    --footer-bg: #181818;
    --toc-hover: #252a32;
    --shadow-color: rgba(0, 0, 0, 0.3);
}

2. Typography

3. Container System

4. Page Structure (Privacy Policy/Mission Style)

Page Header

.page-header {
    text-align: left;
    margin: 40px 0 60px;
    padding-top: 20px;
    max-width: 800px;
}

.page-header h1 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    display: inline-block;
}

.page-subheading {
    color: var(--muted-color);
    font-size: 1.2rem;
    max-width: 700px;
    line-height: 1.6;
}

Rainbow Underline (Signature Element)

.rainbow-underline {
    height: 3px;
    width: 100%;
    margin-bottom: 15px;
    background: linear-gradient(
        to right,
        rgba(255, 200, 200, 0.7), 
        rgba(255, 230, 200, 0.7), 
        rgba(255, 255, 200, 0.7), 
        rgba(200, 255, 200, 0.7), 
        rgba(200, 230, 255, 0.7), 
        rgba(220, 200, 255, 0.7), 
        rgba(255, 200, 230, 0.7)
    );
    filter: blur(1px);
    opacity: 0.7;
    animation: pulse-animation 5s ease-in-out infinite alternate;
}

@keyframes pulse-animation {
    0% {
        transform: scale(0.95);
        opacity: 0.7;
    }
    100% {
        transform: scale(1.05);
        opacity: 0.9;
    }
}

5. Dark Mode Implementation

JavaScript (Exact from theme.js)

Key Dark Mode Behavior:

  1. Apply theme IMMEDIATELY on page load (prevent flash)
  2. Save preference to localStorage
  3. Respect system preferences if no manual preference
  4. Time-based auto-switching (6 AM - 6 PM) if no preference

6. Content Sections

Section Structure

.policy-section {
    margin-bottom: 50px;
    scroll-margin-top: 100px;
}

.policy-section h2 {
    font-size: 1.8rem;
    color: var(--heading-color);
    margin: 40px 0 5px;
}

.policy-section-content {
    padding: 0 0 0 10px;
}

7. Attest Badge Styling

.footer-badge-container {
    display: inline-flex;
    align-items: center;
    background: #f0f4f8;
    border: 1px solid #e1e8ed;
    border-radius: 25px;
    padding: 10px 16px;
    text-decoration: none;
    transition: all 0.2s;
}

.footer-badge-icon {
    height: 20px;
    flex-shrink: 0;
}

.footer-badge-text {
    text-align: left;
    margin-left: 10px;
}

Post Style (Enhanced)

.post-attribution {
    text-align: left;
    padding: 40px 0;
    border-top: 1px solid var(--border-color);
    margin-top: 60px;
}

.attest-badge {
    display: inline-flex;
    align-items: center;
    background: var(--highlight-bg);
    border: 1px solid var(--highlight-color);
    border-radius: 25px;
    padding: 12px 20px;
    text-decoration: none;
    transition: all 0.3s;
}

.attest-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px var(--shadow-color);
}

8. Button Styles

Beta/CTA Button (Rainbow Gradient)

.beta-button {
    padding: 8px 20px;
    background: linear-gradient(45deg, 
        rgba(255, 182, 193, 0.7), 
        rgba(255, 222, 173, 0.7), 
        rgba(255, 255, 173, 0.7), 
        rgba(173, 255, 182, 0.7), 
        rgba(182, 193, 255, 0.7), 
        rgba(222, 173, 255, 0.7), 
        rgba(255, 173, 222, 0.7)
    );
    background-size: 300% 300%;
    animation: gradient-animation 7s ease infinite;
    border: none;
    border-radius: 20px;
    color: #333;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

9. Navigation Dark Mode Toggle

HTML Structure

<button class="nav-theme-toggle" id="theme-toggle" aria-label="Toggle dark mode">
    <svg viewBox="0 0 24 24" width="20" height="20" class="theme-toggle-icon" id="theme-toggle-icon">
        <path d="M12 3a9 9 0 1 0 9 9c0-.46-.04-.92-.1-1.36a5.389 5.389 0 0 1-4.4 2.26 5.403 5.403 0 0 1-3.14-9.8c-.44-.06-.9-.1-1.36-.1z"/>
    </svg>
</button>

Toggle Styling

.nav-theme-toggle {
    background: none;
    border: none;
    padding: 8px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
}

.theme-toggle-icon {
    width: 20px;
    height: 20px;
    fill: var(--text-color);
    transition: fill 0.2s;
}

Validation Checklist

Before committing any styling changes, verify:

  1. All CSS variables match status.health exactly
  2. Dark mode uses :root.dark-theme selector
  3. Page headers have max-width: 800px
  4. Rainbow underline animation is smooth
  5. Theme toggle works on click (not hover)
  6. Attest badge matches footer style
  7. All fonts load from Google Fonts
  8. Container max-width is 1050px
  9. Dark mode prevents flash on load
  10. All transitions use var(–transition-speed)

Testing Requirements

  1. Test in both light and dark modes
  2. Verify no flash of unstyled content
  3. Check localStorage persistence
  4. Test on mobile and desktop
  5. Verify smooth animations
  6. Check color contrast in both modes
  7. Test theme toggle functionality
  8. Verify all hover states work

File Structure

assets/
├── css/
│   ├── main.css          # Core styles (copy from status.health)
│   ├── dark-mode.css     # Dark mode overrides
│   ├── blog.css          # Blog-specific styles
│   ├── post.css          # Post page styles
│   └── pages.css         # About/static page styles
└── js/
    ├── theme.js          # Dark mode functionality
    └── main.js           # Site functionality

Important Notes

  1. NEVER modify core color values
  2. ALWAYS test dark mode immediately on page load
  3. Use exact animations from status.health
  4. Maintain consistent spacing and typography
  5. Follow the exact class naming conventions
  6. Test all changes in both themes before committing