fassadenfix-branding

name	fassadenfix-branding
description	Wendet FassadenFix Corporate Design und Branding-Richtlinien an. Verwenden bei: HTML/CSS-Generierung, UI-Komponenten, Webanwendungen, Styling, Farbschemata, Typografie, Design-Systeme, Dokumente, Prasentationen, Markenkonformitaet.

FassadenFix Corporate Design & Branding

Du wendest bei allen visuellen und gestalterischen Aufgaben automatisch das FassadenFix Corporate Design an. Markenkonformitaet ist der Standard -- Abweichung erfordert explizite Anweisung.

Farbpalette

Primaerfarbe: FassadenFix Gruen

Eigenschaft	Wert
HEX	#77bc1f
RGB	R 119, G 188, B 31
CMYK	C 59, M 0, Y 100, K 0
Pantone	368 C
CSS Variable	--ff-green / --color-primary
Verwendung	Hauptmarkenfarbe, CTA-Buttons, Logo-Icon, primaere Akzente

Varianten:

• Dunkel (Hover): #6aa91b
• Hell (Highlights): #8fcc3f

Sekundaerfarbe: Dunkelgrau

Eigenschaft	Wert
HEX	#4e5758
RGB	R 78, G 87, B 88
CMYK	C 65, M 48, Y 49, K 41
Pantone	445 C
CSS Variable	--ff-gray / --color-secondary
Verwendung	Fliesstext, Footer, sekundaere UI-Elemente

Variante:

• Hell: #6b7577

Erweiterte Palette (Neutrale Farben)

--ff-gray-50:  #f9fafb
--ff-gray-100: #f3f4f6
--ff-gray-200: #e5e7eb
--ff-gray-300: #d1d5db
--ff-gray-600: #4b5563
--ff-gray-900: #111827

Typografie

Schriftart: Raleway (Google Fonts)

<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;600;700;800&display=swap" rel="stylesheet">

Element	Gewicht	Groesse
H1	Bold (700)	3rem / 48px
H2	Bold (700)	2.25rem / 36px
H3	SemiBold (600)	1.875rem / 30px
H4	SemiBold (600)	1.5rem / 24px
Body	Regular (400) / Medium (500)	1rem / 16px
Buttons	Bold (700) / SemiBold (600)	1rem / 16px
Small	Regular (400)	0.875rem / 14px

body {
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
  color: #4e5758;
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  color: #4e5758;
}

UI-Komponenten

Primary Button

.btn-primary {
  background-color: #77bc1f;
  color: #ffffff;
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  border-radius: 8px;
  padding: 12px 24px;
  border: none;
  transition: all 0.3s ease;
}
.btn-primary:hover {
  background-color: #6aa91b;
  box-shadow: 0 4px 6px rgba(119, 188, 31, 0.3);
}

Secondary Button

.btn-secondary {
  background-color: transparent;
  color: #77bc1f;
  border: 2px solid #77bc1f;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  border-radius: 8px;
  padding: 12px 24px;
}
.btn-secondary:hover {
  background-color: #77bc1f;
  color: #ffffff;
}

Cards

.card {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(78, 87, 88, 0.1);
  padding: 24px;
}

Navigation

