Brand assets
Logos, colors, and how to use them.
01 · Logo
The mark & the lockup
Pagelive
Pixel-art "P" page, primary mark, transparent background
512×512, padded: favicons, app icons, avatars
1200×630 Open Graph image
Minimum size: 16px. The mark is pixel art: keep edges crisp, never smooth or blur.
02 · Color
Pagelive Orange, then mostly neutral
Brand ramp · the mark’s palette
UI tokens · light theme
03 · Typography
Geist, with mono for the details
Geist · UI & headlines
Publish it. Track it.
Headlines semibold and tight; body text regular, generous line height.
@fontsource-variable/geist · weights 100–900
Mono · labels & specs
SECTION LABELS · uppercase · tracking-[0.18em]
noindex by default · pagelive.app · X-Robots-Tag
Monospace marks the technical layer: eyebrow labels, hostnames, headers, badges. Sparingly, always small.
Texture
Dashed borders everywhere (border-dashed), 10px base radius, a single column framed by dashed rails. Calm, structural, a little blueprint-y.
04 · Usage
Do this, not that
Do
- ✓Use the mark on light or dark backgrounds: it works on both
- ✓Keep the pixel edges crisp: scale in whole multiples, never blur or smooth
- ✓Pair the mark with "Pagelive" set in Geist semibold for the full lockup
- ✓Give it room: clear space of at least half the mark’s width on every side
Don’t
- ✕Don’t recolor the mark or apply gradients, shadows, or outlines
- ✕Don’t rotate, skew, or place it inside another shape
- ✕Don’t use the mark smaller than 16px: it’s pixel art and turns to mush
- ✕Don’t write "PageLive", "page live", or "Pagelive.io": it’s Pagelive, one word, capital P
05 · Naming
It’s “Pagelive”
Correct
Pagelive
One word, capital P. In a sentence: “published with Pagelive”.
Not
PageLive · page live · PAGELIVE · Pagelive.io
The .io is the website, not the name.
Describing the product in one line: “Pagelive turns AI-built pages into private, branded, tracked links.” Questions about brand use: hello@pagelive.io.