# Spark Hive Design System > **Analog Soul in a Digital World.** Every surface should feel like it passed through human hands — hand-crafted, intentionally simple, structured with care. Like an immaculate bullet journal where every element is placed with purpose. Spark Hive is a strategy & systems studio led by Tatiana. The brand language is "Naive Design" — precise but warm, playful but never cluttered, hand-drawn but never sloppy. It shows up across social content, presentations, client proposals, and the marketing website. ## Sources used to build this system All materials were provided directly by the user as uploads (no external repos or Figma files attached): - **Brand & prompting guide** — "Spark Hive Visual Identity System" doc pasted into the project (covers philosophy, palette, typography, composition templates, archetypes, service tiers, hard-boundary "electric fence" anti-patterns, generation workflow for Gemini/Nano Banana). - **Logos** — `Full Color - Slogan SVG.svg/.png`, `Full Color Square.svg`, `Favicon - Color.png`, `landscape logo`. - **Brand icons** (hand-drawn, PNG) — Queen's Strategic Aura, Bee, Builder's Box (three variants), 3D Playful Toolbox, North Star Compass (three variants), Doodle Brain (two variants), Spark Brain, Second Brain, 3D Playful Brain. - **Fonts** — full Nunito family, full Lora family, Shadows Into Light (one & two). **Raleway Dots** was specified but no file provided — loaded from Google Fonts CDN (flagged below). - **Airtable base** `app08dxetz3Qx0bBs` (Phrase Library, Content Blocks, Documents) is referenced in the guide but not accessed from this system. --- ## Content fundamentals Spark Hive copy sounds like **Tatiana talking to one person over coffee** — warm, precise, a little playful, never corporate. **Voice IS / BUT NEVER** (from the brand guide): Precise / Rigid · Hand-crafted / Messy · Warm / Soft · Structured / Corporate · Playful / Cluttered · Clean / Sterile · Human / Sloppy. **Person & address.** Second person ("you," "your spark," "your system"). Tatiana uses "I" when speaking as herself; the brand uses "we" when speaking as Spark Hive. Never third-person corporate ("clients will experience…"). **Casing.** Sentence case for headlines and buttons (`From spark to structure`, not `From Spark To Structure`). Title case reserved for proper nouns and named offerings: *Spark Explorer*, *Hive Build*, *Queen Bee*, *The Spark Gradient*, *Queen's Move*. ALL-CAPS only on Raleway Dots accent labels — sparingly, one per composition. **Named phrases.** The brand has a working vocabulary that should be reused verbatim rather than paraphrased: *From spark to structure* · *Analog soul in a digital world* · *Queen's Move* · *Launch Spark* · *Crystal Clarity* · *Builder's Box* · *The Spark* · *Paper to platform* · *Organized chaos* · *The electric fence*. **Sentence rhythm.** Short declarative sentences. Comfortable with fragments. Em-dashes are welcome. Lists use parallel structure and concrete nouns. > ✅ "From spark to structure. One notebook. One system. One week." > ❌ "Our comprehensive suite of strategic deliverables empowers founders to unlock scalable growth pathways." **Numbers & scale.** Numerals always ("3 phases," "1 week," not "three"). Percent sign over the word. **Emoji.** Not part of the brand voice. Replace with hand-drawn glyphs — the gold four-point spark (✦), a purple dot, or a sticky-note pill. **Punctuation quirks.** Curly quotes `"…"` and apostrophes `'`. Oxford comma. Ellipses are one character `…`, not three dots. **Client archetype tones** (when writing to a specific persona): - *Queen in Waiting* — contemplative, reassuring, "you already know." - *Visionary in Motion* — kinetic, directive, "let's ship this." - *Reluctant Ringmaster* — relieving, calm, "we'll take it from here." --- ## Visual foundations ### Color See `colors_and_type.css` for the full token set. The **canonical palette** is Cosmic Purple `#471C78`, Radiant Gold `#F6A900`, Spark Teal `#00CFC1`, Orbit Silver `#BFBFBF`, Midnight `#1A1A1A`, White `#FFFFFF`. **Usage ratio is 60/30/10** — brand colors dominate, structural neutrals ground, energy accents pop. Deprecated values (`#6B46C1` old purple, `#FFB800` old gold) must be corrected on sight. Three **named gradients**, used sparingly: *The Spark* (purple → gold) for hero sections, *The Innovation Glow* (purple → teal) for tech content, *The Warmth Sweep* (gold → teal) for celebrations. ### Typography - **Headings** — Nunito Bold / ExtraBold / Black, 24–44pt, tight tracking, Cosmic Purple by default. - **Body** — Nunito Regular/Light, 16–18px, 1.5–1.7 leading, Midnight on white. - **Editorial / quotes** — Lora italic at 24–30px (Lora is an approved secondary serif for long-form reading). - **Handwritten** — Shadows Into Light, 18–22px, for annotations, margin notes, sticky labels. Never for body. - **Accent** — Raleway Dots, ALL-CAPS, 12–14px with `letter-spacing: 0.12em`. One per composition. **Spice only.** - **Never** — text baked into AI-generated images (brand rule). Text is always layered in post. ### Backgrounds Three approved **paper grounds**: dot grid, graph paper, plain white. No cream, no beige, no off-yellow, no distressed textures, no coffee-ring stains. Grids render via CSS (`--sh-paper-dot`, `--sh-paper-graph`) at low-opacity purple so they read as structure, not decoration. Gradients only on hero moments; never as a lazy background fill. ### Iconography & imagery Hand-drawn PNG icons with visible crayon/marker grain. See the ICONOGRAPHY section below. Photography, when used, leans warm and analog — morning light, notebook spreads, a single pen on a desk. Never stock handshakes, never suited office scenes, never 3D clay renders (the 3D brain/toolbox icons are the deliberate exception). ### Spacing & layout 4pt base grid (`--sh-space-1` = 4px through `--sh-space-24` = 96px). Layouts are **symmetric and aligned** — nothing floats randomly. Generous breathing room; white space is a design element, not a leftover. Page max-widths around 1200px with 80–96px vertical rhythm between sections. ### Corners & borders Soft radii: `sm` 8, `md` 12, `lg` 18, `xl` 28. Pill buttons are full `999px`. Sticky notes use the "authentic wobble" radius — asymmetric values like `14px 18px 12px 20px / 16px 14px 20px 12px` — for a hand-cut feel. Borders are 1.5px by default, 2.5px when they need to feel crayon-drawn; color is purple-200 at hairline weight, cosmic purple when structural. ### Shadows & elevation Paper-on-paper, never glassy. `shadow-sm` through `shadow-lg` are soft drop shadows with low opacity. Sticky notes use a two-layer shadow with a **sharp offset** (`2px 3px 0`) plus a soft ambient — mimics real paper. No inner shadows, no neumorphism. Spark "glow" shadows (4px gold or purple ring) reserved for focused / active states. ### Hover & press Hover lifts via `translateY(-2px)` and shadow-md. Solid buttons darken one step (`--sh-purple-600`); ghost buttons fill in with `--sh-purple-50`. Press state shrinks to `scale(0.98)` with no translate. Links shift from Cosmic Purple to `purple-400` with an underline that thickens from 1.5 to 2px. ### Motion Standard ease `cubic-bezier(0.22, 0.61, 0.36, 1)`; entrances use an overshoot curve. Durations 140 / 220 / 380ms. Fades and small rises dominate; no bounces, no springs, no spinning loaders. Page transitions cross-fade. Icons may gently "breathe" (2–3% scale loop) on hero moments — never jitter. ### Transparency & blur Used rarely. Dot/graph overlays sit at 5–15% opacity over white — low enough that they read as structure, not pattern. Frosted-glass / backdrop-blur is avoided (too corporate-SaaS). When a surface needs to float, it gets a paper shadow, not a blur. ### Cards & containers Cards are white rectangles with `radius-lg` (18px), `shadow-sm`, 1.5px `--sh-border` hairline. Featured cards swap the hairline for a 2.5px Cosmic Purple stroke. Sticky-note cards break the grid: wobble radius, sticky shadow, a slight `rotate(-1deg)` for pinned / `rotate(1deg)` for handed-in. ### Layout rules (fixed) - Logo top-left, never centered, never rotated. - CTAs use gold fill on purple surfaces, purple fill on white surfaces — never gold on white without a purple outline. - Raleway Dots eyebrow: one per screen, always above a heading, never mid-paragraph. - Hand-drawn icons get 32–96px of breathing room on every side. Don't crop them to edges. --- ## Iconography **Approach.** Spark Hive icons are **hand-drawn PNGs with visible texture** — crayon, pen, marker. They are the brand's loudest visual instrument. Each icon is a metaphor (queen, compass, bee, brain, toolbox) rather than a generic UI glyph. They are **never flat vector UI icons** and **never emoji**. **Three style tiers** (all in `assets/`): 1. **Filled-line hand-drawn** (default) — e.g. `icon-north-star-compass.png`, `icon-queens-move.png`, `icon-brain-doodle.png`, `icon-builders-box.png`. Purple outlines with gold, teal, or gradient fills. Sized 64–240px. Used on hero units, section intros, service tier markers. 2. **Pure line** — `icon-brain-doodle-line.png`, `icon-builders-box-line.png`, `icon-north-star-compass-bw.png`. Purple stroke only, no fill. Used inside dense content, alongside body text, and for annotations. 3. **3D Playful** — `icon-toolbox-3d.png`, `icon-brain-3d.png`. Saved for special moments (launch announcements, swag, Queen Bee tier collateral). Never mixed with flat icons on the same screen. **UI glyphs** (chevrons, checkmarks, close, menu) are **not in the hand-drawn library**. For these, use the **Lucide** icon set (linked from CDN in the UI kits) — clean `1.75px` strokes, `stroke-linecap: round`, which matches the bullet-journal pen feel. This is a substitution, flagged below. **Emoji.** Not part of the brand. Replace with the gold four-point spark `✦` or a hand-drawn inline PNG. **Unicode glyphs.** The four-point spark `✦`, bullet `•`, em-dash `—`, and arrow `→` are the only Unicode characters used decoratively. **Full icon inventory** lives in `assets/`: | File | Use | |---|---| | `logo-full-color-slogan.svg` | Primary logo lockup with slogan | | `logo-full-color-square.svg` | Square logo (social avatars, app icon) | | `logo-landscape.svg` | Horizontal logo (header bars) | | `favicon-color.png` | Favicon / tab icon | | `icon-queens-move.png` | Strategy, decision, signature service | | `icon-north-star-compass.png` / `-bw.png` / `-plain.png` | Vision, direction, clarity | | `icon-bee.png` | Brand mascot; hive / team moments | | `icon-builders-box.png` / `-line.png` / `-solid.png` | Implementation, tools, Hive Build | | `icon-toolbox-3d.png` | Playful 3D alt for Builder's Box | | `icon-brain-doodle.png` / `-line.png` | Thinking, strategy, ideation | | `icon-spark-brain.png` | "Analog soul" motif — the spark moment | | `icon-second-brain.png` | Systems, knowledge management | | `icon-brain-3d.png` | 3D alt for hero moments | --- ## Video overlay system Graphics for the talking-head video series live in `video/`, with reference cards under the **Video** group in `preview/`. Everything else in this system dresses a surface the brand owns; these sit **on top of live footage of a person**, which changes the rules. **The one law.** The centre **46%** of frame belongs to the speaker's face. Every element hugs an edge or a corner; nothing floats mid-frame. `.shv-safe` draws the guide — see `preview/video-safe-zones.html`. On 9:16 the speaker fills the width, so overlays go **above or below**, never beside. **Legibility over footage.** Footage is bright, moving and unpredictable, so overlays carry more weight than page components do: - **Gold never touches footage without a purple stroke or a purple block behind it.** This single rule decides whether an overlay survives. It also governs thumbnails at postage-stamp size. - Translucent plates sit at **0.94 alpha minimum** — below that the video eats the type. - Small labels get a paper chip. Plain purple at 30px disappears on a bright frame. - Nothing thinner than **8px at 1280 wide** (2px once shrunk to mobile). **Motion.** One shared **9-second cycle** — in at 0–7%, hold, out by 100% — so entrances and exits can be judged against each other. Eight classes cover every case (`.shv-in-left/right/up`, `.shv-pop`, `.shv-swipe`, `.shv-draw`, `.shv-breathe`, `.shv-blink`); stagger siblings with `.shv-delay-1/2/3` rather than inventing timings. All of it goes inert under `prefers-reduced-motion`. Easing stays `--sh-ease-standard`; no bounces, no springs. **Authoring scale.** Overlay artwork is authored in **design units** — 880×495 for 16:9, 304×540 for 9:16 — and `.shv-frame` scales that up to true output size. Edit in design units; never hand-multiply coordinates. **Recurring devices.** The series reuses a fixed vocabulary — marker strike-through, loop arrow (and its gap-closing variant), the `≠` comparison, the checkbox stack, the number callout/stamp, and the numbered framework card. Reuse them rather than inventing a new mark. Every stroke is a hand path; no ruler lines, no geometric primitives. **Copy.** Every on-screen string lives in `video/copy.js`, not in the markup — edit that file and reload. Entries listed in its `PLACEHOLDERS` array render with a dotted gold underline so invented copy can never be mistaken for sourced copy. **Paper is white.** The original video brief asked for a warm off-white `#FAF7F2`; that was **rejected as off-brand** — paper grounds here are pure white, no cream, no beige, no off-yellow, same as everywhere else in this system. `--shv-paper` resolves to `--sh-white`. If a warm off-white turns up in overlay work, it's a bug, not a variant. > ### ⚠️ The statistics are placeholders > > The `57%` stat, its caption and source line, the `$2.5T` figure and the pull quote were **invented during design** as shape-holders for the layout. They are not sourced and must not ship. > > On-screen overlay copy is listed in the `PLACEHOLDERS` array in `video/copy.js` and renders with a dotted gold underline until real copy replaces it — swap the value, delete its entry from that array, and the marking clears itself. The figures drawn into the `preview/` reference cards (`$2.5T`, `57%`) are illustrations of a *device*, not copy — they show how a number callout is built, and are equally unsourced. --- ## Font substitution flags - **Raleway Dots** — ~~no file provided, loaded from Google Fonts CDN~~ **Resolved.** `fonts/RalewayDots-Regular.ttf` is in the repo and `colors_and_type.css` serves it via a local `@font-face`. No CDN font dependencies remain anywhere in this system — every face works offline and in export. - **UI glyph icons (chevrons, menu, etc.)** — not provided. Substituting Lucide from CDN in UI kits. Replace with your own set any time. --- ## Index — what's in this folder ``` / ├── index.html ← landing page: start here in a browser ├── README.md ← you are here ├── SKILL.md ← agent-skill manifest (Claude Code compatible) ├── colors_and_type.css ← tokens, fonts, semantic classes ├── site-header.js ← header / back link on card pages opened on their own ├── fonts/ ← Nunito, Lora, Shadows Into Light ├── assets/ ← logos, hand-drawn brand icons ├── preview/ ← design-system tab cards ├── slides/ ← sample slide templates (16:9) │ ├── index.html ← deck shell (Title · Section · Quote · Framework · Comparison · CTA) │ ├── slides.css ← slide-level shared styles │ └── deck-stage.js ← auto-scaling canvas + keyboard nav └── video/ ← video overlay system (see below) ├── index.html ← the nine overlays at true 1920×1080 ├── overlays.css ← frames, safe zones, motion cycle, devices └── copy.js ← every on-screen string, in one table ``` No product UI kits are included — the brand is delivered primarily through content (social, presentations, proposals), not a shipping product. A web UI kit can be added later when a site build begins.