652 lines
17 KiB
HTML
652 lines
17 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Tradeo — Komponentenbibliothek (extrahiert aus Screenshots)</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
/* === FARBEN (extrahiert aus den Screenshots) === */
|
|
--tradeo-navy: #1a2c4e; /* Logo-Hintergrund, Hero-Overlay */
|
|
--tradeo-navy-deep: #0f1d38; /* dunklere Variante für Tiefe */
|
|
--tradeo-blue: #1d4ed8; /* aktiver Nav-Link, Akzentlinie, CTA-Button */
|
|
--tradeo-blue-hover: #1e40af;
|
|
--tradeo-text: #2a2a2a; /* Headlines, dunkler Body */
|
|
--tradeo-text-muted: #6b7280; /* Body-Text, Subheadlines */
|
|
--tradeo-bg: #ffffff;
|
|
--tradeo-bg-soft: #f7f8fa;
|
|
--tradeo-border: #e5e7eb;
|
|
|
|
/* === TYPOGRAFIE === */
|
|
--font-sans: 'Nunito', system-ui, sans-serif;
|
|
|
|
/* === RADIEN & SPACING === */
|
|
--radius-sm: 4px;
|
|
--radius-md: 8px;
|
|
--radius-lg: 12px;
|
|
}
|
|
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
body {
|
|
font-family: var(--font-sans);
|
|
color: var(--tradeo-text);
|
|
background: var(--tradeo-bg-soft);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.docs-wrapper {
|
|
max-width: 1100px;
|
|
margin: 0 auto;
|
|
padding: 60px 32px 120px;
|
|
}
|
|
|
|
.docs-header {
|
|
border-bottom: 1px solid var(--tradeo-border);
|
|
padding-bottom: 24px;
|
|
margin-bottom: 48px;
|
|
}
|
|
|
|
.docs-eyebrow {
|
|
font-size: 12px;
|
|
letter-spacing: 0.15em;
|
|
text-transform: uppercase;
|
|
color: var(--tradeo-blue);
|
|
font-weight: 700;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.docs-header h1 {
|
|
font-size: 36px;
|
|
font-weight: 800;
|
|
color: var(--tradeo-text);
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.docs-header p {
|
|
color: var(--tradeo-text-muted);
|
|
margin-top: 12px;
|
|
max-width: 640px;
|
|
}
|
|
|
|
.section {
|
|
margin-bottom: 64px;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 13px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.12em;
|
|
color: var(--tradeo-text-muted);
|
|
font-weight: 700;
|
|
margin-bottom: 20px;
|
|
padding-bottom: 12px;
|
|
border-bottom: 1px solid var(--tradeo-border);
|
|
}
|
|
|
|
/* ============================================
|
|
1. FARBPALETTE
|
|
============================================ */
|
|
.swatch-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
|
gap: 16px;
|
|
}
|
|
|
|
.swatch {
|
|
background: var(--tradeo-bg);
|
|
border-radius: var(--radius-md);
|
|
overflow: hidden;
|
|
border: 1px solid var(--tradeo-border);
|
|
}
|
|
|
|
.swatch-color {
|
|
height: 100px;
|
|
}
|
|
|
|
.swatch-info {
|
|
padding: 14px 16px;
|
|
}
|
|
|
|
.swatch-name {
|
|
font-weight: 700;
|
|
font-size: 14px;
|
|
color: var(--tradeo-text);
|
|
}
|
|
|
|
.swatch-hex {
|
|
font-family: ui-monospace, 'SF Mono', monospace;
|
|
font-size: 12px;
|
|
color: var(--tradeo-text-muted);
|
|
margin-top: 4px;
|
|
}
|
|
|
|
/* ============================================
|
|
2. TYPOGRAFIE
|
|
============================================ */
|
|
.type-scale {
|
|
background: var(--tradeo-bg);
|
|
border-radius: var(--radius-md);
|
|
border: 1px solid var(--tradeo-border);
|
|
padding: 28px 32px;
|
|
}
|
|
|
|
.type-row {
|
|
padding: 16px 0;
|
|
border-bottom: 1px solid var(--tradeo-border);
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 24px;
|
|
}
|
|
|
|
.type-row:last-child { border-bottom: none; }
|
|
|
|
.type-label {
|
|
font-size: 11px;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
color: var(--tradeo-text-muted);
|
|
font-weight: 700;
|
|
min-width: 110px;
|
|
}
|
|
|
|
.type-h1 { font-size: 48px; font-weight: 800; letter-spacing: -0.02em; }
|
|
.type-h2 { font-size: 32px; font-weight: 800; letter-spacing: -0.01em; }
|
|
.type-h3 { font-size: 22px; font-weight: 700; }
|
|
.type-body { font-size: 16px; font-weight: 400; color: var(--tradeo-text-muted); }
|
|
|
|
/* ============================================
|
|
3. LOGO BADGE
|
|
============================================ */
|
|
.tradeo-logo {
|
|
display: inline-block;
|
|
background: var(--tradeo-navy);
|
|
color: white;
|
|
padding: 14px 22px;
|
|
border-radius: var(--radius-md);
|
|
font-weight: 700;
|
|
font-size: 18px;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
/* ============================================
|
|
4. NAVIGATION
|
|
============================================ */
|
|
.nav {
|
|
background: white;
|
|
border-radius: var(--radius-md);
|
|
border: 1px solid var(--tradeo-border);
|
|
padding: 18px 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 32px;
|
|
}
|
|
|
|
.nav-links {
|
|
display: flex;
|
|
gap: 28px;
|
|
list-style: none;
|
|
}
|
|
|
|
.nav-links a {
|
|
text-decoration: none;
|
|
color: var(--tradeo-text-muted);
|
|
font-weight: 600;
|
|
font-size: 15px;
|
|
transition: color 0.15s;
|
|
}
|
|
|
|
.nav-links a:hover { color: var(--tradeo-text); }
|
|
|
|
.nav-links a.active {
|
|
color: var(--tradeo-blue);
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* ============================================
|
|
5. BUTTONS
|
|
============================================ */
|
|
.btn-row {
|
|
display: flex;
|
|
gap: 16px;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
background: white;
|
|
padding: 32px;
|
|
border-radius: var(--radius-md);
|
|
border: 1px solid var(--tradeo-border);
|
|
}
|
|
|
|
.btn {
|
|
display: inline-block;
|
|
padding: 14px 32px;
|
|
font-family: var(--font-sans);
|
|
font-weight: 700;
|
|
font-size: 15px;
|
|
border-radius: var(--radius-sm);
|
|
border: none;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
transition: transform 0.15s, background 0.15s;
|
|
}
|
|
|
|
.btn:hover { transform: translateY(-1px); }
|
|
|
|
.btn-primary {
|
|
background: white;
|
|
color: var(--tradeo-text);
|
|
border: 1px solid var(--tradeo-border);
|
|
}
|
|
|
|
.btn-primary:hover { background: var(--tradeo-bg-soft); }
|
|
|
|
.btn-secondary {
|
|
background: var(--tradeo-navy);
|
|
color: white;
|
|
letter-spacing: 0.05em;
|
|
text-transform: uppercase;
|
|
padding: 16px 36px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.btn-secondary:hover { background: var(--tradeo-navy-deep); }
|
|
|
|
.btn-cta {
|
|
background: var(--tradeo-blue);
|
|
color: white;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
padding: 18px 40px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.btn-cta:hover { background: var(--tradeo-blue-hover); }
|
|
|
|
/* ============================================
|
|
6. SECTION HEADING
|
|
============================================ */
|
|
.section-heading {
|
|
background: white;
|
|
border-radius: var(--radius-md);
|
|
border: 1px solid var(--tradeo-border);
|
|
padding: 40px;
|
|
}
|
|
|
|
.section-heading h2 {
|
|
font-size: 36px;
|
|
font-weight: 800;
|
|
color: var(--tradeo-text);
|
|
letter-spacing: -0.01em;
|
|
max-width: 480px;
|
|
}
|
|
|
|
.section-heading .accent-line {
|
|
width: 48px;
|
|
height: 4px;
|
|
background: var(--tradeo-blue);
|
|
border-radius: 2px;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
/* ============================================
|
|
7. SERVICE BLOCKS (4-col grid)
|
|
============================================ */
|
|
.services {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
|
gap: 32px;
|
|
background: white;
|
|
padding: 40px;
|
|
border-radius: var(--radius-md);
|
|
border: 1px solid var(--tradeo-border);
|
|
}
|
|
|
|
.service h3 {
|
|
font-size: 18px;
|
|
font-weight: 800;
|
|
color: var(--tradeo-text);
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.service p {
|
|
color: var(--tradeo-text-muted);
|
|
font-size: 15px;
|
|
}
|
|
|
|
/* ============================================
|
|
8. HERO (mini-rebuild der Originalseite)
|
|
============================================ */
|
|
.hero {
|
|
position: relative;
|
|
background: linear-gradient(135deg, var(--tradeo-navy-deep) 0%, var(--tradeo-navy) 60%, #2a4878 100%);
|
|
border-radius: var(--radius-md);
|
|
overflow: hidden;
|
|
padding: 80px 60px 140px;
|
|
color: white;
|
|
isolation: isolate;
|
|
}
|
|
|
|
/* dezente "Server-Rack"-Linien als Atmosphäre */
|
|
.hero::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background-image:
|
|
repeating-linear-gradient(180deg, transparent 0 18px, rgba(255,255,255,0.04) 18px 19px),
|
|
repeating-linear-gradient(90deg, transparent 0 60px, rgba(255,255,255,0.03) 60px 61px);
|
|
z-index: -1;
|
|
}
|
|
|
|
.hero-mini-nav {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 80px;
|
|
}
|
|
|
|
.hero-mini-nav .tradeo-logo {
|
|
background: rgba(255,255,255,0.1);
|
|
}
|
|
|
|
.hero-mini-nav-links {
|
|
display: flex;
|
|
gap: 24px;
|
|
list-style: none;
|
|
}
|
|
|
|
.hero-mini-nav-links a {
|
|
color: rgba(255,255,255,0.7);
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.hero-mini-nav-links a.active { color: white; }
|
|
|
|
.hero h1 {
|
|
font-size: 44px;
|
|
font-weight: 800;
|
|
letter-spacing: -0.02em;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.hero-sub {
|
|
font-size: 22px;
|
|
font-weight: 600;
|
|
margin-top: 16px;
|
|
color: rgba(255,255,255,0.85);
|
|
}
|
|
|
|
.hero-buttons {
|
|
display: flex;
|
|
gap: 16px;
|
|
margin-top: 32px;
|
|
}
|
|
|
|
/* übergroßer "Tradeo"-Schriftzug am unteren Rand */
|
|
.hero-watermark {
|
|
position: absolute;
|
|
bottom: -24px;
|
|
left: -10px;
|
|
font-size: 200px;
|
|
font-weight: 800;
|
|
color: rgba(255,255,255,0.08);
|
|
letter-spacing: -0.04em;
|
|
line-height: 1;
|
|
pointer-events: none;
|
|
user-select: none;
|
|
}
|
|
|
|
/* gewölbter unterer Rand */
|
|
.hero-curve {
|
|
position: absolute;
|
|
bottom: -1px;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 60px;
|
|
display: block;
|
|
}
|
|
|
|
/* ============================================
|
|
9. TOKEN-LISTE als CSS-Snippet
|
|
============================================ */
|
|
.code-block {
|
|
background: var(--tradeo-text);
|
|
color: #f7f8fa;
|
|
padding: 24px 28px;
|
|
border-radius: var(--radius-md);
|
|
font-family: ui-monospace, 'SF Mono', Consolas, monospace;
|
|
font-size: 13px;
|
|
line-height: 1.7;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.code-block .comment { color: #8a93a3; }
|
|
.code-block .var { color: #93c5fd; }
|
|
.code-block .val { color: #fbbf24; }
|
|
|
|
.note {
|
|
background: #fefce8;
|
|
border-left: 3px solid #eab308;
|
|
padding: 16px 20px;
|
|
border-radius: var(--radius-sm);
|
|
font-size: 14px;
|
|
color: #713f12;
|
|
margin-top: 24px;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="docs-wrapper">
|
|
|
|
<!-- Header -->
|
|
<header class="docs-header">
|
|
<div class="docs-eyebrow">Auto-extrahiertes Design System</div>
|
|
<h1>Tradeo — Komponentenbibliothek</h1>
|
|
<p>Aus zwei Website-Screenshots abgeleitete Design Tokens und Komponenten. „Amateurhaft aber gut genug", um neue markenkonforme Anwendungen zu generieren.</p>
|
|
</header>
|
|
|
|
<!-- 1. Farbpalette -->
|
|
<section class="section">
|
|
<div class="section-title">01 — Farbpalette</div>
|
|
<div class="swatch-grid">
|
|
<div class="swatch">
|
|
<div class="swatch-color" style="background: #1a2c4e;"></div>
|
|
<div class="swatch-info">
|
|
<div class="swatch-name">Navy (Primary)</div>
|
|
<div class="swatch-hex">#1a2c4e</div>
|
|
</div>
|
|
</div>
|
|
<div class="swatch">
|
|
<div class="swatch-color" style="background: #0f1d38;"></div>
|
|
<div class="swatch-info">
|
|
<div class="swatch-name">Navy Deep</div>
|
|
<div class="swatch-hex">#0f1d38</div>
|
|
</div>
|
|
</div>
|
|
<div class="swatch">
|
|
<div class="swatch-color" style="background: #1d4ed8;"></div>
|
|
<div class="swatch-info">
|
|
<div class="swatch-name">Akzent-Blau</div>
|
|
<div class="swatch-hex">#1d4ed8</div>
|
|
</div>
|
|
</div>
|
|
<div class="swatch">
|
|
<div class="swatch-color" style="background: #2a2a2a;"></div>
|
|
<div class="swatch-info">
|
|
<div class="swatch-name">Text Dark</div>
|
|
<div class="swatch-hex">#2a2a2a</div>
|
|
</div>
|
|
</div>
|
|
<div class="swatch">
|
|
<div class="swatch-color" style="background: #6b7280;"></div>
|
|
<div class="swatch-info">
|
|
<div class="swatch-name">Text Muted</div>
|
|
<div class="swatch-hex">#6b7280</div>
|
|
</div>
|
|
</div>
|
|
<div class="swatch">
|
|
<div class="swatch-color" style="background: #ffffff; border-bottom: 1px solid var(--tradeo-border);"></div>
|
|
<div class="swatch-info">
|
|
<div class="swatch-name">Background</div>
|
|
<div class="swatch-hex">#ffffff</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 2. Typografie -->
|
|
<section class="section">
|
|
<div class="section-title">02 — Typografie · Nunito</div>
|
|
<div class="type-scale">
|
|
<div class="type-row">
|
|
<div class="type-label">Display</div>
|
|
<div class="type-h1">Wir handeln.</div>
|
|
</div>
|
|
<div class="type-row">
|
|
<div class="type-label">Heading</div>
|
|
<div class="type-h2">Lust Teil unseres Teams zu werden?</div>
|
|
</div>
|
|
<div class="type-row">
|
|
<div class="type-label">Subheading</div>
|
|
<div class="type-h3">Marketing & SEO</div>
|
|
</div>
|
|
<div class="type-row">
|
|
<div class="type-label">Body</div>
|
|
<div class="type-body">Unsere Kunden haben Fragen und wir beantworten sie gern.</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 3. Logo -->
|
|
<section class="section">
|
|
<div class="section-title">03 — Logo</div>
|
|
<div style="background: white; padding: 40px; border-radius: var(--radius-md); border: 1px solid var(--tradeo-border);">
|
|
<div class="tradeo-logo">tradeo</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 4. Navigation -->
|
|
<section class="section">
|
|
<div class="section-title">04 — Navigation</div>
|
|
<nav class="nav">
|
|
<div class="tradeo-logo">tradeo</div>
|
|
<ul class="nav-links">
|
|
<li><a href="#" class="active">Start</a></li>
|
|
<li><a href="#">Team</a></li>
|
|
<li><a href="#">Lean</a></li>
|
|
<li><a href="#">Stellenanzeigen</a></li>
|
|
<li><a href="#">Kontakt</a></li>
|
|
</ul>
|
|
</nav>
|
|
</section>
|
|
|
|
<!-- 5. Buttons -->
|
|
<section class="section">
|
|
<div class="section-title">05 — Buttons</div>
|
|
<div class="btn-row">
|
|
<a href="#" class="btn btn-primary">Servershop24.de</a>
|
|
<a href="#" class="btn btn-secondary">Stellenanzeigen</a>
|
|
<a href="#" class="btn btn-cta">Alle offene Stellen anzeigen</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 6. Section heading -->
|
|
<section class="section">
|
|
<div class="section-title">06 — Section Heading mit Akzentlinie</div>
|
|
<div class="section-heading">
|
|
<h2>Lust Teil unseres Teams zu werden?</h2>
|
|
<div class="accent-line"></div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 7. Service Blocks -->
|
|
<section class="section">
|
|
<div class="section-title">07 — Service-Block-Grid</div>
|
|
<div class="services">
|
|
<div class="service">
|
|
<h3>Vertrieb & Support</h3>
|
|
<p>Unsere Kunden haben Fragen und wir beantworten sie gern.</p>
|
|
</div>
|
|
<div class="service">
|
|
<h3>Marketing & SEO</h3>
|
|
<p>Irgendwie sind Sie ja hier gelandet — wichtig ist, es hat funktioniert.</p>
|
|
</div>
|
|
<div class="service">
|
|
<h3>Umbau & Versand</h3>
|
|
<p>Wie verpackt man viele empfindliche Teile? Unsere Profis wissen es.</p>
|
|
</div>
|
|
<div class="service">
|
|
<h3>Recycling</h3>
|
|
<p>Wo gehobelt wird, fallen Späne. Wir sorgen für nachhaltige Entsorgung.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 8. Hero (mini rebuild) -->
|
|
<section class="section">
|
|
<div class="section-title">08 — Hero-Pattern (rekomponiert)</div>
|
|
<div class="hero">
|
|
<div class="hero-mini-nav">
|
|
<div class="tradeo-logo">tradeo</div>
|
|
<ul class="hero-mini-nav-links">
|
|
<li><a href="#" class="active">Start</a></li>
|
|
<li><a href="#">Team</a></li>
|
|
<li><a href="#">Lean</a></li>
|
|
<li><a href="#">Kontakt</a></li>
|
|
</ul>
|
|
</div>
|
|
<h1>Wir handeln. Online.<br>Seit 2010.</h1>
|
|
<div class="hero-sub">Am liebsten mit gebrauchten Servern</div>
|
|
<div class="hero-buttons">
|
|
<a href="#" class="btn btn-primary">Servershop24.de</a>
|
|
<a href="#" class="btn btn-primary">Stellenanzeigen</a>
|
|
</div>
|
|
<div class="hero-watermark">Tradeo</div>
|
|
<svg class="hero-curve" viewBox="0 0 1200 60" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M0,60 L0,30 Q300,0 600,30 T1200,30 L1200,60 Z" fill="#f7f8fa"/>
|
|
</svg>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 9. CSS Tokens -->
|
|
<section class="section">
|
|
<div class="section-title">09 — CSS-Tokens (kopierfertig)</div>
|
|
<div class="code-block">
|
|
<span class="comment">/* Tradeo Design Tokens */</span>
|
|
:root {
|
|
<span class="comment">/* Farben */</span>
|
|
<span class="var">--tradeo-navy</span>: <span class="val">#1a2c4e</span>;
|
|
<span class="var">--tradeo-navy-deep</span>: <span class="val">#0f1d38</span>;
|
|
<span class="var">--tradeo-blue</span>: <span class="val">#1d4ed8</span>;
|
|
<span class="var">--tradeo-text</span>: <span class="val">#2a2a2a</span>;
|
|
<span class="var">--tradeo-text-muted</span>: <span class="val">#6b7280</span>;
|
|
<span class="var">--tradeo-bg</span>: <span class="val">#ffffff</span>;
|
|
<span class="var">--tradeo-bg-soft</span>: <span class="val">#f7f8fa</span>;
|
|
|
|
<span class="comment">/* Typografie */</span>
|
|
<span class="var">--font-sans</span>: <span class="val">'Nunito', sans-serif</span>;
|
|
|
|
<span class="comment">/* Radien */</span>
|
|
<span class="var">--radius-sm</span>: <span class="val">4px</span>;
|
|
<span class="var">--radius-md</span>: <span class="val">8px</span>;
|
|
<span class="var">--radius-lg</span>: <span class="val">12px</span>;
|
|
}
|
|
</div>
|
|
|
|
<div class="note">
|
|
<strong>Hinweis:</strong> 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 <code>--font-sans</code> tauschen — der Rest bleibt unberührt.
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|