④段整套同步（六节 ＋ 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/openai/DESIGN-ar.md

@@ -0,0 +1,146 @@
+# نظام تصميم مستوحى من OpenAI
+
+> Category: ذكاء اصطناعي ونماذج لغوية كبيرة
+> نظام هادئ شبه أحادي اللون يرتكز على أسود-فيروزي عميق مع مساحة بيضاء سخية وطباعة تحريرية.
+
+## 1. الطابع البصري والأجواء العامة
+
+تبدو واجهة منتجات OpenAI كمختبر بحثي ارتدى حلّته للجمهور — دقيقة ومقيّدة وصامتة بتعمّد. خلفية الصفحة بيضاء نقية (`#ffffff`) تتطبّق فوق حبر قريب من الأسود (`#0d0d0d`) مع نبرة فيروزية خفية، بحيث يبدو حتى النص مبرّدًا قليلًا لا داكنًا بشكل صارخ. والنتيجة حيادية لونية تضع مخرجات النماذج والأكواد البرمجية والنصوص في الصدارة، لا الإطار المحيط بها.
+
+السمة المميّزة هي استخدام **Söhne** (أو بديلها النظامي `inter`) بأوزان مقيّدة — 400 للنص الأساسي، 500 للتنقل والتسميات، 600 للتأكيد — مقترنةً بـ **Signifier**، وهو خط مَزيفي معاصر يُستخدم للعناوين التحريرية. بينما تميل معظم علامات الذكاء الاصطناعي نحو المستقبلية، تمنح عناوين OpenAI المزيفية المنتجَ نبرةً أدبيةً هادئة، كأن كل إعلان مقالٌ رصين.
+
+نظام الأشكال موحّد الليونة: نصف قطر 8–12 بكسل، وحبوب 9999 بكسل للعلامات والشرائح، ولا زوايا حادة في أي مكان. تُشار إلى انتقالات الأقسام بالمساحة البيضاء لا بالفواصل؛ وحين تظهر الحدود فهي خطوط `#e5e5e5` بعرض شعرة تُقرأ كغياب اللون لا حضوره.
+
+**الخصائص الجوهرية:**
+- لوحة بيضاء نقية (`#ffffff`) مع حبر أسود-فيروزي عميق (`#0d0d0d`)
+- Söhne / Inter بأوزان متواضعة (400، 500، 600) — التهذيب على التأكيد
+- خط Signifier المزيفي للعناوين التحريرية
+- نصف قطر لين 8–12 بكسل في كل مكان؛ حبوب 9999 بكسل للشرائح
+- حدود شعرية (`#e5e5e5`) تُستخدم بتقتير؛ المساحة البيضاء هي الفاصل الأساسي
+- رسومات أحادية اللون بالفيروزي العميق — لا تدرجات في الشعارات
+- ارتفاع سطر سخي (1.55–1.65) وتباعد أحرف يكاد يكون صفرًا
+
+## 2. لوحة الألوان وأدوارها
+
+### الألوان الأساسية
+- **أبيض نقي** (`#ffffff`): خلفية أساسية، سطح البطاقات، خلفية الأزرار.
+- **أسود الحبر** (`#0d0d0d`): النص الأساسي، الشعار، زر الدعوة إلى الإجراء الأساسي.
+- **أسود ناعم** (`#1a1a1a`): العناوين الثانوية، حبر بديل للنصوص غير الحرجة.
+
+### أسطح الخلفية
+- **الضباب** (`#fafafa`): خلفية فاصل الأقسام، سطح التذييل.
+- **اللؤلؤ** (`#f5f5f5`): سطح البطاقات، اللوح المرتفع.
+- **السحاب** (`#ececec`): خلفية العناصر المعطّلة، درجة الفاصل.
+
+### لون العلامة التجارية
+- **الفيروزي لـ OpenAI** (`#10a37f`): اللون الأساسي للعلامة التجارية، الروابط، شارة التمييز — اللون الوحيد في نظام محايد.
+- **الفيروزي العميق** (`#0a7a5e`): حالة التحويم والضغط للون العلامة التجارية.
+- **الفيروزي الناعم** (`#e8f5f0`): درجة السطح لشارات النجاح والمقتبسات المميّزة.
+
+### الألوان المحايدة والنصوص
+- **الجرافيت** (`#3c3c3c`): نص الجسم، لون القراءة الافتراضي.
+- **الأردوازي** (`#6e6e6e`): النص الثانوي، التعليقات التوضيحية، البيانات الوصفية.
+- **الرماد** (`#9b9b9b`): النص الثالثي، النص النائب، التسمية المعطّلة.
+- **الحجر** (`#c4c4c4`): الفواصل الزخرفية، الأيقونات الباهتة.
+
+### الألوان الدلالية والحدودية
+- **حد شعرة** (`#e5e5e5`): فاصل الخط الشعري المعياري.
+- **حد ناعم** (`#ededed`): مخطط البطاقة على السطح الأبيض.
+- **الخطأ** (`#ef4146`): التحقق، الإجراء التدميري.
+- **التحذير** (`#f5a623`): عنبر ناعم لحالات الإشعار.
+- **المعلومات** (`#2563eb`): نبرة رابط معلوماتي (يُستخدم بتقتير؛ الفيروزي يبقى المسيطر).
+
+## 3. قواعد الطباعة
+
+### مجموعة الخطوط
+- **العناوين / التحرير**: `Signifier`، مع احتياطي: `'Source Serif Pro', Georgia, serif`
+- **الجسم / الواجهة**: `Söhne`، مع احتياطي: `Inter, system-ui, -apple-system, 'Segoe UI', sans-serif`
+- **الكود / العرض الثابت**: `Söhne Mono`، مع احتياطي: `ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace`
+
+### التسلسل الهرمي
+
+| الدور | الخط | الحجم | الوزن | ارتفاع السطر | تباعد الأحرف | ملاحظات |
+|------|------|------|--------|-------------|----------------|-------|
+| عنوان كبير | Signifier | 56px (3.5rem) | 400 | 1.08 | -0.02em | أبطال تحريريون، عناوين الإعلانات |
+| H1 | Söhne | 40px (2.5rem) | 600 | 1.15 | -0.01em | عنوان الصفحة |
+| H2 | Söhne | 28px (1.75rem) | 600 | 1.2 | -0.005em | عنوان القسم |
+| H3 | Söhne | 20px (1.25rem) | 600 | 1.3 | normal | القسم الفرعي |
+| نص كبير | Söhne | 18px (1.125rem) | 400 | 1.6 | normal | فقرات المقدمة |
+| نص أساسي | Söhne | 16px (1rem) | 400 | 1.65 | normal | نص القراءة القياسي |
+| نص صغير | Söhne | 14px (0.875rem) | 400 | 1.55 | normal | جسم البطاقة، واجهة مكثّفة |
+| تعليق | Söhne | 13px (0.8125rem) | 500 | 1.4 | 0.01em | البيانات الوصفية، الشارات |
+| تسمية | Söhne | 12px (0.75rem) | 500 | 1.3 | 0.04em | حاجب، روابط التنقل بالأحرف الكبيرة |
+| كود | Söhne Mono | 14px (0.875rem) | 400 | 1.55 | normal | كتل الكود، مخرجات الطرفية |
+
+### المبادئ
+- **التهذيب هوية**: تقف الأوزان عند 600؛ فوق 700 يخرج عن روح العلامة. يأتي التسلسل الهرمي من الحجم واللون لا الوزن.
+- **المزيفي للروح، واللا-مزيفي للنظام**: يظهر Signifier فقط في اللحظات التحريرية. واجهة المنتج خالية تمامًا من المزيفي.
+- **التباعد السالب على العناوين الكبيرة**: ‎-0.02em على الأحجام الكبيرة؛ يعود التباعد إلى الصفر عند 16px.
+
+## 4. أسلوب المكونات
+
+### الأزرار
+
+**أساسي**
+- الخلفية: `#0d0d0d`
+- النص: `#ffffff`
+- الحشو: 10px 18px
+- نصف القطر: 9999px (حبة كاملة) للشرائح، 12px للأزرار المستطيلة
+- التحويم: خلفية `#1a1a1a`
+- الاستخدام: دعوة أساسية، "جرّب ChatGPT"، "تسجيل الدخول"
+
+**ثانوي**
+- الخلفية: `#ffffff`
+- النص: `#0d0d0d`
+- الحد: 1px solid `#e5e5e5`
+- الحشو: 10px 18px
+- نصف القطر: 12px
+- التحويم: خلفية `#fafafa`، حد `#d4d4d4`
+
+**لون العلامة التجارية**
+- الخلفية: `#10a37f`
+- النص: `#ffffff`
+- الحشو: 10px 18px
+- نصف القطر: 12px
+- التحويم: `#0a7a5e`
+- الاستخدام: دعوة الترقية المميّزة، مسار النجاح
+
+### البطاقات
+- الخلفية: `#ffffff`
+- الحد: 1px solid `#ededed`
+- نصف القطر: 16px
+- الحشو: 24px–32px
+- الظل: لا شيء بشكل افتراضي؛ عند التحويم `0 4px 16px rgba(13,13,13,0.06)`
+
+### حقول الإدخال
+- الخلفية: `#ffffff`
+- الحد: 1px solid `#e5e5e5`
+- نصف القطر: 12px
+- الحشو: 12px 14px
+- التركيز: حد `#10a37f`، حلقة `0 0 0 3px rgba(16,163,127,0.12)`
+
+### الحبوب والعلامات
+- الخلفية: `#f5f5f5`
+- النص: `#3c3c3c`
+- الحشو: 4px 10px
+- نصف القطر: 9999px
+- الخط: 12px / 500
+
+## 5. التباعد والتخطيط
+
+- **الوحدة الأساسية**: 4px. السلّم: 4، 8، 12، 16، 24، 32، 48، 64، 96، 128.
+- **الحاوية**: عرض أقصى 1200px، هامش 24px على الجوّال، 48px على سطح المكتب.
+- **إيقاع الأقسام**: 96–128px عمودي بين الأقسام الرئيسية؛ 64px على الجوّال.
+- **الشبكة**: 12 عمودًا على سطح المكتب، 4 أعمدة على الجوّال، فجوة 24px.
+
+## 6. الحركة
+
+- **المدة**: 150–220ms للتحويم؛ 280–360ms لانتقالات التخطيط.
+- **التخفيف**: `cubic-bezier(0.16, 1, 0.3, 1)` (خروج ناعم) للمداخل.
+- **التهذيب**: لا تأثير توازي، لا اختطاف للتمرير. تلاشٍ خفيف وإزاحة فقط.
+
+## 7. ضوابط الاستخدام
+
+- احتفظ بالتهذيب التحريري المحايد ونصف القطر اللين والاستخدام النادر للون في آنٍ معًا؛ اللهجات الخضراء وحدها لا تصنع سطحًا بمستوى OpenAI.
+- استخدم لحظات العناوين الكبيرة بأسلوب Signifier فقط في التسلسلات التحريرية أو الإعلانية، مع إبقاء عناصر التحكم في النظام على الخط غير المزيفي.
+- تجنّب الحركة الزخرفية والظلال الثقيلة والبطاقات الزخرفية المفرطة في الحجم؛ يجب أن يبدو النظام هادئًا وقابلًا للقراءة ومتعمَّدًا.

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

@@ -0,0 +1,146 @@
+# Design System Inspired by OpenAI
+
+> Category: KI & LLM
+> Ruhiges, nahezu monochromes System, verankert in tiefem Blaugrün-Schwarz mit großzügigem Weißraum und redaktioneller Typografie.
+
+## 1. Visuelles Thema & Atmosphäre
+
+OpenAIs Produktoberfläche wirkt wie ein Forschungslabor, das sich für die Öffentlichkeit herausgeputzt hat — klinisch, zurückhaltend, bewusst leise. Der Seitenhintergrund ist ein echtes Weiß (`#ffffff`), das einem nahezu schwarzen Tintenton (`#0d0d0d`) mit subtiler Blaugrün-Untertönung gegenübergestellt wird, sodass selbst der Text leicht gekühlt statt aggressiv dunkel wirkt. Das Ergebnis ist eine chromatische Neutralität, die Modellausgaben, Code und Fließtext in den Vordergrund stellt — nicht das Drumherum.
+
+Das Markenzeichen ist der Einsatz von **Söhne** (oder ihrem Systemersatz `inter`) in zurückhaltenden Schriftschnitten — 400 für Fließtext, 500 für Navigation und Labels, 600 für Betonung — gepaart mit **Signifier**, einer zeitgenössischen Serifenschrift für redaktionelle Display-Elemente. Wo die meisten KI-Marken auf Futurismus setzen, verleihen OpenAIs Serifen-Überschriften dem Produkt einen leise literarischen Ton, als wäre jede Ankündigung ein Essay.
+
+Das Formsystem ist durchgehend weich: 8px–12px Radien, 9999px Pills für Tags und Chips, keinerlei harte Ecken. Abschnittswechsel werden durch Weißraum statt durch Trennlinien markiert; wenn Rahmen erscheinen, sind es `#e5e5e5`-Haarlinien, die eher wie das Fehlen von Farbe wirken als wie ihre Präsenz.
+
+**Wesentliche Merkmale:**
+- Echte Weiß-Leinwand (`#ffffff`) mit tiefem Blaugrün-Schwarz-Tinte (`#0d0d0d`)
+- Söhne / Inter in bescheidenen Schnitten (400, 500, 600) — Zurückhaltung statt Behauptung
+- Signifier Serifenschrift für redaktionelle Display-Überschriften
+- Weiche 8–12px Radien überall; 9999px Pills für Chips
+- Haarrahmen (`#e5e5e5`) sparsam eingesetzt; Weißraum als primärer Trenner
+- Einfarbige Illustrationen in tiefem Blaugrün — keine Verläufe in Markierungen
+- Großzügige Zeilenhöhe (1.55–1.65) und Laufweite nahe null
+
+## 2. Farbpalette & Rollen
+
+### Primär
+- **Reinweiß** (`#ffffff`): Primärer Hintergrund, Kartenoberfläche, Button-Hintergrund.
+- **Tintenschwarz** (`#0d0d0d`): Primärtext, Markenzeichen, primärer CTA.
+- **Weiches Schwarz** (`#1a1a1a`): Sekundäre Überschrift, alternative Tinte für unkritischen Text.
+
+### Oberflächen & Hintergründe
+- **Nebel** (`#fafafa`): Hintergrund für Abschnittsumbrüche, Footer-Oberfläche.
+- **Perle** (`#f5f5f5`): Kartenoberfläche, erhöhtes Panel.
+- **Wolke** (`#ececec`): Deaktivierter Hintergrund, Trennton.
+
+### Markenakzent
+- **OpenAI Teal** (`#10a37f`): Primäre Markenfarbe, Link, Hervorhebungs-Badge — die einzige Farbe in einem ansonsten neutralen System.
+- **Teal Deep** (`#0a7a5e`): Hover- und gedrückter Zustand für die Markenfarbe.
+- **Teal Soft** (`#e8f5f0`): Oberflächenton für Erfolgs-Badges, hervorgehobene Callouts.
+
+### Neutraltöne & Text
+- **Graphit** (`#3c3c3c`): Fließtext, Standard-Lesefarbe.
+- **Schiefer** (`#6e6e6e`): Sekundärtext, Bildunterschriften, Metadaten.
+- **Asche** (`#9b9b9b`): Tertiärtext, Platzhalter, deaktiviertes Label.
+- **Stein** (`#c4c4c4`): Dekorative Trennlinien, schwache Icons.
+
+### Semantisch & Rahmen
+- **Rahmen Haarlinie** (`#e5e5e5`): Standardmäßiger Haarlinienseparator.
+- **Rahmen Weich** (`#ededed`): Kartenumriss auf weißer Oberfläche.
+- **Fehler** (`#ef4146`): Validierung, destruktive Aktion.
+- **Warnung** (`#f5a623`): Weiches Bernstein für Hinweiszustände.
+- **Info** (`#2563eb`): Informationeller Link-Ton (sparsam verwendet; Teal hat Vorrang).
+
+## 3. Typografieregeln
+
+### Schriftfamilien
+- **Display / Redaktionell**: `Signifier`, mit Fallback: `'Source Serif Pro', Georgia, serif`
+- **Fließtext / UI**: `Söhne`, mit Fallback: `Inter, system-ui, -apple-system, 'Segoe UI', sans-serif`
+- **Code / Mono**: `Söhne Mono`, mit Fallback: `ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace`
+
+### Hierarchie
+
+| Rolle | Schrift | Größe | Gewicht | Zeilenhöhe | Buchstabenabstand | Hinweise |
+|------|------|------|--------|-------------|----------------|-------|
+| Display | Signifier | 56px (3.5rem) | 400 | 1.08 | -0.02em | Redaktionelles Hero, Ankündigungstitel |
+| H1 | Söhne | 40px (2.5rem) | 600 | 1.15 | -0.01em | Seitenüberschrift |
+| H2 | Söhne | 28px (1.75rem) | 600 | 1.2 | -0.005em | Abschnittsüberschrift |
+| H3 | Söhne | 20px (1.25rem) | 600 | 1.3 | normal | Unterabschnitt |
+| Großer Fließtext | Söhne | 18px (1.125rem) | 400 | 1.6 | normal | Einleitungsabsätze |
+| Fließtext | Söhne | 16px (1rem) | 400 | 1.65 | normal | Standard-Lesetext |
+| Kleiner Fließtext | Söhne | 14px (0.875rem) | 400 | 1.55 | normal | Kartentext, kompaktes UI |
+| Bildunterschrift | Söhne | 13px (0.8125rem) | 500 | 1.4 | 0.01em | Metadaten, Badges |
+| Label | Söhne | 12px (0.75rem) | 500 | 1.3 | 0.04em | Eyebrow, Navigationslinks in Großbuchstaben |
+| Code | Söhne Mono | 14px (0.875rem) | 400 | 1.55 | normal | Code-Blöcke, Terminal-Ausgabe |
+
+### Prinzipien
+- **Zurückhaltung als Identität**: Schriftgewichte enden bei 600; 700+ wirkt markenfern. Hierarchie entsteht durch Größe und Farbe, nicht durch Gewicht.
+- **Serifenschrift für Seele, Grotesk für das System**: Signifier erscheint nur in redaktionellen Display-Momenten. Das Produkt-UI ist rein serifenlos.
+- **Negativer Tracking bei Display**: -0.02em bei Display-Größen; Tracking kehrt bis 16px auf null zurück.
+
+## 4. Komponentenstile
+
+### Buttons
+
+**Primär**
+- Hintergrund: `#0d0d0d`
+- Text: `#ffffff`
+- Innenabstand: 10px 18px
+- Radius: 9999px (volle Pill) bei Chips, 12px bei rechteckigen CTAs
+- Hover: Hintergrund `#1a1a1a`
+- Verwendung: Primärer CTA, „Try ChatGPT", „Sign in"
+
+**Sekundär**
+- Hintergrund: `#ffffff`
+- Text: `#0d0d0d`
+- Rahmen: 1px solid `#e5e5e5`
+- Innenabstand: 10px 18px
+- Radius: 12px
+- Hover: Hintergrund `#fafafa`, Rahmen `#d4d4d4`
+
+**Markenakzent**
+- Hintergrund: `#10a37f`
+- Text: `#ffffff`
+- Innenabstand: 10px 18px
+- Radius: 12px
+- Hover: `#0a7a5e`
+- Verwendung: Hervorgehobener Upgrade-CTA, Erfolgspfad
+
+### Karten
+- Hintergrund: `#ffffff`
+- Rahmen: 1px solid `#ededed`
+- Radius: 16px
+- Innenabstand: 24px–32px
+- Schatten: standardmäßig keiner; bei Hover `0 4px 16px rgba(13,13,13,0.06)`
+
+### Eingabefelder
+- Hintergrund: `#ffffff`
+- Rahmen: 1px solid `#e5e5e5`
+- Radius: 12px
+- Innenabstand: 12px 14px
+- Fokus: Rahmen `#10a37f`, Ring `0 0 0 3px rgba(16,163,127,0.12)`
+
+### Pills & Tags
+- Hintergrund: `#f5f5f5`
+- Text: `#3c3c3c`
+- Innenabstand: 4px 10px
+- Radius: 9999px
+- Schrift: 12px / 500
+
+## 5. Abstände & Layout
+
+- **Basiseinheit**: 4px. Skala: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128.
+- **Container**: max-width 1200px, 24px Gutter auf Mobilgeräten, 48px auf dem Desktop.
+- **Abschnittsrhythmus**: 96–128px vertikal zwischen Hauptabschnitten; 64px auf Mobilgeräten.
+- **Raster**: 12-spaltig auf dem Desktop, 4-spaltig auf Mobilgeräten, 24px Abstand.
+
+## 6. Bewegung
+
+- **Dauer**: 150–220ms für Hover; 280–360ms für Layout-Übergänge.
+- **Easing**: `cubic-bezier(0.16, 1, 0.3, 1)` (smooth out) für Einblendungen.
+- **Zurückhaltung**: kein Parallax, kein Scroll-Jacking. Nur subtiles Fade und Translate.
+
+## 7. Verwendungsrichtlinien
+
+- Die neutrale redaktionelle Zurückhaltung, weiche Radien und sparsame Akzentnutzung müssen gemeinsam bewahrt werden; grüne Akzente allein ergeben keine OpenAI-ähnliche Oberfläche.
+- Signifier-artige Display-Momente nur für redaktionelle oder Ankündigungshierarchien einsetzen; Produktsteuerelemente verbleiben im Grotesk-System.
+- Ornamentale Bewegungen, schwere Schatten und überdimensionierte dekorative Karten vermeiden; das System soll ruhig, lesbar und durchdacht wirken.

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

@@ -0,0 +1,146 @@
+# Design System Inspired by OpenAI
+
+> Category: IA y LLM
+> Sistema casi monocromático y sereno, anclado en un negro-azulado profundo con generoso espacio en blanco y tipografía editorial.
+
+## 1. Visual Theme & Atmosphere
+
+La superficie de producto de OpenAI evoca un laboratorio de investigación vestido para el público: clínica, contenida, deliberadamente silenciosa. El fondo de página es un blanco puro (`#ffffff`) superpuesto sobre una tinta casi negra (`#0d0d0d`) con un sutil matiz azulado, de modo que incluso el texto se percibe ligeramente frío en lugar de agresivamente oscuro. El resultado es una neutralidad cromática que pone el primer plano en la salida del modelo, el código y la prosa, no en el entorno que los rodea.
+
+El movimiento característico es el uso de **Söhne** (o su sustituto del sistema `inter`) con pesos contenidos — 400 para el cuerpo, 500 para navegación y etiquetas, 600 para énfasis — emparejado con **Signifier**, una serif contemporánea reservada para los titulares editoriales. Mientras la mayoría de las marcas de IA se inclinan por lo futurista, los titulares con serif de OpenAI le otorgan al producto un tono literario y discreto, como si cada anuncio fuera un ensayo.
+
+El sistema de formas es uniformemente suave: radios de 8px–12px, píldoras de 9999px para etiquetas y chips, sin ángulos duros en ningún lugar. Las transiciones entre secciones se marcan con espacios en blanco en lugar de separadores; cuando aparecen bordes son líneas de `#e5e5e5` tan finas que se perciben como ausencia de color más que como presencia.
+
+**Características Clave:**
+- Lienzo blanco puro (`#ffffff`) con tinta negro-azulada profunda (`#0d0d0d`)
+- Söhne / Inter a pesos modestos (400, 500, 600) — contención antes que asertividad
+- Signifier serif para titulares editoriales de presentación
+- Radios suaves de 8–12px en todas partes; píldoras de 9999px para chips
+- Bordes de línea fina (`#e5e5e5`) usados con moderación; el espacio en blanco como divisor principal
+- Ilustraciones de un solo color en azulado profundo — sin degradados en las marcas
+- Altura de línea generosa (1.55–1.65) y tracking cercano a cero
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Pure White** (`#ffffff`): Fondo principal, superficie de tarjeta, fondo de botón.
+- **Ink Black** (`#0d0d0d`): Texto principal, marca, CTA primario.
+- **Soft Black** (`#1a1a1a`): Encabezado secundario, tinta alternativa para texto no crítico.
+
+### Surface & Background
+- **Mist** (`#fafafa`): Fondo de separación de sección, superficie de pie de página.
+- **Pearl** (`#f5f5f5`): Superficie de tarjeta, panel elevado.
+- **Cloud** (`#ececec`): Fondo desactivado, tinte divisor.
+
+### Brand Accent
+- **OpenAI Teal** (`#10a37f`): Primario de marca, enlace, insignia destacada — el único color en un sistema por lo demás neutro.
+- **Teal Deep** (`#0a7a5e`): Estado hover y presionado del color de marca.
+- **Teal Soft** (`#e8f5f0`): Tinte de superficie para insignias de éxito y destacados.
+
+### Neutrals & Text
+- **Graphite** (`#3c3c3c`): Texto del cuerpo, color de lectura predeterminado.
+- **Slate** (`#6e6e6e`): Texto secundario, pies de foto, metadatos.
+- **Ash** (`#9b9b9b`): Texto terciario, marcador de posición, etiqueta desactivada.
+- **Stone** (`#c4c4c4`): Divisores decorativos, iconos tenues.
+
+### Semantic & Border
+- **Border Hairline** (`#e5e5e5`): Separador estándar de línea fina.
+- **Border Soft** (`#ededed`): Contorno de tarjeta sobre superficie blanca.
+- **Error** (`#ef4146`): Validación, acción destructiva.
+- **Warning** (`#f5a623`): Ámbar suave para estados de aviso.
+- **Info** (`#2563eb`): Tono de enlace informativo (usado con moderación; el azulado sigue siendo prioritario).
+
+## 3. Typography Rules
+
+### Font Family
+- **Display / Editorial**: `Signifier`, con fallback: `'Source Serif Pro', Georgia, serif`
+- **Body / UI**: `Söhne`, con fallback: `Inter, system-ui, -apple-system, 'Segoe UI', sans-serif`
+- **Code / Mono**: `Söhne Mono`, con fallback: `ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace`
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display | Signifier | 56px (3.5rem) | 400 | 1.08 | -0.02em | Héroe editorial, títulos de anuncio |
+| H1 | Söhne | 40px (2.5rem) | 600 | 1.15 | -0.01em | Encabezado de página |
+| H2 | Söhne | 28px (1.75rem) | 600 | 1.2 | -0.005em | Encabezado de sección |
+| H3 | Söhne | 20px (1.25rem) | 600 | 1.3 | normal | Subsección |
+| Body Large | Söhne | 18px (1.125rem) | 400 | 1.6 | normal | Párrafos de introducción |
+| Body | Söhne | 16px (1rem) | 400 | 1.65 | normal | Texto de lectura estándar |
+| Body Small | Söhne | 14px (0.875rem) | 400 | 1.55 | normal | Cuerpo de tarjeta, UI densa |
+| Caption | Söhne | 13px (0.8125rem) | 500 | 1.4 | 0.01em | Metadatos, insignias |
+| Label | Söhne | 12px (0.75rem) | 500 | 1.3 | 0.04em | Supratítulo, enlaces de navegación en mayúsculas |
+| Code | Söhne Mono | 14px (0.875rem) | 400 | 1.55 | normal | Bloques de código, salida de terminal |
+
+### Principles
+- **La contención como identidad**: los pesos tienen un tope de 600; 700+ resulta ajeno a la marca. La jerarquía se establece mediante tamaño y color, no mediante peso.
+- **Serif para el alma, sans para el sistema**: Signifier aparece únicamente en momentos editoriales de presentación. La UI del producto es exclusivamente sans.
+- **Tracking negativo en display**: -0.02em en tamaños de presentación; el tracking vuelve a cero a partir de 16px.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary**
+- Background: `#0d0d0d`
+- Text: `#ffffff`
+- Padding: 10px 18px
+- Radius: 9999px (píldora completa) en chips, 12px en CTAs rectangulares
+- Hover: fondo `#1a1a1a`
+- Use: CTA principal, "Try ChatGPT", "Sign in"
+
+**Secondary**
+- Background: `#ffffff`
+- Text: `#0d0d0d`
+- Border: 1px solid `#e5e5e5`
+- Padding: 10px 18px
+- Radius: 12px
+- Hover: fondo `#fafafa`, border `#d4d4d4`
+
+**Brand Accent**
+- Background: `#10a37f`
+- Text: `#ffffff`
+- Padding: 10px 18px
+- Radius: 12px
+- Hover: `#0a7a5e`
+- Use: CTA de actualización destacado, ruta de éxito
+
+### Cards
+- Background: `#ffffff`
+- Border: 1px solid `#ededed`
+- Radius: 16px
+- Padding: 24px–32px
+- Shadow: ninguna por defecto; en hover `0 4px 16px rgba(13,13,13,0.06)`
+
+### Inputs
+- Background: `#ffffff`
+- Border: 1px solid `#e5e5e5`
+- Radius: 12px
+- Padding: 12px 14px
+- Focus: border `#10a37f`, ring `0 0 0 3px rgba(16,163,127,0.12)`
+
+### Pills & Tags
+- Background: `#f5f5f5`
+- Text: `#3c3c3c`
+- Padding: 4px 10px
+- Radius: 9999px
+- Font: 12px / 500
+
+## 5. Spacing & Layout
+
+- **Base unit**: 4px. Escala: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128.
+- **Container**: max-width 1200px, gutter de 24px en móvil, 48px en escritorio.
+- **Section rhythm**: 96–128px verticales entre secciones principales; 64px en móvil.
+- **Grid**: 12 columnas en escritorio, 4 columnas en móvil, gap de 24px.
+
+## 6. Motion
+
+- **Duration**: 150–220ms para hover; 280–360ms para transiciones de diseño.
+- **Easing**: `cubic-bezier(0.16, 1, 0.3, 1)` (salida suave) para entradas.
+- **Restraint**: sin paralaje ni scroll-jacking. Solo fade y translate sutiles.
+
+## 7. Usage Guardrails
+
+- Preservar juntos la sobriedad editorial neutral, el radio suave y el uso escaso del acento; los acentos verdes por sí solos no crean una superficie al estilo de OpenAI.
+- Usar los momentos de presentación al estilo Signifier solo para jerarquías editoriales o de anuncio, manteniendo los controles del producto en el sistema sans.
+- Evitar la animación ornamental, las sombras pesadas y las tarjetas decorativas sobredimensionadas; el sistema debe transmitir calma, legibilidad y deliberación.

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

