---
generator: clinical-terminal-brand-kit
company: "Cerecore"
domain: "cerecore.net"
colors:
  primary: "#FCD666"
  onPrimary: "#000000"
  dark: "#192441"
  accent: "#EE3724"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#192441"
  accent: "#957100"
fonts:
  heading: "Montserrat"
  body: "Open Sans"
radius:
  card: "10px"
  button: "10px"
---

# Design System — Cerecore

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

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

## Color
- **Accent on the ground: #957100** (4.53:1), adjusted from Cerecore's primary #FCD666 so it stays readable. Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #FCD666** for filled shapes (buttons, chips, bars), with #000000 text on it (14.95:1).
- Secondary accent #EE3724: charts and a second data series only.
- Quote every hex exactly as written above.

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

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

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

## Tokens from the site's stylesheets

### Other named colors

- `--hsf-field-input__color`: `#3E3E3F`
- `--hsf-field-input__background-color`: `#FFFFFF`
- `--hsf-field-input__border-color`: `#F6F7FB`
- `--seagull`: `#81C9EB`
- `--goldenrod`: `#FDD567`
- `--scarlet`: `#EE3724`
- `--bigstone`: `#192441`
- `--selago`: `#EBF5FC`
- `--shipgray`: `#3E3E3F`
- `--oslogray`: `#939598`
- `--coralRed`: `#F8664D`
- `--lightCream`: `#FEECBB`
- `--midnightBlue`: `#141D35`
- `--skyBlue`: `#55B6E4`
- `--royalBlue`: `#2351D9`
- `--deepNavy`: `#001F33`
- `--InputBorder`: `#F6F7FB`

### Typefaces

- Open Sans (`--hsf-field-label__font-family`) — on Google Fonts
- \f101 (`--fa`)
- Montserrat — on Google Fonts

### Type scale (most-used sizes)

`30rem` · `24rem` · `22rem` · `20rem` · `18rem` · `17rem` · `16rem` · `14rem` · `12rem` · `18px` · `14px` · `12px`

### Letter-spacing

`1rem` (7) · `-0.02px` (2)

### Corner radii (most-used)

`20px` · `10px` · `5px` · `10rem` · `50%` · `4rem` · `5rem` · `100%` · `3px` · `25px`

### Shadows

- `0 5px 50px 0 rgba(6, 24, 18, 0.2)`
- `0px 5px 50px 0px rgba(6, 24, 18, 0.2)`
- `0 0 40px -10px rgba(0,0,0,.2)`
- `0 0 8px rgba(0, 0, 0, 0.6)`
- `10px 10px 20px rgba(0,0,0,.2)`
- `0px 1px 3px rgba(0, 0, 0, 0.18)`

### Gradients

- `linear-gradient(180deg, #192441, #141d35)`
- `linear-gradient(180deg, #f8664d, #ee3724)`
- `linear-gradient(180deg, #fff, #ebf5fc)`
- `linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.15) 65%, rgba(0, 0, 0, 0.075) 75.5%, rgba(0, 0, 0, 0.037) 82.85%, rgba(0, 0, 0, 0.019) 88%, rgba(0, 0, 0, 0) 100%)`
- `linear-gradient(180deg, #81c9eb, #55b6e4)`
- `linear-gradient(180deg, #feecbb, #fdd567)`

### Breakpoints

400px · 568px · 576px · 580px · 581px · 767px · 768px · 800px · 860px · 900px · 991px · 1024px · 1080px · 1081px · 1199px · 1200px · 1280px · 1440px · 2560px