Design System

This document defines the design system components and patterns used across iHospita applications.

---

Component Hierarchy

Atoms

Basic building blocks:

• Typography
• Colors
• Icons
• Spacing
• Shadows

Molecules

Combinations of atoms:

• Form fields (label + input)
• Search bar
• Navigation items
• Stat cards

Organisms

Complex components:

• Header
• Sidebar
• Data tables
• Forms
• Modals

Templates

Page layouts:

• Dashboard layout
• List page layout
• Detail page layout
• Form page layout

---

Spacing System

Based on 4px grid:

Token	Value	Usage
xs	4px	Tight spacing
sm	8px	Related elements
md	16px	Standard spacing
lg	24px	Section spacing
xl	32px	Major sections
xxl	48px	Page sections

---

Shadow System

Level	Shadow	Usage
0	none	Flat elements
1	0 1px 2px rgba(0,0,0,0.05)	Cards
2	0 4px 6px rgba(0,0,0,0.1)	Hover states
3	0 10px 15px rgba(0,0,0,0.1)	Modals
4	0 20px 25px rgba(0,0,0,0.15)	Popovers

---

Button Variants

Primary Button

<Button type="primary">Save Changes</Button>

Secondary Button

<Button>Cancel</Button>

Danger Button

<Button danger>Delete</Button>

Text Button

<Button type="text">Learn More</Button>

---

Form Patterns

Standard Form Layout

<Form layout="vertical">
  <Form.Item label="Patient Name" required>
    <Input placeholder="Enter patient name" />
  </Form.Item>
  <Form.Item label="Phone Number" required>
    <Input placeholder="+855" />
  </Form.Item>
  <Form.Item>
    <Space>
      <Button type="primary" htmlType="submit">
        Submit
      </Button>
      <Button>Cancel</Button>
    </Space>
  </Form.Item>
</Form>

---

Table Patterns

Standard Data Table

<ProTable
  columns={columns}
  request={fetchData}
  rowKey="id"
  search={{
    labelWidth: 'auto',
  }}
  pagination={{
    pageSize: 20,
  }}
  toolBarRender={() => [
    <Button key="add" type="primary" icon={<PlusOutlined />}>
      Add New
    </Button>,
  ]}
/>

---

Card Patterns

Statistic Card

<Card>
  <Statistic
    title="Total Patients"
    value={1234}
    prefix={<TeamOutlined />}
    valueStyle={{ color: '#1890ff' }}
  />
</Card>

Feature Card

<Card
  hoverable
  cover={<img alt="feature" src="/images/feature.png" />}
>
  <Card.Meta
    title="Feature Title"
    description="Feature description text"
  />
</Card>

---

Icon Usage

Using Ant Design Icons:

import {
  UserOutlined,
  SearchOutlined,
  PlusOutlined,
  EditOutlined,
  DeleteOutlined,
} from '@ant-design/icons';

Icon	Usage
UserOutlined	User-related actions
SearchOutlined	Search functionality
PlusOutlined	Add/Create actions
EditOutlined	Edit actions
DeleteOutlined	Delete actions

---

Animation Guidelines

Transitions

• Duration: 200ms for micro-interactions
• Duration: 300ms for page transitions
• Easing: ease-in-out

Loading States

• Use Skeleton for content loading
• Use Spin for action loading
• Use Progress for file uploads

---

Accessibility Guidelines

1. Color Contrast: Minimum 4.5:1 ratio
2. Focus States: Visible focus rings
3. ARIA Labels: Proper labeling
4. Keyboard Navigation: Full support
5. Screen Readers: Semantic HTML