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

Kami Editorial Paper Kit

@dante · Editorial

Warm paper, ink-blue editorial system for docs, course pages, white papers, portfolios, and presentation support surfaces, adapted from Open Design kami.

HTML/CSS
React
shadcn/ui
Tailwind
#editorial
#publishing
#serif
#typography
Kami Editorial Paper Kit
다운로드4
패키지 JSON 다운로드
DESIGN.mdSKILL.md

개요

Principles

  • Use warm parchment as the page canvas; avoid pure white and cool gray surfaces.
  • Let serif typography carry hierarchy; keep weights restrained and line-height print-like.
  • Use ink-blue as the only strong accent and keep it below roughly 5 percent of the surface.
  • Prefer hairline rules, table structure, notes, citations, and annotations over decorative cards.
  • Components must support document states: draft, reviewed, cited, exported, and archived.

프리뷰

새 창으로 열기 ↗

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

색상 (25)

background
#F5F4ED
foreground
#141413
card
#FAF9F5
cardForeground
#141413
popover
#FAF9F5
popoverForeground
#141413
primary
#1B365D
primaryForeground
#FFFFFF
secondary
#E8E6DC
secondaryForeground
#3D3D3A
muted
#E8E6DC
mutedForeground
#6B6A64
accent
#2D5A8A
accentForeground
#FFFFFF
destructive
#B42318
destructiveForeground
#FFFFFF
border
#E8E6DC
input
#E5E3D8
ring
#1B365D
success
#2F6B4F
warning
#9B6829
info
#1B365D
badgeBg
#E4ECF5
badgeText
#1B365D
alertBg
#FAF9F5

타이포그래피 (7)

display
Charter, Georgia, Palatino, "Times New Roman", 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
Charter, Georgia, Palatino, "Times New Roman", 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
body
Charter, Georgia, Palatino, "Times New Roman", 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
label
Charter, Georgia, Palatino, "Times New Roman", 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
caption
Charter, Georgia, Palatino, "Times New Roman", 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
JetBrains Mono, SF Mono, Fira Code, Consolas, 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
scale
unparsed
{
  "h1": "40px/1.12",
  "h2": "28px/1.2",
  "h3": "20px/1.3",
  "body": "16px/1.55",
  "caption": "12px/1.45"
}

컴포넌트 (15)

Button

Editorial paper component for clear command actions.

shadcn
shadcn/ui + Tailwind CSS
2 props · 6 states · 18 tags · 5 소스

Input

Editorial paper component for single-line fields.

shadcn
shadcn/ui + Tailwind CSS
2 props · 5 states · 16 tags · 4 소스

Textarea

Editorial paper component for long-form input.

shadcn
shadcn/ui + Tailwind CSS
1 props · 5 states · 13 tags · 4 소스

Select

Editorial paper component for bounded choices.

shadcn
Radix Select + Tailwind CSS
1 props · 6 states · 13 tags · 4 소스

Checkbox

Editorial paper component for independent options.

shadcn
Radix Checkbox + Tailwind CSS
1 props · 7 states · 11 tags · 4 소스

RadioGroup

Editorial paper component for exclusive choices.

shadcn
Radix Radio Group + Tailwind CSS
1 props · 6 states · 9 tags · 4 소스

Switch

Editorial paper component for immediate preferences.

shadcn
Radix Switch + Tailwind CSS
1 props · 5 states · 10 tags · 4 소스
누락 상태: error

Card

Editorial paper component for repeated content groups.

shadcn
shadcn/ui + Tailwind CSS
1 props · 6 states · 14 tags · 4 소스

Dialog

Editorial paper component for focused blocking decisions.

shadcn
Radix Dialog + Tailwind CSS
1 props · 4 states · 13 tags · 4 소스
누락 상태: default, hover, focus-visible, disabled

DropdownMenu

Editorial paper component for secondary contextual actions.

shadcn
Radix Dropdown Menu + Tailwind CSS
1 props · 5 states · 13 tags · 4 소스
누락 상태: default

Tabs

Editorial paper component for peer views in one context.

shadcn
Radix Tabs + Tailwind CSS
1 props · 5 states · 11 tags · 4 소스

Table

Editorial paper component for structured records.

shadcn
HTML table + Tailwind CSS
1 props · 7 states · 14 tags · 4 소스
누락 상태: disabled

Badge

Editorial paper component for compact metadata.

shadcn
shadcn/ui + Tailwind CSS
1 props · 4 states · 18 tags · 4 소스

Alert

Editorial paper component for inline status and validation.

shadcn
shadcn/ui + Tailwind CSS
1 props · 3 states · 13 tags · 4 소스
누락 상태: hover, disabled

Toast

Editorial paper component for non-blocking feedback.

shadcn
Sonner or shadcn Toast + Tailwind CSS
1 props · 3 states · 12 tags · 4 소스
누락 상태: default, hover, focus-visible, disabled

DESIGN.md

Principles

  • Use warm parchment as the page canvas; avoid pure white and cool gray surfaces.
  • Let serif typography carry hierarchy; keep weights restrained and line-height print-like.
  • Use ink-blue as the only strong accent and keep it below roughly 5 percent of the surface.
  • Prefer hairline rules, table structure, notes, citations, and annotations over decorative cards.
  • Components must support document states: draft, reviewed, cited, exported, and archived.

어댑터 (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

버전