Design system Paid source15 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.

Includes DESIGN.md, tokens.json, full CSS, Tailwind v4 token mapping and matching UI specimens. Preview for free; protected guidance and style downloads require Starter or Super. Framework installation and theme support are verified only where listed.

Theme support:: Unverified
Installation:: No verified installation path listed

Delivered component specimen

GitHub-inspired Collaboration actions

HTML/CSS · JavaScript

FFrontend Forever

Design foundations

Inspect the kit's typography, palette, icons, spacing and motion.

Style identity

Forge Commons

An unofficial original system for code, planning, collaboration, automation, and security moving together.

Reference style: Dark collaboration system with black canvas, white editorial hierarchy, cool blu

Visit website

Typography

Font families

Mona Sans

Interface and body typography

"Mona Sans", MonaSansFallback, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif

Font website

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

Font website

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

Font website

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

#000000

Primary dark homepage background

Night surface

#151515

Product screenshot and card surface

Raised surface

#24292f

Selected controls and panels

White ink

#f0f6fc

Primary dark-mode copy

Muted ink

#8b949e

Supporting copy and metadata

Blue

#58a6ff

Links, focus, and active controls

Violet glow

#8b5cf6

AI/product proof illumination

Green

#3fb950

Passing checks and secure state

Light canvas

#ffffff

Explicit light-mode background

Light surface

#f6f8fa

Light-mode panels

Light border

#d0d7de

Light-mode structure

Amber

#d29922

Pending 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.

Primer Octicons npm package

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 shift

Default 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 / #000000

Page background in light / dark mode

Surface

#f6f8fa / #151515

Cards, controls, and product frames

Raised

#eef3f8 / #24292f

Selected 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.

Assigned collection

GitHub-inspired Forge Commons Interface Elements

15 published components in collection order

Components

Built from the same system

These working component previews are supplied with the kit. Open a component to inspect its code; the reference screenshots show the original website.

Open collection

GitHub-inspired Collaboration actions

HTML/CSS · JavaScript

HTML/CSS · JavaScript

Frontend Forever

More AI Kits

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 16 retained, evidence-backed interface patterns.

Borderless Ledger — Wise-inspired AI Kit

13 focused, original elements for Borderless Ledger.

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.