@@ -0,0 +1,146 @@
+# Système de design inspiré par OpenAI
+
+> Category: IA & LLM
+> Système calme, quasi-monochrome, ancré dans un noir tirant sur le sarcelle profond, avec de généreux espaces blancs et une typographie éditoriale.
+
+## 1. Thème visuel & atmosphère
+
+La surface produit d'OpenAI évoque un laboratoire de recherche habillé pour le grand public — clinique, retenu, délibérément silencieux. Le fond de page est un blanc pur (`#ffffff`) superposé à un encre presque noire (`#0d0d0d`) avec une subtile nuance sarcelle, si bien que même le texte paraît légèrement refroidi plutôt qu'agressivement sombre. Il en résulte une neutralité chromatique qui met au premier plan la sortie du modèle, le code et la prose — et non le chrome qui les entoure.
+
+La signature stylistique repose sur l'utilisation de **Söhne** (ou son substitut système `inter`) à des graisses mesurées — 400 pour le corps, 500 pour la navigation et les étiquettes, 600 pour l'emphase — associée à **Signifier**, une serif contemporaine réservée à l'affichage éditorial. Là où la plupart des marques IA s'orientent vers le futurisme, les titres en serif d'OpenAI confèrent au produit un ton discrètement littéraire, comme si chaque annonce était un essai.
+
+Le système de formes est uniformément doux : rayons de 8px à 12px, pilules à 9999px pour les étiquettes et puces, aucun angle vif nulle part. Les transitions entre sections sont marquées par des espaces blancs plutôt que des séparateurs ; lorsque des bordures apparaissent, ce sont des liserés `#e5e5e5` qui se lisent comme une absence de couleur plutôt que comme sa présence.
+
+**Caractéristiques clés :**
+- Canevas blanc pur (`#ffffff`) avec encre noir-sarcelle profond (`#0d0d0d`)
+- Söhne / Inter à des graisses modestes (400, 500, 600) — retenue plutôt qu'affirmation
+- Serif Signifier pour les titres d'affichage éditoriaux
+- Rayons doux de 8–12px partout ; pilules à 9999px pour les puces
+- Bordures en liseré (`#e5e5e5`) utilisées avec parcimonie ; l'espace blanc est le séparateur principal
+- Illustrations monochrome en sarcelle profond — aucun dégradé dans les symboles
+- Interlignage généreux (1,55–1,65) et espacement des lettres proche de zéro
+
+## 2. Palette de couleurs & rôles
+
+### Primaire
+- **Blanc pur** (`#ffffff`) : Fond principal, surface des cartes, fond des boutons.
+- **Noir encre** (`#0d0d0d`) : Texte principal, marque, CTA principal.
+- **Noir doux** (`#1a1a1a`) : Titre secondaire, encre alternative pour les textes non critiques.
+
+### Surface & Fond
+- **Brume** (`#fafafa`) : Fond de rupture de section, surface du pied de page.
+- **Perle** (`#f5f5f5`) : Surface des cartes, panneau surélevé.
+- **Nuage** (`#ececec`) : Fond désactivé, teinte de séparateur.
+
+### Accent de marque
+- **Sarcelle OpenAI** (`#10a37f`) : Marque principale, lien, badge de mise en évidence — la seule couleur dans un système autrement neutre.
+- **Sarcelle profond** (`#0a7a5e`) : État de survol et d'appui pour la couleur de marque.
+- **Sarcelle doux** (`#e8f5f0`) : Teinte de surface pour les badges de succès, les encadrés de mise en évidence.
+
+### Neutres & Texte
+- **Graphite** (`#3c3c3c`) : Texte de corps, couleur de lecture par défaut.
+- **Ardoise** (`#6e6e6e`) : Texte secondaire, légendes, métadonnées.
+- **Cendre** (`#9b9b9b`) : Texte tertiaire, espace réservé, étiquette désactivée.
+- **Pierre** (`#c4c4c4`) : Séparateurs décoratifs, icônes discrètes.
+
+### Sémantique & Bordure
+- **Bordure liseré** (`#e5e5e5`) : Séparateur liseré standard.
+- **Bordure douce** (`#ededed`) : Contour de carte sur surface blanche.
+- **Erreur** (`#ef4146`) : Validation, action destructrice.
+- **Avertissement** (`#f5a623`) : Ambre doux pour les états consultatifs.
+- **Information** (`#2563eb`) : Ton de lien informatif (utilisé avec parcimonie ; le sarcelle reste prioritaire).
+
+## 3. Règles typographiques
+
+### Famille de polices
+- **Affichage / Éditorial** : `Signifier`, avec repli : `'Source Serif Pro', Georgia, serif`
+- **Corps / UI** : `Söhne`, avec repli : `Inter, system-ui, -apple-system, 'Segoe UI', sans-serif`
+- **Code / Mono** : `Söhne Mono`, avec repli : `ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace`
+
+### Hiérarchie
+
+| Rôle | Police | Taille | Graisse | Interlignage | Espacement | Notes |
+|------|--------|--------|---------|--------------|------------|-------|
+| Affichage | Signifier | 56px (3.5rem) | 400 | 1.08 | -0.02em | Héros éditorial, titres d'annonce |
+| H1 | Söhne | 40px (2.5rem) | 600 | 1.15 | -0.01em | Titre de page |
+| H2 | Söhne | 28px (1.75rem) | 600 | 1.2 | -0.005em | Titre de section |
+| H3 | Söhne | 20px (1.25rem) | 600 | 1.3 | normal | Sous-section |
+| Corps large | Söhne | 18px (1.125rem) | 400 | 1.6 | normal | Paragraphes d'accroche |
+| Corps | Söhne | 16px (1rem) | 400 | 1.65 | normal | Texte de lecture standard |
+| Corps petit | Söhne | 14px (0.875rem) | 400 | 1.55 | normal | Corps des cartes, UI dense |
+| Légende | Söhne | 13px (0.8125rem) | 500 | 1.4 | 0.01em | Métadonnées, badges |
+| Étiquette | Söhne | 12px (0.75rem) | 500 | 1.3 | 0.04em | Sourcils, liens de navigation en majuscules |
+| Code | Söhne Mono | 14px (0.875rem) | 400 | 1.55 | normal | Blocs de code, sortie terminal |
+
+### Principes
+- **La retenue comme identité** : les graisses plafonnent à 600 ; 700 et au-delà paraissent hors-marque. La hiérarchie passe par la taille et la couleur, non par la graisse.
+- **La serif pour l'âme, la sans-serif pour le système** : Signifier n'apparaît que dans les moments d'affichage éditorial. L'UI produit est exclusivement en sans-serif.
+- **Crénage négatif en affichage** : -0.02em pour les grandes tailles ; le crénage revient à zéro à partir de 16px.
+
+## 4. Styles des composants
+
+### Boutons
+
+**Principal**
+- Fond : `#0d0d0d`
+- Texte : `#ffffff`
+- Rembourrage : 10px 18px
+- Rayon : 9999px (pilule complète) pour les puces, 12px pour les CTA rectangulaires
+- Survol : fond `#1a1a1a`
+- Utilisation : CTA principal, « Essayer ChatGPT », « Se connecter »
+
+**Secondaire**
+- Fond : `#ffffff`
+- Texte : `#0d0d0d`
+- Bordure : 1px solid `#e5e5e5`
+- Rembourrage : 10px 18px
+- Rayon : 12px
+- Survol : fond `#fafafa`, bordure `#d4d4d4`
+
+**Accent de marque**
+- Fond : `#10a37f`
+- Texte : `#ffffff`
+- Rembourrage : 10px 18px
+- Rayon : 12px
+- Survol : `#0a7a5e`
+- Utilisation : CTA de mise à niveau mis en avant, parcours de succès
+
+### Cartes
+- Fond : `#ffffff`
+- Bordure : 1px solid `#ededed`
+- Rayon : 16px
+- Rembourrage : 24px–32px
+- Ombre : aucune par défaut ; au survol `0 4px 16px rgba(13,13,13,0.06)`
+
+### Champs de saisie
+- Fond : `#ffffff`
+- Bordure : 1px solid `#e5e5e5`
+- Rayon : 12px
+- Rembourrage : 12px 14px
+- Focus : bordure `#10a37f`, anneau `0 0 0 3px rgba(16,163,127,0.12)`
+
+### Pilules & Étiquettes
+- Fond : `#f5f5f5`
+- Texte : `#3c3c3c`
+- Rembourrage : 4px 10px
+- Rayon : 9999px
+- Police : 12px / 500
+
+## 5. Espacement & Mise en page
+
+- **Unité de base** : 4px. Échelle : 4, 8, 12, 16, 24, 32, 48, 64, 96, 128.
+- **Conteneur** : largeur maximale 1200px, gouttière de 24px sur mobile, 48px sur bureau.
+- **Rythme des sections** : 96–128px en vertical entre les sections principales ; 64px sur mobile.
+- **Grille** : 12 colonnes sur bureau, 4 colonnes sur mobile, gouttière de 24px.
+
+## 6. Mouvement
+
+- **Durée** : 150–220ms pour le survol ; 280–360ms pour les transitions de mise en page.
+- **Accélération** : `cubic-bezier(0.16, 1, 0.3, 1)` (sortie fluide) pour les entrées.
+- **Retenue** : pas de parallaxe, pas de scroll-jacking. Fondu et translation subtils uniquement.
+
+## 7. Garde-fous d'utilisation
+
+- Préserver ensemble la retenue éditoriale neutre, le rayon doux et l'usage parcimonieux de l'accent ; les accents verts seuls ne créent pas une surface évocatrice d'OpenAI.
+- Réserver les moments d'affichage de style Signifier aux hiérarchies éditoriales ou d'annonce, en maintenant les contrôles produit dans le système sans-serif.
+- Éviter les animations ornementales, les ombres lourdes et les cartes décoratives surdimensionnées ; le système doit paraître calme, lisible et délibéré.

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

@@ -0,0 +1,146 @@
+# Sistem Desain Terinspirasi dari OpenAI
+
+> Category: AI & LLM
+> Sistem tenang dan hampir-monokrom yang berjangkar pada teal-hitam pekat dengan ruang putih yang luas serta tipografi editorial.
+
+## 1. Tema Visual & Atmosfer
+
+Permukaan produk OpenAI tampak seperti laboratorium riset yang bersolek untuk publik — klinis, tertahan, dan sengaja senyap. Latar belakang halaman adalah putih murni (`#ffffff`) yang dilapisi tinta hampir-hitam (`#0d0d0d`) dengan nuansa teal halus, sehingga bahkan teks pun terasa sedikit dingin alih-alih gelap secara agresif. Hasilnya adalah netralitas kromatik yang menempatkan keluaran model, kode, dan prosa sebagai pusat perhatian — bukan bingkai di sekelilingnya.
+
+Ciri khas desain ini adalah penggunaan **Söhne** (atau pengganti sistemnya `inter`) dengan bobot yang tertahan — 400 untuk isi, 500 untuk nav dan label, 600 untuk penekanan — dipasangkan dengan **Signifier**, serif kontemporer yang digunakan untuk display editorial. Di saat sebagian besar merek AI condong ke arah futuristik, tajuk serif OpenAI justru memberikan nada literer yang halus, seolah setiap pengumuman adalah sebuah esai.
+
+Sistem bentuk seragam dan lembut: radius 8px–12px, pill 9999px untuk tag dan chip, tanpa sudut tajam di mana pun. Transisi antarseksi ditandai dengan ruang putih, bukan pembagi; ketika border muncul, berupa garis rambut `#e5e5e5` yang terbaca sebagai ketiadaan warna, bukan kehadirannya.
+
+**Karakteristik Utama:**
+- Kanvas putih murni (`#ffffff`) dengan tinta teal-hitam pekat (`#0d0d0d`)
+- Söhne / Inter dengan bobot sederhana (400, 500, 600) — penahan diri atas pernyataan
+- Signifier serif untuk tajuk display editorial
+- Radius lembut 8–12px di mana saja; pill 9999px untuk chip
+- Border garis rambut (`#e5e5e5`) digunakan seperlunya; ruang putih sebagai pemisah utama
+- Ilustrasi satu warna dalam teal pekat — tanpa gradien pada tanda
+- Line-height yang lapang (1.55–1.65) dan tracking mendekati nol
+
+## 2. Palet Warna & Peran
+
+### Primer
+- **Putih Murni** (`#ffffff`): Latar belakang utama, permukaan kartu, latar tombol.
+- **Hitam Tinta** (`#0d0d0d`): Teks utama, tanda merek, CTA primer.
+- **Hitam Lembut** (`#1a1a1a`): Heading sekunder, tinta alternatif untuk teks non-kritis.
+
+### Permukaan & Latar Belakang
+- **Kabut** (`#fafafa`): Latar pemisah seksi, permukaan footer.
+- **Mutiara** (`#f5f5f5`): Permukaan kartu, panel yang ditinggikan.
+- **Awan** (`#ececec`): Latar nonaktif, tint pembagi.
+
+### Aksen Merek
+- **OpenAI Teal** (`#10a37f`): Merek primer, tautan, lencana sorot — satu-satunya warna dalam sistem yang serba netral.
+- **Teal Pekat** (`#0a7a5e`): Status hover dan pressed untuk warna merek.
+- **Teal Lembut** (`#e8f5f0`): Tint permukaan untuk lencana sukses, callout sorot.
+
+### Netral & Teks
+- **Grafit** (`#3c3c3c`): Teks isi, warna bacaan default.
+- **Slate** (`#6e6e6e`): Teks sekunder, keterangan, metadata.
+- **Abu** (`#9b9b9b`): Teks tersier, placeholder, label nonaktif.
+- **Batu** (`#c4c4c4`): Pembagi dekoratif, ikon samar.
+
+### Semantik & Border
+- **Border Garis Rambut** (`#e5e5e5`): Pemisah garis rambut standar.
+- **Border Lembut** (`#ededed`): Garis luar kartu di permukaan putih.
+- **Kesalahan** (`#ef4146`): Validasi, aksi destruktif.
+- **Peringatan** (`#f5a623`): Amber lembut untuk status penasihat.
+- **Info** (`#2563eb`): Nada tautan informasional (digunakan seperlunya; teal tetap unggul).
+
+## 3. Aturan Tipografi
+
+### Font Family
+- **Display / Editorial**: `Signifier`, dengan fallback: `'Source Serif Pro', Georgia, serif`
+- **Body / UI**: `Söhne`, dengan fallback: `Inter, system-ui, -apple-system, 'Segoe UI', sans-serif`
+- **Code / Mono**: `Söhne Mono`, dengan fallback: `ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace`
+
+### Hierarki
+
+| Peran | Font | Ukuran | Bobot | Line Height | Letter Spacing | Catatan |
+|------|------|------|--------|-------------|----------------|-------|
+| Display | Signifier | 56px (3.5rem) | 400 | 1.08 | -0.02em | Hero editorial, judul pengumuman |
+| H1 | Söhne | 40px (2.5rem) | 600 | 1.15 | -0.01em | Heading halaman |
+| H2 | Söhne | 28px (1.75rem) | 600 | 1.2 | -0.005em | Heading seksi |
+| H3 | Söhne | 20px (1.25rem) | 600 | 1.3 | normal | Sub-seksi |
+| Body Large | Söhne | 18px (1.125rem) | 400 | 1.6 | normal | Paragraf lede |
+| Body | Söhne | 16px (1rem) | 400 | 1.65 | normal | Teks bacaan standar |
+| Body Small | Söhne | 14px (0.875rem) | 400 | 1.55 | normal | Isi kartu, UI padat |
+| Caption | Söhne | 13px (0.8125rem) | 500 | 1.4 | 0.01em | Metadata, lencana |
+| Label | Söhne | 12px (0.75rem) | 500 | 1.3 | 0.04em | Eyebrow, tautan nav huruf kapital |
+| Code | Söhne Mono | 14px (0.875rem) | 400 | 1.55 | normal | Blok kode, keluaran terminal |
+
+### Prinsip
+- **Penahan diri sebagai identitas**: bobot maksimal 600; 700+ terasa di luar merek. Hierarki berasal dari ukuran dan warna, bukan bobot.
+- **Serif untuk jiwa, sans untuk sistem**: Signifier hanya muncul pada momen display editorial. UI produk sepenuhnya sans.
+- **Tracking negatif pada display**: -0.02em pada ukuran display; tracking kembali ke nol pada 16px.
+
+## 4. Gaya Komponen
+
+### Tombol
+
+**Primer**
+- Latar belakang: `#0d0d0d`
+- Teks: `#ffffff`
+- Padding: 10px 18px
+- Radius: 9999px (full pill) pada chip, 12px pada CTA persegi panjang
+- Hover: latar belakang `#1a1a1a`
+- Kegunaan: CTA primer, "Try ChatGPT", "Sign in"
+
+**Sekunder**
+- Latar belakang: `#ffffff`
+- Teks: `#0d0d0d`
+- Border: 1px solid `#e5e5e5`
+- Padding: 10px 18px
+- Radius: 12px
+- Hover: latar belakang `#fafafa`, border `#d4d4d4`
+
+**Aksen Merek**
+- Latar belakang: `#10a37f`
+- Teks: `#ffffff`
+- Padding: 10px 18px
+- Radius: 12px
+- Hover: `#0a7a5e`
+- Kegunaan: CTA peningkatan yang disorot, jalur sukses
+
+### Kartu
+- Latar belakang: `#ffffff`
+- Border: 1px solid `#ededed`
+- Radius: 16px
+- Padding: 24px–32px
+- Shadow: tidak ada secara default; saat hover `0 4px 16px rgba(13,13,13,0.06)`
+
+### Input
+- Latar belakang: `#ffffff`
+- Border: 1px solid `#e5e5e5`
+- Radius: 12px
+- Padding: 12px 14px
+- Fokus: border `#10a37f`, ring `0 0 0 3px rgba(16,163,127,0.12)`
+
+### Pill & Tag
+- Latar belakang: `#f5f5f5`
+- Teks: `#3c3c3c`
+- Padding: 4px 10px
+- Radius: 9999px
+- Font: 12px / 500
+
+## 5. Spasi & Tata Letak
+
+- **Unit dasar**: 4px. Skala: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128.
+- **Kontainer**: max-width 1200px, gutter 24px pada mobile, 48px pada desktop.
+- **Ritme seksi**: 96–128px vertikal antarseksi utama; 64px pada mobile.
+- **Grid**: 12 kolom desktop, 4 kolom mobile, gap 24px.
+
+## 6. Gerak
+
+- **Durasi**: 150–220ms untuk hover; 280–360ms untuk transisi tata letak.
+- **Easing**: `cubic-bezier(0.16, 1, 0.3, 1)` (smooth out) untuk kemunculan.
+- **Penahan diri**: tanpa paralaks, tanpa scroll-jacking. Hanya fade dan translate yang halus.
+
+## 7. Panduan Penggunaan
+
+- Pertahankan penahan diri editorial yang netral, radius lembut, dan penggunaan aksen yang jarang secara bersamaan; aksen hijau saja tidak menciptakan permukaan bergaya OpenAI.
+- Gunakan momen display bergaya Signifier hanya untuk hierarki editorial atau pengumuman, menjaga kontrol produk tetap dalam sistem sans.
+- Hindari gerak ornamental, shadow berat, dan kartu dekoratif berukuran besar; sistem harus terasa tenang, mudah dibaca, dan disengaja.

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

@@ -0,0 +1,146 @@
+# Design System Inspired by OpenAI
+
+> Category: AI & LLM
+> Sistema calmo e quasi monocromatico, ancorato a un teal-nero profondo con ampio spazio bianco e tipografia editoriale.
+
+## 1. Visual Theme & Atmosphere
+
+La superficie prodotto di OpenAI si legge come un laboratorio di ricerca vestito per il pubblico — clinico, contenuto, deliberatamente silenzioso. Lo sfondo della pagina è un bianco puro (`#ffffff`) sovrapposto a un inchiostro quasi nero (`#0d0d0d`) con una sottile sfumatura teal, così che persino il testo appaia leggermente freddo piuttosto che aggressivamente scuro. Il risultato è una neutralità cromatica che mette al centro l'output del modello, il codice e la prosa, non gli elementi decorativi intorno a essi.
+
+La mossa distintiva è l'uso di **Söhne** (o il suo sostituto di sistema `inter`) con pesi contenuti — 400 per il corpo, 500 per navigazione ed etichette, 600 per l'enfasi — abbinato a **Signifier**, un serif contemporaneo usato per i titoli editoriali di grande formato. Mentre la maggior parte dei brand AI punta al futuristico, i titoli serif di OpenAI conferiscono al prodotto un tono discretamente letterario, come se ogni annuncio fosse un saggio.
+
+Il sistema delle forme è uniformemente morbido: raggi da 8px a 12px, pillole da 9999px per tag e chip, nessun angolo netto. Le transizioni tra sezioni sono indicate dallo spazio bianco piuttosto che da divisori; quando i bordi compaiono sono linee sottilissime `#e5e5e5` che si leggono come assenza di colore piuttosto che come sua presenza.
+
+**Key Characteristics:**
+- Tela bianco puro (`#ffffff`) con inchiostro teal-nero profondo (`#0d0d0d`)
+- Söhne / Inter a pesi moderati (400, 500, 600) — contenimento rispetto all'affermazione
+- Serif Signifier per i titoli editoriali di grande formato
+- Raggi morbidi da 8–12px ovunque; pillole da 9999px per i chip
+- Bordi a linea sottile (`#e5e5e5`) usati con parsimonia; lo spazio bianco come divisore principale
+- Illustrazioni monocromatiche in teal profondo — nessun gradiente nei segni grafici
+- Interlinea generosa (1.55–1.65) e tracking prossimo allo zero
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Pure White** (`#ffffff`): Sfondo primario, superficie della card, sfondo del pulsante.
+- **Ink Black** (`#0d0d0d`): Testo primario, marchio, CTA primaria.
+- **Soft Black** (`#1a1a1a`): Intestazione secondaria, inchiostro alternativo per testo non critico.
+
+### Surface & Background
+- **Mist** (`#fafafa`): Sfondo di separazione sezione, superficie del footer.
+- **Pearl** (`#f5f5f5`): Superficie della card, pannello elevato.
+- **Cloud** (`#ececec`): Sfondo disabilitato, tonalità divisore.
+
+### Brand Accent
+- **OpenAI Teal** (`#10a37f`): Brand primario, link, badge in evidenza — l'unico colore in un sistema altrimenti neutro.
+- **Teal Deep** (`#0a7a5e`): Stato hover e premuto per il colore brand.
+- **Teal Soft** (`#e8f5f0`): Tinta di superficie per badge di successo, callout in evidenza.
+
+### Neutrals & Text
+- **Graphite** (`#3c3c3c`): Testo corpo, colore di lettura predefinito.
+- **Slate** (`#6e6e6e`): Testo secondario, didascalie, metadati.
+- **Ash** (`#9b9b9b`): Testo terziario, segnaposto, etichetta disabilitata.
+- **Stone** (`#c4c4c4`): Divisori decorativi, icone tenui.
+
+### Semantic & Border
+- **Border Hairline** (`#e5e5e5`): Separatore a linea sottile standard.
+- **Border Soft** (`#ededed`): Contorno della card su superficie bianca.
+- **Error** (`#ef4146`): Validazione, azione distruttiva.
+- **Warning** (`#f5a623`): Ambra tenue per stati di avviso.
+- **Info** (`#2563eb`): Tono link informativo (usato con parsimonia; il teal ha comunque la precedenza).
+
+## 3. Typography Rules
+
+### Font Family
+- **Display / Editorial**: `Signifier`, con fallback: `'Source Serif Pro', Georgia, serif`
+- **Body / UI**: `Söhne`, con fallback: `Inter, system-ui, -apple-system, 'Segoe UI', sans-serif`
+- **Code / Mono**: `Söhne Mono`, con fallback: `ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace`
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display | Signifier | 56px (3.5rem) | 400 | 1.08 | -0.02em | Hero editoriale, titoli di annuncio |
+| H1 | Söhne | 40px (2.5rem) | 600 | 1.15 | -0.01em | Intestazione pagina |
+| H2 | Söhne | 28px (1.75rem) | 600 | 1.2 | -0.005em | Intestazione sezione |
+| H3 | Söhne | 20px (1.25rem) | 600 | 1.3 | normal | Sottosezione |
+| Body Large | Söhne | 18px (1.125rem) | 400 | 1.6 | normal | Paragrafi di apertura |
+| Body | Söhne | 16px (1rem) | 400 | 1.65 | normal | Testo di lettura standard |
+| Body Small | Söhne | 14px (0.875rem) | 400 | 1.55 | normal | Corpo card, UI densa |
+| Caption | Söhne | 13px (0.8125rem) | 500 | 1.4 | 0.01em | Metadati, badge |
+| Label | Söhne | 12px (0.75rem) | 500 | 1.3 | 0.04em | Eyebrow, link nav maiuscoli |
+| Code | Söhne Mono | 14px (0.875rem) | 400 | 1.55 | normal | Blocchi di codice, output terminale |
+
+### Principles
+- **Il contenimento come identità**: i pesi si fermano a 600; il 700+ è fuori brand. La gerarchia deriva da dimensione e colore, non dal peso.
+- **Serif per l'anima, sans per il sistema**: Signifier appare solo nei momenti editoriali di grande formato. L'interfaccia prodotto è esclusivamente sans.
+- **Tracking negativo per il display**: -0.02em sulle dimensioni display; il tracking torna a zero a partire da 16px.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary**
+- Background: `#0d0d0d`
+- Text: `#ffffff`
+- Padding: 10px 18px
+- Radius: 9999px (pillola intera) sui chip, 12px sulle CTA rettangolari
+- Hover: sfondo `#1a1a1a`
+- Use: CTA primaria, "Try ChatGPT", "Sign in"
+
+**Secondary**
+- Background: `#ffffff`
+- Text: `#0d0d0d`
+- Border: 1px solid `#e5e5e5`
+- Padding: 10px 18px
+- Radius: 12px
+- Hover: sfondo `#fafafa`, bordo `#d4d4d4`
+
+**Brand Accent**
+- Background: `#10a37f`
+- Text: `#ffffff`
+- Padding: 10px 18px
+- Radius: 12px
+- Hover: `#0a7a5e`
+- Use: CTA upgrade in evidenza, percorso di successo
+
+### Cards
+- Background: `#ffffff`
+- Border: 1px solid `#ededed`
+- Radius: 16px
+- Padding: 24px–32px
+- Shadow: nessuna per impostazione predefinita; al hover `0 4px 16px rgba(13,13,13,0.06)`
+
+### Inputs
+- Background: `#ffffff`
+- Border: 1px solid `#e5e5e5`
+- Radius: 12px
+- Padding: 12px 14px
+- Focus: bordo `#10a37f`, anello `0 0 0 3px rgba(16,163,127,0.12)`
+
+### Pills & Tags
+- Background: `#f5f5f5`
+- Text: `#3c3c3c`
+- Padding: 4px 10px
+- Radius: 9999px
+- Font: 12px / 500
+
+## 5. Spacing & Layout
+
+- **Unità base**: 4px. Scala: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128.
+- **Container**: max-width 1200px, gutter 24px su mobile, 48px su desktop.
+- **Ritmo delle sezioni**: 96–128px verticali tra le sezioni principali; 64px su mobile.
+- **Griglia**: 12 colonne desktop, 4 colonne mobile, gap 24px.
+
+## 6. Motion
+
+- **Durata**: 150–220ms per hover; 280–360ms per le transizioni di layout.
+- **Easing**: `cubic-bezier(0.16, 1, 0.3, 1)` (uscita fluida) per gli ingressi.
+- **Contenimento**: nessun parallax, nessuno scroll-jacking. Solo sottile fade e translate.
+
+## 7. Usage Guardrails
+
+- Preservare insieme il contenimento editoriale neutro, il raggio morbido e l'uso scarso dell'accento; gli accenti verdi da soli non creano una superficie simile a OpenAI.
+- Usare i momenti display in stile Signifier solo per la gerarchia editoriale o degli annunci, mantenendo i controlli prodotto nel sistema sans.
+- Evitare motion ornamentali, ombre pesanti e card decorative sovradimensionate; il sistema deve sembrare calmo, leggibile e deliberato.

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

