Design System inspired by GitHub Copilot

AI coding. Gradient blue-green, dark IDE aesthetic, developer-focused.

Usage

npx getdesign@latest add github-copilot

Run this command from your project root, then ask your AI assistant to use DESIGN.md for UI work.

Installs

Bookmarked

Not an official GitHub Copilot design system. A curated starting point for building GitHub Copilot-like UIs with your AI coding agent.

AI coding. Gradient blue-green, dark IDE aesthetic, developer-focused.

Preview

github-copilot.design.md

Brand System Catalog

DESIGN SYSTEM INSPIRATION OF GITHUB COPILOT

AI coding. Gradient blue-green, dark IDE aesthetic, developer-focused.

Explore the system View tokens

Color Palette

AI coding. Gradient blue-green, dark IDE aesthetic, developer-focused.

Primary

Copilot Blue

#6e40c9

Brand color

Copilot Green

#2ea043

Brand color

Gradient Start

#6e40c9

Brand color

Gradient End

#79c0ff

Brand color

Dark

#0d1117

Brand color

Surface

#161b22

Brand color

White

#f0f6fc

Brand color

Typography

A type system inspired by GitHub Copilot.

system-ui

system-ui, system-ui

Fira Code

Fira Code, system-ui

DISPLAY / 64px / 700 / 1.1

EVERYONE

H1 / 48px / 700 / 1.2

A disciplined editorial voice

H2 / 32px / 600 / 1.3

Section heading

BODY / 16px / 400 / 1.6

Body copy reads at the size and rhythm extracted from the source spec. Lorem ipsum dolor sit amet.

SMALL / 14px / 400 / 1.5

Small

CODE / 14px / 400 / 1.6

Code

Buttons

Buttons, cards, and inputs follow the brand's visual language with consistent use of the primary color palette and border-radius conventions.

Not detected on this URL

Cards

Card patterns inspired by GitHub Copilot.

Not detected on this URL

Components

Other component primitives mapped from the GitHub Copilot spec.

Not detected on this URL

Design System Inspired by GitHub Copilot

1. Visual Theme & Atmosphere

AI coding. Gradient blue-green, dark IDE aesthetic, developer-focused.

Key Characteristics:

Blue-to-green gradient as AI brand

Dark IDE-inspired aesthetic

Code completion visualization UI

Developer-focused marketing layout

GitHub dark theme as base

2. Color Palette & Roles

Primary

Copilot Blue (#6E40C9): Brand color
Copilot Green (#2EA043): Brand color
Gradient Start (#6E40C9): Brand color
Gradient End (#79C0FF): Brand color
Dark (#0D1117): Brand color
Surface (#161B22): Brand color
White (#F0F6FC): Brand color

3. Typography Rules

Font Family

Display & UI: system-ui, Fira Code

Hierarchy

Role	Size	Weight	Line Height
Display	64px	700	1.1
H1	48px	700	1.2
H2	32px	600	1.3
Body	16px	400	1.6
Small	14px	400	1.5
Code	14px	400	1.6

4. Component Stylings

Buttons, cards, and inputs follow the brand's visual language with consistent use of the primary color palette and border-radius conventions.

5. Layout Principles

Base unit: 4-8px
Max container: 1100-1200px
Consistent section spacing: 80-120px vertical

6. Depth & Elevation

Depth communicated through background color shifts, subtle shadows, or border treatments.

7. Do's and Don'ts

Do

Follow the established color palette strictly
Maintain typographic hierarchy
Use brand-consistent border-radius

Don't

Introduce off-brand colors
Use inconsistent spacing
Override the established visual language

8. Responsive Behavior

Breakpoint	Width
Mobile	<640px
Tablet	640-1024px
Desktop	>1024px

9. Agent Prompt Guide

Quick Color Reference

Copilot Blue: #6E40C9
Copilot Green: #2EA043
Gradient Start: #6E40C9
Gradient End: #79C0FF
Dark: #0D1117
Surface: #161B22

Typography

Font: system-ui, Fira Code