[Design systems](/design-systems/) / Notable # Notable design system notablehealth.com Read from Notable's public website by Clinical Terminal. Not reviewed by Notable. Copy it and paste it into Claude as inspiration. Corrections or removal: ![Notable homepage](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fthumbs%2F100089.jpg?alt=media) ## Palette - Ground \#FAF8F7 \--background-color--background-primary - Ink \#222222 - Accent on the ground \#001AFF - Primary \#001AFF \--primary-200 - On primary \#FFFFFF \--bg-white - Highlight \#4AE7FF \--text--accent - Dark \#222222 - Site background \#FAF8F7 \--background-color--background-primary ## Color ramps Navy 100 \#0F1B5D 200 \#071C59 300 \#5C5F87 400 \#8087C2 500 \#4D50A9 Blue 100 \#F2F6FF 200 \#E7F0FF 300 \#BFCDFF 400 \#809CFF 500 \#0B67FD Neutral 100 \#F8F8F8 200 \#EEEEEE 300 \#CFCFCF 400 \#B7B7B7 500 \#676A71 600 \#0C1438 Bordeaux 100 \#DBBCCB 200 \#AC6E8C 300 \#7E3D5D Primary 200 \#001AFF 300 \#020084 400 \#030E4D Orange 100 \#FFD5CA 200 \#F2AD9B 300 \#C8735C ## Other named colors - \--background-color--background-primary #FAF8F7 - \--text-color--primary #020084 - \--button-color--icon-primary #001AFF - \--button-color--primary #02059D - \--bg-white #FFFFFF - \--neutral #FFFFFF - \--card--image-background #B8B8B8 - \--text-color--gray #444444 - \--body #0F1B5D - \--nav--background-color #FFFFFF - \--nav-background #F7F9FC - \--text--accent #4AE7FF - \--text-color--disabled-text #B8B8B8 - \--text-color--secondary #8087C2 - \--button-color--primary-hover #020084 - \--background-color--background-alternate #020084 - \--button-color--primary-pressed #030E4D - \--button-color--secondary-disabled #B8B8B8 - \--button-color--primary-disabled #444444 - \--nav--underline-color #DDDDDD - \--navy-dark #020932 - \--icon--background-color #F2F6FF - \--error #F46B6B - \--accessible-components--dark-grey #9B9B9B - \--accessible-components--dodger-blue #1378D1 - \--patient-access-light #F9F6FD - \--fb-canvas #F2F3F6 - \--patient-access-dark #6330AA - \--patient-access-mid #B989FD - \--rev-cycle-light #F3FBF9 - \--care-ops-light #FBF4F9 - \--rev-cycle-mid #2EDCAE - \--rev-cycle-dark #0B8564 - \--care-ops-mid #E176C8 - \--care-ops-dark #921F77 - \--success #4CB06C - \--alert #FFBF60 - \--neutral-400-401 #BCC8E9 - \--neutral-600-601 #091135 ## Type Headings Sora Notable at a glance Body Figtree Clear, readable paragraphs for clinicians, buyers and patients alike. - 2.8rem · 44.8pxNotable - 2rem · 32pxNotable - 24pxNotable - 20pxNotable - 1.25rem · 20pxNotable - 1.2rem · 19.2pxNotable - 18pxNotable - 1.1rem · 17.6pxNotable ## Shape & depth Cards and panels: 16px corners · buttons and chips: 9px. ### Corner radii - 16px used in 23 rules - 50% used in 14 rules - 999rem used in 13 rules - 1rem used in 13 rules - 1.5rem used in 13 rules - 8px used in 12 rules - .25rem used in 8 rules - 999px used in 6 rules - 100px used in 5 rules - 2rem used in 5 rules ### Shadows - 0 4px 20px #0003 used in 5 rules - 0 0 10px 2px #0000001a used in 3 rules - 0 .25rem 1.5rem #0000001a used in 3 rules - 0 4px 34px #aa78edb3 used in 3 rules - 0 2px 10px #0000001a used in 3 rules - 0 12px 32px #0f1b5d14 used in 2 rules ### Gradients - linear-gradient(#fff,#809cff) used in 6 rules - linear-gradient(#02059d,#030e4d) used in 3 rules - linear-gradient(#c5c9e4,#edf1f5) used in 1 rule - linear-gradient(#fcfcfc00,#fff0) used in 1 rule - linear-gradient(90deg,#5fc971,#0b67fd) used in 1 rule - linear-gradient(90deg,#ffffffb3 70%,#fff0) used in 1 rule Breakpoints: 479px · 767px · 768px · 991px · 1199px · 1440px · 1920px ## Voice Tone: professional. Energy: medium. 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%2F100089.md?alt=media). ``` --- generator: clinical-terminal-brand-kit company: "Notable" domain: "notablehealth.com" colors: primary: "#001AFF" onPrimary: "#FFFFFF" dark: "#222222" highlight: "#4AE7FF" background: "#FAF8F7" ground: mode: light hex: "#FAF8F7" ink: "#222222" accent: "#001AFF" fonts: heading: "Sora" body: "Figtree" radius: card: "16px" button: "9px" --- # Design System — Notable > Read from Notable's public website (notablehealth.com) by Clinical Terminal. Not reviewed by Notable. > Use it as inspiration: borrow the ideas, not Notable's name, logo or identity. ## Ground - **Light ground** (#FAF8F7), from Notable's site background #FAF8F7. Pages and panels sit on it. - Main text: #222222 (15.03:1 on the ground). - Secondary text is #222222 at 88% / 76% / 60%; hairlines and plate borders #222222 at 16%. ## Color - **Accent on the ground: #001AFF** (7.65:1). Use it for kickers, key numbers and one highlight per screen, not for large fills. - **Primary #001AFF** for filled shapes (buttons, chips, bars), with #FFFFFF text on it (8.1:1). - Highlight #4AE7FF (from Notable's logo gradient): sparing emphasis, never body text. - Quote every hex exactly as written above. ## Type - Headlines: **Sora**. Body: **Figtree**. Both on Google Fonts. ## Shape - Cards and panels: 16px corners. Buttons and chips: 9px. ## Voice - Tone: professional. Energy: medium. Written for enterprises. - Headlines are short and concrete. ## Tokens from the site's stylesheets ### Color ramps - **Navy** (`--navy-N`): 100 `#0F1B5D` · 200 `#071C59` · 300 `#5C5F87` · 400 `#8087C2` · 500 `#4D50A9` - **Blue** (`--blue-N`): 100 `#F2F6FF` · 200 `#E7F0FF` · 300 `#BFCDFF` · 400 `#809CFF` · 500 `#0B67FD` - **Neutral** (`--neutral-N`): 100 `#F8F8F8` · 200 `#EEEEEE` · 300 `#CFCFCF` · 400 `#B7B7B7` · 500 `#676A71` · 600 `#0C1438` - **Bordeaux** (`--bordeaux-N`): 100 `#DBBCCB` · 200 `#AC6E8C` · 300 `#7E3D5D` - **Primary** (`--primary-N`): 200 `#001AFF` · 300 `#020084` · 400 `#030E4D` - **Orange** (`--orange-N`): 100 `#FFD5CA` · 200 `#F2AD9B` · 300 `#C8735C` ### Other named colors - `--background-color--background-primary`: `#FAF8F7` - `--text-color--primary`: `#020084` - `--button-color--icon-primary`: `#001AFF` - `--button-color--primary`: `#02059D` - `--bg-white`: `#FFFFFF` - `--neutral`: `#FFFFFF` - `--card--image-background`: `#B8B8B8` - `--text-color--gray`: `#444444` - `--body`: `#0F1B5D` - `--nav--background-color`: `#FFFFFF` - `--nav-background`: `#F7F9FC` - `--text--accent`: `#4AE7FF` - `--text-color--disabled-text`: `#B8B8B8` - `--text-color--secondary`: `#8087C2` - `--button-color--primary-hover`: `#020084` - `--background-color--background-alternate`: `#020084` - `--button-color--primary-pressed`: `#030E4D` - `--button-color--secondary-disabled`: `#B8B8B8` - `--button-color--primary-disabled`: `#444444` - `--nav--underline-color`: `#DDDDDD` - `--navy-dark`: `#020932` - `--icon--background-color`: `#F2F6FF` - `--error`: `#F46B6B` - `--accessible-components--dark-grey`: `#9B9B9B` - `--accessible-components--dodger-blue`: `#1378D1` - `--patient-access-light`: `#F9F6FD` - `--fb-canvas`: `#F2F3F6` - `--patient-access-dark`: `#6330AA` - `--patient-access-mid`: `#B989FD` - `--rev-cycle-light`: `#F3FBF9` - `--care-ops-light`: `#FBF4F9` - `--rev-cycle-mid`: `#2EDCAE` - `--rev-cycle-dark`: `#0B8564` - `--care-ops-mid`: `#E176C8` - `--care-ops-dark`: `#921F77` - `--success`: `#4CB06C` - `--alert`: `#FFBF60` - `--neutral-400-401`: `#BCC8E9` - `--neutral-600-601`: `#091135` ### Typefaces - DM Sans — on Google Fonts - Sora — on Google Fonts - Lora — on Google Fonts - Host Grotesk - Anonymous Pro - Figtree — on Google Fonts ### Type scale (most-used sizes) `2.8rem` · `2rem` · `24px` · `20px` · `1.25rem` · `1.2rem` · `18px` · `1.1rem` · `1rem` · `16px` · `14px` · `.875rem` ### Letter-spacing `.1rem` (4) · `.005em` (2) · `.05rem` (2) · `-1px` (1) · `.125rem` (1) · `.2rem` (1) ### Corner radii (most-used) `16px` · `50%` · `999rem` · `1rem` · `1.5rem` · `8px` · `.25rem` · `999px` · `100px` · `2rem` ### Shadows - `0 4px 20px #0003` - `0 0 10px 2px #0000001a` - `0 .25rem 1.5rem #0000001a` - `0 4px 34px #aa78edb3` - `0 2px 10px #0000001a` - `0 12px 32px #0f1b5d14` ### Gradients - `linear-gradient(#fff,#809cff)` - `linear-gradient(#02059d,#030e4d)` - `linear-gradient(#c5c9e4,#edf1f5)` - `linear-gradient(#fcfcfc00,#fff0)` - `linear-gradient(90deg,#5fc971,#0b67fd)` - `linear-gradient(90deg,#ffffffb3 70%,#fff0)` ### Breakpoints 479px · 767px · 768px · 991px · 1199px · 1440px · 1920px ```