@@ -0,0 +1,146 @@
+# OpenAIにインスパイアされたデザインシステム
+
+> Category: AIおよびLLM
+> 深いティールブラックを基調とした、ゆったりとした余白とエディトリアルなタイポグラフィが特徴の、落ち着いたほぼモノクロームのシステム。
+
+## 1. ビジュアルテーマと雰囲気
+
+OpenAIのプロダクト表面は、一般向けに整えられた研究施設のように映る——臨床的で、抑制されており、意図的に静謐だ。ページ背景は純粋な白（`#ffffff`）で、わずかにティールのアンダートーンを帯びたニアブラックのインク（`#0d0d0d`）と重なり合う。そのためテキストでさえ、攻撃的な暗さではなく、わずかに冷たいトーンを帯びる。結果として生まれる色彩的中立性は、まわりのクロームではなく、モデルの出力・コード・文章そのものを前景に押し出す。
+
+このシステムの象徴的な特徴は、抑えたウェイトの**Söhne**（またはシステム代替の`inter`）の使用だ——本文は400、ナビゲーションとラベルは500、強調は600——これに、エディトリアル表示用のコンテンポラリーセリフ書体である**Signifier**が組み合わされる。多くのAIブランドが未来志向に傾くなか、OpenAIのセリフ見出しはプロダクトに静かに文学的なトーンをもたらし、まるであらゆるアナウンスがエッセイであるかのような印象を与える。
+
+シェイプシステムは一貫してソフトだ。8px〜12pxの角丸、タグやチップには9999pxのピル形状、どこにも鋭い角は存在しない。セクションの切れ目は仕切り線ではなく余白で示される。ボーダーが現れる際は`#e5e5e5`のヘアライン——色の存在ではなく、色の不在として読み取れるほど細い。
+
+**主な特徴：**
+- 深いティールブラックのインク（`#0d0d0d`）を持つ純白のキャンバス（`#ffffff`）
+- 控えめなウェイト（400、500、600）のSöhne / Inter——主張より抑制
+- エディトリアル表示の見出しにSignifierセリフ
+- すべての箇所に8〜12pxのソフトな角丸、チップには9999pxのピル
+- ヘアラインボーダー（`#e5e5e5`）を控えめに使用、余白が主たる区切り
+- 深いティールによる単色イラスト——マーク内にグラデーションなし
+- 十分なラインハイト（1.55〜1.65）とゼロに近いトラッキング
+
+## 2. カラーパレットと役割
+
+### プライマリ
+- **ピュアホワイト**（`#ffffff`）：プライマリ背景、カード面、ボタン背景。
+- **インクブラック**（`#0d0d0d`）：プライマリテキスト、ブランドマーク、プライマリCTA。
+- **ソフトブラック**（`#1a1a1a`）：セカンダリ見出し、非重要テキストの代替インク。
+
+### サーフェスと背景
+- **ミスト**（`#fafafa`）：セクション区切り背景、フッターサーフェス。
+- **パール**（`#f5f5f5`）：カード面、高さのあるパネル。
+- **クラウド**（`#ececec`）：無効化された背景、仕切りのティント。
+
+### ブランドアクセント
+- **OpenAIティール**（`#10a37f`）：ブランドプライマリ、リンク、ハイライトバッジ——それ以外はニュートラルなシステムにおける唯一の色。
+- **ティールディープ**（`#0a7a5e`）：ブランドカラーのホバーおよび押下状態。
+- **ティールソフト**（`#e8f5f0`）：成功バッジやハイライトコールアウトのサーフェスティント。
+
+### ニュートラルとテキスト
+- **グラファイト**（`#3c3c3c`）：本文テキスト、デフォルトの閲覧カラー。
+- **スレート**（`#6e6e6e`）：セカンダリテキスト、キャプション、メタデータ。
+- **アッシュ**（`#9b9b9b`）：第三テキスト、プレースホルダー、無効ラベル。
+- **ストーン**（`#c4c4c4`）：装飾的な仕切り線、薄いアイコン。
+
+### セマンティックとボーダー
+- **ボーダーヘアライン**（`#e5e5e5`）：標準のヘアライン区切り線。
+- **ボーダーソフト**（`#ededed`）：白いサーフェス上のカードアウトライン。
+- **エラー**（`#ef4146`）：バリデーション、破壊的なアクション。
+- **ワーニング**（`#f5a623`）：注意喚起の状態に使うソフトなアンバー。
+- **インフォ**（`#2563eb`）：情報リンクのトーン（控えめに使用、ティールが優先）。
+
+## 3. タイポグラフィのルール
+
+### フォントファミリ
+- **ディスプレイ / エディトリアル**：`Signifier`、フォールバック：`'Source Serif Pro', Georgia, serif`
+- **本文 / UI**：`Söhne`、フォールバック：`Inter, system-ui, -apple-system, 'Segoe UI', sans-serif`
+- **コード / モノ**：`Söhne Mono`、フォールバック：`ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace`
+
+### 階層
+
+| 役割 | フォント | サイズ | ウェイト | ラインハイト | レタースペーシング | 備考 |
+|------|------|------|--------|-------------|----------------|-------|
+| Display | Signifier | 56px (3.5rem) | 400 | 1.08 | -0.02em | エディトリアルヒーロー、告知タイトル |
+| H1 | Söhne | 40px (2.5rem) | 600 | 1.15 | -0.01em | ページ見出し |
+| H2 | Söhne | 28px (1.75rem) | 600 | 1.2 | -0.005em | セクション見出し |
+| H3 | Söhne | 20px (1.25rem) | 600 | 1.3 | normal | サブセクション |
+| Body Large | Söhne | 18px (1.125rem) | 400 | 1.6 | normal | リード段落 |
+| Body | Söhne | 16px (1rem) | 400 | 1.65 | normal | 標準本文 |
+| Body Small | Söhne | 14px (0.875rem) | 400 | 1.55 | normal | カード本文、密なUI |
+| Caption | Söhne | 13px (0.8125rem) | 500 | 1.4 | 0.01em | メタデータ、バッジ |
+| Label | Söhne | 12px (0.75rem) | 500 | 1.3 | 0.04em | アイブロウ、大文字ナビリンク |
+| Code | Söhne Mono | 14px (0.875rem) | 400 | 1.55 | normal | コードブロック、ターミナル出力 |
+
+### 原則
+- **アイデンティティとしての抑制**：ウェイトは600を上限とする。700以上はブランドのトーンから外れる。階層はウェイトではなく、サイズと色によって生み出す。
+- **魂のためのセリフ、システムのためのサンセリフ**：SignifierはエディトリアルなDisplayの場面にのみ使用する。プロダクトUIはサンセリフのみ。
+- **Displayにはネガティブトラッキング**：Displayサイズには-0.02em、16pxに向かうにつれてゼロに戻す。
+
+## 4. コンポーネントのスタイリング
+
+### ボタン
+
+**プライマリ**
+- Background: `#0d0d0d`
+- Text: `#ffffff`
+- Padding: 10px 18px
+- Radius: 9999px（チップはフルピル形状）、矩形CTAには12px
+- Hover: `#1a1a1a` background
+- 用途：プライマリCTA、「ChatGPTを試す」、「サインイン」
+
+**セカンダリ**
+- Background: `#ffffff`
+- Text: `#0d0d0d`
+- Border: 1px solid `#e5e5e5`
+- Padding: 10px 18px
+- Radius: 12px
+- Hover: background `#fafafa`、border `#d4d4d4`
+
+**ブランドアクセント**
+- Background: `#10a37f`
+- Text: `#ffffff`
+- Padding: 10px 18px
+- Radius: 12px
+- Hover: `#0a7a5e`
+- 用途：アップグレードのハイライトCTA、成功パス
+
+### カード
+- Background: `#ffffff`
+- Border: 1px solid `#ededed`
+- Radius: 16px
+- Padding: 24px〜32px
+- Shadow: デフォルトはなし、ホバー時 `0 4px 16px rgba(13,13,13,0.06)`
+
+### インプット
+- Background: `#ffffff`
+- Border: 1px solid `#e5e5e5`
+- Radius: 12px
+- Padding: 12px 14px
+- Focus: border `#10a37f`、ring `0 0 0 3px rgba(16,163,127,0.12)`
+
+### ピルとタグ
+- Background: `#f5f5f5`
+- Text: `#3c3c3c`
+- Padding: 4px 10px
+- Radius: 9999px
+- Font: 12px / 500
+
+## 5. スペーシングとレイアウト
+
+- **基本単位**：4px。スケール：4、8、12、16、24、32、48、64、96、128。
+- **コンテナ**：max-width 1200px、モバイルは24pxガター、デスクトップは48px。
+- **セクションリズム**：主要セクション間の縦方向は96〜128px、モバイルは64px。
+- **グリッド**：デスクトップは12カラム、モバイルは4カラム、ギャップは24px。
+
+## 6. モーション
+
+- **デュレーション**：ホバーは150〜220ms、レイアウトトランジションは280〜360ms。
+- **イージング**：入場には `cubic-bezier(0.16, 1, 0.3, 1)`（スムーズアウト）。
+- **抑制**：パララックスなし、スクロールジャッキングなし。控えめなフェードとトランスレートのみ。
+
+## 7. 使用上のガイドライン
+
+- ニュートラルなエディトリアルの抑制、ソフトな角丸、控えめなアクセントの使用は、セットで維持すること。グリーンのアクセントを使うだけでは、OpenAIらしいサーフェスは生まれない。
+- Signifierスタイルのディスプレイ表現は、エディトリアルまたは告知の階層にのみ使用し、プロダクトのコントロールはサンセリフシステムで保つこと。
+- 装飾的なモーション、重いシャドウ、過大な装飾的カードは避けること。このシステムは落ち着いていて、読みやすく、意図的な印象を与えるものでなければならない。

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

@@ -0,0 +1,146 @@
+# OpenAI에서 영감을 받은 디자인 시스템
+
+> Category: AI & LLM
+> 깊은 청록빛 블랙을 기반으로 넉넉한 여백과 에디토리얼 타이포그래피를 갖춘 차분하고 거의 무채색에 가까운 시스템.
+
+## 1. 비주얼 테마 & 분위기
+
+OpenAI의 제품 표면은 대중을 위해 차려입은 연구소처럼 읽힌다 — 임상적이고, 절제되어 있으며, 의도적으로 조용하다. 페이지 배경은 순백(`#ffffff`)이며, 미묘한 청록 기조를 띤 거의 검정에 가까운 잉크색(`#0d0d0d`)과 겹쳐져, 텍스트조차 공격적으로 어둡기보다는 약간 차갑게 느껴진다. 그 결과, 그 주변 크롬이 아닌 모델 출력물, 코드, 산문이 전면에 드러나는 색채적 중립성이 만들어진다.
+
+이 시스템의 시그니처는 절제된 웨이트의 **Söhne**(또는 시스템 대체폰트 `inter`) 사용이다 — 본문에는 400, 내비게이션과 레이블에는 500, 강조에는 600 — 이것이 에디토리얼 디스플레이용 현대적 세리프 서체인 **Signifier**와 짝을 이룬다. 대부분의 AI 브랜드가 미래지향적 느낌에 기댈 때, OpenAI의 세리프 헤드라인은 제품에 조용하고 문학적인 톤을 부여한다. 마치 모든 발표가 하나의 에세이인 것처럼.
+
+형태 시스템은 균일하게 부드럽다: 8px–12px 라디우스, 태그와 칩에는 9999px 필 형태, 날카로운 모서리는 어디에도 없다. 섹션 간 전환은 구분선 대신 여백으로 표현되며, 테두리가 등장할 때는 색의 존재라기보다 색의 부재처럼 읽히는 `#e5e5e5` 헤어라인 형태다.
+
+**주요 특성:**
+- 순백 캔버스(`#ffffff`)와 깊은 청록빛 블랙 잉크색(`#0d0d0d`)
+- Söhne / Inter, 절제된 웨이트(400, 500, 600) — 주장보다는 절제
+- 에디토리얼 디스플레이 헤드라인에는 Signifier 세리프
+- 전체에 걸쳐 부드러운 8–12px 라디우스; 칩에는 9999px 필
+- 헤어라인 테두리(`#e5e5e5`)는 최소한으로; 여백이 주된 구분선
+- 깊은 청록색의 단색 일러스트레이션 — 마크에는 그라디언트 없음
+- 넉넉한 행간(1.55–1.65)과 거의 0에 가까운 자간
+
+## 2. 색상 팔레트 & 역할
+
+### 주요 색상
+- **순백(Pure White)** (`#ffffff`): 주요 배경, 카드 표면, 버튼 배경.
+- **잉크 블랙(Ink Black)** (`#0d0d0d`): 주요 텍스트, 브랜드 마크, 주요 CTA.
+- **소프트 블랙(Soft Black)** (`#1a1a1a`): 보조 제목, 중요도가 낮은 텍스트용 대체 잉크색.
+
+### 표면 & 배경
+- **미스트(Mist)** (`#fafafa`): 섹션 구분 배경, 푸터 표면.
+- **펄(Pearl)** (`#f5f5f5`): 카드 표면, 올라온 패널.
+- **클라우드(Cloud)** (`#ececec`): 비활성 배경, 구분선 틴트.
+
+### 브랜드 강조색
+- **OpenAI 청록(OpenAI Teal)** (`#10a37f`): 브랜드 주색, 링크, 하이라이트 배지 — 그 외 중립적인 시스템에서 유일한 색상.
+- **딥 청록(Teal Deep)** (`#0a7a5e`): 브랜드 색상의 호버 및 누름 상태.
+- **소프트 청록(Teal Soft)** (`#e8f5f0`): 성공 배지, 하이라이트 콜아웃을 위한 표면 틴트.
+
+### 중립색 & 텍스트
+- **그래파이트(Graphite)** (`#3c3c3c`): 본문 텍스트, 기본 읽기 색상.
+- **슬레이트(Slate)** (`#6e6e6e`): 보조 텍스트, 캡션, 메타데이터.
+- **애시(Ash)** (`#9b9b9b`): 3차 텍스트, 플레이스홀더, 비활성 레이블.
+- **스톤(Stone)** (`#c4c4c4`): 장식용 구분선, 희미한 아이콘.
+
+### 의미적 색상 & 테두리
+- **테두리 헤어라인(Border Hairline)** (`#e5e5e5`): 표준 헤어라인 구분선.
+- **테두리 소프트(Border Soft)** (`#ededed`): 흰색 표면 위 카드 외곽선.
+- **오류(Error)** (`#ef4146`): 유효성 검사, 파괴적 동작.
+- **경고(Warning)** (`#f5a623`): 안내 상태를 위한 소프트 앰버색.
+- **정보(Info)** (`#2563eb`): 정보성 링크 톤(최소한으로 사용; 청록이 여전히 우선).
+
+## 3. 타이포그래피 규칙
+
+### 폰트 패밀리
+- **디스플레이 / 에디토리얼**: `Signifier`, 폴백: `'Source Serif Pro', Georgia, serif`
+- **본문 / UI**: `Söhne`, 폴백: `Inter, system-ui, -apple-system, 'Segoe UI', sans-serif`
+- **코드 / 모노**: `Söhne Mono`, 폴백: `ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace`
+
+### 계층 구조
+
+| 역할 | 폰트 | 크기 | 굵기 | 행간 | 자간 | 비고 |
+|------|------|------|--------|-------------|----------------|-------|
+| 디스플레이 | Signifier | 56px (3.5rem) | 400 | 1.08 | -0.02em | 에디토리얼 히어로, 발표 제목 |
+| H1 | Söhne | 40px (2.5rem) | 600 | 1.15 | -0.01em | 페이지 제목 |
+| H2 | Söhne | 28px (1.75rem) | 600 | 1.2 | -0.005em | 섹션 제목 |
+| H3 | Söhne | 20px (1.25rem) | 600 | 1.3 | normal | 소섹션 |
+| 본문 대형 | Söhne | 18px (1.125rem) | 400 | 1.6 | normal | 리드 단락 |
+| 본문 | Söhne | 16px (1rem) | 400 | 1.65 | normal | 표준 본문 텍스트 |
+| 본문 소형 | Söhne | 14px (0.875rem) | 400 | 1.55 | normal | 카드 본문, 밀집 UI |
+| 캡션 | Söhne | 13px (0.8125rem) | 500 | 1.4 | 0.01em | 메타데이터, 배지 |
+| 레이블 | Söhne | 12px (0.75rem) | 500 | 1.3 | 0.04em | 아이브로우, 대문자 내비게이션 링크 |
+| 코드 | Söhne Mono | 14px (0.875rem) | 400 | 1.55 | normal | 코드 블록, 터미널 출력 |
+
+### 원칙
+- **정체성으로서의 절제**: 굵기는 최대 600; 700 이상은 브랜드에 맞지 않는 느낌을 준다. 계층은 굵기가 아닌 크기와 색상으로 만들어진다.
+- **세리프는 영혼을 위해, 산세리프는 시스템을 위해**: Signifier는 에디토리얼 디스플레이 순간에만 등장한다. 제품 UI는 산세리프 전용이다.
+- **디스플레이에는 음수 자간**: 디스플레이 크기에서 -0.02em; 자간은 16px에서 0으로 돌아온다.
+
+## 4. 컴포넌트 스타일링
+
+### 버튼
+
+**주요(Primary)**
+- 배경: `#0d0d0d`
+- 텍스트: `#ffffff`
+- 패딩: 10px 18px
+- 라디우스: 칩에는 9999px(완전 필), 직사각형 CTA에는 12px
+- 호버: `#1a1a1a` 배경
+- 사용처: 주요 CTA, "Try ChatGPT", "Sign in"
+
+**보조(Secondary)**
+- 배경: `#ffffff`
+- 텍스트: `#0d0d0d`
+- 테두리: 1px solid `#e5e5e5`
+- 패딩: 10px 18px
+- 라디우스: 12px
+- 호버: 배경 `#fafafa`, 테두리 `#d4d4d4`
+
+**브랜드 강조(Brand Accent)**
+- 배경: `#10a37f`
+- 텍스트: `#ffffff`
+- 패딩: 10px 18px
+- 라디우스: 12px
+- 호버: `#0a7a5e`
+- 사용처: 강조된 업그레이드 CTA, 성공 경로
+
+### 카드
+- 배경: `#ffffff`
+- 테두리: 1px solid `#ededed`
+- 라디우스: 16px
+- 패딩: 24px–32px
+- 그림자: 기본적으로 없음; 호버 시 `0 4px 16px rgba(13,13,13,0.06)`
+
+### 인풋
+- 배경: `#ffffff`
+- 테두리: 1px solid `#e5e5e5`
+- 라디우스: 12px
+- 패딩: 12px 14px
+- 포커스: 테두리 `#10a37f`, 링 `0 0 0 3px rgba(16,163,127,0.12)`
+
+### 필 & 태그
+- 배경: `#f5f5f5`
+- 텍스트: `#3c3c3c`
+- 패딩: 4px 10px
+- 라디우스: 9999px
+- 폰트: 12px / 500
+
+## 5. 간격 & 레이아웃
+
+- **기본 단위**: 4px. 스케일: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128.
+- **컨테이너**: 최대 너비 1200px, 모바일 24px 거터, 데스크탑 48px.
+- **섹션 리듬**: 주요 섹션 사이 세로 96–128px; 모바일에서는 64px.
+- **그리드**: 데스크탑 12열, 모바일 4열, 24px 간격.
+
+## 6. 모션
+
+- **지속 시간**: 호버에 150–220ms; 레이아웃 전환에 280–360ms.
+- **이징**: 진입 시 `cubic-bezier(0.16, 1, 0.3, 1)` (부드러운 감속).
+- **절제**: 패럴랙스 없음, 스크롤 재킹 없음. 미묘한 페이드와 트랜슬레이트만 사용.
+
+## 7. 사용 가이드라인
+
+- 중립적인 에디토리얼 절제감, 부드러운 라디우스, 희소한 강조색 사용을 함께 유지할 것; 녹색 강조색만으로는 OpenAI다운 표면이 만들어지지 않는다.
+- Signifier 스타일의 디스플레이 순간은 에디토리얼 또는 발표 계층에만 사용하고, 제품 컨트롤은 산세리프 시스템을 유지할 것.
+- 장식적인 모션, 무거운 그림자, 지나치게 큰 장식용 카드를 피할 것; 시스템은 차분하고, 읽기 쉬우며, 의도적으로 느껴져야 한다.

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

@@ -0,0 +1,146 @@
+# Ontwerpsysteem geïnspireerd door OpenAI
+
+> Category: AI & LLM
+> Rustig, bijna-monochromatisch systeem verankerd in een diep teal-zwart met royale witruimte en redactionele typografie.
+
+## 1. Visueel Thema & Sfeer
+
+Het productoppervlak van OpenAI leest als een onderzoekslab dat zich klaar heeft gemaakt voor het publiek — klinisch, ingetogen, bewust stil. De pagina-achtergrond is een puur wit (`#ffffff`) gelaagd over een bijna-zwarte inkt (`#0d0d0d`) met een subtiele teal-ondertoon, zodat zelfs de tekst iets afgekoeld aanvoelt in plaats van agressief donker. Het resultaat is een chromatische neutraliteit die modeluitvoer, code en proza centraal stelt — niet de chrome eromheen.
+
+De kenmerkende aanpak is het gebruik van **Söhne** (of de systeemvervanger `inter`) op ingetogen gewichten — 400 voor lopende tekst, 500 voor navigatie en labels, 600 voor nadruk — gecombineerd met **Signifier**, een hedendaags schreeflettertype dat wordt ingezet voor redactionele weergave. Waar de meeste AI-merken futuristisch neigen, geven de schreefkoppen van OpenAI het product een stilletjes literaire toon, alsof elk aankondiging een essay is.
+
+Het vormsysteem is uniform zacht: 8px–12px radii, 9999px pills voor tags en chips, geen harde hoeken ergens. Sectieovergangen worden aangeduid met witruimte in plaats van scheidingslijnen; wanneer randen verschijnen zijn het `#e5e5e5` haarlijnen die eerder als afwezigheid van kleur worden gelezen dan als aanwezigheid ervan.
+
+**Belangrijkste Kenmerken:**
+- Puur wit canvas (`#ffffff`) met diep teal-zwarte inkt (`#0d0d0d`)
+- Söhne / Inter op bescheiden gewichten (400, 500, 600) — terughoudendheid boven assertiviteit
+- Signifier schreef voor redactionele weergavekoppen
+- Zachte 8–12px radii overal; 9999px pills voor chips
+- Haarlijnen (`#e5e5e5`) spaarzaam ingezet; witruimte als primaire verdeler
+- Eenkleurige illustraties in diep teal — geen kleurverlopen in merktekens
+- Royale regelafstand (1.55–1.65) en spatiëring nabij nul
+
+## 2. Kleurenpalet & Rollen
+
+### Primair
+- **Puur Wit** (`#ffffff`): Primaire achtergrond, kaartoppervlak, knopachtergrond.
+- **Inktezwart** (`#0d0d0d`): Primaire tekst, merkteken, primaire CTA.
+- **Zacht Zwart** (`#1a1a1a`): Secundaire kop, alternatieve inkt voor niet-kritieke tekst.
+
+### Oppervlak & Achtergrond
+- **Nevel** (`#fafafa`): Sectie-achtergrond voor afwisseling, voettekstoppervlak.
+- **Parels** (`#f5f5f5`): Kaartoppervlak, verheven paneel.
+- **Wolk** (`#ececec`): Uitgeschakelde achtergrond, scheidingslijn-tint.
+
+### Merkaccent
+- **OpenAI Teal** (`#10a37f`): Merkprimair, link, markeringsbadge — de enige kleur in een verder neutraal systeem.
+- **Diep Teal** (`#0a7a5e`): Hover- en ingedrukte staat voor de merkkleur.
+- **Zacht Teal** (`#e8f5f0`): Oppervlaktint voor succesbadges, gemarkeerde uitroepen.
+
+### Neutraal & Tekst
+- **Grafiet** (`#3c3c3c`): Broodtekst, standaard leeskleur.
+- **Leisteen** (`#6e6e6e`): Secundaire tekst, bijschriften, metadata.
+- **As** (`#9b9b9b`): Tertiaire tekst, plaatshouder, uitgeschakeld label.
+- **Steen** (`#c4c4c4`): Decoratieve scheidingslijnen, vage iconen.
+
+### Semantisch & Rand
+- **Randhaarlijn** (`#e5e5e5`): Standaard haarlijnscheidingsteken.
+- **Zachte Rand** (`#ededed`): Kaartomlijning op wit oppervlak.
+- **Fout** (`#ef4146`): Validatie, destructieve actie.
+- **Waarschuwing** (`#f5a623`): Zacht amber voor adviestoestanden.
+- **Info** (`#2563eb`): Informatieve linktoon (spaarzaam gebruikt; teal heeft voorrang).
+
+## 3. Typografieregels
+
+### Lettertypefamilie
+- **Weergave / Redactioneel**: `Signifier`, met terugval: `'Source Serif Pro', Georgia, serif`
+- **Broodtekst / UI**: `Söhne`, met terugval: `Inter, system-ui, -apple-system, 'Segoe UI', sans-serif`
+- **Code / Mono**: `Söhne Mono`, met terugval: `ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace`
+
+### Hiërarchie
+
+| Rol | Lettertype | Grootte | Gewicht | Regelafstand | Letterspatiëring | Notities |
+|------|------|------|--------|-------------|----------------|-------|
+| Weergave | Signifier | 56px (3.5rem) | 400 | 1.08 | -0.02em | Redactionele hero, aankondigingstitels |
+| H1 | Söhne | 40px (2.5rem) | 600 | 1.15 | -0.01em | Paginakop |
+| H2 | Söhne | 28px (1.75rem) | 600 | 1.2 | -0.005em | Sectiekop |
+| H3 | Söhne | 20px (1.25rem) | 600 | 1.3 | normal | Subsectie |
+| Grote Broodtekst | Söhne | 18px (1.125rem) | 400 | 1.6 | normal | Inleidende alinea's |
+| Broodtekst | Söhne | 16px (1rem) | 400 | 1.65 | normal | Standaard leestekst |
+| Kleine Broodtekst | Söhne | 14px (0.875rem) | 400 | 1.55 | normal | Kaartinhoud, compacte UI |
+| Bijschrift | Söhne | 13px (0.8125rem) | 500 | 1.4 | 0.01em | Metadata, badges |
+| Label | Söhne | 12px (0.75rem) | 500 | 1.3 | 0.04em | Wenkbrauw, navigatielinks in hoofdletters |
+| Code | Söhne Mono | 14px (0.875rem) | 400 | 1.55 | normal | Codeblokken, terminaluitvoer |
+
+### Principes
+- **Terughoudendheid als identiteit**: gewichten beperkt tot 600; 700+ voelt merkreemd aan. Hiërarchie komt van grootte en kleur, niet van gewicht.
+- **Schreef voor ziel, schreefloos voor systeem**: Signifier verschijnt alleen in redactionele weergavemomenten. De product-UI is uitsluitend schreefloos.
+- **Negatieve spatiëring bij weergave**: -0.02em bij weergaveformaten; spatiëring keert terug naar nul bij 16px.
+
+## 4. Componentstijlen
+
+### Knoppen
+
+**Primair**
+- Achtergrond: `#0d0d0d`
+- Tekst: `#ffffff`
+- Opvulling: 10px 18px
+- Radius: 9999px (volledige pill) voor chips, 12px voor rechthoekige CTA's
+- Hover: `#1a1a1a` achtergrond
+- Gebruik: Primaire CTA, "Try ChatGPT", "Sign in"
+
+**Secundair**
+- Achtergrond: `#ffffff`
+- Tekst: `#0d0d0d`
+- Rand: 1px solid `#e5e5e5`
+- Opvulling: 10px 18px
+- Radius: 12px
+- Hover: achtergrond `#fafafa`, rand `#d4d4d4`
+
+**Merkaccent**
+- Achtergrond: `#10a37f`
+- Tekst: `#ffffff`
+- Opvulling: 10px 18px
+- Radius: 12px
+- Hover: `#0a7a5e`
+- Gebruik: Gemarkeerde upgrade-CTA, succespad
+
+### Kaarten
+- Achtergrond: `#ffffff`
+- Rand: 1px solid `#ededed`
+- Radius: 16px
+- Opvulling: 24px–32px
+- Schaduw: standaard geen; bij hover `0 4px 16px rgba(13,13,13,0.06)`
+
+### Invoervelden
+- Achtergrond: `#ffffff`
+- Rand: 1px solid `#e5e5e5`
+- Radius: 12px
+- Opvulling: 12px 14px
+- Focus: rand `#10a37f`, ring `0 0 0 3px rgba(16,163,127,0.12)`
+
+### Pills & Tags
+- Achtergrond: `#f5f5f5`
+- Tekst: `#3c3c3c`
+- Opvulling: 4px 10px
+- Radius: 9999px
+- Lettertype: 12px / 500
+
+## 5. Afstand & Lay-out
+
+- **Basiseenheid**: 4px. Schaal: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128.
+- **Container**: max-width 1200px, 24px marge op mobiel, 48px op desktop.
+- **Sectieritmiek**: 96–128px verticaal tussen grote secties; 64px op mobiel.
+- **Raster**: 12 kolommen op desktop, 4 kolommen op mobiel, 24px tussenruimte.
+
+## 6. Beweging
+
+- **Duur**: 150–220ms voor hover; 280–360ms voor lay-outtransities.
+- **Versnelling**: `cubic-bezier(0.16, 1, 0.3, 1)` (vloeiend uit) voor ingangen.
+- **Terughoudendheid**: geen parallax, geen scroll-jacking. Uitsluitend subtiele vervaging en verschuiving.
+
+## 7. Gebruiksrichtlijnen
+
+- Behoud de neutrale redactionele ingetogenheid, zachte radius en spaarzaam accentgebruik samen; groene accenten alleen creëren geen OpenAI-achtig oppervlak.
+- Gebruik Signifier-stijl weergavemomenten alleen voor redactionele of aankondigingshiërarchie, en houd productbesturingen in het schreefloze systeem.
+- Vermijd ornamentele beweging, zware schaduwen en overmaatse decoratieve kaarten; het systeem moet rustig, leesbaar en doordacht aanvoelen.

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

