[ SYSTEM / 000 ]LIVE

Living Styleguide

Das Design-System dieser Seite: Farb-Tokens, Typografie und Bausteine, live gerendert und per Klick kopierbar.

Farben

Design-Tokens

SEMANTIC TOKENS RE-SKIN PER ARCHETYPE // ACCENT + TERMINAL ARE FIXED // CLICK COPIES THE CLASS

[ SEMANTIC ] // SWISS PRINT ↔ CRT TELEMETRY

[ SIGNAL ] // FIXED IN BOTH ARCHETYPES

Typografie

Schrift & Hierarchie

ARCHIVO BLACK — MACRO HEADERS // IBM PLEX MONO — TELEMETRY + DATA // INTER — PROSE BODY

Display · Archivo Black

Vom Problem zum Produkt

<h2 class="font-display font-black uppercase tracking-brutalist leading-crush text-heading" style="font-size: clamp(2.5rem, 8vw, 5rem)">Vom Problem zum Produkt</h2>

.telemetry / .telemetry-accent · IBM Plex Mono

[ PERSONNEL / 001 ] // STATUS: ONLINE

REV 2.6 — UNIT / D-01

<p class="telemetry">[ PERSONNEL / 001 ] // STATUS: ONLINE</p>
<p class="telemetry-accent">REV 2.6 — UNIT / D-01</p>

Data label · IBM Plex Mono

CI/CD · INFRASTRUCTURE · E2E-TESTING

<span class="font-mono text-xs uppercase tracking-data text-text-muted">CI/CD · INFRASTRUCTURE · E2E-TESTING</span>

Body · Inter

Klar, schnell und nah am Nutzer. Fließtext in Inter mit normaler Zeilenhöhe — Telemetrie braucht Dichte, kein luftiges Leading.

<p class="max-w-prose text-base leading-relaxed text-text-muted">Klar, schnell und nah am Nutzer. Fließtext in Inter mit normaler Zeilenhöhe — Telemetrie braucht Dichte, kein luftiges Leading.</p>

Aktionen

Buttons & CTAs

BLUE HAZARD BLOCK ↔ OUTLINE // MONO UPPERCASE // SQUARE, NO GLOW

.btn-primary

<button class="btn-primary">Kontakt aufnehmen <span aria-hidden="true">&rarr;</span></button>

.btn-secondary

<button class="btn-secondary">Zum Blog</button>

Container

Cards, Panels & Labels

LINE-DELINEATED COMPARTMENTS // BORDERS CARRY STRUCTURE, NEVER ELEVATION

.card

[ UNIT / 04 ]

Kompartiment

Von einer Linie umrandet, nie erhaben. Hover schärft die Kante auf Rot.

<div class="card max-w-sm p-5">
  <p class="telemetry-accent">[ UNIT / 04 ]</p>
  <h3 class="font-display font-black uppercase tracking-brutal text-lg text-heading mt-2">Kompartiment</h3>
  <p class="mt-2 text-sm leading-relaxed text-text-muted">Von einer Linie umrandet, nie erhaben. Hover schärft die Kante auf Rot.</p>
</div>

.panel

[ DOSSIER ]UNIT / D-01

HUD-gerahmtes Panel — opak, flach, rechtwinklig.

<div class="panel max-w-sm">
  <div class="flex items-center justify-between"><span class="telemetry-accent">[ DOSSIER ]</span><span class="telemetry">UNIT / D-01</span></div>
  <p class="mt-3 text-sm leading-relaxed text-text-muted">HUD-gerahmtes Panel — opak, flach, rechtwinklig.</p>
</div>

TechPill / data chip

TypeScript

<span class="inline-flex items-center gap-1.5 border border-border bg-surface-alt px-3 py-1.5 font-mono text-xs font-medium uppercase tracking-data text-text">TypeScript</span>

.divider / .divider-accent · .bracket · .caret

SECTION_ID // descriptor

AWAITING INPUT

<div class="w-full max-w-sm">
  <hr class="divider" />
  <hr class="divider-accent mt-4" />
  <p class="telemetry mt-4"><span class="bracket">SECTION_ID</span> // descriptor</p>
  <p class="font-mono text-sm uppercase tracking-telemetry text-heading mt-2 caret">AWAITING INPUT</p>
</div>