[Design systems](/design-systems/) / Scholars Network

# 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](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fthumbs%2F101704060.jpg?alt=media)

## Palette

- Ground

  \#FFFFFF

  \--white

- Ink

  \#232C3B

- Accent on the ground

  \#0C7FA3

- Primary

  \#0C7FA3

- On primary

  \#FFFFFF

  \--white

- Secondary accent

  \#0B7EA2

  \--teal

- Dark

  \#232C3B

  \--navy

- Site background

  \#FFFFFF

  \--white

## 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

## Type

Headings

Playfair Display

Scholars Network at a glance

Body

Inter

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

- 1.1rem · 17.6pxScholars Network
- 1.05rem · 16.8pxScholars Network
- 1rem · 16pxScholars Network
- .95rem · 15.2pxScholars Network
- 0.95rem · 15.2pxScholars Network
- .9rem · 14.4pxScholars Network
- .8rem · 12.8pxScholars Network
- .78rem · 12.48pxScholars Network

## Shape & depth

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

### Corner radii

- 8px

  used in 21 rules

- 50%

  used in 17 rules

- 16px

  used in 13 rules

- 12px

  used in 11 rules

- 10px

  used in 8 rules

- 6px

  used in 7 rules

- 14px

  used in 7 rules

- 18px

  used in 5 rules

- 999px

  used in 4 rules

- 20px

  used in 3 rules

### Shadows

- 0 10px 30px #232c3b14

  used in 3 rules

- 0 6px 28px #0f172a0f

  used in 2 rules

- 0 10px 40px #232c3b1a

  used in 1 rule

- 0 8px 30px #00000014

  used in 1 rule

- 0 8px 32px #00000038

  used in 1 rule

- 0 8px 28px #0f172a0a

  used in 1 rule

### Gradients

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

  used in 1 rule

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](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fmd%2F101704060.md?alt=media).

```
---
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
```