@@ -0,0 +1,146 @@
+# System Projektowy Inspirowany OpenAI
+
+> Category: AI i LLM
+> Spokojny, niemal monochromatyczny system zakotwiczony w głębokiej czerni z odcieniem teal, obfitymi białymi przestrzeniami i typografią o charakterze redakcyjnym.
+
+## 1. Motyw Wizualny i Atmosfera
+
+Warstwa produktowa OpenAI wygląda jak laboratorium badawcze przygotowane na spotkanie z publicznością — kliniczna, powściągliwa, celowo cicha. Tło strony to czysta biel (`#ffffff`) nałożona na niemal czarny atrament (`#0d0d0d`) z subtelnym odcieniem teal, dzięki czemu nawet tekst sprawia wrażenie chłodniejszego, a nie agresywnie ciemnego. Efektem jest chromatyczna neutralność, która wysuwa na pierwszy plan wyniki modeli, kod i prozę — a nie oprawę wokół nich.
+
+Charakterystycznym zabiegiem jest zastosowanie **Söhne** (lub systemowego odpowiednika `inter`) w umiarkowanych grubościach — 400 dla treści, 500 dla nawigacji i etykiet, 600 dla wyróżnień — w połączeniu z **Signifier**, współczesnym szeryfem używanym do redakcyjnych nagłówków wyróżniających. Podczas gdy większość marek AI skłania się ku futuryzmowi, szeryfowe nagłówki OpenAI nadają produktowi spokojnie literacki ton, jakby każde ogłoszenie było esejem.
+
+System kształtów jest jednolicie miękki: promienie 8px–12px, pigułki 9999px dla tagów i chipów, bez ostrych narożników. Przejścia między sekcjami są zaznaczone białą przestrzenią, a nie separatorami; gdy pojawiają się obramowania, są to linie `#e5e5e5` grubości włosa, które wyglądają raczej jak nieobecność koloru niż jego obecność.
+
+**Kluczowe Cechy:**
+- Czyste białe płótno (`#ffffff`) z głębokim atramentowym czarnym z odcieniem teal (`#0d0d0d`)
+- Söhne / Inter w skromnych grubościach (400, 500, 600) — powściągliwość ponad asertywność
+- Szeryfowy Signifier do redakcyjnych nagłówków wyróżniających
+- Miękkie promienie 8–12px wszędzie; pigułki 9999px dla chipów
+- Obramowania grubości włosa (`#e5e5e5`) używane oszczędnie; biała przestrzeń jako główny separator
+- Jednokolorowe ilustracje w głębokim kolorze teal — bez gradientów w znakach
+- Hojny line-height (1.55–1.65) i tracking bliski zeru
+
+## 2. Paleta Kolorów i Role
+
+### Podstawowe
+- **Czysta Biel** (`#ffffff`): Główne tło, powierzchnia kart, tło przycisków.
+- **Czarny Atrament** (`#0d0d0d`): Główny tekst, znak firmowy, główne CTA.
+- **Miękka Czerń** (`#1a1a1a`): Drugorzędne nagłówki, alternatywny atrament dla mniej istotnego tekstu.
+
+### Powierzchnia i Tło
+- **Mgła** (`#fafafa`): Tło przerwy sekcji, powierzchnia stopki.
+- **Perła** (`#f5f5f5`): Powierzchnia kart, podwyższony panel.
+- **Chmura** (`#ececec`): Tło elementów wyłączonych, odcień separatora.
+
+### Akcent Marki
+- **OpenAI Teal** (`#10a37f`): Główny kolor marki, linki, wyróżnione odznaki — jedyny kolor w skądinąd neutralnym systemie.
+- **Teal Głęboki** (`#0a7a5e`): Stan najechania i wciśnięcia dla koloru marki.
+- **Teal Miękki** (`#e8f5f0`): Odcień powierzchni dla odznak sukcesu, wyróżnionych objaśnień.
+
+### Neutralne i Tekstowe
+- **Grafit** (`#3c3c3c`): Tekst treści, domyślny kolor do czytania.
+- **Łupek** (`#6e6e6e`): Tekst drugorzędny, podpisy, metadane.
+- **Popiół** (`#9b9b9b`): Tekst trzeciorzędny, placeholder, wyłączona etykieta.
+- **Kamień** (`#c4c4c4`): Dekoracyjne separatory, delikatne ikony.
+
+### Semantyczne i Obramowania
+- **Obramowanie Włos** (`#e5e5e5`): Standardowy separator grubości włosa.
+- **Obramowanie Miękkie** (`#ededed`): Kontur karty na białej powierzchni.
+- **Błąd** (`#ef4146`): Walidacja, akcja destrukcyjna.
+- **Ostrzeżenie** (`#f5a623`): Miękki bursztyn dla stanów doradczych.
+- **Informacja** (`#2563eb`): Ton linku informacyjnego (używany oszczędnie; teal nadal dominuje).
+
+## 3. Zasady Typografii
+
+### Rodzina Czcionek
+- **Wyróżniająca / Redakcyjna**: `Signifier`, z awaryjną: `'Source Serif Pro', Georgia, serif`
+- **Treść / UI**: `Söhne`, z awaryjną: `Inter, system-ui, -apple-system, 'Segoe UI', sans-serif`
+- **Kod / Mono**: `Söhne Mono`, z awaryjną: `ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace`
+
+### Hierarchia
+
+| Rola | Czcionka | Rozmiar | Grubość | Line Height | Letter Spacing | Uwagi |
+|------|----------|---------|---------|-------------|----------------|-------|
+| Display | Signifier | 56px (3.5rem) | 400 | 1.08 | -0.02em | Redakcyjne hero, tytuły ogłoszeń |
+| H1 | Söhne | 40px (2.5rem) | 600 | 1.15 | -0.01em | Nagłówek strony |
+| H2 | Söhne | 28px (1.75rem) | 600 | 1.2 | -0.005em | Nagłówek sekcji |
+| H3 | Söhne | 20px (1.25rem) | 600 | 1.3 | normal | Podsekcja |
+| Body Large | Söhne | 18px (1.125rem) | 400 | 1.6 | normal | Akapity wprowadzające |
+| Body | Söhne | 16px (1rem) | 400 | 1.65 | normal | Standardowy tekst do czytania |
+| Body Small | Söhne | 14px (0.875rem) | 400 | 1.55 | normal | Treść kart, gęsty UI |
+| Caption | Söhne | 13px (0.8125rem) | 500 | 1.4 | 0.01em | Metadane, odznaki |
+| Label | Söhne | 12px (0.75rem) | 500 | 1.3 | 0.04em | Eyebrow, linki nawigacji pisane wersalikami |
+| Code | Söhne Mono | 14px (0.875rem) | 400 | 1.55 | normal | Bloki kodu, wyjście terminala |
+
+### Zasady
+- **Powściągliwość jako tożsamość**: grubości nie przekraczają 600; 700+ wygląda niezgodnie z marką. Hierarchia wynika z rozmiaru i koloru, a nie grubości.
+- **Szeryfowy dla duszy, bezszeryfowy dla systemu**: Signifier pojawia się wyłącznie w redakcyjnych momentach wyróżniających. UI produktu jest wyłącznie bezszeryfowe.
+- **Ujemny tracking w display**: -0.02em dla rozmiarów display; tracking wraca do zera przy 16px.
+
+## 4. Style Komponentów
+
+### Przyciski
+
+**Główny**
+- Tło: `#0d0d0d`
+- Tekst: `#ffffff`
+- Padding: 10px 18px
+- Radius: 9999px (pełna pigułka) dla chipów, 12px dla prostokątnych CTA
+- Najechanie: tło `#1a1a1a`
+- Zastosowanie: Główne CTA, "Wypróbuj ChatGPT", "Zaloguj się"
+
+**Drugorzędny**
+- Tło: `#ffffff`
+- Tekst: `#0d0d0d`
+- Obramowanie: 1px solid `#e5e5e5`
+- Padding: 10px 18px
+- Radius: 12px
+- Najechanie: tło `#fafafa`, obramowanie `#d4d4d4`
+
+**Akcent Marki**
+- Tło: `#10a37f`
+- Tekst: `#ffffff`
+- Padding: 10px 18px
+- Radius: 12px
+- Najechanie: `#0a7a5e`
+- Zastosowanie: Wyróżnione CTA uaktualnienia, ścieżka sukcesu
+
+### Karty
+- Tło: `#ffffff`
+- Obramowanie: 1px solid `#ededed`
+- Radius: 16px
+- Padding: 24px–32px
+- Cień: brak domyślnie; przy najechaniu `0 4px 16px rgba(13,13,13,0.06)`
+
+### Pola Wprowadzania
+- Tło: `#ffffff`
+- Obramowanie: 1px solid `#e5e5e5`
+- Radius: 12px
+- Padding: 12px 14px
+- Fokus: obramowanie `#10a37f`, pierścień `0 0 0 3px rgba(16,163,127,0.12)`
+
+### Pigułki i Tagi
+- Tło: `#f5f5f5`
+- Tekst: `#3c3c3c`
+- Padding: 4px 10px
+- Radius: 9999px
+- Czcionka: 12px / 500
+
+## 5. Odstępy i Układ
+
+- **Jednostka bazowa**: 4px. Skala: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128.
+- **Kontener**: max-width 1200px, guttera 24px na urządzeniach mobilnych, 48px na komputerach.
+- **Rytm sekcji**: 96–128px w pionie między głównymi sekcjami; 64px na urządzeniach mobilnych.
+- **Siatka**: 12 kolumn na komputerze, 4 kolumny na urządzeniach mobilnych, przerwa 24px.
+
+## 6. Ruch
+
+- **Czas trwania**: 150–220ms dla najechania; 280–360ms dla przejść układu.
+- **Easing**: `cubic-bezier(0.16, 1, 0.3, 1)` (płynne wyjście) dla wejść.
+- **Powściągliwość**: bez paralaksy, bez scroll-jacking. Jedynie subtelne zanikanie i przesunięcie.
+
+## 7. Wytyczne Użytkowania
+
+- Zachowaj razem neutralną powściągliwość redakcyjną, miękki radius i rzadkie użycie akcentu; same zielone akcenty nie tworzą powierzchni w stylu OpenAI.
+- Używaj momentów wyróżniających w stylu Signifier wyłącznie dla hierarchii redakcyjnej lub ogłoszeń, pozostawiając kontrolki produktu w systemie bezszeryfowym.
+- Unikaj ozdobnego ruchu, ciężkich cieni i przesadnie dużych dekoracyjnych kart; system powinien sprawiać wrażenie spokojnego, czytelnego i przemyślanego.

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

@@ -0,0 +1,146 @@
+# Sistema de Design Inspirado na OpenAI
+
+> Category: IA e LLM
+> Sistema calmo e quase monocromático, ancorado em preto-azulado profundo com amplo espaço em branco e tipografia editorial.
+
+## 1. Tema Visual e Atmosfera
+
+A superfície de produto da OpenAI remete a um laboratório de pesquisa preparado para o público — clínica, contida, deliberadamente silenciosa. O fundo da página é um branco puro (`#ffffff`) sobreposto a uma tinta quase preta (`#0d0d0d`) com sutil subtom azul-esverdeado, de modo que até o texto parece levemente resfriado, em vez de agressivamente escuro. O resultado é uma neutralidade cromática que coloca a saída do modelo, o código e a prosa em evidência — e não o entorno visual.
+
+O traço marcante é o uso da **Söhne** (ou sua substituta de sistema `inter`) em pesos contidos — 400 para corpo, 500 para navegação e rótulos, 600 para ênfase — combinada com a **Signifier**, uma serifa contemporânea usada para exibição editorial. Enquanto a maioria das marcas de IA aposta no futurismo, os títulos com serifa da OpenAI conferem ao produto um tom sutilmente literário, como se cada anúncio fosse um ensaio.
+
+O sistema de formas é uniformemente suave: raios de 8px a 12px, pílulas de 9999px para tags e chips, sem cantos abruptos em nenhum lugar. As transições entre seções são marcadas por espaço em branco, e não por divisores; quando bordas aparecem, são hairlines `#e5e5e5` que transmitem ausência de cor, não presença.
+
+**Características Principais:**
+- Tela em branco puro (`#ffffff`) com tinta preto-azulada profunda (`#0d0d0d`)
+- Söhne / Inter em pesos modestos (400, 500, 600) — contenção acima de afirmação
+- Serifa Signifier para títulos editoriais de exibição
+- Raios suaves de 8–12px em todo lugar; pílulas de 9999px para chips
+- Bordas hairline (`#e5e5e5`) usadas com parcimônia; espaço em branco como divisor primário
+- Ilustrações em cor única em preto-azulado profundo — sem gradientes nas marcas
+- Altura de linha generosa (1.55–1.65) e rastreamento próximo de zero
+
+## 2. Paleta de Cores e Funções
+
+### Primárias
+- **Branco Puro** (`#ffffff`): Fundo principal, superfície de card, fundo de botão.
+- **Preto Tinta** (`#0d0d0d`): Texto principal, marca, CTA primária.
+- **Preto Suave** (`#1a1a1a`): Título secundário, tinta alternativa para texto não crítico.
+
+### Superfície e Fundo
+- **Névoa** (`#fafafa`): Fundo de quebra de seção, superfície de rodapé.
+- **Pérola** (`#f5f5f5`): Superfície de card, painel elevado.
+- **Nuvem** (`#ececec`): Fundo desabilitado, tom de divisor.
+
+### Destaque de Marca
+- **OpenAI Teal** (`#10a37f`): Primária da marca, link, badge de destaque — a única cor em um sistema caso contrário neutro.
+- **Teal Deep** (`#0a7a5e`): Estado de hover e pressionado para a cor da marca.
+- **Teal Soft** (`#e8f5f0`): Tom de superfície para badges de sucesso, callouts de destaque.
+
+### Neutros e Texto
+- **Grafite** (`#3c3c3c`): Texto de corpo, cor padrão de leitura.
+- **Ardósia** (`#6e6e6e`): Texto secundário, legendas, metadados.
+- **Cinza** (`#9b9b9b`): Texto terciário, placeholder, rótulo desabilitado.
+- **Pedra** (`#c4c4c4`): Divisores decorativos, ícones sutis.
+
+### Semânticas e Borda
+- **Borda Hairline** (`#e5e5e5`): Separador hairline padrão.
+- **Borda Suave** (`#ededed`): Contorno de card sobre superfície branca.
+- **Erro** (`#ef4146`): Validação, ação destrutiva.
+- **Aviso** (`#f5a623`): Âmbar suave para estados de alerta.
+- **Informação** (`#2563eb`): Tom de link informacional (usado com parcimônia; teal ainda prevalece).
+
+## 3. Regras Tipográficas
+
+### Família Tipográfica
+- **Display / Editorial**: `Signifier`, com fallback: `'Source Serif Pro', Georgia, serif`
+- **Corpo / UI**: `Söhne`, com fallback: `Inter, system-ui, -apple-system, 'Segoe UI', sans-serif`
+- **Código / Mono**: `Söhne Mono`, com fallback: `ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace`
+
+### Hierarquia
+
+| Função | Fonte | Tamanho | Peso | Altura de Linha | Espaçamento | Notas |
+|------|------|------|--------|-------------|----------------|-------|
+| Display | Signifier | 56px (3.5rem) | 400 | 1.08 | -0.02em | Hero editorial, títulos de anúncio |
+| H1 | Söhne | 40px (2.5rem) | 600 | 1.15 | -0.01em | Título de página |
+| H2 | Söhne | 28px (1.75rem) | 600 | 1.2 | -0.005em | Título de seção |
+| H3 | Söhne | 20px (1.25rem) | 600 | 1.3 | normal | Subseção |
+| Corpo Grande | Söhne | 18px (1.125rem) | 400 | 1.6 | normal | Parágrafos de abertura |
+| Corpo | Söhne | 16px (1rem) | 400 | 1.65 | normal | Texto de leitura padrão |
+| Corpo Pequeno | Söhne | 14px (0.875rem) | 400 | 1.55 | normal | Corpo de card, UI densa |
+| Legenda | Söhne | 13px (0.8125rem) | 500 | 1.4 | 0.01em | Metadados, badges |
+| Rótulo | Söhne | 12px (0.75rem) | 500 | 1.3 | 0.04em | Eyebrow, links de navegação em maiúsculas |
+| Código | Söhne Mono | 14px (0.875rem) | 400 | 1.55 | normal | Blocos de código, saída de terminal |
+
+### Princípios
+- **Contenção como identidade**: os pesos são limitados a 600; 700+ destoa da marca. A hierarquia vem do tamanho e da cor, não do peso.
+- **Serifa para a alma, sans-serif para o sistema**: a Signifier aparece apenas em momentos editoriais de exibição. A UI do produto é exclusivamente sans-serif.
+- **Rastreamento negativo no display**: -0.02em em tamanhos de display; o rastreamento retorna a zero em 16px.
+
+## 4. Estilização de Componentes
+
+### Botões
+
+**Primário**
+- Fundo: `#0d0d0d`
+- Texto: `#ffffff`
+- Padding: 10px 18px
+- Raio: 9999px (pílula completa) em chips, 12px em CTAs retangulares
+- Hover: fundo `#1a1a1a`
+- Uso: CTA principal, "Experimente o ChatGPT", "Entrar"
+
+**Secundário**
+- Fundo: `#ffffff`
+- Texto: `#0d0d0d`
+- Borda: 1px solid `#e5e5e5`
+- Padding: 10px 18px
+- Raio: 12px
+- Hover: fundo `#fafafa`, borda `#d4d4d4`
+
+**Destaque de Marca**
+- Fundo: `#10a37f`
+- Texto: `#ffffff`
+- Padding: 10px 18px
+- Raio: 12px
+- Hover: `#0a7a5e`
+- Uso: CTA de upgrade em destaque, caminho de sucesso
+
+### Cards
+- Fundo: `#ffffff`
+- Borda: 1px solid `#ededed`
+- Raio: 16px
+- Padding: 24px–32px
+- Sombra: nenhuma por padrão; no hover `0 4px 16px rgba(13,13,13,0.06)`
+
+### Inputs
+- Fundo: `#ffffff`
+- Borda: 1px solid `#e5e5e5`
+- Raio: 12px
+- Padding: 12px 14px
+- Foco: borda `#10a37f`, anel `0 0 0 3px rgba(16,163,127,0.12)`
+
+### Pílulas e Tags
+- Fundo: `#f5f5f5`
+- Texto: `#3c3c3c`
+- Padding: 4px 10px
+- Raio: 9999px
+- Fonte: 12px / 500
+
+## 5. Espaçamento e Layout
+
+- **Unidade base**: 4px. Escala: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128.
+- **Container**: largura máxima 1200px, gutter de 24px no mobile, 48px no desktop.
+- **Ritmo de seção**: 96–128px verticais entre seções principais; 64px no mobile.
+- **Grid**: 12 colunas no desktop, 4 colunas no mobile, gap de 24px.
+
+## 6. Movimento
+
+- **Duração**: 150–220ms para hover; 280–360ms para transições de layout.
+- **Easing**: `cubic-bezier(0.16, 1, 0.3, 1)` (saída suave) para entradas.
+- **Contenção**: sem parallax, sem scroll-jacking. Apenas fade e translate sutis.
+
+## 7. Diretrizes de Uso
+
+- Preserve juntos a contenção editorial neutra, o raio suave e o uso esparso de destaque; acentos em verde sozinhos não criam uma superfície no estilo da OpenAI.
+- Use momentos de display no estilo Signifier apenas para hierarquias editoriais ou de anúncio, mantendo os controles de produto no sistema sans-serif.
+- Evite movimentos ornamentais, sombras pesadas e cards decorativos superdimensionados; o sistema deve transmitir calma, legibilidade e deliberação.

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

@@ -0,0 +1,146 @@
+# Дизайн-система, вдохновлённая OpenAI
+
+> Category: ИИ и языковые модели
+> Спокойная, почти монохромная система на основе глубокого сине-чёрного оттенка с щедрым белым пространством и редакционной типографикой.
+
+## 1. Визуальная тема и атмосфера
+
+Продуктовая поверхность OpenAI воспринимается как исследовательская лаборатория, открытая для широкой аудитории — клиническая, сдержанная, намеренно тихая. Фон страницы — чистый белый (`#ffffff`), наложенный на почти чёрные чернила (`#0d0d0d`) с едва заметным сине-зелёным подтоном, благодаря чему даже текст ощущается слегка охлаждённым, а не агрессивно тёмным. Результат — хроматическая нейтральность, которая выдвигает на первый план вывод модели, код и прозу, а не обрамляющий их интерфейс.
+
+Фирменный приём — использование **Söhne** (или системного аналога `inter`) с умеренными насыщенностями: 400 для основного текста, 500 для навигации и подписей, 600 для акцентов — в сочетании с **Signifier**, современным антиквой для редакционных заголовков. Там, где большинство AI-брендов тяготеют к футуристичности, засечные заголовки OpenAI придают продукту тихий литературный тон, словно каждый анонс — это эссе.
+
+Система форм единообразно мягкая: скругления 8px–12px, скругления 9999px для тегов и чипов, никаких острых углов. Переходы между секциями обозначаются отступами, а не разделителями; когда рамки всё же появляются, это тончайшие линии `#e5e5e5`, читающиеся как отсутствие цвета, а не его присутствие.
+
+**Ключевые характеристики:**
+- Чистый белый холст (`#ffffff`) с глубокими сине-чёрными чернилами (`#0d0d0d`)
+- Söhne / Inter с умеренной насыщенностью (400, 500, 600) — сдержанность вместо напора
+- Signifier с засечками для редакционных заголовков
+- Мягкие скругления 8–12px везде; 9999px для чипов
+- Тончайшие рамки (`#e5e5e5`) используются скупо; белое пространство — основной разделитель
+- Одноцветные иллюстрации в глубоком сине-зелёном — никаких градиентов в знаках
+- Щедрая межстрочность (1.55–1.65) и трекинг, близкий к нулю
+
+## 2. Цветовая палитра и роли
+
+### Основные цвета
+- **Чистый белый** (`#ffffff`): Основной фон, поверхность карточки, фон кнопки.
+- **Чернильный чёрный** (`#0d0d0d`): Основной текст, знак бренда, основной CTA.
+- **Мягкий чёрный** (`#1a1a1a`): Вторичный заголовок, альтернативные чернила для второстепенного текста.
+
+### Поверхности и фоны
+- **Дымка** (`#fafafa`): Фон разрыва секции, поверхность футера.
+- **Жемчуг** (`#f5f5f5`): Поверхность карточки, приподнятая панель.
+- **Облако** (`#ececec`): Фон отключённого элемента, оттенок разделителя.
+
+### Акцентный цвет бренда
+- **OpenAI Teal** (`#10a37f`): Основной цвет бренда, ссылка, бейдж-подсветка — единственный цвет в иначе нейтральной системе.
+- **Teal Deep** (`#0a7a5e`): Состояние наведения и нажатия для фирменного цвета.
+- **Teal Soft** (`#e8f5f0`): Оттенок поверхности для бейджей успеха, выделяющих подсказок.
+
+### Нейтральные и текстовые цвета
+- **Графит** (`#3c3c3c`): Основной текст, стандартный цвет чтения.
+- **Сланец** (`#6e6e6e`): Вторичный текст, подписи, метаданные.
+- **Пепел** (`#9b9b9b`): Третичный текст, заглушка, отключённая подпись.
+- **Камень** (`#c4c4c4`): Декоративные разделители, едва заметные иконки.
+
+### Семантические цвета и рамки
+- **Тончайшая рамка** (`#e5e5e5`): Стандартный тонкий разделитель.
+- **Мягкая рамка** (`#ededed`): Контур карточки на белой поверхности.
+- **Ошибка** (`#ef4146`): Валидация, деструктивное действие.
+- **Предупреждение** (`#f5a623`): Мягкий янтарный для информационных состояний.
+- **Информация** (`#2563eb`): Информационный тон ссылки (используется скупо; сине-зелёный всё равно приоритетнее).
+
+## 3. Правила типографики
+
+### Семейство шрифтов
+- **Дисплейный / Редакционный**: `Signifier`, резервный: `'Source Serif Pro', Georgia, serif`
+- **Основной / Интерфейсный**: `Söhne`, резервный: `Inter, system-ui, -apple-system, 'Segoe UI', sans-serif`
+- **Код / Моноширинный**: `Söhne Mono`, резервный: `ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace`
+
+### Иерархия
+
+| Роль | Шрифт | Размер | Насыщенность | Межстрочность | Трекинг | Примечания |
+|------|------|------|--------|-------------|----------------|-------|
+| Display | Signifier | 56px (3.5rem) | 400 | 1.08 | -0.02em | Редакционный герой, анонсы |
+| H1 | Söhne | 40px (2.5rem) | 600 | 1.15 | -0.01em | Заголовок страницы |
+| H2 | Söhne | 28px (1.75rem) | 600 | 1.2 | -0.005em | Заголовок секции |
+| H3 | Söhne | 20px (1.25rem) | 600 | 1.3 | normal | Подраздел |
+| Body Large | Söhne | 18px (1.125rem) | 400 | 1.6 | normal | Вводные абзацы |
+| Body | Söhne | 16px (1rem) | 400 | 1.65 | normal | Стандартный читаемый текст |
+| Body Small | Söhne | 14px (0.875rem) | 400 | 1.55 | normal | Тело карточки, плотный интерфейс |
+| Caption | Söhne | 13px (0.8125rem) | 500 | 1.4 | 0.01em | Метаданные, бейджи |
+| Label | Söhne | 12px (0.75rem) | 500 | 1.3 | 0.04em | Надзаголовок, ссылки верхней навигации в верхнем регистре |
+| Code | Söhne Mono | 14px (0.875rem) | 400 | 1.55 | normal | Блоки кода, вывод терминала |
+
+### Принципы
+- **Сдержанность как идентичность**: насыщенность ограничена 600; 700+ ощущается вне бренда. Иерархия строится на размере и цвете, а не на насыщенности.
+- **Засечки для души, гротеск для системы**: Signifier появляется только в редакционных дисплейных моментах. Продуктовый интерфейс — исключительно гротеск.
+- **Отрицательный трекинг на крупных размерах**: -0.02em для дисплейных размеров; трекинг возвращается к нулю к 16px.
+
+## 4. Стилизация компонентов
+
+### Кнопки
+
+**Основная**
+- Background: `#0d0d0d`
+- Text: `#ffffff`
+- Padding: 10px 18px
+- Radius: 9999px (полная таблетка) для чипов, 12px для прямоугольных CTA
+- Hover: фон `#1a1a1a`
+- Использование: Основной CTA, «Попробовать ChatGPT», «Войти»
+
+**Вторичная**
+- Background: `#ffffff`
+- Text: `#0d0d0d`
+- Border: 1px solid `#e5e5e5`
+- Padding: 10px 18px
+- Radius: 12px
+- Hover: фон `#fafafa`, рамка `#d4d4d4`
+
+**Акцентная (бренд)**
+- Background: `#10a37f`
+- Text: `#ffffff`
+- Padding: 10px 18px
+- Radius: 12px
+- Hover: `#0a7a5e`
+- Использование: Выделенный CTA апгрейда, путь успеха
+
+### Карточки
+- Background: `#ffffff`
+- Border: 1px solid `#ededed`
+- Radius: 16px
+- Padding: 24px–32px
+- Shadow: нет по умолчанию; при наведении `0 4px 16px rgba(13,13,13,0.06)`
+
+### Поля ввода
+- Background: `#ffffff`
+- Border: 1px solid `#e5e5e5`
+- Radius: 12px
+- Padding: 12px 14px
+- Focus: рамка `#10a37f`, кольцо `0 0 0 3px rgba(16,163,127,0.12)`
+
+### Таблетки и теги
+- Background: `#f5f5f5`
+- Text: `#3c3c3c`
+- Padding: 4px 10px
+- Radius: 9999px
+- Font: 12px / 500
+
+## 5. Отступы и раскладка
+
+- **Базовая единица**: 4px. Шкала: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128.
+- **Контейнер**: max-width 1200px, отступ 24px на мобильных, 48px на десктопе.
+- **Ритм секций**: 96–128px по вертикали между основными секциями; 64px на мобильных.
+- **Сетка**: 12 колонок на десктопе, 4 колонки на мобильных, зазор 24px.
+
+## 6. Анимация
+
+- **Продолжительность**: 150–220ms для наведения; 280–360ms для переходов раскладки.
+- **Плавность**: `cubic-bezier(0.16, 1, 0.3, 1)` (плавный выход) для появлений.
+- **Сдержанность**: никакого параллакса, никакого перехвата прокрутки. Только тонкое угасание и смещение.
+
+## 7. Ограничения использования
+
+- Сохраняйте нейтральную редакционную сдержанность, мягкие скругления и скупое использование акцентного цвета вместе; зелёные акценты сами по себе не создают поверхность в духе OpenAI.
+- Используйте дисплейные моменты в стиле Signifier только для редакционной или анонсовой иерархии, оставляя элементы управления продуктом в гротескной системе.
+- Избегайте декоративной анимации, тяжёлых теней и чрезмерно крупных декоративных карточек; система должна ощущаться спокойной, читаемой и осмысленной.

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

@@ -0,0 +1,146 @@
+# OpenAI'dan İlham Alan Tasarım Sistemi
+
+> Category: Yapay Zeka & Büyük Dil Modelleri
+> Derin teal-siyahına dayanan, geniş beyaz alan ve editoryal tipografiyle oluşturulmuş sakin, neredeyse tek renkli sistem.
+
+## 1. Görsel Tema ve Atmosfer
+
+OpenAI'ın ürün yüzeyi, kamuya açık bir araştırma laboratuvarı gibi okunur — klinik, kısıtlı ve kasıtlı olarak sessiz. Sayfa arka planı gerçek beyaz (`#ffffff`) üzerine hafif teal alt tonu taşıyan neredeyse siyah bir mürekkep (`#0d0d0d`) katmanıyla oluşturulmuştur; bu sayede metnin kendisi bile koyu yerine hafifçe soğuk bir izlenim bırakır. Sonuç, model çıktısını, kodu ve nesri ön plana taşıyan; onları çevreleyen kabuğu değil, içeriği ön plana çıkaran bir kromatik nötrlüktür.
+
+Sistemin imza hamlesi, kısıtlı ağırlıklarda — gövde için 400, gezinti ve etiketler için 500, vurgu için 600 — **Söhne** (ya da sistem alternatifi `inter`) kullanımı ve bunun editoryal görüntü için kullanılan çağdaş bir serif olan **Signifier** ile eşleştirilmesidir. Pek çok yapay zeka markası fütüristik bir görünüme yönelirken, OpenAI'ın serif başlıkları ürüne sessiz sedasız edebi bir ton katar; sanki her duyuru bir denemeymiş gibi.
+
+Şekil sistemi düzgün biçimde yumuşaktır: 8px–12px yarıçaplar, etiket ve yongalar için 9999px haplar, hiçbir yerde sert köşe yoktur. Bölüm geçişleri bölücüler yerine beyaz boşlukla belirtilir; kenarlıklar göründüğünde `#e5e5e5` ince çizgilerdir ve bu çizgiler rengin varlığından çok yokluğunu çağrıştırır.
+
+**Temel Özellikler:**
+- Gerçek beyaz tuval (`#ffffff`) ve derin teal-siyahı mürekkep (`#0d0d0d`)
+- Söhne / Inter mütevazı ağırlıklarda (400, 500, 600) — iddialılık değil, kısıtlılık
+- Editoryal görüntü başlıkları için Signifier serif
+- Her yerde yumuşak 8–12px yarıçaplar; yongalar için 9999px haplar
+- İnce kenarlıklar (`#e5e5e5`) tutumlu kullanım; birincil bölücü olarak beyaz boşluk
+- Derin teal rengiyle tek renkli illüstrasyonlar — markalarda gradyan yok
+- Geniş satır yüksekliği (1.55–1.65) ve sıfıra yakın harf aralığı
+
+## 2. Renk Paleti ve Rolleri
+
+### Birincil
+- **Saf Beyaz** (`#ffffff`): Birincil arka plan, kart yüzeyi, düğme arka planı.
+- **Mürekkep Siyahı** (`#0d0d0d`): Birincil metin, marka işareti, birincil eylem çağrısı.
+- **Yumuşak Siyah** (`#1a1a1a`): İkincil başlık, kritik olmayan metinler için alternatif mürekkep.
+
+### Yüzey ve Arka Plan
+- **Sis** (`#fafafa`): Bölüm arası arka plan, altbilgi yüzeyi.
+- **İnci** (`#f5f5f5`): Kart yüzeyi, yükseltilmiş panel.
+- **Bulut** (`#ececec`): Devre dışı arka plan, bölücü tonu.
+
+### Marka Vurgusu
+- **OpenAI Teal** (`#10a37f`): Marka birincil rengi, bağlantı, vurgulama rozeti — aksi hâlde nötr sistemde tek renk.
+- **Teal Koyu** (`#0a7a5e`): Marka rengi için üzerine gelme ve basılma durumu.
+- **Teal Açık** (`#e8f5f0`): Başarı rozetleri ve vurgulama belirtim kutuları için yüzey tonu.
+
+### Nötrler ve Metin
+- **Grafit** (`#3c3c3c`): Gövde metni, varsayılan okuma rengi.
+- **Arduvaz** (`#6e6e6e`): İkincil metin, altyazılar, meta veri.
+- **Kül** (`#9b9b9b`): Üçüncül metin, yer tutucu, devre dışı etiket.
+- **Taş** (`#c4c4c4`): Dekoratif bölücüler, soluk simgeler.
+
+### Anlamsal ve Kenarlık
+- **Kenarlık İnce** (`#e5e5e5`): Standart ince çizgi ayırıcı.
+- **Kenarlık Yumuşak** (`#ededed`): Beyaz yüzeyde kart ana hattı.
+- **Hata** (`#ef4146`): Doğrulama, yıkıcı eylem.
+- **Uyarı** (`#f5a623`): Danışma durumları için yumuşak kehribar.
+- **Bilgi** (`#2563eb`): Bilgilendirici bağlantı tonu (tutumlu kullanılır; teal yine de öne çıkar).
+
+## 3. Tipografi Kuralları
+
+### Yazı Ailesi
+- **Görüntü / Editoryal**: `Signifier`, geri dönüş: `'Source Serif Pro', Georgia, serif`
+- **Gövde / Arayüz**: `Söhne`, geri dönüş: `Inter, system-ui, -apple-system, 'Segoe UI', sans-serif`
+- **Kod / Monospace**: `Söhne Mono`, geri dönüş: `ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace`
+
+### Hiyerarşi
+
+| Rol | Yazı Tipi | Boyut | Ağırlık | Satır Yüksekliği | Harf Aralığı | Notlar |
+|------|------|------|--------|-------------|----------------|-------|
+| Görüntü | Signifier | 56px (3.5rem) | 400 | 1.08 | -0.02em | Editoryal kahraman, duyuru başlıkları |
+| H1 | Söhne | 40px (2.5rem) | 600 | 1.15 | -0.01em | Sayfa başlığı |
+| H2 | Söhne | 28px (1.75rem) | 600 | 1.2 | -0.005em | Bölüm başlığı |
+| H3 | Söhne | 20px (1.25rem) | 600 | 1.3 | normal | Alt bölüm |
+| Büyük Gövde | Söhne | 18px (1.125rem) | 400 | 1.6 | normal | Giriş paragrafları |
+| Gövde | Söhne | 16px (1rem) | 400 | 1.65 | normal | Standart okuma metni |
+| Küçük Gövde | Söhne | 14px (0.875rem) | 400 | 1.55 | normal | Kart gövdesi, yoğun arayüz |
+| Altyazı | Söhne | 13px (0.8125rem) | 500 | 1.4 | 0.01em | Meta veri, rozetler |
+| Etiket | Söhne | 12px (0.75rem) | 500 | 1.3 | 0.04em | Kaş metni, büyük harfli gezinti bağlantıları |
+| Kod | Söhne Mono | 14px (0.875rem) | 400 | 1.55 | normal | Kod blokları, terminal çıktısı |
+
+### İlkeler
+- **Kısıtlılık bir kimlik olarak**: Ağırlıklar 600 ile sınırlıdır; 700 ve üzeri marka dışı hissettirır. Hiyerarşi ağırlıktan değil, boyut ve renkten gelir.
+- **Ruh için serif, sistem için sans-serif**: Signifier yalnızca editoryal görüntü anlarında kullanılır. Ürün arayüzü tamamen sans-serif'tir.
+- **Görüntü boyutlarında negatif harf aralığı**: Görüntü boyutlarında -0.02em; 16px'te harf aralığı sıfıra döner.
+
+## 4. Bileşen Stilleri
+
+### Düğmeler
+
+**Birincil**
+- Arka plan: `#0d0d0d`
+- Metin: `#ffffff`
+- Dolgu: 10px 18px
+- Yarıçap: Yongalarda 9999px (tam hap), dikdörtgen eylem çağrılarında 12px
+- Üzerine gelme: `#1a1a1a` arka plan
+- Kullanım: Birincil eylem çağrısı, "ChatGPT'yi Dene", "Giriş yap"
+
+**İkincil**
+- Arka plan: `#ffffff`
+- Metin: `#0d0d0d`
+- Kenarlık: 1px solid `#e5e5e5`
+- Dolgu: 10px 18px
+- Yarıçap: 12px
+- Üzerine gelme: arka plan `#fafafa`, kenarlık `#d4d4d4`
+
+**Marka Vurgusu**
+- Arka plan: `#10a37f`
+- Metin: `#ffffff`
+- Dolgu: 10px 18px
+- Yarıçap: 12px
+- Üzerine gelme: `#0a7a5e`
+- Kullanım: Öne çıkan yükseltme eylem çağrısı, başarı yolu
+
+### Kartlar
+- Arka plan: `#ffffff`
+- Kenarlık: 1px solid `#ededed`
+- Yarıçap: 16px
+- Dolgu: 24px–32px
+- Gölge: Varsayılan olarak yok; üzerine gelindiğinde `0 4px 16px rgba(13,13,13,0.06)`
+
+### Girdiler
+- Arka plan: `#ffffff`
+- Kenarlık: 1px solid `#e5e5e5`
+- Yarıçap: 12px
+- Dolgu: 12px 14px
+- Odak: kenarlık `#10a37f`, halka `0 0 0 3px rgba(16,163,127,0.12)`
+
+### Haplar ve Etiketler
+- Arka plan: `#f5f5f5`
+- Metin: `#3c3c3c`
+- Dolgu: 4px 10px
+- Yarıçap: 9999px
+- Yazı tipi: 12px / 500
+
+## 5. Boşluk ve Düzen
+
+- **Temel birim**: 4px. Ölçek: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128.
+- **Kapsayıcı**: Maksimum genişlik 1200px, mobilde 24px oluk, masaüstünde 48px.
+- **Bölüm ritmi**: Ana bölümler arasında dikey olarak 96–128px; mobilde 64px.
+- **Izgara**: Masaüstünde 12 sütun, mobilde 4 sütun, 24px boşluk.
+
+## 6. Hareket
+
+- **Süre**: Üzerine gelme için 150–220ms; düzen geçişleri için 280–360ms.
+- **Yumuşatma**: Girişler için `cubic-bezier(0.16, 1, 0.3, 1)` (düzgün çıkış).
+- **Kısıtlılık**: Paralaks yok, kaydırma engeli yok. Yalnızca hafif solma ve öteleme.
+
+## 7. Kullanım Yönergeleri
+
+- Nötr editoryal kısıtlılığı, yumuşak yarıçapı ve seyrek vurgu kullanımını bir arada koruyun; yeşil vurgu renkler tek başına OpenAI benzeri bir yüzey oluşturmaz.
+- Signifier tarzı görüntü anlarını yalnızca editoryal veya duyuru hiyerarşisi için kullanın; ürün kontrolleri sans-serif sisteminde kalsın.
+- Süslü hareketlerden, ağır gölgelerden ve aşırı büyük dekoratif kartlardan kaçının; sistem sakin, okunabilir ve kasıtlı hissettirmelidir.

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

