Design-System integrieren: zentonic Terminal/TUI/Cyberpunk-Skin #35

New issue

Closed

opened 2026-06-01 00:00:20 +02:00 by holm · 0 comments

holm commented

2026-06-01 00:00:20 +02:00

Owner

Dimension	Bewertung	Einschätzung
Aufwand	`███████░░░`	Hoch — komplettes Re-Styling: CSS-Tokens, Schriften, Templates anpassen
Nutzen	`██████████`	Maximal — Site bekommt eigenständigen Charakter (Terminal-Cyberpunk statt Standard-Dark)
Bruchhäufigkeit	`██░░░░░░░░`	Niedrig — wenn etabliert, Design-Tokens sind stabil
Nachhaltigkeit	`█████████░`	Sehr hoch — definiert das visuelle Erscheinungsbild für Jahre
Dringlichkeit	`███████░░░`	Hoch — der aktuelle minimal-CSS-Stub ist ein Platzhalter, Site fühlt sich erst mit Design echt an

Quelle

Design-Bundle aus claude.ai/design (Stand 2026-05-31): zentonic // Design System, ein Terminal/TUI/Retro-BBS/Cyberpunk-retrofuture-Reinterpretation von podcast.zentonic.org. Komplett in _private/design/zentonic-design-system/ abgelegt (gitignored — Schriften vermutlich kommerzielle Lizenz).

Bundle-Inhalt:

