Carbon and Bongbetic UI direction #7

New Issue

2026-11-05T15:23:08Z

xavierk commented

2026-11-05 15:23:08 +00:00

Part of #1
Blocked by: #2

Question

How do Carbon Design System tokens, typography, and spacing plus Bongbetic branding apply to the GTK app and the rebranded web site, and what does the revamped UI look like?

Part of #1 Blocked by: #2 ## Question How do Carbon Design System tokens, typography, and spacing plus Bongbetic branding apply to the GTK app and the rebranded web site, and what does the revamped UI look like?

xavierk added the wayfinder:prototype label 2026-11-05 15:23:08 +00:00

xavierk self-assigned this 2026-11-05 16:07:38 +00:00

xavierk commented

2026-11-05 16:09:52 +00:00

Resolution: Carbon-mapped (variant 2 of the prototype)

Decision. Adopt Carbon's structure, remapped to the house palette — not Carbon's look:

Color: interactive/action tokens point at Voca teal #0f6b57 (hover #0b493d), never Carbon Blue 60. Site canvas stays warm paper #f4f1e8 per the family paper rule. Red stays reserved for recording/destructive only. Bongbetic black/white + red accent is restricted to attribution chrome (header/footer "by Bongbetic" lockup); it does not re-skin the site.
Type/spacing/motion: adopt Carbon's 8px spacing scale, type roles/scale, and motion + 4.5:1 contrast discipline. No remote webfonts: the system stacks already in web/DESIGN.md satisfy the type roles, so IBM Plex is skipped.
GTK app: unchanged architecture. Keep Adwaita/OS theme variables (today's SETTINGS_CSS in settings_dialog.py already uses @theme_*, not hardcoded brand); add only a small accent hook for recording state + primary action in teal. Overlay signals unchanged (listening green #2ec273, processing amber #f2a626). No Carbon component port: the app stays GTK3/Python per the closed Rust rebuild viability decision.
Brand files: Bongbetic binaries are never vendored into the repo (local folder /media/Toto/Documents/bongbetic/Logo/bongbetic-brand/ only, per standing rules); public surfaces link the hosted copies. The b_glyph.svg wordmark lockup placement is left to Rename mechanics.

Alternatives rejected. (1) Literal Carbon theme (Blue 60, gray-90 dark site, Plex): breaks the family paper rule, the one-signal teal rule, and the no-remote-webfont rule, and Carbon React components cannot land in a GTK3 app. (3) Full Bongbetic mono re-skin: strongest house identity but abandons Voca family continuity for zero product gain; kept as a documented rejected variant.

Prototype asset. Throwaway branch prototype/carbon-bongbetic-direction, file web/prototype-voculinux-ui.html: all three variants on one page, switchable via ?v=family|carbon|bongbetic plus a bottom variant bar. Push was NOT possible from here (git push origin → 403 from the GitHub upstream remote; no PR opened, per wayfinding rules). Full findings therefore live in this comment; the local branch/worktree is at /tmp/voculinux-ui-proto if the orchestrator wants to re-capture it. The prototype is marked throwaway and must never merge.

Provenance. Decided by agent under the user's explicit delegation for this run (human-asked grilling questions answered by agent, not by the human). No human stated a preference for any variant.

Rationale / evidence actually read.

Map Destination + Decisions-so-far (issue 1): Carbon + Bongbetic branding is in-scope; Python/GTK3 settled by #2; D-Bus/niri and xbps decisions unaffected.
web/DESIGN.md (full): paper rule, one-signal teal rule, no-gradient rule, system stacks, GTK-style window with right-side controls, no traffic lights.
web/PRODUCT.md (brand commitments + capabilities): Voca teal + warm paper; "do not invent user counts/testimonials"; GTK follows OS dark/light; settings sidebar/footer facts.
src/vocalinux/ui/settings_dialog.py SETTINGS_CSS/_setup_css (~lines 1000–1081): theme-variable CSS, no brand hardcoding — so only an accent hook is needed.
src/vocalinux/ui/dictation_overlay.py _COLORS: listening #2ec273 / processing #f2a626 kept as-is.
Personal memory branding-bongbetic.md + local brand folder listing: black/white base, red accent, wordmark variants; private-by-default rule.
No GLOSSARY.md / docs/adr/ exists in repo, so no glossary/ADR files were touched; proposed terms ("Carbon token mapping" = structure-not-palette adoption; "Bongbetic lockup" = attribution-only chrome) live here as the single home of the decision.

Consequences for later tickets. Rename mechanics owns exact wordmark/binary/desktop-id strings and the one-time config import — its answer must respect "brand binaries never vendored". Python performance baseline is unaffected (no toolkit/theme perf impact). No new tickets graduate from this answer; no open ticket is invalidated; nothing moves to Out of scope.

## Resolution: Carbon-mapped (variant 2 of the prototype) **Decision.** Adopt Carbon's *structure*, remapped to the house palette — not Carbon's look: - **Color:** interactive/action tokens point at Voca teal `#0f6b57` (hover `#0b493d`), never Carbon Blue 60. Site canvas stays warm paper `#f4f1e8` per the family paper rule. Red stays reserved for recording/destructive only. Bongbetic black/white + red accent is restricted to attribution chrome (header/footer "by Bongbetic" lockup); it does not re-skin the site. - **Type/spacing/motion:** adopt Carbon's 8px spacing scale, type roles/scale, and motion + 4.5:1 contrast discipline. No remote webfonts: the system stacks already in `web/DESIGN.md` satisfy the type roles, so IBM Plex is skipped. - **GTK app:** unchanged architecture. Keep Adwaita/OS theme variables (today's `SETTINGS_CSS` in `settings_dialog.py` already uses `@theme_*`, not hardcoded brand); add only a small accent hook for recording state + primary action in teal. Overlay signals unchanged (listening green `#2ec273`, processing amber `#f2a626`). No Carbon component port: the app stays GTK3/Python per the closed [Rust rebuild viability](https://git.bongbetic.com/xavierk/voculinux/issues/2) decision. - **Brand files:** Bongbetic binaries are never vendored into the repo (local folder `/media/Toto/Documents/bongbetic/Logo/bongbetic-brand/` only, per standing rules); public surfaces link the hosted copies. The `b_glyph.svg` wordmark lockup placement is left to [Rename mechanics](https://git.bongbetic.com/xavierk/voculinux/issues/8). **Alternatives rejected.** (1) Literal Carbon theme (Blue 60, gray-90 dark site, Plex): breaks the family paper rule, the one-signal teal rule, and the no-remote-webfont rule, and Carbon React components cannot land in a GTK3 app. (3) Full Bongbetic mono re-skin: strongest house identity but abandons Voca family continuity for zero product gain; kept as a documented rejected variant. **Prototype asset.** Throwaway branch `prototype/carbon-bongbetic-direction`, file `web/prototype-voculinux-ui.html`: all three variants on one page, switchable via `?v=family|carbon|bongbetic` plus a bottom variant bar. Push was NOT possible from here (`git push origin` → 403 from the GitHub upstream remote; no PR opened, per wayfinding rules). Full findings therefore live in this comment; the local branch/worktree is at `/tmp/voculinux-ui-proto` if the orchestrator wants to re-capture it. The prototype is marked throwaway and must never merge. **Provenance.** Decided by agent under the user's explicit delegation for this run (human-asked grilling questions answered by agent, not by the human). No human stated a preference for any variant. **Rationale / evidence actually read.** - Map Destination + Decisions-so-far (issue 1): Carbon + Bongbetic branding is in-scope; Python/GTK3 settled by #2; D-Bus/niri and xbps decisions unaffected. - `web/DESIGN.md` (full): paper rule, one-signal teal rule, no-gradient rule, system stacks, GTK-style window with right-side controls, no traffic lights. - `web/PRODUCT.md` (brand commitments + capabilities): Voca teal + warm paper; "do not invent user counts/testimonials"; GTK follows OS dark/light; settings sidebar/footer facts. - `src/vocalinux/ui/settings_dialog.py` `SETTINGS_CSS`/`_setup_css` (~lines 1000–1081): theme-variable CSS, no brand hardcoding — so only an accent hook is needed. - `src/vocalinux/ui/dictation_overlay.py` `_COLORS`: listening `#2ec273` / processing `#f2a626` kept as-is. - Personal memory `branding-bongbetic.md` + local brand folder listing: black/white base, red accent, wordmark variants; private-by-default rule. - No `GLOSSARY.md` / `docs/adr/` exists in repo, so no glossary/ADR files were touched; proposed terms ("Carbon token mapping" = structure-not-palette adoption; "Bongbetic lockup" = attribution-only chrome) live here as the single home of the decision. **Consequences for later tickets.** [Rename mechanics](https://git.bongbetic.com/xavierk/voculinux/issues/8) owns exact wordmark/binary/desktop-id strings and the one-time config import — its answer must respect "brand binaries never vendored". [Python performance baseline](https://git.bongbetic.com/xavierk/voculinux/issues/9) is unaffected (no toolkit/theme perf impact). No new tickets graduate from this answer; no open ticket is invalidated; nothing moves to Out of scope.

xavierk closed this issue

2026-11-05 16:09:58 +00:00

xavierk referenced this issue

2026-11-05 16:10:02 +00:00

Voculinux port #1

xavierk referenced this issue

2026-11-05 16:45:29 +00:00

Spec: Voculinux — Void Linux (glibc) Wayland/niri port of Vocalinux #16

xavierk referenced this issue from a commit

2026-11-06 11:06:39 +00:00

Add pre-commit hooks to match GitHub CI pipeline (#7)

Sign in to join this conversation.