Style identity
Forge Commons
An unofficial original system for code, planning, collaboration, automation, and security moving together.
Dark collaboration system with black canvas, white editorial hierarchy, cool blu themeDesign system Pro AI Kit15 components
GitHub-inspired Forge Commons Collaboration System
An unofficial, original GitHub-inspired design system for code, planning, collaboration, automation, and security moving together. Fifteen focused elements for a concrete product workflow.
Desktop · 1440 × 11529
Foundations
The visual decisions behind the system
A public overview of the typography, palette, icon language, spacing, shape, and motion used throughout this AI Kit.
Visit website
Typography
Font families
Mona Sans
Interface and body typography
"Mona Sans", MonaSansFallback, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif- Weights
- 200–900 variable
- Sizes
- 14–18px
- Line height
- 1.4–1.65
- Tracking
- −0.02em to 0
Fallback: system-ui, "Segoe UI", sans-serif
Hubot Sans
Expressive display or brand-adjacent headings
"Hubot Sans", "Mona Sans", system-ui, sans-serif- Weights
- 200–900 variable
- Sizes
- 44–80px desktop; 34–52px mobile
- Line height
- 0.95–1.08
- Tracking
- −0.06em to −0.02em
Fallback: system-ui, sans-serif
Mona Sans Mono
Code, hashes, checks, metrics, and metadata
"Mona Sans Mono", ui-monospace, SFMono-Regular, Menlo, monospace- Weights
- 200–900 variable
- Sizes
- 11–14px
- Line height
- 1.4–1.55
- Tracking
- 0 to 0.02em
Fallback: ui-monospace, Menlo, monospace
Palette
Core colors
Black canvas
#000000Primary dark homepage background
Night surface
#151515Product screenshot and card surface
Raised surface
#24292fSelected controls and panels
White ink
#f0f6fcPrimary dark-mode copy
Muted ink
#8b949eSupporting copy and metadata
Blue
#58a6ffLinks, focus, and active controls
Violet glow
#8b5cf6AI/product proof illumination
Green
#3fb950Passing checks and secure state
Light canvas
#ffffffExplicit light-mode background
Light surface
#f6f8faLight-mode panels
Light border
#d0d7deLight-mode structure
Amber
#d29922Pending review or attention
Type scale
Responsive hierarchy
| Role | Size | Weight | Line height | Tracking |
|---|---|---|---|---|
| Hero | clamp(2.5rem, 7vw, 5.5rem) | 600 | 0.98 | -0.06em |
| Section heading | clamp(2rem, 4.5vw, 4rem) | 600 | 1.02 | -0.05em |
| Product heading | 24px | 600 | 1.2 | -0.03em |
| Body large | 18px | 400 | 1.6 | -0.01em |
| Body | 16px | 400 | 1.55 | 0 |
| Interface | 14px | 500 | 1.4 | -0.01em |
| Technical | 12px | 500 | 1.45 | 0.02em |
Spacing & shape
Layout rhythm
- Density
- Editorial negative space around dense, grid-aligned product frames
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 72–144px
- Card padding
- 20–32px
- Element gap
- 8–16px
Iconography
Compact product glyphs with filled marks for status and outlined utility icons
Icon-specific; typically 1.5–2px when outlined stroke · 16px / 20px / 24px
Use an Octicon-like symbol with visible labels for code, issue, review, action, lock, and search; do not use the GitHub mark or other protected logos.
System metrics
Radius
sm 6pxmd 8pxlg 12pxxl 16pxpill 999px
Spacing
Base unit 4pxInline gap 8–16pxCard padding 20–32pxSection gap 72–144pxContent rail 1200px
Motion
Fast control 150msStandard transition 220msReveal 420msReduced motion Remove transforms and nonessential animation
Elevation
Boundary
1px neutral border with one-step surface shiftDefault cards and product frames
Floating
0 12px 36px rgba(0, 0, 0, .18)Menus and command surfaces
Modal
0 24px 80px rgba(0, 0, 0, .32)Dialogs and blocking confirmation
Surfaces & shape
Canvas
#ffffff / #000000Page background in light / dark mode
Surface
#f6f8fa / #151515Cards, controls, and product frames
Raised
#eef3f8 / #24292fSelected rows, nested panels, and focus context
Guidelines
Do
- Treat the repository as both a code surface and a conversation surface.
- Use black and hairline grids as the base; reserve blue-violet glow for product proof and focus.
- Pair review, automation, and security state with explicit labels and clear next actions.
- Keep status understandable in grayscale with text, shape, or icon.
Don't
- ×Do not copy logos, screenshots, protected marketing passages, or proprietary artwork.
- ×Do not add taxonomy filler, decorative-only patterns, or dashboard-sized specimens.
- ×Do not use color as the sole carrier of meaning.
- ×Do not make the compact element frame depend on a full-page shell.
Imagery
Use original repository frames, review tables, code windows, security progress, and soft radial light as explanatory product proof. Do not reuse GitHub screenshots, logos, mascots, or customer marks.
Layout
Use a black-to-dark hero with centered or split editorial hierarchy, then alternate full-width product proof and compact side-by-side workflow surfaces. Keep the 1200px rail and move to one column below 760px.
Concept
A complete visual language, ready to inspect.
Use the file tree to move between the full reference preview, implementation guidance, portable tokens, and framework-ready styles. Each surface stays focused, so you can understand the system before copying code.
Assigned collection
GitHub-inspired Forge Commons Interface Elements
15 published components in collection order
Components
Built from the same system
Production-ready specimens from this AI Kit's approved collection.
More like this
Postman-inspired API Orbit
An unofficial, original Postman-inspired interface study with 14 focused specimens supported by the live product and content experience.
v0-inspired Prompt Workshop
An unofficial, original v0-inspired Prompt Workshop system grounded in 17 retained, evidence-backed interface patterns.
Borderless Ledger — Wise-inspired AI Kit
13 focused, original elements for Borderless Ledger; categories are retained only when supported by the live reference. Published flags remain disabled.
Runway-inspired Real-World Studio
A high-contrast studio language for a platform that moves between creative production, developer workflows, robotics, research, and enterprise. The system uses a dark stage, warm action color, and compact cross-platform wayfinding without copying Runway's wordmark, content, or media. Responsive previews and 8 evidence-backed interface elements.
Observable-inspired Signal Notebook
An original, unofficial Observable-inspired system for reactive notebooks, executable explanations, and data visualization surfaces. It retains only 11 focused elements supported by Observable's live notebook and chart workflows.
Replit-inspired Build Canvas
A friendly builder language for moving from prompt to app: vivid purple/green accents, a prominent idea field, artifact type selection, parallel execution, built-in infrastructure, team plans, agent chat, and a clear publish handoff. It is an original study without Replit's logo, pixel font, testimonials, screenshots, or protected copy. Responsive previews and 14 evidence-backed interface elements.