---
generator: clinical-terminal-brand-kit
company: "FUJIFILM Healthcare Americas Corporation"
domain: "healthcaresolutions-us.fujifilm.com"
colors:
  primary: "#01916D"
  onPrimary: "#000000"
  dark: "#353535"
  accent: "#FB0020"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#353535"
  accent: "#008562"
fonts:
  heading: "Archivo"
  body: "Archivo"
radius:
  card: "0px"
  button: "2px"
---

# Design System — FUJIFILM Healthcare Americas Corporation

> Read from FUJIFILM Healthcare Americas Corporation's public website (healthcaresolutions-us.fujifilm.com) by Clinical Terminal. Not reviewed by FUJIFILM Healthcare Americas Corporation.
> Use it as inspiration: borrow the ideas, not FUJIFILM Healthcare Americas Corporation's name, logo or identity.

## Ground
- **Light ground** (#FFFFFF), from FUJIFILM Healthcare Americas Corporation's site background #FFFFFF. Pages and panels sit on it.
- Main text: #353535 (12.27:1 on the ground).
- Secondary text is #353535 at 88% / 76% / 60%; hairlines and plate borders #353535 at 16%.

## Color
- **Accent on the ground: #008562** (4.63:1), adjusted from FUJIFILM Healthcare Americas Corporation's primary #01916D so it stays readable. Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #01916D** for filled shapes (buttons, chips, bars), with #000000 text on it (5.27:1).
- Secondary accent #FB0020: charts and a second data series only.
- Quote every hex exactly as written above.

## Type
- Headlines: **Archivo**. Body: **Archivo**. Both on Google Fonts.
- FUJIFILM Healthcare Americas Corporation's site uses clarimo_ud_pemedium / clarimo_ud_pelight; these are the closest free look-alikes.

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

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

## Tokens from the site's stylesheets

### Typefaces

- clarimo_ud_pedemibold
- clarimo_ud_pelight
- icomoon
- clarimo_ud_pemedium
- clarimo_ud_peregular
- clarimo_ud_peregular'!important
- clarimo_ud_pebold
- clarimo_ud_peheavy

### Type scale (most-used sizes)

`30px` · `24px` · `22px` · `20px` · `18px` · `17px` · `16px` · `15px` · `14px` · `13px` · `12px` · `10px`

### Letter-spacing

`.05em` (4) · `0.1em` (2) · `.1em` (2)

### Corner radii (most-used)

`2px` · `3px` · `.2rem` · `9999px`

### Shadows

- `0 0 20px rgba(0, 0, 0, 0.1)`
- `0 0 2px 0 rgba(30,30,30,.4)`
- `0 5px 10px rgba(0,0,0,.075)`
- `0 0 20px rgba(0,0,0,.1)`
- `0 0 20px rgba(0,0,0,.10)`
- `none !important`

### Gradients

- `linear-gradient(left,#00d164 5%,#006f51 20%,#018e6a 45%,#07ff5a 75%,#96fffd 95%)`
- `linear-gradient(to right,rgba(86,197,102,1) 0%,rgba(41,92,68,1) 15%,rgba(63,143,106,1) 30%,rgba(63,143,106,1) 45%,rgba(99,227,98,1) 75%,rgba(168,248,253,1) 100%)`
- `linear-gradient(to right,#00d164 5%,#006f51 20%,#018e6a 45%,#07ff5a 75%,#96fffd 95%)`
- `linear-gradient(left,#006f51 0%,#018e6a 45%,#07ff5a 75%,#96fffd 95%)`
- `linear-gradient(90deg, #F4F4F4 0%, #F4F4F480 100%)`
- `linear-gradient(90deg,#EBEBEB00 0%,#EBEBEB 24%,#EBEBEB00 50%,#EBEBEB 76%,#EBEBEB00 100%)`

### Breakpoints

480px · 481px · 600px · 767px · 768px · 769px · 782px · 959px · 960px · 992px · 1024px · 1025px · 1199px · 1200px · 1366px · 1600px · 1830px · 1920px