Skip to content
Fundur
T2 · PatternDashboards & AnalyticsPublished 3 days ago

Deadline Grid

A single view of what's due, who owns it, and the deadlines the system generates for you.

Opens in
Figma, React, Tailwind
Screens
6
Components
14
Dark mode
Included
Accessibility
WCAG AA
A single view of what's due, who owns it, and the deadlines the system generates for you.

01 / 03

01The problem

A deadline view for teams whose deadlines are set by law rather than by them. It doesn't ask what's due — it works it out.

02The brief

A 40-person accounting practice was tracking statutory deadlines across three spreadsheets and a shared inbox. Nobody could answer the only question that mattered on a Monday morning — what is at risk this week — without twenty minutes of cross-referencing. Two penalties in one quarter made it urgent.

The existing tool wasn't missing features. It was missing a point of view about which of its four hundred rows a person should look at first.

Who it's forPractice managersAccountantsCompliance leads
ConstraintsHad to sit inside an existing Rails application with no component library, and be legible on a 13-inch laptop at 100% zoom.
03The approach

Rather than build another filterable table, treat the deadline itself as the object and the entity as its attribute. That inversion turns a search problem into a reading problem: the week is the frame, and everything inside it is already sorted by consequence.

Colour is used for exactly one thing — days remaining — and nothing else on the screen is allowed to compete with it.

Reference landscape

  • LinearRight about density, wrong about calendar time
  • Google CalendarRight about the week as a frame, no notion of risk
  • XeroCorrect domain, but every deadline is entered by hand
04The insight it turns on

Generate deadlines instead of tracking them.

Every statutory deadline is derivable from two facts the system already holds: the entity type and its year-end. Once you accept that, the entire data-entry surface disappears and the product stops being a tracker and starts being an assistant. It also removes the single largest source of error — a human typing a date.

05How it was made

Stage by stage

  1. 01

    Map landscape

    Eight tools reviewed, from compliance-specific software to general project managers. The compliance tools knew the dates and hid them; the project tools showed everything and knew nothing.

  2. 02

    Gap analysis

    The gap wasn't a feature. Every tool made the user the source of truth for dates that are, in fact, published by a regulator and completely predictable.

  3. 03

    Information architecture

    The week became the top-level frame, entity the second. Everything below that is a filter, and no filter is required to make the screen useful.

  4. 04

    Design system

    One colour ramp, mapped to days remaining. Six components carry the whole surface: row, badge, owner chip, week header, risk marker and empty state.

06The hard parts

What was difficult

Deadlines that move when a public holiday lands on them.

The generated date and the effective date are shown as one object with a quiet annotation, rather than two competing dates. The user sees the truth; the system carries the arithmetic.

A week with sixty items looked like a wall.

Rows collapse by entity above a threshold, with the highest-risk item promoted out of the group. Density stays honest without becoming unreadable.

07What's inside

Exactly what you get

  • Figma source
  • 6 screens
  • Light + dark
  • React + Tailwind
  • Interactive prototype
Version
1.0.0
Formats
Figma, React, Tailwind
Screens
6
Components
14
Dark mode
Yes
Prototype
Yes
Accessibility
AA
Figma
2026.2

Dependencies

  • Inter — SIL Open Font Licence — free to bundle, and it is
  • Lucide — ISC licence

Commercial fonts are never redistributed — they are named and linked, with a free equivalent substituted in the delivered files.

08What it changed

The Monday morning question went from twenty minutes of cross-referencing to a glance. Turned the app from a tracker into an assistant.

Part of a system

The Storefront System