active-svelte/docs/BRAND.md

# Active — Brand brief

> Source brief for designers and AI image generators. Use this document to
> produce the wordmark, the symbol mark, and the favicon set.
> Everything below is in English so it can be pasted verbatim into prompts.

---

## 1. The project at a glance

| Field          | Value                                                                      |
| -------------- | -------------------------------------------------------------------------- |
| Name           | **Active**                                                                 |
| Type           | Runtime framework for SvelteKit apps (TypeScript, Svelte 5, runes mode)    |
| Tagline        | _The runtime that wires your SvelteKit app together._                      |
| What ships     | 15 runtime artifacts, one composition root (`$aapp`), two factories       |
| Audience       | Senior product engineers building production apps; pragmatic, professional |
| Voice          | Calm, technical, deliberate, low-decoration                                |
| Repo aesthetic | Monospace, geometry, single accent color (serious red)                     |

---

## 2. What "Active" means (so the mark is on-concept)

Active is **composed, not assembled**. Every artifact follows the same shape:

- A pure **`Engine`** factory — the deterministic core.
- An optional **`Active`** wrapper — the same engine with reactive state.
- The same **contract**: `snapshot()`, `onChange()`, `dispose()`.

A logo for Active should encode three ideas in this order of importance:

1. **Wiring** — pieces explicitly connected, not glued. Lines, not blobs.
2. **Duality** — Engine and Active live as a pair. Two related things linked.
3. **Currency / aliveness** — the system is running, not just present.

Anti-concepts to avoid:

- Generic "puzzle pieces", "Lego blocks", or "gears". Active is not modular
  software; it is a runtime with a fixed contract.
- Mascots, characters, or any illustration with personality features.
- 3D rendering, isometric cubes, neon glows, depth — all read as consumer.
- References to the Svelte logo. We coexist, we do not ride.

---

## 3. Personality

| Yes                        | No                          |
| -------------------------- | --------------------------- |
| Precise, deliberate        | Cute, friendly, mascot-y    |
| Geometric, monoline        | Hand-drawn, textured        |
| Calm, professional         | Loud, gamified, neon        |
| Low-decoration             | Decorative, illustrative    |
| Kinetic but restrained     | Spinning, animated, busy    |
| Single accent color        | Rainbow, multi-hue gradient |
| Square corner rhythm       | Rounded squishy shapes      |

The closest reference points (in spirit, not in form): **Vercel**, **Resend**,
**Linear**, **Effect.ts**, **Bun** wordmark — serious technical brands that
let the product do the talking and use the mark as a quiet anchor.

---

## 4. Color system

The brand is **monochromatic + serious red**. The red is corporate, not
crimson — closer to dried oxblood than to fire-engine.

| Token            | Light hex | Dark hex  | Use                                                |
| ---------------- | --------- | --------- | -------------------------------------------------- |
| Accent           | `#b91c1c` | `#ef4444` | Symbol mark on neutral background                  |
| Accent emphasized| `#991b1b` | `#f87171` | Hover / pressed state                              |
| Accent text      | `#dc2626` | `#f87171` | Inline text accents (more red, more visible)       |
| Background       | `#ffffff` | `#09090b` | Canvas                                             |
| Foreground       | `#18181b` | `#fafafa` | Wordmark when not red                              |
| Subtle           | `#71717a` | `#a1a1aa` | Tagline, secondary lockups                         |

**Rules:**

- The mark is always either solid `#b91c1c`, solid white, or solid black.
- Never apply a multi-stop gradient outside `accent → accent-emphasized`.
- Never combine the brand red with another saturated color in the mark.

---

## 5. Typography

- **Wordmark**: `active` in a precise geometric monospace, set lowercase,
  tight tracking (`letter-spacing: -0.04em`). Recommended families:
  - **JetBrains Mono Medium** (default)
  - **Berkeley Mono Bold**
  - **Geist Mono Medium**
  - **IBM Plex Mono SemiBold**
