Style Validation Prompt

Style Validation Prompt

Before Making ANY Style Changes

Ask yourself these questions and verify compliance:

1. Color Variables

• Am I using the EXACT color values from status.health?
• Have I checked both light and dark mode values?
• Am I using CSS variables, not hardcoded colors?

2. Dark Mode

• Does dark mode use :root.dark-theme selector?
• Is the theme applied immediately on page load?
• Does the toggle button work on click (not hover)?
• Is the preference saved to localStorage?

3. Typography

• Is Inter font loaded from Google Fonts?
• Are font sizes matching exactly?
• Is line-height set to 1.6 for body text?

4. Layout

• Is max-width 1050px for main container?
• Is max-width 800px for page headers?
• Is padding-top 100px for fixed navbar?
• Are all sections using correct margins?

5. Signature Elements

• Does rainbow underline use exact gradient?
• Is pulse animation 5s ease-in-out infinite alternate?
• Are beta buttons using rainbow gradient animation?

6. Attest Badge

• Does it match footer style from status.health?
• Is it properly styled for both contexts (footer/post)?
• Does hover state work correctly?

7. Testing

• Have I tested in BOTH light and dark modes?
• Have I verified no flash of unstyled content?
• Have I checked mobile responsiveness?
• Have I tested all interactive elements?

Quick Reference CSS

/* EXACT status.health colors - DO NOT MODIFY */
:root {
    --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);
}

: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);
}

Command to Run Before Committing

# Check that all tests pass
./test-suite.sh

# Verify dark mode works
# 1. Open site
# 2. Click dark mode toggle
# 3. Refresh page - should stay dark
# 4. Clear localStorage
# 5. Refresh - should respect system preference

Red Flags - DO NOT PROCEED IF:

• You’re changing any core color values
• You’re using pixels instead of rem for fonts
• You’re not testing in both themes
• You’re modifying the rainbow gradient
• You’re changing animation timings
• You’re not using CSS variables