// brand
Brand
Logos, colours and type for anyone writing about Pinax or building with us. Please use the files as supplied and follow the guidelines below.
// logos
Logos
Every logo comes as an SVG for web and print, and as a transparent PNG.
Horizontal
Our primary logo. Use it wherever there is room for the full lockup.
Stacked
For square or tall spaces where the horizontal logo won't fit.
// usage
Logo usage
Clear space
Leave at least 16px above and below the logo, and 32px to the left and right. Keep the area free of text, graphics and busy backgrounds.
16px32px
Contrast
Use the gradient logo on greyscale backgrounds when contrast allows, and a monochrome logo on coloured backgrounds, favouring white over black. Aim for AAA contrast for large text.
Don't
- Stretch, squash or rotate the logo
- Recolour it or apply your own gradient
- Add shadows, outlines or other effects
- Rearrange, crop or separate its parts
- Place it on busy or low-contrast backgrounds
- Use it inside a sentence in place of the word Pinax
// colours
Colours
Purple is our primary colour. Aqua, pink and orange double as success, danger and warning colours in product interfaces.
Purple
Primary
Aqua
Success, create
Pink
Danger, delete
Orange
Warning
Black
Background
Dark grey
Surfaces
Grey
Secondary text, lines
White
Text
// gradients
Gradients
The approved colours for each gradient. For an exact match, use the supplied artwork instead of recreating a gradient.
Full
Pink–purple
Purple
Aqua
Aqua–blue
// typography
Typography
Space Mono for headings, Space Grotesk for body copy. Both are free on Google Fonts.
Headings
Space Mono
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 {}[]()<>=+-/*&%$#@!?
abcdefghijklmnopqrstuvwxyz
0123456789 {}[]()<>=+-/*&%$#@!?
Body copy
Space Grotesk
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 {}[]()<>=+-/*&%$#@!?
abcdefghijklmnopqrstuvwxyz
0123456789 {}[]()<>=+-/*&%$#@!?
| Element | Mobile | Desktop |
|---|---|---|
| H1 | 64px Space Mono | 96px Space Mono |
| H2 | 48px Space Mono | 64px Space Mono |
| H3 | 40px Space Mono | 48px Space Mono |
| H4 | 36px Space Mono | 40px Space Mono |
| H5 | 32px Space Mono | 36px Space Mono |
| H6 | 24px Space Mono | 32px Space Mono |
| Subheading | 20px Space Grotesk | 24px Space Mono |
| Body | 16px Space Grotesk | 20px Space Grotesk |
| Small | 14px Space Grotesk | 16px Space Grotesk |
Need something else?
For other formats, co-branding or press requests, contact us at info@pinax.network.
