Core Variables

All Tokens Reference

Spacing Scale

Grid System

Alerts

Badges

Header Pattern

🔥 First product launched! Starting at $29

BUY

• Products
• Support
• About

We can all use a little space

Promotion Banner

Launch Announcement (Gold Shimmer)

Configurator CTA Banner

Partner CTA Banner

Newsletter Section Container

Form Validation States

Success Message

Post Card (Horizontal)

Tabs

Breadcrumbs

• Home
• Store
• Handbooks
• Thiosphere

Pagination

• «
• 1
• 2
• 3
• »

Social Icons Section

Footer Grid (4 Columns)

Footer Bottom

All Rights Reserved

Handmade by Peter Bartsch in Chicago

Modular Open Source Spaces

Payment processing by

Feedback Button

Markup

<main id="main-content" class="container page-content">
    <section>
        <h1 class="page-title">Page Title</h1>
        <!-- content -->
    </section>
</main>

Preview

Classes

Markup

<div class="stats-grid">
    <div class="stat-card">
        <div class="stat-icon">📧</div>
        <div class="stat-title">Support</div>
        <div class="stat-description">24/7 response time.</div>
    </div>
    <!-- more cards -->
</div>

Preview

Notes

An icon can be an emoji (as above) or a Font Awesome glyph. Grid auto-fits at minmax(200px, 1fr) — stacks to single column on narrow screens.

Hero About (centered)

<section class="about-landing">
    <div class="hero-about">
        <h1 class="page-title">About Thios</h1>
        <p>Subtitle text explaining the page.</p>
    </div>
</section>

Hero Contact (left-aligned)

<div class="hero-contact">
    <h1 class="page-title">Get in touch</h1>
    <p>Short description.</p>
</div>

Handbook Hero (full-bleed product hero)

Used on handbook product pages (Thiosphere-Handbook.php, Thiosphere-Handbook-Preview.php, across all 10 locales). Teal gradient background, centered title with gold-accented subheading, paragraph lede, and a hero-sized CTA button. The .hero-content, .hero-subtitle, and .hero-cta classes are scoped to .handbook-hero in CSS — they deliberately don't conflict with store's different .hero-content pattern.

<section class="handbook-hero">
    <div class="container">
        <div class="hero-content">
            <h1>The Whole Thiosphere™ Handbook</h1>
            <h2>Complete Design & Build Guide</h2>
            <p class="hero-subtitle">Your comprehensive guide...</p>
            <div class="hero-cta">
                <a href="offer.php" class="btn btn-primary btn-hero">
                    Get the Handbook - Starts at $29
                </a>
            </div>
        </div>
    </div>
</section>

Classes

Handbook Table of Contents (pairs with Handbook Hero)

Sits directly below the handbook hero. Six "Part" sections in a responsive grid — each section is a card with a teal left border and teal-hover links. Grid auto-fits at minmax(280px, 1fr), collapsing to single column under 768px.

<section class="handbook-toc">
    <div class="container">
        <h2>Table of Contents</h2>
        <div class="toc-grid">
            <div class="toc-section">
                <h3>Part I: Foundation & Philosophy</h3>
                <ul>
                    <li><a href="#manifesto">Chapter 1: The Design Manifesto</a></li>
                    <li><a href="#philosophy">Chapter 2: The Thiosphere™ Philosophy</a></li>
                    <!-- more chapters -->
                </ul>
            </div>
            <!-- more .toc-section blocks -->
        </div>
    </div>
</section>

Classes

Full Auth Card

Markup

<div class="auth-container">
    <div class="auth-card">
        <div class="auth-header">
            <h1>Welcome back.</h1>
            <p>Sign in to access your handbooks.</p>
        </div>

        <div class="social-buttons">
            <a href="..." class="btn-social btn-google">
                <span class="social-icon google-icon"></span>
                Continue with Google
            </a>
            <a href="..." class="btn-social btn-apple">
                <span class="social-icon apple-icon"></span>
                Continue with Apple
            </a>
        </div>

        <div class="divider"><span>or</span></div>

        <form method="POST">
            <div class="form-group">
                <label for="email">Email</label>
                <input type="email" id="email" name="email" required>
            </div>
            <button type="submit" class="btn btn-primary">Sign In</button>
        </form>

        <div class="auth-links">
            <p><a href="forgot-password.php">Forgot password?</a></p>
            <p><a href="register.php">Sign up</a></p>
        </div>
    </div>
</div>

Classes

Notes

See this pattern live at /en/login.php, /en/register.php, /en/forgot-password.php. Auth pages previously used Google Material styling inline — migrated to Thios brand tokens 2026-04-20.