@@ -0,0 +1,146 @@
+# Design System Inspired by OpenAI
+
+> Category: ШІ та великі мовні моделі
+> Спокійна, майже монохромна система на основі глибокого чорно-бірюзового кольору з великою кількістю білого простору та редакційною типографікою.
+
+## 1. Візуальна тема та атмосфера
+
+Продуктовий інтерфейс OpenAI читається як дослідницька лабораторія, відкрита для широкої публіки — клінічний, стриманий, навмисно тихий. Фон сторінки — справжній білий (`#ffffff`), що накладається на майже чорний чорнильний колір (`#0d0d0d`) із ледь помітним бірюзовим відтінком, тому навіть текст сприймається дещо охолодженим, а не агресивно темним. Результатом є хроматична нейтральність, яка виводить на перший план вивід моделі, код і прозу, а не обрамлення навколо них.
+
+Відмітний прийом — використання **Söhne** (або системної заміни `inter`) у стриманих насиченостях — 400 для основного тексту, 500 для навігації та підписів, 600 для акцентів — у поєднанні з **Signifier**, сучасним шрифтом із зарубками для редакційних заголовків. Там де більшість брендів у сфері ШІ тяжіють до футуристичності, засічкові заголовки OpenAI надають продукту тихо літературного тону — ніби кожне оголошення є есе.
+
+Система форм однорідно м'яка: радіуси 8–12px, пілюлі 9999px для міток і чіпів, жодних гострих кутів. Переходи між секціями позначаються пробілами, а не роздільниками; коли межі з'являються, це лінії `#e5e5e5` завтовшки з волосину, які сприймаються як відсутність кольору, а не його присутність.
+
+**Key Characteristics:**
+- Справжнє біле полотно (`#ffffff`) з глибоким чорно-бірюзовим чорнилом (`#0d0d0d`)
+- Söhne / Inter у скромних насиченостях (400, 500, 600) — стриманість замість наполегливості
+- Засічковий Signifier для редакційних заголовків
+- М'які радіуси 8–12px скрізь; пілюлі 9999px для чіпів
+- Лінії завтовшки з волосину (`#e5e5e5`) використовуються рідко; білий простір як основний роздільник
+- Одноколірні ілюстрації в глибокому бірюзовому — жодних градієнтів у знаках
+- Щедра міжрядкова відстань (1.55–1.65) і трекінг близький до нуля
+
+## 2. Кольорова палітра та ролі
+
+### Основні
+- **Pure White** (`#ffffff`): Основний фон, поверхня картки, фон кнопки.
+- **Ink Black** (`#0d0d0d`): Основний текст, знак бренду, основний заклик до дії.
+- **Soft Black** (`#1a1a1a`): Вторинний заголовок, альтернативний колір чорнила для некритичного тексту.
+
+### Поверхня та фон
+- **Mist** (`#fafafa`): Фон розривів секцій, поверхня підвалу.
+- **Pearl** (`#f5f5f5`): Поверхня картки, піднята панель.
+- **Cloud** (`#ececec`): Вимкнений фон, відтінок роздільника.
+
+### Акцент бренду
+- **OpenAI Teal** (`#10a37f`): Основний колір бренду, посилання, виділений значок — єдиний колір в іншій нейтральній системі.
+- **Teal Deep** (`#0a7a5e`): Стан наведення та натискання для кольору бренду.
+- **Teal Soft** (`#e8f5f0`): Відтінок поверхні для значків успіху, виділених виносок.
+
+### Нейтральні та текстові
+- **Graphite** (`#3c3c3c`): Основний текст, стандартний колір для читання.
+- **Slate** (`#6e6e6e`): Вторинний текст, підписи, метадані.
+- **Ash** (`#9b9b9b`): Третинний текст, заповнювач, вимкнений підпис.
+- **Stone** (`#c4c4c4`): Декоративні роздільники, ледь помітні іконки.
+
+### Семантичні та межі
+- **Border Hairline** (`#e5e5e5`): Стандартний роздільник завтовшки з волосину.
+- **Border Soft** (`#ededed`): Обведення картки на білій поверхні.
+- **Error** (`#ef4146`): Валідація, деструктивна дія.
+- **Warning** (`#f5a623`): М'який бурштиновий для консультативних станів.
+- **Info** (`#2563eb`): Інформаційний тон посилання (використовується рідко; бірюзовий все одно домінує).
+
+## 3. Правила типографіки
+
+### Font Family
+- **Display / Editorial**: `Signifier`, із запасним варіантом: `'Source Serif Pro', Georgia, serif`
+- **Body / UI**: `Söhne`, із запасним варіантом: `Inter, system-ui, -apple-system, 'Segoe UI', sans-serif`
+- **Code / Mono**: `Söhne Mono`, із запасним варіантом: `ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace`
+
+### Ієрархія
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display | Signifier | 56px (3.5rem) | 400 | 1.08 | -0.02em | Редакційний герой, заголовки оголошень |
+| H1 | Söhne | 40px (2.5rem) | 600 | 1.15 | -0.01em | Заголовок сторінки |
+| H2 | Söhne | 28px (1.75rem) | 600 | 1.2 | -0.005em | Заголовок секції |
+| H3 | Söhne | 20px (1.25rem) | 600 | 1.3 | normal | Підсекція |
+| Body Large | Söhne | 18px (1.125rem) | 400 | 1.6 | normal | Вступні абзаци |
+| Body | Söhne | 16px (1rem) | 400 | 1.65 | normal | Стандартний текст для читання |
+| Body Small | Söhne | 14px (0.875rem) | 400 | 1.55 | normal | Тіло картки, щільний інтерфейс |
+| Caption | Söhne | 13px (0.8125rem) | 500 | 1.4 | 0.01em | Метадані, значки |
+| Label | Söhne | 12px (0.75rem) | 500 | 1.3 | 0.04em | Надбрівна дуга, посилання навігації у верхньому регістрі |
+| Code | Söhne Mono | 14px (0.875rem) | 400 | 1.55 | normal | Блоки коду, вивід терміналу |
+
+### Принципи
+- **Стриманість як ідентичність**: насиченості обмежені 600; 700+ виглядає невідповідно бренду. Ієрархія визначається розміром і кольором, а не насиченістю.
+- **Засічковий для душі, без зарубок для системи**: Signifier з'являється лише в редакційних моментах. Інтерфейс продукту — виключно без зарубок.
+- **Негативний трекінг для великих розмірів**: -0.02em для розмірів display; трекінг повертається до нуля при 16px.
+
+## 4. Стилі компонентів
+
+### Кнопки
+
+**Primary**
+- Background: `#0d0d0d`
+- Text: `#ffffff`
+- Padding: 10px 18px
+- Radius: 9999px (full pill) для чіпів, 12px для прямокутних закликів до дії
+- Hover: фон `#1a1a1a`
+- Використання: Основний заклик до дії, "Try ChatGPT", "Sign in"
+
+**Secondary**
+- Background: `#ffffff`
+- Text: `#0d0d0d`
+- Border: 1px solid `#e5e5e5`
+- Padding: 10px 18px
+- Radius: 12px
+- Hover: фон `#fafafa`, межа `#d4d4d4`
+
+**Brand Accent**
+- Background: `#10a37f`
+- Text: `#ffffff`
+- Padding: 10px 18px
+- Radius: 12px
+- Hover: `#0a7a5e`
+- Використання: Виділений заклик до оновлення, шлях успіху
+
+### Картки
+- Background: `#ffffff`
+- Border: 1px solid `#ededed`
+- Radius: 16px
+- Padding: 24px–32px
+- Shadow: немає за замовчуванням; при наведенні `0 4px 16px rgba(13,13,13,0.06)`
+
+### Поля введення
+- Background: `#ffffff`
+- Border: 1px solid `#e5e5e5`
+- Radius: 12px
+- Padding: 12px 14px
+- Focus: межа `#10a37f`, обведення `0 0 0 3px rgba(16,163,127,0.12)`
+
+### Пілюлі та мітки
+- Background: `#f5f5f5`
+- Text: `#3c3c3c`
+- Padding: 4px 10px
+- Radius: 9999px
+- Font: 12px / 500
+
+## 5. Відступи та розмітка
+
+- **Базова одиниця**: 4px. Шкала: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128.
+- **Контейнер**: max-width 1200px, відступ 24px на мобільних, 48px на десктопі.
+- **Ритм секцій**: 96–128px по вертикалі між основними секціями; 64px на мобільних.
+- **Сітка**: 12 колонок на десктопі, 4 колонки на мобільних, проміжок 24px.
+
+## 6. Рух
+
+- **Тривалість**: 150–220ms для наведення; 280–360ms для переходів розмітки.
+- **Пом'якшення**: `cubic-bezier(0.16, 1, 0.3, 1)` (плавний вихід) для появи елементів.
+- **Стриманість**: без паралаксу, без перехоплення прокрутки. Лише ледь помітне згасання та зсув.
+
+## 7. Обмеження використання
+
+- Зберігайте нейтральну редакційну стриманість, м'який радіус і рідке використання акцентів разом; зелені акценти самі по собі не створюють поверхні в стилі OpenAI.
+- Використовуйте моменти відображення в стилі Signifier лише для редакційної або оголошувальної ієрархії, залишаючи елементи керування продуктом у системі без зарубок.
+- Уникайте орнаментального руху, важких тіней і надмірно великих декоративних карток; система має відчуватися спокійною, зручною для читання та осмисленою.

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

@@ -0,0 +1,146 @@
+# Design System Inspired by OpenAI
+
+> Category: AI & LLM
+> Hệ thống gần như đơn sắc, bình tĩnh, lấy màu teal-đen đậm làm nền tảng, kết hợp khoảng trắng rộng rãi và kiểu chữ mang phong cách báo chí.
+
+## 1. Chủ Đề Hình Ảnh & Không Khí
+
+Bề mặt sản phẩm của OpenAI gợi lên hình ảnh một phòng thí nghiệm nghiên cứu được chỉnh trang để ra mắt công chúng — lâm sàng, kiềm chế, chủ ý giữ yên lặng. Nền trang là trắng tinh (`#ffffff`) xếp lớp trên mực gần đen (`#0d0d0d`) với ánh teal tinh tế, khiến ngay cả văn bản cũng mang cảm giác hơi lạnh thay vì tối một cách quyết liệt. Kết quả là một sự trung tính màu sắc đặt đầu ra mô hình, mã lệnh và văn xuôi lên hàng đầu, không phải lớp giao diện bao quanh chúng.
+
+Dấu hiệu nhận diện là việc dùng **Söhne** (hoặc font hệ thống thay thế `inter`) ở độ đậm vừa phải — 400 cho phần thân, 500 cho điều hướng và nhãn, 600 cho nhấn mạnh — kết hợp với **Signifier**, một font chữ serif hiện đại dùng cho tiêu đề hiển thị mang tính biên tập. Trong khi phần lớn thương hiệu AI nghiêng về tương lai, những tiêu đề serif của OpenAI mang lại cho sản phẩm một giọng điệu văn học kín đáo, như thể mỗi thông báo đều là một bài luận.
+
+Hệ thống hình dạng đồng nhất và mềm mại: bán kính 8px–12px, pill 9999px cho thẻ và chip, không có góc cạnh thô ráp ở bất kỳ đâu. Ranh giới giữa các section được đánh dấu bằng khoảng trắng thay vì đường kẻ phân cách; khi đường viền xuất hiện, chúng là những đường chân tóc `#e5e5e5` mang cảm giác như sự vắng mặt của màu sắc hơn là sự hiện diện của nó.
+
+**Key Characteristics:**
+- Nền trắng tinh (`#ffffff`) với mực teal-đen đậm (`#0d0d0d`)
+- Söhne / Inter ở độ đậm khiêm tốn (400, 500, 600) — kiềm chế hơn là khẳng định
+- Serif Signifier cho tiêu đề hiển thị mang phong cách biên tập
+- Bán kính mềm 8–12px ở mọi nơi; pill 9999px cho chip
+- Đường viền chân tóc (`#e5e5e5`) dùng tiết kiệm; khoảng trắng là yếu tố phân cách chính
+- Minh họa đơn màu teal đậm — không có gradient trong các dấu hiệu
+- Line-height rộng rãi (1.55–1.65) và tracking gần bằng không
+
+## 2. Bảng Màu & Vai Trò
+
+### Primary
+- **Pure White** (`#ffffff`): Nền chính, bề mặt card, nền nút.
+- **Ink Black** (`#0d0d0d`): Văn bản chính, dấu thương hiệu, CTA chính.
+- **Soft Black** (`#1a1a1a`): Tiêu đề phụ, mực thay thế cho văn bản không quan trọng.
+
+### Surface & Background
+- **Mist** (`#fafafa`): Nền ngắt section, bề mặt footer.
+- **Pearl** (`#f5f5f5`): Bề mặt card, panel nổi.
+- **Cloud** (`#ececec`): Nền bị tắt, tô màu đường phân cách.
+
+### Brand Accent
+- **OpenAI Teal** (`#10a37f`): Màu chính của thương hiệu, link, huy hiệu nổi bật — màu duy nhất trong một hệ thống vốn trung tính.
+- **Teal Deep** (`#0a7a5e`): Trạng thái hover và nhấn cho màu thương hiệu.
+- **Teal Soft** (`#e8f5f0`): Tô màu bề mặt cho huy hiệu thành công, chú thích nổi bật.
+
+### Neutrals & Text
+- **Graphite** (`#3c3c3c`): Văn bản nội dung, màu đọc mặc định.
+- **Slate** (`#6e6e6e`): Văn bản phụ, chú thích, metadata.
+- **Ash** (`#9b9b9b`): Văn bản bậc ba, placeholder, nhãn bị tắt.
+- **Stone** (`#c4c4c4`): Đường phân cách trang trí, biểu tượng mờ.
+
+### Semantic & Border
+- **Border Hairline** (`#e5e5e5`): Đường phân cách chân tóc tiêu chuẩn.
+- **Border Soft** (`#ededed`): Đường viền card trên nền trắng.
+- **Error** (`#ef4146`): Xác nhận, hành động hủy.
+- **Warning** (`#f5a623`): Màu hổ phách nhẹ cho trạng thái cảnh báo.
+- **Info** (`#2563eb`): Sắc độ link thông tin (dùng tiết kiệm; teal vẫn chiếm ưu thế).
+
+## 3. Quy Tắc Typography
+
+### Font Family
+- **Display / Editorial**: `Signifier`, với fallback: `'Source Serif Pro', Georgia, serif`
+- **Body / UI**: `Söhne`, với fallback: `Inter, system-ui, -apple-system, 'Segoe UI', sans-serif`
+- **Code / Mono**: `Söhne Mono`, với fallback: `ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace`
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display | Signifier | 56px (3.5rem) | 400 | 1.08 | -0.02em | Hero biên tập, tiêu đề thông báo |
+| H1 | Söhne | 40px (2.5rem) | 600 | 1.15 | -0.01em | Tiêu đề trang |
+| H2 | Söhne | 28px (1.75rem) | 600 | 1.2 | -0.005em | Tiêu đề section |
+| H3 | Söhne | 20px (1.25rem) | 600 | 1.3 | normal | Tiêu đề phụ section |
+| Body Large | Söhne | 18px (1.125rem) | 400 | 1.6 | normal | Đoạn văn mở đầu |
+| Body | Söhne | 16px (1rem) | 400 | 1.65 | normal | Văn bản đọc tiêu chuẩn |
+| Body Small | Söhne | 14px (0.875rem) | 400 | 1.55 | normal | Nội dung card, giao diện dày đặc |
+| Caption | Söhne | 13px (0.8125rem) | 500 | 1.4 | 0.01em | Metadata, huy hiệu |
+| Label | Söhne | 12px (0.75rem) | 500 | 1.3 | 0.04em | Eyebrow, liên kết điều hướng viết hoa |
+| Code | Söhne Mono | 14px (0.875rem) | 400 | 1.55 | normal | Khối mã, đầu ra terminal |
+
+### Nguyên Tắc
+- **Kiềm chế là bản sắc**: độ đậm tối đa 600; 700+ trông không phù hợp với thương hiệu. Phân cấp đến từ kích thước và màu sắc, không phải độ đậm.
+- **Serif cho hồn, sans cho hệ thống**: Signifier chỉ xuất hiện trong những khoảnh khắc hiển thị biên tập. Giao diện sản phẩm chỉ dùng sans.
+- **Tracking âm trên display**: -0.02em ở kích thước display; tracking trở về không ở 16px.
+
+## 4. Phong Cách Component
+
+### Buttons
+
+**Primary**
+- Background: `#0d0d0d`
+- Text: `#ffffff`
+- Padding: 10px 18px
+- Radius: 9999px (full pill) trên chip, 12px trên CTA dạng chữ nhật
+- Hover: nền `#1a1a1a`
+- Dùng cho: CTA chính, "Try ChatGPT", "Sign in"
+
+**Secondary**
+- Background: `#ffffff`
+- Text: `#0d0d0d`
+- Border: 1px solid `#e5e5e5`
+- Padding: 10px 18px
+- Radius: 12px
+- Hover: nền `#fafafa`, border `#d4d4d4`
+
+**Brand Accent**
+- Background: `#10a37f`
+- Text: `#ffffff`
+- Padding: 10px 18px
+- Radius: 12px
+- Hover: `#0a7a5e`
+- Dùng cho: CTA nâng cấp nổi bật, luồng thành công
+
+### Cards
+- Background: `#ffffff`
+- Border: 1px solid `#ededed`
+- Radius: 16px
+- Padding: 24px–32px
+- Shadow: không có mặc định; khi hover `0 4px 16px rgba(13,13,13,0.06)`
+
+### Inputs
+- Background: `#ffffff`
+- Border: 1px solid `#e5e5e5`
+- Radius: 12px
+- Padding: 12px 14px
+- Focus: border `#10a37f`, ring `0 0 0 3px rgba(16,163,127,0.12)`
+
+### Pills & Tags
+- Background: `#f5f5f5`
+- Text: `#3c3c3c`
+- Padding: 4px 10px
+- Radius: 9999px
+- Font: 12px / 500
+
+## 5. Spacing & Layout
+
+- **Đơn vị cơ bản**: 4px. Thang: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128.
+- **Container**: max-width 1200px, gutter 24px trên mobile, 48px trên desktop.
+- **Nhịp section**: 96–128px dọc giữa các section chính; 64px trên mobile.
+- **Grid**: 12 cột desktop, 4 cột mobile, khoảng cách 24px.
+
+## 6. Motion
+
+- **Duration**: 150–220ms cho hover; 280–360ms cho chuyển đổi layout.
+- **Easing**: `cubic-bezier(0.16, 1, 0.3, 1)` (smooth out) cho entrance.
+- **Kiềm chế**: không parallax, không scroll-jacking. Chỉ dùng fade và translate tinh tế.
+
+## 7. Hướng Dẫn Sử Dụng
+
+- Duy trì sự kiềm chế biên tập trung tính, bán kính mềm và việc dùng accent tiết kiệm cùng nhau; accent xanh lá đơn độc không tạo ra bề mặt mang phong cách OpenAI.
+- Chỉ dùng những khoảnh khắc hiển thị kiểu Signifier cho phân cấp biên tập hoặc thông báo, giữ các control sản phẩm trong hệ thống sans.
+- Tránh motion trang trí, shadow nặng và card trang trí quá khổ; hệ thống phải mang cảm giác bình tĩnh, dễ đọc và có chủ đích.

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

@@ -0,0 +1,146 @@
+# 以 OpenAI 為靈感的設計系統
+
+> Category: AI 與大型語言模型
+> 以深色藍綠黑為錨點、搭配寬裕留白與編輯感排版的沉靜近無彩系統。
+
+## 1. 視覺主題與氛圍
+
+OpenAI 的產品介面讀起來像一座為公眾開放的研究室——理性、克制、刻意保持靜謐。頁面背景為純白（`#ffffff`），疊加帶有微妙藍綠底色的近黑墨色（`#0d0d0d`），使文字呈現一種偏冷而非過分深沉的質感。這種色彩中性感將模型輸出、程式碼與文章段落推到視覺中心，而非讓周遭的框架搶戲。
+
+系統的標誌性做法是以克制字重使用 **Söhne**（或其系統替代字型 `inter`）——內文 400、導覽與標籤 500、強調 600——並搭配 **Signifier**，一款用於編輯展示的當代襯線字型。多數 AI 品牌偏向未來感，OpenAI 的襯線標題卻賦予產品一種靜謐的文學氣質，彷彿每則公告都是一篇文章。
+
+造型系統統一採用柔和圓角：8px–12px 的圓角半徑，標籤與徽章使用 9999px 圓滑膠囊形，任何地方都不見尖銳稜角。區塊之間以留白而非分隔線做為過渡；若出現邊框，則是 `#e5e5e5` 的細線，讀起來更像色彩的缺席而非存在。
+
+**主要特徵：**
+- 純白畫布（`#ffffff`）搭配深色藍綠黑墨（`#0d0d0d`）
+- Söhne / Inter 採用適中字重（400、500、600）——強調克制而非張揚
+- Signifier 襯線字型用於編輯展示標題
+- 全域柔和 8–12px 圓角；徽章採用 9999px 膠囊形
+- 細線邊框（`#e5e5e5`）謹慎使用；留白為主要分隔手段
+- 深藍綠單色插圖——標誌符號中不使用漸層
+- 寬裕行高（1.55–1.65），字距趨近於零
+
+## 2. 色彩調色盤與角色
+
+### 主色
+- **純白** (`#ffffff`)：主背景、卡片表面、按鈕背景。
+- **墨黑** (`#0d0d0d`)：主文字、品牌標誌、主要行動按鈕。
+- **柔黑** (`#1a1a1a`)：次要標題、非關鍵文字的替代墨色。
+
+### 介面表面與背景
+- **薄霧** (`#fafafa`)：區塊分隔背景、頁尾介面。
+- **珍珠** (`#f5f5f5`)：卡片表面、高架面板。
+- **雲白** (`#ececec`)：禁用狀態背景、分隔色調。
+
+### 品牌強調色
+- **OpenAI Teal** (`#10a37f`)：品牌主色、連結、高亮徽章——在近無彩系統中唯一的有彩色。
+- **Teal Deep** (`#0a7a5e`)：品牌色的懸停與按下狀態。
+- **Teal Soft** (`#e8f5f0`)：成功徽章、高亮提示塊的介面色調。
+
+### 中性色與文字色
+- **石墨** (`#3c3c3c`)：內文、預設閱讀色。
+- **板岩** (`#6e6e6e`)：次要文字、說明、後設資料。
+- **灰燼** (`#9b9b9b`)：第三層文字、預留位置、禁用標籤。
+- **石灰** (`#c4c4c4`)：裝飾性分隔線、淡色圖示。
+
+### 語意色與邊框
+- **Border Hairline** (`#e5e5e5`)：標準細線分隔。
+- **Border Soft** (`#ededed`)：白色介面上的卡片外框。
+- **Error** (`#ef4146`)：驗證錯誤、破壞性操作。
+- **Warning** (`#f5a623`)：柔和琥珀色，用於提示狀態。
+- **Info** (`#2563eb`)：資訊連結色調（謹慎使用；藍綠色仍為主角）。
+
+## 3. 字體排版規則
+
+### 字型家族
+- **展示 / 編輯**：`Signifier`，後備字型：`'Source Serif Pro', Georgia, serif`
+- **內文 / 介面**：`Söhne`，後備字型：`Inter, system-ui, -apple-system, 'Segoe UI', sans-serif`
+- **程式碼 / 等寬**：`Söhne Mono`，後備字型：`ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace`
+
+### 層次結構
+
+| 角色 | 字型 | 尺寸 | 字重 | 行高 | 字距 | 備註 |
+|------|------|------|--------|-------------|----------------|-------|
+| Display | Signifier | 56px (3.5rem) | 400 | 1.08 | -0.02em | 編輯英雄區、公告標題 |
+| H1 | Söhne | 40px (2.5rem) | 600 | 1.15 | -0.01em | 頁面標題 |
+| H2 | Söhne | 28px (1.75rem) | 600 | 1.2 | -0.005em | 區塊標題 |
+| H3 | Söhne | 20px (1.25rem) | 600 | 1.3 | normal | 子區塊 |
+| Body Large | Söhne | 18px (1.125rem) | 400 | 1.6 | normal | 導言段落 |
+| Body | Söhne | 16px (1rem) | 400 | 1.65 | normal | 標準閱讀文字 |
+| Body Small | Söhne | 14px (0.875rem) | 400 | 1.55 | normal | 卡片內文、高密度介面 |
+| Caption | Söhne | 13px (0.8125rem) | 500 | 1.4 | 0.01em | 後設資料、徽章 |
+| Label | Söhne | 12px (0.75rem) | 500 | 1.3 | 0.04em | 眉標、大寫導覽連結 |
+| Code | Söhne Mono | 14px (0.875rem) | 400 | 1.55 | normal | 程式碼區塊、終端機輸出 |
+
+### 原則
+- **克制即風格**：字重上限為 600；700 以上顯得偏離品牌調性。層次感來自尺寸與顏色，而非字重。
+- **襯線賦予靈魂，無襯線承載系統**：Signifier 僅用於編輯展示的特定時刻，產品介面一律使用無襯線字型。
+- **展示字級採用負字距**：展示字級使用 -0.02em；16px 起字距回歸至零。
+
+## 4. 元件樣式
+
+### 按鈕
+
+**主要按鈕**
+- Background: `#0d0d0d`
+- Text: `#ffffff`
+- Padding: 10px 18px
+- Radius: 9999px（徽章用全圓膠囊形），矩形行動按鈕用 12px
+- Hover: `#1a1a1a` background
+- 用途：主要行動按鈕、「試用 ChatGPT」、「登入」
+
+**次要按鈕**
+- Background: `#ffffff`
+- Text: `#0d0d0d`
+- Border: 1px solid `#e5e5e5`
+- Padding: 10px 18px
+- Radius: 12px
+- Hover: background `#fafafa`，border `#d4d4d4`
+
+**品牌強調按鈕**
+- Background: `#10a37f`
+- Text: `#ffffff`
+- Padding: 10px 18px
+- Radius: 12px
+- Hover: `#0a7a5e`
+- 用途：升級方案的高亮行動按鈕、成功路徑
+
+### 卡片
+- Background: `#ffffff`
+- Border: 1px solid `#ededed`
+- Radius: 16px
+- Padding: 24px–32px
+- Shadow: 預設無；懸停時 `0 4px 16px rgba(13,13,13,0.06)`
+
+### 輸入框
+- Background: `#ffffff`
+- Border: 1px solid `#e5e5e5`
+- Radius: 12px
+- Padding: 12px 14px
+- Focus: border `#10a37f`，ring `0 0 0 3px rgba(16,163,127,0.12)`
+
+### 膠囊標籤
+- Background: `#f5f5f5`
+- Text: `#3c3c3c`
+- Padding: 4px 10px
+- Radius: 9999px
+- Font: 12px / 500
+
+## 5. 間距與版面
+
+- **基礎單位**：4px。刻度：4、8、12、16、24、32、48、64、96、128。
+- **容器**：最大寬度 1200px，行動裝置 24px 側邊距，桌機 48px。
+- **區塊節奏**：主要區塊間垂直間距 96–128px；行動裝置 64px。
+- **格線**：桌機 12 欄，行動裝置 4 欄，間距 24px。
+
+## 6. 動態效果
+
+- **持續時間**：懸停 150–220ms；版面切換 280–360ms。
+- **緩動函數**：入場使用 `cubic-bezier(0.16, 1, 0.3, 1)`（平滑淡出）。
+- **克制原則**：不使用視差效果，不劫持滾動。僅採用細膩的淡入與位移。
+
+## 7. 使用規範
+
+- 中性編輯克制感、柔和圓角與稀疏強調色三者需整體保留；單獨使用綠色強調色並無法還原 OpenAI 風格的介面質感。
+- Signifier 風格的展示字型時刻僅限於編輯或公告層級的場景，產品控制元件一律維持在無襯線字型系統中。
+- 避免裝飾性動效、厚重陰影與過大的裝飾卡片；整體系統應呈現沉靜、易讀且深思熟慮的氣質。

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

