Kami란 무엇인가요?

Kami는 하나의 강조색, 세리프 중심 위계, 따뜻한 양피지 캔버스로 AI 생성 문서에 일관된 편집 언어를 부여하고 Claude Design이나 GPT Canvas 같은 이미지 렌더러용 비주얼 브리프로도 쓸 수 있는 디자인 시스템입니다.

Kami로 무엇을 만들 수 있나요?

Kami는 8가지 문서 템플릿, 다국어 랜딩 페이지 시스템, 18가지 인라인 SVG 다이어그램을 제공하며 문서는 PDF나 PNG로 내보낼 수 있고 슬라이드는 편집 가능한 PPTX도 지원합니다.

브랜드 스타일에 맞출 수 있나요?

네, 브랜드 색상, 글꼴, 레이아웃 선호를 에이전트에게 알려 주거나 브랜드 설정을 제공하면 명시한 요청이 항상 Kami 기본값보다 우선합니다.

Kami는 어떤 언어를 지원하나요?

영어, 중국어, 일본어, 한국어를 지원하며 각각 Charter, TsangerJinKai02, YuMincho, Source Han Serif K를 사용해 자간, 행간, 글꼴 크기를 조정하고 일본어와 한국어는 best-effort CJK 경로로 지원해 배포 전 비주얼 QA를 거칩니다.

Design System · v1.14.0 · 2026.08

Kami紙

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

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

00 · See it

출력 샘플

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

Equity Report

Tesla 2026년 1분기 실적 분석

Resume

개발자 이력서, 2페이지

One-Pager

Kami 소개, 흰 종이 인쇄, 1페이지

Slides

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

Landing Pages

Kami로 제작

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

Kami

디자인 시스템 홈페이지

Luo

CJK 읽기용 폰트, 중국어

Mole

macOS 시스템 유틸리티

01 · Usage

설치 및 사용

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

# Claude Code, Codex, Cursor 및 기타 에이전트
npx skills add tw93/kami -a claude-code codex cursor -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

# Claude Desktop
kami.zip을 내려받아 Customize > Skills > "+" > Create skill에서 업로드

02 · Manifesto

디자인 원칙

따뜻한 양피지 캔버스, 잉크 블루를 유일한 강조색으로, 세리프가 계층 구조를 담당하며, 하드 섀도우와 화려한 팔레트는 배제합니다. 이 시스템은 인쇄물을 위해 만들어졌습니다: 안정적이고, 명확하며, 절제되어 있습니다. 양피지가 기본이며, 선택형 흰 종이 변형을 사용하면 가정용이나 사무용 프린터를 위해 어떤 문서든 흰 배경으로 인쇄하면서도 카드와 표에 따뜻함을 남깁니다.

1
페이지 배경은 양피지 #f5f4ed, 순백은 절대 사용하지 않음
2
강조색은 잉크 블루 #1B365D 하나만; 두 번째 유채색 없음
3
모든 회색은 따뜻한 색조, 황갈색 기반; 차가운 청회색 사용 금지
4
제목과 본문은 하나의 세리프로 통일하고, 실제 UI 요소에만 별도 산세리프 사용
5
세리프 본문은 400, 제목은 500. 합성 볼드 사용 금지
6
세 가지 행간 밴드: 타이트 제목 1.1-1.3 / 밀집 1.4-1.45 / 읽기 1.5-1.55
7
태그 배경은 반드시 솔리드 hex; rgba 금지, WeasyPrint 이중 사각형 버그
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

태그 배경색

등록된 솔리드 색상은 두 단계만 사용합니다. #EEF2F7은 약한 표현, #E4ECF5는 기본값입니다. 솔리드 hex는 WeasyPrint의 이중 사각형 문제도 막습니다.

RecedeTag sample

Quiet

#EEF2F7

DefaultTag sample

기본

#E4ECF5

04 · Typography

타입 시스템

하나의 세리프가 계층과 본문을 함께 맡고, 모노는 코드와 기술 레이블에만 사용합니다.

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.14.0

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

2 pt

인쇄 태그

4 pt

인쇄 블록

8 px

화면 블록

깊이

표면은 기본적으로 평평합니다. 여백, 하나의 조용한 채움, 꼭 필요한 중성 헤어라인으로 계층을 만듭니다. 아주 옅은 그림자는 실제로 떠 있는 스크린샷이나 팝오버에만 사용합니다.

06 · Components

원자 모듈

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

버튼

