BitStorm Brand Guidelines

CSS Design System

A design system is not a project, it's a product serving products. It lives, breathes, and evolves with purpose, ensuring every pixel tells the same story across every touchpoint.

— Elder Quantica

BitStorm Design System

Design Tokens

Consistent colors, typography, spacing, and component patterns that ensure brand consistency across all platforms.

Implementation

Available as both CSS custom properties and Tailwind CSS utility classes for maximum flexibility and developer experience.

Colors

Brand color palette and semantic tokens

CSS Variables

/* BitStorm Color Design Tokens */
:root {
  /* Primary Colors */
  --bitstorm-primary: #4B88C6;
  --bitstorm-secondary: #FFBF00;
  --bitstorm-white: #FFFFFF;
  --bitstorm-black: #000000;
  
  /* Gray Scale */
  --bitstorm-gray-50: #f9fafb;
  --bitstorm-gray-100: #f3f4f6;
  --bitstorm-gray-200: #e5e7eb;
  --bitstorm-gray-600: #666666;
  --bitstorm-gray-700: #333333;
  --bitstorm-gray-900: #111827;
  
  /* Background */
  --bitstorm-background: #f5f5f5;
}

Tailwind CSS

// Tailwind Configuration
colors: {
  bitstorm: {
    primary: '#4B88C6',
    secondary: '#FFBF00',
    background: '#f5f5f5',
    gray: {
      600: '#666666',
      700: '#333333',
    }
  },
  primary: '#4B88C6',
  secondary: '#FFBF00',
}

Typography

Font definitions and text styling

CSS Variables

/* BitStorm Typography */
:root {
  --font-inter: 'Inter', system-ui, sans-serif;
  --font-jetbrains: 'JetBrains Mono', monospace;
}

/* Typography Classes */
.bitstorm-heading {
  font-family: var(--font-jetbrains);
  font-weight: 700;
  color: var(--bitstorm-gray-700);
}

.bitstorm-body {
  font-family: var(--font-inter);
  color: var(--bitstorm-gray-600);
}

.bitstorm-code {
  font-family: var(--font-jetbrains);
  color: var(--bitstorm-gray-700);
}

Tailwind CSS

// Tailwind Typography Classes
.bitstorm-heading {
  @apply font-mono font-bold text-bitstorm-gray-700;
}

.bitstorm-body {
  @apply font-sans text-bitstorm-gray-600;
}

.bitstorm-code {
  @apply font-mono text-bitstorm-gray-700;
}

Components

Reusable UI component styles

CSS Variables

/* BitStorm Component System */
.bitstorm-card {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  border-top: 3px solid var(--bitstorm-primary);
  border: 1px solid rgba(75, 136, 198, 0.2);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.bitstorm-card:hover {
  border-color: rgba(75, 136, 198, 0.4);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.bitstorm-btn-primary {
  background: var(--bitstorm-primary);
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-family: var(--font-jetbrains);
  font-weight: 500;
  transition: background-color 0.2s;
}

.bitstorm-nav-link-active {
  background: var(--bitstorm-primary);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-family: var(--font-jetbrains);
  font-weight: 500;
}

Tailwind CSS

// Tailwind Component Classes
.bitstorm-card {
  @apply bg-white rounded-card p-6 border-t-[3px] border border-primary/20 shadow-card;
}

.bitstorm-card:hover {
  @apply border-primary/40 shadow-card-hover;
}

.bitstorm-btn-primary {
  @apply bg-primary text-white px-6 py-3 rounded-button font-mono font-medium hover:bg-primary-600 transition-colors;
}

.bitstorm-nav-link-active {
  @apply bg-primary text-white py-2 px-4 rounded-lg font-mono font-medium;
}

Layout

Spacing system and grid patterns

CSS Variables

/* BitStorm Spacing System */
:root {
  --spacing-xs: 0.25rem;    /* 4px */
  --spacing-sm: 0.5rem;     /* 8px */
  --spacing-md: 1rem;       /* 16px */
  --spacing-lg: 1.5rem;     /* 24px */
  --spacing-xl: 2rem;       /* 32px */
  --spacing-2xl: 3rem;      /* 48px */
  --spacing-3xl: 4rem;      /* 64px */
}

/* Layout Patterns */
.bitstorm-container {
  max-width: 1024px;
  margin: 0 auto;
  padding: 0 2rem;
}

.bitstorm-grid-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .bitstorm-grid-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

Tailwind CSS

// Tailwind Spacing & Layout
.bitstorm-container {
  @apply max-w-4xl mx-auto px-8;
}

.bitstorm-grid-cards {
  @apply grid grid-cols-1 md:grid-cols-2 gap-6;
}

.bitstorm-grid-colors {
  @apply grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6;
}

Usage Guidelines

CSS Custom Properties

Use CSS custom properties for maximum compatibility and direct control. Perfect for vanilla CSS, Sass, or any CSS-in-JS solution.

Tailwind Classes

Use Tailwind utility classes for rapid development and consistent spacing. All design tokens are available as utility classes with semantic naming.

Component Classes

Use pre-built component classes for common UI patterns. These classes combine multiple design tokens for complete component styling.