Corporate Identity Guidelines

innobu – Design System & Brand Guidelines

Version 1.0 | Februar 2026

1. Markenidentität

Markenname

innobu – immer in Kleinbuchstaben geschrieben

Tagline

Digitale Transformation. Menschlich. Messbar.

Mit KI und Expertenwissen zum nachhaltigen Unternehmenserfolg

Markenwerte

Innovation

Verantwortung

Menschlichkeit

Logo

Auf dunklem Hintergrund

Auf hellem Hintergrund

2. Farbpalette

Primärfarben

Aa

Primary (Electric Blue)

#40c0f0

--color-primary

Aa

Secondary (Teal)

#00b2a9

--color-secondary

Aa

Accent (Deep Teal)

#0291BA

Gradient-Akzent

Textfarben

Aa

Text (Weiß)

#ffffff

--color-text

Aa

Text Light

#cccccc

--color-text-light

Aa

Text Highlight

#89cff0

--color-text-highlight

Hintergrundfarben

Aa

Background Dark

#0a1625

--bg-dark

Aa

Background Medium

#1a2844

--bg-medium

Aa

Background Light

#0d1b2a

--bg-light

3. Gradienten

Body Gradient

linear-gradient(135deg, #0a1625 0%, #1a2844 50%, #0d1b2a 100%)

Card Gradient

linear-gradient(135deg, rgba(26, 40, 68, 0.8) 0%, rgba(13, 27, 42, 0.9) 100%)

Button Gradient

linear-gradient(135deg, #00b2a9, #0291BA)

Accent Line

linear-gradient(90deg, transparent, #40c0f0, transparent)

4. Typografie

Primäre Schriftart

Open Sans

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

     
      font-family: 'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

Schriftgrößen

--font-size-5xl 3.5rem – Hero Headlines

--font-size-4xl 2.5rem – Section Headlines

--font-size-3xl 2rem – Sub-Headlines

--font-size-2xl 1.8rem – Card Headlines

--font-size-xl 1.4rem – Subtitles

--font-size-lg 1.3rem – Large Text

--font-size-base 1rem – Body Text

--font-size-sm 0.9rem – Small Text

--font-size-xs 0.85rem – Extra Small

Zeilenhöhe

Standard-Zeilenhöhe: 1.6

5. Abstände (Spacing)

--spacing-xs

5px

--spacing-sm

10px

--spacing-md

20px

--spacing-lg

40px

--spacing-xl

60px

6. Border Radius

--radius-sm
10px

--radius-md
15px

--radius-lg
20px

7. Schatten (Shadows)

Small Shadow

0 8px 32px rgba(0, 0, 0, 0.3)

Medium Shadow

0 12px 40px rgba(0, 0, 0, 0.4)

Large Shadow

0 15px 50px rgba(0, 0, 0, 0.4)

Primary Glow

0 0 20px rgba(64, 192, 240, 0.3)

Secondary Glow

0 0 20px rgba(0, 178, 169, 0.3)

8. Komponenten

Buttons

Cards

Standard Card

Cards verwenden einen subtilen Gradient mit Glasmorphismus-Effekt (backdrop-filter: blur). Die obere Akzentlinie verstärkt die visuelle Hierarchie.

Interaktive Card

Bei Hover: translateY(-10px) und verstärkter Box-Shadow mit Teal-Akzent für visuelle Tiefe.

Navigation

innobu

Home Insights Über uns Kontakt

Text-Highlights

Für wichtige Begriffe verwenden wir .highlight (Teal) oder .electric-highlight (Electric Blue) je nach Kontext.

9. CSS-Variablen Referenz

     
      :root {
    /* Farben */
    --color-primary: #40c0f0;
    --color-secondary: #00b2a9;
    --color-text: #ffffff;
    --color-text-light: #cccccc;
    --color-text-highlight: #89cff0;
    
    /* Hintergrundfarben */
    --bg-dark: #0a1625;
    --bg-medium: #1a2844;
    --bg-light: #0d1b2a;
    
    /* Gradienten */
    --gradient-body: linear-gradient(135deg, var(--bg-dark) 0%, var(--bg-medium) 50%, var(--bg-light) 100%);
    --gradient-card: linear-gradient(135deg, rgba(26, 40, 68, 0.8) 0%, rgba(13, 27, 42, 0.9) 100%);
    --gradient-header: linear-gradient(135deg, rgba(26, 40, 68, 0.9), rgba(13, 27, 42, 0.9));
    --gradient-button: linear-gradient(135deg, var(--color-secondary), #0291BA);
    
    /* Schatten */
    --shadow-small: 0 8px 32px rgba(0, 0, 0, 0.3);
    --shadow-medium: 0 12px 40px rgba(0, 0, 0, 0.4);
    --shadow-large: 0 15px 50px rgba(0, 0, 0, 0.4);
    --shadow-glow-primary: 0 0 20px rgba(64, 192, 240, 0.3);
    --shadow-glow-secondary: 0 0 20px rgba(0, 178, 169, 0.3);
    
    /* Abstände */
    --spacing-xs: 5px;
    --spacing-sm: 10px;
    --spacing-md: 20px;
    --spacing-lg: 40px;
    --spacing-xl: 60px;
    
    /* Border-Radius */
    --radius-sm: 10px;
    --radius-md: 15px;
    --radius-lg: 20px;
    
    /* Schriftgrößen */
    --font-size-xs: 0.85rem;
    --font-size-sm: 0.9rem;
    --font-size-base: 1rem;
    --font-size-md: 1.1rem;
    --font-size-lg: 1.3rem;
    --font-size-xl: 1.4rem;
    --font-size-2xl: 1.8rem;
    --font-size-3xl: 2rem;
    --font-size-4xl: 2.5rem;
    --font-size-5xl: 3.5rem;
    
    /* Container-Breiten */
    --container-width: 1400px;
    --article-container-width: 1200px;
}
     
    

10. Design-Prinzipien

Glasmorphismus

Alle Karten und Container verwenden backdrop-filter: blur(15px) für einen modernen Glass-Effekt. Die Hintergründe sind semi-transparent.

Subtile Akzente

Obere Gradient-Linien ( ::before ) auf Cards und Sektionen schaffen visuelle Hierarchie ohne zu dominieren.

Glow-Effekte

Text-Shadows und Box-Shadows mit leichtem Glow verstärken die futuristische Ästhetik. Sparsam einsetzen für maximale Wirkung.

Hover-Animationen

Interaktive Elemente nutzen transition: all 0.3s ease . Cards heben sich bei Hover an (translateY).

Diese Guidelines sind die verbindliche Referenz für alle digitalen Produkte und Kommunikationsmittel.