--- generator: clinical-terminal-brand-kit company: "National Medical Reviews (NMR)" domain: "nationalmedicalreviews.com" colors: primary: "#439B92" onPrimary: "#000000" dark: "#0A0A0A" accent: "#1E73BE" background: "#FFFFFF" ground: mode: light hex: "#FFFFFF" ink: "#0A0A0A" accent: "#26837A" fonts: heading: "Roboto" body: "Roboto" radius: card: "4px" button: "0px" --- # Design System — National Medical Reviews (NMR) > Read from National Medical Reviews (NMR)'s public website (nationalmedicalreviews.com) by Clinical Terminal. Not reviewed by National Medical Reviews (NMR). > Use it as inspiration: borrow the ideas, not National Medical Reviews (NMR)'s name, logo or identity. ## Ground - **Light ground** (#FFFFFF), from National Medical Reviews (NMR)'s site background #FFFFFF. Pages and panels sit on it. - Main text: #0A0A0A (19.8:1 on the ground). - Secondary text is #0A0A0A at 88% / 76% / 60%; hairlines and plate borders #0A0A0A at 16%. ## Color - **Accent on the ground: #26837A** (4.56:1), adjusted from National Medical Reviews (NMR)'s primary #439B92 so it stays readable. Use it for kickers, key numbers and one highlight per screen, not for large fills. - **Primary #439B92** for filled shapes (buttons, chips, bars), with #000000 text on it (6.34:1). - Secondary accent #1E73BE: charts and a second data series only. - Quote every hex exactly as written above. ## Type - Headlines: **Roboto**. Body: **Roboto**. Both on Google Fonts. ## Shape - Cards and panels: 4px corners. Buttons and chips: 0px. ## Voice - Tone: professional. Energy: low. Written for patients and healthcare professionals. - Headlines are short and concrete. ## Tokens from the site's stylesheets ### Other named colors - `--mfn-article-box-decoration`: `#0089F7` - `--mfn-before-after-slider`: `#FFFFFF` - `--mfn-before-after-label`: `#000000` - `--mfn-before-after-label-color`: `#FFFFFF` - `--mfn-blog-slider-date-bg`: `#F8F8F8` - `--mfn-blog-date-bg`: `#F8F8F8` - `--mfn-contactbox-line`: `#FFFFFF` - `--mfn-infobox-line`: `#FFFFFF` - `--mfn-faq-line`: `#000000` - `--mfn-clients-tiles`: `#000000` - `--mfn-clients-tiles-hover`: `#0089F7` - `--mfn-offer-thumbs-nav`: `#0089F7` - `--mfn-timeline-date-bg`: `#F8F8F8` - `--mfn-sliding-box-bg`: `#0089F7` - `--mfn-tabs-border-color`: `#000000` - `--mfn-shape-divider`: `#000000` - `--mfn-icon-box-icon`: `#0089F7` - `--mfn-button-color`: `#626262` - `--mfn-button-color-hover`: `#626262` - `--mfn-button-icon-color`: `#626262` - `--mfn-button-icon-color-hover`: `#626262` - `--mfn-button-bg`: `#DBDDDF` - `--mfn-button-bg-hover`: `#D3D3D3` - `--mfn-button-theme-color`: `#FFFFFF` - `--mfn-button-theme-color-hover`: `#FFFFFF` - `--mfn-button-theme-icon-color`: `#0095EB` - `--mfn-button-theme-icon-color-hover`: `#007CC3` - `--mfn-button-theme-bg`: `#0095EB` - `--mfn-button-theme-bg-hover`: `#007CC3` - `--mfn-button-shop-color`: `#FFFFFF` - `--mfn-button-shop-color-hover`: `#FFFFFF` - `--mfn-button-shop-icon-color`: `#0095EB` - `--mfn-button-shop-icon-color-hover`: `#007CC3` - `--mfn-button-shop-bg`: `#161922` - `--mfn-button-shop-bg-hover`: `#030304` - `--mfn-button-action-color`: `#626262` - `--mfn-button-action-color-hover`: `#626262` - `--mfn-button-action-icon-color`: `#626262` - `--mfn-button-action-icon-color-hover`: `#626262` - `--mfn-button-action-bg`: `#DBDDDF` - `--mfn-button-action-bg-hover`: `#D3D3D3` - `--mfn-gdpr2-container-text-color`: `#626262` - `--mfn-gdpr2-container-strong-color`: `#07070A` - `--mfn-gdpr2-container-bg`: `#FFFFFF` - `--mfn-gdpr2-container-overlay`: `#192530` - `--mfn-gdpr2-details-box-bg`: `#FBFBFB` - `--mfn-gdpr2-details-switch-bg`: `#00032A` - `--mfn-gdpr2-details-switch-bg-active`: `#5ACB65` - `--mfn-gdpr2-tabs-text-color`: `#07070A` - `--mfn-gdpr2-tabs-text-color-active`: `#0089F7` - `--mfn-gdpr2-tabs-border`: `#08080E` - `--mfn-gdpr2-buttons-box-bg`: `#FBFBFB` - `--mfn-gdpr2-reopen-background`: `#FFFFFF` - `--mfn-gdpr2-reopen-color`: `#222222` - `--mfn-header-menu-sep`: `#010727` - `--mfn-header-menu-animation-color`: `#0089F7` - `--mfn-header-search-icon-color`: `#333333` - `--mfn-header-icon-color`: `#333333` - `--mfn-header-submenu-dropdown-color`: `#FFFFFF` - `--mfn-megamenu-menu-sep`: `#010727` - `--mfn-megamenu-menu-animation-color`: `#0089F7` - `--mfn-swiper-pagination-bullet-active-color`: `#007AFF` - `--mfn-swiper-pagination-bullet-inactive-color`: `#000000` - `--mfn-sidemenu-menu-tabber-bg`: `#000000` - `--mfn-sidemenu-menu-tabber-link-bg-active`: `#FFFFFF` - `--mfn-sidemenu-menu-tabber-link`: `#000000` - `--mfn-sidemenu-menu-tabber-link-active`: `#000000` - `--mfn-pagination-items-color`: `#000000` - `--mfn-banner-box-desc-bg`: `#E9ECEF` - `--mfn-image-hotspot-marker-default-bg`: `#0089F7` - `--mfn-image-hotspot-marker-default-pulse-bg`: `#0089F7` - `--mfn-image-hotspot-marker-icon-pulse-bg`: `#0089F7` - `--mfn-image-hotspot-marker-text-pulse-bg`: `#0089F7` - `--mfn-image-hotspot-marker-text-color`: `#161922` - `--mfn-image-hotspot-marker-text-bg`: `#FFFFFF` - `--mfn-image-hotspot-marker-icon-color`: `#FFFFFF` - `--mfn-image-hotspot-marker-icon-bg`: `#0089F7` - `--mfn-image-hotspot-content-bg`: `#FFFFFF` - `--mfn-free-delivery-bar`: `#1E6B6A` - `--mfn-free-delivery-bg`: `#000000` - `--mfn-free-delivery-achieved`: `#1E6B6A` - `--mfn-woo-body-color`: `#0A0A0A` - `--mfn-woo-heading-color`: `#0A0A0A` - `--mfn-woo-themecolor`: `#1E6B6A` - `--mfn-woo-bg-themecolor`: `#1E6B6A` - `--mfn-woo-border-themecolor`: `#1E6B6A` - `--mfn-countdown-number-color`: `#1E6B6A` ### Typefaces - Montserrat — on Google Fonts - Roboto — on Google Fonts - EverestForms - Lora — on Google Fonts ### Type scale (most-used sizes) `50px` · `40px` · `30px` · `20px` · `18px` · `17px` · `16px` · `15px` · `14px` · `13px` · `12px` · `11px` ### Letter-spacing `1px` (3) · `3px` (1) · `.1em` (1) ### Corner radii (most-used) `100%` · `5px` · `3px` · `4px` · `2px` · `50%` · `8px` · `1px` · `1000px` · `9999px` ### Shadows - `0 0 0 0` - `0 0 12px rgba(51,51,51,0.5)` - `inset 0px 4px 3px -2px rgba(0,0,0,.06)` - `0 0 0` - `0px 10px 46px 0px rgba(1,7,39,.1)` - `2px 2px 2px 0 rgba(0,0,0,0.03)` ### Gradients - `linear-gradient(top,#fff 50%,#fafafa 50%)` - `linear-gradient(top,#999999 0%,#e1e1e1 100%)` - `linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 65%)` - `linear-gradient(135deg,#00d084,#0693e3)` - `linear-gradient(135deg,#34e2e4,#4721fb 50%,#ab1dfe)` - `linear-gradient(135deg,#faaca8,#dad0ec)` ### Breakpoints 479px · 480px · 550px · 600px · 767px · 768px · 782px · 800px · 900px · 959px · 960px · 1239px · 1240px · 1430px · 1440px · 1921px