1000planets-site/spec-kit/decisions/0002-brand-guidelines.md

4.6 KiB
Raw Permalink Blame History

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.”
  • DONT: “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.