Using the Stylesheet - Deepgram Component Showcase

BEM Naming Convention

All component classes use the dg- prefix with BEM (Block Element Modifier) methodology. This avoids conflicts with your own styles and other libraries.

.dg-{name}

The root component class.

Example: .dg-btn, .dg-card

.dg-{name}__{element}

A child part of the block.

Example: .dg-card__header, .dg-card__body

.dg-{name}--{modifier}

A variant of the block.

Example: .dg-btn--primary, .dg-card--compact

<!-- Block + Modifier -->
<button class="dg-btn dg-btn--primary">Save</button>

<!-- Block + Elements -->
<div class="dg-card">
  <div class="dg-card__header">
    <h3 class="dg-card-heading">Title</h3>
  </div>
  <div class="dg-card__body">
    <p class="dg-prose">Content</p>
  </div>
</div>

<!-- Block + Element + Modifier -->
<div class="dg-card dg-card--structured">
  <div class="dg-card__footer dg-card__footer--bordered">
    <button class="dg-btn dg-btn--ghost">Cancel</button>
  </div>
</div>

Component Categories

Browse all available components in the sidebar, organized by category.

Design Tokens

All design tokens are available as both CSS custom properties and Tailwind utility classes. See the full token reference on the Brand pages.

/* CSS custom properties */
.my-element {
  color: var(--color-dg-text);
  background: var(--color-dg-charcoal);
  border: 1px solid var(--color-dg-border);
  padding: var(--spacing-dg-md);
}

/* Tailwind utilities (if using @deepgram/styles/theme) */
<div class="bg-dg-charcoal text-dg-text border border-dg-border p-dg-md">
  ...
</div>

Colors

dg-primary

dg-text

dg-muted

dg-charcoal

dg-border

Status

dg-success

dg-warning

dg-danger

Light / Dark Mode

@deepgram/styles uses the CSS light-dark() function for all color tokens. This means theme switching is automatic — it follows the user's OS preference with zero configuration.

Automatic (default)

No setup needed. The stylesheet sets color-scheme: light dark on :root, so it follows the OS preference automatically.

Force a mode with CSS

:root { color-scheme: dark; }  /* Always dark */
:root { color-scheme: light; } /* Always light */

Toggle with JavaScript

// Force dark
document.documentElement.style.colorScheme = 'dark';

// Force light
document.documentElement.style.colorScheme = 'light';

// Back to system preference
document.documentElement.style.removeProperty('color-scheme');

Theme Utilities

For apps that need a theme toggle with localStorage persistence, use the built-in utilities. They handle color-scheme, localStorage, and change events for you.

import { setLight, setDark, setSystem, getTheme, restoreTheme, onThemeChange } from '@deepgram/styles/utils';

// Set the theme (persists to localStorage)
setLight();   // Force light mode
setDark();    // Force dark mode
setSystem();  // Follow OS preference

// Read current theme
const theme = getTheme(); // 'light' | 'dark' | 'system'

// Restore saved theme on page load (call in <head> to prevent flash)
restoreTheme();

// Listen for changes
const unsubscribe = onThemeChange((theme) => {
  console.log('Theme changed to:', theme);
});

Brand Customization

Two CSS variables control the entire brand palette. Gradient borders, glow effects, buttons, links, and highlights all derive from these automatically.

:root {
  --dg-primary: #ff6b35;   /* Your primary brand color */
  --dg-secondary: #4ecdc4; /* Your secondary brand color */
}

In light mode, brand colors automatically switch to WCAG-compliant darker variants. You can scope brand colors to a section:

.partner-section {
  --dg-primary: #a855f7;
  --dg-secondary: #ec4899;
}

Base Font Size

The entire design system uses rem units. Change the base font size and everything scales proportionally.

:root {
  --dg-base-font-size: 18px; /* Scale everything up */
}

@media (max-width: 768px) {
  :root {
    --dg-base-font-size: 14px; /* Smaller on mobile */
  }
}

Logo Imports

12 production-ready SVG logos are available as package exports. Adaptive variants use embedded @media (prefers-color-scheme) to switch automatically.

import wordmark from '@deepgram/styles/logo/wordmark';           // Adaptive
import wordmarkLight from '@deepgram/styles/logo/wordmark-light'; // For light backgrounds
import wordmarkDark from '@deepgram/styles/logo/wordmark-dark';   // For dark backgrounds

// Also available: lettermark, lettermark-square, lettermark-circle
// Each with adaptive, -light, and -dark variants

Wordmark Full "Deepgram" text logo

Lettermark Compact "dg" mark

Square Lettermark in square

Circle Lettermark in circle