Design-System

Alle Bausteine der Marke Kuhle Eifel. Definiert in src/brand/ – wer den Look ändern will, ändert kuhle-eifel.css, nicht diese Seite.

Farben

Zwei Markenfarben, alles andere leitet sich daraus ab

Marke
Dunkelbraun
--brand-dark
Rotbraun
--brand-red
Flächen und Rahmen
Fläche getönt
--surface-2
Rahmen
--border
Rahmen kräftig
--border-strong
Akzent weich
--accent-soft
Bedeutung – die einzigen markenfremden Farben
Positiv
--positive
Negativ
--negative
Diagramme
1
--chart-1
2
--chart-2
3
--chart-3
4
--chart-4
5
--chart-5
6
--chart-6

Schrift

Five Boroughs Handwriting – Headlines
Kuhle Eifel
Branding – Texteinheiten

300 Light – Hilfstexte und Zusatzzeilen

400 Semilight – Grundgewicht im Fließtext

500 Medium – Labels und Buttons

600 Semibold – Kennzahlen und Kartentitel

Tabellenziffern

1.234,50 € · 987,00 € · 12,5 %

Kennzahlen
Neutral
12.480 €
Vormonat 11.900 €
Positiv
+ 4,9 %
über Plan
Negativ
− 2,3 %
unter Plan
Akzent
87
Bestellungen

Badges

NeutralPositivNegativPlanAkzent

Buttons und Umschalter

Formularfelder

Checkbox

Tabelle mit editierbaren Zellen

Tippen, mit Tab oder Enter bestätigen – Escape verwirft

Beispiel
BezeichnungBetragAnteilAktiv
%
%

Anteilsbalken

Kategorien in den Diagrammfarben

  • Wareneinsatz4.200 €41 %
  • Personal3.100 €31 %
  • Miete1.500 €15 %
  • Marketing900 €9 %
  • Sonstiges450 €4 %

Ladezustand