Mrocorp design system

mrocorp.com

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

CopyCopy design system

Corrections or removal: agent@clinicalterminal.com

Palette

• Ground

  #FFFFFF
• Ink

  #000032
• Accent on the ground

  #0153FF
• Primary

  #0153FF
• On primary

  #FFFFFF
• Dark

  #000032
• Site background

  #FFFFFF

Type

• 20pxMrocorp
• 18pxMrocorp
• 1rem · 16pxMrocorp
• 14pxMrocorp
• 13pxMrocorp

Shape & depth

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

Corner radii

• 9999px

  used in 5 rules
• 100%

  used in 4 rules
• 50%

  used in 4 rules
• 3px

  used in 1 rule
• 100px

  used in 1 rule
• 12px

  used in 1 rule
• 4px

  used in 1 rule

Shadows

• 0 2px 4px 0 rgba(26,19,45,.16)

  used in 2 rules
• 0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15)

  used in 1 rule
• none !important

  used in 1 rule

Gradients

• linear-gradient(135deg,#0693e3 0%,#9b51e0 100%)

  used in 2 rules
• linear-gradient(135deg,#7adcb4 0%,#00d082 100%)

  used in 2 rules
• linear-gradient(135deg,#fcb900 0%,#ff6900 100%)

  used in 2 rules
• linear-gradient(135deg,#ff6900 0%,#cf2e2e 100%)

  used in 2 rules
• linear-gradient(135deg,#eee 0%,#a9b8c3 100%)

  used in 2 rules
• linear-gradient(135deg,#4aeadc 0%,#9778d1 20%,#cf2aba 40%,#ee2c82 60%,#fb6962 80%,#fef84c 100%)

  used in 2 rules

Breakpoints: 600px · 781px · 782px · 960px · 1024px

Voice

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

DESIGN.md

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

---
generator: clinical-terminal-brand-kit
company: "Mrocorp"
domain: "mrocorp.com"
colors:
  primary: "#0153FF"
  onPrimary: "#FFFFFF"
  dark: "#000032"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#000032"
  accent: "#0153FF"
fonts:
  heading: "Inter"
  body: "Inter"
radius:
  card: "0px"
  button: "0px"
---

# Design System — Mrocorp

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

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

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

## Type
- Headlines: **Inter**. Body: **Inter**. Both on Google Fonts.

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

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

## Tokens from the site's stylesheets

### Type scale (most-used sizes)

`20px` · `18px` · `1rem` · `14px` · `13px`

### Corner radii (most-used)

`9999px` · `100%` · `50%` · `3px` · `100px` · `12px` · `4px`

### Shadows

- `0 2px 4px 0 rgba(26,19,45,.16)`
- `0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15)`
- `none !important`

### Gradients

- `linear-gradient(135deg,#0693e3 0%,#9b51e0 100%)`
- `linear-gradient(135deg,#7adcb4 0%,#00d082 100%)`
- `linear-gradient(135deg,#fcb900 0%,#ff6900 100%)`
- `linear-gradient(135deg,#ff6900 0%,#cf2e2e 100%)`
- `linear-gradient(135deg,#eee 0%,#a9b8c3 100%)`
- `linear-gradient(135deg,#4aeadc 0%,#9778d1 20%,#cf2aba 40%,#ee2c82 60%,#fb6962 80%,#fef84c 100%)`

### Breakpoints

600px · 781px · 782px · 960px · 1024px