디자인 시스템
web
v1.0.0
90/100

GitHub Primer-Inspired UI Kit

@dante · Developer Tools

Code-forward, Primer-derived design system for developer tools — dense list rows, hairline borders, blue links, and merge-green CTAs on a true white canvas.

HTML/CSS
React
shadcn/ui
Tailwind
#code
#collaboration
#developer-tools
#primer
GitHub Primer-Inspired UI Kit
다운로드4
패키지 JSON 다운로드
DESIGN.mdSKILL.md

개요

GitHub Primer-Derived UI

Principles

  • Engineered, not decorated. Every pixel announces a stance: this is a tool for people who care about diffs, builds, and pull requests. Information density is the brand.
  • True white canvas. The page background is #ffffff (or #0d1117 for dark mode) — no warmth, no tint. Surfaces stack with hairline #d0d7de borders rather than negative space.
  • Two semantic accents only. Primer blue #0969da for links and primary navigation. Merge green #1f883d (#1a7f37 hover) for confirmation, success, and the merge button. Red, purple, yellow, and pink are reserved for state semantics — never decoration.
  • System fonts, always. Body uses -apple-system, BlinkMacSystemFont, "Segoe UI" so text renders instantly on slow connections. Code uses ui-monospace, SFMono-Regular. Never load a webfont for chrome.
  • 14px body, not 16px. GitHub's prose density is its identity. The product reads at 14px to fit more rows in a viewport. Captions drop to 12px.
  • Weight binary. 400 default; 600 for headings and emphasis. No 500, no 700.

Color Roles

Surfaces step from #ffffff (canvasDefault) → #f6f8fa (canvasSubtle, header strips, sidebars) → #eaeef2 (canvasInset, code blocks). Foreground steps from #1f2328 (default) to #656d76 (muted captions and file paths).

State pills use exact semantic hex: open #1a7f37, closed #cf222e, merged #8250df, draft #6e7781. Diffs add #dafbe1/#1a7f37 and delete #ffebe9/#cf222e. Hunk headers sit on #ddf4ff with #0969da foreground.

Components

Buttons are 32px tall, 6px radius, 16px horizontal padding, with a 1px subtle shadow 0 1px 0 rgba(31,35,40,0.1). Inputs share the same height and radius; focus adds a 3px rgba(9,105,218,0.3) ring on a #0969da border. Cards have a #f6f8fa header strip with a hairline bottom divider and a #ffffff body. Status badges are pill-shaped (radius 9999px) with white text on the semantic background.

Lists are dense by design: 16px horizontal × 12px vertical row padding. Hover states swap the row background to canvasSubtle. Branch refs and SHAs are mono-font chips on #ddf4ff (or #dafbe1 for the default branch).

Spacing & Motion

Base unit 4px; scale 4/8/12/16/24/32/40/48. Page max-width 1280px, sidebar 296px, collapses below 1012px. Motion is restrained: 80ms hover, 200ms popover, ease-out for opens and ease-in for closes. No parallax, no page-load animations, no persistent micro-interactions. Things appear; they do not perform.

프리뷰

새 창으로 열기 ↗

패키지 안의 토큰·컴포넌트 정의로부터 순수하게 합성된 파생 뷰입니다 (편집 콘텐츠 없음).

색상 (30)

canvasDefault
#ffffff
canvasSubtle
#f6f8fa
canvasInset
#eaeef2
fgDefault
#1f2328
fgMuted
#656d76
primerBlue
#0969da
primerBlueHover
#0550ae
accentSubtle
#ddf4ff
successGreen
#1a7f37
successButton
#1f883d
successSubtle
#dafbe1
dangerRed
#cf222e
dangerHover
#a40e26
dangerSubtle
#ffebe9
attentionYellow
#9a6700
attentionSubtle
#fff8c5
donePurple
#8250df
sponsorPink
#bf3989
draftGray
#6e7781
borderDefault
#d0d7de
borderMuted
#d8dee4
borderSubtle
#eaeef2
darkCanvas
#0d1117
darkSurface
#161b22
darkBorder
#30363d
darkFg
#e6edf3
diffAddBg
#dafbe1
diffAddFg
#1a7f37
diffDelBg
#ffebe9
diffDelFg
#cf222e

타이포그래피 (5)

body
-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif
  • 48px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 32px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 24px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 18px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 14px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 12px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
heading
-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif
  • 48px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 32px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 24px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 18px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 14px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 12px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
mono
ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace
  • 48px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 32px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 24px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 18px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 14px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 12px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
emoji
"Apple Color Emoji", "Segoe UI Emoji"
  • 48px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 32px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 24px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 18px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 14px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 12px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
scale
unparsed
{
  "display": "32px/1.25",
  "h1": "24px/1.25",
  "h2": "20px/1.25",
  "h3": "16px/1.25",
  "body": "14px/1.5",
  "small": "12px/1.4",
  "code": "12px/1.45"
}

컴포넌트 (16)

Button

Primary affordance. Merge-green for confirmation, default gray for secondary, blue outline for link-style, red for destructive.

html
Hand-tuned CSS, Primer-derived
1 props · 6 states · 9 tags · 2 소스

Input

Single-line text field with Primer-blue focus ring.

html
Hand-tuned CSS, Primer-derived
2 props · 5 states · 4 tags · 2 소스

Card

Box with f6f8fa header strip and white body, separated by hairline border.

html
Hand-tuned CSS, Primer-derived
0 props · 1 states · 4 tags · 2 소스
누락 상태: hover, focus-visible, disabled

Badge

Pill-shaped status badge for issue/PR state.

html
Hand-tuned CSS, Primer-derived
1 props · 1 states · 9 tags · 2 소스
누락 상태: hover, focus-visible, disabled

