---
generator: clinical-terminal-brand-kit
company: "Nanonets Health"
domain: "nanonets.health"
colors:
  primary: "#546FFF"
  onPrimary: "#000000"
  dark: "#131315"
  background: "#F0F0F0"
ground:
  mode: light
  hex: "#F0F0F0"
  ink: "#131315"
  accent: "#455BEA"
fonts:
  heading: "DM Sans"
  body: "Archivo"
radius:
  card: "0px"
  button: "0px"
---

# Design System — Nanonets Health

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

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

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

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

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

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

## Tokens from the site's stylesheets

### Color ramps

- **Color Red** (`--color-red-N`): 50 `#FEF2F2` · 100 `#FFE2E2` · 200 `#FFCACA` · 300 `#FFA3A3` · 400 `#FF6568` · 500 `#FB2C36` · 600 `#E40014` · 700 `#BF000F` · 800 `#9F0712`
- **Color Orange** (`--color-orange-N`): 100 `#FFEDD5` · 500 `#FE6E00` · 600 `#F05100`
- **Color Amber** (`--color-amber-N`): 50 `#FFFBEB` · 100 `#FEF3C6` · 200 `#FEE685` · 300 `#FFD236` · 400 `#FCBB00` · 500 `#F99C00` · 600 `#DD7400` · 700 `#B75000` · 800 `#953D00`
- **Color Green** (`--color-green-N`): 300 `#7BF1A8` · 500 `#00C758` · 600 `#00A544`
- **Color Emerald** (`--color-emerald-N`): 50 `#ECFDF5` · 100 `#D0FAE5` · 200 `#A4F4CF` · 300 `#5EE9B5` · 400 `#00D294` · 500 `#00BB7F` · 600 `#009767` · 700 `#007956` · 800 `#005F46` · 900 `#004E3B`
- **Color Blue** (`--color-blue-N`): 50 `#EFF6FF` · 100 `#DBEAFE` · 200 `#BEDBFF` · 300 `#90C5FF` · 400 `#54A2FF` · 500 `#3080FF` · 600 `#155DFC` · 700 `#1447E6`
- **Color Gray** (`--color-gray-N`): 100 `#F3F4F6` · 300 `#D1D5DC` · 400 `#99A1AF` · 500 `#6A7282` · 600 `#4A5565` · 700 `#364153` · 900 `#101828`
- **Trail Deep** (`--trail-deep-N`): 300 `#14314A` · 700 `#071822` · 900 `#02080C`
- **Trail Ocean** (`--trail-ocean-N`): 50 `#E6F3FB` · 100 `#CCE5F5` · 200 `#A0D0EE` · 300 `#70B6E2` · 400 `#4DA2D6`
- **Trail Ink** (`--trail-ink-N`): 2 `#353E43` · 3 `#586369` · 4 `#838E95`

### Other named colors

- `--color-black`: `#000000`
- `--color-white`: `#FFFFFF`
- `--color-background`: `#F0F0F0`
- `--color-foreground`: `#131315`
- `--color-primary`: `#546FFF`
- `--color-muted-light`: `#6B6B6B`
- `--color-border`: `#C9C6C2`
- `--trail-deep`: `#0A2333`
- `--trail-coral`: `#F23030`
- `--trail-ocean`: `#2C6D95`
- `--trail-steel`: `#7BA6C4`
- `--trail-steel-light`: `#A8C4D8`
- `--trail-paper`: `#FFFFFF`
- `--trail-blush`: `#F7CFC9`
- `--trail-ink`: `#0A2333`
- `--trail-rule`: `#0A2333`
- `--trail-rule-strong`: `#0A2333`
- `--trail-rule-inverted`: `#FFFFFF`
- `--color-violet-100`: `#EDE9FE`
- `--color-rose-100`: `#FFE4E6`
- `--color-rose-500`: `#FF2357`
- `--trail-paper-2`: `#F3F5F7`

### Typefaces

- DM Sans (`--font-dm-sans`) — on Google Fonts
- JetBrains Mono (`--font-jetbrains-mono`) — on Google Fonts
- Switzer
- DM Sans Fallback
- JetBrains Mono Fallback
- Erode

### Type scale (most-used sizes)

`40px` · `36px` · `34px` · `32px` · `30px` · `24px` · `17px` · `16px` · `14px` · `12px` · `11px` · `10px`

### Letter-spacing

`-.01em` (4) · `-1.2px` (2) · `-1.5px` (2) · `-1px` (2) · `-2px` (2) · `-3px` (2)

### Corner radii (most-used)

`6px` · `5px` · `.25rem` · `1.5px` · `1px` · `2px` · `3px` · `4px` · `7px` · `8px`

### Shadows

- `0 2px 8px #13131512`
- `0 6px 18px #12a15038`
- `0 2px 5px rgba(0,0,0,.25)`

### Gradients

- `linear-gradient(#000 55%,#0000 98%)`
- `linear-gradient(#000 72%,#0000 100%)`
- `linear-gradient(90deg,#000 0% 42%,#0000 92%)`
- `linear-gradient(90deg,#0000,#000 10% 90%,#0000)`
- `radial-gradient(#0000 40%,#09090b 100%)`
- `linear-gradient(90deg,#fff 1px,#0000 1px)`

### Breakpoints

640px · 975px · 1024px