[Design systems](/design-systems/) / Office Ally # Office Ally design system cms.officeally.com Read from Office Ally's public website by Clinical Terminal. Not reviewed by Office Ally. Copy it and paste it into Claude as inspiration. Corrections or removal: ![Office Ally homepage](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fthumbs%2F100108.jpg?alt=media) ## Palette - Ground \#F5F6F9 \--neutral-95 - Ink \#00125F - Accent on the ground \#0029D6 - Primary \#0029D6 \--primary-40 - On primary \#FFFFFF \--white - Dark \#00125F \--primary-20 - Site background \#F5F6F9 \--neutral-95 ## Color ramps Neutral 10 \#1A1B23 20 \#303038 30 \#46464E 40 \#5E5E67 50 \#747883 60 \#91949C 70 \#A7AAB2 80 \#DADDE5 90 \#EDEFF5 95 \#F5F6F9 Primary 10 \#0C0459 20 \#00125F 30 \#0021AB 40 \#0029D6 50 \#4F66FF 60 \#7387FF 70 \#97A5FF 80 \#BBC3FF 90 \#DEE2FF 95 \#EFEFFF Alert 10 \#680003 20 \#930006 30 \#BA1B1B 40 \#DD3730 50 \#FF5449 60 \#FF897A 70 \#FFB4A9 80 \#FFDAD4 90 \#FFEDE9 95 \#FCF4F2 ## Other named colors - \--maya #24C1FF - \--container #F5F6F9 - \--sky #C7F1FF - \--indigo #0C0459 - \--white #FFFFFF - \--pure #0029D6 - \--lp-heading-blue #00326D ## Type Headings Archivo · closest free match for Modernera Office Ally at a glance Body Archivo · closest free match for Modernera Clear, readable paragraphs for clinicians, buyers and patients alike. - 42pxOffice Ally - 36pxOffice Ally - 32pxOffice Ally - 30pxOffice Ally - 28pxOffice Ally - 24pxOffice Ally - 18pxOffice Ally - 17pxOffice Ally ## Shape & depth Cards and panels: 10px corners · buttons and chips: 5px. ### Corner radii - 20px used in 49 rules - 8px used in 22 rules - 5px used in 20 rules - 10px used in 20 rules - 3px used in 18 rules - 15px used in 18 rules - 30px used in 17 rules - 16px used in 15 rules - 12px used in 10 rules - 1px used in 9 rules ### Shadows - 0 4px 54px #3e4c7e36 used in 8 rules - 0 25px 25px #00125f1a, 0 15px 25px #24c1ff26 used in 3 rules - 0 4px 44px #18253f59 used in 3 rules - 0 0 3px 1px #3898ec used in 2 rules - 0 2px 5px #0000 used in 2 rules - 0 15px 25px #24c1ff26, 0 25px 25px #00125f1a used in 2 rules ### Gradients - linear-gradient(0deg, #000 85%, #0000 100%) used in 2 rules - linear-gradient(#fff0 100%, #fff) used in 1 rule - linear-gradient(0deg, #fff, #fff 0% 0%, #fff0) used in 1 rule - linear-gradient(#eeedf4, #eeedf5) used in 1 rule - linear-gradient(#999, #24c1ff) used in 1 rule - linear-gradient(#0029d600, #0029d600) used in 1 rule Breakpoints: 479px · 767px · 768px · 991px · 1280px · 1440px · 1920px ## Voice Tone: professional. Energy: medium. 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%2F100108.md?alt=media). ``` --- generator: clinical-terminal-brand-kit company: "Office Ally" domain: "cms.officeally.com" colors: primary: "#0029D6" onPrimary: "#FFFFFF" dark: "#00125F" background: "#F5F6F9" ground: mode: light hex: "#F5F6F9" ink: "#00125F" accent: "#0029D6" fonts: heading: "Archivo" body: "Archivo" radius: card: "10px" button: "5px" --- # Design System — Office Ally > Read from Office Ally's public website (cms.officeally.com) by Clinical Terminal. Not reviewed by Office Ally. > Use it as inspiration: borrow the ideas, not Office Ally's name, logo or identity. ## Ground - **Light ground** (#F5F6F9), from Office Ally's site background #F5F6F9. Pages and panels sit on it. - Main text: #00125F (15.52:1 on the ground). - Secondary text is #00125F at 88% / 76% / 60%; hairlines and plate borders #00125F at 16%. ## Color - **Accent on the ground: #0029D6** (8.49:1). Use it for kickers, key numbers and one highlight per screen, not for large fills. - **Primary #0029D6** for filled shapes (buttons, chips, bars), with #FFFFFF text on it (9.18:1). - Quote every hex exactly as written above. ## Type - Headlines: **Archivo**. Body: **Archivo**. Both on Google Fonts. - Office Ally's site uses Modernera / Modernera; these are the closest free look-alikes. ## Shape - Cards and panels: 10px corners. Buttons and chips: 5px. ## Voice - Tone: professional. Energy: medium. Written for patients and healthcare professionals. - Headlines are short and concrete. ## Tokens from the site's stylesheets ### Color ramps - **Neutral** (`--neutral-N`): 10 `#1A1B23` · 20 `#303038` · 30 `#46464E` · 40 `#5E5E67` · 50 `#747883` · 60 `#91949C` · 70 `#A7AAB2` · 80 `#DADDE5` · 90 `#EDEFF5` · 95 `#F5F6F9` - **Primary** (`--primary-N`): 10 `#0C0459` · 20 `#00125F` · 30 `#0021AB` · 40 `#0029D6` · 50 `#4F66FF` · 60 `#7387FF` · 70 `#97A5FF` · 80 `#BBC3FF` · 90 `#DEE2FF` · 95 `#EFEFFF` - **Alert** (`--alert-N`): 10 `#680003` · 20 `#930006` · 30 `#BA1B1B` · 40 `#DD3730` · 50 `#FF5449` · 60 `#FF897A` · 70 `#FFB4A9` · 80 `#FFDAD4` · 90 `#FFEDE9` · 95 `#FCF4F2` ### Other named colors - `--maya`: `#24C1FF` - `--container`: `#F5F6F9` - `--sky`: `#C7F1FF` - `--indigo`: `#0C0459` - `--white`: `#FFFFFF` - `--pure`: `#0029D6` - `--lp-heading-blue`: `#00326D` ### Typefaces - Modernera - Modernera mono - Inconsolata - Lato — on Google Fonts ### Type scale (most-used sizes) `42px` · `36px` · `32px` · `30px` · `28px` · `24px` · `18px` · `17px` · `16px` · `15px` · `14px` · `12px` ### Letter-spacing `-.034px` (12) · `-.522px` (9) · `-2.56px` (8) · `-.01em` (6) · `-1.7px` (6) · `-.6px` (6) ### Corner radii (most-used) `20px` · `8px` · `5px` · `10px` · `3px` · `15px` · `30px` · `16px` · `12px` · `1px` ### Shadows - `0 4px 54px #3e4c7e36` - `0 25px 25px #00125f1a, 0 15px 25px #24c1ff26` - `0 4px 44px #18253f59` - `0 0 3px 1px #3898ec` - `0 2px 5px #0000` - `0 15px 25px #24c1ff26, 0 25px 25px #00125f1a` ### Gradients - `linear-gradient(0deg, #000 85%, #0000 100%)` - `linear-gradient(#fff0 100%, #fff)` - `linear-gradient(0deg, #fff, #fff 0% 0%, #fff0)` - `linear-gradient(#eeedf4, #eeedf5)` - `linear-gradient(#999, #24c1ff)` - `linear-gradient(#0029d600, #0029d600)` ### Breakpoints 479px · 767px · 768px · 991px · 1280px · 1440px · 1920px ```