[Design systems](/design-systems/) / EPOWERdoc # EPOWERdoc design system epowerdoc.com Read from EPOWERdoc's public website by Clinical Terminal. Not reviewed by EPOWERdoc. Copy it and paste it into Claude as inspiration. Corrections or removal: ![EPOWERdoc homepage](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fthumbs%2F106979458.jpg?alt=media) ## Palette - Ground \#FFFFFF \--white - Ink \#241A42 - Accent on the ground \#7A68AE - Primary \#7A68AE \--purple - On primary \#FFFFFF \--white - Secondary accent \#3D3260 \--text-body - Highlight \#00A389 \--teal - Dark \#241A42 \--bg-dark - Site background \#FFFFFF \--white ## Other named colors - \--teal #00A389 - \--teal-dark #007D69 - \--teal-deep #005748 - \--teal-hover #00B898 - \--teal-soft #CCF0EA - \--teal-light #CCF0EA - \--teal-ghost #EDFAF7 - \--purple #7A68AE - \--purple-dark #5B4E87 - \--purple-deep #3B2F68 - \--purple-hover #8F7EC0 - \--purple-mid #9585C4 - \--purple-soft #E4DFF4 - \--purple-ghost #F3F1FB - \--bg-dark #241A42 - \--bg-dark2 #362A5F - \--bg-dark3 #4D3C82 - \--text-body #3D3260 - \--text-muted #6B5F94 - \--text-faint #9E93C4 - \--text-inv #C8BFE0 - \--text-inv2 #E4DFEF - \--white #FFFFFF - \--surface #FFFFFF - \--surface-alt #F5F2FC - \--border #DBD4F0 - \--border-lite #EEE9F8 - \--surface-3 #EDE8F8 ## Type Headings Poppins EPOWERdoc at a glance Body Poppins Clear, readable paragraphs for clinicians, buyers and patients alike. - 1.05rem · 16.8pxEPOWERdoc - 1rem · 16pxEPOWERdoc - .95rem · 15.2pxEPOWERdoc - .93rem · 14.88pxEPOWERdoc - .92rem · 14.72pxEPOWERdoc - .9rem · 14.4pxEPOWERdoc - .86rem · 13.76pxEPOWERdoc - .8rem · 12.8pxEPOWERdoc ## Shape & depth Cards and panels: 9px corners · buttons and chips: 50px. ### Corner radii - 50% used in 14 rules - 10px used in 4 rules - 2px used in 3 rules - 100px used in 3 rules - 20px used in 2 rules - 7px used in 2 rules - 9px used in 2 rules - 6px used in 2 rules - 11px used in 2 rules - 12px used in 1 rule ### Shadows - 0 0 0 9px rgba(0,163,137,0) used in 1 rule - 0 0 0 3px rgba(0,163,137,.12) used in 1 rule - 0 32px 80px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.04) inset used in 1 rule - 0 8px 32px rgba(0,0,0,.28) used in 1 rule - 0 8px 30px rgba(27,20,51,.2), 0 0 0 1px rgba(27,20,51,.05) used in 1 rule - 0 8px 32px rgba(27,20,51,.1), 0 2px 8px rgba(27,20,51,.06) used in 1 rule ### Gradients - linear-gradient(#fff 0 0) used in 2 rules - linear-gradient(135deg, rgba(0,163,137,.04), transparent) used in 2 rules - radial-gradient(ellipse 85% 80% at 50% 50%, black 35%, transparent 100%) used in 2 rules - radial-gradient(circle, rgba(0,163,137,.13) 0%, transparent 68%) used in 1 rule - radial-gradient(circle, rgba(122,104,174,.12) 0%, transparent 65%) used in 1 rule - linear-gradient(120deg, #00b898 0%, #9585c4 100%) used in 1 rule Breakpoints: 480px · 768px · 1024px ## Voice Tone: professional. Energy: low. Written for patients and healthcare professionals. ## 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%2F106979458.md?alt=media). ``` --- generator: clinical-terminal-brand-kit company: "EPOWERdoc" domain: "epowerdoc.com" colors: primary: "#7A68AE" onPrimary: "#FFFFFF" dark: "#241A42" accent: "#3D3260" highlight: "#00A389" background: "#FFFFFF" ground: mode: light hex: "#FFFFFF" ink: "#241A42" accent: "#7A68AE" fonts: heading: "Poppins" body: "Poppins" radius: card: "9px" button: "50px" --- # Design System — EPOWERdoc > Read from EPOWERdoc's public website (epowerdoc.com) by Clinical Terminal. Not reviewed by EPOWERdoc. > Use it as inspiration: borrow the ideas, not EPOWERdoc's name, logo or identity. ## Ground - **Light ground** (#FFFFFF), from EPOWERdoc's site background #FFFFFF. Pages and panels sit on it. - Main text: #241A42 (16.14:1 on the ground). - Secondary text is #241A42 at 88% / 76% / 60%; hairlines and plate borders #241A42 at 16%. ## Color - **Accent on the ground: #7A68AE** (4.75:1). Use it for kickers, key numbers and one highlight per screen, not for large fills. - **Primary #7A68AE** for filled shapes (buttons, chips, bars), with #FFFFFF text on it (4.75:1). - Secondary accent #3D3260: charts and a second data series only. - Highlight #00A389 (from EPOWERdoc's logo gradient): sparing emphasis, never body text. - Quote every hex exactly as written above. ## Type - Headlines: **Poppins**. Body: **Poppins**. Both on Google Fonts. ## Shape - Cards and panels: 9px corners. Buttons and chips: 50px. ## Voice - Tone: professional. Energy: low. Written for patients and healthcare professionals. - Headlines are short and concrete. ## Tokens from the site's stylesheets ### Other named colors - `--teal`: `#00A389` - `--teal-dark`: `#007D69` - `--teal-deep`: `#005748` - `--teal-hover`: `#00B898` - `--teal-soft`: `#CCF0EA` - `--teal-light`: `#CCF0EA` - `--teal-ghost`: `#EDFAF7` - `--purple`: `#7A68AE` - `--purple-dark`: `#5B4E87` - `--purple-deep`: `#3B2F68` - `--purple-hover`: `#8F7EC0` - `--purple-mid`: `#9585C4` - `--purple-soft`: `#E4DFF4` - `--purple-ghost`: `#F3F1FB` - `--bg-dark`: `#241A42` - `--bg-dark2`: `#362A5F` - `--bg-dark3`: `#4D3C82` - `--text-body`: `#3D3260` - `--text-muted`: `#6B5F94` - `--text-faint`: `#9E93C4` - `--text-inv`: `#C8BFE0` - `--text-inv2`: `#E4DFEF` - `--white`: `#FFFFFF` - `--surface`: `#FFFFFF` - `--surface-alt`: `#F5F2FC` - `--border`: `#DBD4F0` - `--border-lite`: `#EEE9F8` - `--surface-3`: `#EDE8F8` ### Typefaces - Poppins (`--font`) — on Google Fonts ### Type scale (most-used sizes) `1.05rem` · `1rem` · `.95rem` · `.93rem` · `.92rem` · `.9rem` · `.86rem` · `.8rem` · `.78rem` · `.72rem` · `.7rem` · `.68rem` ### Letter-spacing `-0.03em` (4) · `.05em` (3) · `.04em` (3) · `.06em` (2) · `.1em` (2) · `-.04em` (2) ### Corner radii (most-used) `50%` · `10px` · `2px` · `100px` · `20px` · `7px` · `9px` · `6px` · `11px` · `12px` ### Shadows - `0 0 0 9px rgba(0,163,137,0)` - `0 0 0 3px rgba(0,163,137,.12)` - `0 32px 80px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.04) inset` - `0 8px 32px rgba(0,0,0,.28)` - `0 8px 30px rgba(27,20,51,.2), 0 0 0 1px rgba(27,20,51,.05)` - `0 8px 32px rgba(27,20,51,.1), 0 2px 8px rgba(27,20,51,.06)` ### Gradients - `linear-gradient(#fff 0 0)` - `linear-gradient(135deg, rgba(0,163,137,.04), transparent)` - `radial-gradient(ellipse 85% 80% at 50% 50%, black 35%, transparent 100%)` - `radial-gradient(circle, rgba(0,163,137,.13) 0%, transparent 68%)` - `radial-gradient(circle, rgba(122,104,174,.12) 0%, transparent 65%)` - `linear-gradient(120deg, #00b898 0%, #9585c4 100%)` ### Breakpoints 480px · 768px · 1024px ```