mi/werkbaum
1
0
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases Wiki Activity

initial, vibe-coded version, mostly frontend

Browse Source
This commit is contained in:
Michael Hoennig
2026-07-21 09:55:30 +02:00
commit ded894a4da
19 changed files with 1598 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/brand/BRAND.md
+39
View File
@@ -0,0 +1,39 @@
# Werkbaum — Marke
Leitidee: Die Marke ist aus den Strichen der Notation gebaut —
**durchgezogen = und**, **gestrichelt = oder**. Das Zeichen ist eine Miniatur
des Diagramms; es existiert in zwei Orientierungen, analog zu den beiden
Darstellungsmodi des Produkts.
## Dateien (`brand/`)
| Datei | Zweck |
|---|---|
| `logo.svg` | Primärzeichen, Hochformat (Variante A), helle Flächen |
| `logo-dark.svg` | Primärzeichen für dunkle Flächen |
| `logo-quer.svg` | Sekundärzeichen, transponiert (Variante B), für breite/niedrige Flächen (Header-Leisten, Banner) |
| `logo-quer-dark.svg` | Sekundärzeichen für dunkle Flächen |
| `favicon.svg` | vereinfachte Zwei-Ebenen-Form für 16–32 px |
Design-Herleitung und Alternativen: `docs/design/logo-konzepte.html` und
`docs/design/logo-k2-varianten.html`.
## Farben
- Tinte `#243447`, Petrol `#0F766E` (Oder-Anteile).
- Auf dunklem Grund: Papier `#F3F6F9`, Petrol hell `#45C4B4`.
- Die Pastelltöne des Produkts sind **Statusfarben** und erscheinen nie im Logo.
- Einfarbige Variante: alles in Tinte; die Strichelung bleibt erhalten.
## Wortbild
- IBM Plex Sans SemiBold, Zweiteilung: **Werk** (Tinte) + **baum** (Petrol),
letter-spacing −0.02em.
- CLI/npm/Code-Kontexte: konsequent kleingeschrieben `werkbaum`
(IBM Plex Mono).
## Regeln
- Gestrichelte Anteile behalten Richtung und Strichmuster; nichts rotieren.
- Unter 24 px immer `favicon.svg` verwenden, nie das Primärzeichen verkleinern.
- Schutzraum: mindestens die Höhe des Wurzel-Kästchens rundum.
docs/brand/favicon.svg
+7
View File
@@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<!-- Werkbaum · Favicon (vereinfachte Zwei-Ebenen-Form) -->
<rect x="18" y="4" width="28" height="16" rx="4" fill="#243447"/>
<path d="M32 20 V26 M12 26 H52 M12 26 V32 M52 26 V32" fill="none" stroke="#243447" stroke-width="5"/>
<rect x="2" y="32" width="24" height="16" rx="4" fill="#fff" stroke="#243447" stroke-width="5"/>
<rect x="38" y="32" width="24" height="16" rx="4" fill="#fff" stroke="#0F766E" stroke-width="5"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 502 B

docs/brand/logo-dark.svg
+9
View File
@@ -0,0 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<!-- Werkbaum · Primärzeichen (Variante A, Hochformat) · für dunkle Flächen -->
<rect x="22" y="5" width="20" height="12" rx="3.5" fill="#F3F6F9"/>
<path d="M32 17 V22 M14 22 H50 M14 22 V27 M50 22 V27" fill="none" stroke="#F3F6F9" stroke-width="3"/>
<rect x="4" y="27" width="20" height="12" rx="3.5" fill="none" stroke="#F3F6F9" stroke-width="3"/>
<rect x="40" y="27" width="20" height="12" rx="3.5" fill="none" stroke="#F3F6F9" stroke-width="3"/>
<path d="M50 39 V46" fill="none" stroke="#45C4B4" stroke-width="3" stroke-dasharray="4 4"/>
<rect x="40" y="46" width="20" height="12" rx="3.5" fill="none" stroke="#45C4B4" stroke-width="3"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 728 B

docs/brand/logo-quer-dark.svg
+9
View File
@@ -0,0 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<!-- Werkbaum · Sekundärzeichen (Variante B, transponiert) · für dunkle Flächen -->
<rect x="4" y="26" width="20" height="12" rx="3.5" fill="#F3F6F9"/>
<path d="M24 32 H30 M30 14 V32 M30 14 H38 M30 32 H38" fill="none" stroke="#F3F6F9" stroke-width="3"/>
<path d="M30 32 V50 M30 50 H38" fill="none" stroke="#45C4B4" stroke-width="3" stroke-dasharray="4 4"/>
<rect x="38" y="8" width="22" height="12" rx="3.5" fill="none" stroke="#F3F6F9" stroke-width="3"/>
<rect x="38" y="26" width="22" height="12" rx="3.5" fill="none" stroke="#F3F6F9" stroke-width="3"/>
<rect x="38" y="44" width="22" height="12" rx="3.5" fill="none" stroke="#45C4B4" stroke-width="3"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 743 B

docs/brand/logo-quer.svg
+9
View File
@@ -0,0 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<!-- Werkbaum · Sekundärzeichen (Variante B, transponiert) · hell -->
<rect x="4" y="26" width="20" height="12" rx="3.5" fill="#243447"/>
<path d="M24 32 H30 M30 14 V32 M30 14 H38 M30 32 H38" fill="none" stroke="#243447" stroke-width="3"/>
<path d="M30 32 V50 M30 50 H38" fill="none" stroke="#0F766E" stroke-width="3" stroke-dasharray="4 4"/>
<rect x="38" y="8" width="22" height="12" rx="3.5" fill="#fff" stroke="#243447" stroke-width="3"/>
<rect x="38" y="26" width="22" height="12" rx="3.5" fill="#fff" stroke="#243447" stroke-width="3"/>
<rect x="38" y="44" width="22" height="12" rx="3.5" fill="#fff" stroke="#0F766E" stroke-width="3"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 727 B

docs/brand/logo.svg
+9
View File
@@ -0,0 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<!-- Werkbaum · Primärzeichen (Variante A, Hochformat) · hell -->
<rect x="22" y="5" width="20" height="12" rx="3.5" fill="#243447"/>
<path d="M32 17 V22 M14 22 H50 M14 22 V27 M50 22 V27" fill="none" stroke="#243447" stroke-width="3"/>
<rect x="4" y="27" width="20" height="12" rx="3.5" fill="#fff" stroke="#243447" stroke-width="3"/>
<rect x="40" y="27" width="20" height="12" rx="3.5" fill="#fff" stroke="#243447" stroke-width="3"/>
<path d="M50 39 V46" fill="none" stroke="#0F766E" stroke-width="3" stroke-dasharray="4 4"/>
<rect x="40" y="46" width="20" height="12" rx="3.5" fill="#fff" stroke="#0F766E" stroke-width="3"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 712 B