project/colors_and_type.css — vollständige Design-Tokens (Farben/Type/Spacing/Elevation/Motion als CSS-Variablen)
project/fonts/ — Berkeley Mono (Display/UI/Code) + TX-02 (Body, MonoLisa-Stand-in)
project/preview/*.html — 21 Komponenten-Karten (Buttons, Cards, Speaker, Badges, Inputs, Terminal, Wordmark, Iconography)
project/ui_kits/website/ — komplette React-Recreation der Live-Site im neuen Skin (index.html + JSX)
chats/chat1.md — Design-Iterations-Transkript
README.md (Bundle-Root + project/) — Spec, Open-Items, Content-Fundamentals

Design-Direction (aus dem Bundle)

Vibe: Late-night phosphor terminal / Retro BBS / Cyberpunk-Retrofuture. Dark-only.

Farben (Auszug):

Surfaces: #06050f (void) → #1c1940 (raised) — Indigo-Violett-Cast, nicht plain black
Brand-Akzent: zentonic blue #3d8bff
Phosphor green #36f1a6 (terminal/online/success)
Amber #ffb340 (archive/REC), Magenta #ff4d9d (live), Cyan #36d6ff (data/timestamps), Violet #7c4dff (bloom)

Type: Alles Monospace. Berkeley Mono Condensed Black (Display, uppercase tight), Berkeley Mono (UI), TX-02 (Body 15px/1.6), 11px uppercase tracked für System-Labels.

Spacing/Layout: 4px-Grid, max-width 1100px, sharp corners (4px Radius max), 1px Hairlines überall.

Elevation: Glow-basiert (box-shadow: 0 0 0 1px rgba(...) , 0 0 18px ...), NICHT drop-shadow.

Motion: Snappy 160ms cubic-bezier(.2,.6,.2,1), kein Bounce. Signature: blinkende Block-Caret ▋.

Casing-Regel: zentonic immer lowercase. System-Chrome (META/ARCHIV/KAPITEL) uppercase tracked. Inhalte (Titel, Beschreibung) mixed case.

Iconography: Unicode + Box-Drawing (▶ ⬅ ◂ ▸ ⤓ ● $ > # ⚙ ║ ═ ╔ ╗ ╚ ╝) statt SVG-Icons oder Emoji.

User-Customization (vom Auftrag)

Der Bundle-Index zeigt breite Episode-Rows mit großem Cover. Holm möchte stattdessen schmalere Kacheln, mobile-first responsive.

Mobile (<640px): 1-Spalten Stack
Tablet (≥640px): 2 Spalten
Desktop (≥1024px): 3-4 schmale Kacheln

Constraints

Schriften: Berkeley Mono + TX-02 sind vermutlich kommerziell lizenziert. Nicht direkt ins git-Repo. Lösungen:
a) Self-Hosting auf zentonic-Webserver, im Template per CSS-@font-face mit absoluten URLs auf https://podcast.zentonic.org/fonts/... einbinden
b) Lokal in _private/fonts/ für Dev, nicht commited
c) Fallback: ui-monospace, SFMono-Regular, monospace für Builds ohne Font-Asset
Dark-only — kein Light-Mode (laut Design explizit)
Templating bleibt minijinja (Issue #4) — die JSX im Bundle ist nur Referenz, wir portieren visuell, nicht strukturell
Datenmodell bleibt episode.md (Issue #5) — Pflege-Schnittstelle unverändert

Arbeitsschritte

colors_and_type.css als poc/static/style.css einbinden (Tokens + Helper-Klassen)
Font-Strategie entscheiden (Self-Hosting vs. Fallback-only) + ggf. @font-face mit absoluten URLs
base.html.j2 umbauen: sticky Header mit glowing wordmark + blinkende Caret, Footer 3-spaltig (Social / Chat / Impressum) mit ASCII-Sign-off
index.html.j2: schmale responsive Kacheln (mobile-first, CSS Grid auto-fill, minmax(...))
episode.html.j2: Card-Layout an comp-episode-card.html anlehnen — Cover + Badge + Speaker-Chips + Meta. Player im Terminal-Skin
Speaker-Chips: Pill mit Avatar + Name + ▸-Prefix
Kapitel-Liste: HH:MM:SS Title in mono, Click-to-Play-Anker bleibt aber im Terminal-Look
Casing-Regel respektieren: zentonic-Brand lowercase, System-Labels uppercase tracked
Unicode-Glyphs statt Emoji (▶, ⬅, ●)
prefers-reduced-motion respektieren (Caret stoppt, Glow nicht animieren)
Mit sample_project + 25 echten Episoden validieren

Synergien

Löst gleichzeitig mit:

#21 (theme-color + Dark-Mode-Support — Design ist eh dark-only)
#30 (Tailwind-Build-Pipeline — wird durch dieses CSS-System ersetzt, Tailwind entfällt)
#31 (Legacy style.css — wird durch das neue komplett ersetzt)

Abhängigkeiten

Baut auf #4 (minijinja-Templates) und #5 (episode.md-Datenmodell) auf — beide ✅ erledigt.

| Dimension | Bewertung | Einschätzung | |---|---|---| | Aufwand | `███████░░░` | Hoch — komplettes Re-Styling: CSS-Tokens, Schriften, Templates anpassen | | Nutzen | `██████████` | Maximal — Site bekommt eigenständigen Charakter (Terminal-Cyberpunk statt Standard-Dark) | | Bruchhäufigkeit | `██░░░░░░░░` | Niedrig — wenn etabliert, Design-Tokens sind stabil | | Nachhaltigkeit | `█████████░` | Sehr hoch — definiert das visuelle Erscheinungsbild für Jahre | | Dringlichkeit | `███████░░░` | Hoch — der aktuelle minimal-CSS-Stub ist ein Platzhalter, Site fühlt sich erst mit Design echt an | ## Quelle Design-Bundle aus `claude.ai/design` (Stand 2026-05-31): **zentonic // Design System**, ein Terminal/TUI/Retro-BBS/Cyberpunk-retrofuture-Reinterpretation von podcast.zentonic.org. Komplett in `_private/design/zentonic-design-system/` abgelegt (gitignored — Schriften vermutlich kommerzielle Lizenz). **Bundle-Inhalt:** - `project/colors_and_type.css` — vollständige Design-Tokens (Farben/Type/Spacing/Elevation/Motion als CSS-Variablen) - `project/fonts/` — Berkeley Mono (Display/UI/Code) + TX-02 (Body, MonoLisa-Stand-in) - `project/preview/*.html` — 21 Komponenten-Karten (Buttons, Cards, Speaker, Badges, Inputs, Terminal, Wordmark, Iconography) - `project/ui_kits/website/` — komplette React-Recreation der Live-Site im neuen Skin (`index.html` + JSX) - `chats/chat1.md` — Design-Iterations-Transkript - `README.md` (Bundle-Root + project/) — Spec, Open-Items, Content-Fundamentals ## Design-Direction (aus dem Bundle) **Vibe:** Late-night phosphor terminal / Retro BBS / Cyberpunk-Retrofuture. Dark-only. **Farben** (Auszug): - Surfaces: `#06050f` (void) → `#1c1940` (raised) — Indigo-Violett-Cast, nicht plain black - Brand-Akzent: **zentonic blue** `#3d8bff` - Phosphor green `#36f1a6` (terminal/online/success) - Amber `#ffb340` (archive/REC), Magenta `#ff4d9d` (live), Cyan `#36d6ff` (data/timestamps), Violet `#7c4dff` (bloom) **Type:** Alles Monospace. Berkeley Mono Condensed Black (Display, uppercase tight), Berkeley Mono (UI), TX-02 (Body 15px/1.6), 11px uppercase tracked für System-Labels. **Spacing/Layout:** 4px-Grid, max-width 1100px, sharp corners (4px Radius max), 1px Hairlines überall. **Elevation:** Glow-basiert (`box-shadow: 0 0 0 1px rgba(...) , 0 0 18px ...`), NICHT drop-shadow. **Motion:** Snappy 160ms cubic-bezier(.2,.6,.2,1), kein Bounce. Signature: blinkende Block-Caret `▋`. **Casing-Regel:** `zentonic` immer lowercase. System-Chrome (META/ARCHIV/KAPITEL) uppercase tracked. Inhalte (Titel, Beschreibung) mixed case. **Iconography:** Unicode + Box-Drawing (`▶ ⬅ ◂ ▸ ⤓ ● $ > # ⚙ ║ ═ ╔ ╗ ╚ ╝`) statt SVG-Icons oder Emoji. ## User-Customization (vom Auftrag) Der Bundle-Index zeigt breite Episode-Rows mit großem Cover. **Holm möchte stattdessen schmalere Kacheln, mobile-first responsive.** - Mobile (<640px): 1-Spalten Stack - Tablet (≥640px): 2 Spalten - Desktop (≥1024px): 3-4 schmale Kacheln ## Constraints - **Schriften:** Berkeley Mono + TX-02 sind vermutlich kommerziell lizenziert. Nicht direkt ins git-Repo. Lösungen: a) Self-Hosting auf zentonic-Webserver, im Template per CSS-`@font-face` mit absoluten URLs auf `https://podcast.zentonic.org/fonts/...` einbinden b) Lokal in `_private/fonts/` für Dev, nicht commited c) Fallback: `ui-monospace, SFMono-Regular, monospace` für Builds ohne Font-Asset - **Dark-only** — kein Light-Mode (laut Design explizit) - **Templating bleibt minijinja** (Issue #4) — die JSX im Bundle ist nur Referenz, wir portieren visuell, nicht strukturell - **Datenmodell bleibt episode.md** (Issue #5) — Pflege-Schnittstelle unverändert ## Arbeitsschritte - [ ] `colors_and_type.css` als `poc/static/style.css` einbinden (Tokens + Helper-Klassen) - [ ] Font-Strategie entscheiden (Self-Hosting vs. Fallback-only) + ggf. `@font-face` mit absoluten URLs - [ ] `base.html.j2` umbauen: sticky Header mit glowing wordmark + blinkende Caret, Footer 3-spaltig (Social / Chat / Impressum) mit ASCII-Sign-off - [ ] `index.html.j2`: **schmale responsive Kacheln** (mobile-first, CSS Grid `auto-fill, minmax(...)`) - [ ] `episode.html.j2`: Card-Layout an `comp-episode-card.html` anlehnen — Cover + Badge + Speaker-Chips + Meta. Player im Terminal-Skin - [ ] Speaker-Chips: Pill mit Avatar + Name + `▸`-Prefix - [ ] Kapitel-Liste: `HH:MM:SS Title` in mono, Click-to-Play-Anker bleibt aber im Terminal-Look - [ ] Casing-Regel respektieren: zentonic-Brand lowercase, System-Labels uppercase tracked - [ ] Unicode-Glyphs statt Emoji (`▶`, `⬅`, `●`) - [ ] `prefers-reduced-motion` respektieren (Caret stoppt, Glow nicht animieren) - [ ] Mit `sample_project` + 25 echten Episoden validieren ## Synergien Löst gleichzeitig mit: - **#21** (theme-color + Dark-Mode-Support — Design ist eh dark-only) - **#30** (Tailwind-Build-Pipeline — wird durch dieses CSS-System ersetzt, Tailwind entfällt) - **#31** (Legacy style.css — wird durch das neue komplett ersetzt) ## Abhängigkeiten Baut auf #4 (minijinja-Templates) und #5 (episode.md-Datenmodell) auf — beide ✅ erledigt.

holm

2026-06-01 00:00:22 +02:00