返回设计库
G

GitHub

GitHub

访问网站

Code collaboration platform. Neutral grays with blue accents. Developer-first, content-dense but organized.

深灰主题蓝色链接代码优先Octocat品牌开发者社区

配色方案

primary
secondary
accent
background
surface
text
muted
border

字体规范

标题字体-apple-system, BlinkMacSystemFont, Segoe UI, sans-serif
正文字体-apple-system, BlinkMacSystemFont, Segoe UI, sans-serif
基础字号14px
行高1.5
字重400, 500, 600

标题层级

h1GitHub Heading
h2GitHub Heading
h3GitHub Heading
h4GitHub Heading

DESIGN.md

# GitHub Design System

## Visual Theme & Atmosphere
Content-dense developer workspace. Deep charcoal (#0D1117) with blue accents (#0969DA). Information-rich layouts with clear hierarchy. The Octocat brand brings personality to serious engineering.

## Color Palette & Roles
| Token | Hex | Role |
|-------|-----|------|
| Primary | #0969DA | Blue links, CTAs |
| Secondary | #1F6FEB | Blue hover |
| Accent | #238636 | Green success, merge |
| Background | #0D1117 | Dark canvas |
| Surface | #161B22 | Cards, panels |
| Text | #E6EDF3 | Primary text |
| Muted | #8B949E | Secondary text |
| Border | #30363D | Subtle dividers |

## Typography Rules
- **Fonts**: System fonts for body, monospace for code
- **Base Size**: 14px (compact)
- **Line Height**: 1.5

## Component Stylings
- **Code blocks**: Dark bg, syntax highlighting, line numbers
- **Buttons**: Blue primary, green success, ghost secondary
- **Navigation**: Top bar with search, tabs below

## Agent Prompt Guide
Dense information layouts, dark charcoal background, blue accents, prominent monospace code blocks, tabbed navigation.

常见问题

GitHub 的设计风格是什么?

Code collaboration platform. Neutral grays with blue accents. Developer-first, content-dense but organized.

GitHub 使用什么主色调?

GitHub 的主色调是 #0969DA,背景色为 #0D1117,文本色为 #E6EDF3。

GitHub 使用什么字体?

标题字体: -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif。正文字体: -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif。基础字号: 14px。

如何在项目中使用 GitHub 设计系统?

点击上方 DESIGN.md 代码块中的复制按钮,将完整设计规范复制到你的项目中。AI Coding 工具(如 Cursor)可以直接读取 DESIGN.md 来生成符合 GitHub 风格的代码。

探索更多设计系统

发现 50+ 精选设计系统,为你的 AI Coding 项目提供设计灵感。

查看全部设计系统