Colors

The DocBits color system is built on a carefully selected palette designed for clarity, accessibility, and visual consistency across the platform.

Brand Colors

The foundation of the DocBits visual identity.

Primary Blue#2388AEvar(--q-primary)

Secondary Green#34eea9var(--q-secondary)

Accent Purple#9999d6var(--q-accent)

Usage:

Primary Blue (#2388AE) - Main actions, links, active states, focus indicators
Secondary Green (#34eea9) - Secondary actions, success indicators (dark mode primary)
Accent Purple (#9999d6) - Tertiary accents, highlights

Status Colors

Semantic colors for indicating different states and conditions.

Success#55b559var(--docbits-positive)

Error#d00000var(--docbits-negative)

Warning#f2c037var(--docbits-warning)

Info#31ccecvar(--docbits-info)

Usage:

Success (#55b559) - Confirmed actions, successful operations, valid states
Error (#d00000) - Error messages, invalid states, destructive actions
Warning (#f2c037) - Warnings, cautions, pending states
Info (#31ccec) - Informational messages, help text

Dashboard Colors

Colors specifically for the dashboard and table components.

Light Mode

Surface#ffffffvar(--dashboard-surface-color)

Table Row Even#fafbfcvar(--dashboard-table-row-even-bg)

Table Row Odd#ffffffvar(--dashboard-table-row-odd-bg)

Text#707070var(--dashboard-text-color)

Text Disabled#aeaeaevar(--dashboard-text-disabled)

Border#e9e9e9var(--dashboard-line-color)

Dark Mode

Surface#1a1a1avar(--dashboard-surface-color)

Table Row Even#2a2a2avar(--dashboard-table-row-even-bg)

Table Row Odd#383838var(--dashboard-table-row-odd-bg)

Text#b0b0b0var(--dashboard-text-color)

Text Disabled#5e5e5evar(--dashboard-text-disabled)

Border#5e5e5evar(--dashboard-line-color)

Utility Colors

Additional colors for specific use cases.

Color	Hex	CSS Variable	Usage
Light Blue	#3197fa	`--dashboard-light-blue`	Highlights, secondary actions
Accent Yellow	#f99e34	`--dashboard-accent-yellow`	Warnings, caution states
Success Green	#22a79e	`--dashboard-success-green`	Success indicators
Error Red	#d00000	`--dashboard-error-red`	Error states
Neutral Grey	#b0b0b0	`--dashboard-neutral-grey`	Neutral elements

Using Colors in Components

CSS Variables

All colors are available as CSS variables for easy customization:

css

/* Light mode (default) */
:root {
  --q-primary: #2388AE;
  --q-secondary: #34eea9;
  --dashboard-text-color: #707070;
  --dashboard-table-header-bg: #ffffff;
}

/* Dark mode */
body.dark {
  --q-primary: #34eea9;
  --dashboard-text-color: #b0b0b0;
  --dashboard-table-header-bg: #292929;
}

In Vue Components

vue

<template>
  <div class="my-component">
    <button class="primary-button">Action</button>
    <span class="error-text">Error message</span>
  </div>
</template>

<style scoped>
.primary-button {
  background-color: var(--q-primary);
  color: white;
}

.error-text {
  color: var(--docbits-negative);
}
</style>

Accessibility

Color Contrast

All color combinations meet WCAG 2.1 AA accessibility standards:

Combination	Contrast Ratio	Standard
Primary Blue on White	4.8:1	✅ AA (Large)
Primary Blue on Dark	5.2:1	✅ AA (Large)
Text on Background (Light)	5.1:1	✅ AA
Text on Background (Dark)	5.3:1	✅ AA

Color Independence

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

Icons or symbols
Text labels
Patterns or textures
Status indicators

Example:

vue

<!-- ❌ Don't: Color only -->
<span style="color: var(--docbits-negative);">Error</span>

<!-- ✅ Do: Color + text + icon -->
<span class="error">
  <IconError />
  Error: Invalid input
</span>

Dark Mode Implementation

The design system supports first-class dark mode:

html

<!-- Enable dark mode -->
<body class="dark">
  <!-- Content automatically uses dark mode colors -->
</body>

All colors automatically switch when dark mode is enabled:

css

/* Light mode (default) */
:root {
  --q-primary: #2388AE;
}

/* Dark mode */
body.dark {
  --q-primary: #34eea9; /* Inverted for visibility */
}

Color Palette Visualization

Full Spectrum (Light Mode)

Primary       #2388AE ████████████
Secondary     #34eea9 ████████████
Accent        #9999d6 ████████████
Positive      #55b559 ████████████
Negative      #d00000 ████████████
Warning       #f2c037 ████████████
Info          #31ccec ████████████

Neutrals (Light Mode)

Surface       #ffffff ████████████
Text          #707070 ████████████
Text Disabled #aeaeae ████████████
Border        #e9e9e9 ████████████

Neutrals (Dark Mode)

Surface       #1a1a1a ████████████
Text          #b0b0b0 ████████████
Text Disabled #5e5e5e ████████████
Border        #5e5e5e ████████████

Custom Theming

To customize colors for your application:

css

/* Override in your app CSS */
:root {
  --q-primary: your-color;
  --dashboard-text-color: your-color;
  --dashboard-table-header-bg: your-color;
}

body.dark {
  --q-primary: your-dark-color;
  --dashboard-text-color: your-dark-color;
  --dashboard-table-header-bg: your-dark-color;
}

Typography - Font system and text styles
Dark Mode - Dark theme implementation details
Components - How colors are used in components

Colors ​

Brand Colors ​

Status Colors ​

Dashboard Colors ​

Light Mode ​

Dark Mode ​

Utility Colors ​

Using Colors in Components ​

CSS Variables ​

In Vue Components ​

Accessibility ​

Color Contrast ​

Color Independence ​

Dark Mode Implementation ​

Color Palette Visualization ​

Full Spectrum (Light Mode) ​

Neutrals (Light Mode) ​

Neutrals (Dark Mode) ​

Custom Theming ​

Related Resources ​