Skip to main content
Stride includes five production-ready static brands. Each brand has a complete set of tokens defined in CSS, providing consistent theming across your entire application.

​
Available Static Brands

​
Stride (Default)

The default Stride Design System brand with professional blue colors. 
import { applyBrandTheme } from 'stride-ds';

applyBrandTheme('stride');
Design Characteristics:
  • Primary Colors: Blue (#0ea5e9)
  • Neutral Colors: Slate
  • Typography: Outfit (primary), Inter (secondary)
  • Button Radius: Full (pill-shaped)
  • Use Cases: Professional SaaS, dashboards, business applications
Color Palette:
CSS Variables (excerpt): 
.brand-stride {
  /* Primary colors */
  --brand-primary-500: #0ea5e9;
  --brand-primary-600: #0284c7;
  --brand-primary-700: #0369a1;
  
  /* Semantic mappings */
  --text-primary: var(--brand-neutral-900);
  --interactive-primary: var(--brand-primary-600);
  --border-focus: var(--brand-primary-500);
  
  /* Typography */
  --font-family-primary: 'Outfit', -apple-system, sans-serif;
  --font-family-secondary: 'Inter', -apple-system, sans-serif;
}

​
Coral

Warm, energetic brand with orange-red colors and sharp edges. 
applyBrandTheme('coral');
Design Characteristics:
  • Primary Colors: Orange (#f97316)
  • Neutral Colors: Warm-tinted grays
  • Typography: Poppins (primary), Open Sans (secondary)
  • Button Radius: 0 (sharp corners)
  • Use Cases: Creative agencies, design-forward products
Color Palette:
Unique Features: 
.brand-coral {
  /* Sharp button corners */
  --radius-button: 0;
  
  /* Warm neutral tints */
  --brand-neutral-100: #fdf4f0;
  --brand-neutral-500: #d4957c;
}

​
Forest

Natural, sustainable brand with green colors and generous spacing. 
applyBrandTheme('forest');
Design Characteristics:
  • Primary Colors: Green (#22c55e)
  • Neutral Colors: Cool-tinted grays
  • Typography: Roboto (primary), Source Sans Pro (secondary)
  • Spacing Scale: 1.2× (20% more spacious)
  • Use Cases: Environmental, health, wellness apps
Color Palette:
Unique Features: 
.brand-forest {
  /* Generous spacing */
  --spacing-scale: 1.2;
  --spacing-lg: calc(1rem * 1.2);    /* 1.2rem instead of 1rem */
  --spacing-xl: calc(1.5rem * 1.2);  /* 1.8rem instead of 1.5rem */
  
  /* Moderate border radius */
  --card-radius: var(--radius-md);
  --radius-button: var(--radius-sm);
}

​
Runswap

Bold, vibrant brand with pink/magenta colors. 
applyBrandTheme('runswap');
Design Characteristics:
  • Primary Colors: Pink/Magenta (#F60CBF)
  • Neutral Colors: Cool grays
  • Typography: Outfit (primary), Nunito (secondary)
  • Spacing Scale: 1.2× (generous like Forest)
  • Use Cases: Modern consumer apps, fitness, social platforms
Color Palette:
Unique Features: 
.brand-runswap {
  /* Bold primary color */
  --brand-primary-500: #F60CBF;
  --text-brand: var(--brand-primary-500);
  
  /* Additional semantic tokens */
  --bg-brand-muted: var(--brand-primary-100);
  --border-brand: var(--brand-primary-500);
  --border-brand-muted: var(--brand-primary-200);
  
  /* Spacing scale */
  --spacing-scale: 1.2;
}

​
Acme

Modern tech aesthetic with indigo/purple colors. 
applyBrandTheme('acme');
Design Characteristics:
  • Primary Colors: Indigo (#6366f1)
  • Neutral Colors: Cool blue-tinted grays
  • Typography: Inter (primary), JetBrains Mono (secondary)
  • Button Radius: Large (modern rounded)
  • Use Cases: Tech startups, developer tools, B2B SaaS
Color Palette:
Unique Features: 
.brand-acme {
  /* Tech-focused typography */
  --font-family-primary: 'Inter', -apple-system, sans-serif;
  --font-family-secondary: 'JetBrains Mono', monospace;
  
  /* Rounded components */
  --radius-button: var(--radius-lg);
  --card-radius: var(--radius-xl);
  
  /* Tech aesthetic tokens */
  --text-brand: var(--brand-primary-600);
  --bg-brand-muted: var(--brand-primary-50);
}

​
Applying Static Brands

​
Basic Usage

import { applyBrandTheme } from 'stride-ds';

// Apply a brand
applyBrandTheme('forest');
This function:
  1. Removes all existing brand classes
  2. Adds .brand-forest to <html>
  3. Saves choice to localStorage
  4. Applies transition animations (if enabled)

​
Get Current Brand

import { getCurrentBrand, getBrandById } from 'stride-ds';

const currentId = getCurrentBrand(); // 'forest'
const brand = getBrandById(currentId);
// { id: 'forest', name: 'Forest', description: '...' }

​
List All Brands

import { availableBrands } from 'stride-ds';

availableBrands.forEach(brand => {
  console.log(brand.id, brand.name);
});
// stride Stride
// coral Coral
// forest Forest
// runswap Runswap
// acme Acme

​
Dark Mode Support

All static brands have automatic dark mode variants: 
// Enable dark mode
document.documentElement.classList.add('dark');

// Dark mode uses these selectors:
// .brand-stride.dark { ... }
// .brand-coral.dark { ... }
Dark Mode Token Mappings: 
/* Example: Stride Dark */
.brand-stride.dark {
  /* Inverted semantic tokens */
  --text-primary: var(--brand-neutral-50);    /* Was 900 in light */
  --bg-primary: var(--brand-neutral-900);     /* Was 0 in light */
  --border-primary: var(--brand-neutral-700); /* Was 200 in light */
  
  /* Interactive adjustments */
  --interactive-secondary: var(--brand-neutral-800);
  --interactive-ghost-hover: var(--brand-neutral-800);
}

​
Brand Comparison Table

BrandPrimary ColorTypographyButton RadiusSpacingBest For
StrideBlueOutfit/InterFull1.0×Business/SaaS
CoralOrangePoppinsNone (0)1.0×Creative/Design
ForestGreenRobotoSmall1.2×Health/Environment
RunswapPinkOutfit/NunitoDefault1.2×Consumer/Social
AcmeIndigoInter/MonoLarge1.0×Tech/Developer Tools

​
Customizing Static Brands

While static brands are pre-defined, you can override specific tokens: 
/* In your custom CSS */
.brand-stride {
  /* Override just the primary color */
  --brand-primary-500: #3b82f6; /* Different blue */
  
  /* All semantic tokens automatically update */
  /* because they reference --brand-primary-500 */
}
For more flexibility, consider using Dynamic Brands instead.

​
TypeScript Definitions

import type { BrandTheme } from 'stride-ds';

interface BrandTheme {
  id: string;          // 'stride' | 'coral' | 'forest' | 'runswap' | 'acme'
  name: string;        // Display name
  description: string; // Brand description
}

// Available exports
export const strideBrand: BrandTheme;
export const coralBrand: BrandTheme;
export const forestBrand: BrandTheme;
export const runswapBrand: BrandTheme;
export const acmeBrand: BrandTheme;
export const availableBrands: BrandTheme[];

​
Next Steps

Build docs developers (and LLMs) love

Get started for freeTalk to us