Design System · v1.7.1 · 2026.06

# Kami紙

좋은 콘텐츠는 좋은 종이를 만날 자격이 있습니다. Kami는 AI 시대를 위한 레이아웃 디자인 시스템으로, 문서를 명확하고 읽기 쉽고 기억에 남게 만듭니다.

Canvas#f5f4ed Accent#1B365D SerifCharter / TsangerJinKai Sans= Serif (페이지당 단일 폰트)

00 · See it

## 출력 샘플

Claude에게 브리프를 전달하세요: 원페이저, 긴 문서, 레터, 포트폴리오, 이력서, 슬라이드 모두 하나의 작고 신뢰할 수 있는 규칙 세트에서 정돈된 레이아웃으로 완성됩니다. 동일한 브리프는 이미지 렌더러에도 적용할 수 있으며, README에 복사-붙여넣기 프롬프트와 샘플 출력물이 포함되어 있습니다.

Equity Report

Tesla 2026년 1분기 실적 분석

Resume

개발자 이력서, 2페이지

Portfolio

Kaku 터미널 포트폴리오, 일본어, 7페이지

Slides

에이전트 키노트, 6슬라이드

Landing Pages

## Kami로 제작

동일한 랜딩 페이지 템플릿을 세 가지 다른 제품에 적용한 결과. 하나의 제약 세트, 세 가지 다른 목적.

Kami

디자인 시스템 홈페이지

Luo

CJK 읽기용 폰트, 중국어

Mole

macOS 시스템 유틸리티

01 · Usage

## 설치 및 사용

Claude에게 필요한 것을 말하세요. 예를 들어 "이력서 만들어 줘", "스타트업 원페이저 만들어 줘", "발표용 슬라이드 디자인해 줘". 스킬이 자동으로 실행되며, 슬래시 명령어가 필요 없습니다.

    # Claude Code
    npx skills add tw93/kami -a claude-code -g -y

    # Codex plugin marketplace
    codex plugin marketplace add tw93/kami
    codex plugin add kami@kami

Claude Code 플러그인 마켓플레이스는 v2.1.142+에서 사용할 수 있습니다. `/plugin marketplace add tw93/kami`를 실행한 뒤 `/plugin install kami@kami`를 실행하세요. Codex는 `codex plugin marketplace add tw93/kami` 실행 후 `codex plugin add kami@kami`로 설치합니다.

Claude Desktop: kami.zip을 다운로드한 후, Customize > Skills > "+" > Create skill에서 업로드하세요.

02 · Manifesto

## 디자인 원칙

따뜻한 양피지 캔버스, 잉크 블루를 유일한 강조색으로, 세리프가 계층 구조를 담당하며, 하드 섀도우와 화려한 팔레트는 배제합니다. 이 시스템은 인쇄물을 위해 만들어졌습니다: 안정적이고, 명확하며, 절제되어 있습니다.

1. 1

   페이지 배경은 양피지 `#f5f4ed`, 순백은 절대 사용하지 않음

2. 2

   강조색은 잉크 블루 `#1B365D` 하나만; 두 번째 유채색 없음

3. 3

   모든 회색은 따뜻한 색조, 황갈색 기반; 차가운 청회색 사용 금지

4. 4

   영문은 제목과 본문 모두 세리프; 중문은 제목에 세리프, 본문에 산세리프

5. 5

   세리프 본문은 400, 제목은 500. 합성 볼드 사용 금지

6. 6

   세 가지 행간 밴드: 타이트 제목 1.1-1.3 / 밀집 1.4-1.45 / 읽기 1.5-1.55

7. 7

   태그 배경은 반드시 솔리드 hex; rgba 금지, WeasyPrint 이중 사각형 버그

8. 8

   그림자: 링 또는 위스퍼만 허용, 하드 드롭 섀도우 금지

03 · Color

## 따뜻한 절제

하나의 강조색 + 따뜻한 중성색 + 차가운 색상 제로. 잉크 블루는 어떤 페이지에서든 5% 이하만 차지합니다. 그 이상은 절제가 아니라 혼잡입니다.

### Canvas

Parchment

페이지 배경, 감성의 기초

#F5F4ED

Ivory

카드 / 부상된 표면

#FAF9F5

Warm Sand

버튼 기본 / 인터랙티브 표면

#E8E6DC

Deep Dark

다크 테마 페이지 기본, 순수 블랙 아님

#141413

