[Design systems](/design-systems/) / AnnexMed, Inc # AnnexMed, Inc design system annexmed.com Read from AnnexMed, Inc's public website by Clinical Terminal. Not reviewed by AnnexMed, Inc. Copy it and paste it into Claude as inspiration. Corrections or removal: ![AnnexMed, Inc logo](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Flogos%2F100923642.jpg?alt=media) ## Palette - Ground \#FFFFFF - Ink \#4B4B4B - Accent on the ground \#2574D5 - Primary \#408DF0 - On primary \#1C1C1C - Secondary accent \#2D9C89 \--primary-color - Dark \#4B4B4B - Site background \#FFFFFF ## Other named colors - \--base-color #3858E9 - \--primary-color #2D9C89 - \--secondary-color #191919 - \--third-color #2D9C89 - \--dark-color #191919 - \--link-color #2D9C89 - \--link-color-hover #2D9C89 - \--link-color-active #2D9C89 - \--gradient-color-from #FB5850 - \--gradient-color-to #FFA200 - \--e-global-color-primary #0E2A47 - \--e-global-color-secondary #191919 - \--e-global-color-text #353535 - \--e-global-color-accent #000000 - \--e-global-color-f2b9d1a #EE2B7B - \--e-global-color-a661692 #353535 - \--e-global-color-f3f8065 #237869 - \--e-global-color-7346b9d #626161 - \--e-global-color-962a5c4 #128770 - \--e-global-color-741fbe2 #0EA588 - \--divider-color #4CA797 ## Type Headings Poppins AnnexMed, Inc at a glance Body Poppins Clear, readable paragraphs for clinicians, buyers and patients alike. - 32pxAnnexMed, Inc - 30pxAnnexMed, Inc - 28pxAnnexMed, Inc - 22pxAnnexMed, Inc - 20pxAnnexMed, Inc - 18pxAnnexMed, Inc - 16pxAnnexMed, Inc - 15pxAnnexMed, Inc ## Shape & depth Cards and panels: 5px corners · buttons and chips: 10px. ### Corner radii - 2px used in 86 rules - 50% used in 36 rules - 4px used in 17 rules - 8px used in 6 rules - 1px used in 4 rules - 100% used in 4 rules - 9999px used in 3 rules - 27px used in 2 rules - 10px used in 1 rule ### Shadows - 0 0 0 #0000 used in 10 rules - inset 0 0 0 1px #0003 used in 8 rules - 0 1px 2px #0000000d,0 2px 3px #0000000a,0 6px 6px #00000008,0 8px 8px #00000005 used in 8 rules - inset 0 0 0 1px #1e1e1e used in 6 rules - inset 0 0 0 1px #ddd used in 6 rules - 0 1px 1px #00000008,0 1px 2px #00000005,0 3px 3px #00000005,0 4px 4px #00000003 used in 6 rules ### Gradients - linear-gradient(-45deg,#0000 48%,#ddd 0,#ddd 52%,#0000 0) used in 10 rules - linear-gradient(45deg,#e0e0e0 25%,#0000 0,#0000 75%,#e0e0e0 0,#e0e0e0) used in 8 rules - linear-gradient(180deg, #494B4E 0%, #202A3D 100%) used in 5 rules - linear-gradient(180deg, #202A3D 0%, #494B4E 100%) used in 5 rules - linear-gradient(-45deg,#fafafa 33%,#e0e0e0 0,#e0e0e0 70%,#fafafa 0) used in 2 rules - linear-gradient(-45deg,#0000 47.5%,#fff 0,#fff 52.5%,#0000 0) used in 2 rules Breakpoints: 480px · 600px · 767px · 768px · 781px · 782px · 959px · 960px · 1024px · 1080px · 1199px · 1200px ## Voice Tone: professional. Energy: low. Written for businesses. ## 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%2F100923642.md?alt=media). ``` --- generator: clinical-terminal-brand-kit company: "AnnexMed, Inc" domain: "annexmed.com" colors: primary: "#408DF0" onPrimary: "#1C1C1C" dark: "#4B4B4B" accent: "#2D9C89" background: "#FFFFFF" ground: mode: light hex: "#FFFFFF" ink: "#4B4B4B" accent: "#2574D5" fonts: heading: "Poppins" body: "Poppins" radius: card: "5px" button: "10px" --- # Design System — AnnexMed, Inc > Read from AnnexMed, Inc's public website (annexmed.com) by Clinical Terminal. Not reviewed by AnnexMed, Inc. > Use it as inspiration: borrow the ideas, not AnnexMed, Inc's name, logo or identity. ## Ground - **Light ground** (#FFFFFF), from AnnexMed, Inc's site background #FFFFFF. Pages and panels sit on it. - Main text: #4B4B4B (8.72:1 on the ground). - Secondary text is #4B4B4B at 88% / 76% / 60%; hairlines and plate borders #4B4B4B at 16%. ## Color - **Accent on the ground: #2574D5** (4.63:1), adjusted from AnnexMed, Inc's primary #408DF0 so it stays readable. Use it for kickers, key numbers and one highlight per screen, not for large fills. - **Primary #408DF0** for filled shapes (buttons, chips, bars), with #1C1C1C text on it (5.1:1). - Secondary accent #2D9C89: charts and a second data series only. - Quote every hex exactly as written above. ## Type - Headlines: **Poppins**. Body: **Poppins**. Both on Google Fonts. ## Shape - Cards and panels: 5px corners. Buttons and chips: 10px. ## Voice - Tone: professional. Energy: low. Written for businesses. - Headlines are short and concrete. ## Tokens from the site's stylesheets ### Other named colors - `--base-color`: `#3858E9` - `--primary-color`: `#2D9C89` - `--secondary-color`: `#191919` - `--third-color`: `#2D9C89` - `--dark-color`: `#191919` - `--link-color`: `#2D9C89` - `--link-color-hover`: `#2D9C89` - `--link-color-active`: `#2D9C89` - `--gradient-color-from`: `#FB5850` - `--gradient-color-to`: `#FFA200` - `--e-global-color-primary`: `#0E2A47` - `--e-global-color-secondary`: `#191919` - `--e-global-color-text`: `#353535` - `--e-global-color-accent`: `#000000` - `--e-global-color-f2b9d1a`: `#EE2B7B` - `--e-global-color-a661692`: `#353535` - `--e-global-color-f3f8065`: `#237869` - `--e-global-color-7346b9d`: `#626161` - `--e-global-color-962a5c4`: `#128770` - `--e-global-color-741fbe2`: `#0EA588` - `--divider-color`: `#4CA797` ### Typefaces - Roboto (`--e-global-typography-primary-font-family`) — on Google Fonts - Roboto Slab (`--e-global-typography-secondary-font-family`) — on Google Fonts - Poppins — on Google Fonts - neue-haas-grotesk-display ### Type scale (most-used sizes) `32px` · `30px` · `28px` · `22px` · `20px` · `18px` · `16px` · `15px` · `14px` · `13px` · `12px` · `11px` ### Letter-spacing `1px` (1) ### Corner radii (most-used) `2px` · `50%` · `4px` · `8px` · `1px` · `100%` · `9999px` · `27px` · `10px` ### Shadows - `0 0 0 #0000` - `inset 0 0 0 1px #0003` - `0 1px 2px #0000000d,0 2px 3px #0000000a,0 6px 6px #00000008,0 8px 8px #00000005` - `inset 0 0 0 1px #1e1e1e` - `inset 0 0 0 1px #ddd` - `0 1px 1px #00000008,0 1px 2px #00000005,0 3px 3px #00000005,0 4px 4px #00000003` ### Gradients - `linear-gradient(-45deg,#0000 48%,#ddd 0,#ddd 52%,#0000 0)` - `linear-gradient(45deg,#e0e0e0 25%,#0000 0,#0000 75%,#e0e0e0 0,#e0e0e0)` - `linear-gradient(180deg, #494B4E 0%, #202A3D 100%)` - `linear-gradient(180deg, #202A3D 0%, #494B4E 100%)` - `linear-gradient(-45deg,#fafafa 33%,#e0e0e0 0,#e0e0e0 70%,#fafafa 0)` - `linear-gradient(-45deg,#0000 47.5%,#fff 0,#fff 52.5%,#0000 0)` ### Breakpoints 480px · 600px · 767px · 768px · 781px · 782px · 959px · 960px · 1024px · 1080px · 1199px · 1200px · 1440px ```