---
generator: clinical-terminal-brand-kit
company: "SCC Soft Computer"
domain: "softcomputer.com"
colors:
  primary: "#3272B8"
  onPrimary: "#FFFFFF"
  dark: "#2D2D30"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#2D2D30"
  accent: "#3272B8"
fonts:
  heading: "Archivo"
  body: "Arimo"
radius:
  card: "2px"
  button: "0px"
---

# Design System — SCC Soft Computer

> Read from SCC Soft Computer's public website (softcomputer.com) by Clinical Terminal. Not reviewed by SCC Soft Computer.
> Use it as inspiration: borrow the ideas, not SCC Soft Computer's name, logo or identity.

## Ground
- **Light ground** (#FFFFFF), from SCC Soft Computer's site background #FFFFFF. Pages and panels sit on it.
- Main text: #2D2D30 (13.73:1 on the ground).
- Secondary text is #2D2D30 at 88% / 76% / 60%; hairlines and plate borders #2D2D30 at 16%.

## Color
- **Accent on the ground: #3272B8** (4.96:1). Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #3272B8** for filled shapes (buttons, chips, bars), with #FFFFFF text on it (4.96:1).
- Quote every hex exactly as written above.

## Type
- Headlines: **Archivo**. Body: **Arimo**. Both on Google Fonts.
- SCC Soft Computer's site uses Futura-Pt / Arial; these are the closest free look-alikes.

## Shape
- Cards and panels: 2px corners. Buttons and chips: 0px.

## Voice
- Tone: professional. Energy: low. Written for patients and healthcare professionals.
- Headlines are short and concrete.

## Tokens from the site's stylesheets

### Other named colors

- `--cmplz_banner_background_color`: `#FFFFFF`
- `--cmplz_banner_border_color`: `#ADADAD`
- `--cmplz_text_color`: `#222222`
- `--cmplz_hyperlink_color`: `#1E73BE`
- `--cmplz_button_accept_background_color`: `#1E73BE`
- `--cmplz_button_accept_border_color`: `#1E73BE`
- `--cmplz_button_accept_text_color`: `#FFFFFF`
- `--cmplz_button_deny_background_color`: `#F9F9F9`
- `--cmplz_button_deny_border_color`: `#F2F2F2`
- `--cmplz_button_deny_text_color`: `#222222`
- `--cmplz_button_settings_background_color`: `#F9F9F9`
- `--cmplz_button_settings_border_color`: `#F2F2F2`
- `--cmplz_button_settings_text_color`: `#333333`
- `--cmplz_slider_active_color`: `#1E73BE`
- `--cmplz_slider_inactive_color`: `#F56E28`
- `--cmplz_slider_bullet_color`: `#FFFFFF`

### Typefaces

- futura-pt-bold
- Futura

### Type scale (most-used sizes)

`2.5rem` · `2rem` · `1.75rem` · `1.5rem` · `1.25rem` · `20px` · `18px` · `16px` · `1rem` · `.875rem` · `0.875rem` · `14px`

### Letter-spacing

`20px` (1)

### Corner radii (most-used)

`10px` · `50%` · `1rem` · `3px` · `0.375rem` · `.25rem` · `.375rem` · `5px` · `9999px`

### Shadows

- `0 0 0 .25rem rgba(13,110,253,.25)`
- `0 0 0 1px #fff,0 0 0 .25rem rgba(13,110,253,.25)`
- `0 .1rem .25rem rgba(0,0,0,.1)`
- `rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px`
- ``
- `inset 0 3px 5px rgba(0,0,0,.125)`

### Gradients

- `linear-gradient(180deg,hsla(0,0%,100%,.15),hsla(0,0%,100%,0))`
- `linear-gradient(45deg,hsla(0,0%,100%,.15) 25%,transparent 0,transparent 50%,hsla(0,0%,100%,.15) 0,hsla(0,0%,100%,.15) 75%,transparent 0,transparent)`
- `linear-gradient(90deg,rgba(0,0,0,.25),rgba(0,0,0,.001))`
- `linear-gradient(270deg,rgba(0,0,0,.25),rgba(0,0,0,.001))`
- `linear-gradient(to right,  #273a50 0%,#273a50 50%,#f58233 50%,#f58233 100%)`
- `linear-gradient(135deg, rgb(0, 208, 132) 0%, rgb(6, 147, 227) 100%)`

### Breakpoints

350px · 399px · 400px · 425px · 576px · 600px · 767px · 768px · 991px · 992px · 1200px · 1400px · 2000px