### Brand

Ink Blue

기본 색상 · CTA · 인용 바 · 섹션 오버라인

#1B365D

Ink Light

다크 표면 위 링크 · 밝은 변형

#2D5A8A

Dark Surface

다크 테마 컨테이너 · 웜 차콜

#30302E

Error

오류 상태, 깊은 따뜻한 레드

#B53333

### Warm Neutrals

Near Black

#141413

Dark Warm

#3D3D3A

Olive

#504e49

Stone

#6b6a64

### Tag Tints: rgba에서 솔리드 hex로

양피지 위 잉크 블루 `#1B365D`의 솔리드 hex 등가값. 태그는 WeasyPrint 이중 사각형 렌더링 버그를 피하기 위해 `rgba()` 대신 솔리드 hex를 사용합니다.

Tag sample

0.08

#EEF2F7
Tag sample

0.14

#E4ECF5
Default Tag sample

0.18

#E4ECF5
Tag sample

0.22

#D0DCE9
Tag sample

0.30

#D6E1EE

04 · Typography

## 타입 시스템

세리프는 계층을, 산세리프는 기능을 담당합니다. 세리프 본문은 400, 제목은 500.

Aa

Serif · 제목 + 본문

Charter / TsangerJinKai02

제목, 본문, 풀 인용, 숫자 강조에 사용됩니다. 영문은 Charter, 중문은 TsangerJinKai02를 사용합니다.

</>

Mono · 코드

JetBrains Mono

코드 블록, 버전 번호, hex 값, 표형 숫자.

### 스케일 (인쇄 pt; 화면 px = pt x 1.33)

Display
좋은 문서는 명확하고
안정적이며 절제되어 있다
36-48 pt
weight 500
line 1.10
H1 Section
Color System · Palette
18-22 pt
weight 500
line 1.20
H2 Subsection
Canvas · Warm Neutrals
14-16 pt
weight 500
line 1.25
H3 Item
Tag Tints · Solid Hex
12-13 pt
weight 500
line 1.30
Body
잉크 블루는 어떤 페이지에서든 5% 이하만 차지합니다. 그 이상은 절제가 아니라 혼잡입니다. 모든 회색은 황갈색 기반입니다: R ≈ G > B가 기본 원칙입니다.
9.5-10 pt
weight 400
line 1.55
Caption
그림 주석, 각주, 주석 텍스트. 색상은 올리브 또는 스톤으로 낮아집니다.
8.5-9 pt
weight 400
line 1.45
Label
Design System · v1.7.1
7.5-8 pt
weight 600
line 1.35

05 · Spacing & Shape

## 리듬과 형태

기본 단위: 4pt. 밀집 레이아웃은 더 작은 여백을, 격식 있는 문서는 더 큰 여백을 사용합니다.

스케일 | 값 | 용도 |
--- | --- | --- | ---
xs | 2-3 pt | 인라인 요소 |
sm | 4-5 pt | 태그 패딩 · 타이트 레이아웃 |
md | 8-10 pt | 컴포넌트 내부 |
lg | 16-20 pt | 컴포넌트 간격 · 카드 패딩 |
xl | 24-32 pt | 섹션 제목 마진 |
2xl | 40-60 pt | 주요 섹션 간격 |
3xl | 80-120 pt | 긴 문서 챕터 간격 |

### Radii

4 pt
타이트
6 pt
코드 블록
8 pt
기본 카드
12 pt
컨테이너
16 pt
피처 카드
24 pt
대형 컨테이너
32 pt
히어로

### 깊이: 세 가지 그림자 방식

Kami는 전통적인 하드 섀도우를 피합니다. 깊이감은 링 섀도우, 위스퍼 섀도우, 명암 교차를 통해 표현합니다.

링 섀도우

0 0 0 1pt var(--ring-warm)
버튼 · 카드 호버

위스퍼 섀도우

0 4pt 24pt rgba(0,0,0,0.05)
부드러운 부상 · 피처 카드

라이트 ⇌ 다크

parchment ⇌ deep-dark
섹션 레벨 · 가장 강한 대비

06 · Components

## 원자 모듈

작은 고정 세트로, 구체적인 문서 문제를 해결하는 곳에만 유지합니다.

#### 버튼

하드 드롭 대신 링 섀도우 · 8pt radius

Primary CTA Secondary Ghost

#### 태그, 세 단계

솔리드 hex · 약에서 강으로 선택

