Content-Automatisierung
SEO-Blogposts, Social-Posts und Newsletter aus einem zentralen Themen-Input. Voll automatisiert.
01 · Brand
Markenkern
Uxovia ist eine AI-First-Company aus Deutschland. Das Design-System spiegelt das wider: technisch präzise, premium ohne Effekthascherei, EU-souverän. Dunkles Marine als Bühne, ein einziger gesättigter Blauton als Signal.
Klarheit zuerst
Großzügige Negativräume, eine einzige Akzentfarbe, kompromisslose Typografie-Hierarchie.
EU-souverän
Hosting, Tooling, Schriften — alles europäisch verfügbar und DSGVO-kompatibel.
Skalierbar
Ein System für Web, App, LinkedIn, Pitch-Decks. Tokens. Komponenten. Wiederverwendbar.
02 · Color
Farbpalette
Brand-Blau ist der Held — sparsam einsetzen für Highlights, CTAs, Selektion. Alles andere ist Neutral- und Surface-Hierarchie auf marineblauer Basis.
Brand
Brand · Cobalt
--brand
#0055FE
Brand · Purple
--purple
#7C5CBF
Brand · Cyan
--cyan
#00C8EE
Gradient · Brand
--gradient-brand
Cobalt → Purple
Surface
Background
--bg
#000E2B
Background Alt
--bg-alt
#060B1F
Elevated
--bg-elevated
#0C152E
Surface
--surface
white · 4%
Surface 2
--surface-2
white · 6%
Text
Text · Primary
--text
#FFFFFF
Text · Muted
--text-2
white · 66%
Text · Faint
--text-3
white · 42%
Off-white
--offwhite
#EFEEEC
Status
Success
--success
Warning
--warning
Danger
--danger
03 · Type
Typografie
DM Sans als einzige Familie — Display, Body und Label in einem System. Eyebrows und Code laufen auf DM Sans Weight 100 (Thin) mit erhöhtem Tracking, statt mit einer separaten Mono.
Scale
Aa
Display Headline
Section Heading
Subsection Heading
Card / Component Heading
Body Large — für Intros & Lead-Paragraphen.
Body — Standard-Fließtext für alles dazwischen.
Small — Captions, Metadaten, Hinweise.
monospace · for labels & code
Eyebrow Label
Akzente & Stil
Wir bauen
präzise KI-Systeme
für den Mittelstand.
Gradient-Text + italic für eine emotionale Phrase im Heading.
Bis zu 82%
weniger Aufwand.
Brand-color für eine Zahl, die Aufmerksamkeit ankert.
04 · Layout
Spacing & Radii
4px-Grundraster. Container max. 1280px. Section-Padding skaliert von 4rem → 8rem.
Spacing Scale
Border Radii
4 · xs
8 · sm
14 · md
20 · lg
32 · xl
44 · 2xl
∞ · pill
05 · Elevation
Schatten & Glow
Schatten sind tief und weich. Glow wird nur am Brand-Element verwendet.
shadow-1
Hairline · Buttons, Form-Knöpfe
shadow-2
Sticky Bars, Popovers
shadow-card
Schwebende Karten
shadow-float
Modale & Hero-Mockups
glow-brand-sm
CTA-Buttons
glow-brand
Hover-State CTAs
06 · Components
Buttons
Pill-Shape. Drei Hierarchie-Stufen — primary, secondary (glass), ghost. Plus gradient für Hero-Momente.
Hierarchie
Größen
Mit Icons
07 · Forms
Formulare
Inputs sitzen ruhig im Surface, der Fokus-State zieht eine 4px-Brand-Aura. Niemals zu schreierisch.
Wir senden niemals Spam. Versprochen.
Demo-Modus
08 · Cards
Glass Cards
Das Signatur-Element. Translucent Surface, gradient-border über mask-composite, subtile Top-Highlight-Linie. Drei Größen-Varianten.
Standard · .glass
Angebots-Automatisierung
Aus 5 Stunden manuellem Excel-Chaos werden 8 Minuten KI-Workflow. Mit Rechen-Logik, Bildern, PDFs.
Corporate LLM
Eigene KI-Wissensdatenbank auf EU-Servern, trainiert auf eurem Know-how, ohne Datenleck nach USA.
Metric Card · für Zahlen
82%
Weniger Aufwand
48×
Schneller pro Angebot
100%
EU-Hosting
24/7
Live-Betrieb
Feature Card · .glass-feature (groß, akzentuiert)
Die Content Engine läuft.
Erster Pilot bei einer Ads-Agentur — generiert wöchentlich Blog, LinkedIn-Post und Newsletter aus einem Themen-Input. Volle Kontrolle über Tonalität.
EU-Souverän by Design.
Hosting, DB, Backups — alles in Frankfurt. KI-Modelle aus europäischen Clouds, wenn möglich. Klar dokumentiert für jeden Kunden.
Stage Card · .glass-feature mit card-head + tags (dramatisch)
Discovery
30 Minuten · kostenlos
Wir verstehen euren Prozess und identifizieren das eine Bottleneck mit dem höchsten ROI. Live-Workshop, keine Pitch-Folien.
Prototype
14 Tage · auf euren Daten
Lauffähiger Prototyp, den ihr live testet. Volle Transparenz über Modelle, Prompts, Latenz. Fair-Pricing falls er nicht überzeugt.
.glass.glass-feature + .card-head + .icon-chip (mit .brand, .purple, .cyan, .success) + .card-rule + .card-tags + .card-arrow
09 · Badges, Pills & Tags
Labels & Indikatoren
Sechs Stufen: Eyebrow (Hairline), Pill-Glow (Landin-Style mit blauem Top-Licht), Badge (Status), Tag (im Karten-Inneren), Filter-Pill, Avatar.
Pill-Glow · für Eyebrows mit Top-Glow
Über uns
Live · alle Systeme operational
Stage 01
Heller Top-Rand + Inset-Highlight + subtiler Outer-Glow nach oben.
Badges · Status-Indikatoren (Mono uppercase)
Default
Brand
PRO
Live
Beta
Down
Tags · innerhalb von Karten (Stage Cards, Filter)
Workshop-Format
Live-Demo
EU-Hosting
Pilotprojekt
+12
Pills · für Filter-Selektion / Branchen-Tags
Handwerk
Real Estate
Industrie
+12 weitere
Icon-Chips · Brand + Farb-Varianten
Default · .brand · .purple · .cyan · .success — jede mit eigenem dezenten Glow.
Check-List · runde Brand-Bullets mit Glow
- Server & DB ausschließlich in EU-Rechenzentren
- DSGVO-Auftragsverarbeitung als Standard
- Volle Datenexport-Möglichkeit auf Knopfdruck
- Cybersecurity-Versicherung für SaaS-Betrieb
Avatars
DL
DL
DL
DL
MN
+3
10 · Patterns
Layout Patterns
Wiederkehrende Section-Bauweisen. Direkt kopierbar in jedes Projekt.
Bento Grid
Headliner
Das Wichtigste, groß.
Bento-Layouts sind ideal für Feature-Übersichten — eine dominante Karte, drei sekundäre.
Stat A
€2.4M
Stat B
14d
Stat C
99.9%
Stat D
3
Steps / Process
01
Discovery-Call
30 Minuten, kostenlos. Wir verstehen euren Prozess und identifizieren das eine Bottleneck mit dem höchsten ROI.
02
Prototype in 14 Tagen
Wir bauen einen lauffähigen Prototyp auf euren echten Daten. Ihr testet ihn live. Volle Transparenz.
03
Roll-out & Retainer
Produktiv-Setup auf EU-Servern, Schulung, Monitoring. Monatlicher Retainer für Pflege & Erweiterungen.
Quote / Testimonial
Wir haben in drei Wochen mehr Content rausgehauen als sonst in einem Quartal — und die Qualität ist messbar besser geworden, nicht schlechter.
CTA · animiert (drifting blue mesh background)
Nächster Schritt
Lasst uns euren ersten KI-Workflow bauen.
30-Minuten-Call. Kostenlos. Wir zeigen euch das eine Bottleneck mit dem höchsten ROI.
Zwei blurred Brand-Blobs driften per @keyframes langsam diagonal. Respektiert prefers-reduced-motion.
Divider-Glow · Section-Trenner mit pulsierendem Blau-Halo
Dünne Linie + Halo pulsiert seitlich (8s ease-in-out alternate). Für <div class="divider-thin"> gibt es eine still-Variante ohne Animation.
Split-Layout · Media + Content (Über-uns / Produkt-Sektion)
Team-Foto
1080 × 1350
1080 × 1350
Über uns
Zwei Macher aus Düsseldorf.
Daniel baut die Workflows, Michael bringt Vertrieb & Marketing. Zusammen 15+ Jahre Mittelstands-Erfahrung.
- KI-Automatisierung & n8n-Workflows
- SEO, Content & Performance-Marketing
- AI-First Company aus dem Rheinland
Media · Aspect-Ratio Container
1:1
4:5
3:4
16:9
.media + Aspect-Modifier (.media-1-1, .media-4-5, .media-3-4, .media-16-9).
.media-glow für Brand-Glow-Drop-Shadow.
.media-placeholder rendert einen brand-gradient-Hintergrund, wenn noch kein Bild da ist — sonst einfach <img> reinlegen.
11 · Motion
Motion-Prinzipien
Kurze Easings (180–320ms) für Interaktion. Längere Reveals (600ms+) nur beim Page-Load — staggered, nicht alle gleichzeitig.
Reveal (rise)
Karten erscheinen mit 24px Y-Offset, gestaffelt um 100ms.
.reveal { animation: rise .6s var(--ease-out) forwards; }
.reveal-1 { animation-delay: .05s; }
.reveal-2 { animation-delay: .15s; }
.reveal-3 { animation-delay: .25s; }
Easings
--ease-out· default--ease-in-out· loops--ease-spring· playful
Dauern
--dur-fast· 180ms — hover/focus--dur· 320ms — slides, fades--dur-slow· 600ms — entrance