Foundations

Color

Ellysium's semantic palette — what components actually use.

30 semantic tokens across 6 groups. Each has a Light and a Dark value and switches with data-theme — a component never reads a primitive color directly.

Background

--color-background-defaultL #e1e7f3 · D #0a0b16
--color-background-highlightL #f9f0e2 · D #b98b3333
--color-background-disabledL #afb4c9 · D #121524

Accent

--color-accent-primaryL #1f6dfe · D #1f6dfe
--color-accent-primary-subtleL #1f6dfe1f · D #1f6dfe1f
--color-accent-primary-hoverL #0051da · D #4787ff
--color-accent-primary-pressedL #003da9 · D #83afff
--color-accent-secondaryL #b98b33 · D #ce9b3a
--color-accent-secondary-subtleL #b98b331f · D #b98b331f
--color-accent-secondary-hoverL #9a7329 · D #b98b33
--color-accent-secondary-pressedL #7a5a1e · D #9a7329

Surface

--color-surface-firstL #f4f6fa · D #121524
--color-surface-first-transparentL #e6e8ed00 · D #12152400
--color-surface-secondL #fbfcff · D #1f243f
--color-surface-second-transparentL #fbfcff00 · D #2a2f4a00

Border

--color-border-defaultL #afb4c9 · D #1f243f
--color-border-highlightL #545d89 · D #545d89

Content

--color-content-headingsL #1f243f · D #e1e7f3
--color-content-paragraphsL #545d89 · D #70789d
--color-content-highlightL #1f6dfe · D #4787ff
--color-content-disabledL #70789d · D #3f466c
--color-content-pure-whiteL #ffffff · D #ffffff

Feedback

--color-feedback-successL #25b20f · D #3ce126
--color-feedback-success-bgL #25b20f1f · D #3ce1261f
--color-feedback-warningL #be8901 · D #ffbb12
--color-feedback-warning-bgL #be89011f · D #ffbb121f
--color-feedback-errorL #ea0d0d · D #fd4a3c
--color-feedback-error-bgL #ea0d0d1f · D #fd4a3c1f
--color-feedback-infoL #1f6dfe · D #4787ff
--color-feedback-info-bgL #1f6dfe1f · D #4787ff1f

Primitives

61 raw colors, no theme. Only semantic tokens reference these — components don't.
azure-radiance-850#000720 · Azure Radiance/850
azure-radiance-775#00174b · Azure Radiance/775
azure-radiance-675#002977 · Azure Radiance/675
azure-radiance-600#003da9 · Azure Radiance/600
azure-radiance-500#0051da · Azure Radiance/500
azure-radiance-425#1f6dfe · Azure Radiance/425
azure-radiance-325#4787ff · Azure Radiance/325
azure-radiance-250#83afff · Azure Radiance/250
azure-radiance-150#b0ccfc · Azure Radiance/150
azure-radiance-75#dee8fb · Azure Radiance/75
marigold-850#0e0802 · Marigold/850
marigold-775#271b05 · Marigold/775
marigold-675#402e0c · Marigold/675
marigold-600#5d4415 · Marigold/600
marigold-500#7a5a1e · Marigold/500
marigold-425#9a7329 · Marigold/425
marigold-325#b98b33 · Marigold/325
marigold-250#ce9b3a · Marigold/250
marigold-150#f5c166 · Marigold/150
marigold-75#f9f0e2 · Marigold/75
mirage-850#0a0b16 · Mirage/850
mirage-775#121524 · Mirage/775
mirage-675#1f243f · Mirage/675
mirage-600#3f466c · Mirage/600
mirage-500#545d89 · Mirage/500
mirage-425#70789d · Mirage/425
mirage-325#8b92af · Mirage/325
mirage-250#afb4c9 · Mirage/250
mirage-150#e1e7f3 · Mirage/150
mirage-75#f4f6fa · Mirage/75
mirage-55#fbfcff · Mirage/55
scarlet-850#190101 · Scarlet/850
scarlet-775#3e0101 · Scarlet/775
scarlet-675#630202 · Scarlet/675
scarlet-600#8c0605 · Scarlet/600
scarlet-500#b60908 · Scarlet/500
scarlet-425#ea0d0d · Scarlet/425
scarlet-325#fd4a3c · Scarlet/325
scarlet-250#fe897a · Scarlet/250
scarlet-150#fbb7ad · Scarlet/150
scarlet-75#fae1dd · Scarlet/75
screamin-green-850#010d01 · Screamin' Green/850
screamin-green-775#032501 · Screamin' Green/775
screamin-green-675#073d02 · Screamin' Green/675
screamin-green-600#0e5904 · Screamin' Green/600
screamin-green-500#167508 · Screamin' Green/500
screamin-green-425#1e940b · Screamin' Green/425
screamin-green-325#25b20f · Screamin' Green/325
screamin-green-250#3ce126 · Screamin' Green/250
screamin-green-150#4df139 · Screamin' Green/150
screamin-green-75#bffbb7 · Screamin' Green/75
selective-yellow-850#0f0800 · Selective Yellow/850
selective-yellow-775#281a00 · Selective Yellow/775
selective-yellow-675#422e01 · Selective Yellow/675
selective-yellow-600#5f4401 · Selective Yellow/600
selective-yellow-500#7d5900 · Selective Yellow/500
selective-yellow-425#9d7202 · Selective Yellow/425
selective-yellow-325#be8901 · Selective Yellow/325
selective-yellow-250#e0a405 · Selective Yellow/250
selective-yellow-150#ffbb12 · Selective Yellow/150
selective-yellow-75#fce5bc · Selective Yellow/75