Brand Guidelines
Representing the DevRel Foundation brand in public should be done with care and consistency. Please reach out and contact us for permission and guidance on using brand assets.
Logos
Download Brand Assets ↗ from the GitHub repository.
 logo-dark-text.svg |  logo-light-text.svg |
 logo.svg |  logo-gray.png |
Colors
This is the brand color palette for the DevRel Foundation. It includes all the primary and secondary colors used throughout the website.
| Variable | Swatch | Hex | HSL | Dark Mode | Swatch | Hex | HSL |
|---|---|---|---|---|---|---|---|
| --color-offwhite | #FAFAF0 | hsl(48, 100%, 98%) | --color-offwhite-dark | #23313A | hsl(192, 32%, 22%) | ||
| --color-cream | #F8F3E6 | hsl(48, 61.8%, 94%) | --color-cream-dark | #463A2C | hsl(42, 32%, 24%) | ||
| --color-gold | #F9E5C1 | hsl(41.9, 100%, 91.6%) | --color-gold-dark | #6B4F1B | hsl(41.7, 74.5%, 21.6%) | ||
| --color-mint | #5FFFC7 | hsl(90, 65%, 81%) | --color-mint-dark | #142F03 | hsl(90, 95%, 8%) | ||
| --color-sage | #D9EAD3 | hsl(120, 20%, 80%) | --color-sage-dark | #334D33 | hsl(120, 20%, 20%) | ||
| --color-emerald | #26B36B | hsl(140, 60%, 40%) | --color-emerald-dark | #145C36 | hsl(140, 60%, 20%) | ||
| --color-blue | #E6F7FA | hsl(193, 100%, 92%) | --color-blue-dark | #00242E | hsl(192, 100%, 9%) |
Usage
Semantic use of the brand colors.
| Variable | Swatch | Color | Dark Mode | Swatch | Color |
|---|---|---|---|---|---|
| --color-background | offwhite | --color-background-dark | blue-dark | ||
| --color-background-secondary-1 | cream | --color-background-secondary-1-dark | offwhite-dark | ||
| --color-background-secondary-2 | gold | --color-background-secondary-2-dark | mint-dark | ||
| --color-text | mint-dark | --color-text-dark | offwhite | ||
| --color-link | emerald-dark | --color-link-dark | cream | ||
| --color-accent-text | mint | --color-accent-text-dark | sage | ||
| --color-logo-text | blue-dark | --color-logo-text-dark | mint |
Edit this page
Report issue