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.

CopyCopy design system

Corrections or removal: agent@clinicalterminal.com

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

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

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