Color Palette

--hds-primary

--hds-secondary

--hds-accent

--hds-muted

--hds-destructive

--hds-background

Data Visualization

1

2

3

4

5

6

7

8

9

10

Typography

Body: Inter (weight 300) — Headings: Inter Tight

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

This is a regular paragraph with bold and italic text, along with a link. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Unordered list item 1
Unordered list item 2

Ordered list item 1
Ordered list item 2

This is a <pre><code> section.

Components

Buttons

Card

Card Title

Card content with some description text.

Form Inputs

Text Input

Select

Checkbox label

Table

Name	Status	Role
Dr. Smith	Active	Physician
Dr. Johnson	Pending	Researcher
Dr. Williams	Revoked	Specialist

Tabs

Sidebar

Forms
Form 1
Form 2

Help
Log Out

Badges

Primary Secondary Destructive Muted

Icons

From Flowbite — 24px, stroke width 2.2. Click a URL to copy.

arrow-left-to-bracket images/icons/arrow-left-to-bracket.svg

badge-check images/icons/badge-check.svg

ban images/icons/ban.svg

bars-from-left images/icons/bars-from-left.svg

clock-arrow images/icons/clock-arrow.svg

close images/icons/close.svg

cog-outline images/icons/cog-outline.svg

file-copy-alt-solid images/icons/file-copy-alt-solid.svg

file-pen-solid images/icons/file-pen-solid.svg

folder-open-outline images/icons/folder-open-outline.svg

life-saver-solid images/icons/life-saver-solid.svg

mail-box-outline images/icons/mail-box-outline.svg

Logos

Favicons

favicon.ico

hds-favicon-512x512.png

hds-favicon.svg

Horizontal

hds-logo-hz-color.svg

hds-logo-hz-white.svg

Stacked

hds-logo-stacked-color.svg

hds-logo-stacked-white.svg

Badge Outlined

hds-badge-outlined-512x512.png

hds-badge-white-outline.svg

Usage

Install the style package

npm install git+https://github.com/healthdatasafe/style-package.git

Import in your CSS

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

Apply a palette

<html class="palette-doctor">  <!-- or palette-patient, palette-dark -->

Reference images from CDN

<link rel="icon" href="https://style.datasafe.dev/images/logos/favicon/favicon.ico">
<img src="https://style.datasafe.dev/images/icons/badge-check.svg">