Clinical Terminal
AboutSign in

XiFin, Inc. design system

xifin.com

Read from XiFin, Inc.'s public website by Clinical Terminal. Not reviewed by XiFin, Inc.. Copy it and paste it into Claude as inspiration.

Corrections or removal: agent@clinicalterminal.com

XiFin, Inc. homepage

Palette

Color ramps

Color Gray
1
#1E1E1E
2
#343A40
3
#495057
4
#868E96
5
#ADB5BD
6
#CED4DA
7
#DEE2E6
8
#E9ECEF
9
#F4F5F7
Color Xifin Blue Tint
20
#CCE4F4
40
#99C9E9
60
#66ADDE
80
#3392D3
Color Sky Blue Tint
5
#F2FBFD
20
#CCF0F9
40
#99E1F3
60
#66D3EE
80
#33C4E8
Color Dark Blue Tint
20
#CCD5DB
40
#99AAB6
60
#668092
80
#33556D
Color Navy Blue Tint
20
#CCDDE8
40
#99BBD1
60
#6699BA
80
#3377A3
Color Cool Gray Tint
20
#ECF0F4
40
#DAE0E9
60
#C7D1DE
80
#B5C1D3
Color Green Tint
20
#EAF4D3
40
#D5E8A7
60
#BFDD7B
80
#AAD14F
Color Red Tint
20
#FCD5D8
40
#F9ABB0
60
#F68189
80
#F35761
Color Orange Tint
20
#FBE3D1
40
#F7C7A2
60
#EA7317
80
#EE8F45
Color Yellow Tint
20
#FFF4CC
40
#FFE899
60
#FEDD67
80
#FEDA5D

Other named colors

Type

Headings
Montserrat

XiFin, Inc. at a glance

Body
Roboto

Clear, readable paragraphs for clinicians, buyers and patients alike.

Shape & depth

Cards and panels: 10px corners · buttons and chips: 36px.

Corner radii

Shadows

Gradients

Breakpoints: 480px · 576px · 600px · 767px · 768px · 769px · 991px · 992px · 1200px · 1400px · 1920px · 1921px

Voice

Tone: professional. Energy: high. Written for businesses.

DESIGN.md

The file Copy design system puts on your clipboard. Open the raw file.

---
generator: clinical-terminal-brand-kit
company: "XiFin, Inc."
domain: "xifin.com"
colors:
  primary: "#0077C8"
  onPrimary: "#FFFFFF"
  dark: "#002B49"
  accent: "#FF0000"
  highlight: "#00B5E2"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#002B49"
  accent: "#0077C8"
fonts:
  heading: "Montserrat"
  body: "Roboto"
radius:
  card: "10px"
  button: "36px"
---

# Design System — XiFin, Inc.

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

