Tokens und öffentliche API

Stabile semantische CSS-Tokens und Tailwind-Namensräume aus dem Theme-Quelltext.

Die Tabellen werden während des Hugo-Builds direkt aus dem CSS des Themes erzeugt. Eigene Templates sollten semantische Tokens und dokumentierte Tailwind-Namensräume verwenden, nicht interne Palettenstufen oder Selektoren.

Tailwind namespaces

Parsed from assets/css/theme-layer.css.

Namespace variable	Resolves to
`--font-display`	`"Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif`
`--font-sans`	`"Source Sans 3", ui-sans-serif, system-ui, sans-serif`
`--font-mono`	`"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace`
`--color-page`	`var(--color-bg)`
`--color-surface`	`var(--color-surface)`
`--color-subtle`	`var(--midnight-2)`
`--color-hi`	`var(--color-text-primary)`
`--color-lo`	`var(--color-text-secondary)`
`--color-default`	`var(--color-border)`
`--color-accent`	`var(--color-accent)`
`--color-accent-solid`	`var(--color-accent-solid)`
`--color-terminal`	`var(--terminal-surface)`
`--radius-sm`	`3px`
`--radius-md`	`6px`
`--radius-lg`	`9px`
`--radius-xl`	`13px`
`--breakpoint-sm`	`640px`
`--breakpoint-md`	`768px`
`--breakpoint-lg`	`1024px`
`--breakpoint-xl`	`1280px`
`--ease-out`	`ease-out`
`--ease-in`	`ease-in`

Semantic tokens

Parsed from the brand token sheet. Swatches render the live value.

