Design System

The DocBits Design System provides a comprehensive set of design tokens, components, and guidelines for building consistent user interfaces across all DocBits applications.

Overview

Our design system is built on several core principles:

• Consistency - Uniform visual language across all products
• Accessibility - WCAG 2.1 AA compliant with inclusive color choices
• Responsiveness - Works beautifully on all screen sizes
• Theming - First-class dark mode and custom theme support
• Type Safety - Documented color and typography tokens

Core Sections

Colors

The complete color palette with usage guidelines, accessibility information, and CSS variables.

• Brand Colors: Primary blue, secondary green, accent purple
• Status Colors: Success, error, warning, info with semantic meaning
• Dashboard Colors: Optimized for tables, charts, and data visualization
• Dark Mode: Carefully selected colors for dark theme with proper contrast

View Colors →

Typography

Font system with scales, weights, and component guidelines.

• Font Families: Roboto (primary), Kanit (headings), JetBrains Mono (code)
• Sizing Scale: 12px to 48px with logical progression
• Font Weights: Light to Bold with semantic purpose
• Component Typography: Labels, buttons, tables, badges

View Typography →

Dark Mode

Implementation details and best practices for dark mode support.

• Enabling Methods: CSS class, data attribute, media query preference
• Color Mapping: Light/dark transitions for all tokens
• Component Support: Complete dark mode for all components
• Performance: GPU-accelerated transitions without JavaScript overhead

View Dark Mode →

Usage Guidelines

CSS Variables

All design tokens are available as CSS custom properties:

:root {
  --q-primary: #2388AE;
  --q-secondary: #34eea9;
  --q-accent: #9999d6;
  --dashboard-text-color: #707070;
  /* ... hundreds more */
}

Apply variables in your components:

<template>
  <div class="card">
    <h2>{{ title }}</h2>
    <p>{{ description }}</p>
  </div>
</template>

<style scoped>
.card {
  background: var(--dashboard-surface-color);
  color: var(--dashboard-text-color);
  border: 1px solid var(--dashboard-border-color);
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
}
</style>

Color Independence

Never rely on color alone to convey meaning. Always combine with:

• Icons - Visual indicators like checkmarks, X marks, warning symbols
• Text Labels - Always include text for status (Success, Error, Warning)
• Patterns - Use different patterns or borders for users with color blindness
• Position - Use layout and positioning as additional context

Accessibility Checklist

When using design tokens:

• [ ] Color contrast ratio meets WCAG AA (4.5:1 for text, 3:1 for UI)
• [ ] Information is not conveyed by color alone
• [ ] Dark mode alternative provided for all colors
• [ ] Focus states clearly visible (2px outline minimum)
• [ ] Touch targets minimum 44x44px
• [ ] Animation respects prefers-reduced-motion

Component Styling Patterns

Using Design Tokens in Components

<template>
  <button class="btn btn-primary">
    Click me
  </button>
</template>

<style scoped>
.btn {
  padding: 8px 16px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  font-weight: 500;
  transition: all 300ms ease;
}

.btn-primary {
  background: var(--q-primary);
  color: white;
}

.btn-primary:hover {
  background: color-mix(in srgb, var(--q-primary) 90%, black);
}

.btn-primary:focus {
  outline: 2px solid var(--q-primary);
  outline-offset: 2px;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  .btn-primary {
    background: var(--q-secondary);
  }
}
</style>

Theme Customization

To override default design system values in your application:

// In your root component or main.ts
import { computed } from 'vue'

export const useTheme = () => {
  const isDark = computed(() =>
    document.documentElement.classList.contains('dark')
  )

  const setTheme = (dark: boolean) => {
    if (dark) {
      document.documentElement.classList.add('dark')
      localStorage.setItem('theme', 'dark')
    } else {
      document.documentElement.classList.remove('dark')
      localStorage.setItem('theme', 'light')
    }
  }

  const toggleTheme = () => {
    setTheme(!isDark.value)
  }

  return { isDark, setTheme, toggleTheme }
}

Design System Components

The design system powers all DocBits components including:

• Table Components - ColumnOrderBy, RowSelectionCheckbox, BulkActionsMenu, RowActionsMenu
• Unified Tables - DocBitsTable, UnifiedTable

All components automatically use design system tokens for consistent styling.

Browser Support

The design system is supported in all modern browsers:

• Chrome 88+
• Firefox 78+
• Safari 14+
• Edge 88+

CSS custom properties (variables) are used throughout - ensure your target browsers support them.

Contributing to the Design System

When adding new design tokens:

1. Use semantic naming: --{category}-{element}-{state}
2. Document the purpose and use cases
3. Provide both light and dark mode values
4. Verify WCAG AA color contrast (4.5:1 for text, 3:1 for UI)
5. Test with prefers-reduced-motion media query
6. Update this documentation

Related Resources

• Colors - Complete color palette
• Typography - Font system and sizing
• Dark Mode - Dark theme implementation
• Components - See design system in action
• WCAG 2.1 - Accessibility standards