- **Tagline**: Inter Medium or Geist Sans Medium, sentence case, neutral fg.
- **Numerals**: tabular figures (`feature-settings: 'tnum'`).

The wordmark is always lowercase. Never set "Active" with a capital letter
inside the lockup.

---

## 6. Logo concepts (in priority order)

Three directions, each one self-contained. Concept A is the strongest fit;
B is a complementary symbol mark; C is a safe fallback.

### Concept A — **"Wired A"** (preferred)

A reduced letter **A** formed by two angled monoline bars whose crossbar
extends past the right leg into open space. The crossbar reads as a **wire**
that exits the letter and continues — the symbol of "wiring things
together".

Construction rules:

- Two strokes meeting at the apex at a 60° angle.
- Crossbar at 55–60% of the letter height.
- Crossbar terminates 0.5x of the letter width past the right leg.
- All strokes the same weight (8–10% of letter width).
- Square line caps, not round.
- Optical correction at the apex (small flat top, not a sharp point).

Reads as: **A**, **two engines connected**, **a circuit fragment**.

Lockup: symbol mark on the left, then 12px gap, then the wordmark `active`.
The crossbar of the symbol aligns with the x-height of the wordmark.

### Concept B — **"Nucleus"** (symbol mark only)

A small solid red disk (the composition root, `$aapp`) surrounded by short
radial ticks. One tick is longer than the rest and shifted by ~12° — that
tick is the "active" artifact emerging from the system.

Construction rules:

- Center disk: 22% of canvas diameter.
- 14 short ticks evenly distributed (the "always-present" artifacts).
- 1 long tick (the active emerging artifact), 1.7× the short tick length.
- Tick stroke matches the disk weight at the rim.
- No outer ring; the marks float in negative space.

Reads as: **a system**, **a hub**, **a runtime with peripherals**.

Use this concept when the mark needs to read as **the framework as a whole**
rather than as the letter A.

### Concept C — **"Pulse Bracket"** (fallback)

A `<` and `>` bracket pair joined at mid-height by a single horizontal line.
The horizontal line dips into a one-cycle pulse waveform between the
brackets — a heartbeat between two angle brackets.

Construction rules:

- Brackets symmetric, 90° vertex angle.
- Connecting line 1.4× the bracket weight.
- Pulse: a single ascending square notch + descending square notch.
- Total mark fits in a 4:3 horizontal rectangle.

Reads as: **code**, **runtime**, **signal**, **alive**. Generic but on-tone;
useful when "wiring" feels too literal.

---

## 7. Favicon

The favicon must be legible at **16×16** on a browser tab next to a noisy
title bar. Strip everything that is not silhouette.

### Master variants

1. **Filled square, white mark** _(default)_
   - Rounded square `5px` on 32×32 / `12%` of the side.
   - Background: `#b91c1c` solid.
   - Mark: simplified Concept A, white, optical adjustments allowed.
2. **Filled square, red mark on neutral**
   - Background: `#09090b`.
   - Mark: `#ef4444`.
   - Used on light browser themes for higher contrast in dark UI shells.
3. **Outline only, transparent**
   - Mark in solid `#b91c1c`, transparent background.
   - Used inside docs nav, code editor sidebars, and PWA monochrome contexts.

### Sizes & files to deliver

| File                          | Size         | Notes                                  |
| ----------------------------- | ------------ | -------------------------------------- |
| `favicon.svg`                 | vector       | Single source, monochrome              |
| `favicon-16.png`              | 16×16        | Manually optimized — re-draw, do not scale |
| `favicon-32.png`              | 32×32        | Browser tab default                     |
| `favicon-48.png`              | 48×48        | Windows                                 |
| `apple-touch-icon.png`        | 180×180      | Safe padding 10%                        |
| `icon-192.png`                | 192×192      | PWA                                     |
| `icon-512.png`                | 512×512      | PWA                                     |
| `icon-maskable-512.png`       | 512×512      | 80% safe area for OS masks              |
| `og-image.png`                | 1200×630     | Wordmark + tagline + subtle grid pattern|

