Design System & Theming
Relevant source files
The following files were used as context for generating this wiki page:
The Design System and Theming for the OpenMRS OPD Intake project focus on creating a "Minimal & Functional" interface tailored for healthcare workers in high-volume public hospitals. The system prioritizes efficiency, scannability, and clarity, utilizing a "calm efficiency" approach to reduce cognitive load during fast-paced clinical workflows. It is built upon the OpenMRS 3.0 (O3) design patterns while introducing specific aesthetic directions and technical stacks to meet localized requirements.
Sources: CLAUDE.md:6-14
Core Design Principles
The design architecture is guided by five primary principles aimed at optimizing the user experience for doctors and nurses:
- Speed First: Minimizing clicks and using progressive disclosure to ensure scannability.
- Clarity Over Style: Ensuring every visual element serves a clinical function without unnecessary decoration.
- Consistent Patterns: Reusing established O3 components to maintain a predictable visual vocabulary.
- Accessible by Default: Maintaining WCAG compliance and high-contrast text for diverse environments.
- Calm Efficiency: Reducing cognitive load through uncluttered, professional layouts.
Sources: CLAUDE.md:21-27
Aesthetic Direction & Palette
The visual identity combines a professional medical feel with approachable, earthy tones. The system supports both light and dark modes based on system preferences.
Color Palette & Typography
The palette is centered on earthy greens and warm ivories to prevent a "sterile" medical feel.
| Element | Specification |
|---|---|
| Primary Color | Earthy Green (#7aa592) |
| Accents | Terracotta and warm Ivories/Creams |
| Body Typography | Manrope (sans-serif) |
| Heading Typography | Instrument Serif |
Sources: CLAUDE.md:14-19
Technical Stack Integration
The design system is implemented using a modern frontend stack that integrates utility-first styling with component-based architecture.
- React 18 & TypeScript: Used for robust, type-safe component development.
- Tailwind CSS: Utilized with CSS custom properties for flexible and performant styling.
- Carbon Design System: The underlying UI framework providing standard accessible components like Buttons, Modals, Tiles, and Icons.
- Framer Motion: Reserved for intentional, functional animations (e.g., recording indicators).
Sources: CLAUDE.md:29-33, readmes/COMPLETION_CHECKLIST.md:175-185, readmes/README_VOICE_VITALS.md:144-150
Visual Components & UI Patterns
Clinical Documentation Layouts
The system uses a structured workspace pattern for medical documentation, such as the Discharge Summary. This involves a clear separation between action areas (like AI generation buttons) and structured form fields organized into logical stacks.
The diagram above illustrates the logical layout of a clinical documentation workspace, such as the Discharge Summary form.
Sources: openmrs-esm-patient-chart-main/packages/esm-patient-medical-documentation-app/src/discharge-summary/discharge-summary-form.workspace.tsx:162-243
Feedback & Notifications
Real-time user feedback is a core part of the design system, ensuring users are aware of system status during asynchronous operations (e.g., AI vitals extraction).
- Pulse Animations: Used for active states, such as a recording indicator during voice vitals capture.
- Snackbars: Standard OpenMRS notifications for success, warning, or error messages.
- Inline Loading: Used within buttons to show immediate response to clicks.
Sources: readmes/README_VOICE_VITALS.md:37-41, readmes/COMPLETION_CHECKLIST.md:90-100
Responsive Design
The system employs SCSS media queries and Carbon Design System grid behaviors to ensure accessibility across desktop, tablet, and mobile devices.
| Screen Size | UI Behavior |
|---|---|
| Desktop | Full button layouts and side-by-side controls. |
| Tablet | Stacked buttons and increased touch targets. |
| Mobile | Full-width buttons and large touch targets (min 44x44px). |
Sources: readmes/COMPLETION_CHECKLIST.md:188-205
Style & Coding Standards
To maintain the integrity of the design system, developers must follow specific coding styleguides:
- Naming Conventions:
UpperCamelCasefor classes/components andlowerCamelCasefor variables and methods. - Braces: K&R style ("Egyptian brackets") are required for all control structures.
- Imports: Named exports are required; default exports are forbidden to ensure consistent component referencing.
Sources: conductor/code_styleguides/javascript.md:14-25, conductor/code_styleguides/javascript.md:57-61
Conclusion
The OpenMRS OPD Intake design system strikes a balance between the standardized Carbon-based OpenMRS 3.0 ecosystem and a localized, high-efficiency aesthetic. By focusing on minimal friction and earthy, calm visuals, it supports healthcare providers in high-stress environments while maintaining technical rigor through React, TypeScript, and Tailwind CSS.