Auto-extrahiertes Design System

Tradeo — Komponentenbibliothek

Aus zwei Website-Screenshots abgeleitete Design Tokens und Komponenten. „Amateurhaft aber gut genug", um neue markenkonforme Anwendungen zu generieren.

01 — Farbpalette
Navy (Primary)
#1a2c4e
Navy Deep
#0f1d38
Akzent-Blau
#1d4ed8
Text Dark
#2a2a2a
Text Muted
#6b7280
Background
#ffffff
02 — Typografie · Nunito
Display
Wir handeln.
Heading
Lust Teil unseres Teams zu werden?
Subheading
Marketing & SEO
Body
Unsere Kunden haben Fragen und wir beantworten sie gern.
03 — Logo
04 — Navigation
05 — Buttons
Servershop24.de Stellenanzeigen Alle offene Stellen anzeigen
06 — Section Heading mit Akzentlinie

Lust Teil unseres Teams zu werden?

07 — Service-Block-Grid

Vertrieb & Support

Unsere Kunden haben Fragen und wir beantworten sie gern.

Marketing & SEO

Irgendwie sind Sie ja hier gelandet — wichtig ist, es hat funktioniert.

Umbau & Versand

Wie verpackt man viele empfindliche Teile? Unsere Profis wissen es.

Recycling

Wo gehobelt wird, fallen Späne. Wir sorgen für nachhaltige Entsorgung.

08 — Hero-Pattern (rekomponiert)

Wir handeln. Online.
Seit 2010.

Am liebsten mit gebrauchten Servern
Servershop24.de Stellenanzeigen
Tradeo
09 — CSS-Tokens (kopierfertig)
/* Tradeo Design Tokens */ :root { /* Farben */ --tradeo-navy: #1a2c4e; --tradeo-navy-deep: #0f1d38; --tradeo-blue: #1d4ed8; --tradeo-text: #2a2a2a; --tradeo-text-muted: #6b7280; --tradeo-bg: #ffffff; --tradeo-bg-soft: #f7f8fa; /* Typografie */ --font-sans: 'Nunito', sans-serif; /* Radien */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; }
Hinweis: Die Schrift ist als Nunito ausgelesen (rundliche, geometrische Sans-Serif — passt zur Tonalität des Originals). Falls die echte Marken-Schrift abweicht (z. B. Quicksand, Avenir, Proxima Soft), einfach --font-sans tauschen — der Rest bleibt unberührt.