--- generator: clinical-terminal-brand-kit company: "AGS Health" domain: "agshealth.com" colors: primary: "#05C16E" onPrimary: "#28293D" dark: "#28293C" background: "#FFFFFF" ground: mode: light hex: "#FFFFFF" ink: "#28293C" accent: "#008839" fonts: heading: "Archivo" body: "Archivo" radius: card: "4px" button: "4px" --- # Design System — AGS Health > Read from AGS Health's public website (agshealth.com) by Clinical Terminal. Not reviewed by AGS Health. > Use it as inspiration: borrow the ideas, not AGS Health's name, logo or identity. ## Ground - **Light ground** (#FFFFFF), from AGS Health's site background #FFFFFF. Pages and panels sit on it. - Main text: #28293C (14.26:1 on the ground). - Secondary text is #28293C at 88% / 76% / 60%; hairlines and plate borders #28293C at 16%. ## Color - **Accent on the ground: #008839** (4.58:1), adjusted from AGS Health's primary #05C16E so it stays readable. Use it for kickers, key numbers and one highlight per screen, not for large fills. - **Primary #05C16E** for filled shapes (buttons, chips, bars), with #28293D text on it (6.01:1). - Quote every hex exactly as written above. ## Type - Headlines: **Archivo**. Body: **Archivo**. Both on Google Fonts. - AGS Health's site uses Staff / Staff; these are the closest free look-alikes. ## Shape - Cards and panels: 4px corners. Buttons and chips: 4px. ## Voice - Tone: professional. Energy: low. Written for businesses. - Headlines are short and concrete. ## Tokens from the site's stylesheets ### Color ramps - **Ep Gray** (`--ep-gray-N`): 50 `#F9FAFB` · 100 `#F3F4F6` · 200 `#E5E7EB` · 300 `#D1D5DB` · 400 `#9CA3AF` · 500 `#6B7280` · 600 `#4B5563` · 700 `#374151` · 800 `#1F2937` · 900 `#111827` ### Other named colors - `--viewer-primary-color`: `#343434` - `--viewer-icons-color`: `#F2F2F6` - `--viewer-icons-hover-bgcolor`: `#453838` - `--ep-primary`: `#007CBA` - `--ep-primary-hover`: `#005A87` - `--ep-primary-light`: `#E6F3FF` - `--ep-secondary`: `#50575E` - `--ep-secondary-hover`: `#3C434A` - `--ep-secondary-light`: `#F6F7F7` - `--ep-success`: `#00A32A` - `--ep-success-light`: `#E6F7E6` - `--ep-warning`: `#DBA617` - `--ep-warning-light`: `#FFF8E5` - `--ep-error`: `#D63638` - `--ep-error-light`: `#FFEAEA` - `--ep-info`: `#72AEE6` - `--ep-info-light`: `#E5F5FF` - `--ep-white`: `#FFFFFF` - `--ep-black`: `#000000` - `--wpds-color-background-surface-neutral`: `#FCFCFC` - `--wpds-color-background-surface-neutral-strong`: `#FFFFFF` - `--wpds-color-background-surface-neutral-weak`: `#F4F4F4` - `--wpds-color-background-surface-brand`: `#ECF0FA` - `--wpds-color-background-surface-success`: `#C6F7CD` - `--wpds-color-background-surface-success-weak`: `#EBFFED` - `--wpds-color-background-surface-info`: `#DEEBFA` - `--wpds-color-background-surface-info-weak`: `#F3F9FF` - `--wpds-color-background-surface-warning`: `#FDE6BE` - `--wpds-color-background-surface-warning-weak`: `#FFF7E1` - `--wpds-color-background-surface-caution`: `#FEE995` - `--wpds-color-background-surface-caution-weak`: `#FFF9CA` - `--wpds-color-background-surface-error`: `#F6E6E3` - `--wpds-color-background-surface-error-weak`: `#FFF6F5` - `--wpds-color-background-interactive-neutral-strong`: `#2D2D2D` - `--wpds-color-background-interactive-neutral-strong-active`: `#1E1E1E` - `--wpds-color-background-interactive-neutral-strong-disabled`: `#E6E6E6` - `--wpds-color-background-interactive-neutral-weak`: `#000000` - `--wpds-color-background-interactive-neutral-weak-active`: `#EDEDED` - `--wpds-color-background-interactive-neutral-weak-disabled`: `#000000` - `--wpds-color-background-interactive-brand-strong`: `#3858E9` - `--wpds-color-background-interactive-brand-strong-active`: `#2E49D9` - `--wpds-color-background-interactive-brand-strong-disabled`: `#E6E6E6` - `--wpds-color-background-interactive-brand-weak`: `#000000` - `--wpds-color-background-interactive-brand-weak-active`: `#E6EAF4` - `--wpds-color-background-interactive-brand-weak-disabled`: `#000000` - `--wpds-color-background-interactive-error`: `#000000` - `--wpds-color-background-interactive-error-active`: `#FFF6F5` - `--wpds-color-background-interactive-error-disabled`: `#000000` - `--wpds-color-background-interactive-error-strong`: `#CC1818` - `--wpds-color-background-interactive-error-strong-active`: `#B90000` - `--wpds-color-background-interactive-error-strong-disabled`: `#E6E6E6` - `--wpds-color-background-interactive-error-weak`: `#000000` - `--wpds-color-background-interactive-error-weak-active`: `#F6E6E3` - `--wpds-color-background-interactive-error-weak-disabled`: `#000000` - `--wpds-color-background-track-neutral-weak`: `#F0F0F0` - `--wpds-color-background-track-neutral`: `#DBDBDB` - `--wpds-color-background-thumb-neutral-weak`: `#8D8D8D` - `--wpds-color-background-thumb-neutral-weak-active`: `#6E6E6E` - `--wpds-color-background-thumb-brand`: `#3858E9` - `--wpds-color-background-thumb-brand-active`: `#3858E9` - `--wpds-color-background-thumb-brand-disabled`: `#DBDBDB` - `--wpds-color-background-thumb-neutral-weak-disabled`: `#DBDBDB` - `--wpds-color-foreground-content-neutral`: `#1E1E1E` - `--wpds-color-foreground-content-neutral-weak`: `#707070` - `--wpds-color-foreground-content-success`: `#002900` - `--wpds-color-foreground-content-success-weak`: `#008030` - `--wpds-color-foreground-content-info`: `#001B4F` - `--wpds-color-foreground-content-info-weak`: `#006BD7` - `--wpds-color-foreground-content-warning`: `#2E1900` - `--wpds-color-foreground-content-warning-weak`: `#926300` - `--wpds-color-foreground-content-caution`: `#281D00` - `--wpds-color-foreground-content-caution-weak`: `#826A00` - `--wpds-color-foreground-content-error`: `#470000` - `--wpds-color-foreground-content-error-weak`: `#CC1818` - `--wpds-color-foreground-interactive-neutral`: `#1E1E1E` - `--wpds-color-foreground-interactive-neutral-active`: `#1E1E1E` - `--wpds-color-foreground-interactive-neutral-disabled`: `#8D8D8D` - `--wpds-color-foreground-interactive-neutral-strong`: `#F0F0F0` - `--wpds-color-foreground-interactive-neutral-strong-active`: `#F0F0F0` - `--wpds-color-foreground-interactive-neutral-strong-disabled`: `#8D8D8D` - `--wpds-color-foreground-interactive-neutral-weak`: `#707070` - `--wpds-color-foreground-interactive-neutral-weak-active`: `#1E1E1E` - `--wpds-color-foreground-interactive-neutral-weak-disabled`: `#8D8D8D` - `--wpds-color-foreground-interactive-brand`: `#3858E9` - `--wpds-color-foreground-interactive-brand-active`: `#0B0070` - `--wpds-color-foreground-interactive-brand-disabled`: `#8D8D8D` - `--wpds-color-foreground-interactive-brand-strong`: `#EFF0F2` - `--wpds-color-foreground-interactive-brand-strong-active`: `#EFF0F2` - `--wpds-color-foreground-interactive-brand-strong-disabled`: `#8D8D8D` - `--wpds-color-foreground-interactive-error`: `#CC1818` - `--wpds-color-foreground-interactive-error-active`: `#470000` - `--wpds-color-foreground-interactive-error-disabled`: `#8D8D8D` - `--wpds-color-foreground-interactive-error-strong`: `#F2EFEF` - `--wpds-color-foreground-interactive-error-strong-active`: `#F2EFEF` - `--wpds-color-foreground-interactive-error-strong-disabled`: `#8D8D8D` - `--wpds-color-stroke-surface-neutral`: `#DBDBDB` - `--wpds-color-stroke-surface-neutral-weak`: `#F0F0F0` - `--wpds-color-stroke-surface-neutral-strong`: `#8D8D8D` - `--wpds-color-stroke-surface-brand`: `#B0BBD6` - `--wpds-color-stroke-surface-brand-strong`: `#3858E9` - `--wpds-color-stroke-surface-success`: `#94D29E` - `--wpds-color-stroke-surface-success-strong`: `#008030` - `--wpds-color-stroke-surface-info`: `#A9C6E7` - `--wpds-color-stroke-surface-info-strong`: `#006BD7` - `--wpds-color-stroke-surface-warning`: `#E1BC7C` - `--wpds-color-stroke-surface-warning-strong`: `#926300` - `--wpds-color-stroke-surface-caution`: `#CFC28D` - `--wpds-color-stroke-surface-caution-strong`: `#826A00` - `--wpds-color-stroke-surface-error`: `#DAB1AA` - `--wpds-color-stroke-surface-error-strong`: `#CC1818` - `--wpds-color-stroke-interactive-neutral`: `#8D8D8D` - `--wpds-color-stroke-interactive-neutral-active`: `#6E6E6E` - `--wpds-color-stroke-interactive-neutral-disabled`: `#DBDBDB` - `--wpds-color-stroke-interactive-neutral-strong`: `#6E6E6E` - `--wpds-color-stroke-interactive-brand`: `#3858E9` - `--wpds-color-stroke-interactive-brand-active`: `#2337C8` - `--wpds-color-stroke-interactive-brand-disabled`: `#DBDBDB` - `--wpds-color-stroke-interactive-error`: `#CC1818` - `--wpds-color-stroke-interactive-error-active`: `#9D0000` - `--wpds-color-stroke-interactive-error-disabled`: `#DBDBDB` - `--wpds-color-stroke-interactive-error-strong`: `#CC1818` - `--wpds-color-stroke-focus`: `#3858E9` - `--ecs-color-primary`: `#2271B1` - `--ecs-color-secondary`: `#135E96` - `--ecs-color-text`: `#1E1E1E` - `--ecs-color-accent`: `#D63638` - `--ecs-color-bg`: `#FFFFFF` - `--ecs-color-bg-alt`: `#F6F6F6` - `--e-global-color-primary`: `#03A55D` - `--e-global-color-secondary`: `#143381` - `--e-global-color-text`: `#7A7A7A` - `--e-global-color-accent`: `#28293D` - `--e-global-color-8c85144`: `#05C16E` - `--e-global-color-8d08920`: `#0FD37D` - `--e-global-color-6209d8c`: `#3F5DA7` - `--e-global-color-df534e6`: `#A3A9AC` - `--e-global-color-4f8cc3e`: `#E5E6E7` - `--e-global-color-07391b2`: `#FFFFFF` - `--e-global-color-1fef6ea`: `#5E5F60` - `--e-global-color-a4b0c63`: `#2E2F45` - `--e-global-color-bd375a8`: `#5C5E87` - `--e-global-color-d306b11`: `#232437` - `--e-global-color-3321f0b`: `#F9F9F9` - `--e-global-color-a8fa57e`: `#29833E` - `--global--color-dark-blue`: `#143381` - `--global--color-medium-blue`: `#3F5DA7` - `--global--color-green`: `#05C16E` - `--global--color-dark-green`: `#03A55D` - `--global--color-light-green`: `#0FD37D` - `--global--color-navy`: `#28293D` - `--global--color-medium-gray`: `#A3A9AC` - `--global--color-light-gray`: `#E5E6E7` - `--global--color-dark-gray`: `#5E5F60` - `--global--color-white`: `#FFFFFF` - `--e-social-icon-icon-color`: `#FFFFFF` ### Typefaces - Staff (`--e-global-typography-primary-font-family`) - Montserrat — on Google Fonts - Staff – Regular - Staff" !important ### Type scale (most-used sizes) `60px` · `40px` · `27px` · `24px` · `20px` · `18px` · `16px` · `1rem` · `15px` · `14px` · `13px` · `12px` ### Letter-spacing `.01em` (34) · `.1px` (30) · `.5px` (13) · `.01px` (6) · `.05em` (2) · `.04em` (1) ### Corner radii (most-used) `3px` · `4px` · `50%` · `5px` · `6px` · `8px` · `2px` · `10px` · `50px` · `10%` ### Shadows - `0px 0px 0px 3px blue` - `0 3px 10px rgba(32,61,90,.15)` - `0 0 5px rgba(0,0,0,.3)` - `none !important` - `0 0 2px 0 rgba(183,8,78,.6)` - `0 0 2px 10px rgba(183,8,78,0)` ### Gradients - `linear-gradient(#fff 20%,#f6f6f6 50%,#eee 52%,#f4f4f4 100%)` - `linear-gradient(#3875d7 20%,#2a62bc 90%)` - `linear-gradient(#eee 20%,#fff 80%)` - `linear-gradient(135deg,#0693e3 0%,#9b51e0 100%)` - `linear-gradient(135deg,#7adcb4 0%,#00d082 100%)` - `linear-gradient(135deg,#fcb900 0%,#ff6900 100%)` ### Breakpoints 479px · 576px · 600px · 641px · 767px · 768px · 782px · 960px · 992px · 1024px · 1025px · 1200px · 1800px