[Design systems](/design-systems/) / Norwood

# Norwood design system

norwood.com

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

Corrections or removal: <agent@clinicalterminal.com>

![Norwood homepage](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fthumbs%2F100923806.jpg?alt=media)

## Palette

- Ground

  \#FFFFFF

- Ink

  \#000000

- Accent on the ground

  \#008900

- Primary

  \#2AA527

- On primary

  \#000000

- Dark

  \#000000

- Site background

  \#FFFFFF

## Type

Headings

Archivo · closest free match for noto-sans

Norwood at a glance

Body

Noto Sans

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

- 30pxNorwood
- 28pxNorwood
- 24pxNorwood
- 22pxNorwood
- 20pxNorwood
- 18pxNorwood
- 17pxNorwood
- 16pxNorwood

## Shape & depth

Cards and panels: 0px corners · buttons and chips: 0px.

### Corner radii

- 50%

  used in 36 rules

- 4px

  used in 15 rules

- 5px

  used in 6 rules

- 1px

  used in 1 rule

- 15px

  used in 1 rule

- 20px

  used in 1 rule

- 20%

  used in 1 rule

### Shadows

- 2px 2px 4px rgba(0, 0, 0, 0.2)

  used in 3 rules

- 2px 0px 4px rgba(0, 0, 0, 0.2)

  used in 1 rule

### Gradients

- radial-gradient(ellipse at center, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(234, 236, 233, 1) 100%)

  used in 5 rules

- linear-gradient(to bottom, rgba(188, 255, 5, 1) 0%, rgba(79, 127, 46, 1) 100%)

  used in 4 rules

Breakpoints: 320px · 350px · 369px · 400px · 440px · 460px · 500px · 545px · 560px · 630px · 680px · 740px

## Voice

Tone: professional. Energy: low. Written for businesses.

## 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%2F100923806.md?alt=media).

```
---
generator: clinical-terminal-brand-kit
company: "Norwood"
domain: "norwood.com"
colors:
  primary: "#2AA527"
  onPrimary: "#000000"
  dark: "#000000"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#000000"
  accent: "#008900"
fonts:
  heading: "Archivo"
  body: "Noto Sans"
radius:
  card: "0px"
  button: "0px"
---

# Design System — Norwood

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

## Ground
- **Light ground** (#FFFFFF), from Norwood'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: #008900** (4.59:1), adjusted from Norwood's primary #2AA527 so it stays readable. Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #2AA527** for filled shapes (buttons, chips, bars), with #000000 text on it (6.51:1).
- Quote every hex exactly as written above.

## Type
- Headlines: **Archivo**. Body: **Noto Sans**. Both on Google Fonts.
- Norwood's site uses noto-sans / Noto Sans; these are the closest free look-alikes.

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

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

## Tokens from the site's stylesheets

### Typefaces

- noto-sans
- Noto Sans — on Google Fonts
- SFMono-Regular

### Type scale (most-used sizes)

`30px` · `28px` · `24px` · `22px` · `20px` · `18px` · `17px` · `16px` · `15px` · `14px` · `13px` · `12px`

### Corner radii (most-used)

`50%` · `4px` · `5px` · `1px` · `15px` · `20px` · `20%`

### Shadows

- `2px 2px 4px rgba(0, 0, 0, 0.2)`
- `2px 0px 4px rgba(0, 0, 0, 0.2)`

### Gradients

- `radial-gradient(ellipse at center, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(234, 236, 233, 1) 100%)`
- `linear-gradient(to bottom, rgba(188, 255, 5, 1) 0%, rgba(79, 127, 46, 1) 100%)`

### Breakpoints

320px · 350px · 369px · 400px · 440px · 460px · 500px · 545px · 560px · 630px · 680px · 740px · 767px · 768px · 800px · 810px · 835px · 840px · 875px · 881px · 960px · 978px · 980px · 990px · 991px · 992px · 1000px · 1024px · 1030px · 1060px · 1180px · 1190px · 1240px · 1241px · 1400px
```