OpenELIS Global — Style Guide v1 Foundations is published

Community Development
1

Hi all —

The OpenELIS Global Style Guide — v1 Foundations is now published on Confluence. This is the shared baseline for visual and interaction design across every OpenELIS interface, derived from the shipped app and the DIGI-UW/OpenELIS-Global-2 repo (not from mockups). The aim is to reduce guesswork, cut back on regressions, and make it easier for distributed contributors to ship consistent UI without re-litigating decisions.

Read it here: https://uwdigi.atlassian.net/wiki/spaces/oeg/pages/621346838/OpenELIS+Global+Style+Guide+v1+Foundations

What v1 covers

  • Design system stack — Carbon Design System (@carbon/react v11, with Carbon v10 isolated as legacy), React 17, Formik + Yup
  • Brand tokens — the split-shell navy #295785 header/side-nav over a Carbon White content area
  • Typography — Carbon productive-type scale mapped to HTML heading levels, with IBM Plex Sans as the base
  • Color — Carbon semantic tokens for status/notification, the neutral scale in use, and the interaction tokens (clarifying that #0f62fe is the Carbon interaction color, not the OpenELIS brand)
  • Spacing, radius, elevation — Carbon 8px scale, sharp corners by default with two documented exceptions
  • Forms — Carbon inputs wired to Formik, validation message patterns (required / Please / Failed to)
  • Voice & tone — canonical terminology (sample, test, order, patient, provider, result), status vocabulary, message archetypes, sentence case for all buttons and headings, punctuation rules, and i18n key naming conventions — all derived from the 5,112 keys in frontend/src/languages/en.json
  • Notifications — inline, toast, tag patterns with semantic color mapping and placement rules
  • Accessibility floor — WCAG 2.1 AA targets
  • Known non-Carbon utilities — the slide-over and backdrop-blur helpers
  • Technical debt appendix — the drift found during the review, each item with a fix plan

Why v1 matters

Three things are pinned that were previously drifting across the app:

  1. Brand color. The header and side nav are navy #295785, not Carbon Blue. Rebranders only need to override two variables.
  2. Terminology. “Sample” is canonical for biological material everywhere except cytology/pathology (where “specimen” has defined clinical meaning per the Bethesda System).
  3. Button casing. Sentence case. Not Title Case. A lint rule and a cleanup PR will bring the existing 61 Title Case strings in line.

Credit

The original Style Guide page was authored by Taib in May 2025 and established the framing and Carbon adoption narrative. That content is carried forward in §1 and §2 of v1. What’s new in this version is the correction of factual drift against the shipped app (brand color, typography), the full voice & tone section derived from en.json, the notification patterns, and the technical debt appendix.

What’s next

  • v2 Patterns — data tables, workplan grids, referral queues, report shells, iconography catalog, data-viz conventions, and page-shell patterns. Scoping underway.
  • Cleanup PRs — title-case sweep, “specimen → sample” rename in barcode strings, Tailwind Gray → Carbon Gray migration on the dashboard h4, and the label.button.* → button.* consolidation.

How to give feedback

Reply here with comments or suggestions, or leave an inline comment on the Confluence page itself.

Thanks to everyone who’s been shipping OpenELIS frontend code over the past year. This guide is a snapshot of what you’ve built, not a prescription from outside.

— Casey

2 Likes