[Design systems](/design-systems/) / Clarium # Clarium design system clariumhealth.com Read from Clarium's public website by Clinical Terminal. Not reviewed by Clarium. Copy it and paste it into Claude as inspiration. Corrections or removal: ![Clarium homepage](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fthumbs%2F103626408.jpg?alt=media) ## Palette - Ground \#FFFFFF \--opacity--white-5 - Ink \#000018 - Accent on the ground \#0C63FF - Primary \#0C63FF \--colors--brand-blue - On primary \#FFFFFF \--opacity--white-5 - Secondary accent \#1463FF - Dark \#000018 \--colors--neutral-darkest - Site background \#FFFFFF \--opacity--white-5 ## Color ramps Opacity Neutral Darkest 5 \#000000 10 \#000000 15 \#000000 30 \#000000 50 \#000000 Opacity White 5 \#FFFFFF 10 \#FFFFFF 15 \#FFFFFF 30 \#FFFFFF 50 \#FFFFFF ## Other named colors - \--colors--brand-blue #0C63FF - \--colors--neutral-dim #71717A - \--colors--white #FFFFFF - \--colors--neutral-darkest #000018 - \--colors--darkest-blue #00112B - \--colors--neutral-lightest #F4F4F5 - \--colors--cyan #04A1DD - \--colors--neutral-lighter #E4E4E7 - \--colors--neutral #626365 - \--colors--baby-blue #DBEAFE - \--colors--neutral-light #D7D7D7 - \--colors--neutral-dark #3D4043 - \--colors--cta-blue #2563EB - \--colors--purple-agent #4F46E5 - \--colors--amber #F59E0B - \--error #DC2626 - \--colors--neutral-darker #27272A - \--colors--deep-slate #0C438B - \--colors--mint #D1FAE5 - \--colors--green #10B981 - \--colors--deep-green #022C22 - \--colors--pale-yellow #FEF3C7 - \--colors--deep-brown #451A03 ## Type Headings Inter · closest free match for Neue Haas Grotesk Clarium at a glance Body Inter · closest free match for Neue Haas Grotesk Clear, readable paragraphs for clinicians, buyers and patients alike. - 3.75rem · 60pxClarium - 3.5rem · 56pxClarium - 3.25rem · 52pxClarium - 3rem · 48pxClarium - 2.75rem · 44pxClarium - 2.5rem · 40pxClarium - 2.25rem · 36pxClarium - 1.5rem · 24pxClarium ## Shape & depth Cards and panels: 8px corners · buttons and chips: 999px. ### Corner radii - 8px used in 22 rules - 999px used in 15 rules - 12px used in 14 rules - .75rem used in 12 rules - .5rem used in 12 rules - 100% used in 10 rules - 4px used in 9 rules - 7px used in 4 rules - 24px used in 4 rules - 3px used in 2 rules ### Shadows - 0 20px 101px #4f46e5cf used in 2 rules - 0 0 0 1px #0000001a, 0 1px 3px #0000001a used in 1 rule - 0 0 3px #3336 used in 1 rule - 0 0 0 2px #fff used in 1 rule - 0 32px 64px -12px #00000024 used in 1 rule - 2px 2px 5px #00000024 used in 1 rule ### Gradients - linear-gradient(135deg, #4f46e5, #7c3aed) used in 4 rules - linear-gradient(0deg, #fff0 44%, #ffffff1f) used in 3 rules - linear-gradient(#00000080, #00000080) used in 2 rules - linear-gradient(90deg, #005aff, #8000ff) used in 2 rules - linear-gradient(#f59e0b, #dc2626) used in 2 rules - linear-gradient(#0000, #0000) used in 1 rule Breakpoints: 479px · 767px · 768px · 991px ## Voice Tone: professional. Energy: low. Written for enterprises. ## DESIGN.md The file Copy design system puts on your clipboard. [Open the raw file](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fmd%2F103626408.md?alt=media). ``` --- generator: clinical-terminal-brand-kit company: "Clarium" domain: "clariumhealth.com" colors: primary: "#0C63FF" onPrimary: "#FFFFFF" dark: "#000018" accent: "#1463FF" background: "#FFFFFF" ground: mode: light hex: "#FFFFFF" ink: "#000018" accent: "#0C63FF" fonts: heading: "Inter" body: "Inter" radius: card: "8px" button: "999px" --- # Design System — Clarium > Read from Clarium's public website (clariumhealth.com) by Clinical Terminal. Not reviewed by Clarium. > Use it as inspiration: borrow the ideas, not Clarium's name, logo or identity. ## Ground - **Light ground** (#FFFFFF), from Clarium's site background #FFFFFF. Pages and panels sit on it. - Main text: #000018 (20.73:1 on the ground). - Secondary text is #000018 at 88% / 76% / 60%; hairlines and plate borders #000018 at 16%. ## Color - **Accent on the ground: #0C63FF** (4.95:1). Use it for kickers, key numbers and one highlight per screen, not for large fills. - **Primary #0C63FF** for filled shapes (buttons, chips, bars), with #FFFFFF text on it (4.95:1). - Secondary accent #1463FF: charts and a second data series only. - Quote every hex exactly as written above. ## Type - Headlines: **Inter**. Body: **Inter**. Both on Google Fonts. - Clarium's site uses Neue Haas Grotesk / Neue Haas Grotesk; these are the closest free look-alikes. ## Shape - Cards and panels: 8px corners. Buttons and chips: 999px. ## Voice - Tone: professional. Energy: low. Written for enterprises. - Headlines are short and concrete. ## Tokens from the site's stylesheets ### Color ramps - **Opacity Neutral Darkest** (`--opacity--neutral-darkest-N`): 5 `#000000` · 10 `#000000` · 15 `#000000` · 30 `#000000` · 50 `#000000` - **Opacity White** (`--opacity--white-N`): 5 `#FFFFFF` · 10 `#FFFFFF` · 15 `#FFFFFF` · 30 `#FFFFFF` · 50 `#FFFFFF` ### Other named colors - `--colors--brand-blue`: `#0C63FF` - `--colors--neutral-dim`: `#71717A` - `--colors--white`: `#FFFFFF` - `--colors--neutral-darkest`: `#000018` - `--colors--darkest-blue`: `#00112B` - `--colors--neutral-lightest`: `#F4F4F5` - `--colors--cyan`: `#04A1DD` - `--colors--neutral-lighter`: `#E4E4E7` - `--colors--neutral`: `#626365` - `--colors--baby-blue`: `#DBEAFE` - `--colors--neutral-light`: `#D7D7D7` - `--colors--neutral-dark`: `#3D4043` - `--colors--cta-blue`: `#2563EB` - `--colors--purple-agent`: `#4F46E5` - `--colors--amber`: `#F59E0B` - `--error`: `#DC2626` - `--colors--neutral-darker`: `#27272A` - `--colors--deep-slate`: `#0C438B` - `--colors--mint`: `#D1FAE5` - `--colors--green`: `#10B981` - `--colors--deep-green`: `#022C22` - `--colors--pale-yellow`: `#FEF3C7` - `--colors--deep-brown`: `#451A03` ### Typefaces - Neue Haas Grotesk (`--font-styles--body`) - Inter (`--font-styles--links`) — on Google Fonts - Space Grotesk — on Google Fonts - JetBrains Mono — on Google Fonts ### Type scale (most-used sizes) `3.75rem` · `3.5rem` · `3.25rem` · `3rem` · `2.75rem` · `2.5rem` · `2.25rem` · `1.5rem` · `1.25rem` · `.875rem` · `14px` · `.8rem` ### Letter-spacing `-1px` (8) · `.5px` (2) · `-.02em` (2) · `1px` (1) · `1.5px` (1) · `2px` (1) ### Corner radii (most-used) `8px` · `999px` · `12px` · `.75rem` · `.5rem` · `100%` · `4px` · `7px` · `24px` · `3px` ### Shadows - `0 20px 101px #4f46e5cf` - `0 0 0 1px #0000001a, 0 1px 3px #0000001a` - `0 0 3px #3336` - `0 0 0 2px #fff` - `0 32px 64px -12px #00000024` - `2px 2px 5px #00000024` ### Gradients - `linear-gradient(135deg, #4f46e5, #7c3aed)` - `linear-gradient(0deg, #fff0 44%, #ffffff1f)` - `linear-gradient(#00000080, #00000080)` - `linear-gradient(90deg, #005aff, #8000ff)` - `linear-gradient(#f59e0b, #dc2626)` - `linear-gradient(#0000, #0000)` ### Breakpoints 479px · 767px · 768px · 991px ```