@@ -0,0 +1,146 @@
+# 受 OpenAI 启发的设计系统
+
+> Category: AI 与大语言模型
+> 沉静、近乎单色的设计系统，以深青黑为锚点，搭配充裕的留白与编辑风排版。
+
+## 1. 视觉主题与氛围
+
+OpenAI 的产品界面读起来像一座面向公众开放的研究室——严谨、克制、刻意地安静。页面背景是纯白（`#ffffff`），与近黑的墨色（`#0d0d0d`）叠置，后者带有隐约的青色底调，使文字呈现出微微冷感，而非咄咄逼人的深暗。这种无彩色中性感将模型输出、代码与文字推至视觉中心，而非让外框喧宾夺主。
+
+标志性手法是以克制的字重使用 **Söhne**（或其系统替代字体 `inter`）——正文用 400，导航与标签用 500，强调用 600——并与 **Signifier** 搭配，后者是一款当代衬线字体，专用于编辑风展示版面。大多数 AI 品牌倾向于未来感，而 OpenAI 的衬线标题赋予了产品一种悄然的文学气质，仿佛每一篇公告都是一篇随笔。
+
+形状系统统一圆润：8px–12px 圆角，标签与芯片使用 9999px 全圆角胶囊，无处出现生硬的直角。区块之间以留白而非分隔线过渡；当边框出现时，是 `#e5e5e5` 的细线，读起来像颜色的缺席，而非其存在。
+
+**核心特征：**
+- 纯白画布（`#ffffff`）搭配深青黑墨色（`#0d0d0d`）
+- Söhne / Inter，字重保守（400、500、600）——克制胜于张扬
+- Signifier 衬线字体用于编辑风展示标题
+- 全局软圆角 8–12px；芯片使用 9999px 胶囊
+- 细线边框（`#e5e5e5`）谨慎使用；留白为主要分隔手段
+- 深青色单色插图——标志图形中不使用渐变
+- 行高宽松（1.55–1.65），字间距接近零
+
+## 2. 色彩规范与角色
+
+### 主色
+- **纯白** (`#ffffff`)：主背景、卡片表面、按钮背景。
+- **墨黑** (`#0d0d0d`)：主文本、品牌标识、主要行动按钮。
+- **柔黑** (`#1a1a1a`)：次级标题、非关键文字的备选墨色。
+
+### 表面与背景
+- **薄雾** (`#fafafa`)：区块分隔背景、页脚表面。
+- **珍珠** (`#f5f5f5`)：卡片表面、高层级面板。
+- **云白** (`#ececec`)：禁用状态背景、分隔色调。
+
+### 品牌强调色
+- **OpenAI 青** (`#10a37f`)：品牌主色、链接、高亮徽章——在中性系统中唯一的彩色。
+- **深青** (`#0a7a5e`)：品牌色的悬停与按下状态。
+- **浅青** (`#e8f5f0`)：成功徽章与高亮提示的底色。
+
+### 中性色与文字色
+- **石墨** (`#3c3c3c`)：正文、默认阅读色。
+- **板岩** (`#6e6e6e`)：次要文字、说明文字、元数据。
+- **浅灰** (`#9b9b9b`)：三级文字、占位符、禁用标签。
+- **石色** (`#c4c4c4`)：装饰性分隔线、浅色图标。
+
+### 语义色与边框
+- **细线边框** (`#e5e5e5`)：标准细线分隔符。
+- **柔边框** (`#ededed`)：白色表面上的卡片轮廓。
+- **错误** (`#ef4146`)：表单校验、破坏性操作。
+- **警告** (`#f5a623`)：提示性状态的柔和琥珀色。
+- **信息** (`#2563eb`)：信息类链接色调（谨慎使用；青色仍为首选）。
+
+## 3. 排版规则
+
+### 字体族
+- **展示 / 编辑风**：`Signifier`，备用字体：`'Source Serif Pro', Georgia, serif`
+- **正文 / UI**：`Söhne`，备用字体：`Inter, system-ui, -apple-system, 'Segoe UI', sans-serif`
+- **代码 / 等宽**：`Söhne Mono`，备用字体：`ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace`
+
+### 层级
+
+| 角色 | 字体 | 字号 | 字重 | 行高 | 字间距 | 备注 |
+|------|------|------|--------|-------------|----------------|-------|
+| 展示 | Signifier | 56px (3.5rem) | 400 | 1.08 | -0.02em | 编辑风主视觉、公告标题 |
+| H1 | Söhne | 40px (2.5rem) | 600 | 1.15 | -0.01em | 页面标题 |
+| H2 | Söhne | 28px (1.75rem) | 600 | 1.2 | -0.005em | 区块标题 |
+| H3 | Söhne | 20px (1.25rem) | 600 | 1.3 | normal | 子区块标题 |
+| 大正文 | Söhne | 18px (1.125rem) | 400 | 1.6 | normal | 导语段落 |
+| 正文 | Söhne | 16px (1rem) | 400 | 1.65 | normal | 标准阅读文字 |
+| 小正文 | Söhne | 14px (0.875rem) | 400 | 1.55 | normal | 卡片正文、密集 UI |
+| 说明 | Söhne | 13px (0.8125rem) | 500 | 1.4 | 0.01em | 元数据、徽章 |
+| 标签 | Söhne | 12px (0.75rem) | 500 | 1.3 | 0.04em | 眉题、大写导航链接 |
+| 代码 | Söhne Mono | 14px (0.875rem) | 400 | 1.55 | normal | 代码块、终端输出 |
+
+### 原则
+- **克制即身份**：字重上限为 600；700 及以上会偏离品牌气质。层级通过字号与颜色区分，而非字重。
+- **衬线赋予灵魂，无衬线支撑系统**：Signifier 仅出现在编辑风展示时刻，产品 UI 全部使用无衬线字体。
+- **展示文字负字间距**：展示字号使用 -0.02em；16px 时字间距归零。
+
+## 4. 组件样式
+
+### 按钮
+
+**主要按钮**
+- 背景：`#0d0d0d`
+- 文字：`#ffffff`
+- 内边距：10px 18px
+- 圆角：芯片使用 9999px（全胶囊），矩形行动按钮使用 12px
+- 悬停：背景 `#1a1a1a`
+- 用途：主要行动按钮、"体验 ChatGPT"、"登录"
+
+**次要按钮**
+- 背景：`#ffffff`
+- 文字：`#0d0d0d`
+- 边框：1px solid `#e5e5e5`
+- 内边距：10px 18px
+- 圆角：12px
+- 悬停：背景 `#fafafa`，边框 `#d4d4d4`
+
+**品牌强调按钮**
+- 背景：`#10a37f`
+- 文字：`#ffffff`
+- 内边距：10px 18px
+- 圆角：12px
+- 悬停：`#0a7a5e`
+- 用途：高亮升级行动按钮、成功路径
+
+### 卡片
+- 背景：`#ffffff`
+- 边框：1px solid `#ededed`
+- 圆角：16px
+- 内边距：24px–32px
+- 阴影：默认无；悬停时 `0 4px 16px rgba(13,13,13,0.06)`
+
+### 输入框
+- 背景：`#ffffff`
+- 边框：1px solid `#e5e5e5`
+- 圆角：12px
+- 内边距：12px 14px
+- 聚焦：边框 `#10a37f`，光晕 `0 0 0 3px rgba(16,163,127,0.12)`
+
+### 胶囊与标签
+- 背景：`#f5f5f5`
+- 文字：`#3c3c3c`
+- 内边距：4px 10px
+- 圆角：9999px
+- 字体：12px / 500
+
+## 5. 间距与布局
+
+- **基础单位**：4px。尺度：4、8、12、16、24、32、48、64、96、128。
+- **容器**：最大宽度 1200px，移动端 24px 间距，桌面端 48px。
+- **区块节奏**：主要区块之间纵向间距 96–128px；移动端 64px。
+- **栅格**：桌面端 12 列，移动端 4 列，间隙 24px。
+
+## 6. 动效
+
+- **时长**：悬停 150–220ms；布局过渡 280–360ms。
+- **缓动曲线**：入场动画使用 `cubic-bezier(0.16, 1, 0.3, 1)`（平滑出）。
+- **克制原则**：无视差效果，无滚动劫持。仅使用细微的淡入与位移。
+
+## 7. 使用约束
+
+- 需同时保留中性编辑克制感、软圆角与稀少的强调色这三者；仅靠绿色强调色无法营造出 OpenAI 风格的界面。
+- Signifier 风格的展示用法仅限于编辑风或公告层级，产品控件保持在无衬线字体体系内。
+- 避免装饰性动效、厚重阴影与过大的装饰性卡片；整套系统应呈现出沉静、易读、从容的气质。

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

@@ -0,0 +1,146 @@
+# Design System Inspired by OpenAI
+
+> Category: AI & LLM
+> Calm, near-monochrome system anchored in deep teal-black with generous white space and editorial typography.
+
+## 1. Visual Theme & Atmosphere
+
+OpenAI's product surface reads like a research lab dressed for the public — clinical, restrained, deliberately quiet. The page background is a true white (`#ffffff`) layered against a near-black ink (`#0d0d0d`) with a subtle teal undertone, so even the text feels slightly cooled rather than aggressively dark. The result is a chromatic neutrality that puts model output, code, and prose front and center, not the chrome around them.
+
+The signature move is the use of **Söhne** (or its system stand-in `inter`) at restrained weights — 400 for body, 500 for nav and labels, 600 for emphasis — paired with **Signifier**, a contemporary serif used for editorial display. Where most AI brands lean futuristic, OpenAI's serif headlines give the product a quietly literary tone, as if every announcement is an essay.
+
+The shape system is uniformly soft: 8px–12px radii, 9999px pills for tags and chips, no harsh corners anywhere. Section transitions are denoted by whitespace rather than dividers; when borders appear they are `#e5e5e5` hairlines that read as the absence of color rather than its presence.
+
+**Key Characteristics:**
+- True white canvas (`#ffffff`) with deep teal-black ink (`#0d0d0d`)
+- Söhne / Inter at modest weights (400, 500, 600) — restraint over assertion
+- Signifier serif for editorial display headlines
+- Soft 8–12px radii everywhere; 9999px pills for chips
+- Hairline borders (`#e5e5e5`) used sparingly; whitespace as primary divider
+- Single-color illustrations in deep teal — no gradients in marks
+- Generous line-height (1.55–1.65) and tracking near zero
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Pure White** (`#ffffff`): Primary background, card surface, button background.
+- **Ink Black** (`#0d0d0d`): Primary text, brand mark, primary CTA.
+- **Soft Black** (`#1a1a1a`): Secondary heading, alternative ink for non-critical text.
+
+### Surface & Background
+- **Mist** (`#fafafa`): Section break background, footer surface.
+- **Pearl** (`#f5f5f5`): Card surface, elevated panel.
+- **Cloud** (`#ececec`): Disabled background, divider tint.
+
+### Brand Accent
+- **OpenAI Teal** (`#10a37f`): Brand primary, link, highlight badge — the lone color in an otherwise neutral system.
+- **Teal Deep** (`#0a7a5e`): Hover and pressed state for the brand color.
+- **Teal Soft** (`#e8f5f0`): Surface tint for success badges, highlight callouts.
+
+### Neutrals & Text
+- **Graphite** (`#3c3c3c`): Body text, default reading color.
+- **Slate** (`#6e6e6e`): Secondary text, captions, metadata.
+- **Ash** (`#9b9b9b`): Tertiary text, placeholder, disabled label.
+- **Stone** (`#c4c4c4`): Decorative dividers, faint icons.
+
+### Semantic & Border
+- **Border Hairline** (`#e5e5e5`): Standard hairline separator.
+- **Border Soft** (`#ededed`): Card outline on white surface.
+- **Error** (`#ef4146`): Validation, destructive action.
+- **Warning** (`#f5a623`): Soft amber for advisory states.
+- **Info** (`#2563eb`): Informational link tone (used sparingly; teal still wins).
+
+## 3. Typography Rules
+
+### Font Family
+- **Display / Editorial**: `Signifier`, with fallback: `'Source Serif Pro', Georgia, serif`
+- **Body / UI**: `Söhne`, with fallback: `Inter, system-ui, -apple-system, 'Segoe UI', sans-serif`
+- **Code / Mono**: `Söhne Mono`, with fallback: `ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace`
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display | Signifier | 56px (3.5rem) | 400 | 1.08 | -0.02em | Editorial hero, announcement titles |
+| H1 | Söhne | 40px (2.5rem) | 600 | 1.15 | -0.01em | Page heading |
+| H2 | Söhne | 28px (1.75rem) | 600 | 1.2 | -0.005em | Section heading |
+| H3 | Söhne | 20px (1.25rem) | 600 | 1.3 | normal | Sub-section |
+| Body Large | Söhne | 18px (1.125rem) | 400 | 1.6 | normal | Lede paragraphs |
+| Body | Söhne | 16px (1rem) | 400 | 1.65 | normal | Standard reading text |
+| Body Small | Söhne | 14px (0.875rem) | 400 | 1.55 | normal | Card body, dense UI |
+| Caption | Söhne | 13px (0.8125rem) | 500 | 1.4 | 0.01em | Metadata, badges |
+| Label | Söhne | 12px (0.75rem) | 500 | 1.3 | 0.04em | Eyebrow, uppercase nav links |
+| Code | Söhne Mono | 14px (0.875rem) | 400 | 1.55 | normal | Code blocks, terminal output |
+
+### Principles
+- **Restraint as identity**: weights cap at 600; 700+ feels off-brand. Hierarchy comes from size and color, not weight.
+- **Serif for soul, sans for system**: Signifier appears only in editorial display moments. The product UI is sans-only.
+- **Negative tracking on display**: -0.02em on display sizes; tracking returns to zero by 16px.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary**
+- Background: `#0d0d0d`
+- Text: `#ffffff`
+- Padding: 10px 18px
+- Radius: 9999px (full pill) on chips, 12px on rectangular CTAs
+- Hover: `#1a1a1a` background
+- Use: Primary CTA, "Try ChatGPT", "Sign in"
+
+**Secondary**
+- Background: `#ffffff`
+- Text: `#0d0d0d`
+- Border: 1px solid `#e5e5e5`
+- Padding: 10px 18px
+- Radius: 12px
+- Hover: background `#fafafa`, border `#d4d4d4`
+
+**Brand Accent**
+- Background: `#10a37f`
+- Text: `#ffffff`
+- Padding: 10px 18px
+- Radius: 12px
+- Hover: `#0a7a5e`
+- Use: Highlighted upgrade CTA, success path
+
+### Cards
+- Background: `#ffffff`
+- Border: 1px solid `#ededed`
+- Radius: 16px
+- Padding: 24px–32px
+- Shadow: none by default; on hover `0 4px 16px rgba(13,13,13,0.06)`
+
+### Inputs
+- Background: `#ffffff`
+- Border: 1px solid `#e5e5e5`
+- Radius: 12px
+- Padding: 12px 14px
+- Focus: border `#10a37f`, ring `0 0 0 3px rgba(16,163,127,0.12)`
+
+### Pills & Tags
+- Background: `#f5f5f5`
+- Text: `#3c3c3c`
+- Padding: 4px 10px
+- Radius: 9999px
+- Font: 12px / 500
+
+## 5. Spacing & Layout
+
+- **Base unit**: 4px. Scale: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128.
+- **Container**: max-width 1200px, 24px gutter on mobile, 48px on desktop.
+- **Section rhythm**: 96–128px vertical between major sections; 64px on mobile.
+- **Grid**: 12-column desktop, 4-column mobile, 24px gap.
+
+## 6. Motion
+
+- **Duration**: 150–220ms for hover; 280–360ms for layout transitions.
+- **Easing**: `cubic-bezier(0.16, 1, 0.3, 1)` (smooth out) for entrances.
+- **Restraint**: no parallax, no scroll-jacking. Subtle fade and translate only.
+
+## 7. Usage Guardrails
+
+- Preserve the neutral editorial restraint, soft radius, and sparse accent usage together; green accents alone do not create an OpenAI-like surface.
+- Use Signifier-style display moments only for editorial or announcement hierarchy, keeping product controls in the sans system.
+- Avoid ornamental motion, heavy shadows, and oversized decorative cards; the system should feel calm, readable, and deliberate.

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

@@ -0,0 +1,32 @@
+# OpenAI 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
+
+- True white canvas (`#ffffff`) with deep teal-black ink (`#0d0d0d`)
+- Söhne / Inter at modest weights (400, 500, 600) — restraint over assertion
+- Signifier serif for editorial display headlines
+- Soft 8–12px radii everywhere; 9999px pills for chips
+
+## 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/openai/components.html

@@ -0,0 +1,382 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>OpenAI — reference components</title>
+    <meta
+      name="description"
+      content="Reference fixture for design-systems/openai. Every visible
+        value comes from tokens.css. OpenAI's signature moves: true white
+        canvas, Signifier serif for editorial display, Söhne sans for UI,
+        OpenAI Teal accent (#10a37f), generous line-heights, hairline borders."
+    />
+
+    <style>
+      :root {
+        --bg:           #ffffff;
+        --surface:      #f5f5f5;
+        --surface-warm: #fafafa;
+
+        --fg:   #0d0d0d;
+        --fg-2: #1a1a1a;
+        --muted: #6e6e6e;
+        --meta:  #9b9b9b;
+
+        --border:      #e5e5e5;
+        --border-soft: #ededed;
+
+        --accent:        #10a37f;
+        --accent-on:     #ffffff;
+        --accent-hover:  #0a7a5e;
+        --accent-active: color-mix(in oklab, var(--accent), black 14%);
+
+        --success: #10a37f;
+        --warn:    #f5a623;
+        --danger:  #ef4146;
+
+        --font-display: "Signifier", "Source Serif Pro", Georgia, ui-serif, serif;
+        --font-body:    "Söhne", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
+        --font-mono:    "Söhne Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
+
+        --text-xs:   12px;
+        --text-sm:   13px;
+        --text-base: 16px;
+        --text-lg:   18px;
+        --text-xl:   20px;
+        --text-2xl:  28px;
+        --text-3xl:  40px;
+        --text-4xl:  56px;
+
+        --leading-body:     1.65;
+        --leading-tight:    1.08;
+        --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;
+        --space-16: 64px;
+
+        --section-y-desktop: 96px;
+        --section-y-tablet:  64px;
+        --section-y-phone:   48px;
+
+        --radius-sm:   12px;
+        --radius-md:   16px;
+        --radius-lg:   16px;
+        --radius-pill: 9999px;
+
+        --elev-flat:   none;
+        --elev-ring:   0 0 0 1px var(--border);
+        --elev-raised: 0 4px 16px rgba(13, 13, 13, 0.06);
+
+        --focus-ring: 0 0 0 3px rgba(16, 163, 127, 0.12);
+
+        --motion-fast:   150ms;
+        --motion-base:   220ms;
+        --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
+
+        --container-max:            1200px;
+        --container-gutter-desktop: 48px;
+        --container-gutter-tablet:  24px;
+        --container-gutter-phone:   24px;
+      }
+
+      *, *::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);
+        -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 uses Signifier (serif editorial voice). */
+      h1 {
+        font-family: var(--font-display);
+        font-size: var(--text-4xl);
+        font-weight: 400;
+        letter-spacing: var(--tracking-display);
+        line-height: var(--leading-tight);
+        margin: 0;
+        color: var(--fg);
+      }
+      /* h2 and h3 use Söhne (sans UI voice). */
+      h2 {
+        font-family: var(--font-body);
+        font-size: var(--text-2xl);
+        font-weight: 600;
+        /* 28px section heading: line-height 1.20, tracking -0.005em. */
+        line-height: 1.20;
+        letter-spacing: -0.005em;
+        margin: 0;
+        color: var(--fg);
+      }
+      h3 {
+        font-family: var(--font-body);
+        font-size: var(--text-xl);
+        font-weight: 600;
+        /* 20px sub-section: line-height 1.30, normal tracking.
+           Overrides h1 leading-tight. */
+        line-height: 1.30;
+        margin: 0;
+        color: var(--fg);
+      }
+      p { margin: 0; }
+      .lead {
+        font-size: var(--text-lg);
+        line-height: 1.60;
+        color: var(--muted);
+        font-weight: 400;
+      }
+      .body-muted { color: var(--muted); }
+      .body-sm { font-size: var(--text-sm); }
+      .label {
+        font-size: var(--text-xs);
+        font-weight: 500;
+        color: var(--muted);
+        text-transform: uppercase;
+        letter-spacing: 0.04em;
+        font-family: var(--font-body);
+      }
+      code {
+        font-family: var(--font-mono);
+        font-size: 0.875em;
+        background: var(--surface);
+        border: 1px solid var(--border-soft);
+        border-radius: var(--radius-sm);
+        padding: 1px 5px;
+      }
+      .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 ─────────────────────────────── */
+      .btn {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--space-2);
+        padding: 10px 18px;
+        border-radius: var(--radius-sm);
+        font-family: var(--font-body);
+        font-size: var(--text-base);
+        font-weight: 500;
+        line-height: 1;
+        cursor: pointer;
+        border: 1px solid transparent;
+        transition: background-color var(--motion-fast) var(--ease-standard),
+                    border-color var(--motion-fast) var(--ease-standard);
+        text-decoration: none;
+      }
+      .btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
+      .btn-primary {
+        background: var(--fg);
+        color: #ffffff;
+        border-radius: var(--radius-sm);
+      }
+      .btn-primary:hover { background: var(--fg-2); }
+      .btn-secondary {
+        background: var(--bg);
+        color: var(--fg);
+        border-color: var(--border);
+      }
+      .btn-secondary:hover { background: var(--surface-warm); border-color: #d4d4d4; }
+      .btn-teal {
+        background: var(--accent);
+        color: var(--accent-on);
+      }
+      .btn-teal:hover { background: var(--accent-hover); }
+      /* Chip / pill */
+      .chip {
+        display: inline-flex;
+        align-items: center;
+        padding: 4px 10px;
+        border-radius: var(--radius-pill);
+        font-size: var(--text-xs);
+        font-weight: 500;
+        background: var(--surface);
+        color: var(--muted);
+      }
+      .chip-teal { background: #e8f5f0; color: var(--accent); }
+
+      /* ─── Cards ──────────────────────────────── */
+      .card {
+        background: var(--bg);
+        border: 1px solid var(--border-soft);
+        border-radius: var(--radius-md);
+        padding: var(--space-6);
+        transition: box-shadow var(--motion-base) var(--ease-standard);
+      }
+      .card:hover { box-shadow: var(--elev-raised); }
+
+      /* ─── Inputs ─────────────────────────────── */
+      .field { display: flex; flex-direction: column; gap: var(--space-2); }
+      .field label { font-size: var(--text-sm); font-weight: 500; color: var(--fg); }
+      .field input {
+        background: var(--bg);
+        color: var(--fg);
+        border: 1px solid var(--border);
+        border-radius: var(--radius-sm);
+        padding: 12px 14px;
+        font-family: var(--font-body);
+        font-size: var(--text-base);
+        outline: none;
+        transition: border-color var(--motion-fast) var(--ease-standard),
+                    box-shadow var(--motion-fast) var(--ease-standard);
+      }
+      .field input::placeholder { color: var(--meta); }
+      .field input:focus {
+        border-color: var(--accent);
+        box-shadow: var(--focus-ring);
+      }
+
+      /* ─── Layout ─────────────────────────────── */
+      .hero-grid {
+        display: grid;
+        grid-template-columns: 1.2fr 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 — Signifier serif display voice. -->
+      <section data-od-id="hero">
+        <div class="hero-grid">
+          <div class="stack-4">
+            <p class="label">Reference fixture · openai</p>
+            <h1>AI that works for everyone.</h1>
+            <p class="lead" style="max-width:46ch">
+              OpenAI builds safe artificial general intelligence for humanity.
+              A quietly literary interface: Signifier for display moments,
+              Söhne for system text, OpenAI Teal as the lone accent.
+            </p>
+            <div class="hero-actions">
+              <a href="./tokens.css" class="btn btn-primary">
+                Try ChatGPT
+                <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-secondary">Read the spec</a>
+            </div>
+          </div>
+
+          <aside style="display:flex;flex-direction:column;gap:var(--space-4)">
+            <div class="card">
+              <p class="label" style="margin-bottom:var(--space-4)">Recent models</p>
+              <div style="display:flex;flex-direction:column;gap:var(--space-3)">
+                <div style="display:flex;justify-content:space-between;align-items:center">
+                  <span style="font-size:var(--text-sm);font-weight:500">GPT-4o</span>
+                  <span class="chip chip-teal">Latest</span>
+                </div>
+                <div style="display:flex;justify-content:space-between;align-items:center">
+                  <span style="font-size:var(--text-sm)">GPT-4 Turbo</span>
+                  <span class="chip">Stable</span>
+                </div>
+                <div style="display:flex;justify-content:space-between;align-items:center">
+                  <span style="font-size:var(--text-sm)">o1</span>
+                  <span class="chip">Preview</span>
+                </div>
+              </div>
+            </div>
+          </aside>
+        </div>
+      </section>
+
+      <!-- FEATURES -->
+      <section data-od-id="features" style="background:var(--surface-warm);margin-inline:calc(var(--container-gutter-desktop)*-1);padding-inline:var(--container-gutter-desktop)">
+        <div class="stack-3" style="margin-bottom:var(--space-6)">
+          <p class="label">What this fixture exercises</p>
+          <h2>Restraint as identity.</h2>
+        </div>
+
+        <div class="features-grid">
+          <article class="card stack-3">
+            <h3>Two voices</h3>
+            <p class="body-muted" style="font-size:var(--text-sm)">
+              Signifier (serif) for editorial display moments only. Söhne sans
+              for all UI and body text. Weights cap at 600 — 700+ feels off-brand.
+            </p>
+          </article>
+          <article class="card stack-3">
+            <h3>Teal accent</h3>
+            <p class="body-muted" style="font-size:var(--text-sm)">
+              <code>#10a37f</code> — the lone color in an otherwise neutral system.
+              Links, highlight badges, success path CTAs. Hairline borders
+              (#e5e5e5) used sparingly; whitespace as primary divider.
+            </p>
+          </article>
+          <article class="card stack-3">
+            <h3>Generous rhythm</h3>
+            <p class="body-muted" style="font-size:var(--text-sm)">
+              --leading-body: 1.65. --leading-tight (Signifier display): 1.08.
+              96px section rhythm on desktop. Whitespace is the architecture.
+            </p>
+          </article>
+        </div>
+      </section>
+
+      <!-- FORM -->
+      <section data-od-id="form">
+        <div style="display:grid;grid-template-columns:1.2fr 1fr;gap:var(--space-12);align-items:start">
+          <div class="stack-4">
+            <p class="label">Form components</p>
+            <h2>Soft radius, teal focus.</h2>
+            <p class="lead" style="max-width:44ch">
+              12px radius on inputs; border: 1px solid #e5e5e5 at rest.
+              Focus: border <code>#10a37f</code> + 3px rgba ring.
+            </p>
+          </div>
+          <form style="display:flex;flex-direction:column;gap:var(--space-4);max-width:400px"
+                onsubmit="event.preventDefault()">
+            <div class="field">
+              <label for="email">Email address</label>
+              <input id="email" type="email" placeholder="[email protected]" />
+            </div>
+            <div style="display:flex;gap:var(--space-3);margin-top:var(--space-2)">
+              <button type="submit" class="btn btn-teal">Sign in</button>
+              <button type="button" class="btn btn-secondary">Create account</button>
+            </div>
+          </form>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>

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

@@ -0,0 +1,449 @@
+{
+  "schemaVersion": 1,
+  "brandId": "openai",
+  "source": {
+    "componentsHtml": "components.html",
+    "tokensCss": "tokens.css"
+  },
+  "fixture": {
+    "title": "OpenAI — reference components",
+    "description": "Reference fixture for design-systems/openai. Every visible value comes from tokens.css. OpenAI's signature moves: true white canvas, Signifier serif for editorial display, Söhne sans for UI, OpenAI Teal accent (#10a37f), generous line-heights, hairline borders.",
+    "styleBlockCount": 1,
+    "selectorCount": 41,
+    "classCount": 18,
+    "elementCount": 24
+  },
+  "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-16",
+      "--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",
+      "--accent-hover",
+      "--accent-on",
+      "--bg",
+      "--border",
+      "--border-soft",
+      "--container-gutter-desktop",
+      "--container-gutter-phone",
+      "--container-gutter-tablet",
+      "--container-max",
+      "--ease-standard",
+      "--elev-raised",
+      "--fg",
+      "--fg-2",
+      "--focus-ring",
+      "--font-body",
+      "--font-display",
+      "--font-mono",
+      "--leading-body",
+      "--leading-tight",
+      "--meta",
+      "--motion-base",
+      "--motion-fast",
+      "--muted",
+      "--radius-md",
+      "--radius-pill",
+      "--radius-sm",
+      "--section-y-desktop",
+      "--section-y-phone",
+      "--section-y-tablet",
+      "--space-12",
+      "--space-2",
+      "--space-3",
+      "--space-4",
+      "--space-5",
+      "--space-6",
+      "--surface",
+      "--surface-warm",
+      "--text-2xl",
+      "--text-4xl",
+      "--text-base",
+      "--text-lg",
+      "--text-sm",
+      "--text-xl",
+      "--text-xs",
+      "--tracking-display"
+    ],
+    "unusedDeclared": [
+      "--accent-active",
+      "--danger",
+      "--elev-flat",
+      "--elev-ring",
+      "--radius-lg",
+      "--space-1",
+      "--space-16",
+      "--space-8",
+      "--success",
+      "--text-3xl",
+      "--warn"
+    ],
+    "undeclaredReferenced": []
+  },
+  "selectors": [
+    ".body-muted",
+    ".body-sm",
+    ".btn",
+    ".btn-primary",
+    ".btn-primary:hover",
+    ".btn-secondary",
+    ".btn-secondary:hover",
+    ".btn-teal",
+    ".btn-teal:hover",
+    ".btn:focus-visible",
+    ".card",
+    ".card:hover",
+    ".chip",
+    ".chip-teal",
+    ".container",
+    ".features-grid",
+    ".field",
+    ".field input",
+    ".field input::placeholder",
+    ".field input:focus",
+    ".field label",
+    ".hero-actions",
+    ".hero-grid",
+    ".icon",
+    ".label",
+    ".lead",
+    ".stack-3 > * + *",
+    ".stack-4 > * + *",
+    ".stack-6 > * + *",
+    "*",
+    "*::after",
+    "*::before",
+    "body",
+    "code",
+    "h1",
+    "h2",
+    "h3",
+    "html",
+    "p",
+    "section",
+    "section + section"
+  ],
+  "classes": [
+    "body-muted",
+    "btn",
+    "btn-primary",
+    "btn-secondary",
+    "btn-teal",
+    "card",
+    "chip",
+    "chip-teal",
+    "container",
+    "features-grid",
+    "field",
+    "hero-actions",
+    "hero-grid",
+    "icon",
+    "label",
+    "lead",
+    "stack-3",
+    "stack-4"
+  ],
+  "elements": [
+    "a",
+    "article",
+    "aside",
+    "body",
+    "button",
+    "code",
+    "div",
+    "form",
+    "h1",
+    "h2",
+    "h3",
+    "head",
+    "html",
+    "input",
+    "label",
+    "main",
+    "meta",
+    "p",
+    "path",
+    "section",
+    "span",
+    "style",
+    "svg",
+    "title"
+  ],
+  "groups": [
+    {
+      "id": "buttons",
+      "label": "Buttons and calls to action",
+      "present": true,
+      "selectors": [
+        ".btn",
+        ".btn-primary",
+        ".btn-primary:hover",
+        ".btn-secondary",
+        ".btn-secondary:hover",
+        ".btn-teal",
+        ".btn-teal:hover",
+        ".btn:focus-visible"
+      ],
+      "classes": [
+        "btn",
+        "btn-primary",
+        "btn-secondary",
+        "btn-teal"
+      ],
+      "elements": [
+        "button"
+      ],
+      "tokenReferences": [
+        "--accent",
+        "--accent-on",
+        "--bg",
+        "--border",
+        "--ease-standard",
+        "--fg",
+        "--font-body",
+        "--motion-fast",
+        "--radius-sm",
+        "--space-2",
+        "--text-base"
+      ]
+    },
+    {
+      "id": "inputs",
+      "label": "Form fields and controls",
+      "present": true,
+      "selectors": [
+        ".field",
+        ".field input",
+        ".field input::placeholder",
+        ".field input:focus",
+        ".field label",
+        ".label"
+      ],
+      "classes": [
+        "field"
+      ],
+      "elements": [
+        "form",
+        "input",
+        "label"
+      ],
+      "tokenReferences": [
+        "--accent",
+        "--bg",
+        "--border",
+        "--ease-standard",
+        "--fg",
+        "--focus-ring",
+        "--font-body",
+        "--motion-fast",
+        "--radius-sm",
+        "--space-2",
+        "--text-base"
+      ]
+    },
+    {
+      "id": "cards",
+      "label": "Cards and panels",
+      "present": true,
+      "selectors": [
+        ".card",
+        ".card:hover"
+      ],
+      "classes": [
+        "card"
+      ],
+      "elements": [],
+      "tokenReferences": [
+        "--bg",
+        "--border-soft",
+        "--ease-standard",
+        "--motion-base",
+        "--radius-md",
+        "--space-6"
+      ]
+    },
+    {
+      "id": "badges",
+      "label": "Badges, chips, and status labels",
+      "present": true,
+      "selectors": [
+        ".chip",
+        ".chip-teal"
+      ],
+      "classes": [
+        "chip",
+        "chip-teal"
+      ],
+      "elements": [],
+      "tokenReferences": [
+        "--muted",
+        "--radius-pill",
+        "--surface",
+        "--text-xs"
+      ]
+    },
+    {
+      "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",
+        ".body-sm",
+        ".lead",
+        "h1",
+        "h2",
+        "h3"
+      ],
+      "classes": [
+        "body-muted",
+        "lead"
+      ],
+      "elements": [
+        "h1",
+        "h2",
+        "h3",
+        "p"
+      ],
+      "tokenReferences": [
+        "--fg",
+        "--font-body",
+        "--font-display",
+        "--leading-tight",
+        "--muted",
+        "--text-4xl",
+        "--text-lg",
+        "--text-sm",
+        "--text-xl",
+        "--tracking-display"
+      ]
+    },
+    {
+      "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-4"
+      ]
+    }
+  ],
+  "literals": {
+    "colorExpressions": 3,
+    "pixelValues": 20,
+    "hardcodedFontFamilies": 8
+  }
+}

