index.mdx•5.31 kB
---
id: brand
slug: /brand
---
import LogoClearspaceSvg from './medplum-logo-clearspace.svg';
import LogoSvg from './medplum-logo-currentcolor.svg';
import SymboClearspacelSvg from './medplum-symbol-clearspace.svg';
import SymbolSvg from './medplum-symbol-currentcolor.svg';
import styles from './brand.module.css';
# Medplum Brand Assets
## Logo
Feel free to use our logo in color, black or white.
<div className={styles.logoContainer}>
<div className={styles.logoCard} style={{ width: 256, height: 160, background: 'white', color: 'var(--oc-grape-8)' }}>
<LogoSvg width={150} />
</div>
<div className={styles.logoCard} style={{ width: 256, height: 160, background: 'var(--oc-gray-9)', color: 'white' }}>
<LogoSvg width={150} />
</div>
<div className={styles.logoCard} style={{ width: 256, height: 160, background: 'white', color: 'var(--oc-gray-9)' }}>
<LogoSvg width={150} />
</div>
</div>
## Symbol
Use these only when the Medplum brand is clearly visible or has been well established elsewhere.
<div className={styles.logoContainer}>
<div className={styles.logoCard} style={{ width: 256, height: 256, background: 'white', color: 'var(--oc-grape-8)' }}>
<SymbolSvg width={64} />
</div>
<div className={styles.logoCard} style={{ width: 256, height: 256, background: 'var(--oc-gray-9)', color: 'white' }}>
<SymbolSvg width={64} />
</div>
<div className={styles.logoCard} style={{ width: 256, height: 256, background: 'white', color: 'var(--oc-gray-9)' }}>
<SymbolSvg width={64} />
</div>
<div
className={styles.logoCard}
style={{ width: 256, height: 256, background: 'var(--oc-indigo-2)', color: 'var(--oc-grape-8)' }}
>
<SymbolSvg width={64} />
</div>
<div
className={styles.logoCard}
style={{ width: 256, height: 256, background: 'var(--oc-yellow-2)', color: 'var(--oc-grape-8)' }}
>
<SymbolSvg width={64} />
</div>
<div
className={styles.logoCard}
style={{ width: 256, height: 256, background: 'var(--oc-orange-2)', color: 'var(--oc-grape-8)' }}
>
<SymbolSvg width={64} />
</div>
</div>
## Clearspace
Please do not edit, change, distort, or reconfigure the Medplum logo.
<div className={styles.logoContainer} style={{ gap: 64 }}>
<div className={styles.logoCard} style={{ width: 400, height: 160 }}>
<LogoClearspaceSvg width={400} />
</div>
<div className={styles.logoCard} style={{ width: 120, height: 120 }}>
<SymboClearspacelSvg width={120} />
</div>
</div>
## Colors
Medplum uses [Open Color](https://yeun.github.io/open-color/).
Be sure to test accessibility using the [WCAG Contrast Checker](https://webaim.org/resources/contrastchecker/).
### Plum (Grape)
<div className={styles.logoContainer} style={{ alignItems: 'left' }}>
<div className={styles.colorCard} style={{ background: 'var(--oc-grape-8)', color: 'white' }}>
<strong>Grape 8</strong>
<br />
HEX: #9C36B5
</div>
</div>
### Violet
<div className={styles.logoContainer} style={{ alignItems: 'left' }}>
<div className={styles.colorCard} style={{ background: 'var(--oc-violet-1)', color: 'var(--oc-gray-9)' }}>
<strong>Violet 1</strong>
<br />
HEX: #E5DBFF
</div>
<div className={styles.colorCard} style={{ background: 'var(--oc-violet-3)', color: 'var(--oc-gray-9)' }}>
<strong>Violet 3</strong>
<br />
HEX: #B197FC
</div>
</div>
### Indigo
<div className={styles.logoContainer} style={{ alignItems: 'left' }}>
<div className={styles.colorCard} style={{ background: 'var(--oc-indigo-1)', color: 'var(--oc-gray-9)' }}>
<strong>Indigo 1</strong>
<br />
HEX: #DBE4FF
</div>
<div className={styles.colorCard} style={{ background: 'var(--oc-indigo-3)', color: 'var(--oc-gray-9)' }}>
<strong>Indigo 3</strong>
<br />
HEX: #91A7FC
</div>
</div>
### Yellow
<div className={styles.logoContainer} style={{ alignItems: 'left' }}>
<div className={styles.colorCard} style={{ background: 'var(--oc-yellow-1)', color: 'var(--oc-gray-9)' }}>
<strong>Yellow 1</strong>
<br />
HEX: #FFF3BF
</div>
<div className={styles.colorCard} style={{ background: 'var(--oc-yellow-3)', color: 'var(--oc-gray-9)' }}>
<strong>Yellow 3</strong>
<br />
HEX: #FFE066
</div>
</div>
### Orange
<div className={styles.logoContainer} style={{ alignItems: 'left' }}>
<div className={styles.colorCard} style={{ background: 'var(--oc-orange-1)', color: 'var(--oc-gray-9)' }}>
<strong>Orange 1</strong>
<br />
HEX: #FFE8CC
</div>
<div className={styles.colorCard} style={{ background: 'var(--oc-orange-3)', color: 'var(--oc-gray-9)' }}>
<strong>Orange 3</strong>
<br />
HEX: #FFC078
</div>
</div>
### Gray
<div className={styles.logoContainer} style={{ alignItems: 'left' }}>
<div className={styles.colorCard} style={{ background: 'var(--oc-gray-1)', color: 'var(--oc-gray-9)' }}>
<strong>Gray 1</strong>
<br />
HEX: #F1F3F5
</div>
<div className={styles.colorCard} style={{ background: 'var(--oc-gray-5)', color: 'var(--oc-gray-9)' }}>
<strong>Gray 5</strong>
<br />
HEX: #ADB5BD
</div>
<div className={styles.colorCard} style={{ background: 'var(--oc-gray-8)', color: 'var(--oc-gray-0)' }}>
<strong>Gray 8</strong>
<br />
HEX: #343A40
</div>
</div>