Light 0.08 Standard 0.18 Brush gradient

#### 인용

좌측 2pt brand solid + olive 텍스트

> 천 번의 거절 끝에 하나의 승낙, 장식보다 명확함을 우선합니다.

#### 메트릭

세리프 숫자 + 산세리프 레이블 · tabular-nums

6 문서 유형
1 강조색
8 규칙

#### 섹션 제목

serif 500 · 15pt · 크기 주도 계층, 장식 없음

Selected Works · Projects

#### 대시 목록

불릿 대신 대시 · 에디토리얼 톤

- 따뜻한 양피지, 순백은 절대 아님
- 잉크 블루 강조색, 두 번째 색상 없음
- 세리프가 권위를 담당

#### 코드 블록

ivory bg + 0.5pt border + 6pt radius

    // warmth from restraint, not from color
    canvas   = parchment; accent = ink_blue
    palette  = warm_neutrals − cool_grays
    document = serif × hierarchy + generous_space
    beauty   = constraints × intention ÷ noise

#### 피처 카드

whisper shadow + 16pt radius

Tesla Company Profile · One-Pager

단일 A4 페이지 · 메트릭 카드 4개 + 본문 섹션 3개 + 타임라인

English A4 x 1 Ink Blue

07 · Diagrams

## 인라인 차트

아키텍처, 프로세스, 데이터 차트 시나리오를 아우르는 14가지 인라인 SVG 다이어그램 유형. Claude에게 필요한 유형을 말하면 문서에 직접 삽입되며, 색상과 폰트는 Kami 디자인 언어를 따릅니다.

Architecture

시스템 구성 요소와 연결, 하나의 포컬 노드

Flowchart

분기 결정, 예/아니오 경로, 성공에 포컬

Bar Chart

분기별 매출 비교, 그라데이션 또는 단색

Donut Chart

매출 구조 분석, 3-6개 세그먼트 지원

08 · Decision Lookup

## 빠른 참조

무엇을 사용해야 할지 확신이 없을 때 이 표를 참고하세요. 여기에 없다면, 기본 원칙으로 돌아가세요.

작업 | 방법
--- | ---
큰 제목 | serif `500`, 계층에 따른 크기, line-height `1.10-1.30`
읽기 본문 | serif `400`, `9.5-10 pt`, line-height `1.55`
숫자 강조 | `color: var(--brand)`, 볼드 아님
두 섹션 구분 | `2.5pt` brand 좌측 바, 또는 `0.5pt` warm-gray 점선
인용 | 좌측 `2pt` brand solid + olive 텍스트
코드 표시 | Ivory bg + `0.5pt` border + `6pt` radius + mono font
기본 vs 보조 | 기본: brand fill + ivory text; 보조: warm-sand + charcoal
특별 카드 표시 | `border: 0.5pt solid var(--brand)` 또는 `border-left: 3pt`
섹션 시작 | Serif `500` · `15pt` · 크기 주도 계층, 장식 불필요
문서 표지 | 단일 페이지, Display 크기 + 우측 정렬 저자/날짜 + 넉넉한 여백
데이터 카드 | Ivory bg + `8pt` radius + serif 큰 숫자, ink blue + sans 작은 레이블

09 · Anti-Patterns

## 피해야 할 것

예외는 허용되지만, 이유는 명시적이어야 합니다.

##### 하지 마세요

`#ffffff` 순백이나 `#f3f4f6` 쿨 그레이를 페이지 배경으로 사용하지 마세요. 페이지가 딱딱해지고 따뜻한 양피지 특성이 약해집니다.

##### 하세요

항상 `#f5f4ed` 양피지를 사용하세요. 인쇄 시 흰 테두리를 방지하기 위해 `@page background`도 같은 색상으로 설정하세요.

##### 하지 마세요

태그에 `rgba(27,54,93,0.18)`를 사용하지 마세요. WeasyPrint는 패딩과 글리프 영역을 다른 불투명도로 렌더링하여 이중 사각형을 만듭니다.

##### 하세요

등가 솔리드 hex `#E4ECF5`를 위한 틴트 조회 표를 사용하세요. 렌더링이 깔끔하게 유지되고 색상이 안정적입니다.

##### 하지 마세요

제목을 `font-weight: 600` 이상의 합성 볼드로 설정하지 마세요. 합성 볼드는 획을 흐리게 하고 타이포그래피 품질을 떨어뜨립니다.

