node-K · Design System

coopi : node-K — corporate design system · v1.0 / 2026

The complete brand + UI system for node-K, a hackerspace association — a registered Verein with its seat (Vereinssitz) in Austria (Österreich). The premise: hacking means finding and building solutions — not only code, but wood, metal, textile and ideas. The "Nodes" are the physical locations (open workshops) where that happens. Brand line: „Wir bauen Lösungen. Komm vorbei." / „Hier werden Lösungen gebaut."

Sources

• Codebase (read-only, mounted): Tektur node-K Design System2/
  • node-K Design System.dc.html — the full brand-guide microsite (logo, colour, type, net-device, do's/don'ts, web-UI, print, digital). Primary source of truth.
  • node-K Leinwand.dc.html — a canvas board of artboards at real dimensions (stationery, large format, social).
  • assets/logo-color.png, assets/logo-mono.png — the emblem.
• No Figma or GitHub was provided.

---

CONTENT FUNDAMENTALS

Language. German throughout. Informal du-address ("Komm vorbei", "Werde Mitglied", "Hack mit"). Imperative and direct — invitations, not announcements.

Voice. Hacker-ethos, professionally executed. "Hacken" is reframed as a craft mindset ("finden und umsetzen"), deliberately not the Matrix/green-screen cliché. Warm and communal, never corporate.

