Turboship Theme & Style Guide

Centralized specification of the unified design system for all Turbo Heat Welding Tools web applications. This page updates dynamically based on the active theme.

Design System Philosophy

Our applications target a clean, premium, high-density dashboard aesthetic. We support both Light Mode (clean, high-contrast) and Dark Mode (futuristic, glassmorphism-inspired dark navy scheme) natively. The theme is synchronized across all subdomains via the turbo_theme cookie.

CRITICAL Use the predefined CSS variables (custom properties) listed below. Never hardcode raw hex values in individual component stylesheets.

Color Variables Palette

These CSS variables adapt automatically to the light/dark theme preference chosen by the user.

1. Base Backgrounds & Surfaces

--bg-main Main viewport page background.
--bg-container Primary containers, headers, navbar.
--bg-card Cards, content grids, panels.
--bg-card-hover Hover states for interactive cards.
--bg-input Form inputs, text areas.
--bg-details Denoised details section background.
--bg-details-hover Hover state for denoised details section.

2. Borders & Typography

--border-color Default subtle structural dividers and outlines.
--border-color-hover Interactive border focus/hover state.
--text-primary Primary content typography. High readability.
--text-muted Secondary subtitles and captions.
--text-inverse High-contrast text color on dark/accent backgrounds.
--h1-gradient-* Gradient variables for prominent dashboard titles and headers.

3. Accents & Action Colors

--accent-cyan Primary focus color, highlight, active indicator.
--accent-blue Informational highlights, primary button gradients.
--accent-purple Secondary branding accents, subtle gradients.
--accent-teal Utility accents, confirmations.

4. Shadows & Effects

--shadow-sm Subtle shadow for small cards and buttons.
--shadow-md Medium shadow for details panels and list cards.
--shadow-lg Large shadow for dropdown menus and modals.
--shadow-glow Accent glow for selected or active focus states.

5. Button & Switch Utilities

--bg-button-secondary Background for secondary actions.
--bg-button-secondary-hover Hover background for secondary actions.
--border-button-secondary Border color for secondary actions.
--bg-switch-off Background for toggle switches in 'off' state.

6. Status Badges & Alerts

--status-fulfilled-* Colors for fulfilled, completed, or active success states.
--status-fraud-* Colors for fraud risk, errors, or high risk alerts.
--status-warning-* Colors for warnings, holds, or pending queue items.
--status-customs-* Colors for info, customs holds, or shipping statuses.

Fulfillment & Order Status Badges

Status badges represent order, shipment, or payment states. They have customized high-contrast styles for light and dark themes to ensure maximum legibility.

Rendered Status Badges

Fulfilled Warning Fraud Risk Customs Hold

HTML Markup Code

<span class="status-pill status-fulfilled">Fulfilled</span>
<span class="status-pill status-warning">Warning</span>
<span class="status-pill status-fraud">Fraud Risk</span>
<span class="status-pill status-customs">Customs Hold</span>

Interactive Buttons & Controls

Actions use smooth scaling micro-animations on hover and active click states. Secondary buttons are semi-transparent and align with accent colors.

Rendered Buttons

📦 Secondary Action 🏷️ Print Label

HTML Markup Code


<button class="approve-button">Approve Order</button>
<button class="approve-button" disabled>Disabled</button>


<div class="button-group">
  <a href="#" class="btn-sm"><span>📦</span> Secondary Action</a>
  <a href="#" class="btn-sm"><span>🏷️</span> Print Label</a>
</div>

Collapsible Accordions (De-Noised Details)

Instead of hard borders around nested details elements, the system uses subtle background tints with transparent content. An interactive "show/hide" badge is injected into the summary header.

Rendered Collapsible Details

Shipping Address & Destination

Recipient: John Smith

Address: 123 Industrial Way, Suite A, Seattle, WA 98101

Country: United States (Verified)

Parcel Envelopes & Dimensions

Envelope Type: Medium Heavy Duty Flat Mailer

Dimensions: 12.5" x 9.5" x 0.75"

Weight: 1.2 lbs

HTML Markup Code

<div class="order-details">
  <details>
    <summary class="collapsible-summary">
      <span class="toggle-icon"></span>
      <span>Accordion Title</span>
    </summary>
    <div class="details-content">
      <p><strong>Label:</strong> Value</p>
    </div>
  </details>
</div>

Theme Integration & FOUC Prevention

To avoid a Flash of Unstyled Theme (FOUC) where the default/dark background transitions to light mode on page refresh, follow these integration steps:

1. Stylesheet Loading (Parallel link tags)

Never load theme.css using @import inside another stylesheet. This creates a network request waterfall. Instead, load it directly in the HTML <head> before other stylesheets so the browser loads them in parallel and blocks rendering until both are ready:

<head>
  <!-- Load theme variables first -->
  <link rel="stylesheet" href="/css/theme.css">
  <!-- Load application styles next -->
  <link rel="stylesheet" href="/css/style.css">
</head>

2. Inline Head Initialization Script

Place this synchronous inline script in the <head> (before the <body> renders) to read the user's preference and apply the appropriate theme class to the root element immediately:

<script>
  (function() {
    function getTheme() {
      var nameEQ = "turbo_theme=";
      var ca = document.cookie.split(';');
      for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
      }
      var stored = localStorage.getItem('theme');
      if (stored) return stored;
      return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
    }
    var theme = getTheme();
    if (theme === 'dark') {
      document.documentElement.classList.add('dark-theme');
      document.documentElement.classList.remove('light-theme');
    } else {
      document.documentElement.classList.add('light-theme');
      document.documentElement.classList.remove('dark-theme');
    }
  })();
</script>