BLT CSS Reference

No required file. Copy-paste this style block into your page/layout and keep BLT tokens consistent.

Contribute

Copy-Paste Style Block

<style>
:root {
  --blt-primary: #E10101;
  --blt-primary-hover: #c10000;
  --blt-bg: #f8fafc;
  --blt-surface: #ffffff;
  --blt-border: #e2e8f0;
  --blt-text: #0f172a;
  --blt-muted: #475569;
  --blt-radius: 0.75rem;
}

[data-theme="dark"] {
  --blt-bg: #111827;
  --blt-surface: #1f2937;
  --blt-border: #374151;
  --blt-text: #f9fafb;
  --blt-muted: #d1d5db;
}

.blt-surface {
  background: var(--blt-surface);
  border: 1px solid var(--blt-border);
  border-radius: var(--blt-radius);
}

.blt-btn-primary {
  background: var(--blt-primary);
  color: #fff;
  border-radius: 0.5rem;
  padding: 0.5rem 0.9rem;
  font-weight: 600;
}

.blt-btn-primary:hover {
  background: var(--blt-primary-hover);
}
</style>

Use with Tailwind components when needed. Keep brand primary anchored to #E10101.

Do

  • Copy this block into shared layout files once.
  • Keep Tailwind utilities as the main styling method.
  • Use variables for consistent cross-page polish.

Do Not

  • Override primary red with unrelated brand colors.
  • Mix random dark shades across pages.
  • Create separate style rules for each page.