open-design/design-systems/openai/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": 0,
+    "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:34"
+      ],
+      "sourceName": "--bg"
+    },
+    {
+      "name": "--surface",
+      "value": "#f5f5f5",
+      "type": "color",
+      "layer": "A1-identity",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --surface; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:35"
+      ],
+      "sourceName": "--surface"
+    },
+    {
+      "name": "--surface-warm",
+      "value": "#fafafa",
+      "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:36"
+      ],
+      "sourceName": "--surface-warm"
+    },
+    {
+      "name": "--fg",
+      "value": "#0d0d0d",
+      "type": "color",
+      "layer": "A1-identity",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --fg; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:39"
+      ],
+      "sourceName": "--fg"
+    },
+    {
+      "name": "--fg-2",
+      "value": "#1a1a1a",
+      "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:40"
+      ],
+      "sourceName": "--fg-2"
+    },
+    {
+      "name": "--muted",
+      "value": "#6e6e6e",
+      "type": "color",
+      "layer": "A1-identity",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --muted; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:41"
+      ],
+      "sourceName": "--muted"
+    },
+    {
+      "name": "--meta",
+      "value": "#9b9b9b",
+      "type": "color",
+      "layer": "B-slot",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --meta; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:42"
+      ],
+      "sourceName": "--meta"
+    },
+    {
+      "name": "--border",
+      "value": "#e5e5e5",
+      "type": "color",
+      "layer": "A1-identity",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --border; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:45"
+      ],
+      "sourceName": "--border"
+    },
+    {
+      "name": "--border-soft",
+      "value": "#ededed",
+      "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:46"
+      ],
+      "sourceName": "--border-soft"
+    },
+    {
+      "name": "--accent",
+      "value": "#10a37f",
+      "type": "color",
+      "layer": "A1-identity",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --accent; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:49"
+      ],
+      "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:50"
+      ],
+      "sourceName": "--accent-on"
+    },
+    {
+      "name": "--accent-hover",
+      "value": "#0a7a5e",
+      "type": "color",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --accent-hover; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:51"
+      ],
+      "sourceName": "--accent-hover"
+    },
+    {
+      "name": "--accent-active",
+      "value": "color-mix(in oklab, var(--accent), black 14%)",
+      "type": "color",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --accent-active; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:52"
+      ],
+      "sourceName": "--accent-active"
+    },
+    {
+      "name": "--success",
+      "value": "#10a37f",
+      "type": "color",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --success; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:55"
+      ],
+      "sourceName": "--success"
+    },
+    {
+      "name": "--warn",
+      "value": "#f5a623",
+      "type": "color",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --warn; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:56"
+      ],
+      "sourceName": "--warn"
+    },
+    {
+      "name": "--danger",
+      "value": "#ef4146",
+      "type": "color",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --danger; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:57"
+      ],
+      "sourceName": "--danger"
+    },
+    {
+      "name": "--font-display",
+      "value": "\"Signifier\", \"Source Serif Pro\", Georgia, ui-serif, 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:62"
+      ],
+      "sourceName": "--font-display"
+    },
+    {
+      "name": "--font-body",
+      "value": "\"Söhne\", \"Inter\", system-ui, -apple-system, \"Segoe UI\", 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:63"
+      ],
+      "sourceName": "--font-body"
+    },
+    {
+      "name": "--font-mono",
+      "value": "\"Söhne Mono\", ui-monospace, \"JetBrains Mono\", Menlo, Consolas, 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:64"
+      ],
+      "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:69"
+      ],
+      "sourceName": "--text-xs"
+    },
+    {
+      "name": "--text-sm",
+      "value": "13px",
+      "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:70"
+      ],
+      "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:71"
+      ],
+      "sourceName": "--text-base"
+    },
+    {
+      "name": "--text-lg",
+      "value": "18px",
+      "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:72"
+      ],
+      "sourceName": "--text-lg"
+    },
+    {
+      "name": "--text-xl",
+      "value": "20px",
+      "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:73"
+      ],
+      "sourceName": "--text-xl"
+    },
+    {
+      "name": "--text-2xl",
+      "value": "28px",
+      "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:74"
+      ],
+      "sourceName": "--text-2xl"
+    },
+    {
+      "name": "--text-3xl",
+      "value": "40px",
+      "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:75"
+      ],
+      "sourceName": "--text-3xl"
+    },
+    {
+      "name": "--text-4xl",
+      "value": "56px",
+      "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:76"
+      ],
+      "sourceName": "--text-4xl"
+    },
+    {
+      "name": "--leading-body",
+      "value": "1.65",
+      "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:82"
+      ],
+      "sourceName": "--leading-body"
+    },
+    {
+      "name": "--leading-tight",
+      "value": "1.08",
+      "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:83"
+      ],
+      "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:84"
+      ],
+      "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:90"
+      ],
+      "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:91"
+      ],
+      "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:92"
+      ],
+      "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:93"
+      ],
+      "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:94"
+      ],
+      "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:95"
+      ],
+      "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:96"
+      ],
+      "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:97"
+      ],
+      "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:103"
+      ],
+      "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:104"
+      ],
+      "sourceName": "--section-y-tablet"
+    },
+    {
+      "name": "--section-y-phone",
+      "value": "48px",
+      "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:105"
+      ],
+      "sourceName": "--section-y-phone"
+    },
+    {
+      "name": "--radius-sm",
+      "value": "12px",
+      "type": "dimension",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --radius-sm; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:109"
+      ],
+      "sourceName": "--radius-sm"
+    },
+    {
+      "name": "--radius-md",
+      "value": "16px",
+      "type": "dimension",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --radius-md; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:110"
+      ],
+      "sourceName": "--radius-md"
+    },
+    {
+      "name": "--radius-lg",
+      "value": "16px",
+      "type": "dimension",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --radius-lg; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:111"
+      ],
+      "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:112"
+      ],
+      "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:116"
+      ],
+      "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:117"
+      ],
+      "sourceName": "--elev-ring"
+    },
+    {
+      "name": "--elev-raised",
+      "value": "0 4px 16px rgba(13, 13, 13, 0.06)",
+      "type": "shadow",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --elev-raised; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:118"
+      ],
+      "sourceName": "--elev-raised"
+    },
+    {
+      "name": "--focus-ring",
+      "value": "0 0 0 3px rgba(16, 163, 127, 0.12)",
+      "type": "shadow",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --focus-ring; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:121"
+      ],
+      "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:124"
+      ],
+      "sourceName": "--motion-fast"
+    },
+    {
+      "name": "--motion-base",
+      "value": "220ms",
+      "type": "duration",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --motion-base; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:125"
+      ],
+      "sourceName": "--motion-base"
+    },
+    {
+      "name": "--ease-standard",
+      "value": "cubic-bezier(0.16, 1, 0.3, 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:126"
+      ],
+      "sourceName": "--ease-standard"
+    },
+    {
+      "name": "--container-max",
+      "value": "1200px",
+      "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:129"
+      ],
+      "sourceName": "--container-max"
+    },
+    {
+      "name": "--container-gutter-desktop",
+      "value": "48px",
+      "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:130"
+      ],
+      "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:131"
+      ],
+      "sourceName": "--container-gutter-tablet"
+    },
+    {
+      "name": "--container-gutter-phone",
+      "value": "24px",
+      "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:132"
+      ],
+      "sourceName": "--container-gutter-phone"
+    }
+  ]
+}

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

@@ -0,0 +1,54 @@
+{
+  "schemaVersion": "od-design-system-project/v1",
+  "id": "openai",
+  "name": "OpenAI",
+  "category": "AI & LLM",
+  "description": "Bundled OpenDesign package for OpenAI, 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/openai/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>OpenAI 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/openai/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>OpenAI 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/openai/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>OpenAI 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">AI & LLM</p>
+        <h2>Display sample for OpenAI</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/openai/source/evidence.md

@@ -0,0 +1,17 @@
+# OpenAI 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/openai/DESIGN.md
+- design-systems/openai/tokens.css
+- design-systems/openai/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/openai/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": 0,
+    "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:34"
+      ],
+      "sourceName": "--bg"
+    },
+    {
+      "name": "--surface",
+      "layer": "A1-identity",
+      "value": "#f5f5f5",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --surface; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:35"
+      ],
+      "sourceName": "--surface"
+    },
+    {
+      "name": "--surface-warm",
+      "layer": "B-slot",
+      "value": "#fafafa",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --surface-warm; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:36"
+      ],
+      "sourceName": "--surface-warm"
+    },
+    {
+      "name": "--fg",
+      "layer": "A1-identity",
+      "value": "#0d0d0d",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --fg; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:39"
+      ],
+      "sourceName": "--fg"
+    },
+    {
+      "name": "--fg-2",
+      "layer": "B-slot",
+      "value": "#1a1a1a",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --fg-2; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:40"
+      ],
+      "sourceName": "--fg-2"
+    },
+    {
+      "name": "--muted",
+      "layer": "A1-identity",
+      "value": "#6e6e6e",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --muted; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:41"
+      ],
+      "sourceName": "--muted"
+    },
+    {
+      "name": "--meta",
+      "layer": "B-slot",
+      "value": "#9b9b9b",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --meta; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:42"
+      ],
+      "sourceName": "--meta"
+    },
+    {
+      "name": "--border",
+      "layer": "A1-identity",
+      "value": "#e5e5e5",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --border; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:45"
+      ],
+      "sourceName": "--border"
+    },
+    {
+      "name": "--border-soft",
+      "layer": "B-slot",
+      "value": "#ededed",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --border-soft; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:46"
+      ],
+      "sourceName": "--border-soft"
+    },
+    {
+      "name": "--accent",
+      "layer": "A1-identity",
+      "value": "#10a37f",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --accent; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:49"
+      ],
+      "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:50"
+      ],
+      "sourceName": "--accent-on"
+    },
+    {
+      "name": "--accent-hover",
+      "layer": "A2",
+      "value": "#0a7a5e",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --accent-hover; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:51"
+      ],
+      "sourceName": "--accent-hover"
+    },
+    {
+      "name": "--accent-active",
+      "layer": "A2",
+      "value": "color-mix(in oklab, var(--accent), black 14%)",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --accent-active; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:52"
+      ],
+      "sourceName": "--accent-active"
+    },
+    {
+      "name": "--success",
+      "layer": "A2",
+      "value": "#10a37f",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --success; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:55"
+      ],
+      "sourceName": "--success"
+    },
+    {
+      "name": "--warn",
+      "layer": "A2",
+      "value": "#f5a623",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --warn; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:56"
+      ],
+      "sourceName": "--warn"
+    },
+    {
+      "name": "--danger",
+      "layer": "A2",
+      "value": "#ef4146",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --danger; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:57"
+      ],
+      "sourceName": "--danger"
+    },
+    {
+      "name": "--font-display",
+      "layer": "A1-identity",
+      "value": "\"Signifier\", \"Source Serif Pro\", Georgia, ui-serif, serif",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --font-display; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:62"
+      ],
+      "sourceName": "--font-display"
+    },
+    {
+      "name": "--font-body",
+      "layer": "A1-identity",
+      "value": "\"Söhne\", \"Inter\", system-ui, -apple-system, \"Segoe UI\", sans-serif",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --font-body; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:63"
+      ],
+      "sourceName": "--font-body"
+    },
+    {
+      "name": "--font-mono",
+      "layer": "A2",
+      "value": "\"Söhne Mono\", ui-monospace, \"JetBrains Mono\", Menlo, Consolas, monospace",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --font-mono; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:64"
+      ],
+      "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:69"
+      ],
+      "sourceName": "--text-xs"
+    },
+    {
+      "name": "--text-sm",
+      "layer": "A1-structure",
+      "value": "13px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --text-sm; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:70"
+      ],
+      "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:71"
+      ],
+      "sourceName": "--text-base"
+    },
+    {
+      "name": "--text-lg",
+      "layer": "A1-structure",
+      "value": "18px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --text-lg; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:72"
+      ],
+      "sourceName": "--text-lg"
+    },
+    {
+      "name": "--text-xl",
+      "layer": "A1-structure",
+      "value": "20px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --text-xl; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:73"
+      ],
+      "sourceName": "--text-xl"
+    },
+    {
+      "name": "--text-2xl",
+      "layer": "A1-structure",
+      "value": "28px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --text-2xl; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:74"
+      ],
+      "sourceName": "--text-2xl"
+    },
+    {
+      "name": "--text-3xl",
+      "layer": "A1-structure",
+      "value": "40px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --text-3xl; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:75"
+      ],
+      "sourceName": "--text-3xl"
+    },
+    {
+      "name": "--text-4xl",
+      "layer": "A1-structure",
+      "value": "56px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --text-4xl; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:76"
+      ],
+      "sourceName": "--text-4xl"
+    },
+    {
+      "name": "--leading-body",
+      "layer": "A1-structure",
+      "value": "1.65",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --leading-body; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:82"
+      ],
+      "sourceName": "--leading-body"
+    },
+    {
+      "name": "--leading-tight",
+      "layer": "A1-structure",
+      "value": "1.08",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --leading-tight; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:83"
+      ],
+      "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:84"
+      ],
+      "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:90"
+      ],
+      "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:91"
+      ],
+      "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:92"
+      ],
+      "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:93"
+      ],
+      "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:94"
+      ],
+      "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:95"
+      ],
+      "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:96"
+      ],
+      "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:97"
+      ],
+      "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:103"
+      ],
+      "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:104"
+      ],
+      "sourceName": "--section-y-tablet"
+    },
+    {
+      "name": "--section-y-phone",
+      "layer": "A1-structure",
+      "value": "48px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --section-y-phone; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:105"
+      ],
+      "sourceName": "--section-y-phone"
+    },
+    {
+      "name": "--radius-sm",
+      "layer": "A2",
+      "value": "12px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --radius-sm; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:109"
+      ],
+      "sourceName": "--radius-sm"
+    },
+    {
+      "name": "--radius-md",
+      "layer": "A2",
+      "value": "16px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --radius-md; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:110"
+      ],
+      "sourceName": "--radius-md"
+    },
+    {
+      "name": "--radius-lg",
+      "layer": "A2",
+      "value": "16px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --radius-lg; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:111"
+      ],
+      "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:112"
+      ],
+      "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:116"
+      ],
+      "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:117"
+      ],
+      "sourceName": "--elev-ring"
+    },
+    {
+      "name": "--elev-raised",
+      "layer": "A2",
+      "value": "0 4px 16px rgba(13, 13, 13, 0.06)",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --elev-raised; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:118"
+      ],
+      "sourceName": "--elev-raised"
+    },
+    {
+      "name": "--focus-ring",
+      "layer": "A2",
+      "value": "0 0 0 3px rgba(16, 163, 127, 0.12)",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --focus-ring; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:121"
+      ],
+      "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:124"
+      ],
+      "sourceName": "--motion-fast"
+    },
+    {
+      "name": "--motion-base",
+      "layer": "A2",
+      "value": "220ms",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --motion-base; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:125"
+      ],
+      "sourceName": "--motion-base"
+    },
+    {
+      "name": "--ease-standard",
+      "layer": "A2",
+      "value": "cubic-bezier(0.16, 1, 0.3, 1)",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --ease-standard; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:126"
+      ],
+      "sourceName": "--ease-standard"
+    },
+    {
+      "name": "--container-max",
+      "layer": "A1-structure",
+      "value": "1200px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --container-max; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:129"
+      ],
+      "sourceName": "--container-max"
+    },
+    {
+      "name": "--container-gutter-desktop",
+      "layer": "A1-structure",
+      "value": "48px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --container-gutter-desktop; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:130"
+      ],
+      "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:131"
+      ],
+      "sourceName": "--container-gutter-tablet"
+    },
+    {
+      "name": "--container-gutter-phone",
+      "layer": "A1-structure",
+      "value": "24px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --container-gutter-phone; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:132"
+      ],
+      "sourceName": "--container-gutter-phone"
+    }
+  ]
+}

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

@@ -0,0 +1,349 @@
+{
+  "schemaVersion": 1,
+  "sourceScope": "open-design-bundled-fixture",
+  "brandId": "openai",
+  "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:34"
+    },
+    {
+      "name": "--surface",
+      "value": "#f5f5f5",
+      "layer": "A1-identity",
+      "source": "tokens.css:35"
+    },
+    {
+      "name": "--surface-warm",
+      "value": "#fafafa",
+      "layer": "B-slot",
+      "source": "tokens.css:36"
+    },
+    {
+      "name": "--fg",
+      "value": "#0d0d0d",
+      "layer": "A1-identity",
+      "source": "tokens.css:39"
+    },
+    {
+      "name": "--fg-2",
+      "value": "#1a1a1a",
+      "layer": "B-slot",
+      "source": "tokens.css:40"
+    },
+    {
+      "name": "--muted",
+      "value": "#6e6e6e",
+      "layer": "A1-identity",
+      "source": "tokens.css:41"
+    },
+    {
+      "name": "--meta",
+      "value": "#9b9b9b",
+      "layer": "B-slot",
+      "source": "tokens.css:42"
+    },
+    {
+      "name": "--border",
+      "value": "#e5e5e5",
+      "layer": "A1-identity",
+      "source": "tokens.css:45"
+    },
+    {
+      "name": "--border-soft",
+      "value": "#ededed",
+      "layer": "B-slot",
+      "source": "tokens.css:46"
+    },
+    {
+      "name": "--accent",
+      "value": "#10a37f",
+      "layer": "A1-identity",
+      "source": "tokens.css:49"
+    },
+    {
+      "name": "--accent-on",
+      "value": "#ffffff",
+      "layer": "A2",
+      "source": "tokens.css:50"
+    },
+    {
+      "name": "--accent-hover",
+      "value": "#0a7a5e",
+      "layer": "A2",
+      "source": "tokens.css:51"
+    },
+    {
+      "name": "--accent-active",
+      "value": "color-mix(in oklab, var(--accent), black 14%)",
+      "layer": "A2",
+      "source": "tokens.css:52"
+    },
+    {
+      "name": "--success",
+      "value": "#10a37f",
+      "layer": "A2",
+      "source": "tokens.css:55"
+    },
+    {
+      "name": "--warn",
+      "value": "#f5a623",
+      "layer": "A2",
+      "source": "tokens.css:56"
+    },
+    {
+      "name": "--danger",
+      "value": "#ef4146",
+      "layer": "A2",
+      "source": "tokens.css:57"
+    },
+    {
+      "name": "--font-display",
+      "value": "\"Signifier\", \"Source Serif Pro\", Georgia, ui-serif, serif",
+      "layer": "A1-identity",
+      "source": "tokens.css:62"
+    },
+    {
+      "name": "--font-body",
+      "value": "\"Söhne\", \"Inter\", system-ui, -apple-system, \"Segoe UI\", sans-serif",
+      "layer": "A1-identity",
+      "source": "tokens.css:63"
+    },
+    {
+      "name": "--font-mono",
+      "value": "\"Söhne Mono\", ui-monospace, \"JetBrains Mono\", Menlo, Consolas, monospace",
+      "layer": "A2",
+      "source": "tokens.css:64"
+    },
+    {
+      "name": "--text-xs",
+      "value": "12px",
+      "layer": "A1-structure",
+      "source": "tokens.css:69"
+    },
+    {
+      "name": "--text-sm",
+      "value": "13px",
+      "layer": "A1-structure",
+      "source": "tokens.css:70"
+    },
+    {
+      "name": "--text-base",
+      "value": "16px",
+      "layer": "A1-structure",
+      "source": "tokens.css:71"
+    },
+    {
+      "name": "--text-lg",
+      "value": "18px",
+      "layer": "A1-structure",
+      "source": "tokens.css:72"
+    },
+    {
+      "name": "--text-xl",
+      "value": "20px",
+      "layer": "A1-structure",
+      "source": "tokens.css:73"
+    },
+    {
+      "name": "--text-2xl",
+      "value": "28px",
+      "layer": "A1-structure",
+      "source": "tokens.css:74"
+    },
+    {
+      "name": "--text-3xl",
+      "value": "40px",
+      "layer": "A1-structure",
+      "source": "tokens.css:75"
+    },
+    {
+      "name": "--text-4xl",
+      "value": "56px",
+      "layer": "A1-structure",
+      "source": "tokens.css:76"
+    },
+    {
+      "name": "--leading-body",
+      "value": "1.65",
+      "layer": "A1-structure",
+      "source": "tokens.css:82"
+    },
+    {
+      "name": "--leading-tight",
+      "value": "1.08",
+      "layer": "A1-structure",
+      "source": "tokens.css:83"
+    },
+    {
+      "name": "--tracking-display",
+      "value": "-0.02em",
+      "layer": "A1-structure",
+      "source": "tokens.css:84"
+    },
+    {
+      "name": "--space-1",
+      "value": "4px",
+      "layer": "A2",
+      "source": "tokens.css:90"
+    },
+    {
+      "name": "--space-2",
+      "value": "8px",
+      "layer": "A2",
+      "source": "tokens.css:91"
+    },
+    {
+      "name": "--space-3",
+      "value": "12px",
+      "layer": "A2",
+      "source": "tokens.css:92"
+    },
+    {
+      "name": "--space-4",
+      "value": "16px",
+      "layer": "A2",
+      "source": "tokens.css:93"
+    },
+    {
+      "name": "--space-5",
+      "value": "20px",
+      "layer": "A2",
+      "source": "tokens.css:94"
+    },
+    {
+      "name": "--space-6",
+      "value": "24px",
+      "layer": "A2",
+      "source": "tokens.css:95"
+    },
+    {
+      "name": "--space-8",
+      "value": "32px",
+      "layer": "A2",
+      "source": "tokens.css:96"
+    },
+    {
+      "name": "--space-12",
+      "value": "48px",
+      "layer": "A2",
+      "source": "tokens.css:97"
+    },
+    {
+      "name": "--section-y-desktop",
+      "value": "96px",
+      "layer": "A1-structure",
+      "source": "tokens.css:103"
+    },
+    {
+      "name": "--section-y-tablet",
+      "value": "64px",
+      "layer": "A1-structure",
+      "source": "tokens.css:104"
+    },
+    {
+      "name": "--section-y-phone",
+      "value": "48px",
+      "layer": "A1-structure",
+      "source": "tokens.css:105"
+    },
+    {
+      "name": "--radius-sm",
+      "value": "12px",
+      "layer": "A2",
+      "source": "tokens.css:109"
+    },
+    {
+      "name": "--radius-md",
+      "value": "16px",
+      "layer": "A2",
+      "source": "tokens.css:110"
+    },
+    {
+      "name": "--radius-lg",
+      "value": "16px",
+      "layer": "A2",
+      "source": "tokens.css:111"
+    },
+    {
+      "name": "--radius-pill",
+      "value": "9999px",
+      "layer": "A2",
+      "source": "tokens.css:112"
+    },
+    {
+      "name": "--elev-flat",
+      "value": "none",
+      "layer": "A2",
+      "source": "tokens.css:116"
+    },
+    {
+      "name": "--elev-ring",
+      "value": "0 0 0 1px var(--border)",
+      "layer": "A2",
+      "source": "tokens.css:117"
+    },
+    {
+      "name": "--elev-raised",
+      "value": "0 4px 16px rgba(13, 13, 13, 0.06)",
+      "layer": "A2",
+      "source": "tokens.css:118"
+    },
+    {
+      "name": "--focus-ring",
+      "value": "0 0 0 3px rgba(16, 163, 127, 0.12)",
+      "layer": "A2",
+      "source": "tokens.css:121"
+    },
+    {
+      "name": "--motion-fast",
+      "value": "150ms",
+      "layer": "A2",
+      "source": "tokens.css:124"
+    },
+    {
+      "name": "--motion-base",
+      "value": "220ms",
+      "layer": "A2",
+      "source": "tokens.css:125"
+    },
+    {
+      "name": "--ease-standard",
+      "value": "cubic-bezier(0.16, 1, 0.3, 1)",
+      "layer": "A2",
+      "source": "tokens.css:126"
+    },
+    {
+      "name": "--container-max",
+      "value": "1200px",
+      "layer": "A1-structure",
+      "source": "tokens.css:129"
+    },
+    {
+      "name": "--container-gutter-desktop",
+      "value": "48px",
+      "layer": "A1-structure",
+      "source": "tokens.css:130"
+    },
+    {
+      "name": "--container-gutter-tablet",
+      "value": "24px",
+      "layer": "A1-structure",
+      "source": "tokens.css:131"
+    },
+    {
+      "name": "--container-gutter-phone",
+      "value": "24px",
+      "layer": "A1-structure",
+      "source": "tokens.css:132"
+    }
+  ]
+}

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

