Internes Dokument

Styleguide

Tokens, Typografie und Primitives des computech Landing-Page-Frameworks – die Grundlage für alle Blocks ab Phase 1.

Farben

Markenpalette (raw brand tokens)

Für Gradients, SVG und Sonderfälle – Flächen im UI laufen über die semantischen Tokens darunter.

brand-navy-deep

#050d18

Gradient-Start, dunkle Sektionen

brand-navy

#0e2647

Sekundärfarbe, Gradient-Ende

brand-blue

#2f80ed

Primär: CTAs, Links, Fokus-Ring

brand-tint

#eaf2fd

Muted/Accent-Flächen

brand-text

#1a2433

Foreground/Fließtext

brand-muted

#5a6a80

Sekundärtext

brand-border

#d8e2ef

Linien, Rahmen, Inputs

brand-white

#ffffff

Background

brand-p3

#7a93b8

Tertiär, Subtext auf dunkel

Alerts

Alert-Farben (Digital Styleguide)

Für Formular-Validierung und Meldungen ab Phase 1. Softe Flächen nach Pill-Muster: Farbe auf 10 % (z. B. bg-alert-error/10 text-alert-error).

alert-success

#18a957

Erfolg, Validierung ok

alert-warning

#ffbb38

Hinweis – dunkler Text darauf

alert-error

#df1642

Fehler; destructive mappt hierauf

Mapping

Semantische Tokens (shadcn)

So sprechen Komponenten über Farbe: bg-primary, text-muted-foreground, border … – nie über Hex.

primary

Fläche + zugehörige Textfarbe

secondary

Fläche + zugehörige Textfarbe

muted

Fläche + zugehörige Textfarbe

accent

Fläche + zugehörige Textfarbe

destructive

Fläche + zugehörige Textfarbe

card + border

Fläche + zugehörige Textfarbe

Typografie

Type-Skala – Proxima Nova

Verfügbare Schnitte: Light 300 · Regular 400 · Bold 700. Headlines, Buttons und Eyebrows sind Bold (laut Figma-Styleguide); CSS-Gewichte 600–900 lösen auf Bold auf.

text-display · 40→56px · Bold 700

IT, die Ihr Unternehmen trägt

text-h2 · 30→44px · Bold 700

Sektionstitel für Landing Pages

text-h3 · 20→24px · Bold 700

Kartentitel und Untergruppen

text-body · 18px · Regular 400 · Zeilenhöhe 32px

Fließtext für LP-Sektionen. Er bleibt bei 18px angenehm lesbar, mit großzügiger Zeilenhöhe – Erklärtexte, Nutzenargumente und Antworten in FAQ-Blöcken nutzen diesen Stil.

font-light · Light 300 – nur für Sonderfälle, z. B. große Zahlen

1.250+ betreute Arbeitsplätze

text-eyebrow · 14px · Bold 700 · uppercase

Eyebrow über der Headline

text-sm text-muted-foreground · 14px · 400

Sekundärtext für Fußnoten, Quellenangaben und Formular-Hinweise.

bg-gradient-navy

Dunkle Sektionen laufen über den Navy-Gradient

navy-deep → navy, 180° (vertikal). Jede Sektion mit bg-gradient-navy bekommt automatisch den weichen Primary-Glow oben mittig (::before aus der Basis – diese Demo zeigt ihn live; Verlaufs-DIVs wie Abbinder-Karten bleiben ohne Glow). Headlines in Weiß, Subtext in brand-p3, Logo in der Weiß-Variante. Der Fokus-Ring (brand-blue) bleibt auch hier sichtbar – mit Tab testen.

TAG-Pill auf dunkel

Gradients

Marken-Gradients (Digital Styleguide)

Loupe Fiesta ist der primäre Akzent-Gradient. Bunte Gradients sparsam einsetzen: maximal EINER pro Seite (Signature-Element). Vivi Orchid ist als Flächenfarbe accent-purple verfügbar.

Loupe Fiesta

bg-gradient-loupe-fiesta

Primärer Marken-/Akzent-Gradient

Navy

bg-gradient-navy

Dunkle Sektionen (Standard), 180° vertikal

CTA

bg-gradient-cta

Button-Verlauf des Primär-CTA – nicht als Flächen-Gradient einsetzen

Miami Shore

bg-gradient-miami-shore

Thematischer Akzent

Purpink

bg-gradient-purpink

Thematischer Akzent

Purple Red

bg-gradient-purple-red

Thematischer Akzent

Green Kiss

bg-gradient-green-kiss

Thematischer Akzent

Primitives

Button-Varianten

shadcn/ui-Button auf Marken-Tokens. Primär = Gradient (bg-gradient-cta) + Glow + Hover-Lift; size lg trägt den gedämpften Glow für Leisten (AnchorNav, StickyCta).

Pills

