Colors

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).

Blue (Primary)

0

e7f

1

b3e

2

6fc

3

45b

4

3da

5

169

6

0f6

7

0b5

8

084

9

052

Violet (Secondary)

0

f3e

1

d9c

2

b89

3

9f7

4

8e6

5

7e5

6

5d3

7

442

8

2c1

9

180

Red (Error)

0

fce

1

f7c

2

f08

3

ea6

4

e84

5

e63

6

a12

7

9a1

8

6e1

9

420

Green (Success)

0

ebf

1

c7e

2

a2d

3

8dd

4

77b

5

5ab

6

3f7

7

2d6

8

1d4

9

0e2

Yellow (Warning)

0

fef

1

fde

2

fce

3

fad

4

f9c

5

e79

6

a26

7

a37

8

755

9

473

Orange

0

fff

1

ffe

2

ffc

3

ffb

4

ffa

5

ff8

6

d17

7

a35

8

754

9

472

Cyan

0

e5f

1

b8f

2

8ae

3

5dd

4

30d

5

15c

6

11a

7

0d8

8

095

9

053

Pink

0

fef

1

fcd

2

f9b

3

f79

4

f58

5

f26

6

cc5

7

9e3

8

702

9

421

Indigo

0

eef

1

e0e

2

c7d

3

a5b

4

818

5

636

6

423

7

332

8

241

9

151

Gray

0

faf

1

f7f

2

eee

3

e3e

4

bdb

5

9e9

6

808

7

757

8

424

9

212

Typography Colors

Aa

Primary Text

#383838

Aa

Secondary Text

#808080

Aa

Disabled Text

#CCCCCC

Color Usage Guidelines

Do’s

  • Use Primary Blue as the dominant brand color
  • Maintain sufficient contrast for accessibility (WCAG 2.1 AA)
  • Use semantic colors sparingly and with purpose
  • Apply the gradient for hero sections and key visuals
  • Reference colors by their palette index (e.g., blue[5])

Don’ts

  • Don’t use semantic colors as primary backgrounds
  • Don’t combine too many colors in one design
  • Don’t alter the brand colors (no tints, shades, or opacity changes for core brand elements)
  • Don’t use colors that clash with our palette
LogosTypography