Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions .changeset/di-accent-token.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
---
"@btravstack/theme": minor
---

Add `--pkg-di`, blue `#3E7FD4`, for `@btravstack/di`.

Blue is plumbing — the connections behind the wall that everything visible runs
on, which is what a wiring container is. The hex is the logo's own lighter blue
(the barrel rim, the plunger, the needle hub), so chrome and artwork stay one
color.

di's docs site currently sets `--accent: #2A62B8`, the logo's *deep* blue. That
hex scores 3.22 against `--card` on the dark scheme, below the 5.00–7.25 band
the other four package accents occupy, so the landing takes the lighter blue
instead: 4.72 on the dark card, 7.10 as darkened text on white (AA). Repointing
di's docs to match is btravstack/di's half.
21 changes: 15 additions & 6 deletions apps/website/.vitepress/theme/Landing.vue
Original file line number Diff line number Diff line change
Expand Up @@ -44,8 +44,9 @@ interface Project {
docs: string;
}

// Ordered as the stack reads — errors, the domain built on them, then the
// transports that carry it. unthrown leads: the other three build on it.
// Ordered as the stack reads — errors, the domain built on them, the wiring
// that assembles it, then the transports that carry it. unthrown leads: the
// other four build on it.
const projects: Project[] = [
{
key: "unthrown", tag: "Errors", name: "unthrown", pkg: "unthrown", npm: "unthrown",
Expand All @@ -63,6 +64,14 @@ const projects: Project[] = [
install: "pnpm add @btravstack/entity",
repo: "https://github.com/btravstack/entity", docs: "https://btravstack.github.io/entity/",
},
{
key: "di", tag: "Wiring", name: "di", pkg: "@btravstack/di", npm: "@btravstack/di",
logo: "/logos/di", repoFull: "btravstack/di", stars0: 1,
blurb: "A module-based container. Ports are the vocabulary your application defines, providers bind them at one edge, and modules declare what they import and export — so internals stay private in a graph that is one flat map at runtime.",
points: ["Ports named by the domain, not the adapter", "Unmet dependencies are compile errors", "Scoped resources release themselves"],
install: "pnpm add @btravstack/di unthrown",
repo: "https://github.com/btravstack/di", docs: "https://btravstack.github.io/di/",
},
{
key: "amqp", tag: "Messaging", name: "amqp-contract", pkg: "@amqp-contract/contract", npm: "@amqp-contract/contract",
logo: "/logos/amqp-contract", repoFull: "btravstack/amqp-contract", stars0: 18,
Expand Down Expand Up @@ -186,8 +195,8 @@ onMounted(() => {

<!-- The stack — each package in its own color -->
<section id="packages" class="btv-section">
<h2 class="btv-h2">Four libraries, one stack.</h2>
<p class="btv-section-lead">Errors, domain, messaging and workflows — four focused packages that compose into one coherent backend.</p>
<h2 class="btv-h2">Five libraries, one stack.</h2>
<p class="btv-section-lead">Errors, domain, wiring, messaging and workflows — five focused packages that compose into one coherent backend.</p>
<div class="btv-panels">
<article v-for="p in projects" :key="p.name" class="btv-panel" :style="{ '--pkg': `var(--pkg-${p.key})` }">
<div class="btv-panel-top">
Expand Down Expand Up @@ -263,7 +272,7 @@ onMounted(() => {
<a href="https://github.com/btravstack" target="_blank" rel="noopener" class="btv-cta btv-cta--big">View on GitHub <span aria-hidden="true">↗</span></a>
</section>

<!-- Ft3 · index footer (genuine hub for the four docs sites) -->
<!-- Ft3 · index footer (genuine hub for the five docs sites) -->
<footer class="btv-foot">
<div class="btv-foot-grid">
<div class="btv-foot-brandcol">
Expand Down Expand Up @@ -298,7 +307,7 @@ onMounted(() => {
/* Hallmark · genre: atmospheric (studied) · macrostructure: Ecosystem Index · design-system: design.md · designed-as-app
* theme: studied-DNA (source: https://tanstack.com/) · studied: yes · DNA-source: url + screenshot
* observed-DNA: neutral-black canvas · per-library accents · heavy grotesque display · real-stats hero · elevated panels
* nav: N1b three-section · footer: Ft3 index (genuine hub for 4 docs sites) · hero: wordmark-led + T4 stat strip (real numbers only)
* nav: N1b three-section · footer: Ft3 index (genuine hub for 5 docs sites) · hero: wordmark-led + T4 stat strip (real numbers only)
* enrichment: H9 original gradient mascot (Tier-B, kept) — the one character moment
* contrast: pass (40–41) · honest: pass (46 — stars live from GitHub, downloads live from npm or "—") · chrome: pass (47)
* tokens: pass (48) · responsive: pass (49)
Expand Down
30 changes: 30 additions & 0 deletions apps/website/public/logos/di-dark.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
34 changes: 34 additions & 0 deletions apps/website/public/logos/di-light.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
17 changes: 10 additions & 7 deletions design.md
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
# Design — btravstack · "Beetroot Stack" (studied DNA)

A locked design system for the btravstack org (landing + `@btravstack/theme` +
the four docs sites). Every page redesign reads this file before emitting code.
the five docs sites). Every page redesign reads this file before emitting code.
Do not regenerate per page — extend or amend this file when the system needs to
grow.

**The idea.** Studied from the user's stated inspiration. The org is a
*colorful stack of distinct tools* on a near-neutral black canvas: the
beetroot pink is the ORG accent (wordmark, links, CTAs, mascot), while each
package glows in **its own accent** — amqp orange, temporal indigo, unthrown
teal, entity amber. Weight-contrast typography (one grotesque at 400 vs
800), elevation through surface lightness, real numbers in the hero, and the
gradient beetroot mascot as the one character moment.
teal, entity amber, di blue. Weight-contrast typography (one grotesque at
400 vs 800), elevation through surface lightness, real numbers in the hero,
and the gradient beetroot mascot as the one character moment.

## Provenance

Expand All @@ -37,7 +37,7 @@ atmospheric (studied register — dark, quiet, confident; no blooms).
tokens — floating hero mark with a subtle halo, elevated feature cards,
the site's own package accent everywhere via the one-knob override.
- Nav: **N1b three-section** — wordmark · centered links · toggle + GitHub.
- Footer: **Ft3 index** — justified: the landing is a genuine hub for four
- Footer: **Ft3 index** — justified: the landing is a genuine hub for five
docs sites. Brand column + Docs column + GitHub column + MIT line. No
social row, no Legal filler.

Expand All @@ -56,6 +56,7 @@ atmospheric (studied register — dark, quiet, confident; no blooms).
| `--pkg-temporal` | `#6B76F2` | darken 30% at point of use |
| `--pkg-unthrown` | `#3FB0A5` | darken 30% at point of use |
| `--pkg-entity` | `#C8871F` | darken 30% at point of use |
| `--pkg-di` | `#3E7FD4` | darken 30% at point of use |

**The multi-accent rule (the studied signature).** The canvas and chrome are
near-neutral; color belongs to the *products*. Package names, category dots
Expand Down Expand Up @@ -106,8 +107,9 @@ color glow on package-panel hover only.
## Logos

The original soft gradient marks stay — mascot, rabbit, hourglass, no-throw,
shield, and the start liftoff beet. They read perfectly on the near-black
canvas and each sits inside its package-colored panel context. A package's
shield, the di syringe, and the start liftoff beet. They read perfectly on
the near-black canvas and each sits inside its package-colored panel context.
A package's
product mark is not a "character moment" — it's the logo of that panel, the
same way each docs site carries its own.

Expand Down Expand Up @@ -151,6 +153,7 @@ The canonical export lives at `packages/theme/src/tokens.css` (published as
--pkg-temporal: #6B76F2;
--pkg-unthrown: #3FB0A5;
--pkg-entity: #C8871F;
--pkg-di: #3E7FD4;
--font-display: "Geist", sans-serif; /* 800 for display */
--font-body: "Geist", sans-serif;
--font-mono: "JetBrains Mono", monospace;
Expand Down
1 change: 1 addition & 0 deletions packages/theme/src/tokens.css
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@
--pkg-temporal: #6B76F2; /* Temporal's indigo */
--pkg-unthrown: #3FB0A5; /* outside the signal register: not a signal, a value */
--pkg-entity: #C8871F; /* amber encases and preserves: sealed, immutable */
--pkg-di: #3E7FD4; /* blue is plumbing: the connections behind the wall */

/* ── Surfaces (DARK scheme — canonical: near-neutral black) ──── */
--bg: oklch(13% 0.006 310); /* ≈ #080709 — the canvas */
Expand Down