## Ground
- **Light ground** (#FFFFFF), from XiFin, Inc.'s site background #FFFFFF. Pages and panels sit on it.
- Main text: #002B49 (14.57:1 on the ground).
- Secondary text is #002B49 at 88% / 76% / 60%; hairlines and plate borders #002B49 at 16%.

## Color
- **Accent on the ground: #0077C8** (4.7:1). Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #0077C8** for filled shapes (buttons, chips, bars), with #FFFFFF text on it (4.7:1).
- Secondary accent #FF0000: charts and a second data series only.
- Highlight #00B5E2 (from XiFin, Inc.'s logo gradient): sparing emphasis, never body text.
- Quote every hex exactly as written above.

## Type
- Headlines: **Montserrat**. Body: **Roboto**. Both on Google Fonts.

## Shape
- Cards and panels: 10px corners. Buttons and chips: 36px.

## Voice
- Tone: professional. Energy: high. Written for businesses.
- Headlines are short and concrete.

## Tokens from the site's stylesheets

### Color ramps

- **Color Gray** (`--color-gray-N`): 1 `#1E1E1E` · 2 `#343A40` · 3 `#495057` · 4 `#868E96` · 5 `#ADB5BD` · 6 `#CED4DA` · 7 `#DEE2E6` · 8 `#E9ECEF` · 9 `#F4F5F7`
- **Color Xifin Blue Tint** (`--color-xifin-blue-tint-N`): 20 `#CCE4F4` · 40 `#99C9E9` · 60 `#66ADDE` · 80 `#3392D3`
- **Color Sky Blue Tint** (`--color-sky-blue-tint-N`): 5 `#F2FBFD` · 20 `#CCF0F9` · 40 `#99E1F3` · 60 `#66D3EE` · 80 `#33C4E8`
- **Color Dark Blue Tint** (`--color-dark-blue-tint-N`): 20 `#CCD5DB` · 40 `#99AAB6` · 60 `#668092` · 80 `#33556D`
- **Color Navy Blue Tint** (`--color-navy-blue-tint-N`): 20 `#CCDDE8` · 40 `#99BBD1` · 60 `#6699BA` · 80 `#3377A3`
- **Color Cool Gray Tint** (`--color-cool-gray-tint-N`): 20 `#ECF0F4` · 40 `#DAE0E9` · 60 `#C7D1DE` · 80 `#B5C1D3`
- **Color Green Tint** (`--color-green-tint-N`): 20 `#EAF4D3` · 40 `#D5E8A7` · 60 `#BFDD7B` · 80 `#AAD14F`
- **Color Red Tint** (`--color-red-tint-N`): 20 `#FCD5D8` · 40 `#F9ABB0` · 60 `#F68189` · 80 `#F35761`
- **Color Orange Tint** (`--color-orange-tint-N`): 20 `#FBE3D1` · 40 `#F7C7A2` · 60 `#EA7317` · 80 `#EE8F45`
- **Color Yellow Tint** (`--color-yellow-tint-N`): 20 `#FFF4CC` · 40 `#FFE899` · 60 `#FEDD67` · 80 `#FEDA5D`

### Other named colors

- `--color-black`: `#171818`
- `--color-white`: `#FFFFFF`
- `--color-cool-gray`: `#A2B2C8`
- `--color-xifin-blue`: `#0077C8`
- `--color-sky-blue`: `#00B5E2`
- `--color-dark-blue`: `#002B49`
- `--color-navy-blue`: `#00558C`
- `--color-green`: `#95C623`
- `--color-red`: `#F02D3A`
- `--color-orange`: `#EA7317`
- `--color-yellow`: `#FEC601`
- `--dropdown-color`: `#FFFFFF`
- `--dropdown-color-hover`: `#FFFFFF`
- `--icon-text-path-color`: `#004B80`
- `--team-flip-primary-color`: `#002B49`
- `--team-flip-secondary-color`: `#00B5E2`
- `--color-team-flip-back-text`: `#FFFFFF`
- `--text-color`: `#000000`
- `--blunt-arrow-fill`: `#000000`

### Typefaces

- Roboto Bold
- Montserrat Bold
- fontello
- Montserrat SemiBold
- Roboto Regular
- Roboto Light
- Roboto — on Google Fonts
- Roboto Italic

### Type scale (most-used sizes)

`72px` · `2rem` · `24px` · `1.3rem` · `20px` · `18px` · `16px` · `15px` · `14px` · `12px` · `10px` · `0.625rem`

### Letter-spacing

`1.5px` (6) · `.5px` (2) · `1.2px` (1) · `3.6px` (1) · `1.25px` (1) · `1.93px` (1)

### Corner radii (most-used)

`10px` · `50%` · `200px` · `5px` · `8px` · `4px` · `6px` · `11px` · `1px` · `2px`

### Shadows

- `0 10px 30px 2px rgba(0,43,73,.1)`
- `0 2px 10px 1px rgba(0,43,73,.15)`
- `inset 0 0 24px rgba(0,0,0,.6)`
- `0 6px 12px 0 rgba(0,0,0,.2)`
- `inset 0 0 0 1000px #fff!important`
- `0 8px 15px rgba(38,48,55,.6)`

### Gradients

- `linear-gradient(123deg,#00b5e2,#0077c8 50%,#002b49)`
- `linear-gradient(180deg,#0267ab,#0077c8 24%,#0077c8)`
- `linear-gradient(190deg,#002b49,#024773 25%,#00558c)`
- `linear-gradient(135deg,#023e66 10%,#0077c8 70%,#0077c8)`
- `linear-gradient(180deg,#002b49,hsla(0,0%,100%,0))`
- `linear-gradient(90deg,#002c4b,#0076c6)`

### Breakpoints

480px · 576px · 600px · 767px · 768px · 769px · 991px · 992px · 1200px · 1400px · 1920px · 1921px