# Core Loop Press — Logo Package

A complete identity system for Core Loop Press, Berkeley, California. The mark is *the Aperture* — a rotated square with an inscribed circle and a horizontal line through the center. It reads as a closed loop, a shutter, a lens, and a node, without committing to any one reading.

Every lockup ships in both SVG (scalable, edit-friendly) and PNG (ready to upload anywhere that does not accept SVG).

## Directory structure

```
core-loop-press/
├── light/       Black mark on transparent background. Standard web/print use.
├── dark/        Paper-white mark on transparent background. For layering over existing dark surfaces.
├── dark-bg/     Paper-white mark on a black background baked in. Self-contained; previews correctly on its own.
├── spine/       Book spine marks (vertical type)
├── social/      Avatars, square posts, Open Graph cards
├── favicon/     Browser favicons and Apple touch icon
└── README.md
```

## When to use light vs dark vs dark-bg

**light/** — the default. Black mark on a transparent background. Use this on white, cream, or any light-colored surface. The transparent background means the logo drops cleanly onto any color underneath.

**dark/** — paper-white mark on a **transparent** background. Use this when you already have a dark surface — a black book jacket, a dark website section, a dark Slack workspace — and you want the logo to sit on top of that existing dark. If you open one of these files by itself in a browser, it will look nearly invisible against the browser's default white background. That is expected; the dark *surface* comes from the context you place it in.

**dark-bg/** — paper-white mark on a **black background baked into the file**. Use this when you want a self-contained dark logo — for example, sharing the logo file directly, a standalone preview image, or any situation where you cannot guarantee the background context. These files look correct on their own.

If you are not sure which to use, pick `light/` for bright surfaces and `dark-bg/` for everything else. `dark/` is the advanced option for designers who are compositing the logo into a larger dark layout.

## File index

### Light set (`light/`)

| Basename | Use |
|---|---|
| `core-loop-press_vertical_with-tagline` | Primary lockup. Covers, letterhead, colophon. |
| `core-loop-press_vertical_no-tagline` | Website hero, where the location is redundant. |
| `core-loop-press_horizontal_with-tagline` | Email signatures, footers, wide placements. |
| `core-loop-press_horizontal_no-tagline` | Site header, top-left nav. |
| `core-loop-press_mark-only` | Standalone mark for series identifiers, watermarks. |

Each basename has a `.svg` and a `.png` (1600px wide, transparent background).

### Dark set (`dark/`)

Same five lockups as light, with filenames suffixed `_dark`. Paper-white stroke (`#F5F2EB`), transparent background. SVG and PNG both.

### Dark-bg set (`dark-bg/`)

Same five lockups as light, with filenames suffixed `_dark-bg`. Paper-white stroke, black background (`#111111`) baked in. SVG and PNG both.

### Spine (`spine/`)

| Basename | Use |
|---|---|
| `core-loop-press_spine_full` | Standard and thicker spines (20mm+). Wordmark runs head-to-foot per US/UK convention. |
| `core-loop-press_spine_mark-only` | Thin paperback spines (12–20mm). |
| `core-loop-press_spine_full_dark` | Foil-stamped or dark-jacket spines. |
| `core-loop-press_spine_mark-only_dark` | Compact dark spine mark. |

Each as both SVG and PNG.

The spine mark always sits at the foot of the spine (bottom third), per publisher convention. The title and author type sit above it.

### Social (`social/`)

| Basename | Dimensions | Use |
|---|---|---|
| `core-loop-press_avatar_light/dark` | 1024 × 1024 | Profile avatar. Safe for circular cropping on Instagram, X, LinkedIn. |
| `core-loop-press_post-square_light/dark` | 1080 × 1080 | Feed posts. Full vertical lockup. |
| `core-loop-press_og-card_light/dark` | 1200 × 630 | Open Graph / Twitter card. |

Each as both SVG and PNG, PNG at native platform dimensions.

### Favicon (`favicon/`)

| File | Use |
|---|---|
| `favicon.svg` | Modern browsers. Single file, crisp at any resolution. |
| `favicon-16.png` | Fallback for browser tabs. The horizontal line is omitted at this size — it becomes visually brittle below 24px, and the diamond + circle alone still reads as the mark. |
| `favicon-32.png` | Standard favicon. Full mark preserved. |
| `favicon-48.png` | Windows taskbar and high-DPI contexts. |
| `apple-touch-icon.png` | 180 × 180. iOS home-screen icon with the paper-white background baked in (iOS applies rounded corners but does not add a background). |

## Typography specification

Wordmark:
```
Futura, Neue Haas Grotesk Display, Inter, Helvetica Neue, Arial, sans-serif
```

Tagline:
```
Inter, Helvetica Neue, Arial, sans-serif
```

If a licensed copy of Futura or Neue Haas Grotesk is installed, the wordmark renders in that face. Otherwise it falls back to Inter (free via Google Fonts), which is visually very close at the weights used here. For print work where absolute consistency matters, convert all text to outlines in Illustrator or Inkscape before sending to the printer. The PNG exports have effectively done this — they are pixel renders and do not depend on any installed fonts.

## Color system

| Token | Hex | Use |
|---|---|---|
| Ink | `#111111` | Primary mark and wordmark on light |
| Paper | `#F5F2EB` | Background on light; primary mark and wordmark on dark |
| Stone (light) | `#555555` | Tagline on light |
| Stone (dark) | `#9A958A` | Tagline on dark |

The warm off-white was chosen over pure white to reduce harshness on OLED displays and to feel closer to ink-on-paper even when reversed.

Never apply gradients, drop shadows, or color fills inside the mark.

## Clear space

Maintain a minimum clear space around every lockup equal to the height of one cap letter — the `C` in `CORE`. Nothing — text, imagery, trim edges — should enter that zone.

## Minimum sizes

| Asset | Minimum |
|---|---|
| Vertical lockups | 120px wide (screen), 25mm (print) |
| Horizontal lockups | 160px wide (screen), 32mm (print) |
| Mark only | 16px (favicon context) |
| Spine full lockup | 20mm spine width |
| Spine mark-only | 12mm spine width |

## Web implementation

For the site header, inline the `horizontal_no-tagline` SVG and constrain its height:

```html
<a href="/" aria-label="Core Loop Press">
  <svg style="height: 40px; width: auto;" ...>...</svg>
</a>
```

For the favicon, in the `<head>` of the site:

```html
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon-32.png" sizes="32x32">
<link rel="icon" href="/favicon-16.png" sizes="16x16">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
```

For Open Graph / Twitter cards, upload the 1200×630 PNG to your host and reference it:

```html
<meta property="og:image" content="https://yoursite.com/og-card.png">
<meta name="twitter:image" content="https://yoursite.com/og-card.png">
<meta name="twitter:card" content="summary_large_image">
```

## Dark-mode handling on the web

To auto-switch between light and dark lockups based on user preference:

```html
<picture>
  <source srcset="/logo-dark.svg" media="(prefers-color-scheme: dark)">
  <img src="/logo-light.svg" alt="Core Loop Press">
</picture>
```

For this use case, the `dark/` (transparent background) variant is the right choice — the browser provides the dark background via the page's own CSS.

## PNG vs SVG — when to use which

**Prefer SVG for:** websites, anywhere you control the HTML, anywhere the logo might be displayed at multiple sizes, any context where crispness at any zoom level matters.

**Use PNG for:** uploading to platforms that do not accept SVG (Instagram, LinkedIn, X, most email signature builders, Amazon KDP spine artwork, many print-on-demand services), PowerPoint/Keynote, and situations where you need a raster file for compatibility.