---
generator: clinical-terminal-brand-kit
company: "CodaMetrix"
domain: "codametrix.com"
colors:
  primary: "#F17053"
  onPrimary: "#000000"
  dark: "#241F29"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#241F29"
  accent: "#CA4D31"
fonts:
  heading: "Archivo"
  body: "Archivo"
radius:
  card: "4px"
  button: "40px"
---

# Design System — CodaMetrix

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

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

## Color
- **Accent on the ground: #CA4D31** (4.55:1), adjusted from CodaMetrix's primary #F17053 so it stays readable. Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #F17053** for filled shapes (buttons, chips, bars), with #000000 text on it (7.18:1).
- Quote every hex exactly as written above.

## Type
- Headlines: **Archivo**. Body: **Archivo**. Both on Google Fonts.
- CodaMetrix's site uses Funnel Sans / Funnel Sans; these are the closest free look-alikes.

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

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

## Tokens from the site's stylesheets

### Other named colors

- `--ink--base`: `#241F29`
- `--ink--light`: `#332B3B`
- `--sky--lighter`: `#E7ECE4`
- `--ink--lightest`: `#594C66`
- `--white--base`: `#FFFFFF`
- `--sky--lightest`: `#F2F3F1`
- `--purple--base`: `#973DDA`
- `--hero-background-color`: `#E6EBE3`
- `--coral--base`: `#F17053`
- `--ink--darkest`: `#050406`
- `--purple--dark`: `#402058`
- `--black--light`: `#22192B`
- `--sky--base`: `#B1B6AE`
- `--ink--darker`: `#0D0B0F`
- `--sky--darker`: `#7E867A`
- `--ink--lighter`: `#4D4159`
- `--ink--dark`: `#1A161E`
- `--black--base`: `#000000`
- `--white--off`: `#E6EBE3`
- `--purple--light`: `#DBACFF`
- `--gold--base`: `#CFC17F`
- `--coral--light`: `#F59984`
- `--gold--light`: `#DDD6B4`
- `--sky--darkest`: `#656B61`
- `--sky--light`: `#C3C7C1`
- `--gold-base`: `#C7B76B`
- `--sky--dark`: `#96A38F`
- `--coral--dark`: `#D03411`
- `--background-color`: `#000000`
- `--wine--base`: `#642D3F`
- `--wine--dark`: `#45202C`
- `--hero-bg-color`: `#EBEEE7`
- `--gold--dark`: `#948438`
- `--gold--darker`: `#4A421C`
- `--coral--lighter`: `#F9C0B4`
- `--coral--darker`: `#711C09`
- `--cmx-gray`: `#E7ECE4`

### Typefaces

- Funnel Display (`--fonts--primary`)
- Funnel Sans (`--fonts--secondary`)
- Oswald — on Google Fonts
- Barlow Semi Condensed
- \"Funnel Display|
- Roboto — on Google Fonts
- Gin

### Type scale (most-used sizes)

`3rem` · `38px` · `2rem` · `30px` · `1.5rem` · `24px` · `1.25rem` · `1.125rem` · `18px` · `1rem` · `.875rem` · `14px`

### Letter-spacing

`-.02em` (13) · `-.01em` (7) · `.03em` (4) · `-.56px` (4) · `-.82px` (4) · `-.72px` (3)

### Corner radii (most-used)

`100%` · `50%` · `4px` · `100px` · `99px` · `3px` · `2px` · `2.5rem` · `20px` · `40px`

### Shadows

- `0 0 0 1px #0000001a, 0 1px 3px #0000001a`
- `0 0 3px #3336`
- `0 0 0 2px #fff`
- `0 0 3px 1px #3898ec`
- `0 4px 8px #0000001a`
- `0 10px 15px #0000001a`

### Gradients

- `linear-gradient(#e7ece4, #f8f8f8)`
- `linear-gradient(#e7ece4 0%, #f8f8f8 100%)`
- `linear-gradient(142deg, #402058, #8a44be 27% 75%, #fe6e4e)`
- `linear-gradient(#fff 52%, #973dda)`
- `linear-gradient(270deg, #fe6e4e, #cfc17f)`
- `linear-gradient(90deg, #973dda, #502074)`

### Breakpoints

320px · 479px · 767px · 768px · 991px · 1280px · 1440px · 1920px