Introduction
SmartUI is the design system behind SmartCare and SmartMCU. One design language, one token source, two densities.
SmartUI gives every SmartCare and SmartMCU product the same look, the same vocabulary and the same behavior. It ships as tokens, React components for the web, and React Native components for the app.
Principles
- Content first. Screens put data and one main action forward. The brand color is for actions, not decoration.
- Solid content, glass controls. Cards, tables and forms are always solid. Glass is only for floating control layers: bars, docks, sidebars and menus.
- One vocabulary. Variant, size and state names are the same in every component, in design and in code.
- Usable by everyone. Text contrast of at least 4.5:1, touch targets of at least 44 px, and a visible keyboard focus.
Two densities
The tokens are the same. Only the default size each product uses is different.
| Density | Used by | Default control size | Body text |
|---|---|---|---|
| Touch | SmartCare app and patient web | lg (48) | 17 px |
| Desk | SmartMCU dashboard and clinic portal | md (40), sm (32) in toolbars | 14 px |
Packages
| Package | What it holds |
|---|---|
@smartui/tokens | Colors, spacing, radius, type and motion as CSS variables and typed values |
@smartui/react | Web components, built on React Aria for keyboard and screen reader behavior |
@smartui/native | React Native components for the Expo app |