Loop — task dashboard

A recurring-task web dashboard. Dense rows, mono meta columns, overdue in danger red, one primary action. A generic demonstration of the system, not a recreation of any real product's actual screens.

Loop is not a real product — it is the system’s own reference layout for a dense, table-ish list screen: the shape a recurring-task tracker would take if it were rebuilt on this token set. Every visible value below is a component from this system, composed with real page-specific CSS (_sass/site/patterns.css) rather than inline styles — the same thing an actual project built on this system would write.

The New series dialog

After completing a task

What this screen is testing

• Dense rows next to a mono meta column. A recurring-task list is fundamentally tabular even though it never touches an actual <table>.
• Overdue in --gl-color-danger, everywhere at once. Row text, the complete-button border, and the trailing meta all pick it up from the same overdue state — color never drifts row to row.
• One primary action. New is the only accent-filled control on screen; everything else is neutral or bordered.
• Accent used exactly once, decoratively. The “km” avatar and the highlighted day both use --gl-color-accent-soft / -ink — never the raw accent fill outside of New.