[Design systems](/design-systems/) / Nordis Technologies # 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: ![Nordis Technologies homepage](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fthumbs%2F100923805.jpg?alt=media) ## 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](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fmd%2F100923805.md?alt=media). ``` --- 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 ```