##### 하세요

본문 400, 제목 500 (실제 W05). 더 강한 존재감이 필요하면 크기나 brand 좌측 바를 사용하고, 합성 볼드는 절대 사용하지 마세요.

##### 하지 마세요

하드 드롭 섀도우 `0 2px 8px rgba(0,0,0,0.3)`을 사용하지 마세요. 시각적으로 무겁고 인쇄 시 어두운 얼룩으로 나타날 수 있습니다.

##### 하세요

링 섀도우 `0 0 0 1pt` 또는 위스퍼 `rgba 0.05`, 아니면 단순히 밝고 어두운 섹션을 교차시키세요.

10 · Background

## 디자인 기원

저는 미국 주식에 투자하며 항상 Claude에게 리서치 리포트를 작성해 달라고 합니다. 매번 출력물은 같은 기본 문서 모양이었습니다: 회색이고, 평면적이며, 세션마다 레이아웃이 달랐습니다. 구조를 파악하기 어렵고, 서식은 구식이었으며, 페이지의 어떤 것도 계속 읽고 싶게 만들지 못했습니다. 그래서 타이포그래피, 팔레트, 간격을 하나의 규칙씩 고쳐나가기 시작했고, 결국 리포트는 제가 실제로 즐길 수 있는 페이지가 되었습니다.

나중에 "당신이 모르는 에이전트: 원칙, 아키텍처, 엔지니어링 실무"를 발표해야 했습니다. 이미 문서가 있었고 슬라이드를 처음부터 만들고 싶지 않아서, Claude Design으로 제 스타일에 맞게 레이아웃을 잡고 여러 차례 수정하여 만족스러운 수준에 도달했습니다. 그 과정에서 인라인 SVG 차트, 통일된 웜 팔레트, 더 타이트한 에디토리얼 리듬이 추가되었습니다. 정기적으로 작성하는 모든 문서를 커버할 때까지 계속 성장했고, 추상화 과정을 거쳐 kami가 되었습니다: 어떤 에이전트에게든 넘겨주고 출력물을 신뢰할 수 있는, 하나의 조용한 디자인 시스템입니다.

11 · Questions

## FAQ

Kami란 무엇인가요?
  AI 생성 문서를 위한 제약 기반 디자인 시스템입니다. 하나의 강조색, 세리프 주도 계층 구조, 따뜻한 양피지 캔버스. LLM 에이전트에게 브리프를 전달하면 정돈된 레이아웃을 돌려받습니다. Claude Design이나 GPT Canvas 같은 이미지 렌더러에 전달할 수 있는 비주얼 브리프로도 활용됩니다.
무엇을 만들 수 있나요?
  9가지 템플릿 유형: 원페이저, 긴 문서, 레터, 포트폴리오, 이력서, 슬라이드, 주식 리포트, 변경 로그, 랜딩 페이지(영문 + 중문 + 한국어). 비주얼 설명을 위한 14가지 인라인 SVG 다이어그램 유형 포함. HTML 출력물을 PDF, PNG 또는 편집 가능한 PPTX 슬라이드 덱으로 내보낼 수 있습니다.
어떻게 설정하나요?
  Claude Code: `npx skills add tw93/kami -a claude-code -g -y`. Claude Code v2.1.142+에서는 플러그인 마켓플레이스도 사용할 수 있습니다: `/plugin marketplace add tw93/kami` 실행 후 `/plugin install kami@kami`. Codex: `codex plugin marketplace add tw93/kami` 실행 후 `codex plugin add kami@kami`. OpenCode 같은 범용 에이전트: `npx skills add tw93/kami -a '*' -g -y`. Claude Desktop: GitHub Releases에서 kami.zip을 다운로드하여 Customize > Skills에서 업로드하세요. 슬래시 명령어가 필요 없으며, 자연어 요청으로 스킬이 자동 실행됩니다.
어떤 언어를 지원하나요?
  영어, 중국어, 일본어, 한국어를 지원합니다. 각 언어별 전용 세리프 폰트를 사용합니다: 영어는 Charter, 중국어는 TsangerJinKai02, 일본어는 YuMincho, 한국어는 Source Han Serif K. 자간, 행간, 폰트 크기는 인쇄 품질을 위해 언어별로 튜닝됩니다. 일본어와 한국어는 배포 전 비주얼 QA를 포함하는 최선의 CJK 경로입니다.