[Design systems](/design-systems/) / SmarterDx # SmarterDx design system smarterdx.com Read from SmarterDx's public website by Clinical Terminal. Not reviewed by SmarterDx. Copy it and paste it into Claude as inspiration. Corrections or removal: ![SmarterDx homepage](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fthumbs%2F100057.jpg?alt=media) ## Palette - Ground \#FFFFFF \--white - Ink \#051137 - Accent on the ground \#0257FF - Primary \#0257FF \--orbit-blue-5 - On primary \#FFFFFF \--white - Secondary accent \#674AF9 \--nebula-purple-4 - Highlight \#00C8E2 \--aurora-teal-5 - Dark \#051137 \--deep-space-1 - Site background \#FFFFFF \--white ## Color ramps Deep Space 1 \#051137 2 \#0C2061 3 \#143088 4 \#1F41AD 5 \#2C54D0 6 \#5775D5 7 \#8197DB 8 \#A9B7E3 9 \#CFD6ED 10 \#F2F4FA Aurora Teal 1 \#005661 2 \#007D8D 3 \#0098AC 4 \#00B0C8 5 \#00C8E2 6 \#33D4EA 7 \#7BE0EE 8 \#AEEAF3 9 \#D0F2F7 10 \#EBF9FB Orbit Blue 1 \#001552 2 \#001F78 3 \#002CAA 4 \#003DDB 5 \#0257FF 6 \#3D78FF 7 \#7AA3FF 8 \#AABFFF 9 \#CFDAFF 10 \#EBF0FF Nebula Purple 1 \#2D10BE 2 \#3A19E2 3 \#5030F4 4 \#674AF9 5 \#7D64FC 6 \#9C87FD 7 \#BBADFE 8 \#D3CAFE 9 \#E5DFFE 10 \#F4F1FF ## Other named colors - \--white #FFFFFF - \--black #12141A - \--grey #525C6B - \--mercury-gray-7 #404252 - \--mercury-gray-4 #B3B5BD ## Type Headings Mona Sans SmarterDx at a glance Body Archivo Clear, readable paragraphs for clinicians, buyers and patients alike. - 3rem · 48pxSmarterDx - 40pxSmarterDx - 2rem · 32pxSmarterDx - 1.7rem · 27.2pxSmarterDx - 18pxSmarterDx - 1rem · 16pxSmarterDx - 16pxSmarterDx - 15pxSmarterDx ## Shape & depth Cards and panels: 14px corners · buttons and chips: 5px. ### Corner radii - 20px used in 31 rules - 10px used in 24 rules - 8px used in 14 rules - 30px used in 14 rules - 15px used in 14 rules - 5px used in 11 rules - 12px used in 10 rules - 999px used in 10 rules - 16px used in 9 rules - 18px used in 8 rules ### Shadows - none!important used in 7 rules - 0 7px 13px -1px #002caa4d used in 3 rules - 0 18px 40px -12px #05123857 used in 2 rules - 0 2px 5px #0003 used in 2 rules - 0 20px 35px 10px #0003 used in 2 rules - 0 2px 5px #10182829 used in 2 rules ### Gradients - linear-gradient(155.06deg, #051137 14.644%, #0257ff 85.356%) used in 8 rules - linear-gradient(145deg, #e0ebff, #f2eeff) used in 4 rules - linear-gradient(145deg, #008291, #81d7d9) used in 3 rules - linear-gradient(145deg, #0a2167, #3a7cff) used in 2 rules - linear-gradient(145deg, #0a2167, #7d64fc) used in 2 rules - linear-gradient(145deg, #3d24b3, #937ffa) used in 2 rules Breakpoints: 479px · 640px · 767px · 768px · 991px · 992px · 1280px · 1440px · 1920px ## Voice Tone: professional. Energy: high. 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%2F100057.md?alt=media). ``` --- generator: clinical-terminal-brand-kit company: "SmarterDx" domain: "smarterdx.com" colors: primary: "#0257FF" onPrimary: "#FFFFFF" dark: "#051137" accent: "#674AF9" highlight: "#00C8E2" background: "#FFFFFF" ground: mode: light hex: "#FFFFFF" ink: "#051137" accent: "#0257FF" fonts: heading: "Mona Sans" body: "Archivo" radius: card: "14px" button: "5px" --- # Design System — SmarterDx > Read from SmarterDx's public website (smarterdx.com) by Clinical Terminal. Not reviewed by SmarterDx. > Use it as inspiration: borrow the ideas, not SmarterDx's name, logo or identity. ## Ground - **Light ground** (#FFFFFF), from SmarterDx's site background #FFFFFF. Pages and panels sit on it. - Main text: #051137 (18.39:1 on the ground). - Secondary text is #051137 at 88% / 76% / 60%; hairlines and plate borders #051137 at 16%. ## Color - **Accent on the ground: #0257FF** (5.51:1). Use it for kickers, key numbers and one highlight per screen, not for large fills. - **Primary #0257FF** for filled shapes (buttons, chips, bars), with #FFFFFF text on it (5.51:1). - Secondary accent #674AF9: charts and a second data series only. - Highlight #00C8E2 (from SmarterDx's logo gradient): sparing emphasis, never body text. - Quote every hex exactly as written above. ## Type - Headlines: **Mona Sans**. Body: **Archivo**. Both on Google Fonts. ## Shape - Cards and panels: 14px corners. Buttons and chips: 5px. ## Voice - Tone: professional. Energy: high. Written for enterprises. - Headlines are short and concrete. ## Tokens from the site's stylesheets ### Color ramps - **Deep Space** (`--deep-space-N`): 1 `#051137` · 2 `#0C2061` · 3 `#143088` · 4 `#1F41AD` · 5 `#2C54D0` · 6 `#5775D5` · 7 `#8197DB` · 8 `#A9B7E3` · 9 `#CFD6ED` · 10 `#F2F4FA` - **Aurora Teal** (`--aurora-teal-N`): 1 `#005661` · 2 `#007D8D` · 3 `#0098AC` · 4 `#00B0C8` · 5 `#00C8E2` · 6 `#33D4EA` · 7 `#7BE0EE` · 8 `#AEEAF3` · 9 `#D0F2F7` · 10 `#EBF9FB` - **Orbit Blue** (`--orbit-blue-N`): 1 `#001552` · 2 `#001F78` · 3 `#002CAA` · 4 `#003DDB` · 5 `#0257FF` · 6 `#3D78FF` · 7 `#7AA3FF` · 8 `#AABFFF` · 9 `#CFDAFF` · 10 `#EBF0FF` - **Nebula Purple** (`--nebula-purple-N`): 1 `#2D10BE` · 2 `#3A19E2` · 3 `#5030F4` · 4 `#674AF9` · 5 `#7D64FC` · 6 `#9C87FD` · 7 `#BBADFE` · 8 `#D3CAFE` · 9 `#E5DFFE` · 10 `#F4F1FF` ### Other named colors - `--white`: `#FFFFFF` - `--black`: `#12141A` - `--grey`: `#525C6B` - `--mercury-gray-7`: `#404252` - `--mercury-gray-4`: `#B3B5BD` ### Typefaces - Mona Sans (`--primary`) — on Google Fonts - Archivo (`--secondary`) — on Google Fonts - Instrument Serif (`--serif`) — on Google Fonts - Atkinson Hyperlegible Mono (`--tertiary`) — on Google Fonts - Inter — on Google Fonts ### Type scale (most-used sizes) `3rem` · `40px` · `2rem` · `1.7rem` · `18px` · `1rem` · `16px` · `15px` · `14px` · `13px` · `12px` · `11px` ### Letter-spacing `.08em` (37) · `-.01em` (17) · `-.02em` (15) · `.02em` (7) · `-1px` (7) · `.04em` (5) ### Corner radii (most-used) `20px` · `10px` · `8px` · `30px` · `15px` · `5px` · `12px` · `999px` · `16px` · `18px` ### Shadows - `none!important` - `0 7px 13px -1px #002caa4d` - `0 18px 40px -12px #05123857` - `0 2px 5px #0003` - `0 20px 35px 10px #0003` - `0 2px 5px #10182829` ### Gradients - `linear-gradient(155.06deg, #051137 14.644%, #0257ff 85.356%)` - `linear-gradient(145deg, #e0ebff, #f2eeff)` - `linear-gradient(145deg, #008291, #81d7d9)` - `linear-gradient(145deg, #0a2167, #3a7cff)` - `linear-gradient(145deg, #0a2167, #7d64fc)` - `linear-gradient(145deg, #3d24b3, #937ffa)` ### Breakpoints 479px · 640px · 767px · 768px · 991px · 992px · 1280px · 1440px · 1920px ```