klasu

Styleguide

Erzeugt aus den Tokens. Version 0.1.0. Dieser Stand ist die Referenz für Web, E-Mail, Druck und Dokumente.

Farben hell

Farben dunkel

Schrift

Lexend: Was neu ist. Was ansteht.

Beträge: 1.234,50 € in Courier Prime.

Abstand, Radius, Ebenen

Kontrast

98 von 98 Paaren bestanden, 0 nicht bestanden.

Hell

VordergrundHintergrundVerwendungWertSollErgebnis
color-text #26221Dcolor-bg #FAF6EFFließtext14,67:14,5:1bestanden
color-text #26221Dcolor-surface-raised #FFFFFFFließtext15,80:14,5:1bestanden
color-text #26221Dcolor-surface-sunken #F1EADDFließtext13,21:14,5:1bestanden
color-text #26221Dcolor-surface-overlay #FFFFFFFließtext15,80:14,5:1bestanden
color-text-muted #5A5348color-bg #FAF6EFGedämpfter Text7,05:14,5:1bestanden
color-text-muted #5A5348color-surface-raised #FFFFFFGedämpfter Text7,59:14,5:1bestanden
color-text-muted #5A5348color-surface-sunken #F1EADDGedämpfter Text6,35:14,5:1bestanden
color-text-muted #5A5348color-surface-overlay #FFFFFFGedämpfter Text7,59:14,5:1bestanden
color-accent #1E6B5Acolor-bg #FAF6EFLink / Akzenttext5,90:14,5:1bestanden
color-accent #1E6B5Acolor-surface-raised #FFFFFFLink / Akzenttext6,35:14,5:1bestanden
color-accent #1E6B5Acolor-surface-sunken #F1EADDLink / Akzenttext5,31:14,5:1bestanden
color-accent #1E6B5Acolor-surface-overlay #FFFFFFLink / Akzenttext6,35:14,5:1bestanden
color-text-on-accent #FFFFFFcolor-accent #1E6B5AText auf Primärbutton6,35:14,5:1bestanden
color-text-on-accent #FFFFFFcolor-accent-hover #17574AText auf Primärbutton (Hover)8,40:14,5:1bestanden
color-bg #FAF6EFcolor-error #B3261EText auf Löschen-Button (btn-danger)6,07:14,5:1bestanden
color-text #26221Dcolor-accent-subtle #DCEFE8Text auf Akzentfläche (subtil)13,21:14,5:1bestanden
color-accent #1E6B5Acolor-accent-subtle #DCEFE8Akzenttext auf Akzentfläche5,31:14,5:1bestanden
color-ask-new-text #26221Dcolor-bg #FAF6EFFrage „Was ist neu?“ (Dashboard), Text neben/auf Markierung14,67:14,5:1bestanden
color-ask-upcoming-text #1E6B5Acolor-bg #FAF6EFFrage „Was steht an?“ (Dashboard)5,90:14,5:1bestanden
color-on-new #26221Dcolor-new #F2B632Text auf „Neu“-Markierung8,66:14,5:1bestanden
color-new-edge #5A5348color-bg #FAF6EF„Neu“-Badge: Rand gegen Grund (UI). Die gelbe Fläche allein erreicht im hellen Theme nur 1,7:1, deshalb trägt das Badge immer Text und einen Rand7,05:13:1bestanden
color-new-edge #5A5348color-surface-raised #FFFFFF„Neu“-Badge: Rand gegen Karte (UI)7,59:13:1bestanden
color-success #1B6B3Acolor-bg #FAF6EFStatus success: Text auf Grund6,07:14,5:1bestanden
color-success #1B6B3Acolor-success-bg #DDF1E4Status success: Text auf Statusfläche5,54:14,5:1bestanden
color-warning #7A4B00color-bg #FAF6EFStatus warning: Text auf Grund6,88:14,5:1bestanden
color-warning #7A4B00color-warning-bg #FFF1CCStatus warning: Text auf Statusfläche6,60:14,5:1bestanden
color-error #B3261Ecolor-bg #FAF6EFStatus error: Text auf Grund6,07:14,5:1bestanden
color-error #B3261Ecolor-error-bg #FBE4E1Status error: Text auf Statusfläche5,38:14,5:1bestanden
color-info #1F5FA8color-bg #FAF6EFStatus info: Text auf Grund5,98:14,5:1bestanden
color-info #1F5FA8color-info-bg #E3EEFAStatus info: Text auf Statusfläche5,48:14,5:1bestanden
color-amount-in #1B6B3Acolor-bg #FAF6EFBetrag Einnahme (zusätzlich Vorzeichen +)6,07:14,5:1bestanden
color-amount-out #B3261Ecolor-bg #FAF6EFBetrag Ausgabe (zusätzlich Vorzeichen −)6,07:14,5:1bestanden
color-amount-in #1B6B3Acolor-surface-raised #FFFFFFBetrag Einnahme auf Karte6,54:14,5:1bestanden
color-amount-out #B3261Ecolor-surface-raised #FFFFFFBetrag Ausgabe auf Karte6,54:14,5:1bestanden
color-module-messages #1F5F8Bcolor-bg #FAF6EFModul messages: Text/Icon auf Grund6,35:14,5:1bestanden
color-module-messages #1F5F8Bcolor-module-messages-bg #E3EEF7Modul messages: Text/Icon auf Modulfläche5,81:14,5:1bestanden
color-module-events #7A2E6Bcolor-bg #FAF6EFModul events: Text/Icon auf Grund8,02:14,5:1bestanden
color-module-events #7A2E6Bcolor-module-events-bg #F3E3F0Modul events: Text/Icon auf Modulfläche7,02:14,5:1bestanden
color-module-cash #7D5200color-bg #FAF6EFModul cash: Text/Icon auf Grund6,33:14,5:1bestanden
color-module-cash #7D5200color-module-cash-bg #F6EBD3Modul cash: Text/Icon auf Modulfläche5,76:14,5:1bestanden
color-module-documents #475666color-bg #FAF6EFModul documents: Text/Icon auf Grund6,98:14,5:1bestanden
color-module-documents #475666color-module-documents-bg #E7EBEFModul documents: Text/Icon auf Modulfläche6,28:14,5:1bestanden
color-module-consent #0F6262color-bg #FAF6EFModul consent: Text/Icon auf Grund6,62:14,5:1bestanden
color-module-consent #0F6262color-module-consent-bg #DDF0EFModul consent: Text/Icon auf Modulfläche6,04:14,5:1bestanden
color-border-strong #857B6Bcolor-bg #FAF6EFRand Formularfeld auf Grund (UI)3,87:13:1bestanden
color-border-strong #857B6Bcolor-surface-raised #FFFFFFRand Formularfeld auf Karte (UI)4,16:13:1bestanden
color-focus-ring #1E6B5Acolor-bg #FAF6EFFokusring auf Grund (UI)5,90:13:1bestanden
color-focus-ring #1E6B5Acolor-surface-raised #FFFFFFFokusring auf Karte (UI)6,35:13:1bestanden
color-focus-ring #1E6B5Acolor-accent-subtle #DCEFE8Fokusring auf Akzentfläche (UI)5,31:13:1bestanden