.nav { background: #ffffff; }
.nav-link { color: #4e5758; font-weight: 500; }
.nav-link:hover, .nav-link.active { color: #77bc1f; }

Footer

.footer { background: #4e5758; color: #ffffff; }
.footer a { color: #ffffff; }
.footer a:hover { color: #77bc1f; }

Design-System Tokens

Spacing (8px-Grid)

--spacing-xs:  4px
--spacing-sm:  8px
--spacing-md:  16px
--spacing-lg:  24px
--spacing-xl:  32px
--spacing-2xl: 48px
--spacing-3xl: 64px

Border Radius

--radius-sm:   4px   (Inputs, kleine Elemente)
--radius-md:   8px   (Buttons, Cards)
--radius-lg:   12px  (Groessere Cards)
--radius-xl:   16px  (Hero-Sections)
--radius-full: 9999px (Runde Elemente)

Shadows

--shadow-sm: 0 1px 2px rgba(78, 87, 88, 0.1)
--shadow-md: 0 4px 6px rgba(78, 87, 88, 0.1)
--shadow-lg: 0 10px 15px rgba(78, 87, 88, 0.1)
--shadow-xl: 0 20px 25px rgba(78, 87, 88, 0.15)

Transitions

--transition-fast: 150ms ease
--transition-base: 300ms ease
--transition-slow: 500ms ease

Gradients

--gradient-primary: linear-gradient(135deg, #77bc1f 0%, #6aa91b 100%)
--gradient-hero: linear-gradient(135deg, #4e5758 0%, #77bc1f 100%)

Vollstaendige CSS Custom Properties

:root {
  /* Primaerfarben */
  --ff-green: #77bc1f;
  --ff-green-dark: #6aa91b;
  --ff-green-light: #8fcc3f;
  --color-primary: var(--ff-green);
  --color-primary-dark: var(--ff-green-dark);
  --color-primary-light: var(--ff-green-light);

  /* Sekundaerfarben */
  --ff-gray: #4e5758;
  --ff-gray-light: #6b7577;
  --color-secondary: var(--ff-gray);
  --color-secondary-light: var(--ff-gray-light);

  /* Neutrale Farben */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-600: #4b5563;
  --color-gray-900: #111827;

  /* Typografie */
  --font-family: 'Raleway', sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: ;
  : ;

  
  : ;
  : ;
  : ;
  : ;
  : ;
  : ;
  : ;
  : ;
  : ;

  
  : ;
  : ;
  : ;
  : ;
  : ;
  : ;
  : ;

  
  : ;
  : ;
  : ;
  : ;
  : ;

  
  :    (, , , );
  :    (, , , );
  :    (, , , );
  :    (, , , );

  
  :  ease;
  :  ease;
  :  ease;

  
  : (,  ,  );
  : (,  ,  );
}

Tailwind CSS Konfiguration

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'ff-green': '#77bc1f',
        'ff-gray': '#4e5758',
        primary: { DEFAULT: '#77bc1f', dark: '#6aa91b', light: '#8fcc3f' },
        secondary: { DEFAULT: '#4e5758', light: '#6b7577' },
      },
      fontFamily: { sans: ['Raleway', 'sans-serif'] },
      borderRadius: { sm: '4px', md: '8px', lg: '12px', xl: '16px' },
      boxShadow: {
        sm: '0 1px 2px rgba(78, 87, 88, 0.1)',
        md: '0 4px 6px rgba(78, 87, 88, 0.1)',
        lg: '0 10px 15px rgba(78, 87, 88, 0.1)',
        xl: '0 20px 25px rgba(78, 87, 88, 0.15)',
      },
    },
  },
}

Logo-Verwendung

Variante	Icon	Text	Hintergrund	Verwendung
Standard	Gruen	Gruen	Weiss/Hell	Header, Dokumente
Invertiert	Weiss	Weiss	Dunkelgrau	Footer, dunkle Bereiche
Akzent	Gruen	Gruen	Dunkelgrau	Alternative dunkel
CTA	Weiss	Weiss	Gruen	Banner, Buttons
Kontrast	Dunkelgrau	Dunkelgrau	Gruen	Gruene Hintergruende

• Mindestgroesse: 120px Breite (Web)
• Schutzraum: Mindestens Icon-Hoehe als Freiraum
• Seitenverhaeltnis immer beibehalten
• Nur vorgegebene Farbvarianten verwenden

Barrierefreiheit

Kombination	Kontrast	WCAG
Dunkelgrau auf Weiss	~8.5:1	AAA
Weiss auf Dunkelgrau	~8.5:1	AAA
Gruen auf Weiss	~3.5:1	AA (grosse Texte)
Weiss auf Gruen	~3.5:1	AA (grosse Texte)

Dunkelgrau fuer Fliesstext verwenden, Gruen fuer Ueberschriften, Buttons und Akzente.

Opt-Out

Branding wird NUR deaktiviert bei expliziter Anweisung:

• --no-branding
• --skip-fassadenfix-style
• "ohne FassadenFix Branding"
• "neutrales Design verwenden"
• "abweichendes Design"