Button System Design

I have designed this button system for Tabiat Care, a remote patient monitoring platform, to ensure consistency, accessibility, and flexibility across the interface.

Background

I have designed this button system for Tabiat Care, a remote patient monitoring platform, to ensure consistency, accessibility, and flexibility across the interface. The system includes four button types—primary, secondary, tertiary, and link—each tailored to specific interaction needs. It supports multiple sizes, including small, medium, large, and X-large, to accommodate various screen layouts. Each button features clearly defined states (default, hover, focused, pressed, and disabled) and optional icon support, making the system adaptable for diverse use cases across patient and provider workflows.

Overview

This button system for Tabiat Care was created to ensure consistency and clarity across the platform’s design. Primary buttons use the brand's primary color (#2D3142) to establish visual hierarchy and emphasis. The platform has two main brand colors: #2D3142 and #EF8353. However, the light orange color (#EF8353) does not meet the minimum contrast ratio on a white background. The dark navy color (#2D3142) was chosen for primary buttons because it meets accessibility standards and is easier to read on light backgrounds. The system includes four responsive sizes—X-Large, Large, Medium, and Small—to adapt across various layouts and screen sizes. It also supports multiple icon options, including left icon, right icon, and icon-only variations. These foundational elements contribute to a flexible, scalable design system that supports both patient and provider interactions.