[Design systems](/design-systems/) / Syntellis Performance Solutions (now part of Strata Decision Technology) # Syntellis Performance Solutions (now part of Strata Decision Technology) design system syntellis.com Read from Syntellis Performance Solutions (now part of Strata Decision Technology)'s public website by Clinical Terminal. Not reviewed by Syntellis Performance Solutions (now part of Strata Decision Technology). Copy it and paste it into Claude as inspiration. Corrections or removal: ![Syntellis Performance Solutions (now part of Strata Decision Technology) logo](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Flogos%2F103176612.png?alt=media) ## Palette - Ground \#FFFFFF \--mm-color-background - Ink \#100836 - Accent on the ground \#2C343B - Primary \#2C343B - On primary \#FFFFFF \--mm-color-background - Secondary accent \#007FA3 - Dark \#100836 - Site background \#FFFFFF \--mm-color-background ## Other named colors - \--mm-color-border #000000 - \--mm-color-button #000000 - \--mm-color-text #000000 - \--mm-color-text-dimmed #000000 - \--mm-color-background #FFFFFF - \--mm-color-background-highlight #000000 - \--mm-color-background-emphasis #000000 ## Type Headings Archivo · closest free match for Strata Syntellis Performance Solutions (now part of Strata Decision Technology) at a glance Body Archivo · closest free match for Strata Clear, readable paragraphs for clinicians, buyers and patients alike. - 32pxSyntellis Performance Solutions (now part of Strata Decision Technology) - 31pxSyntellis Performance Solutions (now part of Strata Decision Technology) - 30pxSyntellis Performance Solutions (now part of Strata Decision Technology) - 25pxSyntellis Performance Solutions (now part of Strata Decision Technology) - 24pxSyntellis Performance Solutions (now part of Strata Decision Technology) - 20pxSyntellis Performance Solutions (now part of Strata Decision Technology) - 18.5pxSyntellis Performance Solutions (now part of Strata Decision Technology) - 17pxSyntellis Performance Solutions (now part of Strata Decision Technology) ## Shape & depth Cards and panels: 5px corners · buttons and chips: 50px. ### Corner radii - 4px used in 2 rules - 34px used in 2 rules - 30px used in 2 rules - 2px used in 1 rule - .25rem used in 1 rule - 50% used in 1 rule - 50px used in 1 rule - 8px used in 1 rule - 60px used in 1 rule ### Shadows - 0 2px 10px rgba(0,0,0,.3) used in 6 rules - 0 0 10px rgba(0,0,0,.3) used in 6 rules - none!important used in 2 rules - none !important used in 2 rules ### Gradients - linear-gradient(133deg, #6AB650 60%, #D2D755 80%) used in 2 rules - linear-gradient(165deg, #cfe7ee 0%, #77C5D5 16%, #007FA3 52%, #77C5D5 80%) used in 2 rules - linear-gradient(346deg, #6AB650 27%, #6AB650 80%) used in 2 rules - linear-gradient(205deg, #007A53 0%, #6AB650 100%) used in 1 rule - linear-gradient(22deg, #007A53 0%, #6AB650 100%) used in 1 rule - linear-gradient(317deg, #6AB650 12%, #007A53 58%) used in 1 rule Breakpoints: 140px · 300px · 550px · 650px · 800px · 992px · 1100px · 1180px · 1650px · 2200px ## Voice Tone: professional. Energy: low. 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%2F103176612.md?alt=media). ``` --- generator: clinical-terminal-brand-kit company: "Syntellis Performance Solutions (now part of Strata Decision Technology)" domain: "syntellis.com" colors: primary: "#2C343B" onPrimary: "#FFFFFF" dark: "#100836" accent: "#007FA3" background: "#FFFFFF" ground: mode: light hex: "#FFFFFF" ink: "#100836" accent: "#2C343B" fonts: heading: "Archivo" body: "Archivo" radius: card: "5px" button: "50px" --- # Design System — Syntellis Performance Solutions (now part of Strata Decision Technology) > Read from Syntellis Performance Solutions (now part of Strata Decision Technology)'s public website (syntellis.com) by Clinical Terminal. Not reviewed by Syntellis Performance Solutions (now part of Strata Decision Technology). > Use it as inspiration: borrow the ideas, not Syntellis Performance Solutions (now part of Strata Decision Technology)'s name, logo or identity. ## Ground - **Light ground** (#FFFFFF), from Syntellis Performance Solutions (now part of Strata Decision Technology)'s site background #FFFFFF. Pages and panels sit on it. - Main text: #100836 (18.92:1 on the ground). - Secondary text is #100836 at 88% / 76% / 60%; hairlines and plate borders #100836 at 16%. ## Color - **Accent on the ground: #2C343B** (12.64:1). Use it for kickers, key numbers and one highlight per screen, not for large fills. - **Primary #2C343B** for filled shapes (buttons, chips, bars), with #FFFFFF text on it (12.64:1). - Secondary accent #007FA3: charts and a second data series only. - Quote every hex exactly as written above. ## Type - Headlines: **Archivo**. Body: **Archivo**. Both on Google Fonts. - Syntellis Performance Solutions (now part of Strata Decision Technology)'s site uses Strata / Strata; these are the closest free look-alikes. ## Shape - Cards and panels: 5px corners. Buttons and chips: 50px. ## Voice - Tone: professional. Energy: low. Written for enterprises. - Headlines are short and concrete. ## Tokens from the site's stylesheets ### Other named colors - `--mm-color-border`: `#000000` - `--mm-color-button`: `#000000` - `--mm-color-text`: `#000000` - `--mm-color-text-dimmed`: `#000000` - `--mm-color-background`: `#FFFFFF` - `--mm-color-background-highlight`: `#000000` - `--mm-color-background-emphasis`: `#000000` ### Typefaces - Raleway — on Google Fonts - StrataBold - StrataNormal - StrataLight - StrataHeavy - StrataHeavyItalic - StrataMediumBold - StrataMediumItalic ### Type scale (most-used sizes) `32px` · `31px` · `30px` · `25px` · `24px` · `20px` · `18.5px` · `17px` · `16px` · `12px` ### Corner radii (most-used) `4px` · `34px` · `30px` · `2px` · `.25rem` · `50%` · `50px` · `8px` · `60px` ### Shadows - `0 2px 10px rgba(0,0,0,.3)` - `0 0 10px rgba(0,0,0,.3)` - `none!important` - `none !important` ### Gradients - `linear-gradient(133deg, #6AB650 60%, #D2D755 80%)` - `linear-gradient(165deg, #cfe7ee 0%, #77C5D5 16%, #007FA3 52%, #77C5D5 80%)` - `linear-gradient(346deg, #6AB650 27%, #6AB650 80%)` - `linear-gradient(205deg, #007A53 0%, #6AB650 100%)` - `linear-gradient(22deg, #007A53 0%, #6AB650 100%)` - `linear-gradient(317deg, #6AB650 12%, #007A53 58%)` ### Breakpoints 0px · 140px · 300px · 550px · 650px · 800px · 992px · 1100px · 1180px · 1650px · 2200px · 10000px ```