Skip to content

Brand kit

The Reoclo mark, wordmark, app icons and color references. Use these files when you name or show Reoclo.

Download the brand kit (zip) 1061.6 KiB · SVG, PNG, ICO and font licenses

Marks and lockups

A filled, pointy-top hexagon. The lockup pairs it with Reoclo in Mona Sans 700. Every SVG wordmark is outlined to paths, so no font installation is needed.

Fig. 1. Ink mark on Map Paper.
Fig. 1. Ink mark on Map Paper.
SVGPNG 64PNG 128PNG 256PNG 512PNG 1024
Fig. 2. Map Paper mark on Ink.
Fig. 2. Map Paper mark on Ink.
SVGPNG 64PNG 128PNG 256PNG 512PNG 1024
Fig. 3. Ink lockup on Map Paper.
Fig. 3. Ink lockup on Map Paper.
SVGPNG 1036 × 400
Fig. 4. Map Paper lockup on Ink.
Fig. 4. Map Paper lockup on Ink.
SVGPNG 1036 × 400

App icons

The SVG favicon is a bare Ink mark, switching to Map Paper in dark browser chrome. Raster icons use a Map Paper mark on an Ink tile. Apple and maskable files stay square; the operating system applies its own mask.

Fig. 5. Adaptive favicon.
Fig. 5. Adaptive favicon.
SVG, follows browser color scheme
Fig. 6. Browser fallback.
Fig. 6. Browser fallback.
ICO, 16, 32 and 48px
Fig. 7. PNG favicon.
Fig. 7. PNG favicon.
PNG, 256px
Fig. 8. Apple touch icon.
Fig. 8. Apple touch icon.
PNG, 180px, opaque square
Fig. 9. App icon, 192px.
Fig. 9. App icon, 192px.
PNG, rounded tile
Fig. 10. App icon, 512px.
Fig. 10. App icon, 512px.
PNG, rounded tile
Fig. 11. Maskable app icon.
Fig. 11. Maskable app icon.
PNG, 512px, opaque safe-zone tile

Social profiles

One profile image for X, GitHub and LinkedIn, plus a header for X, a cover for LinkedIn and a social preview for GitHub repositories. The X header and LinkedIn cover keep the bottom-left corner clear, where those platforms place the profile image.

Fig. 12. Profile image.
Fig. 12. Profile image.
PNG 400PNG 500PNG 1024
Fig. 13. X header.
Fig. 13. X header.
PNG 1500 × 500
Fig. 14. LinkedIn cover.
Fig. 14. LinkedIn cover.
PNG 1128 × 191
Fig. 15. GitHub repository social preview.
Fig. 15. GitHub repository social preview.
PNG 1280 × 640

Palette

Each color has a job. The mark and wordmark use only Ink and Map Paper.

Map Paper
HEX
#f7f7ec
RGB
247, 247, 236

The page ground, navigation, panels and frames.

Ink
HEX
#0a0a09
RGB
10, 10, 9

Type, the hexagon mark and primary actions.

Survey Orange
HEX
#e87418
RGB
232, 116, 24

Cover fields and closing bands. Always carries Ink type.

Route Magenta
HEX
#d11472
RGB
209, 20, 114

Routes, numbered waypoints and interaction state.

Deep Magenta
HEX
#b00f60
RGB
176, 15, 96

Route text and command lines that need additional contrast.

Grid Blue
HEX
#1b7fc0
RGB
27, 127, 192

Structural rules, frames and grids. Not for small text.

Typefaces

Three self-hosted families, each released under the SIL Open Font License. The kit includes their license files.

Mona Sans

Display headings and the wordmark. The wordmark uses 700; page headlines use 800.

Download Mona Sans license

Keep git push.
Own the server.

Figtree

Body copy, navigation, controls and labels. Weights 400 to 700.

Download Figtree license

Your servers.
Your applications.

JetBrains Mono

Command lines, terminal output and machine values. Weights 400, 500 and 600.

Download JetBrains Mono license

reoclo servers list
0123456789

Usage rules

Use the supplied files. Keep the mark recognizable at every size.

Space and size

  • Leave clear space equal to half the hexagon's height on every side.
  • Keep the mark at least 16px high and the lockup at least 96px wide.
  • Lockup files include clear space. Add it around the transparent mark files in your layout.
  • Use Ink on a light ground and Map Paper on an Ink ground.

Do not alter the assets

  • No recoloring beyond Ink and Map Paper.
  • No stretching or rotating.
  • No outlines, shadows or effects.
  • Never use the old emerald outline mark.