### Rules at small sizes

- At 16×16 the mark must remain a recognizable silhouette without the
  wordmark. If Concept A is hard to read at this size, simplify the
  crossbar to a single pixel-aligned stroke.
- Do not include the tagline or the wordmark inside the favicon. The
  symbol mark only.
- Pixel-snap every stroke at 16×16 and 32×32. Sub-pixel softness is the
  enemy of legibility.

---

## 8. Lockups

### Primary (horizontal)

```
[ symbol ]  active
```

- Symbol height ≈ wordmark cap-height × 1.4.
- Gap between symbol and wordmark = symbol width × 0.35.
- Optical alignment: symbol centerline aligns with wordmark x-height.

### Stacked

```
[ symbol ]
 active
```

- Use only when horizontal space is scarce (avatars, app launcher).
- Symbol size: 1.6× the wordmark height.
- Gap: 25% of wordmark height.

### With tagline

```
[ symbol ]  active
            The runtime that wires your app together.
```

- Tagline in Inter Medium 60% of wordmark height, color `#71717a`.
- Tagline starts at the same x as the wordmark.
- Maximum tagline width = 28em (forces wrap on small layouts).

---

## 9. Don'ts

- **No bevels, no inner shadows, no glow.** Flat ink only.
- **No drop shadow under the mark.** The mark either has substrate or it
  doesn't; it does not float.
- **No animation in the static mark.** A separate Lottie / CSS variant for
  the loading screen is acceptable, but never the primary export.
- **No glassmorphism**, **no skeuomorphism**, **no neumorphism**.
- **No "running person", "lightning bolt", "play triangle"** decorations
  attached to the mark.
- **Never set the wordmark in a humanist sans** (Inter, SF Pro, system).
  Active is a runtime, not a marketing landing page.

---

## 10. AI image prompts

Each prompt is written so it works in **Midjourney**, **DALL-E**, **Sora
images**, or **Stable Diffusion**. Append your generator's parameters at the
end (e.g., `--ar 1:1 --v 6` for Midjourney).

### Concept A — Wired A (logo)

> **Prompt:** Minimalist geometric logo for a serious technical software
> framework called "Active". The mark is a stylised letter A built from two
> angled monoline strokes meeting at a slightly flattened apex; a single
> horizontal crossbar at 55% of the letter height extends beyond the right
> leg into open space, suggesting a wire that connects something. Strokes
> are uniform weight, square line caps, no rounded corners, no decoration.
> Solid color `#b91c1c` on a transparent background. Strict orthogonal
> geometry, balanced negative space, 1:1 aspect ratio. Vector flat design,
> no shadows, no gradients, no glow, no 3D. Brand mark only, no text.
>
> **Negative:** mascot, illustration, gradient, shadow, glow, 3D, isometric,
> bevel, neon, hand-drawn, watercolour, gear, cog, puzzle piece, lightning,
> bolt, person, character, photorealism.

### Concept B — Nucleus (symbol mark)

> **Prompt:** Minimalist symbol mark for a runtime framework. A solid red
> disk in the centre of a square canvas, surrounded by fourteen short
> radial ticks evenly distributed around the disk; one fifteenth tick is
> 1.7× longer and offset by twelve degrees from the others. All ticks have
> the same uniform stroke weight that matches the disk rim. Solid color
> `#b91c1c` on a transparent background, vector flat design, strict
> geometry, no shadows, no gradients, no glow. 1:1 aspect ratio. The mark
> reads as a hub-and-spoke nucleus, a system of artifacts.
>
> **Negative:** mascot, illustration, gradient, shadow, glow, 3D, isometric,
> bevel, gear, cog, sun rays, atom orbits, halo, photorealism.

### Concept C — Pulse Bracket (fallback)

