Logo
Logomark and wordmark together. Use it wherever there is room for both.
Brand
Brand guidelines
Logos, colors, type, and the look of player.gg. Grab the files you need and check the rules before you use them.
Logos
Pick a finish, then download it as SVG or PNG.
Logomark
The mark on its own, for tight spaces and small sizes.
Avatar
Guava Red on Slate 950, for social profiles and app icons. On any other backdrop, use the white logomark.
Do
- Use the color logo by default: light wordmark on dark, Slate 950 wordmark on light.
- Use all white over art and imagery, and all black for single-color print.
- Keep clear space of half the logo's height on every side.
- Write the name in lowercase: player.gg.
Don't
- Don't recolor the logo or add gradients, shadows, or outlines.
- Don't rotate, stretch, or rebuild the blocks of the logomark.
- Don't set the wordmark in another typeface.
- Don't place the color logo on busy art or low-contrast backgrounds.
- Don't use Guava Red as a background. No black on red, no white on red.
Clear space
Logo
Leave half the logo's height free on every side.
Logomark
Leave half the logomark's height free on every side.
Backgrounds
Color on dark
The default. Use it on dark, quiet backgrounds.
Color on light
Guava Red mark with a Slate 950 wordmark, for white and light backgrounds.
All white
Over game art, photos, and video. Darken or blur the image behind it.
All black
For single-color print on light stock, when Guava Red is not available.
Misuse
Keep the mark upright on its grid.
Scale it proportionally, never on one axis.
Guava Red, black, or white. Nothing else.
Guava Red is never a background, for the black logo or the white one.
Colors
Click a swatch to copy its hex value.
Guava Red is the only brand color, and it is used sparingly: the logo, the sign-up action, and a handful of active states. It is never a general accent, a heading color, or body text. Everything else is neutral, so the game art carries the color on every page.
Neutrals
A warm gray scale. player.gg is dark only: Slate 950 is the page, Slate 50 is the text.
Typography
Cal Sans
Display. Big headings that carry content: post titles, hero lines, section titles. Never UI chrome.
Cal Sans on Google Fonts (opens in a new tab)Games you can play right now
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 0123456789
Inter
Everything else. Hierarchy comes from weight and color, not size: regular for body, medium for labels, bold for names.
Inter on Google Fonts (opens in a new tab)Bold 700
Medium 500
Regular 400
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 0123456789
Interface
player.gg is dark, quiet, and content first. Game art carries the visual weight and the interface recedes behind it.
Blurred backdrops
Depth comes from the page's own art, heavily blurred and dimmed behind the content.
ExplorePlaytestsNews
Glass pills and overlays
Floating chrome is dark translucent glass with a hairline edge: nav pills, menus, bars.
Closed playtest
Invites go out Friday
2,400 players signed up
Hairlines, not boxes
One faint line separates content. No strong outlines, no bordered cards, no stacked borders.
5%
10%
15%
Translucent tints
Surfaces are white at 5 to 10 percent over the dark base, not solid gray fills.
Tight corners
Small radii everywhere. Full rounding is for avatars and chips only, never buttons.
Neutral controls
Buttons and controls stay neutral. Guava Red is reserved for the brand, never sprinkled as an accent.