Repository navigation
feat(app): monochrome design system drawn from the product mark - #122
Open
shroominic wants to merge 2 commits into
Open
shroominic wants to merge 2 commits into
shroominic wants to merge 2 commits into
Conversation
The interface carried roughly 200 literal colour values spread across every widget, and it used hue to say whether a reading was in range. Glucose is read quickly, often outdoors and sometimes on a dimmed or greyscale screen, so hue alone is a fragile carrier for that state. Add openhealth/lib/src/theme/og_theme.dart as the single source of colour, radius, and component shape: one ink, one paper, and a four-step grey ramp taken from the product mark. Feature code now references tokens and declares no literal colours. Carry state with contrast, weight, and shape instead. The mark's cutout square becomes the one status glyph, filled when a reading is live, in range, or improved and hollow when it needs attention. Demo and sample banners invert to ink. The chart draws an ink trace over a grey target band with solid in-range dots and hollow out-of-range rings, so range survives a greyscale screen. Presentation only. Sensor behaviour, pairing, stored readings, exports, Health integration, and privacy controls are unchanged. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Add ADR 0005 for a cross-cutting visual choice: one token set, and glucose state carried by contrast, weight, and shape so it survives a greyscale or dimmed screen. Record the alternatives, including keeping colour for range state, and the review controls the decision needs. Capture the six reviewed surfaces in docs/design/monochrome. They come from the deterministic demo driver, so the readings are simulated and no sensor or health data appears. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This was referenced Sep 17, 2026
This branch has not been deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
openhealth/lib/src/theme/og_theme.dartas the single source of colour, radius, and component shapePresentation only. Sensor behaviour, Bluetooth pairing, stored readings, exports, Health integration, and privacy controls are unchanged.
Why
The interface had grown teal, cream, amber, and coral accents that each screen redefined locally, so one visual change had to be repeated in every widget and drifted between surfaces.
The palette also carried meaning. A reading was in range because it was teal and out of range because it was amber or coral. People read glucose quickly, often outdoors, sometimes on a dimmed or greyscale screen, and about one in twelve men has a colour-vision difference. Hue alone is a fragile carrier for that state.
Design
One ink (
#0A0A0A), one paper (#FFFFFF), and a four-step grey ramp, taken from the app mark: a black disc with a white rounded-square cutout.The chart follows the same rule: an ink trace over a grey target band, with solid in-range dots and hollow out-of-range rings.
Screenshots
Captured from the deterministic demo driver in a release web build at a 430x932 viewport. The readings are simulated and no sensor or health data appears.
Verification
make checkfrom a clean worktree, through the pre-push hookTwo presentation defects found while reviewing the screenshots are also fixed here: the large Settings title rendered at body size, and the settings section labels were centred by a
Columndefault.Scope and exclusions
Risk
R1 UI change. It touches accessibility by removing hue as the sole carrier of range state, so raise it to R2 if you want dedicated contrast tests before merge.
🤖 Generated with Claude Code