[Design systems](/design-systems/) / Janus Health # Janus Health design system janus-ai.com Read from Janus Health's public website by Clinical Terminal. Not reviewed by Janus Health. Copy it and paste it into Claude as inspiration. Corrections or removal: ![Janus Health homepage](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fthumbs%2F100044.jpg?alt=media) ## Palette - Ground \#FFFFFF \--customify-base - Ink \#000000 - Accent on the ground \#27499A - Primary \#27499A - On primary \#FFFFFF \--customify-base - Secondary accent \#36B884 - Dark \#000000 - Site background \#FFFFFF \--customify-base ## Other named colors - \--customify-base #FFFFFF - \--customify-text #2B2B2B - \--customify-primary #0E7C7B - \--customify-secondary #C3512F - \--customify-accent #FFD042 - \--customify-text-muted #6B6B6B - \--customify-body-text #2B2B2B - \--customify-primary-hover #0D706F - \--customify-link #0E7C7B - \--customify-link-hover #0E7C7B - \--customify-heading #2B2B2B - \--customify-widget-title #2B2B2B - \--customify-on-primary #FFFFFF - \--customify-on-secondary #FFFFFF - \--customify-on-accent #1A1A1A - \--customify-on-surface #1A1A1A - \--customify-border #ECECEC ## Type Headings Archivo · closest free match for Baskerville-Display-Pt Janus Health at a glance Body Figtree Clear, readable paragraphs for clinicians, buyers and patients alike. - 85pxJanus Health - 80pxJanus Health - 75pxJanus Health - 36pxJanus Health - 32pxJanus Health - 28pxJanus Health - 26pxJanus Health - 20pxJanus Health ## Shape & depth Cards and panels: 3px corners · buttons and chips: 60px. ### Corner radii - 50% used in 3 rules - 3px used in 1 rule - 5px used in 1 rule - 2px used in 1 rule - 33px used in 1 rule - 30px used in 1 rule - 10px used in 1 rule - 60px used in 1 rule ### Shadows - 0 5px 30px -5px #6660EF used in 1 rule - 0 7px 15px -3px #0000001a used in 1 rule - 0 2px 4px 0 rgb(0 0 0 / .1) used in 1 rule - 0px 5px 10px 0px rgba(50,50,50,0.06) used in 1 rule - 0px 0px 0px 0px #353535 used in 1 rule - 8px 7px 24px -11px rgba(0, 0, 0, 0.28) used in 1 rule ### Gradients - linear-gradient(66deg, #0b243b, #27499a, #01A3DA) used in 2 rules - linear-gradient(66deg, #27499a, #01A3DA) used in 2 rules - linear-gradient(135deg,rgb(6,147,227) 0%,rgb(155,81,224) 100%) used in 1 rule - linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%) used in 1 rule - linear-gradient(135deg,rgb(252,185,0) 0%,rgb(255,105,0) 100%) used in 1 rule - linear-gradient(135deg,rgb(255,105,0) 0%,rgb(207,46,46) 100%) used in 1 rule Breakpoints: 375px · 480px · 568px · 600px · 601px · 660px · 767px · 768px · 769px · 865px · 980px · 992px ## Voice Tone: professional. Energy: low. Written for businesses. ## 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%2F100044.md?alt=media). ``` --- generator: clinical-terminal-brand-kit company: "Janus Health" domain: "janus-ai.com" colors: primary: "#27499A" onPrimary: "#FFFFFF" dark: "#000000" accent: "#36B884" background: "#FFFFFF" ground: mode: light hex: "#FFFFFF" ink: "#000000" accent: "#27499A" fonts: heading: "Archivo" body: "Figtree" radius: card: "3px" button: "60px" --- # Design System — Janus Health > Read from Janus Health's public website (janus-ai.com) by Clinical Terminal. Not reviewed by Janus Health. > Use it as inspiration: borrow the ideas, not Janus Health's name, logo or identity. ## Ground - **Light ground** (#FFFFFF), from Janus Health's site background #FFFFFF. Pages and panels sit on it. - Main text: #000000 (21:1 on the ground). - Secondary text is #000000 at 88% / 76% / 60%; hairlines and plate borders #000000 at 16%. ## Color - **Accent on the ground: #27499A** (8.38:1). Use it for kickers, key numbers and one highlight per screen, not for large fills. - **Primary #27499A** for filled shapes (buttons, chips, bars), with #FFFFFF text on it (8.38:1). - Secondary accent #36B884: charts and a second data series only. - Quote every hex exactly as written above. ## Type - Headlines: **Archivo**. Body: **Figtree**. Both on Google Fonts. - Janus Health's site uses Baskerville-Display-Pt / Figtree; these are the closest free look-alikes. ## Shape - Cards and panels: 3px corners. Buttons and chips: 60px. ## Voice - Tone: professional. Energy: low. Written for businesses. - Headlines are short and concrete. ## Tokens from the site's stylesheets ### Other named colors - `--customify-base`: `#FFFFFF` - `--customify-text`: `#2B2B2B` - `--customify-primary`: `#0E7C7B` - `--customify-secondary`: `#C3512F` - `--customify-accent`: `#FFD042` - `--customify-text-muted`: `#6B6B6B` - `--customify-body-text`: `#2B2B2B` - `--customify-primary-hover`: `#0D706F` - `--customify-link`: `#0E7C7B` - `--customify-link-hover`: `#0E7C7B` - `--customify-heading`: `#2B2B2B` - `--customify-widget-title`: `#2B2B2B` - `--customify-on-primary`: `#FFFFFF` - `--customify-on-secondary`: `#FFFFFF` - `--customify-on-accent`: `#1A1A1A` - `--customify-on-surface`: `#1A1A1A` - `--customify-border`: `#ECECEC` ### Typefaces - baskerville-display-pt - figtree — on Google Fonts ### Type scale (most-used sizes) `85px` · `80px` · `75px` · `36px` · `32px` · `28px` · `26px` · `20px` · `18px` · `16px` · `14px` · `13px` ### Letter-spacing `-0.8px` (2) · `1px` (1) ### Corner radii (most-used) `50%` · `3px` · `5px` · `2px` · `33px` · `30px` · `10px` · `60px` ### Shadows - `0 5px 30px -5px #6660EF` - `0 7px 15px -3px #0000001a` - `0 2px 4px 0 rgb(0 0 0 / .1)` - `0px 5px 10px 0px rgba(50,50,50,0.06)` - `0px 0px 0px 0px #353535` - `8px 7px 24px -11px rgba(0, 0, 0, 0.28)` ### Gradients - `linear-gradient(66deg, #0b243b, #27499a, #01A3DA)` - `linear-gradient(66deg, #27499a, #01A3DA)` - `linear-gradient(135deg,rgb(6,147,227) 0%,rgb(155,81,224) 100%)` - `linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)` - `linear-gradient(135deg,rgb(252,185,0) 0%,rgb(255,105,0) 100%)` - `linear-gradient(135deg,rgb(255,105,0) 0%,rgb(207,46,46) 100%)` ### Breakpoints 375px · 480px · 568px · 600px · 601px · 660px · 767px · 768px · 769px · 865px · 980px · 992px · 1024px · 1025px · 1200px ```