# Patchpin brand guidelines

Patchpin turns browser previews into precise prompts for a coding agent.

**Name:** Patchpin (one word, capital P). **Tagline:** Point. Edit. Prompt. Ship.

## Logo

The pin combines a target and a stem: point to an element, pin a change. Use the lime tile with dark symbol as the primary icon. Use the dark tile with lime symbol for extension-style surfaces. The wordmark is Inter Bold; SVG wordmarks use outlined paths, so recipients do not need fonts installed. PNG wordmarks have transparent backgrounds.

- `patchpin-logo-lime.svg/png`: primary wordmark for dark backgrounds.
- `patchpin-logo-light.svg/png`: dark wordmark for light backgrounds.
- `patchpin-logo-dark.svg/png`: dark icon tile and pale wordmark for dark backgrounds.
- `patchpin-icon-lime-512.png`: X avatar / general app icon; 1024 version also included.
- `patchpin-mark.svg`: transparent lime symbol for dark backgrounds.
- `patchpin-social.png`: 1200 × 630 launch card.

Keep clear space of at least one quarter of the icon width around the logo. Use the icon at 24px or above and the full wordmark at 120px or above. For 16px browser favicon use the supplied SVG. Keep proportions, avoid recolouring the mark, and never place the pale wordmark on a light background. Avoid shadows, gradients, rotation, or decorative outlines on the logo itself.

## Colours

| Token                | Hex       | Use                                     |
| -------------------- | --------- | --------------------------------------- |
| Background           | `#0C0F14` | Main canvas                             |
| Secondary background | `#11151C` | Sections                                |
| Panel                | `#171C24` | Cards and extension surfaces            |
| Text                 | `#EEF2F7` | Headings and body text on dark          |
| Muted                | `#9AA4B2` | Secondary copy on dark                  |
| Lime                 | `#C4F464` | Primary buttons, icon, positive accents |
| Lime ink             | `#10140A` | Text and symbol on lime                 |
| Violet               | `#8B6CFF` | Secondary accent and decorative glow    |

Use lime sparingly to make the next action obvious. Set button text in lime ink. Violet is a supporting accent; use pale text for small copy rather than violet on dark panels. The logo stays flat even when the website uses glows.

## Typography

- **Inter Variable:** interface, body copy, headings. Body 400–500; labels 600; headings 700–750; wordmark 700.
- **JetBrains Mono Variable:** selectors, prompts, keyboard hints, compact uppercase labels.
- **Instrument Serif Italic:** a short editorial phrase in the hero only, such as “Point at them.”
- Fallbacks: system-ui / sans-serif, ui-monospace / monospace, Georgia / serif respectively.

Website fonts are bundled locally via Fontsource. The brand kit includes Latin Inter and its SIL Open Font License. Other fonts remain in the app’s existing dependencies; preserve their license notices when redistributing font files.

## Layout and voice

Default to dark backgrounds, generous spacing, 12px button corners and 18px card corners. Body copy should be readable at 16px with 1.6 line height. Respect reduced-motion preferences.

Be specific, friendly and direct. Say “Preview the change. Copy the prompt.” Describe edits as temporary browser previews, and make clear that the coding agent changes source files. Do not promise autonomous shipping, perfect results, online key revocation, or unlimited free usage.

The free preview has two saved changes per page, with unlimited edits to those two. Lifetime licenses unlock larger sets, ZIP bundles, and full-page screenshots. Unpacked ZIP installation requires Chrome Developer mode; do not call it a Web Store installation.