Dunkel

VordergrundHintergrundVerwendungWertSollErgebnis
color-text #EDE7DCcolor-bg #1D1A17Fließtext14,08:14,5:1bestanden
color-text #EDE7DCcolor-surface-raised #2A2621Fließtext12,21:14,5:1bestanden
color-text #EDE7DCcolor-surface-sunken #171513Fließtext14,80:14,5:1bestanden
color-text #EDE7DCcolor-surface-overlay #332E28Fließtext10,92:14,5:1bestanden
color-text-muted #B9AE9Ccolor-bg #1D1A17Gedämpfter Text7,92:14,5:1bestanden
color-text-muted #B9AE9Ccolor-surface-raised #2A2621Gedämpfter Text6,87:14,5:1bestanden
color-text-muted #B9AE9Ccolor-surface-sunken #171513Gedämpfter Text8,32:14,5:1bestanden
color-text-muted #B9AE9Ccolor-surface-overlay #332E28Gedämpfter Text6,14:14,5:1bestanden
color-accent #6FC2ACcolor-bg #1D1A17Link / Akzenttext8,24:14,5:1bestanden
color-accent #6FC2ACcolor-surface-raised #2A2621Link / Akzenttext7,15:14,5:1bestanden
color-accent #6FC2ACcolor-surface-sunken #171513Link / Akzenttext8,66:14,5:1bestanden
color-accent #6FC2ACcolor-surface-overlay #332E28Link / Akzenttext6,39:14,5:1bestanden
color-text-on-accent #10231Ecolor-accent #6FC2ACText auf Primärbutton7,80:14,5:1bestanden
color-text-on-accent #10231Ecolor-accent-hover #92D3C1Text auf Primärbutton (Hover)9,61:14,5:1bestanden
color-bg #1D1A17color-error #F2A097Text auf Löschen-Button (btn-danger)8,46:14,5:1bestanden
color-text #EDE7DCcolor-accent-subtle #1F3A33Text auf Akzentfläche (subtil)9,97:14,5:1bestanden
color-accent #6FC2ACcolor-accent-subtle #1F3A33Akzenttext auf Akzentfläche5,84:14,5:1bestanden
color-ask-new-text #F2B632color-bg #1D1A17Frage „Was ist neu?“ (Dashboard), Text neben/auf Markierung9,50:14,5:1bestanden
color-ask-upcoming-text #6FC2ACcolor-bg #1D1A17Frage „Was steht an?“ (Dashboard)8,24:14,5:1bestanden
color-on-new #26221Dcolor-new #F2B632Text auf „Neu“-Markierung8,66:14,5:1bestanden
color-new-edge #F2B632color-bg #1D1A17„Neu“-Badge: Rand gegen Grund (UI). Die gelbe Fläche allein erreicht im hellen Theme nur 1,7:1, deshalb trägt das Badge immer Text und einen Rand9,50:13:1bestanden
color-new-edge #F2B632color-surface-raised #2A2621„Neu“-Badge: Rand gegen Karte (UI)8,24:13:1bestanden
color-success #7FCB9Bcolor-bg #1D1A17Status success: Text auf Grund9,01:14,5:1bestanden
color-success #7FCB9Bcolor-success-bg #1F3A2AStatus success: Text auf Statusfläche6,43:14,5:1bestanden
color-warning #F2B632color-bg #1D1A17Status warning: Text auf Grund9,50:14,5:1bestanden
color-warning #F2B632color-warning-bg #3A2D10Status warning: Text auf Statusfläche7,37:14,5:1bestanden
color-error #F2A097color-bg #1D1A17Status error: Text auf Grund8,46:14,5:1bestanden
color-error #F2A097color-error-bg #41201CStatus error: Text auf Statusfläche7,08:14,5:1bestanden
color-info #8DB7E8color-bg #1D1A17Status info: Text auf Grund8,31:14,5:1bestanden
color-info #8DB7E8color-info-bg #1F2D3AStatus info: Text auf Statusfläche6,74:14,5:1bestanden
color-amount-in #7FCB9Bcolor-bg #1D1A17Betrag Einnahme (zusätzlich Vorzeichen +)9,01:14,5:1bestanden
color-amount-out #F2A097color-bg #1D1A17Betrag Ausgabe (zusätzlich Vorzeichen −)8,46:14,5:1bestanden
color-amount-in #7FCB9Bcolor-surface-raised #2A2621Betrag Einnahme auf Karte7,81:14,5:1bestanden
color-amount-out #F2A097color-surface-raised #2A2621Betrag Ausgabe auf Karte7,33:14,5:1bestanden
color-module-messages #86B8E3color-bg #1D1A17Modul messages: Text/Icon auf Grund8,23:14,5:1bestanden
color-module-messages #86B8E3color-module-messages-bg #1F2D3AModul messages: Text/Icon auf Modulfläche6,68:14,5:1bestanden
color-module-events #D8A0CCcolor-bg #1D1A17Modul events: Text/Icon auf Grund8,10:14,5:1bestanden
color-module-events #D8A0CCcolor-module-events-bg #3A2536Modul events: Text/Icon auf Modulfläche6,56:14,5:1bestanden
color-module-cash #E3B96Acolor-bg #1D1A17Modul cash: Text/Icon auf Grund9,41:14,5:1bestanden
color-module-cash #E3B96Acolor-module-cash-bg #3A3020Modul cash: Text/Icon auf Modulfläche7,03:14,5:1bestanden
color-module-documents #A9B6C4color-bg #1D1A17Modul documents: Text/Icon auf Grund8,39:14,5:1bestanden
color-module-documents #A9B6C4color-module-documents-bg #2B3138Modul documents: Text/Icon auf Modulfläche6,36:14,5:1bestanden
color-module-consent #7FD0CEcolor-bg #1D1A17Modul consent: Text/Icon auf Grund9,75:14,5:1bestanden
color-module-consent #7FD0CEcolor-module-consent-bg #1F3A39Modul consent: Text/Icon auf Modulfläche6,86:14,5:1bestanden
color-border-strong #8F8575color-bg #1D1A17Rand Formularfeld auf Grund (UI)4,77:13:1bestanden
color-border-strong #8F8575color-surface-raised #2A2621Rand Formularfeld auf Karte (UI)4,14:13:1bestanden
color-focus-ring #6FC2ACcolor-bg #1D1A17Fokusring auf Grund (UI)8,24:13:1bestanden
color-focus-ring #6FC2ACcolor-surface-raised #2A2621Fokusring auf Karte (UI)7,15:13:1bestanden
color-focus-ring #6FC2ACcolor-accent-subtle #1F3A33Fokusring auf Akzentfläche (UI)5,84:13:1bestanden

Icons (46, Lucide, ISC)