Built by opsinjs, not an entry
A diabetes medicines app, built only from opsinjs
One page, four destinations, thirty-five components. It records the medicines somebody takes and reminds them at times they chose. It calculates no dose, changes no dose, and says nothing about what to do about a dose they did not take.
This is not a showcase entry and it is not trying to be one. Nobody uses it, no team ships it, and every medicine, dose and time in it is invented. It is here because a design system that has never assembled its own parts into a product has not finished arguing its case. The bar a real entry has to clear is published on the showcase and this clears none of it.
What it is
A free, browser-only medicines diary for somebody who takes several medicines for diabetes. It keeps a list they typed in, it reminds them at times they set themselves, it records what they say they took, and it hands that record back in a form they can take to an appointment. There is no account, no sign-in, no server and no network call.
What it refuses, and why that is the design
The refusals are the interesting part. Software that works out an insulin dose from the carbohydrate in a meal is the worked example the UK regulator uses for a medical device, and a disclaimer does not exempt an app that qualifies as one. So the refusals are in the code rather than in a paragraph: there is no dose arithmetic anywhere, no strength picker, no prefilled dose, no interaction checking, no threshold the app owns, and no answer to “what do I do about a dose I missed” beyond naming the people who can give one.
It also never marks a dose as missed. It cannot know. A dose reaches that state only when the person presses a control that says “I did not take it”, and a dose nobody has answered for stays unanswered however long ago it was due. No clock moves it.
What it shows about the system
The headline finding is a refusal too: the app carries neither colour axis. A medicines record states no clinical level and names no category, so nothing in it is tinted from either ramp and every state is told in a word and a shape. That is not the kit falling short. It is what obeying the two-axes rule looks like when a product genuinely has no business on either.
Building it also found two defects that no single-component preview would ever show. A popup control placed inside a sheet renders its list behind the sheet and cannot be pressed, and the tab bar pushes the page sideways at the largest text size. Both are measured in a browser rather than argued from the source, and both are written down rather than quietly worked around.
The specimen page under Screens carries the rest: the composition tree, the safety notes, the accessibility contract, and the ten questions that stayed open.
What it composes
35 of the 60 components on the roster, in one file.
- accordion
- badge
- button
- callout
- card
- care-card
- checkbox
- combobox
- consent-sheet
- dialog
- disclaimer-note
- divider
- dose-tracker
- empty-state
- field
- icon-button
- link
- log-sheet
- menu
- number-field
- radio-group
- relative-time
- segmented-control
- select
- sheet
- source-citation
- stepper
- surface
- switch
- tab-bar
- term
- textarea
- timeline-entry
- value
- visually-hidden
What it leaves out, and why
A showcase that reached for every component would be a showcase arguing for decoration. Each of these was considered and declined.
| Component | Why not |
|---|---|
status-pill | A medicines record states no clinical level, so there is no status for a pill to carry. |
alert-banner | It takes a clinical status. Supply running low is a fact about a pack, not a level of urgency. |
metric-tile | It draws a measurement with a unit and a measurement time. A count of logged doses is neither. |
goal-ring | A ring filling towards a goal turns a medicines record into a score somebody can lose. |
progress | The same objection, drawn as a bar. |
trend-sparkline | A line through dose events asserts a direction, and a direction about somebody's medicines is an interpretation. |
toast | A confirmation that leaves on a timer takes the undo with it, and this audience reads slowly. |
tooltip | Hover is unavailable on touch, and nothing here is safe to hide behind it. |
Before you copy anything out of it
It has had no clinical review
No clinical safety officer, no hazard log, no clinical safety case, no data protection impact assessment. None of those is claimed and none has happened. The refusals are the part worth copying; the assembly is a proposal.
Every figure in it is invented
The medicines are called “Morning tablet” and “Bedtime pen”. No real drug, no real strength, no real schedule, and the clock is fixed so the app says the same thing every time it is built.
The components are audited, not independently reviewed
The API may change in any release with no deprecation cycle. Every component has been audited against WCAG 2.2 AA by its authors, in a static source pass and a rendered pass, so what shipped is not an independent accessibility review and no clinical review has happened yet. It is not ready for a production health surface, and neither is this.
Nothing is stored
What you type into the frame stays in the page and is gone on reload. A demonstration that left a medicines list behind in a shared browser would be the one hazard a mock can genuinely cause.
The app, running
Rendered under the opsinjs product theme, in a frame at phone width. The controls work.
Open it in its own tab at /view/base/base-lyra/screen/diabetes-medicines-app