TAG-Pills & Service-Pills

Outline-Muster: Regular 400, 12px, Farbfläche 5–6 %, Border 25–30 % (ServicePill folgt demselben Muster). TAG-Pills stehen laut Schreibregeln über den Headlines; Service-Pills kennzeichnen computech-Services.

1-10 Mitarbeiter:innenKI & AutomationNeu im AngebotMicrosoft 365Inaktiv
Microsoft 365Mobile Device ManagementWorkshops & EnablementVoIP Cloud Telefonie
IT-Sicherheit

So sitzt eine TAG-Pill über der Headline

Badges

Badges (shadcn)

Für Status und Meta-Infos in UI-Kontexten – für Headline-Tags immer die TAG-Pill verwenden.

DefaultSecondaryOutlineDestructive

Formular

Card, Input & Label

Basis für die Lead-Formulare ab Phase 1 – Fokus-Zustände mit Tab testen.

Rückruf anfordern
Beispiel-Formular (ohne Funktion) zur Abnahme der Feld-Stile.

Interaktiv

Tabs, Accordion & Dialog

Animationen respektieren prefers-reduced-motion automatisch.

tabs

Inhalt des ersten Tabs.

dialog

accordion

Sektions-Kopf

SectionHeader

Einheitlicher Kopf jeder LP-Sektion: TAG-Pill + H2 + optionales Intro. align=center (Default) oder left; auf dunklen Sektionen dark setzen.

Zentriert (Default)

So sieht der zentrierte Sektions-Kopf aus

Intro-Text in text-body und muted-foreground – maximal zwei ruhige Sätze.

Linksbündig

Linksbündig für Text-Visual-Sektionen

Die Pill rückt um ihr Eigenpadding aus, damit der Pill-Text bündig mit der Headline-Kante steht.

Dunkel

Auf dunklen Sektionen: dark

Weiße Outline-Pill, weiße Headline, Intro in brand-p3 – und der automatische Sektions-Glow oben mittig.

Icon-Chips

IconChip – Tones & Größen

Pill-Muster: Farbe als Icon + dieselbe Farbe als getönte Fläche. indigo bleibt KI-&-Automation-Bezügen vorbehalten; amber = dokumentierte Zweckerweiterung für Ordner-/Dokument-Motive. Träger sind weiße Karten (bg-background + ring-1 ring-brand-navy/5) – sparsam einsetzen, nie als Deko-Regenbogen.

primary – Default

navy – Hub/Unternehmen

indigo – NUR KI & Automation

orange – Microsoft 365

green – Workshops

purple – MDM

amber – Ordner/Dokumente

alert – NUR Pain/Störung

md · 40px

lg · 48px

shape=round

Illustrationen

Illustrationen (components/blocks/illustrations/)

Alle 11 Illustrationen der Landing Page live: 5 Mini-Illustrationen des Leistungs-Bentos, die drei Karten-Illustrationen der Kurz-erklärt-Sektion (PulseLine, CloudMerge, ComplianceBoard), der Ebenen-Orbit des Betriebsmodells, die CareOrbit-Signature des Heros und das CloudHub-Fluss-Schaubild der Cloud-First-Sektion. Die verbindlichen Bau-Regeln aus SKILL.md (Stroke-Vokabular, Flow-Band-Mechanik, erlaubte Dauer-Motion) stehen unter den Demos.

  • SRV-01 · Betrieb normal
  • Geräte · 24/24 online
  • Backup-Job · geprüft 06:00

MonitorPanel

CycleRing

ShieldPulse

Backup erfolgreich

BackupStack

Der Drucker im Vertrieb streikt – können Sie helfen?

Übernehmen wir – wir sind schon aufgeschaltet.

Priorität: hoch · in Bearbeitung

SupportThread

PulseLine · Kurz-erklärt-Karte (.illustration-flow 4s)

CloudMerge · Kurz-erklärt-Karte (Flow-Band 224×124, CloudHub-Node-Tones)

Ihr Compliance-Fahrplan

  • Multi-Faktor-Authentifizierung einführen

    Abgeschlossen

  • Conditional Access aktivieren

    Abgeschlossen

  • Data Loss Prevention einrichten

    In Bearbeitung

  • Notfallplan nach NIS-2 dokumentieren

    Geplant

ComplianceBoard · Kurz-erklärt-Karte (Anschnitt macht der Block, Status-Mix bewusst unfertig)

  1. Endgeräte: Notebooks, PCs und Mobilgeräte eingerichtet, gepflegt und verschlüsselt.

  2. Identitäten & Zugänge: Konten, Anmeldungen und Berechtigungen sauber geregelt und sicher verwaltet.

  3. Daten: Ablagen und Datensicherung strukturiert, gesichert und wiederherstellbar.

  4. Anwendungen: Microsoft 365 und Fachanwendungen aktuell, sicher und einsatzbereit gehalten.

  5. Netzwerk & Cloud: Internet, WLAN und Cloud-Dienste stabil verbunden und laufend im Blick.

