AIOpsForge Design System Library

The Design System.
Copy. Paste. Build.

Every token, component, animation, and layout pattern — rendered live. Copy the full system as production-ready markdown for your own projects.

Browse System

40+

COLOR TOKENS

COMPONENTS

LAYOUT PATTERNS

ANIMATIONS

01 — Colors

Color tokens

Primitive tokens map to semantic aliases. Use semantic tokens in code — never hard-code hex values.

ACCENT + SEMANTIC

Green 500

#00FF41

--accent

Green 400

#00cc34

--accent-dim

Red 500

#ff4444

--color-negative

Amber 500

#FFB800

--color-amber-500

Cyan 500

#22d3ee

--color-cyan-500

Blue 500

#4488ff

--color-blue-500

BACKGROUNDS

Surface Deep

#060606

--bg-surface-deep

Page

#0a0a0a

--bg-page

Section Alt

#111111

--bg-section-alt

Card

#161616

--bg-card

Card Hover

#1c1c1c

--bg-card-hover

Elevated

#222222

--bg-elevated

TEXT

Primary

#eeeeee

--text-primary

Secondary

#999999

--text-secondary

Dim

#555555

--text-dim

02 — Typography

Type scale

Four fonts. Strict hierarchy. Monospace signals data and precision. Sans-serif handles prose.

Hero Headline

Font: Space GroteskSize: clamp(36px, 7vw, 72px)Weight: 800Line Height: 1.05

Section Title

Font: Space GroteskSize: clamp(28px, 5vw, 44px)Weight: 700Line Height: 1.15

Product Headline

Font: Outfit (product pages)Size: clamp(28px, 5vw, 44px)Weight: 700

Body text is always #999 — never white. White is reserved for headlines and bold emphasis within body text. This keeps information density readable.

Font: IBM Plex SansSize: 16pxWeight: 400Color: --text-secondary

section label

Font: JetBrains MonoSize: 11pxLetter Spacing: 3pxTransform: uppercase

CTA Button Text

Font: JetBrains MonoSize: 14pxWeight: 700Letter Spacing: 0.5px

2,847 CREDITS REMAINING

Stat Number: JetBrains Mono 20px 700 --accentStat Label: JetBrains Mono 11px --text-dim

03 — Spacing

Spacing scale

--space-1

4px

--space-2

8px

--space-3

12px

--space-4

16px

--space-6

24px

--space-8

32px

--space-12

48px

--space-16

64px

--space-25

100px

04 — Motion

Animation system

Exact tokens so AI never guesses. Every duration, easing curve, and animation pattern is specified precisely.

ENTRANCE ANIMATIONS

Fade Up

Fade In

Slide In Left

CONTINUOUS

Pulse Dot

Cursor Blink

$ _

Animations AI Cannot Reliably Produce

Type	Why AI Fails	Alternative
Spring physics	AI cannot feel tension/damping — guesses wrong cubic-bezier values	Use Motion MCP /css-spring skill
height: auto	CSS cannot transition to auto — AI tries max-height: auto which fails	Use generous fixed max-height or JS measurement
3D transforms	AI gets perspective, rotateX/Y values wrong — produces distortion	Avoid 3D transforms. Specify exact values if needed
Layout properties	Animating width/height/margin triggers layout recalculation and jank	ONLY animate transform and opacity

05 — Components

Live components

Every component rendered live. Hover, click, and interact. Each is a direct implementation of the spec.

CTA Buttons

Tags + Badges

Infrastructure > AI Agent Live

Card (Hover Me)

Standard Card

Hover to see the green top bar reveal and border shift. Every card in the system uses this pattern.

Card (Highlighted)

Highlighted Card

Green border, tinted background, permanent top bar. Used for featured/recommended items.

Tech Chips

Claude API n8n Vercel

Trust Bar

+ No lock-in + Cancel anytime + Production-grade

Terminal Mockup

design-system.sh

$ aof design-system --export markdown
# Exporting 40 color tokens...
# Exporting 19 components...
# Exporting 10 animation patterns...
$ status: complete
$ output: design-system.md (12.4kb)

FAQ Accordion

How do I use this design system?

Click "Copy Full System" in the nav to get the entire system as a markdown file. Paste it into your project as design-system.md or into your CLAUDE.md. Claude Code will use it as the source of truth for all design decisions.

Can I use this with React or Tailwind?

Yes. The exported markdown includes framework-specific notes for HTML/CSS, React (with Motion library), and Tailwind. Map the CSS custom properties to your framework's token system.

Who-For Comparison Grid

x Not for you if

You want plug-and-play templates
You prefer Bootstrap or Material UI

> Built for you if

You build with AI tools (Claude, GPT)
You want a system AI can execute precisely

06 — Layouts

Layout patterns

Grid definitions with responsive breakpoints. Copy the pattern, fill in your content.

Feature Cards Grid

repeat(auto-fit, minmax(300px, 1fr)) | gap: 20px

1fr

Two-Column Comparison

1fr 1fr | gap: 32px | collapse at 700px

Negative

Positive

Hero Split

1fr 380px | gap: 64px | collapse at 900px

Text Content

Mockup

Container

max-width: 1100px | padding: 0 24px | margin: 0 auto

1100px max content area

Section Alternation

bg-page (#0a0a0a) / bg-section-alt (#111111) + 1px border separators

Section 1

Section 2

Section 3

The Design System.Copy. Paste. Build.