Designpalette
Konsulent-dashboard · Jydsk Tagteknik A/S
Kernefarver (brand)
Det bærende udtryk i hele systemet. Bruges til baggrunde, tekst, sidebar og primære knapper.
Statustokens
Hver status har fire nuancer — lys, base, mørk og tekst — så samme betydning (fx "fejl" eller "afventer") altid ser konsekvent ud, uanset om det vises som baggrund, badge eller tekst.
Digitale datafarver
Ny, friskere palet introduceret til grafer, små ikoner og badges — for at gøre data nemmere at skelne i dashboardet.
Brugsregel — vigtig at overholde
- Bruges kun til grafer, fremdriftsbjælker, små ikoner og badges — aldrig til store flader som baggrunde eller sidebars.
- Grøn forbliver den eneste CTA-farve. De nye farver bruges ikke til knapper der skal have "tryk her"-betydning.
- 95% af enhver skærm skal stadig se ud som ren JTT-brand — datafarverne er et tyndt lag ovenpå, ikke en ny identitet.
Undgå farvekollision Hot koral må ikke optræde i samme visning som Fejl-tokenets base-farve — begge kan læses som "noget er galt". Solskinsgul må ikke optræde sammen med Advarsel-tokenets base-farve, af samme grund.
Typografi
Raleway i hele systemet, fra overskrifter til brødtekst.
800 · 28px
Denne måneds indtjening
700 · 18px
Sektionsoverskrift
600 · 14px
Fremhævet brødtekst
400 · 13px
Almindelig brødtekst til labels og forklaringer
700 · 11px
Label / overline
Grundlæggende former
Konsekvente afrundinger og knapformer på tværs af hele systemet.
Piller (999px)
Alle primære knapper
20px afrunding
Store kort, billeder
12px afrunding
Mindre kort, KPI-bokse
I praksis
Sådan spiller brandfarver og datafarver sammen i et rigtigt eksempel fra dashboardet.
Denne måneds indtjening
45.500 kr.
↑ 8,4% ift. sidste måned
Grundløn
Provision
Bonus
CSS-tokens til udvikling
Til Dennis — hele paletten samlet, klar til at sætte ind i kodebasen.
Brandfarver
Status tokens
--status-success Gennemført · aktiv · godkendt ★ Brand: #32F99C + #025959
Gennemført Aktiv abonnement Godkendt
--status-error Fejl · stop · kritisk handling Tonet: køligere rød
Bestilling fejlede Ingen dækning Kritisk fejl
--status-warning Advarsel · opmærksomhed · risiko Tonet: gylden amber
Begrænset tilbud Vær opmærksom Udløber snart
--status-info Information · neutral besked · hjælp ★ Brand teal-familie
Info Vidste du at... Læs mere
--status-pending Afventer · inaktiv · behandles ★ Brand: #F3F5F7 + #273846
Afventer Behandles Inaktiv
/* ───────────────────────────────────────────── Jydsk Tagteknik — Brand + Status Color Tokens ───────────────────────────────────────────── */ :root { /* Brand */ --brand-light: #F3F5F7; --brand-navy: #273846; --brand-mint: #32F99C; --brand-mint-mid: #35D89C; --brand-teal: #025959; /* Success — brand mint */ --success-light: #E6FEF4; --success: #32F99C; --success-dark: #35D89C; --success-text: #025959; /* Error — køligere rød */ --error-light: #FDEEF1; --error: #E8385A; --error-dark: #B5213A; --error-text: #7A1429; /* Warning — gylden amber */ --warning-light: #FFF5DC; --warning: #F5B731; --warning-dark: #C98A00; --warning-text: #6B4800; /* Info — brand teal-familie */ --info-light: #E0F5F3; --info: #0ABEBD; --info-dark: #047A79; --info-text: #025959; /* Pending — brand navy + light */ --pending-light: #F3F5F7; --pending: #94A3B8; --pending-dark: #475569; --pending-text: #273846; }