Clinical Terminal
AboutSign in

Scholars Network design system

scholars-network.com

Read from Scholars Network's public website by Clinical Terminal. Not reviewed by Scholars Network. Copy it and paste it into Claude as inspiration.

Corrections or removal: agent@clinicalterminal.com

Scholars Network homepage

Palette

Other named colors

Type

Headings
Playfair Display

Scholars Network at a glance

Body
Inter

Clear, readable paragraphs for clinicians, buyers and patients alike.

Shape & depth

Cards and panels: 10px corners · buttons and chips: 8px.

Corner radii

Shadows

Gradients

Breakpoints: 480px · 560px · 640px · 880px · 900px · 1024px

Voice

Tone: professional. Energy: low. Written for students and educators.

DESIGN.md

The file Copy design system puts on your clipboard. Open the raw file.

---
generator: clinical-terminal-brand-kit
company: "Scholars Network"
domain: "scholars-network.com"
colors:
  primary: "#0C7FA3"
  onPrimary: "#FFFFFF"
  dark: "#232C3B"
  accent: "#0B7EA2"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#232C3B"
  accent: "#0C7FA3"
fonts:
  heading: "Playfair Display"
  body: "Inter"
radius:
  card: "10px"
  button: "8px"
---

# Design System — Scholars Network

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

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

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

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

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

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

## Tokens from the site's stylesheets

### Other named colors

- `--navy`: `#232C3B`
- `--teal`: `#0B7EA2`
- `--teal-lt`: `#005F81`
- `--gold`: `#0EA1CD`
- `--sky`: `#EBF8F8`
- `--mist`: `#F3F8FA`
- `--white`: `#FFFFFF`
- `--gray`: `#64748B`
- `--light`: `#EBF8F8`
- `--border`: `#E3E3E3`
- `--gray-50`: `#EBF8F8`
- `--gray-200`: `#E3E3E3`

### Typefaces

- Inter — on Google Fonts
- Playfair Display — on Google Fonts

### Type scale (most-used sizes)

`1.1rem` · `1.05rem` · `1rem` · `.95rem` · `0.95rem` · `.9rem` · `.8rem` · `.78rem` · `.76rem` · `.75rem` · `.72rem` · `.7rem`

### Letter-spacing

`.06em` (8) · `.08em` (6) · `.05em` (3) · `.04em` (3) · `0.08em` (3) · `-.01em` (1)

### Corner radii (most-used)

`8px` · `50%` · `16px` · `12px` · `10px` · `6px` · `14px` · `18px` · `999px` · `20px`

### Shadows

- `0 10px 30px #232c3b14`
- `0 6px 28px #0f172a0f`
- `0 10px 40px #232c3b1a`
- `0 8px 30px #00000014`
- `0 8px 32px #00000038`
- `0 8px 28px #0f172a0a`

### Gradients

- `linear-gradient(120deg,rgba(255,255,255,.04) 0%,transparent 70%)`

### Breakpoints

480px · 560px · 640px · 880px · 900px · 1024px