Naming
"Hoppscotch" is a single word, always spelled with a capital "H". It is the brand name of both our company and our application (not Hoppscotch app"). When referring to dedicated releases from Hoppscotch, we ask that you capitalize them as proper nouns (e.g. "Hoppscotch Cloud, Hoppscotch Enterprise, Hoppscotch CLI).
Usage
Provide plenty of space around Hoppscotch assets. Make them big or make them small, but give them room to breathe. They shouldn't feel cramped or cluttered.
Wordmark
The Hoppscotch wordmark should be used in all references to Hoppscotch as space allows. Monochrome usage is preferred with the brand colors below.
Wordmark Primary
Wordmark Primary Light
Wordmark Primary Dark
Wordmark Monochrome
Wordmark Monochrome Light
Wordmark Monochrome Dark
Logo
For tight layouts or logo-only grids, the Hoppscotch logomark is a concise way to refer to Hoppscotch. Use with good judgment for your audience, as the Hoppscotch wordmark has stronger brand recognition.
Logo Primary
Logo Primary Light
Logo Primary Dark
Logo Monochrome
Logo Monochrome Light
Logo Monochrome Dark
Icon
When referring to Hoppscotch as a company, such as on social media, or where a "chip" design is required, it is acceptable to use this stylized icon with an appropriate corner radius.
Icon Primary
Colors
Hoppscotch's color palette is inspired by the colors of the internet. The primary color is Hoppscotch slate, which should be used sparingly for emphasis. The secondary color is Hoppscotch Slate, which is used for backgrounds and borders. The tertiary color is Hoppscotch slate, which is used for text and icons.
Primary color
Secondary color
Tertiary color
Typography
Hoppscotch uses the "Inter" typeface for all marketing and product design. Inter is a variable font, which means that it can be adjusted to a wide range of weights and widths. The font is available for free on Google Fonts.
The quick brown fox jumps over a lazy dog.
The quick brown fox jumps over a lazy dog.
The quick brown fox jumps over a lazy dog.
The quick brown fox jumps over a lazy dog.
The quick brown fox jumps over a lazy dog.
Iconography
Hoppscotch uses the "Lucide" icon set for all marketing and product design. Lucide is a set of 1,000+ open-source icons that are free to use. The icon set is available for free on Lucide.dev.