# Goldshorts — Pixel Pair

Version 1.0 · September 2026

## The story

Goldshorts began with a real pair of gold athletic shorts. The name stayed, and now it is home to independent games and apps. Pixel Pair turns those shorts into a small, distinctive mark with a nod to games.

**Positioning:** independent games and useful little apps, made with curiosity.

**Signature line:** Made with curiosity.

**Supporting line:** Playful escapes. Useful little tools.

Write **Goldshorts** in prose and metadata. The supplied wordmark is always lowercase **goldshorts**. “Games & apps” describes the collection; individual titles retain their own spelling and identities.

## Logo system

The original Pixel Pair concept has been rebuilt as a scalable, two-part vector signature: a stepped gold shorts silhouette and a heavy geometric wordmark. Every supplied SVG contains paths, including the lettering; no font installation is needed to display the logos.

Website headers use the standalone Pixel Pair SVG beside real, selectable HTML text. Set the wordmark in the self-hosted Outfit font at weight 780, line height 1, tracking −0.01842105em, and with font kerning disabled to match the outlined asset. Use an icon width of 1.05263158em and a gap of 0.42105263em. The text is lowercase `goldshorts`.

| Asset | Use |
| --- | --- |
| `goldshorts-dark.svg` | Gold mark and ivory wordmark on charcoal. Reference lockup and downloadable asset. |
| `goldshorts-light.svg` | Ochre mark and charcoal wordmark on ivory. |
| `goldshorts-white.svg` / `goldshorts-black.svg` | One-color reproduction. |
| `goldshorts-stacked-*.svg` | Centered lockups for launch screens, posters, and narrow formats. |
| `pixel-pair-*.svg` | Standalone mark for small studio credits or navigation. |
| `goldshorts-avatar.svg` | Gold mark in a charcoal rounded square. |
| `goldshorts-icon-180.png` | Apple touch icon. |
| `goldshorts-icon-192.png` / `goldshorts-icon-512.png` | Raster avatar and site icons. |
| `goldshorts-*.png` | Transparent horizontal logos, 1600 pixels wide. |
| `social-card.svg` / `social-card.png` | 1200 × 630 social sharing artwork. |

The mark is drawn on a 20 × 14 unit grid. Preserve its waist gap, stepped legs, and center notch. Leave at least half the mark's height as clear space around a lockup. Minimum recommended width: 140 pixels for the horizontal signature, 180 pixels for a stacked signature, or 20 pixels for the mark alone. The website favicon uses a dedicated 32-pixel canvas with a 20-pixel mark.

Scale proportionally. Use the supplied color variants. Avoid shadows, glow, bevels, skew, smoothing away the steps, extra stripes, and placing the mark against busy artwork. Use the mark alone when the wordmark would become too small.

## Color

| Token | Hex | Role |
| --- | --- | --- |
| Charcoal | `#111214` | Main canvas and dark logo lettering. |
| Graphite | `#191A1D` | Supporting panels. |
| Raised graphite | `#222326` | Hover surfaces. |
| Ivory | `#F1EEE7` | Primary copy and light backgrounds. |
| Gold | `#C7A568` | Brand mark, actions, and small accents on dark backgrounds. |
| Gold hover | `#DFC18D` | Hover state for primary actions. |
| Ochre | `#A37B35` | Logo accent on ivory. |
| Deep ochre | `#846023` | Text accent on light backgrounds. |
| Stone | `#AFAFA9` | Secondary copy on charcoal. |
| Rule | `#363739` | Dividers and quiet borders. |

Keep most interface area neutral. Gold is an accent, not a full-page fill. Set charcoal text on gold buttons. Preserve the original colors of game and app artwork. The light logo's ochre is a graphic color; use deep ochre for small text on ivory.

## Typography

**Outfit**, self-hosted under the SIL Open Font License. Files and license are included in the kit.

- Display and headings: weight 600, line height 1.06–1.12, tracking approximately −0.04em.
- Body: weight 400, 16–18 pixels, line height 1.55.
- Small labels: weight 500, 10–11 pixels, uppercase, tracking 0.2–0.25em.
- Buttons: weight 500, 16 pixels.
- Wordmark source: Outfit at weight 780, outlined and optically spaced in downloadable logo assets. Website headers use matching live HTML text as specified above.

## Layout and UI

Use a 4-pixel spacing base, with 8, 12, 16, 24, 32, 48, and 64-pixel steps. Content is capped at 1280 pixels. Desktop margins are generous; mobile margins are 16–20 pixels.

Cards use a 12-pixel radius and a quiet 1-pixel border. Buttons use a 6-pixel radius and at least 48 pixels of height. Use visible labels, clear focus outlines, and a text description for meaningful images. Honor reduced-motion preferences. Hover should be subtle; the pixel aesthetic belongs in the identity, not every interface element.

## Imagery

Use each product's own art direction. Clam Digger is a beach-parking game with an outlined cartoon cast and red coupe. Fling that Fish uses its approved glossy cartoon fish. FlockOff is a camera-awareness app and uses an actual map screenshot and its icon.

Keep faces and key characters visible at mobile sizes. Promotional illustrations should be identified as such on detail pages. Keep map attribution visible when cropping screenshots. Never replace real screenshots with invented gameplay UI.

## Voice

Curious, playful, and plainspoken. Lead with what the product does. Keep humor light and instructions specific. Speak as the maker, not as a faceless platform.

- “Seven beaches. One problem: finding a place to park.”
- “Three fish. Three throws. One shared boost pool.”
- “Mapped cameras. Nearby alerts. Awareness on the road.”
- “Need a hand?”

Avoid inflated claims, invented release statuses, unexplained jargon, and generic hype. Preserve product names: **Clam Digger**, **Fling that Fish**, and **FlockOff**.

## Asset use and sources

This is the owner's Goldshorts identity. The shorts icon is an original pixel silhouette, not a sportswear logo. The font remains under its bundled SIL Open Font License. Product assets remain associated with their respective products. FlockOff screenshots contain Apple Maps and OpenStreetMap data; preserve attribution.

The website loads `assets/brand/tokens.css`. Machine-readable values are also in `tokens.json`. The downloadable ZIP includes the logos, icons, sharing artwork, tokens, typography files, license, and this guide.