- HTML 84.3%
- CSS 11.8%
- Python 1.5%
- Shell 1.4%
- JavaScript 1%
| Filename | Latest commit message | Latest commit date |
|---|---|---|
Byte Flavour
ff1aed522a
apex-chat-ui-refactoring (byteflavour.dev, feat/apex-chat) ported
recipes/avatar.html into app/components/ChatRoomSymbol.client.vue and
fed back two operator-decided deviations:
- Initials use font.family.identity (BBH Hegarty, self-hosted from
assets/fonts/, OFL, Studio DRAMA) instead of Inter. It ships one
weight only (400), so font-synthesis: none is load-bearing. The
0.36 size ratio itself is unchanged (0.42 was tried there and
reverted).
- Room tiles are size.control.sm x the new size.control.room-factor
(0.9 -> 36px), not a fixed size, so a chat rail's space -> room
hierarchy reads without breaking the rail's line.
.avatar--person/--space are named aliases of .avatar--sm.
Also added from that feedback: a ring-based .avatar--current state
for "this is the current room/space" (nav-icon's persistent .active,
rules.md §3) instead of a dent, which would make the tile chrome; and
an Intl.Segmenter-based initials derivation so a single-word name
yields two graphemes ("Prüfstand" -> "PR") instead of one letter,
matching the "always two uppercase letters" invariant the recipe
already implied.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017kPBr5WmotrM6pbGpWrCh2
|
||
| .beads | ||
| .claude | ||
| assets | ||
| forgejo | ||
| gts | ||
| recipes | ||
| tokens | ||
| .gitignore | ||
| AGENTS.md | ||
| build.mjs | ||
| bun.lock | ||
| CLAUDE.md | ||
| config.json | ||
| index.html | ||
| LICENSE | ||
| package.json | ||
| README.md | ||
| rules.md | ||
byteflavour design system
The distilled visual language of byteflavour.dev — Doom One palette,
neuromorph chrome, glass content, mesh atmosphere — extracted 2026-08-04
from the original Angular site (~/src/byteflavour.dev), curated rather
than migrated: only the parts worth keeping.
Three layers, three artifact types (each carries what the others can't):
| Layer | Where | What it holds |
|---|---|---|
| Tokens | tokens/*.json (DTCG format) |
The ingredients: colors, shadow pairs, spacing, motion |
| Recipes | recipes/*.html (self-contained previews) |
The technique: how ingredients combine into components |
| Invariants | rules.md |
The judgment: light source, state grammar, when style loses |
Build & view
bun install
bun run build # tokens/*.json -> dist/tokens.css (CSS custom properties)
python3 -m http.server # or any static server; open index.html
The gallery (index.html) is the "storybook": a static page iframing the
recipes. No dev server, no framework.
Editing tokens
tokens/*.json is the source of truth — hand-edit, rebuild, reload.
Format is the W3C Design Tokens (DTCG) draft: $value, $type,
$description, references like "{color.accent.blue}". Style Dictionary
(the only dependency) compiles them; add output platforms in config.json
when a consumer needs something other than CSS variables.
Consumers
- byteflavour.dev (Nuxt) — import
dist/tokens.css, follow the recipes - GoToSocial (Chatsubo) —
dist/gts.min.css, pasted into the instance's custom CSS (LIVE) - Forgejo (git.byteflavour.dev) —
dist/theme-neuromorph.css, deployed declaratively via nixos-config's customDir overrides (LIVE) - claude.ai/design — the recipes carry
@dsCardmarkers and are self-contained; sync via DesignSync when wanted - Any future web surface: the nav-icon recipe is the benchmark every interactive control is measured against.
Sources of the distillation
src/styles.css(old site): palette, type/spacing scales, glass-card, meshsrc/app/navigation/navigation.component.css: the neuromorph nav icons — the component this whole system exists to preserve
Licensing
Split regime — see LICENSE: MIT for code/tokens/recipes,
CC BY-SA 4.0 for docs and artwork, an identity/impersonation note
instead of mark reservations, fonts OFL, assets/personal/ excluded. Section 5 is the honest part:
an AI-provenance disclaimer acknowledging that the copyright status of
AI-assisted work is unsettled — we license what we hold, and no more.