Usage Guidelines
Rules and best practices for applying the Forge Space brand consistently across all touchpoints.
Color Usage
Do
Use primary purple for CTAs and primary actions
Use secondary blue for supporting elements and links
Use accent (lavender) sparingly for highlights and badges
Use neutrals for backgrounds and body text
Maintain WCAG AA contrast ratios for all text
Don't
Use accent as a background color for large areas
Mix brand colors with off-palette colors
Use primary purple for error states (use semantic error color)
Use text on backgrounds that don't meet AA contrast
Override semantic colors — success is always green, error is always red
Typography Hierarchy
Sora · Bold (700) · text-4xl / text-5xl
Page titles only. One per page.
Sora · Semibold (600) · text-2xl / text-3xl
Section headings. Primary content divisions.
Sora · Semibold (600) · text-xl
Subsection headings. Card titles.
DM Sans · Regular (400) · text-base
Default body text. Paragraphs, descriptions.
DM Sans · Regular (400) · text-sm
Secondary text, captions, metadata.
IBM Plex Mono · Regular (400) · text-sm
Code snippets, technical values, tokens.
Spacing
Component spacing
Padding inside cards: spacing-6 (24px)
Gap between cards: spacing-4 (16px)
Section margin: spacing-12 (48px) or spacing-16 (64px)
Inline element gap: spacing-2 (8px)
Layout grid
Max content width: 64rem (1024px)
Page padding: spacing-8 to spacing-16
Sidebar width: 16rem (256px)
Base unit: 4px
Accessibility
All text must meet WCAG AA contrast (4.5:1 normal text, 3:1 large text)
Interactive elements must have visible focus indicators using brand colors
Never use color alone to convey meaning — pair with icons or text
Prefer WCAG AAA contrast (7:1) where possible
Motion should respect prefers-reduced-motion media query
Minimum touch target: 44×44px for mobile, 24×24px for desktop
Sub-Brands
Each product has its own visual identity within the Forge Space system. Sub-brands share the color palette but use distinct typography.
Forge Space (Parent)
IBM Plex Mono Siza (Product)
AI PlatformIBM Plex Mono MCP-Gateway (Product)
InfrastructureIBM Plex Mono Repository Branding
Every Forge Space repository must use the standardized README header. The wordmark is hosted on the brand guide CDN. Use SVG for web; use PNG or WEBP where raster is needed (e.g. social previews, app icons).
Standard Header
<div align="center">
<a href="https://forgespace.co">
<img src="https://brand.forgespace.co/logos/wordmark.svg"
alt="Forge Space" height="48">
</a>
<h1>Project Name</h1>
</div>Do
Use the CDN-hosted wordmark (brand.forgespace.co) — SVG, PNG, or WEBP
Set height="48" for consistent sizing across repos
Link the logo to forgespace.co
Center-align the header block
Don't
Host local copies of the logo in each repo
Change the logo height or add custom styling
Use the icon or monogram as the README header
Skip the header on any Forge Space repository
Logo Variant Selection
Prefer SVG for web; use PNG or WEBP for social previews and app icons.
READMEs, marketing, documentation headers, social media banners. See /explore for the canonical reference.
Monochrome blue contexts, blue-themed UIs, secondary print
Light backgrounds, documentation, slides, print media
Dark overlays, gradient backgrounds, video, reversed contexts
Favicons, app icons, compact UI elements, tab bars
Social profile avatars, small spaces, stickers
Decorative backgrounds, patterns, watermarks
Logo Do's and Don'ts
Do
Use the wordmark as the primary logo; use the icon for favicons and compact spaces
Maintain clear space equal to 25% of the logo height on all sides
Use the white wordmark on dark or gradient backgrounds
Use tinted variants (blue, purple) when full-color mark is not appropriate
Don't
Stretch or distort the logo
Add drop shadows or effects
Change the logo colors
Place on busy backgrounds or use below 24px height
Use the icon or monogram as the README header (use the wordmark)
Dark-First Design
Forge Space is a dark-first ecosystem. The primary UI is always dark mode. Light mode support exists for documentation and marketing materials.
Dark (Primary)
surface-0 → surface-4 Light (Secondary)
neutral-100 → neutral-300