Joe Gornick

Identity System

Version 1.6 · Minnesota State Flag

The complete visual language for a “Nerd from Minnesota.” Built on a strict 10×10 pixel grid with interlocking logic gates, using the 2024 Minnesota State Flag palette. Like the rest of this site, it has a light face and a dark face and follows your Light / Dark / System setting in the header.

10×10 grid

The logo is the same in light and dark mode. What changes is the ground it sits on, so each variant is shown on the ground it was made for.

Master Color

Dark grounds only.

Solid White

Single colour, dark grounds.

Solid Black

Light grounds and print.

App tile logo spanning a light and a dark ground

App Tile

Any ground. It carries its own, so the site header uses it in both modes.

01B. Favicon Sizes

16 · 32 · 64

One SVG, both tab bars

The favicon is the App Tile. Browsers draw tab bars light or dark, and the tile reads on either.

Light tab bar 64 32 16
Dark tab bar 64 32 16

02. Color Palette

Two layers. The brand colours belong to the logo and never change. The site palette is Boundary Waters, the scheme this site ships, and it has a light face and a dark face. Its values are read live from the site's stylesheet, so they always match what the site paints. Contrast ratios are against each face's page background. Click any swatch to copy its value.

Brand colours · logo only, both modes

Site palette · Boundary Waters

Light face prefers-color-scheme: light

Body copy on a card

With a Deep Water link, as the site draws it.

Muted metadata · 4 min read

Dark face prefers-color-scheme: dark

Body copy on a card

With a Ice Blue link, as the site draws it.

Muted metadata · 4 min read

02B. Typography

These are the identity's typefaces. The site itself currently sets text in your system's UI and monospace fonts.

Headings & UI

Inter

The quick brown fox jumps over the lazy dog.

400 Regular 700 Bold

Code & Data

JetBrains Mono

const identity = "Nerd";

400 Regular 700 Bold

03. Usage Guidelines

Do

Maintain the precise 10×10 pixel grid alignment. Never distort or stretch the logo.

Don't

Don't stretch, squash, or alter the aspect ratio. The logo must always be square.

Do

Match the logo to its ground: Master Color on dark, Solid Black on light. If you don't know which ground you'll get, as with the site header, use the App Tile.

Don't

Don't put the Master Color logo straight onto a light ground. Water Blue is below 3:1 against the light background and Night Sky Blue barely 3:1, so the J nearly disappears. A graphic needs 3:1 (WCAG 1.4.11).

Do

Provide ample clear space around the logo—minimum 20% of logo width on all sides.

Don't

Don't use custom colors. Stick to the defined palette or use white/black variants only.

Quick Reference

Minimum Size

Never smaller than 32×32 pixels in digital or 0.5 inches in print.

File Formats

Use SVG for web/digital. PNG for compatibility. Never use JPG.

Light & Dark

The site follows prefers-color-scheme, and the header has a Light / Dark / System override. Each face has its own background, text, link and border colours, built to the same contrast targets. The logo doesn't change between faces; only its ground does.

Accessibility

Body text at least 7:1 on both faces. Links at least 4.5:1 and at least 15° of hue away from the background: Deep Water is at least 4.5:1 on light, Ice Blue is at least 4.5:1 on dark. Borders and focus rings need 3:1 (WCAG 1.4.11). Night Sky Blue is below 4.5:1 on light and below 4.5:1 on dark, so it's a logo colour only.