Brand Kit
The definitive guide to the Forge IT Systems visual identity. Colors, typography, logos, and components.
Logo Variants
All logo files are SVGs for infinite scalability.
Clear Space
Maintain a minimum clear space equal to the height of the anvil icon on all sides.
Usage Guidelines
- Use on solid backgrounds (dark or light)
- Scale proportionally — never stretch
- Text adapts to theme via currentColor
- Don't rotate, skew, or add effects
- Don't change the ember accent color
- Don't place on busy or photographic backgrounds
Color System
Three palettes: Steel for structure, Ember for energy, Alloy for signals.
Steel — Primary
Authority, precision, structure.
steel-950
Dark backgrounds
steel-900
Card backgrounds
steel-800
Elevated surfaces
steel-700
Borders, dividers
steel-600
Muted text
steel-400
Secondary text
steel-200
Primary text (dark)
steel-50
Light backgrounds
Ember — Accent
Energy, forge fire, calls to action.
ember-600
Active / pressed
ember-500
Primary CTA, highlights
ember-400
Hover states
ember-100
Subtle accent bgs
Alloy — Semantic
Informational signals.
alloy-blue
Links, info
alloy-green
Success
alloy-amber
Warning
alloy-red
Error
Type System
Three font families serve distinct roles.
Space Grotesk
ABCDEFGHIJKLM nopqrstuvwxyz 0123456789
Weights: 500, 700
Inter
ABCDEFGHIJKLM nopqrstuvwxyz 0123456789
Weights: 400, 500, 600
JetBrains Mono
ABCDEFGHIJKLM nopqrstuvwxyz 0123456789
Weights: 400, 500
Type Scale
Headline
Display
Section Title
Card Title
Subheading
Large Body
Body Large
Body text reads comfortably at this size.
Small text for captions and labels.
Spacing Scale
All spacing follows Tailwind's 4px base unit.
Component Library
Live-rendered examples of the core UI primitives.
Buttons
variant="primary"
variant="secondary"
variant="ghost"
variant="outline"
Badges
Cards
Default Card
Theme-aware background and border.
Elevated Card
Surface background for elevated elements.
Accent Border
Ember border for highlighted content.
Inputs
This field is required