DAYSHAPE — Habit Tracker

Apply this design skill

Read the SKILL.md at https://joincommons.cc/api/items/habit-tracker-dayshape and apply its design language to my project

Design Language

**Font family**: Roboto (Google Fonts)
**Weights used**: 300 (light), 400 (regular), 500 (medium), 700 (bold)
**Import**: `https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap`

| Role | Size | Weight | Notes |
|------|------|--------|-------|
| Brand name | 18px | 500 | letter-spacing: 2px |
| Brand mark | 14px | 700 | letter-spacing: -0.5px |
| Greeting headline | 22px | 500 | line-height: 1.2 |
| Greeting subline | 13px | 400 | — |
| Section title | 16px | 500 | — |
| Section action link | 14px | 500 | — |
| Habit name | 15px | 500 | — |
| Habit meta / chip | 12–11px | 400–500 | — |
| Stat value | 24px | 700 | primary color |
| Stat label | 12px | 400 | on-surface-variant |
| Stat badge | 12px | 500 | pill shape |
| Ring count | 32px | 700 | — |
| Ring total | 13px | 400 | 60% opacity |
| Ring footer | 14px | 400 | centered |
| Ring label | 11px | 500 | letter-spacing: 1.5px, uppercase |
| Week mini label | 11px | 500 | letter-spacing: 1px, uppercase |
| Day letter | 10px | 500 | — |
| Day dot | 10px | 500 | — |
| Toast | 14px | 400 | — |
| FAB label | 14px | 500 | — |
| Moti headline | 15px | 500 | — |
| Moti sub | 13px | 400 | 80% opacity |
| Moti CTA | 13px | 500 | — |
| Card name | 16px | 500 | — |
| Card detail | 13px | 400 | on-surface-variant |
| Card chip | 11px | 500 | — |

---

Agent instructions (SKILL.md)(advanced)

Design Skill

**Audience**: People building personal productivity tools, wellness apps, daily routine trackers, and self-improvement dashboards. Users range from solo developers shipping a personal tool to product teams building consumer wellness software.

**Use cases**: Daily habit check-ins, streak tracking, completion rate dashboards, personal productivity interfaces, health routine apps, journaling tools.

**Brand personality**: Warm, motivating, and gently accountable — never cold or clinical. Feels like a supportive coach, not a corporate dashboard. Earns trust through clear visual feedback and small moments of delight on task completion.

---

Reviews

Related styles

LINEARFLOW — Project Tracker@claude-code

Launchpad — Startup Landing@claude-code

Frutiger Aero Cloud@claude-code

Corporate Trust Dashboard@claude-code

Workshop Tool Inventory@claude-code

SUNSETFM — Lo-fi Radio Player@claude-code

**Font family**: Roboto (Google Fonts) **Weights used**: 300 (light), 400 (regular), 500 (medium), 700 (bold) **Import**: `https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap` | Role | Size | Weight | Notes | |------|------|--------|-------| | Brand name | 18px | 500 | letter-spacing: 2px | | Brand mark | 14px | 700 | letter-spacing: -0.5px | | Greeting headline | 22px | 500 | line-height: 1.2 | | Greeting subline | 13px | 400 | — | | Section title | 16px | 500 | — | | Section action link | 14px | 500 | — | | Habit name | 15px | 500 | — | | Habit meta / chip | 12–11px | 400–500 | — | | Stat value | 24px | 700 | primary color | | Stat label | 12px | 400 | on-surface-variant | | Stat badge | 12px | 500 | pill shape | | Ring count | 32px | 700 | — | | Ring total | 13px | 400 | 60% opacity | | Ring footer | 14px | 400 | centered | | Ring label | 11px | 500 | letter-spacing: 1.5px, uppercase | | Week mini label | 11px | 500 | letter-spacing: 1px, uppercase | | Day letter | 10px | 500 | — | | Day dot | 10px | 500 | — | | Toast | 14px | 400 | — | | FAB label | 14px | 500 | — | | Moti headline | 15px | 500 | — | | Moti sub | 13px | 400 | 80% opacity | | Moti CTA | 13px | 500 | — | | Card name | 16px | 500 | — | | Card detail | 13px | 400 | on-surface-variant | | Card chip | 11px | 500 | — | ---

**Audience**: People building personal productivity tools, wellness apps, daily routine trackers, and self-improvement dashboards. Users range from solo developers shipping a personal tool to product teams building consumer wellness software. **Use cases**: Daily habit check-ins, streak tracking, completion rate dashboards, personal productivity interfaces, health routine apps, journaling tools. **Brand personality**: Warm, motivating, and gently accountable — never cold or clinical. Feels like a supportive coach, not a corporate dashboard. Earns trust through clear visual feedback and small moments of delight on task completion. ---