These are the pieces you'll reach for when writing a brief, a case study, or a handoff doc. Titles, callouts, tables, quotes, code, badges, and buttons. Every one uses the hex tick as a visual anchor.
Section titles combine a kicker line, an optional mono date, the title itself, and a short deck. The hex tick sets the rhythm.
| Variant | Use for |
|---|---|
| Primary | The single most important CTA on a page |
| Ink | Secondary CTAs, internal navigation |
| Outline | Alternative action next to primary |
| Ghost | Cancel, dismiss, low-weight link-outs |
Use for supplementary context inside documentation.
For decisions that lock in constraints downstream.
For issues the reader needs to fix before continuing.
| Token | Value | Use |
|---|---|---|
| color.brand | #84C441 | Primary accent |
| color.ink | #17130E | Foreground · dark |
| color.white | #FFFFFF | Surface · light |
| radius.sm | 0px | Inline UI |
| radius.md | 0px | Cards, modals |
Fred is the default. The other four can step in for special slides — design system, build, recap. Click any cell to set the active bee in the top-right corner.
Click the active bee in the corner to fire a one-of-four silly line plus an animation unique to that personality. Wings keep fluttering and the gentle hover keeps drifting underneath — the click animation composes on top.
| Bee | Animation | Sample line |
|---|---|---|
| Fred (drone) | happy hop — double bounce with rotation | "graphs are my favorite shape." |
| The Queen (queen) | regal nod — slow forward bow, hold, return | "moats? i invented those." |
| Mabel (worker) | hammer — rapid 5× up-down (mechanical) | "more honey, less talk." |
| Greta (forager) | yawn — horizontal stretch, settle | "wake me when it ships." |
| Ada (architect) | tilt-think — rotate left, hold, swing right | "the leading is off here." |
Distinct from the click lines. Each bee has its own scripted line per "hot" slide. Fires once per (bee, slide) pair per session — switch bees and the new voice replays.
| Bee | Slide 0 intro |
|---|---|
| Fred | "hi! i'm fred, the master drone. buzzing along with you." |
| The Queen | "i am the queen. you may proceed." |
| Mabel | "name's mabel. i build the hive. let's get on." |
| Greta | "...mmh? i'm greta. nice deck." |
| Ada | "i'm ada. note the modular scale, by the way." |