Brand Guidelines

Core Identity

The shelter terminal. A green phosphor CRT out of a 1950s idea of the future, running a cypherpunk OS. The screen is the hacker terminal of the 1990s, the furniture around it is retro-futurist civil defence, the bulletins pinned beside it are dry, and the bunker is a box under your desk with your own life in it.

The retro look goes back to when a computer was a tool you owned and could open, and it's built with modern restraint, so the text stays readable and the effects stay out of the way.

No borrowed mascots, logos or names from any game or film, however close the mood.

The Positioning

LocalGhost moves the AI, the data and the memory built from it off someone else's servers and onto a box you own, which answers your phone and gives everyone else the same 503 a dead server would.

Logo & Assets

The LocalGhost mark is a ghost with a zigzag bottom edge, a nod to the analogue waveforms of early computing. The eyes and smile are friendly but minimal. The terminal prompt > often accompanies the wordmark.

Primary Marks

Logo Variants

Usage Rules

Minimum Sizes

Icon. 32px minimum
Horizontal logo. 120px width minimum
Stacked logo. 200px width minimum

Colour Palette

A deliberately limited palette of black, green, grey and red, with amber for what isn't built yet. No pastels, and no gradients on surfaces (the only ones are the tube's own glow and vignette).

Usage Rules

Each colour is a status. Terminal Green is what runs and what we stand for, Amber is what's planned and not built yet, and Warning Red is what we reject (surveillance, rent-seeking, enshittification). A reader should be able to tell built from planned by colour alone, so don't use any of the three for decoration.

Typography

Type Rules

No serif fonts. Ever. Serifs are for institutions that want to look trustworthy. We prove trust through architecture.

Sizes. Interface text is 16px with a 1.7 line height, and the reading column on content pages and posts is 17px. A page title scales with the window, from 25px on a phone to 36px on a desk. Running text is held to about 44rem, so a line stays short enough to find the start of the next one.

Headings. The small label over a section is > SECTION_XX in terminal green with 0.2em letter-spacing. A numbered heading inside a page, like > 1. WHAT IT CARRIES, is 19px mono in green with a hairline under it.

Visual Effects

Texture that makes the page read as a lit tube without getting in the way of reading it. The constant effects are faint, and the loud ones are easter eggs that show up rarely, for a moment, and never for anyone whose system asks for reduced motion.

Effect Specifications

Scanlines. Repeating linear gradient, 2px transparent / 2px rgba(0,0,0,0.1). Applied as fixed overlay across entire viewport.

Terminal Glow. Box-shadow and text-shadow on green elements. text-shadow: 0 0 5px var(--terminal-dim)

Phosphor wash and vignette. A faint green radial wash behind the content, brightest a third of the way down, and a dark vignette at the edges of the viewport, both fixed and pointer-transparent. They're in base.css, so every page gets them.

Flicker. Randomised, slow animation (6s+ duration) inside the terminal only. Subtle opacity changes, enough to feel alive.

Easter eggs. /js/phosphor.js lets the tube misbehave now and then, an interference band rolling down, a flash, the vertical hold slipping, or a line burning in faintly. The first comes 30 to 90 seconds after the page opens, then one every one to three minutes, never while the tab is hidden. Typing ghost outside a text field puts up PLEASE STAND BY.

Motion. Going from one page to another cross-fades in under a fifth of a second while the nav holds still, a post draws a 2px green line along the top of the window as you read down it, and an answer in the FAQ slides open. All three are off for anyone whose system asks for reduced motion, and a browser that can't do one of them skips it.

Decoration stays out of the text. Flavour lines like the footer's END OF TRANSMISSION live in CSS, so screen readers, crawlers and the markdown twins of each page get the content and none of the set dressing.

Borders. 1px. Line is for panels, tables and dividers, Border is for small controls (key caps, tags, inputs), dashed rules and the lines in diagrams, and a button is outlined in Text, or in Terminal Green for the ghost variant. The two exceptions to 1px are a 2px rule down the left edge of a panel, green for what runs and red for what we reject, and the 2px green frame around a promise or a download. Sharp corners (0 or 4px max border-radius for code blocks). No drop shadows. No blur effects on cards.

Components

Component Rules

Buttons. Square brackets in label text. 1px border. No background until hover. Ghost variant uses terminal green.

Panels and cards. A Surface fill, a 1px border in Line, no border-radius. They're cells, they feel like terminal panes, not material design cards.

Links. Terminal green, with the underline at half strength so a paragraph with four links in it still reads as a paragraph. It comes up to full strength on hover.

Focus. A 2px terminal green outline around whatever the keyboard is on. It doesn't show for a mouse or a finger.

Terminal chrome. The dot-buttons (red/yellow/green) are interactive easter eggs, not decoration. Close triggers Matrix rain. Maximise expands the terminal.

Symbolic Motifs

Recurring symbols that carry meaning throughout the brand. They carry meaning, they are not decoration.

Voice & Tone

The writing guidelines are the rules for every word on the site, and this section is how they meet the look. The short version is someone who built the thing walking a sceptical peer through it, plainly, with the numbers, saying what isn't done yet, and with a dry joke where one lands.

How the voice meets the look

Plain prose, loud furniture. The terminal chrome, the placards and the boot screen carry the retro-futurist mood, so the sentences don't have to. Body copy stays first person and specific.

Built in green, planned in amber. Anything not running today gets said in the copy and marked in amber. The look should never make a plan read like a feature.

Code as proof. A claim about privacy names the mechanism (the 503, the certificate, the TPM seal) or links the code, rather than asking for trust.

Dark humour. "At least this 404 doesn't phone home." Civil-defence deadpan about the absurd parts of the status quo, and about ourselves, never at the reader.

Signature Phrases

Voice Comparison

What We Never Sound Like

Corporate. "We're excited to announce..." / "Best-in-class solutions..."
Apologetic. "We understand this might seem..." / "We're sorry but..."
Vague. "Industry-leading" / "Seamless experience" / "Synergy"
Pleading. "Please consider..." / "We'd love if you..."

Design Principles

Emotional Register

Controlled anger. The copy is political but not preachy. Angry at systems, not people. Channels frustration into action.

Quiet confidence. We don't beg. We don't compare ourselves to competitors. We state what we've built and let the architecture speak.

Dark humour. The gallows wit of people who've seen the machine and chosen to build the exit. Never cruel, always knowing.

Spacing & Layout

Grid. Components align to an implicit grid. Dense but not cluttered. The reading column is 750px, and the home page and these guideline pages are 900px.

Line height. 1.7-1.8 for body text. Generous but not loose. Headings sit at 1.2 to 1.35, so a title that wraps still reads as one thing.

CSS Utilities

Drop-in CSS utilities for building interfaces with the LocalGhost aesthetic. Includes design tokens as CSS custom properties, utility classes, and pre-built components.

Usage

Design Tokens (CSS Custom Properties)

Utility Classes

Components

Example