@@ -0,0 +1,138 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>OpenAI - Pitch deck</title>
+  <style>
+:root {
+    --accent: #10a37f;
+    --accent-active: color-mix(in oklab, var(--accent), black 14%);
+    --accent-hover: #0a7a5e;
+    --accent-on: #ffffff;
+    --bg: #ffffff;
+    --border: #e5e5e5;
+    --border-soft: #ededed;
+    --container-gutter-desktop: 48px;
+    --container-gutter-phone: 24px;
+    --container-gutter-tablet: 24px;
+    --container-max: 1200px;
+    --danger: #ef4146;
+    --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
+    --elev-flat: none;
+    --elev-raised: 0 4px 16px rgba(13, 13, 13, 0.06);
+    --elev-ring: 0 0 0 1px var(--border);
+    --fg: #0d0d0d;
+    --fg-2: #1a1a1a;
+    --focus-ring: 0 0 0 3px rgba(16, 163, 127, 0.12);
+    --font-body: "Söhne", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
+    --font-display: "Signifier", "Source Serif Pro", Georgia, ui-serif, serif;
+    --font-mono: "Söhne Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
+    --leading-body: 1.65;
+    --leading-tight: 1.08;
+    --meta: #9b9b9b;
+    --motion-base: 220ms;
+    --motion-fast: 150ms;
+    --muted: #6e6e6e;
+    --radius-lg: 16px;
+    --radius-md: 16px;
+    --radius-pill: 9999px;
+    --radius-sm: 12px;
+    --section-y-desktop: 96px;
+    --section-y-phone: 48px;
+    --section-y-tablet: 64px;
+    --space-1: 4px;
+    --space-12: 48px;
+    --space-16: 64px;
+    --space-2: 8px;
+    --space-3: 12px;
+    --space-4: 16px;
+    --space-5: 20px;
+    --space-6: 24px;
+    --space-8: 32px;
+    --success: #10a37f;
+    --surface: #f5f5f5;
+    --surface-warm: #fafafa;
+    --text-2xl: 28px;
+    --text-3xl: 40px;
+    --text-4xl: 56px;
+    --text-base: 16px;
+    --text-lg: 18px;
+    --text-sm: 13px;
+    --text-xl: 20px;
+    --text-xs: 12px;
+    --tracking-display: -0.02em;
+    --warn: #f5a623;
+}
+:root {
+  --od-page-bg: #ffffff;
+  --od-surface: #f5f5f5;
+  --od-text: #0d0d0d;
+  --od-muted: #6e6e6e;
+  --od-border: #e5e5e5;
+  --od-accent: #10a37f;
+  --od-radius: 16px;
+  --od-font-body: "Söhne", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
+  --od-font-display: "Signifier", "Source Serif Pro", Georgia, ui-serif, 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>OpenAI 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 OpenAI, 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="OpenAI" /></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/openai/system/artifacts/email.html

@@ -0,0 +1,138 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>OpenAI - Email</title>
+  <style>
+:root {
+    --accent: #10a37f;
+    --accent-active: color-mix(in oklab, var(--accent), black 14%);
+    --accent-hover: #0a7a5e;
+    --accent-on: #ffffff;
+    --bg: #ffffff;
+    --border: #e5e5e5;
+    --border-soft: #ededed;
+    --container-gutter-desktop: 48px;
+    --container-gutter-phone: 24px;
+    --container-gutter-tablet: 24px;
+    --container-max: 1200px;
+    --danger: #ef4146;
+    --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
+    --elev-flat: none;
+    --elev-raised: 0 4px 16px rgba(13, 13, 13, 0.06);
+    --elev-ring: 0 0 0 1px var(--border);
+    --fg: #0d0d0d;
+    --fg-2: #1a1a1a;
+    --focus-ring: 0 0 0 3px rgba(16, 163, 127, 0.12);
+    --font-body: "Söhne", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
+    --font-display: "Signifier", "Source Serif Pro", Georgia, ui-serif, serif;
+    --font-mono: "Söhne Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
+    --leading-body: 1.65;
+    --leading-tight: 1.08;
+    --meta: #9b9b9b;
+    --motion-base: 220ms;
+    --motion-fast: 150ms;
+    --muted: #6e6e6e;
+    --radius-lg: 16px;
+    --radius-md: 16px;
+    --radius-pill: 9999px;
+    --radius-sm: 12px;
+    --section-y-desktop: 96px;
+    --section-y-phone: 48px;
+    --section-y-tablet: 64px;
+    --space-1: 4px;
+    --space-12: 48px;
+    --space-16: 64px;
+    --space-2: 8px;
+    --space-3: 12px;
+    --space-4: 16px;
+    --space-5: 20px;
+    --space-6: 24px;
+    --space-8: 32px;
+    --success: #10a37f;
+    --surface: #f5f5f5;
+    --surface-warm: #fafafa;
+    --text-2xl: 28px;
+    --text-3xl: 40px;
+    --text-4xl: 56px;
+    --text-base: 16px;
+    --text-lg: 18px;
+    --text-sm: 13px;
+    --text-xl: 20px;
+    --text-xs: 12px;
+    --tracking-display: -0.02em;
+    --warn: #f5a623;
+}
+:root {
+  --od-page-bg: #ffffff;
+  --od-surface: #f5f5f5;
+  --od-text: #0d0d0d;
+  --od-muted: #6e6e6e;
+  --od-border: #e5e5e5;
+  --od-accent: #10a37f;
+  --od-radius: 16px;
+  --od-font-body: "Söhne", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
+  --od-font-display: "Signifier", "Source Serif Pro", Georgia, ui-serif, 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>OpenAI 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 OpenAI, 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="OpenAI" /></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/openai/system/artifacts/form.html

@@ -0,0 +1,138 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>OpenAI - Form page</title>
+  <style>
+:root {
+    --accent: #10a37f;
+    --accent-active: color-mix(in oklab, var(--accent), black 14%);
+    --accent-hover: #0a7a5e;
+    --accent-on: #ffffff;
+    --bg: #ffffff;
+    --border: #e5e5e5;
+    --border-soft: #ededed;
+    --container-gutter-desktop: 48px;
+    --container-gutter-phone: 24px;
+    --container-gutter-tablet: 24px;
+    --container-max: 1200px;
+    --danger: #ef4146;
+    --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
+    --elev-flat: none;
+    --elev-raised: 0 4px 16px rgba(13, 13, 13, 0.06);
+    --elev-ring: 0 0 0 1px var(--border);
+    --fg: #0d0d0d;
+    --fg-2: #1a1a1a;
+    --focus-ring: 0 0 0 3px rgba(16, 163, 127, 0.12);
+    --font-body: "Söhne", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
+    --font-display: "Signifier", "Source Serif Pro", Georgia, ui-serif, serif;
+    --font-mono: "Söhne Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
+    --leading-body: 1.65;
+    --leading-tight: 1.08;
+    --meta: #9b9b9b;
+    --motion-base: 220ms;
+    --motion-fast: 150ms;
+    --muted: #6e6e6e;
+    --radius-lg: 16px;
+    --radius-md: 16px;
+    --radius-pill: 9999px;
+    --radius-sm: 12px;
+    --section-y-desktop: 96px;
+    --section-y-phone: 48px;
+    --section-y-tablet: 64px;
+    --space-1: 4px;
+    --space-12: 48px;
+    --space-16: 64px;
+    --space-2: 8px;
+    --space-3: 12px;
+    --space-4: 16px;
+    --space-5: 20px;
+    --space-6: 24px;
+    --space-8: 32px;
+    --success: #10a37f;
+    --surface: #f5f5f5;
+    --surface-warm: #fafafa;
+    --text-2xl: 28px;
+    --text-3xl: 40px;
+    --text-4xl: 56px;
+    --text-base: 16px;
+    --text-lg: 18px;
+    --text-sm: 13px;
+    --text-xl: 20px;
+    --text-xs: 12px;
+    --tracking-display: -0.02em;
+    --warn: #f5a623;
+}
+:root {
+  --od-page-bg: #ffffff;
+  --od-surface: #f5f5f5;
+  --od-text: #0d0d0d;
+  --od-muted: #6e6e6e;
+  --od-border: #e5e5e5;
+  --od-accent: #10a37f;
+  --od-radius: 16px;
+  --od-font-body: "Söhne", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
+  --od-font-display: "Signifier", "Source Serif Pro", Georgia, ui-serif, 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>OpenAI 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 OpenAI, 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="OpenAI" /></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/openai/system/artifacts/landing.html

@@ -0,0 +1,138 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>OpenAI - Landing page</title>
+  <style>
+:root {
+    --accent: #10a37f;
+    --accent-active: color-mix(in oklab, var(--accent), black 14%);
+    --accent-hover: #0a7a5e;
+    --accent-on: #ffffff;
+    --bg: #ffffff;
+    --border: #e5e5e5;
+    --border-soft: #ededed;
+    --container-gutter-desktop: 48px;
+    --container-gutter-phone: 24px;
+    --container-gutter-tablet: 24px;
+    --container-max: 1200px;
+    --danger: #ef4146;
+    --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
+    --elev-flat: none;
+    --elev-raised: 0 4px 16px rgba(13, 13, 13, 0.06);
+    --elev-ring: 0 0 0 1px var(--border);
+    --fg: #0d0d0d;
+    --fg-2: #1a1a1a;
+    --focus-ring: 0 0 0 3px rgba(16, 163, 127, 0.12);
+    --font-body: "Söhne", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
+    --font-display: "Signifier", "Source Serif Pro", Georgia, ui-serif, serif;
+    --font-mono: "Söhne Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
+    --leading-body: 1.65;
+    --leading-tight: 1.08;
+    --meta: #9b9b9b;
+    --motion-base: 220ms;
+    --motion-fast: 150ms;
+    --muted: #6e6e6e;
+    --radius-lg: 16px;
+    --radius-md: 16px;
+    --radius-pill: 9999px;
+    --radius-sm: 12px;
+    --section-y-desktop: 96px;
+    --section-y-phone: 48px;
+    --section-y-tablet: 64px;
+    --space-1: 4px;
+    --space-12: 48px;
+    --space-16: 64px;
+    --space-2: 8px;
+    --space-3: 12px;
+    --space-4: 16px;
+    --space-5: 20px;
+    --space-6: 24px;
+    --space-8: 32px;
+    --success: #10a37f;
+    --surface: #f5f5f5;
+    --surface-warm: #fafafa;
+    --text-2xl: 28px;
+    --text-3xl: 40px;
+    --text-4xl: 56px;
+    --text-base: 16px;
+    --text-lg: 18px;
+    --text-sm: 13px;
+    --text-xl: 20px;
+    --text-xs: 12px;
+    --tracking-display: -0.02em;
+    --warn: #f5a623;
+}
+:root {
+  --od-page-bg: #ffffff;
+  --od-surface: #f5f5f5;
+  --od-text: #0d0d0d;
+  --od-muted: #6e6e6e;
+  --od-border: #e5e5e5;
+  --od-accent: #10a37f;
+  --od-radius: 16px;
+  --od-font-body: "Söhne", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
+  --od-font-display: "Signifier", "Source Serif Pro", Georgia, ui-serif, 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>OpenAI 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 OpenAI, 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="OpenAI" /></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/openai/system/artifacts/newsletter.html

@@ -0,0 +1,138 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>OpenAI - Newsletter</title>
+  <style>
+:root {
+    --accent: #10a37f;
+    --accent-active: color-mix(in oklab, var(--accent), black 14%);
+    --accent-hover: #0a7a5e;
+    --accent-on: #ffffff;
+    --bg: #ffffff;
+    --border: #e5e5e5;
+    --border-soft: #ededed;
+    --container-gutter-desktop: 48px;
+    --container-gutter-phone: 24px;
+    --container-gutter-tablet: 24px;
+    --container-max: 1200px;
+    --danger: #ef4146;
+    --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
+    --elev-flat: none;
+    --elev-raised: 0 4px 16px rgba(13, 13, 13, 0.06);
+    --elev-ring: 0 0 0 1px var(--border);
+    --fg: #0d0d0d;
+    --fg-2: #1a1a1a;
+    --focus-ring: 0 0 0 3px rgba(16, 163, 127, 0.12);
+    --font-body: "Söhne", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
+    --font-display: "Signifier", "Source Serif Pro", Georgia, ui-serif, serif;
+    --font-mono: "Söhne Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
+    --leading-body: 1.65;
+    --leading-tight: 1.08;
+    --meta: #9b9b9b;
+    --motion-base: 220ms;
+    --motion-fast: 150ms;
+    --muted: #6e6e6e;
+    --radius-lg: 16px;
+    --radius-md: 16px;
+    --radius-pill: 9999px;
+    --radius-sm: 12px;
+    --section-y-desktop: 96px;
+    --section-y-phone: 48px;
+    --section-y-tablet: 64px;
+    --space-1: 4px;
+    --space-12: 48px;
+    --space-16: 64px;
+    --space-2: 8px;
+    --space-3: 12px;
+    --space-4: 16px;
+    --space-5: 20px;
+    --space-6: 24px;
+    --space-8: 32px;
+    --success: #10a37f;
+    --surface: #f5f5f5;
+    --surface-warm: #fafafa;
+    --text-2xl: 28px;
+    --text-3xl: 40px;
+    --text-4xl: 56px;
+    --text-base: 16px;
+    --text-lg: 18px;
+    --text-sm: 13px;
+    --text-xl: 20px;
+    --text-xs: 12px;
+    --tracking-display: -0.02em;
+    --warn: #f5a623;
+}
+:root {
+  --od-page-bg: #ffffff;
+  --od-surface: #f5f5f5;
+  --od-text: #0d0d0d;
+  --od-muted: #6e6e6e;
+  --od-border: #e5e5e5;
+  --od-accent: #10a37f;
+  --od-radius: 16px;
+  --od-font-body: "Söhne", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
+  --od-font-display: "Signifier", "Source Serif Pro", Georgia, ui-serif, 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>OpenAI 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 OpenAI, 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="OpenAI" /></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/openai/system/artifacts/poster.html

@@ -0,0 +1,138 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>OpenAI - Poster</title>
+  <style>
+:root {
+    --accent: #10a37f;
+    --accent-active: color-mix(in oklab, var(--accent), black 14%);
+    --accent-hover: #0a7a5e;
+    --accent-on: #ffffff;
+    --bg: #ffffff;
+    --border: #e5e5e5;
+    --border-soft: #ededed;
+    --container-gutter-desktop: 48px;
+    --container-gutter-phone: 24px;
+    --container-gutter-tablet: 24px;
+    --container-max: 1200px;
+    --danger: #ef4146;
+    --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
+    --elev-flat: none;
+    --elev-raised: 0 4px 16px rgba(13, 13, 13, 0.06);
+    --elev-ring: 0 0 0 1px var(--border);
+    --fg: #0d0d0d;
+    --fg-2: #1a1a1a;
+    --focus-ring: 0 0 0 3px rgba(16, 163, 127, 0.12);
+    --font-body: "Söhne", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
+    --font-display: "Signifier", "Source Serif Pro", Georgia, ui-serif, serif;
+    --font-mono: "Söhne Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
+    --leading-body: 1.65;
+    --leading-tight: 1.08;
+    --meta: #9b9b9b;
+    --motion-base: 220ms;
+    --motion-fast: 150ms;
+    --muted: #6e6e6e;
+    --radius-lg: 16px;
+    --radius-md: 16px;
+    --radius-pill: 9999px;
+    --radius-sm: 12px;
+    --section-y-desktop: 96px;
+    --section-y-phone: 48px;
+    --section-y-tablet: 64px;
+    --space-1: 4px;
+    --space-12: 48px;
+    --space-16: 64px;
+    --space-2: 8px;
+    --space-3: 12px;
+    --space-4: 16px;
+    --space-5: 20px;
+    --space-6: 24px;
+    --space-8: 32px;
+    --success: #10a37f;
+    --surface: #f5f5f5;
+    --surface-warm: #fafafa;
+    --text-2xl: 28px;
+    --text-3xl: 40px;
+    --text-4xl: 56px;
+    --text-base: 16px;
+    --text-lg: 18px;
+    --text-sm: 13px;
+    --text-xl: 20px;
+    --text-xs: 12px;
+    --tracking-display: -0.02em;
+    --warn: #f5a623;
+}
+:root {
+  --od-page-bg: #ffffff;
+  --od-surface: #f5f5f5;
+  --od-text: #0d0d0d;
+  --od-muted: #6e6e6e;
+  --od-border: #e5e5e5;
+  --od-accent: #10a37f;
+  --od-radius: 16px;
+  --od-font-body: "Söhne", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
+  --od-font-display: "Signifier", "Source Serif Pro", Georgia, ui-serif, 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>OpenAI 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 OpenAI, 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="OpenAI" /></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/openai/system/index.html

@@ -0,0 +1,129 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>OpenAI - system assets</title>
+  <style>
+:root {
+    --accent: #10a37f;
+    --accent-active: color-mix(in oklab, var(--accent), black 14%);
+    --accent-hover: #0a7a5e;
+    --accent-on: #ffffff;
+    --bg: #ffffff;
+    --border: #e5e5e5;
+    --border-soft: #ededed;
+    --container-gutter-desktop: 48px;
+    --container-gutter-phone: 24px;
+    --container-gutter-tablet: 24px;
+    --container-max: 1200px;
+    --danger: #ef4146;
+    --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
+    --elev-flat: none;
+    --elev-raised: 0 4px 16px rgba(13, 13, 13, 0.06);
+    --elev-ring: 0 0 0 1px var(--border);
+    --fg: #0d0d0d;
+    --fg-2: #1a1a1a;
+    --focus-ring: 0 0 0 3px rgba(16, 163, 127, 0.12);
+    --font-body: "Söhne", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
+    --font-display: "Signifier", "Source Serif Pro", Georgia, ui-serif, serif;
+    --font-mono: "Söhne Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
+    --leading-body: 1.65;
+    --leading-tight: 1.08;
+    --meta: #9b9b9b;
+    --motion-base: 220ms;
+    --motion-fast: 150ms;
+    --muted: #6e6e6e;
+    --radius-lg: 16px;
+    --radius-md: 16px;
+    --radius-pill: 9999px;
+    --radius-sm: 12px;
+    --section-y-desktop: 96px;
+    --section-y-phone: 48px;
+    --section-y-tablet: 64px;
+    --space-1: 4px;
+    --space-12: 48px;
+    --space-16: 64px;
+    --space-2: 8px;
+    --space-3: 12px;
+    --space-4: 16px;
+    --space-5: 20px;
+    --space-6: 24px;
+    --space-8: 32px;
+    --success: #10a37f;
+    --surface: #f5f5f5;
+    --surface-warm: #fafafa;
+    --text-2xl: 28px;
+    --text-3xl: 40px;
+    --text-4xl: 56px;
+    --text-base: 16px;
+    --text-lg: 18px;
+    --text-sm: 13px;
+    --text-xl: 20px;
+    --text-xs: 12px;
+    --tracking-display: -0.02em;
+    --warn: #f5a623;
+}
+:root {
+  --od-page-bg: #ffffff;
+  --od-surface: #f5f5f5;
+  --od-text: #0d0d0d;
+  --od-muted: #6e6e6e;
+  --od-border: #e5e5e5;
+  --od-accent: #10a37f;
+  --od-radius: 16px;
+  --od-font-body: "Söhne", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
+  --od-font-display: "Signifier", "Source Serif Pro", Georgia, ui-serif, 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">AI &amp; LLM</p>
+    <h1>OpenAI 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/openai/system/kit.dark.html

@@ -0,0 +1,150 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>OpenAI - dark component kit</title>
+  <style>
+:root {
+    --accent: #10a37f;
+    --accent-active: color-mix(in oklab, var(--accent), black 14%);
+    --accent-hover: #0a7a5e;
+    --accent-on: #ffffff;
+    --bg: #ffffff;
+    --border: #e5e5e5;
+    --border-soft: #ededed;
+    --container-gutter-desktop: 48px;
+    --container-gutter-phone: 24px;
+    --container-gutter-tablet: 24px;
+    --container-max: 1200px;
+    --danger: #ef4146;
+    --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
+    --elev-flat: none;
+    --elev-raised: 0 4px 16px rgba(13, 13, 13, 0.06);
+    --elev-ring: 0 0 0 1px var(--border);
+    --fg: #0d0d0d;
+    --fg-2: #1a1a1a;
+    --focus-ring: 0 0 0 3px rgba(16, 163, 127, 0.12);
+    --font-body: "Söhne", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
+    --font-display: "Signifier", "Source Serif Pro", Georgia, ui-serif, serif;
+    --font-mono: "Söhne Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
+    --leading-body: 1.65;
+    --leading-tight: 1.08;
+    --meta: #9b9b9b;
+    --motion-base: 220ms;
+    --motion-fast: 150ms;
+    --muted: #6e6e6e;
+    --radius-lg: 16px;
+    --radius-md: 16px;
+    --radius-pill: 9999px;
+    --radius-sm: 12px;
+    --section-y-desktop: 96px;
+    --section-y-phone: 48px;
+    --section-y-tablet: 64px;
+    --space-1: 4px;
+    --space-12: 48px;
+    --space-16: 64px;
+    --space-2: 8px;
+    --space-3: 12px;
+    --space-4: 16px;
+    --space-5: 20px;
+    --space-6: 24px;
+    --space-8: 32px;
+    --success: #10a37f;
+    --surface: #f5f5f5;
+    --surface-warm: #fafafa;
+    --text-2xl: 28px;
+    --text-3xl: 40px;
+    --text-4xl: 56px;
+    --text-base: 16px;
+    --text-lg: 18px;
+    --text-sm: 13px;
+    --text-xl: 20px;
+    --text-xs: 12px;
+    --tracking-display: -0.02em;
+    --warn: #f5a623;
+}
+:root {
+  --od-page-bg: #0f1115;
+  --od-surface: #171a21;
+  --od-text: #f8fafc;
+  --od-muted: #a7adba;
+  --od-border: #2a2f3a;
+  --od-accent: #10a37f;
+  --od-radius: 16px;
+  --od-font-body: "Söhne", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
+  --od-font-display: "Signifier", "Source Serif Pro", Georgia, ui-serif, 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">AI &amp; LLM system</p>
+        <h1>OpenAI component kit</h1>
+        <p class="lead">Bundled OpenDesign package for OpenAI, 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/openai/system/kit.html

@@ -0,0 +1,150 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>OpenAI - component kit</title>
+  <style>
+:root {
+    --accent: #10a37f;
+    --accent-active: color-mix(in oklab, var(--accent), black 14%);
+    --accent-hover: #0a7a5e;
+    --accent-on: #ffffff;
+    --bg: #ffffff;
+    --border: #e5e5e5;
+    --border-soft: #ededed;
+    --container-gutter-desktop: 48px;
+    --container-gutter-phone: 24px;
+    --container-gutter-tablet: 24px;
+    --container-max: 1200px;
+    --danger: #ef4146;
+    --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
+    --elev-flat: none;
+    --elev-raised: 0 4px 16px rgba(13, 13, 13, 0.06);
+    --elev-ring: 0 0 0 1px var(--border);
+    --fg: #0d0d0d;
+    --fg-2: #1a1a1a;
+    --focus-ring: 0 0 0 3px rgba(16, 163, 127, 0.12);
+    --font-body: "Söhne", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
+    --font-display: "Signifier", "Source Serif Pro", Georgia, ui-serif, serif;
+    --font-mono: "Söhne Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
+    --leading-body: 1.65;
+    --leading-tight: 1.08;
+    --meta: #9b9b9b;
+    --motion-base: 220ms;
+    --motion-fast: 150ms;
+    --muted: #6e6e6e;
+    --radius-lg: 16px;
+    --radius-md: 16px;
+    --radius-pill: 9999px;
+    --radius-sm: 12px;
+    --section-y-desktop: 96px;
+    --section-y-phone: 48px;
+    --section-y-tablet: 64px;
+    --space-1: 4px;
+    --space-12: 48px;
+    --space-16: 64px;
+    --space-2: 8px;
+    --space-3: 12px;
+    --space-4: 16px;
+    --space-5: 20px;
+    --space-6: 24px;
+    --space-8: 32px;
+    --success: #10a37f;
+    --surface: #f5f5f5;
+    --surface-warm: #fafafa;
+    --text-2xl: 28px;
+    --text-3xl: 40px;
+    --text-4xl: 56px;
+    --text-base: 16px;
+    --text-lg: 18px;
+    --text-sm: 13px;
+    --text-xl: 20px;
+    --text-xs: 12px;
+    --tracking-display: -0.02em;
+    --warn: #f5a623;
+}
+:root {
+  --od-page-bg: #ffffff;
+  --od-surface: #f5f5f5;
+  --od-text: #0d0d0d;
+  --od-muted: #6e6e6e;
+  --od-border: #e5e5e5;
+  --od-accent: #10a37f;
+  --od-radius: 16px;
+  --od-font-body: "Söhne", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
+  --od-font-display: "Signifier", "Source Serif Pro", Georgia, ui-serif, 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">AI &amp; LLM system</p>
+        <h1>OpenAI component kit</h1>
+        <p class="lead">Bundled OpenDesign package for OpenAI, 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/openai/system/tokens.default.json

@@ -0,0 +1,8 @@
+{
+  "colorPrimary": "#10a37f",
+  "colorPrimaryBg": "#fafafa",
+  "colorPrimaryHover": "#0a7a5e",
+  "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)",
+  "fontSize": 16,
+  "borderRadius": 16
+}

open-design/design-systems/openai/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/openai/tokens.css

@@ -0,0 +1,133 @@
+/* ─────────────────────────────────────────────────────────────────────────
+ * design-systems/openai/tokens.css
+ *
+ * Structured token bindings for the "OpenAI" brand — calm, near-monochrome
+ * system anchored in deep teal-black with editorial serif display.
+ *
+ * Brand identity in three sentences:
+ *   1. True white canvas (#ffffff) against deep teal-black ink (#0d0d0d)
+ *      with a subtle cool undertone; chromatic neutrality that puts model
+ *      output front and center rather than the chrome around it.
+ *   2. Söhne / Inter at restrained weights (400/500/600 — never 700+)
+ *      paired with Signifier serif for editorial display moments only;
+ *      generous line-height (1.55–1.65) and near-zero tracking.
+ *   3. Single brand color: OpenAI Teal (#10a37f) — the lone accent in an
+ *      otherwise neutral system; hairline borders (#e5e5e5) used sparingly;
+ *      whitespace as the primary section divider.
+ *
+ * Schema decisions:
+ *   - --bg: #ffffff; --surface: #f5f5f5 (pearl — card surface).
+ *   - --surface-warm: #fafafa (mist — section break bg, footer).
+ *   - --fg: #0d0d0d (ink black); --fg-2: #1a1a1a (soft black).
+ *   - --muted: #6e6e6e (slate — secondary text, captions).
+ *   - --accent: #10a37f (OpenAI Teal); --accent-hover: #0a7a5e.
+ *   - --font-display: Signifier (serif — editorial hero moments only).
+ *   - --font-body: Söhne / Inter (sans — all UI and body text).
+ *   - --tracking-display: -0.02em (display 56px per DESIGN.md).
+ *   - --leading-tight: 1.08 (Signifier display hero rhythm).
+ *   - h2 (28px sans) → 1.20; h3 (20px) → 1.30 per DESIGN.md.
+ *   - --radius-md: 16px (cards); --radius-sm: 12px (buttons, inputs).
+ * ─────────────────────────────────────────────────────────────────── */
+
+:root {
+  /* ─── Surface ──────────────────────────────────────────────────── */
+  --bg:           #ffffff;
+  --surface:      #f5f5f5;             /* pearl — card surface, elevated panel */
+  --surface-warm: #fafafa;             /* mist — section break, footer */
+
+  /* ─── Foreground ───────────────────────────────────────────────── */
+  --fg:   #0d0d0d;                     /* ink black — primary text, brand mark */
+  --fg-2: #1a1a1a;                     /* soft black — alternative headings */
+  --muted: #6e6e6e;                    /* slate — secondary text, captions */
+  --meta:  #9b9b9b;                    /* ash — tertiary, placeholder */
+
+  /* ─── Border ───────────────────────────────────────────────────── */
+  --border:      #e5e5e5;             /* hairline — standard separator */
+  --border-soft: #ededed;             /* card outline on white surface */
+
+  /* ─── Accent ───────────────────────────────────────────────────── */
+  --accent:        #10a37f;           /* OpenAI Teal — links, highlight, CTA */
+  --accent-on:     #ffffff;
+  --accent-hover:  #0a7a5e;           /* teal deep — hover/pressed */
+  --accent-active: color-mix(in oklab, var(--accent), black 14%);
+
+  /* ─── Semantic ─────────────────────────────────────────────────── */
+  --success: #10a37f;                 /* teal — success path */
+  --warn:    #f5a623;                 /* amber — advisory */
+  --danger:  #ef4146;                 /* error — validation, destructive */
+
+  /* ─── Typography ───────────────────────────────────────────────── */
+  /* --font-display binds to Signifier — editorial serif for display only.
+     --font-body binds to Söhne/Inter — all UI and reading text. */
+  --font-display: "Signifier", "Source Serif Pro", Georgia, ui-serif, serif;
+  --font-body:    "Söhne", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
+  --font-mono:    "Söhne Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
+
+  /* Type scale — DESIGN.md §Typography Hierarchy.
+   * Signifier at 56px display; Söhne from 40px H1 down to 12px label.
+   * Schema spine maps the key stops. */
+  --text-xs:   12px;                  /* label — eyebrow, uppercase nav */
+  --text-sm:   13px;                  /* caption — metadata, badges */
+  --text-base: 16px;                  /* body — standard reading */
+  --text-lg:   18px;                  /* body large — lede paragraphs */
+  --text-xl:   20px;                  /* h3 — sub-section */
+  --text-2xl:  28px;                  /* h2 — section heading */
+  --text-3xl:  40px;                  /* h1 — page heading */
+  --text-4xl:  56px;                  /* display — Signifier editorial hero */
+
+  /* Leading + tracking.
+   * --leading-tight=1.08: Signifier display compression.
+   * h2 (Söhne 28px) → 1.20; h3 (20px) → 1.30 per DESIGN.md.
+   * --tracking-display: -0.02em (display size negative tracking). */
+  --leading-body:     1.65;
+  --leading-tight:    1.08;
+  --tracking-display: -0.02em;
+
+  /* ─── Spacing ──────────────────────────────────────────────────── */
+  /* 4px base grid; schema spine: --space-N = N×4 px.
+     OpenAI's DESIGN.md §5 scale (4 8 12 16 24 32 48 64 96 128) maps
+     naturally onto the spine — 64px lives in --space-16 (brand ext). */
+  --space-1:  4px;
+  --space-2:  8px;
+  --space-3:  12px;
+  --space-4:  16px;
+  --space-5:  20px;
+  --space-6:  24px;
+  --space-8:  32px;
+  --space-12: 48px;
+
+  /* Brand extension — 64px gap used between major page sections. */
+  --space-16: 64px;
+
+  /* Section rhythm — generous whitespace is the primary divider. */
+  --section-y-desktop: 96px;
+  --section-y-tablet:  64px;
+  --section-y-phone:   48px;
+
+  /* ─── Radius ───────────────────────────────────────────────────── */
+  /* Uniformly soft: 12px buttons/inputs; 16px cards; 9999px chips/pills. */
+  --radius-sm:   12px;
+  --radius-md:   16px;
+  --radius-lg:   16px;
+  --radius-pill: 9999px;
+
+  /* ─── Elevation ────────────────────────────────────────────────── */
+  /* No shadow by default; hover reveals a whisper lift. */
+  --elev-flat:   none;
+  --elev-ring:   0 0 0 1px var(--border);
+  --elev-raised: 0 4px 16px rgba(13, 13, 13, 0.06);
+
+  /* ─── Focus ────────────────────────────────────────────────────── */
+  --focus-ring: 0 0 0 3px rgba(16, 163, 127, 0.12);
+
+  /* ─── Motion ───────────────────────────────────────────────────── */
+  --motion-fast:   150ms;
+  --motion-base:   220ms;
+  --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
+
+  /* ─── Layout ───────────────────────────────────────────────────── */
+  --container-max:            1200px;
+  --container-gutter-desktop: 48px;
+  --container-gutter-tablet:  24px;
+  --container-gutter-phone:   24px;
+}