---
generator: clinical-terminal-brand-kit
company: "Tennr"
domain: "tennr.com"
colors:
  primary: "#EEDFD1"
  onPrimary: "#5F4037"
  dark: "#AC6B61"
  accent: "#AC6B61"
  background: "#9B4E45"
ground:
  mode: dark
  hex: "#0A0E14"
  ink: "#FFFFFF"
  accent: "#EEDFD1"
fonts:
  heading: "Archivo"
  body: "Archivo"
radius:
  card: "0px"
  button: "0px"
---

# Design System — Tennr

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

## Ground
- **Dark ground** (#0A0E14), from Tennr's site background #9B4E45. Pages and panels sit on it.
- Main text: #FFFFFF (19.34:1 on the ground).
- Secondary text is white at 88% / 76% / 60%; hairlines and plate borders white at 16%.

## Color
- **Accent on the ground: #EEDFD1** (14.84:1). Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #EEDFD1** for filled shapes (buttons, chips, bars), with #5F4037 text on it (7.08:1).
- Secondary accent #AC6B61: charts and a second data series only.
- Quote every hex exactly as written above.

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

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

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

## Tokens from the site's stylesheets

### Other named colors

- `--color-text-light`: `#EEDFD1`
- `--color-text-dark`: `#2B2D32`
- `--color-text-dark-brown`: `#5F4037`
- `--color-text-dark-alt`: `#2B2D32`
- `--color-background-card`: `#FBFBF9`
- `--color-background-card-about`: `#EEDFD1`
- `--color-accent-dark`: `#072D24`
- `--color-accent-brown`: `#72554D`
- `--color-accent-green`: `#096157`
- `--color-brand-red`: `#AE5249`
- `--color-background-dark-green`: `#072D24`
- `--color-background-brown`: `#5F4037`
- `--color-border-light`: `#E0E0E0`
- `--color-background-input`: `#FBFBF9`
- `--color-background-input-focus`: `#FFFFFF`
- `--color-shadow-form`: `#000000`
- `--color-white`: `#FFFFFF`
- `--color-off-white`: `#FBFBF9`
- `--color-background-cream`: `#F8F5ED`
- `--color-red-lighter`: `#FF9B91`
- `--brand-color-terracotta`: `#9B4E45`
- `--brand-color-tobacco`: `#5F4037`
- `--brand-color-peat`: `#4B4140`
- `--brand-color-earth`: `#72554D`
- `--brand-color-clay`: `#E8D0A3`
- `--brand-color-silt`: `#EEDFD1`
- `--brand-color-desertrose`: `#DCB4B1`
- `--brand-color-dusk`: `#B4A4AD`
- `--brand-color-tundra`: `#DEE2E3`
- `--brand-color-mirage`: `#96ACAD`
- `--brand-color-oasis`: `#096157`
- `--brand-color-cactus`: `#273127`
- `--brand-color-nightfall`: `#2B2D32`
- `--brand-color-sand`: `#FBFBF9`
- `--theme-bg-color`: `#9B4E45`
- `--theme-text-color`: `#EEDFD1`
- `--theme-button-bg-color`: `#EEDFD1`
- `--theme-button-text-color`: `#5F4037`
- `--theme-svg-bg-color`: `#9B4E45`
- `--color-white-30`: `#FFFFFF`

### Typefaces

- abcMarfa (`--font-marfa`)
- abcMarfaMono (`--font-marfa-mono`)
- featureDisplay (`--font-feature-display`)
- abcMarfa Fallback
- abcMarfaMono Fallback
- featureDisplay Fallback

### Type scale (most-used sizes)

`64px` · `48px` · `40px` · `32px` · `28px` · `24px` · `20px` · `18px` · `16px` · `14px` · `13px` · `12px`

### Letter-spacing

`-.03em` (4) · `1.82px` (2) · `1px` (1) · `.15em` (1) · `-.02em` (1) · `.05em` (1)

### Corner radii (most-used)

`2px` · `20px` · `50%` · `4px`

### Shadows

- `2px 2px 12px #00000014`

### Breakpoints

768px · 769px · 1024px · 1200px · 1440px