Intern
Style Guide
Design-System-Referenz für neckarshore.ai — jede Farbe, jede Schrift, jede Komponente in situ. Kein Kunden-Content: eine Referenz, keine Seite. Erreichbar nur über den dezenten Footer-Link, noindex, nicht in der Suche, nicht in der Sitemap.
Quelle aller Tokens: src/app/globals.css (Tailwind v4 @theme). Komponenten leben in src/components/. Änderungen passieren dort, nicht hier. Light/Dark per Theme-Toggle in der Nav umschalten — die ganze Seite ist dark-aware.
01 · Farben
Palette
Neckar-Blau als Basis, Teal als Arbeits-Akzent, Cyan als sparsames Highlight auf Dunkel. Kontrast-Werte gegen Weiß, sofern nicht anders vermerkt. Dark-Mode-Töne haben eigene AA-geprüfte Werte statt Opacity-Tricks.
Brand
Primary — Neckar Blue
--color-primary
bg-primary
Basis-Text auf Hell, dunkle Brand-Bänder, Secondary-Button-Border.
AAA auf Weiß (15.9 : 1)
Secondary — Cyan
--color-secondary
bg-secondary
Eyebrows & Card-Icons auf dunklem Grund, Hero-Glow. NIE als Text auf Weiß.
nur auf Dunkel — decorative on light
Accent — Teal
--color-accent
bg-accent
Primary-Button, Links, Focus-Ring — der Arbeits-Akzent auf Hell.
AA auf Weiß (4.7 : 1)
Accent Hover
--color-accent-hover
bg-accent-hover
Hover-State für Primary-Button und Links.
Accent Active
--color-accent-active
bg-accent-active
Active / Pressed-State.
Accent Bright
--color-accent-bright
bg-accent-bright
Dark-Mode-Akzent — Links & Card-Subtitles auf dunkel. AA auf deep-space/surface.
nur Dark Mode
Neutrals
Neutral Light
--color-neutral-light
bg-neutral-light
Heller Seiten-Grund, Card-Fläche (accent-left Cards).
Neutral Dark
--color-neutral-dark
bg-neutral-dark
Body-Text-Ton auf Hell (meist als neutral-dark/80).
Muted
--color-muted
bg-muted
Sekundär-Text, Captions, Footer-Meta.
AA auf Weiß (4.9 : 1)
State
Success
--color-success
bg-success
Live-Signal (Footer-Ticker-Dot), Erfolgs-Zustände.
Error
--color-error
bg-error
Formular-Fehler, Validierungs-Hinweise.
Dark-Mode-Flächen & -Text
Deep Space
--color-deep-space
bg-deep-space
Dunkler Seiten-Grund (Dark Mode).
Surface
--color-surface
bg-surface
Dunkle Card- / Section-Fläche (Dark Mode).
Text Primary
--color-text-primary
bg-text-primary
Haupt-Text auf dunklem Grund.
Text Secondary
--color-text-secondary
bg-text-secondary
Body-Text auf dunklem Grund.
Text Tertiary
--color-text-tertiary
bg-text-tertiary
Captions auf dunkel — ersetzt das /50-Opacity-Anti-Pattern. AA-safe.
AA auf deep-space (6.4 : 1)
02 · Typografie
Schrift-System
Zwei self-hosted Variable Fonts (DSGVO, kein CDN): Space Grotesk für Headings, Inter für Body. Headings tight gekernt (tracking-tight), Body luftig (leading-relaxed).
h1 · font-heading · text-4xl→56px · font-bold · leading-[1.1] · tracking-tight
Software Development. Closer to Home.
h2 · font-heading · text-3xl→4xl · font-semibold · tracking-tight
Warum Nearshore?
h3 · font-heading · text-xl→2xl · font-semibold
AI-Powered Development
Eyebrow · text-sm · uppercase · tracking-widest · text-accent (Hell) / text-secondary (Dunkel)
Unser Portfolio
Body-Lg · font-body (Inter) · text-lg · leading-relaxed · neutral-dark/80
neckarshore.ai bringt KI-beschleunigte Softwareentwicklung zurück nach Stuttgart. Gleiche Zeitzone, gleiche Sprache, gleiche Datenschutzstandards.
Subtitle · text-sm · font-medium · text-accent / dark:text-accent-bright
All the speed, none of the risk.
Small / Meta · text-sm · text-muted
Stuttgart, Deutschland — wir antworten zeitnah.
03 · Buttons & CTAs
Button-System
Primary (solid teal, micro-scale on hover), Secondary (outline Neckar-Blau, fill on hover), Ghost (Text-Link). Alle rounded-lg, px-8 py-3.5. Disabled via opacity-60 + cursor-wait.
Auf dunklem Brand-Grund (bg-primary)
04 · Formulare
Formular-Primitive
Aus components/ContactForm.tsx. Label + Field mit border-primary/15, Focus wechselt die Border auf accent. Fehler in text-error, Erfolg als accent-Banner.
Bitte eine gültige E-Mail eingeben.
Success-Banner
Danke für Ihre Nachricht — wir melden uns zeitnah zurück.
Spam-Schutz: verstecktes Honeypot-Feld + Cloudflare Turnstile. Keine Tracking-Cookies, keine externen Ressourcen — DSGVO-by-Design.
05 · Cards & Flächen
Cards & Surfaces
rounded-xl durchgängig. Zwei Card-Typen: accent-left (border-l-4) auf neutral-light, und soft-shadow auf Weiß. Beide heben on-hover leicht an. StatusPill sitzt bottom-left auf jeder Produkt-Card.
Accent-Left Card
border-l-4 border-accent · bg-neutral-light
Für die „vs.“-Vergleichs-Cards. Icon in Cyan (text-secondary), Subtitle in Teal.
Soft-Shadow Card
bg-white · navy-getönter Schatten
Für die Service-Cards. Im Dark Mode Schatten aus, bg-surface statt Weiß.
Section-Grundflächen
06 · Spacing & Layout
Container & Rhythmus
Ein Container: max-w-[1200px], mittig, responsive Padding. Vertikaler Rhythmus über py-20 md:py-24 pro Section. 8px-Grid-Spacing-Tokens.
- Container
- mx-auto max-w-[1200px] · px-4 md:px-6
- Section-Padding
- py-20 md:py-24 — 80px mobil, 96px Desktop
- Card-Padding
- p-8 (Standard-Card), p-6 (Banner), p-4 (Swatch)
- Border-Radius
- rounded-lg (Buttons/Fields), rounded-xl (Cards), rounded-full (Pills)
- Spacing-Grid
- 8px-Basis: 4·8·12·16·24·32·48·64·80·96·128px
- Focus-Ring
- outline 2px accent · offset 2px · + 4px accent/25 glow
Spacing-Skala (8px-Grid)
07 · Icons
Icon-System
lucide-react durchgängig — stroke-basiert, tree-shakeable. Auf Cards size 32 in Cyan (text-secondary), inline size 16 in Teal (text-accent). Keine zweite Icon-Library.
Cpu
AI-Powered Development
FileText
Documentation Automation
Brain
AI Consulting & Strategy
Shield
DSGVO-by-Design
TestTubeDiagonal
Quality Engineering
Users
Nearshore Partnership
Clock
vs. Offshore
TrendingUp
vs. Big-4
Globe
Made in Germany
Kontakt
ArrowRight
CTA-Suffix, Link
ChevronDown
Dropdown, Accordion
Check
Bestätigung, Consent
Info
Hinweis-Box
Menu
Mobile-Nav öffnen
X
Schließen, Dismiss
In Context
- DSGVO-by-Design
- Made in Germany
- AI-Powered
08 · Dark Mode
Light & Dark
Class-based (.dark auf <html>), umgeschaltet über den Theme-Toggle in der Nav (System / Hell / Dunkel, in localStorage gemerkt). Diese ganze Seite ist dark-aware — flip den Toggle oben, um jedes Token in beiden Themes zu sehen.
Regel
Auf Dunkel eigene AA-geprüfte Töne statt Opacity: accent-bright für Links, text-tertiary für Captions. Nie text-secondary/50.
Flächen-Mapping
neutral-light → deep-space, white → surface. Text primary → text-primary.