[Design systems](/design-systems/) / Mimecast # Mimecast design system mimecast.com Read from Mimecast's public website by Clinical Terminal. Not reviewed by Mimecast. Copy it and paste it into Claude as inspiration. Corrections or removal: ![Mimecast logo](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Flogos%2F100923799.png?alt=media) ## Palette - Ground \#F9F9FA - Ink \#000129 - Accent on the ground \#D72F3B - Primary \#DB333E \--static-accent-600 - On primary \#FFFFFF \--static-neutral-white - Secondary accent \#FF0000 - Dark \#000129 \--static-mimecast-blue-900 - Site background \#F9F9FA ## Color ramps Static Neutral 100 \#F6F6F8 200 \#E5E5E9 300 \#CECED4 400 \#B6B6BE 500 \#9D9DA9 600 \#71717E 700 \#4E4F5F 800 \#1A2130 900 \#131521 Static Mimecast Blue 400 \#2326A0 500 \#1F1F74 700 \#1A1B42 900 \#000129 Static Accent 400 \#DF4953 600 \#DB333E 800 \#BA212B Static Spotlight 400 \#217EE7 600 \#1565C0 800 \#104D92 ## Other named colors - \--static-neutral-white #FFFFFF - \--static-neutral-black #000000 - \--ss-primary-color #5897FB - \--ss-bg-color #FFFFFF - \--ss-font-color #4D4D4D - \--ss-font-placeholder-color #8D8D8D - \--ss-disabled-color #DCDEE2 - \--ss-border-color #DCDEE2 - \--ss-highlight-color #FFFB8C - \--ss-success-color #00B755 - \--ss-error-color #DC3545 - \--ss-focus-color #5897FB - \--static-success-100 #E5F4E9 - \--static-success-600 #28A745 - \--static-warning-100 #FFF8E1 - \--static-warning-600 #FFC107 - \--static-error-100 #FBE6E7 - \--static-error-600 #DB333E - \--static-info-100 #E2F6F9 - \--static-info-600 #0BB6D1 ## Type Headings Archivo · closest free match for Neo-Sans Mimecast at a glance Body Open Sans Clear, readable paragraphs for clinicians, buyers and patients alike. - 2rem · 32pxMimecast - 1.75rem · 28pxMimecast - 1.5rem · 24pxMimecast - 1.25rem · 20pxMimecast - 1.125rem · 18pxMimecast - 18pxMimecast - 16pxMimecast - 1rem · 16pxMimecast ## Shape & depth Cards and panels: 16px corners · buttons and chips: 30px. ### Corner radii - 20px used in 30 rules - 5px used in 17 rules - 50% used in 9 rules - 10px used in 8 rules - .25rem used in 5 rules - 500px used in 5 rules - 30px used in 5 rules - 25px used in 4 rules - 50px used in 4 rules - 1.25rem used in 4 rules ### Shadows - 0 0 12px 3px rgba(0,0,0,.12) used in 7 rules - 0 4px 12px -4px rgba(0,0,10,.07),0 20px 45px 10px rgba(0,0,12,.08) used in 5 rules - 0 12px 35px 5px rgba(0,0,20,.04),0 4px 60px -10px rgba(0,0,10,.04) used in 4 rules - 0 12px 35px 5px rgba(0,0,20,.08),0 4px 60px -25px rgba(0,0,10,.09) used in 4 rules - 0 12px 35px -1px rgba(0,0,20,.2),0 4px 60px -19px rgba(0,0,10,.19) used in 3 rules - 0 12px 35px -3px rgba(0,0,20,.32),0 4px 60px -21px rgba(0,0,10,.3) used in 3 rules ### Gradients - linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent) used in 2 rules - linear-gradient(45deg,transparent 50%,grey 0) used in 1 rule - linear-gradient(135deg,grey 50%,transparent 0) used in 1 rule - linear-gradient(90deg,#1565c0,#000129) used in 1 rule - linear-gradient(331deg,#000129 37.79%,#db333e 95.14%) used in 1 rule - linear-gradient(to right, transparent, /\* fully transparent at the left edge \*/ black 20%, /\* fully opaque from 20% \*/ black 80%, /\* fully opaque until 80% \*/ transparent used in 1 rule Breakpoints: 360px · 576px · 768px · 992px · 1024px · 1090px ## Voice Tone: professional. Energy: high. Written for enterprises. ## 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%2F100923799.md?alt=media). ``` --- generator: clinical-terminal-brand-kit company: "Mimecast" domain: "mimecast.com" colors: primary: "#DB333E" onPrimary: "#FFFFFF" dark: "#000129" accent: "#FF0000" background: "#F9F9FA" ground: mode: light hex: "#F9F9FA" ink: "#000129" accent: "#D72F3B" fonts: heading: "Archivo" body: "Open Sans" radius: card: "16px" button: "30px" --- # Design System — Mimecast > Read from Mimecast's public website (mimecast.com) by Clinical Terminal. Not reviewed by Mimecast. > Use it as inspiration: borrow the ideas, not Mimecast's name, logo or identity. ## Ground - **Light ground** (#F9F9FA), from Mimecast's site background #F9F9FA. Pages and panels sit on it. - Main text: #000129 (19.26:1 on the ground). - Secondary text is #000129 at 88% / 76% / 60%; hairlines and plate borders #000129 at 16%. ## Color - **Accent on the ground: #D72F3B** (4.58:1), adjusted from Mimecast's primary #DB333E so it stays readable. Use it for kickers, key numbers and one highlight per screen, not for large fills. - **Primary #DB333E** for filled shapes (buttons, chips, bars), with #FFFFFF text on it (4.61:1). - Secondary accent #FF0000: charts and a second data series only. - Quote every hex exactly as written above. ## Type - Headlines: **Archivo**. Body: **Open Sans**. Both on Google Fonts. - Mimecast's site uses Neo-Sans / Open Sans; these are the closest free look-alikes. ## Shape - Cards and panels: 16px corners. Buttons and chips: 30px. ## Voice - Tone: professional. Energy: high. Written for enterprises. - Headlines are short and concrete. ## Tokens from the site's stylesheets ### Color ramps - **Static Neutral** (`--static-neutral-N`): 100 `#F6F6F8` · 200 `#E5E5E9` · 300 `#CECED4` · 400 `#B6B6BE` · 500 `#9D9DA9` · 600 `#71717E` · 700 `#4E4F5F` · 800 `#1A2130` · 900 `#131521` - **Static Mimecast Blue** (`--static-mimecast-blue-N`): 400 `#2326A0` · 500 `#1F1F74` · 700 `#1A1B42` · 900 `#000129` - **Static Accent** (`--static-accent-N`): 400 `#DF4953` · 600 `#DB333E` · 800 `#BA212B` - **Static Spotlight** (`--static-spotlight-N`): 400 `#217EE7` · 600 `#1565C0` · 800 `#104D92` ### Other named colors - `--static-neutral-white`: `#FFFFFF` - `--static-neutral-black`: `#000000` - `--ss-primary-color`: `#5897FB` - `--ss-bg-color`: `#FFFFFF` - `--ss-font-color`: `#4D4D4D` - `--ss-font-placeholder-color`: `#8D8D8D` - `--ss-disabled-color`: `#DCDEE2` - `--ss-border-color`: `#DCDEE2` - `--ss-highlight-color`: `#FFFB8C` - `--ss-success-color`: `#00B755` - `--ss-error-color`: `#DC3545` - `--ss-focus-color`: `#5897FB` - `--static-success-100`: `#E5F4E9` - `--static-success-600`: `#28A745` - `--static-warning-100`: `#FFF8E1` - `--static-warning-600`: `#FFC107` - `--static-error-100`: `#FBE6E7` - `--static-error-600`: `#DB333E` - `--static-info-100`: `#E2F6F9` - `--static-info-600`: `#0BB6D1` ### Typefaces - neo-sans - Open Sans — on Google Fonts ### Type scale (most-used sizes) `2rem` · `1.75rem` · `1.5rem` · `1.25rem` · `1.125rem` · `18px` · `16px` · `1rem` · `.875rem` · `14px` · `.75rem` · `12px` ### Letter-spacing `-.18px` (21) · `.1px` (10) · `-.5px` (8) · `-.2px` (7) · `.18px` (6) · `.05em` (4) ### Corner radii (most-used) `20px` · `5px` · `50%` · `10px` · `.25rem` · `500px` · `30px` · `25px` · `50px` · `1.25rem` ### Shadows - `0 0 12px 3px rgba(0,0,0,.12)` - `0 4px 12px -4px rgba(0,0,10,.07),0 20px 45px 10px rgba(0,0,12,.08)` - `0 12px 35px 5px rgba(0,0,20,.04),0 4px 60px -10px rgba(0,0,10,.04)` - `0 12px 35px 5px rgba(0,0,20,.08),0 4px 60px -25px rgba(0,0,10,.09)` - `0 12px 35px -1px rgba(0,0,20,.2),0 4px 60px -19px rgba(0,0,10,.19)` - `0 12px 35px -3px rgba(0,0,20,.32),0 4px 60px -21px rgba(0,0,10,.3)` ### Gradients - `linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent)` - `linear-gradient(45deg,transparent 50%,grey 0)` - `linear-gradient(135deg,grey 50%,transparent 0)` - `linear-gradient(90deg,#1565c0,#000129)` - `linear-gradient(331deg,#000129 37.79%,#db333e 95.14%)` - `linear-gradient(to right, transparent, /* fully transparent at the left edge */ black 20%, /* fully opaque from 20% */ black 80%, /* fully opaque until 80% */ transparent /* fully transparent at the right edge */ )` ### Breakpoints 360px · 576px · 768px · 992px · 1024px · 1090px ```