LayerOrbit · Betriebsmodell (statische Nodes, Monitoring-Punkt via .illustration-flow + pathLength)

CareOrbit · Hero-Signature (animate-orbit 60s)

CloudHub · Fluss-Schaubild (Flow-Band 520×224, .illustration-flow 4s)

Bau-Regeln für IllustrationenQuelle: SKILL.md · Abschnitt „Illustrationen“

  • Träger: weiße Karten (bg-background + ring-1 ring-brand-navy/5), weiche Schatten (shadow-sm/md/lg mit shadow-brand-navy/5–25), Radius rounded-lg bis rounded-2xl.
  • EIN Akzent pro Illustration: Aktives in primary (#2f80ed), Tracks/Rails in brand-border/brand-tint, Status-Dots in alert-success, Navy nur für Hub/Logomark. Icon-Farben nur über die IconChip-Tones (siehe oben) – kein Deko-Regenbogen.
  • Stroke-Vokabular: Fluss-Punkte 2.5 · Linien 2 · Ringe 6 · Basis-Stränge 1 – überall strokeLinecap=round.
  • Flow-Band-Mechanik (CloudHub/BackupStack): Stränge als eigenes SVG-Band mit pixelgenauer viewBox, Ellbogen-Pfade mit Radius 10 (Control-Offset 5.52). GENAU EIN Fluss-Punkt pro Strang (strokeDasharray 5 295), Phasen-Versatz über negative Delays; Strang-Enden docken ~4px unter den deckenden Karten/Badges an.
  • Erlaubte Dauer-Motion (einzige zulässige, alles infinite): orbit/orbit-reverse 60s linear · pulse-ring 4s ease-in-out · draw 3.5s ease-in-out · flow-y 6s ease-in-out · illustration-flow 4s linear. prefers-reduced-motion stoppt alles global.
  • Sonst gilt: Scroll-Reveals setzt der umgebende Block, nie die Illustration selbst; role=img + deutsches aria-label auf der sinntragenden Grafik, Deko-Teile aria-hidden.

Icon-Library: Lucidelucide.dev/icons

Alle Icons der Seite (Illustrationen wie Blocks) kommen aus Lucide (ISC-Lizenz, frei verwendbar). Optik der Library: Stroke-Breite 2, runde Linienenden – deckungsgleich mit dem Stroke-Vokabular oben, daher Default-Stroke nie verändern. Einsatz immer im Chip nach Pill-Muster (siehe IconChip), nie als nacktes Icon im Layout. Auswahl der eingesetzten Icons – Label = Suchbegriff auf lucide.dev:

  • activityCareOrbit
  • refresh-cwCareOrbit, CycleRing
  • shield-checkCareOrbit, ShieldPulse
  • database-backupCareOrbit
  • headsetCareOrbit
  • cloudCloudHub-Hub
  • mailCloudHub, BackupStack
  • folder-openCloudHub, BackupStack
  • usersCloudHub
  • monitorCloudHub
  • fingerprintCloudHub
  • messages-squareBackupStack
  • lockBackupStack

Ausnahmen (keine Lucide-Icons, Assets liegen im Repo): Microsoft-Logos des CloudHub und Kundenlogos in public/logos/, computech-Logomark in public/brand/logomark.svg, die EKG-Linie des MonitorPanel als eigener SVG-Pfad.

Layer

Hintergrund-Layer

Anti-Slop: nur maskiert bzw. dezent einsetzen – maximal Hero + zwei dunkle Grid-Akzente pro Seite (siehe Hero, PainPoints-Abbinder, Foundation).

bg-hero-wash

Kühler Primary-Glow (brand-blue 12 %, Falloff 68 %) – gleiche Glow-Sprache wie die dunklen Sektionen; im Hero vollflächig.

bg-grid-brand

3rem-Raster aus brand-border – IMMER maskiert einsetzen (radial-gradient-Maske wie hier), nie vollflächig.

Maße

Spacing & Radius

4px-Basisskala von Tailwind; Sektionsrhythmus und Radius sind als Tokens fixiert.

--spacing-section · clamp(64px → 112px) · py-section

Sektionshöhe atmet mit der Viewport-Breite

container-lp · max. 72rem · fluides Inline-Padding

--radius: 0.875rem (14px) · Ableitungen sm→2xl

rounded-sm

rounded-md

rounded-lg

rounded-xl

rounded-2xl

Quality-Floor: responsive bis Mobile, sichtbarer Keyboard-Fokus auf allen interaktiven Elementen, prefers-reduced-motion wird global respektiert. Kein Dark Mode – dunkle Sektionen ausschließlich über bg-gradient-navy.