Internes Dokument
Design System.
Architektonisch, technisch, funktional. Keine abgerundeten Ecken, keine weichen Schatten. 45-Grad-Schnitte, scharfe Kanten und Farbe nur dort, wo sie eine Funktion hat.
01 – Tokens
Farben
Fünf Farben. Keine Abstufungen, keine Zwischentöne. jkblue wird ausschließlich für interaktive Elemente verwendet.
jkblue
#1b4d5c
--color-jkblue
Interaktive Elemente, Links, Hover-States
jklime
#c8e64a
--color-jklime
Akzente, Header-Linie, Kicker-Dots
jkdark
#0b1a2e
--color-jkdark
Primärfarbe Text, Backgrounds, Header
jklight
#f4f6f9
--color-jklight
Hintergrund Body, helle Flächen
jkgray
#e2e8f0
--color-jkgray
Trennlinien, dezente Borders
Regeln
Hover-States, Focus-Borders, Links, aktive Tabs. Niemals dekorativ.
Header-Linie, Kicker-Dots, Highlight-Underlines. Sparsam einsetzen.
Primärfarbe für Text, dunkle Backgrounds, Header und Footer.
02 – Schrift
Typografie
Inter in vier Gewichten: 400 (Body), 500 (Medium), 700 (Bold), 900 (Black). Headlines sind immer Black + Uppercase + Tight Tracking.
Hero H1
text-5xl md:text-7xl font-black
E-Commerce-Marken.
Section H2
text-3xl md:text-5xl font-black
Profitabel wachsen.
Card H3
text-2xl md:text-3xl font-black
Shop-Entwicklung
Body Large
text-xl md:text-2xl font-semibold
Unsere eigenen. Und eure.
Body
text-base text-zinc-600 leading-relaxed
Steigende Werbekosten fressen Margen. Wir setzen auf SEO.
Small / Caption
text-sm text-zinc-600 leading-relaxed
E-Mail-Flows, CRM-Strategie und Retention.
Kicker / Label
text-xs font-bold uppercase
Kernstrategie
Mono / Technical
text-xs font-mono text-jkdark/30
BUILD 2026.1 // SYSTEM ONLINE
Aa
Regular
font-weight: 400
Aa
Medium
font-weight: 500
Aa
Bold
font-weight: 700
Aa
Black
font-weight: 900
03 – Geometrie
Clip-Path Schnitte
Keine abgerundeten Ecken. Stattdessen 45-Grad-Schnitte via CSS clip-path. Drei Varianten: Button, Card-Top, Card-Bottom.
clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%)
Oben rechts abgeschnitten. Für Buttons und CTAs.
clip-path: polygon(0 0, calc(100% - 2.5rem) 0, 100% 2.5rem, 100% 100%, 0 100%)
Oben rechts, großer Schnitt. Für Cards und Sections.
clip-path: polygon(0 0, 100% 0, 100% 100%, 2.5rem 100%, 0 calc(100% - 2.5rem))
Unten links, großer Schnitt. Für StructureCard-Header.
CutCardWrapper – SVG-Diagonale
Light Variant
SVG-Linie an der Schnittkante. Wechselt auf Hover von zinc-300 zu jkblue.
Dark Variant
Für dunkle Cards. Linie wechselt von white/15 zu white/30.
05 – Redaktionell
Kicker & Headings
Kicker leitet jede Section ein: jkblue, uppercase, tracking-widest, mit horizontaler Linie. SectionHeading kombiniert Titel + optionale Description.
Kicker-Komponente
Standard Kicker
Kicker auf Dunkel
SectionHeading-Komponente
Nur Titel.
Titel mit Beschreibung.
Eine kurze erklärende Beschreibung, die den Kontext der Section liefert. Max zwei Zeilen empfohlen.
Titel mit Linie
Lime-Highlight-Underline
Marken.
Inline-Highlight mit jklime/60. Für Hero-Akzentwörter.
06 – Karten
Cards
Verschiedene Kartenstile: StructureCard mit dark Header, Service-Cards hell und dunkel, gestapelte Philosophie-Cards.
StructureCard
Technisches SEO, Content-Strategie und nachhaltige Rankings.
E-Mail-Flows, Retention und Customer Lifetime Value optimieren.
Shops, Schnittstellen und Automatisierung als technische Basis.
Service Card – Dark
Kernstrategie
SEO
Technisches SEO, Content-Strategie und nachhaltige Rankings.
Service Card – Light
Marge steigern
Bestandskunden
E-Mail-Flows, CRM-Strategie und Retention.
Gestapelte Cards (Philosophie-Stil)
Augenhöhe
Kunden, die mitdenken.
Fokus
Weniger Projekte, mehr Tiefe.
Ehrlichkeit
Wenn es passt, geben wir alles.
Dot-Indikatoren
Lime-Dots als visuelle Status-Indikatoren in Cards. Immer mit Label rechts.
07 – Taktil
Latente Elemente
Taktile Oberflächen, die physische Materialien simulieren. Post-Its, Eselsohren, Stapel, Tabs, Pins und Offset-Schatten.
Notiz
Dies ist ein Post-It Element mit abgeschnittener Ecke und versetztem Border.
.latent-postit
Dokument
Eselsohr-Effekt oben rechts via ::after Pseudo-Element mit Gradient.
.latent-fold
Stapel
Drei gestapelte Karten mit versetzten ::before und ::after Schatten.
.latent-stack
Tab-Element mit Label über dem Container. Label-Text via data-tab Attribut.
.latent-tab [data-tab="..."]
Angepinnt
Pinned-Note mit Rauten-Pin oben rechts in jkblue.
.latent-pin
Offset
Versetzter Schatten-Block in jkblue/12 statt weicher CSS-Schatten.
.latent-offset
08 – Digital
Digitale Elemente
Interface-Elemente aus der Welt von IDEs, Terminals und Dashboards. Monospace, dunkle Backgrounds, technische Ästhetik.
Terminal
✓ Collecting pages...
✓ Building static HTML...
✓ Generating assets...
Done in 1.42s
Log Stream
Stempel / Seal
Toast / Notification
Status Dashboard
Keybindings
09 – Interaktion
sharp-hover
Der einzige Hover-Effekt im System. Border wechselt zu jkblue, Schatten mit blue-tinted Offset. Keine weichen Schatten.
Hover mich
Border → jkblue, Box-Shadow mit rgba(5, 49, 168, 0.15).
Ohne Schnitt
Funktioniert auch ohne clip-path.
Dark Variant
Auf dunklem Hintergrund.
10 – Abstände
Spacing & Rhythm
Konsistente Abstände für Sections, Cards und innerhalb von Komponenten.
Section Padding
py-20 md:py-32 Vertikaler Abstand zwischen Sections
Section Gap
mb-16 md:mb-24 Abstand zwischen Full-Width Sections
Card Padding
p-8 md:p-10 oder p-8 md:p-12 Innerer Abstand von Cards
Grid Gap
gap-6 Standard-Abstand zwischen Grid-Items
Max Width
max-w-7xl (80rem) Maximale Content-Breite
Page Margin
px-6 oder mx-4 md:mx-6 Seitlicher Abstand zum Viewport
Kicker → Heading
mb-4 bis mb-8 Abstand zwischen Kicker und Section-Titel
Heading → Content
mb-10 Abstand zwischen Heading und Inhalt
