mirror of
https://github.com/nexu-io/open-design.git
synced 2026-06-01 03:14:35 +07:00
56aa985b1a
* 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). |
||
|---|---|---|
| .. | ||
| agentic | ||
| airbnb | ||
| airtable | ||
| ant | ||
| apple | ||
| application | ||
| artistic | ||
| bento | ||
| binance | ||
| bmw | ||
| bold | ||
| brutalism | ||
| bugatti | ||
| cafe | ||
| cal | ||
| claude | ||
| clay | ||
| claymorphism | ||
| clean | ||
| clickhouse | ||
| cohere | ||
| coinbase | ||
| colorful | ||
| composio | ||
| contemporary | ||
| corporate | ||
| cosmic | ||
| creative | ||
| cursor | ||
| dashboard | ||
| default | ||
| dithered | ||
| doodle | ||
| dramatic | ||
| editorial | ||
| elegant | ||
| elevenlabs | ||
| energetic | ||
| enterprise | ||
| expo | ||
| expressive | ||
| fantasy | ||
| ferrari | ||
| figma | ||
| flat | ||
| framer | ||
| friendly | ||
| futuristic | ||
| glassmorphism | ||
| gradient | ||
| hashicorp | ||
| ibm | ||
| intercom | ||
| kami | ||
| kraken | ||
| lamborghini | ||
| levels | ||
| linear-app | ||
| lingo | ||
| lovable | ||
| luxury | ||
| mastercard | ||
| material | ||
| meta | ||
| minimal | ||
| minimax | ||
| mintlify | ||
| miro | ||
| mistral-ai | ||
| modern | ||
| mongodb | ||
| mono | ||
| neobrutalism | ||
| neon | ||
| neumorphism | ||
| nike | ||
| notion | ||
| nvidia | ||
| ollama | ||
| opencode-ai | ||
| pacman | ||
| paper | ||
| perspective | ||
| playstation | ||
| posthog | ||
| premium | ||
| professional | ||
| publication | ||
| raycast | ||
| refined | ||
| renault | ||
| replicate | ||
| resend | ||
| retro | ||
| revolut | ||
| runwayml | ||
| sanity | ||
| sentry | ||
| shadcn | ||
| shopify | ||
| simple | ||
| skeumorphism | ||
| sleek | ||
| spacex | ||
| spacious | ||
| spotify | ||
| starbucks | ||
| storytelling | ||
| stripe | ||
| supabase | ||
| superhuman | ||
| tesla | ||
| tetris | ||
| theverge | ||
| together-ai | ||
| uber | ||
| vercel | ||
| vibrant | ||
| vintage | ||
| vodafone | ||
| voltagent | ||
| warm-editorial | ||
| warp | ||
| webflow | ||
| wired | ||
| wise | ||
| x-ai | ||
| xiaohongshu | ||
| zapier | ||
| README.md | ||
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 fromtw93/kami(MIT). Warm parchment canvas, ink-blue accent, serif at one weight, no italic, no cool grays. Pairs with thetemplates/kami-deck.htmlstarter for slide work.- 57 design skills, sourced from
bergside/awesome-design-skillsand added directly as normalized 9-sectionDESIGN.mdfiles. - 70 product systems, imported from
VoltAgent/awesome-design-md(thegetdesign@latestnpm 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.