Brand Design Identity Colors Typography Logo Usage Voice & Tone Assets

Brand Design System

Identity guidelines, visual language, and brand assets for stitchwand. Everything needed to represent the brand consistently across all touchpoints.

Brand Identity

Core brand attributes and positioning

What is stitchwand?

stitchwand is a design token toolchain that bridges the gap between design systems and AI code generation. It ensures Google Stitch and similar AI tools respect your design decisions by providing structured token data through the DESIGN.md specification.

Brand Attributes

  • Technical but approachable — Developer-focused without being intimidating
  • Precise — Tokens, systems, specifications — we care about details
  • Magical — "Wand" metaphor: transforming chaos into structure
  • Modern — Dark-first design, minimal chrome, focused content
  • Open — Open-source core, transparent roadmap, community-driven

Tagline Options

  • "Your design system, AI-ready." (primary)
  • "Bridge the gap between design and AI."
  • "Design tokens that AI understands."
  • "Stitch respects your design system. Finally."

Target Audience

  • Primary: Frontend engineers & design engineers at SaaS companies
  • Secondary: Design system leads, product designers who code
  • Tertiary: Engineering managers evaluating AI code generation tools

Color Palette

Primary, accent, and semantic colors

Primary Palette

Background
#09090B
Primary background, body
Surface
#1A1C22
Cards, panels, elevated elements
Accent
#6366F1
Primary brand color, CTAs, active states
Accent Light
#818CF8
Hover states, highlights, links

Text Colors

White
#EDEEF2
Headings, emphasis text
Text
#B4B8C4
Body text, paragraphs
Text Muted
#787E8E
Secondary text, labels
Text Dim
#4E5361
Disabled, placeholder text

Semantic Colors

Green / Success
#22C55E
Success states, valid tokens
Amber / Warning
#F59E0B
Warnings, pending states
Red / Error
#EF4444
Errors, destructive actions
Purple
#A855F7
AI features, premium, gradient accent

Typography

Type system and font usage

Inter — Primary Sans-Serif
Design tokens, AI-ready.
Headings and emphasis text
Body text for paragraphs and descriptions. Comfortable reading at any size.
Font: Inter | Weights: 300–900 | Use: All UI text, headings, body
JetBrains Mono — Monospace
convert() validate() diff()
npm install @stitchwand/core
color.primary.500: #6366F1
Font: JetBrains Mono | Weights: 400, 500, 600 | Use: Code, tokens, CLI, nav tabs

Type Scale

  • Hero: clamp(32px, 5vw, 52px) / 800 / -0.04em tracking
  • H2: 20px / 700 / -0.02em
  • H3: 14–16px / 600
  • Body: 15px / 400 / 1.7 line-height
  • Small: 12–13px / 500
  • Micro: 9–11px / 600–700 / uppercase tracking

Voice & Tone

How stitchwand communicates

Brand Voice

stitchwand speaks like a senior engineer explaining something to a peer — direct, knowledgeable, and efficient. No fluff, no hype. Let the product speak through precision.

Our Voice

  • "Convert your Figma tokens to DESIGN.md in one command"
  • "stitchwand validates tokens against your design system"
  • "80% coverage target, strict TypeScript, no any"
  • "Works with Google Stitch, Cursor, Claude, and any AI tool"

Not Our Voice

  • "Supercharge your workflow with our revolutionary platform!"
  • "The ultimate solution for all your design system needs"
  • "Powered by cutting-edge AI technology"
  • "Join thousands of developers who love stitchwand"

Tone by Context

  • Documentation: Precise, instructional. Show code first, explain second.
  • Marketing: Confident, specific. Use real metrics and capabilities, not superlatives.
  • Social: Casual but technical. Share real dev experiences and pain points.
  • Error messages: Helpful, actionable. Tell the user exactly what to fix.

Brand Assets

Downloads, templates, and resources

CSS Variables

All brand colors and tokens are available as CSS custom properties. Copy this into any HTML page for instant brand consistency:

Brand CSS Variables
:root {
  --bg: #09090B;
  --surface: #1A1C22;
  --border: #1F2128;
  --text: #B4B8C4;
  --white: #EDEEF2;
  --accent: #6366F1;
  --accent2: #818CF8;
  --green: #22C55E;
  --amber: #F59E0B;
  --red: #EF4444;
  --purple: #A855F7;
  --sans: 'Inter', -apple-system, sans-serif;
  --mono: 'JetBrains Mono', monospace;
}

Design Tokens (DESIGN.md format)

The brand itself is defined as a design token collection, demonstrating the product's own capabilities:

tokens/brand.json
{
  "color": {
    "primary": { "value": "#6366F1", "type": "color" },
    "primary-light": { "value": "#818CF8", "type": "color" },
    "background": { "value": "#09090B", "type": "color" },
    "surface": { "value": "#1A1C22", "type": "color" },
    "text": { "value": "#B4B8C4", "type": "color" }
  },
  "font": {
    "sans": { "value": "Inter", "type": "fontFamily" },
    "mono": { "value": "JetBrains Mono", "type": "fontFamily" }
  },
  "radius": {
    "sm": { "value": "6px", "type": "borderRadius" },
    "md": { "value": "10px", "type": "borderRadius" },
    "lg": { "value": "14px", "type": "borderRadius" }
  }
}

Related Resources