Design System

NEXO Style Guide

Alle Design-Token, Typografie-Skalen, Abstände und Komponenten – zentral definiert in index.css.

Colors Typography Spacing Radius Components Animations

01 · Farben

Color Tokens

Alle Farben sind als CSS Custom Properties in :root definiert. Änderungen in index.css wirken sich global aus.

Background

Background Base

#020817

--nexo-bg-base

Surface 1

#0D1B2A

--nexo-bg-surface-1

Surface 2

#112240

--nexo-bg-surface-2

Surface 3

#1A3A5C

--nexo-bg-surface-3

Accent

Accent Glow (Cyan)

#38BDF8

--nexo-accent-glow

Accent Deep (Blue)

#1D4ED8

--nexo-accent-deep

Accent Bright

#60A5FA

--nexo-accent-bright

Accent Mid

#3B82F6

--nexo-accent-mid

Text

Text Primary

#E2E8F0

--nexo-text-primary

Text Secondary

#94A3B8

--nexo-text-secondary

Text Muted

#475569

--nexo-text-muted

02 · Typografie

Type Scale

Alle Schriftgrößen sind fluid mit clamp() definiert – sie skalieren automatisch zwischen Mobilgerät und Desktop.

Display & Body

Outfit

300 · 400 · 500 · 600 · 700 · 800

NEXO verwendet Outfit für alle Display- und Body-Texte. Geometrisch, modern und gut lesbar auf dunklem Hintergrund.

Monospace / Data

JetBrains Mono

400 · 500 · 600

Für Badges, Labels, Code-Snippets und Metriken. Präzise, technisch, lesbar.

XS

Monospace Labels, Badges

SM

Body Small, Nav Links

Base

Body Text, Descriptions

LG

Lead Text, Card Body

XL

Subheadings, Feature Titles

2XL

Card Headings

3XL

Section Headings

4XL

Page Headings

5XL

Hero Subheadings

6XL

Hero Headlines

03 · Abstände

Spacing Matrix

Alle Abstände basieren auf einer rem-Matrix. Verwende ausschließlich diese Tokens, um konsistente Abstände in der gesamten Anwendung zu gewährleisten.

TokenrempxVisualisierung

--space-10.25rem4px

--space-20.5rem8px

--space-30.75rem12px

--space-41rem16px

--space-51.25rem20px

--space-61.5rem24px

--space-82rem32px

--space-102.5rem40px

--space-123rem48px

--space-164rem64px

--space-205rem80px

--space-246rem96px

04 · Radien

Border Radius

--radius-smSmall (6px)

--radius-mdMedium (12px)

--radius-lgLarge (16px)

--radius-xlXL (24px)

--radius-2xl2XL (32px)

--radius-fullFull (Pill)

05 · Komponenten

UI Components

Buttons

Badges

WHITEBOXDETERMINISTISCHQUANTUMAUDITIERBARSICHERADAPTIV

Cards

STANDARD

Standard Card

Glassmorphism-Karte mit subtilen Blau-Gradienten und Glow-Rand bei Hover.

ACCENT

Accent Card

Karte mit blauem Akzent-Gradient für hervorgehobene Inhalte.

Feature Card

Mit Feature-Icon und kompaktem Layout.

Feature Icons

NEXO Orbit Symbol

60px

100px

160px

220px

Form Elements

06 · Animationen

Animation Classes

Alle Animationen sind als CSS-Klassen verfügbar und können direkt auf Elemente angewendet werden.

Pulse Glow

Sanftes Pulsieren mit Skalierung

.nexo-animate-pulse-glow

Float

Schwebendes Auf und Ab

.nexo-animate-float

Fade Up

Einblenden von unten

.nexo-animate-fade-up

Fade In

Einfaches Einblenden

.nexo-animate-fade-in

Scroll Reveal

Füge .nexo-reveal zu einem Element hinzu. Der useScrollReveal() Hook fügt automatisch .visible hinzu, wenn das Element in den Viewport scrollt.

.nexo-reveal.nexo-reveal-delay-1.nexo-reveal-delay-2.nexo-reveal-delay-3.nexo-reveal-delay-4.nexo-reveal-delay-5

Wie du den Style Guide nutzt

Alle Design-Token sind in client/src/index.css unter :root definiert. Ändere einen Token dort, und die Änderung wirkt sich auf die gesamte Website aus.

Primärfarbe ändern

--nexo-accent-glow: #00FF88;

Hintergrund ändern

--nexo-bg-base: #0A0A0A;

Schriftgröße anpassen

--text-base: clamp(1rem, 1vw + 0.5rem, 1.25rem);

Abstände anpassen

--space-8: 2.5rem;