mirror of https://github.com/nexu-io/open-design.git synced 2026-05-31 19:04:39 +07:00

feat(design-systems): integrate kami as editorial paper system + deck starter (#226 )

* feat(design-systems): integrate kami as editorial paper system + deck starter

- Add design-systems/kami/DESIGN.md adapting kami's tokens, ten invariants,
  and type/color/component rules into the OD DESIGN.md spec. Lands under a
  new "Editorial & Print" category in the picker.
- Add templates/kami-deck.html: a kami-flavored variant of deck-framework.html
  (parchment canvas, ink-blue accent, single-weight serif) with five demo
  slides — cover, agenda, metric row, two-column body+pull-quote, closing —
  so it doubles as a worked example for slide and prototype work.
- Update design-systems/README.md and README.md to list and credit kami
  (MIT, tw93/kami).
- Update apps/web/src/i18n/content.ts so the i18n coverage test passes:
  add the German summary for 'kami' and the 'Editorial & Print' category.

* docs(design-systems/kami): address PR #226 review notes

Five P3 polish edits from @lefarcen's review (LGTM, non-blocking):

1. Add a "When to swap the stack" subsection in §3 spelling out how the
   three CJK font stacks combine: set the dominant-language stack on
   :root, scope per-section overrides for mixed-language artifacts,
   never chain all three families inside one font-family declaration.

2. Reframe the brand as "kami / 紙 / 纸" so the system reads as
   co-designed across EN, zh-CN, and ja from the start, not Japan-centric
   with i18n bolted on. Title and §1 lede updated.

3. Reconcile the pt → px ratios into one table at the top of §3
   "Hierarchy": print pt × ~1.33 for page artifacts, × 1.6 for slide
   macro tokens, × 0.6 for slide micro tokens. Drop the duplicate
   ratio bullets from §5 "Slides".

4. Keep the soft tag-brush gradient exception but make it real: add
   the .tag.brush CSS + an inline <span class="tag brush"> example
   in §4, and surface it once on slide 04 of the kami deck so agents
   see exactly when the carve-out applies.

5. Add a "Tabular-nums contexts" subsection in §3 enumerating every
   place numbers should opt into tabular-nums (metrics, footers,
   section numbers, dates, financial tables, KPI grids, version
   numbers, side-by-side comparisons) — and the rule for when not to
   (single numbers in running prose).

2026-05-02 11:00:56 +08:00

4 KiB

Raw Blame History

Design Systems

Each subfolder is a portable design system in DESIGN.md format. Pick one in the top-bar Design system dropdown and every skill will read it as part of its system prompt.

What's bundled

default/ — Neutral Modern. Hand-authored starter for the OD spec.
warm-editorial/ — Warm Editorial. Hand-authored serif starter.
kami/ — 紙 / 纸. Editorial paper system distilled from tw93/kami (MIT). Warm parchment canvas, ink-blue accent, serif at one weight, no italic, no cool grays. Pairs with the templates/kami-deck.html starter for slide work.
57 design skills, sourced from bergside/awesome-design-skills and added directly as normalized 9-section DESIGN.md files.

70 product systems, imported from VoltAgent/awesome-design-md (the getdesign@latest npm package, MIT-licensed). One folder per brand:

Category	Systems
AI & LLM	claude · cohere · elevenlabs · minimax · mistral-ai · ollama · opencode-ai · replicate · runwayml · together-ai · voltagent · x-ai
Developer Tools	cursor · expo · lovable · raycast · superhuman · vercel · warp
Productivity & SaaS	cal · intercom · linear-app · mintlify · notion · resend · zapier
Backend & Data	clickhouse · composio · hashicorp · mongodb · posthog · sanity · sentry · supabase
Design & Creative	airtable · clay · figma · framer · miro · webflow
Fintech & Crypto	binance · coinbase · kraken · mastercard · revolut · stripe · wise
E-Commerce & Retail	airbnb · meta · nike · shopify · starbucks
Media & Consumer	apple · ibm · nvidia · pinterest · playstation · spacex · spotify · theverge · uber · vodafone · wired · xiaohongshu
Automotive	bmw · bugatti · ferrari · lamborghini · renault · tesla

Folders use ASCII slugs — dotted brands are normalized (linear.app → linear-app, x.ai → x-ai, etc.).

File shape

The first H1 is the title shown in the picker. The line immediately after the H1 is parsed for > Category: <name> and used to group the dropdown:

# Design System Inspired by Cohere

> Category: AI & LLM
> Enterprise AI platform. Vibrant gradients, data-rich dashboard aesthetic.

## 1. Visual Theme & Atmosphere
...

Both the boilerplate prefix Design System Inspired by and the > Category: ... line are stripped from the dropdown label and the summary preview at runtime — they're only metadata.

Adding your own

Drop a new folder containing a DESIGN.md and it shows up on next refresh. Add a > Category: <Group> line to slot it under an existing group, or use any new label and it lands at the bottom of the dropdown.

Refreshing the bundled set

The 70 product systems are pulled from the upstream npm package. To re-sync to the latest hashes:

curl -sL $(npm view getdesign dist.tarball) -o /tmp/getdesign.tgz
tar -xzf /tmp/getdesign.tgz -C /tmp
node --experimental-strip-types scripts/sync-design-systems.ts

For now, the original importer lives at the top of the excessive-climb branch — re-run it against a fresh tarball.

Attribution

The 70 product systems are sourced from VoltAgent/awesome-design-md (MIT, © VoltAgent contributors). They are aesthetic inspirations — none of them are official assets of the brands they reference.

The kami/ system adapts tokens, type rules, and the "ten invariants" from tw93/kami (MIT, © Tw93 and contributors), a Claude skill for typesetting professional documents and slide decks.

The 57 design skills are sourced from bergside/awesome-design-skills.

4 KiB Raw Blame History