Monochrome prototype components. Structure first, color later.
Hierarchy comes from weight, fill, border style and spacing. No hues.
Body, 15 on 1.55. Keep lines under 62 characters and write in plain sentence case.
Caption, 13, mutedUse fill instead of a border for secondary groups.
62% complete| Task | Owner | Status |
|---|---|---|
| Wireframe home | Faris | Done |
| Review copy | Team | In review |
| Build prototype | Faris | Not started |
This removes all files and can’t be undone.
Add your first task to start planning.
1. Tokens only. No hex values outside :root.
2. Emphasis by fill (solid ink), weight or dashed borders. Dashed means unfinished.
3. Hatched boxes stand in for images and media.
4. Sentence case, active verbs, same name for an action everywhere.
5. Keep dark mode working. Use var(--*) for every color.
6. Class names stay short but pronounceable: btn, card, field. Never single letters like f.
7. .bar is the progress bar (.bar track,
.bar i fill). Use .topbar/.appbar for application
header bars.