④段整套同步（六节 ＋ P/S/F/J ＋ 模板）＋ open-design 移到技能根

一、④段整套同步（用户选候选 A）
- 新增 `references/stage-proto-doc/assets/产品文档模板.html`（16 KB／247 行，从备份拷、转 LF）。
- ④段 SKILL.md 换成备份 15:28 那版，并按模板口径改齐：
  · 「产品文档框架」从「四块＋一附录」改成**六节** —— 页面结构／功能清单／使用场景／操作流程／
    跨页与界面状态／待确认与偏离；与模板同构，⛔ 不从空白页重写结构。
  · 编号从 R/S/F 改成 **P 页面／S 场景／F 功能／J 二级功能**，各自唯一、按展示顺序通排。
  · 保留旧版有价值的要求：每项功能补齐 做什么／入口在哪／输入边界／异常与恢复；重点功能三处标红；
    横向流程图每步写清页面／功能／操作／完成判据。
  · 完成标准「七节」→「六节」，自查清单同步换掉「需求」那批条目，补模板与配图两条。
  · 路径 `designs/<项目>/` → `docs/pm/<项目>/ui/`（2 处）。
  · 补回本机那条「每份产出文档开头都要有一张图」的引用（指向主 skill，段内不复述）。
- 主 skill 同步：四段结构表④行、④段沿革、画图小节（④段画页面结构图 ＋ 用户路径）。

二、open-design 移到技能根（用户选候选 A）
- `git mv product-planning/references/stage-delivery/assets/open-design → open-design/`（4178 文件）。
- `.gitignore` 白名单加 `!/open-design/` —— 否则移出去就不再纳入版本控制。
- 引用改 11 处：路径形态 `assets/open-design/...` → `<技能根>/open-design/...`；
  「随段携带的自带件」改称「同根技能」；「路径怎么找」那条改成自带件（段内相对路径）与
  同根技能（`<技能根>/<技能名>/`）两类分开写。
- open-design 自己的 ATTRIBUTION.md 两处同步（它现在与 oil-ui-pro 同层）。
- 副作用（有益）：命名闸门读数由 2063 降到 225 —— 此前它把 open-design 里 919 个第三方 md
  当成规则一起扫了；现在只扫本包 23 个 md。已确认④段的 H1 与 4a/4b/4c 子步仍在检查范围内。

三、验收
- check_naming.py --ws E:/ProgramData/AIProject/contentm_agent ＝ 通过 225 / 失败 0 / 提示 27。
- 活文件里 `assets/open-design` 残留 0；工作区 CRLF 文件 0。

open-design/design-systems/figma/DESIGN-ar.md

@@ -0,0 +1,223 @@
+# نظام تصميم مستوحى من Figma
+
+> Category: التصميم والإبداع
+> أداة تصميم تعاونية. ألوان متعددة وزاهية، مرحة وإن احتفظت بطابعها المهني.
+
+## 1. الثيم البصري والأجواء العامة
+
+واجهة Figma هي أداة التصميم التي صمّمت نفسها — درس متقن في الرقي الطباعي، يعتمد على خط متغير مخصص (figmaSans) يتراوح بين الرفيع الحاد (وزن 320) والعريض (وزن 700)، مع توقفات عند قيم وسيطة غير مألوفة (330، 340، 450، 480، 540) لا يستكشفها معظم أنظمة الخطوط. يمنح هذا التحكم الدقيق في الوزن كلَّ عنصر نصي ثقلًا بصريًا محسوبًا بدقة، مما يُنشئ تراتبية عبر فوارق دقيقة لا عبر التقابل الحاد بين "العادي والعريض".
+
+تقدّم الصفحة ثنائية مثيرة للاهتمام: واجهة التطبيق صارمة بالأبيض والأسود (يُكشف حرفيًا عن `#000000` و`#ffffff` فقط كألوان)، بينما تنفجر أقسام الهيرو وعروض المنتج بتدرجات لونية متعددة زاهية — أخضر كهربائي، أصفر ساطع، بنفسجي عميق، وردي حار. هذا الفصل يعني أن نظام التصميم ذاته خالٍ من اللون، إذ تُعامَل مخرجات المنتج الملونة باعتبارها المحتوى الأبطال. صفحة التسويق لـ Figma تشبه جدار معرض أبيض يعرض لوحات فنية ملونة.
+
+ما يميّز Figma فوق الخط المتغير هو هندسة الدوائر والحبوب. تستخدم الأزرار نصف قطر 50px (حبة دواء) أو 50% (دائرة مثالية لأزرار الأيقونات)، مما يمنح إحساسًا عضويًا يشبه لوحة أدوات التصميم. مؤشر التركيز ذو الخطوط المتقطعة (`dashed 2px`) هو خيار تصميمي متعمد يستحضر مقابض التحديد في محرر Figma ذاته — لغة واجهة الموقع تستأنس بلغة واجهة المنتج.
+
+**الخصائص الرئيسية:**
+- خط متغير مخصص (figmaSans) بأوزان غير مألوفة: 320، 330، 340، 450، 480، 540، 700
+- واجهة التطبيق صارمة بالأبيض والأسود تمامًا — اللون موجود فقط في محتوى المنتج
+- figmaMono للتسميات التقنية بالأحرف الكبيرة مع تباعد واسع بين الحروف
+- هندسة أزرار بشكل حبة دواء (50px) ودائرية (50%)
+- خطوط تركيز متقطعة تستحضر مقابض تحديد محرر Figma
+- تدرجات هيرو متعددة الألوان الزاهية (أخضر، أصفر، بنفسجي، وردي)
+- ميزة OpenType `"kern"` مفعّلة عالميًا
+- تباعد سلبي بين الحروف في كل المكان — حتى نص الجسم عند -0.14px إلى -0.26px
+
+## 2. لوحة الألوان وأدوارها
+
+### الألوان الأساسية
+- **الأسود الخالص** (`#000000`): كل النصوص، كل الأزرار الصلبة، كل الحدود. اللون الوحيد للواجهة.
+- **الأبيض الخالص** (`#ffffff`): كل الخلفيات، الأزرار البيضاء، النص على الأسطح الداكنة. النصف الآخر من الثنائية.
+
+*ملاحظة: يستخدم موقع تسويق Figma هذين اللونين فقط لطبقة الواجهة. تظهر جميع الألوان الزاهية حصريًا في لقطات الشاشة المنتجية، وتدرجات الهيرو، والمحتوى المضمّن.*
+
+### الأسطح والخلفيات
+- **الأبيض الخالص** (`#ffffff`): خلفية الصفحة الأساسية وأسطح البطاقات.
+- **الأسود الزجاجي** (`rgba(0, 0, 0, 0.08)`): طبقة داكنة خفية للأزرار الدائرية الثانوية والتأثيرات الزجاجية.
+- **الأبيض الزجاجي** (`rgba(255, 255, 255, 0.16)`): طبقة زجاج مثلجة للأزرار على الأسطح الداكنة أو الملونة.
+
+### نظام التدرجات
+- **تدرج الهيرو**: تدرج متعدد الألوان الزاهية يجمع بين الأخضر الكهربائي والأصفر الساطع والبنفسجي العميق والوردي الحار. هذا التدرج هو البصمة البصرية لقسم الهيرو — يمثّل إمكانات الإبداع التي توفرها الأداة.
+- **تدرجات أقسام المنتج**: قد تستخدم مناطق المنتجات الفردية (التصميم، وضع المطوّر، النماذج الأولية) ثيمات ألوان مميزة في عروضها.
+
+## 3. قواعد الطباعة
+
+### عائلة الخطوط
+- **الأساسية**: `figmaSans`، مع بدائل: `figmaSans Fallback, SF Pro Display, system-ui, helvetica`
+- **أحادية العرض / التسميات**: `figmaMono`، مع بدائل: `figmaMono Fallback, SF Mono, menlo`
+
+### التراتبية
+
+| الدور | الخط | الحجم | الوزن | ارتفاع السطر | تباعد الحروف | ملاحظات |
+|-------|------|-------|-------|--------------|--------------|---------|
+| عرض / هيرو | figmaSans | 86px (5.38rem) | 400 | 1.00 (محكم) | -1.72px | أقصى تأثير، تتبع متطرف |
+| عنوان قسم | figmaSans | 64px (4rem) | 400 | 1.10 (محكم) | -0.96px | عناوين أقسام المميزات |
+| عنوان فرعي | figmaSans | 26px (1.63rem) | 540 | 1.35 | -0.26px | نص قسم مؤكد |
+| عنوان فرعي خفيف | figmaSans | 26px (1.63rem) | 340 | 1.35 | -0.26px | نص قسم خفيف الوزن |
+| عنوان ميزة | figmaSans | 24px (1.5rem) | 700 | 1.45 | normal | عناوين بطاقات عريضة |
+| جسم كبير | figmaSans | 20px (1.25rem) | 330–450 | 1.30–1.40 | -0.1px إلى -0.14px | أوصاف ومقدمات |
+| جسم / زر | figmaSans | 16px (1rem) | 330–400 | 1.40–1.45 | -0.14px إلى normal | جسم قياسي، تنقل، أزرار |
+| جسم خفيف | figmaSans | 18px (1.13rem) | 320 | 1.45 | -0.26px إلى normal | نص جسم خفيف الوزن |
+| تسمية أحادية | figmaMono | 18px (1.13rem) | 400 | 1.30 (محكم) | 0.54px | تسميات أقسام بأحرف كبيرة |
+| أحادية صغيرة | figmaMono | 12px (0.75rem) | 400 | 1.00 (محكم) | 0.6px | علامات صغيرة جدًا بأحرف كبيرة |
+
+### المبادئ
+- **دقة الخط المتغير**: يستخدم figmaSans أوزانًا لا تلامسها معظم الأنظمة — 320، 330، 340، 450، 480، 540. يُنشئ هذا تراتبية عبر فوارق دقيقة في الوزن لا عبر قفزات درامية. الفرق بين 330 و340 يكاد يكون غير محسوس لكنه ذو دلالة هيكلية.
+- **الخفة كأساس**: يستخدم معظم نص الجسم أوزانًا بين 320–340 (أخف من "العادي" 400 المعتاد)، مما يخلق تجربة قراءة أثيرية ومتنفسة تنسجم مع جماليات أداة التصميم.
+- **الكيرنينج في كل مكان**: كل عنصر نصي يُفعّل ميزة OpenType `"kern"` — الكيرنينج ليس اختياريًا، بل هيكلي.
+- **التتبع السلبي بشكل افتراضي**: حتى نص الجسم يستخدم تباعد حروف -0.1px إلى -0.26px، مما يجعل النص محكمًا بشكل عالمي. يزداد ضغط نص العرض إلى -0.96px و-1.72px.
+- **الأحادي للبنية**: figmaMono بأحرف كبيرة مع تباعد موجب (0.54px–0.6px) يُنشئ تسميات إرشادية تقنية.
+
+## 4. تصميمات المكونات
+
+### الأزرار
+
+**أسود صلب (حبة دواء)**
+- الخلفية: أسود خالص (`#000000`)
+- النص: أبيض خالص (`#ffffff`)
+- نصف القطر: دائرة (50%) لأزرار الأيقونات
+- التركيز: خط متقطع بسماكة 2px
+- أقصى تركيز بصري
+
+**أبيض حبة دواء**
+- الخلفية: أبيض خالص (`#ffffff`)
+- النص: أسود خالص (`#000000`)
+- الحشو: 8px 18px 10px (عمودي غير متماثل)
+- نصف القطر: حبة دواء (50px)
+- التركيز: خط متقطع بسماكة 2px
+- دعوة للعمل قياسية على الأسطح الداكنة أو الملونة
+
+**زجاجي داكن**
+- الخلفية: `rgba(0, 0, 0, 0.08)` (طبقة داكنة خفية)
+- النص: أسود خالص
+- نصف القطر: دائرة (50%)
+- التركيز: خط متقطع بسماكة 2px
+- إجراء ثانوي على الأسطح الفاتحة
+
+**زجاجي فاتح**
+- الخلفية: `rgba(255, 255, 255, 0.16)` (زجاج مثلج)
+- النص: أبيض خالص
+- نصف القطر: دائرة (50%)
+- التركيز: خط متقطع بسماكة 2px
+- إجراء ثانوي على الأسطح الداكنة أو الملونة
+
+### البطاقات والحاويات
+- الخلفية: أبيض خالص
+- الحدود: لا حدود أو حد أدنى منها
+- نصف القطر: 6px (حاويات صغيرة)، 8px (صور، بطاقات، حوارات)
+- الظل: تأثيرات ارتفاع خفية إلى متوسطة
+- لقطات شاشة المنتج كمحتوى للبطاقة
+
+### التنقل
+- شريط تنقل أفقي نظيف على خلفية بيضاء
+- الشعار: علامة Figma الكلمية باللون الأسود
+- علامات تبويب المنتج: تنقل بعلامات تبويب بشكل حبة دواء (50px)
+- الروابط: نص أسود، زينة خط سفلي بسماكة 1px
+- دعوة للعمل: زر أسود بشكل حبة دواء
+- عند التحويم: لون النص عبر متغير CSS
+
+### مكونات مميزة
+
+**شريط علامات تبويب المنتج**
+- علامات تبويب أفقية بشكل حبة دواء (نصف قطر 50px)
+- كل علامة تبويب تمثل منطقة منتج Figma (تصميم، وضع المطوّر، نماذج أولية، وغيرها)
+- علامة التبويب النشطة مميزة بالإبراز
+
+**قسم تدرج الهيرو**
+- خلفية تدرج متعدد الألوان الزاهية بعرض كامل
+- نص أبيض فوق التدرج مع عنوان عرض بحجم 86px
+- لقطات شاشة المنتج تطفو داخل التدرج
+
+**مؤشرات التركيز المتقطعة**
+- كل العناصر التفاعلية تستخدم خطًا متقطعًا `dashed 2px` عند التركيز
+- تستحضر مقابض التحديد في محرر Figma
+- خيار تصميمي ميتا يربط الموقع بالمنتج
+
+## 5. مبادئ التخطيط
+
+### نظام التباعد
+- الوحدة الأساسية: 8px
+- المقياس: 1px، 2px، 4px، 4.5px، 8px، 10px، 12px، 16px، 18px، 24px، 32px، 40px، 46px، 48px، 50px
+
+### الشبكة والحاوية
+- أقصى عرض للحاوية: حتى 1920px
+- الهيرو: تدرج بعرض كامل مع محتوى مُوسَّط
+- أقسام المنتج: عروض متناوبة
+- التذييل: قسم داكن بعرض كامل
+- استجابة من 559px إلى 1920px
+
+### فلسفة المساحة البيضاء
+- **إيقاع شبيه بالمعرض**: التباعد السخي يتيح لكل قسم منتج التنفس كمعرض مستقل.
+- **الأقسام الملونة كتنفس بصري**: هيرو التدرج وعروض المنتجات توفر راحة لونية بين أقسام الواجهة أحادية اللون.
+
+### مقياس نصف القطر للحدود
+- أدنى (2px): عناصر الروابط الصغيرة
+- خفيف (6px): حاويات صغيرة، فواصل
+- مريح (8px): بطاقات، صور، حوارات
+- حبة دواء (50px): أزرار التبويب، دعوات العمل
+- دائرة (50%): أزرار الأيقونات، العناصر الدائرية
+
+## 6. العمق والارتفاع
+
+| المستوى | المعالجة | الاستخدام |
+|---------|----------|-----------|
+| مسطح (المستوى 0) | لا ظل | خلفية الصفحة، معظم النصوص |
+| سطح (المستوى 1) | بطاقة بيضاء على قسم تدرج/داكن | بطاقات، عروض المنتجات |
+| مرتفع (المستوى 2) | ظل خفيف | بطاقات عائمة، حالات التحويم |
+
+**فلسفة الظل**: تستخدم Figma الظلال باعتدال. الآليات الأساسية للعمق هي **تباين الخلفية** (المحتوى الأبيض على الأقسام الملونة/الداكنة) والبُعد المتأصل في لقطات شاشة المنتج ذاتها.
+
+## 7. ما يجب فعله وما يجب تجنبه
+
+### يجب فعله
+- استخدام figmaSans بأوزان متغيرة دقيقة (320–540) — التحكم الدقيق في الوزن هو جوهر التصميم
+- الإبقاء على واجهة التطبيق صارمة بالأبيض والأسود — اللون يأتي من محتوى المنتج فقط
+- استخدام هندسة حبة الدواء (50px) والدائرة (50%) لجميع العناصر التفاعلية
+- تطبيق خطوط تركيز متقطعة بسماكة 2px — نمط الوصول المميز
+- تفعيل ميزة `"kern"` على كل النصوص
+- استخدام figmaMono بأحرف كبيرة مع تباعد موجب للتسميات
+- تطبيق تباعد سلبي للحروف في كل مكان (-0.1px إلى -1.72px)
+
+### يجب تجنبه
+- لا تضف ألوانًا للواجهة — لوحة الألوان أحادية اللون مطلقة
+- لا تستخدم أوزان الخطوط القياسية (400، 500، 600، 700) — استخدم توقفات الخط المتغير الفريدة (320، 330، 340، 450، 480، 540)
+- لا تستخدم زوايا حادة في الأزرار — الهندسة بشكل حبة دواء ودائرية فقط
+- لا تستخدم خطوط تركيز صلبة — المتقطع هو البصمة المميزة
+- لا ترفع وزن خط الجسم فوق 450 — الجمالية الخفيفة الوزن جوهرية
+- لا تستخدم تباعدًا موجبًا للحروف في نص الجسم — هو دائمًا سلبي
+
+## 8. سلوك الاستجابة
+
+### نقاط التوقف
+| الاسم | العرض | التغييرات الرئيسية |
+|-------|-------|------------------|
+| موبايل صغير | <560px | تخطيط مضغوط، متراكم |
+| جهاز لوحي | 560–768px | تعديلات طفيفة |
+| سطح مكتب صغير | 768–960px | تخطيطات بعمودين |
+| سطح مكتب | 960–1280px | تخطيط قياسي |
+| سطح مكتب كبير | 1280–1440px | موسّع |
+| فائق الاتساع | 1440–1920px | أقصى عرض |
+
+### استراتيجية الطي
+- نص الهيرو: 86px ← 64px ← 48px
+- علامات تبويب المنتج: تمرير أفقي على الموبايل
+- أقسام الميزات: عمود واحد متراكم
+- التذييل: متعدد الأعمدة ← متراكم
+
+## 9. دليل مطالبات الوكيل
+
+### مرجع الألوان السريع
+- كل شيء: "أسود خالص (#000000)" و"أبيض خالص (#ffffff)"
+- زجاجي داكن: "rgba(0, 0, 0, 0.08)"
+- زجاجي فاتح: "rgba(255, 255, 255, 0.16)"
+
+### أمثلة على مطالبات المكونات
+- "أنشئ هيرو على تدرج متعدد الألوان الزاهية (أخضر، أصفر، بنفسجي، وردي). العنوان بحجم 86px figmaSans وزن 400، ارتفاع السطر 1.0، تباعد الحروف -1.72px. نص أبيض. زر CTA أبيض بشكل حبة دواء (نصف قطر 50px، حشو 8px 18px)."
+- "صمّم شريط علامات تبويب المنتج بأزرار بشكل حبة دواء (نصف قطر 50px). نشط: خلفية سوداء، نص أبيض. غير نشط: شفاف، نص أسود. figmaSans بحجم 20px وزن 480."
+- "ابنِ تسمية قسم: figmaMono 18px، أحرف كبيرة، تباعد الحروف 0.54px، نص أسود. كيرنينج مفعّل."
+- "أنشئ نص جسم بحجم 20px figmaSans وزن 330، ارتفاع السطر 1.40، تباعد الحروف -0.14px. أسود خالص على أبيض."
+
+### دليل التكرار
+1. استخدم توقفات وزن الخط المتغير بدقة: 320، 330، 340، 450، 480، 540، 700
+2. الواجهة دائمًا أسود + أبيض — لا تضف ألوانًا للواجهة أبدًا
+3. خطوط تركيز متقطعة لا صلبة
+4. تباعد الحروف دائمًا سلبي في الجسم، دائمًا موجب في تسميات الأحادي
+5. حبة دواء (50px) للأزرار/علامات التبويب، دائرة (50%) لأزرار الأيقونات

open-design/design-systems/figma/DESIGN-de.md

@@ -0,0 +1,223 @@
+# Designsystem inspiriert von Figma
+
+> Category: Design & Kreativität
+> Kollaboratives Designwerkzeug. Lebhaft mehrfarbig, verspielt und dennoch professionell.
+
+## 1. Visuelles Thema & Atmosphäre
+
+Figmas Oberfläche ist das Designwerkzeug, das sich selbst gestaltet hat — ein Meisterwerk typografischer Raffinesse, bei dem eine maßgeschneiderte Variable-Font (figmaSans) zwischen hauchdünn (Gewicht 320) und fett (Gewicht 700) moduliert, mit Haltepunkten bei ungewöhnlichen Zwischenwerten (330, 340, 450, 480, 540), die die meisten Schriftsysteme niemals erkunden. Diese granulare Gewichtskontrolle verleiht jedem Textelement ein präzise kalibriertes visuelles Gewicht und schafft Hierarchie durch Mikro-Unterschiede statt durch das stumpfe Instrument von „Normal vs. Fett".
+
+Die Seite präsentiert eine faszinierende Dualität: Das Interface-Chrome ist streng schwarz-weiß (buchstäblich nur `#000000` und `#ffffff` als Farben erkennbar), während der Hero-Bereich und die Produktpräsentationen mit lebhaften Mehrfarb-Verläufen explodieren — elektrisches Grün, leuchtendes Gelb, tiefes Lila, heißes Pink. Diese Trennung bedeutet, dass das Designsystem selbst farblos ist und die farbenfrohe Ausgabe des Produkts als Heldinneninhalt behandelt. Figmas Marketingseite ist im Wesentlichen eine weiße Galerienwand, auf der bunte Kunst ausgestellt wird.
+
+Was Figma jenseits der Variable-Font besonders auszeichnet, ist seine Kreis-und-Pill-Geometrie. Schaltflächen verwenden einen Radius von 50px (Pill) oder 50% (perfekter Kreis für Icon-Schaltflächen) und erzeugen ein organisches, werkzeugpaletten-ähnliches Gefühl. Der gestrichelte Fokusindikator (`dashed 2px`) ist eine bewusste Designentscheidung, die an die Auswahlgriffe im Figma-Editor erinnert — die UI-Sprache der Website referenziert die UI-Sprache des Produkts.
+
+**Wesentliche Merkmale:**
+- Maßgeschneiderte Variable-Font (figmaSans) mit ungewöhnlichen Gewichtshaltepunkten: 320, 330, 340, 450, 480, 540, 700
+- Streng schwarz-weißes Interface-Chrome — Farbe existiert nur in Produktinhalten
+- figmaMono für großgeschriebene technische Beschriftungen mit weitem Buchstabenabstand
+- Pill- (50px) und kreisförmige (50%) Schaltflächengeometrie
+- Gestrichelte Fokusumrisse, die an Figmas Editor-Auswahlgriffe erinnern
+- Lebhafte Mehrfarb-Hero-Verläufe (Grün, Gelb, Lila, Pink)
+- OpenType-Funktion `"kern"` global aktiviert
+- Negativer Buchstabenabstand durchgehend — sogar Fließtext bei -0.14px bis -0.26px
+
+## 2. Farbpalette & Rollen
+
+### Primär
+- **Reines Schwarz** (`#000000`): Gesamter Text, alle soliden Schaltflächen, alle Rahmen. Die einzige „Farbe" des Interface.
+- **Reines Weiß** (`#ffffff`): Alle Hintergründe, weiße Schaltflächen, Text auf dunklen Oberflächen. Die andere Hälfte des Binärsystems.
+
+*Hinweis: Figmas Marketingsite verwendet NUR diese zwei Farben für ihre Interface-Schicht. Alle leuchtenden Farben erscheinen ausschließlich in Produkt-Screenshots, Hero-Verläufen und eingebettetem Inhalt.*
+
+### Oberfläche & Hintergrund
+- **Reines Weiß** (`#ffffff`): Primärer Seitenhintergrund und Kartenoberflächen.
+- **Glas-Schwarz** (`rgba(0, 0, 0, 0.08)`): Subtile dunkle Überlagerung für sekundäre kreisförmige Schaltflächen und Glaseffekte.
+- **Glas-Weiß** (`rgba(255, 255, 255, 0.16)`): Mattglas-Überlagerung für Schaltflächen auf dunklen/farbigen Oberflächen.
+
+### Verlaufssystem
+- **Hero-Verlauf**: Ein lebhafter Mehrfach-Verlauf mit elektrischem Grün, leuchtendem Gelb, tiefem Lila und heißem Pink. Dieser Verlauf ist die visuelle Signatur des Hero-Bereichs — er repräsentiert die kreativen Möglichkeiten des Werkzeugs.
+- **Produkt-Bereich-Verläufe**: Einzelne Produktbereiche (Design, Dev-Modus, Prototyping) können in ihren Präsentationen eigene Farbthemen verwenden.
+
+## 3. Typografieregeln
+
+### Schriftfamilie
+- **Primär**: `figmaSans`, mit Fallbacks: `figmaSans Fallback, SF Pro Display, system-ui, helvetica`
+- **Monospace / Beschriftungen**: `figmaMono`, mit Fallbacks: `figmaMono Fallback, SF Mono, menlo`
+
+### Hierarchie
+
+| Rolle | Schrift | Größe | Gewicht | Zeilenhöhe | Buchstabenabstand | Hinweise |
+|-------|---------|-------|---------|------------|-------------------|----------|
+| Display / Hero | figmaSans | 86px (5.38rem) | 400 | 1.00 (eng) | -1.72px | Maximale Wirkung, extreme Laufweite |
+| Abschnittsüberschrift | figmaSans | 64px (4rem) | 400 | 1.10 (eng) | -0.96px | Feature-Abschnittstitel |
+| Unterüberschrift | figmaSans | 26px (1.63rem) | 540 | 1.35 | -0.26px | Betonter Abschnittstext |
+| Unterüberschrift Hell | figmaSans | 26px (1.63rem) | 340 | 1.35 | -0.26px | Leichtgewichtiger Abschnittstext |
+| Feature-Titel | figmaSans | 24px (1.5rem) | 700 | 1.45 | normal | Fette Kartenüberschriften |
+| Fließtext Groß | figmaSans | 20px (1.25rem) | 330–450 | 1.30–1.40 | -0.1px bis -0.14px | Beschreibungen, Einleitungen |
+| Fließtext / Schaltfläche | figmaSans | 16px (1rem) | 330–400 | 1.40–1.45 | -0.14px bis normal | Standardfließtext, Navigation, Schaltflächen |
+| Fließtext Hell | figmaSans | 18px (1.13rem) | 320 | 1.45 | -0.26px bis normal | Leichtgewichtiger Fließtext |
+| Mono-Beschriftung | figmaMono | 18px (1.13rem) | 400 | 1.30 (eng) | 0.54px | Großgeschriebene Abschnittsbeschriftungen |
+| Mono Klein | figmaMono | 12px (0.75rem) | 400 | 1.00 (eng) | 0.6px | Großgeschriebene winzige Tags |
+
+### Grundsätze
+- **Variable-Font-Präzision**: figmaSans verwendet Gewichte, die die meisten Systeme nie einsetzen — 320, 330, 340, 450, 480, 540. Dies schafft Hierarchie durch subtile Gewichtsunterschiede statt durch dramatische Sprünge. Der Unterschied zwischen 330 und 340 ist kaum wahrnehmbar, aber strukturell bedeutsam.
+- **Hell als Basis**: Die meisten Fließtexte verwenden 320–340 (leichter als das typische 400 „Regular"), was ein ätherisches, luftiges Leseerlebnis schafft, das zur Design-Tool-Ästhetik passt.
+- **Überall Kerning**: Jedes Textelement aktiviert die OpenType-Funktion `"kern"` — Kerning ist keine Option, es ist strukturell.
+- **Negative Laufweite als Standard**: Auch Fließtext verwendet -0.1px bis -0.26px Buchstabenabstand, was durchgehend engen Text erzeugt. Display-Text komprimiert weiter auf -0.96px und -1.72px.
+- **Mono für Struktur**: figmaMono in Großbuchstaben mit positivem Buchstabenabstand (0.54px–0.6px) erzeugt technische Wegweiser-Beschriftungen.
+
+## 4. Komponentenstile
+
+### Schaltflächen
+
+**Schwarz Solid (Pill)**
+- Hintergrund: Reines Schwarz (`#000000`)
+- Text: Reines Weiß (`#ffffff`)
+- Radius: Kreis (50%) für Icon-Schaltflächen
+- Fokus: gestrichelte 2px-Umrandung
+- Maximale Betonung
+
+**Weiße Pill**
+- Hintergrund: Reines Weiß (`#ffffff`)
+- Text: Reines Schwarz (`#000000`)
+- Innenabstand: 8px 18px 10px (asymmetrisch vertikal)
+- Radius: Pill (50px)
+- Fokus: gestrichelte 2px-Umrandung
+- Standard-CTA auf dunklen/farbigen Oberflächen
+
+**Glas Dunkel**
+- Hintergrund: `rgba(0, 0, 0, 0.08)` (subtile dunkle Überlagerung)
+- Text: Reines Schwarz
+- Radius: Kreis (50%)
+- Fokus: gestrichelte 2px-Umrandung
+- Sekundäre Aktion auf hellen Oberflächen
+
+**Glas Hell**
+- Hintergrund: `rgba(255, 255, 255, 0.16)` (Mattglas)
+- Text: Reines Weiß
+- Radius: Kreis (50%)
+- Fokus: gestrichelte 2px-Umrandung
+- Sekundäre Aktion auf dunklen/farbigen Oberflächen
+
+### Karten & Container
+- Hintergrund: Reines Weiß
+- Rahmen: keiner oder minimal
+- Radius: 6px (kleine Container), 8px (Bilder, Karten, Dialoge)
+- Schatten: subtile bis mittlere Höheneffekte
+- Produkt-Screenshots als Karteninhalt
+
+### Navigation
+- Saubere horizontale Navigation auf Weiß
+- Logo: Figma-Wortmarke in Schwarz
+- Produkt-Tabs: pill-förmige (50px) Tab-Navigation
+- Links: schwarzer Text, 1px Unterstreichungsdekoration
+- CTA: schwarze Pill-Schaltfläche
+- Hover: Textfarbe via CSS-Variable
+
+### Besondere Komponenten
+
+**Produkt-Tab-Leiste**
+- Horizontal angeordnete pill-förmige Tabs (50px Radius)
+- Jeder Tab repräsentiert einen Figma-Produktbereich (Design, Dev-Modus, Prototyping usw.)
+- Aktiver Tab hervorgehoben
+
+**Hero-Verlaufsbereich**
+- Vollbreit-lebhafter Mehrfarb-Verlauf als Hintergrund
+- Weißer Textüberzug mit 86px Display-Überschrift
+- Produkt-Screenshots schwebend im Verlauf
+
+**Gestrichelte Fokusindikatoren**
+- Alle interaktiven Elemente verwenden `dashed 2px`-Umrandung beim Fokus
+- Referenziert die Auswahlgriffe im Figma-Editor
+- Eine Meta-Design-Entscheidung, die Website und Produkt verbindet
+
+## 5. Layoutprinzipien
+
+### Abstandssystem
+- Basiseinheit: 8px
+- Skala: 1px, 2px, 4px, 4.5px, 8px, 10px, 12px, 16px, 18px, 24px, 32px, 40px, 46px, 48px, 50px
+
+### Raster & Container
+- Maximale Container-Breite: bis 1920px
+- Hero: vollbreit mit zentriertem Inhalt
+- Produktbereiche: abwechselnde Präsentationen
+- Fußzeile: dunkler vollbreiter Bereich
+- Responsiv von 559px bis 1920px
+
+### Weißraumphilosophie
+- **Galerieähnliche Rhythmik**: Großzügige Abstände lassen jeden Produktbereich als eigene Ausstellung atmen.
+- **Farbige Bereiche als visueller Atemraum**: Der Verlaufs-Hero und die Produktpräsentationen bieten chromatische Erholung zwischen den monochromen Interface-Bereichen.
+
+### Rahmenradius-Skala
+- Minimal (2px): Kleine Link-Elemente
+- Subtil (6px): Kleine Container, Trennlinien
+- Komfortabel (8px): Karten, Bilder, Dialoge
+- Pill (50px): Tab-Schaltflächen, CTAs
+- Kreis (50%): Icon-Schaltflächen, kreisförmige Elemente
+
+## 6. Tiefe & Elevation
+
+| Ebene | Behandlung | Verwendung |
+|-------|------------|------------|
+| Flach (Ebene 0) | Kein Schatten | Seitenhintergrund, meiste Texte |
+| Oberfläche (Ebene 1) | Weiße Karte auf Verlaufs-/Dunkelbereich | Karten, Produktpräsentationen |
+| Erhöht (Ebene 2) | Subtiler Schatten | Schwebende Karten, Hover-Zustände |
+
+**Schattenphilosophie**: Figma setzt Schatten sparsam ein. Die primären Tiefenmechanismen sind **Hintergrundkontrast** (weißer Inhalt auf farbigen/dunklen Bereichen) und die inhärente Dreidimensionalität der Produkt-Screenshots selbst.
+
+## 7. Dos und Don'ts
+
+### Tun
+- figmaSans mit präzisen Variable-Font-Gewichten (320–540) verwenden — die granulare Gewichtskontrolle IST das Design
+- Das Interface streng schwarz-weiß halten — Farbe kommt nur aus Produktinhalten
+- Pill- (50px) und kreisförmige (50%) Geometrie für alle interaktiven Elemente verwenden
+- Gestrichelte 2px-Fokusumrisse anwenden — das Signature-Barrierefreiheitsmuster
+- Funktion `"kern"` bei allen Texten aktivieren
+- figmaMono in Großbuchstaben mit positivem Buchstabenabstand für Beschriftungen verwenden
+- Negativen Buchstabenabstand durchgehend anwenden (-0.1px bis -1.72px)
+
+### Nicht tun
+- Keine Interface-Farben hinzufügen — die monochrome Palette ist absolut
+- Keine Standard-Schriftgewichte (400, 500, 600, 700) verwenden — die einzigartigen Haltepunkte der Variable-Font nutzen (320, 330, 340, 450, 480, 540)
+- Keine scharfen Ecken bei Schaltflächen — nur Pill- und Kreisgeometrie
+- Keine soliden Fokusumrisse — gestrichelt ist die Signature
+- Das Fließtext-Schriftgewicht nicht über 450 erhöhen — die leichtgewichtige Ästhetik ist zentral
+- Keinen positiven Buchstabenabstand bei Fließtext — er ist immer negativ
+
+## 8. Responsives Verhalten
+
+### Breakpoints
+| Name | Breite | Wesentliche Änderungen |
+|------|--------|------------------------|
+| Kleines Mobilgerät | <560px | Kompaktes Layout, gestapelt |
+| Tablet | 560–768px | Geringfügige Anpassungen |
+| Kleiner Desktop | 768–960px | 2-Spalten-Layouts |
+| Desktop | 960–1280px | Standardlayout |
+| Großer Desktop | 1280–1440px | Erweitert |
+| Ultra-breit | 1440–1920px | Maximale Breite |
+
+### Zusammenklapps-Strategie
+- Hero-Text: 86px → 64px → 48px
+- Produkt-Tabs: horizontales Scrollen auf Mobilgeräten
+- Feature-Bereiche: gestapelte Einspalte
+- Fußzeile: Mehrspaltig → gestapelt
+
+## 9. Agent-Prompt-Leitfaden
+
+### Schnelle Farbreferenz
+- Alles: „Reines Schwarz (#000000)" und „Reines Weiß (#ffffff)"
+- Glas Dunkel: „rgba(0, 0, 0, 0.08)"
+- Glas Hell: „rgba(255, 255, 255, 0.16)"
+
+### Beispiel-Komponenten-Prompts
+- „Erstelle einen Hero auf einem lebhaften Mehrfarb-Verlauf (Grün, Gelb, Lila, Pink). Überschrift bei 86px figmaSans Gewicht 400, Zeilenhöhe 1.0, Buchstabenabstand -1.72px. Weißer Text. Weiße Pill-CTA-Schaltfläche (50px Radius, 8px 18px Innenabstand)."
+- „Gestalte eine Produkt-Tab-Leiste mit pill-förmigen Schaltflächen (50px Radius). Aktiv: Schwarzer Hintergrund, weißer Text. Inaktiv: transparent, schwarzer Text. figmaSans bei 20px Gewicht 480."
+- „Erstelle eine Abschnittsbeschriftung: figmaMono 18px, Großbuchstaben, Buchstabenabstand 0.54px, schwarzer Text. Kern aktiviert."
+- „Erstelle Fließtext bei 20px figmaSans Gewicht 330, Zeilenhöhe 1.40, Buchstabenabstand -0.14px. Reines Schwarz auf Weiß."
+
+### Iterations-Leitfaden
+1. Variable-Font-Gewichtshaltepunkte präzise verwenden: 320, 330, 340, 450, 480, 540, 700
+2. Interface ist immer Schwarz + Weiß — niemals Farben zum Chrome hinzufügen
+3. Gestrichelte Fokusumrisse, keine soliden
+4. Buchstabenabstand ist bei Fließtext immer negativ, bei Mono-Beschriftungen immer positiv
+5. Pill (50px) für Schaltflächen/Tabs, Kreis (50%) für Icon-Schaltflächen

open-design/design-systems/figma/DESIGN-es.md

@@ -0,0 +1,223 @@
+# Sistema de Diseño Inspirado en Figma
+
+> Category: Diseño y Creatividad
+> Herramienta de diseño colaborativo. Multicolor vibrante, lúdica pero profesional.
+
+## 1. Tema Visual y Atmósfera
+
+La interfaz de Figma es la herramienta de diseño que se diseñó a sí misma — una clase magistral de sofisticación tipográfica donde una fuente variable personalizada (figmaSans) modula entre ultra-fina (weight 320) y negrita (weight 700) con pasos intermedios inusuales (330, 340, 450, 480, 540) que la mayoría de los sistemas tipográficos nunca exploran. Este control granular del peso otorga a cada elemento de texto un peso visual calibrado con precisión, creando jerarquía mediante micro-diferencias en lugar del instrumento contundente de "regular vs negrita".
+
+La página presenta una dualidad fascinante: el cromo de la interfaz es estrictamente en blanco y negro (literalmente solo `#000000` y `#ffffff` detectados como colores), mientras que la sección hero y las presentaciones de producto estallan con vibrantes degradados multicolor — verdes eléctricos, amarillos brillantes, púrpuras profundos, rosas intensos. Esta separación significa que el sistema de diseño en sí mismo es incoloro, tratando la colorida salida del producto como el contenido protagonista. La página de marketing de Figma es esencialmente una galería de paredes blancas que exhibe arte colorido.
+
+Lo que hace distintiva a Figma más allá de la fuente variable es su geometría de círculos y píldoras. Los botones usan un radio de 50px (píldora) o 50% (círculo perfecto para botones de icono), creando una sensación orgánica similar a una paleta de herramientas. El indicador de foco de contorno discontinuo (`dashed 2px`) es una elección de diseño deliberada que evoca los manejadores de selección en el propio editor de Figma — el lenguaje visual del sitio web hace referencia al lenguaje visual del producto.
+
+**Características Clave:**
+- Fuente variable personalizada (figmaSans) con pasos de peso inusuales: 320, 330, 340, 450, 480, 540, 700
+- Cromo de interfaz estrictamente en blanco y negro — el color existe únicamente en el contenido del producto
+- figmaMono para etiquetas técnicas en mayúsculas con amplio espaciado entre letras
+- Geometría de botones en píldora (50px) y circular (50%)
+- Contornos de foco discontinuos que evocan los manejadores de selección del editor de Figma
+- Vibrantes degradados multicolor en el hero (verde, amarillo, púrpura, rosa)
+- Función OpenType `"kern"` habilitada globalmente
+- Espaciado entre letras negativo en todo el sitio — incluso el texto de cuerpo a -0.14px o -0.26px
+
+## 2. Paleta de Colores y Roles
+
+### Primario
+- **Negro Puro** (`#000000`): Todo el texto, todos los botones sólidos, todos los bordes. El único "color" de la interfaz.
+- **Blanco Puro** (`#ffffff`): Todos los fondos, botones blancos, texto sobre superficies oscuras. La otra mitad del binario.
+
+*Nota: El sitio de marketing de Figma utiliza ÚNICAMENTE estos dos colores para su capa de interfaz. Todos los colores vibrantes aparecen exclusivamente en capturas de pantalla del producto, degradados del hero y contenido incrustado.*
+
+### Superficies y Fondos
+- **Blanco Puro** (`#ffffff`): Fondo principal de página y superficies de tarjeta.
+- **Negro Cristal** (`rgba(0, 0, 0, 0.08)`): Superposición oscura sutil para botones circulares secundarios y efectos de cristal.
+- **Blanco Cristal** (`rgba(255, 255, 255, 0.16)`): Superposición de cristal esmerilado para botones sobre superficies oscuras o de color.
+
+### Sistema de Degradados
+- **Degradado Hero**: Un vibrante degradado de múltiples pasos con verde eléctrico, amarillo brillante, púrpura profundo y rosa intenso. Este degradado es la firma visual de la sección hero — representa las posibilidades creativas de la herramienta.
+- **Degradados de Sección de Producto**: Las áreas individuales del producto (Design, Dev Mode, Prototyping) pueden usar temas de color distintos en sus presentaciones.
+
+## 3. Reglas Tipográficas
+
+### Familia de Fuentes
+- **Principal**: `figmaSans`, con alternativas: `figmaSans Fallback, SF Pro Display, system-ui, helvetica`
+- **Monoespaciado / Etiquetas**: `figmaMono`, con alternativas: `figmaMono Fallback, SF Mono, menlo`
+
+### Jerarquía
+
+| Rol | Fuente | Tamaño | Peso | Altura de Línea | Espaciado de Letras | Notas |
+|------|------|------|--------|-------------|----------------|-------|
+| Display / Hero | figmaSans | 86px (5.38rem) | 400 | 1.00 (ajustado) | -1.72px | Máximo impacto, tracking extremo |
+| Encabezado de Sección | figmaSans | 64px (4rem) | 400 | 1.10 (ajustado) | -0.96px | Títulos de sección de funciones |
+| Subencabezado | figmaSans | 26px (1.63rem) | 540 | 1.35 | -0.26px | Texto de sección enfatizado |
+| Subencabezado Light | figmaSans | 26px (1.63rem) | 340 | 1.35 | -0.26px | Texto de sección de peso ligero |
+| Título de Función | figmaSans | 24px (1.5rem) | 700 | 1.45 | normal | Encabezados de tarjeta en negrita |
+| Cuerpo Grande | figmaSans | 20px (1.25rem) | 330–450 | 1.30–1.40 | -0.1px a -0.14px | Descripciones, introducciones |
+| Cuerpo / Botón | figmaSans | 16px (1rem) | 330–400 | 1.40–1.45 | -0.14px a normal | Cuerpo estándar, nav, botones |
+| Cuerpo Light | figmaSans | 18px (1.13rem) | 320 | 1.45 | -0.26px a normal | Texto de cuerpo de peso ligero |
+| Etiqueta Mono | figmaMono | 18px (1.13rem) | 400 | 1.30 (ajustado) | 0.54px | Etiquetas de sección en mayúsculas |
+| Mono Pequeño | figmaMono | 12px (0.75rem) | 400 | 1.00 (ajustado) | 0.6px | Etiquetas diminutas en mayúsculas |
+
+### Principios
+- **Precisión de fuente variable**: figmaSans usa pesos que la mayoría de los sistemas nunca utilizan — 320, 330, 340, 450, 480, 540. Esto crea jerarquía mediante diferencias sutiles de peso en lugar de saltos dramáticos. La diferencia entre 330 y 340 es casi imperceptible, pero estructuralmente significativa.
+- **El peso ligero como base**: La mayor parte del texto de cuerpo usa 320–340 (más ligero que el "regular" 400 típico), creando una experiencia de lectura etérea y aireada que se corresponde con la estética de herramienta de diseño.
+- **Kern en todas partes**: Cada elemento de texto habilita la función OpenType `"kern"` — el kerning no es opcional, es estructural.
+- **Tracking negativo por defecto**: Incluso el texto de cuerpo usa -0.1px a -0.26px de espaciado entre letras, creando texto universalmente comprimido. El texto de display se comprime aún más a -0.96px y -1.72px.
+- **Mono para la estructura**: figmaMono en mayúsculas con espaciado positivo entre letras (0.54px–0.6px) crea etiquetas de señalización técnica.
+
+## 4. Estilos de Componentes
+
+### Botones
+
+**Sólido Negro (Píldora)**
+- Fondo: Negro Puro (`#000000`)
+- Texto: Blanco Puro (`#ffffff`)
+- Radio: círculo (50%) para botones de icono
+- Foco: contorno discontinuo de 2px
+- Máximo énfasis
+
+**Píldora Blanca**
+- Fondo: Blanco Puro (`#ffffff`)
+- Texto: Negro Puro (`#000000`)
+- Padding: 8px 18px 10px (vertical asimétrico)
+- Radio: píldora (50px)
+- Foco: contorno discontinuo de 2px
+- CTA estándar sobre superficies oscuras o de color
+
+**Cristal Oscuro**
+- Fondo: `rgba(0, 0, 0, 0.08)` (superposición oscura sutil)
+- Texto: Negro Puro
+- Radio: círculo (50%)
+- Foco: contorno discontinuo de 2px
+- Acción secundaria sobre superficies claras
+
+**Cristal Claro**
+- Fondo: `rgba(255, 255, 255, 0.16)` (cristal esmerilado)
+- Texto: Blanco Puro
+- Radio: círculo (50%)
+- Foco: contorno discontinuo de 2px
+- Acción secundaria sobre superficies oscuras o de color
+
+### Tarjetas y Contenedores
+- Fondo: Blanco Puro
+- Borde: ninguno o mínimo
+- Radio: 6px (contenedores pequeños), 8px (imágenes, tarjetas, diálogos)
+- Sombra: efectos de elevación de sutil a medio
+- Capturas de pantalla del producto como contenido de tarjeta
+
+### Navegación
+- Nav horizontal limpio sobre fondo blanco
+- Logo: wordmark de Figma en negro
+- Pestañas de producto: navegación por pestañas en forma de píldora (50px)
+- Enlaces: texto negro, decoración de subrayado de 1px
+- CTA: botón en píldora negra
+- Hover: color de texto mediante variable CSS
+
+### Componentes Distintivos
+
+**Barra de Pestañas de Producto**
+- Pestañas horizontales en forma de píldora (radio 50px)
+- Cada pestaña representa un área de producto de Figma (Design, Dev Mode, Prototyping, etc.)
+- Pestaña activa resaltada
+
+**Sección de Degradado Hero**
+- Fondo de degradado multicolor vibrante a ancho completo
+- Superposición de texto blanco con encabezado de display de 86px
+- Capturas de pantalla del producto flotando dentro del degradado
+
+**Indicadores de Foco Discontinuos**
+- Todos los elementos interactivos usan contorno `dashed 2px` al recibir foco
+- Hace referencia a los manejadores de selección del editor de Figma
+- Una elección de meta-diseño que conecta el sitio web con el producto
+
+## 5. Principios de Maquetación
+
+### Sistema de Espaciado
+- Unidad base: 8px
+- Escala: 1px, 2px, 4px, 4.5px, 8px, 10px, 12px, 16px, 18px, 24px, 32px, 40px, 46px, 48px, 50px
+
+### Cuadrícula y Contenedor
+- Ancho máximo del contenedor: hasta 1920px
+- Hero: degradado a ancho completo con contenido centrado
+- Secciones de producto: presentaciones alternas
+- Pie de página: sección oscura a ancho completo
+- Responsivo desde 559px hasta 1920px
+
+### Filosofía del Espacio en Blanco
+- **Ritmo de galería**: El espaciado generoso permite que cada sección de producto respire como su propia exhibición.
+- **Secciones de color como respiro visual**: El hero con degradado y las presentaciones de producto ofrecen alivio cromático entre las secciones monocromas de la interfaz.
+
+### Escala de Radio de Borde
+- Mínimo (2px): Elementos de enlace pequeños
+- Sutil (6px): Contenedores pequeños, divisores
+- Cómodo (8px): Tarjetas, imágenes, diálogos
+- Píldora (50px): Botones de pestaña, CTAs
+- Círculo (50%): Botones de icono, elementos circulares
+
+## 6. Profundidad y Elevación
+
+| Nivel | Tratamiento | Uso |
+|-------|-----------|-----|
+| Plano (Nivel 0) | Sin sombra | Fondo de página, la mayor parte del texto |
+| Superficie (Nivel 1) | Tarjeta blanca sobre sección degradada/oscura | Tarjetas, presentaciones de producto |
+| Elevado (Nivel 2) | Sombra sutil | Tarjetas flotantes, estados hover |
+
+**Filosofía de Sombras**: Figma usa las sombras con moderación. Los principales mecanismos de profundidad son el **contraste de fondo** (contenido blanco sobre secciones coloridas/oscuras) y la dimensionalidad inherente de las propias capturas de pantalla del producto.
+
+## 7. Lo Que Debes y No Debes Hacer
+
+### Debes Hacer
+- Usar figmaSans con pesos variables precisos (320–540) — el control granular del peso ES el diseño
+- Mantener la interfaz estrictamente en blanco y negro — el color proviene únicamente del contenido del producto
+- Usar geometría de píldora (50px) y circular (50%) para todos los elementos interactivos
+- Aplicar contornos de foco discontinuos de 2px — el patrón de accesibilidad distintivo
+- Habilitar la función `"kern"` en todo el texto
+- Usar figmaMono en mayúsculas con espaciado positivo entre letras para etiquetas
+- Aplicar espaciado entre letras negativo en todo el sitio (-0.1px a -1.72px)
+
+### No Debes Hacer
+- No añadir colores a la interfaz — la paleta monocroma es absoluta
+- No usar pesos de fuente estándar (400, 500, 600, 700) — usa los pasos únicos de la fuente variable (320, 330, 340, 450, 480, 540)
+- No usar esquinas afiladas en los botones — únicamente geometría de píldora y circular
+- No usar contornos de foco sólidos — el discontinuo es el distintivo
+- No aumentar el peso de la fuente del cuerpo por encima de 450 — la estética de peso ligero es fundamental
+- No usar espaciado positivo entre letras en el texto de cuerpo — siempre es negativo
+
+## 8. Comportamiento Responsivo
+
+### Puntos de Quiebre
+| Nombre | Ancho | Cambios Clave |
+|------|-------|-------------|
+| Móvil Pequeño | <560px | Maquetación compacta, apilada |
+| Tablet | 560–768px | Ajustes menores |
+| Escritorio Pequeño | 768–960px | Maquetaciones de 2 columnas |
+| Escritorio | 960–1280px | Maquetación estándar |
+| Escritorio Grande | 1280–1440px | Expandido |
+| Ultra-ancho | 1440–1920px | Ancho máximo |
+
+### Estrategia de Colapso
+- Texto del hero: 86px → 64px → 48px
+- Pestañas de producto: desplazamiento horizontal en móvil
+- Secciones de función: columna única apilada
+- Pie de página: multicolumna → apilado
+
+## 9. Guía de Prompts para Agentes
+
+### Referencia Rápida de Colores
+- Todo: "Negro Puro (#000000)" y "Blanco Puro (#ffffff)"
+- Cristal Oscuro: "rgba(0, 0, 0, 0.08)"
+- Cristal Claro: "rgba(255, 255, 255, 0.16)"
+
+### Ejemplos de Prompts para Componentes
+- "Crea un hero sobre un degradado multicolor vibrante (verde, amarillo, púrpura, rosa). Titular a 86px figmaSans weight 400, line-height 1.0, letter-spacing -1.72px. Texto blanco. Botón CTA en píldora blanca (radio 50px, padding 8px 18px)."
+- "Diseña una barra de pestañas de producto con botones en forma de píldora (radio 50px). Activo: fondo negro, texto blanco. Inactivo: transparente, texto negro. figmaSans a 20px weight 480."
+- "Construye una etiqueta de sección: figmaMono 18px, mayúsculas, letter-spacing 0.54px, texto negro. Kern habilitado."
+- "Crea texto de cuerpo a 20px figmaSans weight 330, line-height 1.40, letter-spacing -0.14px. Negro Puro sobre blanco."
+
+### Guía de Iteración
+1. Usa los pasos de peso de la fuente variable con precisión: 320, 330, 340, 450, 480, 540, 700
+2. La interfaz siempre es negro + blanco — nunca añadas colores al cromo
+3. Contornos de foco discontinuos, no sólidos
+4. El espaciado entre letras siempre es negativo en el cuerpo, siempre positivo en las etiquetas mono
+5. Píldora (50px) para botones/pestañas, círculo (50%) para botones de icono

open-design/design-systems/figma/DESIGN-fr.md

@@ -0,0 +1,223 @@
+# Système de Design Inspiré par Figma
+
+> Category: Design & Créatif
+> Outil de design collaboratif. Multi-couleurs vives, ludique mais professionnel.
+
+## 1. Thème Visuel & Atmosphère
+
+L'interface de Figma est l'outil de design qui s'est designé lui-même — une leçon magistrale de sophistication typographique où une police variable personnalisée (figmaSans) module entre ultra-fin (weight 320) et gras (weight 700) avec des arrêts à des intermédiaires inhabituels (330, 340, 450, 480, 540) que la plupart des systèmes typographiques n'explorent jamais. Ce contrôle granulaire de la graisse confère à chaque élément textuel un poids visuel précisément calibré, créant une hiérarchie par micro-différences plutôt qu'avec l'instrument grossier du « normal vs gras ».
+
+La page présente une dualité fascinante : le chrome de l'interface est strictement noir et blanc (seuls `#000000` et `#ffffff` sont détectés comme couleurs), tandis que la section hero et les vitrines produit explosent avec des dégradés multi-couleurs vives — verts électriques, jaunes éclatants, violets profonds, roses fuchsia. Cette séparation signifie que le système de design lui-même est sans couleur, traitant les sorties colorées du produit comme le contenu vedette. La page marketing de Figma est essentiellement un mur de galerie blanc exposant des œuvres colorées.
+
+Ce qui distingue Figma au-delà de la police variable, c'est sa géométrie circulaire et en pilule. Les boutons utilisent un rayon de 50px (pilule) ou 50% (cercle parfait pour les boutons icônes), créant un aspect organique rappelant une palette d'outils. L'indicateur de focus en pointillés (`dashed 2px`) est un choix de design délibéré qui fait écho aux poignées de sélection dans l'éditeur Figma lui-même — le langage UI du site web fait référence au langage UI du produit.
+
+**Caractéristiques Clés :**
+- Police variable personnalisée (figmaSans) avec des arrêts de graisse inhabituels : 320, 330, 340, 450, 480, 540, 700
+- Chrome d'interface strictement noir et blanc — la couleur n'existe que dans le contenu produit
+- figmaMono pour les étiquettes techniques en majuscules avec un espacement large des lettres
+- Géométrie de bouton en pilule (50px) et circulaire (50%)
+- Contours de focus en pointillés évoquant les poignées de sélection de l'éditeur Figma
+- Dégradés hero multi-couleurs vifs (vert, jaune, violet, rose)
+- Fonctionnalité OpenType `"kern"` activée globalement
+- Espacement des lettres négatif partout — même le corps de texte à -0.14px à -0.26px
+
+## 2. Palette de Couleurs & Rôles
+
+### Principale
+- **Noir Pur** (`#000000`) : Tout le texte, tous les boutons pleins, toutes les bordures. L'unique « couleur » de l'interface.
+- **Blanc Pur** (`#ffffff`) : Tous les arrière-plans, boutons blancs, texte sur surfaces sombres. L'autre moitié du binaire.
+
+*Remarque : Le site marketing de Figma utilise UNIQUEMENT ces deux couleurs pour sa couche d'interface. Toutes les couleurs vives apparaissent exclusivement dans les captures d'écran produit, les dégradés hero et le contenu intégré.*
+
+### Surface & Arrière-plan
+- **Blanc Pur** (`#ffffff`) : Arrière-plan principal de la page et surfaces de carte.
+- **Noir Verre** (`rgba(0, 0, 0, 0.08)`) : Superposition sombre subtile pour les boutons circulaires secondaires et les effets verre.
+- **Blanc Verre** (`rgba(255, 255, 255, 0.16)`) : Superposition verre dépoli pour les boutons sur surfaces sombres/colorées.
+
+### Système de Dégradé
+- **Dégradé Hero** : Un dégradé multi-arrêts vif utilisant vert électrique, jaune vif, violet profond et rose fuchsia. Ce dégradé est la signature visuelle de la section hero — il représente les possibilités créatives de l'outil.
+- **Dégradés de Section Produit** : Les zones produit individuelles (Design, Dev Mode, Prototypage) peuvent utiliser des thèmes de couleurs distincts dans leurs vitrines.
+
+## 3. Règles Typographiques
+
+### Famille de Police
+- **Principale** : `figmaSans`, avec des substituts : `figmaSans Fallback, SF Pro Display, system-ui, helvetica`
+- **Monospace / Étiquettes** : `figmaMono`, avec des substituts : `figmaMono Fallback, SF Mono, menlo`
+
+### Hiérarchie
+
+| Rôle | Police | Taille | Graisse | Hauteur de Ligne | Espacement des Lettres | Notes |
+|------|--------|--------|---------|------------------|------------------------|-------|
+| Display / Hero | figmaSans | 86px (5.38rem) | 400 | 1.00 (serré) | -1.72px | Impact maximum, tracking extrême |
+| Titre de Section | figmaSans | 64px (4rem) | 400 | 1.10 (serré) | -0.96px | Titres de sections fonctionnalités |
+| Sous-titre | figmaSans | 26px (1.63rem) | 540 | 1.35 | -0.26px | Texte de section mis en valeur |
+| Sous-titre Léger | figmaSans | 26px (1.63rem) | 340 | 1.35 | -0.26px | Texte de section à graisse légère |
+| Titre de Fonctionnalité | figmaSans | 24px (1.5rem) | 700 | 1.45 | normal | En-têtes de carte en gras |
+| Corps Large | figmaSans | 20px (1.25rem) | 330–450 | 1.30–1.40 | -0.1px à -0.14px | Descriptions, introductions |
+| Corps / Bouton | figmaSans | 16px (1rem) | 330–400 | 1.40–1.45 | -0.14px à normal | Corps standard, nav, boutons |
+| Corps Léger | figmaSans | 18px (1.13rem) | 320 | 1.45 | -0.26px à normal | Corps de texte à graisse légère |
+| Étiquette Mono | figmaMono | 18px (1.13rem) | 400 | 1.30 (serré) | 0.54px | Étiquettes de section en majuscules |
+| Mono Petit | figmaMono | 12px (0.75rem) | 400 | 1.00 (serré) | 0.6px | Petites balises en majuscules |
+
+### Principes
+- **Précision de police variable** : figmaSans utilise des graisses que la plupart des systèmes ne touchent jamais — 320, 330, 340, 450, 480, 540. Cela crée une hiérarchie par de subtiles différences de graisse plutôt que par des sauts dramatiques. La différence entre 330 et 340 est presque imperceptible mais structurellement significative.
+- **Le léger comme base** : La plupart du corps de texte utilise 320–340 (plus léger que le « regular » 400 typique), créant une expérience de lecture éthérée et aérienne qui correspond à l'esthétique de l'outil de design.
+- **Kern partout** : Chaque élément textuel active la fonctionnalité OpenType `"kern"` — le crénage n'est pas optionnel, il est structurel.
+- **Tracking négatif par défaut** : Même le corps de texte utilise un espacement de -0.1px à -0.26px, créant un texte universellement serré. Le texte Display se compresse davantage à -0.96px et -1.72px.
+- **Mono pour la structure** : figmaMono en majuscules avec un espacement positif des lettres (0.54px–0.6px) crée des étiquettes repères techniques.
+
+## 4. Styles de Composants
+
+### Boutons
+
+**Noir Plein (Pilule)**
+- Arrière-plan : Noir Pur (`#000000`)
+- Texte : Blanc Pur (`#ffffff`)
+- Rayon : cercle (50%) pour les boutons icônes
+- Focus : contour en pointillés 2px
+- Emphase maximale
+
+**Pilule Blanche**
+- Arrière-plan : Blanc Pur (`#ffffff`)
+- Texte : Noir Pur (`#000000`)
+- Padding : 8px 18px 10px (vertical asymétrique)
+- Rayon : pilule (50px)
+- Focus : contour en pointillés 2px
+- CTA standard sur surfaces sombres/colorées
+
+**Verre Sombre**
+- Arrière-plan : `rgba(0, 0, 0, 0.08)` (superposition sombre subtile)
+- Texte : Noir Pur
+- Rayon : cercle (50%)
+- Focus : contour en pointillés 2px
+- Action secondaire sur surfaces claires
+
+**Verre Clair**
+- Arrière-plan : `rgba(255, 255, 255, 0.16)` (verre dépoli)
+- Texte : Blanc Pur
+- Rayon : cercle (50%)
+- Focus : contour en pointillés 2px
+- Action secondaire sur surfaces sombres/colorées
+
+### Cartes & Conteneurs
+- Arrière-plan : Blanc Pur
+- Bordure : aucune ou minimale
+- Rayon : 6px (petits conteneurs), 8px (images, cartes, dialogues)
+- Ombre : effets d'élévation subtils à moyens
+- Captures d'écran produit comme contenu de carte
+
+### Navigation
+- Nav horizontale épurée sur blanc
+- Logo : marque typographique Figma en noir
+- Onglets produit : navigation par onglets en forme de pilule (50px)
+- Liens : texte noir, décoration souligné 1px
+- CTA : bouton pilule noir
+- Survol : couleur du texte via variable CSS
+
+### Composants Distinctifs
+
+**Barre d'Onglets Produit**
+- Onglets en forme de pilule horizontale (rayon 50px)
+- Chaque onglet représente une zone produit Figma (Design, Dev Mode, Prototypage, etc.)
+- Onglet actif mis en surbrillance
+
+**Section Dégradé Hero**
+- Arrière-plan dégradé multi-couleurs vif pleine largeur
+- Superposition de texte blanc avec titre Display 86px
+- Captures d'écran produit flottant dans le dégradé
+
+**Indicateurs de Focus en Pointillés**
+- Tous les éléments interactifs utilisent un contour `dashed 2px` au focus
+- Fait référence aux poignées de sélection dans l'éditeur Figma
+- Un choix de meta-design reliant le site web et le produit
+
+## 5. Principes de Mise en Page
+
+### Système d'Espacement
+- Unité de base : 8px
+- Échelle : 1px, 2px, 4px, 4.5px, 8px, 10px, 12px, 16px, 18px, 24px, 32px, 40px, 46px, 48px, 50px
+
+### Grille & Conteneur
+- Largeur maximale du conteneur : jusqu'à 1920px
+- Hero : dégradé pleine largeur avec contenu centré
+- Sections produit : vitrines alternées
+- Footer : section sombre pleine largeur
+- Responsive de 559px à 1920px
+
+### Philosophie des Espaces Blancs
+- **Rythme de galerie** : Un espacement généreux laisse chaque section produit respirer comme sa propre exposition.
+- **Sections colorées comme respiration visuelle** : Le hero en dégradé et les vitrines produit apportent un repos chromatique entre les sections d'interface monochromes.
+
+### Échelle de Rayon de Bordure
+- Minimal (2px) : Petits éléments de lien
+- Subtil (6px) : Petits conteneurs, séparateurs
+- Confortable (8px) : Cartes, images, dialogues
+- Pilule (50px) : Boutons d'onglet, CTAs
+- Cercle (50%) : Boutons icônes, éléments circulaires
+
+## 6. Profondeur & Élévation
+
+| Niveau | Traitement | Utilisation |
+|--------|------------|-------------|
+| Plat (Niveau 0) | Aucune ombre | Arrière-plan de page, la plupart des textes |
+| Surface (Niveau 1) | Carte blanche sur section dégradé/sombre | Cartes, vitrines produit |
+| Élevé (Niveau 2) | Ombre subtile | Cartes flottantes, états de survol |
+
+**Philosophie des Ombres** : Figma utilise les ombres avec parcimonie. Les principaux mécanismes de profondeur sont le **contraste d'arrière-plan** (contenu blanc sur sections colorées/sombres) et la dimensionnalité inhérente des captures d'écran produit elles-mêmes.
+
+## 7. À Faire & À Éviter
+
+### À Faire
+- Utiliser figmaSans avec des graisses variables précises (320–540) — le contrôle granulaire de la graisse EST le design
+- Maintenir l'interface strictement noir et blanc — la couleur provient uniquement du contenu produit
+- Utiliser la géométrie en pilule (50px) et circulaire (50%) pour tous les éléments interactifs
+- Appliquer des contours de focus en pointillés 2px — le motif d'accessibilité signature
+- Activer la fonctionnalité `"kern"` sur tous les textes
+- Utiliser figmaMono en majuscules avec un espacement positif des lettres pour les étiquettes
+- Appliquer un espacement des lettres négatif partout (-0.1px à -1.72px)
+
+### À Éviter
+- Ne pas ajouter de couleurs à l'interface — la palette monochrome est absolue
+- Ne pas utiliser les graisses de police standard (400, 500, 600, 700) — utiliser les arrêts uniques de la police variable (320, 330, 340, 450, 480, 540)
+- Ne pas utiliser de coins vifs sur les boutons — géométrie en pilule et circulaire uniquement
+- Ne pas utiliser de contours de focus pleins — les pointillés sont la signature
+- Ne pas augmenter la graisse du corps de texte au-delà de 450 — l'esthétique légère est fondamentale
+- Ne pas utiliser d'espacement positif des lettres sur le corps de texte — il est toujours négatif
+
+## 8. Comportement Responsive
+
+### Points de Rupture
+| Nom | Largeur | Changements Clés |
+|-----|---------|-----------------|
+| Petit Mobile | <560px | Mise en page compacte, empilée |
+| Tablette | 560–768px | Ajustements mineurs |
+| Petit Bureau | 768–960px | Mises en page 2 colonnes |
+| Bureau | 960–1280px | Mise en page standard |
+| Grand Bureau | 1280–1440px | Élargi |
+| Ultra-large | 1440–1920px | Largeur maximale |
+
+### Stratégie de Réduction
+- Texte hero : 86px → 64px → 48px
+- Onglets produit : défilement horizontal sur mobile
+- Sections fonctionnalités : colonne unique empilée
+- Footer : multi-colonnes → empilé
+
+## 9. Guide de Prompt Agent
+
+### Référence Rapide des Couleurs
+- Tout : « Noir Pur (#000000) » et « Blanc Pur (#ffffff) »
+- Verre Sombre : « rgba(0, 0, 0, 0.08) »
+- Verre Clair : « rgba(255, 255, 255, 0.16) »
+
+### Exemples de Prompts de Composant
+- « Créer un hero sur un dégradé multi-couleurs vif (vert, jaune, violet, rose). Titre à 86px figmaSans graisse 400, line-height 1.0, letter-spacing -1.72px. Texte blanc. Bouton CTA pilule blanc (rayon 50px, padding 8px 18px). »
+- « Concevoir une barre d'onglets produit avec des boutons en forme de pilule (rayon 50px). Actif : fond noir, texte blanc. Inactif : transparent, texte noir. figmaSans à 20px graisse 480. »
+- « Créer une étiquette de section : figmaMono 18px, majuscules, letter-spacing 0.54px, texte noir. Kern activé. »
+- « Créer du corps de texte à 20px figmaSans graisse 330, line-height 1.40, letter-spacing -0.14px. Noir Pur sur blanc. »
+
+### Guide d'Itération
+1. Utiliser les arrêts de graisse de la police variable avec précision : 320, 330, 340, 450, 480, 540, 700
+2. L'interface est toujours noir + blanc — ne jamais ajouter de couleurs au chrome
+3. Contours de focus en pointillés, pas pleins
+4. L'espacement des lettres est toujours négatif sur le corps, toujours positif sur les étiquettes mono
+5. Pilule (50px) pour les boutons/onglets, cercle (50%) pour les boutons icônes

open-design/design-systems/figma/DESIGN-id.md

@@ -0,0 +1,223 @@
+# Sistem Desain Terinspirasi dari Figma
+
+> Category: Desain & Kreatif
+> Alat desain kolaboratif. Warna-warni cerah, playful namun profesional.
+
+## 1. Tema Visual & Atmosfer
+
+Antarmuka Figma adalah alat desain yang mendesain dirinya sendiri — sebuah mahakarya kecanggihan tipografi di mana font variabel kustom (figmaSans) bermodulasi antara sangat tipis (weight 320) hingga tebal (weight 700) dengan titik-titik intermediat yang tidak biasa (330, 340, 450, 480, 540) yang jarang dijelajahi oleh kebanyakan sistem tipe. Kontrol weight yang granular ini memberikan setiap elemen teks visual weight yang dikalibrasi secara presisi, menciptakan hierarki melalui perbedaan mikro alih-alih instrumen tumpul berupa "regular vs bold."
+
+Halaman ini menghadirkan dualitas yang menarik: chrome antarmuka sepenuhnya hitam-putih (hanya `#000000` dan `#ffffff` yang terdeteksi sebagai warna), sementara bagian hero dan tampilan produk meledak dengan gradien multi-warna yang semarak — hijau elektrik, kuning cerah, ungu tua, merah muda menyala. Pemisahan ini berarti sistem desain itu sendiri tidak berwarna, menjadikan output produk yang berwarna sebagai konten utama. Halaman pemasaran Figma pada dasarnya adalah dinding galeri putih yang memajang karya seni berwarna.
+
+Yang membuat Figma berbeda selain font variabel adalah geometri lingkaran dan pill-nya. Tombol menggunakan radius 50px (pill) atau 50% (lingkaran sempurna untuk tombol ikon), menciptakan nuansa organik seperti palet alat. Indikator fokus bergaris putus-putus (`dashed 2px`) adalah pilihan desain yang disengaja yang menggemakan handle seleksi di editor Figma — bahasa UI website merepresentasikan bahasa UI produk.
+
+**Karakteristik Utama:**
+- Font variabel kustom (figmaSans) dengan titik weight yang tidak biasa: 320, 330, 340, 450, 480, 540, 700
+- Chrome antarmuka hitam-putih secara ketat — warna hanya ada dalam konten produk
+- figmaMono untuk label teknis huruf besar dengan letter-spacing lebar
+- Geometri tombol pill (50px) dan lingkaran (50%)
+- Garis fokus putus-putus menggemakan handle seleksi editor Figma
+- Gradien hero multi-warna yang semarak (hijau, kuning, ungu, merah muda)
+- Fitur OpenType `"kern"` diaktifkan secara global
+- Letter-spacing negatif di seluruh halaman — bahkan teks isi pada -0.14px hingga -0.26px
+
+## 2. Palet Warna & Peran
+
+### Primer
+- **Hitam Murni** (`#000000`): Semua teks, semua tombol solid, semua border. Satu-satunya "warna" antarmuka.
+- **Putih Murni** (`#ffffff`): Semua latar belakang, tombol putih, teks di permukaan gelap. Separuh lainnya dari pasangan biner ini.
+
+*Catatan: Situs pemasaran Figma HANYA menggunakan kedua warna ini untuk lapisan antarmukanya. Semua warna cerah muncul secara eksklusif di screenshot produk, gradien hero, dan konten yang disematkan.*
+
+### Permukaan & Latar Belakang
+- **Putih Murni** (`#ffffff`): Latar belakang halaman utama dan permukaan kartu.
+- **Hitam Kaca** (`rgba(0, 0, 0, 0.08)`): Overlay gelap halus untuk tombol lingkaran sekunder dan efek kaca.
+- **Putih Kaca** (`rgba(255, 255, 255, 0.16)`): Overlay kaca buram untuk tombol di permukaan gelap/berwarna.
+
+### Sistem Gradien
+- **Gradien Hero**: Gradien multi-titik yang semarak menggunakan hijau elektrik, kuning cerah, ungu tua, dan merah muda menyala. Gradien ini adalah tanda visual khas bagian hero — mewakili kemungkinan kreatif dari alat tersebut.
+- **Gradien Bagian Produk**: Area produk individual (Design, Dev Mode, Prototyping) dapat menggunakan tema warna yang berbeda dalam tampilannya.
+
+## 3. Aturan Tipografi
+
+### Keluarga Font
+- **Primer**: `figmaSans`, dengan fallback: `figmaSans Fallback, SF Pro Display, system-ui, helvetica`
+- **Monospace / Label**: `figmaMono`, dengan fallback: `figmaMono Fallback, SF Mono, menlo`
+
+### Hierarki
+
+| Peran | Font | Ukuran | Weight | Tinggi Baris | Letter Spacing | Catatan |
+|------|------|------|--------|-------------|----------------|-------|
+| Display / Hero | figmaSans | 86px (5.38rem) | 400 | 1.00 (ketat) | -1.72px | Dampak maksimum, tracking ekstrem |
+| Judul Bagian | figmaSans | 64px (4rem) | 400 | 1.10 (ketat) | -0.96px | Judul bagian fitur |
+| Sub-judul | figmaSans | 26px (1.63rem) | 540 | 1.35 | -0.26px | Teks bagian yang ditekankan |
+| Sub-judul Ringan | figmaSans | 26px (1.63rem) | 340 | 1.35 | -0.26px | Teks bagian berbobot ringan |
+| Judul Fitur | figmaSans | 24px (1.5rem) | 700 | 1.45 | normal | Judul kartu tebal |
+| Isi Besar | figmaSans | 20px (1.25rem) | 330–450 | 1.30–1.40 | -0.1px to -0.14px | Deskripsi, intro |
+| Isi / Tombol | figmaSans | 16px (1rem) | 330–400 | 1.40–1.45 | -0.14px to normal | Isi standar, nav, tombol |
+| Isi Ringan | figmaSans | 18px (1.13rem) | 320 | 1.45 | -0.26px to normal | Teks isi berbobot ringan |
+| Label Mono | figmaMono | 18px (1.13rem) | 400 | 1.30 (ketat) | 0.54px | Label bagian huruf besar |
+| Mono Kecil | figmaMono | 12px (0.75rem) | 400 | 1.00 (ketat) | 0.6px | Tag kecil huruf besar |
+
+### Prinsip
+- **Presisi font variabel**: figmaSans menggunakan weight yang jarang disentuh oleh kebanyakan sistem — 320, 330, 340, 450, 480, 540. Ini menciptakan hierarki melalui perbedaan weight yang halus, bukan lompatan dramatis. Perbedaan antara 330 dan 340 hampir tidak terlihat tetapi signifikan secara struktural.
+- **Ringan sebagai dasar**: Sebagian besar teks isi menggunakan 320–340 (lebih ringan dari 400 "regular" yang biasa), menciptakan pengalaman membaca yang etherial dan lapang yang sesuai dengan estetika alat desain.
+- **Kern di mana-mana**: Setiap elemen teks mengaktifkan fitur OpenType `"kern"` — kerning bukan pilihan, melainkan struktural.
+- **Tracking negatif secara default**: Bahkan teks isi menggunakan -0.1px hingga -0.26px letter-spacing, menciptakan teks yang seragam ketat. Teks display semakin dikompresi hingga -0.96px dan -1.72px.
+- **Mono untuk struktur**: figmaMono dalam huruf besar dengan letter-spacing positif (0.54px–0.6px) menciptakan label penanda teknis.
+
+## 4. Gaya Komponen
+
+### Tombol
+
+**Solid Hitam (Pill)**
+- Latar belakang: Hitam Murni (`#000000`)
+- Teks: Putih Murni (`#ffffff`)
+- Radius: lingkaran (50%) untuk tombol ikon
+- Fokus: garis putus-putus 2px
+- Penekanan maksimum
+
+**Pill Putih**
+- Latar belakang: Putih Murni (`#ffffff`)
+- Teks: Hitam Murni (`#000000`)
+- Padding: 8px 18px 10px (vertikal asimetris)
+- Radius: pill (50px)
+- Fokus: garis putus-putus 2px
+- CTA standar di permukaan gelap/berwarna
+
+**Kaca Gelap**
+- Latar belakang: `rgba(0, 0, 0, 0.08)` (overlay gelap halus)
+- Teks: Hitam Murni
+- Radius: lingkaran (50%)
+- Fokus: garis putus-putus 2px
+- Aksi sekunder di permukaan terang
+
+**Kaca Terang**
+- Latar belakang: `rgba(255, 255, 255, 0.16)` (kaca buram)
+- Teks: Putih Murni
+- Radius: lingkaran (50%)
+- Fokus: garis putus-putus 2px
+- Aksi sekunder di permukaan gelap/berwarna
+
+### Kartu & Kontainer
+- Latar belakang: Putih Murni
+- Border: tidak ada atau minimal
+- Radius: 6px (kontainer kecil), 8px (gambar, kartu, dialog)
+- Shadow: efek elevasi halus hingga sedang
+- Screenshot produk sebagai konten kartu
+
+### Navigasi
+- Nav horizontal bersih di atas putih
+- Logo: wordmark Figma dalam hitam
+- Tab produk: navigasi tab berbentuk pill (50px)
+- Tautan: teks hitam, dekorasi garis bawah 1px
+- CTA: Tombol pill hitam
+- Hover: warna teks melalui variabel CSS
+
+### Komponen Khas
+
+**Bilah Tab Produk**
+- Tab berbentuk pill horizontal (radius 50px)
+- Setiap tab mewakili area produk Figma (Design, Dev Mode, Prototyping, dll.)
+- Tab aktif disorot
+
+**Bagian Gradien Hero**
+- Latar belakang gradien multi-warna penuh lebar yang semarak
+- Overlay teks putih dengan judul display 86px
+- Screenshot produk melayang di dalam gradien
+
+**Indikator Fokus Putus-putus**
+- Semua elemen interaktif menggunakan garis `dashed 2px` pada fokus
+- Merepresentasikan handle seleksi di editor Figma
+- Pilihan meta-desain yang menghubungkan website dan produk
+
+## 5. Prinsip Tata Letak
+
+### Sistem Spasi
+- Unit dasar: 8px
+- Skala: 1px, 2px, 4px, 4.5px, 8px, 10px, 12px, 16px, 18px, 24px, 32px, 40px, 46px, 48px, 50px
+
+### Grid & Kontainer
+- Lebar kontainer maksimum: hingga 1920px
+- Hero: gradien penuh lebar dengan konten di tengah
+- Bagian produk: tampilan bergantian
+- Footer: bagian penuh lebar gelap
+- Responsif dari 559px hingga 1920px
+
+### Filosofi Whitespace
+- **Ritme seperti galeri**: Spasi yang lebar membiarkan setiap bagian produk bernafas sebagai pamerannya sendiri.
+- **Bagian warna sebagai nafas visual**: Gradien hero dan tampilan produk memberikan relief kromatik di antara bagian antarmuka monokrom.
+
+### Skala Border Radius
+- Minimal (2px): Elemen tautan kecil
+- Halus (6px): Kontainer kecil, pemisah
+- Nyaman (8px): Kartu, gambar, dialog
+- Pill (50px): Tombol tab, CTA
+- Lingkaran (50%): Tombol ikon, elemen melingkar
+
+## 6. Kedalaman & Elevasi
+
+| Level | Perlakuan | Penggunaan |
+|-------|-----------|-----|
+| Datar (Level 0) | Tanpa shadow | Latar belakang halaman, sebagian besar teks |
+| Permukaan (Level 1) | Kartu putih di atas bagian gradien/gelap | Kartu, tampilan produk |
+| Ditinggikan (Level 2) | Shadow halus | Kartu melayang, status hover |
+
+**Filosofi Shadow**: Figma menggunakan shadow secara hemat. Mekanisme kedalaman utama adalah **kontras latar belakang** (konten putih di bagian berwarna/gelap) dan dimensionalitas inheren dari screenshot produk itu sendiri.
+
+## 7. Yang Boleh dan Tidak Boleh Dilakukan
+
+### Boleh Dilakukan
+- Gunakan figmaSans dengan weight variabel yang presisi (320–540) — kontrol weight granular ADALAH desainnya
+- Pertahankan antarmuka sepenuhnya hitam-putih — warna berasal hanya dari konten produk
+- Gunakan geometri pill (50px) dan lingkaran (50%) untuk semua elemen interaktif
+- Terapkan garis fokus putus-putus 2px — pola aksesibilitas khas
+- Aktifkan fitur `"kern"` pada semua teks
+- Gunakan figmaMono dalam huruf besar dengan letter-spacing positif untuk label
+- Terapkan letter-spacing negatif di seluruh halaman (-0.1px hingga -1.72px)
+
+### Tidak Boleh Dilakukan
+- Jangan tambahkan warna antarmuka — palet monokrom bersifat mutlak
+- Jangan gunakan weight font standar (400, 500, 600, 700) — gunakan titik unik font variabel (320, 330, 340, 450, 480, 540)
+- Jangan gunakan sudut tajam pada tombol — hanya geometri pill dan lingkaran
+- Jangan gunakan garis fokus solid — putus-putus adalah tanda khasnya
+- Jangan tingkatkan weight font isi di atas 450 — estetika berbobot ringan adalah intinya
+- Jangan gunakan letter-spacing positif pada teks isi — selalu negatif
+
+## 8. Perilaku Responsif
+
+### Breakpoint
+| Nama | Lebar | Perubahan Utama |
+|------|-------|-------------|
+| Mobile Kecil | <560px | Tata letak kompak, tersusun |
+| Tablet | 560–768px | Penyesuaian minor |
+| Desktop Kecil | 768–960px | Tata letak 2 kolom |
+| Desktop | 960–1280px | Tata letak standar |
+| Desktop Besar | 1280–1440px | Diperluas |
+| Ultra-lebar | 1440–1920px | Lebar maksimum |
+
+### Strategi Collapsing
+- Teks hero: 86px → 64px → 48px
+- Tab produk: gulir horizontal di mobile
+- Bagian fitur: kolom tunggal tersusun
+- Footer: multi-kolom → tersusun
+
+## 9. Panduan Prompt untuk Agen
+
+### Referensi Warna Cepat
+- Segalanya: "Pure Black (#000000)" dan "Pure White (#ffffff)"
+- Kaca Gelap: "rgba(0, 0, 0, 0.08)"
+- Kaca Terang: "rgba(255, 255, 255, 0.16)"
+
+### Contoh Prompt Komponen
+- "Buat hero di atas gradien multi-warna yang semarak (hijau, kuning, ungu, merah muda). Judul pada 86px figmaSans weight 400, line-height 1.0, letter-spacing -1.72px. Teks putih. Tombol CTA pill putih (radius 50px, padding 8px 18px)."
+- "Desain bilah tab produk dengan tombol berbentuk pill (radius 50px). Aktif: latar belakang hitam, teks putih. Tidak aktif: transparan, teks hitam. figmaSans pada 20px weight 480."
+- "Buat label bagian: figmaMono 18px, huruf besar, letter-spacing 0.54px, teks hitam. Kern diaktifkan."
+- "Buat teks isi pada 20px figmaSans weight 330, line-height 1.40, letter-spacing -0.14px. Hitam Murni di atas putih."
+
+### Panduan Iterasi
+1. Gunakan titik weight font variabel secara presisi: 320, 330, 340, 450, 480, 540, 700
+2. Antarmuka selalu hitam + putih — jangan pernah tambahkan warna pada chrome
+3. Garis fokus putus-putus, bukan solid
+4. Letter-spacing selalu negatif pada isi, selalu positif pada label mono
+5. Pill (50px) untuk tombol/tab, lingkaran (50%) untuk tombol ikon

open-design/design-systems/figma/DESIGN-it.md

@@ -0,0 +1,223 @@
+# Design System Inspired by Figma
+
+> Category: Design e Creatività
+> Strumento di design collaborativo. Multicolore vivace, giocoso ma professionale.
+
+## 1. Tema Visivo e Atmosfera
+
+L'interfaccia di Figma è lo strumento di design che ha progettato sé stesso — un capolavoro di sofisticazione tipografica in cui un font variabile personalizzato (figmaSans) modula tra sottilissimo (weight 320) e grassetto (weight 700) con soste a valori intermedi insoliti (330, 340, 450, 480, 540) che la maggior parte dei sistemi tipografici non esplora mai. Questo controllo granulare del peso conferisce a ogni elemento testuale un peso visivo precisamente calibrato, creando gerarchia attraverso micro-differenze piuttosto che con lo strumento grossolano di "normale vs grassetto."
+
+La pagina presenta una dualità affascinante: il chrome dell'interfaccia è rigorosamente in bianco e nero (letteralmente solo `#000000` e `#ffffff` rilevati come colori), mentre la sezione hero e le vetrine dei prodotti esplodono con vivaci gradienti multicolore — verdi elettrici, gialli brillanti, viola profondi, rosa accesi. Questa separazione significa che il design system stesso è privo di colori, trattando l'output colorato del prodotto come il contenuto protagonista. La pagina marketing di Figma è essenzialmente una galleria con pareti bianche che espone arte colorata.
+
+Ciò che rende Figma distintiva oltre al font variabile è la sua geometria circolare e a pillola. I pulsanti usano un raggio di 50px (pillola) o 50% (cerchio perfetto per i pulsanti icona), creando un aspetto organico simile a una tavolozza di strumenti. L'indicatore di focus con contorno tratteggiato (`dashed 2px`) è una scelta di design deliberata che richiama le maniglie di selezione nell'editor di Figma stesso — il linguaggio UI del sito web fa riferimento al linguaggio UI del prodotto.
+
+**Caratteristiche Principali:**
+- Font variabile personalizzato (figmaSans) con pesi insoliti: 320, 330, 340, 450, 480, 540, 700
+- Chrome dell'interfaccia rigorosamente in bianco e nero — il colore esiste solo nel contenuto del prodotto
+- figmaMono per etichette tecniche in maiuscolo con ampia spaziatura tra lettere
+- Geometria dei pulsanti a pillola (50px) e circolare (50%)
+- Contorni di focus tratteggiati che richiamano le maniglie di selezione dell'editor di Figma
+- Gradienti hero multicolore vivaci (verde, giallo, viola, rosa)
+- Feature OpenType `"kern"` abilitata globalmente
+- Spaziatura tra lettere negativa ovunque — anche il testo corpo a -0.14px fino a -0.26px
+
+## 2. Palette Colori e Ruoli
+
+### Primari
+- **Nero puro** (`#000000`): Tutto il testo, tutti i pulsanti solidi, tutti i bordi. L'unico "colore" dell'interfaccia.
+- **Bianco puro** (`#ffffff`): Tutti gli sfondi, i pulsanti bianchi, il testo su superfici scure. L'altra metà del binario.
+
+*Nota: Il sito marketing di Figma usa SOLO questi due colori per il suo livello interfaccia. Tutti i colori vivaci appaiono esclusivamente negli screenshot del prodotto, nei gradienti hero e nel contenuto incorporato.*
+
+### Superfici e Sfondi
+- **Bianco puro** (`#ffffff`): Sfondo principale della pagina e superfici delle card.
+- **Nero vetro** (`rgba(0, 0, 0, 0.08)`): Sottile overlay scuro per i pulsanti circolari secondari e gli effetti vetro.
+- **Bianco vetro** (`rgba(255, 255, 255, 0.16)`): Overlay vetro smerigliato per i pulsanti su superfici scure/colorate.
+
+### Sistema di Gradienti
+- **Gradiente Hero**: Un vivace gradiente multi-stop che usa verde elettrico, giallo brillante, viola profondo e rosa acceso. Questo gradiente è la firma visiva della sezione hero — rappresenta le possibilità creative dello strumento.
+- **Gradienti delle Sezioni Prodotto**: Le singole aree del prodotto (Design, Dev Mode, Prototipazione) possono usare temi di colore distinti nelle loro vetrine.
+
+## 3. Regole Tipografiche
+
+### Famiglia di Font
+- **Primario**: `figmaSans`, con fallback: `figmaSans Fallback, SF Pro Display, system-ui, helvetica`
+- **Monospace / Etichette**: `figmaMono`, con fallback: `figmaMono Fallback, SF Mono, menlo`
+
+### Gerarchia
+
+| Ruolo | Font | Dimensione | Peso | Altezza Riga | Spaziatura Lettere | Note |
+|------|------|------|--------|-------------|----------------|-------|
+| Display / Hero | figmaSans | 86px (5.38rem) | 400 | 1.00 (stretto) | -1.72px | Impatto massimo, tracking estremo |
+| Intestazione Sezione | figmaSans | 64px (4rem) | 400 | 1.10 (stretto) | -0.96px | Titoli sezione feature |
+| Sotto-intestazione | figmaSans | 26px (1.63rem) | 540 | 1.35 | -0.26px | Testo sezione enfatizzato |
+| Sotto-intestazione Leggero | figmaSans | 26px (1.63rem) | 340 | 1.35 | -0.26px | Testo sezione a peso leggero |
+| Titolo Feature | figmaSans | 24px (1.5rem) | 700 | 1.45 | normal | Intestazioni card in grassetto |
+| Corpo Grande | figmaSans | 20px (1.25rem) | 330–450 | 1.30–1.40 | -0.1px a -0.14px | Descrizioni, introduzioni |
+| Corpo / Pulsante | figmaSans | 16px (1rem) | 330–400 | 1.40–1.45 | -0.14px a normal | Corpo standard, navigazione, pulsanti |
+| Corpo Leggero | figmaSans | 18px (1.13rem) | 320 | 1.45 | -0.26px a normal | Testo corpo a peso leggero |
+| Etichetta Mono | figmaMono | 18px (1.13rem) | 400 | 1.30 (stretto) | 0.54px | Etichette sezione in maiuscolo |
+| Mono Piccolo | figmaMono | 12px (0.75rem) | 400 | 1.00 (stretto) | 0.6px | Tag minuscoli in maiuscolo |
+
+### Principi
+- **Precisione del font variabile**: figmaSans usa pesi che la maggior parte dei sistemi non utilizza mai — 320, 330, 340, 450, 480, 540. Questo crea gerarchia attraverso sottili differenze di peso piuttosto che salti drammatici. La differenza tra 330 e 340 è quasi impercettibile ma strutturalmente significativa.
+- **Il leggero come base**: La maggior parte del testo corpo usa 320–340 (più leggero del tipico 400 "normale"), creando un'esperienza di lettura eterea e ariosa che si adatta all'estetica dello strumento di design.
+- **Kern ovunque**: Ogni elemento testuale abilita la feature OpenType `"kern"` — la crenatura non è opzionale, è strutturale.
+- **Tracking negativo per default**: Anche il testo corpo usa da -0.1px a -0.26px di spaziatura tra lettere, creando testo universalmente compatto. Il testo display si comprime ulteriormente a -0.96px e -1.72px.
+- **Mono per la struttura**: figmaMono in maiuscolo con spaziatura tra lettere positiva (0.54px–0.6px) crea etichette di segnalazione tecnica.
+
+## 4. Stili dei Componenti
+
+### Pulsanti
+
+**Nero Solido (Pillola)**
+- Sfondo: Nero puro (`#000000`)
+- Testo: Bianco puro (`#ffffff`)
+- Raggio: cerchio (50%) per i pulsanti icona
+- Focus: contorno dashed 2px
+- Massima enfasi
+
+**Pillola Bianca**
+- Sfondo: Bianco puro (`#ffffff`)
+- Testo: Nero puro (`#000000`)
+- Padding: 8px 18px 10px (verticale asimmetrico)
+- Raggio: pillola (50px)
+- Focus: contorno dashed 2px
+- CTA standard su superfici scure/colorate
+
+**Vetro Scuro**
+- Sfondo: `rgba(0, 0, 0, 0.08)` (sottile overlay scuro)
+- Testo: Nero puro
+- Raggio: cerchio (50%)
+- Focus: contorno dashed 2px
+- Azione secondaria su superfici chiare
+
+**Vetro Chiaro**
+- Sfondo: `rgba(255, 255, 255, 0.16)` (vetro smerigliato)
+- Testo: Bianco puro
+- Raggio: cerchio (50%)
+- Focus: contorno dashed 2px
+- Azione secondaria su superfici scure/colorate
+
+### Card e Contenitori
+- Sfondo: Bianco puro
+- Bordo: nessuno o minimo
+- Raggio: 6px (contenitori piccoli), 8px (immagini, card, dialog)
+- Ombra: effetti di elevazione da sottile a medio
+- Screenshot del prodotto come contenuto delle card
+
+### Navigazione
+- Navigazione orizzontale pulita su sfondo bianco
+- Logo: wordmark di Figma in nero
+- Tab prodotto: navigazione a tab a forma di pillola (50px)
+- Link: testo nero, decorazione sottolineatura 1px
+- CTA: pulsante pillola nero
+- Hover: colore del testo tramite variabile CSS
+
+### Componenti Distintivi
+
+**Barra Tab Prodotto**
+- Tab a forma di pillola orizzontale (raggio 50px)
+- Ogni tab rappresenta un'area del prodotto Figma (Design, Dev Mode, Prototipazione, ecc.)
+- Tab attivo evidenziato
+
+**Sezione Gradiente Hero**
+- Sfondo gradiente multicolore vivace a larghezza piena
+- Testo bianco sovrapposto con intestazione display da 86px
+- Screenshot del prodotto fluttuanti all'interno del gradiente
+
+**Indicatori di Focus Tratteggiati**
+- Tutti gli elementi interattivi usano il contorno `dashed 2px` al focus
+- Richiamano le maniglie di selezione nell'editor di Figma
+- Una scelta meta-design che collega il sito web e il prodotto
+
+## 5. Principi di Layout
+
+### Sistema di Spaziatura
+- Unità base: 8px
+- Scala: 1px, 2px, 4px, 4.5px, 8px, 10px, 12px, 16px, 18px, 24px, 32px, 40px, 46px, 48px, 50px
+
+### Griglia e Contenitore
+- Larghezza massima del contenitore: fino a 1920px
+- Hero: gradiente a larghezza piena con contenuto centrato
+- Sezioni prodotto: vetrine alternate
+- Footer: sezione scura a larghezza piena
+- Responsivo da 559px a 1920px
+
+### Filosofia dello Spazio Bianco
+- **Ritmo da galleria**: La spaziatura generosa permette a ogni sezione prodotto di respirare come una propria esibizione.
+- **Le sezioni colorate come respiro visivo**: Il gradiente hero e le vetrine dei prodotti forniscono sollievo cromatico tra le sezioni di interfaccia monocromatiche.
+
+### Scala dei Raggi dei Bordi
+- Minimale (2px): Piccoli elementi link
+- Sottile (6px): Contenitori piccoli, divisori
+- Comodo (8px): Card, immagini, dialog
+- Pillola (50px): Pulsanti tab, CTA
+- Cerchio (50%): Pulsanti icona, elementi circolari
+
+## 6. Profondità ed Elevazione
+
+| Livello | Trattamento | Uso |
+|-------|-----------|-----|
+| Piatto (Livello 0) | Nessuna ombra | Sfondo della pagina, la maggior parte del testo |
+| Superficie (Livello 1) | Card bianca su sezione gradiente/scura | Card, vetrine prodotto |
+| Elevato (Livello 2) | Ombra sottile | Card fluttuanti, stati hover |
+
+**Filosofia delle Ombre**: Figma usa le ombre con parsimonia. I principali meccanismi di profondità sono il **contrasto di sfondo** (contenuto bianco su sezioni colorate/scure) e la dimensionalità intrinseca degli screenshot del prodotto stessi.
+
+## 7. Da Fare e Da Evitare
+
+### Da Fare
+- Usare figmaSans con pesi variabili precisi (320–540) — il controllo granulare del peso È il design
+- Mantenere l'interfaccia rigorosamente in bianco e nero — il colore proviene solo dal contenuto del prodotto
+- Usare la geometria a pillola (50px) e circolare (50%) per tutti gli elementi interattivi
+- Applicare contorni di focus dashed 2px — il pattern di accessibilità caratteristico
+- Abilitare la feature `"kern"` su tutto il testo
+- Usare figmaMono in maiuscolo con spaziatura tra lettere positiva per le etichette
+- Applicare spaziatura tra lettere negativa ovunque (da -0.1px a -1.72px)
+
+### Da Evitare
+- Non aggiungere colori all'interfaccia — la palette monocromatica è assoluta
+- Non usare pesi di font standard (400, 500, 600, 700) — usare i valori unici del font variabile (320, 330, 340, 450, 480, 540)
+- Non usare angoli netti sui pulsanti — solo geometria a pillola e circolare
+- Non usare contorni di focus solidi — il tratteggiato è la firma
+- Non aumentare il peso del font corpo sopra 450 — l'estetica a peso leggero è fondamentale
+- Non usare spaziatura tra lettere positiva sul testo corpo — è sempre negativa
+
+## 8. Comportamento Responsivo
+
+### Breakpoint
+| Nome | Larghezza | Modifiche Principali |
+|------|-------|-------------|
+| Mobile Piccolo | <560px | Layout compatto, impilato |
+| Tablet | 560–768px | Aggiustamenti minori |
+| Desktop Piccolo | 768–960px | Layout a 2 colonne |
+| Desktop | 960–1280px | Layout standard |
+| Desktop Grande | 1280–1440px | Espanso |
+| Ultra-wide | 1440–1920px | Larghezza massima |
+
+### Strategia di Collasso
+- Testo hero: 86px → 64px → 48px
+- Tab prodotto: scroll orizzontale su mobile
+- Sezioni feature: colonna singola impilata
+- Footer: multi-colonna → impilato
+
+## 9. Guida ai Prompt per Agenti
+
+### Riferimento Rapido Colori
+- Tutto: "Nero puro (#000000)" e "Bianco puro (#ffffff)"
+- Vetro Scuro: "rgba(0, 0, 0, 0.08)"
+- Vetro Chiaro: "rgba(255, 255, 255, 0.16)"
+
+### Esempi di Prompt per Componenti
+- "Crea un hero su un gradiente multicolore vivace (verde, giallo, viola, rosa). Titolo a 86px figmaSans peso 400, line-height 1.0, letter-spacing -1.72px. Testo bianco. Pulsante CTA pillola bianco (raggio 50px, padding 8px 18px)."
+- "Progetta una barra tab prodotto con pulsanti a forma di pillola (raggio 50px). Attivo: sfondo nero, testo bianco. Inattivo: trasparente, testo nero. figmaSans a 20px peso 480."
+- "Costruisci un'etichetta sezione: figmaMono 18px, maiuscolo, letter-spacing 0.54px, testo nero. Kern abilitato."
+- "Crea testo corpo a 20px figmaSans peso 330, line-height 1.40, letter-spacing -0.14px. Nero puro su bianco."
+
+### Guida all'Iterazione
+1. Usare i valori di peso del font variabile con precisione: 320, 330, 340, 450, 480, 540, 700
+2. L'interfaccia è sempre nero + bianco — non aggiungere mai colori al chrome
+3. Contorni di focus tratteggiati, non solidi
+4. La spaziatura tra lettere è sempre negativa sul corpo, sempre positiva sulle etichette mono
+5. Pillola (50px) per pulsanti/tab, cerchio (50%) per i pulsanti icona

open-design/design-systems/figma/DESIGN-ja.md

@@ -0,0 +1,223 @@
+# Figmaにインスパイアされたデザインシステム
+
+> Category: デザイン・クリエイティブ
+> コラボレーティブデザインツール。鮮やかなマルチカラー、遊び心と専門性を兼ね備えた表現。
+
+## 1. ビジュアルテーマと雰囲気
+
+Figmaのインターフェースは、自らをデザインしたデザインツールだ——カスタム可変フォント（figmaSans）が、極細（ウェイト320）からボールド（ウェイト700）まで、一般的なタイポグラフィシステムでは探求されることのない珍しい中間値（330、340、450、480、540）を経由しながら変調する、タイポグラフィの洗練さを極めた傑作である。この精緻なウェイト制御により、すべてのテキスト要素が正確に調整されたビジュアルウェイトを持ち、「レギュラーとボールド」という粗い手法ではなく、微細な差異によって階層構造が生まれる。
+
+このページには興味深い二重性がある。インターフェースのクローム部分は厳密に白黒（検出される色は文字通り`#000000`と`#ffffff`のみ）なのに対し、ヒーローセクションとプロダクトショーケースは電気的なグリーン、鮮やかなイエロー、深みのあるパープル、ホットピンクといった鮮烈なマルチカラーグラデーションで溢れかえる。この分離により、デザインシステム自体は無色となり、プロダクトのカラフルなアウトプットをヒーローコンテンツとして扱っている。Figmaのマーケティングページはカラフルなアートをディスプレイするホワイトギャラリーの壁、といえるだろう。
+
+可変フォントを超えてFigmaを際立たせるのは、円形とピル形のジオメトリだ。ボタンには50pxのラジウス（ピル）または50%（アイコンボタン用の完全な円）が用いられ、オーガニックでツールパレットのような質感を生み出している。破線のフォーカスインジケーター（`dashed 2px`）は、Figmaエディター自体のセレクションハンドルを参照した意図的なデザイン上の選択だ——ウェブサイトのUIランゲージがプロダクトのUIランゲージを引用している。
+
+**Key Characteristics:**
+- カスタム可変フォント（figmaSans）、珍しいウェイト値：320、330、340、450、480、540、700
+- インターフェースクロームは厳密に白黒——カラーはプロダクトコンテンツにのみ存在する
+- figmaMonoを大文字の技術ラベルに使用し、ワイドなレタースペーシングを適用
+- ピル形（50px）と円形（50%）のボタンジオメトリ
+- Figmaエディターのセレクションハンドルを参照した破線フォーカスアウトライン
+- 鮮やかなマルチカラーヒーローグラデーション（グリーン、イエロー、パープル、ピンク）
+- OpenTypeの`"kern"`フィーチャーをグローバルに有効化
+- 全体にわたるネガティブレタースペーシング——ボディテキストでも-0.14pxから-0.26px
+
+## 2. カラーパレットと役割
+
+### プライマリ
+- **ピュアブラック** (`#000000`): すべてのテキスト、すべてのソリッドボタン、すべてのボーダー。インターフェースの唯一の「カラー」。
+- **ピュアホワイト** (`#ffffff`): すべての背景、ホワイトボタン、ダーク面上のテキスト。バイナリのもう一方。
+
+*注記：Figmaのマーケティングサイトは、インターフェースレイヤーにこの2色のみを使用している。すべての鮮やかな色は、プロダクトのスクリーンショット、ヒーローグラデーション、埋め込みコンテンツにのみ現れる。*
+
+### サーフェスと背景
+- **ピュアホワイト** (`#ffffff`): メインページの背景とカードのサーフェス。
+- **グラスブラック** (`rgba(0, 0, 0, 0.08)`): セカンダリの円形ボタンとグラスエフェクトのための微細なダークオーバーレイ。
+- **グラスホワイト** (`rgba(255, 255, 255, 0.16)`): ダーク・カラード面上のボタン用フロストグラスオーバーレイ。
+
+### グラデーションシステム
+- **ヒーローグラデーション**: 電気的なグリーン、鮮やかなイエロー、深みのあるパープル、ホットピンクを使用した鮮烈なマルチストップグラデーション。このグラデーションはヒーローセクションのビジュアルシグネチャであり、ツールのクリエイティブな可能性を表現している。
+- **プロダクトセクショングラデーション**: 各プロダクトエリア（Design、Dev Mode、Prototyping）は、ショーケースで固有のカラーテーマを使用する場合がある。
+
+## 3. タイポグラフィルール
+
+### フォントファミリー
+- **プライマリ**: `figmaSans`、フォールバック: `figmaSans Fallback, SF Pro Display, system-ui, helvetica`
+- **モノスペース / ラベル**: `figmaMono`、フォールバック: `figmaMono Fallback, SF Mono, menlo`
+
+### 階層
+
+| 役割 | フォント | サイズ | ウェイト | 行高 | レタースペーシング | 備考 |
+|------|------|------|--------|-------------|----------------|-------|
+| ディスプレイ / ヒーロー | figmaSans | 86px (5.38rem) | 400 | 1.00（タイト） | -1.72px | 最大インパクト、極端なトラッキング |
+| セクション見出し | figmaSans | 64px (4rem) | 400 | 1.10（タイト） | -0.96px | フィーチャーセクションのタイトル |
+| サブ見出し | figmaSans | 26px (1.63rem) | 540 | 1.35 | -0.26px | 強調されたセクションテキスト |
+| サブ見出しライト | figmaSans | 26px (1.63rem) | 340 | 1.35 | -0.26px | ライトウェイトのセクションテキスト |
+| フィーチャータイトル | figmaSans | 24px (1.5rem) | 700 | 1.45 | normal | ボールドなカード見出し |
+| ボディラージ | figmaSans | 20px (1.25rem) | 330–450 | 1.30–1.40 | -0.1px to -0.14px | 説明文、イントロ |
+| ボディ / ボタン | figmaSans | 16px (1rem) | 330–400 | 1.40–1.45 | -0.14px to normal | 標準ボディ、ナビ、ボタン |
+| ボディライト | figmaSans | 18px (1.13rem) | 320 | 1.45 | -0.26px to normal | ライトウェイトのボディテキスト |
+| モノラベル | figmaMono | 18px (1.13rem) | 400 | 1.30（タイト） | 0.54px | 大文字のセクションラベル |
+| モノスモール | figmaMono | 12px (0.75rem) | 400 | 1.00（タイト） | 0.6px | 大文字の極小タグ |
+
+### 原則
+- **可変フォントの精密さ**: figmaSansは多くのシステムが扱わないウェイト値——320、330、340、450、480、540——を使用する。これにより、劇的なジャンプではなく微細なウェイト差によって階層構造が生まれる。330と340の差はほぼ知覚不可能だが、構造的には重要である。
+- **ライトをベースに**: ほとんどのボディテキストは320〜340（典型的な400「レギュラー」より軽い）を使用し、デザインツールの美学に合致した、エーテリアルで軽やかな読書体験を生み出している。
+- **どこでもカーン**: すべてのテキスト要素でOpenTypeの`"kern"`フィーチャーを有効にする——カーニングはオプションではなく、構造的な要素だ。
+- **ネガティブトラッキングをデフォルトに**: ボディテキストでも-0.1pxから-0.26pxのレタースペーシングを使用し、全体的にタイトなテキストを実現する。ディスプレイテキストはさらに-0.96px、-1.72pxまで圧縮される。
+- **構造にはモノ**: figmaMonoを大文字でポジティブなレタースペーシング（0.54px〜0.6px）とともに使用することで、技術的な道標ラベルを生み出す。
+
+## 4. コンポーネントスタイリング
+
+### ボタン
+
+**ブラックソリッド（ピル）**
+- 背景: ピュアブラック (`#000000`)
+- テキスト: ピュアホワイト (`#ffffff`)
+- ラジウス: アイコンボタンには円形（50%）
+- フォーカス: 破線2pxアウトライン
+- 最大エンファシス
+
+**ホワイトピル**
+- 背景: ピュアホワイト (`#ffffff`)
+- テキスト: ピュアブラック (`#000000`)
+- パディング: 8px 18px 10px（非対称の垂直方向）
+- ラジウス: ピル（50px）
+- フォーカス: 破線2pxアウトライン
+- ダーク・カラードサーフェス上の標準CTA
+
+**グラスダーク**
+- 背景: `rgba(0, 0, 0, 0.08)` （微細なダークオーバーレイ）
+- テキスト: ピュアブラック
+- ラジウス: 円形（50%）
+- フォーカス: 破線2pxアウトライン
+- ライトサーフェス上のセカンダリアクション
+
+**グラスライト**
+- 背景: `rgba(255, 255, 255, 0.16)` （フロストグラス）
+- テキスト: ピュアホワイト
+- ラジウス: 円形（50%）
+- フォーカス: 破線2pxアウトライン
+- ダーク・カラードサーフェス上のセカンダリアクション
+
+### カードとコンテナ
+- 背景: ピュアホワイト
+- ボーダー: なし、または最小限
+- ラジウス: 6px（小コンテナ）、8px（画像、カード、ダイアログ）
+- シャドウ: 微細から中程度のエレベーションエフェクト
+- プロダクトスクリーンショットをカードコンテンツとして使用
+
+### ナビゲーション
+- ホワイト上のクリーンな水平ナビ
+- ロゴ: ブラックのFigmaワードマーク
+- プロダクトタブ: ピル形（50px）のタブナビゲーション
+- リンク: ブラックテキスト、1px下線デコレーション
+- CTA: ブラックピルボタン
+- ホバー: CSS変数によるテキストカラー
+
+### 特徴的なコンポーネント
+
+**プロダクトタブバー**
+- 水平ピル形タブ（50pxラジウス）
+- 各タブはFigmaのプロダクトエリアを表す（Design、Dev Mode、Prototypingなど）
+- アクティブタブをハイライト表示
+
+**ヒーローグラデーションセクション**
+- 全幅の鮮やかなマルチカラーグラデーション背景
+- 86pxディスプレイ見出しのホワイトテキストオーバーレイ
+- グラデーション内にフローティングするプロダクトスクリーンショット
+
+**破線フォーカスインジケーター**
+- すべてのインタラクティブ要素でフォーカス時に`dashed 2px`アウトラインを使用
+- Figmaエディターのセレクションハンドルを参照
+- ウェブサイトとプロダクトをつなぐメタデザイン上の選択
+
+## 5. レイアウトの原則
+
+### スペーシングシステム
+- ベースユニット: 8px
+- スケール: 1px, 2px, 4px, 4.5px, 8px, 10px, 12px, 16px, 18px, 24px, 32px, 40px, 46px, 48px, 50px
+
+### グリッドとコンテナ
+- 最大コンテナ幅: 1920pxまで
+- ヒーロー: 中央配置コンテンツの全幅グラデーション
+- プロダクトセクション: 交互に並ぶショーケース
+- フッター: ダークの全幅セクション
+- 559pxから1920pxまでレスポンシブ対応
+
+### ホワイトスペースの哲学
+- **ギャラリーのようなペーシング**: 余裕のあるスペーシングにより、各プロダクトセクションが独自の展示として息づく。
+- **カラーセクションを視覚的な息継ぎに**: グラデーションのヒーローとプロダクトショーケースが、モノクロームのインターフェースセクション間にクロマティックな安らぎを提供する。
+
+### ボーダーラジウスのスケール
+- 最小（2px）: 小さなリンク要素
+- 微細（6px）: 小コンテナ、区切り線
+- 快適（8px）: カード、画像、ダイアログ
+- ピル（50px）: タブボタン、CTA
+- 円形（50%）: アイコンボタン、円形要素
+
+## 6. 奥行きとエレベーション
+
+| レベル | 処理 | 用途 |
+|-------|-----------|-----|
+| フラット（レベル0） | シャドウなし | ページ背景、ほとんどのテキスト |
+| サーフェス（レベル1） | グラデーション・ダークセクション上のホワイトカード | カード、プロダクトショーケース |
+| エレベーテッド（レベル2） | 微細なシャドウ | フローティングカード、ホバー状態 |
+
+**シャドウの哲学**: Figmaはシャドウを控えめに使用する。主要な奥行きのメカニズムは**背景のコントラスト**（カラフル・ダークセクション上のホワイトコンテンツ）と、プロダクトスクリーンショット自体が持つ固有の立体感だ。
+
+## 7. すべきこととすべきでないこと
+
+### すべきこと
+- figmaSansを精密な可変ウェイト（320〜540）で使用する——粒度の細かいウェイト制御こそがデザインそのものだ
+- インターフェースを厳密に白黒に保つ——カラーはプロダクトコンテンツからのみもたらされる
+- すべてのインタラクティブ要素にピル（50px）と円形（50%）のジオメトリを使用する
+- 破線2pxフォーカスアウトラインを適用する——シグネチャとなるアクセシビリティパターン
+- すべてのテキストで`"kern"`フィーチャーを有効にする
+- figmaMonoをラベルに大文字・ポジティブレタースペーシングで使用する
+- 全体にネガティブレタースペーシングを適用する（-0.1pxから-1.72px）
+
+### すべきでないこと
+- インターフェースにカラーを追加しない——モノクロームパレットは絶対的なものだ
+- 標準フォントウェイト（400、500、600、700）を使用しない——可変フォント固有の値（320、330、340、450、480、540）を使用する
+- ボタンにシャープなコーナーを使用しない——ピルと円形のジオメトリのみ
+- ソリッドフォーカスアウトラインを使用しない——破線がシグネチャだ
+- ボディのフォントウェイトを450以上に上げない——ライトウェイトの美学がコアだ
+- ボディテキストにポジティブなレタースペーシングを使用しない——常にネガティブであるべきだ
+
+## 8. レスポンシブ挙動
+
+### ブレークポイント
+| 名前 | 幅 | 主な変更 |
+|------|-------|-------------|
+| スモールモバイル | <560px | コンパクトレイアウト、スタック |
+| タブレット | 560–768px | マイナーな調整 |
+| スモールデスクトップ | 768–960px | 2カラムレイアウト |
+| デスクトップ | 960–1280px | 標準レイアウト |
+| ラージデスクトップ | 1280–1440px | 拡張 |
+| ウルトラワイド | 1440–1920px | 最大幅 |
+
+### 折りたたみ戦略
+- ヒーローテキスト: 86px → 64px → 48px
+- プロダクトタブ: モバイルで水平スクロール
+- フィーチャーセクション: スタックされた単一カラム
+- フッター: 複数カラム → スタック
+
+## 9. エージェントプロンプトガイド
+
+### クイックカラーリファレンス
+- すべて: 「ピュアブラック（#000000）」と「ピュアホワイト（#ffffff）」
+- グラスダーク: 「rgba(0, 0, 0, 0.08)」
+- グラスライト: 「rgba(255, 255, 255, 0.16)」
+
+### コンポーネントプロンプトの例
+- 「鮮やかなマルチカラーグラデーション（グリーン、イエロー、パープル、ピンク）上にヒーローを作成する。ヘッドラインは86px figmaSans ウェイト400、行高1.0、レタースペーシング-1.72px。ホワイトテキスト。ホワイトピルCTAボタン（50pxラジウス、8px 18pxパディング）。」
+- 「ピル形ボタン（50pxラジウス）のプロダクトタブバーをデザインする。アクティブ: ブラック背景、ホワイトテキスト。非アクティブ: 透明、ブラックテキスト。figmaSans 20px ウェイト480。」
+- 「セクションラベルを作成する: figmaMono 18px、大文字、レタースペーシング0.54px、ブラックテキスト。カーン有効。」
+- 「ボディテキストを20px figmaSans ウェイト330、行高1.40、レタースペーシング-0.14pxで作成する。ホワイト上のピュアブラック。」
+
+### イテレーションガイド
+1. 可変フォントのウェイト値を精密に使用する: 320、330、340、450、480、540、700
+2. インターフェースは常にブラック＋ホワイト——クロームにカラーを追加しない
+3. フォーカスアウトラインは破線、ソリッドではない
+4. ボディのレタースペーシングは常にネガティブ、モノラベルは常にポジティブ
+5. ボタン・タブにはピル（50px）、アイコンボタンには円形（50%）

open-design/design-systems/figma/DESIGN-ko.md

@@ -0,0 +1,223 @@
+# Figma에서 영감받은 디자인 시스템
+
+> Category: 디자인 & 크리에이티브
+> 협업 디자인 도구. 선명한 다색상, 장난기 있으면서도 전문적인.
+
+## 1. 비주얼 테마 & 분위기
+
+Figma의 인터페이스는 스스로를 디자인한 디자인 도구입니다 — 커스텀 가변 폰트(figmaSans)가 극세(weight 320)에서 볼드(weight 700) 사이를 조율하되, 대부분의 타이포그래피 시스템이 결코 탐색하지 않는 특이한 중간 값(330, 340, 450, 480, 540)에 정류하는, 타이포그래피 정교함의 교과서적 사례입니다. 이 세밀한 굵기 제어 덕분에 모든 텍스트 요소는 정밀하게 조율된 시각적 무게를 지니며, "레귤러 대 볼드"라는 단순한 도구 대신 미세한 차이를 통해 위계를 만들어냅니다.
+
+이 페이지는 흥미로운 이중성을 드러냅니다. 인터페이스 크롬은 엄격하게 흑백(감지된 색상이 문자 그대로 `#000000`과 `#ffffff`뿐)인 반면, 히어로 섹션과 제품 쇼케이스는 선명한 다색 그라디언트 — 일렉트릭 그린, 밝은 노랑, 짙은 보라, 핫 핑크 — 로 폭발합니다. 이 분리는 디자인 시스템 자체가 무색임을 의미하며, 제품의 화려한 결과물을 히어로 콘텐츠로 대우합니다. Figma의 마케팅 페이지는 본질적으로 화려한 예술 작품을 전시하는 흰 갤러리 벽입니다.
+
+가변 폰트 너머에서 Figma를 돋보이게 하는 것은 원형과 필(pill) 형태의 기하학입니다. 버튼은 50px 반경(필) 또는 50%(아이콘 버튼용 완전한 원형)을 사용하여 유기적인 툴 팔레트 같은 느낌을 만들어냅니다. 점선 아웃라인 포커스 표시(`dashed 2px`)는 Figma 에디터의 선택 핸들을 연상시키는 의도적인 디자인 선택입니다 — 웹사이트의 UI 언어가 제품의 UI 언어를 참조하는 것입니다.
+
+**주요 특성:**
+- 특이한 굵기 정류점을 가진 커스텀 가변 폰트(figmaSans): 320, 330, 340, 450, 480, 540, 700
+- 엄격하게 흑백인 인터페이스 크롬 — 색상은 제품 콘텐츠에만 존재
+- 넓은 자간과 대문자 기술 레이블을 위한 figmaMono
+- 필(50px) 및 원형(50%) 버튼 기하학
+- Figma 에디터 선택 핸들을 반영한 점선 포커스 아웃라인
+- 선명한 다색 히어로 그라디언트 (그린, 옐로우, 퍼플, 핑크)
+- 전역적으로 활성화된 OpenType `"kern"` 기능
+- 전반에 걸친 음수 자간 — 본문 텍스트조차 -0.14px에서 -0.26px
+
+## 2. 색상 팔레트 & 역할
+
+### Primary
+- **순수 검정** (`#000000`): 모든 텍스트, 모든 솔리드 버튼, 모든 테두리. 인터페이스의 유일한 "색상".
+- **순수 흰색** (`#ffffff`): 모든 배경, 흰색 버튼, 어두운 표면 위의 텍스트. 이진법의 나머지 절반.
+
+*참고: Figma의 마케팅 사이트는 인터페이스 레이어에 오직 이 두 가지 색상만 사용합니다. 모든 선명한 색상은 제품 스크린샷, 히어로 그라디언트, 임베드 콘텐츠에만 나타납니다.*
+
+### Surface & Background
+- **순수 흰색** (`#ffffff`): 기본 페이지 배경 및 카드 표면.
+- **글래스 블랙** (`rgba(0, 0, 0, 0.08)`): 보조 원형 버튼 및 유리 효과를 위한 미묘한 어두운 오버레이.
+- **글래스 화이트** (`rgba(255, 255, 255, 0.16)`): 어둡거나 컬러풀한 표면 위의 버튼을 위한 서리 낀 유리 오버레이.
+
+### Gradient System
+- **히어로 그라디언트**: 일렉트릭 그린, 밝은 노랑, 짙은 보라, 핫 핑크를 사용한 선명한 다중 정류 그라디언트. 이 그라디언트는 히어로 섹션의 시각적 시그니처입니다 — 도구의 창의적 가능성을 표현합니다.
+- **제품 섹션 그라디언트**: 개별 제품 영역(디자인, 개발자 모드, 프로토타이핑)은 쇼케이스에서 각기 다른 색상 테마를 사용할 수 있습니다.
+
+## 3. 타이포그래피 규칙
+
+### Font Family
+- **Primary**: `figmaSans`, 폴백: `figmaSans Fallback, SF Pro Display, system-ui, helvetica`
+- **Monospace / Labels**: `figmaMono`, 폴백: `figmaMono Fallback, SF Mono, menlo`
+
+### 위계
+
+| 역할 | 폰트 | 크기 | 굵기 | 줄 높이 | 자간 | 비고 |
+|------|------|------|--------|-------------|----------------|-------|
+| 디스플레이 / 히어로 | figmaSans | 86px (5.38rem) | 400 | 1.00 (타이트) | -1.72px | 최대 임팩트, 극도의 자간 |
+| 섹션 제목 | figmaSans | 64px (4rem) | 400 | 1.10 (타이트) | -0.96px | 기능 섹션 타이틀 |
+| 소제목 | figmaSans | 26px (1.63rem) | 540 | 1.35 | -0.26px | 강조된 섹션 텍스트 |
+| 소제목 라이트 | figmaSans | 26px (1.63rem) | 340 | 1.35 | -0.26px | 가벼운 섹션 텍스트 |
+| 기능 타이틀 | figmaSans | 24px (1.5rem) | 700 | 1.45 | normal | 볼드 카드 제목 |
+| 본문 대 | figmaSans | 20px (1.25rem) | 330–450 | 1.30–1.40 | -0.1px to -0.14px | 설명, 인트로 |
+| 본문 / 버튼 | figmaSans | 16px (1rem) | 330–400 | 1.40–1.45 | -0.14px to normal | 표준 본문, 내비게이션, 버튼 |
+| 본문 라이트 | figmaSans | 18px (1.13rem) | 320 | 1.45 | -0.26px to normal | 가벼운 본문 텍스트 |
+| 모노 레이블 | figmaMono | 18px (1.13rem) | 400 | 1.30 (타이트) | 0.54px | 대문자 섹션 레이블 |
+| 모노 소형 | figmaMono | 12px (0.75rem) | 400 | 1.00 (타이트) | 0.6px | 대문자 소형 태그 |
+
+### 원칙
+- **가변 폰트 정밀도**: figmaSans는 대부분의 시스템이 결코 사용하지 않는 굵기를 씁니다 — 320, 330, 340, 450, 480, 540. 이는 극적인 도약 대신 미묘한 굵기 차이를 통해 위계를 만들어냅니다. 330과 340의 차이는 거의 감지하기 어렵지만 구조적으로 의미 있습니다.
+- **라이트를 기본으로**: 대부분의 본문 텍스트는 320–340(일반적인 400 "레귤러"보다 가벼운)을 사용하여, 디자인 도구 미학과 어울리는 에테르 같고 공기처럼 가벼운 읽기 경험을 만들어냅니다.
+- **어디서나 커닝**: 모든 텍스트 요소는 OpenType `"kern"` 기능을 활성화합니다 — 커닝은 선택 사항이 아니라 구조적입니다.
+- **기본값으로 음수 자간**: 본문 텍스트도 -0.1px에서 -0.26px 자간을 사용하여, 전반적으로 타이트한 텍스트를 만듭니다. 디스플레이 텍스트는 -0.96px와 -1.72px로 더욱 압축됩니다.
+- **구조를 위한 모노**: 양수 자간(0.54px–0.6px)과 함께 대문자로 사용한 figmaMono는 기술적 이정표 레이블을 만듭니다.
+
+## 4. 컴포넌트 스타일링
+
+### 버튼
+
+**블랙 솔리드 (필)**
+- Background: 순수 검정 (`#000000`)
+- 텍스트: 순수 흰색 (`#ffffff`)
+- Radius: 아이콘 버튼에는 원형 (50%)
+- Focus: dashed 2px outline
+- 최대 강조
+
+**화이트 필**
+- Background: 순수 흰색 (`#ffffff`)
+- 텍스트: 순수 검정 (`#000000`)
+- Padding: 8px 18px 10px (비대칭 수직)
+- Radius: pill (50px)
+- Focus: dashed 2px outline
+- 어둡거나 컬러풀한 표면 위의 표준 CTA
+
+**글래스 다크**
+- Background: `rgba(0, 0, 0, 0.08)` (미묘한 어두운 오버레이)
+- 텍스트: 순수 검정
+- Radius: 원형 (50%)
+- Focus: dashed 2px outline
+- 밝은 표면 위의 보조 액션
+
+**글래스 라이트**
+- Background: `rgba(255, 255, 255, 0.16)` (서리 낀 유리)
+- 텍스트: 순수 흰색
+- Radius: 원형 (50%)
+- Focus: dashed 2px outline
+- 어둡거나 컬러풀한 표면 위의 보조 액션
+
+### 카드 & 컨테이너
+- Background: 순수 흰색
+- Border: 없음 또는 최소화
+- Radius: 6px (소형 컨테이너), 8px (이미지, 카드, 다이얼로그)
+- Shadow: 미묘한 수준에서 중간 수준의 고도 효과
+- 카드 콘텐츠로서의 제품 스크린샷
+
+### 내비게이션
+- 흰 배경 위의 깔끔한 수평 내비게이션
+- 로고: 검정의 Figma 워드마크
+- 제품 탭: 필 형태 (50px) 탭 내비게이션
+- 링크: 검정 텍스트, 1px 언더라인 장식
+- CTA: 블랙 필 버튼
+- Hover: CSS 변수를 통한 텍스트 색상
+
+### 특이 컴포넌트
+
+**제품 탭 바**
+- 수평 필 형태 탭 (50px 반경)
+- 각 탭은 Figma 제품 영역(디자인, 개발자 모드, 프로토타이핑 등)을 표현
+- 활성 탭 강조 표시
+
+**히어로 그라디언트 섹션**
+- 전체 너비의 선명한 다색 그라디언트 배경
+- 86px 디스플레이 제목이 포함된 흰색 텍스트 오버레이
+- 그라디언트 안에 떠 있는 제품 스크린샷
+
+**점선 포커스 표시**
+- 모든 인터랙티브 요소는 포커스 시 `dashed 2px` 아웃라인 사용
+- Figma 에디터의 선택 핸들을 참조
+- 웹사이트와 제품을 연결하는 메타 디자인 선택
+
+## 5. 레이아웃 원칙
+
+### 간격 시스템
+- 기본 단위: 8px
+- 스케일: 1px, 2px, 4px, 4.5px, 8px, 10px, 12px, 16px, 18px, 24px, 32px, 40px, 46px, 48px, 50px
+
+### 그리드 & 컨테이너
+- 최대 컨테이너 너비: 1920px까지
+- 히어로: 중앙 정렬 콘텐츠를 가진 전체 너비 그라디언트
+- 제품 섹션: 교차 쇼케이스
+- 푸터: 어두운 전체 너비 섹션
+- 559px에서 1920px까지 반응형
+
+### 공백 철학
+- **갤러리 같은 호흡**: 넉넉한 간격은 각 제품 섹션이 자체 전시물로서 숨 쉬게 합니다.
+- **시각적 호흡으로서의 색상 섹션**: 그라디언트 히어로와 제품 쇼케이스는 모노크롬 인터페이스 섹션들 사이에 색채적 여유를 제공합니다.
+
+### 테두리 반경 스케일
+- 최소 (2px): 소형 링크 요소
+- 미묘 (6px): 소형 컨테이너, 구분선
+- 편안함 (8px): 카드, 이미지, 다이얼로그
+- 필 (50px): 탭 버튼, CTA
+- 원형 (50%): 아이콘 버튼, 원형 요소
+
+## 6. 깊이 & 고도
+
+| 레벨 | 처리 방식 | 용도 |
+|-------|-----------|-----|
+| 플랫 (레벨 0) | 그림자 없음 | 페이지 배경, 대부분의 텍스트 |
+| 표면 (레벨 1) | 그라디언트/어두운 섹션 위의 흰 카드 | 카드, 제품 쇼케이스 |
+| 고도 (레벨 2) | 미묘한 그림자 | 떠 있는 카드, 호버 상태 |
+
+**그림자 철학**: Figma는 그림자를 절제하여 사용합니다. 주요 깊이 메커니즘은 **배경 대비** (컬러풀하거나 어두운 섹션 위의 흰 콘텐츠)와 제품 스크린샷 자체가 가진 고유한 입체감입니다.
+
+## 7. Do's and Don'ts
+
+### Do
+- 정밀한 가변 굵기(320–540)로 figmaSans를 사용하세요 — 세밀한 굵기 제어 자체가 디자인입니다
+- 인터페이스를 엄격하게 흑백으로 유지하세요 — 색상은 제품 콘텐츠에서만 옵니다
+- 모든 인터랙티브 요소에 필(50px) 및 원형(50%) 기하학을 사용하세요
+- dashed 2px 포커스 아웃라인을 적용하세요 — 시그니처 접근성 패턴입니다
+- 모든 텍스트에 `"kern"` 기능을 활성화하세요
+- 레이블에는 양수 자간과 함께 대문자 figmaMono를 사용하세요
+- 전반에 걸쳐 음수 자간을 적용하세요 (-0.1px에서 -1.72px)
+
+### Don't
+- 인터페이스 색상을 추가하지 마세요 — 모노크롬 팔레트는 절대적입니다
+- 표준 폰트 굵기(400, 500, 600, 700)를 사용하지 마세요 — 가변 폰트의 고유 정류점(320, 330, 340, 450, 480, 540)을 사용하세요
+- 버튼에 날카로운 모서리를 사용하지 마세요 — 필과 원형 기하학만 허용됩니다
+- 솔리드 포커스 아웃라인을 사용하지 마세요 — 점선이 시그니처입니다
+- 본문 폰트 굵기를 450 이상으로 높이지 마세요 — 가벼운 굵기 미학이 핵심입니다
+- 본문 텍스트에 양수 자간을 사용하지 마세요 — 항상 음수입니다
+
+## 8. 반응형 동작
+
+### 브레이크포인트
+| 이름 | 너비 | 주요 변경 사항 |
+|------|-------|-------------|
+| 소형 모바일 | <560px | 컴팩트 레이아웃, 스택 |
+| 태블릿 | 560–768px | 소폭 조정 |
+| 소형 데스크탑 | 768–960px | 2열 레이아웃 |
+| 데스크탑 | 960–1280px | 표준 레이아웃 |
+| 대형 데스크탑 | 1280–1440px | 확장됨 |
+| 울트라 와이드 | 1440–1920px | 최대 너비 |
+
+### 축소 전략
+- 히어로 텍스트: 86px → 64px → 48px
+- 제품 탭: 모바일에서 가로 스크롤
+- 기능 섹션: 단일 열로 스택
+- 푸터: 다열 → 스택
+
+## 9. 에이전트 프롬프트 가이드
+
+### 빠른 색상 참조
+- 모든 것: "순수 검정 (#000000)" 과 "순수 흰색 (#ffffff)"
+- Glass Dark: "rgba(0, 0, 0, 0.08)"
+- Glass Light: "rgba(255, 255, 255, 0.16)"
+
+### 예시 컴포넌트 프롬프트
+- "선명한 다색 그라디언트(그린, 옐로우, 퍼플, 핑크) 위에 히어로를 만드세요. 헤드라인은 86px figmaSans 굵기 400, line-height 1.0, letter-spacing -1.72px. 흰 텍스트. 흰 필 CTA 버튼 (50px 반경, 8px 18px 패딩)."
+- "필 형태 버튼(50px 반경)으로 제품 탭 바를 디자인하세요. 활성: 블랙 배경, 흰 텍스트. 비활성: 투명, 검정 텍스트. figmaSans 20px 굵기 480."
+- "섹션 레이블을 만드세요: figmaMono 18px, 대문자, letter-spacing 0.54px, 검정 텍스트. Kern 활성화."
+- "20px figmaSans 굵기 330, line-height 1.40, letter-spacing -0.14px로 본문 텍스트를 만드세요. 흰 배경 위의 순수 검정."
+
+### 반복 가이드
+1. 가변 폰트 굵기 정류점을 정확하게 사용하세요: 320, 330, 340, 450, 480, 540, 700
+2. 인터페이스는 항상 검정 + 흰색 — 크롬에 색상을 추가하지 마세요
+3. 솔리드가 아닌 점선 포커스 아웃라인
+4. 본문에는 항상 음수 자간, 모노 레이블에는 항상 양수 자간
+5. 버튼/탭에는 필(50px), 아이콘 버튼에는 원형(50%)

open-design/design-systems/figma/DESIGN-nl.md

@@ -0,0 +1,223 @@
+# Ontwerpsysteem Geïnspireerd door Figma
+
+> Category: Design & Creatief
+> Collaboratief ontwerptool. Levendig veelkleurig, speels maar professioneel.
+
+## 1. Visueel Thema & Sfeer
+
+Figma's interface is het ontwerptool dat zichzelf heeft ontworpen — een meesterwerk in typografische verfijning waarbij een aangepast variabel lettertype (figmaSans) moduleert tussen scheermesdun (weight 320) en vet (weight 700) met tussenstappen op ongebruikelijke waarden (330, 340, 450, 480, 540) die de meeste lettertypesystemen nooit verkennen. Deze nauwkeurige gewichtscontrole geeft elk tekstelement een precies gekalibreerde visuele zwaarte, waardoor hiërarchie ontstaat via micro-verschillen in plaats van het grove instrument van "regulier versus vet."
+
+De pagina presenteert een fascinerende dualiteit: de interfaceschil is strikt zwart-wit (letterlijk alleen `#000000` en `#ffffff` als kleuren), terwijl de herorubriek en productpresentaties exploderen met levendige meerkleursgradiënten — elektrisch groen, helder geel, diep paars, knalroze. Door deze scheiding is het ontwerpsysteem zelf kleurloos en wordt de kleurrijke output van het product als heldinhoud behandeld. De marketingpagina van Figma is in wezen een witte galeriemuur waarop kleurrijke kunst wordt getoond.
+
+Wat Figma onderscheidt naast het variabele lettertype is de cirkel-en-pill-geometrie. Knoppen gebruiken een radius van 50px (pill) of 50% (perfecte cirkel voor pictogramknoppen), wat een organisch, toolpalette-achtig gevoel creëert. De gestippelde focusindicator (`dashed 2px`) is een bewuste ontwerpkeuze die verwijst naar selectiehandvatten in de Figma-editor zelf — de UI-taal van de website verwijst naar de UI-taal van het product.
+
+**Kernkenmerken:**
+- Aangepast variabel lettertype (figmaSans) met ongebruikelijke gewichtsstappen: 320, 330, 340, 450, 480, 540, 700
+- Strikt zwart-witte interfaceschil — kleur bestaat alleen in productinhoud
+- figmaMono voor hoofdlettertechnische labels met brede letterafstand
+- Pill- (50px) en cirkelvormige (50%) knopgeometrie
+- Gestippelde focusomlijningen die verwijzen naar selectiehandvatten in de Figma-editor
+- Levendige meerkleursherogradiënten (groen, geel, paars, roze)
+- OpenType `"kern"`-functie wereldwijd ingeschakeld
+- Negatieve letterafstand overal — zelfs voor bodytekst van -0.14px tot -0.26px
+
+## 2. Kleurenpalet & Rollen
+
+### Primair
+- **Zuiver Zwart** (`#000000`): Alle tekst, alle gevulde knoppen, alle randen. De enige "kleur" van de interface.
+- **Zuiver Wit** (`#ffffff`): Alle achtergronden, witte knoppen, tekst op donkere oppervlakken. De andere helft van het binaire stelsel.
+
+*Opmerking: De marketingsite van Figma gebruikt ALLEEN deze twee kleuren voor de interfacelaag. Alle levendige kleuren verschijnen uitsluitend in productschermafbeeldingen, herogradiënten en ingesloten inhoud.*
+
+### Oppervlak & Achtergrond
+- **Zuiver Wit** (`#ffffff`): Primaire paginaachtergrond en kaartoppervlakken.
+- **Glazen Zwart** (`rgba(0, 0, 0, 0.08)`): Subtiele donkere overlay voor secundaire cirkelvormige knoppen en glaseffecten.
+- **Glazen Wit** (`rgba(255, 255, 255, 0.16)`): Matglazen overlay voor knoppen op donkere/gekleurde oppervlakken.
+
+### Gradiëntsysteem
+- **Herogradiënt**: Een levendige meerstops-gradiënt met elektrisch groen, helder geel, diep paars en knalroze. Deze gradiënt is de visuele signatuur van de herorubriek — het vertegenwoordigt de creatieve mogelijkheden van het tool.
+- **Productrubriekgradiënten**: Individuele productgebieden (Design, Dev Mode, Prototyping) kunnen eigen kleurthema's gebruiken in hun presentaties.
+
+## 3. Typografieregels
+
+### Lettertypefamilie
+- **Primair**: `figmaSans`, met fallbacks: `figmaSans Fallback, SF Pro Display, system-ui, helvetica`
+- **Monospace / Labels**: `figmaMono`, met fallbacks: `figmaMono Fallback, SF Mono, menlo`
+
+### Hiërarchie
+
+| Rol | Lettertype | Grootte | Gewicht | Regelhoogte | Letterafstand | Opmerkingen |
+|------|------|------|--------|-------------|----------------|-------|
+| Display / Hero | figmaSans | 86px (5.38rem) | 400 | 1.00 (strak) | -1.72px | Maximale impact, extreme spatiëring |
+| Sectiekopping | figmaSans | 64px (4rem) | 400 | 1.10 (strak) | -0.96px | Titels van functiesecties |
+| Subkopping | figmaSans | 26px (1.63rem) | 540 | 1.35 | -0.26px | Benadrukte sectietekst |
+| Subkopping Licht | figmaSans | 26px (1.63rem) | 340 | 1.35 | -0.26px | Lichtgewicht sectietekst |
+| Functietitel | figmaSans | 24px (1.5rem) | 700 | 1.45 | normal | Vette kaartkoppen |
+| Body Groot | figmaSans | 20px (1.25rem) | 330–450 | 1.30–1.40 | -0.1px tot -0.14px | Beschrijvingen, introducties |
+| Body / Knop | figmaSans | 16px (1rem) | 330–400 | 1.40–1.45 | -0.14px tot normal | Standaard body, navigatie, knoppen |
+| Body Licht | figmaSans | 18px (1.13rem) | 320 | 1.45 | -0.26px tot normal | Lichtgewicht bodytekst |
+| Mono Label | figmaMono | 18px (1.13rem) | 400 | 1.30 (strak) | 0.54px | Sectielabels in hoofdletters |
+| Mono Klein | figmaMono | 12px (0.75rem) | 400 | 1.00 (strak) | 0.6px | Kleine tags in hoofdletters |
+
+### Principes
+- **Nauwkeurigheid van variabel lettertype**: figmaSans gebruikt gewichten die de meeste systemen nooit aanraken — 320, 330, 340, 450, 480, 540. Dit creëert hiërarchie via subtiele gewichtsverschillen in plaats van dramatische sprongen. Het verschil tussen 330 en 340 is vrijwel onmerkbaar, maar structureel significant.
+- **Licht als basis**: De meeste bodytekst gebruikt 320–340 (lichter dan het gebruikelijke 400 "regulier"), waardoor een etherische, luchtige leeservaring ontstaat die aansluit bij de esthetiek van het ontwerptool.
+- **Kern overal**: Elk tekstelement schakelt de OpenType `"kern"`-functie in — uitlijning is niet optioneel, het is structureel.
+- **Negatieve spatiëring als standaard**: Zelfs bodytekst gebruikt -0.1px tot -0.26px letterafstand, waardoor universeel strakke tekst ontstaat. Displaytekst comprimeeert verder naar -0.96px en -1.72px.
+- **Mono voor structuur**: figmaMono in hoofdletters met positieve letterafstand (0.54px–0.6px) creëert technische wegwijzerlabels.
+
+## 4. Componentstijlen
+
+### Knoppen
+
+**Zwart Gevuld (Pill)**
+- Achtergrond: Zuiver Zwart (`#000000`)
+- Tekst: Zuiver Wit (`#ffffff`)
+- Radius: cirkel (50%) voor pictogramknoppen
+- Focus: gestippelde omlijning van 2px
+- Maximale nadruk
+
+**Witte Pill**
+- Achtergrond: Zuiver Wit (`#ffffff`)
+- Tekst: Zuiver Zwart (`#000000`)
+- Opvulling: 8px 18px 10px (asymmetrisch verticaal)
+- Radius: pill (50px)
+- Focus: gestippelde omlijning van 2px
+- Standaard CTA op donkere/gekleurde oppervlakken
+
+**Glazen Donker**
+- Achtergrond: `rgba(0, 0, 0, 0.08)` (subtiele donkere overlay)
+- Tekst: Zuiver Zwart
+- Radius: cirkel (50%)
+- Focus: gestippelde omlijning van 2px
+- Secundaire actie op lichte oppervlakken
+
+**Glazen Licht**
+- Achtergrond: `rgba(255, 255, 255, 0.16)` (matglas)
+- Tekst: Zuiver Wit
+- Radius: cirkel (50%)
+- Focus: gestippelde omlijning van 2px
+- Secundaire actie op donkere/gekleurde oppervlakken
+
+### Kaarten & Containers
+- Achtergrond: Zuiver Wit
+- Rand: geen of minimaal
+- Radius: 6px (kleine containers), 8px (afbeeldingen, kaarten, dialoogvensters)
+- Schaduw: subtiele tot middelhoge verheffingseffecten
+- Productschermafbeeldingen als kaartinhoud
+
+### Navigatie
+- Strakke horizontale navigatie op wit
+- Logo: Figma-woordmerk in zwart
+- Producttabs: pill-vormige tabnavigatie (50px)
+- Links: zwarte tekst, onderstreping van 1px decoratie
+- CTA: Zwarte pill-knop
+- Hover: tekstkleur via CSS-variabele
+
+### Onderscheidende Componenten
+
+**Producttabbalk**
+- Horizontale pill-vormige tabs (radius 50px)
+- Elke tab vertegenwoordigt een Figma-productgebied (Design, Dev Mode, Prototyping, enz.)
+- Actieve tab gemarkeerd
+
+**Herogradiëntsectie**
+- Volledige breedte levendige meerkleursgradiëntachtergrond
+- Witte tekstoverlay met 86px displaykopping
+- Productschermafbeeldingen zwevend in de gradiënt
+
+**Gestippelde Focusindicatoren**
+- Alle interactieve elementen gebruiken `dashed 2px` omlijning bij focus
+- Verwijst naar de selectiehandvatten in de Figma-editor
+- Een meta-ontwerpkeuze die website en product verbindt
+
+## 5. Layoutprincipes
+
+### Spacingsysteem
+- Basiseenheid: 8px
+- Schaal: 1px, 2px, 4px, 4.5px, 8px, 10px, 12px, 16px, 18px, 24px, 32px, 40px, 46px, 48px, 50px
+
+### Raster & Container
+- Maximale containerbreedte: tot 1920px
+- Hero: volledige breedte gradiënt met gecentreerde inhoud
+- Productsecties: afwisselende presentaties
+- Footer: donkere sectie met volledige breedte
+- Responsief van 559px tot 1920px
+
+### Witruimtefilosofie
+- **Galerieachtig ritme**: Ruime spacing laat elke productsectie ademen als een eigen tentoonstelling.
+- **Kleurensecties als visuele ademruimte**: De gradiënthero en productpresentaties bieden chromatische verlichting tussen de monochrome interfacesecties.
+
+### Randradius-schaal
+- Minimaal (2px): Kleine linkelementen
+- Subtiel (6px): Kleine containers, scheidingslijnen
+- Comfortabel (8px): Kaarten, afbeeldingen, dialoogvensters
+- Pill (50px): Tabknoppen, CTA's
+- Cirkel (50%): Pictogramknoppen, cirkelvormige elementen
+
+## 6. Diepte & Verheffing
+
+| Niveau | Behandeling | Gebruik |
+|-------|-----------|-----|
+| Vlak (Niveau 0) | Geen schaduw | Paginaachtergrond, meeste tekst |
+| Oppervlak (Niveau 1) | Witte kaart op gradiënt/donkere sectie | Kaarten, productpresentaties |
+| Verheven (Niveau 2) | Subtiele schaduw | Zwevende kaarten, hovertoestanden |
+
+**Schaduwfilosofie**: Figma gebruikt schaduwen spaarzaam. De primaire dieptemechanismen zijn **achtergrondcontrast** (witte inhoud op kleurrijke/donkere secties) en de inherente dimensionaliteit van de productschermafbeeldingen zelf.
+
+## 7. Do's en Don'ts
+
+### Do
+- Gebruik figmaSans met precieze variabele gewichten (320–540) — de nauwkeurige gewichtscontrole ÍS het ontwerp
+- Houd de interface strikt zwart-wit — kleur komt alleen uit productinhoud
+- Gebruik pill- (50px) en cirkelvormige (50%) geometrie voor alle interactieve elementen
+- Pas gestippelde omlijningen van 2px toe voor focus — het kenmerkende toegankelijkheidspatroon
+- Schakel de `"kern"`-functie in op alle tekst
+- Gebruik figmaMono in hoofdletters met positieve letterafstand voor labels
+- Pas negatieve letterafstand toe overal (-0.1px tot -1.72px)
+
+### Don't
+- Voeg geen interfacekleuren toe — het monochrome palet is absoluut
+- Gebruik geen standaard lettertypegewichten (400, 500, 600, 700) — gebruik de unieke stappen van het variabele lettertype (320, 330, 340, 450, 480, 540)
+- Gebruik geen scherpe hoeken op knoppen — alleen pill- en cirkelvormige geometrie
+- Gebruik geen gevulde focusomlijningen — gestippeld is de signatuur
+- Verhoog het bodytekstgewicht niet boven 450 — de lichtgewicht esthetiek is essentieel
+- Gebruik geen positieve letterafstand op bodytekst — het is altijd negatief
+
+## 8. Responsief Gedrag
+
+### Breekpunten
+| Naam | Breedte | Belangrijke Wijzigingen |
+|------|-------|-------------|
+| Klein Mobiel | <560px | Compact layout, gestapeld |
+| Tablet | 560–768px | Kleine aanpassingen |
+| Klein Bureaublad | 768–960px | 2-kolomlay-outs |
+| Bureaublad | 960–1280px | Standaardlayout |
+| Groot Bureaublad | 1280–1440px | Uitgebreid |
+| Ultrabreed | 1440–1920px | Maximale breedte |
+
+### Samenvouwstrategie
+- Herotekst: 86px → 64px → 48px
+- Producttabs: horizontaal scrollen op mobiel
+- Functiesecties: gestapeld in één kolom
+- Footer: meerdere kolommen → gestapeld
+
+## 9. Agent Prompt-gids
+
+### Snelle Kleurverwijzing
+- Alles: "Zuiver Zwart (#000000)" en "Zuiver Wit (#ffffff)"
+- Glazen Donker: "rgba(0, 0, 0, 0.08)"
+- Glazen Licht: "rgba(255, 255, 255, 0.16)"
+
+### Voorbeeldprompts voor Componenten
+- "Maak een hero op een levendige meerkleursgradiënt (groen, geel, paars, roze). Kopping op 86px figmaSans weight 400, line-height 1.0, letter-spacing -1.72px. Witte tekst. Witte pill CTA-knop (radius 50px, opvulling 8px 18px)."
+- "Ontwerp een producttabbalk met pill-vormige knoppen (radius 50px). Actief: zwarte achtergrond, witte tekst. Inactief: transparant, zwarte tekst. figmaSans op 20px weight 480."
+- "Bouw een sectielabel: figmaMono 18px, hoofdletters, letter-spacing 0.54px, zwarte tekst. Kern ingeschakeld."
+- "Maak bodytekst op 20px figmaSans weight 330, line-height 1.40, letter-spacing -0.14px. Zuiver Zwart op wit."
+
+### Iteratiegids
+1. Gebruik variabele lettertypegewichtsstappen precies: 320, 330, 340, 450, 480, 540, 700
+2. Interface is altijd zwart + wit — voeg nooit kleuren toe aan de schil
+3. Gestippelde focusomlijningen, niet gevuld
+4. Letterafstand is altijd negatief op body, altijd positief op monolabels
+5. Pill (50px) voor knoppen/tabs, cirkel (50%) voor pictogramknoppen

open-design/design-systems/figma/DESIGN-pl.md

@@ -0,0 +1,223 @@
+# System Projektowania Inspirowany Figmą
+
+> Kategoria: Projektowanie i Twórczość
+> Narzędzie do projektowania zespołowego. Żywe, wielobarwne — figlarnie, a zarazem profesjonalnie.
+
+## 1. Motyw Wizualny i Atmosfera
+
+Interfejs Figmy jest narzędziem projektowym, które zaprojektowało samo siebie — mistrzowska lekcja typograficznej precyzji, w której własny, zmienny krój pisma (figmaSans) moduluje między ekstremalnie cienkim (grubość 320) a pogrubionym (grubość 700), zatrzymując się na niespotykanych wartościach pośrednich (330, 340, 450, 480, 540), których większość systemów typograficznych nigdy nie eksploruje. Ta szczegółowa kontrola grubości nadaje każdemu elementowi tekstowemu precyzyjnie dobraną wagę wizualną, budując hierarchię przez mikroróżnice zamiast tępego narzędzia „regular kontra bold".
+
+Strona przedstawia fascynującą dwoistość: chrome interfejsu jest ściśle czarno-biały (dosłownie tylko `#000000` i `#ffffff` wykrywane jako kolory), podczas gdy sekcja hero i prezentacje produktów eksplodują żywymi, wielobarwnymi gradientami — elektryczną zielenią, jaskrawą żółcią, głębokim fioletem i gorącym różem. To rozdzielenie oznacza, że sam system projektowania jest bezbarwny i traktuje kolorowe efekty produktu jak treść pierwszoplanową. Strona marketingowa Figmy to w istocie biała galeryjna ściana, na której eksponowane są kolorowe dzieła.
+
+To, co wyróżnia Figmę poza zmiennym krojem pisma, to geometria kółek i pigułek. Przyciski stosują promień 50px (pigułka) lub 50% (idealne koło dla przycisków ikonowych), nadając interfejsowi organiczny, paletowy charakter narzędzia do projektowania. Przerywany wskaźnik fokusu (`dashed 2px`) to świadomy wybór projektowy nawiązujący do uchwytów zaznaczenia w edytorze Figmy — język UI strony odnosi się do języka UI produktu.
+
+**Kluczowe cechy:**
+- Własny zmienny krój pisma (figmaSans) z niespotykanie precyzyjnymi wartościami grubości: 320, 330, 340, 450, 480, 540, 700
+- Ściśle czarno-biały chrome interfejsu — kolor pojawia się wyłącznie w treściach produktowych
+- figmaMono dla wielkich liter w etykietach technicznych z szerokim rozstępem liter
+- Geometria pigułki (50px) i koła (50%) w przyciskach
+- Przerywane obrysy fokusu nawiązujące do uchwytów zaznaczenia w edytorze Figmy
+- Żywe, wielobarwne gradienty hero (zielony, żółty, fioletowy, różowy)
+- Funkcja OpenType `"kern"` włączona globalnie
+- Ujemny rozstęp liter w całym interfejsie — nawet tekst podstawowy ma -0.14px do -0.26px
+
+## 2. Paleta Kolorów i Ich Role
+
+### Podstawowe
+- **Czysta czerń** (`#000000`): Cały tekst, wszystkie pełne przyciski, wszystkie obramowania. Jedyny „kolor" interfejsu.
+- **Czysta biel** (`#ffffff`): Wszystkie tła, białe przyciski, tekst na ciemnych powierzchniach. Druga połowa dychotomii.
+
+*Uwaga: Strona marketingowa Figmy używa WYŁĄCZNIE tych dwóch kolorów dla warstwy interfejsu. Wszystkie żywe kolory pojawiają się jedynie w zrzutach ekranu produktu, gradientach hero i treściach osadzonych.*
+
+### Powierzchnie i Tła
+- **Czysta biel** (`#ffffff`): Podstawowe tło strony i powierzchnie kart.
+- **Szklana czerń** (`rgba(0, 0, 0, 0.08)`): Delikatna ciemna nakładka dla drugorzędnych okrągłych przycisków i efektów szklanych.
+- **Szklana biel** (`rgba(255, 255, 255, 0.16)`): Mrożona szklana nakładka dla przycisków na ciemnych lub kolorowych powierzchniach.
+
+### System Gradientów
+- **Gradient hero**: Żywy, wielostopniowy gradient z elektryczną zielenią, jaskrawą żółcią, głębokim fioletem i gorącym różem. Ten gradient jest wizualnym znakiem rozpoznawczym sekcji hero — reprezentuje kreatywne możliwości narzędzia.
+- **Gradienty sekcji produktowych**: Poszczególne obszary produktu (Projektowanie, Tryb deweloperski, Prototypowanie) mogą stosować własne motywy kolorystyczne w swoich prezentacjach.
+
+## 3. Zasady Typograficzne
+
+### Rodzina Krojów
+- **Podstawowy**: `figmaSans`, z zamiennikami: `figmaSans Fallback, SF Pro Display, system-ui, helvetica`
+- **Monospace / Etykiety**: `figmaMono`, z zamiennikami: `figmaMono Fallback, SF Mono, menlo`
+
+### Hierarchia
+
+| Rola | Krój | Rozmiar | Grubość | Wysokość linii | Rozstęp liter | Uwagi |
+|------|------|---------|---------|----------------|---------------|-------|
+| Display / Hero | figmaSans | 86px (5.38rem) | 400 | 1.00 (zwarte) | -1.72px | Maksymalny efekt, ekstremalne rozstrzelenie |
+| Nagłówek sekcji | figmaSans | 64px (4rem) | 400 | 1.10 (zwarte) | -0.96px | Tytuły sekcji funkcji |
+| Podtytuł | figmaSans | 26px (1.63rem) | 540 | 1.35 | -0.26px | Wyróżniony tekst sekcji |
+| Podtytuł lekki | figmaSans | 26px (1.63rem) | 340 | 1.35 | -0.26px | Lekki tekst sekcji |
+| Tytuł funkcji | figmaSans | 24px (1.5rem) | 700 | 1.45 | normal | Pogrubione nagłówki kart |
+| Tekst podstawowy duży | figmaSans | 20px (1.25rem) | 330–450 | 1.30–1.40 | -0.1px do -0.14px | Opisy, wprowadzenia |
+| Tekst podstawowy / Przycisk | figmaSans | 16px (1rem) | 330–400 | 1.40–1.45 | -0.14px do normal | Standardowy tekst, nawigacja, przyciski |
+| Tekst podstawowy lekki | figmaSans | 18px (1.13rem) | 320 | 1.45 | -0.26px do normal | Lekki tekst podstawowy |
+| Etykieta mono | figmaMono | 18px (1.13rem) | 400 | 1.30 (zwarte) | 0.54px | Etykiety sekcji pisane wielkimi literami |
+| Mono małe | figmaMono | 12px (0.75rem) | 400 | 1.00 (zwarte) | 0.6px | Małe tagi pisane wielkimi literami |
+
+### Zasady
+- **Precyzja zmiennego kroju pisma**: figmaSans używa grubości, których większość systemów nigdy nie stosuje — 320, 330, 340, 450, 480, 540. Tworzy to hierarchię przez subtelne różnice grubości, a nie gwałtowne skoki. Różnica między 330 a 340 jest niemal nieuchwytna, lecz strukturalnie istotna.
+- **Lekkość jako baza**: Większość tekstu podstawowego używa grubości 320–340 (lżejszej niż typowe 400 „regular"), tworząc eteryczne, przewiewne doświadczenie czytelnicze pasujące do estetyki narzędzia projektowego.
+- **Kerning wszędzie**: Każdy element tekstowy aktywuje funkcję OpenType `"kern"` — kerning nie jest opcją, jest elementem struktury.
+- **Ujemne rozstrzelenie jako domyślne**: Nawet tekst podstawowy używa rozstępu -0.1px do -0.26px, tworząc powszechnie zwarte teksty. Tekst display ściska się dalej do -0.96px i -1.72px.
+- **Mono dla struktury**: figmaMono pisany wielkimi literami z dodatnim rozstępem liter (0.54px–0.6px) tworzy techniczne etykiety orientacyjne.
+
+## 4. Style Komponentów
+
+### Przyciski
+
+**Czarna pełna pigułka**
+- Tło: czysta czerń (`#000000`)
+- Tekst: czysta biel (`#ffffff`)
+- Promień: koło (50%) dla przycisków ikonowych
+- Fokus: przerywany obrys 2px
+- Maksymalne wyróżnienie
+
+**Biała pigułka**
+- Tło: czysta biel (`#ffffff`)
+- Tekst: czysta czerń (`#000000`)
+- Odstępy: 8px 18px 10px (asymetryczne pionowe)
+- Promień: pigułka (50px)
+- Fokus: przerywany obrys 2px
+- Standardowe CTA na ciemnych lub kolorowych powierzchniach
+
+**Szklana ciemna**
+- Tło: `rgba(0, 0, 0, 0.08)` (delikatna ciemna nakładka)
+- Tekst: czysta czerń
+- Promień: koło (50%)
+- Fokus: przerywany obrys 2px
+- Drugorzędna akcja na jasnych powierzchniach
+
+**Szklana jasna**
+- Tło: `rgba(255, 255, 255, 0.16)` (mrożone szkło)
+- Tekst: czysta biel
+- Promień: koło (50%)
+- Fokus: przerywany obrys 2px
+- Drugorzędna akcja na ciemnych lub kolorowych powierzchniach
+
+### Karty i Kontenery
+- Tło: czysta biel
+- Obramowanie: brak lub minimalne
+- Promień: 6px (małe kontenery), 8px (obrazy, karty, okna dialogowe)
+- Cień: subtelne do umiarkowanych efektów elewacji
+- Zrzuty ekranu produktu jako zawartość kart
+
+### Nawigacja
+- Czysta, pozioma nawigacja na białym tle
+- Logo: wordmark Figmy w kolorze czarnym
+- Zakładki produktów: nawigacja zakładkowa w kształcie pigułki (50px)
+- Linki: czarny tekst, dekoracja podkreślenia 1px
+- CTA: czarny przycisk pigułka
+- Najechanie kursorem: kolor tekstu przez zmienną CSS
+
+### Charakterystyczne Komponenty
+
+**Pasek zakładek produktu**
+- Poziome zakładki w kształcie pigułki (promień 50px)
+- Każda zakładka reprezentuje obszar produktu Figmy (Projektowanie, Tryb deweloperski, Prototypowanie itd.)
+- Aktywna zakładka wyróżniona
+
+**Sekcja z gradientem hero**
+- Pełnoszerokościowe, żywe, wielobarwne tło gradientowe
+- Biały tekst nakładkowy z nagłówkiem display 86px
+- Zrzuty ekranu produktu unoszące się w gradiencie
+
+**Przerywane wskaźniki fokusu**
+- Wszystkie elementy interaktywne używają obrysu `dashed 2px` przy fokusie
+- Nawiązuje do uchwytów zaznaczenia w edytorze Figmy
+- Meta-projektowy wybór łączący stronę z produktem
+
+## 5. Zasady Układu
+
+### System Odstępów
+- Jednostka bazowa: 8px
+- Skala: 1px, 2px, 4px, 4.5px, 8px, 10px, 12px, 16px, 18px, 24px, 32px, 40px, 46px, 48px, 50px
+
+### Siatka i Kontener
+- Maksymalna szerokość kontenera: do 1920px
+- Hero: pełnoszerokościowy gradient z wycentrowaną treścią
+- Sekcje produktowe: naprzemiennie ułożone prezentacje
+- Stopka: ciemna sekcja pełnej szerokości
+- Responsywność od 559px do 1920px
+
+### Filozofia Białej Przestrzeni
+- **Rytm galerii**: Hojne odstępy pozwalają każdej sekcji produktowej oddychać jak osobna ekspozycja.
+- **Sekcje kolorowe jako wizualny oddech**: Gradient hero i prezentacje produktów zapewniają chromatyczną ulgę między monochromatycznymi sekcjami interfejsu.
+
+### Skala Promieni Narożników
+- Minimalne (2px): Małe elementy linków
+- Subtelne (6px): Małe kontenery, separatory
+- Komfortowe (8px): Karty, obrazy, okna dialogowe
+- Pigułka (50px): Przyciski zakładek, CTA
+- Koło (50%): Przyciski ikonowe, okrągłe elementy
+
+## 6. Głębia i Elewacja
+
+| Poziom | Sposób | Zastosowanie |
+|--------|--------|--------------|
+| Płaski (Poziom 0) | Brak cienia | Tło strony, większość tekstów |
+| Powierzchnia (Poziom 1) | Biała karta na gradiencie lub ciemnej sekcji | Karty, prezentacje produktów |
+| Uniesiony (Poziom 2) | Subtelny cień | Pływające karty, stany hover |
+
+**Filozofia cienia**: Figma używa cieni oszczędnie. Podstawowymi mechanizmami głębi są **kontrast tła** (biała treść na kolorowych lub ciemnych sekcjach) i inherentna wymiarowość samych zrzutów ekranu produktu.
+
+## 7. Zalecenia i Przestrogi
+
+### Zalecaj
+- Używaj figmaSans z precyzyjnymi grubościami zmiennymi (320–540) — ta granularna kontrola grubości JEST projektem
+- Utrzymuj ściśle czarno-biały interfejs — kolor pochodzi wyłącznie z treści produktowych
+- Stosuj geometrię pigułki (50px) i koła (50%) dla wszystkich elementów interaktywnych
+- Stosuj przerywane obrysy fokusu 2px — charakterystyczny wzorzec dostępności
+- Włączaj funkcję `"kern"` dla wszystkich tekstów
+- Używaj figmaMono pisanego wielkimi literami z dodatnim rozstępem liter dla etykiet
+- Stosuj ujemny rozstęp liter w całym interfejsie (-0.1px do -1.72px)
+
+### Unikaj
+- Nie dodawaj kolorów interfejsu — monochromatyczna paleta jest absolutna
+- Nie używaj standardowych grubości krojów pisma (400, 500, 600, 700) — stosuj unikalne wartości zmiennego kroju pisma (320, 330, 340, 450, 480, 540)
+- Nie używaj ostrych narożników w przyciskach — wyłącznie geometria pigułki i koła
+- Nie używaj pełnych obrysów fokusu — przerywany jest charakterystyczny
+- Nie zwiększaj grubości tekstu podstawowego powyżej 450 — estetyka lekkości jest kluczowa
+- Nie stosuj dodatniego rozstępu liter w tekście podstawowym — zawsze jest ujemny
+
+## 8. Zachowanie Responsywne
+
+### Punkty Graniczne
+| Nazwa | Szerokość | Główne zmiany |
+|-------|-----------|---------------|
+| Małe mobile | <560px | Zwarta struktura, układanie pionowe |
+| Tablet | 560–768px | Drobne korekty |
+| Małe desktop | 768–960px | Układy 2-kolumnowe |
+| Desktop | 960–1280px | Standardowy układ |
+| Duże desktop | 1280–1440px | Rozszerzony |
+| Ultra-szeroki | 1440–1920px | Maksymalna szerokość |
+
+### Strategia Zwijania
+- Tekst hero: 86px → 64px → 48px
+- Zakładki produktów: poziome przewijanie na mobile
+- Sekcje funkcji: układanie w jedną kolumnę
+- Stopka: wielokolumnowa → układanie pionowe
+
+## 9. Przewodnik po Promptach dla Agenta
+
+### Szybka Referencja Kolorów
+- Wszystko: „czysta czerń (#000000)" i „czysta biel (#ffffff)"
+- Szklana ciemna: „rgba(0, 0, 0, 0.08)"
+- Szklana jasna: „rgba(255, 255, 255, 0.16)"
+
+### Przykładowe Prompty Komponentów
+- „Utwórz hero na żywym, wielobarwnym gradiencie (zielony, żółty, fioletowy, różowy). Nagłówek 86px figmaSans grubość 400, line-height 1.0, letter-spacing -1.72px. Biały tekst. Biały przycisk pigułka CTA (promień 50px, odstępy 8px 18px)."
+- „Zaprojektuj pasek zakładek produktu z przyciskami w kształcie pigułki (promień 50px). Aktywna: czarne tło, biały tekst. Nieaktywna: przezroczyste, czarny tekst. figmaSans 20px grubość 480."
+- „Zbuduj etykietę sekcji: figmaMono 18px, wielkie litery, letter-spacing 0.54px, czarny tekst. Kerning włączony."
+- „Utwórz tekst podstawowy 20px figmaSans grubość 330, line-height 1.40, letter-spacing -0.14px. Czysta czerń na białym tle."
+
+### Przewodnik Iteracji
+1. Używaj precyzyjnych wartości grubości zmiennego kroju pisma: 320, 330, 340, 450, 480, 540, 700
+2. Interfejs jest zawsze czarno-biały — nigdy nie dodawaj kolorów do chrome
+3. Przerywane obrysy fokusu, nie pełne
+4. Rozstęp liter jest zawsze ujemny w tekście podstawowym, zawsze dodatni w etykietach mono
+5. Pigułka (50px) dla przycisków i zakładek, koło (50%) dla przycisków ikonowych

open-design/design-systems/figma/DESIGN-pt-br.md

@@ -0,0 +1,223 @@
+# Design System Inspirado no Figma
+
+> Category: Design & Criatividade
+> Ferramenta de design colaborativo. Multicolorida e vibrante, lúdica mas profissional.
+
+## 1. Tema Visual & Atmosfera
+
+A interface do Figma é a ferramenta de design que se projetou a si mesma — uma aula magistral de sofisticação tipográfica onde uma fonte variável personalizada (figmaSans) modula entre ultrafino (weight 320) e negrito (weight 700), com paradas em intermediários incomuns (330, 340, 450, 480, 540) que a maioria dos sistemas tipográficos jamais explora. Esse controle granular de peso confere a cada elemento de texto um peso visual precisamente calibrado, criando hierarquia por meio de micro-diferenças em vez do instrumento contundente de "regular vs negrito."
+
+A página apresenta uma dualidade fascinante: o cromo da interface é estritamente preto e branco (literalmente apenas `#000000` e `#ffffff` detectados como cores), enquanto a seção hero e as vitrines de produto explodem com gradientes multicoloridos e vibrantes — verdes elétricos, amarelos brilhantes, roxos profundos, rosas intensos. Essa separação significa que o próprio design system é sem cor, tratando a saída colorida do produto como o conteúdo principal. A página de marketing do Figma é essencialmente uma parede de galeria branca exibindo arte colorida.
+
+O que torna o Figma distintivo além da fonte variável é sua geometria de círculos e pílulas. Os botões usam raio de 50px (pílula) ou 50% (círculo perfeito para botões de ícone), criando uma sensação orgânica de paleta de ferramentas. O indicador de foco com contorno tracejado (`dashed 2px`) é uma escolha de design deliberada que ecoa as alças de seleção no próprio editor Figma — a linguagem de UI do site referencia a linguagem de UI do produto.
+
+**Características Principais:**
+- Fonte variável personalizada (figmaSans) com paradas de peso incomuns: 320, 330, 340, 450, 480, 540, 700
+- Cromo de interface estritamente preto e branco — a cor existe apenas no conteúdo do produto
+- figmaMono para rótulos técnicos em maiúsculas com amplo espaçamento entre letras
+- Geometria de botões em pílula (50px) e circular (50%)
+- Contornos de foco tracejados que ecoam as alças de seleção do editor Figma
+- Gradientes hero multicoloridos e vibrantes (verde, amarelo, roxo, rosa)
+- Feature OpenType `"kern"` ativado globalmente
+- Espaçamento entre letras negativo em todo o site — até o corpo do texto usa de -0.14px a -0.26px
+
+## 2. Paleta de Cores & Papéis
+
+### Primária
+- **Preto Puro** (`#000000`): Todo o texto, todos os botões sólidos, todas as bordas. A única "cor" da interface.
+- **Branco Puro** (`#ffffff`): Todos os fundos, botões brancos, texto em superfícies escuras. A outra metade do binário.
+
+*Nota: O site de marketing do Figma usa APENAS essas duas cores em sua camada de interface. Todas as cores vibrantes aparecem exclusivamente em capturas de tela do produto, gradientes hero e conteúdo incorporado.*
+
+### Superfície & Fundo
+- **Branco Puro** (`#ffffff`): Fundo principal da página e superfícies de cartão.
+- **Preto Vidro** (`rgba(0, 0, 0, 0.08)`): Sobreposição escura sutil para botões circulares secundários e efeitos de vidro.
+- **Branco Vidro** (`rgba(255, 255, 255, 0.16)`): Sobreposição de vidro fosco para botões em superfícies escuras/coloridas.
+
+### Sistema de Gradientes
+- **Gradiente Hero**: Um gradiente multiparada vibrante usando verde elétrico, amarelo brilhante, roxo profundo e rosa intenso. Esse gradiente é a assinatura visual da seção hero — ele representa as possibilidades criativas da ferramenta.
+- **Gradientes de Seção do Produto**: Áreas individuais do produto (Design, Dev Mode, Prototipagem) podem usar temas de cores distintos em suas vitrines.
+
+## 3. Regras Tipográficas
+
+### Família de Fontes
+- **Primária**: `figmaSans`, com fallbacks: `figmaSans Fallback, SF Pro Display, system-ui, helvetica`
+- **Monoespaçada / Rótulos**: `figmaMono`, com fallbacks: `figmaMono Fallback, SF Mono, menlo`
+
+### Hierarquia
+
+| Papel | Fonte | Tamanho | Peso | Altura de Linha | Espaçamento entre Letras | Notas |
+|-------|-------|---------|------|-----------------|--------------------------|-------|
+| Display / Hero | figmaSans | 86px (5.38rem) | 400 | 1.00 (compacto) | -1.72px | Impacto máximo, tracking extremo |
+| Título de Seção | figmaSans | 64px (4rem) | 400 | 1.10 (compacto) | -0.96px | Títulos de seção de funcionalidade |
+| Subtítulo | figmaSans | 26px (1.63rem) | 540 | 1.35 | -0.26px | Texto de seção enfatizado |
+| Subtítulo Leve | figmaSans | 26px (1.63rem) | 340 | 1.35 | -0.26px | Texto de seção com peso leve |
+| Título de Funcionalidade | figmaSans | 24px (1.5rem) | 700 | 1.45 | normal | Títulos de cartão em negrito |
+| Corpo Grande | figmaSans | 20px (1.25rem) | 330–450 | 1.30–1.40 | -0.1px a -0.14px | Descrições, introduções |
+| Corpo / Botão | figmaSans | 16px (1rem) | 330–400 | 1.40–1.45 | -0.14px a normal | Corpo padrão, nav, botões |
+| Corpo Leve | figmaSans | 18px (1.13rem) | 320 | 1.45 | -0.26px a normal | Corpo com peso leve |
+| Rótulo Mono | figmaMono | 18px (1.13rem) | 400 | 1.30 (compacto) | 0.54px | Rótulos de seção em maiúsculas |
+| Mono Pequeno | figmaMono | 12px (0.75rem) | 400 | 1.00 (compacto) | 0.6px | Tags minúsculas em maiúsculas |
+
+### Princípios
+- **Precisão da fonte variável**: figmaSans usa pesos que a maioria dos sistemas jamais toca — 320, 330, 340, 450, 480, 540. Isso cria hierarquia por meio de diferenças sutis de peso em vez de saltos dramáticos. A diferença entre 330 e 340 é quase imperceptível, mas estruturalmente significativa.
+- **Leve como base**: A maior parte do corpo do texto usa 320–340 (mais leve que o "regular" típico de 400), criando uma experiência de leitura etérea e arejada que combina com a estética de ferramenta de design.
+- **Kern em todo lugar**: Todo elemento de texto ativa a feature OpenType `"kern"` — o kerning não é opcional, é estrutural.
+- **Tracking negativo por padrão**: Até o corpo do texto usa -0.1px a -0.26px de espaçamento entre letras, criando texto universalmente compacto. O texto de display comprime ainda mais para -0.96px e -1.72px.
+- **Mono para estrutura**: figmaMono em maiúsculas com espaçamento positivo entre letras (0.54px–0.6px) cria rótulos de referência técnica.
+
+## 4. Estilos de Componentes
+
+### Botões
+
+**Sólido Preto (Pílula)**
+- Fundo: Preto Puro (`#000000`)
+- Texto: Branco Puro (`#ffffff`)
+- Raio: círculo (50%) para botões de ícone
+- Foco: contorno tracejado 2px
+- Ênfase máxima
+
+**Pílula Branca**
+- Fundo: Branco Puro (`#ffffff`)
+- Texto: Preto Puro (`#000000`)
+- Padding: 8px 18px 10px (vertical assimétrico)
+- Raio: pílula (50px)
+- Foco: contorno tracejado 2px
+- CTA padrão em superfícies escuras/coloridas
+
+**Vidro Escuro**
+- Fundo: `rgba(0, 0, 0, 0.08)` (sobreposição escura sutil)
+- Texto: Preto Puro
+- Raio: círculo (50%)
+- Foco: contorno tracejado 2px
+- Ação secundária em superfícies claras
+
+**Vidro Claro**
+- Fundo: `rgba(255, 255, 255, 0.16)` (vidro fosco)
+- Texto: Branco Puro
+- Raio: círculo (50%)
+- Foco: contorno tracejado 2px
+- Ação secundária em superfícies escuras/coloridas
+
+### Cartões & Contêineres
+- Fundo: Branco Puro
+- Borda: nenhuma ou mínima
+- Raio: 6px (contêineres pequenos), 8px (imagens, cartões, diálogos)
+- Sombra: efeitos de elevação sutis a médios
+- Capturas de tela do produto como conteúdo do cartão
+
+### Navegação
+- Nav horizontal limpa em branco
+- Logo: wordmark do Figma em preto
+- Abas de produto: navegação por abas em forma de pílula (50px)
+- Links: texto preto, decoração sublinhado 1px
+- CTA: botão pílula preto
+- Hover: cor do texto via variável CSS
+
+### Componentes Distintivos
+
+**Barra de Abas do Produto**
+- Abas horizontais em formato de pílula (raio 50px)
+- Cada aba representa uma área do produto Figma (Design, Dev Mode, Prototipagem, etc.)
+- Aba ativa destacada
+
+**Seção de Gradiente Hero**
+- Fundo com gradiente multicolorido e vibrante de largura total
+- Sobreposição de texto branco com título display de 86px
+- Capturas de tela do produto flutuando dentro do gradiente
+
+**Indicadores de Foco Tracejados**
+- Todos os elementos interativos usam contorno `dashed 2px` no foco
+- Referencia as alças de seleção no editor Figma
+- Uma escolha de meta-design que conecta o site e o produto
+
+## 5. Princípios de Layout
+
+### Sistema de Espaçamento
+- Unidade base: 8px
+- Escala: 1px, 2px, 4px, 4.5px, 8px, 10px, 12px, 16px, 18px, 24px, 32px, 40px, 46px, 48px, 50px
+
+### Grade & Contêiner
+- Largura máxima do contêiner: até 1920px
+- Hero: gradiente de largura total com conteúdo centralizado
+- Seções do produto: vitrines alternadas
+- Rodapé: seção escura de largura total
+- Responsivo de 559px a 1920px
+
+### Filosofia de Espaço em Branco
+- **Ritmo de galeria**: O espaçamento generoso permite que cada seção do produto respire como uma exposição própria.
+- **Seções coloridas como respiração visual**: O hero gradiente e as vitrines do produto proporcionam alívio cromático entre as seções monocromáticas da interface.
+
+### Escala de Raio de Borda
+- Mínimo (2px): Pequenos elementos de link
+- Sutil (6px): Contêineres pequenos, divisores
+- Confortável (8px): Cartões, imagens, diálogos
+- Pílula (50px): Botões de aba, CTAs
+- Círculo (50%): Botões de ícone, elementos circulares
+
+## 6. Profundidade & Elevação
+
+| Nível | Tratamento | Uso |
+|-------|-----------|-----|
+| Plano (Nível 0) | Sem sombra | Fundo da página, maior parte do texto |
+| Superfície (Nível 1) | Cartão branco em seção gradiente/escura | Cartões, vitrines do produto |
+| Elevado (Nível 2) | Sombra sutil | Cartões flutuantes, estados de hover |
+
+**Filosofia de Sombra**: O Figma usa sombras com parcimônia. Os principais mecanismos de profundidade são o **contraste de fundo** (conteúdo branco em seções coloridas/escuras) e a dimensionalidade inerente das próprias capturas de tela do produto.
+
+## 7. O Que Fazer e O Que Evitar
+
+### Faça
+- Use figmaSans com pesos variáveis precisos (320–540) — o controle granular de peso É o design
+- Mantenha a interface estritamente preto e branco — a cor vem apenas do conteúdo do produto
+- Use geometria de pílula (50px) e circular (50%) para todos os elementos interativos
+- Aplique contornos de foco tracejados de 2px — o padrão de acessibilidade característico
+- Ative a feature `"kern"` em todo o texto
+- Use figmaMono em maiúsculas com espaçamento positivo entre letras para rótulos
+- Aplique espaçamento negativo entre letras em todo o site (-0.1px a -1.72px)
+
+### Evite
+- Não adicione cores à interface — a paleta monocromática é absoluta
+- Não use pesos de fonte padrão (400, 500, 600, 700) — use as paradas únicas da fonte variável (320, 330, 340, 450, 480, 540)
+- Não use cantos afiados nos botões — apenas geometria de pílula e circular
+- Não use contornos de foco sólidos — o tracejado é a assinatura
+- Não aumente o peso da fonte do corpo acima de 450 — a estética de peso leve é central
+- Não use espaçamento positivo entre letras no corpo do texto — é sempre negativo
+
+## 8. Comportamento Responsivo
+
+### Breakpoints
+| Nome | Largura | Principais Mudanças |
+|------|---------|---------------------|
+| Mobile Pequeno | <560px | Layout compacto, empilhado |
+| Tablet | 560–768px | Ajustes menores |
+| Desktop Pequeno | 768–960px | Layouts em 2 colunas |
+| Desktop | 960–1280px | Layout padrão |
+| Desktop Grande | 1280–1440px | Expandido |
+| Ultra-wide | 1440–1920px | Largura máxima |
+
+### Estratégia de Colapso
+- Texto hero: 86px → 64px → 48px
+- Abas do produto: scroll horizontal no mobile
+- Seções de funcionalidades: coluna única empilhada
+- Rodapé: múltiplas colunas → empilhado
+
+## 9. Guia de Prompt para Agentes
+
+### Referência Rápida de Cores
+- Tudo: "Preto Puro (#000000)" e "Branco Puro (#ffffff)"
+- Vidro Escuro: "rgba(0, 0, 0, 0.08)"
+- Vidro Claro: "rgba(255, 255, 255, 0.16)"
+
+### Exemplos de Prompts de Componentes
+- "Crie um hero em um gradiente multicolorido e vibrante (verde, amarelo, roxo, rosa). Título em 86px figmaSans weight 400, line-height 1.0, letter-spacing -1.72px. Texto branco. Botão CTA pílula branca (raio 50px, padding 8px 18px)."
+- "Projete uma barra de abas de produto com botões em formato de pílula (raio 50px). Ativa: fundo preto, texto branco. Inativa: transparente, texto preto. figmaSans em 20px weight 480."
+- "Construa um rótulo de seção: figmaMono 18px, maiúsculas, letter-spacing 0.54px, texto preto. Kern ativado."
+- "Crie corpo do texto em 20px figmaSans weight 330, line-height 1.40, letter-spacing -0.14px. Preto Puro sobre branco."
+
+### Guia de Iteração
+1. Use as paradas de peso da fonte variável com precisão: 320, 330, 340, 450, 480, 540, 700
+2. A interface é sempre preto + branco — nunca adicione cores ao cromo
+3. Contornos de foco tracejados, não sólidos
+4. O espaçamento entre letras é sempre negativo no corpo, sempre positivo nos rótulos mono
+5. Pílula (50px) para botões/abas, círculo (50%) para botões de ícone

open-design/design-systems/figma/DESIGN-ru.md

@@ -0,0 +1,223 @@
+# Дизайн-система, вдохновлённая Figma
+
+> Категория: Дизайн и творчество
+> Инструмент для совместного дизайна. Яркая многоцветная палитра, игривый и одновременно профессиональный стиль.
+
+## 1. Визуальная тема и атмосфера
+
+Интерфейс Figma — это дизайн-инструмент, создавший сам себя: мастер-класс по типографической изощрённости, где кастомный вариативный шрифт (figmaSans) плавно меняет вес от почти невесомого (320) до жирного (700) с остановками на нетипичных промежуточных значениях (330, 340, 450, 480, 540), которые большинство типографических систем никогда не используют. Такой точный контроль над насыщенностью шрифта даёт каждому текстовому элементу тщательно откалиброванный визуальный вес, выстраивая иерархию через микроразличия, а не грубым инструментом «обычный vs жирный».
+
+Страница представляет захватывающую двойственность: хром интерфейса строго чёрно-белый (буквально только `#000000` и `#ffffff` в качестве цветов), тогда как секция hero и витрины продукта взрываются яркими многоцветными градиентами — электрический зелёный, насыщенный жёлтый, глубокий фиолетовый, горячий розовый. Такое разделение означает, что сама дизайн-система бесцветна — красочный результат работы продукта выступает главным героем. Маркетинговая страница Figma — это, по сути, белая галерейная стена, на которой развешены яркие полотна.
+
+Помимо вариативного шрифта, Figma выделяет геометрия окружностей и «таблеток». Кнопки используют радиус 50px (таблетка) или 50% (идеальный круг для кнопок-иконок), создавая органичный вид, напоминающий палитру инструментов. Пунктирный индикатор фокуса (`dashed 2px`) — намеренное дизайнерское решение, отсылающее к маркерам выделения в самом редакторе Figma: язык UI сайта цитирует язык UI продукта.
+
+**Ключевые характеристики:**
+- Кастомный вариативный шрифт (figmaSans) с нетипичными насыщенностями: 320, 330, 340, 450, 480, 540, 700
+- Строго чёрно-белый хром интерфейса — цвет присутствует только в контенте продукта
+- figmaMono для технических меток в верхнем регистре с увеличенным межбуквенным интервалом
+- Геометрия таблетки (50px) и круга (50%) для кнопок
+- Пунктирные контуры фокуса, отсылающие к маркерам выделения редактора Figma
+- Яркие многоцветные градиенты hero (зелёный, жёлтый, фиолетовый, розовый)
+- Функция OpenType `"kern"` включена глобально
+- Отрицательный трекинг повсюду — даже основной текст имеет значения от -0.14px до -0.26px
+
+## 2. Цветовая палитра и роли
+
+### Основные цвета
+- **Чистый чёрный** (`#000000`): весь текст, все сплошные кнопки, все границы. Единственный «цвет» интерфейса.
+- **Чистый белый** (`#ffffff`): все фоны, белые кнопки, текст на тёмных поверхностях. Вторая половина бинарной системы.
+
+*Примечание: маркетинговый сайт Figma использует ТОЛЬКО эти два цвета для слоя интерфейса. Все яркие цвета появляются исключительно на скриншотах продукта, в градиентах hero и во встроенном контенте.*
+
+### Поверхности и фоны
+- **Чистый белый** (`#ffffff`): основной фон страницы и поверхности карточек.
+- **Стеклянный чёрный** (`rgba(0, 0, 0, 0.08)`): тонкое тёмное наложение для вторичных круглых кнопок и стеклянных эффектов.
+- **Стеклянный белый** (`rgba(255, 255, 255, 0.16)`): матовое стеклянное наложение для кнопок на тёмных/цветных поверхностях.
+
+### Система градиентов
+- **Градиент Hero**: яркий многоцветный градиент с несколькими точками остановки, использующий электрический зелёный, насыщенный жёлтый, глубокий фиолетовый и горячий розовый. Этот градиент — визуальная подпись секции hero, воплощающая творческие возможности инструмента.
+- **Градиенты разделов продукта**: отдельные области продукта (Design, Dev Mode, Prototyping) могут использовать отдельные цветовые темы в своих витринах.
+
+## 3. Правила типографики
+
+### Семейство шрифтов
+- **Основной**: `figmaSans`, запасные: `figmaSans Fallback, SF Pro Display, system-ui, helvetica`
+- **Моноширинный / Метки**: `figmaMono`, запасные: `figmaMono Fallback, SF Mono, menlo`
+
+### Иерархия
+
+| Роль | Шрифт | Размер | Насыщенность | Высота строки | Трекинг | Примечания |
+|------|-------|--------|--------------|---------------|---------|------------|
+| Display / Hero | figmaSans | 86px (5.38rem) | 400 | 1.00 (плотный) | -1.72px | Максимальный эффект, экстремальный трекинг |
+| Заголовок раздела | figmaSans | 64px (4rem) | 400 | 1.10 (плотный) | -0.96px | Заголовки функциональных разделов |
+| Подзаголовок | figmaSans | 26px (1.63rem) | 540 | 1.35 | -0.26px | Акцентированный текст раздела |
+| Подзаголовок лёгкий | figmaSans | 26px (1.63rem) | 340 | 1.35 | -0.26px | Лёгкий текст раздела |
+| Заголовок функции | figmaSans | 24px (1.5rem) | 700 | 1.45 | normal | Жирные заголовки карточек |
+| Основной крупный | figmaSans | 20px (1.25rem) | 330–450 | 1.30–1.40 | -0.1px to -0.14px | Описания, вводный текст |
+| Основной / Кнопка | figmaSans | 16px (1rem) | 330–400 | 1.40–1.45 | -0.14px to normal | Стандартный текст, навигация, кнопки |
+| Основной лёгкий | figmaSans | 18px (1.13rem) | 320 | 1.45 | -0.26px to normal | Лёгкий основной текст |
+| Метка Mono | figmaMono | 18px (1.13rem) | 400 | 1.30 (плотный) | 0.54px | Метки разделов в верхнем регистре |
+| Метка Mono мелкая | figmaMono | 12px (0.75rem) | 400 | 1.00 (плотный) | 0.6px | Крошечные теги в верхнем регистре |
+
+### Принципы
+- **Точность вариативного шрифта**: figmaSans использует насыщенности, которых большинство систем никогда не касается — 320, 330, 340, 450, 480, 540. Это создаёт иерархию через тонкие различия в весе, а не через резкие скачки. Разница между 330 и 340 почти неощутима, но структурно значима.
+- **Лёгкость как основа**: большинство основного текста использует 320–340 (легче, чем типичное «обычное» 400), создавая воздушное, лёгкое восприятие, соответствующее эстетике дизайн-инструмента.
+- **Кернинг везде**: каждый текстовый элемент включает функцию OpenType `"kern"` — кернинг не опционален, он структурен.
+- **Отрицательный трекинг по умолчанию**: даже основной текст использует от -0.1px до -0.26px межбуквенного интервала, создавая универсально плотный текст. Дисплейный текст сжимается ещё сильнее — до -0.96px и -1.72px.
+- **Mono для структуры**: figmaMono в верхнем регистре с положительным трекингом (0.54px–0.6px) создаёт технические метки-ориентиры.
+
+## 4. Стили компонентов
+
+### Кнопки
+
+**Чёрная сплошная (таблетка)**
+- Фон: чистый чёрный (`#000000`)
+- Текст: чистый белый (`#ffffff`)
+- Радиус: круг (50%) для кнопок-иконок
+- Фокус: пунктирный контур 2px
+- Максимальный акцент
+
+**Белая таблетка**
+- Фон: чистый белый (`#ffffff`)
+- Текст: чистый чёрный (`#000000`)
+- Отступы: 8px 18px 10px (асимметричный по вертикали)
+- Радиус: таблетка (50px)
+- Фокус: пунктирный контур 2px
+- Стандартный CTA на тёмных/цветных поверхностях
+
+**Стеклянная тёмная**
+- Фон: `rgba(0, 0, 0, 0.08)` (тонкое тёмное наложение)
+- Текст: чистый чёрный
+- Радиус: круг (50%)
+- Фокус: пунктирный контур 2px
+- Вторичное действие на светлых поверхностях
+
+**Стеклянная светлая**
+- Фон: `rgba(255, 255, 255, 0.16)` (матовое стекло)
+- Текст: чистый белый
+- Радиус: круг (50%)
+- Фокус: пунктирный контур 2px
+- Вторичное действие на тёмных/цветных поверхностях
+
+### Карточки и контейнеры
+- Фон: чистый белый
+- Граница: отсутствует или минимальная
+- Радиус: 6px (малые контейнеры), 8px (изображения, карточки, диалоги)
+- Тень: эффекты тонкого и среднего подъёма
+- Скриншоты продукта в качестве контента карточек
+
+### Навигация
+- Чистая горизонтальная навигация на белом
+- Логотип: Figma wordmark в чёрном
+- Вкладки продукта: навигация по вкладкам в форме таблетки (50px)
+- Ссылки: чёрный текст, декорация подчёркивания 1px
+- CTA: чёрная кнопка-таблетка
+- Наведение: цвет текста через CSS-переменную
+
+### Характерные компоненты
+
+**Панель вкладок продукта**
+- Горизонтальные вкладки в форме таблетки (радиус 50px)
+- Каждая вкладка представляет область продукта Figma (Design, Dev Mode, Prototyping и т.д.)
+- Активная вкладка выделена
+
+**Секция с градиентом Hero**
+- Яркий многоцветный градиентный фон на всю ширину
+- Белый текст поверх с дисплейным заголовком 86px
+- Скриншоты продукта, «плавающие» внутри градиента
+
+**Пунктирные индикаторы фокуса**
+- Все интерактивные элементы используют контур `dashed 2px` при фокусе
+- Отсылка к маркерам выделения в редакторе Figma
+- Мета-дизайнерское решение, связывающее сайт и продукт
+
+## 5. Принципы вёрстки
+
+### Система отступов
+- Базовая единица: 8px
+- Шкала: 1px, 2px, 4px, 4.5px, 8px, 10px, 12px, 16px, 18px, 24px, 32px, 40px, 46px, 48px, 50px
+
+### Сетка и контейнер
+- Максимальная ширина контейнера: до 1920px
+- Hero: градиент на всю ширину с центрированным контентом
+- Разделы продукта: чередующиеся витрины
+- Подвал: тёмная секция на всю ширину
+- Адаптивность от 559px до 1920px
+
+### Философия пустого пространства
+- **Галерейный ритм**: щедрые отступы дают каждому разделу продукта «дышать» как самостоятельному экспонату.
+- **Цветовые разделы как визуальное дыхание**: градиентный hero и витрины продуктов обеспечивают хроматическую разрядку между монохромными секциями интерфейса.
+
+### Шкала скругления углов
+- Минимальное (2px): малые элементы-ссылки
+- Тонкое (6px): малые контейнеры, разделители
+- Умеренное (8px): карточки, изображения, диалоги
+- Таблетка (50px): кнопки-вкладки, CTA
+- Круг (50%): кнопки-иконки, круглые элементы
+
+## 6. Глубина и подъём
+
+| Уровень | Обработка | Использование |
+|---------|-----------|---------------|
+| Плоский (Уровень 0) | Без тени | Фон страницы, большинство текста |
+| Поверхность (Уровень 1) | Белая карточка на градиентном/тёмном разделе | Карточки, витрины продукта |
+| Приподнятый (Уровень 2) | Тонкая тень | Плавающие карточки, состояния наведения |
+
+**Философия теней**: Figma использует тени экономно. Основные механизмы создания глубины — **контраст фона** (белый контент на цветных/тёмных разделах) и врождённая объёмность самих скриншотов продукта.
+
+## 7. Что делать и чего не делать
+
+### Делать
+- Использовать figmaSans с точными вариативными насыщенностями (320–540) — гранулярный контроль веса И ЕСТЬ дизайн
+- Поддерживать строго чёрно-белый интерфейс — цвет исходит только из контента продукта
+- Использовать геометрию таблетки (50px) и круга (50%) для всех интерактивных элементов
+- Применять пунктирные контуры фокуса 2px — фирменный паттерн доступности
+- Включать функцию `"kern"` для всего текста
+- Использовать figmaMono в верхнем регистре с положительным трекингом для меток
+- Применять отрицательный трекинг повсюду (от -0.1px до -1.72px)
+
+### Не делать
+- Не добавлять цвета интерфейса — монохромная палитра абсолютна
+- Не использовать стандартные насыщенности шрифта (400, 500, 600, 700) — используйте уникальные значения вариативного шрифта (320, 330, 340, 450, 480, 540)
+- Не использовать острые углы на кнопках — только геометрия таблетки и круга
+- Не использовать сплошные контуры фокуса — пунктир является фирменным стилем
+- Не увеличивать насыщенность основного шрифта выше 450 — лёгкая эстетика является основой
+- Не использовать положительный трекинг для основного текста — он всегда отрицательный
+
+## 8. Адаптивное поведение
+
+### Контрольные точки
+| Название | Ширина | Ключевые изменения |
+|----------|--------|--------------------|
+| Малый мобильный | <560px | Компактная вёрстка, стопка |
+| Планшет | 560–768px | Незначительные корректировки |
+| Малый десктоп | 768–960px | Двухколоночная вёрстка |
+| Десктоп | 960–1280px | Стандартная вёрстка |
+| Большой десктоп | 1280–1440px | Расширенная |
+| Ультраширокий | 1440–1920px | Максимальная ширина |
+
+### Стратегия свёртки
+- Текст hero: 86px → 64px → 48px
+- Вкладки продукта: горизонтальная прокрутка на мобильных
+- Функциональные разделы: одна колонка, стопка
+- Подвал: несколько колонок → стопка
+
+## 9. Руководство для агентных промптов
+
+### Быстрый справочник по цветам
+- Всё: «чистый чёрный (#000000)» и «чистый белый (#ffffff)»
+- Стеклянный тёмный: «rgba(0, 0, 0, 0.08)»
+- Стеклянный светлый: «rgba(255, 255, 255, 0.16)»
+
+### Примеры промптов для компонентов
+- «Создай hero на ярком многоцветном градиенте (зелёный, жёлтый, фиолетовый, розовый). Заголовок 86px figmaSans насыщенность 400, line-height 1.0, letter-spacing -1.72px. Белый текст. Белая кнопка CTA-таблетка (радиус 50px, отступы 8px 18px).»
+- «Разработай панель вкладок продукта с кнопками в форме таблетки (радиус 50px). Активная: чёрный фон, белый текст. Неактивная: прозрачный фон, чёрный текст. figmaSans 20px насыщенность 480.»
+- «Создай метку раздела: figmaMono 18px, верхний регистр, letter-spacing 0.54px, чёрный текст. Kern включён.»
+- «Создай основной текст 20px figmaSans насыщенность 330, line-height 1.40, letter-spacing -0.14px. Чистый чёрный на белом.»
+
+### Руководство по итерациям
+1. Используй точные значения вариативного шрифта: 320, 330, 340, 450, 480, 540, 700
+2. Интерфейс — всегда чёрный + белый, никогда не добавляй цвета в хром
+3. Пунктирные контуры фокуса, не сплошные
+4. Трекинг всегда отрицательный для основного текста, всегда положительный для меток mono
+5. Таблетка (50px) для кнопок/вкладок, круг (50%) для кнопок-иконок

open-design/design-systems/figma/DESIGN-tr.md

@@ -0,0 +1,223 @@
+# Figma'dan İlham Alan Tasarım Sistemi
+
+> Kategori: Tasarım ve Yaratıcılık
+> İş birliğine dayalı tasarım aracı. Canlı çok renkli, eğlenceli ama profesyonel.
+
+## 1. Görsel Tema ve Atmosfer
+
+Figma'nın arayüzü, kendisini tasarlayan tasarım aracıdır — özel bir değişken fontun (figmaSans) son derece ince (ağırlık 320) ile kalın (ağırlık 700) arasında, çoğu tipografi sisteminin hiç keşfetmediği alışılmadık ara duraklarda (330, 340, 450, 480, 540) modulasyon yaptığı, tipografik incelemenin bir ustalık dersidir. Bu ayrıntılı ağırlık kontrolü, her metin öğesine hassasça kalibre edilmiş bir görsel ağırlık kazandırır ve hiyerarşiyi "normal ile kalın" arasındaki kaba fark yerine mikro farklılıklar aracılığıyla oluşturur.
+
+Sayfa büyüleyici bir ikililik sunar: arayüz çerçevesi kesinlikle siyah-beyazdır (gerçek anlamda yalnızca renk olarak `#000000` ve `#ffffff` algılanır); kahraman bölümü ve ürün vitrisleri ise elektrik yeşili, parlak sarı, derin mor, ateşli pembe gibi canlı çok renkli gradyanlarla patlar. Bu ayrım, tasarım sisteminin kendisinin renksiz olduğu ve ürünün renkli çıktısını kahraman içerik olarak ele aldığı anlamına gelir. Figma'nın pazarlama sayfası özünde renkli sanat eserlerini sergileyen beyaz bir galeri duvarıdır.
+
+Figma'yı değişken fontun ötesinde ayırt eden şey, daire ve hap geometrisidir. Düğmeler 50 piksel yarıçap (hap) veya %50 (simge düğmeleri için mükemmel daire) kullanır; bu da organik, araç paleti benzeri bir his yaratır. Kesik çizgili odak göstergesi (`dashed 2px`), Figma editörünün kendisindeki seçim tutamaçlarını kasıtlı olarak yansıtan bir tasarım tercihi olup web sitesinin UI dili, ürünün UI diline gönderme yapar.
+
+**Temel Özellikler:**
+- Alışılmadık ağırlık duraklı özel değişken font (figmaSans): 320, 330, 340, 450, 480, 540, 700
+- Kesinlikle siyah-beyaz arayüz çerçevesi — renk yalnızca ürün içeriğinde bulunur
+- Geniş harf aralığıyla büyük harfli teknik etiketler için figmaMono
+- Hap (50px) ve dairesel (%50) düğme geometrisi
+- Figma'nın editör seçim tutamaçlarını yansıtan kesik çizgili odak çerçeveleri
+- Canlı çok renkli kahraman gradyanları (yeşil, sarı, mor, pembe)
+- Global olarak etkinleştirilmiş OpenType `"kern"` özelliği
+- Her yerde negatif harf aralığı — gövde metni bile -0.14px ile -0.26px arasında
+
+## 2. Renk Paleti ve Rolleri
+
+### Birincil
+- **Saf Siyah** (`#000000`): Tüm metinler, tüm düz düğmeler, tüm kenarlıklar. Arayüzün tek "rengi."
+- **Saf Beyaz** (`#ffffff`): Tüm arka planlar, beyaz düğmeler, koyu yüzeylerdeki metin. İkilinin diğer yarısı.
+
+*Not: Figma'nın pazarlama sitesi arayüz katmanı için YALNIZCA bu iki rengi kullanır. Tüm canlı renkler yalnızca ürün ekran görüntülerinde, kahraman gradyanlarında ve gömülü içeriklerde görünür.*
+
+### Yüzey ve Arka Plan
+- **Saf Beyaz** (`#ffffff`): Birincil sayfa arka planı ve kart yüzeyleri.
+- **Cam Siyah** (`rgba(0, 0, 0, 0.08)`): İkincil dairesel düğmeler ve cam efektleri için narin koyu katman.
+- **Cam Beyaz** (`rgba(255, 255, 255, 0.16)`): Koyu/renkli yüzeylerdeki düğmeler için donuk cam katmanı.
+
+### Gradyan Sistemi
+- **Kahraman Gradyanı**: Elektrik yeşili, parlak sarı, derin mor ve ateşli pembe kullanan canlı çok duraklı bir gradyan. Bu gradyan, kahraman bölümünün görsel imzasıdır — aracın yaratıcı olanaklarını temsil eder.
+- **Ürün Bölümü Gradyanları**: Bireysel ürün alanları (Tasarım, Geliştirici Modu, Prototipleme) vitrislerinde farklı renk temaları kullanabilir.
+
+## 3. Tipografi Kuralları
+
+### Font Ailesi
+- **Birincil**: `figmaSans`, geri dönüş fontlarıyla: `figmaSans Fallback, SF Pro Display, system-ui, helvetica`
+- **Monospace / Etiketler**: `figmaMono`, geri dönüş fontlarıyla: `figmaMono Fallback, SF Mono, menlo`
+
+### Hiyerarşi
+
+| Rol | Font | Boyut | Ağırlık | Satır Yüksekliği | Harf Aralığı | Notlar |
+|------|------|------|--------|-------------|----------------|-------|
+| Vitrin / Kahraman | figmaSans | 86px (5.38rem) | 400 | 1.00 (sıkı) | -1.72px | Maksimum etki, aşırı takip |
+| Bölüm Başlığı | figmaSans | 64px (4rem) | 400 | 1.10 (sıkı) | -0.96px | Özellik bölümü başlıkları |
+| Alt Başlık | figmaSans | 26px (1.63rem) | 540 | 1.35 | -0.26px | Vurgulu bölüm metni |
+| Alt Başlık İnce | figmaSans | 26px (1.63rem) | 340 | 1.35 | -0.26px | Hafif ağırlıklı bölüm metni |
+| Özellik Başlığı | figmaSans | 24px (1.5rem) | 700 | 1.45 | normal | Kalın kart başlıkları |
+| Gövde Büyük | figmaSans | 20px (1.25rem) | 330–450 | 1.30–1.40 | -0.1px ile -0.14px | Açıklamalar, girişler |
+| Gövde / Düğme | figmaSans | 16px (1rem) | 330–400 | 1.40–1.45 | -0.14px ile normal | Standart gövde, gezinti, düğmeler |
+| Gövde İnce | figmaSans | 18px (1.13rem) | 320 | 1.45 | -0.26px ile normal | Hafif ağırlıklı gövde metni |
+| Mono Etiket | figmaMono | 18px (1.13rem) | 400 | 1.30 (sıkı) | 0.54px | Büyük harfli bölüm etiketleri |
+| Mono Küçük | figmaMono | 12px (0.75rem) | 400 | 1.00 (sıkı) | 0.6px | Büyük harfli küçük etiketler |
+
+### İlkeler
+- **Değişken font hassasiyeti**: figmaSans, çoğu sistemin hiç dokunmadığı ağırlıklar kullanır — 320, 330, 340, 450, 480, 540. Bu, hiyerarşiyi dramatik sıçramalar yerine ince ağırlık farklılıkları aracılığıyla oluşturur. 330 ile 340 arasındaki fark neredeyse algılanamaz ancak yapısal olarak önemlidir.
+- **Temel olarak ince**: Çoğu gövde metni, tipik 400 "normal"den daha hafif olan 320–340 kullanır ve tasarım aracı estetiğiyle örtüşen ethereal, havadar bir okuma deneyimi yaratır.
+- **Her yerde kern**: Her metin öğesi OpenType `"kern"` özelliğini etkinleştirir — kerning isteğe bağlı değil, yapısal bir zorunluluktur.
+- **Varsayılan olarak negatif takip**: Gövde metni bile -0.1px ile -0.26px harf aralığı kullanır ve evrensel olarak sıkı metin oluşturur. Vitrin metni -0.96px ve -1.72px'e kadar daha da sıkışır.
+- **Yapı için Mono**: Büyük harflerle pozitif harf aralığıyla (0.54px–0.6px) figmaMono, teknik işaret etiketleri oluşturur.
+
+## 4. Bileşen Stilleri
+
+### Düğmeler
+
+**Siyah Düz (Hap)**
+- Arka Plan: Saf Siyah (`#000000`)
+- Metin: Saf Beyaz (`#ffffff`)
+- Yarıçap: simge düğmeleri için daire (%50)
+- Odak: kesik çizgili 2px çerçeve
+- Maksimum vurgu
+
+**Beyaz Hap**
+- Arka Plan: Saf Beyaz (`#ffffff`)
+- Metin: Saf Siyah (`#000000`)
+- Dolgu: 8px 18px 10px (asimetrik dikey)
+- Yarıçap: hap (50px)
+- Odak: kesik çizgili 2px çerçeve
+- Koyu/renkli yüzeylerde standart CTA
+
+**Cam Koyu**
+- Arka Plan: `rgba(0, 0, 0, 0.08)` (narin koyu katman)
+- Metin: Saf Siyah
+- Yarıçap: daire (%50)
+- Odak: kesik çizgili 2px çerçeve
+- Açık yüzeylerde ikincil eylem
+
+**Cam Açık**
+- Arka Plan: `rgba(255, 255, 255, 0.16)` (donuk cam)
+- Metin: Saf Beyaz
+- Yarıçap: daire (%50)
+- Odak: kesik çizgili 2px çerçeve
+- Koyu/renkli yüzeylerde ikincil eylem
+
+### Kartlar ve Konteynerler
+- Arka Plan: Saf Beyaz
+- Kenarlık: yok veya minimal
+- Yarıçap: 6px (küçük konteynerler), 8px (görseller, kartlar, diyaloglar)
+- Gölge: hafiften orta düzeye yükseklik efektleri
+- Kart içeriği olarak ürün ekran görüntüleri
+
+### Gezinti
+- Beyaz üzerinde temiz yatay gezinti
+- Logo: siyah Figma wordmark
+- Ürün sekmeleri: hap şeklinde (50px) sekme gezintisi
+- Bağlantılar: siyah metin, 1px alt çizgi dekorasyonu
+- CTA: Siyah hap düğme
+- Üzerine gelme: CSS değişkeni aracılığıyla metin rengi
+
+### Ayırt Edici Bileşenler
+
+**Ürün Sekme Çubuğu**
+- Yatay hap şeklinde sekmeler (50px yarıçap)
+- Her sekme bir Figma ürün alanını temsil eder (Tasarım, Geliştirici Modu, Prototipleme, vb.)
+- Aktif sekme vurgulanmış
+
+**Kahraman Gradyan Bölümü**
+- Tam genişlikte canlı çok renkli gradyan arka planı
+- 86px vitrin başlıklı beyaz metin katmanı
+- Gradyan içinde yüzen ürün ekran görüntüleri
+
+**Kesik Çizgili Odak Göstergeleri**
+- Tüm etkileşimli öğeler odakta `dashed 2px` çerçeve kullanır
+- Figma editöründeki seçim tutamaçlarına gönderme yapar
+- Web sitesini ve ürünü birbirine bağlayan bir meta-tasarım tercihi
+
+## 5. Düzen İlkeleri
+
+### Boşluk Sistemi
+- Temel birim: 8px
+- Ölçek: 1px, 2px, 4px, 4.5px, 8px, 10px, 12px, 16px, 18px, 24px, 32px, 40px, 46px, 48px, 50px
+
+### Izgaraları ve Konteyner
+- Maksimum konteyner genişliği: 1920px'e kadar
+- Kahraman: ortalanmış içerikli tam genişlikte gradyan
+- Ürün bölümleri: dönüşümlü vitrisler
+- Alt bilgi: koyu tam genişlikte bölüm
+- 559px ile 1920px arasında duyarlı
+
+### Boşluk Felsefesi
+- **Galeri benzeri ritim**: Cömert boşluk, her ürün bölümünün kendi sergisi olarak nefes almasını sağlar.
+- **Görsel nefes olarak renkli bölümler**: Gradyan kahraman ve ürün vitrisler, tek renkli arayüz bölümleri arasında kromatik rahatlama sağlar.
+
+### Kenarlık Yarıçapı Ölçeği
+- Minimal (2px): Küçük bağlantı öğeleri
+- Narin (6px): Küçük konteynerler, ayırıcılar
+- Rahat (8px): Kartlar, görseller, diyaloglar
+- Hap (50px): Sekme düğmeleri, CTA'lar
+- Daire (%50): Simge düğmeleri, dairesel öğeler
+
+## 6. Derinlik ve Yükseklik
+
+| Seviye | Uygulama | Kullanım |
+|-------|-----------|-----|
+| Düz (Seviye 0) | Gölge yok | Sayfa arka planı, çoğu metin |
+| Yüzey (Seviye 1) | Gradyan/koyu bölümde beyaz kart | Kartlar, ürün vitrisler |
+| Yükseltilmiş (Seviye 2) | Hafif gölge | Yüzen kartlar, üzerine gelme durumları |
+
+**Gölge Felsefesi**: Figma gölgeleri tutumlu kullanır. Birincil derinlik mekanizmaları **arka plan kontrastı** (renkli/koyu bölümlerde beyaz içerik) ve ürün ekran görüntülerinin kendine özgü boyutsallığıdır.
+
+## 7. Yapılacaklar ve Yapılmayacaklar
+
+### Yapılacaklar
+- figmaSans'ı hassas değişken ağırlıklarla kullanın (320–540) — ayrıntılı ağırlık kontrolü tasarımın kendisidir
+- Arayüzü kesinlikle siyah-beyaz tutun — renk yalnızca ürün içeriğinden gelir
+- Tüm etkileşimli öğelerde hap (50px) ve dairesel (%50) geometri kullanın
+- Kesik çizgili 2px odak çerçeveleri uygulayın — imza erişilebilirlik deseni
+- Tüm metinlerde `"kern"` özelliğini etkinleştirin
+- Etiketler için büyük harflerle pozitif harf aralığıyla figmaMono kullanın
+- Her yerde negatif harf aralığı uygulayın (-0.1px ile -1.72px)
+
+### Yapılmayacaklar
+- Arayüze renk eklemeyin — tek renkli palet mutlaktır
+- Standart font ağırlıkları kullanmayın (400, 500, 600, 700) — değişken fontun benzersiz duraklarını kullanın (320, 330, 340, 450, 480, 540)
+- Düğmelerde keskin köşeler kullanmayın — yalnızca hap ve dairesel geometri
+- Düz odak çerçeveleri kullanmayın — kesik çizgi imzadır
+- Gövde font ağırlığını 450'nin üzerine çıkarmayın — hafif ağırlık estetiği çekirdektir
+- Gövde metninde pozitif harf aralığı kullanmayın — her zaman negatif olmalıdır
+
+## 8. Duyarlı Davranış
+
+### Kırılma Noktaları
+| Ad | Genişlik | Temel Değişiklikler |
+|------|-------|-------------|
+| Küçük Mobil | <560px | Kompakt düzen, yığılmış |
+| Tablet | 560–768px | Küçük ayarlamalar |
+| Küçük Masaüstü | 768–960px | 2 sütunlu düzenler |
+| Masaüstü | 960–1280px | Standart düzen |
+| Büyük Masaüstü | 1280–1440px | Genişletilmiş |
+| Ultra geniş | 1440–1920px | Maksimum genişlik |
+
+### Daraltma Stratejisi
+- Kahraman metni: 86px → 64px → 48px
+- Ürün sekmeleri: mobilde yatay kaydırma
+- Özellik bölümleri: yığılmış tek sütun
+- Alt bilgi: çok sütunlu → yığılmış
+
+## 9. Ajan Prompt Kılavuzu
+
+### Hızlı Renk Referansı
+- Her şey: "Saf Siyah (#000000)" ve "Saf Beyaz (#ffffff)"
+- Cam Koyu: "rgba(0, 0, 0, 0.08)"
+- Cam Açık: "rgba(255, 255, 255, 0.16)"
+
+### Örnek Bileşen Promptları
+- "Canlı çok renkli gradyan (yeşil, sarı, mor, pembe) üzerinde bir kahraman oluşturun. Başlık 86px figmaSans ağırlık 400, satır-yüksekliği 1.0, harf-aralığı -1.72px. Beyaz metin. Beyaz hap CTA düğmesi (50px yarıçap, 8px 18px dolgu)."
+- "Hap şeklinde düğmelerle (50px yarıçap) bir ürün sekme çubuğu tasarlayın. Aktif: siyah arka plan, beyaz metin. Pasif: şeffaf, siyah metin. 20px ağırlık 480'de figmaSans."
+- "Bir bölüm etiketi oluşturun: figmaMono 18px, büyük harf, harf-aralığı 0.54px, siyah metin. Kern etkin."
+- "20px figmaSans ağırlık 330, satır-yüksekliği 1.40, harf-aralığı -0.14px'de gövde metni oluşturun. Beyaz üzerinde Saf Siyah."
+
+### Yineleme Kılavuzu
+1. Değişken font ağırlık duraklarını hassasça kullanın: 320, 330, 340, 450, 480, 540, 700
+2. Arayüz her zaman siyah + beyazdır — çerçeveye asla renk eklemeyin
+3. Kesik çizgili odak çerçeveleri, düz değil
+4. Harf aralığı gövdede her zaman negatif, mono etiketlerde her zaman pozitif
+5. Düğmeler/sekmeler için Hap (50px), simge düğmeleri için daire (%50)

open-design/design-systems/figma/DESIGN-uk.md

@@ -0,0 +1,223 @@
+# Дизайн-система натхненна Figma
+
+> Категорія: Дизайн і творчість
+> Інструмент для колаборативного дизайну. Яскрава багатоколірність, грайливий і водночас професійний стиль.
+
+## 1. Візуальна тема та атмосфера
+
+Інтерфейс Figma — це дизайн-інструмент, який спроектував сам себе: справжній майстер-клас типографічної витонченості, де кастомний варіативний шрифт (figmaSans) модулює вагу від гострої тонкої (weight 320) до жирної (weight 700) із зупинками на незвичних проміжних значеннях (330, 340, 450, 480, 540), які більшість типографічних систем ніколи не досліджує. Такий точний контроль ваги дає кожному текстовому елементу ретельно відкалібровану візуальну вагу — ієрархія будується на мікровідмінностях, а не на грубому розподілі «звичайний — жирний».
+
+Сторінка демонструє захопливу двоїстість: хром інтерфейсу суворо чорно-білий (буквально лише `#000000` і `#ffffff` виявляються як кольори), тоді як секція hero та вітрини продукту вибухають яскравими багатоколірними градієнтами — електричні зелені, соковиті жовті, глибокі фіолетові, гарячі рожеві. Це розділення означає, що сама дизайн-система не має кольору — барвистий вихід продукту є головним героєм. Маркетингова сторінка Figma — це, по суті, біла галерейна стіна, що виставляє різнобарвне мистецтво.
+
+Те, що вирізняє Figma поза варіативним шрифтом, — це геометрія кіл та пілюль. Кнопки мають радіус 50px (пілюля) або 50% (ідеальне коло для кнопок із іконками), що створює органічну, схожу на палітру інструментів відчуття. Індикатор фокусу зі штриховим контуром (`dashed 2px`) — свідомий дизайнерський вибір, що відлунює ручки виділення у самому редакторі Figma: мова UI сайту посилається на мову UI продукту.
+
+**Ключові характеристики:**
+- Кастомний варіативний шрифт (figmaSans) з незвичними значеннями ваги: 320, 330, 340, 450, 480, 540, 700
+- Суворо чорно-білий хром інтерфейсу — колір існує лише у вмісті продукту
+- figmaMono для заголовків технічних міток у верхньому регістрі з широким міжлітерним інтервалом
+- Геометрія кнопок: пілюля (50px) і коло (50%)
+- Штрихові контури фокусу, що відлунюють ручки виділення у редакторі Figma
+- Яскраві багатоколірні градієнти у hero (зелений, жовтий, фіолетовий, рожевий)
+- Увімкнена OpenType-функція `"kern"` глобально
+- Негативний міжлітерний інтервал скрізь — навіть у основному тексті від -0.14px до -0.26px
+
+## 2. Кольорова палітра та ролі
+
+### Основні кольори
+- **Чистий чорний** (`#000000`): весь текст, усі суцільні кнопки, усі рамки. Єдиний «колір» інтерфейсу.
+- **Чистий білий** (`#ffffff`): усі фони, білі кнопки, текст на темних поверхнях. Друга половина бінарної пари.
+
+*Примітка: маркетинговий сайт Figma використовує ЛИШЕ ці два кольори для шару інтерфейсу. Усі яскраві кольори з'являються виключно в скриншотах продукту, градієнтах hero та вбудованому вмісті.*
+
+### Поверхні та фони
+- **Чистий білий** (`#ffffff`): основний фон сторінки та поверхні карток.
+- **Скляний чорний** (`rgba(0, 0, 0, 0.08)`): тонке темне накладення для другорядних круглих кнопок і скляних ефектів.
+- **Скляний білий** (`rgba(255, 255, 255, 0.16)`): накладення матованого скла для кнопок на темних/кольорових поверхнях.
+
+### Система градієнтів
+- **Градієнт hero**: яскравий багатозупинковий градієнт з електричним зеленим, соковитим жовтим, глибоким фіолетовим і гарячим рожевим. Цей градієнт — візуальна підпис секції hero, яка уособлює творчі можливості інструменту.
+- **Градієнти секцій продукту**: окремі зони продукту (Дизайн, Dev Mode, Прототипування) можуть мати власні кольорові теми у своїх вітринах.
+
+## 3. Правила типографіки
+
+### Сімейство шрифтів
+- **Основний**: `figmaSans`, запасні варіанти: `figmaSans Fallback, SF Pro Display, system-ui, helvetica`
+- **Моноширинний / мітки**: `figmaMono`, запасні варіанти: `figmaMono Fallback, SF Mono, menlo`
+
+### Ієрархія
+
+| Роль | Шрифт | Розмір | Вага | Висота рядка | Міжлітерний інтервал | Примітки |
+|------|-------|--------|------|--------------|----------------------|---------|
+| Display / Hero | figmaSans | 86px (5.38rem) | 400 | 1.00 (тісно) | -1.72px | Максимальний вплив, екстремальний трекінг |
+| Заголовок секції | figmaSans | 64px (4rem) | 400 | 1.10 (тісно) | -0.96px | Заголовки секцій з функціями |
+| Підзаголовок | figmaSans | 26px (1.63rem) | 540 | 1.35 | -0.26px | Акцентований текст секції |
+| Підзаголовок легкий | figmaSans | 26px (1.63rem) | 340 | 1.35 | -0.26px | Легкий текст секції |
+| Заголовок функції | figmaSans | 24px (1.5rem) | 700 | 1.45 | normal | Жирні заголовки карток |
+| Основний великий | figmaSans | 20px (1.25rem) | 330–450 | 1.30–1.40 | -0.1px to -0.14px | Описи, вступи |
+| Основний / Кнопка | figmaSans | 16px (1rem) | 330–400 | 1.40–1.45 | -0.14px to normal | Стандартний текст, навігація, кнопки |
+| Основний легкий | figmaSans | 18px (1.13rem) | 320 | 1.45 | -0.26px to normal | Легкий основний текст |
+| Моно-мітка | figmaMono | 18px (1.13rem) | 400 | 1.30 (тісно) | 0.54px | Мітки секцій у верхньому регістрі |
+| Моно маленький | figmaMono | 12px (0.75rem) | 400 | 1.00 (тісно) | 0.6px | Дрібні теги у верхньому регістрі |
+
+### Принципи
+- **Точність варіативного шрифту**: figmaSans використовує значення ваги, яких більшість систем ніколи не торкається — 320, 330, 340, 450, 480, 540. Це створює ієрархію через тонкі різниці ваги, а не різкі стрибки. Різниця між 330 і 340 майже непомітна, але структурно значуща.
+- **Легкість як основа**: більшість основного тексту використовує 320–340 (легше за типові 400 «regular»), створюючи ефірний, повітряний досвід читання, що відповідає естетиці дизайн-інструменту.
+- **Кернінг скрізь**: кожен текстовий елемент вмикає OpenType-функцію `"kern"` — кернінг не є опціональним, він структурний.
+- **Негативний трекінг за замовчуванням**: навіть основний текст використовує міжлітерний інтервал від -0.1px до -0.26px, що створює універсально щільний текст. Текст типу Display стискається далі — до -0.96px та -1.72px.
+- **Моно для структури**: figmaMono у верхньому регістрі з позитивним міжлітерним інтервалом (0.54px–0.6px) створює технічні мітки-покажчики.
+
+## 4. Стилізація компонентів
+
+### Кнопки
+
+**Чорна суцільна (пілюля)**
+- Фон: чистий чорний (`#000000`)
+- Текст: чистий білий (`#ffffff`)
+- Радіус: коло (50%) для кнопок з іконками
+- Фокус: штриховий контур 2px
+- Максимальний акцент
+
+**Біла пілюля**
+- Фон: чистий білий (`#ffffff`)
+- Текст: чистий чорний (`#000000`)
+- Відступи: 8px 18px 10px (асиметричні по вертикалі)
+- Радіус: пілюля (50px)
+- Фокус: штриховий контур 2px
+- Стандартний CTA на темних/кольорових поверхнях
+
+**Скляна темна**
+- Фон: `rgba(0, 0, 0, 0.08)` (тонке темне накладення)
+- Текст: чистий чорний
+- Радіус: коло (50%)
+- Фокус: штриховий контур 2px
+- Другорядна дія на світлих поверхнях
+
+**Скляна світла**
+- Фон: `rgba(255, 255, 255, 0.16)` (матоване скло)
+- Текст: чистий білий
+- Радіус: коло (50%)
+- Фокус: штриховий контур 2px
+- Другорядна дія на темних/кольорових поверхнях
+
+### Картки та контейнери
+- Фон: чистий білий
+- Рамка: відсутня або мінімальна
+- Радіус: 6px (малі контейнери), 8px (зображення, картки, діалоги)
+- Тінь: тонкі та середні ефекти підняття
+- Скриншоти продукту як вміст карток
+
+### Навігація
+- Чиста горизонтальна навігація на білому
+- Логотип: wordmark Figma чорним кольором
+- Вкладки продукту: навігація у формі пілюль (50px)
+- Посилання: чорний текст, підкреслення 1px
+- CTA: чорна кнопка-пілюля
+- Hover: колір тексту через CSS-змінну
+
+### Унікальні компоненти
+
+**Панель вкладок продукту**
+- Горизонтальні вкладки у формі пілюль (радіус 50px)
+- Кожна вкладка представляє окрему зону продукту Figma (Дизайн, Dev Mode, Прототипування тощо)
+- Активна вкладка підсвічена
+
+**Секція з градієнтом hero**
+- Яскравий багатоколірний градієнт на всю ширину
+- Накладення білого тексту з заголовком Display 86px
+- Скриншоти продукту, що «парять» у градієнті
+
+**Штрихові індикатори фокусу**
+- Усі інтерактивні елементи використовують контур `dashed 2px` на фокусі
+- Посилання на ручки виділення у редакторі Figma
+- Мета-дизайнерський вибір, що зв'язує сайт і продукт
+
+## 5. Принципи компонування
+
+### Система відступів
+- Базова одиниця: 8px
+- Шкала: 1px, 2px, 4px, 4.5px, 8px, 10px, 12px, 16px, 18px, 24px, 32px, 40px, 46px, 48px, 50px
+
+### Сітка та контейнер
+- Максимальна ширина контейнера: до 1920px
+- Hero: повноширинний градієнт із центрованим вмістом
+- Секції продукту: вітрини, що чергуються
+- Підвал: темна секція на всю ширину
+- Адаптивність від 559px до 1920px
+
+### Філософія пробілів
+- **Галерейний ритм**: щедрі відступи дозволяють кожній секції продукту дихати як окремій експозиції.
+- **Кольорові секції як візуальний відпочинок**: градієнтний hero та вітрини продукту забезпечують хроматичне полегшення між монохромними секціями інтерфейсу.
+
+### Шкала радіусів рамок
+- Мінімальний (2px): малі елементи-посилання
+- Тонкий (6px): малі контейнери, роздільники
+- Комфортний (8px): картки, зображення, діалоги
+- Пілюля (50px): кнопки-вкладки, CTA
+- Коло (50%): кнопки з іконками, кругові елементи
+
+## 6. Глибина та підняття
+
+| Рівень | Обробка | Застосування |
+|--------|---------|--------------|
+| Плоский (Рівень 0) | Без тіні | Фон сторінки, більшість тексту |
+| Поверхня (Рівень 1) | Біла картка на градієнтній/темній секції | Картки, вітрини продукту |
+| Піднятий (Рівень 2) | Тонка тінь | Плаваючі картки, стани hover |
+
+**Філософія тіней**: Figma використовує тіні скупо. Основні механізми глибини — це **контраст фону** (білий вміст на кольорових/темних секціях) і властива тривимірність самих скриншотів продукту.
+
+## 7. Що робити і чого уникати
+
+### Робіть
+- Використовуйте figmaSans із точними значеннями варіативної ваги (320–540) — точний контроль ваги І Є дизайном
+- Тримайте інтерфейс суворо чорно-білим — колір виходить лише з вмісту продукту
+- Використовуйте геометрію пілюлі (50px) та кола (50%) для всіх інтерактивних елементів
+- Застосовуйте штрихові контури фокусу 2px — фірмовий шаблон доступності
+- Вмикайте функцію `"kern"` на всьому тексті
+- Використовуйте figmaMono у верхньому регістрі з позитивним міжлітерним інтервалом для міток
+- Застосовуйте негативний міжлітерний інтервал скрізь (від -0.1px до -1.72px)
+
+### Не робіть
+- Не додавайте кольорів до інтерфейсу — монохромна палітра є абсолютною
+- Не використовуйте стандартні значення ваги шрифту (400, 500, 600, 700) — використовуйте унікальні зупинки варіативного шрифту (320, 330, 340, 450, 480, 540)
+- Не використовуйте гострі кути для кнопок — лише геометрія пілюлі та кола
+- Не використовуйте суцільні контури фокусу — штриховий є фірмовим
+- Не збільшуйте вагу основного шрифту вище 450 — легка естетика є основоположною
+- Не застосовуйте позитивний міжлітерний інтервал до основного тексту — він завжди негативний
+
+## 8. Адаптивна поведінка
+
+### Точки зламу
+| Назва | Ширина | Ключові зміни |
+|-------|--------|---------------|
+| Малий мобільний | <560px | Компактне компонування, стекування |
+| Планшет | 560–768px | Незначні коригування |
+| Малий десктоп | 768–960px | Двоколонкові компонування |
+| Десктоп | 960–1280px | Стандартне компонування |
+| Великий десктоп | 1280–1440px | Розширене |
+| Надширокий | 1440–1920px | Максимальна ширина |
+
+### Стратегія згортання
+- Текст hero: 86px → 64px → 48px
+- Вкладки продукту: горизонтальна прокрутка на мобільних
+- Секції функцій: стекування в один стовпець
+- Підвал: багатоколонковий → стекований
+
+## 9. Посібник із запитів для агентів
+
+### Швидкий довідник кольорів
+- Все: «Pure Black (#000000)» і «Pure White (#ffffff)»
+- Glass Dark: «rgba(0, 0, 0, 0.08)»
+- Glass Light: «rgba(255, 255, 255, 0.16)»
+
+### Приклади запитів для компонентів
+- "Create a hero on a vibrant multi-color gradient (green, yellow, purple, pink). Headline at 86px figmaSans weight 400, line-height 1.0, letter-spacing -1.72px. White text. White pill CTA button (50px radius, 8px 18px padding)."
+- "Design a product tab bar with pill-shaped buttons (50px radius). Active: Black bg, white text. Inactive: transparent, black text. figmaSans at 20px weight 480."
+- "Build a section label: figmaMono 18px, uppercase, letter-spacing 0.54px, black text. Kern enabled."
+- "Create body text at 20px figmaSans weight 330, line-height 1.40, letter-spacing -0.14px. Pure Black on white."
+
+### Посібник з ітерацій
+1. Використовуйте значення ваги варіативного шрифту точно: 320, 330, 340, 450, 480, 540, 700
+2. Інтерфейс — завжди чорний + білий, ніколи не додавайте кольорів до хрому
+3. Штрихові контури фокусу, не суцільні
+4. Міжлітерний інтервал основного тексту — завжди негативний, моно-міток — завжди позитивний
+5. Пілюля (50px) для кнопок/вкладок, коло (50%) для кнопок з іконками

open-design/design-systems/figma/DESIGN-vi.md

@@ -0,0 +1,223 @@
+# Hệ Thống Thiết Kế Lấy Cảm Hứng Từ Figma
+
+> Category: Thiết kế & Sáng tạo
+> Công cụ thiết kế cộng tác. Đa sắc màu rực rỡ, vui tươi nhưng vẫn chuyên nghiệp.
+
+## 1. Chủ Đề Hình Ảnh & Bầu Không Khí
+
+Giao diện của Figma là công cụ thiết kế tự thiết kế chính mình — một kiệt tác về sự tinh tế typography, nơi một variable font tùy chỉnh (figmaSans) biến đổi linh hoạt từ cực mỏng (weight 320) đến đậm (weight 700) với các điểm dừng trung gian bất thường (330, 340, 450, 480, 540) mà hầu hết các hệ thống font chưa bao giờ khai thác. Khả năng kiểm soát weight chi tiết này mang lại cho mỗi phần tử văn bản một trọng lượng thị giác được hiệu chỉnh chính xác, tạo ra phân cấp thông qua những khác biệt vi mô thay vì công cụ thô sơ "thường vs đậm".
+
+Trang này mang một sự đối lập thú vị: phần chrome giao diện hoàn toàn đen-trắng (chỉ nhận thấy đúng `#000000` và `#ffffff` là màu sắc), trong khi phần hero và các khu vực giới thiệu sản phẩm bùng nổ với các dải gradient đa sắc rực rỡ — xanh lá điện, vàng tươi, tím sâu, hồng nóng. Sự tách biệt này có nghĩa là bản thân hệ thống thiết kế không có màu, coi đầu ra đầy màu sắc của sản phẩm là nội dung trọng tâm. Trang marketing của Figma về bản chất là một bức tường phòng triển lãm màu trắng trưng bày những tác phẩm nghệ thuật đầy màu sắc.
+
+Điều làm Figma trở nên đặc biệt ngoài variable font còn là hình học hình tròn và pill. Các nút sử dụng bán kính 50px (pill) hoặc 50% (hình tròn hoàn hảo cho icon button), tạo ra cảm giác hữu cơ giống như bảng công cụ. Chỉ báo focus dạng đường nét đứt (`dashed 2px`) là một lựa chọn thiết kế có chủ đích, gợi lại các handle lựa chọn trong trình soạn thảo Figma — ngôn ngữ UI của website tham chiếu đến ngôn ngữ UI của sản phẩm.
+
+**Đặc Điểm Nổi Bật:**
+- Variable font tùy chỉnh (figmaSans) với các điểm dừng weight bất thường: 320, 330, 340, 450, 480, 540, 700
+- Chrome giao diện hoàn toàn đen-trắng — màu sắc chỉ tồn tại trong nội dung sản phẩm
+- figmaMono cho các nhãn kỹ thuật chữ in hoa với khoảng cách chữ rộng
+- Hình học nút pill (50px) và tròn (50%)
+- Đường viền focus nét đứt gợi lên các handle lựa chọn của trình soạn thảo Figma
+- Gradient hero đa sắc rực rỡ (xanh lá, vàng, tím, hồng)
+- Tính năng OpenType `"kern"` được bật toàn cục
+- Letter-spacing âm xuyên suốt — ngay cả body text cũng ở mức -0.14px đến -0.26px
+
+## 2. Bảng Màu & Vai Trò
+
+### Màu Chính
+- **Đen Thuần** (`#000000`): Tất cả văn bản, tất cả nút đặc, tất cả viền. "Màu sắc" duy nhất của giao diện.
+- **Trắng Thuần** (`#ffffff`): Tất cả nền, nút trắng, văn bản trên bề mặt tối. Nửa còn lại của cặp nhị phân.
+
+*Lưu ý: Trang marketing của Figma CHỈ sử dụng hai màu này cho lớp giao diện. Tất cả màu rực rỡ chỉ xuất hiện trong ảnh chụp màn hình sản phẩm, gradient hero và nội dung nhúng.*
+
+### Bề Mặt & Nền
+- **Trắng Thuần** (`#ffffff`): Nền trang chính và bề mặt thẻ.
+- **Đen Kính** (`rgba(0, 0, 0, 0.08)`): Lớp phủ tối tinh tế cho các nút tròn phụ và hiệu ứng kính.
+- **Trắng Kính** (`rgba(255, 255, 255, 0.16)`): Lớp phủ kính mờ cho các nút trên bề mặt tối/màu sắc.
+
+### Hệ Thống Gradient
+- **Gradient Hero**: Gradient đa điểm dừng rực rỡ sử dụng xanh lá điện, vàng tươi, tím sâu và hồng nóng. Gradient này là chữ ký thị giác của phần hero — nó đại diện cho những khả năng sáng tạo của công cụ.
+- **Gradient Khu Vực Sản Phẩm**: Các khu vực sản phẩm riêng lẻ (Design, Dev Mode, Prototyping) có thể sử dụng chủ đề màu riêng biệt trong phần giới thiệu của chúng.
+
+## 3. Quy Tắc Typography
+
+### Họ Font
+- **Chính**: `figmaSans`, với fallback: `figmaSans Fallback, SF Pro Display, system-ui, helvetica`
+- **Monospace / Nhãn**: `figmaMono`, với fallback: `figmaMono Fallback, SF Mono, menlo`
+
+### Phân Cấp
+
+| Vai Trò | Font | Kích Thước | Weight | Line Height | Letter Spacing | Ghi Chú |
+|---------|------|------------|--------|-------------|----------------|---------|
+| Display / Hero | figmaSans | 86px (5.38rem) | 400 | 1.00 (chặt) | -1.72px | Tác động tối đa, tracking cực mạnh |
+| Tiêu đề Section | figmaSans | 64px (4rem) | 400 | 1.10 (chặt) | -0.96px | Tiêu đề section tính năng |
+| Tiêu đề phụ | figmaSans | 26px (1.63rem) | 540 | 1.35 | -0.26px | Văn bản section nhấn mạnh |
+| Tiêu đề phụ nhẹ | figmaSans | 26px (1.63rem) | 340 | 1.35 | -0.26px | Văn bản section weight nhẹ |
+| Tiêu đề Tính Năng | figmaSans | 24px (1.5rem) | 700 | 1.45 | normal | Tiêu đề thẻ đậm |
+| Body Lớn | figmaSans | 20px (1.25rem) | 330–450 | 1.30–1.40 | -0.1px to -0.14px | Mô tả, giới thiệu |
+| Body / Nút | figmaSans | 16px (1rem) | 330–400 | 1.40–1.45 | -0.14px to normal | Body chuẩn, nav, nút |
+| Body Nhẹ | figmaSans | 18px (1.13rem) | 320 | 1.45 | -0.26px to normal | Văn bản body weight nhẹ |
+| Nhãn Mono | figmaMono | 18px (1.13rem) | 400 | 1.30 (chặt) | 0.54px | Nhãn section chữ in hoa |
+| Mono Nhỏ | figmaMono | 12px (0.75rem) | 400 | 1.00 (chặt) | 0.6px | Thẻ nhỏ chữ in hoa |
+
+### Nguyên Tắc
+- **Độ chính xác variable font**: figmaSans sử dụng các weight mà hầu hết hệ thống chưa bao giờ chạm đến — 320, 330, 340, 450, 480, 540. Điều này tạo ra phân cấp thông qua sự khác biệt weight tinh tế thay vì những bước nhảy kịch tính. Sự khác biệt giữa 330 và 340 gần như không thể nhận ra nhưng lại có ý nghĩa cấu trúc.
+- **Nhẹ là nền tảng**: Hầu hết body text sử dụng 320–340 (nhẹ hơn mức "thường" 400 thông thường), tạo ra trải nghiệm đọc thanh thoát, nhẹ nhàng phù hợp với thẩm mỹ công cụ thiết kế.
+- **Kern ở mọi nơi**: Mọi phần tử văn bản đều bật tính năng OpenType `"kern"` — kerning không phải tùy chọn, đó là yếu tố cấu trúc.
+- **Tracking âm mặc định**: Ngay cả body text cũng sử dụng letter-spacing -0.1px đến -0.26px, tạo ra văn bản chặt chẽ phổ quát. Văn bản display nén thêm xuống -0.96px và -1.72px.
+- **Mono cho cấu trúc**: figmaMono chữ in hoa với letter-spacing dương (0.54px–0.6px) tạo ra các nhãn biển báo kỹ thuật.
+
+## 4. Kiểu Dáng Thành Phần
+
+### Nút
+
+**Đặc Đen (Pill)**
+- Nền: Đen Thuần (`#000000`)
+- Chữ: Trắng Thuần (`#ffffff`)
+- Bán kính: tròn (50%) cho icon button
+- Focus: đường viền nét đứt 2px
+- Nhấn mạnh tối đa
+
+**Pill Trắng**
+- Nền: Trắng Thuần (`#ffffff`)
+- Chữ: Đen Thuần (`#000000`)
+- Padding: 8px 18px 10px (bất đối xứng theo chiều dọc)
+- Bán kính: pill (50px)
+- Focus: đường viền nét đứt 2px
+- CTA chuẩn trên bề mặt tối/màu sắc
+
+**Kính Tối**
+- Nền: `rgba(0, 0, 0, 0.08)` (lớp phủ tối tinh tế)
+- Chữ: Đen Thuần
+- Bán kính: tròn (50%)
+- Focus: đường viền nét đứt 2px
+- Hành động phụ trên bề mặt sáng
+
+**Kính Sáng**
+- Nền: `rgba(255, 255, 255, 0.16)` (kính mờ)
+- Chữ: Trắng Thuần
+- Bán kính: tròn (50%)
+- Focus: đường viền nét đứt 2px
+- Hành động phụ trên bề mặt tối/màu sắc
+
+### Thẻ & Container
+- Nền: Trắng Thuần
+- Viền: không có hoặc tối thiểu
+- Bán kính: 6px (container nhỏ), 8px (hình ảnh, thẻ, dialog)
+- Bóng: hiệu ứng elevation tinh tế đến vừa phải
+- Ảnh chụp màn hình sản phẩm làm nội dung thẻ
+
+### Điều Hướng
+- Nav ngang gọn gàng trên nền trắng
+- Logo: wordmark Figma màu đen
+- Tab sản phẩm: điều hướng tab hình pill (50px)
+- Liên kết: chữ đen, trang trí gạch chân 1px
+- CTA: nút pill đen
+- Hover: màu chữ qua biến CSS
+
+### Thành Phần Đặc Trưng
+
+**Thanh Tab Sản Phẩm**
+- Các tab hình pill ngang (bán kính 50px)
+- Mỗi tab đại diện cho một khu vực sản phẩm Figma (Design, Dev Mode, Prototyping, v.v.)
+- Tab đang hoạt động được làm nổi bật
+
+**Phần Gradient Hero**
+- Nền gradient đa sắc toàn chiều rộng
+- Chữ trắng chồng lên với tiêu đề display 86px
+- Ảnh chụp màn hình sản phẩm nổi trong gradient
+
+**Chỉ Báo Focus Nét Đứt**
+- Tất cả phần tử tương tác sử dụng đường viền `dashed 2px` khi focus
+- Tham chiếu đến các handle lựa chọn trong trình soạn thảo Figma
+- Một lựa chọn meta-design kết nối website và sản phẩm
+
+## 5. Nguyên Tắc Bố Cục
+
+### Hệ Thống Khoảng Cách
+- Đơn vị cơ bản: 8px
+- Thang: 1px, 2px, 4px, 4.5px, 8px, 10px, 12px, 16px, 18px, 24px, 32px, 40px, 46px, 48px, 50px
+
+### Grid & Container
+- Chiều rộng container tối đa: lên đến 1920px
+- Hero: gradient toàn chiều rộng với nội dung căn giữa
+- Khu vực sản phẩm: trình bày xen kẽ
+- Footer: phần toàn chiều rộng tối màu
+- Responsive từ 559px đến 1920px
+
+### Triết Lý Khoảng Trắng
+- **Nhịp độ kiểu phòng trưng bày**: Khoảng cách rộng rãi giúp mỗi khu vực sản phẩm thở như một triển lãm riêng biệt.
+- **Khu vực màu sắc như hơi thở thị giác**: Gradient hero và các phần giới thiệu sản phẩm cung cấp sự giải phóng màu sắc giữa các khu vực giao diện đơn sắc.
+
+### Thang Bán Kính Viền
+- Tối thiểu (2px): Phần tử liên kết nhỏ
+- Tinh tế (6px): Container nhỏ, divider
+- Thoải mái (8px): Thẻ, hình ảnh, dialog
+- Pill (50px): Nút tab, CTA
+- Tròn (50%): Icon button, phần tử hình tròn
+
+## 6. Chiều Sâu & Elevation
+
+| Cấp | Xử Lý | Sử Dụng |
+|-----|--------|---------|
+| Phẳng (Level 0) | Không bóng | Nền trang, hầu hết văn bản |
+| Bề mặt (Level 1) | Thẻ trắng trên section gradient/tối | Thẻ, giới thiệu sản phẩm |
+| Nổi cao (Level 2) | Bóng tinh tế | Thẻ nổi, trạng thái hover |
+
+**Triết Lý Bóng**: Figma sử dụng bóng một cách tiết kiệm. Cơ chế chiều sâu chính là **độ tương phản nền** (nội dung trắng trên các section màu sắc/tối) và tính chiều sâu vốn có của các ảnh chụp màn hình sản phẩm.
+
+## 7. Nên và Không Nên
+
+### Nên
+- Sử dụng figmaSans với các weight variable chính xác (320–540) — khả năng kiểm soát weight chi tiết CHÍNH LÀ thiết kế
+- Giữ giao diện hoàn toàn đen-trắng — màu sắc chỉ đến từ nội dung sản phẩm
+- Sử dụng hình học pill (50px) và tròn (50%) cho tất cả phần tử tương tác
+- Áp dụng đường viền focus nét đứt 2px — mẫu accessibility đặc trưng
+- Bật tính năng `"kern"` trên tất cả văn bản
+- Sử dụng figmaMono chữ in hoa với letter-spacing dương cho nhãn
+- Áp dụng letter-spacing âm xuyên suốt (-0.1px đến -1.72px)
+
+### Không Nên
+- Không thêm màu sắc vào giao diện — bảng màu đơn sắc là tuyệt đối
+- Không sử dụng các weight font chuẩn (400, 500, 600, 700) — sử dụng các điểm dừng độc đáo của variable font (320, 330, 340, 450, 480, 540)
+- Không dùng góc vuông sắc cho nút — chỉ hình học pill và tròn
+- Không dùng đường viền focus đặc — nét đứt là đặc trưng
+- Không tăng weight font body trên 450 — thẩm mỹ weight nhẹ là cốt lõi
+- Không dùng letter-spacing dương cho body text — luôn luôn âm
+
+## 8. Hành Vi Responsive
+
+### Breakpoint
+| Tên | Chiều Rộng | Thay Đổi Chính |
+|-----|-----------|----------------|
+| Mobile Nhỏ | <560px | Bố cục compact, xếp chồng |
+| Tablet | 560–768px | Điều chỉnh nhỏ |
+| Desktop Nhỏ | 768–960px | Bố cục 2 cột |
+| Desktop | 960–1280px | Bố cục chuẩn |
+| Desktop Lớn | 1280–1440px | Mở rộng |
+| Siêu rộng | 1440–1920px | Chiều rộng tối đa |
+
+### Chiến Lược Thu Gọn
+- Văn bản hero: 86px → 64px → 48px
+- Tab sản phẩm: cuộn ngang trên mobile
+- Khu vực tính năng: một cột xếp chồng
+- Footer: nhiều cột → xếp chồng
+
+## 9. Hướng Dẫn Prompt cho Agent
+
+### Tham Chiếu Màu Nhanh
+- Tất cả mọi thứ: "Đen Thuần (#000000)" và "Trắng Thuần (#ffffff)"
+- Kính Tối: "rgba(0, 0, 0, 0.08)"
+- Kính Sáng: "rgba(255, 255, 255, 0.16)"
+
+### Ví Dụ Prompt Thành Phần
+- "Tạo một hero trên gradient đa sắc rực rỡ (xanh lá, vàng, tím, hồng). Tiêu đề ở 86px figmaSans weight 400, line-height 1.0, letter-spacing -1.72px. Chữ trắng. Nút CTA pill trắng (bán kính 50px, padding 8px 18px)."
+- "Thiết kế thanh tab sản phẩm với nút hình pill (bán kính 50px). Đang hoạt động: nền đen, chữ trắng. Không hoạt động: trong suốt, chữ đen. figmaSans ở 20px weight 480."
+- "Xây dựng nhãn section: figmaMono 18px, chữ in hoa, letter-spacing 0.54px, chữ đen. Kern bật."
+- "Tạo body text ở 20px figmaSans weight 330, line-height 1.40, letter-spacing -0.14px. Đen Thuần trên nền trắng."
+
+### Hướng Dẫn Lặp
+1. Sử dụng các điểm dừng weight variable font chính xác: 320, 330, 340, 450, 480, 540, 700
+2. Giao diện luôn là đen + trắng — không bao giờ thêm màu vào chrome
+3. Đường viền focus nét đứt, không phải đặc
+4. Letter-spacing luôn âm trên body, luôn dương trên nhãn mono
+5. Pill (50px) cho nút/tab, tròn (50%) cho icon button

open-design/design-systems/figma/DESIGN-zh-tw.md

@@ -0,0 +1,223 @@
+# 靈感源自 Figma 的設計系統
+
+> Category: 設計與創意
+> 協作設計工具。色彩鮮活多元，活潑而不失專業。
+
+## 1. 視覺主題與氛圍
+
+Figma 的介面是那個設計了自身的設計工具——一堂排版精妙的大師課，自訂可變字體（figmaSans）在極細（字重 320）與粗體（字重 700）之間無縫切換，並在大多數字體系統從不涉足的中間值（330、340、450、480、540）處設有停駐點。這種細粒度的字重控制為每個文字元素賦予了精確校準的視覺分量，透過微小差異建構層級，而非「一般與粗體」這種粗放工具。
+
+頁面呈現出一種迷人的二元性：介面外殼嚴格遵循黑白配色（字面上僅能偵測到 `#000000` 和 `#ffffff` 兩種顏色），而英雄區和產品展示區則爆發出鮮活的多色漸層——電光綠、亮黃、深紫、熱粉。這種分隔意味著設計系統本身是無色的，將產品的多彩輸出作為核心內容。Figma 的行銷頁面本質上是一面陳列彩色藝術作品的白色畫廊牆。
+
+讓 Figma 與眾不同的，除了可變字體之外，還有它的圓形與膠囊幾何造型。按鈕使用 50px 圓角（膠囊）或 50%（圖示按鈕的完美圓形），營造出一種有機的、工具調色板式的感覺。虛線輪廓聚焦指示器（`dashed 2px`）是一種刻意為之的設計選擇，與 Figma 編輯器中的選取控點相呼應——網站的 UI 語言引用了產品的 UI 語言。
+
+**核心特徵：**
+- 自訂可變字體（figmaSans），具有非尋常的字重停駐點：320、330、340、450、480、540、700
+- 嚴格黑白的介面外殼——顏色僅存在於產品內容中
+- figmaMono 用於大寫技術標籤，搭配寬字母間距
+- 膠囊形（50px）與圓形（50%）按鈕幾何造型
+- 虛線聚焦輪廓，呼應 Figma 編輯器的選取控點
+- 鮮活的多色英雄漸層（綠、黃、紫、粉）
+- OpenType `"kern"` 特性全域啟用
+- 全域負字母間距——即便正文文字也使用 -0.14px 至 -0.26px
+
+## 2. 色彩方案與用途
+
+### 主色
+- **純黑** (`#000000`)：所有文字、所有實色按鈕、所有邊框。介面唯一的「顏色」。
+- **純白** (`#ffffff`)：所有背景、白色按鈕、深色表面上的文字。二元體系的另一半。
+
+*注：Figma 行銷網站的介面層僅使用這兩種顏色。所有鮮亮色彩僅出現在產品截圖、英雄漸層和嵌入內容中。*
+
+### 表面與背景
+- **純白** (`#ffffff`)：主要頁面背景和卡片表面。
+- **玻璃黑** (`rgba(0, 0, 0, 0.08)`)：用於次要圓形按鈕和玻璃效果的微妙深色疊加。
+- **玻璃白** (`rgba(255, 255, 255, 0.16)`)：深色／彩色表面上按鈕的磨砂玻璃疊加。
+
+### 漸層系統
+- **英雄漸層**：由電光綠、亮黃、深紫和熱粉構成的鮮活多停駐點漸層。這個漸層是英雄區的視覺標誌——它代表著工具的創意無限可能。
+- **產品區域漸層**：各產品區域（Design、Dev Mode、Prototyping）在其展示中可能使用獨特的色彩主題。
+
+## 3. 排版規則
+
+### 字體族
+- **主字體**：`figmaSans`，備選字體：`figmaSans Fallback, SF Pro Display, system-ui, helvetica`
+- **等寬體 / 標籤**：`figmaMono`，備選字體：`figmaMono Fallback, SF Mono, menlo`
+
+### 層級
+
+| 角色 | 字體 | 尺寸 | 字重 | 行高 | 字母間距 | 備注 |
+|------|------|------|--------|-------------|----------------|-------|
+| 展示 / 英雄 | figmaSans | 86px (5.38rem) | 400 | 1.00（緊湊） | -1.72px | 最大衝擊力，極端字距 |
+| 區塊標題 | figmaSans | 64px (4rem) | 400 | 1.10（緊湊） | -0.96px | 功能區塊標題 |
+| 副標題 | figmaSans | 26px (1.63rem) | 540 | 1.35 | -0.26px | 強調區塊文字 |
+| 輕量副標題 | figmaSans | 26px (1.63rem) | 340 | 1.35 | -0.26px | 輕字重區塊文字 |
+| 功能標題 | figmaSans | 24px (1.5rem) | 700 | 1.45 | normal | 粗體卡片標題 |
+| 大號正文 | figmaSans | 20px (1.25rem) | 330–450 | 1.30–1.40 | -0.1px 至 -0.14px | 描述、引言 |
+| 正文 / 按鈕 | figmaSans | 16px (1rem) | 330–400 | 1.40–1.45 | -0.14px 至 normal | 標準正文、導覽、按鈕 |
+| 輕量正文 | figmaSans | 18px (1.13rem) | 320 | 1.45 | -0.26px 至 normal | 輕字重正文 |
+| 等寬標籤 | figmaMono | 18px (1.13rem) | 400 | 1.30（緊湊） | 0.54px | 大寫區塊標籤 |
+| 等寬小號 | figmaMono | 12px (0.75rem) | 400 | 1.00（緊湊） | 0.6px | 大寫微型標籤 |
+
+### 原則
+- **可變字體精準性**：figmaSans 使用大多數系統從不觸及的字重——320、330、340、450、480、540。這透過微妙的字重差異而非大幅跳躍來建構層級。330 與 340 之間的差異幾乎無法察覺，卻在結構上意義重大。
+- **輕體為基礎**：大多數正文使用 320–340（比典型的 400「一般」更輕），營造出空靈、通透的閱讀體驗，與設計工具的美學相契合。
+- **處處字距微調**：每個文字元素都啟用 OpenType `"kern"` 特性——字距微調不是可選項，而是結構性的。
+- **預設負字距**：即便正文也使用 -0.1px 至 -0.26px 的字母間距，營造出全域緊湊的文字效果。展示文字進一步壓縮至 -0.96px 和 -1.72px。
+- **等寬字體用於結構**：figmaMono 以大寫形式搭配正字母間距（0.54px–0.6px），創造出技術指示牌標籤。
+
+## 4. 元件樣式
+
+### 按鈕
+
+**黑色實色（膠囊）**
+- 背景：純黑（`#000000`）
+- 文字：純白（`#ffffff`）
+- 圓角：圓形（50%），用於圖示按鈕
+- 聚焦：虛線 2px 輪廓
+- 最強調
+
+**白色膠囊**
+- 背景：純白（`#ffffff`）
+- 文字：純黑（`#000000`）
+- 內距：8px 18px 10px（不對稱垂直）
+- 圓角：膠囊（50px）
+- 聚焦：虛線 2px 輪廓
+- 深色／彩色表面上的標準 CTA
+
+**玻璃深色**
+- 背景：`rgba(0, 0, 0, 0.08)`（微妙深色疊加）
+- 文字：純黑
+- 圓角：圓形（50%）
+- 聚焦：虛線 2px 輪廓
+- 淺色表面上的次要操作
+
+**玻璃淺色**
+- 背景：`rgba(255, 255, 255, 0.16)`（磨砂玻璃）
+- 文字：純白
+- 圓角：圓形（50%）
+- 聚焦：虛線 2px 輪廓
+- 深色／彩色表面上的次要操作
+
+### 卡片與容器
+- 背景：純白
+- 邊框：無或極簡
+- 圓角：6px（小型容器）、8px（圖片、卡片、對話框）
+- 陰影：微妙至中等的層次感效果
+- 產品截圖作為卡片內容
+
+### 導覽
+- 白色背景上的簡潔水平導覽
+- Logo：黑色 Figma 字標
+- 產品標籤：膠囊形（50px）標籤導覽
+- 連結：黑色文字，1px 底線裝飾
+- CTA：黑色膠囊按鈕
+- 懸停：透過 CSS 變數控制文字顏色
+
+### 特色元件
+
+**產品標籤列**
+- 水平膠囊形標籤（50px 圓角）
+- 每個標籤代表 Figma 的一個產品區域（Design、Dev Mode、Prototyping 等）
+- 啟用標籤高亮顯示
+
+**英雄漸層區塊**
+- 全寬鮮活多色漸層背景
+- 帶 86px 展示標題的白色文字疊加
+- 產品截圖懸浮在漸層中
+
+**虛線聚焦指示器**
+- 所有互動元素在聚焦時使用 `dashed 2px` 輪廓
+- 引用 Figma 編輯器中的選取控點
+- 一種將網站與產品相連接的元設計選擇
+
+## 5. 版面原則
+
+### 間距系統
+- 基礎單位：8px
+- 刻度：1px、2px、4px、4.5px、8px、10px、12px、16px、18px、24px、32px、40px、46px、48px、50px
+
+### 格線與容器
+- 最大容器寬度：最高 1920px
+- 英雄區：全寬漸層，內容置中
+- 產品區：交替展示
+- 頁尾：深色全寬區塊
+- 響應式範圍：559px 至 1920px
+
+### 留白哲學
+- **畫廊式節奏**：充裕的間距讓每個產品區塊如同獨立展品般呼吸。
+- **色彩區塊作為視覺喘息**：漸層英雄區和產品展示區在單色介面區塊之間提供色彩上的緩衝。
+
+### 圓角比例
+- 極小（2px）：小型連結元素
+- 微妙（6px）：小型容器、分隔線
+- 舒適（8px）：卡片、圖片、對話框
+- 膠囊（50px）：標籤按鈕、CTA
+- 圓形（50%）：圖示按鈕、圓形元素
+
+## 6. 深度與層次
+
+| 層級 | 處理方式 | 用途 |
+|-------|-----------|-----|
+| 平坦（層級 0） | 無陰影 | 頁面背景、大多數文字 |
+| 表面（層級 1） | 漸層／深色區塊上的白色卡片 | 卡片、產品展示 |
+| 抬升（層級 2） | 微妙陰影 | 懸浮卡片、懸停狀態 |
+
+**陰影哲學**：Figma 節制地使用陰影。主要的深度機制是**背景對比**（彩色／深色區塊上的白色內容）以及產品截圖本身固有的立體感。
+
+## 7. 應為與不為
+
+### 應為
+- 使用 figmaSans 搭配精準的可變字重（320–540）——細粒度字重控制即是設計本身
+- 保持介面嚴格的黑白配色——顏色僅來自產品內容
+- 對所有互動元素使用膠囊（50px）和圓形（50%）幾何造型
+- 套用虛線 2px 聚焦輪廓——標誌性的無障礙模式
+- 在所有文字上啟用 `"kern"` 特性
+- 將 figmaMono 以大寫形式搭配正字母間距用於標籤
+- 全域套用負字母間距（-0.1px 至 -1.72px）
+
+### 不為
+- 不要新增介面顏色——單色調色盤是絕對的
+- 不要使用標準字重（400、500、600、700）——使用可變字體的獨特停駐點（320、330、340、450、480、540）
+- 不要在按鈕上使用尖銳角落——僅使用膠囊和圓形幾何造型
+- 不要使用實線聚焦輪廓——虛線才是標誌
+- 不要將正文字重提高至 450 以上——輕字重美學是核心
+- 不要在正文使用正字母間距——它始終為負值
+
+## 8. 響應式行為
+
+### 斷點
+| 名稱 | 寬度 | 主要變化 |
+|------|-------|-------------|
+| 小螢幕手機 | <560px | 緊湊版面，堆疊排列 |
+| 平板 | 560–768px | 微調 |
+| 小桌面 | 768–960px | 兩欄版面 |
+| 桌面 | 960–1280px | 標準版面 |
+| 大桌面 | 1280–1440px | 擴展 |
+| 超寬螢幕 | 1440–1920px | 最大寬度 |
+
+### 折疊策略
+- 英雄文字：86px → 64px → 48px
+- 產品標籤：行動裝置水平捲動
+- 功能區塊：堆疊單欄
+- 頁尾：多欄 → 堆疊
+
+## 9. 智能體提示指南
+
+### 快速顏色參考
+- 全部：「純黑（#000000）」與「純白（#ffffff）」
+- 玻璃深色：「rgba(0, 0, 0, 0.08)」
+- 玻璃淺色：「rgba(255, 255, 255, 0.16)」
+
+### 範例元件提示
+- "在鮮活的多色漸層（綠、黃、紫、粉）上建立一個英雄區。標題為 86px figmaSans 字重 400，行高 1.0，字母間距 -1.72px。白色文字。白色膠囊 CTA 按鈕（50px 圓角，8px 18px 內距）。"
+- "設計一個帶膠囊形按鈕的產品標籤列（50px 圓角）。啟用態：黑色背景，白色文字。非啟用態：透明，黑色文字。figmaSans 20px 字重 480。"
+- "建構一個區塊標籤：figmaMono 18px，大寫，字母間距 0.54px，黑色文字。啟用字距微調。"
+- "建立 20px figmaSans 字重 330 的正文，行高 1.40，字母間距 -0.14px。白底純黑文字。"
+
+### 迭代指南
+1. 精確使用可變字體字重停駐點：320、330、340、450、480、540、700
+2. 介面始終黑白——絕不為外殼新增顏色
+3. 虛線聚焦輪廓，不用實線
+4. 正文字母間距始終為負，等寬標籤始終為正
+5. 按鈕／標籤用膠囊（50px），圖示按鈕用圓形（50%）

open-design/design-systems/figma/DESIGN-zh.md

@@ -0,0 +1,223 @@
+# 灵感源自 Figma 的设计系统
+
+> Category: 设计与创意
+> 协作设计工具。色彩鲜活多元，活泼而不失专业。
+
+## 1. 视觉主题与氛围
+
+Figma 的界面是那个设计了自身的设计工具——一堂排版精妙的大师课，自定义可变字体（figmaSans）在极细（字重 320）与粗体（字重 700）之间无缝切换，并在大多数字体系统从不涉足的中间值（330、340、450、480、540）处设有停驻点。这种细粒度的字重控制为每个文字元素赋予了精确校准的视觉分量，通过微小差异构建层级，而非"常规与粗体"这种粗放手段。
+
+页面呈现出一种迷人的二元性：界面外壳严格遵循黑白配色（字面上仅能检测到 `#000000` 和 `#ffffff` 两种颜色），而英雄区和产品展示区则爆发出鲜活的多色渐变——电光绿、亮黄、深紫、热粉。这种分隔意味着设计系统本身是无色的，将产品的多彩输出作为核心内容。Figma 的营销页面本质上是一面陈列彩色艺术作品的白色画廊墙。
+
+让 Figma 与众不同的，除了可变字体之外，还有它的圆形与胶囊几何造型。按钮使用 50px 圆角（胶囊）或 50%（图标按钮的完美圆形），营造出一种有机的、工具调色板式的感觉。虚线轮廓聚焦指示器（`dashed 2px`）是一种刻意为之的设计选择，与 Figma 编辑器中的选择手柄相呼应——网站的 UI 语言引用了产品的 UI 语言。
+
+**核心特征：**
+- 自定义可变字体（figmaSans），具有非寻常的字重停驻点：320、330、340、450、480、540、700
+- 严格黑白的界面外壳——颜色仅存在于产品内容中
+- figmaMono 用于大写技术标签，配以宽字母间距
+- 胶囊形（50px）与圆形（50%）按钮几何造型
+- 虚线聚焦轮廓，呼应 Figma 编辑器的选择手柄
+- 鲜活的多色英雄渐变（绿、黄、紫、粉）
+- OpenType `"kern"` 特性全局启用
+- 全局负字母间距——即便正文文本也使用 -0.14px 至 -0.26px
+
+## 2. 色彩方案与用途
+
+### 主色
+- **纯黑** (`#000000`)：所有文字、所有实色按钮、所有边框。界面唯一的"颜色"。
+- **纯白** (`#ffffff`)：所有背景、白色按钮、深色表面上的文字。二元体系的另一半。
+
+*注：Figma 营销站点的界面层仅使用这两种颜色。所有鲜亮色彩仅出现在产品截图、英雄渐变和嵌入内容中。*
+
+### 表面与背景
+- **纯白** (`#ffffff`)：主要页面背景和卡片表面。
+- **玻璃黑** (`rgba(0, 0, 0, 0.08)`)：用于次要圆形按钮和玻璃效果的微妙深色叠加。
+- **玻璃白** (`rgba(255, 255, 255, 0.16)`)：深色/彩色表面上按钮的磨砂玻璃叠加。
+
+### 渐变系统
+- **英雄渐变**：由电光绿、亮黄、深紫和热粉构成的鲜活多停驻点渐变。这个渐变是英雄区的视觉标志——它代表着工具的无限创意可能。
+- **产品区域渐变**：各产品区域（Design、Dev Mode、Prototyping）在其展示中可能使用独特的色彩主题。
+
+## 3. 排版规则
+
+### 字体族
+- **主字体**：`figmaSans`，备选字体：`figmaSans Fallback, SF Pro Display, system-ui, helvetica`
+- **等宽体 / 标签**：`figmaMono`，备选字体：`figmaMono Fallback, SF Mono, menlo`
+
+### 层级
+
+| 角色 | 字体 | 尺寸 | 字重 | 行高 | 字母间距 | 备注 |
+|------|------|------|--------|-------------|----------------|-------|
+| 展示 / 英雄 | figmaSans | 86px (5.38rem) | 400 | 1.00（紧凑） | -1.72px | 最大冲击力，极端字距 |
+| 区块标题 | figmaSans | 64px (4rem) | 400 | 1.10（紧凑） | -0.96px | 功能区块标题 |
+| 副标题 | figmaSans | 26px (1.63rem) | 540 | 1.35 | -0.26px | 强调区块文字 |
+| 轻量副标题 | figmaSans | 26px (1.63rem) | 340 | 1.35 | -0.26px | 轻字重区块文字 |
+| 功能标题 | figmaSans | 24px (1.5rem) | 700 | 1.45 | normal | 粗体卡片标题 |
+| 大号正文 | figmaSans | 20px (1.25rem) | 330–450 | 1.30–1.40 | -0.1px 至 -0.14px | 描述、引言 |
+| 正文 / 按钮 | figmaSans | 16px (1rem) | 330–400 | 1.40–1.45 | -0.14px 至 normal | 标准正文、导航、按钮 |
+| 轻量正文 | figmaSans | 18px (1.13rem) | 320 | 1.45 | -0.26px 至 normal | 轻字重正文 |
+| 等宽标签 | figmaMono | 18px (1.13rem) | 400 | 1.30（紧凑） | 0.54px | 大写区块标签 |
+| 等宽小号 | figmaMono | 12px (0.75rem) | 400 | 1.00（紧凑） | 0.6px | 大写微型标签 |
+
+### 原则
+- **可变字体精准性**：figmaSans 使用大多数系统从不触及的字重——320、330、340、450、480、540。这通过微妙的字重差异而非大幅跳跃来构建层级。330 与 340 之间的差异几乎无法察觉，却在结构上意义重大。
+- **轻体为基础**：大多数正文使用 320–340（比典型的 400"常规"更轻），营造出空灵、通透的阅读体验，与设计工具的美学相契合。
+- **处处字距微调**：每个文字元素都启用 OpenType `"kern"` 特性——字距微调不是可选项，而是结构性的。
+- **默认负字距**：即便正文也使用 -0.1px 至 -0.26px 的字母间距，营造出全局紧凑的文字效果。展示文字进一步压缩至 -0.96px 和 -1.72px。
+- **等宽字体用于结构**：figmaMono 以大写形式配合正字母间距（0.54px–0.6px），创造出技术指示牌标签。
+
+## 4. 组件样式
+
+### 按钮
+
+**黑色实色（胶囊）**
+- 背景：纯黑（`#000000`）
+- 文字：纯白（`#ffffff`）
+- 圆角：圆形（50%），用于图标按钮
+- 聚焦：虚线 2px 轮廓
+- 最强调
+
+**白色胶囊**
+- 背景：纯白（`#ffffff`）
+- 文字：纯黑（`#000000`）
+- 内边距：8px 18px 10px（不对称垂直）
+- 圆角：胶囊（50px）
+- 聚焦：虚线 2px 轮廓
+- 深色/彩色表面上的标准 CTA
+
+**玻璃深色**
+- 背景：`rgba(0, 0, 0, 0.08)`（微妙深色叠加）
+- 文字：纯黑
+- 圆角：圆形（50%）
+- 聚焦：虚线 2px 轮廓
+- 浅色表面上的次要操作
+
+**玻璃浅色**
+- 背景：`rgba(255, 255, 255, 0.16)`（磨砂玻璃）
+- 文字：纯白
+- 圆角：圆形（50%）
+- 聚焦：虚线 2px 轮廓
+- 深色/彩色表面上的次要操作
+
+### 卡片与容器
+- 背景：纯白
+- 边框：无或极简
+- 圆角：6px（小型容器）、8px（图片、卡片、对话框）
+- 阴影：微妙至中等的层次感效果
+- 产品截图作为卡片内容
+
+### 导航
+- 白色背景上的简洁水平导航
+- Logo：黑色 Figma 字标
+- 产品标签：胶囊形（50px）标签导航
+- 链接：黑色文字，1px 下划线装饰
+- CTA：黑色胶囊按钮
+- 悬停：通过 CSS 变量控制文字颜色
+
+### 特色组件
+
+**产品标签栏**
+- 水平胶囊形标签（50px 圆角）
+- 每个标签代表 Figma 的一个产品区域（Design、Dev Mode、Prototyping 等）
+- 激活标签高亮显示
+
+**英雄渐变区块**
+- 全宽鲜活多色渐变背景
+- 带 86px 展示标题的白色文字叠加
+- 产品截图悬浮在渐变中
+
+**虚线聚焦指示器**
+- 所有交互元素在聚焦时使用 `dashed 2px` 轮廓
+- 引用 Figma 编辑器中的选择手柄
+- 一种将网站与产品相连接的元设计选择
+
+## 5. 布局原则
+
+### 间距系统
+- 基础单位：8px
+- 刻度：1px、2px、4px、4.5px、8px、10px、12px、16px、18px、24px、32px、40px、46px、48px、50px
+
+### 网格与容器
+- 最大容器宽度：最高 1920px
+- 英雄区：全宽渐变，内容居中
+- 产品区：交替展示
+- 页脚：深色全宽区块
+- 响应式范围：559px 至 1920px
+
+### 留白哲学
+- **画廊式节奏**：充裕的间距让每个产品区块如同独立展品般自由呼吸。
+- **色彩区块作为视觉喘息**：渐变英雄区和产品展示区在单色界面区块之间提供色彩上的缓冲。
+
+### 圆角比例
+- 极小（2px）：小型链接元素
+- 微妙（6px）：小型容器、分隔线
+- 舒适（8px）：卡片、图片、对话框
+- 胶囊（50px）：标签按钮、CTA
+- 圆形（50%）：图标按钮、圆形元素
+
+## 6. 深度与层次
+
+| 层级 | 处理方式 | 用途 |
+|-------|-----------|-----|
+| 平坦（层级 0） | 无阴影 | 页面背景、大多数文字 |
+| 表面（层级 1） | 渐变/深色区块上的白色卡片 | 卡片、产品展示 |
+| 抬升（层级 2） | 微妙阴影 | 悬浮卡片、悬停状态 |
+
+**阴影哲学**：Figma 节制地使用阴影。主要的深度机制是**背景对比**（彩色/深色区块上的白色内容）以及产品截图本身固有的立体感。
+
+## 7. 应为与不为
+
+### 应为
+- 使用 figmaSans 配合精准的可变字重（320–540）——细粒度字重控制即是设计本身
+- 保持界面严格的黑白配色——颜色仅来自产品内容
+- 对所有交互元素使用胶囊（50px）和圆形（50%）几何造型
+- 应用虚线 2px 聚焦轮廓——标志性的无障碍模式
+- 在所有文字上启用 `"kern"` 特性
+- 将 figmaMono 以大写形式配合正字母间距用于标签
+- 全局应用负字母间距（-0.1px 至 -1.72px）
+
+### 不为
+- 不要添加界面颜色——单色调色板是绝对的
+- 不要使用标准字重（400、500、600、700）——使用可变字体的独特停驻点（320、330、340、450、480、540）
+- 不要在按钮上使用尖锐角落——仅使用胶囊和圆形几何造型
+- 不要使用实线聚焦轮廓——虚线才是标志
+- 不要将正文字重提高至 450 以上——轻字重美学是核心
+- 不要在正文使用正字母间距——它始终为负值
+
+## 8. 响应式行为
+
+### 断点
+| 名称 | 宽度 | 主要变化 |
+|------|-------|-------------|
+| 小屏手机 | <560px | 紧凑布局，堆叠排列 |
+| 平板 | 560–768px | 微调 |
+| 小桌面 | 768–960px | 两列布局 |
+| 桌面 | 960–1280px | 标准布局 |
+| 大桌面 | 1280–1440px | 扩展 |
+| 超宽屏 | 1440–1920px | 最大宽度 |
+
+### 折叠策略
+- 英雄文字：86px → 64px → 48px
+- 产品标签：移动端水平滚动
+- 功能区块：堆叠单列
+- 页脚：多列 → 堆叠
+
+## 9. 智能体提示指南
+
+### 快速颜色参考
+- 全部：「纯黑（#000000）」与「纯白（#ffffff）」
+- 玻璃深色：「rgba(0, 0, 0, 0.08)」
+- 玻璃浅色：「rgba(255, 255, 255, 0.16)」
+
+### 示例组件提示
+- "在鲜活的多色渐变（绿、黄、紫、粉）上创建一个英雄区。标题为 86px figmaSans 字重 400，行高 1.0，字母间距 -1.72px。白色文字。白色胶囊 CTA 按钮（50px 圆角，8px 18px 内边距）。"
+- "设计一个带胶囊形按钮的产品标签栏（50px 圆角）。激活态：黑色背景，白色文字。非激活态：透明，黑色文字。figmaSans 20px 字重 480。"
+- "构建一个区块标签：figmaMono 18px，大写，字母间距 0.54px，黑色文字。启用字距微调。"
+- "创建 20px figmaSans 字重 330 的正文，行高 1.40，字母间距 -0.14px。白底纯黑文字。"
+
+### 迭代指南
+1. 精确使用可变字体字重停驻点：320、330、340、450、480、540、700
+2. 界面始终黑白——绝不为外壳添加颜色
+3. 虚线聚焦轮廓，不用实线
+4. 正文字母间距始终为负，等宽标签始终为正
+5. 按钮/标签用胶囊（50px），图标按钮用圆形（50%）

open-design/design-systems/figma/DESIGN.md

@@ -0,0 +1,223 @@
+# Design System Inspired by Figma
+
+> Category: Design & Creative
+> Collaborative design tool. Vibrant multi-color, playful yet professional.
+
+## 1. Visual Theme & Atmosphere
+
+Figma's interface is the design tool that designed itself — a masterclass in typographic sophistication where a custom variable font (figmaSans) modulates between razor-thin (weight 320) and bold (weight 700) with stops at unusual intermediates (330, 340, 450, 480, 540) that most type systems never explore. This granular weight control gives every text element a precisely calibrated visual weight, creating hierarchy through micro-differences rather than the blunt instrument of "regular vs bold."
+
+The page presents a fascinating duality: the interface chrome is strictly black-and-white (literally only `#000000` and `#ffffff` detected as colors), while the hero section and product showcases explode with vibrant multi-color gradients — electric greens, bright yellows, deep purples, hot pinks. This separation means the design system itself is colorless, treating the product's colorful output as the hero content. Figma's marketing page is essentially a white gallery wall displaying colorful art.
+
+What makes Figma distinctive beyond the variable font is its circle-and-pill geometry. Buttons use 50px radius (pill) or 50% (perfect circle for icon buttons), creating an organic, tool-palette-like feel. The dashed-outline focus indicator (`dashed 2px`) is a deliberate design choice that echoes selection handles in the Figma editor itself — the website's UI language references the product's UI language.
+
+**Key Characteristics:**
+- Custom variable font (figmaSans) with unusual weight stops: 320, 330, 340, 450, 480, 540, 700
+- Strictly black-and-white interface chrome — color exists only in product content
+- figmaMono for uppercase technical labels with wide letter-spacing
+- Pill (50px) and circular (50%) button geometry
+- Dashed focus outlines echoing Figma's editor selection handles
+- Vibrant multi-color hero gradients (green, yellow, purple, pink)
+- OpenType `"kern"` feature enabled globally
+- Negative letter-spacing throughout — even body text at -0.14px to -0.26px
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Pure Black** (`#000000`): All text, all solid buttons, all borders. The sole "color" of the interface.
+- **Pure White** (`#ffffff`): All backgrounds, white buttons, text on dark surfaces. The other half of the binary.
+
+*Note: Figma's marketing site uses ONLY these two colors for its interface layer. All vibrant colors appear exclusively in product screenshots, hero gradients, and embedded content.*
+
+### Surface & Background
+- **Pure White** (`#ffffff`): Primary page background and card surfaces.
+- **Glass Black** (`rgba(0, 0, 0, 0.08)`): Subtle dark overlay for secondary circular buttons and glass effects.
+- **Glass White** (`rgba(255, 255, 255, 0.16)`): Frosted glass overlay for buttons on dark/colored surfaces.
+
+### Gradient System
+- **Hero Gradient**: A vibrant multi-stop gradient using electric green, bright yellow, deep purple, and hot pink. This gradient is the visual signature of the hero section — it represents the creative possibilities of the tool.
+- **Product Section Gradients**: Individual product areas (Design, Dev Mode, Prototyping) may use distinct color themes in their showcases.
+
+## 3. Typography Rules
+
+### Font Family
+- **Primary**: `figmaSans`, with fallbacks: `figmaSans Fallback, SF Pro Display, system-ui, helvetica`
+- **Monospace / Labels**: `figmaMono`, with fallbacks: `figmaMono Fallback, SF Mono, menlo`
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display / Hero | figmaSans | 86px (5.38rem) | 400 | 1.00 (tight) | -1.72px | Maximum impact, extreme tracking |
+| Section Heading | figmaSans | 64px (4rem) | 400 | 1.10 (tight) | -0.96px | Feature section titles |
+| Sub-heading | figmaSans | 26px (1.63rem) | 540 | 1.35 | -0.26px | Emphasized section text |
+| Sub-heading Light | figmaSans | 26px (1.63rem) | 340 | 1.35 | -0.26px | Light-weight section text |
+| Feature Title | figmaSans | 24px (1.5rem) | 700 | 1.45 | normal | Bold card headings |
+| Body Large | figmaSans | 20px (1.25rem) | 330–450 | 1.30–1.40 | -0.1px to -0.14px | Descriptions, intros |
+| Body / Button | figmaSans | 16px (1rem) | 330–400 | 1.40–1.45 | -0.14px to normal | Standard body, nav, buttons |
+| Body Light | figmaSans | 18px (1.13rem) | 320 | 1.45 | -0.26px to normal | Light-weight body text |
+| Mono Label | figmaMono | 18px (1.13rem) | 400 | 1.30 (tight) | 0.54px | Uppercase section labels |
+| Mono Small | figmaMono | 12px (0.75rem) | 400 | 1.00 (tight) | 0.6px | Uppercase tiny tags |
+
+### Principles
+- **Variable font precision**: figmaSans uses weights that most systems never touch — 320, 330, 340, 450, 480, 540. This creates hierarchy through subtle weight differences rather than dramatic jumps. The difference between 330 and 340 is nearly imperceptible but structurally significant.
+- **Light as the base**: Most body text uses 320–340 (lighter than typical 400 "regular"), creating an ethereal, airy reading experience that matches the design-tool aesthetic.
+- **Kern everywhere**: Every text element enables OpenType `"kern"` feature — kerning is not optional, it's structural.
+- **Negative tracking by default**: Even body text uses -0.1px to -0.26px letter-spacing, creating universally tight text. Display text compresses further to -0.96px and -1.72px.
+- **Mono for structure**: figmaMono in uppercase with positive letter-spacing (0.54px–0.6px) creates technical signpost labels.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Black Solid (Pill)**
+- Background: Pure Black (`#000000`)
+- Text: Pure White (`#ffffff`)
+- Radius: circle (50%) for icon buttons
+- Focus: dashed 2px outline
+- Maximum emphasis
+
+**White Pill**
+- Background: Pure White (`#ffffff`)
+- Text: Pure Black (`#000000`)
+- Padding: 8px 18px 10px (asymmetric vertical)
+- Radius: pill (50px)
+- Focus: dashed 2px outline
+- Standard CTA on dark/colored surfaces
+
+**Glass Dark**
+- Background: `rgba(0, 0, 0, 0.08)` (subtle dark overlay)
+- Text: Pure Black
+- Radius: circle (50%)
+- Focus: dashed 2px outline
+- Secondary action on light surfaces
+
+**Glass Light**
+- Background: `rgba(255, 255, 255, 0.16)` (frosted glass)
+- Text: Pure White
+- Radius: circle (50%)
+- Focus: dashed 2px outline
+- Secondary action on dark/colored surfaces
+
+### Cards & Containers
+- Background: Pure White
+- Border: none or minimal
+- Radius: 6px (small containers), 8px (images, cards, dialogs)
+- Shadow: subtle to medium elevation effects
+- Product screenshots as card content
+
+### Navigation
+- Clean horizontal nav on white
+- Logo: Figma wordmark in black
+- Product tabs: pill-shaped (50px) tab navigation
+- Links: black text, underline 1px decoration
+- CTA: Black pill button
+- Hover: text color via CSS variable
+
+### Distinctive Components
+
+**Product Tab Bar**
+- Horizontal pill-shaped tabs (50px radius)
+- Each tab represents a Figma product area (Design, Dev Mode, Prototyping, etc.)
+- Active tab highlighted
+
+**Hero Gradient Section**
+- Full-width vibrant multi-color gradient background
+- White text overlay with 86px display heading
+- Product screenshots floating within the gradient
+
+**Dashed Focus Indicators**
+- All interactive elements use `dashed 2px` outline on focus
+- References the selection handles in the Figma editor
+- A meta-design choice connecting website and product
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 8px
+- Scale: 1px, 2px, 4px, 4.5px, 8px, 10px, 12px, 16px, 18px, 24px, 32px, 40px, 46px, 48px, 50px
+
+### Grid & Container
+- Max container width: up to 1920px
+- Hero: full-width gradient with centered content
+- Product sections: alternating showcases
+- Footer: dark full-width section
+- Responsive from 559px to 1920px
+
+### Whitespace Philosophy
+- **Gallery-like pacing**: Generous spacing lets each product section breathe as its own exhibit.
+- **Color sections as visual breathing**: The gradient hero and product showcases provide chromatic relief between the monochrome interface sections.
+
+### Border Radius Scale
+- Minimal (2px): Small link elements
+- Subtle (6px): Small containers, dividers
+- Comfortable (8px): Cards, images, dialogs
+- Pill (50px): Tab buttons, CTAs
+- Circle (50%): Icon buttons, circular elements
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow | Page background, most text |
+| Surface (Level 1) | White card on gradient/dark section | Cards, product showcases |
+| Elevated (Level 2) | Subtle shadow | Floating cards, hover states |
+
+**Shadow Philosophy**: Figma uses shadows sparingly. The primary depth mechanisms are **background contrast** (white content on colorful/dark sections) and the inherent dimensionality of the product screenshots themselves.
+
+## 7. Do's and Don'ts
+
+### Do
+- Use figmaSans with precise variable weights (320–540) — the granular weight control IS the design
+- Keep the interface strictly black-and-white — color comes from product content only
+- Use pill (50px) and circular (50%) geometry for all interactive elements
+- Apply dashed 2px focus outlines — the signature accessibility pattern
+- Enable `"kern"` feature on all text
+- Use figmaMono in uppercase with positive letter-spacing for labels
+- Apply negative letter-spacing throughout (-0.1px to -1.72px)
+
+### Don't
+- Don't add interface colors — the monochrome palette is absolute
+- Don't use standard font weights (400, 500, 600, 700) — use the variable font's unique stops (320, 330, 340, 450, 480, 540)
+- Don't use sharp corners on buttons — pill and circular geometry only
+- Don't use solid focus outlines — dashed is the signature
+- Don't increase body font weight above 450 — the light-weight aesthetic is core
+- Don't use positive letter-spacing on body text — it's always negative
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Small Mobile | <560px | Compact layout, stacked |
+| Tablet | 560–768px | Minor adjustments |
+| Small Desktop | 768–960px | 2-column layouts |
+| Desktop | 960–1280px | Standard layout |
+| Large Desktop | 1280–1440px | Expanded |
+| Ultra-wide | 1440–1920px | Maximum width |
+
+### Collapsing Strategy
+- Hero text: 86px → 64px → 48px
+- Product tabs: horizontal scroll on mobile
+- Feature sections: stacked single column
+- Footer: multi-column → stacked
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Everything: "Pure Black (#000000)" and "Pure White (#ffffff)"
+- Glass Dark: "rgba(0, 0, 0, 0.08)"
+- Glass Light: "rgba(255, 255, 255, 0.16)"
+
+### Example Component Prompts
+- "Create a hero on a vibrant multi-color gradient (green, yellow, purple, pink). Headline at 86px figmaSans weight 400, line-height 1.0, letter-spacing -1.72px. White text. White pill CTA button (50px radius, 8px 18px padding)."
+- "Design a product tab bar with pill-shaped buttons (50px radius). Active: Black bg, white text. Inactive: transparent, black text. figmaSans at 20px weight 480."
+- "Build a section label: figmaMono 18px, uppercase, letter-spacing 0.54px, black text. Kern enabled."
+- "Create body text at 20px figmaSans weight 330, line-height 1.40, letter-spacing -0.14px. Pure Black on white."
+
+### Iteration Guide
+1. Use variable font weight stops precisely: 320, 330, 340, 450, 480, 540, 700
+2. Interface is always black + white — never add colors to chrome
+3. Dashed focus outlines, not solid
+4. Letter-spacing is always negative on body, always positive on mono labels
+5. Pill (50px) for buttons/tabs, circle (50%) for icon buttons

open-design/design-systems/figma/USAGE.md

@@ -0,0 +1,32 @@
+# Figma Usage
+
+Design System 2.0 package guide for OpenDesign agents and reviewers.
+
+## Read Order
+
+1. Read this file first to understand the package contract.
+2. Read `DESIGN.md` for visual intent, constraints, and anti-patterns.
+3. Paste `tokens.css` into the first artifact `<style>` block before writing component CSS.
+4. Use `components.manifest.json` for the compact component inventory; open `components.html` when exact selectors or states matter.
+5. Inspect `preview/` pages when a visual sanity check is useful.
+
+## Design Highlights
+
+- Custom variable font (figmaSans) with unusual weight stops: 320, 330, 340, 450, 480, 540, 700
+- Strictly black-and-white interface chrome — color exists only in product content
+- Pill (50px) and circular (50%) button geometry
+- Dashed focus outlines echoing Figma's editor selection handles
+
+## Do
+
+- Preserve the schema token names exactly so cross-brand switching stays reliable.
+- Use `--accent` for primary actions, links, focus states, and one clear focal element.
+- Reuse component groups from `components.manifest.json` before inventing new controls.
+- Treat `source/` files as audit evidence for the bundled fixture backfill.
+
+## Avoid
+
+- Avoid raw hex values outside the copied `:root` token block.
+- Avoid redefining Tailwind or design-token values independently of `tokens.css`.
+- Avoid claiming original upstream source evidence; this package is based on the curated bundled fixture.
+- Avoid adding new component recipes that are not represented in `components.html` or `DESIGN.md`.

open-design/design-systems/figma/components.html

@@ -0,0 +1,344 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Figma — reference components</title>
+    <meta
+      name="description"
+      content="Reference fixture for design-systems/figma. Every visible
+        value comes from tokens.css. Figma's signature moves: strictly
+        black-and-white interface, figmaSans variable weights (320–700),
+        pill (50px) and circular (50%) geometry, dashed focus outlines,
+        figmaMono uppercase labels with positive letter-spacing."
+    />
+
+    <style>
+      :root {
+        --bg:           #ffffff;
+        --surface:      #ffffff;
+        --surface-warm: var(--surface);
+
+        --fg:   #000000;
+        --fg-2: #000000;
+        --muted: rgba(0, 0, 0, 0.55);
+        --meta:  rgba(0, 0, 0, 0.40);
+
+        --border:      rgba(0, 0, 0, 0.12);
+        --border-soft: rgba(0, 0, 0, 0.06);
+
+        --accent:        #000000;
+        --accent-on:     #ffffff;
+        --accent-hover:  rgba(0, 0, 0, 0.85);
+        --accent-active: rgba(0, 0, 0, 0.08);
+
+        --success: #16a34a;
+        --warn:    #eab308;
+        --danger:  #dc2626;
+
+        --font-display: "figmaSans", "figmaSans Fallback", "SF Pro Display", system-ui, Helvetica, sans-serif;
+        --font-body:    "figmaSans", "figmaSans Fallback", "SF Pro Display", system-ui, Helvetica, sans-serif;
+        --font-mono:    "figmaMono", "figmaMono Fallback", "SF Mono", Menlo, ui-monospace, monospace;
+
+        --text-xs:   12px;
+        --text-sm:   16px;
+        --text-base: 16px;
+        --text-lg:   20px;
+        --text-xl:   26px;
+        --text-2xl:  26px;
+        --text-3xl:  64px;
+        --text-4xl:  86px;
+
+        --leading-body:     1.40;
+        --leading-tight:    1.00;
+        --tracking-display: -0.02em;
+
+        --space-1:  4px;
+        --space-2:  8px;
+        --space-3:  12px;
+        --space-4:  16px;
+        --space-5:  20px;
+        --space-6:  24px;
+        --space-8:  32px;
+        --space-12: 48px;
+
+        --section-y-desktop: 96px;
+        --section-y-tablet:  64px;
+        --section-y-phone:   40px;
+
+        --radius-sm:   50px;
+        --radius-md:   8px;
+        --radius-lg:   8px;
+        --radius-pill: 9999px;
+
+        --elev-flat:   none;
+        --elev-ring:   0 0 0 1px var(--border);
+        --elev-raised: 0 4px 16px rgba(0, 0, 0, 0.08);
+
+        --focus-ring: 0 0 0 2px rgba(0, 0, 0, 0.8);
+
+        --motion-fast:   150ms;
+        --motion-base:   200ms;
+        --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+
+        --container-max:            1920px;
+        --container-gutter-desktop: 40px;
+        --container-gutter-tablet:  24px;
+        --container-gutter-phone:   16px;
+      }
+
+      *, *::before, *::after { box-sizing: border-box; }
+      html, body { margin: 0; padding: 0; }
+      body {
+        background: var(--bg);
+        color: var(--fg);
+        font-family: var(--font-body);
+        font-size: var(--text-base);
+        line-height: var(--leading-body);
+        /* OpenType kern on all text — structural, not decorative. */
+        font-feature-settings: "kern";
+        -webkit-font-smoothing: antialiased;
+      }
+
+      .container {
+        max-width: var(--container-max);
+        margin-inline: auto;
+        padding-inline: var(--container-gutter-desktop);
+      }
+      section { padding-block: var(--section-y-desktop); }
+      section + section { border-top: 1px solid var(--border); }
+      @media (max-width: 1023px) {
+        .container { padding-inline: var(--container-gutter-tablet); }
+        section { padding-block: var(--section-y-tablet); }
+      }
+      @media (max-width: 639px) {
+        .container { padding-inline: var(--container-gutter-phone); }
+        section { padding-block: var(--section-y-phone); }
+      }
+
+      /* ─── Typography ─────────────────────────── */
+      h1, h2, h3 {
+        font-family: var(--font-display);
+        font-weight: 400;              /* figmaSans light — base display weight */
+        margin: 0;
+        line-height: var(--leading-tight);
+        font-feature-settings: "kern";
+      }
+      h1 {
+        font-size: var(--text-4xl);
+        letter-spacing: var(--tracking-display);
+      }
+      h2 {
+        font-size: var(--text-3xl);
+        /* 64px section: line-height 1.10, tracking -0.96px (-0.015em). */
+        line-height: 1.10;
+        letter-spacing: -0.015em;
+      }
+      h3 {
+        font-size: var(--text-xl);
+        /* 26px sub-heading: line-height 1.35, tracking -0.26px (-0.01em).
+           Overrides the shared 1.00 set above. */
+        line-height: 1.35;
+        letter-spacing: -0.01em;
+        font-weight: 540;
+      }
+      p { margin: 0; }
+      .lead {
+        font-size: var(--text-lg);
+        line-height: 1.40;
+        color: var(--muted);
+        font-weight: 330;
+        letter-spacing: -0.007em;
+      }
+      /* figmaMono uppercase label — section signpost. */
+      .mono-label {
+        font-family: var(--font-mono);
+        font-size: 18px;
+        font-weight: 400;
+        text-transform: uppercase;
+        letter-spacing: 0.54px;
+        color: var(--fg);
+        line-height: 1.30;
+      }
+      .body-muted { color: var(--muted); }
+      .stack-3 > * + * { margin-block-start: var(--space-3); }
+      .stack-4 > * + * { margin-block-start: var(--space-4); }
+      .stack-6 > * + * { margin-block-start: var(--space-6); }
+
+      /* ─── Buttons ─────────────────────────────── */
+      /* All buttons use pill (50px) or circle (50%) — non-negotiable. */
+      .btn {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--space-2);
+        padding: 10px 20px;
+        border-radius: var(--radius-sm);   /* 50px pill */
+        font-family: var(--font-display);
+        font-size: var(--text-base);
+        font-weight: 400;
+        font-feature-settings: "kern";
+        line-height: 1;
+        cursor: pointer;
+        border: none;
+        transition: background-color var(--motion-fast) var(--ease-standard),
+                    color var(--motion-fast) var(--ease-standard);
+        text-decoration: none;
+      }
+      /* Figma focus: dashed 2px outline — the editor selection handle echo. */
+      .btn:focus-visible { outline: 2px dashed var(--fg); outline-offset: 2px; }
+      .btn-black {
+        background: var(--fg);
+        color: var(--accent-on);
+      }
+      .btn-black:hover { background: rgba(0, 0, 0, 0.85); }
+      .btn-white {
+        background: var(--bg);
+        color: var(--fg);
+        border: 1px solid rgba(0, 0, 0, 0.15);
+      }
+      .btn-white:hover { background: rgba(0, 0, 0, 0.04); }
+
+      /* ─── Product tab bar ─────────────────────── */
+      .tab-bar {
+        display: flex;
+        gap: var(--space-2);
+        flex-wrap: wrap;
+      }
+      .tab {
+        padding: 8px 18px;
+        border-radius: var(--radius-sm);  /* 50px pill */
+        font-size: var(--text-base);
+        font-weight: 480;
+        cursor: pointer;
+        border: none;
+        background: transparent;
+        color: var(--fg);
+        font-feature-settings: "kern";
+        transition: background-color var(--motion-fast) var(--ease-standard);
+      }
+      .tab:hover { background: rgba(0, 0, 0, 0.06); }
+      .tab.active { background: var(--fg); color: var(--accent-on); }
+      .tab:focus-visible { outline: 2px dashed var(--fg); outline-offset: 2px; }
+
+      /* ─── Cards ──────────────────────────────── */
+      .card {
+        background: var(--bg);
+        border-radius: var(--radius-md);
+        padding: var(--space-6);
+        box-shadow: var(--elev-raised);
+      }
+
+      /* ─── Layout ─────────────────────────────── */
+      .hero-grid {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: var(--space-12);
+        align-items: center;
+      }
+      @media (max-width: 1023px) { .hero-grid { grid-template-columns: 1fr; } }
+      .features-grid {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: var(--space-5);
+      }
+      @media (max-width: 1023px) { .features-grid { grid-template-columns: 1fr 1fr; } }
+      @media (max-width: 639px)  { .features-grid { grid-template-columns: 1fr; } }
+      .hero-actions { display: flex; gap: var(--space-3); margin-block-start: var(--space-6); flex-wrap: wrap; }
+      .icon { width: 16px; height: 16px; flex-shrink: 0; }
+    </style>
+  </head>
+  <body>
+    <main class="container">
+      <!-- HERO -->
+      <section data-od-id="hero">
+        <div class="hero-grid">
+          <div class="stack-4">
+            <p class="mono-label">Reference fixture · figma</p>
+            <h1>Nothing great is made alone.</h1>
+            <p class="lead" style="max-width:48ch">
+              Figma brings teams together to design, prototype, and build.
+              A strictly black-and-white interface where product content is the
+              hero. Every value below from tokens.css.
+            </p>
+            <div class="hero-actions">
+              <a href="./tokens.css" class="btn btn-black">
+                Get started for free
+                <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                     stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                  <path d="M5 12h14M13 6l6 6-6 6"/>
+                </svg>
+              </a>
+              <a href="./DESIGN.md" class="btn btn-white">Read the spec</a>
+            </div>
+          </div>
+
+          <aside>
+            <div class="card">
+              <p class="mono-label" style="margin-bottom:var(--space-4)">Product areas</p>
+              <div class="tab-bar">
+                <button class="tab active">Design</button>
+                <button class="tab">Dev Mode</button>
+                <button class="tab">Prototype</button>
+                <button class="tab">Slides</button>
+              </div>
+            </div>
+          </aside>
+        </div>
+      </section>
+
+      <!-- FEATURES -->
+      <section data-od-id="features">
+        <p class="mono-label" style="margin-bottom:var(--space-6)">What this fixture exercises</p>
+
+        <div class="features-grid">
+          <article class="card stack-3">
+            <h3>Variable precision</h3>
+            <p class="body-muted" style="font-size:var(--text-base);font-weight:330;letter-spacing:-0.007em">
+              Weight stops 320, 330, 340, 450, 480, 540, 700 — the granular
+              control IS the design. Hierarchy through micro-differences.
+            </p>
+          </article>
+          <article class="card stack-3">
+            <h3 style="font-weight:340">Monochrome chrome</h3>
+            <p class="body-muted" style="font-size:var(--text-base);font-weight:330;letter-spacing:-0.007em">
+              #000000 and #ffffff only. Color lives in product content —
+              gradients, screenshots, and embedded designs — never the shell.
+            </p>
+          </article>
+          <article class="card stack-3">
+            <h3>Dashed focus</h3>
+            <p class="body-muted" style="font-size:var(--text-base);font-weight:330;letter-spacing:-0.007em">
+              2px dashed outline on all interactive elements — echoes selection
+              handles in the Figma editor. The website speaks the product's UI.
+            </p>
+          </article>
+        </div>
+      </section>
+
+      <!-- FORM / ACTIONS -->
+      <section data-od-id="actions">
+        <div style="display:grid;grid-template-columns:1.2fr 1fr;gap:var(--space-12);align-items:start">
+          <div class="stack-4">
+            <p class="mono-label">Actions</p>
+            <h2 style="font-size:var(--text-xl);line-height:1.35;letter-spacing:-0.01em;font-weight:540">All buttons use pill (50px) radius.</h2>
+            <p class="lead" style="max-width:44ch">
+              No sharp corners on interactive elements. Black solid for primary;
+              bordered white for secondary. Focus is dashed, never solid.
+            </p>
+          </div>
+          <div style="display:flex;flex-direction:column;gap:var(--space-4)">
+            <div style="display:flex;gap:var(--space-3);flex-wrap:wrap">
+              <button class="btn btn-black">Primary action</button>
+              <button class="btn btn-white">Secondary</button>
+            </div>
+            <div style="display:flex;gap:var(--space-3);flex-wrap:wrap">
+              <button class="tab active">Active tab</button>
+              <button class="tab">Inactive tab</button>
+              <button class="tab">Another</button>
+            </div>
+          </div>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>

open-design/design-systems/figma/components.manifest.json

@@ -0,0 +1,380 @@
+{
+  "schemaVersion": 1,
+  "brandId": "figma",
+  "source": {
+    "componentsHtml": "components.html",
+    "tokensCss": "tokens.css"
+  },
+  "fixture": {
+    "title": "Figma — reference components",
+    "description": "Reference fixture for design-systems/figma. Every visible value comes from tokens.css. Figma's signature moves: strictly black-and-white interface, figmaSans variable weights (320–700), pill (50px) and circular (50%) geometry, dashed focus outlines, figmaMono uppercase labels with positive letter-spacing.",
+    "styleBlockCount": 1,
+    "selectorCount": 34,
+    "classCount": 17,
+    "elementCount": 19
+  },
+  "tokens": {
+    "declared": [
+      "--accent",
+      "--accent-active",
+      "--accent-hover",
+      "--accent-on",
+      "--bg",
+      "--border",
+      "--border-soft",
+      "--container-gutter-desktop",
+      "--container-gutter-phone",
+      "--container-gutter-tablet",
+      "--container-max",
+      "--danger",
+      "--ease-standard",
+      "--elev-flat",
+      "--elev-raised",
+      "--elev-ring",
+      "--fg",
+      "--fg-2",
+      "--focus-ring",
+      "--font-body",
+      "--font-display",
+      "--font-mono",
+      "--leading-body",
+      "--leading-tight",
+      "--meta",
+      "--motion-base",
+      "--motion-fast",
+      "--muted",
+      "--radius-lg",
+      "--radius-md",
+      "--radius-pill",
+      "--radius-sm",
+      "--section-y-desktop",
+      "--section-y-phone",
+      "--section-y-tablet",
+      "--space-1",
+      "--space-12",
+      "--space-2",
+      "--space-3",
+      "--space-4",
+      "--space-5",
+      "--space-6",
+      "--space-8",
+      "--success",
+      "--surface",
+      "--surface-warm",
+      "--text-2xl",
+      "--text-3xl",
+      "--text-4xl",
+      "--text-base",
+      "--text-lg",
+      "--text-sm",
+      "--text-xl",
+      "--text-xs",
+      "--tracking-display",
+      "--warn"
+    ],
+    "referenced": [
+      "--accent-on",
+      "--bg",
+      "--border",
+      "--container-gutter-desktop",
+      "--container-gutter-phone",
+      "--container-gutter-tablet",
+      "--container-max",
+      "--ease-standard",
+      "--elev-raised",
+      "--fg",
+      "--font-body",
+      "--font-display",
+      "--font-mono",
+      "--leading-body",
+      "--leading-tight",
+      "--motion-fast",
+      "--muted",
+      "--radius-md",
+      "--radius-sm",
+      "--section-y-desktop",
+      "--section-y-phone",
+      "--section-y-tablet",
+      "--space-12",
+      "--space-2",
+      "--space-3",
+      "--space-4",
+      "--space-5",
+      "--space-6",
+      "--surface",
+      "--text-3xl",
+      "--text-4xl",
+      "--text-base",
+      "--text-lg",
+      "--text-xl",
+      "--tracking-display"
+    ],
+    "unusedDeclared": [
+      "--accent",
+      "--accent-active",
+      "--accent-hover",
+      "--border-soft",
+      "--danger",
+      "--elev-flat",
+      "--elev-ring",
+      "--fg-2",
+      "--focus-ring",
+      "--meta",
+      "--motion-base",
+      "--radius-lg",
+      "--radius-pill",
+      "--space-1",
+      "--space-8",
+      "--success",
+      "--surface-warm",
+      "--text-2xl",
+      "--text-sm",
+      "--text-xs",
+      "--warn"
+    ],
+    "undeclaredReferenced": []
+  },
+  "selectors": [
+    ".body-muted",
+    ".btn",
+    ".btn-black",
+    ".btn-black:hover",
+    ".btn-white",
+    ".btn-white:hover",
+    ".btn:focus-visible",
+    ".card",
+    ".container",
+    ".features-grid",
+    ".hero-actions",
+    ".hero-grid",
+    ".icon",
+    ".lead",
+    ".mono-label",
+    ".stack-3 > * + *",
+    ".stack-4 > * + *",
+    ".stack-6 > * + *",
+    ".tab",
+    ".tab-bar",
+    ".tab:focus-visible",
+    ".tab:hover",
+    ".tab.active",
+    "*",
+    "*::after",
+    "*::before",
+    "body",
+    "h1",
+    "h2",
+    "h3",
+    "html",
+    "p",
+    "section",
+    "section + section"
+  ],
+  "classes": [
+    "active",
+    "body-muted",
+    "btn",
+    "btn-black",
+    "btn-white",
+    "card",
+    "container",
+    "features-grid",
+    "hero-actions",
+    "hero-grid",
+    "icon",
+    "lead",
+    "mono-label",
+    "stack-3",
+    "stack-4",
+    "tab",
+    "tab-bar"
+  ],
+  "elements": [
+    "a",
+    "article",
+    "aside",
+    "body",
+    "button",
+    "div",
+    "h1",
+    "h2",
+    "h3",
+    "head",
+    "html",
+    "main",
+    "meta",
+    "p",
+    "path",
+    "section",
+    "style",
+    "svg",
+    "title"
+  ],
+  "groups": [
+    {
+      "id": "buttons",
+      "label": "Buttons and calls to action",
+      "present": true,
+      "selectors": [
+        ".btn",
+        ".btn-black",
+        ".btn-black:hover",
+        ".btn-white",
+        ".btn-white:hover",
+        ".btn:focus-visible"
+      ],
+      "classes": [
+        "btn",
+        "btn-black",
+        "btn-white"
+      ],
+      "elements": [
+        "button"
+      ],
+      "tokenReferences": [
+        "--fg"
+      ]
+    },
+    {
+      "id": "inputs",
+      "label": "Form fields and controls",
+      "present": true,
+      "selectors": [
+        ".mono-label"
+      ],
+      "classes": [],
+      "elements": [],
+      "tokenReferences": [
+        "--fg",
+        "--font-mono"
+      ]
+    },
+    {
+      "id": "cards",
+      "label": "Cards and panels",
+      "present": true,
+      "selectors": [
+        ".card"
+      ],
+      "classes": [
+        "card"
+      ],
+      "elements": [],
+      "tokenReferences": [
+        "--bg",
+        "--elev-raised",
+        "--radius-md",
+        "--space-6"
+      ]
+    },
+    {
+      "id": "badges",
+      "label": "Badges, chips, and status labels",
+      "present": false,
+      "selectors": [],
+      "classes": [],
+      "elements": [],
+      "tokenReferences": []
+    },
+    {
+      "id": "links",
+      "label": "Links and inline actions",
+      "present": true,
+      "selectors": [],
+      "classes": [],
+      "elements": [
+        "a"
+      ],
+      "tokenReferences": []
+    },
+    {
+      "id": "keyboard",
+      "label": "Keyboard hints",
+      "present": false,
+      "selectors": [],
+      "classes": [],
+      "elements": [],
+      "tokenReferences": []
+    },
+    {
+      "id": "icons",
+      "label": "Icon slots",
+      "present": true,
+      "selectors": [
+        ".icon"
+      ],
+      "classes": [
+        "icon"
+      ],
+      "elements": [
+        "svg"
+      ],
+      "tokenReferences": []
+    },
+    {
+      "id": "typography",
+      "label": "Typography scale and text utilities",
+      "present": true,
+      "selectors": [
+        ".body-muted",
+        ".lead",
+        "h1",
+        "h2",
+        "h3"
+      ],
+      "classes": [
+        "body-muted",
+        "lead"
+      ],
+      "elements": [
+        "h1",
+        "h2",
+        "h3",
+        "p"
+      ],
+      "tokenReferences": [
+        "--font-display",
+        "--leading-tight",
+        "--text-3xl"
+      ]
+    },
+    {
+      "id": "layout",
+      "label": "Layout primitives",
+      "present": true,
+      "selectors": [
+        ".container",
+        ".stack-3 > * + *",
+        ".stack-4 > * + *",
+        ".stack-6 > * + *",
+        "section",
+        "section + section"
+      ],
+      "classes": [
+        "container",
+        "features-grid",
+        "hero-grid",
+        "stack-3",
+        "stack-4"
+      ],
+      "elements": [
+        "main",
+        "section"
+      ],
+      "tokenReferences": [
+        "--border",
+        "--container-gutter-desktop",
+        "--container-gutter-phone",
+        "--container-gutter-tablet",
+        "--container-max",
+        "--space-3",
+        "--space-6"
+      ]
+    }
+  ],
+  "literals": {
+    "colorExpressions": 4,
+    "pixelValues": 19,
+    "hardcodedFontFamilies": 4
+  }
+}

open-design/design-systems/figma/design-tokens.json

@@ -0,0 +1,701 @@
+{
+  "schemaVersion": 1,
+  "format": "od-design-tokens/v1",
+  "contract": "TOKEN_SCHEMA",
+  "generatedAt": "2026-06-06T00:00:00.000Z",
+  "source": {
+    "tokensCss": "tokens.css",
+    "tokenContractReport": "source/token-contract.report.json"
+  },
+  "summary": {
+    "totalTokens": 56,
+    "declaredTokens": 56,
+    "sourceBackedTokens": 56,
+    "sourceBackedA1": 26,
+    "fallbackTokens": 26,
+    "aliasTokens": 1,
+    "layerCounts": {
+      "A1-identity": 8,
+      "B-slot": 4,
+      "A2": 26,
+      "A1-structure": 18
+    },
+    "score": 100,
+    "grade": "excellent",
+    "recommendRebuild": false
+  },
+  "tokens": [
+    {
+      "name": "--bg",
+      "value": "#ffffff",
+      "type": "color",
+      "layer": "A1-identity",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --bg; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:32"
+      ],
+      "sourceName": "--bg"
+    },
+    {
+      "name": "--surface",
+      "value": "#ffffff",
+      "type": "color",
+      "layer": "A1-identity",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --surface; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:33"
+      ],
+      "sourceName": "--surface"
+    },
+    {
+      "name": "--surface-warm",
+      "value": "var(--surface)",
+      "type": "color",
+      "layer": "B-slot",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --surface-warm; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:34"
+      ],
+      "sourceName": "--surface-warm"
+    },
+    {
+      "name": "--fg",
+      "value": "#000000",
+      "type": "color",
+      "layer": "A1-identity",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --fg; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:37"
+      ],
+      "sourceName": "--fg"
+    },
+    {
+      "name": "--fg-2",
+      "value": "#000000",
+      "type": "color",
+      "layer": "B-slot",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --fg-2; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:38"
+      ],
+      "sourceName": "--fg-2"
+    },
+    {
+      "name": "--muted",
+      "value": "rgba(0, 0, 0, 0.55)",
+      "type": "color",
+      "layer": "A1-identity",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --muted; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:39"
+      ],
+      "sourceName": "--muted"
+    },
+    {
+      "name": "--meta",
+      "value": "rgba(0, 0, 0, 0.40)",
+      "type": "color",
+      "layer": "B-slot",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --meta; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:40"
+      ],
+      "sourceName": "--meta"
+    },
+    {
+      "name": "--border",
+      "value": "rgba(0, 0, 0, 0.12)",
+      "type": "color",
+      "layer": "A1-identity",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --border; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:43"
+      ],
+      "sourceName": "--border"
+    },
+    {
+      "name": "--border-soft",
+      "value": "rgba(0, 0, 0, 0.06)",
+      "type": "color",
+      "layer": "B-slot",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --border-soft; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:44"
+      ],
+      "sourceName": "--border-soft"
+    },
+    {
+      "name": "--accent",
+      "value": "#000000",
+      "type": "color",
+      "layer": "A1-identity",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --accent; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:48"
+      ],
+      "sourceName": "--accent"
+    },
+    {
+      "name": "--accent-on",
+      "value": "#ffffff",
+      "type": "color",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --accent-on; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:49"
+      ],
+      "sourceName": "--accent-on"
+    },
+    {
+      "name": "--accent-hover",
+      "value": "rgba(0, 0, 0, 0.85)",
+      "type": "color",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --accent-hover; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:50"
+      ],
+      "sourceName": "--accent-hover"
+    },
+    {
+      "name": "--accent-active",
+      "value": "rgba(0, 0, 0, 0.08)",
+      "type": "color",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --accent-active; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:51"
+      ],
+      "sourceName": "--accent-active"
+    },
+    {
+      "name": "--success",
+      "value": "#16a34a",
+      "type": "color",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --success; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:54"
+      ],
+      "sourceName": "--success"
+    },
+    {
+      "name": "--warn",
+      "value": "#eab308",
+      "type": "color",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --warn; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:55"
+      ],
+      "sourceName": "--warn"
+    },
+    {
+      "name": "--danger",
+      "value": "#dc2626",
+      "type": "color",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --danger; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:56"
+      ],
+      "sourceName": "--danger"
+    },
+    {
+      "name": "--font-display",
+      "value": "\"figmaSans\", \"figmaSans Fallback\", \"SF Pro Display\", system-ui, Helvetica, sans-serif",
+      "type": "fontFamily",
+      "layer": "A1-identity",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --font-display; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:59"
+      ],
+      "sourceName": "--font-display"
+    },
+    {
+      "name": "--font-body",
+      "value": "\"figmaSans\", \"figmaSans Fallback\", \"SF Pro Display\", system-ui, Helvetica, sans-serif",
+      "type": "fontFamily",
+      "layer": "A1-identity",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --font-body; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:60"
+      ],
+      "sourceName": "--font-body"
+    },
+    {
+      "name": "--font-mono",
+      "value": "\"figmaMono\", \"figmaMono Fallback\", \"SF Mono\", Menlo, ui-monospace, monospace",
+      "type": "fontFamily",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --font-mono; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:61"
+      ],
+      "sourceName": "--font-mono"
+    },
+    {
+      "name": "--text-xs",
+      "value": "12px",
+      "type": "dimension",
+      "layer": "A1-structure",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --text-xs; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:66"
+      ],
+      "sourceName": "--text-xs"
+    },
+    {
+      "name": "--text-sm",
+      "value": "16px",
+      "type": "dimension",
+      "layer": "A1-structure",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --text-sm; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:67"
+      ],
+      "sourceName": "--text-sm"
+    },
+    {
+      "name": "--text-base",
+      "value": "16px",
+      "type": "dimension",
+      "layer": "A1-structure",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --text-base; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:68"
+      ],
+      "sourceName": "--text-base"
+    },
+    {
+      "name": "--text-lg",
+      "value": "20px",
+      "type": "dimension",
+      "layer": "A1-structure",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --text-lg; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:69"
+      ],
+      "sourceName": "--text-lg"
+    },
+    {
+      "name": "--text-xl",
+      "value": "26px",
+      "type": "dimension",
+      "layer": "A1-structure",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --text-xl; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:70"
+      ],
+      "sourceName": "--text-xl"
+    },
+    {
+      "name": "--text-2xl",
+      "value": "26px",
+      "type": "dimension",
+      "layer": "A1-structure",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --text-2xl; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:71"
+      ],
+      "sourceName": "--text-2xl"
+    },
+    {
+      "name": "--text-3xl",
+      "value": "64px",
+      "type": "dimension",
+      "layer": "A1-structure",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --text-3xl; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:72"
+      ],
+      "sourceName": "--text-3xl"
+    },
+    {
+      "name": "--text-4xl",
+      "value": "86px",
+      "type": "dimension",
+      "layer": "A1-structure",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --text-4xl; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:73"
+      ],
+      "sourceName": "--text-4xl"
+    },
+    {
+      "name": "--leading-body",
+      "value": "1.40",
+      "type": "number",
+      "layer": "A1-structure",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --leading-body; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:79"
+      ],
+      "sourceName": "--leading-body"
+    },
+    {
+      "name": "--leading-tight",
+      "value": "1.00",
+      "type": "number",
+      "layer": "A1-structure",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --leading-tight; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:80"
+      ],
+      "sourceName": "--leading-tight"
+    },
+    {
+      "name": "--tracking-display",
+      "value": "-0.02em",
+      "type": "dimension",
+      "layer": "A1-structure",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --tracking-display; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:81"
+      ],
+      "sourceName": "--tracking-display"
+    },
+    {
+      "name": "--space-1",
+      "value": "4px",
+      "type": "dimension",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --space-1; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:84"
+      ],
+      "sourceName": "--space-1"
+    },
+    {
+      "name": "--space-2",
+      "value": "8px",
+      "type": "dimension",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --space-2; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:85"
+      ],
+      "sourceName": "--space-2"
+    },
+    {
+      "name": "--space-3",
+      "value": "12px",
+      "type": "dimension",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --space-3; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:86"
+      ],
+      "sourceName": "--space-3"
+    },
+    {
+      "name": "--space-4",
+      "value": "16px",
+      "type": "dimension",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --space-4; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:87"
+      ],
+      "sourceName": "--space-4"
+    },
+    {
+      "name": "--space-5",
+      "value": "20px",
+      "type": "dimension",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --space-5; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:88"
+      ],
+      "sourceName": "--space-5"
+    },
+    {
+      "name": "--space-6",
+      "value": "24px",
+      "type": "dimension",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --space-6; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:89"
+      ],
+      "sourceName": "--space-6"
+    },
+    {
+      "name": "--space-8",
+      "value": "32px",
+      "type": "dimension",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --space-8; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:90"
+      ],
+      "sourceName": "--space-8"
+    },
+    {
+      "name": "--space-12",
+      "value": "48px",
+      "type": "dimension",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --space-12; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:91"
+      ],
+      "sourceName": "--space-12"
+    },
+    {
+      "name": "--section-y-desktop",
+      "value": "96px",
+      "type": "dimension",
+      "layer": "A1-structure",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --section-y-desktop; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:94"
+      ],
+      "sourceName": "--section-y-desktop"
+    },
+    {
+      "name": "--section-y-tablet",
+      "value": "64px",
+      "type": "dimension",
+      "layer": "A1-structure",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --section-y-tablet; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:95"
+      ],
+      "sourceName": "--section-y-tablet"
+    },
+    {
+      "name": "--section-y-phone",
+      "value": "40px",
+      "type": "dimension",
+      "layer": "A1-structure",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --section-y-phone; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:96"
+      ],
+      "sourceName": "--section-y-phone"
+    },
+    {
+      "name": "--radius-sm",
+      "value": "50px",
+      "type": "dimension",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --radius-sm; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:100"
+      ],
+      "sourceName": "--radius-sm"
+    },
+    {
+      "name": "--radius-md",
+      "value": "8px",
+      "type": "dimension",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --radius-md; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:101"
+      ],
+      "sourceName": "--radius-md"
+    },
+    {
+      "name": "--radius-lg",
+      "value": "8px",
+      "type": "dimension",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --radius-lg; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:102"
+      ],
+      "sourceName": "--radius-lg"
+    },
+    {
+      "name": "--radius-pill",
+      "value": "9999px",
+      "type": "dimension",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --radius-pill; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:103"
+      ],
+      "sourceName": "--radius-pill"
+    },
+    {
+      "name": "--elev-flat",
+      "value": "none",
+      "type": "shadow",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --elev-flat; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:107"
+      ],
+      "sourceName": "--elev-flat"
+    },
+    {
+      "name": "--elev-ring",
+      "value": "0 0 0 1px var(--border)",
+      "type": "shadow",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --elev-ring; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:108"
+      ],
+      "sourceName": "--elev-ring"
+    },
+    {
+      "name": "--elev-raised",
+      "value": "0 4px 16px rgba(0, 0, 0, 0.08)",
+      "type": "shadow",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --elev-raised; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:109"
+      ],
+      "sourceName": "--elev-raised"
+    },
+    {
+      "name": "--focus-ring",
+      "value": "0 0 0 2px rgba(0, 0, 0, 0.8)",
+      "type": "shadow",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --focus-ring; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:114"
+      ],
+      "sourceName": "--focus-ring"
+    },
+    {
+      "name": "--motion-fast",
+      "value": "150ms",
+      "type": "duration",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --motion-fast; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:117"
+      ],
+      "sourceName": "--motion-fast"
+    },
+    {
+      "name": "--motion-base",
+      "value": "200ms",
+      "type": "duration",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --motion-base; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:118"
+      ],
+      "sourceName": "--motion-base"
+    },
+    {
+      "name": "--ease-standard",
+      "value": "cubic-bezier(0.2, 0, 0, 1)",
+      "type": "cubicBezier",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --ease-standard; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:119"
+      ],
+      "sourceName": "--ease-standard"
+    },
+    {
+      "name": "--container-max",
+      "value": "1920px",
+      "type": "dimension",
+      "layer": "A1-structure",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --container-max; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:122"
+      ],
+      "sourceName": "--container-max"
+    },
+    {
+      "name": "--container-gutter-desktop",
+      "value": "40px",
+      "type": "dimension",
+      "layer": "A1-structure",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --container-gutter-desktop; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:123"
+      ],
+      "sourceName": "--container-gutter-desktop"
+    },
+    {
+      "name": "--container-gutter-tablet",
+      "value": "24px",
+      "type": "dimension",
+      "layer": "A1-structure",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --container-gutter-tablet; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:124"
+      ],
+      "sourceName": "--container-gutter-tablet"
+    },
+    {
+      "name": "--container-gutter-phone",
+      "value": "16px",
+      "type": "dimension",
+      "layer": "A1-structure",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --container-gutter-phone; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:125"
+      ],
+      "sourceName": "--container-gutter-phone"
+    }
+  ]
+}

open-design/design-systems/figma/manifest.json

@@ -0,0 +1,54 @@
+{
+  "schemaVersion": "od-design-system-project/v1",
+  "id": "figma",
+  "name": "Figma",
+  "category": "Design & Creative",
+  "description": "Bundled OpenDesign package for Figma, derived from curated DESIGN.md, tokens.css, and components.html fixtures.",
+  "source": {
+    "type": "bundled",
+    "origin": "OpenDesign curated bundled fixture"
+  },
+  "files": {
+    "design": "DESIGN.md",
+    "tokens": "tokens.css",
+    "designTokens": "design-tokens.json",
+    "tailwind": "tailwind-v4.css",
+    "components": "components.html"
+  },
+  "usage": "USAGE.md",
+  "componentsManifest": "components.manifest.json",
+  "importMode": "normalized",
+  "craft": {
+    "applies": [],
+    "suggested": [
+      "color",
+      "accessibility-baseline"
+    ],
+    "exemptions": []
+  },
+  "preview": {
+    "dir": "preview",
+    "pages": [
+      {
+        "path": "preview/colors.html",
+        "role": "colors",
+        "title": "Colors"
+      },
+      {
+        "path": "preview/typography.html",
+        "role": "typography",
+        "title": "Typography"
+      },
+      {
+        "path": "preview/spacing.html",
+        "role": "spacing",
+        "title": "Spacing"
+      }
+    ]
+  },
+  "sourceFiles": {
+    "evidence": "source/evidence.md",
+    "tokens": "source/tokens.source.json",
+    "report": "source/token-contract.report.json"
+  }
+}

open-design/design-systems/figma/preview/colors.html

@@ -0,0 +1,39 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Figma colors</title>
+    <link rel="stylesheet" href="../tokens.css" />
+    <style>
+      body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); }
+      main { max-width: var(--container-max); margin: 0 auto; padding: var(--space-12) var(--space-6); }
+      h1 { margin: 0 0 var(--space-6); font-family: var(--font-display); font-size: var(--text-2xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
+
+      .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-4); }
+      .swatch { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; box-shadow: var(--elev-ring); }
+      .color { height: 88px; background: var(--value); }
+      .meta { padding: var(--space-3); color: var(--muted); font-size: var(--text-sm); }
+      strong { display: block; margin-bottom: var(--space-1); color: var(--fg); }
+
+    </style>
+  </head>
+  <body>
+    <main>
+      <h1>Color roles</h1>
+
+      <section class="grid">
+        <article class="swatch" style="--value: var(--bg)"><div class="color"></div><div class="meta"><strong>Background</strong>--bg</div></article>
+        <article class="swatch" style="--value: var(--surface)"><div class="color"></div><div class="meta"><strong>Surface</strong>--surface</div></article>
+        <article class="swatch" style="--value: var(--fg)"><div class="color"></div><div class="meta"><strong>Foreground</strong>--fg</div></article>
+        <article class="swatch" style="--value: var(--muted)"><div class="color"></div><div class="meta"><strong>Muted</strong>--muted</div></article>
+        <article class="swatch" style="--value: var(--border)"><div class="color"></div><div class="meta"><strong>Border</strong>--border</div></article>
+        <article class="swatch" style="--value: var(--accent)"><div class="color"></div><div class="meta"><strong>Accent</strong>--accent</div></article>
+        <article class="swatch" style="--value: var(--success)"><div class="color"></div><div class="meta"><strong>Success</strong>--success</div></article>
+        <article class="swatch" style="--value: var(--warn)"><div class="color"></div><div class="meta"><strong>Warning</strong>--warn</div></article>
+        <article class="swatch" style="--value: var(--danger)"><div class="color"></div><div class="meta"><strong>Danger</strong>--danger</div></article>
+      </section>
+
+    </main>
+  </body>
+</html>

open-design/design-systems/figma/preview/spacing.html

@@ -0,0 +1,41 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Figma spacing</title>
+    <link rel="stylesheet" href="../tokens.css" />
+    <style>
+      body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); }
+      main { max-width: var(--container-max); margin: 0 auto; padding: var(--space-12) var(--space-6); }
+      h1 { margin: 0 0 var(--space-6); font-family: var(--font-display); font-size: var(--text-2xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
+
+      .stack { display: grid; gap: var(--space-3); margin-bottom: var(--space-8); }
+      .row { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: var(--space-4); color: var(--muted); font-size: var(--text-sm); }
+      .bar { height: var(--space-4); min-width: 2px; background: var(--accent); }
+      .radii { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-4); }
+      .radii article { min-height: 88px; display: grid; place-items: center; border: 1px solid var(--border); background: var(--surface); color: var(--fg-2); font-size: var(--text-sm); box-shadow: var(--elev-ring); }
+
+    </style>
+  </head>
+  <body>
+    <main>
+      <h1>Spacing and radius</h1>
+
+      <section class="stack">
+        <div class="row"><span>--space-2</span><div class="bar" style="width: var(--space-2)"></div></div>
+        <div class="row"><span>--space-4</span><div class="bar" style="width: var(--space-4)"></div></div>
+        <div class="row"><span>--space-6</span><div class="bar" style="width: var(--space-6)"></div></div>
+        <div class="row"><span>--space-8</span><div class="bar" style="width: var(--space-8)"></div></div>
+        <div class="row"><span>--space-12</span><div class="bar" style="width: var(--space-12)"></div></div>
+      </section>
+      <section class="radii">
+        <article style="border-radius: var(--radius-sm)">--radius-sm</article>
+        <article style="border-radius: var(--radius-md)">--radius-md</article>
+        <article style="border-radius: var(--radius-lg)">--radius-lg</article>
+        <article style="border-radius: var(--radius-pill)">--radius-pill</article>
+      </section>
+
+    </main>
+  </body>
+</html>

open-design/design-systems/figma/preview/typography.html

@@ -0,0 +1,34 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Figma typography</title>
+    <link rel="stylesheet" href="../tokens.css" />
+    <style>
+      body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); }
+      main { max-width: var(--container-max); margin: 0 auto; padding: var(--space-12) var(--space-6); }
+      h1 { margin: 0 0 var(--space-6); font-family: var(--font-display); font-size: var(--text-2xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
+
+      .type-stack { display: grid; gap: var(--space-4); max-width: 760px; }
+      .eyebrow { margin: 0; color: var(--accent); font-size: var(--text-xs); letter-spacing: var(--tracking-display); text-transform: uppercase; }
+      h2 { margin: 0; font-family: var(--font-display); font-size: var(--text-4xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
+      .lede { margin: 0; color: var(--fg-2); font-size: var(--text-lg); line-height: var(--leading-body); }
+      .body { margin: 0; color: var(--muted); font-size: var(--text-base); line-height: var(--leading-body); }
+
+    </style>
+  </head>
+  <body>
+    <main>
+      <h1>Typography</h1>
+
+      <section class="type-stack">
+        <p class="eyebrow">Design & Creative</p>
+        <h2>Display sample for Figma</h2>
+        <p class="lede">Body rhythm, heading scale, and muted metadata all resolve through the committed token contract.</p>
+        <p class="body">The preview intentionally uses only schema tokens so reviewers can confirm the package remains portable across OpenDesign artifacts.</p>
+      </section>
+
+    </main>
+  </body>
+</html>

open-design/design-systems/figma/source/evidence.md

@@ -0,0 +1,17 @@
+# Figma Source Evidence
+
+## Source Scope
+
+This Design System 2.0 backfill is derived from the curated OpenDesign bundled fixture.
+It does not claim a fresh crawl of the original upstream brand repository or website.
+
+## Included Fixture Files
+
+- design-systems/figma/DESIGN.md
+- design-systems/figma/tokens.css
+- design-systems/figma/components.html
+
+## Token Contract
+
+`source/token-contract.report.json` maps every TOKEN_SCHEMA binding back to the committed `tokens.css` declaration line.
+`design-tokens.json` and `tailwind-v4.css` are derived outputs and should be regenerated from the report and token stylesheet rather than edited by hand.

open-design/design-systems/figma/source/token-contract.report.json

@@ -0,0 +1,641 @@
+{
+  "schemaVersion": 1,
+  "contract": "TOKEN_SCHEMA",
+  "generatedAt": "2026-06-06T00:00:00.000Z",
+  "sourceScope": "open-design-bundled-fixture",
+  "summary": {
+    "totalTokens": 56,
+    "declaredTokens": 56,
+    "sourceBackedTokens": 56,
+    "sourceBackedA1": 26,
+    "fallbackTokens": 26,
+    "aliasTokens": 1,
+    "layerCounts": {
+      "A1-identity": 8,
+      "B-slot": 4,
+      "A2": 26,
+      "A1-structure": 18
+    },
+    "score": 100,
+    "grade": "excellent",
+    "recommendRebuild": false
+  },
+  "tokens": [
+    {
+      "name": "--bg",
+      "layer": "A1-identity",
+      "value": "#ffffff",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --bg; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:32"
+      ],
+      "sourceName": "--bg"
+    },
+    {
+      "name": "--surface",
+      "layer": "A1-identity",
+      "value": "#ffffff",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --surface; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:33"
+      ],
+      "sourceName": "--surface"
+    },
+    {
+      "name": "--surface-warm",
+      "layer": "B-slot",
+      "value": "var(--surface)",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --surface-warm; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:34"
+      ],
+      "sourceName": "--surface-warm"
+    },
+    {
+      "name": "--fg",
+      "layer": "A1-identity",
+      "value": "#000000",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --fg; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:37"
+      ],
+      "sourceName": "--fg"
+    },
+    {
+      "name": "--fg-2",
+      "layer": "B-slot",
+      "value": "#000000",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --fg-2; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:38"
+      ],
+      "sourceName": "--fg-2"
+    },
+    {
+      "name": "--muted",
+      "layer": "A1-identity",
+      "value": "rgba(0, 0, 0, 0.55)",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --muted; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:39"
+      ],
+      "sourceName": "--muted"
+    },
+    {
+      "name": "--meta",
+      "layer": "B-slot",
+      "value": "rgba(0, 0, 0, 0.40)",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --meta; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:40"
+      ],
+      "sourceName": "--meta"
+    },
+    {
+      "name": "--border",
+      "layer": "A1-identity",
+      "value": "rgba(0, 0, 0, 0.12)",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --border; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:43"
+      ],
+      "sourceName": "--border"
+    },
+    {
+      "name": "--border-soft",
+      "layer": "B-slot",
+      "value": "rgba(0, 0, 0, 0.06)",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --border-soft; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:44"
+      ],
+      "sourceName": "--border-soft"
+    },
+    {
+      "name": "--accent",
+      "layer": "A1-identity",
+      "value": "#000000",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --accent; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:48"
+      ],
+      "sourceName": "--accent"
+    },
+    {
+      "name": "--accent-on",
+      "layer": "A2",
+      "value": "#ffffff",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --accent-on; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:49"
+      ],
+      "sourceName": "--accent-on"
+    },
+    {
+      "name": "--accent-hover",
+      "layer": "A2",
+      "value": "rgba(0, 0, 0, 0.85)",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --accent-hover; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:50"
+      ],
+      "sourceName": "--accent-hover"
+    },
+    {
+      "name": "--accent-active",
+      "layer": "A2",
+      "value": "rgba(0, 0, 0, 0.08)",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --accent-active; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:51"
+      ],
+      "sourceName": "--accent-active"
+    },
+    {
+      "name": "--success",
+      "layer": "A2",
+      "value": "#16a34a",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --success; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:54"
+      ],
+      "sourceName": "--success"
+    },
+    {
+      "name": "--warn",
+      "layer": "A2",
+      "value": "#eab308",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --warn; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:55"
+      ],
+      "sourceName": "--warn"
+    },
+    {
+      "name": "--danger",
+      "layer": "A2",
+      "value": "#dc2626",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --danger; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:56"
+      ],
+      "sourceName": "--danger"
+    },
+    {
+      "name": "--font-display",
+      "layer": "A1-identity",
+      "value": "\"figmaSans\", \"figmaSans Fallback\", \"SF Pro Display\", system-ui, Helvetica, sans-serif",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --font-display; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:59"
+      ],
+      "sourceName": "--font-display"
+    },
+    {
+      "name": "--font-body",
+      "layer": "A1-identity",
+      "value": "\"figmaSans\", \"figmaSans Fallback\", \"SF Pro Display\", system-ui, Helvetica, sans-serif",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --font-body; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:60"
+      ],
+      "sourceName": "--font-body"
+    },
+    {
+      "name": "--font-mono",
+      "layer": "A2",
+      "value": "\"figmaMono\", \"figmaMono Fallback\", \"SF Mono\", Menlo, ui-monospace, monospace",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --font-mono; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:61"
+      ],
+      "sourceName": "--font-mono"
+    },
+    {
+      "name": "--text-xs",
+      "layer": "A1-structure",
+      "value": "12px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --text-xs; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:66"
+      ],
+      "sourceName": "--text-xs"
+    },
+    {
+      "name": "--text-sm",
+      "layer": "A1-structure",
+      "value": "16px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --text-sm; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:67"
+      ],
+      "sourceName": "--text-sm"
+    },
+    {
+      "name": "--text-base",
+      "layer": "A1-structure",
+      "value": "16px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --text-base; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:68"
+      ],
+      "sourceName": "--text-base"
+    },
+    {
+      "name": "--text-lg",
+      "layer": "A1-structure",
+      "value": "20px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --text-lg; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:69"
+      ],
+      "sourceName": "--text-lg"
+    },
+    {
+      "name": "--text-xl",
+      "layer": "A1-structure",
+      "value": "26px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --text-xl; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:70"
+      ],
+      "sourceName": "--text-xl"
+    },
+    {
+      "name": "--text-2xl",
+      "layer": "A1-structure",
+      "value": "26px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --text-2xl; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:71"
+      ],
+      "sourceName": "--text-2xl"
+    },
+    {
+      "name": "--text-3xl",
+      "layer": "A1-structure",
+      "value": "64px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --text-3xl; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:72"
+      ],
+      "sourceName": "--text-3xl"
+    },
+    {
+      "name": "--text-4xl",
+      "layer": "A1-structure",
+      "value": "86px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --text-4xl; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:73"
+      ],
+      "sourceName": "--text-4xl"
+    },
+    {
+      "name": "--leading-body",
+      "layer": "A1-structure",
+      "value": "1.40",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --leading-body; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:79"
+      ],
+      "sourceName": "--leading-body"
+    },
+    {
+      "name": "--leading-tight",
+      "layer": "A1-structure",
+      "value": "1.00",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --leading-tight; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:80"
+      ],
+      "sourceName": "--leading-tight"
+    },
+    {
+      "name": "--tracking-display",
+      "layer": "A1-structure",
+      "value": "-0.02em",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --tracking-display; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:81"
+      ],
+      "sourceName": "--tracking-display"
+    },
+    {
+      "name": "--space-1",
+      "layer": "A2",
+      "value": "4px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --space-1; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:84"
+      ],
+      "sourceName": "--space-1"
+    },
+    {
+      "name": "--space-2",
+      "layer": "A2",
+      "value": "8px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --space-2; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:85"
+      ],
+      "sourceName": "--space-2"
+    },
+    {
+      "name": "--space-3",
+      "layer": "A2",
+      "value": "12px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --space-3; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:86"
+      ],
+      "sourceName": "--space-3"
+    },
+    {
+      "name": "--space-4",
+      "layer": "A2",
+      "value": "16px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --space-4; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:87"
+      ],
+      "sourceName": "--space-4"
+    },
+    {
+      "name": "--space-5",
+      "layer": "A2",
+      "value": "20px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --space-5; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:88"
+      ],
+      "sourceName": "--space-5"
+    },
+    {
+      "name": "--space-6",
+      "layer": "A2",
+      "value": "24px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --space-6; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:89"
+      ],
+      "sourceName": "--space-6"
+    },
+    {
+      "name": "--space-8",
+      "layer": "A2",
+      "value": "32px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --space-8; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:90"
+      ],
+      "sourceName": "--space-8"
+    },
+    {
+      "name": "--space-12",
+      "layer": "A2",
+      "value": "48px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --space-12; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:91"
+      ],
+      "sourceName": "--space-12"
+    },
+    {
+      "name": "--section-y-desktop",
+      "layer": "A1-structure",
+      "value": "96px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --section-y-desktop; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:94"
+      ],
+      "sourceName": "--section-y-desktop"
+    },
+    {
+      "name": "--section-y-tablet",
+      "layer": "A1-structure",
+      "value": "64px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --section-y-tablet; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:95"
+      ],
+      "sourceName": "--section-y-tablet"
+    },
+    {
+      "name": "--section-y-phone",
+      "layer": "A1-structure",
+      "value": "40px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --section-y-phone; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:96"
+      ],
+      "sourceName": "--section-y-phone"
+    },
+    {
+      "name": "--radius-sm",
+      "layer": "A2",
+      "value": "50px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --radius-sm; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:100"
+      ],
+      "sourceName": "--radius-sm"
+    },
+    {
+      "name": "--radius-md",
+      "layer": "A2",
+      "value": "8px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --radius-md; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:101"
+      ],
+      "sourceName": "--radius-md"
+    },
+    {
+      "name": "--radius-lg",
+      "layer": "A2",
+      "value": "8px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --radius-lg; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:102"
+      ],
+      "sourceName": "--radius-lg"
+    },
+    {
+      "name": "--radius-pill",
+      "layer": "A2",
+      "value": "9999px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --radius-pill; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:103"
+      ],
+      "sourceName": "--radius-pill"
+    },
+    {
+      "name": "--elev-flat",
+      "layer": "A2",
+      "value": "none",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --elev-flat; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:107"
+      ],
+      "sourceName": "--elev-flat"
+    },
+    {
+      "name": "--elev-ring",
+      "layer": "A2",
+      "value": "0 0 0 1px var(--border)",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --elev-ring; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:108"
+      ],
+      "sourceName": "--elev-ring"
+    },
+    {
+      "name": "--elev-raised",
+      "layer": "A2",
+      "value": "0 4px 16px rgba(0, 0, 0, 0.08)",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --elev-raised; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:109"
+      ],
+      "sourceName": "--elev-raised"
+    },
+    {
+      "name": "--focus-ring",
+      "layer": "A2",
+      "value": "0 0 0 2px rgba(0, 0, 0, 0.8)",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --focus-ring; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:114"
+      ],
+      "sourceName": "--focus-ring"
+    },
+    {
+      "name": "--motion-fast",
+      "layer": "A2",
+      "value": "150ms",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --motion-fast; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:117"
+      ],
+      "sourceName": "--motion-fast"
+    },
+    {
+      "name": "--motion-base",
+      "layer": "A2",
+      "value": "200ms",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --motion-base; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:118"
+      ],
+      "sourceName": "--motion-base"
+    },
+    {
+      "name": "--ease-standard",
+      "layer": "A2",
+      "value": "cubic-bezier(0.2, 0, 0, 1)",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --ease-standard; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:119"
+      ],
+      "sourceName": "--ease-standard"
+    },
+    {
+      "name": "--container-max",
+      "layer": "A1-structure",
+      "value": "1920px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --container-max; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:122"
+      ],
+      "sourceName": "--container-max"
+    },
+    {
+      "name": "--container-gutter-desktop",
+      "layer": "A1-structure",
+      "value": "40px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --container-gutter-desktop; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:123"
+      ],
+      "sourceName": "--container-gutter-desktop"
+    },
+    {
+      "name": "--container-gutter-tablet",
+      "layer": "A1-structure",
+      "value": "24px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --container-gutter-tablet; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:124"
+      ],
+      "sourceName": "--container-gutter-tablet"
+    },
+    {
+      "name": "--container-gutter-phone",
+      "layer": "A1-structure",
+      "value": "16px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --container-gutter-phone; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:125"
+      ],
+      "sourceName": "--container-gutter-phone"
+    }
+  ]
+}

open-design/design-systems/figma/source/tokens.source.json

@@ -0,0 +1,349 @@
+{
+  "schemaVersion": 1,
+  "sourceScope": "open-design-bundled-fixture",
+  "brandId": "figma",
+  "files": [
+    "DESIGN.md",
+    "tokens.css",
+    "components.html"
+  ],
+  "generatedAt": "2026-06-06T00:00:00.000Z",
+  "tokens": [
+    {
+      "name": "--bg",
+      "value": "#ffffff",
+      "layer": "A1-identity",
+      "source": "tokens.css:32"
+    },
+    {
+      "name": "--surface",
+      "value": "#ffffff",
+      "layer": "A1-identity",
+      "source": "tokens.css:33"
+    },
+    {
+      "name": "--surface-warm",
+      "value": "var(--surface)",
+      "layer": "B-slot",
+      "source": "tokens.css:34"
+    },
+    {
+      "name": "--fg",
+      "value": "#000000",
+      "layer": "A1-identity",
+      "source": "tokens.css:37"
+    },
+    {
+      "name": "--fg-2",
+      "value": "#000000",
+      "layer": "B-slot",
+      "source": "tokens.css:38"
+    },
+    {
+      "name": "--muted",
+      "value": "rgba(0, 0, 0, 0.55)",
+      "layer": "A1-identity",
+      "source": "tokens.css:39"
+    },
+    {
+      "name": "--meta",
+      "value": "rgba(0, 0, 0, 0.40)",
+      "layer": "B-slot",
+      "source": "tokens.css:40"
+    },
+    {
+      "name": "--border",
+      "value": "rgba(0, 0, 0, 0.12)",
+      "layer": "A1-identity",
+      "source": "tokens.css:43"
+    },
+    {
+      "name": "--border-soft",
+      "value": "rgba(0, 0, 0, 0.06)",
+      "layer": "B-slot",
+      "source": "tokens.css:44"
+    },
+    {
+      "name": "--accent",
+      "value": "#000000",
+      "layer": "A1-identity",
+      "source": "tokens.css:48"
+    },
+    {
+      "name": "--accent-on",
+      "value": "#ffffff",
+      "layer": "A2",
+      "source": "tokens.css:49"
+    },
+    {
+      "name": "--accent-hover",
+      "value": "rgba(0, 0, 0, 0.85)",
+      "layer": "A2",
+      "source": "tokens.css:50"
+    },
+    {
+      "name": "--accent-active",
+      "value": "rgba(0, 0, 0, 0.08)",
+      "layer": "A2",
+      "source": "tokens.css:51"
+    },
+    {
+      "name": "--success",
+      "value": "#16a34a",
+      "layer": "A2",
+      "source": "tokens.css:54"
+    },
+    {
+      "name": "--warn",
+      "value": "#eab308",
+      "layer": "A2",
+      "source": "tokens.css:55"
+    },
+    {
+      "name": "--danger",
+      "value": "#dc2626",
+      "layer": "A2",
+      "source": "tokens.css:56"
+    },
+    {
+      "name": "--font-display",
+      "value": "\"figmaSans\", \"figmaSans Fallback\", \"SF Pro Display\", system-ui, Helvetica, sans-serif",
+      "layer": "A1-identity",
+      "source": "tokens.css:59"
+    },
+    {
+      "name": "--font-body",
+      "value": "\"figmaSans\", \"figmaSans Fallback\", \"SF Pro Display\", system-ui, Helvetica, sans-serif",
+      "layer": "A1-identity",
+      "source": "tokens.css:60"
+    },
+    {
+      "name": "--font-mono",
+      "value": "\"figmaMono\", \"figmaMono Fallback\", \"SF Mono\", Menlo, ui-monospace, monospace",
+      "layer": "A2",
+      "source": "tokens.css:61"
+    },
+    {
+      "name": "--text-xs",
+      "value": "12px",
+      "layer": "A1-structure",
+      "source": "tokens.css:66"
+    },
+    {
+      "name": "--text-sm",
+      "value": "16px",
+      "layer": "A1-structure",
+      "source": "tokens.css:67"
+    },
+    {
+      "name": "--text-base",
+      "value": "16px",
+      "layer": "A1-structure",
+      "source": "tokens.css:68"
+    },
+    {
+      "name": "--text-lg",
+      "value": "20px",
+      "layer": "A1-structure",
+      "source": "tokens.css:69"
+    },
+    {
+      "name": "--text-xl",
+      "value": "26px",
+      "layer": "A1-structure",
+      "source": "tokens.css:70"
+    },
+    {
+      "name": "--text-2xl",
+      "value": "26px",
+      "layer": "A1-structure",
+      "source": "tokens.css:71"
+    },
+    {
+      "name": "--text-3xl",
+      "value": "64px",
+      "layer": "A1-structure",
+      "source": "tokens.css:72"
+    },
+    {
+      "name": "--text-4xl",
+      "value": "86px",
+      "layer": "A1-structure",
+      "source": "tokens.css:73"
+    },
+    {
+      "name": "--leading-body",
+      "value": "1.40",
+      "layer": "A1-structure",
+      "source": "tokens.css:79"
+    },
+    {
+      "name": "--leading-tight",
+      "value": "1.00",
+      "layer": "A1-structure",
+      "source": "tokens.css:80"
+    },
+    {
+      "name": "--tracking-display",
+      "value": "-0.02em",
+      "layer": "A1-structure",
+      "source": "tokens.css:81"
+    },
+    {
+      "name": "--space-1",
+      "value": "4px",
+      "layer": "A2",
+      "source": "tokens.css:84"
+    },
+    {
+      "name": "--space-2",
+      "value": "8px",
+      "layer": "A2",
+      "source": "tokens.css:85"
+    },
+    {
+      "name": "--space-3",
+      "value": "12px",
+      "layer": "A2",
+      "source": "tokens.css:86"
+    },
+    {
+      "name": "--space-4",
+      "value": "16px",
+      "layer": "A2",
+      "source": "tokens.css:87"
+    },
+    {
+      "name": "--space-5",
+      "value": "20px",
+      "layer": "A2",
+      "source": "tokens.css:88"
+    },
+    {
+      "name": "--space-6",
+      "value": "24px",
+      "layer": "A2",
+      "source": "tokens.css:89"
+    },
+    {
+      "name": "--space-8",
+      "value": "32px",
+      "layer": "A2",
+      "source": "tokens.css:90"
+    },
+    {
+      "name": "--space-12",
+      "value": "48px",
+      "layer": "A2",
+      "source": "tokens.css:91"
+    },
+    {
+      "name": "--section-y-desktop",
+      "value": "96px",
+      "layer": "A1-structure",
+      "source": "tokens.css:94"
+    },
+    {
+      "name": "--section-y-tablet",
+      "value": "64px",
+      "layer": "A1-structure",
+      "source": "tokens.css:95"
+    },
+    {
+      "name": "--section-y-phone",
+      "value": "40px",
+      "layer": "A1-structure",
+      "source": "tokens.css:96"
+    },
+    {
+      "name": "--radius-sm",
+      "value": "50px",
+      "layer": "A2",
+      "source": "tokens.css:100"
+    },
+    {
+      "name": "--radius-md",
+      "value": "8px",
+      "layer": "A2",
+      "source": "tokens.css:101"
+    },
+    {
+      "name": "--radius-lg",
+      "value": "8px",
+      "layer": "A2",
+      "source": "tokens.css:102"
+    },
+    {
+      "name": "--radius-pill",
+      "value": "9999px",
+      "layer": "A2",
+      "source": "tokens.css:103"
+    },
+    {
+      "name": "--elev-flat",
+      "value": "none",
+      "layer": "A2",
+      "source": "tokens.css:107"
+    },
+    {
+      "name": "--elev-ring",
+      "value": "0 0 0 1px var(--border)",
+      "layer": "A2",
+      "source": "tokens.css:108"
+    },
+    {
+      "name": "--elev-raised",
+      "value": "0 4px 16px rgba(0, 0, 0, 0.08)",
+      "layer": "A2",
+      "source": "tokens.css:109"
+    },
+    {
+      "name": "--focus-ring",
+      "value": "0 0 0 2px rgba(0, 0, 0, 0.8)",
+      "layer": "A2",
+      "source": "tokens.css:114"
+    },
+    {
+      "name": "--motion-fast",
+      "value": "150ms",
+      "layer": "A2",
+      "source": "tokens.css:117"
+    },
+    {
+      "name": "--motion-base",
+      "value": "200ms",
+      "layer": "A2",
+      "source": "tokens.css:118"
+    },
+    {
+      "name": "--ease-standard",
+      "value": "cubic-bezier(0.2, 0, 0, 1)",
+      "layer": "A2",
+      "source": "tokens.css:119"
+    },
+    {
+      "name": "--container-max",
+      "value": "1920px",
+      "layer": "A1-structure",
+      "source": "tokens.css:122"
+    },
+    {
+      "name": "--container-gutter-desktop",
+      "value": "40px",
+      "layer": "A1-structure",
+      "source": "tokens.css:123"
+    },
+    {
+      "name": "--container-gutter-tablet",
+      "value": "24px",
+      "layer": "A1-structure",
+      "source": "tokens.css:124"
+    },
+    {
+      "name": "--container-gutter-phone",
+      "value": "16px",
+      "layer": "A1-structure",
+      "source": "tokens.css:125"
+    }
+  ]
+}

open-design/design-systems/figma/system/artifacts/deck.html

@@ -0,0 +1,137 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Figma - Pitch deck</title>
+  <style>
+:root {
+    --accent: #000000;
+    --accent-active: rgba(0, 0, 0, 0.08);
+    --accent-hover: rgba(0, 0, 0, 0.85);
+    --accent-on: #ffffff;
+    --bg: #ffffff;
+    --border: rgba(0, 0, 0, 0.12);
+    --border-soft: rgba(0, 0, 0, 0.06);
+    --container-gutter-desktop: 40px;
+    --container-gutter-phone: 16px;
+    --container-gutter-tablet: 24px;
+    --container-max: 1920px;
+    --danger: #dc2626;
+    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+    --elev-flat: none;
+    --elev-raised: 0 4px 16px rgba(0, 0, 0, 0.08);
+    --elev-ring: 0 0 0 1px var(--border);
+    --fg: #000000;
+    --fg-2: #000000;
+    --focus-ring: 0 0 0 2px rgba(0, 0, 0, 0.8);
+    --font-body: "figmaSans", "figmaSans Fallback", "SF Pro Display", system-ui, Helvetica, sans-serif;
+    --font-display: "figmaSans", "figmaSans Fallback", "SF Pro Display", system-ui, Helvetica, sans-serif;
+    --font-mono: "figmaMono", "figmaMono Fallback", "SF Mono", Menlo, ui-monospace, monospace;
+    --leading-body: 1.40;
+    --leading-tight: 1.00;
+    --meta: rgba(0, 0, 0, 0.40);
+    --motion-base: 200ms;
+    --motion-fast: 150ms;
+    --muted: rgba(0, 0, 0, 0.55);
+    --radius-lg: 8px;
+    --radius-md: 8px;
+    --radius-pill: 9999px;
+    --radius-sm: 50px;
+    --section-y-desktop: 96px;
+    --section-y-phone: 40px;
+    --section-y-tablet: 64px;
+    --space-1: 4px;
+    --space-12: 48px;
+    --space-2: 8px;
+    --space-3: 12px;
+    --space-4: 16px;
+    --space-5: 20px;
+    --space-6: 24px;
+    --space-8: 32px;
+    --success: #16a34a;
+    --surface: #ffffff;
+    --surface-warm: var(--surface);
+    --text-2xl: 26px;
+    --text-3xl: 64px;
+    --text-4xl: 86px;
+    --text-base: 16px;
+    --text-lg: 20px;
+    --text-sm: 16px;
+    --text-xl: 26px;
+    --text-xs: 12px;
+    --tracking-display: -0.02em;
+    --warn: #eab308;
+}
+:root {
+  --od-page-bg: #ffffff;
+  --od-surface: #ffffff;
+  --od-text: #000000;
+  --od-muted: rgba(0, 0, 0, 0.55);
+  --od-border: rgba(0, 0, 0, 0.12);
+  --od-accent: #000000;
+  --od-radius: 8px;
+  --od-font-body: "figmaSans", "figmaSans Fallback", "SF Pro Display", system-ui, Helvetica, sans-serif;
+  --od-font-display: "figmaSans", "figmaSans Fallback", "SF Pro Display", system-ui, Helvetica, sans-serif;
+}
+* { box-sizing: border-box; }
+body {
+  margin: 0;
+  min-height: 100vh;
+  background: var(--od-page-bg);
+  color: var(--od-text);
+  font-family: var(--od-font-body);
+  -webkit-font-smoothing: antialiased;
+}
+a { color: inherit; }
+.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
+.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
+.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
+h1, h2, h3, p { margin: 0; }
+h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
+h1 { margin-top: 12px; font-size: 64px; }
+h2 { font-size: 40px; }
+h3 { font-size: 22px; }
+.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
+.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
+.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
+.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
+.button.secondary { background: var(--od-surface); }
+.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
+.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
+.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
+.metric, .card { padding: 18px; }
+.metric strong { display: block; font-size: 30px; line-height: 1; }
+.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
+.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
+.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
+input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
+label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
+@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
+</style>
+</head>
+<body>
+  <main class="page">
+    <section class="hero">
+      <div>
+        <p class="eyebrow">Deck module</p>
+        <h1>Figma Executive deck</h1>
+        <p class="lead">Slide-scale title, metric, and section patterns for presentation work.</p>
+        <div class="actions">
+          <a class="button primary" href="#">Continue</a>
+          <a class="button secondary" href="#">View details</a>
+        </div>
+      </div>
+      <article class="panel">
+        <p class="eyebrow">Preview</p>
+        <h3>Pitch deck</h3>
+        <p class="lead" style="font-size:16px">Bundled OpenDesign package for Figma, derived from curated DESIGN.md, tokens.css, and components.html fixtures.</p>
+        <div class="card-grid" style="grid-template-columns:1fr 1fr">
+          <div class="field"><label>Primary input<input value="Figma" /></label></div>
+          <div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
+        </div>
+      </article>
+    </section>
+  </main>
+</body>
+</html>

open-design/design-systems/figma/system/artifacts/email.html

@@ -0,0 +1,137 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Figma - Email</title>
+  <style>
+:root {
+    --accent: #000000;
+    --accent-active: rgba(0, 0, 0, 0.08);
+    --accent-hover: rgba(0, 0, 0, 0.85);
+    --accent-on: #ffffff;
+    --bg: #ffffff;
+    --border: rgba(0, 0, 0, 0.12);
+    --border-soft: rgba(0, 0, 0, 0.06);
+    --container-gutter-desktop: 40px;
+    --container-gutter-phone: 16px;
+    --container-gutter-tablet: 24px;
+    --container-max: 1920px;
+    --danger: #dc2626;
+    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+    --elev-flat: none;
+    --elev-raised: 0 4px 16px rgba(0, 0, 0, 0.08);
+    --elev-ring: 0 0 0 1px var(--border);
+    --fg: #000000;
+    --fg-2: #000000;
+    --focus-ring: 0 0 0 2px rgba(0, 0, 0, 0.8);
+    --font-body: "figmaSans", "figmaSans Fallback", "SF Pro Display", system-ui, Helvetica, sans-serif;
+    --font-display: "figmaSans", "figmaSans Fallback", "SF Pro Display", system-ui, Helvetica, sans-serif;
+    --font-mono: "figmaMono", "figmaMono Fallback", "SF Mono", Menlo, ui-monospace, monospace;
+    --leading-body: 1.40;
+    --leading-tight: 1.00;
+    --meta: rgba(0, 0, 0, 0.40);
+    --motion-base: 200ms;
+    --motion-fast: 150ms;
+    --muted: rgba(0, 0, 0, 0.55);
+    --radius-lg: 8px;
+    --radius-md: 8px;
+    --radius-pill: 9999px;
+    --radius-sm: 50px;
+    --section-y-desktop: 96px;
+    --section-y-phone: 40px;
+    --section-y-tablet: 64px;
+    --space-1: 4px;
+    --space-12: 48px;
+    --space-2: 8px;
+    --space-3: 12px;
+    --space-4: 16px;
+    --space-5: 20px;
+    --space-6: 24px;
+    --space-8: 32px;
+    --success: #16a34a;
+    --surface: #ffffff;
+    --surface-warm: var(--surface);
+    --text-2xl: 26px;
+    --text-3xl: 64px;
+    --text-4xl: 86px;
+    --text-base: 16px;
+    --text-lg: 20px;
+    --text-sm: 16px;
+    --text-xl: 26px;
+    --text-xs: 12px;
+    --tracking-display: -0.02em;
+    --warn: #eab308;
+}
+:root {
+  --od-page-bg: #ffffff;
+  --od-surface: #ffffff;
+  --od-text: #000000;
+  --od-muted: rgba(0, 0, 0, 0.55);
+  --od-border: rgba(0, 0, 0, 0.12);
+  --od-accent: #000000;
+  --od-radius: 8px;
+  --od-font-body: "figmaSans", "figmaSans Fallback", "SF Pro Display", system-ui, Helvetica, sans-serif;
+  --od-font-display: "figmaSans", "figmaSans Fallback", "SF Pro Display", system-ui, Helvetica, sans-serif;
+}
+* { box-sizing: border-box; }
+body {
+  margin: 0;
+  min-height: 100vh;
+  background: var(--od-page-bg);
+  color: var(--od-text);
+  font-family: var(--od-font-body);
+  -webkit-font-smoothing: antialiased;
+}
+a { color: inherit; }
+.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
+.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
+.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
+h1, h2, h3, p { margin: 0; }
+h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
+h1 { margin-top: 12px; font-size: 64px; }
+h2 { font-size: 40px; }
+h3 { font-size: 22px; }
+.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
+.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
+.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
+.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
+.button.secondary { background: var(--od-surface); }
+.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
+.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
+.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
+.metric, .card { padding: 18px; }
+.metric strong { display: block; font-size: 30px; line-height: 1; }
+.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
+.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
+.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
+input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
+label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
+@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
+</style>
+</head>
+<body>
+  <main class="page">
+    <section class="hero">
+      <div>
+        <p class="eyebrow">Email module</p>
+        <h1>Figma Email module</h1>
+        <p class="lead">Transactional header, body copy, and primary call-to-action treatment.</p>
+        <div class="actions">
+          <a class="button primary" href="#">Continue</a>
+          <a class="button secondary" href="#">View details</a>
+        </div>
+      </div>
+      <article class="panel">
+        <p class="eyebrow">Preview</p>
+        <h3>Email</h3>
+        <p class="lead" style="font-size:16px">Bundled OpenDesign package for Figma, derived from curated DESIGN.md, tokens.css, and components.html fixtures.</p>
+        <div class="card-grid" style="grid-template-columns:1fr 1fr">
+          <div class="field"><label>Primary input<input value="Figma" /></label></div>
+          <div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
+        </div>
+      </article>
+    </section>
+  </main>
+</body>
+</html>

open-design/design-systems/figma/system/artifacts/form.html

@@ -0,0 +1,137 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Figma - Form page</title>
+  <style>
+:root {
+    --accent: #000000;
+    --accent-active: rgba(0, 0, 0, 0.08);
+    --accent-hover: rgba(0, 0, 0, 0.85);
+    --accent-on: #ffffff;
+    --bg: #ffffff;
+    --border: rgba(0, 0, 0, 0.12);
+    --border-soft: rgba(0, 0, 0, 0.06);
+    --container-gutter-desktop: 40px;
+    --container-gutter-phone: 16px;
+    --container-gutter-tablet: 24px;
+    --container-max: 1920px;
+    --danger: #dc2626;
+    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+    --elev-flat: none;
+    --elev-raised: 0 4px 16px rgba(0, 0, 0, 0.08);
+    --elev-ring: 0 0 0 1px var(--border);
+    --fg: #000000;
+    --fg-2: #000000;
+    --focus-ring: 0 0 0 2px rgba(0, 0, 0, 0.8);
+    --font-body: "figmaSans", "figmaSans Fallback", "SF Pro Display", system-ui, Helvetica, sans-serif;
+    --font-display: "figmaSans", "figmaSans Fallback", "SF Pro Display", system-ui, Helvetica, sans-serif;
+    --font-mono: "figmaMono", "figmaMono Fallback", "SF Mono", Menlo, ui-monospace, monospace;
+    --leading-body: 1.40;
+    --leading-tight: 1.00;
+    --meta: rgba(0, 0, 0, 0.40);
+    --motion-base: 200ms;
+    --motion-fast: 150ms;
+    --muted: rgba(0, 0, 0, 0.55);
+    --radius-lg: 8px;
+    --radius-md: 8px;
+    --radius-pill: 9999px;
+    --radius-sm: 50px;
+    --section-y-desktop: 96px;
+    --section-y-phone: 40px;
+    --section-y-tablet: 64px;
+    --space-1: 4px;
+    --space-12: 48px;
+    --space-2: 8px;
+    --space-3: 12px;
+    --space-4: 16px;
+    --space-5: 20px;
+    --space-6: 24px;
+    --space-8: 32px;
+    --success: #16a34a;
+    --surface: #ffffff;
+    --surface-warm: var(--surface);
+    --text-2xl: 26px;
+    --text-3xl: 64px;
+    --text-4xl: 86px;
+    --text-base: 16px;
+    --text-lg: 20px;
+    --text-sm: 16px;
+    --text-xl: 26px;
+    --text-xs: 12px;
+    --tracking-display: -0.02em;
+    --warn: #eab308;
+}
+:root {
+  --od-page-bg: #ffffff;
+  --od-surface: #ffffff;
+  --od-text: #000000;
+  --od-muted: rgba(0, 0, 0, 0.55);
+  --od-border: rgba(0, 0, 0, 0.12);
+  --od-accent: #000000;
+  --od-radius: 8px;
+  --od-font-body: "figmaSans", "figmaSans Fallback", "SF Pro Display", system-ui, Helvetica, sans-serif;
+  --od-font-display: "figmaSans", "figmaSans Fallback", "SF Pro Display", system-ui, Helvetica, sans-serif;
+}
+* { box-sizing: border-box; }
+body {
+  margin: 0;
+  min-height: 100vh;
+  background: var(--od-page-bg);
+  color: var(--od-text);
+  font-family: var(--od-font-body);
+  -webkit-font-smoothing: antialiased;
+}
+a { color: inherit; }
+.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
+.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
+.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
+h1, h2, h3, p { margin: 0; }
+h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
+h1 { margin-top: 12px; font-size: 64px; }
+h2 { font-size: 40px; }
+h3 { font-size: 22px; }
+.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
+.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
+.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
+.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
+.button.secondary { background: var(--od-surface); }
+.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
+.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
+.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
+.metric, .card { padding: 18px; }
+.metric strong { display: block; font-size: 30px; line-height: 1; }
+.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
+.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
+.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
+input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
+label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
+@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
+</style>
+</head>
+<body>
+  <main class="page">
+    <section class="hero">
+      <div>
+        <p class="eyebrow">Form module</p>
+        <h1>Figma Capture form</h1>
+        <p class="lead">Input, selection, helper text, and submission states in one focused page.</p>
+        <div class="actions">
+          <a class="button primary" href="#">Continue</a>
+          <a class="button secondary" href="#">View details</a>
+        </div>
+      </div>
+      <article class="panel">
+        <p class="eyebrow">Preview</p>
+        <h3>Form page</h3>
+        <p class="lead" style="font-size:16px">Bundled OpenDesign package for Figma, derived from curated DESIGN.md, tokens.css, and components.html fixtures.</p>
+        <div class="card-grid" style="grid-template-columns:1fr 1fr">
+          <div class="field"><label>Primary input<input value="Figma" /></label></div>
+          <div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
+        </div>
+      </article>
+    </section>
+  </main>
+</body>
+</html>

open-design/design-systems/figma/system/artifacts/landing.html

@@ -0,0 +1,137 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Figma - Landing page</title>
+  <style>
+:root {
+    --accent: #000000;
+    --accent-active: rgba(0, 0, 0, 0.08);
+    --accent-hover: rgba(0, 0, 0, 0.85);
+    --accent-on: #ffffff;
+    --bg: #ffffff;
+    --border: rgba(0, 0, 0, 0.12);
+    --border-soft: rgba(0, 0, 0, 0.06);
+    --container-gutter-desktop: 40px;
+    --container-gutter-phone: 16px;
+    --container-gutter-tablet: 24px;
+    --container-max: 1920px;
+    --danger: #dc2626;
+    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+    --elev-flat: none;
+    --elev-raised: 0 4px 16px rgba(0, 0, 0, 0.08);
+    --elev-ring: 0 0 0 1px var(--border);
+    --fg: #000000;
+    --fg-2: #000000;
+    --focus-ring: 0 0 0 2px rgba(0, 0, 0, 0.8);
+    --font-body: "figmaSans", "figmaSans Fallback", "SF Pro Display", system-ui, Helvetica, sans-serif;
+    --font-display: "figmaSans", "figmaSans Fallback", "SF Pro Display", system-ui, Helvetica, sans-serif;
+    --font-mono: "figmaMono", "figmaMono Fallback", "SF Mono", Menlo, ui-monospace, monospace;
+    --leading-body: 1.40;
+    --leading-tight: 1.00;
+    --meta: rgba(0, 0, 0, 0.40);
+    --motion-base: 200ms;
+    --motion-fast: 150ms;
+    --muted: rgba(0, 0, 0, 0.55);
+    --radius-lg: 8px;
+    --radius-md: 8px;
+    --radius-pill: 9999px;
+    --radius-sm: 50px;
+    --section-y-desktop: 96px;
+    --section-y-phone: 40px;
+    --section-y-tablet: 64px;
+    --space-1: 4px;
+    --space-12: 48px;
+    --space-2: 8px;
+    --space-3: 12px;
+    --space-4: 16px;
+    --space-5: 20px;
+    --space-6: 24px;
+    --space-8: 32px;
+    --success: #16a34a;
+    --surface: #ffffff;
+    --surface-warm: var(--surface);
+    --text-2xl: 26px;
+    --text-3xl: 64px;
+    --text-4xl: 86px;
+    --text-base: 16px;
+    --text-lg: 20px;
+    --text-sm: 16px;
+    --text-xl: 26px;
+    --text-xs: 12px;
+    --tracking-display: -0.02em;
+    --warn: #eab308;
+}
+:root {
+  --od-page-bg: #ffffff;
+  --od-surface: #ffffff;
+  --od-text: #000000;
+  --od-muted: rgba(0, 0, 0, 0.55);
+  --od-border: rgba(0, 0, 0, 0.12);
+  --od-accent: #000000;
+  --od-radius: 8px;
+  --od-font-body: "figmaSans", "figmaSans Fallback", "SF Pro Display", system-ui, Helvetica, sans-serif;
+  --od-font-display: "figmaSans", "figmaSans Fallback", "SF Pro Display", system-ui, Helvetica, sans-serif;
+}
+* { box-sizing: border-box; }
+body {
+  margin: 0;
+  min-height: 100vh;
+  background: var(--od-page-bg);
+  color: var(--od-text);
+  font-family: var(--od-font-body);
+  -webkit-font-smoothing: antialiased;
+}
+a { color: inherit; }
+.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
+.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
+.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
+h1, h2, h3, p { margin: 0; }
+h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
+h1 { margin-top: 12px; font-size: 64px; }
+h2 { font-size: 40px; }
+h3 { font-size: 22px; }
+.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
+.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
+.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
+.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
+.button.secondary { background: var(--od-surface); }
+.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
+.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
+.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
+.metric, .card { padding: 18px; }
+.metric strong { display: block; font-size: 30px; line-height: 1; }
+.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
+.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
+.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
+input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
+label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
+@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
+</style>
+</head>
+<body>
+  <main class="page">
+    <section class="hero">
+      <div>
+        <p class="eyebrow">Landing module</p>
+        <h1>Figma Launch narrative</h1>
+        <p class="lead">Hero, proof points, and conversion actions composed from the design system tokens.</p>
+        <div class="actions">
+          <a class="button primary" href="#">Continue</a>
+          <a class="button secondary" href="#">View details</a>
+        </div>
+      </div>
+      <article class="panel">
+        <p class="eyebrow">Preview</p>
+        <h3>Landing page</h3>
+        <p class="lead" style="font-size:16px">Bundled OpenDesign package for Figma, derived from curated DESIGN.md, tokens.css, and components.html fixtures.</p>
+        <div class="card-grid" style="grid-template-columns:1fr 1fr">
+          <div class="field"><label>Primary input<input value="Figma" /></label></div>
+          <div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
+        </div>
+      </article>
+    </section>
+  </main>
+</body>
+</html>

open-design/design-systems/figma/system/artifacts/newsletter.html

@@ -0,0 +1,137 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Figma - Newsletter</title>
+  <style>
+:root {
+    --accent: #000000;
+    --accent-active: rgba(0, 0, 0, 0.08);
+    --accent-hover: rgba(0, 0, 0, 0.85);
+    --accent-on: #ffffff;
+    --bg: #ffffff;
+    --border: rgba(0, 0, 0, 0.12);
+    --border-soft: rgba(0, 0, 0, 0.06);
+    --container-gutter-desktop: 40px;
+    --container-gutter-phone: 16px;
+    --container-gutter-tablet: 24px;
+    --container-max: 1920px;
+    --danger: #dc2626;
+    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+    --elev-flat: none;
+    --elev-raised: 0 4px 16px rgba(0, 0, 0, 0.08);
+    --elev-ring: 0 0 0 1px var(--border);
+    --fg: #000000;
+    --fg-2: #000000;
+    --focus-ring: 0 0 0 2px rgba(0, 0, 0, 0.8);
+    --font-body: "figmaSans", "figmaSans Fallback", "SF Pro Display", system-ui, Helvetica, sans-serif;
+    --font-display: "figmaSans", "figmaSans Fallback", "SF Pro Display", system-ui, Helvetica, sans-serif;
+    --font-mono: "figmaMono", "figmaMono Fallback", "SF Mono", Menlo, ui-monospace, monospace;
+    --leading-body: 1.40;
+    --leading-tight: 1.00;
+    --meta: rgba(0, 0, 0, 0.40);
+    --motion-base: 200ms;
+    --motion-fast: 150ms;
+    --muted: rgba(0, 0, 0, 0.55);
+    --radius-lg: 8px;
+    --radius-md: 8px;
+    --radius-pill: 9999px;
+    --radius-sm: 50px;
+    --section-y-desktop: 96px;
+    --section-y-phone: 40px;
+    --section-y-tablet: 64px;
+    --space-1: 4px;
+    --space-12: 48px;
+    --space-2: 8px;
+    --space-3: 12px;
+    --space-4: 16px;
+    --space-5: 20px;
+    --space-6: 24px;
+    --space-8: 32px;
+    --success: #16a34a;
+    --surface: #ffffff;
+    --surface-warm: var(--surface);
+    --text-2xl: 26px;
+    --text-3xl: 64px;
+    --text-4xl: 86px;
+    --text-base: 16px;
+    --text-lg: 20px;
+    --text-sm: 16px;
+    --text-xl: 26px;
+    --text-xs: 12px;
+    --tracking-display: -0.02em;
+    --warn: #eab308;
+}
+:root {
+  --od-page-bg: #ffffff;
+  --od-surface: #ffffff;
+  --od-text: #000000;
+  --od-muted: rgba(0, 0, 0, 0.55);
+  --od-border: rgba(0, 0, 0, 0.12);
+  --od-accent: #000000;
+  --od-radius: 8px;
+  --od-font-body: "figmaSans", "figmaSans Fallback", "SF Pro Display", system-ui, Helvetica, sans-serif;
+  --od-font-display: "figmaSans", "figmaSans Fallback", "SF Pro Display", system-ui, Helvetica, sans-serif;
+}
+* { box-sizing: border-box; }
+body {
+  margin: 0;
+  min-height: 100vh;
+  background: var(--od-page-bg);
+  color: var(--od-text);
+  font-family: var(--od-font-body);
+  -webkit-font-smoothing: antialiased;
+}
+a { color: inherit; }
+.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
+.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
+.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
+h1, h2, h3, p { margin: 0; }
+h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
+h1 { margin-top: 12px; font-size: 64px; }
+h2 { font-size: 40px; }
+h3 { font-size: 22px; }
+.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
+.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
+.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
+.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
+.button.secondary { background: var(--od-surface); }
+.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
+.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
+.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
+.metric, .card { padding: 18px; }
+.metric strong { display: block; font-size: 30px; line-height: 1; }
+.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
+.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
+.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
+input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
+label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
+@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
+</style>
+</head>
+<body>
+  <main class="page">
+    <section class="hero">
+      <div>
+        <p class="eyebrow">Newsletter module</p>
+        <h1>Figma Editorial issue</h1>
+        <p class="lead">Readable long-form layout with heading hierarchy and compact story modules.</p>
+        <div class="actions">
+          <a class="button primary" href="#">Continue</a>
+          <a class="button secondary" href="#">View details</a>
+        </div>
+      </div>
+      <article class="panel">
+        <p class="eyebrow">Preview</p>
+        <h3>Newsletter</h3>
+        <p class="lead" style="font-size:16px">Bundled OpenDesign package for Figma, derived from curated DESIGN.md, tokens.css, and components.html fixtures.</p>
+        <div class="card-grid" style="grid-template-columns:1fr 1fr">
+          <div class="field"><label>Primary input<input value="Figma" /></label></div>
+          <div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
+        </div>
+      </article>
+    </section>
+  </main>
+</body>
+</html>

open-design/design-systems/figma/system/artifacts/poster.html

@@ -0,0 +1,137 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Figma - Poster</title>
+  <style>
+:root {
+    --accent: #000000;
+    --accent-active: rgba(0, 0, 0, 0.08);
+    --accent-hover: rgba(0, 0, 0, 0.85);
+    --accent-on: #ffffff;
+    --bg: #ffffff;
+    --border: rgba(0, 0, 0, 0.12);
+    --border-soft: rgba(0, 0, 0, 0.06);
+    --container-gutter-desktop: 40px;
+    --container-gutter-phone: 16px;
+    --container-gutter-tablet: 24px;
+    --container-max: 1920px;
+    --danger: #dc2626;
+    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+    --elev-flat: none;
+    --elev-raised: 0 4px 16px rgba(0, 0, 0, 0.08);
+    --elev-ring: 0 0 0 1px var(--border);
+    --fg: #000000;
+    --fg-2: #000000;
+    --focus-ring: 0 0 0 2px rgba(0, 0, 0, 0.8);
+    --font-body: "figmaSans", "figmaSans Fallback", "SF Pro Display", system-ui, Helvetica, sans-serif;
+    --font-display: "figmaSans", "figmaSans Fallback", "SF Pro Display", system-ui, Helvetica, sans-serif;
+    --font-mono: "figmaMono", "figmaMono Fallback", "SF Mono", Menlo, ui-monospace, monospace;
+    --leading-body: 1.40;
+    --leading-tight: 1.00;
+    --meta: rgba(0, 0, 0, 0.40);
+    --motion-base: 200ms;
+    --motion-fast: 150ms;
+    --muted: rgba(0, 0, 0, 0.55);
+    --radius-lg: 8px;
+    --radius-md: 8px;
+    --radius-pill: 9999px;
+    --radius-sm: 50px;
+    --section-y-desktop: 96px;
+    --section-y-phone: 40px;
+    --section-y-tablet: 64px;
+    --space-1: 4px;
+    --space-12: 48px;
+    --space-2: 8px;
+    --space-3: 12px;
+    --space-4: 16px;
+    --space-5: 20px;
+    --space-6: 24px;
+    --space-8: 32px;
+    --success: #16a34a;
+    --surface: #ffffff;
+    --surface-warm: var(--surface);
+    --text-2xl: 26px;
+    --text-3xl: 64px;
+    --text-4xl: 86px;
+    --text-base: 16px;
+    --text-lg: 20px;
+    --text-sm: 16px;
+    --text-xl: 26px;
+    --text-xs: 12px;
+    --tracking-display: -0.02em;
+    --warn: #eab308;
+}
+:root {
+  --od-page-bg: #ffffff;
+  --od-surface: #ffffff;
+  --od-text: #000000;
+  --od-muted: rgba(0, 0, 0, 0.55);
+  --od-border: rgba(0, 0, 0, 0.12);
+  --od-accent: #000000;
+  --od-radius: 8px;
+  --od-font-body: "figmaSans", "figmaSans Fallback", "SF Pro Display", system-ui, Helvetica, sans-serif;
+  --od-font-display: "figmaSans", "figmaSans Fallback", "SF Pro Display", system-ui, Helvetica, sans-serif;
+}
+* { box-sizing: border-box; }
+body {
+  margin: 0;
+  min-height: 100vh;
+  background: var(--od-page-bg);
+  color: var(--od-text);
+  font-family: var(--od-font-body);
+  -webkit-font-smoothing: antialiased;
+}
+a { color: inherit; }
+.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
+.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
+.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
+h1, h2, h3, p { margin: 0; }
+h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
+h1 { margin-top: 12px; font-size: 64px; }
+h2 { font-size: 40px; }
+h3 { font-size: 22px; }
+.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
+.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
+.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
+.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
+.button.secondary { background: var(--od-surface); }
+.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
+.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
+.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
+.metric, .card { padding: 18px; }
+.metric strong { display: block; font-size: 30px; line-height: 1; }
+.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
+.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
+.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
+input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
+label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
+@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
+</style>
+</head>
+<body>
+  <main class="page">
+    <section class="hero">
+      <div>
+        <p class="eyebrow">Poster module</p>
+        <h1>Figma Campaign poster</h1>
+        <p class="lead">High-impact display composition using the system color, type, and spacing rhythm.</p>
+        <div class="actions">
+          <a class="button primary" href="#">Continue</a>
+          <a class="button secondary" href="#">View details</a>
+        </div>
+      </div>
+      <article class="panel">
+        <p class="eyebrow">Preview</p>
+        <h3>Poster</h3>
+        <p class="lead" style="font-size:16px">Bundled OpenDesign package for Figma, derived from curated DESIGN.md, tokens.css, and components.html fixtures.</p>
+        <div class="card-grid" style="grid-template-columns:1fr 1fr">
+          <div class="field"><label>Primary input<input value="Figma" /></label></div>
+          <div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
+        </div>
+      </article>
+    </section>
+  </main>
+</body>
+</html>

open-design/design-systems/figma/system/index.html

@@ -0,0 +1,128 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Figma - system assets</title>
+  <style>
+:root {
+    --accent: #000000;
+    --accent-active: rgba(0, 0, 0, 0.08);
+    --accent-hover: rgba(0, 0, 0, 0.85);
+    --accent-on: #ffffff;
+    --bg: #ffffff;
+    --border: rgba(0, 0, 0, 0.12);
+    --border-soft: rgba(0, 0, 0, 0.06);
+    --container-gutter-desktop: 40px;
+    --container-gutter-phone: 16px;
+    --container-gutter-tablet: 24px;
+    --container-max: 1920px;
+    --danger: #dc2626;
+    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+    --elev-flat: none;
+    --elev-raised: 0 4px 16px rgba(0, 0, 0, 0.08);
+    --elev-ring: 0 0 0 1px var(--border);
+    --fg: #000000;
+    --fg-2: #000000;
+    --focus-ring: 0 0 0 2px rgba(0, 0, 0, 0.8);
+    --font-body: "figmaSans", "figmaSans Fallback", "SF Pro Display", system-ui, Helvetica, sans-serif;
+    --font-display: "figmaSans", "figmaSans Fallback", "SF Pro Display", system-ui, Helvetica, sans-serif;
+    --font-mono: "figmaMono", "figmaMono Fallback", "SF Mono", Menlo, ui-monospace, monospace;
+    --leading-body: 1.40;
+    --leading-tight: 1.00;
+    --meta: rgba(0, 0, 0, 0.40);
+    --motion-base: 200ms;
+    --motion-fast: 150ms;
+    --muted: rgba(0, 0, 0, 0.55);
+    --radius-lg: 8px;
+    --radius-md: 8px;
+    --radius-pill: 9999px;
+    --radius-sm: 50px;
+    --section-y-desktop: 96px;
+    --section-y-phone: 40px;
+    --section-y-tablet: 64px;
+    --space-1: 4px;
+    --space-12: 48px;
+    --space-2: 8px;
+    --space-3: 12px;
+    --space-4: 16px;
+    --space-5: 20px;
+    --space-6: 24px;
+    --space-8: 32px;
+    --success: #16a34a;
+    --surface: #ffffff;
+    --surface-warm: var(--surface);
+    --text-2xl: 26px;
+    --text-3xl: 64px;
+    --text-4xl: 86px;
+    --text-base: 16px;
+    --text-lg: 20px;
+    --text-sm: 16px;
+    --text-xl: 26px;
+    --text-xs: 12px;
+    --tracking-display: -0.02em;
+    --warn: #eab308;
+}
+:root {
+  --od-page-bg: #ffffff;
+  --od-surface: #ffffff;
+  --od-text: #000000;
+  --od-muted: rgba(0, 0, 0, 0.55);
+  --od-border: rgba(0, 0, 0, 0.12);
+  --od-accent: #000000;
+  --od-radius: 8px;
+  --od-font-body: "figmaSans", "figmaSans Fallback", "SF Pro Display", system-ui, Helvetica, sans-serif;
+  --od-font-display: "figmaSans", "figmaSans Fallback", "SF Pro Display", system-ui, Helvetica, sans-serif;
+}
+* { box-sizing: border-box; }
+body {
+  margin: 0;
+  min-height: 100vh;
+  background: var(--od-page-bg);
+  color: var(--od-text);
+  font-family: var(--od-font-body);
+  -webkit-font-smoothing: antialiased;
+}
+a { color: inherit; }
+.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
+.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
+.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
+h1, h2, h3, p { margin: 0; }
+h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
+h1 { margin-top: 12px; font-size: 64px; }
+h2 { font-size: 40px; }
+h3 { font-size: 22px; }
+.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
+.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
+.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
+.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
+.button.secondary { background: var(--od-surface); }
+.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
+.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
+.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
+.metric, .card { padding: 18px; }
+.metric strong { display: block; font-size: 30px; line-height: 1; }
+.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
+.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
+.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
+input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
+label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
+@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
+</style>
+</head>
+<body>
+  <main class="page">
+    <p class="eyebrow">Design &amp; Creative</p>
+    <h1>Figma system assets</h1>
+    <p class="lead">Generated preview modules for bundled official presets.</p>
+    <section class="card-grid"><a class="card" href="kit.html"><h3>Component kit</h3><p>kit.html</p></a>
+<a class="card" href="kit.dark.html"><h3>Dark component kit</h3><p>kit.dark.html</p></a>
+<a class="card" href="artifacts/landing.html"><h3>Landing page</h3><p>artifacts/landing.html</p></a>
+<a class="card" href="artifacts/deck.html"><h3>Pitch deck</h3><p>artifacts/deck.html</p></a>
+<a class="card" href="artifacts/poster.html"><h3>Poster</h3><p>artifacts/poster.html</p></a>
+<a class="card" href="artifacts/email.html"><h3>Email</h3><p>artifacts/email.html</p></a>
+<a class="card" href="artifacts/newsletter.html"><h3>Newsletter</h3><p>artifacts/newsletter.html</p></a>
+<a class="card" href="artifacts/form.html"><h3>Form page</h3><p>artifacts/form.html</p></a></section>
+  </main>
+</body>
+</html>

open-design/design-systems/figma/system/kit.dark.html

@@ -0,0 +1,149 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Figma - dark component kit</title>
+  <style>
+:root {
+    --accent: #000000;
+    --accent-active: rgba(0, 0, 0, 0.08);
+    --accent-hover: rgba(0, 0, 0, 0.85);
+    --accent-on: #ffffff;
+    --bg: #ffffff;
+    --border: rgba(0, 0, 0, 0.12);
+    --border-soft: rgba(0, 0, 0, 0.06);
+    --container-gutter-desktop: 40px;
+    --container-gutter-phone: 16px;
+    --container-gutter-tablet: 24px;
+    --container-max: 1920px;
+    --danger: #dc2626;
+    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+    --elev-flat: none;
+    --elev-raised: 0 4px 16px rgba(0, 0, 0, 0.08);
+    --elev-ring: 0 0 0 1px var(--border);
+    --fg: #000000;
+    --fg-2: #000000;
+    --focus-ring: 0 0 0 2px rgba(0, 0, 0, 0.8);
+    --font-body: "figmaSans", "figmaSans Fallback", "SF Pro Display", system-ui, Helvetica, sans-serif;
+    --font-display: "figmaSans", "figmaSans Fallback", "SF Pro Display", system-ui, Helvetica, sans-serif;
+    --font-mono: "figmaMono", "figmaMono Fallback", "SF Mono", Menlo, ui-monospace, monospace;
+    --leading-body: 1.40;
+    --leading-tight: 1.00;
+    --meta: rgba(0, 0, 0, 0.40);
+    --motion-base: 200ms;
+    --motion-fast: 150ms;
+    --muted: rgba(0, 0, 0, 0.55);
+    --radius-lg: 8px;
+    --radius-md: 8px;
+    --radius-pill: 9999px;
+    --radius-sm: 50px;
+    --section-y-desktop: 96px;
+    --section-y-phone: 40px;
+    --section-y-tablet: 64px;
+    --space-1: 4px;
+    --space-12: 48px;
+    --space-2: 8px;
+    --space-3: 12px;
+    --space-4: 16px;
+    --space-5: 20px;
+    --space-6: 24px;
+    --space-8: 32px;
+    --success: #16a34a;
+    --surface: #ffffff;
+    --surface-warm: var(--surface);
+    --text-2xl: 26px;
+    --text-3xl: 64px;
+    --text-4xl: 86px;
+    --text-base: 16px;
+    --text-lg: 20px;
+    --text-sm: 16px;
+    --text-xl: 26px;
+    --text-xs: 12px;
+    --tracking-display: -0.02em;
+    --warn: #eab308;
+}
+:root {
+  --od-page-bg: #0f1115;
+  --od-surface: #171a21;
+  --od-text: #f8fafc;
+  --od-muted: #a7adba;
+  --od-border: #2a2f3a;
+  --od-accent: #000000;
+  --od-radius: 8px;
+  --od-font-body: "figmaSans", "figmaSans Fallback", "SF Pro Display", system-ui, Helvetica, sans-serif;
+  --od-font-display: "figmaSans", "figmaSans Fallback", "SF Pro Display", system-ui, Helvetica, sans-serif;
+}
+* { box-sizing: border-box; }
+body {
+  margin: 0;
+  min-height: 100vh;
+  background: var(--od-page-bg);
+  color: var(--od-text);
+  font-family: var(--od-font-body);
+  -webkit-font-smoothing: antialiased;
+}
+a { color: inherit; }
+.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
+.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
+.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
+h1, h2, h3, p { margin: 0; }
+h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
+h1 { margin-top: 12px; font-size: 64px; }
+h2 { font-size: 40px; }
+h3 { font-size: 22px; }
+.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
+.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
+.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
+.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #0b0b0b; }
+.button.secondary { background: var(--od-surface); }
+.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
+.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.32); }
+.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
+.metric, .card { padding: 18px; }
+.metric strong { display: block; font-size: 30px; line-height: 1; }
+.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
+.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
+.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
+input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
+label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
+@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
+</style>
+</head>
+<body>
+  <main class="page">
+    <section class="hero">
+      <div>
+        <p class="eyebrow">Design &amp; Creative system</p>
+        <h1>Figma component kit</h1>
+        <p class="lead">Bundled OpenDesign package for Figma, derived from curated DESIGN.md, tokens.css, and components.html fixtures.</p>
+        <div class="actions">
+          <a class="button primary" href="#">Primary</a>
+          <a class="button secondary" href="#">Default</a>
+          <a class="button secondary" href="#">Dashed</a>
+        </div>
+      </div>
+      <article class="panel">
+        <p class="eyebrow">Reference module</p>
+        <h3>Token-driven surface</h3>
+        <div class="metric-grid">
+          <div class="metric"><strong>12</strong><span>Components</span></div>
+          <div class="metric"><strong>4</strong><span>States</span></div>
+          <div class="metric"><strong>1</strong><span>Token contract</span></div>
+        </div>
+        <div class="chip-row">
+          <span class="chip">Hover</span>
+          <span class="chip">Focus</span>
+          <span class="chip">Active</span>
+          <span class="chip">Disabled</span>
+        </div>
+      </article>
+    </section>
+    <section class="card-grid" aria-label="Component examples">
+      <article class="card"><h3>Buttons</h3><p>Primary, secondary, text, and destructive treatments resolve through shared color tokens.</p></article>
+      <article class="card"><h3>Inputs</h3><p>Labels, helper text, and focus state use the same spacing and radius scale.</p></article>
+      <article class="card"><h3>Cards</h3><p>Information modules keep elevation, border, and padding consistent across breakpoints.</p></article>
+    </section>
+  </main>
+</body>
+</html>

open-design/design-systems/figma/system/kit.html

@@ -0,0 +1,149 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Figma - component kit</title>
+  <style>
+:root {
+    --accent: #000000;
+    --accent-active: rgba(0, 0, 0, 0.08);
+    --accent-hover: rgba(0, 0, 0, 0.85);
+    --accent-on: #ffffff;
+    --bg: #ffffff;
+    --border: rgba(0, 0, 0, 0.12);
+    --border-soft: rgba(0, 0, 0, 0.06);
+    --container-gutter-desktop: 40px;
+    --container-gutter-phone: 16px;
+    --container-gutter-tablet: 24px;
+    --container-max: 1920px;
+    --danger: #dc2626;
+    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+    --elev-flat: none;
+    --elev-raised: 0 4px 16px rgba(0, 0, 0, 0.08);
+    --elev-ring: 0 0 0 1px var(--border);
+    --fg: #000000;
+    --fg-2: #000000;
+    --focus-ring: 0 0 0 2px rgba(0, 0, 0, 0.8);
+    --font-body: "figmaSans", "figmaSans Fallback", "SF Pro Display", system-ui, Helvetica, sans-serif;
+    --font-display: "figmaSans", "figmaSans Fallback", "SF Pro Display", system-ui, Helvetica, sans-serif;
+    --font-mono: "figmaMono", "figmaMono Fallback", "SF Mono", Menlo, ui-monospace, monospace;
+    --leading-body: 1.40;
+    --leading-tight: 1.00;
+    --meta: rgba(0, 0, 0, 0.40);
+    --motion-base: 200ms;
+    --motion-fast: 150ms;
+    --muted: rgba(0, 0, 0, 0.55);
+    --radius-lg: 8px;
+    --radius-md: 8px;
+    --radius-pill: 9999px;
+    --radius-sm: 50px;
+    --section-y-desktop: 96px;
+    --section-y-phone: 40px;
+    --section-y-tablet: 64px;
+    --space-1: 4px;
+    --space-12: 48px;
+    --space-2: 8px;
+    --space-3: 12px;
+    --space-4: 16px;
+    --space-5: 20px;
+    --space-6: 24px;
+    --space-8: 32px;
+    --success: #16a34a;
+    --surface: #ffffff;
+    --surface-warm: var(--surface);
+    --text-2xl: 26px;
+    --text-3xl: 64px;
+    --text-4xl: 86px;
+    --text-base: 16px;
+    --text-lg: 20px;
+    --text-sm: 16px;
+    --text-xl: 26px;
+    --text-xs: 12px;
+    --tracking-display: -0.02em;
+    --warn: #eab308;
+}
+:root {
+  --od-page-bg: #ffffff;
+  --od-surface: #ffffff;
+  --od-text: #000000;
+  --od-muted: rgba(0, 0, 0, 0.55);
+  --od-border: rgba(0, 0, 0, 0.12);
+  --od-accent: #000000;
+  --od-radius: 8px;
+  --od-font-body: "figmaSans", "figmaSans Fallback", "SF Pro Display", system-ui, Helvetica, sans-serif;
+  --od-font-display: "figmaSans", "figmaSans Fallback", "SF Pro Display", system-ui, Helvetica, sans-serif;
+}
+* { box-sizing: border-box; }
+body {
+  margin: 0;
+  min-height: 100vh;
+  background: var(--od-page-bg);
+  color: var(--od-text);
+  font-family: var(--od-font-body);
+  -webkit-font-smoothing: antialiased;
+}
+a { color: inherit; }
+.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
+.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
+.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
+h1, h2, h3, p { margin: 0; }
+h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
+h1 { margin-top: 12px; font-size: 64px; }
+h2 { font-size: 40px; }
+h3 { font-size: 22px; }
+.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
+.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
+.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
+.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
+.button.secondary { background: var(--od-surface); }
+.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
+.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
+.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
+.metric, .card { padding: 18px; }
+.metric strong { display: block; font-size: 30px; line-height: 1; }
+.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
+.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
+.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
+input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
+label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
+@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
+</style>
+</head>
+<body>
+  <main class="page">
+    <section class="hero">
+      <div>
+        <p class="eyebrow">Design &amp; Creative system</p>
+        <h1>Figma component kit</h1>
+        <p class="lead">Bundled OpenDesign package for Figma, derived from curated DESIGN.md, tokens.css, and components.html fixtures.</p>
+        <div class="actions">
+          <a class="button primary" href="#">Primary</a>
+          <a class="button secondary" href="#">Default</a>
+          <a class="button secondary" href="#">Dashed</a>
+        </div>
+      </div>
+      <article class="panel">
+        <p class="eyebrow">Reference module</p>
+        <h3>Token-driven surface</h3>
+        <div class="metric-grid">
+          <div class="metric"><strong>12</strong><span>Components</span></div>
+          <div class="metric"><strong>4</strong><span>States</span></div>
+          <div class="metric"><strong>1</strong><span>Token contract</span></div>
+        </div>
+        <div class="chip-row">
+          <span class="chip">Hover</span>
+          <span class="chip">Focus</span>
+          <span class="chip">Active</span>
+          <span class="chip">Disabled</span>
+        </div>
+      </article>
+    </section>
+    <section class="card-grid" aria-label="Component examples">
+      <article class="card"><h3>Buttons</h3><p>Primary, secondary, text, and destructive treatments resolve through shared color tokens.</p></article>
+      <article class="card"><h3>Inputs</h3><p>Labels, helper text, and focus state use the same spacing and radius scale.</p></article>
+      <article class="card"><h3>Cards</h3><p>Information modules keep elevation, border, and padding consistent across breakpoints.</p></article>
+    </section>
+  </main>
+</body>
+</html>

open-design/design-systems/figma/system/tokens.default.json

@@ -0,0 +1,8 @@
+{
+  "colorPrimary": "#000000",
+  "colorPrimaryBg": "var(--surface)",
+  "colorPrimaryHover": "rgba(0, 0, 0, 0.85)",
+  "colorPrimaryActive": "rgba(0, 0, 0, 0.08)",
+  "fontSize": 16,
+  "borderRadius": 8
+}

open-design/design-systems/figma/tailwind-v4.css

@@ -0,0 +1,63 @@
+/* Derived from tokens.css. Keep tokens.css as the source of truth. */
+@import "tailwindcss";
+@import "./tokens.css";
+
+@theme {
+  --color-bg: var(--bg);
+  --color-surface: var(--surface);
+  --color-surface-warm: var(--surface-warm);
+  --color-fg: var(--fg);
+  --color-fg-2: var(--fg-2);
+  --color-muted: var(--muted);
+  --color-meta: var(--meta);
+  --color-border: var(--border);
+  --color-border-soft: var(--border-soft);
+  --color-accent: var(--accent);
+  --color-accent-on: var(--accent-on);
+  --color-accent-hover: var(--accent-hover);
+  --color-accent-active: var(--accent-active);
+  --color-success: var(--success);
+  --color-warn: var(--warn);
+  --color-danger: var(--danger);
+  --font-display: var(--font-display);
+  --font-body: var(--font-body);
+  --font-sans: var(--font-body);
+  --font-mono: var(--font-mono);
+  --text-xs: var(--text-xs);
+  --text-sm: var(--text-sm);
+  --text-base: var(--text-base);
+  --text-lg: var(--text-lg);
+  --text-xl: var(--text-xl);
+  --text-2xl: var(--text-2xl);
+  --text-3xl: var(--text-3xl);
+  --text-4xl: var(--text-4xl);
+  --leading-body: var(--leading-body);
+  --leading-tight: var(--leading-tight);
+  --tracking-display: var(--tracking-display);
+  --spacing-1: var(--space-1);
+  --spacing-2: var(--space-2);
+  --spacing-3: var(--space-3);
+  --spacing-4: var(--space-4);
+  --spacing-5: var(--space-5);
+  --spacing-6: var(--space-6);
+  --spacing-8: var(--space-8);
+  --spacing-12: var(--space-12);
+  --spacing-section-desktop: var(--section-y-desktop);
+  --spacing-section-tablet: var(--section-y-tablet);
+  --spacing-section-phone: var(--section-y-phone);
+  --radius-sm: var(--radius-sm);
+  --radius-md: var(--radius-md);
+  --radius-lg: var(--radius-lg);
+  --radius-pill: var(--radius-pill);
+  --shadow-flat: var(--elev-flat);
+  --shadow-ring: var(--elev-ring);
+  --shadow-raised: var(--elev-raised);
+  --shadow-focus-ring: var(--focus-ring);
+  --duration-fast: var(--motion-fast);
+  --duration-base: var(--motion-base);
+  --ease-standard: var(--ease-standard);
+  --container-max: var(--container-max);
+  --spacing-container-desktop: var(--container-gutter-desktop);
+  --spacing-container-tablet: var(--container-gutter-tablet);
+  --spacing-container-phone: var(--container-gutter-phone);
+}

open-design/design-systems/figma/tokens.css

@@ -0,0 +1,126 @@
+/* ─────────────────────────────────────────────────────────────────────────
+ * design-systems/figma/tokens.css
+ *
+ * Structured token bindings for the "Figma" brand — vibrant product
+ * content inside a strictly black-and-white interface shell.
+ *
+ * Brand identity in three sentences:
+ *   1. Monochrome interface absolutely — pure black (#000000) for all
+ *      text, borders, and solid buttons; pure white (#ffffff) for all
+ *      backgrounds; no mid-tones in the chrome layer whatsoever.
+ *   2. figmaSans variable font at unusual weight stops (320, 330, 340,
+ *      450, 480, 540, 700); figmaMono for uppercase section labels with
+ *      positive letter-spacing; OpenType "kern" on all text.
+ *   3. Pill (50px) and circular (50%) geometry on all interactive
+ *      elements; dashed 2px focus outlines echoing editor selection
+ *      handles; negative tracking even on body text (-0.14px).
+ *
+ * Schema decisions:
+ *   - --bg: #ffffff; --surface: #ffffff (gallery wall — no surface tint).
+ *   - --surface-warm aliases --surface (B&W system has no warm tier).
+ *   - --fg: #000000; --muted: rgba(0,0,0,0.55) for secondary text.
+ *   - --accent: #000000 (black IS the accent in a monochrome system).
+ *   - --accent-on: #ffffff; hover and active via glass tint overlays.
+ *   - --tracking-display: -0.02em (-1.72px / 86px normalized).
+ *   - --leading-tight: 1.00 (display hero line-height).
+ *   - --radius-sm: 50px (pill — all interactive elements); pill = pill.
+ *   - Focus: dashed 2px outline — encoded in components.html, not ring.
+ * ─────────────────────────────────────────────────────────────────── */
+
+:root {
+  /* ─── Surface ──────────────────────────────────────────────────── */
+  --bg:           #ffffff;
+  --surface:      #ffffff;              /* gallery wall — no surface tint */
+  --surface-warm: var(--surface);       /* no warm tier in B&W system */
+
+  /* ─── Foreground ───────────────────────────────────────────────── */
+  --fg:   #000000;
+  --fg-2: #000000;                      /* B&W — no secondary ink tier */
+  --muted: rgba(0, 0, 0, 0.55);        /* secondary text on white */
+  --meta:  rgba(0, 0, 0, 0.40);        /* metadata, captions */
+
+  /* ─── Border ───────────────────────────────────────────────────── */
+  --border:      rgba(0, 0, 0, 0.12);  /* minimal — only where structurally needed */
+  --border-soft: rgba(0, 0, 0, 0.06);
+
+  /* ─── Accent ───────────────────────────────────────────────────── */
+  /* In a strictly B&W system, black IS the accent (solid CTA). */
+  --accent:        #000000;
+  --accent-on:     #ffffff;
+  --accent-hover:  rgba(0, 0, 0, 0.85);
+  --accent-active: rgba(0, 0, 0, 0.08); /* glass dark — secondary button bg */
+
+  /* ─── Semantic ─────────────────────────────────────────────────── */
+  --success: #16a34a;
+  --warn:    #eab308;
+  --danger:  #dc2626;
+
+  /* ─── Typography ───────────────────────────────────────────────── */
+  --font-display: "figmaSans", "figmaSans Fallback", "SF Pro Display", system-ui, Helvetica, sans-serif;
+  --font-body:    "figmaSans", "figmaSans Fallback", "SF Pro Display", system-ui, Helvetica, sans-serif;
+  --font-mono:    "figmaMono", "figmaMono Fallback", "SF Mono", Menlo, ui-monospace, monospace;
+
+  /* Type scale — DESIGN.md §Typography Hierarchy.
+   * Figma's display range 86px→12px. The schema spine: 86px hero,
+   * 64px section, 26px sub-heading, 20px body-large, 16px body. */
+  --text-xs:   12px;                   /* mono small — uppercase tiny labels */
+  --text-sm:   16px;                   /* body / button */
+  --text-base: 16px;                   /* body baseline */
+  --text-lg:   20px;                   /* body large — descriptions */
+  --text-xl:   26px;                   /* sub-heading */
+  --text-2xl:  26px;                   /* sub-heading (same tier, weight varies) */
+  --text-3xl:  64px;                   /* section heading */
+  --text-4xl:  86px;                   /* display / hero */
+
+  /* Leading + tracking.
+   * --leading-tight=1.00: 86px hero compression.
+   * --tracking-display: -0.02em = -1.72px / 86px normalized.
+   * Body text: -0.14px inline; mono labels: +0.54px inline. */
+  --leading-body:     1.40;
+  --leading-tight:    1.00;
+  --tracking-display: -0.02em;
+
+  /* ─── Spacing ──────────────────────────────────────────────────── */
+  --space-1:  4px;
+  --space-2:  8px;
+  --space-3:  12px;
+  --space-4:  16px;
+  --space-5:  20px;
+  --space-6:  24px;
+  --space-8:  32px;
+  --space-12: 48px;
+
+  /* Section rhythm — gallery-like pacing between product sections. */
+  --section-y-desktop: 96px;
+  --section-y-tablet:  64px;
+  --section-y-phone:   40px;
+
+  /* ─── Radius ───────────────────────────────────────────────────── */
+  /* Figma uses pill (50px) for all CTAs/tabs; 8px for card containers. */
+  --radius-sm:   50px;                 /* pill — all interactive elements */
+  --radius-md:   8px;                  /* cards, images, dialogs */
+  --radius-lg:   8px;
+  --radius-pill: 9999px;
+
+  /* ─── Elevation ────────────────────────────────────────────────── */
+  /* Depth via background contrast, not shadows. */
+  --elev-flat:   none;
+  --elev-ring:   0 0 0 1px var(--border);
+  --elev-raised: 0 4px 16px rgba(0, 0, 0, 0.08);
+
+  /* ─── Focus ────────────────────────────────────────────────────── */
+  /* Figma's signature: dashed 2px outline encoded at component level.
+     --focus-ring is used as the fallback shadow for keyboard nav. */
+  --focus-ring: 0 0 0 2px rgba(0, 0, 0, 0.8);
+
+  /* ─── Motion ───────────────────────────────────────────────────── */
+  --motion-fast:   150ms;
+  --motion-base:   200ms;
+  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+
+  /* ─── Layout ───────────────────────────────────────────────────── */
+  --container-max:            1920px;
+  --container-gutter-desktop: 40px;
+  --container-gutter-tablet:  24px;
+  --container-gutter-phone:   16px;
+}