Beetroot Stack — studied from tanstack.com (v5)#30
Merged
Conversation
The original identity, elevated: deep plum canvas built for the dark, two ambient beetroot blooms (fixed, accent-derived), weighty Geist display, elevation through lightness instead of borders, warm glow on hover, and the gradient mascot floating as the one character moment. Exploration branch — sibling of the approved Beetroot Atlas (#29). - theme: dark-canonical plum scheme refined (light stays the daylight fallback), Geist + JetBrains Mono replace Montserrat, bloom tokens, glow shadows, no gradient text. Semantic token API and the one-knob --accent contract unchanged (minor bump, changeset included). - landing: Marquee Hero — the fold is the canvas (mascot + statement + scroll cue), then intro + pill CTAs, elevated package panels, quiet numbered columns, bloom-lit "why now" cluster, inspiration cards, statement footer. All copy preserved. - logos: original gradient marks kept — they were drawn for this canvas. - design.md: the locked design system for this candidate.
There was a problem hiding this comment.
Pull request overview
Exploration-branch rebrand candidate “Beetroot Nocturne” that updates @btravstack/theme tokens + VitePress chrome mapping and rebuilds the website landing into a Marquee Hero layout, with the design system documented in a new locked design.md.
Changes:
- Refresh theme tokens (dark-canonical OKLCH surfaces, Geist typography, bloom/glow + focus tokens).
- Update VitePress mapping/chrome styles to match the new nocturne look (hero, nav, features, focus).
- Rebuild the landing page structure + styling (floating pill nav, marquee fold, elevated package panels, new footer), and add design/changeset metadata.
Reviewed changes
Copilot reviewed 7 out of 7 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/theme/src/tokens.css | Updates canonical design tokens for the Nocturne theme (colors, typography, motion, shadows, blooms). |
| packages/theme/src/style.css | Adjusts VitePress --vp-* mappings and shared chrome styling to match Nocturne. |
| packages/theme/src/fonts.css | Switches webfont import from Montserrat to Geist (plus JetBrains Mono). |
| design.md | Adds the locked “Beetroot Nocturne” design system reference for future redesigns. |
| apps/website/.vitepress/theme/Landing.vue | Rebuilds the landing into a Marquee Hero layout and restyles sections/CTAs/footer. |
| .hallmark/log.json | Adds hallmark design log entries for Nocturne (and prior candidates). |
| .changeset/beetroot-nocturne-rebrand.md | Publishes the theme update as a minor changeset with a summary of the rebrand. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
…tack.com (v5) The user's stated inspiration. Studied DNA: a near-neutral black canvas where each package glows in ITS OWN accent — the org reads as a colorful stack of distinct tools, not a monochrome brand. Beetroot pink stays the org accent (wordmark, links, CTAs, mascot); amqp orange / temporal indigo / unthrown green / demesne violet carry the packages. - theme: near-black canonical canvas, Geist weight-contrast typography (400 body vs 800 display), new --pkg-* accent tokens, elevation through lightness, no blooms/glow washes. One-knob --accent contract unchanged (minor bump, changeset included). - landing: Ecosystem Index — wordmark-led hero + mascot + a REAL-stats strip (live GitHub stars + live npm downloads, "—" until fetched), per-package-colored stack panels with color-matched hover glows, philosophy/why-now panels, index footer (genuine hub for 4 docs sites). All copy preserved. - logos: original gradient marks kept. - design.md: locked studied-DNA system with provenance block.
btravers
changed the title
Logo review against the studied DNA found the one contradiction: all four package marks were cream-on-dark / beetroot-magenta-on-light, so an orange 'amqp-contract' heading sat next to a cream rabbit. Per the multi-accent rule, each mark's container now wears its package color (amqp orange, temporal indigo, unthrown green, demesne violet — light variants darkened ~25% for contrast on white) while the beetroot content inside every mark stays beetroot. Mascot and favicon unchanged (org = beetroot).
Full logo redesign (not just recoloring): the marks are now characters.
- Mascot v2: chubby waving chibi beet — springy leaves, face, cheeks,
curly tail — used in the hero, nav, footer and favicon.
- amqp: cheeky rabbit with a flopped ear, buck teeth and a nibbled leaf.
- temporal: tumbling hourglass with a happy beet catching the beet-sand.
- unthrown: relieved beet, arms up, safe inside the no-throw ring.
- demesne: beet peeking kilroy-style over a flat-rim shield.
Each mark keeps its package accent (container) with the beetroot
character inside (org thread). Verified at 104px and 30px, both schemes.
Brand casing: BtravStack (mirrors the TanStack pattern; identifiers
stay lowercase) across wordmarks, hero and site metadata.
Copy: the stack section lead now sells the packages ("Messaging,
workflows, errors and wiring — four focused packages that compose into
one coherent backend") instead of describing the page's own design.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
"Beetroot Stack" — built from the DNA of the user's stated inspiration, tanstack.com (studied via
hallmark study, URL + screenshot). The insight: TanStack presents an org as a colorful stack of distinct tools on a near-neutral black canvas. btravstack has the same shape — four packages that already own official accents (amqp orange, temporal indigo, unthrown green, demesne violet) — so this candidate stops painting everything beetroot-pink and lets each package glow in its own color. The beetroot stays as the org accent and the mascot.@btravstack/theme(minor, changeset included)oklch(13% 0.006 310)) canonical; light stays the daylight fallback.--pkg-*tokens expose the per-package accents for multi-accent contexts; the one-knob--accentcontract is unchanged (each docs site's single override IS the studied per-library accent system).Landing
Ecosystem Index: wordmark-led hero (
btravstackat 800 weight, beetroot "btrav") + floating mascot + a real-stats strip — live GitHub stars + live npm monthly downloads (renders—until fetched; no invented numbers, ever). Then the stack as per-package-colored elevated panels (color-matched hover glows), philosophy and "why now" panels, inspirations, closing CTA, and an index footer (justified: this page is a genuine hub for four docs sites). All copy preserved verbatim.Logos
Unchanged — the original gradient marks read perfectly on the near-black canvas.
Provenance
DNA extracted from a public reference for the user's own brand; structural only (macrostructure, multi-accent model, type roles, stats-hero). No TanStack copy, artwork, or exact hues were reproduced.
design.mdcarries a provenance block.Verification
pnpm turbo run build --forcegreen; both schemes screenshot-verified; contrast AA (per-package colors darken 30% on light).scrollWidth).Housekeeping