ICF Nürnberg

Church Management

UI Library

Tailwind CSS Navbar component

ICF Farbschema

Das ICF Design ist minimalistisch und zurückhaltend

Design-Prinzipien

  • Viel Weißraum und Grautöne
  • Farbe wird sparsam eingesetzt
  • Dunkelgrau (#5c5c5c) ist die Standard-Button-Farbe
  • Orange (#ff6600) wird nur als Akzent für wichtige CTAs verwendet
  • Klare Hierarchie durch Typografie statt durch Farbe

Hauptfarben

Click to copy

Weiß

Primärer Hintergrund

CSS Variable:
--color-icf-white
HEX
#ffffff
RGB
rgb(255, 255, 255)
Click to copy

Charcoal / Dunkelgrau

Standard-Buttons (ICF Standard)

CSS Variable:
--color-icf-charcoal
HEX
#5c5c5c
RGB
rgb(92, 92, 92)
Click to copy

Grau

Fließtext, Beschreibungen

CSS Variable:
--color-icf-gray
HEX
#767676
RGB
rgb(118, 118, 118)
Click to copy

Grau Hellst

Sekundäre Hintergründe, Sections

CSS Variable:
--color-icf-gray-lightest
HEX
#f5f5f5
RGB
rgb(245, 245, 245)
Click to copy

Grau Heller

Borders, Divider

CSS Variable:
--color-icf-gray-lighter
HEX
#e5e5e5
RGB
rgb(229, 229, 229)

Akzentfarbe

Click to copy

ICF Orange

Nur für wichtige CTAs!

CSS Variable:
--color-icf-orange
HEX
#ff6600
RGB
rgb(255, 102, 0)
Click to copy

Orange Hell

Hover-Zustände

CSS Variable:
--color-icf-orange-light
HEX
#ff8533
RGB
rgb(255, 133, 51)
Click to copy

Orange Dunkel

Active-Zustände

CSS Variable:
--color-icf-orange-dark
HEX
#cc5200
RGB
rgb(204, 82, 0)

Weitere Grautöne

Click to copy

Schwarz

Tiefster Ton

CSS Variable:
--color-icf-black
HEX
#000000
RGB
rgb(0, 0, 0)
Click to copy

Grau Dunkler

Dunkle Akzente

CSS Variable:
--color-icf-gray-darker
HEX
#4a4a4a
RGB
rgb(74, 74, 74)
Click to copy

Grau Dunkel

Hover-Zustände

CSS Variable:
--color-icf-gray-dark
HEX
#6a6a6a
RGB
rgb(106, 106, 106)
Click to copy

Grau Mittel

Mittlere Grautöne

CSS Variable:
--color-icf-gray-medium
HEX
#999999
RGB
rgb(153, 153, 153)
Click to copy

Grau Hell

Helle Borders

CSS Variable:
--color-icf-gray-light
HEX
#cccccc
RGB
rgb(204, 204, 204)

System-Farben

Click to copy

Grün

Erfolgs-Meldungen

CSS Variable:
--color-icf-green
HEX
#28a745
RGB
rgb(40, 167, 69)
Click to copy

Rot

Fehler-Meldungen

CSS Variable:
--color-icf-red
HEX
#dc3545
RGB
rgb(220, 53, 69)
Click to copy

Blau

Info-Meldungen

CSS Variable:
--color-icf-blue
HEX
#0056b3
RGB
rgb(0, 86, 179)

Textfarben

Click to copy

Text Primary

Haupt-Textinhalt

CSS Variable:
--color-text-primary
HEX
#333333
RGB
rgb(51, 51, 51)
Click to copy

Text Secondary

Sekundärer Text

CSS Variable:
--color-text-secondary
HEX
#767676
RGB
rgb(118, 118, 118)
Click to copy

Text Tertiary

Tertiärer Text, Meta-Informationen

CSS Variable:
--color-text-tertiary
HEX
#999999
RGB
rgb(153, 153, 153)
Click to copy

Text Inverse

Text auf dunklem Hintergrund

CSS Variable:
--color-text-inverse
HEX
#ffffff
RGB
rgb(255, 255, 255)
Click to copy

Text Link

Links (Standard)

CSS Variable:
--color-text-link
HEX
#5c5c5c
RGB
rgb(92, 92, 92)
Click to copy

Text Link Hover

Links (Hover)

CSS Variable:
--color-text-link-hover
HEX
#ff6600
RGB
rgb(255, 102, 0)

Hintergrundfarben

Click to copy

Background Primary

Haupt-Hintergrund

CSS Variable:
--color-bg-primary
HEX
#ffffff
RGB
rgb(255, 255, 255)
Click to copy

Background Secondary

Sekundärer Hintergrund

CSS Variable:
--color-bg-secondary
HEX
#f5f5f5
RGB
rgb(245, 245, 245)
Click to copy

Background Tertiary

Tertiärer Hintergrund

CSS Variable:
--color-bg-tertiary
HEX
#e5e5e5
RGB
rgb(229, 229, 229)

Verwendungsbeispiele

Buttons mit ICF-Farben

<button class="btn-icf-primary">Standard</button>
<button class="btn-icf-accent">Wichtiger CTA</button>

Texthierarchie

Primary Text (#333333) - Überschriften und wichtige Inhalte

Secondary Text (#767676) - Fließtext und Beschreibungen

Tertiary Text (#999999) - Meta-Informationen und weniger wichtige Details

Link (#5c5c5c → #ff6600 on hover)

Hintergrund-Hierarchie

Primary Background (#ffffff) - Hauptinhalt, Karten
Secondary Background (#f5f5f5) - Sections, Container
Tertiary Background (#e5e5e5) - Subtile Abgrenzungen