Themes

Themes

Lualtek introduces a well-proven theme system which help designers and developer building any digital product.

A theme is a set of predefined key ↔ color combinations to be used whenever possible in order keep consistency, accessibility and dynamicity. These keys are available as css variables and json files and their names are really intuitive.

Available themes

Here you can check the theme keys for all the available themes from Lualtek UI. These themes are shared as library on Figma (opens in a new tab) and as css/json from the components library.

Vibrancy colors

  • vibrancy-foreground

    oklch(19.11% 0.05 289.5)

    #140f29

  • vibrancy-background

    oklch(100.00% 0.00 0 / 30%)

    #ffffff4d

  • vibrancy-background-soft

    oklch(98.10% 0.01 297.7 / 60%)

    #f9f7ff99

  • vibrancy-background-mid

    oklch(94.98% 0.01 290.7 / 60%)

    #eeedf599

  • vibrancy-background-hard

    oklch(85.21% 0.03 294.1 / 60%)

    #cfcbe199

  • vibrancy-background-red

    oklch(63.68% 0.21 25.3 / 10%)

    #f043431a

  • vibrancy-background-green

    oklch(77.29% 0.15 163.2 / 10%)

    #3bd29a1a

  • vibrancy-background-yellow

    oklch(76.86% 0.16 70.1 / 10%)

    #f39f1d1a

  • vibrancy-background-brand

    oklch(54.03% 0.26 277.4 / 10%)

    #5746ff1a

Cta colors

  • cta-default

    oklch(54.03% 0.26 277.4)

    #5746ff

  • cta-dark

    oklch(46.67% 0.24 275.8)

    #4233db

  • cta-foreground

    oklch(100.00% 0.00 0)

    #ffffff

Dimmed colors

  • dimmed-0

    oklch(98.10% 0.01 297.7)

    #f9f7ff

  • dimmed-1

    oklch(94.98% 0.01 290.7)

    #eeedf5

  • dimmed-2

    oklch(91.85% 0.02 292.6)

    #e4e2f1

  • dimmed-3

    oklch(85.21% 0.03 294.1)

    #cfcbe1

  • dimmed-4

    oklch(68.41% 0.05 292.6)

    #9a94b6

  • dimmed-5

    oklch(52.50% 0.06 292.4)

    #6b648a

  • dimmed-6

    oklch(41.83% 0.06 291.9)

    #4d476b

  • dimmed-7

    oklch(34.34% 0.06 291.1)

    #393356

  • dimmed-8

    oklch(25.03% 0.06 288.5)

    #211c3c

Global colors

  • global-foreground

    oklch(41.83% 0.06 291.9)

    #4d476b

  • global-background

    oklch(100.00% 0.00 0)

    #ffffff

  • global-interactive-text

    oklch(54.03% 0.26 277.4)

    #5746ff

  • global-interactive-text-hover

    oklch(59.64% 0.23 281.1)

    #6f61ff

  • global-disabled-foreground

    oklch(52.50% 0.06 292.4 / 60%)

    #6b648a99

  • global-disabled-background

    oklch(91.85% 0.02 292.6 / 60%)

    #e4e2f199

  • global-inner-contrast-border

    oklch(100.00% 0.00 0 / 15%)

    #ffffff26

  • global-outer-contrast-border

    oklch(25.03% 0.06 288.5 / 15%)

    #211c3c26

Gradient colors

  • gradient-brand-start

    oklch(54.03% 0.26 277.4)

    #5746ff

  • gradient-brand-end

    oklch(46.67% 0.24 275.8)

    #4233db

  • gradient-primary-start

    oklch(25.03% 0.06 288.5)

    #211c3c

  • gradient-primary-end

    oklch(20.58% 0.06 288.5)

    #171131

  • gradient-cyan-start

    oklch(86.51% 0.12 207.1)

    #60e9fb

  • gradient-cyan-end

    oklch(60.89% 0.11 221.7)

    #0d91b2

  • gradient-dawn-start

    oklch(71.48% 0.13 215.2)

    #00b6d4

  • gradient-dawn-end

    oklch(72.17% 0.18 305.5)

    #c183fe

Highlight colors

  • highlight-brand-background

    oklch(93.21% 0.04 291.0)

    #e8e5ff

  • highlight-brand-foreground

    oklch(54.03% 0.26 277.4)

    #5746ff

  • highlight-gray-background

    oklch(91.85% 0.02 292.6)

    #e4e2f1

  • highlight-gray-foreground

    oklch(41.83% 0.06 291.9)

    #4d476b

  • highlight-yellow-background

    oklch(95.31% 0.07 95.5)

    #fef0bb

  • highlight-yellow-foreground

    oklch(66.41% 0.15 65.3)

    #d07d00

  • highlight-green-background

    oklch(95.05% 0.05 163.1)

    #d1fae5

  • highlight-green-foreground

    oklch(50.81% 0.10 165.6)

    #147758

  • highlight-blue-background

    oklch(93.19% 0.03 255.6)

    #dceafd

  • highlight-blue-foreground

    oklch(54.61% 0.22 262.9)

    #2362ee

  • highlight-red-background

    oklch(91.41% 0.04 18.0)

    #fcd9d9

  • highlight-red-foreground

    oklch(63.68% 0.21 25.3)

    #f04343

  • highlight-cyan-background

    oklch(95.63% 0.04 203.4)

    #d3f9fd

  • highlight-cyan-foreground

    oklch(60.89% 0.11 221.7)

    #0d91b2

  • highlight-purple-background

    oklch(92.80% 0.04 307.3)

    #eee1fd

  • highlight-purple-foreground

    oklch(55.75% 0.25 302.3)

    #9335e9

  • highlight-indigo-background

    oklch(94.43% 0.02 272.8)

    #e8ecfb

  • highlight-indigo-foreground

    oklch(50.18% 0.19 272.1)

    #4252ce

  • highlight-dipsy-background

    oklch(96.18% 0.08 114.1)

    #f1f9bb

  • highlight-dipsy-foreground

    oklch(56.26% 0.16 134.1)

    #4a8805

  • highlight-salmon-background

    oklch(94.15% 0.02 38.3)

    #f8e7e2

  • highlight-salmon-foreground

    oklch(56.25% 0.16 37.8)

    #c04a23

  • highlight-magenta-background

    oklch(94.89% 0.03 338.0)

    #fce7f5

  • highlight-magenta-foreground

    oklch(48.62% 0.20 357.4)

    #ad0060

ElevationsIcons