Internal reference
Design system
The visual language behind BeetleStack: quiet typography, precise grid lines, editorial rhythm, and useful motion.
Live components, tokens, and interaction states.
01 / Foundation
Tokens
Color and spacing decisions stay deliberately small so pages feel related without becoming repetitive.
Grid
1px shared borders
Radius
Mostly square
Motion
Short, quiet transitions
02 / Type
Typography
Display / Playfair
Make the signal visible.
Body / Geist
Clear writing and generous line-height keep dense product thinking easy to scan. Labels stay small and tracked; headlines carry the personality.
03 / Composition
Layout
The site uses a 12-column frame, nested content widths, and shared border utilities to keep every page aligned.
In this article
04 / Components
Live components
These are not screenshots. They are the same Astro components rendered by the live pages.
Waitlists
Building hype and capturing demand before you even launch.
Onboarding
Turning new signups into active, retained users.
Forms
Designing forms that users actually want to fill out.
Changelogs
Sharing product updates that keep users engaged.
User feedback
Collecting useful feedback without overwhelming users or your team.
Roadmaps
Communicating direction clearly without turning plans into promises.
Feature requests
Turning a noisy request inbox into clear evidence for product decisions.
Surveys
Asking better questions and getting responses you can actually use.
User engagement
Designing product loops that give users reasons to keep coming back.
Retention
Understanding what makes a product valuable over time.
Feature request management: turning ideas into decisions.
A practical system for collecting, organizing, prioritizing, and responding to the feature requests your users actually care about.
Abstract art variants
hero
featured
post
guide3
05 / Interaction
States and actions
Share grid
Scenario
New writing
Get the next article.
A short email when something new is published. No newsletter machinery, no noise.