@forgespace/brand-guide

Brand Guide

Brand identity guidelines, design tokens, and assets for the developer tools ecosystem.

Live: brand.forgespace.co

Sync across repos: Repository Branding checklist — README header template, per-repo checklist, Stitch + brand tokens.

What's Inside

• Logo — 3-tier notch anvil (Flame Rise) with 7 variants: wordmark, monogram, icon, abstract, + 3 tint wordmarks
• Colors — Forge Purple (#7C3AED), Forge Blue (#3B82F6), Forge Amber (#F59E0B), neutrals, semantic (WCAG validated)
• Typography — Sora / DM Sans / IBM Plex Mono with major-third type scale (sub-brand stacks for Siza and MCP-Gateway)
• Design Tokens — CSS, JSON (W3C), Tailwind, Sass, React theme exports
• Spacing, Shadows, Borders, Motion, Gradients — Full token coverage

Product Brands

Product	Status	Mark
Siza	Active	TBD (inherits Forge Space tokens)

The /siza/ pairing examples are responsive by design: the Forge Space + Siza lockups wrap safely on narrow viewports instead of relying on single-line desktop spacing.

npm Package

Install the brand identity as an npm package for programmatic access in other projects:

npm install @forgespace/brand-guide

import { identity } from '@forgespace/brand-guide';
import type { BrandIdentity } from '@forgespace/brand-guide';

console.log(identity.name);               // "Forge Space"
console.log(identity.colors.primary.hex);  // "#7c3aed"

Raw JSON import:

import identity from '@forgespace/brand-guide/identity';

Use as Template

This repo doubles as a reusable brand guide template. See TEMPLATE.md for instructions on creating your own brand guide.

Quick Start

npm install
npm run dev

To regenerate brand assets (logos, identity, tokens): ensure src/fonts/sora.woff2 (Sora) and src/fonts/dm-sans.woff2 (DM Sans) exist—both available from Google Fonts—then run npm run generate and npm run export:raster. OG images embed both fonts when present.

Security maintenance note: this project uses npm overrides to pin vulnerable transitive dependencies (for example lodash pulled by yaml-language-server) until upstream packages publish patched ranges.

Design Tokens

Download tokens in your preferred format from the live site, or find them in public/downloads/:

Format	File
CSS Custom Properties	tokens.css
Siza Sub-brand CSS	siza-tokens.css
W3C Design Tokens	tokens.json
Tailwind Preset	tailwind-preset.js
Sass Variables	tokens.scss
React Theme	theme.ts

Stack

• Astro — Static site generator
• Tailwind CSS v4 — Utility-first CSS
• @forgespace/branding-mcp — Brand identity generation

License

MIT