Corporate Identity
Design Guidelines und Brand Assets fur Apite. Diese Seite bildet Farben, Typografie, Abstande, Kernkomponenten und Motion mit den echten zentralen Tokens und Komponenten der Website ab.
Markenkern
Apite
Consult. Create. Code.
Schriften
Rubik + Roboto
Akzent
Teal zuerst, Gold gezielt
Logo
Das Logo wird als SVG aus dem zentralen Public-Asset geladen. Die Varianten unten zeigen bevorzugte Einsatze auf hellen und dunklen Markenflachen.
Standard auf Weiss
Bevorzugte Variante fur helle Medien und Dokumente.
Invertiert auf Dunkel
Fur dunkle Hintergrunde wie Footer oder Hero-Flachen.
Auf Teal-Flache
Fur satte Markenflachen mit dunklerem Kontrastfeld und klar lesbarer Wortmarke.
Groessen
Regeln
Mindestbreite: 128px fur saubere Lesbarkeit in digitalen Medien.
Mindestens die Hohe des inneren Hexagon-Stegsegments rund um das Logo freihalten.
SVG Asset oeffnenFarbpalette
Alle Farbkacheln nutzen die dokumentierten Markenwerte. Tailwind-Klassen und CSS-Variablen stehen direkt daneben fur ableitbare Medien und konsistente Implementierung.
Basis
Primare Markenfarben fur Layout, Text und CTA-System.
Primary
Hex:#000000
CSS: --color-primary
Tailwind: bg-primary
Primare Flachen und starke Kontraste.
Secondary
Hex:#000000
CSS: --color-secondary
Tailwind: text-secondary
Sekundare Textfarbe in bestehenden Komponenten.
CTA / Teal
Hex:#037394
CSS: --color-cta
Tailwind: bg-cta
Handlungsaufforderungen, Links, primare Markenakzente.
Teal Palette
Die zentrale Apite-Farbwelt fur Hero, Buttons, Highlights und Verlaufe.
Teal
Hex:#037394
CSS: --color-cta
Tailwind: bg-teal
Primare Markenfarbe fur Buttons und Panels.
Teal Light
Hex:#0495BF
CSS: --color-cta-light
Tailwind: bg-teal-light
Hover-Zustande, Links und weichere Akzente.
Teal Bright
Hex:#00C6FF
CSS: --color-accent
Tailwind: bg-teal-bright
Leuchtender Highlight-Ton in Hero und Icons.
Teal Dark
Hex:#134F6C
Tailwind: bg-teal-dark
Dunkle Hero-Flachen und tiefe Verlaufseinstiege.
Akzent
Warme Gegenfarbe fur Highlights und Erfolgssignale.
Accent Gold
Hex:#F2CF2F
CSS: --color-accent-gold
Tailwind: bg-accent-yellow
Akzente in Headlines, Callouts und Karten.
Logo Gray
Hex:#98AEBA
Tailwind: bg-slate-400
Sekundare Logofarbe im Signet.
Neutral
Neutrale Tones fur Lesbarkeit, Flachen und ruhige Kontraste.
Background
Hex:#FFFFFF
CSS: --color-background
Tailwind: bg-background
Primarer heller Seitenhintergrund.
Foreground
Hex:#000000
CSS: --color-text
Tailwind: text-foreground
Standard-Lesefarbe und starke Typografie.
Muted
Hex:#999999
CSS: --color-muted
Tailwind: text-muted
Reduzierte Meta-Informationen und Hilfstexte.
Farbverlaeufe
Verlaufe sind ein wesentlicher Teil der Markenwirkung. Die Beispiele zeigen die realen Utility-Klassen aus `globals.css`.
CTA Button
Utility
bg-gradient-cta
CSS
linear-gradient(45deg, #037394 0%, #0495BF 100%)
Einsatz
Primare Buttons und markante Call-to-Actions.
CTA Hover
Utility
bg-gradient-cta-hover
CSS
linear-gradient(45deg, #0495BF 0%, #0495BF 100%)
Einsatz
Hover-Zustand der primaren Buttons.
Hero
Utility
bg-gradient-hero
CSS
linear-gradient(80deg, #134F6C 0%, #037394 50%, #00C6FF 100%)
Einsatz
Hero-Zonen und dunkle Markenflachen.
Footer
Utility
bg-gradient-footer
CSS
linear-gradient(0deg, rgb(4,149,191) 0%, rgb(0,78,102) 50%, rgb(29,29,29) 100%)
Einsatz
Footer-Hintergrund und tiefe Abschlussflachen.
Secondary / Gold
Utility
bg-gradient-secondary
CSS
linear-gradient(45deg, rgb(255,199,0) 0%, rgb(255,234,0) 100%)
Einsatz
Sekundare CTA-Tags und warme Akzentflachen.
Dark Overlay
Utility
bg-gradient-dark-overlay
CSS
rgba(0, 78, 102, 0.9)
Einsatz
Overlays auf Medien oder dunklen Bildbereichen.
Typografie
Rubik fuhrt Headlines und Navigationsmuster, Roboto tragt den Lesefluss. Die Skala unten basiert auf den dokumentierten Groessen und den bestehenden Projektkonventionen.
Rubik
CONSULT. CREATE. CODE.
CSS: --font-rubik
Tailwind: font-heading
Headlines, Navigation, Links und markante Labels.
Roboto
Digitale Produkte entstehen durch Klarheit, Struktur und gute Entscheidungen.
CSS: --font-roboto
Tailwind: font-sans
Fliesstext, Meta-Informationen und erklarende Inhalte.
H1
Corporate Identity
Rolle: Hero headline
Groesse: 72px
Gewicht: 600
Line-height: 1.2
Tracking: 0.5px
H2
Design Guidelines
Rolle: Section headline
Groesse: 48px
Gewicht: 700
Line-height: 1.2
Tracking: 0.5px
H3
Living Style Guide
Rolle: Card headline
Groesse: 30px
Gewicht: 700
Line-height: 1.2
Tracking: 1.2px
H4
Core Components
Rolle: Sub section headline
Groesse: 21px
Gewicht: 700
Line-height: 1.2
Tracking: 0.5px
H5
Usage Notes
Rolle: Small emphasis headline
Groesse: 16px
Gewicht: 700
Line-height: 1.2
Tracking: 0.5px
H6
BRAND SYSTEM
Rolle: Supertitle / label
Groesse: 12px
Gewicht: 300
Line-height: 1.8
Tracking: 4px
BODY
Eine konsistente CI macht Entscheidungen schneller und Medien anschlussfahig.
Rolle: Body copy
Groesse: 18px
Gewicht: 400
Line-height: 1.5
Tracking: 0.4px
Link Style
Farbe: #00C6FF
Hover: #FFFFFF
Links sind Rubik-basiert, cyan eingefarbt und erhalten im Hover eine Unterstreichung.
Body Utilities
Diese Zeile verwendet die bestehende Utility `body-text` fur Texte auf dunklem Hintergrund.
Diese groessere Variante zeigt `body-text-lg` fur Hero-Subtitles oder einleitende Absatze.
Abstaende
Die Spacing-Tokens helfen dabei, Layouts, Cards und Sektionen konsistent aufzubauen. Die Visualisierung zeigt die relative Breite jedes Werts.
--space-xs
Pixel: 4px
Rem: 0.25rem
Sehr enge Abstande und Mikro-Gaps.
--space-sm
Pixel: 8px
Rem: 0.5rem
Icon-Gaps und kleine Inline-Abstande.
--space-md
Pixel: 16px
Rem: 1rem
Standard-Padding und kleine Blocks.
--space-lg
Pixel: 24px
Rem: 1.5rem
Komponentenabstande und Kartenpadding.
--space-xl
Pixel: 32px
Rem: 2rem
Grossere Zwischenraume innerhalb von Sektionen.
--space-2xl
Pixel: 48px
Rem: 3rem
Sektionen und grossere Layout-Abstande.
--space-3xl
Pixel: 64px
Rem: 4rem
Hero- und Highlight-Abstande.
Schatten
Die Schattenstufen strukturieren Ebenen und Fokus. Die Demos unten zeigen die dokumentierten Werte direkt als Box-Shadow.
--shadow-sm
0 1px 2px rgba(0,0,0,0.05)
Subtiles Lift fur ruhige Flachen.
--shadow-md
0 4px 6px rgba(0,0,0,0.1)
Standardkarte und Buttons.
--shadow-lg
0 10px 15px rgba(0,0,0,0.1)
Dropdowns, hervorgehobene Karten und Layer.
--shadow-xl
0 20px 25px rgba(0,0,0,0.15)
Hero-Medien und starke Fokusobjekte.
Karten
Card-Muster werden mit den bereits vorhandenen Shared Components dargestellt. So spiegeln die Demos unmittelbar wider, wie sich globale Anpassungen auf die Website auswirken.
Glass Card
Glass Card Material
Das dunkle Liquid-Glass-Material basiert auf der zentralen Klasse `glass-card` aus `globals.css`.
FeatureCard Dark
Ideal fur Hero-nahe Mehrwertblockette auf dunklem Verlauf.
FeatureCard Light
Saubere Bento-artige Karte fur helle Informationsbereiche.
Teal Callout
Informative Hervorhebung fur Hinweise, Prozesse oder Qualitatsmerkmale.
Gold Callout
Warme Akzentbox fur Benefits, Ergebnisse oder Erfolgsbelege.
Komponenten
Die wichtigsten Layout- und Kennzeichnungsbausteine werden nicht nachgebaut, sondern live uber die zentral gepflegten Shared Components gezeigt.
SectionHeading
Zentral gepflegte Headlines
Diese Demo rendert dieselbe gemeinsame Heading-Komponente wie die eigentlichen Seiten.
SectionBadge
Container
Die Website nutzt zentral `Container` mit `max-w-7xl mx-auto px-4 sm:px-6 lg:px-8`. Dadurch bleiben Breiten, horizontale Paddings und Ausrichtung konsistent.
Icons
Als Icon-Set wird durchgehend `lucide-react` genutzt. Die Beispiele zeigen die typischen Groessen fur Badges, Buttons und Feature-Komponenten.
Groessenreferenz
Badge
w-4 h-4
SectionBadge und kompakte Labels.
Button
w-5 h-5
CtaButton und interaktive Inline-CTAs.
Standard
w-6 h-6
Allgemeine UI-Icons und Callouts.
Feature
w-8 h-8
Feature- und Highlight-Komponenten.
Haefige Icons
Palette
SwatchBook
Type
Ruler
Layers
PenTool
Animationen
Die Motion-Patterns kommen zentral aus `FadeIn` und `FadeInStagger`. Die Beispiele zeigen Richtungen und Varianten, ohne von der bestehenden Projektlogik abzuweichen.
Fade In Up
Fade In Up
Standardisierte Reveal-Richtung mit sanfter Bewegung, drei automatischen Durchlaeufen und manuellem Replay.
Fade In Down
Fade In Down
Standardisierte Reveal-Richtung mit sanfter Bewegung, drei automatischen Durchlaeufen und manuellem Replay.
Fade In Left
Fade In Left
Standardisierte Reveal-Richtung mit sanfter Bewegung, drei automatischen Durchlaeufen und manuellem Replay.
Fade In Right
Fade In Right
Standardisierte Reveal-Richtung mit sanfter Bewegung, drei automatischen Durchlaeufen und manuellem Replay.
Variant: fadeIn
Variant: fadeIn
Standard fur Headlines, Texte und lineare Content-Bloecke.
Variant: shrinkIn
Variant: shrinkIn
Geeignet fur einzelne Highlight-Objekte oder visuelle Fokusbereiche.
Zone-Bausteine
Dies sind die zentralen Bausteine (Ebene 2) zum Aufbau von Service-Seiten. Jede Zone ist eine eigenständige Komponente mit klaren Props und Verantwortlichkeiten.
HeroZone
Der Einstieg jeder Seite. Kombiniert den Gradient-Hero mit den DB-basierten Leistungs-Abschnitten.
Dies ist ein Beispiel für den Hero-Text einer Service-Seite.
MethodologyZone
Dunkle Zone für methodische Ansätze, Team-Fotos und primäre CTAs.
Unser Ansatz
Wie wir gemeinsam zum Erfolg kommen.
Punkt 1
Beschreibung des ersten Punktes.
Punkt 2
Beschreibung des zweiten Punktes.
WhiteZone
Weiße Zone für beliebige Inhalte (Projekte, Text, Grid).
SuccessCtaZone
Abschließender emotionaler CTA mit Hintergrundbild.
Bereit für den Erfolg?
Lassen Sie uns gemeinsam durchstarten und Ihre Projekte auf das nächste Level heben.
Wir begleiten Sie von der ersten Idee bis zur erfolgreichen Umsetzung – transparent, effizient und partnerschaftlich.
Jetzt unverbindlich anfragenContactZone
Die persönliche Note: Kontaktkarte mit Ansprechpartner.
“Ich freue mich auf Ihre Nachricht!”
Seiten-Schablonen
Baupläne für die gängigsten Seitentypen der Apite-Website.
Service-Seite (Standard)
Blog / Projekte (Übersicht)
Individuelle Seite