Best practices

Semantic HTML structure

Always use appropriate semantic elements with the design system classes:

<main class="medical-dashboard p-lg">
  <section class="patient-section">
    <header class="d-flex justify-between align-center mb-lg">
      <h2>Patient Overview</h2>
      <nav class="breadcrumb">...</nav>
    </header>
    <!-- Content -->
  </section>
</main>

Consistent spacing

Use the spacing utilities consistently:

• xs (0.25rem) - Tight spacing
• sm (0.5rem) - Small spacing
• Default (1rem) - Standard spacing
• md (2rem) - Medium spacing
• lg (3rem) - Large spacing

Colour use

Follow medical application colour conventions:

• Primary blue for primary actions and navigation
• Success green for positive results and confirmations
• Warning orange for cautions and reviews needed
• Error red for critical issues and deletions
• Info blue for informational states

Responsive approach

Design mobile-first, then enhance for larger screens:

/* Mobile first */
.medical-grid {
  display: grid;
  grid-template-columns: 1fr;
}

/* Tablet and up */
@media (min-width: 768px) {
  .medical-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop and up */  
@media (min-width: 1735px) {
  .medical-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}