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

Logo-Variante für helle Hintergründe

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.