Color System Documentation

Color System

Comprehensive documentation of our color palette and CSS utilities

Our color system is designed to create a consistent and visually appealing user interface. It includes brand colors, action colors, and a range of neutral tones to create depth and hierarchy in the UI.

Brand Colors

These are our main brand colors. They define the visual identity of our brand and should be used consistently across all platforms and materials.

primary

Primary (Indigo 500)

#6366f1

primary-dark

Primary Dark (Indigo 700)

#4338ca

primary-light

Primary Light (Indigo 300)

#a5b4fc

secondary

Secondary (Purple 500)

#a855f7

secondary-dark

Secondary Dark (Purple 700)

#7e22ce

secondary-light

Secondary Light (Purple 300)

#d8b4fe

Action Colors

Action colors provide feedback and guide users through the interface. They signal success, warning, danger, or informational states.

success

Success (Emerald 500)

#10b981

success-dark

Success Dark (Emerald 600)

#059669

success-light

Success Light (Emerald 300)

#6ee7b7

warning

Warning (Amber 500)

#f59e0b

warning-dark

Warning Dark (Amber 600)

#d97706

warning-light

Warning Light (Amber 300)

#fcd34d

danger

Danger (Red 500)

#ef4444

danger-dark

Danger Dark (Red 600)

#dc2626

danger-light

Danger Light (Red 300)

#fca5a5

info

Info (Blue 500)

#3b82f6

info-dark

Info Dark (Blue 600)

#2563eb

info-light

Info Light (Blue 300)

#93c5fd

Gray Scale

Our neutral gray scale provides a foundation for UI elements, backgrounds, text, and borders. These colors help establish visual hierarchy and improve readability.

gray-50

Gray 50

#f9fafb

gray-100

Gray 100

#f3f4f6

gray-200

Gray 200

#e5e7eb

gray-300

Gray 300

#d1d5db

gray-400

Gray 400

#9ca3af

gray-500

Gray 500

#6b7280

gray-600

Gray 600

#4b5563

gray-700

Gray 700

#374151

gray-800

Gray 800

#1f2937

gray-900

Gray 900

#111827

Gradients

Gradients add depth and visual interest to UI elements. Our predefined gradients are based on our brand colors and can be used for buttons, backgrounds, or decorative elements.

gradient-primary

gradient-primary-dark

gradient-primary-light

gradient-secondary-to-primary

gradient-secondary-to-primary-dark

Usage Examples

Zmienne CSS

:root {
  --color-primary: #6366f1;
  --color-primary-dark: #4338ca;
  --color-primary-light: #a5b4fc;
}

.custom-element {
  color: var(--color-primary);
  border-color: var(--color-primary-dark);
  background-color: var(--color-primary-light);
}

Klasy tła

<div class="bg-brand-primary">
  Tło w kolorze primary
</div>

<div class="bg-success">
  Tło w kolorze success
</div>

<div class="bg-warning-light">
  Tło w kolorze warning-light
</div>

Klasy tekstu

<p class="text-brand-primary">
  Tekst w kolorze primary
</p>

<p class="text-danger">
  Tekst w kolorze danger
</p>

<p class="text-info-dark">
  Tekst w kolorze info-dark
</p>

Klasy obramowania

<div class="border border-brand-primary">
  Obramowanie w kolorze primary
</div>

<div class="border-2 border-danger">
  Obramowanie w kolorze danger
</div>

<div class="border-l-4 border-warning">
  Lewe obramowanie w kolorze warning
</div>

Gradient Examples

Gradienty CSS

<div class="gradient-primary p-4 text-white">
  Element z gradientem primary
</div>

<div class="gradient-secondary-to-primary p-4 text-white">
  Element z gradientem secondary-to-primary
</div>

<p class="gradient-text font-bold text-xl">
  Tekst z gradientem
</p>

CSS Variables Reference

All colors are available as CSS variables that can be used in your custom styles. Below is the complete list of color variables.

Variable Name	Value	Description
--color-primary	#6366f1	Primary (Indigo 500)
--color-primary-dark	#4338ca	Primary Dark (Indigo 700)
--color-primary-light	#a5b4fc	Primary Light (Indigo 300)
--color-secondary	#a855f7	Secondary (Purple 500)
--color-secondary-dark	#7e22ce	Secondary Dark (Purple 700)
--color-secondary-light	#d8b4fe	Secondary Light (Purple 300)
--color-success	#10b981	Success (Emerald 500)
--color-success-dark	#059669	Success Dark (Emerald 600)
--color-success-light	#6ee7b7	Success Light (Emerald 300)
--color-warning	#f59e0b	Warning (Amber 500)
--color-warning-dark	#d97706	Warning Dark (Amber 600)
--color-warning-light	#fcd34d	Warning Light (Amber 300)
--color-danger	#ef4444	Danger (Red 500)
--color-danger-dark	#dc2626	Danger Dark (Red 600)
--color-danger-light	#fca5a5	Danger Light (Red 300)
--color-info	#3b82f6	Info (Blue 500)
--color-info-dark	#2563eb	Info Dark (Blue 600)
--color-info-light	#93c5fd	Info Light (Blue 300)

Best Practices

Do

Use brand colors consistently for primary actions and branding elements
Use action colors according to their semantic meaning (success for positive outcomes, danger for errors, etc.)
Ensure sufficient contrast between text and background colors for accessibility
Use CSS variables instead of hardcoded color values

Don't

Mix color systems or introduce custom colors without consulting the design team
Use action colors in ways that contradict their semantic meaning
Create low-contrast text and background combinations
Hardcode hex color values in your CSS or inline styles