Design system

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

Downloads4

Download package

DESIGN.md SKILL.md

Overview

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.

Preview

Open in new tab ↗

Derived view rendered server-side from package tokens and components — no authored copy.

Colors (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

Typography (7)

display

Charter, Georgia, Palatino, "Times New Roman", serif

48pxThe quick brown fox jumps over the lazy dog 1234
32pxThe quick brown fox jumps over the lazy dog 1234
24pxThe quick brown fox jumps over the lazy dog 1234
18pxThe quick brown fox jumps over the lazy dog 1234
14pxThe quick brown fox jumps over the lazy dog 1234
12pxThe quick brown fox jumps over the lazy dog 1234

heading

Charter, Georgia, Palatino, "Times New Roman", serif

48pxThe quick brown fox jumps over the lazy dog 1234
32pxThe quick brown fox jumps over the lazy dog 1234
24pxThe quick brown fox jumps over the lazy dog 1234
18pxThe quick brown fox jumps over the lazy dog 1234
14pxThe quick brown fox jumps over the lazy dog 1234
12pxThe quick brown fox jumps over the lazy dog 1234

body

Charter, Georgia, Palatino, "Times New Roman", serif

48pxThe quick brown fox jumps over the lazy dog 1234
32pxThe quick brown fox jumps over the lazy dog 1234
24pxThe quick brown fox jumps over the lazy dog 1234
18pxThe quick brown fox jumps over the lazy dog 1234
14pxThe quick brown fox jumps over the lazy dog 1234
12pxThe quick brown fox jumps over the lazy dog 1234

label

Charter, Georgia, Palatino, "Times New Roman", serif

48pxThe quick brown fox jumps over the lazy dog 1234
32pxThe quick brown fox jumps over the lazy dog 1234
24pxThe quick brown fox jumps over the lazy dog 1234
18pxThe quick brown fox jumps over the lazy dog 1234
14pxThe quick brown fox jumps over the lazy dog 1234
12pxThe quick brown fox jumps over the lazy dog 1234

caption

Charter, Georgia, Palatino, "Times New Roman", serif

48pxThe quick brown fox jumps over the lazy dog 1234
32pxThe quick brown fox jumps over the lazy dog 1234
24pxThe quick brown fox jumps over the lazy dog 1234
18pxThe quick brown fox jumps over the lazy dog 1234
14pxThe quick brown fox jumps over the lazy dog 1234
12pxThe quick brown fox jumps over the lazy dog 1234

mono

JetBrains Mono, SF Mono, Fira Code, Consolas, monospace

48pxThe quick brown fox jumps over the lazy dog 1234
32pxThe quick brown fox jumps over the lazy dog 1234
24pxThe quick brown fox jumps over the lazy dog 1234
18pxThe quick brown fox jumps over the lazy dog 1234
14pxThe quick brown fox jumps over the lazy dog 1234
12pxThe quick brown fox jumps over the lazy dog 1234

scale

unparsed

{
  "h1": "40px/1.12",
  "h2": "28px/1.2",
  "h3": "20px/1.3",
  "body": "16px/1.55",
  "caption": "12px/1.45"
}

Components (15)

Button

Editorial paper component for clear command actions.

shadcn

shadcn/ui + Tailwind CSS

2 props · 6 states · 18 tags · 5 sources

Input

Editorial paper component for single-line fields.

shadcn

shadcn/ui + Tailwind CSS

2 props · 5 states · 16 tags · 4 sources

Textarea

Editorial paper component for long-form input.

shadcn

shadcn/ui + Tailwind CSS

1 props · 5 states · 13 tags · 4 sources

Select

Editorial paper component for bounded choices.

shadcn

Radix Select + Tailwind CSS

1 props · 6 states · 13 tags · 4 sources

Checkbox

Editorial paper component for independent options.

shadcn

Radix Checkbox + Tailwind CSS

1 props · 7 states · 11 tags · 4 sources

RadioGroup

Editorial paper component for exclusive choices.

shadcn

Radix Radio Group + Tailwind CSS

1 props · 6 states · 9 tags · 4 sources

Switch

Editorial paper component for immediate preferences.

shadcn

Radix Switch + Tailwind CSS

1 props · 5 states · 10 tags · 4 sources

Missing states: error

Card

Editorial paper component for repeated content groups.

shadcn

shadcn/ui + Tailwind CSS

1 props · 6 states · 14 tags · 4 sources

Dialog

Editorial paper component for focused blocking decisions.

shadcn

Radix Dialog + Tailwind CSS

1 props · 4 states · 13 tags · 4 sources

Missing states: 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 sources

Missing states: default

Tabs

Editorial paper component for peer views in one context.

shadcn

Radix Tabs + Tailwind CSS

1 props · 5 states · 11 tags · 4 sources

Table

Editorial paper component for structured records.

shadcn

HTML table + Tailwind CSS

1 props · 7 states · 14 tags · 4 sources

Missing states: disabled

Badge

Editorial paper component for compact metadata.

shadcn

shadcn/ui + Tailwind CSS

1 props · 4 states · 18 tags · 4 sources

Alert

Editorial paper component for inline status and validation.

shadcn

shadcn/ui + Tailwind CSS

1 props · 3 states · 13 tags · 4 sources

Missing states: hover, disabled

Toast

Editorial paper component for non-blocking feedback.

shadcn

Sonner or shadcn Toast + Tailwind CSS

1 props · 3 states · 12 tags · 4 sources

Missing states: 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.

Adapters (6)

adapters/tokens.css
text/css
Download
adapters/shadcn-registry.json
application/json
Download
adapters/tailwind.config.js
text/javascript
Download
adapters/react/index.ts
text/typescript
Download
adapters/html/index.html
text/html
Download
adapters/html/styles.css
text/css
Download

All files (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

Versions

v1.0.05/8/2026
Download