Colors

The color system of the LYD Design System - Premium colors for the luxury segment

Brand Colors

The core colors of the LYD Corporate Identity form the foundation of our Design System.

Deep Blue (Primary)
#000066
--lyd-primary
Royal Blue
#3366CC
--lyd-royal-blue
Accent
#E8F0FE
--lyd-accent
Grey
#666666
--lyd-grey
Line
#E5E7EB
--lyd-line
Text
#111111
--lyd-text

Luxury Gradients

Premium Gradient System

Our gradients give the Design System a luxurious appearance and reinforce the premium positioning.

Primary Gradient
Hover Gradient
Subtle Gradient
Glass Gradient
Premium Gradient
Radial Gradient
Usage:

background: var(--lyd-gradient-primary);
background: var(--lyd-gradient-hover);
background: var(--lyd-gradient-subtle);

Semantic Colors

Functional colors for feedback and status communication.

Success
#10b981
--lyd-success
Warning
#f59e0b
--lyd-warning
Error
#ef4444
--lyd-error

Gray Scale

A balanced gray palette for hierarchy and structure.

Gray 100
#f3f4f6
--lyd-gray-100
Gray 200
#e5e7eb
--lyd-gray-200
Gray 300
#d1d5db
--lyd-gray-300
Gray 400
#9ca3af
--lyd-gray-400
Gray 500
#6b7280
--lyd-gray-500
Gray 600
#4b5563
--lyd-gray-600
Gray 700
#374151
--lyd-gray-700
Gray 800
#1f2937
--lyd-gray-800
Gray 900
#111827
--lyd-gray-900

Color Contrast

Accessibility Guidelines

All color combinations meet WCAG 2.1 AA standards for optimal readability.

White on Primary
AAA
White on Royal Blue
AA
Primary on Accent
AAA
Primary on White
AAA

Glassmorphism Effects

Glass Effects

Modern glassmorphism effects for premium UI elements.

Variables:

--glass-white: rgba(255, 255, 255, 0.08);
--glass-blur: blur(20px);
--glass-border: 1px solid rgba(255, 255, 255, 0.18);


Usage:

background: var(--glass-white);
backdrop-filter: var(--glass-blur);
border: var(--glass-border);