Token	Value
`--color-primary`	`#1d3352`
`--color-primary-light`	`#2b4d78`
`--color-primary-dark`	`#132440`
`--color-accent`	`#e05232`
`--color-accent-light`	`#ea7558`
`--color-accent-dark`	`#b84228`
`--color-accent-solid`	`#cc4528`
`--color-secondary`	`#546a82`
`--color-success`	`#17945f`
`--color-success-bg`	`#d1ebe0`
`--color-success-fg`	`#17734c`
`--color-warning`	`#ef8b0b`
`--color-warning-bg`	`#fff1e0`
`--color-warning-fg`	`#b3520c`
`--color-danger`	`#d92d20`
`--color-danger-bg`	`#fce8e8`
`--color-danger-fg`	`#b3261e`
`--color-info`	`#2563c9`
`--color-info-bg`	`#dae2ec`
`--color-info-fg`	`#2f5fa8`
`--color-success-light`	`#17945f`
`--color-success-light-bg`	`#d1ebe0`
`--color-success-light-fg`	`#17734c`
`--color-success-dark`	`#6cc090`
`--color-success-dark-bg`	`#16302a`
`--color-success-dark-fg`	`#6cc090`
`--color-warning-light`	`#ef8b0b`
`--color-warning-light-bg`	`#fff1e0`
`--color-warning-light-fg`	`#b3520c`
`--color-warning-dark`	`#eda44a`
`--color-warning-dark-bg`	`#3a2611`
`--color-warning-dark-fg`	`#eda44a`
`--color-danger-light`	`#d92d20`
`--color-danger-light-bg`	`#fce8e8`
`--color-danger-light-fg`	`#b3261e`
`--color-danger-dark`	`#f08b80`
`--color-danger-dark-bg`	`#3a1c19`
`--color-danger-dark-fg`	`#f08b80`
`--color-info-light`	`#2563c9`
`--color-info-light-bg`	`#dae2ec`
`--color-info-light-fg`	`#2f5fa8`
`--color-info-dark`	`#8aacc8`
`--color-info-dark-bg`	`#1a2b3e`
`--color-info-dark-fg`	`#8aacc8`
`--color-bg`	`#f8f9fb`
`--color-surface`	`#ffffff`
`--color-text-primary`	`#142438`
`--color-text-secondary`	`#546a82`
`--color-text-muted`	`#5c6f82`
`--color-border`	`#cdd0d5`
`--color-bg-light`	`#f8f9fb`
`--color-bg-dark`	`#0e1720`
`--color-surface-light`	`#ffffff`
`--color-surface-dark`	`#131e2b`
`--color-text-primary-light`	`#142438`
`--color-text-primary-dark`	`#c5daf0`
`--color-text-secondary-light`	`#546a82`
`--color-text-secondary-dark`	`#97a8b8`
`--color-text-muted-light`	`#5c6f82`
`--color-text-muted-dark`	`#97a8b8`
`--color-border-light`	`#cdd0d5`
`--color-border-dark`	`#263f5a`
`--surface-2`	`var(--midnight-2)`
`--border-strong`	`var(--slate-6)`
`--tag-bg`	`#dae2ec`
`--tag-text`	`#1d3352`
`--tag-bg-accent`	`#fde0d5`
`--tag-text-accent`	`#c04424`
`--font-heading`	`'Plus Jakarta Sans', system-ui, sans-serif`
`--font-body`	`'Source Sans 3', system-ui, sans-serif`
`--font-code`	`'IBM Plex Mono', ui-monospace, monospace`
`--font-scale`	`1`
`--type-display-size`	`calc(48px * var(--font-scale))`
`--type-display-weight`	`800`
`--type-display-lh`	`1.1`
`--type-h1-size`	`calc(36px * var(--font-scale))`
`--type-h1-weight`	`700`
`--type-h1-lh`	`1.15`
`--type-h2-size`	`calc(28px * var(--font-scale))`
`--type-h2-weight`	`700`
`--type-h2-lh`	`1.2`
`--type-h3-size`	`calc(24px * var(--font-scale))`
`--type-h3-weight`	`600`
`--type-h3-lh`	`1.25`
`--type-h4-size`	`calc(20px * var(--font-scale))`
`--type-h4-weight`	`600`
`--type-h4-lh`	`1.3`
`--type-h5-size`	`calc(17px * var(--font-scale))`
`--type-h5-weight`	`600`
`--type-h5-lh`	`1.35`
`--type-body-l-size`	`calc(18px * var(--font-scale))`
`--type-body-l-weight`	`400`
`--type-body-l-lh`	`1.65`
`--type-body-size`	`calc(16px * var(--font-scale))`
`--type-body-lh`	`1.6`
`--type-caption-size`	`calc(13px * var(--font-scale))`
`--type-caption-weight`	`400`
`--type-caption-lh`	`1.5`
`--type-overline-size`	`calc(12px * var(--font-scale))`
`--type-overline-weight`	`600`
`--type-overline-lh`	`1.3`
`--type-overline-tracking`	`0.08em`
`--type-code-size`	`calc(14px * var(--font-scale))`
`--type-code-weight`	`400`
`--type-code-lh`	`1.6`
`--space-1`	`4px`
`--space-2`	`8px`
`--space-3`	`12px`
`--space-4`	`16px`
`--space-5`	`24px`
`--space-6`	`32px`
`--space-7`	`48px`
`--space-8`	`64px`
`--space-9`	`96px`
`--radius-sm`	`3px`
`--radius-md`	`6px`
`--radius-lg`	`9px`
`--radius-xl`	`13px`
`--radius-full`	`9999px`
`--shadow-0`	`none`
`--shadow-1`	`0 1px 3px rgba(0,0,0,0.06)`
`--shadow-2`	`0 4px 12px rgba(0,0,0,0.08)`
`--shadow-3`	`0 8px 24px rgba(0,0,0,0.12)`
`--elevated-0`	`var(--bg)`
`--elevated-1`	`var(--surface)`
`--elevated-2`	`var(--surface)`
`--elevated-3`	`var(--surface)`
`--rim-1`	`0 0 0 0 rgba(0,0,0,0)`
`--rim-2`	`0 0 0 0 rgba(0,0,0,0)`
`--rim-3`	`0 0 0 0 rgba(0,0,0,0)`
`--duration-micro`	`100ms`
`--duration-standard`	`200ms`
`--duration-expand`	`300ms`
`--duration-page`	`400ms`
`--ease-out`	`cubic-bezier(0.33, 1, 0.68, 1)`
`--ease-in`	`cubic-bezier(0.32, 0, 0.67, 0)`
`--breakpoint-sm`	`640px`
`--breakpoint-md`	`768px`
`--breakpoint-lg`	`1024px`
`--breakpoint-xl`	`1280px`
`--container-max`	`1100px`
`--grid-gutter`	`16px`
`--touch-target`	`44px`
`--color-tag-bg`	`var(--midnight-2)`
`--color-tag-fg`	`var(--color-text-secondary)`
`--scrim-modal`	`var(--scrim)`
`--scrim-palette`	`rgba(14,23,32,0.5)`
`--scrim-lightbox`	`rgba(14,23,32,0.82)`
`--tint-accent-active`	`rgba(224,82,50,0.12)`
`--tint-code-header`	`rgba(20,36,56,0.03)`
`--tint-highlight-line`	`rgba(20,36,56,0.06)`
`--tint-code-header-dark`	`rgba(255,255,255,0.04)`
`--tint-code-divider-dark`	`rgba(255,255,255,0.08)`
`--tint-code-control-dark`	`rgba(255,255,255,0.14)`
`--tint-dark-code-header`	`var(--tint-code-header-dark)`
`--tint-dark-code-border`	`var(--tint-code-divider-dark)`
`--tint-dark-control-border`	`var(--tint-code-control-dark)`
`--shadow-focus-light`	`rgba(29,51,82,0.15)`
`--fixed-control-text`	`#ffffff`
`--fixed-code-control-text`	`#c7d3de`
`--fixed-reduced-transparency-bg`	`#0e1720`
`--fixed-print-page`	`#ffffff`
`--fixed-print-code-bg`	`#f1f2f4`
`--fixed-print-code-border`	`#cdd0d5`
`--fixed-print-code-text`	`#142438`
`--fixed-print-external-url`	`#546a82`
`--fixed-print-bg`	`#ffffff`
`--fixed-print-text`	`#142438`
`--fixed-print-muted`	`#546a82`
`--fixed-print-border`	`#cdd0d5`
`--fixed-print-panel`	`#f1f2f4`
`--fixed-print-panel-bar`	`#e6e8ec`
`--fixed-notebook-image-bg`	`#ffffff`
`--fixed-overlay-solid`	`var(--fixed-reduced-transparency-bg)`
`--fixed-overlay-text`	`var(--fixed-code-control-text)`
`--header-bg`	`#f8f9fb`
`--logo-accent`	`#e05232`
`--hero-bg`	`var(--color-bg)`
`--hero-fg`	`var(--color-text-primary)`
`--hero-title`	`var(--midnight-12)`
`--hero-eyebrow`	`var(--orange-11)`
`--hero-body`	`var(--color-text-secondary)`
`--on-solid-success`	`#ffffff`
`--on-solid-warning`	`#ffffff`
`--on-solid-danger`	`#ffffff`
`--on-solid-info`	`#ffffff`
`--terminal-surface`	`#0e1720`
`--code-panel-surface`	`#131e2b`
`--code-panel-border`	`#2e4b68`
`--terminal-border`	`#2e4b68`
`--terminal-ansi-0`	`#0e1720`
`--terminal-ansi-1`	`#e55b5b`
`--terminal-ansi-2`	`#3f9d74`
`--terminal-ansi-3`	`#c08a1e`
`--terminal-ansi-4`	`#6289b3`
`--terminal-ansi-5`	`#bd6d96`
`--terminal-ansi-6`	`#3f97a3`
`--terminal-ansi-7`	`#97a8b8`
`--terminal-ansi-8`	`#2e4b68`
`--terminal-ansi-9`	`#f08b80`
`--terminal-ansi-10`	`#6cc090`
`--terminal-ansi-11`	`#e0a92a`
`--terminal-ansi-12`	`#8aacc8`
`--terminal-ansi-13`	`#d491b4`
`--terminal-ansi-14`	`#74c0c9`
`--terminal-ansi-15`	`#c5daf0`
`--terminal-background`	`#0e1720`
`--terminal-foreground`	`#c5daf0`
`--terminal-cursor`	`#e05232`
`--terminal-cursor-text`	`#0e1720`
`--terminal-selection-background`	`#20354d`
`--terminal-selection-text`	`#c5daf0`
`--terminal-dim-comment`	`#72889d`
`--terminal-status-bar-surface`	`#131e2b`
`--terminal-status-bar-text`	`#c5daf0`
`--terminal-inactive-tab-and-pane-label`	`#7b8da3`
`--terminal-active-tab-fill`	`#e05232`
`--terminal-active-pane-border`	`#e05232`
`--terminal-inactive-pane-border`	`#7b8da3`
`--syntax-plain`	`#c5daf0`
`--syntax-comment`	`#7d90a3`
`--syntax-operator`	`#97a8b8`
`--syntax-keyword`	`#d491b4`
`--syntax-type`	`#6cc090`
`--syntax-function`	`#8aacc8`
`--syntax-string`	`#ea7558`
`--syntax-number`	`#e0a92a`
`--syntax-macro`	`#74c0c9`
`--syntax-invalid`	`#e55b5b`
`--syntax-weight-plain`	`var(--type-code-weight)`
`--syntax-weight-keyword`	`700`
`--syntax-weight-type`	`600`
`--syntax-weight-function`	`500`
`--syntax-weight-invalid`	`600`
`--syntax-style-comment`	`italic`
`--syntax-style-macro`	`italic`
`--syntax-plain-light`	`#0f1c2e`
`--syntax-operator-light`	`#54697f`
`--syntax-comment-light`	`#5e7082`
`--syntax-keyword-light`	`#c2117f`
`--syntax-type-light`	`#08804e`
`--syntax-function-light`	`#1668d8`
`--syntax-string-light`	`#c94208`
`--syntax-number-light`	`#94620a`
`--syntax-macro-light`	`#0d7d82`
`--syntax-invalid-light`	`#d81420`
`--terminal-light-surface`	`#f4f5f7`
`--code-panel-surface-light`	`#f4f5f7`
`--code-panel-border-light`	`#cdd0d5`
`--terminal-border-light`	`#cdd0d5`
`--terminal-light-ansi-0`	`#1e2b38`
`--terminal-light-ansi-1`	`#b8352f`
`--terminal-light-ansi-2`	`#276754`
`--terminal-light-ansi-3`	`#8b6508`
`--terminal-light-ansi-4`	`#3a5a82`
`--terminal-light-ansi-5`	`#8a3f6e`
`--terminal-light-ansi-6`	`#1c6b6b`
`--terminal-light-ansi-7`	`#546a82`
`--terminal-light-ansi-8`	`#4a5e74`
`--terminal-light-ansi-9`	`#a8261c`
`--terminal-light-ansi-10`	`#1f7a52`
`--terminal-light-ansi-11`	`#6f5106`
`--terminal-light-ansi-12`	`#1d3352`
`--terminal-light-ansi-13`	`#752f5c`
`--terminal-light-ansi-14`	`#125555`
`--terminal-light-ansi-15`	`#142438`
`--terminal-light-background`	`#f4f5f7`
`--terminal-light-foreground`	`#142438`
`--terminal-light-cursor`	`#e05232`
`--terminal-light-cursor-text`	`#f4f5f7`
`--terminal-light-selection-background`	`#dae2ec`
`--terminal-light-selection-text`	`#142438`
`--terminal-light-dim-comment`	`#5c6f82`
`--terminal-light-status-bar-surface`	`#e6e8eb`
`--terminal-light-status-bar-text`	`#142438`
`--terminal-light-inactive-tab-and-pane-label`	`#5c6f82`
`--terminal-light-active-tab-fill`	`#e05232`
`--terminal-light-active-pane-border`	`#e05232`
`--terminal-light-inactive-pane-border`	`#adb2ba`
`--color-success`	`#6cc090`
`--color-success-bg`	`#16302a`
`--color-success-fg`	`#6cc090`
`--color-warning`	`#eda44a`
`--color-warning-bg`	`#3a2611`
`--color-warning-fg`	`#eda44a`
`--color-danger`	`#f08b80`
`--color-danger-bg`	`#3a1c19`
`--color-danger-fg`	`#f08b80`
`--color-info`	`#8aacc8`
`--color-info-bg`	`#1a2b3e`
`--color-info-fg`	`#8aacc8`
`--color-bg`	`#0e1720`
`--color-surface`	`#131e2b`
`--color-text-primary`	`#c5daf0`
`--color-text-secondary`	`#97a8b8`
`--color-text-muted`	`#97a8b8`
`--color-border`	`#263f5a`
`--surface-2`	`#1a2b3e`
`--border-strong`	`#3a5c7e`
`--tag-bg`	`#1a2b3e`
`--tag-text`	`#c5daf0`
`--tag-bg-accent`	`#3d1e13`
`--tag-text-accent`	`#f09878`
`--shadow-1`	`0 1px 3px rgba(0,0,0,0.40)`
`--shadow-2`	`0 4px 12px rgba(0,0,0,0.50)`
`--shadow-3`	`0 8px 24px rgba(0,0,0,0.60)`
`--elevated-0`	`var(--midnight-1)`
`--elevated-1`	`var(--midnight-3)`
`--elevated-2`	`var(--midnight-5)`
`--elevated-3`	`var(--midnight-7)`
`--rim-1`	`inset 0 1px 0 rgba(255,255,255,0.05)`
`--rim-2`	`inset 0 1px 0 rgba(255,255,255,0.09)`
`--rim-3`	`inset 0 1px 0 rgba(255,255,255,0.14)`
`--on-solid-success`	`#0e1720`
`--on-solid-warning`	`#0e1720`
`--on-solid-danger`	`#0e1720`
`--on-solid-info`	`#0e1720`
`--header-bg`	`var(--color-surface)`
`--logo-accent`	`#ea7558`
`--hero-bg`	`var(--color-surface)`
`--hero-fg`	`var(--color-text-primary)`
`--hero-title`	`var(--midnight-12)`
`--hero-eyebrow`	`var(--orange-11)`
`--hero-body`	`var(--color-text-secondary)`
`--color-success`	`#17945f`
`--color-success-bg`	`#d1ebe0`
`--color-success-fg`	`#17734c`
`--color-warning`	`#ef8b0b`
`--color-warning-bg`	`#fff1e0`
`--color-warning-fg`	`#b3520c`
`--color-danger`	`#d92d20`
`--color-danger-bg`	`#fce8e8`
`--color-danger-fg`	`#b3261e`
`--color-info`	`#2563c9`
`--color-info-bg`	`#dae2ec`
`--color-info-fg`	`#2f5fa8`
`--color-bg`	`#f8f9fb`
`--color-surface`	`#ffffff`
`--color-text-primary`	`#142438`
`--color-text-secondary`	`#546a82`
`--color-text-muted`	`#5c6f82`
`--color-border`	`#cdd0d5`
`--surface-2`	`#f0f3f8`
`--border-strong`	`#bec2c8`
`--tag-bg`	`#dae2ec`
`--tag-text`	`#1d3352`
`--tag-bg-accent`	`#fde0d5`
`--tag-text-accent`	`#c04424`
`--hero-bg`	`var(--color-bg)`
`--hero-fg`	`var(--color-text-primary)`
`--hero-title`	`var(--midnight-12)`
`--hero-eyebrow`	`var(--orange-11)`
`--hero-body`	`var(--color-text-secondary)`
`--header-bg`	`#f8f9fb`
`--logo-accent`	`#e05232`
`--color-success`	`#6cc090`
`--color-success-bg`	`#16302a`
`--color-success-fg`	`#6cc090`
`--color-warning`	`#eda44a`
`--color-warning-bg`	`#3a2611`
`--color-warning-fg`	`#eda44a`
`--color-danger`	`#f08b80`
`--color-danger-bg`	`#3a1c19`
`--color-danger-fg`	`#f08b80`
`--color-info`	`#8aacc8`
`--color-info-bg`	`#1a2b3e`
`--color-info-fg`	`#8aacc8`
`--color-bg`	`#0e1720`
`--color-surface`	`#131e2b`
`--color-text-primary`	`#c5daf0`
`--color-text-secondary`	`#97a8b8`
`--color-text-muted`	`#97a8b8`
`--color-border`	`#263f5a`
`--surface-2`	`#1a2b3e`
`--border-strong`	`#3a5c7e`
`--tag-bg`	`#1a2b3e`
`--tag-text`	`#c5daf0`
`--tag-bg-accent`	`#3d1e13`
`--tag-text-accent`	`#f09878`
`--shadow-1`	`0 1px 3px rgba(0,0,0,0.40)`
`--shadow-2`	`0 4px 12px rgba(0,0,0,0.50)`
`--shadow-3`	`0 8px 24px rgba(0,0,0,0.60)`
`--elevated-0`	`var(--midnight-1)`
`--elevated-1`	`var(--midnight-3)`
`--elevated-2`	`var(--midnight-5)`
`--elevated-3`	`var(--midnight-7)`
`--rim-1`	`inset 0 1px 0 rgba(255,255,255,0.05)`
`--rim-2`	`inset 0 1px 0 rgba(255,255,255,0.09)`
`--rim-3`	`inset 0 1px 0 rgba(255,255,255,0.14)`
`--on-solid-success`	`#0e1720`
`--on-solid-warning`	`#0e1720`
`--on-solid-danger`	`#0e1720`
`--on-solid-info`	`#0e1720`
`--header-bg`	`var(--color-surface)`
`--logo-accent`	`#ea7558`
`--hero-bg`	`var(--color-surface)`
`--hero-fg`	`var(--color-text-primary)`
`--hero-title`	`var(--midnight-12)`
`--hero-eyebrow`	`var(--orange-11)`
`--hero-body`	`var(--color-text-secondary)`
`--font-scale`	`1.125`
`--font-scale`	`1.25`
`--font-scale`	`1.5`
`--font-scale`	`2`
`--color-text-primary`	`#000000`
`--color-text-secondary`	`#1e2b38`
`--color-text-muted`	`#1e2b38`
`--color-border`	`#000000`
`--border-strong`	`#000000`
`--color-success-fg`	`#0f4d3a`
`--color-warning-fg`	`#4a3400`
`--color-danger-fg`	`#7a1610`
`--color-info-fg`	`#10203a`
`--tag-text`	`#000000`
`--tag-text-accent`	`#a02f16`
`--color-text-primary`	`#ffffff`
`--color-text-secondary`	`#e2e9f2`
`--color-text-muted`	`#e2e9f2`
`--color-border`	`#ffffff`
`--border-strong`	`#ffffff`
`--color-success-fg`	`#a8e6c4`
`--color-warning-fg`	`#ffdf94`
`--color-danger-fg`	`#ffc0b8`
`--color-info-fg`	`#c5daf0`
`--tag-text`	`#ffffff`
`--tag-text-accent`	`#ffb49c`
`--color-text-primary`	`#ffffff`
`--color-text-secondary`	`#e2e9f2`
`--color-text-muted`	`#e2e9f2`
`--color-border`	`#ffffff`
`--border-strong`	`#ffffff`
`--color-success-fg`	`#a8e6c4`
`--color-warning-fg`	`#ffdf94`
`--color-danger-fg`	`#ffc0b8`
`--color-info-fg`	`#c5daf0`
`--tag-text`	`#ffffff`
`--tag-text-accent`	`#ffb49c`
`--color-text-primary`	`#000000`
`--color-text-secondary`	`#1e2b38`
`--color-text-muted`	`#1e2b38`
`--color-border`	`#000000`
`--border-strong`	`#000000`
`--color-success-fg`	`#0f4d3a`
`--color-warning-fg`	`#4a3400`
`--color-danger-fg`	`#7a1610`
`--color-info-fg`	`#10203a`
`--tag-text`	`#000000`
`--tag-text-accent`	`#a02f16`
`--scrim-modal`	`rgba(20,36,56,0.94)`
`--color-text-secondary`	`#1e2b38`
`--color-text-muted`	`#1e2b38`
`--color-border`	`#546a82`
`--border-strong`	`#1e2b38`