active-svelte/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.