@forgespace/brand-guide - npm Package Compare versions

Comparing version 0.3.1 to 0.6.0

public/downloads/forge-tokens.css

+/**
+ * Forge Space Design System — Canonical tokens
+ * Generated from brand/identity.json. Do not edit manually. Run: npm run generate
+ * Typography: Sora (display), DM Sans (body), IBM Plex Mono (mono)
+ * Colors: Modern Horn — Monochrome (#A78BFA, #8B5CF6, #6D28D9)
+ */
+
+@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');
+
+:root {
+  --forge-bg: #121214;
+  --forge-bg-elevated: #18181b;
+  --forge-surface: #1a1a1e;
+  --forge-surface-alt: #1e1e22;
+  --forge-border: #27272a;
+  --forge-border-hover: #3f3f46;
+  --forge-primary: #8B5CF6;
+  --forge-primary-rgb: 139, 92, 246;
+  --forge-primary-hover: #A78BFA;
+  --forge-primary-pressed: #6D28D9;
+  --forge-text: #fafafa;
+  --forge-text-muted: #a1a1aa;
+  --forge-text-subtle: #71717a;
+  --forge-accent: rgba(139, 92, 246, 0.12);
+  --forge-accent-foreground: #8B5CF6;
+  --forge-destructive: #ef4444;
+  --forge-success: #22c55e;
+  --forge-warning: #eab308;
+  --forge-input: #18181b;
+  --forge-ring: #8B5CF6;
+
+  --forge-font-display: "Sora", system-ui, sans-serif;
+  --forge-font-body: "DM Sans", system-ui, sans-serif;
+  --forge-font-mono: "IBM Plex Mono", ui-monospace, monospace;
+
+  --forge-space-1: 4px;
+  --forge-space-2: 8px;
+  --forge-space-3: 12px;
+  --forge-space-4: 16px;
+  --forge-space-5: 20px;
+  --forge-space-6: 24px;
+  --forge-space-8: 32px;
+  --forge-space-10: 40px;
+  --forge-space-12: 48px;
+  --forge-space-16: 64px;
+
+  --forge-radius-sm: 8px;
+  --forge-radius-md: 10px;
+  --forge-radius-lg: 12px;
+  --forge-radius-xl: 16px;
+
+  --forge-glow-primary: 0 0 30px rgba(139, 92, 246, 0.3);
+  --forge-glow-primary-sm: 0 0 20px rgba(139, 92, 246, 0.25);
+  --forge-focus-ring: 0 0 0 3px rgba(139, 92, 246, 0.15), 0 0 20px rgba(139, 92, 246, 0.1);
+
+  --forge-duration-fast: 150ms;
+  --forge-duration-standard: 200ms;
+  --forge-duration-entrance: 400ms;
+  --forge-ease: cubic-bezier(0.16, 1, 0.3, 1);
+
+  --forge-gradient-hero: linear-gradient(315deg, #6D28D9 0%, #8B5CF6 50%, #A78BFA 100%);
+  --forge-gradient-button: linear-gradient(315deg, #6D28D9 0%, #8B5CF6 100%);
+}
+
+body.forge-tokens,
+.forge-tokens {
+  font-family: var(--forge-font-body);
+  color: var(--forge-text);
+  background-color: var(--forge-bg);
+}
+
+.forge-tokens h1,
+.forge-tokens h2,
+.forge-tokens h3,
+.forge-tokens h4,
+.forge-tokens h5,
+.forge-tokens h6 {
+  font-family: var(--forge-font-display);
+}
+
+.forge-tokens code,
+.forge-tokens pre,
+.forge-tokens [class*="font-mono"] {
+  font-family: var(--forge-font-mono);
+}

public/downloads/siza-tokens.css

+/**
+ * Generated from brand/identity.json (subBrands.siza)
+ * Do not edit manually. Run: npm run generate
+ */
+
+@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');
+
+:root {
+  --siza-bg: #121214;
+  --siza-bg-elevated: #18181b;
+  --siza-surface: #1a1a1e;
+  --siza-surface-alt: #1e1e22;
+  --siza-border: #27272a;
+  --siza-border-hover: #3f3f46;
+  --siza-primary: #8B5CF6;
+  --siza-primary-rgb: 139, 92, 246;
+  --siza-primary-hover: #A78BFA;
+  --siza-primary-pressed: #6D28D9;
+  --siza-text: #fafafa;
+  --siza-text-muted: #a1a1aa;
+  --siza-text-subtle: #71717a;
+  --siza-accent: rgba(139, 92, 246, 0.12);
+  --siza-accent-foreground: #8B5CF6;
+  --siza-destructive: #ef4444;
+  --siza-success: #22c55e;
+  --siza-warning: #eab308;
+  --siza-input: #18181b;
+  --siza-ring: #8B5CF6;
+
+  --siza-font-display: "Sora", system-ui, sans-serif;
+  --siza-font-body: "DM Sans", system-ui, sans-serif;
+  --siza-font-mono: "IBM Plex Mono", ui-monospace, monospace;
+
+  --siza-space-1: 4px;
+  --siza-space-2: 8px;
+  --siza-space-3: 12px;
+  --siza-space-4: 16px;
+  --siza-space-5: 20px;
+  --siza-space-6: 24px;
+  --siza-space-8: 32px;
+  --siza-space-10: 40px;
+  --siza-space-12: 48px;
+  --siza-space-16: 64px;
+
+  --siza-radius-sm: 8px;
+  --siza-radius-md: 10px;
+  --siza-radius-lg: 12px;
+  --siza-radius-xl: 16px;
+
+  --siza-glow-primary: 0 0 30px rgba(139, 92, 246, 0.3);
+  --siza-glow-primary-sm: 0 0 20px rgba(139, 92, 246, 0.25);
+  --siza-focus-ring: 0 0 0 3px rgba(139, 92, 246, 0.15), 0 0 20px rgba(139, 92, 246, 0.1);
+
+  --siza-duration-fast: 150ms;
+  --siza-duration-standard: 200ms;
+  --siza-duration-entrance: 400ms;
+  --siza-ease: cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+body.siza-tokens,
+.siza-tokens {
+  font-family: var(--siza-font-body);
+  color: var(--siza-text);
+  background-color: var(--siza-bg);
+}
+
+.siza-tokens h1,
+.siza-tokens h2,
+.siza-tokens h3,
+.siza-tokens h4,
+.siza-tokens h5,
+.siza-tokens h6 {
+  font-family: var(--siza-font-display);
+}
+
+.siza-tokens code,
+.siza-tokens pre,
+.siza-tokens [class*="font-mono"] {
+  font-family: var(--siza-font-mono);
+}
+
+.material-symbols-outlined {
+  font-family: 'Material Symbols Outlined';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  -webkit-font-smoothing: antialiased;
+}
+
+.icon {
+  width: 1em;
+  height: 1em;
+  display: inline-block;
+  vertical-align: -0.125em;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+}

package.json

 {
   "name": "@forgespace/brand-guide",
-  "version": "0.3.1",
+  "version": "0.6.0",
   "description": "Forge Space brand identity — types, tokens, and theme constants for cross-project consumption",
@@ -13,3 +13,5 @@ "type": "module",
     },
-    "./identity": "./brand/identity.json"
+    "./identity": "./brand/identity.json",
+    "./siza-tokens.css": "./public/downloads/siza-tokens.css",
+    "./forge-tokens.css": "./public/downloads/forge-tokens.css"
   },
@@ -24,2 +26,3 @@ "files": [
     "generate": "node scripts/generate-brand.mjs",
+    "export:raster": "node scripts/export-raster-assets.mjs",
     "build": "astro build",
@@ -55,2 +58,3 @@ "build:lib": "tsc -p tsconfig.lib.json && cp brand/identity.json dist-lib/",
     "astro": "^5.18.0",
+    "sharp": "^0.33.5",
     "tailwindcss": "^4.2.1",
@@ -57,0 +61,0 @@ "typescript": "^5.9.3"

public/downloads/tailwind-preset.js

@@ -6,5 +6,5 @@ /** @type {import('tailwindcss').Config} */
       "colors": {
-        "primary": "#7c3aed",
-        "secondary": "#3B82F6",
-        "accent": "#F59E0B",
+        "primary": "#8B5CF6",
+        "secondary": "#A78BFA",
+        "accent": "#6D28D9",
         "neutral": {
@@ -14,7 +14,7 @@ "100": "#f2f2f3",
           "300": "#cbc9cf",
-          "400": "#98949e",
-          "500": "#65616b",
+          "400": "#97949e",
+          "500": "#64616b",
           "600": "#323036",
           "700": "#19181b",
-          "800": "#0d0c0d"
+          "800": "#0c0c0d"
         },
@@ -28,7 +28,7 @@ "success": "#22c35d",
         "heading": [
-          "Space Grotesk",
+          "Sora",
           "sans-serif"
         ],
         "body": [
-          "IBM Plex Sans",
+          "DM Sans",
           "sans-serif"
@@ -117,7 +117,7 @@ ],
         "none": "none",
-        "sm": "1px 1px 2px 0px rgba(47, 36, 66, 0.05)",
-        "md": "2px 2px 4px -1px rgba(47, 36, 66, 0.08)",
-        "lg": "4px 4px 8px -2px rgba(47, 36, 66, 0.1)",
-        "xl": "8px 8px 16px -4px rgba(47, 36, 66, 0.12)",
-        "2xl": "16px 16px 32px -8px rgba(47, 36, 66, 0.15)"
+        "sm": "1px 1px 2px 0px rgba(45, 36, 66, 0.05)",
+        "md": "2px 2px 4px -1px rgba(45, 36, 66, 0.08)",
+        "lg": "4px 4px 8px -2px rgba(45, 36, 66, 0.1)",
+        "xl": "8px 8px 16px -4px rgba(45, 36, 66, 0.12)",
+        "2xl": "16px 16px 32px -8px rgba(45, 36, 66, 0.15)"
       },
@@ -153,7 +153,7 @@ "borderRadius": {
       "backgroundImage": {
-        "hero": "linear-gradient(315deg, #7c3aed 0%, #3B82F6 100%)",
-        "button": "linear-gradient(315deg, #F59E0B 0%, #7c3aed 100%)",
+        "hero": "linear-gradient(315deg, #8B5CF6 0%, #A78BFA 100%)",
+        "button": "linear-gradient(315deg, #6D28D9 0%, #8B5CF6 100%)",
         "card": "linear-gradient(315deg, #f2f2f3 0%, #cacace 100%)",
-        "text": "linear-gradient(315deg, #7c3aed 0%, #F59E0B 100%)",
-        "background": "linear-gradient(315deg, #f2f2f3 0%, #0d0c0d 100%)"
+        "text": "linear-gradient(315deg, #8B5CF6 0%, #6D28D9 100%)",
+        "background": "linear-gradient(315deg, #f2f2f3 0%, #0c0c0d 100%)"
       }
@@ -160,0 +160,0 @@ }

public/downloads/theme.ts

@@ -5,13 +5,13 @@ import type { CSSProperties } from 'react';
   "colors": {
-    "primary": "#7c3aed",
-    "secondary": "#3B82F6",
-    "accent": "#F59E0B",
+    "primary": "#8B5CF6",
+    "secondary": "#A78BFA",
+    "accent": "#6D28D9",
     "neutral-100": "#f2f2f3",
     "neutral-200": "#e5e4e7",
     "neutral-300": "#cbc9cf",
-    "neutral-400": "#98949e",
-    "neutral-500": "#65616b",
+    "neutral-400": "#97949e",
+    "neutral-500": "#64616b",
     "neutral-600": "#323036",
     "neutral-700": "#19181b",
-    "neutral-800": "#0d0c0d",
+    "neutral-800": "#0c0c0d",
     "success": "#22c35d",
@@ -23,4 +23,4 @@ "warning": "#f59f0a",
   "fonts": {
-    "heading": "'Space Grotesk', sans-serif",
-    "body": "'IBM Plex Sans', sans-serif",
+    "heading": "'Sora', sans-serif",
+    "body": "'DM Sans', sans-serif",
     "mono": "'IBM Plex Mono', monospace"
@@ -70,7 +70,7 @@ },
     "none": "none",
-    "sm": "1px 1px 2px 0px rgba(47, 36, 66, 0.05)",
-    "md": "2px 2px 4px -1px rgba(47, 36, 66, 0.08)",
-    "lg": "4px 4px 8px -2px rgba(47, 36, 66, 0.1)",
-    "xl": "8px 8px 16px -4px rgba(47, 36, 66, 0.12)",
-    "2xl": "16px 16px 32px -8px rgba(47, 36, 66, 0.15)"
+    "sm": "1px 1px 2px 0px rgba(45, 36, 66, 0.05)",
+    "md": "2px 2px 4px -1px rgba(45, 36, 66, 0.08)",
+    "lg": "4px 4px 8px -2px rgba(45, 36, 66, 0.1)",
+    "xl": "8px 8px 16px -4px rgba(45, 36, 66, 0.12)",
+    "2xl": "16px 16px 32px -8px rgba(45, 36, 66, 0.15)"
   },
@@ -115,7 +115,7 @@ "radii": {
   "gradients": {
-    "hero": "linear-gradient(315deg, #7c3aed 0%, #3B82F6 100%)",
-    "button": "linear-gradient(315deg, #F59E0B 0%, #7c3aed 100%)",
+    "hero": "linear-gradient(315deg, #8B5CF6 0%, #A78BFA 100%)",
+    "button": "linear-gradient(315deg, #6D28D9 0%, #8B5CF6 100%)",
     "card": "linear-gradient(315deg, #f2f2f3 0%, #cacace 100%)",
-    "text": "linear-gradient(315deg, #7c3aed 0%, #F59E0B 100%)",
-    "background": "linear-gradient(315deg, #f2f2f3 0%, #0d0c0d 100%)"
+    "text": "linear-gradient(315deg, #8B5CF6 0%, #6D28D9 100%)",
+    "background": "linear-gradient(315deg, #f2f2f3 0%, #0c0c0d 100%)"
   }
@@ -122,0 +122,0 @@ } as const;

public/downloads/tokens.json

@@ -6,3 +6,3 @@ {
       "value": {
-        "$value": "#7c3aed",
+        "$value": "#8B5CF6",
         "$type": "color"
@@ -13,3 +13,3 @@ }
       "value": {
-        "$value": "#3B82F6",
+        "$value": "#A78BFA",
         "$type": "color"
@@ -20,3 +20,3 @@ }
       "value": {
-        "$value": "#F59E0B",
+        "$value": "#6D28D9",
         "$type": "color"
@@ -69,3 +69,3 @@ }
       "value": {
-        "$value": "#98949e",
+        "$value": "#97949e",
         "$type": "color"
@@ -76,3 +76,3 @@ }
       "value": {
-        "$value": "#65616b",
+        "$value": "#64616b",
         "$type": "color"
@@ -95,3 +95,3 @@ }
       "value": {
-        "$value": "#0d0c0d",
+        "$value": "#0c0c0d",
         "$type": "color"
@@ -266,3 +266,3 @@ }
       "value": {
-        "$value": "Space Grotesk",
+        "$value": "Sora",
         "$type": "fontFamily"
@@ -273,3 +273,3 @@ }
       "value": {
-        "$value": "IBM Plex Sans",
+        "$value": "DM Sans",
         "$type": "fontFamily"
@@ -357,19 +357,19 @@ }
     "sm": {
-      "$value": "1px 1px 2px 0px rgba(47, 36, 66, 0.05)",
+      "$value": "1px 1px 2px 0px rgba(45, 36, 66, 0.05)",
       "$type": "shadow"
     },
     "md": {
-      "$value": "2px 2px 4px -1px rgba(47, 36, 66, 0.08)",
+      "$value": "2px 2px 4px -1px rgba(45, 36, 66, 0.08)",
       "$type": "shadow"
     },
     "lg": {
-      "$value": "4px 4px 8px -2px rgba(47, 36, 66, 0.1)",
+      "$value": "4px 4px 8px -2px rgba(45, 36, 66, 0.1)",
       "$type": "shadow"
     },
     "xl": {
-      "$value": "8px 8px 16px -4px rgba(47, 36, 66, 0.12)",
+      "$value": "8px 8px 16px -4px rgba(45, 36, 66, 0.12)",
       "$type": "shadow"
     },
     "2xl": {
-      "$value": "16px 16px 32px -8px rgba(47, 36, 66, 0.15)",
+      "$value": "16px 16px 32px -8px rgba(45, 36, 66, 0.15)",
       "$type": "shadow"
@@ -464,7 +464,7 @@ }
     "hero": {
-      "$value": "linear-gradient(315deg, #7c3aed 0%, #3B82F6 100%)",
+      "$value": "linear-gradient(315deg, #8B5CF6 0%, #A78BFA 100%)",
       "$type": "gradient"
     },
     "button": {
-      "$value": "linear-gradient(315deg, #F59E0B 0%, #7c3aed 100%)",
+      "$value": "linear-gradient(315deg, #6D28D9 0%, #8B5CF6 100%)",
       "$type": "gradient"
@@ -477,7 +477,7 @@ },
     "text": {
-      "$value": "linear-gradient(315deg, #7c3aed 0%, #F59E0B 100%)",
+      "$value": "linear-gradient(315deg, #8B5CF6 0%, #6D28D9 100%)",
       "$type": "gradient"
     },
     "background": {
-      "$value": "linear-gradient(315deg, #f2f2f3 0%, #0d0c0d 100%)",
+      "$value": "linear-gradient(315deg, #f2f2f3 0%, #0c0c0d 100%)",
       "$type": "gradient"
@@ -484,0 +484,0 @@ }

public/downloads/tokens.scss

 // Brand Identity - Generated by @forgespace/branding-mcp
 
 // Colors
-$color-primary: #7c3aed;
-$color-secondary: #3B82F6;
-$color-accent: #F59E0B;
+$color-primary: #8B5CF6;
+$color-secondary: #A78BFA;
+$color-accent: #6D28D9;
 $color-neutral-100: #f2f2f3;
 $color-neutral-200: #e5e4e7;
 $color-neutral-300: #cbc9cf;
-$color-neutral-400: #98949e;
-$color-neutral-500: #65616b;
+$color-neutral-400: #97949e;
+$color-neutral-500: #64616b;
 $color-neutral-600: #323036;
 $color-neutral-700: #19181b;
-$color-neutral-800: #0d0c0d;
+$color-neutral-800: #0c0c0d;
 $color-success: #22c35d;
@@ -21,4 +21,4 @@ $color-warning: #f59f0a;
 // Typography
-$font-heading: 'Space Grotesk', sans-serif;
-$font-body: 'IBM Plex Sans', sans-serif;
+$font-heading: 'Sora', sans-serif;
+$font-body: 'DM Sans', sans-serif;
 $font-mono: 'IBM Plex Mono', monospace;
@@ -64,7 +64,7 @@ $text-xs: 10.24px;
 $shadow-none: none;
-$shadow-sm: 1px 1px 2px 0px rgba(47, 36, 66, 0.05);
-$shadow-md: 2px 2px 4px -1px rgba(47, 36, 66, 0.08);
-$shadow-lg: 4px 4px 8px -2px rgba(47, 36, 66, 0.1);
-$shadow-xl: 8px 8px 16px -4px rgba(47, 36, 66, 0.12);
-$shadow-2xl: 16px 16px 32px -8px rgba(47, 36, 66, 0.15);
+$shadow-sm: 1px 1px 2px 0px rgba(45, 36, 66, 0.05);
+$shadow-md: 2px 2px 4px -1px rgba(45, 36, 66, 0.08);
+$shadow-lg: 4px 4px 8px -2px rgba(45, 36, 66, 0.1);
+$shadow-xl: 8px 8px 16px -4px rgba(45, 36, 66, 0.12);
+$shadow-2xl: 16px 16px 32px -8px rgba(45, 36, 66, 0.15);
 
@@ -96,6 +96,6 @@ // Borders
 // Gradients
-$gradient-hero: linear-gradient(315deg, #7c3aed 0%, #3B82F6 100%);
-$gradient-button: linear-gradient(315deg, #F59E0B 0%, #7c3aed 100%);
+$gradient-hero: linear-gradient(315deg, #8B5CF6 0%, #A78BFA 100%);
+$gradient-button: linear-gradient(315deg, #6D28D9 0%, #8B5CF6 100%);
 $gradient-card: linear-gradient(315deg, #f2f2f3 0%, #cacace 100%);
-$gradient-text: linear-gradient(315deg, #7c3aed 0%, #F59E0B 100%);
-$gradient-background: linear-gradient(315deg, #f2f2f3 0%, #0d0c0d 100%);
+$gradient-text: linear-gradient(315deg, #8B5CF6 0%, #6D28D9 100%);
+$gradient-background: linear-gradient(315deg, #f2f2f3 0%, #0c0c0d 100%);

README.md

@@ -1,7 +0,13 @@
-# Forge Space Brand Guide
+<div align="center">
+  <a href="https://forgespace.co">
+    <img src="https://brand.forgespace.co/logos/wordmark.svg" alt="Forge Space" height="48">
+  </a>
+  <h1>Brand Guide</h1>
+  <p>Brand identity guidelines, design tokens, and assets for the developer tools ecosystem.</p>
+</div>
 
-Brand identity guidelines, design tokens, and assets for [Forge Space](https://forgespace.co) — the developer tools ecosystem.
-
 **Live:** [brand.forgespace.co](https://brand.forgespace.co)
 
+**Sync across repos:** [Repository Branding checklist](docs/REPOSITORY_BRANDING.md) — README header template, per-repo checklist, Stitch + brand tokens.
+
 ## What's Inside
@@ -11,3 +17,3 @@
 - **Colors** — Forge Purple (#7C3AED), Forge Blue (#3B82F6), Forge Amber (#F59E0B), neutrals, semantic (WCAG validated)
-- **Typography** — Space Grotesk / IBM Plex Sans / IBM Plex Mono with major-third type scale (sub-brand stacks for Siza and MCP-Gateway)
+- **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
@@ -55,2 +61,4 @@ - **Spacing, Shadows, Borders, Motion, Gradients** — Full token coverage
 
+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](https://fonts.google.com)—then run `npm run generate` and `npm run export:raster`. OG images embed both fonts when present.
+
 ## Design Tokens
@@ -63,2 +71,3 @@
 | CSS Custom Properties | `tokens.css` |
+| Siza Sub-brand CSS | `siza-tokens.css` |
 | W3C Design Tokens | `tokens.json` |
@@ -65,0 +74,0 @@ | Tailwind Preset | `tailwind-preset.js` |

No alert changes

Improved metrics

Total package byte prevSize

401497

61.75%

Number of package files

18

12.5%

Lines of code

3331

32.5%

Number of lines in readme file

84

12%

Worsened metrics

Dev dependency count

6

20%

No dependency changes