[Design systems](/design-systems/) / PulsePoint # PulsePoint design system pulsepoint.com Read from PulsePoint's public website by Clinical Terminal. Not reviewed by PulsePoint. Copy it and paste it into Claude as inspiration. Corrections or removal: ![PulsePoint logo](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Flogos%2F101526299.jpg?alt=media) ## Palette - Ground \#FFFFFF \--colors-all--white - Ink \#1C053E - Accent on the ground \#00875C - Primary \#00F6C3 \--colors-all--turquoise - On primary \#000000 \--colors-all--black - Secondary accent \#D14424 - Dark \#1C053E \--colors-all--primary-dark - Site background \#FFFFFF \--colors-all--white ## Other named colors - \--colors-all--black #000000 - \--colors-all--dark-gray #505050 - \--colors-all--primary-light #6400C8 - \--colors-all--primary-dark #1C053E - \--colors-all--white #FFFFFF - \--colors-all--light-purple #F8F4FD - \--colors-all--xlight-grey #FCFCFC - \--colors-all--lavander #F7F2FC - \--colors-all--turquoise #00F6C3 - \--colors-all--green-dark #007B62 - \--colors-all--neutral-gray #A3A3A3 - \--colors-all--mid-gray #B5B5B5 - \--colors-all--blue #259BC5 - \--colors-all--orange #FF983A - \--colors-all--color #FFFFFF - \--colors-all--gray-400 #E0E0E0 ## Type Headings Montserrat PulsePoint at a glance Body Montserrat Clear, readable paragraphs for clinicians, buyers and patients alike. - 2rem · 32pxPulsePoint - 18pxPulsePoint - 1rem · 16pxPulsePoint - 16pxPulsePoint - .9rem · 14.4pxPulsePoint - .875rem · 14pxPulsePoint - 14pxPulsePoint - .8125rem · 13pxPulsePoint ## Shape & depth Cards and panels: 12px corners · buttons and chips: 12px. ### Corner radii - 50% used in 25 rules - .75rem used in 13 rules - 12px used in 12 rules - 20px used in 11 rules - .25rem used in 9 rules - 2px used in 8 rules - 1rem used in 8 rules - .5rem used in 7 rules - .375rem used in 6 rules - 999px used in 6 rules ### Shadows - 0 2px 6px 4px #0000001a used in 3 rules - 0 2px 5px #0003 used in 3 rules - 0 2px .3125rem #0003 used in 3 rules - 0 0 3px 1px #3898ec used in 2 rules - 0 2px 6px #0000001a used in 2 rules - 0 2px 5px #00000026 used in 2 rules ### Gradients - linear-gradient(90deg, #259bc5, #6400c8) used in 5 rules - linear-gradient(270deg, #6400c8, #259bc5) used in 2 rules - linear-gradient(#0000, #0000) used in 2 rules - linear-gradient(45deg, #00f5c4, #259ac4 50%, #6300c7) used in 1 rule - linear-gradient(#1c053e00, #1c053e 72%) used in 1 rule - linear-gradient(0deg, #1c053e00, #1c053e 72%) used in 1 rule Breakpoints: 479px · 767px · 768px · 991px · 992px ## Voice Tone: professional. Energy: high. Written for marketers. ## 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%2F101526299.md?alt=media). ``` --- generator: clinical-terminal-brand-kit company: "PulsePoint" domain: "pulsepoint.com" colors: primary: "#00F6C3" onPrimary: "#000000" dark: "#1C053E" accent: "#D14424" background: "#FFFFFF" ground: mode: light hex: "#FFFFFF" ink: "#1C053E" accent: "#00875C" fonts: heading: "Montserrat" body: "Montserrat" radius: card: "12px" button: "12px" --- # Design System — PulsePoint > Read from PulsePoint's public website (pulsepoint.com) by Clinical Terminal. Not reviewed by PulsePoint. > Use it as inspiration: borrow the ideas, not PulsePoint's name, logo or identity. ## Ground - **Light ground** (#FFFFFF), from PulsePoint's site background #FFFFFF. Pages and panels sit on it. - Main text: #1C053E (18.41:1 on the ground). - Secondary text is #1C053E at 88% / 76% / 60%; hairlines and plate borders #1C053E at 16%. ## Color - **Accent on the ground: #00875C** (4.55:1), adjusted from PulsePoint's primary #00F6C3 so it stays readable. Use it for kickers, key numbers and one highlight per screen, not for large fills. - **Primary #00F6C3** for filled shapes (buttons, chips, bars), with #000000 text on it (14.97:1). - Secondary accent #D14424: charts and a second data series only. - Quote every hex exactly as written above. ## Type - Headlines: **Montserrat**. Body: **Montserrat**. Both on Google Fonts. ## Shape - Cards and panels: 12px corners. Buttons and chips: 12px. ## Voice - Tone: professional. Energy: high. Written for marketers. - Headlines are short and concrete. ## Tokens from the site's stylesheets ### Other named colors - `--colors-all--black`: `#000000` - `--colors-all--dark-gray`: `#505050` - `--colors-all--primary-light`: `#6400C8` - `--colors-all--primary-dark`: `#1C053E` - `--colors-all--white`: `#FFFFFF` - `--colors-all--light-purple`: `#F8F4FD` - `--colors-all--xlight-grey`: `#FCFCFC` - `--colors-all--lavander`: `#F7F2FC` - `--colors-all--turquoise`: `#00F6C3` - `--colors-all--green-dark`: `#007B62` - `--colors-all--neutral-gray`: `#A3A3A3` - `--colors-all--mid-gray`: `#B5B5B5` - `--colors-all--blue`: `#259BC5` - `--colors-all--orange`: `#FF983A` - `--colors-all--color`: `#FFFFFF` - `--colors-all--gray-400`: `#E0E0E0` ### Typefaces - Montserrat (`--type-all-fonts--primary-font`) — on Google Fonts - General Sans ### Type scale (most-used sizes) `2rem` · `18px` · `1rem` · `16px` · `.9rem` · `.875rem` · `14px` · `.8125rem` · `.8rem` · `.75rem` · `12px` · `.7rem` ### Letter-spacing `-.01em` (5) · `.02em` (4) · `.12em` (4) · `.14em` (3) · `-.02em` (2) · `-1px` (2) ### Corner radii (most-used) `50%` · `.75rem` · `12px` · `20px` · `.25rem` · `2px` · `1rem` · `.5rem` · `.375rem` · `999px` ### Shadows - `0 2px 6px 4px #0000001a` - `0 2px 5px #0003` - `0 2px .3125rem #0003` - `0 0 3px 1px #3898ec` - `0 2px 6px #0000001a` - `0 2px 5px #00000026` ### Gradients - `linear-gradient(90deg, #259bc5, #6400c8)` - `linear-gradient(270deg, #6400c8, #259bc5)` - `linear-gradient(#0000, #0000)` - `linear-gradient(45deg, #00f5c4, #259ac4 50%, #6300c7)` - `linear-gradient(#1c053e00, #1c053e 72%)` - `linear-gradient(0deg, #1c053e00, #1c053e 72%)` ### Breakpoints 479px · 767px · 768px · 991px · 992px ```