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: agent@clinicalterminal.com

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
- .75remused in 13 rules
- 12pxused in 12 rules
- 20pxused in 11 rules
- .25remused in 9 rules
- 2pxused in 8 rules
- 1remused in 8 rules
- .5remused in 7 rules
- .375remused in 6 rules
- 999pxused in 6 rules
Shadows
- 0 2px 6px 4px #0000001aused in 3 rules
- 0 2px 5px #0003used in 3 rules
- 0 2px .3125rem #0003used in 3 rules
- 0 0 3px 1px #3898ecused in 2 rules
- 0 2px 6px #0000001aused in 2 rules
- 0 2px 5px #00000026used 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.
--- 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