[Design systems](/design-systems/) / InterSystems # InterSystems design system intersystems.com Read from InterSystems's public website by Clinical Terminal. Not reviewed by InterSystems. Copy it and paste it into Claude as inspiration. Corrections or removal: ![InterSystems homepage](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fthumbs%2F101556897.jpg?alt=media) ## Palette - Ground \#FFFFFF \--color-white - Ink \#000000 - Accent on the ground \#333695 - Primary \#333695 - On primary \#FFFFFF \--color-white - Secondary accent \#C75000 \--color-orange - Dark \#000000 \--color-black - Site background \#FFFFFF \--color-white ## Color ramps Color Gray 1 \#FAF9F9 2 \#F0F0F0 3 \#F1ECED 4 \#E6DFE0 5 \#949494 6 \#CACBD2 7 \#EEEEEE 8 \#353535 Color Blue 1 \#323694 2 \#5263FF 3 \#39444E ## Other named colors - \--color-blue-dark #39444E - \--color-gray #F8F9F9 - \--color-orange #C75000 - \--color-green #00B2A9 - \--color-blue #5668FF - \--color-white #FFFFFF - \--color-black #000000 - \--error #EE0120 - \--success #28A745 - \--border-color #DCDCDC - \--bulletColor #10EDDC - \--gradientOverlayColor #000000 - \--tab-inactive-color #CDCDCD - \--tab-primary-color #39444E - \--tab-primary-bg #39444E - \--tab-active-color #FFFFFF - \--tab-active-bg #39444E - \--tab-border-color #39444E - \--tab-label-color #000000 - \--active-bg #F3F4F6 - \--color-orange-1 #CB5000 - \--color-orange-2 #AE4600 - \--color-green-1 #18EDDD - \--color-black-1 #3B434D ## Type Headings Archivo · closest free match for Oxygen InterSystems at a glance Body Archivo · closest free match for Oxygen Clear, readable paragraphs for clinicians, buyers and patients alike. - 36pxInterSystems - 30pxInterSystems - 26pxInterSystems - 24pxInterSystems - 20pxInterSystems - 18pxInterSystems - 17pxInterSystems - 16pxInterSystems ## Shape & depth Cards and panels: 8px corners · buttons and chips: 50px. ### Corner radii - 4px used in 40 rules - 50px used in 32 rules - 8px used in 30 rules - 50% used in 26 rules - 2px used in 26 rules - 100% used in 15 rules - 26px used in 6 rules - 13px used in 6 rules - 2.5px used in 5 rules - 5px used in 5 rules ### Shadows - 3px 3px 7px 0 rgba(0,0,0,.2) used in 7 rules - 2px 2px 7px 0 rgba(0,0,0,.13) used in 6 rules - 0 1px 2px #00000026 used in 3 rules - 0 1px 1px #23282f26,0 0 0 1px #23282f33 used in 3 rules - 0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #23282f1a used in 3 rules - 0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #ffffff80 used in 3 rules ### Gradients - linear-gradient(#0000,#000000bf) used in 4 rules - linear-gradient(90deg,rgba(0,0,0,.75) 27%,transparent 71%) used in 3 rules - linear-gradient(170deg,#00aea4,#016965) used in 3 rules - linear-gradient(90deg,rgba(0,0,0,.75) 30%,transparent 79%) used in 2 rules - linear-gradient(170deg,#91c0ea,#33379e) used in 2 rules - linear-gradient(180deg,transparent,#070606) used in 2 rules Breakpoints: 480px · 540px · 567px · 568px · 660px · 767px · 768px · 1000px · 1023px · 1024px · 1150px · 1239px ## Voice Tone: professional. Energy: high. Written for enterprises. ## 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%2F101556897.md?alt=media). ``` --- generator: clinical-terminal-brand-kit company: "InterSystems" domain: "intersystems.com" colors: primary: "#333695" onPrimary: "#FFFFFF" dark: "#000000" accent: "#C75000" background: "#FFFFFF" ground: mode: light hex: "#FFFFFF" ink: "#000000" accent: "#333695" fonts: heading: "Archivo" body: "Archivo" radius: card: "8px" button: "50px" --- # Design System — InterSystems > Read from InterSystems's public website (intersystems.com) by Clinical Terminal. Not reviewed by InterSystems. > Use it as inspiration: borrow the ideas, not InterSystems's name, logo or identity. ## Ground - **Light ground** (#FFFFFF), from InterSystems's site background #FFFFFF. Pages and panels sit on it. - Main text: #000000 (21:1 on the ground). - Secondary text is #000000 at 88% / 76% / 60%; hairlines and plate borders #000000 at 16%. ## Color - **Accent on the ground: #333695** (9.99:1). Use it for kickers, key numbers and one highlight per screen, not for large fills. - **Primary #333695** for filled shapes (buttons, chips, bars), with #FFFFFF text on it (9.99:1). - Secondary accent #C75000: charts and a second data series only. - Quote every hex exactly as written above. ## Type - Headlines: **Archivo**. Body: **Archivo**. Both on Google Fonts. - InterSystems's site uses Oxygen / Oxygen; these are the closest free look-alikes. ## Shape - Cards and panels: 8px corners. Buttons and chips: 50px. ## Voice - Tone: professional. Energy: high. Written for enterprises. - Headlines are short and concrete. ## Tokens from the site's stylesheets ### Color ramps - **Color Gray** (`--color-gray-N`): 1 `#FAF9F9` · 2 `#F0F0F0` · 3 `#F1ECED` · 4 `#E6DFE0` · 5 `#949494` · 6 `#CACBD2` · 7 `#EEEEEE` · 8 `#353535` - **Color Blue** (`--color-blue-N`): 1 `#323694` · 2 `#5263FF` · 3 `#39444E` ### Other named colors - `--color-blue-dark`: `#39444E` - `--color-gray`: `#F8F9F9` - `--color-orange`: `#C75000` - `--color-green`: `#00B2A9` - `--color-blue`: `#5668FF` - `--color-white`: `#FFFFFF` - `--color-black`: `#000000` - `--error`: `#EE0120` - `--success`: `#28A745` - `--border-color`: `#DCDCDC` - `--bulletColor`: `#10EDDC` - `--gradientOverlayColor`: `#000000` - `--tab-inactive-color`: `#CDCDCD` - `--tab-primary-color`: `#39444E` - `--tab-primary-bg`: `#39444E` - `--tab-active-color`: `#FFFFFF` - `--tab-active-bg`: `#39444E` - `--tab-border-color`: `#39444E` - `--tab-label-color`: `#000000` - `--active-bg`: `#F3F4F6` - `--color-orange-1`: `#CB5000` - `--color-orange-2`: `#AE4600` - `--color-green-1`: `#18EDDD` - `--color-black-1`: `#3B434D` ### Typefaces - 0 (`--value`) - Times (`--font-2`) - Oxygen - Oxygen-Light - Lucida console ### Type scale (most-used sizes) `36px` · `30px` · `26px` · `24px` · `20px` · `18px` · `17px` · `16px` · `15px` · `14px` · `13px` · `12px` ### Letter-spacing `-.5px` (2) · `.89px` (1) · `4.44px` (1) · `1.03px` (1) ### Corner radii (most-used) `4px` · `50px` · `8px` · `50%` · `2px` · `100%` · `26px` · `13px` · `2.5px` · `5px` ### Shadows - `3px 3px 7px 0 rgba(0,0,0,.2)` - `2px 2px 7px 0 rgba(0,0,0,.13)` - `0 1px 2px #00000026` - `0 1px 1px #23282f26,0 0 0 1px #23282f33` - `0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #23282f1a` - `0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #ffffff80` ### Gradients - `linear-gradient(#0000,#000000bf)` - `linear-gradient(90deg,rgba(0,0,0,.75) 27%,transparent 71%)` - `linear-gradient(170deg,#00aea4,#016965)` - `linear-gradient(90deg,rgba(0,0,0,.75) 30%,transparent 79%)` - `linear-gradient(170deg,#91c0ea,#33379e)` - `linear-gradient(180deg,transparent,#070606)` ### Breakpoints 480px · 540px · 567px · 568px · 660px · 767px · 768px · 1000px · 1023px · 1024px · 1150px · 1239px · 1240px · 1360px · 1440px · 1620px · 1700px · 1740px · 1920px ```