ekklesi:design

Design Tokens

Das Fundament aller Komponenten — als CSS Custom Properties. Light + Dark (über [data-theme="dark"], oben rechts umschaltbar). Ein eigenes Theme entsteht allein durch Überschreiben dieser Werte.

Marke & Farbwelten · 2

--brand-secondary
color-mix(in oklab, var(--accent), var(--fg) 30%)
--brand-grad
linear-gradient( 135deg, var(--brand-secondary) 0%, var(--brand-primary) 60%, color-mix(in oklab, var(--brand-primary), white 20%) 100% )

Farben · 46

--bg
#fafafa
--surface
#ffffff
--fg
#111111
--muted
#6b6b6b
--border
#e5e5e5
--accent-hover
color-mix(in oklab, var(--accent), black 8%)
--accent-active
color-mix(in oklab, var(--accent), black 14%)
--success
#17a34a
--warn
#eab308
--danger
#dc2626
--active
#f59e0b
--active-on
#ffffff
--status-warn
#b45309
--status-error
#b91c1c
--status-info
#1d4ed8
--section-chorus
#f0a534
--section-bridge
#a78bfa
--section-pre-chorus
#14b8a6
--section-intro
#94a3b8
--section-outro
#94a3b8
--section-tag
#94a3b8
--stage-bg
#0c0d10
--stage-fg
#f4f1ea
--surface-2
color-mix(in oklab, var(--surface), var(--fg) 3%)
--surface-3
color-mix(in oklab, var(--surface), var(--fg) 6%)
--fg-2
color-mix(in oklab, var(--fg), var(--muted) 35%)
--muted-2
color-mix(in oklab, var(--muted), var(--bg) 30%)
--border-strong
color-mix(in oklab, var(--border), var(--fg) 18%)
--divider
color-mix(in oklab, var(--border), var(--bg) 40%)
--accent-soft-2
color-mix(in oklab, var(--accent), var(--surface) 78%)
--accent-border
color-mix(in oklab, var(--accent), var(--surface) 55%)
--tag-warn-fg
color-mix(in oklab, var(--warn), var(--fg) 55%)
--tag-warn-bd
color-mix(in oklab, var(--warn), var(--surface) 65%)
--tag-danger-bg
color-mix(in oklab, var(--danger), var(--surface) 88%)
--tag-danger-fg
color-mix(in oklab, var(--danger), var(--fg) 40%)
--tag-danger-bd
color-mix(in oklab, var(--danger), var(--surface) 65%)
--tag-info-bg
color-mix(in oklab, var(--status-info), var(--surface) 88%)
--tag-info-fg
color-mix(in oklab, var(--status-info), var(--fg) 40%)
--tag-info-bd
color-mix(in oklab, var(--status-info), var(--surface) 65%)
--tag-success-bg
color-mix(in oklab, var(--success), var(--surface) 88%)
--tag-success-fg
color-mix(in oklab, var(--success), var(--fg) 45%)
--tag-success-bd
color-mix(in oklab, var(--success), var(--surface) 65%)
--tag-neutral-bg
color-mix(in oklab, var(--muted), var(--surface) 90%)
--tag-neutral-fg
color-mix(in oklab, var(--muted), var(--fg) 40%)
--tag-neutral-bd
color-mix(in oklab, var(--muted), var(--surface) 70%)
--pdf-canvas
color-mix(in oklab, var(--bg), var(--fg) 5%)

Typografie · 10

--font-body
'Inter', -apple-system, system-ui, sans-serif
--font-stage
'Iowan Old Style', 'Charter', Georgia, serif
--text-xs
12px
--text-sm
14px
--text-base
16px
--text-lg
20px
--text-xl
24px
--text-2xl
28px
--leading-tight
1.2
--tracking-display
-0.01em

Abstände · 7

--space-2
8px
--space-3
12px
--space-4
16px
--space-5
20px
--space-6
24px
--space-8
32px
--space-10
40px

Radien · 3

--radius-md
12px
--radius-lg
16px
--radius-xl
22px

Elevation & Focus · 4

--elev-ring
0 0 0 1px var(--border)
--elev-raised
0 2px 8px color-mix(in oklab, var(--fg), transparent 92%)
--elev-overlay
0 12px 32px color-mix(in oklab, var(--fg), transparent 86%)
--focus-ring
0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%)

Motion · 2

--motion-base
200ms
--motion-slow
260ms

Felder & Controls · 10

--field-pad-y
8px
--field-pad-x
12px
--field-pad-y-sm
6px
--field-pad-x-sm
10px
--field-font-size
var(--text-sm)
--field-line-height
1.4
--field-radius
var(--radius-sm)
--field-chevron-offset
14px
--field-chevron-pad
36px
--field-chevron
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 5 6 8 9 5'/></svg>")

Sonstige · 11

--z-sticky
10
--z-overlay
100
--z-toast
200
--accent
oklch(0.46 0.22 266)
--section-other
var(--muted)
--hero-bg
var(--brand-grad)
--hero-fg
var(--accent-on)
--app-window-tabbar-height
56px
--app-window-col
340px
--app-window-col-narrow
280px
--app-window-gutter
var(--space-5)

Einbinden

import '@repo/design-tokens/tokens.css';