Foundation
Colors

Colors

Our color system is designed to establish a flexible range of colors that support our brand, comms, and product teams. Lualtek products rely on a full-ranged color palette which includes twelve shades for each color.

Lualtek UI provides a full-featured color collection as tokens. Each color is carefully defined to match the contrast criteria.

Support

The support palette is meant to include all the secondary colors which are commonly used across the design but without being part of a color scale.

  • black

    #000000
  • white

    #ffffff

Brand

This minimal palette includes three shades of the brand color, which is used as accent color across the design system.

  • 0

    #f6f5fd
  • 5

    #f1f0ff
  • 10

    #e8e5ff
  • 20

    #dad6ff
  • 30

    #beb8ff
  • 40

    #8b80fe
  • 50

    #6f61ff
  • 60

    #5746ff
  • 70

    #4233db
  • 80

    #362bb1
  • 90

    #261e6d
  • 100

    #201c49

Primary

The primary palette includes the main and the most used color across the brand and digital products. This palette is often combined with the brand color palette which is used as accent color.

  • 0

    #f9f7ff
  • 5

    #f5f4fb
  • 10

    #eeedf5
  • 20

    #e4e2f1
  • 30

    #cfcbe1
  • 40

    #9a94b6
  • 50

    #6b648a
  • 60

    #4d476b
  • 70

    #393356
  • 80

    #211c3c
  • 90

    #171131
  • 100

    #140f29

Literal colors

These color tokens can be used for multiple purposes and they don't have a specific meaning.

  • Purple
    • 0

      #f9f6fd
    • 5

      #f4ebff
    • 10

      #eee1fd
    • 20

      #e9d5ff
    • 30

      #d8b4ff
    • 40

      #c183fe
    • 50

      #a856f6
    • 60

      #9335e9
    • 70

      #7e1fcf
    • 80

      #6b20a9
    • 90

      #591a89
    • 100

      #48186e
  • Blue
    • 0

      #f1f6fc
    • 5

      #e6f1fd
    • 10

      #dceafd
    • 20

      #bedbff
    • 30

      #91c5ff
    • 40

      #62a5f8
    • 50

      #3a82f7
    • 60

      #2362ee
    • 70

      #1c4dda
    • 80

      #1e40af
    • 90

      #1d3a8b
    • 100

      #192e6b
  • Cyan
    • 0

      #ecfeff
    • 5

      #defbfd
    • 10

      #d3f9fd
    • 20

      #a2f4fd
    • 30

      #60e9fb
    • 40

      #30d2ed
    • 50

      #00b6d4
    • 60

      #0d91b2
    • 70

      #18748f
    • 80

      #0f5e76
    • 90

      #104e64
    • 100

      #0c3e51
  • Green
    • 0

      #ecfdf5
    • 5

      #e2faee
    • 10

      #d1fae5
    • 20

      #a7f3d0
    • 30

      #6ee7b7
    • 40

      #3bd29a
    • 50

      #0ab981
    • 60

      #009669
    • 70

      #147758
    • 80

      #005f46
    • 90

      #0d4e3b
    • 100

      #083e2f
  • Yellow
    • 0

      #fffbec
    • 5

      #fef6d8
    • 10

      #fef0bb
    • 20

      #fee685
    • 30

      #fbd352
    • 40

      #fabf2f
    • 50

      #f39f1d
    • 60

      #e39000
    • 70

      #d07d00
    • 80

      #b26000
    • 90

      #8a4c09
    • 100

      #713c00
  • Red
    • 0

      #fcf3f3
    • 5

      #ffe7e7
    • 10

      #fcd9d9
    • 20

      #ffc3c3
    • 30

      #faa6a6
    • 40

      #fa6f70
    • 50

      #f04343
    • 60

      #de2023
    • 70

      #b91d1c
    • 80

      #991c1c
    • 90

      #7e1f1e
    • 100

      #611314
  • Indigo
    • 0

      #f0f4ff
    • 5

      #e8ecfb
    • 10

      #d9e1fe
    • 20

      #c0caf4
    • 30

      #95a4ef
    • 40

      #6877e1
    • 50

      #4252ce
    • 60

      #3241bb
    • 70

      #1d27a0
    • 80

      #141c85
    • 90

      #0d1467
    • 100

      #070c50
  • Salmon
    • 0

      #fcf4f1
    • 5

      #f8e7e2
    • 10

      #f3dad2
    • 20

      #eec6b8
    • 30

      #eea891
    • 40

      #e68365
    • 50

      #d45c38
    • 60

      #c04a23
    • 70

      #a03d1b
    • 80

      #7f2c13
    • 90

      #612715
    • 100

      #4b1a0a
  • Dipsy
    • 0

      #fafff0
    • 5

      #f6fdde
    • 10

      #f1f9bb
    • 20

      #ecf3a4
    • 30

      #d3e881
    • 40

      #b4d959
    • 50

      #91c43d
    • 60

      #6ea922
    • 70

      #4a8805
    • 80

      #316300
    • 90

      #244d00
    • 100

      #193302
  • Magenta
    • 0

      #fdf6fb
    • 5

      #fce7f5
    • 10

      #fbd0eb
    • 20

      #fab3e0
    • 30

      #f07fc4
    • 40

      #d83b97
    • 50

      #c01777
    • 60

      #ad0060
    • 70

      #8d014d
    • 80

      #6a0039
    • 90

      #57012e
    • 100

      #420123

Color tokens are meant to be used only when the color should not change based on the active theme. In other cases using theme keys is always preferred even if only one theme is enabled. Learn more about themes and how to use them.