CIE のサイトと同じ色・文字・動きを、どのプロジェクトでもすぐ使えるようにした道具箱です。いちばん簡単な使い方は、下の文章をコピーして AI に貼るだけ。
The colours, type and motion of creativityiseverywhere.com, packaged so any project can use them. The fastest way in: copy the text below and paste it into your AI.
このプロジェクトのデザインを cie-ds（https://cie-ds.vercel.app）に合わせてください。
1. 最初に https://cie-ds.vercel.app/DESIGN.md を読み、色・文字・動きのルールを理解してください。
2. プロジェクトの種類で導入方法を選んでください。
A) React / Next.js など（shadcn/ui を使う）
- shadcn が未導入なら先に: npx shadcn@latest init
- 全部まとめて入れる: npx shadcn@latest add https://cie-ds.vercel.app/r/cie-all.json
（個別に入れるなら、先に https://cie-ds.vercel.app/r/cie-theme.json を入れてから必要な部品だけ）
- 部品の一覧: https://cie-ds.vercel.app/r/registry.json ／ 見本: https://cie-ds.vercel.app/registry/
- <html class="dark"> を付ける（CIE の黒地）。Google Fonts の Outfit（100–900）と DM Mono（400）を読み込む。
B) ふつうの HTML / 小さなツール
- <head> に次を貼る:
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@400&family=Outfit:wght@100..900&display=swap">
<link rel="stylesheet" href="https://cie-ds.vercel.app/tokens.css">
<link rel="stylesheet" href="https://cie-ds.vercel.app/base.css">
<link rel="stylesheet" href="https://cie-ds.vercel.app/motion.css">
<link rel="stylesheet" href="https://cie-ds.vercel.app/scroll.css">
<link rel="stylesheet" href="https://cie-ds.vercel.app/interactions.css">
<script src="https://cie-ds.vercel.app/interaction.js" defer></script>
- 使い方: https://cie-ds.vercel.app/guide.md ／ 見本: https://cie-ds.vercel.app/demo
3. 守るルール
- 色は ink #0b0b0b と paper #f3f2ee の2色（同じ色の透明度違いはOK）。
- 色を直接書かない（#000、bg-slate-900 などは禁止）。var(--background)、var(--foreground)、--cie-* などのトークンを使う。
- 影は使わない。文字は Outfit と DM Mono（日本語は Zen Kaku Gothic New）。
- 動きは速く気持ちよく（280–420ms、--cie-ease-expo）。prefers-reduced-motion を必ず尊重する。
- アニメーションは motion（framer-motion）か cie-ds の CSS だけを使い、他のアニメーションライブラリは足さない。
Style this project with cie-ds (https://cie-ds.vercel.app).
1. First read https://cie-ds.vercel.app/DESIGN.md and follow its colour, type and motion rules.
2. Pick the setup that matches the project.
A) React / Next.js etc. (shadcn/ui)
- If shadcn isn't set up yet: npx shadcn@latest init
- Everything at once: npx shadcn@latest add https://cie-ds.vercel.app/r/cie-all.json
(or install https://cie-ds.vercel.app/r/cie-theme.json first, then only the components you need)
- Component list: https://cie-ds.vercel.app/r/registry.json · live examples: https://cie-ds.vercel.app/registry/
- Put class="dark" on <html> (the CIE ink ground). Load Google Fonts Outfit (100–900) and DM Mono (400).
B) Plain HTML / small tools
- Paste into <head>:
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@400&family=Outfit:wght@100..900&display=swap">
<link rel="stylesheet" href="https://cie-ds.vercel.app/tokens.css">
<link rel="stylesheet" href="https://cie-ds.vercel.app/base.css">
<link rel="stylesheet" href="https://cie-ds.vercel.app/motion.css">
<link rel="stylesheet" href="https://cie-ds.vercel.app/scroll.css">
<link rel="stylesheet" href="https://cie-ds.vercel.app/interactions.css">
<script src="https://cie-ds.vercel.app/interaction.js" defer></script>
- How to use: https://cie-ds.vercel.app/guide.md · examples: https://cie-ds.vercel.app/demo
3. Rules
- Two colours: ink #0b0b0b and paper #f3f2ee (alpha of the same ink is fine).
- Never hard-code colours (#000, bg-slate-900…). Use tokens: var(--background), var(--foreground), --cie-*.
- No drop shadows. Type is Outfit + DM Mono (Japanese: Zen Kaku Gothic New).
- Motion is fast and snappy (280–420ms, --cie-ease-expo) and always honours prefers-reduced-motion.
- Animate only with motion (framer-motion) or the cie-ds CSS — don't add other animation libraries.
どちらも同じ設定ファイル（tokens.json）から作られているので、色・文字・動きは完全に揃います。例えるなら、① は「スタイルシートを読み込むだけの軽い版」、② は「部品をプロジェクトにコピーして組み立てる版」です。迷ったら上の文章を AI に渡せば、AI がプロジェクトを見て選びます。
Both are generated from the same file (tokens.json), so colours, type and motion always match. Think of ① as "just link a stylesheet — the light version" and ② as "copy real components into your project and build with them". Unsure? Hand the prompt above to your AI and it will pick from your project.
ふつうの HTML サイトや小さなツール向け。<link> を数行貼るだけで、色・文字・ボタンの動き・スクロール演出・効果音などが使えます。ビルド不要。
For plain HTML pages and small tools. Paste a few <link> tags and you get colours, type, button motion, scroll reveals, UI sound and more. No build step.
<link rel="stylesheet" href="https://cie-ds.vercel.app/tokens.css">見本を見る →See the demo →
React / Next.js で本格的なサイトを作るとき向け。コマンド1行で、ボタン・ダイアログから WebGL の背景・スクロール演出まで、cie 仕様の部品がプロジェクトにコピーされます。自由に書き換えOK。
For React / Next.js sites. One command copies cie-styled components into your project — from buttons and dialogs to WebGL backgrounds and scroll effects. The code is yours to edit.
npx shadcn@latest add https://cie-ds.vercel.app/r/cie-all.json部品を動かして見る →Play with the components →
クリックすると、それぞれの見本に飛びます。
Click any item to jump to its live example.
読み込み中…
Loading…
20個の部品を実際に動かせます。それぞれのインストール用コマンド付き。
All 20 components, live, each with its install command.
HTML + CSS色・文字・動き・スクロール・効果音など、全パターン。
Every pattern: tokens, motion, expand, sheets, scroll, sound.
Scroll-linked長いスクロールで黒 → グレー → 白へ。
A long scroll from ink → grey → paper.
Editorial mode紙の地・細い罫線・ゆったりした間で、読むためのページを組むモード。
Paper ground, hairlines and generous rhythm for reading pages.
Documentation読み込み方・クラス名・API の詳細（英語）。
Includes, class names, attribute hooks, JS API.
Reference · for AIAI が読むためのルール集。色・動きの数値、やっていいこと・ダメなこと。
The agent-readable rules: values, motion, do / don't.
Repositoryソースコード。閲覧OK、再配布・商用利用は不可。
Source. View OK; no redistribution or commercial reuse.