# The Ghost — Design System > **Editorial. Punk. Surgical.** > Voice archaeology and LinkedIn ghostwriting for founders, B2B operators, and the 70% of them who are quietly neurodivergent. The Ghost is the public-facing studio brand. It sits inside a wider trickle architecture — **The Ghost / HauntOS / Your Words Not Theirs** — that shares Syne as its body face but uses **The Ghost** as the loud, opinionated front door. The 30-second pitch the system has to deliver: *"An editorial-punk LinkedIn ghostwriter brand with a sheet-ghost mascot — not a personal-brand consultant in beige, not a cute Halloween Etsy shop."* --- ## What the system has to produce | Surface | Format | Notes | |---|---|---| | LinkedIn carousels | 1080×1080 + portrait | Hero / diagnostic / CTA slide types | | LinkedIn header | 1584×396 | Lower-left profile-photo overlap | | Newsletter (Substack — *Your Words Not Theirs*) | masthead + section dividers | Heavy serif title, mono dateline | | Landing page (theghost.studio) | hero + section blocks | Loud, structured, opinion-led | | Sales deck / proposal | 9-page locked .docx | Cover → opening → foundation → 3 tiers (mid = RECOMMENDED) → recommendation → terms → sign-off | | Lead magnets | PDF guides, prompt packs, audit reports | Print-ready, mono footnotes | | Profile photos / avatars | LinkedIn, Substack, Skool | Hero ghost on white, monochrome | | HauntOS Skool community | softer pink-coded variant | Same skeleton, pink instead of magenta | --- ## Source materials provided by the user Listed for traceability. Originals live in `uploads/`; canonical copies in `assets/`. **Logo / brand marks** - `the ghost wordmark.png` → `assets/wordmark-the-ghost.png` — primary lockup ("the" serif + "GHOST" sans, ghost as the O) - `ghost text.webp` → `assets/wordmark-ghost-only.webp` — secondary GHOST-only lockup - `ghostie.png` → `assets/ghost-hero.png` — hero sheet ghost, white sheet, HauntOS amber offset, three triangular hem cuts, two oval black eyes, slight lean. **Canonical mascot.** - `0kbFd1HPShWE06enZjZLqg@2k.webp` → `assets/wordmark-the-serif.webp` — "the" serif specimen - `FAjxmonhSi6gnV8JGq8PtA@2k.webp` → `assets/ghost-shades-illustration.webp` — alt arms-crossed ghost (tone reference; not primary mascot) - `9d4b3097-b527-4247-803d-7d7a170c7811.png` → `assets/quote-ghost-concepts.png` — Quote-Ghost ornament concepts (typographic ornament for long-form / newsletter) **Photographic mood / tone** - `milk.jpg`, `telephone.jpg`, `ac0501209b186e2ea0c0b5b552d34a9e.jpg`, `0968c1d7d48e8f9ebf59d359f27c7266.jpg`, `6d3b9b862c33aa2cf8fca816c1652ff7.jpg`, `3473dc0f000d10baf67191ac830d9ff0.jpg` → editorial-punk reference photography. High contrast, warm reds, declarative type-on-object. - `entropy_squared_greek_style_statue_in_fashionable_jacket_and_sh_*.png`, `redezra_An_old_nun_in_full_black_habit_and_veil_leaning_out_the_*.png` → embodied-character imagery (the "voice expert with a ghost at her elbow" register). **References (verbal)** - Hermark Costudio — flat color, brutal serifs, studio voice that talks back. - Eye on Design (AIGA) — heavy serif editorial layout. - Mschf — punk brand discipline. **Anti-references** — sage/cream SaaS personal brand, LinkedIn-influencer beige minimalism, Halloween Etsy cute mascot. --- ## Index — what's in this folder ``` README.md ← you are here SKILL.md ← skill manifest (Claude Code-compatible) colors_and_type.css ← canonical CSS variables for color + type assets/ ← logos, mascot, photographic tone library fonts/ ← (empty; system uses Google Fonts. See FONTS section.) preview/ ← Design System tab cards (one .html per token cluster) ui_kits/ ├─ landing/ ← theghost.studio landing page ├─ linkedin_carousel/ ← carousel slide templates (1080×1080) ├─ linkedin_header/ ← 1584×396 banner └─ newsletter/ ← Your Words Not Theirs masthead + article slides/ ├─ (9-page sales deck files) ← proposal template └─ micro-audit-deck/ ← 7-slide A4 landscape Voice Drift Audit deck. See ./SPEC.md ``` ### Micro Audit Deck A 7-slide A4 landscape (1754×1240) companion deck for a 2-minute Voice Drift Audit Loom. Lives at `slides/micro-audit-deck/`. Locked rules (see `slides/micro-audit-deck/SPEC.md`): - **Wordmark / ghost mark sits top-right; timestamp eyebrow sits top-left. They must never cross.** The eyebrow has a hard `right: 260px` boundary plus nowrap + ellipsis truncation. Don't override. - Stage inset: `220px 80px 140px 80px`. Working area is 1594 × 880 px. - Minimum type 16 px (footer). Body quotes 40 px, H2 88 px, detonation 112 px. - Slide 7 (permission close) flips to magenta ground + paper-white mark variant. - PDF is built from the rendered PNGs, never from Chrome's print engine on source HTML. - No em-dashes. No bylines. No dispatch numbers. To reuse: copy the folder into `Ghost OS/prospects/{name}/assets/voice-drift-audit/`, rename `deck-template.html` → `deck.html`, edit the copy inside each `.stage` only, then `node generate-pngs.mjs`. --- ## CONTENT FUNDAMENTALS The Ghost talks like **a voice expert diagnosing what's actually broken in your writing, with a sheet ghost at her elbow.** Surgical. Anti-guru. Anti-contrarian-for-the-sake-of. Neurodivergent-coded. Allergic to LinkedIn platitude. ### Tone rules - **Diagnose, don't motivate.** "Your hook is buried under three sentences of credentialing" — never "unleash your authentic voice." - **Talk back to the reader.** The studio has an opinion and uses it. Lines like *"You copied the vibe but not the strategy"* and *"For creative crisis only"* are the register. - **Strike-throughs are punctuation.** Cross out the bad word, write the good one in. ~~empower~~ → equip. ~~journey~~ → process. The gesture is the point. - **Funny via accuracy, never via puns.** Humour comes from naming the exact thing nobody is naming. - **Direct address.** "You" not "they." Second person, not abstract third. - **Specific over universal.** "The 70% of B2B operators who are quietly neurodivergent" beats "everyone." ### Casing - Body copy: sentence case. - Sub-display callouts and labels: **ALL CAPS** with track-out (`letter-spacing: 0.06em`). - Display headlines: sentence case in serif, never all-caps in serif. - Mono labels are always all-caps: `01 / 09`, `THE GHOST // EST 2024`. ### "I" vs "you" - **You** is the dominant pronoun. The reader is the subject of every sentence that diagnoses. - **We** is used sparingly, when the studio commits to a thing. ("We don't do beige.") - **I** appears only in newsletter / personal-essay register (Your Words Not Theirs). ### Punctuation - **No em-dashes on screen.** Use middot ` · `, double slash ` // `, or a line break instead. - **No exclamation marks** unless inside an ironic quote. - Periods, commas, colons, full-stops as punchlines. ("You're not losing clients. You're losing clarity.") ### Forbidden words (hard ban) `empower` · `unleash` · `leverage` · `journey` · `authentic` · `seamless` · `thought leader` · `synergy` · `game-changer` · `level up` · `crush it` ### Emoji **Never.** Not in copy, not in UI, not in slides. Use mono dingbats or `→ ↗ ✕ ◆ ●` if you need a glyph. Emoji read as Etsy and the brand is allergic to that. ### Sample voice (real-register copy) - *"You're not losing clients. You're losing clarity."* - *"For creative crisis only."* - *"You copied the vibe but not the strategy."* - *"The product dev team really hates flakes."* (deadpan) - *"60% of nonfiction bestsellers are ghostwritten. Guess what."* - *"Felt cute. Might spook you later."* (ironic, used sparingly) --- ## VISUAL FOUNDATIONS ### Color - **White is the ground (70–80%).** Magenta and cyan are weapons, not wallpaper. - **#E91E8C magenta** — primary. Corner blocks, full-bleed punctuation panels, `` highlights, button fills. - **#00BCD4 cyan** — secondary. **One per screen.** Anchors the opposite corner from magenta. Never paired with white text — cyan + black only. - **#0A0A0A off-black** — type and ghost eyes only. **Never a background fill.** If you want dark, use the inverse-mode where black is the surface and white the text — but keep it rare. - **#E8850C HauntOS amber** — locked to the hero ghost as offset shadow. Forbidden anywhere else. - **#FFD9EC HauntOS pink** — appears only in the Skool community variant of the system. Three-color rainbow palettes are forbidden. A composition is white + (magenta XOR cyan) + ink. Both colors at once exist only on hero / wordmark surfaces, on opposite corners. ### Type - **Display:** Fraunces (sub for Reckless / GT Sectra), wght 900. Heavy serif, knife edges, used for the word "the" in the wordmark and for editorial opinion headlines and pull-quotes. - **Sub-display / hammer:** Archivo Black (sub for Druk / Obviously / Sharp Grotesk). All-caps, tight tracking, used for "GHOST," subheads, full-bleed punchlines. - **Body:** Syne wght 500–700. Already in the HauntOS stack — keeps trickle architecture intact. - **Mono:** IBM Plex Mono. System labels, slide counters, footnotes, datelines, captions. Editorial mono — not SaaS. > **Font substitution flag:** The user requested commercial faces (Reckless / GT Sectra and Druk / Obviously / Sharp Grotesk). This system uses **Fraunces** and **Archivo Black** as the closest-spirit Google Fonts substitutes so the prototypes render correctly. **Please supply the licensed font files in `fonts/` and update `colors_and_type.css` to swap the family stacks.** ### Backgrounds - **No gradient hero backgrounds.** Banned. - **No glassmorphism. No drop shadows on everything.** Banned. - White is default. Full-bleed magenta or cyan panels appear once per long-form piece, as **structural punctuation** (a full slide, a full hero). Never as a soft pastel wash. - Photographic backgrounds are allowed only when the photo *is* the message (e.g. milk-carton "the content agency", red-phone "for creative crisis only"). Never decorative. ### Borders & rules - **Hairline ink rule** is the primary divider — `1px solid #0A0A0A`. - **Bold rule** = `2px`. Used to box pull-quotes and tier cards. - **Brutal rule** = `4px`. Used on full-bleed cards and the recommended-tier banner. - No subtle grey rules. Rules are ink, or they don't exist. ### Corners - **Flat. Punk.** `--r-0: 0` is the default. Inputs use `--r-1: 2px` so they don't look like office software. Pills exist (`--r-pill: 999px`) for one-off CTAs only and never appear next to each other. - Rounded-everything wellness softness is forbidden. ### Shadows - **No drop shadows on UI.** Banned. - **Offset block shadows** (`6px 6px 0 0` magenta or cyan) are the only sanctioned shadow — used on the hero ghost mascot and on tier cards as the punk-printer-shop gesture. Inner shadows: never. ### Cards - A card is `2px` ink border, `0` radius, white fill. That's it. - "Recommended" cards swap to magenta fill, white text, ink border. ### Spacing - 4px base. Scale: 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 / 128. - Page gutters: 64px desktop, 24px mobile. - Vertical rhythm between sections: 96–128px. Editorial breathing. ### Layout rules - **Asymmetric.** Centered text only when it's a hammer-cap full-bleed; never centered for vibes. - **Magenta corner block + cyan opposite-corner block** is the canonical hero composition. - Slide counter (`01 / 09`) sits bottom-right in mono. - The ghost mascot lives in the **lower-left third** of hero compositions, leaning slightly. Never centered on heroes (centered = altar = wrong). ### Animation - **Snap, don't bounce.** `cubic-bezier(.2,.9,.2,1)` over 120–200ms. Surgical. - Fades only when crossing a section. No parallax. No scroll-jacking. No wellness-app easing. ### Hover / press - **Hover (links, buttons):** invert. White-on-ink becomes ink-on-white, magenta becomes ink. Underline thickens from 1px → 2px on text links. - **Press:** color shifts to `--magenta-press` / `--cyan-press` (a notch darker). No scale-down, no shrink. The brand doesn't squish. - **No opacity-fade hovers.** That's SaaS. ### Transparency / blur - **Never.** No blurred backdrops. No translucent panels. The brand is opaque on purpose. ### Imagery vibe - High contrast. Warm reds and editorial blacks. Either staged-object photography (red phone, milk carton, protest sign) or slightly uncanny embodied-character (sheet ghost in a domestic interior, marble statue in shades). - Grain is fine. Glossy stock library look is forbidden. ### Iconography - See `## ICONOGRAPHY` below. --- ## ICONOGRAPHY The Ghost does not use a traditional icon set. Iconography is replaced by: 1. **The hero sheet ghost** (`assets/ghost-hero.png`). The mascot does the work that an icon set would normally do — it's the "logo at any scale," the slide chrome, the corner ornament. Use it large or tiny, never warped. 2. **The Quote-Ghost ornament** (`assets/quote-ghost-concepts.png`). A chunky bold opening-quote glyph paired with a ghost-shaped closing-quote glyph. Used for long-form pull-quotes and newsletter section dividers. Six concepts exist; the system standardises on **Concept 4** (round comma open + sheet-ghost close with eyes). 3. **Mono dingbats / Unicode arrows** for system-level glyphs only: `→ ↗ ↘ ✕ ◆ ●`. Never coloured. Always set in IBM Plex Mono. 4. **CDN icon set fallback** (when a true UI icon is structurally needed — search, close, hamburger): **Lucide** via CDN, stroke 1.5, current-color. Lucide is sub-DEFAULT only; prefer the ghost or a mono dingbat first. **Substitution flagged.** ```html ``` 5. **Emoji are forbidden.** Always. The Ghost mascot can wear accessories (sunglasses, a notepad, a microphone) for one-off campaign artwork, but the canonical mark is the unaccessorised hero ghost in `assets/ghost-hero.png`. --- ## FONTS This system loads fonts from Google Fonts. The user supplied **no font files** in `uploads/`, so `fonts/` is intentionally empty. | Role | Requested (commercial) | Substitute used | Status | |---|---|---|---| | Display serif | Reckless / GT Sectra (heavy) | **Fraunces 900** | ⚠ flagged | | Sub-display sans | Druk / Obviously / Sharp Grotesk (black) | **Archivo Black** | ⚠ flagged | | Body | Syne | Syne | ✓ free, in use | | Mono | IBM Plex Mono | IBM Plex Mono | ✓ free, in use | **Action requested from the user:** drop licensed `.woff2` files for Reckless (or GT Sectra) and Druk (or Obviously / Sharp Grotesk) into `fonts/`, and update the `--font-display` and `--font-sub` stacks at the top of `colors_and_type.css`. The existing CSS will pick them up automatically. --- ## How to use this system 1. Import the foundation: `` from inside `ui_kits//index.html`. 2. Use semantic tokens (`var(--ghost-magenta)`, `var(--font-display)`) — never raw hexes. 3. Pull mascot / wordmark from `assets/`. Don't redraw them. 4. For prototyping, copy a UI kit, mash up the React components, swap copy. When in doubt: white ground, ink type, magenta or cyan as the single weapon. No gradients. No emoji. No em-dashes. No "unleash."