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