---
generator: clinical-terminal-brand-kit
company: "Jindal Healthcare"
domain: "jindalhealthcare.com"
colors:
  primary: "#244D47"
  onPrimary: "#EDE9DD"
  dark: "#0D1E35"
  accent: "#144E47"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#0D1E35"
  accent: "#244D47"
fonts:
  heading: "Inter"
  body: "Inter"
radius:
  card: "10px"
  button: "8px"
---

# Design System — Jindal Healthcare

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

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

## Color
- **Accent on the ground: #244D47** (9.43:1). Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #244D47** for filled shapes (buttons, chips, bars), with #EDE9DD text on it (7.77:1).
- Secondary accent #144E47: charts and a second data series only.
- Quote every hex exactly as written above.

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

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

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

## Tokens from the site's stylesheets

### Color ramps

- **Gray** (`--gray-N`): 50 `#F8FAFC` · 100 `#F1F5F9` · 200 `#E2E8F0` · 300 `#CBD5E1` · 400 `#94A3B8` · 500 `#64748B` · 600 `#475569` · 700 `#334155` · 800 `#1E293B`

### Other named colors

- `--e-global-color-primary`: `#6EC1E4`
- `--e-global-color-secondary`: `#54595F`
- `--e-global-color-text`: `#7A7A7A`
- `--e-global-color-accent`: `#61CE70`
- `--navy`: `#0A1628`
- `--navy-light`: `#132038`
- `--navy-mid`: `#1A2D4A`
- `--teal`: `#144E48`
- `--teal-dark`: `#0E3A34`
- `--teal-light`: `#84AB9E`
- `--teal-muted`: `#B1D1C8`
- `--white`: `#FFFFFF`
- `--red-accent`: `#EF4444`
- `--anka-btn-bg`: `#244D47`
- `--anka-btn-bg-hover`: `#091C3A`
- `--anka-btn-fg`: `#FFFFFF`
- `--anka-btn-fg-hover`: `#FFFFFF`
- `--navy2`: `#0D1E35`
- `--teal-hi`: `#1F8075`
- `--sage`: `#84AB9E`
- `--cream`: `#EDE9DD`
- `--red`: `#EF4444`
- `--amber`: `#F59E0B`
- `--green`: `#22C55E`
- `--dt`: `#E8EDE9`
- `--ds`: `#E8EDE9`
- `--lt`: `#0D1F2D`
- `--ls`: `#3D5166`
- `--lm`: `#5A7080`

### Typefaces

- Roboto (`--e-global-typography-primary-font-family`) — on Google Fonts
- Roboto Slab (`--e-global-typography-secondary-font-family`) — on Google Fonts
- Inter (`--font-main`) — on Google Fonts
- SF Mono

### Type scale (most-used sizes)

`2rem` · `1.5rem` · `1.4rem` · `20px` · `1.1rem` · `1rem` · `.95rem` · `15px` · `.9rem` · `14px` · `.85rem` · `.65rem`

### Letter-spacing

`1px` (2) · `-.018em` (2) · `-.04em` (2) · `-1px` (1) · `.05em` (1) · `.08em` (1)

### Corner radii (most-used)

`12px` · `8px` · `50%` · `16px` · `3px` · `10px` · `2px` · `6px` · `100px` · `20px`

### Shadows

- `none!important`
- `none !important`
- `inset 0 -1px 0 rgba(0,0,0,.102)`
- `0 14px 30px rgba(0,0,0,.35)`
- `0 20px 50px -10px rgba(0,0,0,.5)!important`
- `0 8px 32px rgba(0,0,0,.3)!important`

### Gradients

- `linear-gradient(135deg,rgba(20,78,72,.3) 0,transparent 100%)`
- `radial-gradient(ellipse at 50% 50%,#000 35%,transparent 80%)`
- `linear-gradient(155deg,#1f8075 0,#144e47 55%,#0f3830 100%)`
- `linear-gradient(90deg,#84ab9e,#144e47)`
- `linear-gradient(135deg,rgb(6, 147, 227) 0%,rgb(155, 81, 224) 100%)`
- `linear-gradient(135deg,rgb(122, 220, 180) 0%,rgb(0, 208, 130) 100%)`

### Breakpoints

480px · 520px · 560px · 575px · 576px · 580px · 600px · 767px · 768px · 769px · 860px · 900px · 968px · 992px · 1024px · 1025px · 1200px