pixies

Self-hosted internet speed analytics. The brand is a measurement tool, not a consumer gadget: calm ink surfaces, one pulse-green accent, type that behaves like a control panel.

Rationale

The retired mark was a speedometer: a dial and a needle. It said "speed test" and nothing about the thing that makes the product useful, which is the record of many tests over time.

The Pixies mark keeps the measurement but changes the metaphor. A single speed pulse rises, dips, and then leaves the signal as two discrete squares. The pulse is the test; the squares are the readings that detach from it and become data. Two squares, not one, is the quiet nod to the plural name: small pixel sprites leaving a trace. It reads as signal, as speed, and as a graph, without a dial, a needle, or a gauge arc.

The form is deliberately asymmetric: one heavy stroke, one merged block, one small satellite. That tension is what keeps an otherwise simple mark from looking like a generic heartbeat icon, and it survives at 16px because the silhouette is three masses, not ten details.

Palette

Token	Hex	Use
Pulse	#35E0A0	Accent on dark surfaces. Mark, active states, key values.
Pulse Deep	#04785C	Accent on light surfaces. Same role, contrast-corrected.
Ink	#0B0F14	Dark background, primary text on light.
Ink Raised	#141A21	Cards and panels on dark.
Hairline Dark	#232B34	Borders and dividers on dark.
Paper	#F4F7F4	Light background.
Paper Sunken	#E8EDEA	Light-mode panels.
Text Light	#E6EDF3	Primary text on dark.
Text Muted Dark	#93A1AE	Secondary text on dark.
Text Muted Light	#5A6672	Secondary text on light.

Measured contrast (WCAG 2.1):

• Pulse on Ink: 11.3:1 (body text and graphics, AAA for large text)
• Pulse Deep on Paper: 5.1:1, on pure white 5.5:1 (AA body text)
• Text Light on Ink: 16.3:1; Ink on Paper: 17.8:1
• Pulse on Paper is 1.5:1 and must never carry text or a lone mark on light backgrounds. Use Pulse Deep there instead. This is the single most common way to break the brand.

One accent, always. Pulse and Pulse Deep are the same role expressed for two backgrounds; they are not two brand colors to be used side by side.

Typography

• Wordmark: Inter, outlined to paths (wordmark.svg). Tracking -0.022em, optical weight between Regular and Medium (the outline carries a 2.2/64 stroke compensation).
• UI and product: Inter (already shipped by the app at client/public/assets/fonts/inter-v12-latin-regular.ttf).
• Numbers, timings, server names: a real mono (ui-monospace, SFMono-Regular, JetBrains Mono, Menlo, Consolas, monospace). Speed values, jitter and server labels are monospaced so columns of measurements stay aligned.
• Fallback stack: Inter, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif.
• Display sizes: tight tracking (-0.02em), weights 500-600. Body: weight 400, line-height 1.5-1.6.

Files

File	Purpose
logo.svg	Primary mark, 100x100 viewBox, inherits currentColor.
logo-dark.svg	Mark in Pulse for Ink and darker surfaces.
logo-light.svg	Mark in Pulse Deep for Paper and lighter surfaces.
icon.svg	Square app icon: Pulse mark on an Ink rounded tile. Favicon and PWA source.
logo-512.png, logo-192.png, logo-64.png	Raster exports of icon.svg (512, 192, 64 px).
favicon.ico	Multi-resolution icon: 16, 24, 32, 48, 64 px.
wordmark.svg	Mark + outlined "Pixies", currentColor. Lockup, 266x140.
wordmark-dark.svg	Pulse mark + #E6EDF3 wordmark, for dark surfaces.
wordmark-light.svg	Pulse Deep mark + Ink wordmark, for light surfaces.
concepts/	Six exploration variants plus rendered previews (design history).
showcase.html	Offline review page for the concepts and the final mark.

Usage rules

Clear space. Keep at least half the mark's height (0.5x) clear on every side. Never let text, cards, or edges touch the mark.

Minimum sizes. Mark: 16px for the icon, 24px for standalone mark use. Wordmark: 96px wide. Below 24px, use icon.svg (the tile keeps the green readable on white browser chrome).

Backgrounds. Dark UI: logo-dark.svg or wordmark-dark.svg. Light UI: logo-light.svg or wordmark-light.svg. Inline SVG: logo.svg / wordmark.svg inherit currentColor; set color, do not recolor individual paths.

Do not rotate, skew, stretch, outline, add drop shadows or glows to the mark. Do not place the mark on a mid-tone photo without a solid Ink or Paper plate behind it. Do not separate the two pixel squares from the pulse, re-space them, or rebuild the mark from parts: the gap rhythm is the logo. Do not recreate the wordmark in live text; use the outlined files or Inter with the tracked settings above.

Favicon. favicon.ico and the PNG set are generated from icon.svg. Regenerate from the SVG, never upscale a raster export.

Motion

The mark may animate once, on first load only: the pulse draws left to right over 400ms (ease-out), then the two squares fade and settle with a 60ms stagger. No loops, no infinite pulsing. Respect prefers-reduced-motion and render the static mark.