hds-style

LibraryDemoGitHub

NPM-importable CSS theme package providing consistent styling across all HDS applications.

Palettes

• palette-patient — teal primary, for patient-facing apps (hds-webapp)
• palette-doctor — blue primary, for doctor/researcher apps (doctor-dashboard)
• palette-dark — dark mode variant

Features

• CSS custom properties for all colors (--hds-primary, --hds-background, etc.)
• Tailwind CSS 4 integration (dynamic color scales via color-mix())
• Inter + Inter Tight font configuration
• Flowbite component library compatibility (optional)

Usage

@import "tailwindcss";
@import "hds-style/css/theme.css";
@import "hds-style/css/palettes.css";

Showcase

The style showcase at style.datasafe.dev displays color swatches, typography, icons, and logos.