Heading

system-ui headline scale at 32/24/20/16, weight 600 only.

html
Hand-tuned CSS, Primer-derived
1 props · 1 states · 8 tags · 2 소스
누락 상태: hover, focus-visible, disabled

Link

Primer-blue link, underline on hover.

html
Hand-tuned CSS, Primer-derived
0 props · 4 states · 4 tags · 2 소스
누락 상태: disabled

Hero

Repository header strip with title, description, and primary action.

html
Hand-tuned CSS, Primer-derived
0 props · 1 states · 5 tags · 2 소스
누락 상태: hover, focus-visible, disabled

Nav

Tab-style navigation with bottom border indicator.

html
Hand-tuned CSS, Primer-derived
0 props · 3 states · 5 tags · 2 소스
누락 상태: focus-visible, disabled

Footer

Page footer with muted links and copyright.

html
Hand-tuned CSS, Primer-derived
0 props · 1 states · 4 tags · 2 소스
누락 상태: hover, focus-visible, disabled

Stat

Inline numeric metric (stars, forks, watchers).

html
Hand-tuned CSS, Primer-derived
0 props · 1 states · 5 tags · 2 소스
누락 상태: hover, focus-visible, disabled

IssueCard

Dense issue list row with state icon, title, labels, and metadata.

html
Hand-tuned CSS, Primer-derived
0 props · 2 states · 8 tags · 2 소스
누락 상태: focus-visible, disabled

PrCard

Pull request row with merge status icon and branch info.

html
Hand-tuned CSS, Primer-derived
0 props · 2 states · 10 tags · 2 소스
누락 상태: focus-visible, disabled

CommitItem

Single commit row with SHA, message, and author timestamp.

html
Hand-tuned CSS, Primer-derived
0 props · 2 states · 6 tags · 2 소스
누락 상태: focus-visible, disabled

BranchBadge

Inline branch reference with mono font and subtle blue background.

html
Hand-tuned CSS, Primer-derived
0 props · 1 states · 4 tags · 2 소스
누락 상태: hover, focus-visible, disabled

CodeDiff

Unified diff block with green additions and red deletions.

html
Hand-tuned CSS, Primer-derived
0 props · 1 states · 7 tags · 2 소스
누락 상태: hover, focus-visible, disabled

RepoMeta

Sidebar block with repo About info — language dot, license, topics.

html
Hand-tuned CSS, Primer-derived
0 props · 1 states · 5 tags · 2 소스
누락 상태: hover, focus-visible, disabled

DESIGN.md

GitHub Primer-Derived UI

Principles

  • Engineered, not decorated. Every pixel announces a stance: this is a tool for people who care about diffs, builds, and pull requests. Information density is the brand.
  • True white canvas. The page background is #ffffff (or #0d1117 for dark mode) — no warmth, no tint. Surfaces stack with hairline #d0d7de borders rather than negative space.
  • Two semantic accents only. Primer blue #0969da for links and primary navigation. Merge green #1f883d (#1a7f37 hover) for confirmation, success, and the merge button. Red, purple, yellow, and pink are reserved for state semantics — never decoration.
  • System fonts, always. Body uses -apple-system, BlinkMacSystemFont, "Segoe UI" so text renders instantly on slow connections. Code uses ui-monospace, SFMono-Regular. Never load a webfont for chrome.
  • 14px body, not 16px. GitHub's prose density is its identity. The product reads at 14px to fit more rows in a viewport. Captions drop to 12px.
  • Weight binary. 400 default; 600 for headings and emphasis. No 500, no 700.

Color Roles

Surfaces step from #ffffff (canvasDefault) → #f6f8fa (canvasSubtle, header strips, sidebars) → #eaeef2 (canvasInset, code blocks). Foreground steps from #1f2328 (default) to #656d76 (muted captions and file paths).

State pills use exact semantic hex: open #1a7f37, closed #cf222e, merged #8250df, draft #6e7781. Diffs add #dafbe1/#1a7f37 and delete #ffebe9/#cf222e. Hunk headers sit on #ddf4ff with #0969da foreground.

Components

Buttons are 32px tall, 6px radius, 16px horizontal padding, with a 1px subtle shadow 0 1px 0 rgba(31,35,40,0.1). Inputs share the same height and radius; focus adds a 3px rgba(9,105,218,0.3) ring on a #0969da border. Cards have a #f6f8fa header strip with a hairline bottom divider and a #ffffff body. Status badges are pill-shaped (radius 9999px) with white text on the semantic background.

Lists are dense by design: 16px horizontal × 12px vertical row padding. Hover states swap the row background to canvasSubtle. Branch refs and SHAs are mono-font chips on #ddf4ff (or #dafbe1 for the default branch).

Spacing & Motion

Base unit 4px; scale 4/8/12/16/24/32/40/48. Page max-width 1280px, sidebar 296px, collapses below 1012px. Motion is restrained: 80ms hover, 200ms popover, ease-out for opens and ease-in for closes. No parallax, no page-load animations, no persistent micro-interactions. Things appear; they do not perform.

어댑터 (6)

전체 파일 (11)

  • DESIGN.mdtext/markdown
  • SKILL.mdtext/markdown
  • tokens/colors.jsonapplication/json
  • tokens/typography.jsonapplication/json
  • tokens/components.jsonapplication/json
  • adapters/tokens.csstext/css
  • adapters/shadcn-registry.jsonapplication/json
  • adapters/tailwind.config.jstext/javascript
  • adapters/react/index.tstext/typescript
  • adapters/html/index.htmltext/html
  • adapters/html/styles.csstext/css

버전