Gray Layered Backgrounds Guide - Bulma Palette System

Overview

Your site now has a comprehensive Bulma-style gray palette system with gradients, stripes, and layered backgrounds that create depth like your terminal interface. This follows Bulma's color palette documentation with automatic theme switching.

🎨 Gray Gradient Backgrounds

Subtle Gradients (Light)

<!-- Very subtle depth -->
<section class="section has-gradient-grey-subtle">
    <h2>Subtle layered section</h2>
</section>

<!-- Light gradient -->
<section class="section has-gradient-grey-light">
    <h2>Light gradient section</h2>
</section>

Medium & Dark Gradients

<!-- Medium contrast -->
<section class="section has-gradient-grey">
    <h2>Medium gradient section</h2>
</section>

<!-- Dark gradients -->
<section class="section has-gradient-grey-dark">
    <h2>Dark gradient section</h2>
</section>

<section class="section has-gradient-grey-darker">
    <h2>Darker gradient section</h2>
</section>

Radial Gradients (Focal Points)

<!-- Spotlight effect -->
<section class="section has-gradient-grey-radial">
    <h2>Radial spotlight section</h2>
</section>

<section class="section has-gradient-grey-radial-dark">
    <h2>Dark radial section</h2>
</section>

📏 Striped Backgrounds

Diagonal Stripes

<!-- Subtle diagonal stripes -->
<section class="section has-stripes-grey-subtle">
    <h2>Subtle striped section</h2>
</section>

<!-- Light stripes -->
<section class="section has-stripes-grey-light">
    <h2>Light striped section</h2>
</section>

<!-- Medium stripes -->
<section class="section has-stripes-grey">
    <h2>Medium striped section</h2>
</section>

<!-- Dark stripes -->
<section class="section has-stripes-grey-dark">
    <h2>Dark striped section</h2>
</section>

Horizontal Stripes (Table-like)

<!-- List/table alternating backgrounds -->
<div class="box has-stripes-grey-horizontal">
    <p>Alternating horizontal stripes</p>
    <p>Great for lists or data</p>
</div>

<div class="box has-stripes-grey-horizontal-dark">
    <p>Dark horizontal stripes</p>
</div>

🏗️ Layered Terminal-Style Sections

Terminal-Inspired Depth

<!-- Light layered (like your terminal) -->
<section class="section section-layered-light">
    <div class="container">
        <h2>Terminal-style layered section</h2>
        <p>Multiple gray layers create depth</p>
    </div>
</section>

<!-- Medium layered -->
<section class="section section-layered-medium">
    <div class="container">
        <h2>Medium layered section</h2>
    </div>
</section>

<!-- Dark layered -->
<section class="section section-layered-dark">
    <div class="container">
        <h2>Dark layered section</h2>
    </div>
</section>

Layered Cards

<!-- Light layered card -->
<div class="card has-layered-background">
    <div class="card-content">
        <h3>Layered card background</h3>
        <p>Subtle gradient with border</p>
    </div>
</div>

<!-- Dark layered card -->
<div class="card has-layered-background-dark">
    <div class="card-content">
        <h3>Dark layered card</h3>
        <p>More dramatic depth</p>
    </div>
</div>

🎯 Real-World Usage Examples

Homepage with Alternating Depth

<!-- Hero section -->
<section class="section">
    <!-- Your current hero content -->
</section>

<!-- CTA section with subtle gradient -->
<section class="section has-gradient-grey-subtle py-6">
    <div class="container">
        <!-- Terminal and image content -->
    </div>
</section>

<!-- Gallery with layered background -->
<section class="section section-layered-light py-6">
    <div class="container">
        <!-- Gallery content -->
    </div>
</section>

<!-- About with stripes -->
<section class="section has-stripes-grey-horizontal py-6">
    <div class="container">
        <!-- About content -->
    </div>
</section>

Card Grid with Variety

<div class="columns">
    <div class="column">
        <div class="card">Default card</div>
    </div>
    <div class="column">
        <div class="card has-gradient-grey-subtle">Gradient card</div>
    </div>
    <div class="column">
        <div class="card has-layered-background">Layered card</div>
    </div>
    <div class="column">
        <div class="card has-stripes-grey-subtle">Striped card</div>
    </div>
</div>

Blog Post List

<!-- Alternating post backgrounds -->
<article class="box">Default post</article>
<article class="box has-gradient-grey-subtle">Gradient post</article>
<article class="box">Default post</article>
<article class="box section-layered-light">Layered post</article>

Data Tables/Lists

<!-- Perfect for alternating rows -->
<div class="content has-stripes-grey-horizontal">
    <ul>
        <li>Item 1 (light stripe)</li>
        <li>Item 2 (darker stripe)</li>
        <li>Item 3 (light stripe)</li>
        <li>Item 4 (darker stripe)</li>
    </ul>
</div>

🔄 Theme Behavior

Dark Theme (Default)

Light gradients use very light grays
Dark gradients use darker grays
Stripes alternate between light/medium grays

Light Theme (Auto-flipped)

Light gradients become medium/dark
Dark gradients become very dark
All contrast relationships maintained

✨ Key Benefits

Follows Bulma Standards: Uses HSL color palette system
Theme Aware: All gradients/stripes flip appropriately
Automatic Text Contrast: Text colors set automatically
Terminal-Inspired: Layered sections mimic your terminal depth
Performance Optimized: CSS gradients, no images needed

🎨 Design Patterns

Subtle Depth Pattern

<section class="section">Main content</section>
<section class="section has-gradient-grey-subtle">Subtle variation</section>
<section class="section">Main content</section>
<section class="section section-layered-light">Layered variation</section>

Progressive Intensity

<section class="section has-gradient-grey-subtle">Light</section>
<section class="section has-gradient-grey-light">Medium-light</section>
<section class="section has-gradient-grey">Medium</section>
<section class="section has-gradient-grey-dark">Dark</section>

Mixed Patterns

<section class="section has-gradient-grey-light">Gradient section</section>
<section class="section has-stripes-grey-subtle">Striped section</section>
<section class="section section-layered-medium">Layered section</section>

This system gives you the same layered, sophisticated look as your terminal interface but applied to any section or component on your site!