UI patterns collected from lab.aisu.studio, fontane.studio (live), AisuStudio/FullerHome, and AisuStudio/spiritsprint (real repos) — sorted by component, translated into waffle tokens. This was the shortlist for a proper components.css — that now exists, see components.html for the real, shippable classes. This page stays as the source record of where each pattern came from.
The examples below are re-styled copies (.ex-* classes), kept for provenance. The real, shippable version of these patterns is components.html's components.css — use that in a project, not this page's markup.
Added after reviewing the real repos (AisuStudio/FullerHome, AisuStudio/spiritsprint, not just the local design file). The most valuable find isn't a new component — it's three problems those repos already solved that waffle doesn't have yet.
lab.aisu.studio and spiritsprint both use the same utility-class layer from github.com/AisuStudio/aisukurimu: .nav-item, .tag, .eyebrow, .link-big, .caption, .h1-vanilla, .container, .hr — exactly the type/nav building blocks rebuilt from the DOM below.
→ Instead of reinventing patterns: pull aisukurimu-tokens.css into waffle (or build waffle on top of it).
FullerHome's globals.css has the same token set as waffle, but with a comment: --color-muted: #66655f instead of hazelnut #9e9c95 — "#93928e on vanilla is only 2.6:1 contrast, darkened to ≥4.5:1". That's a real accessibility fix, not a taste difference.
✓ Done — --color-muted: #66655f is already in waffle's tokens.css.
FullerHome and spiritsprint both consistently use accent-bg + on-accent-text as the signal for "active/selected/highlighted" (tabs, toggles, badges, chips, totals). Waffle has --color-accent, but no defined counterpart.
✓ Done — --color-on-accent: var(--color-blueberry) is already in waffle's tokens.css.
A full set — --bg/--surface/--surface-2/--ink/--muted/--accent/--highlight/--border — defined twice: via prefers-color-scheme and a [data-theme] override. In dark mode, --accent becomes a lighter violet (#b298ff), not grape 1:1 — otherwise too dark on a dark background.
✓ Done — waffle's tokens.css now ships this exact pattern (see index.html's Dark mode section).
Media card with a dark overlay body (lab), plain border card with no image (fullerhome), numbered step card for explaining processes (fullerhome takt). All three are useful for different purposes — not a conflict, more of a set.
Special-structure classification varies by dome shape and federal state.
Comes entirely from fontane.studio — the only one of the three sites with a real editor/form flow (character-set picker, slider settings, mode tabs).
Before you start drawing, pick which sets belong in this grid.
StartAll three come from fullerhome — the only site with cost/time data. Useful once CNSL ever needs reports, progress indicators, or timelines (e.g. Scheduler, backlog analysis).
Week 1
Week 6
The actual Next.js app (not the static design file) runs its own consistent language: translucent white cards (rgba(255,255,255,.6-.78)) with a 1px border + 10-14px radius, and buttons as soft pills (16-24px radius) instead of the sharp-edged 2px buttons from the old design template. Consistent throughout: accent-bg + on-accent-text = "selected".
Both repos solve "label/value rows" the same way: flex space-between + a hairline bottom border, with the last/total row highlighted. spiritsprint also has a real <table> for comparison data (measures).
| Measure | Effort | Impact |
|---|---|---|
| Pull Planning | low | high |
| Takt Plan | medium | high |
No more landing-page material — real tool UI: sidebar navigation, a 2-axis plot, a kanban-style board with voting, a roadmap timeline, a branded export card. Bigger building blocks, not atoms — more a reference for "how do you build this" if CNSL ever needs a multi-step wizard or a board.
From fontane's first-time-UX pass (2026-07-30): the settings panel no longer opens everything at once, and a new user gets a guided tour instead of a wall of jargon before the first click.