Paletten
Neutraler och accenter
Färgerna finns som tokens (--mg-*) i css/magello.css och som värden i tokens/tokens.json. Använd alltid token eller hex från tabellen. Hitta inte på mellanvärden.
Neutraler
Det här är sidans grund: text, ytor och struktur.
Accenter
Magenta är primär. De övriga används i ikoner, processteg och status, aldrig som textfärg eller stor yta.
Den vita rutan har en ram i rosagrått enbart för att den ska synas här. Vit yta på vit sida har ingen kant i designen.
Proportioner
Så mycket av varje
Rosagrått ger värme, svart ger tydlighet och magenta pekar ut det viktigaste. Ju mindre magenta, desto starkare blir den.
- Låt vitt och rosagrått bära ytorna
- Använd magenta för en sak i taget: primär knapp, sektionsrubrik, länk eller utvalt ord
- Låt ikoner och processteg bära de övriga accenterna
- Fylla stora ytor med magenta och lägga brödtext ovanpå
- Använda två accenter som textfärg bredvid varandra
- Göra sektioner svarta, mörkgrå eller starkt färgade
- Mörka ytor används inte i marknadsmaterial. Verktyg och appar har en mörk rosagrå topbar (
#3D2535) som enda undantag
Regel
Accentfärger är fyllnad, aldrig kant
Magenta och de andra accenterna fyller former, ikoner, knappar och text. De ritas aldrig som streck, understrykning eller kantlinje.
- Fyll knappar, etiketter, ikoner och former
- Använd magenta som textfärg för H2, länkar och enstaka ord
- Behöver du en understrykning: gör den som en skev polygon (som i ”Lediga jobb”)
border-left: 3px solid magentasom accentlinje- Färgade streck som avgränsare mellan sektioner
- Understrukna rubriker i accentfärg
Undantag: ett fokus- och statusmarkerat formulärfält byter kantfärg (blå, röd, grön). Det är funktionellt och beskrivs under Formulär & feedback.
Tillgänglighet
Kontrast
Brödtext ska ha minst 4,5 : 1 mot bakgrunden (WCAG AA). Stor text (från 24 px, eller 19 px fet) klarar 3 : 1. Värdena nedan är beräknade från tokens.
| Kombination | Prov | Kvot | Klarar AA för brödtext |
|---|---|---|---|
| Brödtext | Aa Magello | 21.0 : 1 | Ja |
| Sekundär text | Aa Magello | 8.8 : 1 | Ja |
| Brödtext på rosa | Aa Magello | 17.9 : 1 | Ja |
| Sekundär text på rosa | Aa Magello | 7.5 : 1 | Ja |
| Magenta text på vitt | Aa Magello | 4.2 : 1 | Endast stor text |
| Vit text på magenta (knapp) | Aa Magello | 4.2 : 1 | Endast stor text |
| Svart text på rose-200 (sekundär knapp) | Aa Magello | 14.9 : 1 | Ja |
| Grå 300 text på vitt | Aa Magello | 1.8 : 1 | Nej |
| Vit text på blå | Aa Magello | 2.6 : 1 | Nej |
| Svart text på gul | Aa Magello | 15.5 : 1 | Ja |
| Vit text på grön | Aa Magello | 3.1 : 1 | Endast stor text |
| Vit text på röd | Aa Magello | 4.9 : 1 | Ja |
- Använd svart eller
--mg-text-2för brödtext - Använd magenta på vitt för rubriker och länkar (stor eller fet text)
- Kontrollera nya kombinationer innan du använder dem
- Grå 300 som brödtext. Den är bara till diskreta etiketter, årtal och brödsmula
- Vit liten text på gul eller blå yta
Status
Färger med betydelse
Accentfärgerna får också en semantisk roll i gränssnitt. Roll och färg hänger ihop. Använd aldrig röd för något positivt.
| Roll | Färg | Betyder |
|---|---|---|
| Fel | #E3012F | Något gick fel eller är ogiltigt |
| Klart | #1BA660 | Lyckades, giltigt, godkänt |
| Info / bearbetar | #31ABE2 | Pågår eller neutral information |
| Varning | #FFDC00 | Kan bli ett problem (svart text) |