---
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