/*Website Spezialist · v4*/
Design System Analysis
Farben, Typografie und UI-Komponenten für eine konsistente Marken-Erfahrung — Neon Blue, Nambya, Noise & Frame Lines.
/*Design Tokens*/
Color Palette
Alle Werte als --ws-* in globals.css — nie hardcoden.
Primary
Neon Blue — Markenfarbe für CTAs, Links und Akzente.
Heat
#0052FE
--ws-heat
Primary CTA
Heat Hover
#003dd6
--ws-heat-hover
Hover State
Heat Subtle
rgba(0,82,254,.06)
Icon-Badge BG
Heat Border
rgba(0,82,254,.18)
Badge Border
Base
Flächen und Hintergründe für Light- und Dark-Sections.
Midnight
#06152C
--ws-midnight
Dark Sections
Alice
#E5EEFD
--ws-alice
Light Accent
Surface
#ffffff
--ws-surface
Cards
Surface Subtle
rgba(0,82,254,.04)
--ws-surface-subtle
Tint
Neutral
Text-Hierarchie und Borders auf hellem Grund.
Text Primary
rgba(0,0,0,.88)
--ws-text-primary
Headlines
Text Secondary
rgba(0,0,0,.52)
--ws-text-secondary
Body
Text Tertiary
rgba(0,0,0,.36)
--ws-text-tertiary
Meta
Border Faint
rgba(0,0,0,.08)
--ws-border-faint
Cards
Functional
Semantische Farben für Status und Feedback.
Success
#16a34a
Erfolg
Info
#0052FE
Hinweis
Warning
#f59e0b
Warnung
Error
#dc2626
Fehler
/*Typografie*/
Type Scale
.ws-h1 — Nambya · 60px · 400
Websites, die für Sie arbeiten.
.ws-h2 — Nambya · 52px · 400
Design System v4
.ws-h3 — Instrument Sans · 28px · 700
Komponenten & Tokens
.ws-body-xl — 20px · Hero Subline
Konsistente Marken-Erfahrung über alle Touchpoints.
.ws-body-lg — 18px · Section Copy
Alle Werte als CSS-Variablen in globals.css definiert.
.ws-body-md — 15px · Card Text
Seiten sind reine Komposition — Blocks + Daten, kein Inline-Layout.
.ws-mono — ui-monospace · Labels
[ 200 OK ] · /* section */ · [ 01 / 09 ]
/*Spacing*/
Spacing Scale
4px-Basis — var(--ws-sp-N)
1
2
3
4
5
6
7
8
10
12
14
16
18
20
24
/*UI Components*/
Building Blocks
Buttons
Badges
[ 200 OK ][ .JSON ][ HEAT ]NEW
Alerts
Erfolg
Formular wurde erfolgreich übermittelt.
Information
Der Dev-Katalog unter /demo-katalog zeigt alle Blocks live.
Hinweis
Nambya nur mit font-weight 400 verwenden.
Fehler
Bitte alle Pflichtfelder ausfüllen.
Cards
Token-basiert
Konsistente UI über Primitives und Blocks — keine Magic Numbers.
Kompositions-First
Konsistente UI über Primitives und Blocks — keine Magic Numbers.
Scroll Reveal
Konsistente UI über Primitives und Blocks — keine Magic Numbers.
Code Block
import { Hero_1, FeatureGrid_1 } from '@/components/ds/blocks';
export default function Page() {
return (
<>
<Hero_1 headline="…" subline="…" ctaPrimary="Projekt anfragen" />
<FeatureGrid_1 headline="…" items={[…]} />
</>
);
}Form Elements
/*Section Blocks*/
Page Blocks
Vollständige Sektionen als React-Komponenten — live im Dev-Katalog unter /demo-katalog.
Hero_1
CTA oder Adressfeld + Code-Terminal
Hero_2
Halftone Hero-Bild
Hero_3
Light Grid + Task-Chips
FeatureGrid_1
3×N Feature-Grid
UseCases_1
Tab-Navigation + Panel
FAQ_1
Accordion + Sidebar
CTA_1 / CTA_2
Dark Call-to-Action
CTA_3
Primary-Blau Kontakt-CTA (+ heat Divider)
Footer_2
Footer mit Newsletter