Nordis Technologies design system

nordistechnologies.com

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

Corrections or removal: agent@clinicalterminal.com

Palette

Ground
#FFFFFF
--wpem-white-color
Ink
#122361
Accent on the ground
#D71921
Primary
#D71921
On primary
#FFFFFF
--wpem-white-color
Dark
#122361
Site background
#FFFFFF
--wpem-white-color

Other named colors

--wpem-primary-color #0096FF
--wpem-dark-color #111111
--wpem-gray-color #555555
--wpem-white-color #FFFFFF
--wpem-gray-border-color #E4E4E4
--wpem-gray-bg-color #F5F5F5

Type

Headings

Inter · closest free match for Neue Haas Grotesk

Nordis Technologies at a glance

Body

Inter · closest free match for Helvetica Neue

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

24pxNordis Technologies
20pxNordis Technologies
1.25rem · 20pxNordis Technologies
18pxNordis Technologies
16pxNordis Technologies
1rem · 16pxNordis Technologies
15pxNordis Technologies
14pxNordis Technologies

Shape & depth

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

Corner radii

4px
used in 50 rules
50%
used in 12 rules
6px
used in 6 rules
3px
used in 5 rules
1rem
used in 4 rules
5px
used in 3 rules
2px
used in 2 rules
12px
used in 2 rules
100%
used in 2 rules
10px
used in 2 rules

Shadows

none!important
used in 4 rules
0 0 0 .25rem rgba(13,110,253,.25)
used in 4 rules
0 0 10px rgba(0,0,0,.1)
used in 3 rules
2px 2px 10px rgba(0,0,0,.2)
used in 2 rules
0px 0px 5px #666
used in 2 rules
0 0 0 1px #fff,0 0 0 .25rem rgba(13,110,253,.25)
used in 2 rules

Gradients

linear-gradient(130deg,#000 55%,rgba(0,0,0,.8) 75%,#000 95%)
used in 2 rules
linear-gradient(to right top,#e52705,#ea0037,#e5005a,#d5007b,#bb1497)
used in 1 rule
radial-gradient(circle at 30% 107%,#fdf497 0,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285aeb 90%)
used in 1 rule
linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,0))
used in 1 rule
linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent)
used in 1 rule
linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))
used in 1 rule

Breakpoints: 370px · 400px · 480px · 500px · 559px · 575px · 576px · 599px · 600px · 767px · 768px · 781px

Voice

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

DESIGN.md

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

---
generator: clinical-terminal-brand-kit
company: "Nordis Technologies"
domain: "nordistechnologies.com"
colors:
  primary: "#D71921"
  onPrimary: "#FFFFFF"
  dark: "#122361"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#122361"
  accent: "#D71921"
fonts:
  heading: "Inter"
  body: "Inter"
radius:
  card: "4px"
  button: "0px"
---

# Design System — Nordis Technologies

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

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

## Color
- **Accent on the ground: #D71921** (5.18:1). Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #D71921** for filled shapes (buttons, chips, bars), with #FFFFFF text on it (5.18:1).
- Quote every hex exactly as written above.

## Type
- Headlines: **Inter**. Body: **Inter**. Both on Google Fonts.
- Nordis Technologies's site uses Neue Haas Grotesk / Helvetica Neue; these are the closest free look-alikes.

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

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

## Tokens from the site's stylesheets

### Other named colors

- `--wpem-primary-color`: `#0096FF`
- `--wpem-dark-color`: `#111111`
- `--wpem-gray-color`: `#555555`
- `--wpem-white-color`: `#FFFFFF`
- `--wpem-gray-border-color`: `#E4E4E4`
- `--wpem-gray-bg-color`: `#F5F5F5`

### Typefaces

- wp-event-manager
- wp-event-manager" !important

### Type scale (most-used sizes)

`24px` · `20px` · `1.25rem` · `18px` · `16px` · `1rem` · `15px` · `14px` · `.875rem` · `13px` · `12px` · `11px`

### Letter-spacing

`.32px` (9) · `3px` (6) · `-2px` (4) · `-1px` (3) · `.5px` (2) · `2.5px` (2)

### Corner radii (most-used)

`4px` · `50%` · `6px` · `3px` · `1rem` · `5px` · `2px` · `12px` · `100%` · `10px`

### Shadows

- `none!important`
- `0 0 0 .25rem rgba(13,110,253,.25)`
- `0 0 10px rgba(0,0,0,.1)`
- `2px 2px 10px rgba(0,0,0,.2)`
- `0px 0px 5px #666`
- `0 0 0 1px #fff,0 0 0 .25rem rgba(13,110,253,.25)`

### Gradients

- `linear-gradient(130deg,#000 55%,rgba(0,0,0,.8) 75%,#000 95%)`
- `linear-gradient(to right top,#e52705,#ea0037,#e5005a,#d5007b,#bb1497)`
- `radial-gradient(circle at 30% 107%,#fdf497 0,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285aeb 90%)`
- `linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,0))`
- `linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent)`
- `linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))`

### Breakpoints

370px · 400px · 480px · 500px · 559px · 575px · 576px · 599px · 600px · 767px · 768px · 781px · 800px · 991px · 992px · 1023px · 1024px · 1199px · 1200px · 1300px · 1380px · 1399px · 1400px · 1439px · 1440px · 1500px · 1599px · 2300px