Casing. Headlines are UPPERCASE Tektur. Body is sentence case. The mono-voice meta text (> prompt, // comments, #hashtags, urls) is lowercase — this is where the terminal/hacker flavour lives.

Two registers, side by side:

• Display (Tektur): bold, declarative, German nouns — "NODE FINDEN", "DIE NODES".
• Mono (JetBrains Mono): lowercase technical asides — "> 7 nodes · 340 mitglieder · offen für alle_", "// social media", "node-k.at · verein · sitz österreich".

Punctuation & detail. German quotation marks „…". Middot · as a separator in mono meta. A blinking underscore _ cursor closes hero kickers. Numbers are celebrated big and bold (7 Standorte, 340 Mitglieder, 128 Workshops).

Emoji. None. The personality comes from the mono cues and the net motif, not emoji. (The browser-frame lock 🔒 in the web-UI mock is chrome, not brand voice.)

Example copy: „Gib mir ein Werkzeug und einen Raum — den Rest hacken wir uns selbst zusammen." · „Vom Kabel zur Schaltung an einem Abend. Kein Vorwissen nötig — Werkzeug stellen wir." · „Komm vorbei, mach mit, hack mit."

---

VISUAL FOUNDATIONS

Colour. Black is the stage (70%), energy from few accents (20% Orange, 10% Türkis). --nk-black #171717 ground; exactly three blacks: #0e0e0e (deep — chrome, wells) → #171717 (stage) → #1c1c1c (cards); borders #2a2a2a. Signal-Orange #fbaa2b leads — the single primary/CTA colour per surface. Node-Türkis #00baba connects — links, hover, status, the network lines. White is reserved for the logo-K and maximum-contrast text. Rule: Orange and Türkis never sit as equal-area blocks; one always leads.

Zwei Modi, zwei feste Pole. Seit P9 folgen --nk-black, --nk-black-deep, --nk-surface und die Textrampe dem Farbmodus — --nk-black ist die Bühne und wird im Hellen zu Papier. Modusfest sind genau zwei Tokens: --nk-ink (#171717) und --nk-paper (#f5f2ec). Regel: Ein Musterbeispiel, das eine der beiden Fassungen einer Marke vorführt („Dunkel · …", „Mono · Dark", ein dunkler Sticker, ein schwarzes Shirt), nimmt seinen Grund aus --nk-ink bzw. --nk-paper — nie aus einem Token, das dem Modus folgt. Sonst zeigt es im einen Modus die Sache und im anderen ihr Gegenteil, und das hellpolige Asset darauf verschwindet (P9.11: 21 Kacheln auf 1,00:1). Umgekehrt bleibt alles, was nicht eine Fassung vorführt — Kartenflächen, Bühnen, Fließtext — modusfolgend. Ob eine Kachel eine Fassung vorführt, ist eine Absichtsfrage; sie wird beim Schreiben entschieden, nicht vom Scanner.

Type. Tektur — a constructed, octagonal industrial display face, variable width (75–125) and weight (400–900). Titles: 900 / wdth 100 / UPPERCASE / tracking −0.5px / line-height 0.92. Body uses condensed widths (font-stretch 80–90%) and generous line-height (≥1.6) for air. JetBrains Mono carries all meta/technical text. (Tektur is self-hosted from /assets/fonts in three width families — see fonts note below.)

Backgrounds. The Netz-Device is the signature: nodes + connection lines, mostly Orange with ~⅓ Türkis nodes, gently animated on <canvas> and frozen under prefers-reduced-motion. Used subtly behind heroes, posters, social and cards — always with a radial protection gradient fading to black so text stays legible. Static derivative: a dot-raster (radial-gradient dots, 11–26px grid) for endless surfaces, business-card backs and brochure panels. No photographic backgrounds by default; when photos appear they sit in octagonal clip-path masks with a mono foto.jpg caption.

Layout. Strict 8px grid. Generous negative space — explicitly "kein horror vacui". Section padding breathes (≈96px vertical, 8vw gutters). Max content width ~1240px.

Corners & borders. Small, kantig radii: 2px (buttons/tags), 3px (cards), 4px (containers), 7px (browser frame), 50% (emblem, dots, avatars). Borders are a single 1px #2a2a2a hairline; the active/hover border recolours to Türkis or Orange. A 3px Orange left accent edge marks one emphasised block (use sparingly — never a colour left-border as mere decoration).

Shadows. Dezent and deep (dark theme): cards 0 6px 30px rgba(0,0,0,.3), frames 0 30px 80px rgba(0,0,0,.5). The only glow is the status-dot box-shadow (0 0 8px Türkis/Orange) — reserved for live "open/event" indicators.

Motion. Fast and flat: .15s cubic-bezier(.4,0,.2,1), no bounce. Hover brightens (Orange → #ffc15c) or recolours the border + lifts ~3px (cards) / 1px (buttons). Press returns to translateY(0). The net animates continuously but slowly; the hero cursor blinks.

States. Hover = brighter accent or recoloured border + small lift. Press = back to 0. Focus = 2px Türkis outline, 2px offset (the connection colour as the focus colour). Disabled = 40% opacity.

Transparency & blur. Sticky headers and the modal scrim use a dark translucent fill + backdrop-filter: blur(). Otherwise surfaces are opaque.

---

ICONOGRAPHY

node-K is icon-light by design — the system leans on typography, the net motif and mono cues rather than a dense icon set. There is no bundled icon font or SVG icon library in the source.

• Logo / emblem. The one fixed graphic asset: the net-around-a-K emblem, shipped as assets/logo-color.png (Orange/Türkis on black) and assets/logo-mono.png (greyscale, for engrave/stamp/1-colour). Used rounded (3px) for lockups and circular for stickers/avatars/app-icons. Min sizes: 24px digital, 16px favicon (simplify the net, keep the K).
• Status. Communicated with a glowing coloured dot (StatusDot), not a glyph — Türkis = offen, Orange = event läuft, grey = geschlossen.
• Unicode as "icons". Sparse and deliberate: > prompt, _ cursor, → arrows in links/CTAs, · separators, ✓ / ✕ inside Do's & Don'ts, ★ / ☆ for save/merken, × to close. No emoji.
• Native icon set ships here. A node-K-styled SVG library lives in assets/svg/ (icon/, mark/, action/, chip/, pattern/, wordmark/, app/) — constructed in the 24er box on the u-grid with 45° chamfers. Gelb führt, Türkis akzentuiert, Ink trennt. Filled shapes are the default language; a stroke is legal only where the form genuinely is a line (Leitung, Bahn, Signalbogen) and then only at 1/2/3px with miter joins and butt caps — never rounded, never a centered stroke for a frame (frames are evenodd insets). Use these first. Each file bakes the brand palette; inline the SVG to recolour via currentColor. The chamfer helper (assets/svg/chamfer.js) mirrors the QR generator so new assets read identically. Only if you need a glyph not in the set, redraw it in the same filled 45°-chamfer language and flag the addition; Lucide is a geometric reference only — never ship raw stroke icons.

Verbindliche Konstruktions-Regeln (Kurzfassung)

Die vollständige Aufarbeitung liegt als Karten in guidelines/assets-0a…0f.html (Gruppe 04 · Assets & Hintergründe); die Maße sind als Tokens in tokens/geometry.css hinterlegt und gelten projektweit, nicht nur für Icons.

Regel	Wert	Token
Zeichenbox	24 × 24	--nk-icon-box
Live-Fläche (freie Form)	20 × 20, Koordinaten 2…22	--nk-icon-live / --nk-icon-margin
Live-Fläche (Behälter)	22 × 22, Koordinaten 1…23	--nk-icon-live-frame
Strichstärken	genau 1 / 2 / 3px — Zwischenwerte unzulässig	--nk-stroke-hair/reg/bold
Trennluft	1 Strichstärke = 2px, rechtwinklig gemessen (45° → Achsversatz 2,83)	--nk-shape-gap
Rahmen ↔ Füllung	Luft zur Innenkante: tragende Füllung 2px (45° → 2,83), Detail-Füllung in kleinen Rahmen 1px (45° → 1,41); Füllung wiederholt die Silhouette, ohne Fase	--nk-shape-gap
Icon-/Oktagon-Rahmen	2px als evenodd-Inset, konstant auf allen Seiten	--nk-icon-frame / --nk-oct-frame
CSS-Rahmen	1px Haarlinie, skaliert nie	--nk-bw
Fasen-Ratios	0.40 · M (Modul) · 0.35 · 7M (Finder) · 0.30 · S (freie Form)	--nk-chamfer-*
Fasen-Klassen CSS	chip 6 · button 8 · karte 12 · panel 16 px	--nk-cham-chip/btn/card/panel
Ausgabegrößen	20 / 24 / 32 / 36 (Default 24)	--nk-icon-sm…xl
Print-Fase	0.3 · Kantenlänge, min. 0,8 mm · Stanzung/Gravur min. 1,5 mm	--nk-print-chamfer-*
Farbrollen	1 gelbe Hauptform (≥ ⅔ Fläche) + 1 türkiser Akzent; Ink nur als Aussparung	—
Ausnahmen	nur E1 Stufenreihe · E2 Knoten-Wiederholung · E3 Invers-Fassung	—
Patterns	ausschließlich 1px; Stärke über Deckkraft	—
Logo-Schutzraum	25 % der Marken-Höhe, allseitig	—
Logo-Mindestgrößen	Wortmarke 88px / 25 mm · Emblem 24px / 8 mm · nur-K 16px · Gravur 12 mm	—
Logo-Standard	freigestellte Fassung (*-frei.png) mit inset(5%) + scale(1.111)	—
Wortmarke Standard	zwei tokenisierte Quellen in svg/wordmark/: weiss · nur-k-gelb-zeile2-tuerkis; die hellen Fassungen (schwarz, …-schwarz) erzeugt der Build nach assets-pkg/dist/svg-flat/wordmark/	alles in entwurf/
Wort-Bild-Marke Standard	Quelle svg/wbm/colored-dark; colored-light kommt aus dem Build (assets-pkg/dist/svg-flat/wbm/)	alles in entwurf/

Font note: Tektur is the genuine brand typeface, self-hosted from /assets/fonts (18 static .ttf files: 3 widths × 6 weights, OFL). The three widths are exposed as separate families — 'Tektur' (normal), 'Tektur SemiCondensed', 'Tektur Condensed' — reachable via the tokens --nk-font-display, --nk-font-cond, --nk-font-condx. Pick width by family (e.g. body text uses --nk-font-cond), not by font-stretch. JetBrains Mono still loads from Google Fonts; supply a local file to self-host it too.

---

INDEX / MANIFEST

Root

• styles.css — global entry; @imports the token + font layers only. Consumers link this.
• readme.md — this guide. · index.js — Barrel-Export (s. Components). · korrekturen/ — Audit, Arbeitsauftrag und Fachkonzepte (Arbeitsdokumente, kein Systembestandteil).
• SKILL.md — Agent-Skills wrapper.
• assets/ — five logo variants (standard: the cut-out logo-color-frei.png / logo-mono-frei.png, see CLAUDE.md), fonts/ (Tektur 18 ttf + JetBrains Mono 7 ttf), svg/, png/.

Tokens (tokens/ — installable npm package @node-k/tokens, see tokens/README.md)

• source/ — DTCG JSON, single source of truth · build/ — Style Dictionary toolchain
• dist/ — generated CSS/SCSS/Tailwind/JSON; styles.css imports dist/css/nodek-fonts.css + dist/css/nodek-tokens.css
• handoff/ — integration kit: Nuxt UI 4 mapping, Tailwind v4, Bootstrap bridge
• Change a value in source/**, then cd tokens && npm run build. Never hand-edit dist/.

Asset library (assets/svg/) — tokenisierte SVGs mit Rollenklassen, oktagonal 45° DNA. Jede Datei trägt ein internes <style> mit sechs Rollen (.nk-b Hauptform · .nk-a Akzent · .nk-t Zeichen · .nk-i Grund · .nk-on Zeichen auf Markenfläche · .nk-ok/.nk-danger), jeder Token mit seinem heutigen Wert als Rückfallwert — eine Datei muss ohne Stylesheet stimmen. Drei Ausgabeformen erzeugt @node-k/assets (assets-pkg/): dist/svg (Web), dist/svg-mono (currentColor), dist/svg-flat (feste Werte, Schutzkontur als Geometrie) und dist/sprite.svg

• chamfer.js — documented fasen helper (mirrors the QR generator)
• mark/ (17) · chip/ (20: 0–9 gefüllt + outline) · action/ (15) · wordmark/ (2 Quellen, 2 abgeleitete Fassungen + wordmark/entwurf/ 12 Entwürfe, 3 abgeleitete)
• icon/ (61) — Themen-Icons (Werkstatt, IT-Sec, Verein, Verwaltung) · pattern/ (6: parkett, modul-gitter, schraffur, plus-gitter, plus-gitter-neutral, -neutral-stark) — Kachelmuster · app/ (11) — App-Icons der node-K-Dienste
• wbm/ (1 Quelle + 1 abgeleitete Fassung + wbm/entwurf/ 3 Entwürfe, 1 abgeleitete) — Wort-Bild-Marke als fertige Einzeldatei: Netz + Wortmarke in einer SVG, Schutzschatten direkt um die Glyphen — dieselben drei Stufen wie im Netz-Generator (1,5 · 3 · 5 px in Wortmarken-Maß, die dritte mit 92 %) in der Grundfarbe der Fassung, Wortmarke fix auf 38 % der Kartenbreite. Standard: colored-dark (Quelle) · colored-light (aus dem Build). Entwürfe in wbm/entwurf/: mono-weiss (Quelle, heller Pol mono-schwarz aus dem Build) · mono-tuerkis · mono-orange — nicht automatisch verwenden. Netz nicht separat unterlegen, Farben nicht per CSS umfärben.
• entwurf/-Unterordner (svg/wbm/entwurf/ 3 SVG, svg/wordmark/entwurf/ 12 SVG, je ein readme.md): Alternativen und Entwürfe, nie automatisch einsetzen (s. CLAUDE.md). Die Regel „kein Glyph doppelt" gilt nur für Standard-Assets; Entwürfe dürfen Standard-Fassungen variieren und werden gegen die Prüfkarten assets-1a/assets-1d nicht geprüft.
• assets/export/ (5) — fertige Ausgaben für Merch/Druck: wortmarke-sticker-dunkel / -hell (SVG + PNG), type-sticker-m-offen.png. Erzeugnisse, keine Quellen — bei Änderung der Quelle neu exportieren.
• assets/qr.js + assets/qr-camo.js — Vanilla-QR-Kern (window.nkQR.matrix) und <nk-qr-camo>: QR als node-K-Hintergrundmuster getarnt (dots · plus · net · tone); dunkle Module bleiben in der Zellmitte dunkel. Nur für den Brand-Guide (node-K Design System.dc.html); die Komponente ist QrCode.
• assets/png/wbm/ (6) — dieselben Fassungen als PNG, 500 × 204 px, transparent.
• svg/qr/node-k-at.svg — QR auf https://node-k.at, aus dem eigenen Generator: Generator-Standard ECC L (7 %), freigestellt (ohne Plättchen), Markenfarben (Daten Türkis, Finder-Ringe Orange). Die Markenfarben tragen nur auf dunklem Grund — auf der Visitenkarten-Rückseite sitzt der QR deshalb auf einer Ink-Fläche #171717 über 3 × 3 Rasterzellen, nicht direkt auf dem Orange-Panel.
• svg/sticker/ (2 Quellen + karte-hell aus dem Build) — Die-cut-Sticker in Kartenkontur: enthält die Wort-Bild-Marke aus svg/wbm/ 1:1 (keine Neu-Rendern, kein Umfärben, keine andere Auflösung) und ergänzt nur die Außenkontur: Konturhülle um die 358 Formpunkte von assets/nodes-kaernten.svg, R = 84 Karten-Einheiten, geglättet, Schnittrand 60 Einheiten immer in der Flächenfarbe (nie andersfarbig). karte-dunkel · karte-hell · karte-frei (freigestellt, ohne Fläche — Kontur nur als Schnittlinie); PNG in assets/png/sticker/ (500 × 233 px).
• Rund-Sticker liegen als Karten in der Sektion „Sticker & Patches“: Kreisfläche in Node-Schwarz #171717 (hell: Weiß) mit dem freigestellten Emblem darauf (logo-color-frei.png bzw. logo-color-frei-blackk.png, clip-path:inset(5%) + scale(1.111)) — keine Ringe, kein Ersatz-K, das Tektur-K kommt aus dem Emblem. Darüber Schutzverlauf, dann Bogenschrift auf r 296 (oben) / 352 (unten) mit Schutzschatten. Fassungen: Ring dunkel · Ring hell · node/K. Alle Sticker werden im System in gleicher Höhe gezeigt (52 % der Kachelhöhe, Kachel 3:2, Grund immer #171717); die Rundform ist der Ausgangswert. Der Wortspiel-Sticker setzt jede Zeile bis zur Außenkante ihrer Spalte — die Schriftgröße folgt der Wortbreite, der Abstand zum K bleibt konstant bei 26 Einheiten.
• Emblem-Wahl (systemweit): dunkler Grund → Vollfarbe (K weiß, logo-color-frei.png) · heller Grund → Light-Fassung (K schwarz, logo-color-frei-blackk.png) · 1-farbig → mono. Die Logo-Komponente nimmt dafür mode="dark" | "light".
• icon/ (49: Werkstatt, IT-Sec, Verein, Verwaltung) · pattern/ (4: parkett, modul-gitter, schraffur, plus-gitter)
• Vereinsverwaltung-Set (Nav, Chrome, Matrix): iconKey → Asset-Mapping auf der Karte guidelines/assets-1d.html — 35 Neuzeichnungen, 15 Bestands-Assets wiederverwendet, kein Glyph doppelt.
• Live in the canvas too → node-K Design System.dc.html, section „05 Assets“
• Showcase on the Design System tab → group „05 · Assets“ (assets-marks, assets-icons, assets-actions, assets-containers, assets-patterns)

Components (components/) — React primitives (window.NodeKDesignSystem_10c101)

• core/ — Button, Badge, Tag, MonoLabel, StatusDot, Card, Input, Switch
• brand/ — Logo
• netz/ — NetCanvas (Netz-Device; interaktive Card mit PNG/SVG-Export)
  • net-device.js — Generator-Kern (abhängigkeitsfrei, window.nodeKNet). Gegenüber dem Build auf node-k.at/design/net-device.js erweitert um config.pulse (Netz-Puls abschaltbar) und config.sizeByDensity + densityOf() (Node-Radius folgt der Nachbarschafts-Last) — beides rückwärtskompatibel, Vorgabe = altes Verhalten.
  • netz.card.html — Generator-UI im Designsystem (Regelkreis ≥30 fps, Export PNG/SVG/WebM/Live-HTML/Config).
  • netz.portable.html — portabler Einzeldatei-Build für die Website: Tokens, Kern (2×, einmal als Text für den Live-HTML-Export), Kärnten-Daten und beide Wortmarken-Varianten inline, keine externen Dateien. Funktional deckungsgleich mit der Card (inkl. WebM-Aufnahme + Video-Länge).
  • assets/nodes-kaernten.svg wird aus diesem Generator erzeugt: Netz aus (count:0), Hintergrund transparent, Seed 42, t=0 — nur die Karte. Aus ihr sind die sechs fertigen Wort-Bild-Marken in assets/svg/wbm/ gebaut (Karte + Wortmarke in einer Datei); die getrennten Ebenen bleiben nur für den Generator und Sonderfälle.
• qr/ — QrCode (node-K-styled QR-Code: 45°-Fase, Ring-Finder, zweifarbig)
  • nodek-qr.js — Headless-Kern als ESM, abhängigkeitsfrei und DOM-frei (enthält qrcode.js von K. Arase, MIT). Exporte: generate (Default), createGenerator, defineGenerator (Custom-Element), renderStyledQR, encodeContent. Inhaltstypen: url · text · wifi · vcard · event · sepa · email · sms · tel · geo. Kann Emblem einstanzen (ECC steigt automatisch auf mind. Q), CTA-Frame anlegen und eine Druckvorstufe mit Anschnitt + Schnittmarken erzeugen.
  • QrCode.jsx — React-Hülle um denselben Kern (rendert Inline-SVG).
  • qr.card.html — Generator-UI im Designsystem (Inhaltstypen, Farbschemata, Fase, Ruhezone, Emblem, Frame, Druck; Export SVG/PNG).
• content/ — NodeCard, EventRow, PostCard (Galerie-/Inhalts-Kachel), AktionsPanel (Orange-Signalfläche)
  • content.card.html — NodeCard + EventRow · gallery.card.html — PostCard-Raster + AktionsPanel
• index.js (Wurzel) — Barrel-Export der 15 Komponenten; einziger erlaubter Importpfad (_adherence.oxlintrc.json). NK/CONFIG sind Hilfswerte und bewusst nicht exportiert.
• Bewusste Duplikate (net-device.js, kaernten.json ×3; image-slot.js ×2): npm run build in tokens/ prüft sie byte-genau (build/sync-duplicates.mjs) und schlägt bei Abweichung fehl.

Templates (templates/)

• praesentation/ — Präsentation · Monatstreffen: 15-Folien-Deck 1920×1080 (Praesentation.dc.html) mit Platzhaltern und Sprechernotizen. Titel- und Abschnittsfolien tragen das Netz (netz/ — Kern, Web-Component-Hülle, Kärnten-Daten, Seed 42), Deck-Shell und Bildplatzhalter liegen lokal (deck-stage.js, image-slot.js), Tokens und Bundle kommen über ds-base.js (base = '../..'). Tweaks: Netzdichte · Kartengröße · Netztempo. Details im Ordner-readme.md.

Foundation cards (guidelines/) — specimen cards for the Design System tab (Brand, Colors, Type, Spacing, Konstruktion, Assets, Backgrounds). Das Konstruktions-Regelwerk steht am Anfang von Gruppe 04: assets-0a Konstruktion & Raster · assets-0b Strichstärken & Trennluft · assets-0c Farbrollen & Asset-Klassen · assets-0d Do's & Don'ts · assets-0e Neues Asset anlegen · assets-0f Logo-Anwendung & Formate. Das Vereinsverwaltungs-Mapping liegt als assets-1d (Assets · Vereinsverwaltung Icon-Set). Alle Hintergrund-Regeln bleiben in assets-3a / assets-3b.

node-K · Verein · Vereinssitz Österreich · Ein System. Viele Nodes.