Design System
DAMA. Design System
Section titled “DAMA. Design System”Brutalistisches Mono-System auf Beige (#F4F1EA) mit Neon-Feuer-Akzent (#FF3D2E). Light + Dark Mode. JetBrains Mono als Default, Archivo Black für Display-Momente.
Color-Tokens
Section titled “Color-Tokens”Light (Default):
| Token | Hex | Rolle |
|---|---|---|
--bg |
#F4F1EA |
Standard-Hintergrund, Beige statt Weiss |
--surface |
#FFFFFF |
Karten, erhoehte Flaechen |
--text |
#0A0A0A |
Maximaler Kontrast |
--text-muted |
#555 |
Sekundaertext |
--border |
#0A0A0A |
Borders, Trenner |
--accent |
#FF3D2E |
Neon-Feuer, einziger Akzent |
--accent-strong |
#E02516 |
Hover/Active |
--code-bg |
#EAE6DC |
Code-Bloecke |
Dark:
| Token | Hex | Rolle |
|---|---|---|
--bg |
#2B2B2B |
Neutral-Grau, nicht fast-Schwarz |
--surface |
#383838 |
Karten liegen darueber |
--text |
#F4F1EA |
Paper invertiert als Text |
--accent |
#FF5546 |
Akzent heller fuer Kontrast |
Typografie
Section titled “Typografie”- JetBrains Mono — Default fuer alles
- Archivo Black — Reserviert fuer Display-Momente (Hero, Section-Titel, Marketing)
Skala: display 6.5 rem / display-md 2.5 rem / mono-lg 1.25 rem / mono-md 0.95 rem / mono-sm 0.8 rem / mono-label 0.7 rem (uppercase).
Do’s & Don’ts
Section titled “Do’s & Don’ts”- Do Token-Referenzen (
var(--accent)) statt Hex-Werte. - Do Signatur-Glyphen konsistent recyclen.
- Don’t Eigene Farben ausserhalb der Palette.
- Don’t Runde Ecken ueber 2 px.
- Don’t Verlaeufe, Drop-Shadows, Glassmorphismus.
- Don’t Akzent als Background fuer grosse Flaechen.
Signatur-Glyphen
Section titled “Signatur-Glyphen”- Bullet:
▶ - Progress:
▰▰▱ - Corner:
⌐ - Footer-Stamp:
26·07·01 / I01