Appetiteshape up project management dashboard template
Appetite is a Next.js and Tailwind CSS shape up project management dashboard template for teams that run six-week cycles and decide what they will not build.



- 108 / 108
- light / dark tokens
- 2
- modes, both designed
- 1
- DOM, rendered twice
Eight routes cover the running cycle, the hill chart, a scope, the pitch queue, a shaped pitch, the betting table, workspace settings and a living component guide.
Two independently authored editions ship in one download.
- unlimited projects, client work included
- 12 months of updates
- 14 days, no questions
AGENTS.md and 4 skills ship in the zip, so your own agent keeps changing it after you buy.
docs — install, use, customizepages, composed from 19 sections
Every page is a real render from the publish gate, in the mode on show. Open any of them in the live preview.
Cycle/- app-shell
- bet-index
- attention-queue
- cycle-shape
Pitches/pitches- app-shell
- pitch-queue
- shaping-lane
Pitch/pitch- app-shell
- pitch-document
- pitch-decision
Betting table/betting-table- app-shell
- betting-table
Hill chart/cycle- app-shell
- hill-ridge
- appetite-burn
- circuit-breaker
- scope-ledger
Scope/scope- app-shell
- scope-hill
- scope-tasks
- scope-history
Settings/settings- app-shell
- cycle-settings
- team-settings
Components/components- app-shell
- ui
- overlay-gallery
- bet-index
- attention-queue
- +15
The signature is the hill track: one curve computed from the scope fixture, drawn full-bleed as the cycle ridge, inline in every scope row, and as a single marker on a card, so the drawing can never disagree with the table beside it. The theme carries the catalog's first reusable overlay layer, written without an overlay library: dialog, typed confirmation, popover, dropdown menu, tooltip, command palette, date picker and calendar, each with Escape to close, a focus trap on modal layers, focus returned to the trigger, and the aria state the trigger owes. Its primitive state layer ships from birth with label, description, invalid, read-only, disabled and submitting treatments over a dedicated --field-border token that clears 3:1 on every ground a field renders against in both modes. Working local behaviour covers search, removable filter chips, sorting with aria-sort, pagination, keyboard and pointer reorder with position announcements, a hill slider with the full arrow-key model, form validation with a focused error summary, an over-capacity block, a read-only observer projection, and two irreversible actions behind typed confirmations. The Tidemark fiction follows one product team through cycle 24: four bets, eleven scopes, forty-three tasks and a betting table for cycle 25, with every figure on every screen derived from one fixture spine. Actions are honest local previews; persistence, auth and real cycle data are buyer integration points. Light mode is a cool near-white console on white cards; dark mode is the same system on a Linear-style near-black. Familjen Grotesk, Geist and Geist Mono ship locally, every colour routes through 108 semantic tokens across two modes, both modes meet computed WCAG AA, and motion respects reduced-motion preferences. All eight routes also ship as a framework-free HTML edition, compiled to standalone documents with local fonts and vanilla JavaScript, with no build step between the download and a static host.
sections and primitives
You get the parts, not just the demo site. Every frame is a real capture from the theme's own styleguide page, and the source path under it is where the file lands in your project.
app-shell
src/components/app-shell.tsx
Product shell composed through the theme-local dashboard-layout boundary: the full-width cycle bar, a 232px labelled rail, responsive disclosure, breadcrumb, command bar, page heading and footer.
tokens, both modes
Change one variable and every part follows. Each badge is one token split down the middle: its light value on the left, its dark value on the right, with the theme's own paired ink on both halves.
hover or tab a badge for its name and both values, enter copies
The hill track: one curve computed from the scope fixture, full-bleed as the cycle ridge, inline in every scope row and as a single marker on every card
every token
typefaces, self-hosted
Real woff2 files in src/fonts/, wired through next/font and licensed under OFL. Nothing is fetched from Google at build time, so the zip renders these letterforms offline. Scale ratio 1.25.
Appetite
Appetite is a Next.js and Tailwind CSS shape up project management dashboard template for teams that run six-week cycles and decide what they will not build. Eight routes cover the running cycle, the hill chart, a scope, the pitch queue, a shaped pitch, the betting table, workspace settings and a living component guide.
const { open, close } = useLedger("2026-03") // 0123456789
- display
- Familjen Grotesk
- text
- Geist
- mono
- Geist Mono
- captionAg
- smallAg
- bodyAg
- leadAg
- d1Ag
- d2Ag
- d3Ag
- d4Ag
every width is a real render from the publish gate
Four viewports, each one a render the gate produced and checked. Switch between them: the frame narrows exactly as a window does, because that is what it is.

every token and every part on one page
The styleguide route is not documentation about the theme. It is a page in the zip that renders the real components from the real tokens, so it stays true the day you change one.
files in the zip
Two independently authored editions: React for applications, plus ready HTML, CSS and vanilla JavaScript for static hosts.
- AGENTS.mdthe theme's own rules, written for an agent
- .claude/skills/4 skills, each one job
- add-page/SKILL.mdCompose a new Appetite route from existing sections, with the shell, the opener rule and the one-oversized-moment rule.
- add-section/SKILL.mdGraft a new section into Appetite following the theme's own patterns
- check-quality/SKILL.mdRun Appetite's own gate
- rebrand/SKILL.mdApply a buyer's brand to Appetite by editing the token table only, with the contrast arithmetic the theme was gated on.
- src/
- theme.css108 tokens, light and dark
- fonts.tsthe faces, wired to the type tokens
- app/8 files
- components/12 files
- ui/19 files
- fonts/3 font files, 3 licences
- app/8 routes, plus layout.tsx and globals.css
- theme.jsonthe manifest: tokens, components, pages
- README.mdquickstart
- 6 project filespackage.json · tsconfig.json · next.config.ts · postcss.config.mjs · env.d.ts · .gitignore
skills your agent can run
Your agent reads AGENTS.md before it edits, then runs the skill that fits the change. The skills are the theme's own, and the publish gate makes an agent complete every one of them in a scratch copy before the theme goes live.
36 components, 8 pages and 108 tokens, as a Next.js project.
AGENTS.md carries the design spec. Each skill is one job written against it.
Claude Code, Codex, or any agent that reads AGENTS.md. It runs on your machine, on your own account.
Built from the theme's own sections, on the same tokens and the same rhythm.
The source is yours to run, edit and deploy.
The spec ships inside the folder, so the page your agent adds next month is built by the same rules as the ten it came with. Nothing calls back here.
What the standard licence coversactivity
- v1.0 — eight-route Shape Up cycle console: the hill track, the betting table, a shaped pitch and the catalog's first reusable overlay layer
- separate Nunjucks source and framework-free HTML output for every routeplanned
- a cooldown route once buyer demand names oneplanned
for agents
This listing is also a markdown document and a JSON endpoint. The theme's own agent kit is on the kit and agents plates above.



