97 lines
4.6 KiB
Markdown
97 lines
4.6 KiB
Markdown
# ADR 0002: Brand Guidelines
|
||
|
||
**Status**: ✅ Accepted
|
||
**Date**: 2025-12-12
|
||
**Deciders**: Delivery Lead (Content) + Design Team
|
||
|
||
---
|
||
|
||
## Brand Essence
|
||
|
||
### Name Origin
|
||
**"1000 Planets"** represents a constellation of marketing tools and partners, each with its own trajectory. It is a metaphor for a nonhierarchical marketplace of creative momentum and autonomous growth.
|
||
|
||
### Mission Statement
|
||
We build AI-assisted marketing tools for small and micro businesses so they can own their customer journeys, run their own outreach, and make decisions with confidence—no gatekeepers, no jargon.
|
||
|
||
### Social Signal
|
||
We target small teams, solo founders, and micro operators who want high-caliber marketing without enterprise complexity. The language is friendly, grounded, and direct.
|
||
|
||
## Brand Personality
|
||
|
||
1. **Trustworthy & Human**
|
||
- Speak plainly, explain value clearly, and show how humans stay in the loop.
|
||
- Lead with service, not buzzwords.
|
||
2. **Approachable Premium**
|
||
- Premium feel through typography, subtle animation, and gradients, but never stuffy.
|
||
- Accessible dark/light interplay with shimmering highlights.
|
||
3. **Purposeful & Practical**
|
||
- Center on lead capture, microsites, and content modules built for the small-business timeline.
|
||
- Emphasize reliability and human oversight.
|
||
|
||
## Visual Identity
|
||
|
||
### Design Inspiration
|
||
- **Primary references**: Linear, Vercel, Studio builds with dark/light accessibility, shimmering prisma surfaces.
|
||
- **Motion**: Subtle, premium animations (floating prisms, skeleton loads, gradient tilt) that hint at high-touch craftsmanship.
|
||
|
||
### Core Principles
|
||
- **Control**: Designs should feel like a cockpit, not a ledger.
|
||
- **Clarity**: Avoid marketing haze—text must feel like a conversation.
|
||
- **Accessibility**: Maintain WCAG 2.1 AA contrast and respond gracefully across devices.
|
||
- **Energy**: Use prism/surface lighting, shimmering strokes, and layered glass to suggest future-focused polish.
|
||
|
||
## Color System
|
||
|
||
### Ground Palette
|
||
| Role | Light | Dark | Usage |
|
||
|------|-------|------|-------|
|
||
| Background | `#FFFFFF` | `#08080F` | Base surfaces |
|
||
| Surface | `#F5F7FF` | `#0F172A` | Cards, overlays |
|
||
| Border | `#E5E7EF` | `#1F2937` | Dividers |
|
||
| Primary Text | `#111827` | `#F8FAFC` | Paragraphs |
|
||
| Secondary Text | `#4B5563` | `#CBD5F5` | Supporting copy |
|
||
|
||
### Accent Tokens
|
||
- **Prism gradient** (`#8B5CF6` → `#6366F1` → `#EC4899`): Primary CTA, highlights, prism glows.
|
||
- **Support glow** (`#38BDF8`, `#22D3EE`): Floating rings, hover states, animation traces.
|
||
- **Success** (`#22C55E`), **Warning** (`#F59E0B`), **Error** (`#EF4444`): Semantic markers for forms.
|
||
|
||
## Typography
|
||
|
||
### Font Stack
|
||
- **Headings / Display**: `Dela Gothic One`, tight tracking, uppercase when needed, accessible sizes from 36px+ for important modules.
|
||
- **Body**: `Space Grotesk`, 16px base, 1.6 line height.
|
||
- **Data / Price / Metric**: `JetBrains Mono`, use for counts, module specs, and "data" callouts. This reinforces the dual tone of premium and technical assurance.
|
||
|
||
### Type Scale
|
||
| Element | Size | Weight | Line Height |
|
||
|---------|------|--------|-------------|
|
||
| Display | 64px | 700 | 1.15 |
|
||
| H1 | 48px | 700 | 1.2 |
|
||
| H2 | 36px | 700 | 1.3 |
|
||
| H3 | 28px | 600 | 1.4 |
|
||
| Body Large | 18px | 400 | 1.6 |
|
||
| Body | 16px | 400 | 1.6 |
|
||
| Caption | 12px | 500 | 1.4 |
|
||
| Data / Mono | 20px | 500 | 1.3 |
|
||
|
||
## Voice & Tone
|
||
|
||
### Writing Principles
|
||
1. **Plainspoken** – No jargon, no marketing fluff (e.g., “Lead capture AI” or “Intelligent CTAs”).
|
||
2. **Empowering** – Frame the experience from the customer's control.
|
||
3. **Results-oriented** – Speak to outcomes (“clear lead flows”, “human-reviewed copy”).
|
||
4. **Warmly confident** – Honest and calm, without hype.
|
||
|
||
### Language Guidelines
|
||
- **DO**: “Run a five-page microsite in days.” “Each output is reviewed by a human before you ever publish.” “You keep control of the journey.”
|
||
- **DON’T**: “Disruptive,” “synergy,” “next-gen,” “published costs,” “partner operations,” “Valerian,” “data stays where you want it.”
|
||
|
||
## Components & UI Notes
|
||
|
||
- **Buttons**: Rounded-full, gradient from violet to pink, high contrast on dark surfaces.
|
||
- **Cards**: Glass-morphic surface, gently rounded corners, slight drop shadow, and border gradient for hovered states.
|
||
- **Loaders / Skeletons**: Use shimmering bars (via `shimmer` utility) whenever content is late to render.
|
||
- **Animation**: Use floating prisms, animated SVG glows, and `framer-motion` transitions for the hero/module grids.
|
||
- **Forms**: High-contrast inputs, clear labels, and error/success feedback using semantic colors.
|