JuConnect · Styleguide (v0.2)

Dieses Paket ist ein Tool-first Styleguide und gleichzeitig ein Starter für die spätere Website.

Fokus

• Kopierbar: Farben, Tokens, Snippets (HTML/CSS) per Button
• Seriös & ruhig: primär über Markenblau, Akzent nur unterstützend
• Komponenten-Basis: Buttons, Forms, Feedback, Layout, Patterns

Start

1. Entpacken
2. index.html öffnen (ideal über lokalen Server)

Copy-Funktionen

• [data-copy="..."] kopiert beliebigen Text
• data-snippet-copy kopiert Inhalt des nächsten <pre><code>
• Swatches: „Hex“ / „Token“ kopieren

Brand Tokens

• Primär: #1d354f (--primary)
• Akzent: #8FAE9A (--accent) → Fokus/Marker/kleine Highlights

Struktur

• assets/css/style.css – Tokens + Komponenten
• assets/js/app.js – Copy, Toast, Tabs, Accordion, Modal, Sticky-Navigation-Highlight, Nav-Suche
• assets/img/juconnect.svg – Logo

Nächste Ausbaustufe (wenn ihr wollt)

• Icons-System (SVG Sprites)
• Weitere Komponenten: Breadcrumbs, Pagination, Stepper, File Upload, Search/Filter Chips
• Seiten-Templates: Start / Leistungen / Trägerinfo / Downloads / Kontakt / Datenschutz / Impressum