Skip to main content

Acuitas Design System

The Acuitas Design System is a comprehensive CSS framework built specifically for medical imaging applications. It provides a consistent visual language, reusable components and utility classes to ensure a professional and accessible user interface.

Installation​

npm install @acuitas/shared

Import the CSS​

import '@acuitas/shared/css/design-system.css';

Design Tokens​

The design system uses CSS custom properties for consistent theming:

:root {
  --primary-color: #0049b8;
  --primary-color-hover: #00317a;
  --secondary-color: #adceff;
  --text-primary: #373a3c;
  --text-secondary: #a0a0a0;
  --background-main: #ffffff;
  --background-secondary: #f4f5f6;
  --success-color: #5cbe89;
  --warning-color: #efb850;
  --error-color: #f34951;
}
Design Token Preview
Primary
Secondary
Success
Warning
Error