# GitHub Primer 디자인 시스템 토큰 정리

조사일: 2026-09-29
용도: "같은 5장 발표자료를 디자인 시스템별 스타일로" 비교할 때 AI에 붙이는 참고 자료. 아래 값은 모두 공식 문서와 공식 토큰 패키지에서 그대로 옮긴 것이며, 임의로 만든 값은 없다.

## 출처

| 구분 | URL | 비고 |
|---|---|---|
| 공식 사이트 | https://primer.style | "The design system for GitHub" |
| 색상 사용 가이드 | https://primer.style/product/getting-started/foundations/color-usage/ | 토큰 3단계 구조, neutral 스케일 용도 |
| 타이포그래피 가이드 | https://primer.style/product/getting-started/foundations/typography/ | 줄 길이, 정렬 규칙 |
| 타이포그래피 토큰 | https://primer.style/product/primitives/typography/ | |
| 사이즈 토큰 | https://primer.style/product/primitives/size/ | base-size, border radius |
| 토큰 GitHub | https://github.com/primer/primitives | 2026-09-09 업데이트 확인 |
| 기본 팔레트 원본 | https://raw.githubusercontent.com/primer/primitives/main/src/tokens/base/color/light/light.json5 | |
| 빌드된 CSS (npm @primer/primitives 11.10.0) | https://unpkg.com/@primer/primitives@11.10.0/dist/css/functional/themes/light.css 외 typography.css, space.css, radius.css, size.css | 이 문서의 값은 이 버전 기준 |

## 라이선스

- `primer/primitives` 저장소: **MIT License** ("Copyright (c) 2018 GitHub Inc."). 상업적 사용, 수정, 배포 가능. 재배포 시 저작권 고지 포함.
- 기본 서체 Mona Sans: GitHub가 공개한 오픈소스 서체로 알려져 있으나, 이번 조사에서 서체 라이선스 페이지를 직접 열어 확인하지는 않았다 (확인 필요).
- 주의: GitHub 로고, Octocat, "GitHub" 브랜드명은 쓰지 말 것. 색과 규칙만 참고.

## 1. 색상 토큰

### 1-1. 기본 팔레트 (light, base color)

neutral (0~13):

| 단계 | HEX | 단계 | HEX |
|---|---|---|---|
| 0 | #ffffff (white) | 7 | #C8D1DA |
| 1 | #F6F8FA | 8 | #818B98 |
| 2 | #EFF2F5 | 9 | #59636E |
| 3 | #E6EAEF | 10 | #454C54 |
| 4 | #E0E6EB | 11 | #393F46 |
| 5 | #DAE0E7 | 12 | #25292E |
| 6 | #D1D9E0 | 13 | #1f2328 (black) |

색상 스케일 (0~9):

| 단계 | blue | green | yellow | orange | red | purple | pink | coral |
|---|---|---|---|---|---|---|---|---|
| 0 | #ddf4ff | #dafbe1 | #fff8c5 | #fff1e5 | #ffebe9 | #fbefff | #ffeff7 | #fff0eb |
| 1 | #b6e3ff | #aceebb | #fae17d | #ffd8b5 | #ffcecb | #ecd8ff | #ffd3eb | #ffd6cc |
| 2 | #80ccff | #6fdd8b | #eac54f | #ffb77c | #ffaba8 | #d8b9ff | #ffadda | #ffb4a1 |
| 3 | #54aeff | #4ac26b | #d4a72c | #fb8f44 | #ff8182 | #c297ff | #ff80c8 | #fd8c73 |
| 4 | #218bff | #2da44e | #bf8700 | #e16f24 | #fa4549 | #a475f9 | #e85aad | #ec6547 |
| **5** | **#0969da** | #1a7f37 | #9a6700 | #bc4c00 | #cf222e | #8250df | #bf3989 | #c4432b |
| 6 | #0550ae | #116329 | #7d4e00 | #953800 | #a40e26 | #6639ba | #99286e | #9e2f1c |
| 7 | #033d8b | #044f1e | #633c01 | #762c00 | #82071e | #512a97 | #772057 | #801f0f |
| 8 | #0a3069 | #003d16 | #4d2d00 | #5c2200 | #660018 | #3e1f79 | #611347 | #691105 |
| 9 | #002155 | #002d11 | #3b2300 | #471700 | #4c0014 | #2e1461 | #4d0336 | #510901 |

(문서 원문: 기본 팔레트 토큰은 "should never be used directly in code or design". 실제로는 아래 역할 토큰을 쓴다.)

### 1-2. 역할(functional) 토큰, light 테마

| 토큰 | HEX |
|---|---|
| bgColor-default | #ffffff |
| bgColor-muted | #f6f8fa |
| bgColor-inset | (= bgColor-muted) #f6f8fa |
| bgColor-emphasis | #25292e |
| bgColor-inverse | #25292e |
| bgColor-disabled | #eff2f5 |
| bgColor-accent-emphasis | #0969da |
| bgColor-accent-muted | #ddf4ff |
| bgColor-success-emphasis | #1f883d |
| bgColor-success-muted | #dafbe1 |
| bgColor-attention-emphasis | #9a6700 |
| bgColor-attention-muted | #fff8c5 |
| bgColor-danger-emphasis | #cf222e |
| bgColor-danger-muted | #ffebe9 |
| bgColor-done-emphasis | #8250df |
| bgColor-done-muted | #fbefff |
| bgColor-neutral-emphasis | #59636e |
| bgColor-neutral-muted | #818b981f |
| fgColor-default | #1f2328 |
| fgColor-muted | #59636e |
| fgColor-onEmphasis | #ffffff |
| fgColor-accent | #0969da |
| fgColor-success | #1a7f37 |
| fgColor-attention | #9a6700 |
| fgColor-danger | #d1242f |
| fgColor-done | #8250df |
| fgColor-disabled | #818b98 |
| borderColor-default | #d1d9e0 |
| borderColor-muted | #d1d9e0b3 |
| borderColor-emphasis | #818b98 |
| borderColor-accent-emphasis | #0969da |
| borderColor-accent-muted | #54aeff66 |
| button-primary-bgColor-rest | (= bgColor-success-emphasis) #1f883d |

