Docklet.
This is a quick reference for using the Docklet brand correctly. It covers the wordmark, icon, color, type, and a handful of common don'ts. If you're writing about Docklet, reviewing it, or featuring it in any way, this page should be enough. For the full press kit including downloadable assets, visit madebycomputers.com/docklet/press.
Wordmark.
EB Garamond, with an accent period in Orange.
The Docklet wordmark is set in EB Garamond with a period accented in Orange. The period is part of the wordmark's identity and should never be removed, recolored, or restyled.
Use the black wordmark on white, light gray, or other light backgrounds. Use the white wordmark on black, dark gray, or other dark backgrounds. Both variants retain the orange period.
Maintain clearspace around the wordmark equal to at least the height of the letterforms. Don't crop, stretch, rotate, or add visual effects.
Icon.
The Docklet app icon, in its macOS-rounded form.
The Docklet icon is provided in both square and macOS-rounded variants. Square is the source of truth. The rounded version uses Apple's standard macOS app icon shape (superellipse, approximately 22.5% corner radius) and should be used when displaying the icon in editorial contexts where a Mac app icon shape is expected.
Don't tint, recolor, or apply effects to the icon. Display it at a size where its detail is legible. Below 64 pixels, use the wordmark instead.
Color.
One accent. Used sparingly.
Orange is the primary accent color for Docklet, used sparingly for highlights, the wordmark's period, and small interactive elements.
Type.
Two typefaces. Both from Open Fonts via Google Fonts. Standard weights as shipped.
EB Garamond is used for display type, headlines, and editorial flourishes. Inter is used for body copy, UI elements, and smaller text. Both are available on Google Fonts and are used in their standard weights as shipped.
What not to do.
The most common ways the brand gets misused.
- Don't recolor the wordmark beyond the provided black or white variants.
- Don't remove the orange period from the wordmark.
- Don't stretch, rotate, or distort the wordmark or icon.
- Don't apply drop shadows, glows, or other effects to brand assets.
- Don't combine the Docklet wordmark with other logos in a single composition without generous spacing between them.
- Don't tint or recolor the app icon.
Press kit and contact.
The full Docklet press kit, including downloadable wordmark and icon files at multiple sizes and formats, is at madebycomputers.com/docklet/press.