Gray Variety System Guide - Bulma Standard

Gray Variety System Guide - Bulma Standard

Overview

Your site follows Bulma's standard grayscale naming with automatic contrast flipping between light and dark themes, plus smart specialized classes that automatically pair backgrounds with perfect text colors.

✅ USE THESE CLASSES - Bulma Standard

Standard Bulma Background Classes

<!-- Light grays -->
<section class="section has-background-grey-lighter">Lightest</section>
<section class="section has-background-grey-light">Light</section>

<!-- Medium grays -->
<section class="section has-background-grey">Medium</section>

<!-- Dark grays -->
<section class="section has-background-grey-dark">Dark</section>
<section class="section has-background-grey-darker">Darkest</section>

Standard Bulma Tag Classes

<span class="tag is-light">Light tag</span>
<span class="tag is-grey-light">Gray light tag</span>
<span class="tag is-grey">Gray tag</span>
<span class="tag is-grey-dark">Gray dark tag</span>
<span class="tag is-dark">Dark tag</span>

🚀 SMART CLASSES - Auto-Pairing Backgrounds & Text

Smart Section Classes (Recommended!)

These automatically set perfect text colors for any content inside:

<!-- Smart sections - use these for easy styling -->
<section class="section is-grey-lighter">
    <h2>This title automatically gets perfect contrast</h2>
    <p>This text automatically gets perfect contrast</p>
</section>

<section class="section is-grey-light">
    <h2>Perfect contrast automatically</h2>
</section>

<section class="section is-grey">
    <h2>Perfect contrast automatically</h2>
</section>

<section class="section is-grey-dark">
    <h2>Perfect contrast automatically</h2>
</section>

Smart Card Classes

<div class="card is-grey-lighter">
    <div class="card-content">
        <h3>Perfect contrast automatically</h3>
        <p>All text gets proper colors</p>
    </div>
</div>

<div class="card is-grey-light">Card with perfect text contrast</div>
<div class="card is-grey">Card with perfect text contrast</div>

Smart Container Classes

<div class="container is-grey-lighter">Perfect text pairing</div>
<div class="box is-grey-light">Perfect text pairing</div>

🎨 Real Usage Examples

Your Homepage (Current)

<!-- This works perfectly! -->
<section class="home-cta-section is-grey-light py-6">
    <div class="container is-fluid px-6-desktop px-4-tablet px-3-mobile">
        <!-- All text inside automatically gets perfect contrast -->
    </div>
</section>

Alternating Sections

<section class="section">Default background</section>
<section class="section is-grey-lighter">Light variation</section>
<section class="section">Default background</section>
<section class="section is-grey-light">Medium variation</section>

Category Pages

<section class="section is-grey-light">
    <div class="container">
        <h1 class="title">Design Projects</h1> <!-- Auto perfect contrast -->
        <p class="subtitle">Recent work</p> <!-- Auto perfect contrast -->
    </div>
</section>

Card Grids

<div class="columns">
    <div class="column">
        <div class="card">Default card</div>
    </div>
    <div class="column">
        <div class="card is-grey-lighter">Subtle variation</div>
    </div>
    <div class="column">
        <div class="card is-grey-light">More variation</div>
    </div>
</div>

🎯 Tag Usage Patterns

Content Categories

<div class="tags">
    <span class="tag is-primary">Featured</span>
    <span class="tag is-grey">Design</span>
    <span class="tag is-grey-light">Draft</span>
    <span class="tag is-light">Archive</span>
</div>

Post Metadata

<div class="tags">
    <span class="tag is-dark"></span>
    <span class="tag is-grey-dark"></span>
    <span class="tag is-grey"></span>
</div>

🔄 Contrast Flipping Behavior

Dark Theme (Default)

• is-grey-lighter = Light gray background + dark text
• is-grey = Medium gray background + light text
• is-grey-darker = Dark gray background + light text

Light Theme (Auto-flipped)

• is-grey-lighter = Subtle light background + dark text
• is-grey = Medium contrast + appropriate text
• is-grey-darker = Higher contrast + dark text

✨ Key Benefits of Smart Classes

1. Auto Text Pairing: Titles, subtitles, and paragraphs get perfect contrast automatically
2. Theme Aware: Works perfectly in both light and dark themes
3. Bulma Compatible: Uses standard Bulma naming conventions
4. No Manual Color Management: Just add the class, text colors are handled
5. Nested Element Support: All headings and text inside get proper colors

📋 Quick Reference

Most Common Classes You'll Use:

• section.is-grey-lighter - Subtle section background
• section.is-grey-light - Light section background
• card.is-grey-lighter - Subtle card variation
• tag.is-grey - Standard gray tag
• has-background-grey-light - When you just need the background

Smart Rule: Use is-grey-* classes for automatic text pairing, use has-background-grey-* when you want manual control.