GMRZE Brand Guidelines

Introduction

These brand guidelines ensure consistent visual identity across all GMRZE projects and communications. Our brand represents innovation in developer tools through modern design and the Dracula color palette, resonating with the developer community while maintaining professional standards.

Color Palette

The GMRZE brand uses the Dracula color scheme, a beloved palette in the developer community. These colors should be used consistently across all brand materials.

Typography

GMRZE uses two typefaces: Space Grotesk for interface and content, and JetBrains Mono for code examples. The logo uses the yukarimobile typeface. All fonts are self-hosted for GDPR compliance.

Font Showcase

Font Resources

Logo Downloads

Download the GMRZE logo in various formats. Use the wordmark when space allows, and the lettermark for small spaces like favicons.

Wordmark

Lettermark

Download All Logos (ZIP)

Logo on Backgrounds

The logo should always have enough contrast against its background. Here's how it looks on different colors.

Background (#282a36)

Surface (#44475a)

Dark (#1a1b26)

White (#ffffff)

Purple (#bd93f9)

Pink (#ff79c6)

Logo Usage Rules

Minimum Sizes

Never use the logo below these minimum sizes to maintain legibility.

Do's and Don'ts

DO

Maintain original aspect ratio

DON'T

Don't stretch or squash the logo

DO

Use brand colors only

DON'T

Don't use unapproved colors

DO

Ensure high contrast

DON'T

Don't use low-contrast backgrounds

DON'T

Don't add shadows to the logo

DON'T

Don't use the logo too small or too large

PRO

DON'T

Don't add text or elements to the logo

Spacing

Maintain clear space around the logo to ensure legibility and visual impact. The minimum clear space is defined by the height of the "G" lettermark, referred to as 1x below.

Wordmark Clear Space

1x

1x

1x

1x

Lettermark Clear Space

1x

1x

1x

1x

Partnership Logo Placement

When the GMRZE logo appears alongside a partner's logo, follow these guidelines to ensure both brands are represented equally and clearly. GMRZE does not use vertical (stacked) partnership layouts.

Wordmark

Place logos side by side with a vertical divider between them. Both logos should be optically equal in height.

Partner Logo

Lettermark

When using the lettermark in a partnership context, maintain equal sizing and use a vertical divider.

Partner Logo

Rules

Brand Voice

GMRZE communicates directly and honestly. No corporate jargon, no filler, no fluff. Say what you mean in the fewest words possible.

Iconography

GMRZE exclusively uses Tabler Icons, licensed under the MIT License. No other icon sets are permitted. All icons are 24×24, stroke-based, and use currentColor for theming.

Outline vs. Filled

Use outlined icons by default. Use filled variants only to indicate an active or selected state.

Default

Active

Favorited / liked

Default

Active

Notifications enabled

Default

Active

Starred / bookmarked

Icons in Use

A selection of Tabler icons used across the site.

home

code

download

mail

shield

database

server

globe

bolt

check

x

brand-github

brand-discord

brand-youtube

brand-instagram

cookie

world

Animations & Loading

Animations serve a purpose. They communicate state, not decoration. If something is instant, do not animate it.

Rules

Quick Reference

--bg: #282a36;
--surface: #44475a;
--text: #f8f8f2;
--purple: #bd93f9;
--pink: #ff79c6;
--green: #50fa7b;
--cyan: #8be9fd;
--yellow: #f1fa8c;
--orange: #ffb86c;
--red: #ff5555;

font-family: 'Space Grotesk', sans-serif;
font-family: 'JetBrains Mono', monospace;