> **Prompt:** Minimalist logo combining code brackets and a heartbeat. A
> left angle bracket and a right angle bracket of equal weight, joined at
> mid-height by a horizontal line that contains a single ascending square
> notch followed by a single descending square notch — a one-cycle pulse
> waveform between the brackets. Solid color `#b91c1c` on transparent
> background, monoline weight, square line caps, vector flat design, 4:3
> horizontal aspect ratio. No fill, no shadow, no gradient, no decoration.
>
> **Negative:** mascot, illustration, gradient, shadow, glow, 3D, isometric,
> bevel, ECG paper, hospital chart, monitor screen, photorealism.

### Favicon (Concept A, white on red)

> **Prompt:** Tiny app icon, 32×32 pixel art. Rounded square with a 12%
> corner radius, filled with solid color `#b91c1c`. Inside the square, a
> simplified white letter A made of two angled monoline strokes whose
> horizontal crossbar extends slightly past the right leg. Strokes are
> uniform weight, optimised for pixel-snapping at small sizes, square line
> caps. No anti-aliasing artefacts. No gradient, no shadow, no decoration.
> The mark is centred with 12% padding on every side.

### Favicon (Concept B, monochrome)

> **Prompt:** Tiny app icon, 32×32 pixel art. Rounded square with a 12%
> corner radius, filled with solid color `#09090b`. Inside the square, a
> small solid red disk in the centre surrounded by fourteen short white
> radial ticks; one tick is longer and tilted. Pixel-snapped, no
> anti-aliasing, no gradient, no shadow.

### OG image (1200×630)

> **Prompt:** Open Graph cover image for the documentation site of a
> SvelteKit runtime framework called "Active". Dark canvas `#09090b` on the
> right two-thirds, light canvas `#fafafa` on the left third — a clean
> vertical split. On the left third, the wordmark "active" set in lowercase
> JetBrains Mono medium, color `#18181b`, tight tracking, plus a small red
> dot above the letter i. Below the wordmark, the tagline "The runtime that
> wires your SvelteKit app together." in Inter Medium, color `#52525b`. On
> the right two-thirds, a faint geometric grid pattern overlaid with the
> Wired A symbol mark in solid `#ef4444`, very large, partially cropped on
> the right edge as if continuing past the canvas. Strict geometry,
> minimalist editorial layout, vector flat design, no photography, no
> shadow, no gradient.

---

## 11. Acceptance checklist

Before declaring a logo or favicon final, every export must pass:

- [ ] Mark is recognizable in **monochrome black** and **monochrome white**.
- [ ] Mark survives **invert** (black ↔ white) without losing meaning.
- [ ] Mark is recognizable at **16×16 px** without the wordmark.
- [ ] No part of the mark depends on a gradient, shadow, or glow.
- [ ] Wordmark is set in a **monospaced** typeface, lowercase, tight tracking.
- [ ] Lockup respects the symbol-to-wordmark ratio and gap defined in §8.
- [ ] OG image renders correctly when scaled to **600×315** (Twitter card).
- [ ] PWA maskable icon shows no clipping when masked to a 50% diameter circle.
- [ ] All raster files are exported as PNG, sRGB, no profile mismatch.
- [ ] An SVG master exists for every static raster.

---

## 12. Quick handoff sheet (paste this to a designer)

> We are Active, a runtime framework for SvelteKit. Fifteen artifacts, one
> composition root, two factories, one contract. Voice: serious, technical,
> deliberate, low-decoration.
>
> Brand color is a serious red — `#b91c1c` light, `#ef4444` dark, `#dc2626`
> for inline text accents. Wordmark is `active` lowercase in JetBrains
> Mono Medium with `-0.04em` tracking. The symbol mark is one of three
> concepts in §6 (preference: Concept A "Wired A").
>
> Deliver: SVG master + monochrome variants, full favicon set per §7, OG
> image 1200×630, PWA icon set including a maskable 512×512.
>
> Reference brands for tone (not for shape): Vercel, Resend, Linear,
> Effect.ts, Bun. Avoid: 3D, gradients beyond accent → emphasized, mascots,
> gears, puzzle pieces, the Svelte logo.