Forge – Design System

Hand-crafted by Antonio Papalillo

Forge provides a complete set of production-ready components engineered for accessibility, consistency, and ease of use across your entire application.

Build With Confidence

A rugged, high-contrast component library built for clarity and performance.

Explore Components

Color Palette

A disciplined color system built on a pure black foundation with strategic use of accent and semantic colors.

Background

#000000

--color-background

Foreground

#ffffff

--color-foreground

Muted

#9CA3AF

--color-muted

Surface

#0a0a0a

--color-surface

Surface Hover

#141414

--color-surface-hover

Border

#1f1f1f

--color-border

Accent

#FF5722

--color-accent

Accent Hover

#FF7043

--color-accent-hover

Success

#22c55e

--color-success

Warning

#f59e0b

--color-warning

Error

#ef4444

--color-error

Info

#3b82f6

--color-info

Typography

A crisp type scale using Montserrat for interface clarity and monospace for code content.

Display

The quick brown fox

H1

Forge Ahead

H2

Component Library

H3

Design Tokens

H4

Section Subtitle

H5

Card Title

H6

Label Text

Body

Production-ready components engineered for consistency.

SmallSupporting text and captions.

Mono

const forge = true;

Buttons

Versatile button component with multiple variants for every interaction requirement.

Inputs

Text input fields with support for labels, helper text, error states, and icons.

Default Input

With Value

With Helper TextFound in your dashboard under Settings → API

Error StateThis token has expired. Please generate a new one.

Disabled

Selects, Checkboxes & Radios

Form controls for single and multi-select scenarios with accessible markup.

Badges

Compact status indicators for conveying state and metadata at a glance.

DefaultSuccessWarningErrorInfoFeatured

Cards

Versatile container component for grouping related content and actions.

Project Alpha

Active

A high-performance data processing pipeline built for real-time analytics workloads.

API Gateway

Beta

Unified entry point for all microservice communications with built-in rate limiting.

Auth Module

Updated

Secure authentication system supporting OAuth 2.0, SAML, and MFA out of the box.

Lists

Ordered content presentation with consistent visual treatment.

Deploy to production in seconds
Enterprise-grade security by default
Optimized for sub-100ms response times
OpenAPI 3.0 specification included

Snackbars

Temporary notification messages for brief feedback and system alerts.

Configuration saved successfully.

Your session will expire in 5 minutes.

Failed to deploy. Please try again.

New version available: v2.4.0

Modals

Focused dialog overlays for critical information and confirmations.

Tables

Structured data presentation with hover states and accessible markup.

Component	Variants	Accessibility	Status
Button	5	AA	Stable
Input	4	AA	Stable
Select	2	AA	Stable
Modal	3	AA	Stable
Snackbar	4	AA	Stable
Table	2	AA	Stable
Card	3	AA	Stable
Badge	6	AA	Stable

Tab-based navigation for organizing content within constrained spaces.

The Overview tab displays the high-level summary of your project status and key metrics.

Dividers

Visual separators for organizing content and creating visual rhythm.

Section intro text above the divider.

Content block after the divider.

Primary

Main content area for primary actions.

Secondary

Supporting information and details.

Code Blocks

Syntax-highlighted code presentation with copy functionality.

Component Import

import { Button } from '@forge/ui';
import { Input } from '@forge/ui';

export function LoginForm() {
  return (
    <form>
      <Input label="Email" type="email" />
      <Input label="Password" type="password" />
      <Button variant="primary">Sign In</Button>
    </form>
  );
}

Custom Properties

.my-component {
  --forge-accent: #FF5722;
  --forge-surface: #0a0a0a;
  --forge-border: #1f1f1f;

  background: var(--forge-surface);
  border: 1px solid var(--forge-border);
  color: var(--forge-accent);
}