특이점: Primer의 **주 버튼(primary button)은 파랑이 아니라 초록 #1f883d**. 파랑 #0969da(accent)는 링크, 선택, 활성, 포커스 상태용.

## 2. 타이포그래피

- 서체 스택 (sansSerif, display 공통):
  `"Mona Sans VF", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans Backtick Fix", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"`
- 모노 스택: `ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace`
- 한글: 스택에 "Noto Sans"가 포함되어 있으나 한글 전용 지정은 없다.
- 굵기 토큰: light 300, normal 400, medium 500, semibold 600
- 줄간격 토큰: tight 1.25, snug 1.375, normal 1.5, relaxed 1.625, loose 1.75
- 크기 토큰(base): xs 12px(0.75rem), sm 14px(0.875rem), md 16px(1rem), lg 20px(1.25rem), xl 32px(2rem), 2xl 40px(2.5rem)

| 역할 토큰 | 크기 | 줄간격 | 굵기 | 서체 |
|---|---|---|---|---|
| text-display | 40px (2.5rem) | 1.375 | 500 | sansSerifDisplay |
| text-title-large | 32px (2rem) | 1.5 | 600 | sansSerifDisplay |
| text-title-medium | 20px (1.25rem) | 1.625 | 600 | sansSerifDisplay |
| text-title-small | 16px (1rem) | 1.5 | 600 | sansSerif |
| text-subtitle | 20px (1.25rem) | 1.625 | 400 | sansSerifDisplay |
| text-body-large | 16px (1rem) | 1.5 | 400 | sansSerif |
| text-body-medium | 14px (0.875rem) | 1.5 | 400 | sansSerif |
| text-body-small | 12px (0.75rem) | 1.625 | 400 | sansSerif |
| text-caption | 12px (0.75rem) | 1.25 | 400 | sansSerif |
| text-codeBlock | 13px (0.8125rem) | 1.5 | 400 | monospace |
| text-codeInline | 0.9285em | | 400 | monospace |

## 3. 간격 (spacing)

- 역할 토큰 (space.css): space-xxs 2px(0.125rem), space-xs 4px(0.25rem), space-sm 8px(0.5rem, "Default spacing for most UI elements"), space-md 12px(0.75rem), space-lg 16px(1rem), space-xl 24px(1.5rem)
- 기본 사이즈 스케일 (base-size-N = N px): 2, 4, 6, 8, 12, 16, 20, 24, 28, 32, 36, 40, 44, 48, 64, 80, 96, 112, 128 (음수 버전 -2 ~ -48도 있음)
- 문서 원문: 줄간격 값은 "vary per style, making them align to the 4px grid".

## 4. 래디어스 (radius)

| 토큰 | 값 | 비고 |
|---|---|---|
| borderRadius-small | 3px (0.1875rem) | 작은 요소 |
| borderRadius-medium | 6px (0.375rem) | |
| borderRadius-default | (= medium) 6px | 일반 컴포넌트 기본값 |
| borderRadius-large | 12px (0.75rem) | 큰 표면, 부드러운 컨테이너 |
| borderRadius-full | 624.9375rem | 알약형, 완전 원형 |

## 5. 핵심 사용 규칙 (문서 원문 기반)

1. **배경은 두 가지가 중심.** "The two most commonly used background colors are bgColor-default and bgColor-muted." 즉 흰색 #ffffff와 옅은 회색 #f6f8fa.
2. **neutral 단계별 용도.** 0~6은 배경, 7~8은 테두리와 구분선, 9~10은 글자와 아이콘. 9는 0~4 배경 위 글자의 최소 대비 기준.
3. **강조(emphasis) 배경 위 글자는 항상 흰색.** "Emphasis background colors ... are always combined with fgColor-onEmphasis tokens for text and icons." muted 배경 + muted 테두리 조합은 "은은한 강조"용.
4. **색을 주된 강조 수단으로 쓰지 않는다.** "Refrain from utilizing color as a primary method of emphasis." 계층은 크기와 굵기로.
5. **줄 길이와 정렬.** 한 줄 약 80자 이하, 기본은 왼쪽 정렬(ragged right). 가운데/양쪽/오른쪽 정렬은 예외적으로만.

## AI에 붙일 때 한 줄 요약

흰 배경(#ffffff)과 옅은 회색 구획(#f6f8fa), 본문 #1f2328, 보조 글자 #59636e, 테두리 #d1d9e0, 링크/강조 파랑 #0969da, 핵심 행동(주 버튼)은 초록 #1f883d, 서체 Mona Sans(없으면 시스템 산세리프), 제목 600 굵기 32px, 본문 16px 줄간격 1.5, 모서리 6px, 간격 4/8/16/24px, 왼쪽 정렬.