채움 + 테두리 · 그림자 없음 · 8px radius

Primary CTA Secondary Ghost

태그, 두 단계

솔리드 hex · 약한 표현 또는 기본

약한 채움 기본 태그

인용

olive 텍스트 + 이탤릭 · 측면 선 없음

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

메트릭

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

8문서 유형

1강조색

8규칙

섹션 제목

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

Selected Works · Projects

일반 목록

간격으로 리듬 형성 · 기호 없음

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

코드 블록

ivory bg + 4pt radius, no border

// 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

조용한 카드

ivory 채움 하나 + 8px radius · 테두리와 그림자 없음

Tesla Company Profile · One-Pager

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

English A4 x 1 Ink Blue

07 · Diagrams

인라인 차트

아키텍처, 프로세스, 데이터 차트 시나리오를 아우르는 18가지 인라인 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)`, 볼드 아님
두 섹션 구분	먼저 여백을 사용하고, 경계가 꼭 명확해야 할 때만 `0.5pt` 중성 전체 너비 헤어라인
인용	olive 텍스트 + 이탤릭 또는 들여쓰기, 측면 선 없음
코드 표시	Ivory bg + `4pt` radius + mono font, no border
기본 vs 보조	기본: brand fill + ivory text; 보조: warm-sand + charcoal
특별 카드 표시	더 명확한 레이블이나 하나의 조용한 채움을 사용하고 강조 테두리는 추가하지 않음
섹션 시작	Serif `500` · `15pt` · 크기 주도 계층, 장식 불필요
문서 표지	단일 페이지, Display 크기 + 우측 정렬 저자/날짜 + 넉넉한 여백
핵심 수치 표시	베이스라인 한 줄, 투명 배경, 컨테이너 없음 + serif 큰 숫자 + sans 작은 레이블

09 · Anti-Patterns

피해야 할 것

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

페이지 배경

지양#ffffff 순백이나 #f3f4f6 쿨 그레이 배경. 페이지가 딱딱해지고 따뜻한 양피지 특성이 약해집니다.

권장항상 #f5f4ed 양피지. 인쇄 시 흰 테두리를 막기 위해 @page background도 같은 색으로 설정합니다.

태그 색상

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

권장등록된 기본 태그 색상 #E4ECF5. 렌더링이 깔끔하게 유지되고 색상이 안정적입니다.

합성 볼드

지양font-weight: 600 이상의 합성 볼드 제목. 획이 흐려지고 타이포그래피 품질이 떨어집니다.

권장본문 400, 제목 500 (실제 W05). 더 강한 존재감이 필요하면 크기, 여백, 잉크 블루 텍스트를 사용합니다.

섀도우

지양하드 드롭 섀도우 0 2px 8px rgba(0,0,0,0.3). 시각적으로 무겁고 인쇄 시 어두운 얼룩으로 나타납니다.

권장표면은 기본적으로 평평하게 두고 여백, 조용한 채움, 중성 헤어라인으로 계층을 만듭니다. 아주 옅은 그림자는 실제로 떠 있는 UI와 스크린샷에만 사용합니다.

10 · Background

디자인 기원

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

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

11 · Questions

FAQ

Kami란 무엇인가요?: Kami는 하나의 강조색, 세리프 중심 위계, 따뜻한 양피지 캔버스로 AI 생성 문서에 일관된 편집 언어를 부여하고 Claude Design이나 GPT Canvas 같은 이미지 렌더러용 비주얼 브리프로도 쓸 수 있는 디자인 시스템입니다.
무엇을 만들 수 있나요?: Kami는 8가지 문서 템플릿, 다국어 랜딩 페이지 시스템, 18가지 인라인 SVG 다이어그램을 제공하며 문서는 PDF나 PNG로 내보낼 수 있고 슬라이드는 편집 가능한 PPTX도 지원합니다.
브랜드 스타일에 맞출 수 있나요?: 네, 브랜드 색상, 글꼴, 레이아웃 선호를 에이전트에게 알려 주거나 브랜드 설정을 제공하면 명시한 요청이 항상 Kami 기본값보다 우선합니다.
어떤 언어를 지원하나요?: 영어, 중국어, 일본어, 한국어를 지원하며 각각 Charter, TsangerJinKai02, YuMincho, Source Han Serif K를 사용해 자간, 행간, 글꼴 크기를 조정하고 일본어와 한국어는 best-effort CJK 경로로 지원해 배포 전 비주얼 QA를 거칩니다.