Color Tokens

The VELYON color palette is designed for dark-first interfaces with obsidian backgrounds, azure accents, and glassmorphic layering. Click any value to copy it to your clipboard.

Brand Palette

7
AAA

Obsidian

Primary background

AAA

Graphite

Surface layer 1

AA

Surface

Surface layer 2

Fail

Azure

Primary accent

AAA

Gold

Secondary accent

AAA

Off-White

Primary text

AAA

Muted

Secondary text

Azure Scale

11

Semantic Colors

4

Glassmorphism Layers

3

Glass

--velyon-glass

Default glass layer

rgba(255,255,255,0.03)

Glass Heavy

--velyon-glass-heavy

Elevated glass layer

rgba(255,255,255,0.06)

Border

--velyon-border

Glass borders

rgba(255,255,255,0.08)

Code Reference

globals.csscss
1:root {
2  /* Core palette */
3  --velyon-obsidian: #0A0A1A;
4  --velyon-graphite: #121228;
5  --velyon-surface:  #1A1A3A;
6  --velyon-azure:    #3B82F6;
7  --velyon-gold:     #F59E0B;
8  --velyon-offwhite: #E8E6F0;
9  --velyon-muted:    #8B8BA3;
10

11  /* Semantic */
12  --velyon-success: #10B981;
13  --velyon-warning: #F59E0B;
14  --velyon-error:   #EF4444;
15  --velyon-info:    #3B82F6;
16

17  /* Glassmorphism */
18  --velyon-glass:       rgba(255,255,255,0.03);
19  --velyon-glass-heavy: rgba(255,255,255,0.06);
20  --velyon-border:      rgba(255,255,255,0.08);
21}