Skip to content

Beetroot Soft rebrand — theme and landing (v2)#28

Closed
btravers wants to merge 1 commit into
mainfrom
design/beetroot-soft
Closed

Beetroot Soft rebrand — theme and landing (v2)#28
btravers wants to merge 1 commit into
mainfrom
design/beetroot-soft

Conversation

@btravers

Copy link
Copy Markdown
Contributor

What

The v2 rebrand — "Beetroot Soft": software can be soft and exact at once. The beetroot is a charming character, not a print mark. This replaces the rejected Beetroot Riso direction (#27) — the brutalist tone and flat riso logos are gone.

@btravstack/theme (minor, changeset included)

  • Light warm near-white paper is now canonical (oklch(97.5% 0.008 353)); dark stays the soft plum the brand grew up on, on .dark.
  • Typography: Plus Jakarta Sans (display) + Geist (body) + JetBrains Mono (code) replace Montserrat.
  • Shape language: 12px card corners, pill buttons, soft accent-tinted shadows, hairline rules, hover-lifts. Solid ink hero name (no gradient text); the gently floating hero mark stays as the one character moment per page.
  • Non-breaking: all semantic tokens keep their names; docs sites still rebrand with the single --accent override.

Landing

Rebuilt as a Bento mosaic: compact centered hero (mascot + one-line headline + pill CTAs), then one friendly grid of mixed-span tiles — intro, three numbered principles, the four packages (live star counts, copyable installs, docs/repo links), a tinted "why now" cluster, four inspiration tiles, and a full-width CTA tile. Footer is a gently scrolling marquee (paused on hover, static under reduced-motion) with a compact meta/link row. All copy preserved verbatim.

Logos

Unchanged — the original soft gradient marks are kept as-is; the flat riso redraw is abandoned with #27.

Also new

  • design.md — the locked design system future pages read first.

Verification

  • pnpm turbo run build --force green (theme + website).
  • Both schemes screenshot-verified; contrast checked (WCAG AA text, 3:1 large/rings) in light and dark.
  • No horizontal overflow at 320 / 375 / 414 / 768 px (measured via DOM scrollWidth).

Housekeeping

  • Supersedes Beetroot Riso rebrand — theme, landing, and logos #27 (Beetroot Riso) — close that one if this direction is approved.
  • Based on design/landing-tweaks, so it also carries 8a8f0f1 (section reorder, drop 'betterave').
  • Follow-ups: og-btravstack.png re-export; rolling the theme bump into the four sibling docs repos after publish.

Soft and exact at once: the beetroot as a charming character, warm
near-white paper (dark plum via toggle), 12px corners, pill CTAs, soft
accent-tinted shadows, and hover-lifts. Replaces the rejected Beetroot
Riso brutalist direction (PR #27).

- theme: light-canonical scheme (plum dark on .dark), Plus Jakarta Sans
  + Geist + JetBrains Mono replace Montserrat, rounded shape language,
  solid ink hero name, floating hero mark kept as the one character
  moment. Semantic token API and the one-knob --accent contract are
  unchanged (minor bump, changeset included).
- landing: Bento Grid — compact centered mascot hero, then one mosaic
  of mixed-span tiles (intro, principles, packages with live stars and
  copyable installs, "why now" cluster, inspirations, CTA tile), and a
  marquee footer with a compact meta row. All copy preserved.
- logos: the original soft gradient marks stay untouched (the flat riso
  redraw is abandoned with #27).
- design.md: the locked design system for future pages.
Copilot AI review requested due to automatic review settings July 15, 2026 23:17

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Updates the @btravstack/theme token set and the website landing page to implement the “Beetroot Soft” v2 rebrand, while adding a canonical design.md design-system reference and a theme changeset.

Changes:

  • Reworks theme tokens to make light the canonical scheme (OKLCH paper), updates typography to Plus Jakarta Sans + Geist + JetBrains Mono, and adjusts radii/shadows/motion primitives.
  • Refines VitePress variable mapping and shared chrome styles (hero name treatment, hover lifts, focus ring, logo sizing).
  • Rebuilds the website landing into a bento mosaic layout with updated nav/footer structure.

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 7 comments.

Show a summary per file
File Description
packages/theme/src/tokens.css Switches canonical scheme to light, updates palette semantics, typography tokens, radii, shadows, focus token, and dark overrides.
packages/theme/src/style.css Updates VitePress token mapping + shared chrome styling (hero, buttons, cards, focus-visible).
packages/theme/src/fonts.css Updates Google Fonts imports to the new “Beetroot Soft” font pairing.
design.md Adds a locked, canonical design system reference for future pages/exports.
apps/website/.vitepress/theme/Landing.vue Rebuilds landing page into bento tile layout with new nav/footer and updated component styling.
.hallmark/log.json Adds hallmark log entries capturing the new rebrand direction (and the superseded rejected one).
.changeset/beetroot-soft-rebrand.md Adds a minor changeset for @btravstack/theme describing the rebrand/token changes.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

GitHub
</a>
</nav>
<a href="https://github.com/btravstack" target="_blank" rel="noopener" class="btv-cta btv-cta--nav">GitHub</a>
<p class="btv-sub">A small stack of type-safe building blocks for Node, built on two convictions: a signature should be enough to understand a system, and the fastest error is the best one. Declare the contract once — types, validation and feedback flow everywhere.</p>
<div class="btv-cta-row">
<a href="#packages" class="btv-cta">Explore the packages</a>
<a href="https://github.com/btravstack" target="_blank" rel="noopener" class="btv-cta btv-cta--ghost">View on GitHub <span aria-hidden="true">↗</span></a>
Comment on lines +193 to +194
<a :href="p.docs" target="_blank" rel="noopener" class="btv-link">Docs <span aria-hidden="true">↗</span></a>
<a :href="p.repo" target="_blank" rel="noopener" class="btv-link btv-link--quiet">Repo <span aria-hidden="true">↗</span></a>
<h2 class="btv-h2 btv-h2-sm">Standing on good shoulders.</h2>
<p class="btv-lead-p">btravstack borrows its instincts from the libraries that made TypeScript feel this way in the first place.</p>
</div>
<a v-for="(z, i) in inspirations" :key="z.name" :href="z.href" target="_blank" rel="noopener" class="tile tile-insp" :class="i < 2 ? 'sp2' : 'sp3'">
<div class="tile sp6 tile-cta">
<h2 class="btv-h2">Build backends you can trust the types of.</h2>
<p class="btv-lead-p btv-cta-p">Star the projects, open an issue, or just read the docs. Everything is MIT-licensed and built in the open.</p>
<a href="https://github.com/btravstack" target="_blank" rel="noopener" class="btv-cta">View on GitHub <span aria-hidden="true">↗</span></a>
<span class="btv-word btv-foot-word"><span class="btv-pink">btrav</span><span>stack</span></span>
</div>
<nav class="btv-foot-links" aria-label="Documentation">
<a v-for="p in projects" :key="p.name" :href="p.docs" target="_blank" rel="noopener" class="btv-link btv-link--quiet">{{ p.name }}</a>
<nav class="btv-foot-links" aria-label="Documentation">
<a v-for="p in projects" :key="p.name" :href="p.docs" target="_blank" rel="noopener" class="btv-link btv-link--quiet">{{ p.name }}</a>
</nav>
<p class="btv-foot-legal">MIT © 2026 <a href="https://github.com/btravers" target="_blank" rel="noopener" class="btv-link btv-link--quiet">Benoit Travers</a></p>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants