# CopyAnySite brand guidelines

## The mark

Two rounded squares at an offset: a page, and its exact copy. The flare square
sits behind, the navy square in front carries a chalk outline and a title bar.
Whatever the size, keep both squares and the offset — the mark is the
relationship between them, not either shape alone.

- Clear space: one quarter of the mark's width on all four sides.
- Minimum size: 16px for the tile (`favicon.svg`), 24px for the transparent
  mark, 120px wide for a lockup.
- Below 24px use `logo/favicon.svg` (the tiled version) — the transparent
  mark's outline thins out and disappears at small sizes.

## Which file to use

| Situation | File |
| --- | --- |
| Light background | `logo/copyanysite-lockup-light.png` or `.svg` |
| Dark background | `logo/copyanysite-lockup-dark.png` or `.svg` |
| Icon only, any background | `logo/copyanysite-mark.svg` |
| App icon, favicon, avatar | `logo/favicon.svg`, `social/avatar-512.png` |
| One-colour print, laser, embroidery | `logo/copyanysite-mark-mono-navy.svg` / `-mono-white.svg` |
| Article header, social card | `social/og-cover.png` (1200×630) |

## Colour

| Name | Hex | Use |
| --- | --- | --- |
| Navy | `#0A1826` | Primary surface, logo counter-shape, theme colour |
| Chalk | `#EAF1F7` | Primary text on navy, logo outline and title bar |
| Flare | `#FF6A3D` | The copy shape in the mark; single accent, CTAs |
| Verified | `#3FCF8E` | Measured and passing states only — never decoration |
| Slate | `#6B839B` | Secondary text, rules, metadata |

Verified green means a measured, passing state. Using it decoratively is the
one colour mistake that changes what the product appears to claim.

## Type

- **Sora** 600/700/800 — Headlines and the wordmark
- **Inter** 400/500 — Body text and UI
- **Geist Mono** 500 — Scores, licence keys, code and filenames

Both faces are open source (SIL OFL) and self-hosted on the site; the woff2
files ship in `fonts/` here so a lockup you set matches ours exactly.

## Please do not

- Recolour, gradient, outline, rotate or add a shadow to the mark.
- Stretch it non-uniformly, or rebuild the lockup with different spacing.
- Put the transparent mark on a busy photograph — use the tile.
- Say CopyAnySite "downloads a website's source code" or "clones a site backend".
  It reconstructs browser-rendered state; there is no server-side code in a copy.
- Attach a fidelity figure to a page we have not measured.

## Permission

The marks in this kit may be used to identify, review, compare or link to
CopyAnySite in editorial, directory and citation contexts, unmodified and with
clear space respected. They may not be used to imply endorsement or as part of
another product's identity. Questions: support@copyanysite.com.
