---
generator: clinical-terminal-brand-kit
company: "Iodine Software"
domain: "iodinesoftware.com"
colors:
  primary: "#FF6900"
  onPrimary: "#000000"
  dark: "#000000"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#000000"
  accent: "#D44000"
fonts:
  heading: "Montserrat"
  body: "Montserrat"
radius:
  card: "0px"
  button: "0px"
---

# Design System — Iodine Software

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

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

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

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

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

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

## Tokens from the site's stylesheets

### Color ramps

- **Quiz** (`--quiz-N`): 1 `#BE141B` · 2 `#FF6900` · 3 `#009CDC` · 4 `#84C661`

### Other named colors

- `--blue`: `#009CDC`
- `--indigo`: `#A82E82`
- `--purple`: `#A82E82`
- `--pink`: `#A82E82`
- `--red`: `#BE141B`
- `--orange`: `#FF6900`
- `--yellow`: `#FCB415`
- `--green`: `#84C661`
- `--teal`: `#00B5AF`
- `--cyan`: `#00B5AF`
- `--gray`: `#ADB5BD`
- `--gray-dark`: `#343A40`
- `--slate`: `#4C5966`
- `--gray-bg`: `#647484`
- `--gray-light`: `#DEE2E6`
- `--primary`: `#FF6900`
- `--secondary`: `#4C5966`
- `--success`: `#84C661`
- `--info`: `#00B5AF`
- `--warning`: `#FCB415`
- `--danger`: `#BE141B`
- `--light`: `#FFFFFF`
- `--dark`: `#4C5966`
- `--white`: `#FFFFFF`
- `--orange-light`: `#FFF5ED`
- `--green-light`: `#F1F9EE`
- `--blue-light`: `#EBF7FD`
- `--purple-light`: `#FDEFF9`
- `--slate-light`: `#F1F2F3`
- `--nav-color`: `#FFFFFF`
- `--fob-color`: `#D8DDE1`
- `--page-theme-color-alt2`: `#614B8E`

### Typefaces

- SFMono-Regular (`--font-family-monospace`)
- Montserrat — on Google Fonts
- Perpetua Titling

### Type scale (most-used sizes)

`2.5rem` · `36px` · `2rem` · `1.75rem` · `1.5rem` · `1.25rem` · `18px` · `1rem` · `.9rem` · `14px` · `.75rem` · `12px`

### Letter-spacing

`3px` (5) · `2px` (5) · `-4px` (3) · `6px` (2) · `.3rem` (1) · `.25rem` (1)

### Corner radii (most-used)

`50%` · `40px` · `1rem` · `20px` · `10px` · `30px` · `9999rem` · `3px` · `.25rem` · `1.5rem`

### Shadows

- `inset 0 1px 0 hsla(0,0%,100%,.15),0 1px 1px rgba(0,0,0,.075)`
- `none!important`
- `0 0 1rem 0 #a82e82`
- `0 0 0 .2rem rgba(255,105,0,.25)`
- `0 0 0 .2rem rgba(132,198,97,.25)`
- `0 0 0 .2rem rgba(190,20,27,.25)`

### Gradients

- `linear-gradient(135deg,rgb(255,150,76.5) 16.67%,#ff6900 0,#ff6900 50%,rgb(255,150,76.5) 0,rgb(255,150,76.5) 66.67%,#ff6900 0,#ff6900)`
- `radial-gradient(farthest-corner at 40px 40px,#ff6900 0,rgb(127.5,52.5,0) 100%)`
- `linear-gradient(135deg,rgb(108.6629213483,127.25,145.8370786517) 16.67%,#4c5966 0,#4c5966 50%,rgb(108.6629213483,127.25,145.8370786517) 0,rgb(108.6629213483,127.25,145.8370786517) 66.67%,#4c5966 0,#4c5966)`
- `radial-gradient(farthest-corner at 40px 40px,#4c5966 0,rgb(21.5617977528,25.25,28.9382022472) 100%)`
- `linear-gradient(135deg,rgb(175.7651162791,218.2813953488,153.2186046512) 16.67%,#84c661 0,#84c661 50%,rgb(175.7651162791,218.2813953488,153.2186046512) 0,rgb(175.7651162791,218.2813953488,153.2186046512) 66.67%,#84c661 0,#84c661)`
- `radial-gradient(farthest-corner at 40px 40px,#84c661 0,rgb(71.6744186047,123.0930232558,44.4069767442) 100%)`

### Breakpoints

350px · 374px · 390px · 400px · 480px · 576px · 639px · 640px · 767px · 768px · 959px · 960px · 962px · 972px · 991px · 992px · 1024px · 1199px · 1200px · 1220px · 1340px · 1366px · 1440px · 1450px · 1490px · 1528px · 2300px