Colors
Our color palette reflects Frequency’s innovative spirit and professional approach. Each color has been carefully selected to work harmoniously while providing flexibility for various applications.
Primary Palette
The primary palette forms the foundation of our visual identity. Frequency Blue is our signature color.
Primary
#169BDE
blue[5]
Primary Light
#45B2E1
blue[3]
Primary Dark
#0B5A8C
blue[7]
Secondary Palette
Our secondary palette adds depth and sophistication, perfect for accents and supporting elements.
Secondary
#7E57C2
violet[5]
Secondary Light
#B89DDA
violet[2]
Secondary Dark
#442E6F
violet[7]
Semantic Colors
Semantic colors communicate meaning (success, warning, error states).
Error
#E63459
red[5]
Warning
#E79E26
yellow[5]
Success
#5AB267
green[5]
Extended 10-Color Palette
Our complete palette includes 10 colors, each with 10 shades (0-9). The main color is at index 5 (Mantine format). Click any swatch to copy its hex value.
Blue (Primary)
0
#e7f5fb
1
#b3e0f2
2
#6fc4e8
3
#45b2e1
4
#3da8dc
5
#169bde
6
#0f6c9b
7
#0b5a8c
8
#084464
9
#052e3c
Violet (Secondary)
0
#f3edf7
1
#d9c5ea
2
#b89dda
3
#9f7dd0
4
#8e6ac9
5
#7e57c2
6
#5d3f95
7
#442e6f
8
#2c1e4a
9
#180f27
Red (Error)
0
#fce8ed
1
#f7c0ce
2
#f0899d
3
#ea6582
4
#e84d6d
5
#e63459
6
#a1243e
7
#9a1d31
8
#6e1523
9
#420d15
Green (Success)
0
#ebf7ed
1
#c7e8cd
2
#a2d9ac
3
#8dd99c
4
#77bf81
5
#5ab267
6
#3f7d48
7
#2d6839
8
#1d4425
9
#0e2011
Yellow (Warning)
0
#fef8ec
1
#fdefc7
2
#fce49e
3
#fad875
4
#f9cd4c
5
#e79e26
6
#a26f1b
7
#a37518
8
#755410
9
#473309
Orange
0
#fff3e6
1
#ffe0c2
2
#ffcd9e
3
#ffb87a
4
#ffa356
5
#ff8e32
6
#d17820
7
#a35e19
8
#754411
9
#472a0a
Cyan
0
#e5f9fc
1
#b8f0f9
2
#8ae6f5
3
#5ddcf2
4
#30d3ef
5
#15c5de
6
#11a3b8
7
#0d8091
8
#095c6a
9
#053843
Pink
0
#fef0f5
1
#fcd5e4
2
#f9bad2
3
#f79fc1
4
#f584af
5
#f2699d
6
#cc5380
7
#9e3f63
8
#702b46
9
#421829
Indigo
0
#eef2ff
1
#e0e7ff
2
#c7d2fe
3
#a5b4fc
4
#818cf8
5
#6366f1
6
#4239ce
7
#332ba1
8
#241e74
9
#151047
Gray
0
#fafafa
1
#f7f7f7
2
#eeeeee
3
#e3e3e3
4
#bdbdbd
5
#9e9e9e
6
#808080
7
#757575
8
#424242
9
#212121
Typography Colors
Aa
Primary Text
#212121
gray[9]
Aa
Secondary Text
#808080
gray[6]
Aa
Disabled Text
#CCCCCC
Gradients
Our brand gradients add energy and depth. Use them for CTAs, headers, and feature highlights. Click any gradient to copy the CSS.
Frequency Alive
Primary brand gradient
#2C9EE0 → #7727F0
Electric Allure
Tech-forward, data viz
#4442F0 → #36B7CD
Bright Jewel
Fresh, success states
#2DE1B9 → #2C9EE0
Specialty Attraction
Premium features
#6A0D9E → #6E18F0
Eyecatching Error
Errors, warnings
#FF7009 → #E23646
Caution Flag
Caution, gold tier
#DA8B01 → #F6B13E
Gradient CSS
.gradient-frequency-alive { background: linear-gradient(135deg, #2C9EE0 0%, #7727F0 100%); }
.gradient-electric-allure { background: linear-gradient(135deg, #4442F0 0%, #36B7CD 100%); }
.gradient-bright-jewel { background: linear-gradient(135deg, #2DE1B9 0%, #2C9EE0 100%); }
.gradient-specialty-attraction { background: linear-gradient(135deg, #6A0D9E 0%, #6E18F0 100%); }
.gradient-eyecatching-error { background: linear-gradient(135deg, #FF7009 0%, #E23646 100%); }
.gradient-caution-flag { background: linear-gradient(135deg, #DA8B01 0%, #F6B13E 100%); }Recommended Color Proportions
50%
White Backgrounds
20%
Primary Blue
15%
Dark Text & UI
10%
Secondary Violet
5%
Semantic (Success)
Half your interface is background — white in light mode, dark in dark mode. The 15% text & UI layer inverts with it: dark text on light backgrounds, light text on dark backgrounds. Blue is the primary brand signal. Violet adds character. Semantic colors appear only when they carry meaning.
Color Usage Guidelines
Don't
Don't combine too many colors in one design
Do
Use Primary Blue as the dominant brand color
Don't
Don't use colors that clash with our palette
Do
Maintain sufficient contrast for accessibility (WCAG 2.1 AA)
Don't
Don't use semantic colors as primary backgrounds
Do
Use semantic colors sparingly and with purpose
Don't
Don't alter the brand colors (no tints, shades, or opacity changes for core brand elements)
Do
Reference colors by their palette index (e.g., blue[5])