Semantische Kleuren

Over semantische kleuren

Semantische tokens geven betekenis aan kleuren in plaats van hun visuele waarde. Door $text-default te gebruiken in plaats van #0a0a0a, past je UI zich automatisch aan bij thema-wisselingen.

Alle tokens verwijzen naar het kleurenpallet met primitieve waarden. De drie kolommen hieronder tonen per token welke primitive er actief is in elk thema — een goede health-check op de remap.

Gebruik

SCSS

example.scss

@use "tokens" as *;

.my-element {
  color: $text-default;
  background: $surface-panel;
  border: 1px solid $border-subtle;
}

CSS

example.css

.my-element {
  color: var(--text-default);
  background: var(--surface-panel);
  border: 1px solid var(--border-subtle);
}

Alle tokens

Light / Dark / HC Solar Light / HC Solar Dark naast elkaar zodat de per-theme remap zichtbaar is.

Surface

Achtergrondkleuren voor pagina's, panelen, overlays en andere oppervlakken.

Token Light Dark HC Solar Light HC Solar Dark

Surface Canvas--surface-canvas

#ffffff

#0a0e1f

#fdf6e3

#002b36

Surface Panel--surface-panel

#fafafa

#11162d

#fdf6e3

#002b36

Surface Elevated--surface-elevated

#ffffff

#1a2244

#fdf6e3

#002b36

Surface Overlay--surface-overlay

rgba(0, 0, 0, 0.55)

rgba(0, 0, 0, 0.6)

rgba(253, 246, 227, 0.85)

rgba(0, 43, 54, 0.85)

Surface Muted--surface-muted

#e8eaf2

#060813

#fdf6e3

#002b36

Surface Inverse--surface-inverse

#2e3b75

#ffffff

#002b36

#fdf6e3

Surface Highlight--surface-highlight

#fffbeb

#78350f

#eee8d5

#073642

Surface Gradient Start--surface-gradient-start

#ffffff

#0a0e1f

#fdf6e3

#002b36

Surface Gradient End--surface-gradient-end

#ffffff

#0a0e1f

#fdf6e3

#002b36

Text

Tekstkleuren met verschillende niveaus van nadruk en contrast.

Token Light Dark HC Solar Light HC Solar Dark

Text Default--text-default

#0a0e1f

#ffffff

#002b36

#fdf6e3

Text Primary--text-primary

#0a0e1f

#ffffff

#002b36

#fdf6e3

Text Secondary--text-secondary

#11162d

#9ea5c2

#002b36

#fdf6e3

Text Muted--text-muted

#525252

#7680a9

#002b36

#fdf6e3

Text Subtle--text-subtle

#737373

#525d8f

#002b36

#fdf6e3

Text Inverse--text-inverse

#ffffff

#0a0e1f

#fdf6e3

#002b36

Text Link--text-link

#2e3b75

#60a5fa

#134f7d

#5cdde0

Text LinkHover--text-linkHover

#1a2244

#93c5fd

#002b36

#fdf6e3

Text LinkVisited--text-linkVisited

#11162d

#fbbf24

#6c2566

#ff7fc5

Text Heading--text-heading

#0a0e1f

#ffffff

#002b36

#fdf6e3

Border

Randkleuren van subtiel tot sterk voor visuele scheiding.

Token Light Dark HC Solar Light HC Solar Dark

Border Subtle--border-subtle

#c5c9db

#1a2244

#002b36

#fdf6e3

Border Default--border-default

#9ea5c2

#242e5c

#002b36

#fdf6e3

Border Strong--border-strong

#2e3b75

#134f7d

#e8c100

Border Focus--border-focus

#2e3b75

#7680a9

#134f7d

#e8c100

Border Vibrant Start--border-vibrant-start

#2e3b75

#525d8f

#134f7d

#e8c100

Border Vibrant End--border-vibrant-end

#3b82f6

#134f7d

#e8c100

Feedback

Statuskleuren voor succes, waarschuwing, fout en informatie.

Token Light Dark HC Solar Light HC Solar Dark

Feedback Success--feedback-success

#15803d

#4ade80

#4a5a00

#b5c81f

Feedback SuccessSubtle--feedback-successSubtle

#dcfce7

#eef2c2

#1a2400

Feedback SuccessEmphasis--feedback-successEmphasis

#166534

#4ade80

#4a5a00

#b5c81f

Feedback Warning--feedback-warning

#b45309

#fbbf24

#8a3409

#ff944d

Feedback WarningSubtle--feedback-warningSubtle

#fef3c7

#f9e0c5

#3a1a00

Feedback WarningEmphasis--feedback-warningEmphasis

#92400e

#fbbf24

#8a3409

#ff944d

Feedback Error--feedback-error

#dc2626

#f87171

#98221f

#ff7060

Feedback ErrorSubtle--feedback-errorSubtle

#fee2e2

#f9d6d4

#3a0e08

Feedback ErrorEmphasis--feedback-errorEmphasis

#991b1b

#fca5a5

#98221f

#ff7060

Feedback Info--feedback-info

#2563eb

#93c5fd

#16554f

#5cdde0

Feedback InfoSubtle--feedback-infoSubtle

#dbeafe

#eee8d5

#073642

Feedback InfoEmphasis--feedback-infoEmphasis

#1d4ed8

#60a5fa

#16554f

#5cdde0

Accent

Token Light Dark HC Solar Light HC Solar Dark

Accent Gradient Start--accent-gradient-start

#2e3b75

{intent.action.default}

#134f7d

#6cb0ee

Accent Gradient End--accent-gradient-end

#2563eb

{intent.action.default}

#134f7d

#6cb0ee

Accent Gradient HoverStart--accent-gradient-hoverStart

#242e5c

{intent.action.hover}

#002b36

#fdf6e3

Accent Gradient HoverEnd--accent-gradient-hoverEnd

#1d4ed8

{intent.action.hover}

#002b36

#fdf6e3

Intent

Actiekleuren voor interactieve elementen zoals buttons en links.

Token Light Dark HC Solar Light HC Solar Dark

Intent Action Default--intent-action-default

#2e3b75

#7680a9

#134f7d

#6cb0ee

Intent Action Hover--intent-action-hover

#242e5c

#9ea5c2

#002b36

#fdf6e3

Intent Action Active--intent-action-active

#1a2244

#c5c9db

#002b36

#fdf6e3

Intent Action Disabled--intent-action-disabled

#9ea5c2

#242e5c

#586e75

Intent Secondary Default--intent-secondary-default

transparent

Intent Secondary Hover--intent-secondary-hover

#e8eaf2

#1a2244

#eee8d5

#073642

Intent Secondary Border--intent-secondary-border

#2e3b75

#002b36

#fdf6e3

Focus

Focus indicators voor toegankelijkheid.

Token Light Dark HC Solar Light HC Solar Dark

Focus Ring--focus-ring

#2e3b75

#7680a9

#134f7d

#e8c100

Brand

Token Light Dark HC Solar Light HC Solar Dark

Brand Primary--brand-primary

#2e3b75

#7680a9

#134f7d

#6cb0ee

Brand Secondary--brand-secondary

#3b82f6

#16554f

#5cdde0

Brand Accent--brand-accent

#f59e0b

#fbbf24

#98221f

#e8c100

Brand Subtle--brand-subtle

#e8eaf2

#1a2244

#eee8d5

#073642