④段整套同步（六节 ＋ 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。
This commit is contained in:
admin committed
1 parent
fa0a9026c8
commit
5afeb6b78a
4184 files changed
+326
-70
No files matched your search
@@ -0,0 +1,161 @@
|
||||
# نظام تصميم مستوحى من GitHub
|
||||
|
||||
> Category: أدوات المطورين
|
||||
> منصة تُقدّم الكود في المقام الأول. كثافة وظيفية، ودقة الأزرق على الأبيض، وأسس Primer.
|
||||
|
||||
## 1. الطابع البصري والأجواء العامة
|
||||
|
||||
سطح GitHub مُهندَس لا مُزيَّن. كل بكسل يُعلن موقفاً صريحاً: هذه أداة لمن يهتم بالفروقات والبنى وطلبات السحب. خلفية الصفحة هي `#ffffff` نظيفة (الوضع الفاتح) أو `#0d1117` (الوضع الداكن)، وتُرتَّب المحتويات على ألواح مستطيلة كثيفة تفصل بينها حدود رفيعة كالشعرة لا فراغات سلبية. كثافة المعلومات هي العلامة التجارية — صفوف القوائم وأسطر الكود ورؤوس المستودعات وبطاقات الإشعارات كلها متقاربة حتى يتمكن المستخدم المتمرس من مسح مئة عنصر دون تمرير.
|
||||
|
||||
النبرة البصرية المميزة هي **الأزرق Primer** (`#0969da`) للروابط والإجراءات الرئيسية، و**الأخضر GitHub** (`#1a7f37`) للحالات المدمجة والنجاح وزر الدمج ذاته. كلاهما يبدو خافتاً نسبياً مقارنةً بأزرق وأخضر منتجات المستهلكين — مشبعٌ بما يكفي للتمييز على خلفية النص الرمادي الكثيف، ومكبوحٌ بما يكفي ليختفي في الخلفية حين تظهر عدة نسخ في إطار عرض واحد.
|
||||
|
||||
تستخدم الطباعة مكدس **system-ui** عبر المنتج بأكمله لعرض النصوص بوضوح على كل نظام تشغيل، إلى جانب **SFMono / Menlo / Consolas** للكود. لا يوجد خط عرض تحريري؛ صوت GitHub هو صوت النظام الذي أنت عليه بالفعل.
|
||||
|
||||
**الخصائص الجوهرية:**
|
||||
- لوحة بيضاء حقيقية (`#ffffff`) أو أسود-كحلي غامق (`#0d1117`) — بلا دفء ولا تدرج
|
||||
- حدود رمادية رفيعة (`#d0d7de`) تُحدد كل لوح وحاوية
|
||||
- الأزرق Primer (`#0969da`) للروابط والإجراءات الرئيسية؛ الأخضر GitHub (`#1a7f37`) للنجاح والدمج
|
||||
- system-ui للنصوص؛ SFMono للكود — لا خط ويب مخصص
|
||||
- صفوف قائمة كثيفة بحشو أدنى؛ المسافات البيضاء نادرة
|
||||
- أيقونات Octicon بحجم 16px / 24px — أحادية الضربة، هندسية، متسقة
|
||||
- شارات حالة على شكل حبة دواء ذات دلالات لونية قوية
|
||||
|
||||
## 2. لوحة الألوان والأدوار
|
||||
|
||||
### الألوان الأساسية
|
||||
- **Canvas Default** (`#ffffff`): خلفية الصفحة الرئيسية، الوضع الفاتح.
|
||||
- **Canvas Subtle** (`#f6f8fa`): السطح الثانوي، الشريط الجانبي، خلفية الإدخال، شريط الرأس.
|
||||
- **Canvas Inset** (`#eaeef2`): خلفية كتلة الكود، السطح الغائر.
|
||||
- **Fg Default** (`#1f2328`): النص الرئيسي، العناوين، الحبر.
|
||||
- **Fg Muted** (`#656d76`): النص الثانوي، التعليقات التوضيحية، مسارات الملفات.
|
||||
|
||||
### لون العلامة التجارية المميز
|
||||
- **Primer Blue** (`#0969da`): الروابط، الدعوات للإجراء الرئيسية، حلقة التركيز — اللون التفاعلي الشامل.
|
||||
- **Primer Blue Hover** (`#0550ae`): حالة التمرير/الضغط للأزرق الرئيسي.
|
||||
- **Accent Subtle** (`#ddf4ff`): سطح أزرق ناعم للتنبيهات وبانرات المعلومات.
|
||||
|
||||
### الألوان الدلالية
|
||||
- **Success / Merge Green** (`#1a7f37`): طلبات السحب المدمجة، شارات النجاح، زر الدمج.
|
||||
- **Success Subtle** (`#dafbe1`): تدرج سطح النجاح.
|
||||
- **Open Green** (`#1a7f37`): حالة "مفتوح" للمشكلة/طلب السحب.
|
||||
- **Closed / Danger Red** (`#cf222e`): طلبات السحب المغلقة، الإجراء التدميري، خطأ التحقق.
|
||||
- **Danger Subtle** (`#ffebe9`): سطح بانر الخطأ.
|
||||
- **Attention / Warning Yellow** (`#9a6700`): نص التحذير على سطح كهرماني.
|
||||
- **Attention Subtle** (`#fff8c5`): سطح بانر التحذير.
|
||||
- **Done Purple** (`#8250df`): مدمج ومؤرشف، حالة "منجز"، شارة مميزة.
|
||||
- **Sponsor Pink** (`#bf3989`): قلب الرعاة، علامة GitHub Sponsors التجارية.
|
||||
|
||||
### الحدود والفواصل
|
||||
- **Border Default** (`#d0d7de`): الحد الرفيع القياسي، محيط اللوح.
|
||||
- **Border Muted** (`#d8dee4`): الفواصل الداخلية داخل اللوح.
|
||||
- **Border Subtle** (`#eaeef2`): فواصل صفوف الجدول الخافتة.
|
||||
|
||||
### الوضع الداكن
|
||||
- **Dark Canvas** (`#0d1117`): خلفية الصفحة الداكنة.
|
||||
- **Dark Surface** (`#161b22`): الشريط الجانبي، الرأس، السطح الثانوي.
|
||||
- **Dark Border** (`#30363d`): الحد القياسي في الوضع الداكن.
|
||||
- **Dark Fg** (`#e6edf3`): النص الرئيسي على الداكن.
|
||||
|
||||
## 3. قواعد الطباعة
|
||||
|
||||
### عائلة الخطوط
|
||||
- **النص الأساسي / الواجهة**: `-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif`
|
||||
- **الكود / أحادي العرض**: `ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace`
|
||||
- **الرموز التعبيرية**: `"Apple Color Emoji", "Segoe UI Emoji"`
|
||||
|
||||
### التسلسل الهرمي
|
||||
|
||||
| الدور | الخط | الحجم | الوزن | ارتفاع السطر | تباعد الحروف | ملاحظات |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Display | system-ui | 32px (2rem) | 600 | 1.25 | -0.01em | رأس المستودع، عنوان التسويق الرئيسي |
|
||||
| H1 | system-ui | 24px (1.5rem) | 600 | 1.25 | normal | عنوان الصفحة |
|
||||
| H2 | system-ui | 20px (1.25rem) | 600 | 1.25 | normal | عنوان القسم |
|
||||
| H3 | system-ui | 16px (1rem) | 600 | 1.25 | normal | عنوان القسم الفرعي، رأس اللوح |
|
||||
| Body | system-ui | 14px (0.875rem) | 400 | 1.5 | normal | حجم النص الافتراضي — ليس 16px |
|
||||
| Body Small | system-ui | 12px (0.75rem) | 400 | 1.4 | normal | التعليقات التوضيحية، بيانات الملف |
|
||||
| Code | SFMono | 12px (0.75rem) | 400 | 1.45 | normal | كتل الكود، الفروق |
|
||||
| Code Inline | SFMono | 0.85em | 400 | inherit | normal | امتدادات `code` المضمنة |
|
||||
|
||||
### المبادئ
|
||||
- **النص الأساسي 14px لا 16px**: كثافة النثر في GitHub هي هويته. يُقرأ المنتج بـ14px لاحتواء مزيد من الصفوف في إطار العرض.
|
||||
- **الوزن ثنائي**: 400 للكل افتراضياً؛ 600 للعناوين والتأكيد. لا 500، لا 700.
|
||||
- **خطوط النظام دائماً**: لا تُحمّل خط ويب للواجهة — يجب أن يُعرض النص فورياً على الاتصالات البطيئة.
|
||||
|
||||
## 4. تنسيقات المكونات
|
||||
|
||||
### الأزرار
|
||||
|
||||
**الأساسي (أخضر)**
|
||||
- الخلفية: `#1f883d`
|
||||
- النص: `#ffffff`
|
||||
- الحد: 1px solid `rgba(31, 35, 40, 0.15)`
|
||||
- الحشو: 5px 16px
|
||||
- نصف القطر: 6px
|
||||
- الظل: `0 1px 0 rgba(31,35,40,0.1)`
|
||||
- عند التمرير: خلفية `#1a7f37`
|
||||
- الاستخدام: "إنشاء مستودع"، "دمج طلب السحب"
|
||||
|
||||
**الافتراضي**
|
||||
- الخلفية: `#f6f8fa`
|
||||
- النص: `#1f2328`
|
||||
- الحد: 1px solid `#d0d7de`
|
||||
- الحشو: 5px 16px
|
||||
- نصف القطر: 6px
|
||||
- عند التمرير: خلفية `#f3f4f6`، حد `#d0d7de`
|
||||
|
||||
**محدد الخطوط (نمط رابط أزرق)**
|
||||
- الخلفية: `#ffffff`
|
||||
- النص: `#0969da`
|
||||
- الحد: 1px solid `#d0d7de`
|
||||
- عند التمرير: خلفية `#0969da`، نص `#ffffff`
|
||||
|
||||
**الخطر**
|
||||
- الخلفية: `#ffffff`
|
||||
- النص: `#cf222e`
|
||||
- الحد: 1px solid `#d0d7de`
|
||||
- عند التمرير: خلفية `#a40e26`، نص `#ffffff`، حد `#a40e26`
|
||||
|
||||
### البطاقات / الصناديق
|
||||
- الخلفية: `#ffffff`
|
||||
- الحد: 1px solid `#d0d7de`
|
||||
- نصف القطر: 6px
|
||||
- الحشو: 16px (الرأس) + 16px (الجسم)
|
||||
- للرأس شريط `#f6f8fa` مع حد سفلي.
|
||||
|
||||
### حقول الإدخال
|
||||
- الخلفية: `#ffffff`
|
||||
- الحد: 1px solid `#d0d7de`
|
||||
- نصف القطر: 6px
|
||||
- الحشو: 5px 12px
|
||||
- عند التركيز: حد `#0969da`، حلقة `0 0 0 3px rgba(9,105,218,0.3)`
|
||||
|
||||
### شارات الحالة (مشكلة / طلب سحب)
|
||||
- **مفتوح**: خلفية `#1a7f37`، نص أبيض، حشو 4px 10px، نصف قطر 9999px.
|
||||
- **مغلق**: خلفية `#cf222e`، نص أبيض.
|
||||
- **مدمج**: خلفية `#8250df`، نص أبيض.
|
||||
- **مسودة**: خلفية `#6e7781`، نص أبيض.
|
||||
|
||||
### التسميات (وسوم على المشكلات/طلبات السحب)
|
||||
- الحشو: 0 7px
|
||||
- نصف القطر: 9999px
|
||||
- الخط: 12px / 500
|
||||
- الخلفية والنص برمجيان (لون التسمية ← نص محسوب للتباين).
|
||||
|
||||
## 5. التباعد والتخطيط
|
||||
|
||||
- **الوحدة الأساسية**: 4px. مقياس التباعد: 4، 8، 12، 16، 24، 32، 40، 48.
|
||||
- **أقصى عرض للصفحة**: 1280px (`Container-xl`).
|
||||
- **الشريط الجانبي**: 296px على سطح المكتب، ينهار أسفل 1012px.
|
||||
- **حشو الصف**: 16px أفقي، 12px رأسي (القوائم كثيفة بالتصميم).
|
||||
|
||||
## 6. الحركة
|
||||
|
||||
- **المدة**: 80ms للتمرير؛ 200ms لفتح القائمة/المنبثق.
|
||||
- **التخفيف**: `ease-out` للفتح، `ease-in` للإغلاق.
|
||||
- **المتجنب**: تحريك تحميل الصفحة، التأثير المتوازي، التفاعلات الدقيقة الدائمة. الأشياء تظهر؛ لا تؤدي عروضاً.
|
||||
|
||||
## 7. قيود الاستخدام
|
||||
|
||||
- احتفظ بالقوائم الكثيفة والصناديق المحددة بالحدود وطباعة النظام معاً؛ الأزرار الخضراء المعزولة وحدها لا تكفي لإنشاء سطح منتج شبيه بـGitHub.
|
||||
- استخدم الأخضر لإجراءات المستودع البنّاءة، والأزرق للروابط والتركيز، والأحمر/البنفسجي/الرمادي فقط لحالات المشكلات وطلبات السحب وسير العمل.
|
||||
- فضّل الواجهة الهادئة والحدود الصريحة والتباعد المضغوط على الظلال الزخرفية أو البطاقات الكبيرة بأسلوب التسويق.
|
||||
@@ -0,0 +1,161 @@
|
||||
# Design System Inspired by GitHub
|
||||
|
||||
> Category: Entwicklerwerkzeuge
|
||||
> Code-zentrierte Plattform. Funktionale Dichte, Blau-auf-Weiß-Präzision, Primer-Grundlagen.
|
||||
|
||||
## 1. Visuelles Thema & Atmosphäre
|
||||
|
||||
GitHubs Oberfläche ist ingenieurmäßig gestaltet, nicht dekoriert. Jeder Pixel setzt eine klare Haltung: Dies ist ein Werkzeug für Menschen, denen Diffs, Builds und Pull Requests wichtig sind. Der Seitenhintergrund ist ein klares `#ffffff` (hell) oder `#0d1117` (dunkel), mit Inhalten auf dichten rechteckigen Bereichen, die durch haarfeine Rahmen statt Weißraum getrennt sind. Informationsdichte ist das Markenzeichen — Listenzeilen, Code-Zeilen, Repository-Header und Benachrichtigungskarten sind eng zusammengepackt, damit ein erfahrener Nutzer hundert Einträge ohne Scrollen überfliegen kann.
|
||||
|
||||
Die charakteristischen Akzente sind das **Primer-Blau** (`#0969da`) für Links und primäre Aktionen sowie das **GitHub-Grün** (`#1a7f37`) für Merge-Zustände, Erfolg und den Merge-Button selbst. Beide wirken leicht gedämpft im Vergleich zu Consumer-Produkt-Blau- und -Grüntönen — gesättigt genug, um sich gegen den dichten grauen Text abzuheben, zurückhaltend genug, um im Hintergrund zu verschwinden, wenn mehrere davon in einem Viewport erscheinen.
|
||||
|
||||
Die Typografie verwendet den **system-ui**-Stack im gesamten Produkt, sodass Text auf jedem Betriebssystem scharf gerendert wird, ergänzt durch **SFMono / Menlo / Consolas** für Code. Es gibt keine redaktionelle Display-Schrift; GitHubs Stimme ist die Stimme des Systems, das Sie bereits verwenden.
|
||||
|
||||
**Hauptmerkmale:**
|
||||
- Reines Weiß als Hintergrund (`#ffffff`) oder tiefes Marineschwarz (`#0d1117`) — keine Wärme, kein Farbton
|
||||
- Haarfeine graue Rahmen (`#d0d7de`) definieren jeden Bereich und jedes Panel
|
||||
- Primer-Blau (`#0969da`) für Links/Primäraktionen; GitHub-Grün (`#1a7f37`) für Erfolg/Merge
|
||||
- system-ui für Fließtext; SFMono für Code — keine eigene Schriftart
|
||||
- Dichte Listenzeilen mit minimalem Innenabstand; Weißraum ist selten
|
||||
- Octicon-Symbolik bei 16px / 24px — einzeiliger Strich, geometrisch, konsistent
|
||||
- Pillenförmige Status-Badges mit starker Farbsemantik
|
||||
|
||||
## 2. Farbpalette & Rollen
|
||||
|
||||
### Primär
|
||||
- **Canvas Default** (`#ffffff`): Primärer Seitenhintergrund, helles Theme.
|
||||
- **Canvas Subtle** (`#f6f8fa`): Sekundäre Oberfläche, Seitenleiste, Eingabehintergrund, Header-Streifen.
|
||||
- **Canvas Inset** (`#eaeef2`): Code-Block-Hintergrund, tief eingebettete Oberfläche.
|
||||
- **Fg Default** (`#1f2328`): Primärtext, Überschriften, Schrift.
|
||||
- **Fg Muted** (`#656d76`): Sekundärtext, Bildunterschriften, Dateipfade.
|
||||
|
||||
### Markenakzent
|
||||
- **Primer Blue** (`#0969da`): Links, primäre CTAs, Fokusring-Basis — die universelle interaktive Farbe.
|
||||
- **Primer Blue Hover** (`#0550ae`): Hover/Gedrückt für primäres Blau.
|
||||
- **Accent Subtle** (`#ddf4ff`): Weiche blaue Oberfläche für Hinweise, Info-Banner.
|
||||
|
||||
### Semantisch
|
||||
- **Success / Merge Green** (`#1a7f37`): Gemergte PRs, Erfolgs-Badges, Merge-Button.
|
||||
- **Success Subtle** (`#dafbe1`): Heller Erfolgsfarbton.
|
||||
- **Open Green** (`#1a7f37`): „Open"-Zustand für Issues/PRs.
|
||||
- **Closed / Danger Red** (`#cf222e`): Geschlossene PRs, destruktive Aktion, Validierungsfehler.
|
||||
- **Danger Subtle** (`#ffebe9`): Fehler-Banner-Oberfläche.
|
||||
- **Attention / Warning Yellow** (`#9a6700`): Warnungstext auf Bernsteinoberfläche.
|
||||
- **Attention Subtle** (`#fff8c5`): Warnungs-Banner-Oberfläche.
|
||||
- **Done Purple** (`#8250df`): Gemergt und archiviert, „Erledigt"-Zustand, Premium-Badge.
|
||||
- **Sponsor Pink** (`#bf3989`): Sponsors-Herz, GitHub Sponsors-Marke.
|
||||
|
||||
### Rahmen & Trennlinie
|
||||
- **Border Default** (`#d0d7de`): Standard-Haarrahmen, Panel-Umriss.
|
||||
- **Border Muted** (`#d8dee4`): Innere Trennlinien innerhalb eines Panels.
|
||||
- **Border Subtle** (`#eaeef2`): Dezente Tabellenzeilen-Trennlinien.
|
||||
|
||||
### Dunkles Theme
|
||||
- **Dark Canvas** (`#0d1117`): Dunkler Seitenhintergrund.
|
||||
- **Dark Surface** (`#161b22`): Seitenleiste, Header, sekundäre Oberfläche.
|
||||
- **Dark Border** (`#30363d`): Standard-Rahmen im Dunkelmodus.
|
||||
- **Dark Fg** (`#e6edf3`): Primärtext auf dunklem Hintergrund.
|
||||
|
||||
## 3. Typografieregeln
|
||||
|
||||
### Schriftfamilie
|
||||
- **Fließtext / UI**: `-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif`
|
||||
- **Code / Mono**: `ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace`
|
||||
- **Emoji**: `"Apple Color Emoji", "Segoe UI Emoji"`
|
||||
|
||||
### Hierarchie
|
||||
|
||||
| Rolle | Schrift | Größe | Gewicht | Zeilenhöhe | Buchstabenabstand | Hinweise |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Display | system-ui | 32px (2rem) | 600 | 1.25 | -0.01em | Repository-Header, Marketing-Hero |
|
||||
| H1 | system-ui | 24px (1.5rem) | 600 | 1.25 | normal | Seitenüberschrift |
|
||||
| H2 | system-ui | 20px (1.25rem) | 600 | 1.25 | normal | Abschnittsüberschrift |
|
||||
| H3 | system-ui | 16px (1rem) | 600 | 1.25 | normal | Unterabschnitt, Panel-Header |
|
||||
| Body | system-ui | 14px (0.875rem) | 400 | 1.5 | normal | Standard-Textgröße — nicht 16px |
|
||||
| Body Small | system-ui | 12px (0.75rem) | 400 | 1.4 | normal | Bildunterschriften, Datei-Metadaten |
|
||||
| Code | SFMono | 12px (0.75rem) | 400 | 1.45 | normal | Code-Blöcke, Diff |
|
||||
| Code Inline | SFMono | 0.85em | 400 | inherit | normal | Inline-`code`-Spans |
|
||||
|
||||
### Grundsätze
|
||||
- **14px Fließtext, nicht 16px**: GitHubs Prosadichte ist seine Identität. Das Produkt wird bei 14px gelesen, um mehr Zeilen in einen Viewport zu passen.
|
||||
- **Gewicht binär**: 400 standardmäßig für alles; 600 für Überschriften und Hervorhebungen. Kein 500, kein 700.
|
||||
- **Systemschriften immer**: Niemals eine Webfont für Chrome laden — Text muss bei langsamen Verbindungen sofort gerendert werden.
|
||||
|
||||
## 4. Komponenten-Stile
|
||||
|
||||
### Buttons
|
||||
|
||||
**Primär (Grün)**
|
||||
- Background: `#1f883d`
|
||||
- Text: `#ffffff`
|
||||
- Border: 1px solid `rgba(31, 35, 40, 0.15)`
|
||||
- Padding: 5px 16px
|
||||
- Radius: 6px
|
||||
- Shadow: `0 1px 0 rgba(31,35,40,0.1)`
|
||||
- Hover: background `#1a7f37`
|
||||
- Verwendung: „Repository erstellen", „Pull Request mergen"
|
||||
|
||||
**Standard**
|
||||
- Background: `#f6f8fa`
|
||||
- Text: `#1f2328`
|
||||
- Border: 1px solid `#d0d7de`
|
||||
- Padding: 5px 16px
|
||||
- Radius: 6px
|
||||
- Hover: background `#f3f4f6`, border `#d0d7de`
|
||||
|
||||
**Outline (Blauer Link-Stil)**
|
||||
- Background: `#ffffff`
|
||||
- Text: `#0969da`
|
||||
- Border: 1px solid `#d0d7de`
|
||||
- Hover: background `#0969da`, text `#ffffff`
|
||||
|
||||
**Gefahr**
|
||||
- Background: `#ffffff`
|
||||
- Text: `#cf222e`
|
||||
- Border: 1px solid `#d0d7de`
|
||||
- Hover: background `#a40e26`, text `#ffffff`, border `#a40e26`
|
||||
|
||||
### Karten / Boxen
|
||||
- Background: `#ffffff`
|
||||
- Border: 1px solid `#d0d7de`
|
||||
- Radius: 6px
|
||||
- Padding: 16px (Header) + 16px (Body)
|
||||
- Header hat einen `#f6f8fa`-Streifen mit unterem Rahmen.
|
||||
|
||||
### Eingabefelder
|
||||
- Background: `#ffffff`
|
||||
- Border: 1px solid `#d0d7de`
|
||||
- Radius: 6px
|
||||
- Padding: 5px 12px
|
||||
- Fokus: border `#0969da`, ring `0 0 0 3px rgba(9,105,218,0.3)`
|
||||
|
||||
### Status-Pillen (Issue / PR)
|
||||
- **Open**: background `#1a7f37`, Text weiß, padding 4px 10px, radius 9999px.
|
||||
- **Closed**: background `#cf222e`, Text weiß.
|
||||
- **Merged**: background `#8250df`, Text weiß.
|
||||
- **Draft**: background `#6e7781`, Text weiß.
|
||||
|
||||
### Labels (Tags für Issues/PRs)
|
||||
- Padding: 0 7px
|
||||
- Radius: 9999px
|
||||
- Font: 12px / 500
|
||||
- Hintergrund und Text sind programmatisch (Label-Farbe → Text für Kontrast berechnet).
|
||||
|
||||
## 5. Abstände & Layout
|
||||
|
||||
- **Basiseinheit**: 4px. Abstands-Skala: 4, 8, 12, 16, 24, 32, 40, 48.
|
||||
- **Maximale Seitenbreite**: 1280px (`Container-xl`).
|
||||
- **Seitenleiste**: 296px auf Desktop, bricht unter 1012px zusammen.
|
||||
- **Zeilen-Padding**: 16px horizontal, 12px vertikal (Listen sind konstruktionsbedingt dicht).
|
||||
|
||||
## 6. Animation
|
||||
|
||||
- **Dauer**: 80ms für Hover; 200ms für Menü-/Popover-Öffnung.
|
||||
- **Easing**: `ease-out` beim Öffnen, `ease-in` beim Schließen.
|
||||
- **Vermieden**: Seitenlade-Animation, Parallax, persistente Micro-Interactions. Dinge erscheinen; sie performen nicht.
|
||||
|
||||
## 7. Verwendungsrichtlinien
|
||||
|
||||
- Dichte Listen, umrahmte Boxen und Systemtypografie zusammenhalten; isolierte grüne Buttons allein reichen nicht aus, um eine GitHub-ähnliche Produktoberfläche zu erzeugen.
|
||||
- Grün für konstruktive Repository-Aktionen verwenden, Blau für Links und Fokus, und Rot/Lila/Grau nur für Issue-, PR- und Workflow-Zustände.
|
||||
- Ruhige Benutzeroberfläche, explizite Rahmen und kompakte Abstände gegenüber dekorativen Schatten oder großen Marketing-Karten bevorzugen.
|
||||
@@ -0,0 +1,161 @@
|
||||
# Sistema de Diseño Inspirado en GitHub
|
||||
|
||||
> Category: Herramientas para Desarrolladores
|
||||
> Plataforma orientada al código. Densidad funcional, precisión azul sobre blanco, fundamentos Primer.
|
||||
|
||||
## 1. Tema Visual y Atmósfera
|
||||
|
||||
La superficie de GitHub es ingenieril, no decorativa. Cada píxel proclama una postura: esta es una herramienta para personas que se preocupan por los diffs, las builds y los pull requests. El fondo de página es un limpio `#ffffff` (claro) o `#0d1117` (oscuro), con el contenido dispuesto en paneles rectangulares densos separados por bordes de un solo píxel en lugar de espacio negativo. La densidad de información es la marca — filas de listas, líneas de código, cabeceras de repositorios y tarjetas de notificaciones están todas muy juntas para que un usuario avanzado pueda recorrer cien elementos sin desplazarse.
|
||||
|
||||
Los acentos característicos son el **azul Primer** (`#0969da`) para los enlaces y las acciones primarias, y el **verde GitHub** (`#1a7f37`) para los estados de fusión, el éxito y el propio botón de merge. Ambos se perciben ligeramente apagados en comparación con los azules y verdes de los productos de consumo — saturados lo suficiente para leerse sobre el denso texto gris, pero contenidos lo suficiente para desaparecer en el fondo cuando varios aparecen en una misma ventana gráfica.
|
||||
|
||||
La tipografía usa la pila **system-ui** en todo el producto para que el texto se renderice con nitidez en cualquier sistema operativo, combinada con **SFMono / Menlo / Consolas** para el código. No hay fuente de visualización editorial; la voz de GitHub es la voz del sistema en el que ya te encuentras.
|
||||
|
||||
**Características Clave:**
|
||||
- Lienzo blanco puro (`#ffffff`) o negro azulado oscuro (`#0d1117`) — sin calidez, sin tinte
|
||||
- Bordes grises de un píxel (`#d0d7de`) definen cada panel y sección
|
||||
- Azul Primer (`#0969da`) para enlaces/acciones primarias; verde GitHub (`#1a7f37`) para éxito/merge
|
||||
- system-ui para prosa; SFMono para código — sin tipografía personalizada
|
||||
- Filas de lista densas con relleno mínimo; el espacio en blanco es escaso
|
||||
- Iconografía Octicon a 16px / 24px — trazo único, geométrica, coherente
|
||||
- Insignias de estado en forma de píldora con semántica de color sólida
|
||||
|
||||
## 2. Paleta de Colores y Roles
|
||||
|
||||
### Principal
|
||||
- **Canvas Default** (`#ffffff`): Fondo principal de página, tema claro.
|
||||
- **Canvas Subtle** (`#f6f8fa`): Superficie secundaria, barra lateral, fondo de entrada, franja de cabecera.
|
||||
- **Canvas Inset** (`#eaeef2`): Fondo de bloque de código, superficie muy hundida.
|
||||
- **Fg Default** (`#1f2328`): Texto principal, titulares, tinta.
|
||||
- **Fg Muted** (`#656d76`): Texto secundario, leyendas, rutas de archivos.
|
||||
|
||||
### Acento de Marca
|
||||
- **Primer Blue** (`#0969da`): Enlaces, CTAs primarios, base del anillo de enfoque — el color interactivo universal.
|
||||
- **Primer Blue Hover** (`#0550ae`): Estado hover/presionado para el azul primario.
|
||||
- **Accent Subtle** (`#ddf4ff`): Superficie azul suave para avisos, banners informativos.
|
||||
|
||||
### Semántico
|
||||
- **Success / Merge Green** (`#1a7f37`): PRs fusionados, insignias de éxito, botón de merge.
|
||||
- **Success Subtle** (`#dafbe1`): Tinte de superficie de éxito.
|
||||
- **Open Green** (`#1a7f37`): Estado "Abierto" de issue/PR.
|
||||
- **Closed / Danger Red** (`#cf222e`): PRs cerrados, acción destructiva, error de validación.
|
||||
- **Danger Subtle** (`#ffebe9`): Superficie de banner de error.
|
||||
- **Attention / Warning Yellow** (`#9a6700`): Texto de advertencia sobre superficie ámbar.
|
||||
- **Attention Subtle** (`#fff8c5`): Superficie de banner de advertencia.
|
||||
- **Done Purple** (`#8250df`): Fusionado y archivado, estado "hecho", insignia premium.
|
||||
- **Sponsor Pink** (`#bf3989`): Corazón de patrocinadores, marca de GitHub Sponsors.
|
||||
|
||||
### Borde y Divisor
|
||||
- **Border Default** (`#d0d7de`): Borde estándar de un píxel, contorno de panel.
|
||||
- **Border Muted** (`#d8dee4`): Divisores internos dentro de un panel.
|
||||
- **Border Subtle** (`#eaeef2`): Divisores tenues de filas de tabla.
|
||||
|
||||
### Tema Oscuro
|
||||
- **Dark Canvas** (`#0d1117`): Fondo de página oscuro.
|
||||
- **Dark Surface** (`#161b22`): Barra lateral, cabecera, superficie secundaria.
|
||||
- **Dark Border** (`#30363d`): Borde estándar en modo oscuro.
|
||||
- **Dark Fg** (`#e6edf3`): Texto principal sobre fondo oscuro.
|
||||
|
||||
## 3. Reglas Tipográficas
|
||||
|
||||
### Familia de Fuentes
|
||||
- **Cuerpo / UI**: `-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif`
|
||||
- **Código / Mono**: `ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace`
|
||||
- **Emoji**: `"Apple Color Emoji", "Segoe UI Emoji"`
|
||||
|
||||
### Jerarquía
|
||||
|
||||
| Rol | Fuente | Tamaño | Peso | Altura de línea | Espaciado de letras | Notas |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Display | system-ui | 32px (2rem) | 600 | 1.25 | -0.01em | Cabecera de repositorio, hero de marketing |
|
||||
| H1 | system-ui | 24px (1.5rem) | 600 | 1.25 | normal | Encabezado de página |
|
||||
| H2 | system-ui | 20px (1.25rem) | 600 | 1.25 | normal | Encabezado de sección |
|
||||
| H3 | system-ui | 16px (1rem) | 600 | 1.25 | normal | Subsección, cabecera de panel |
|
||||
| Body | system-ui | 14px (0.875rem) | 400 | 1.5 | normal | Tamaño de texto por defecto — no 16px |
|
||||
| Body Small | system-ui | 12px (0.75rem) | 400 | 1.4 | normal | Leyendas, metadatos de archivos |
|
||||
| Code | SFMono | 12px (0.75rem) | 400 | 1.45 | normal | Bloques de código, diff |
|
||||
| Code Inline | SFMono | 0.85em | 400 | inherit | normal | Fragmentos de `code` en línea |
|
||||
|
||||
### Principios
|
||||
- **Cuerpo a 14px, no 16px**: La densidad de prosa de GitHub es su identidad. El producto se lee a 14px para encajar más filas en una ventana gráfica.
|
||||
- **Peso binario**: 400 para todo por defecto; 600 para titulares y énfasis. Sin 500, sin 700.
|
||||
- **Fuentes del sistema siempre**: nunca cargar una webfont para el cromo — el texto debe renderizarse al instante en conexiones lentas.
|
||||
|
||||
## 4. Estilos de Componentes
|
||||
|
||||
### Botones
|
||||
|
||||
**Primario (Verde)**
|
||||
- Background: `#1f883d`
|
||||
- Text: `#ffffff`
|
||||
- Border: 1px solid `rgba(31, 35, 40, 0.15)`
|
||||
- Padding: 5px 16px
|
||||
- Radius: 6px
|
||||
- Shadow: `0 1px 0 rgba(31,35,40,0.1)`
|
||||
- Hover: background `#1a7f37`
|
||||
- Uso: "Crear repositorio", "Fusionar pull request"
|
||||
|
||||
**Por Defecto**
|
||||
- Background: `#f6f8fa`
|
||||
- Text: `#1f2328`
|
||||
- Border: 1px solid `#d0d7de`
|
||||
- Padding: 5px 16px
|
||||
- Radius: 6px
|
||||
- Hover: background `#f3f4f6`, border `#d0d7de`
|
||||
|
||||
**Contorno (Estilo Enlace Azul)**
|
||||
- Background: `#ffffff`
|
||||
- Text: `#0969da`
|
||||
- Border: 1px solid `#d0d7de`
|
||||
- Hover: background `#0969da`, text `#ffffff`
|
||||
|
||||
**Peligro**
|
||||
- Background: `#ffffff`
|
||||
- Text: `#cf222e`
|
||||
- Border: 1px solid `#d0d7de`
|
||||
- Hover: background `#a40e26`, text `#ffffff`, border `#a40e26`
|
||||
|
||||
### Tarjetas / Cajas
|
||||
- Background: `#ffffff`
|
||||
- Border: 1px solid `#d0d7de`
|
||||
- Radius: 6px
|
||||
- Padding: 16px (cabecera) + 16px (cuerpo)
|
||||
- La cabecera tiene una franja `#f6f8fa` con borde inferior.
|
||||
|
||||
### Entradas
|
||||
- Background: `#ffffff`
|
||||
- Border: 1px solid `#d0d7de`
|
||||
- Radius: 6px
|
||||
- Padding: 5px 12px
|
||||
- Focus: border `#0969da`, ring `0 0 0 3px rgba(9,105,218,0.3)`
|
||||
|
||||
### Píldoras de Estado (Issue / PR)
|
||||
- **Abierto**: background `#1a7f37`, texto blanco, padding 4px 10px, radius 9999px.
|
||||
- **Cerrado**: background `#cf222e`, texto blanco.
|
||||
- **Fusionado**: background `#8250df`, texto blanco.
|
||||
- **Borrador**: background `#6e7781`, texto blanco.
|
||||
|
||||
### Etiquetas (Tags en Issues/PRs)
|
||||
- Padding: 0 7px
|
||||
- Radius: 9999px
|
||||
- Font: 12px / 500
|
||||
- El fondo y el texto son programáticos (color de etiqueta → texto calculado para contraste).
|
||||
|
||||
## 5. Espaciado y Maquetación
|
||||
|
||||
- **Unidad base**: 4px. Escala de espaciado: 4, 8, 12, 16, 24, 32, 40, 48.
|
||||
- **Ancho máximo de página**: 1280px (`Container-xl`).
|
||||
- **Barra lateral**: 296px en escritorio, se colapsa por debajo de 1012px.
|
||||
- **Relleno de fila**: 16px horizontal, 12px vertical (las listas son densas por diseño).
|
||||
|
||||
## 6. Movimiento
|
||||
|
||||
- **Duración**: 80ms para hover; 200ms para la apertura de menús/popovers.
|
||||
- **Easing**: `ease-out` para aperturas, `ease-in` para cierres.
|
||||
- **Evitado**: animación de carga de página, parallax, micro-interacciones persistentes. Las cosas aparecen; no actúan.
|
||||
|
||||
## 7. Restricciones de Uso
|
||||
|
||||
- Mantén juntas las listas densas, los cuadros con bordes y la tipografía del sistema; los botones verdes aislados no son suficientes para crear una superficie de producto similar a GitHub.
|
||||
- Usa el verde para las acciones constructivas del repositorio, el azul para los enlaces y el enfoque, y el rojo/morado/gris únicamente para los estados de issues, PRs y flujos de trabajo.
|
||||
- Prefiere el cromo discreto, los bordes explícitos y el espaciado compacto frente a sombras decorativas o tarjetas de gran tamaño estilo marketing.
|
||||
@@ -0,0 +1,161 @@
|
||||
# Système de Design Inspiré de GitHub
|
||||
|
||||
> Category: Outils de Développement
|
||||
> Plateforme orientée code. Densité fonctionnelle, précision bleu sur blanc, fondations Primer.
|
||||
|
||||
## 1. Thème Visuel & Atmosphère
|
||||
|
||||
La surface de GitHub est conçue avec rigueur, non décorée. Chaque pixel affirme une posture : ceci est un outil pour ceux qui se soucient des diffs, des builds et des pull requests. L'arrière-plan de la page est un `#ffffff` épuré (clair) ou `#0d1117` (sombre), avec le contenu disposé en panneaux rectangulaires denses séparés par des bordures fines plutôt que par de l'espace négatif. La densité d'information est la marque — les lignes de liste, les lignes de code, les en-têtes de dépôts et les cartes de notifications sont toutes serrées les unes contre les autres afin qu'un utilisateur chevronné puisse parcourir une centaine d'éléments sans défiler.
|
||||
|
||||
Les accents caractéristiques sont le **bleu Primer** (`#0969da`) pour les liens et les actions primaires, et le **vert GitHub** (`#1a7f37`) pour les états fusionnés, le succès et le bouton de merge lui-même. Les deux paraissent légèrement atténués comparés aux bleus et verts des produits grand public — suffisamment saturés pour se lire sur le texte gris dense, suffisamment sobres pour se fondre dans l'arrière-plan lorsque plusieurs apparaissent dans un même viewport.
|
||||
|
||||
La typographie utilise la pile **system-ui** sur l'ensemble du produit afin que le texte s'affiche nettement sur chaque système d'exploitation, associée à **SFMono / Menlo / Consolas** pour le code. Il n'existe aucune police d'affichage éditoriale ; la voix de GitHub est la voix du système que vous utilisez déjà.
|
||||
|
||||
**Caractéristiques Clés :**
|
||||
- Canevas blanc pur (`#ffffff`) ou bleu-noir profond (`#0d1117`) — sans chaleur, sans teinte
|
||||
- Bordures grises fines (`#d0d7de`) délimitent chaque panneau et volet
|
||||
- Bleu Primer (`#0969da`) pour les liens/actions primaires ; vert GitHub (`#1a7f37`) pour le succès/merge
|
||||
- system-ui pour la prose ; SFMono pour le code — aucune police personnalisée
|
||||
- Lignes de liste denses avec rembourrage minimal ; les espaces blancs sont rares
|
||||
- Iconographie Octicon à 16px / 24px — trait unique, géométrique, cohérent
|
||||
- Badges de statut en forme de pilule avec une sémantique chromatique forte
|
||||
|
||||
## 2. Palette de Couleurs & Rôles
|
||||
|
||||
### Primaire
|
||||
- **Canvas Default** (`#ffffff`) : Arrière-plan de page principal, thème clair.
|
||||
- **Canvas Subtle** (`#f6f8fa`) : Surface secondaire, barre latérale, arrière-plan de champ de saisie, bandeau d'en-tête.
|
||||
- **Canvas Inset** (`#eaeef2`) : Arrière-plan de bloc de code, surface en retrait profond.
|
||||
- **Fg Default** (`#1f2328`) : Texte principal, titres, encre.
|
||||
- **Fg Muted** (`#656d76`) : Texte secondaire, légendes, chemins de fichiers.
|
||||
|
||||
### Accent de Marque
|
||||
- **Primer Blue** (`#0969da`) : Liens, CTAs primaires, base de l'anneau de focus — la couleur interactive universelle.
|
||||
- **Primer Blue Hover** (`#0550ae`) : Survol/appuyé pour le bleu primaire.
|
||||
- **Accent Subtle** (`#ddf4ff`) : Surface bleu doux pour les encadrés, bannières d'information.
|
||||
|
||||
### Sémantique
|
||||
- **Success / Merge Green** (`#1a7f37`) : PRs fusionnées, badges de succès, bouton de merge.
|
||||
- **Success Subtle** (`#dafbe1`) : Teinte de surface de succès.
|
||||
- **Open Green** (`#1a7f37`) : État « Ouvert » d'une issue/PR.
|
||||
- **Closed / Danger Red** (`#cf222e`) : PRs fermées, action destructrice, erreur de validation.
|
||||
- **Danger Subtle** (`#ffebe9`) : Surface de bannière d'erreur.
|
||||
- **Attention / Warning Yellow** (`#9a6700`) : Texte d'avertissement sur surface ambrée.
|
||||
- **Attention Subtle** (`#fff8c5`) : Surface de bannière d'avertissement.
|
||||
- **Done Purple** (`#8250df`) : Fusionné et archivé, état « terminé », badge premium.
|
||||
- **Sponsor Pink** (`#bf3989`) : Cœur des sponsors, marque GitHub Sponsors.
|
||||
|
||||
### Bordure & Séparateur
|
||||
- **Border Default** (`#d0d7de`) : Bordure fine standard, contour de panneau.
|
||||
- **Border Muted** (`#d8dee4`) : Séparateurs internes au sein d'un panneau.
|
||||
- **Border Subtle** (`#eaeef2`) : Séparateurs de lignes de tableau discrets.
|
||||
|
||||
### Thème Sombre
|
||||
- **Dark Canvas** (`#0d1117`) : Arrière-plan de page sombre.
|
||||
- **Dark Surface** (`#161b22`) : Barre latérale, en-tête, surface secondaire.
|
||||
- **Dark Border** (`#30363d`) : Bordure standard en mode sombre.
|
||||
- **Dark Fg** (`#e6edf3`) : Texte principal sur fond sombre.
|
||||
|
||||
## 3. Règles Typographiques
|
||||
|
||||
### Famille de Polices
|
||||
- **Corps / UI** : `-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif`
|
||||
- **Code / Mono** : `ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace`
|
||||
- **Emoji** : `"Apple Color Emoji", "Segoe UI Emoji"`
|
||||
|
||||
### Hiérarchie
|
||||
|
||||
| Rôle | Police | Taille | Graisse | Interligne | Espacement des lettres | Notes |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Display | system-ui | 32px (2rem) | 600 | 1.25 | -0.01em | En-tête de dépôt, hero marketing |
|
||||
| H1 | system-ui | 24px (1.5rem) | 600 | 1.25 | normal | Titre de page |
|
||||
| H2 | system-ui | 20px (1.25rem) | 600 | 1.25 | normal | Titre de section |
|
||||
| H3 | system-ui | 16px (1rem) | 600 | 1.25 | normal | Sous-section, en-tête de panneau |
|
||||
| Body | system-ui | 14px (0.875rem) | 400 | 1.5 | normal | Taille de texte par défaut — pas 16px |
|
||||
| Body Small | system-ui | 12px (0.75rem) | 400 | 1.4 | normal | Légendes, métadonnées de fichier |
|
||||
| Code | SFMono | 12px (0.75rem) | 400 | 1.45 | normal | Blocs de code, diff |
|
||||
| Code Inline | SFMono | 0.85em | 400 | inherit | normal | Spans `code` en ligne |
|
||||
|
||||
### Principes
|
||||
- **Corps à 14px, pas 16px** : La densité de la prose de GitHub est son identité. Le produit se lit à 14px pour afficher plus de lignes dans un viewport.
|
||||
- **Graisse binaire** : 400 pour tout par défaut ; 600 pour les titres et l'emphase. Ni 500, ni 700.
|
||||
- **Polices système toujours** : ne jamais charger une webfont pour le chrome — le texte doit s'afficher instantanément sur les connexions lentes.
|
||||
|
||||
## 4. Styles de Composants
|
||||
|
||||
### Boutons
|
||||
|
||||
**Primaire (Vert)**
|
||||
- Background : `#1f883d`
|
||||
- Texte : `#ffffff`
|
||||
- Bordure : 1px solid `rgba(31, 35, 40, 0.15)`
|
||||
- Rembourrage : 5px 16px
|
||||
- Rayon : 6px
|
||||
- Ombre : `0 1px 0 rgba(31,35,40,0.1)`
|
||||
- Survol : background `#1a7f37`
|
||||
- Utilisation : « Créer un dépôt », « Fusionner la pull request »
|
||||
|
||||
**Par Défaut**
|
||||
- Background : `#f6f8fa`
|
||||
- Texte : `#1f2328`
|
||||
- Bordure : 1px solid `#d0d7de`
|
||||
- Rembourrage : 5px 16px
|
||||
- Rayon : 6px
|
||||
- Survol : background `#f3f4f6`, bordure `#d0d7de`
|
||||
|
||||
**Contour (Style Lien Bleu)**
|
||||
- Background : `#ffffff`
|
||||
- Texte : `#0969da`
|
||||
- Bordure : 1px solid `#d0d7de`
|
||||
- Survol : background `#0969da`, texte `#ffffff`
|
||||
|
||||
**Danger**
|
||||
- Background : `#ffffff`
|
||||
- Texte : `#cf222e`
|
||||
- Bordure : 1px solid `#d0d7de`
|
||||
- Survol : background `#a40e26`, texte `#ffffff`, bordure `#a40e26`
|
||||
|
||||
### Cartes / Boîtes
|
||||
- Background : `#ffffff`
|
||||
- Bordure : 1px solid `#d0d7de`
|
||||
- Rayon : 6px
|
||||
- Rembourrage : 16px (en-tête) + 16px (corps)
|
||||
- L'en-tête comporte un bandeau `#f6f8fa` avec une bordure inférieure.
|
||||
|
||||
### Champs de Saisie
|
||||
- Background : `#ffffff`
|
||||
- Bordure : 1px solid `#d0d7de`
|
||||
- Rayon : 6px
|
||||
- Rembourrage : 5px 12px
|
||||
- Focus : bordure `#0969da`, anneau `0 0 0 3px rgba(9,105,218,0.3)`
|
||||
|
||||
### Pilules de Statut (Issue / PR)
|
||||
- **Ouvert** : background `#1a7f37`, texte blanc, rembourrage 4px 10px, rayon 9999px.
|
||||
- **Fermé** : background `#cf222e`, texte blanc.
|
||||
- **Fusionné** : background `#8250df`, texte blanc.
|
||||
- **Brouillon** : background `#6e7781`, texte blanc.
|
||||
|
||||
### Labels (Étiquettes sur Issues/PRs)
|
||||
- Rembourrage : 0 7px
|
||||
- Rayon : 9999px
|
||||
- Police : 12px / 500
|
||||
- Le background et le texte sont calculés dynamiquement (couleur du label → texte calculé pour le contraste).
|
||||
|
||||
## 5. Espacement & Mise en Page
|
||||
|
||||
- **Unité de base** : 4px. Échelle d'espacement : 4, 8, 12, 16, 24, 32, 40, 48.
|
||||
- **Largeur max de page** : 1280px (`Container-xl`).
|
||||
- **Barre latérale** : 296px sur bureau, réduite en dessous de 1012px.
|
||||
- **Rembourrage de ligne** : 16px horizontal, 12px vertical (les listes sont denses par conception).
|
||||
|
||||
## 6. Mouvement
|
||||
|
||||
- **Durée** : 80ms pour le survol ; 200ms pour l'ouverture d'un menu/popover.
|
||||
- **Accélération** : `ease-out` pour les ouvertures, `ease-in` pour les fermetures.
|
||||
- **À éviter** : animation au chargement de page, parallaxe, micro-interactions persistantes. Les éléments apparaissent ; ils ne se mettent pas en scène.
|
||||
|
||||
## 7. Garde-fous d'Utilisation
|
||||
|
||||
- Conservez les listes denses, les boîtes avec bordures et la typographie système ensemble ; des boutons verts isolés ne suffisent pas à créer une surface produit semblable à GitHub.
|
||||
- Utilisez le vert pour les actions constructives sur les dépôts, le bleu pour les liens et le focus, et le rouge/violet/gris uniquement pour les états des issues, PRs et workflows.
|
||||
- Préférez un chrome discret, des bordures explicites et un espacement compact plutôt que des ombres décoratives ou de grandes cartes de style marketing.
|
||||
@@ -0,0 +1,161 @@
|
||||
# Sistem Desain Terinspirasi dari GitHub
|
||||
|
||||
> Category: Alat Pengembang
|
||||
> Platform berorientasi kode. Kepadatan fungsional, presisi biru-di-atas-putih, fondasi Primer.
|
||||
|
||||
## 1. Tema Visual & Atmosfer
|
||||
|
||||
Tampilan GitHub dirancang secara teknis, bukan sekadar dekoratif. Setiap piksel menegaskan sebuah sikap: ini adalah alat bagi orang-orang yang peduli pada diff, build, dan pull request. Latar belakang halaman adalah `#ffffff` yang bersih (mode terang) atau `#0d1117` (mode gelap), dengan konten yang tersusun pada panel persegi padat yang dipisahkan oleh garis batas tipis alih-alih ruang kosong. Kepadatan informasi adalah mereknya — baris daftar, baris kode, header repositori, dan kartu notifikasi semuanya tersusun rapat sehingga pengguna mahir dapat memindai ratusan item tanpa menggulir.
|
||||
|
||||
Aksen khas adalah **biru Primer** (`#0969da`) untuk tautan dan aksi utama, serta **hijau GitHub** (`#1a7f37`) untuk status merged, keberhasilan, dan tombol merge itu sendiri. Keduanya terasa sedikit redup dibandingkan biru dan hijau produk konsumen — cukup jenuh untuk terbaca di atas teks abu-abu yang padat, namun cukup tenang untuk menyatu dengan latar belakang ketika beberapa warna muncul dalam satu viewport.
|
||||
|
||||
Tipografi menggunakan tumpukan **system-ui** di seluruh produk sehingga teks dirender dengan tajam di setiap sistem operasi, dipasangkan dengan **SFMono / Menlo / Consolas** untuk kode. Tidak ada font display editorial; suara GitHub adalah suara sistem yang sudah Anda gunakan.
|
||||
|
||||
**Karakteristik Utama:**
|
||||
- Kanvas putih murni (`#ffffff`) atau hitam biru tua (`#0d1117`) — tanpa kehangatan, tanpa warna tint
|
||||
- Garis batas abu-abu tipis (`#d0d7de`) mendefinisikan setiap panel dan bagian
|
||||
- Biru Primer (`#0969da`) untuk tautan/aksi utama; hijau GitHub (`#1a7f37`) untuk keberhasilan/merge
|
||||
- system-ui untuk prosa; SFMono untuk kode — tanpa typeface kustom
|
||||
- Baris daftar padat dengan padding minimal; ruang putih jarang digunakan
|
||||
- Ikonografi Octicon pada 16px / 24px — goresan tunggal, geometris, konsisten
|
||||
- Lencana status berbentuk pil dengan semantik warna yang kuat
|
||||
|
||||
## 2. Palet Warna & Perannya
|
||||
|
||||
### Utama
|
||||
- **Canvas Default** (`#ffffff`): Latar belakang halaman utama, tema terang.
|
||||
- **Canvas Subtle** (`#f6f8fa`): Permukaan sekunder, sidebar, latar belakang input, strip header.
|
||||
- **Canvas Inset** (`#eaeef2`): Latar belakang blok kode, permukaan terbenam.
|
||||
- **Fg Default** (`#1f2328`): Teks utama, judul, tinta.
|
||||
- **Fg Muted** (`#656d76`): Teks sekunder, keterangan, jalur file.
|
||||
|
||||
### Aksen Merek
|
||||
- **Primer Blue** (`#0969da`): Tautan, CTA utama, dasar cincin fokus — warna interaktif universal.
|
||||
- **Primer Blue Hover** (`#0550ae`): Hover/ditekan untuk biru utama.
|
||||
- **Accent Subtle** (`#ddf4ff`): Permukaan biru lembut untuk callout, spanduk info.
|
||||
|
||||
### Semantik
|
||||
- **Success / Merge Green** (`#1a7f37`): PR yang di-merge, lencana keberhasilan, tombol merge.
|
||||
- **Success Subtle** (`#dafbe1`): Tint permukaan keberhasilan.
|
||||
- **Open Green** (`#1a7f37`): Status issue/PR "Terbuka".
|
||||
- **Closed / Danger Red** (`#cf222e`): PR tertutup, aksi destruktif, kesalahan validasi.
|
||||
- **Danger Subtle** (`#ffebe9`): Permukaan spanduk kesalahan.
|
||||
- **Attention / Warning Yellow** (`#9a6700`): Teks peringatan di atas permukaan amber.
|
||||
- **Attention Subtle** (`#fff8c5`): Permukaan spanduk peringatan.
|
||||
- **Done Purple** (`#8250df`): Merged-dan-diarsipkan, status "selesai", lencana premium.
|
||||
- **Sponsor Pink** (`#bf3989`): Ikon hati sponsor, merek GitHub Sponsors.
|
||||
|
||||
### Border & Pemisah
|
||||
- **Border Default** (`#d0d7de`): Garis batas tipis standar, garis luar panel.
|
||||
- **Border Muted** (`#d8dee4`): Pemisah dalam di dalam panel.
|
||||
- **Border Subtle** (`#eaeef2`): Pemisah baris tabel yang samar.
|
||||
|
||||
### Tema Gelap
|
||||
- **Dark Canvas** (`#0d1117`): Latar belakang halaman gelap.
|
||||
- **Dark Surface** (`#161b22`): Sidebar, header, permukaan sekunder.
|
||||
- **Dark Border** (`#30363d`): Garis batas mode gelap standar.
|
||||
- **Dark Fg** (`#e6edf3`): Teks utama di atas latar gelap.
|
||||
|
||||
## 3. Aturan Tipografi
|
||||
|
||||
### Keluarga Font
|
||||
- **Body / UI**: `-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif`
|
||||
- **Code / Mono**: `ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace`
|
||||
- **Emoji**: `"Apple Color Emoji", "Segoe UI Emoji"`
|
||||
|
||||
### Hierarki
|
||||
|
||||
| Peran | Font | Ukuran | Ketebalan | Tinggi Baris | Spasi Huruf | Catatan |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Display | system-ui | 32px (2rem) | 600 | 1.25 | -0.01em | Header repo, hero pemasaran |
|
||||
| H1 | system-ui | 24px (1.5rem) | 600 | 1.25 | normal | Judul halaman |
|
||||
| H2 | system-ui | 20px (1.25rem) | 600 | 1.25 | normal | Judul bagian |
|
||||
| H3 | system-ui | 16px (1rem) | 600 | 1.25 | normal | Sub-bagian, header panel |
|
||||
| Body | system-ui | 14px (0.875rem) | 400 | 1.5 | normal | Ukuran teks default — bukan 16px |
|
||||
| Body Small | system-ui | 12px (0.75rem) | 400 | 1.4 | normal | Keterangan, metadata file |
|
||||
| Code | SFMono | 12px (0.75rem) | 400 | 1.45 | normal | Blok kode, diff |
|
||||
| Code Inline | SFMono | 0.85em | 400 | inherit | normal | Span `code` inline |
|
||||
|
||||
### Prinsip
|
||||
- **Body 14px, bukan 16px**: Kepadatan prosa GitHub adalah identitasnya. Produk dibaca pada 14px untuk muat lebih banyak baris dalam satu viewport.
|
||||
- **Ketebalan biner**: 400 untuk segalanya secara default; 600 untuk judul dan penekanan. Tidak ada 500, tidak ada 700.
|
||||
- **Font sistem selalu**: jangan muat webfont untuk antarmuka — teks harus dirender seketika pada koneksi lambat.
|
||||
|
||||
## 4. Gaya Komponen
|
||||
|
||||
### Tombol
|
||||
|
||||
**Utama (Hijau)**
|
||||
- Background: `#1f883d`
|
||||
- Teks: `#ffffff`
|
||||
- Border: 1px solid `rgba(31, 35, 40, 0.15)`
|
||||
- Padding: 5px 16px
|
||||
- Radius: 6px
|
||||
- Shadow: `0 1px 0 rgba(31,35,40,0.1)`
|
||||
- Hover: background `#1a7f37`
|
||||
- Penggunaan: "Buat repositori", "Merge pull request"
|
||||
|
||||
**Default**
|
||||
- Background: `#f6f8fa`
|
||||
- Teks: `#1f2328`
|
||||
- Border: 1px solid `#d0d7de`
|
||||
- Padding: 5px 16px
|
||||
- Radius: 6px
|
||||
- Hover: background `#f3f4f6`, border `#d0d7de`
|
||||
|
||||
**Outline (Gaya Tautan Biru)**
|
||||
- Background: `#ffffff`
|
||||
- Teks: `#0969da`
|
||||
- Border: 1px solid `#d0d7de`
|
||||
- Hover: background `#0969da`, teks `#ffffff`
|
||||
|
||||
**Bahaya**
|
||||
- Background: `#ffffff`
|
||||
- Teks: `#cf222e`
|
||||
- Border: 1px solid `#d0d7de`
|
||||
- Hover: background `#a40e26`, teks `#ffffff`, border `#a40e26`
|
||||
|
||||
### Kartu / Kotak
|
||||
- Background: `#ffffff`
|
||||
- Border: 1px solid `#d0d7de`
|
||||
- Radius: 6px
|
||||
- Padding: 16px (header) + 16px (body)
|
||||
- Header memiliki strip `#f6f8fa` dengan border bawah.
|
||||
|
||||
### Input
|
||||
- Background: `#ffffff`
|
||||
- Border: 1px solid `#d0d7de`
|
||||
- Radius: 6px
|
||||
- Padding: 5px 12px
|
||||
- Fokus: border `#0969da`, ring `0 0 0 3px rgba(9,105,218,0.3)`
|
||||
|
||||
### Pil Status (Issue / PR)
|
||||
- **Terbuka**: background `#1a7f37`, teks putih, padding 4px 10px, radius 9999px.
|
||||
- **Tertutup**: background `#cf222e`, teks putih.
|
||||
- **Merged**: background `#8250df`, teks putih.
|
||||
- **Draf**: background `#6e7781`, teks putih.
|
||||
|
||||
### Label (Tag pada Issue/PR)
|
||||
- Padding: 0 7px
|
||||
- Radius: 9999px
|
||||
- Font: 12px / 500
|
||||
- Background dan teks bersifat programatik (warna label → teks dihitung untuk kontras).
|
||||
|
||||
## 5. Spasi & Tata Letak
|
||||
|
||||
- **Unit dasar**: 4px. Skala spasi: 4, 8, 12, 16, 24, 32, 40, 48.
|
||||
- **Lebar maksimum halaman**: 1280px (`Container-xl`).
|
||||
- **Sidebar**: 296px di desktop, mengecil di bawah 1012px.
|
||||
- **Padding baris**: 16px horizontal, 12px vertikal (daftar padat berdasarkan desain).
|
||||
|
||||
## 6. Gerakan
|
||||
|
||||
- **Durasi**: 80ms untuk hover; 200ms untuk membuka menu/popover.
|
||||
- **Easing**: `ease-out` untuk membuka, `ease-in` untuk menutup.
|
||||
- **Dihindari**: animasi saat halaman dimuat, parallax, micro-interaksi persisten. Elemen muncul; tidak tampil berlebihan.
|
||||
|
||||
## 7. Batasan Penggunaan
|
||||
|
||||
- Pertahankan daftar padat, kotak berbatas, dan tipografi sistem secara bersamaan; tombol hijau yang berdiri sendiri tidak cukup untuk menciptakan tampilan produk seperti GitHub.
|
||||
- Gunakan hijau untuk aksi repositori yang konstruktif, biru untuk tautan dan fokus, serta merah/ungu/abu-abu hanya untuk status issue, PR, dan workflow.
|
||||
- Utamakan antarmuka yang tenang, border yang eksplisit, dan spasi yang kompak dibandingkan bayangan dekoratif atau kartu bergaya pemasaran yang besar.
|
||||
@@ -0,0 +1,161 @@
|
||||
# Design System Inspired by GitHub
|
||||
|
||||
> Category: Strumenti per sviluppatori
|
||||
> Piattaforma orientata al codice. Densità funzionale, precisione blu su bianco, fondamenta Primer.
|
||||
|
||||
## 1. Tema Visivo e Atmosfera
|
||||
|
||||
La superficie di GitHub è ingegnerizzata, non decorata. Ogni pixel dichiara una posizione: questo è uno strumento per chi si preoccupa di diff, build e pull request. Lo sfondo della pagina è un pulito `#ffffff` (tema chiaro) o `#0d1117` (tema scuro), con i contenuti disposti su riquadri rettangolari densi separati da bordi sottilissimi anziché dallo spazio negativo. La densità delle informazioni è il marchio — righe di elenco, righe di codice, intestazioni dei repository e schede delle notifiche sono tutte ravvicinate, così un utente esperto può scorrere centinaia di elementi senza scorrerli tutti.
|
||||
|
||||
Gli accenti caratteristici sono il **blu Primer** (`#0969da`) per i link e le azioni primarie, e il **verde GitHub** (`#1a7f37`) per gli stati di unione, il successo e il pulsante di merge stesso. Entrambi appaiono leggermente smorzati rispetto ai blu e verdi dei prodotti consumer — sufficientemente saturi da distinguersi sul testo grigio denso, abbastanza contenuti da scomparire nello sfondo quando più elementi appaiono nello stesso viewport.
|
||||
|
||||
La tipografia usa lo stack **system-ui** in tutto il prodotto, così il testo si renderizza nitidamente su ogni sistema operativo, abbinato a **SFMono / Menlo / Consolas** per il codice. Non esiste un carattere editoriale display; la voce di GitHub è la voce del sistema su cui ti trovi già.
|
||||
|
||||
**Caratteristiche Principali:**
|
||||
- Tela bianca pura (`#ffffff`) o nero-blu profondo (`#0d1117`) — nessun calore, nessuna tinta
|
||||
- Bordi grigi sottilissimi (`#d0d7de`) definiscono ogni riquadro e pannello
|
||||
- Blu Primer (`#0969da`) per link/primario; verde GitHub (`#1a7f37`) per successo/merge
|
||||
- system-ui per la prosa; SFMono per il codice — nessun carattere personalizzato
|
||||
- Righe di elenco dense con spaziatura minima; lo spazio bianco è raro
|
||||
- Iconografia Octicon a 16px / 24px — tratto singolo, geometrica, coerente
|
||||
- Badge di stato a forma di pillola con semantica cromatica forte
|
||||
|
||||
## 2. Palette Colori e Ruoli
|
||||
|
||||
### Primario
|
||||
- **Canvas Default** (`#ffffff`): Sfondo principale della pagina, tema chiaro.
|
||||
- **Canvas Subtle** (`#f6f8fa`): Superficie secondaria, barra laterale, sfondo degli input, striscia dell'intestazione.
|
||||
- **Canvas Inset** (`#eaeef2`): Sfondo dei blocchi di codice, superficie incassata in profondità.
|
||||
- **Fg Default** (`#1f2328`): Testo primario, titoli, inchiostro.
|
||||
- **Fg Muted** (`#656d76`): Testo secondario, didascalie, percorsi dei file.
|
||||
|
||||
### Accento del Brand
|
||||
- **Primer Blue** (`#0969da`): Link, CTA primarie, base dell'anello di focus — il colore interattivo universale.
|
||||
- **Primer Blue Hover** (`#0550ae`): Hover/pressione per il blu primario.
|
||||
- **Accent Subtle** (`#ddf4ff`): Superficie blu tenue per callout, banner informativi.
|
||||
|
||||
### Semantico
|
||||
- **Success / Merge Green** (`#1a7f37`): PR unite, badge di successo, pulsante di merge.
|
||||
- **Success Subtle** (`#dafbe1`): Tinta superficie di successo.
|
||||
- **Open Green** (`#1a7f37`): Stato "Aperto" di issue/PR.
|
||||
- **Closed / Danger Red** (`#cf222e`): PR chiuse, azione distruttiva, errore di validazione.
|
||||
- **Danger Subtle** (`#ffebe9`): Superficie del banner di errore.
|
||||
- **Attention / Warning Yellow** (`#9a6700`): Testo di avviso su superficie ambrata.
|
||||
- **Attention Subtle** (`#fff8c5`): Superficie del banner di avviso.
|
||||
- **Done Purple** (`#8250df`): Unito e archiviato, stato "fatto", badge premium.
|
||||
- **Sponsor Pink** (`#bf3989`): Cuore degli sponsor, brand di GitHub Sponsors.
|
||||
|
||||
### Bordo e Divisore
|
||||
- **Border Default** (`#d0d7de`): Bordo sottile standard, contorno del pannello.
|
||||
- **Border Muted** (`#d8dee4`): Divisori interni all'interno di un pannello.
|
||||
- **Border Subtle** (`#eaeef2`): Divisori tenue tra le righe della tabella.
|
||||
|
||||
### Tema Scuro
|
||||
- **Dark Canvas** (`#0d1117`): Sfondo della pagina scura.
|
||||
- **Dark Surface** (`#161b22`): Barra laterale, intestazione, superficie secondaria.
|
||||
- **Dark Border** (`#30363d`): Bordo standard in modalità scura.
|
||||
- **Dark Fg** (`#e6edf3`): Testo primario su sfondo scuro.
|
||||
|
||||
## 3. Regole Tipografiche
|
||||
|
||||
### Famiglia di Caratteri
|
||||
- **Body / UI**: `-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif`
|
||||
- **Code / Mono**: `ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace`
|
||||
- **Emoji**: `"Apple Color Emoji", "Segoe UI Emoji"`
|
||||
|
||||
### Gerarchia
|
||||
|
||||
| Ruolo | Carattere | Dimensione | Peso | Altezza Riga | Spaziatura Lettere | Note |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Display | system-ui | 32px (2rem) | 600 | 1.25 | -0.01em | Intestazione repository, hero marketing |
|
||||
| H1 | system-ui | 24px (1.5rem) | 600 | 1.25 | normal | Titolo della pagina |
|
||||
| H2 | system-ui | 20px (1.25rem) | 600 | 1.25 | normal | Titolo di sezione |
|
||||
| H3 | system-ui | 16px (1rem) | 600 | 1.25 | normal | Sottosezione, intestazione del pannello |
|
||||
| Body | system-ui | 14px (0.875rem) | 400 | 1.5 | normal | Dimensione testo predefinita — non 16px |
|
||||
| Body Small | system-ui | 12px (0.75rem) | 400 | 1.4 | normal | Didascalie, metadati dei file |
|
||||
| Code | SFMono | 12px (0.75rem) | 400 | 1.45 | normal | Blocchi di codice, diff |
|
||||
| Code Inline | SFMono | 0.85em | 400 | inherit | normal | Span `code` inline |
|
||||
|
||||
### Principi
|
||||
- **Body a 14px, non 16px**: La densità della prosa di GitHub è la sua identità. Il prodotto si legge a 14px per far rientrare più righe in un viewport.
|
||||
- **Peso binario**: 400 per tutto di default; 600 per i titoli e l'enfasi. Nessun 500, nessun 700.
|
||||
- **Sempre font di sistema**: non caricare mai un webfont per il chrome — il testo deve renderizzarsi istantaneamente su connessioni lente.
|
||||
|
||||
## 4. Stili dei Componenti
|
||||
|
||||
### Pulsanti
|
||||
|
||||
**Primario (Verde)**
|
||||
- Background: `#1f883d`
|
||||
- Testo: `#ffffff`
|
||||
- Bordo: 1px solid `rgba(31, 35, 40, 0.15)`
|
||||
- Padding: 5px 16px
|
||||
- Radius: 6px
|
||||
- Shadow: `0 1px 0 rgba(31,35,40,0.1)`
|
||||
- Hover: background `#1a7f37`
|
||||
- Utilizzo: "Crea repository", "Unisci pull request"
|
||||
|
||||
**Default**
|
||||
- Background: `#f6f8fa`
|
||||
- Testo: `#1f2328`
|
||||
- Bordo: 1px solid `#d0d7de`
|
||||
- Padding: 5px 16px
|
||||
- Radius: 6px
|
||||
- Hover: background `#f3f4f6`, bordo `#d0d7de`
|
||||
|
||||
**Outline (Stile Link Blu)**
|
||||
- Background: `#ffffff`
|
||||
- Testo: `#0969da`
|
||||
- Bordo: 1px solid `#d0d7de`
|
||||
- Hover: background `#0969da`, testo `#ffffff`
|
||||
|
||||
**Danger**
|
||||
- Background: `#ffffff`
|
||||
- Testo: `#cf222e`
|
||||
- Bordo: 1px solid `#d0d7de`
|
||||
- Hover: background `#a40e26`, testo `#ffffff`, bordo `#a40e26`
|
||||
|
||||
### Card / Box
|
||||
- Background: `#ffffff`
|
||||
- Bordo: 1px solid `#d0d7de`
|
||||
- Radius: 6px
|
||||
- Padding: 16px (intestazione) + 16px (corpo)
|
||||
- L'intestazione ha una striscia `#f6f8fa` con bordo inferiore.
|
||||
|
||||
### Input
|
||||
- Background: `#ffffff`
|
||||
- Bordo: 1px solid `#d0d7de`
|
||||
- Radius: 6px
|
||||
- Padding: 5px 12px
|
||||
- Focus: bordo `#0969da`, anello `0 0 0 3px rgba(9,105,218,0.3)`
|
||||
|
||||
### Pillole di Stato (Issue / PR)
|
||||
- **Aperto**: background `#1a7f37`, testo bianco, padding 4px 10px, radius 9999px.
|
||||
- **Chiuso**: background `#cf222e`, testo bianco.
|
||||
- **Unito**: background `#8250df`, testo bianco.
|
||||
- **Bozza**: background `#6e7781`, testo bianco.
|
||||
|
||||
### Etichette (Tag su Issue/PR)
|
||||
- Padding: 0 7px
|
||||
- Radius: 9999px
|
||||
- Font: 12px / 500
|
||||
- Background e testo sono programmatici (colore etichetta → testo calcolato per contrasto).
|
||||
|
||||
## 5. Spaziatura e Layout
|
||||
|
||||
- **Unità base**: 4px. Scala di spaziatura: 4, 8, 12, 16, 24, 32, 40, 48.
|
||||
- **Larghezza massima della pagina**: 1280px (`Container-xl`).
|
||||
- **Barra laterale**: 296px su desktop, si riduce sotto 1012px.
|
||||
- **Padding delle righe**: 16px orizzontale, 12px verticale (le liste sono dense per design).
|
||||
|
||||
## 6. Movimento
|
||||
|
||||
- **Durata**: 80ms per l'hover; 200ms per l'apertura di menu/popover.
|
||||
- **Easing**: `ease-out` per le aperture, `ease-in` per le chiusure.
|
||||
- **Evitato**: animazione al caricamento della pagina, parallax, micro-interazioni persistenti. Le cose appaiono; non eseguono.
|
||||
|
||||
## 7. Linee Guida d'Uso
|
||||
|
||||
- Mantenere insieme le liste dense, i box con bordo e la tipografia di sistema; i pulsanti verdi isolati non bastano a creare una superficie prodotto simile a GitHub.
|
||||
- Usare il verde per le azioni costruttive del repository, il blu per i link e il focus, e rosso/viola/grigio solo per gli stati di issue, PR e workflow.
|
||||
- Preferire un chrome discreto, bordi espliciti e spaziatura compatta rispetto a ombre decorative o card di grandi dimensioni in stile marketing.
|
||||
@@ -0,0 +1,161 @@
|
||||
# GitHub にインスパイアされたデザインシステム
|
||||
|
||||
> Category: 開発者ツール
|
||||
> コードファーストなプラットフォーム。機能密度が高く、青と白の精緻な配色、Primer を基盤とする。
|
||||
|
||||
## 1. ビジュアルテーマと雰囲気
|
||||
|
||||
GitHub のインターフェースは装飾的ではなく、エンジニアリングされている。すべてのピクセルが一つの姿勢を宣言している——これは diff、ビルド、pull request を気にかける人々のためのツールだ。ページの背景はクリーンな `#ffffff`（ライトモード）または `#0d1117`（ダークモード）で、コンテンツは余白ではなくヘアライン境界線で区切られた密な矩形ペインに配置される。情報密度がブランドだ——リスト行、コード行、リポジトリヘッダー、通知カードはすべて密集しており、パワーユーザーはスクロールなしに百件のアイテムを確認できる。
|
||||
|
||||
シグネチャのアクセントカラーは、リンクと主要アクションのための **Primer ブルー** (`#0969da`) と、マージ状態・成功・マージボタンのための **GitHub グリーン** (`#1a7f37`) だ。どちらもコンシューマー製品の青や緑と比べてやや抑えられている——密なグレーのテキストに対して読み取れるほどの彩度を持ちながら、一つのビューポートに複数表示されても背景に溶け込むほど抑制されている。
|
||||
|
||||
タイポグラフィはプロダクト全体で **system-ui** スタックを使用し、すべての OS でテキストが鮮明にレンダリングされるようにしている。コードには **SFMono / Menlo / Consolas** を組み合わせる。エディトリアルな表示用フォントは存在しない——GitHub の声はあなたが使用しているシステムの声そのものだ。
|
||||
|
||||
**主な特徴：**
|
||||
- 真っ白なキャンバス（`#ffffff`）またはディープネイビーブラック（`#0d1117`）——温かみなし、色調なし
|
||||
- ヘアラインのグレー境界線（`#d0d7de`）がすべてのペインとパネルを定義する
|
||||
- Primer ブルー（`#0969da`）はリンク/主要アクション用；GitHub グリーン（`#1a7f37`）は成功/マージ用
|
||||
- 本文には system-ui；コードには SFMono——カスタム書体なし
|
||||
- 最小限のパディングで密なリスト行；余白は希少
|
||||
- 16px / 24px の Octicon アイコン——シングルストローク、幾何学的、一貫性あり
|
||||
- 強い色彩セマンティクスを持つピル型ステータスバッジ
|
||||
|
||||
## 2. カラーパレットと役割
|
||||
|
||||
### プライマリ
|
||||
- **Canvas Default**（`#ffffff`）：ライトテーマのプライマリページ背景。
|
||||
- **Canvas Subtle**（`#f6f8fa`）：セカンダリサーフェス、サイドバー、入力背景、ヘッダーストリップ。
|
||||
- **Canvas Inset**（`#eaeef2`）：コードブロック背景、ディープインセットサーフェス。
|
||||
- **Fg Default**（`#1f2328`）：プライマリテキスト、見出し、本文。
|
||||
- **Fg Muted**（`#656d76`）：セカンダリテキスト、キャプション、ファイルパス。
|
||||
|
||||
### ブランドアクセント
|
||||
- **Primer Blue**（`#0969da`）：リンク、プライマリ CTA、フォーカスリングの基色——ユニバーサルなインタラクティブカラー。
|
||||
- **Primer Blue Hover**（`#0550ae`）：プライマリブルーのホバー/プレス状態。
|
||||
- **Accent Subtle**（`#ddf4ff`）：コールアウト・情報バナー用のソフトブルーサーフェス。
|
||||
|
||||
### セマンティック
|
||||
- **Success / Merge Green**（`#1a7f37`）：マージ済み PR、成功バッジ、マージボタン。
|
||||
- **Success Subtle**（`#dafbe1`）：成功サーフェスのティント。
|
||||
- **Open Green**（`#1a7f37`）：Issue/PR の「Open」状態。
|
||||
- **Closed / Danger Red**（`#cf222e`）：クローズ済み PR、破壊的アクション、バリデーションエラー。
|
||||
- **Danger Subtle**（`#ffebe9`）：エラーバナーサーフェス。
|
||||
- **Attention / Warning Yellow**（`#9a6700`）：アンバーサーフェス上の警告テキスト。
|
||||
- **Attention Subtle**（`#fff8c5`）：警告バナーサーフェス。
|
||||
- **Done Purple**（`#8250df`）：マージ済みアーカイブ、「done」状態、プレミアムバッジ。
|
||||
- **Sponsor Pink**（`#bf3989`）：スポンサーハート、GitHub Sponsors ブランドカラー。
|
||||
|
||||
### ボーダーとディバイダー
|
||||
- **Border Default**（`#d0d7de`）：標準のヘアラインボーダー、パネルのアウトライン。
|
||||
- **Border Muted**（`#d8dee4`）：パネル内の内部ディバイダー。
|
||||
- **Border Subtle**（`#eaeef2`）：淡いテーブル行ディバイダー。
|
||||
|
||||
### ダークテーマ
|
||||
- **Dark Canvas**（`#0d1117`）：ダークページ背景。
|
||||
- **Dark Surface**（`#161b22`）：サイドバー、ヘッダー、セカンダリサーフェス。
|
||||
- **Dark Border**（`#30363d`）：標準ダークモードボーダー。
|
||||
- **Dark Fg**（`#e6edf3`）：ダーク背景上のプライマリテキスト。
|
||||
|
||||
## 3. タイポグラフィのルール
|
||||
|
||||
### フォントファミリー
|
||||
- **本文 / UI**：`-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif`
|
||||
- **コード / 等幅**：`ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace`
|
||||
- **Emoji**：`"Apple Color Emoji", "Segoe UI Emoji"`
|
||||
|
||||
### 階層
|
||||
|
||||
| 役割 | フォント | サイズ | ウェイト | 行高 | 字間 | 備考 |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Display | system-ui | 32px (2rem) | 600 | 1.25 | -0.01em | リポジトリヘッダー、マーケティングヒーロー |
|
||||
| H1 | system-ui | 24px (1.5rem) | 600 | 1.25 | normal | ページ見出し |
|
||||
| H2 | system-ui | 20px (1.25rem) | 600 | 1.25 | normal | セクション見出し |
|
||||
| H3 | system-ui | 16px (1rem) | 600 | 1.25 | normal | サブセクション、パネルヘッダー |
|
||||
| Body | system-ui | 14px (0.875rem) | 400 | 1.5 | normal | デフォルトテキストサイズ——16px ではない |
|
||||
| Body Small | system-ui | 12px (0.75rem) | 400 | 1.4 | normal | キャプション、ファイルメタデータ |
|
||||
| Code | SFMono | 12px (0.75rem) | 400 | 1.45 | normal | コードブロック、diff |
|
||||
| Code Inline | SFMono | 0.85em | 400 | inherit | normal | インライン `code` スパン |
|
||||
|
||||
### 原則
|
||||
- **本文 14px、16px ではない**：GitHub の文字密度はそのアイデンティティだ。より多くの行をビューポートに収めるため、プロダクトは 14px で表示される。
|
||||
- **ウェイトはバイナリ**：デフォルトはすべて 400；見出しと強調には 600。500 も 700 も使わない。
|
||||
- **常にシステムフォント**：Chrome 用のウェブフォントは絶対に読み込まない——テキストは低速な接続でも即座にレンダリングされなければならない。
|
||||
|
||||
## 4. コンポーネントのスタイル
|
||||
|
||||
### ボタン
|
||||
|
||||
**プライマリ（グリーン）**
|
||||
- Background: `#1f883d`
|
||||
- Text: `#ffffff`
|
||||
- Border: 1px solid `rgba(31, 35, 40, 0.15)`
|
||||
- Padding: 5px 16px
|
||||
- Radius: 6px
|
||||
- Shadow: `0 1px 0 rgba(31,35,40,0.1)`
|
||||
- Hover: background `#1a7f37`
|
||||
- 用途：「Create repository」、「Merge pull request」
|
||||
|
||||
**デフォルト**
|
||||
- Background: `#f6f8fa`
|
||||
- Text: `#1f2328`
|
||||
- Border: 1px solid `#d0d7de`
|
||||
- Padding: 5px 16px
|
||||
- Radius: 6px
|
||||
- Hover: background `#f3f4f6`、border `#d0d7de`
|
||||
|
||||
**アウトライン（ブルーリンクスタイル）**
|
||||
- Background: `#ffffff`
|
||||
- Text: `#0969da`
|
||||
- Border: 1px solid `#d0d7de`
|
||||
- Hover: background `#0969da`、text `#ffffff`
|
||||
|
||||
**デンジャー**
|
||||
- Background: `#ffffff`
|
||||
- Text: `#cf222e`
|
||||
- Border: 1px solid `#d0d7de`
|
||||
- Hover: background `#a40e26`、text `#ffffff`、border `#a40e26`
|
||||
|
||||
### カード / ボックス
|
||||
- Background: `#ffffff`
|
||||
- Border: 1px solid `#d0d7de`
|
||||
- Radius: 6px
|
||||
- Padding: 16px（ヘッダー）+ 16px（本文）
|
||||
- ヘッダーには下ボーダーを持つ `#f6f8fa` のストリップがある。
|
||||
|
||||
### インプット
|
||||
- Background: `#ffffff`
|
||||
- Border: 1px solid `#d0d7de`
|
||||
- Radius: 6px
|
||||
- Padding: 5px 12px
|
||||
- Focus: border `#0969da`、ring `0 0 0 3px rgba(9,105,218,0.3)`
|
||||
|
||||
### ステータスピル（Issue / PR）
|
||||
- **Open**：background `#1a7f37`、テキスト白、padding 4px 10px、radius 9999px。
|
||||
- **Closed**：background `#cf222e`、テキスト白。
|
||||
- **Merged**：background `#8250df`、テキスト白。
|
||||
- **Draft**：background `#6e7781`、テキスト白。
|
||||
|
||||
### ラベル（Issue/PR のタグ）
|
||||
- Padding: 0 7px
|
||||
- Radius: 9999px
|
||||
- Font: 12px / 500
|
||||
- 背景色とテキスト色はプログラム的に算出される（ラベルカラー→コントラストに応じてテキスト色を計算）。
|
||||
|
||||
## 5. スペーシングとレイアウト
|
||||
|
||||
- **基本単位**：4px。スペーシングスケール：4, 8, 12, 16, 24, 32, 40, 48。
|
||||
- **ページ最大幅**：1280px（`Container-xl`）。
|
||||
- **サイドバー**：デスクトップで 296px、1012px 以下で折りたたまれる。
|
||||
- **行のパディング**：水平 16px、垂直 12px（リストはデザインとして密集している）。
|
||||
|
||||
## 6. モーション
|
||||
|
||||
- **デュレーション**：ホバーは 80ms；メニュー/ポップオーバーの展開は 200ms。
|
||||
- **イージング**：展開には `ease-out`、閉じるには `ease-in`。
|
||||
- **意図的に避けるもの**：ページロードアニメーション、パララックス、持続的なマイクロインタラクション。物事は現れる——パフォーマンスはしない。
|
||||
|
||||
## 7. 使用上のガードレール
|
||||
|
||||
- 密なリスト、ボーダーのあるボックス、システムタイポグラフィは一緒に使うこと——グリーンボタンだけでは GitHub ライクなプロダクトサーフェスは作れない。
|
||||
- グリーンは建設的なリポジトリ操作に、ブルーはリンクとフォーカスに、レッド/パープル/グレーは Issue・PR・ワークフローの状態にのみ使用する。
|
||||
- 装飾的なシャドウや大型のマーケティングスタイルカードより、控えめなクローム、明示的なボーダー、コンパクトなスペーシングを優先する。
|
||||
@@ -0,0 +1,161 @@
|
||||
# GitHub에서 영감을 받은 디자인 시스템
|
||||
|
||||
> Category: 개발자 도구
|
||||
> 코드 중심 플랫폼. 기능적 밀도, 청백색 정밀함, Primer 기반.
|
||||
|
||||
## 1. 비주얼 테마 & 분위기
|
||||
|
||||
GitHub의 화면은 장식되지 않고 설계되어 있습니다. 모든 픽셀이 하나의 태도를 선언합니다: 이것은 diff, 빌드, pull request를 중시하는 사람들을 위한 도구라고. 페이지 배경은 깔끔한 `#ffffff`(라이트) 또는 `#0d1117`(다크)이며, 콘텐츠는 여백 대신 얇은 테두리로 구분된 촘촘한 직사각형 패널 위에 배치됩니다. 정보 밀도 자체가 브랜드입니다 — 목록 행, 코드 줄, 저장소 헤더, 알림 카드가 모두 촘촘하게 배치되어 있어 파워 유저가 스크롤 없이 수백 개의 항목을 스캔할 수 있습니다.
|
||||
|
||||
시그니처 강조색은 링크와 주요 액션을 위한 **Primer 블루**(`#0969da`)와 병합 상태, 성공, 그리고 병합 버튼 자체를 위한 **GitHub 그린**(`#1a7f37`)입니다. 두 색상 모두 소비자 제품의 블루·그린보다 약간 차분하게 느껴집니다 — 촘촘한 회색 텍스트 위에서 읽힐 만큼 충분히 채도가 있으면서도, 한 화면에 여러 개가 나타날 때 배경으로 사라질 만큼 절제되어 있습니다.
|
||||
|
||||
타이포그래피는 전 제품에 걸쳐 **system-ui** 스택을 사용해 모든 OS에서 텍스트가 선명하게 렌더링되며, 코드에는 **SFMono / Menlo / Consolas**를 함께 사용합니다. 편집용 디스플레이 폰트는 없습니다; GitHub의 목소리는 당신이 이미 사용 중인 시스템의 목소리입니다.
|
||||
|
||||
**주요 특징:**
|
||||
- 진정한 흰 캔버스(`#ffffff`) 또는 깊은 네이비-블랙(`#0d1117`) — 따뜻함도 색조도 없음
|
||||
- 얇은 회색 테두리(`#d0d7de`)로 모든 패인과 패널을 정의
|
||||
- Primer 블루(`#0969da`) — 링크/주요 액션; GitHub 그린(`#1a7f37`) — 성공/병합
|
||||
- 산문에는 system-ui; 코드에는 SFMono — 사용자 정의 서체 없음
|
||||
- 최소 패딩의 촘촘한 목록 행; 여백은 희소
|
||||
- 16px / 24px의 Octicon 아이콘 — 단선, 기하학적, 일관적
|
||||
- 강한 색상 의미를 가진 알약형 상태 배지
|
||||
|
||||
## 2. 색상 팔레트 & 역할
|
||||
|
||||
### 주요 색상
|
||||
- **Canvas Default** (`#ffffff`): 기본 페이지 배경, 라이트 테마.
|
||||
- **Canvas Subtle** (`#f6f8fa`): 보조 서페이스, 사이드바, 입력 배경, 헤더 스트립.
|
||||
- **Canvas Inset** (`#eaeef2`): 코드 블록 배경, 깊은 인셋 서페이스.
|
||||
- **Fg Default** (`#1f2328`): 기본 텍스트, 헤드라인, 잉크.
|
||||
- **Fg Muted** (`#656d76`): 보조 텍스트, 캡션, 파일 경로.
|
||||
|
||||
### 브랜드 강조색
|
||||
- **Primer Blue** (`#0969da`): 링크, 주요 CTA, 포커스 링 기반 — 범용 인터랙티브 색상.
|
||||
- **Primer Blue Hover** (`#0550ae`): 주요 블루의 호버/눌림 상태.
|
||||
- **Accent Subtle** (`#ddf4ff`): 콜아웃, 정보 배너를 위한 소프트 블루 서페이스.
|
||||
|
||||
### 의미론적 색상
|
||||
- **Success / Merge Green** (`#1a7f37`): 병합된 PR, 성공 배지, 병합 버튼.
|
||||
- **Success Subtle** (`#dafbe1`): 성공 서페이스 틴트.
|
||||
- **Open Green** (`#1a7f37`): "열린" 이슈/PR 상태.
|
||||
- **Closed / Danger Red** (`#cf222e`): 닫힌 PR, 파괴적 액션, 유효성 검사 오류.
|
||||
- **Danger Subtle** (`#ffebe9`): 오류 배너 서페이스.
|
||||
- **Attention / Warning Yellow** (`#9a6700`): 황색 서페이스 위의 경고 텍스트.
|
||||
- **Attention Subtle** (`#fff8c5`): 경고 배너 서페이스.
|
||||
- **Done Purple** (`#8250df`): 병합 후 보관됨, "완료" 상태, 프리미엄 배지.
|
||||
- **Sponsor Pink** (`#bf3989`): 스폰서 하트, GitHub 스폰서 브랜드.
|
||||
|
||||
### 테두리 & 구분선
|
||||
- **Border Default** (`#d0d7de`): 표준 얇은 테두리, 패널 외곽선.
|
||||
- **Border Muted** (`#d8dee4`): 패널 내부 구분선.
|
||||
- **Border Subtle** (`#eaeef2`): 희미한 테이블 행 구분선.
|
||||
|
||||
### 다크 테마
|
||||
- **Dark Canvas** (`#0d1117`): 다크 페이지 배경.
|
||||
- **Dark Surface** (`#161b22`): 사이드바, 헤더, 보조 서페이스.
|
||||
- **Dark Border** (`#30363d`): 표준 다크 모드 테두리.
|
||||
- **Dark Fg** (`#e6edf3`): 다크 배경 위의 기본 텍스트.
|
||||
|
||||
## 3. 타이포그래피 규칙
|
||||
|
||||
### 폰트 패밀리
|
||||
- **본문 / UI**: `-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif`
|
||||
- **코드 / 모노**: `ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace`
|
||||
- **이모지**: `"Apple Color Emoji", "Segoe UI Emoji"`
|
||||
|
||||
### 계층 구조
|
||||
|
||||
| 역할 | 폰트 | 크기 | 굵기 | 행 높이 | 자간 | 비고 |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Display | system-ui | 32px (2rem) | 600 | 1.25 | -0.01em | 저장소 헤더, 마케팅 히어로 |
|
||||
| H1 | system-ui | 24px (1.5rem) | 600 | 1.25 | normal | 페이지 제목 |
|
||||
| H2 | system-ui | 20px (1.25rem) | 600 | 1.25 | normal | 섹션 제목 |
|
||||
| H3 | system-ui | 16px (1rem) | 600 | 1.25 | normal | 소섹션, 패널 헤더 |
|
||||
| Body | system-ui | 14px (0.875rem) | 400 | 1.5 | normal | 기본 텍스트 크기 — 16px가 아님 |
|
||||
| Body Small | system-ui | 12px (0.75rem) | 400 | 1.4 | normal | 캡션, 파일 메타데이터 |
|
||||
| Code | SFMono | 12px (0.75rem) | 400 | 1.45 | normal | 코드 블록, diff |
|
||||
| Code Inline | SFMono | 0.85em | 400 | inherit | normal | 인라인 `code` 스팬 |
|
||||
|
||||
### 원칙
|
||||
- **14px 본문, 16px 아님**: GitHub의 산문 밀도는 그 정체성입니다. 하나의 뷰포트에 더 많은 행을 담기 위해 14px로 읽힙니다.
|
||||
- **굵기 이진법**: 기본적으로 모든 것은 400; 헤드라인과 강조에는 600. 500도 700도 없음.
|
||||
- **시스템 폰트 항상**: 크롬을 위해 웹폰트를 로드하지 않음 — 느린 연결에서도 텍스트가 즉시 렌더링되어야 함.
|
||||
|
||||
## 4. 컴포넌트 스타일링
|
||||
|
||||
### 버튼
|
||||
|
||||
**Primary (그린)**
|
||||
- Background: `#1f883d`
|
||||
- Text: `#ffffff`
|
||||
- Border: 1px solid `rgba(31, 35, 40, 0.15)`
|
||||
- Padding: 5px 16px
|
||||
- Radius: 6px
|
||||
- Shadow: `0 1px 0 rgba(31,35,40,0.1)`
|
||||
- Hover: background `#1a7f37`
|
||||
- 사용: "저장소 만들기", "Pull request 병합"
|
||||
|
||||
**Default**
|
||||
- Background: `#f6f8fa`
|
||||
- Text: `#1f2328`
|
||||
- Border: 1px solid `#d0d7de`
|
||||
- Padding: 5px 16px
|
||||
- Radius: 6px
|
||||
- Hover: background `#f3f4f6`, border `#d0d7de`
|
||||
|
||||
**Outline (블루 링크 스타일)**
|
||||
- Background: `#ffffff`
|
||||
- Text: `#0969da`
|
||||
- Border: 1px solid `#d0d7de`
|
||||
- Hover: background `#0969da`, text `#ffffff`
|
||||
|
||||
**Danger**
|
||||
- Background: `#ffffff`
|
||||
- Text: `#cf222e`
|
||||
- Border: 1px solid `#d0d7de`
|
||||
- Hover: background `#a40e26`, text `#ffffff`, border `#a40e26`
|
||||
|
||||
### 카드 / 박스
|
||||
- Background: `#ffffff`
|
||||
- Border: 1px solid `#d0d7de`
|
||||
- Radius: 6px
|
||||
- Padding: 16px (헤더) + 16px (본문)
|
||||
- 헤더에는 하단 테두리가 있는 `#f6f8fa` 스트립이 있음.
|
||||
|
||||
### 입력 필드
|
||||
- Background: `#ffffff`
|
||||
- Border: 1px solid `#d0d7de`
|
||||
- Radius: 6px
|
||||
- Padding: 5px 12px
|
||||
- Focus: border `#0969da`, ring `0 0 0 3px rgba(9,105,218,0.3)`
|
||||
|
||||
### 상태 알약 (이슈 / PR)
|
||||
- **Open**: background `#1a7f37`, 흰 텍스트, padding 4px 10px, radius 9999px.
|
||||
- **Closed**: background `#cf222e`, 흰 텍스트.
|
||||
- **Merged**: background `#8250df`, 흰 텍스트.
|
||||
- **Draft**: background `#6e7781`, 흰 텍스트.
|
||||
|
||||
### 레이블 (이슈/PR의 태그)
|
||||
- Padding: 0 7px
|
||||
- Radius: 9999px
|
||||
- Font: 12px / 500
|
||||
- 배경과 텍스트는 프로그래밍 방식으로 결정됨 (레이블 색상 → 대비를 위해 텍스트 색상 계산).
|
||||
|
||||
## 5. 간격 & 레이아웃
|
||||
|
||||
- **기본 단위**: 4px. 간격 스케일: 4, 8, 12, 16, 24, 32, 40, 48.
|
||||
- **페이지 최대 너비**: 1280px (`Container-xl`).
|
||||
- **사이드바**: 데스크탑에서 296px, 1012px 이하에서 접힘.
|
||||
- **행 패딩**: 수평 16px, 수직 12px (목록은 의도적으로 촘촘하게 설계).
|
||||
|
||||
## 6. 모션
|
||||
|
||||
- **지속 시간**: 호버에 80ms; 메뉴/팝오버 열기에 200ms.
|
||||
- **이징**: 열기에 `ease-out`, 닫기에 `ease-in`.
|
||||
- **피해야 할 것**: 페이지 로드 애니메이션, 패럴랙스, 지속적인 마이크로 인터랙션. 요소는 나타나는 것이지, 퍼포먼스를 하지 않습니다.
|
||||
|
||||
## 7. 사용 가이드라인
|
||||
|
||||
- 촘촘한 목록, 테두리가 있는 박스, 시스템 타이포그래피를 함께 유지하십시오; 고립된 그린 버튼만으로는 GitHub 같은 제품 표면을 만들기에 충분하지 않습니다.
|
||||
- 저장소 구축 액션에는 그린, 링크와 포커스에는 블루, 이슈·PR·워크플로 상태에만 레드/퍼플/그레이를 사용하십시오.
|
||||
- 장식적인 그림자나 대형 마케팅 스타일 카드보다는 조용한 크롬, 명시적인 테두리, 컴팩트한 간격을 선호하십시오.
|
||||
@@ -0,0 +1,161 @@
|
||||
# Ontwerpsysteem geïnspireerd door GitHub
|
||||
|
||||
> Category: Ontwikkelaarstools
|
||||
> Codegedreven platform. Functionele dichtheid, blauw-op-wit precisie, Primer-fundamenten.
|
||||
|
||||
## 1. Visueel thema en sfeer
|
||||
|
||||
GitHub's oppervlak is geconstrueerd, niet gedecoreerd. Elk pixel verkondigt een standpunt: dit is een tool voor mensen die geven om diffs, builds en pull requests. De pagina-achtergrond is een strak `#ffffff` (licht) of `#0d1117` (donker), met inhoud gerangschikt op dichte rechthoekige panelen gescheiden door haarlijndunne randen in plaats van negatieve ruimte. Informatiedichtheid is het merk — lijstrijen, coderegels, repositoryheaders en notificatiekaarten staan dicht op elkaar, zodat een gevorderde gebruiker honderd items kan scannen zonder te scrollen.
|
||||
|
||||
De kenmerkende accenten zijn **Primer-blauw** (`#0969da`) voor links en primaire acties, en **GitHub-groen** (`#1a7f37`) voor samengevoegde statussen, succes en de samenvoegknop zelf. Beide ogen licht gedempt vergeleken met consumentenproduct-blauw en -groen — verzadigd genoeg om leesbaar te zijn op de dichte grijze tekst, terughoudend genoeg om op te gaan in de achtergrond wanneer er meerdere in één viewport verschijnen.
|
||||
|
||||
Typografie gebruikt de **system-ui**-stack door het hele product, zodat tekst scherp wordt weergegeven op elk besturingssysteem, aangevuld met **SFMono / Menlo / Consolas** voor code. Er is geen redactioneel weergavelettertype; de stem van GitHub is de stem van het systeem dat je al gebruikt.
|
||||
|
||||
**Kernkenmerken:**
|
||||
- Echt wit canvas (`#ffffff`) of diep marinezwart (`#0d1117`) — geen warmte, geen tint
|
||||
- Haarlijndunne grijze randen (`#d0d7de`) definiëren elk paneel en vlak
|
||||
- Primer-blauw (`#0969da`) voor links/primair; GitHub-groen (`#1a7f37`) voor succes/samenvoegen
|
||||
- system-ui voor proza; SFMono voor code — geen aangepast lettertype
|
||||
- Dichte lijstrijen met minimale opvulling; witruimte is zeldzaam
|
||||
- Octicon-pictogrammen op 16px / 24px — enkellijnig, geometrisch, consistent
|
||||
- Peervormige statusbadges met sterke kleursemantieken
|
||||
|
||||
## 2. Kleurenpalet en rollen
|
||||
|
||||
### Primair
|
||||
- **Canvas Standaard** (`#ffffff`): Primaire pagina-achtergrond, licht thema.
|
||||
- **Canvas Subtiel** (`#f6f8fa`): Secundaire oppervlak, zijbalk, invoerveld-achtergrond, koptekstbalk.
|
||||
- **Canvas Inset** (`#eaeef2`): Codeblok-achtergrond, diep ingebed oppervlak.
|
||||
- **Fg Standaard** (`#1f2328`): Primaire tekst, koppen, inkt.
|
||||
- **Fg Gedempt** (`#656d76`): Secundaire tekst, bijschriften, bestandspaden.
|
||||
|
||||
### Merkaccent
|
||||
- **Primer-blauw** (`#0969da`): Links, primaire CTA's, focusring-basis — de universele interactieve kleur.
|
||||
- **Primer-blauw hover** (`#0550ae`): Hover/ingedrukt voor primair blauw.
|
||||
- **Accent Subtiel** (`#ddf4ff`): Zacht blauw oppervlak voor uitroepen, informatiebanners.
|
||||
|
||||
### Semantisch
|
||||
- **Succes / Samenvoeging Groen** (`#1a7f37`): Samengevoegde PR's, succesbadges, samenvoegknop.
|
||||
- **Succes Subtiel** (`#dafbe1`): Succes oppervlaktint.
|
||||
- **Open Groen** (`#1a7f37`): "Open" issue/PR-status.
|
||||
- **Gesloten / Gevaar Rood** (`#cf222e`): Gesloten PR's, destructieve actie, validatiefout.
|
||||
- **Gevaar Subtiel** (`#ffebe9`): Foutbanner-oppervlak.
|
||||
- **Aandacht / Waarschuwing Geel** (`#9a6700`): Waarschuwingstekst op amberkleurig oppervlak.
|
||||
- **Aandacht Subtiel** (`#fff8c5`): Waarschuwingsbanner-oppervlak.
|
||||
- **Gereed Paars** (`#8250df`): Samengevoegd-en-gearchiveerd, "gereed"-status, premium-badge.
|
||||
- **Sponsor Roze** (`#bf3989`): Sponsors-hart, GitHub-sponsorsmerk.
|
||||
|
||||
### Rand en scheiding
|
||||
- **Rand Standaard** (`#d0d7de`): Standaard haarlijndunne rand, paneelomtrek.
|
||||
- **Rand Gedempt** (`#d8dee4`): Binnenste scheidingslijnen binnen een paneel.
|
||||
- **Rand Subtiel** (`#eaeef2`): Vage tabelrijscheidingslijnen.
|
||||
|
||||
### Donker thema
|
||||
- **Donker Canvas** (`#0d1117`): Donkere pagina-achtergrond.
|
||||
- **Donker Oppervlak** (`#161b22`): Zijbalk, koptekst, secundair oppervlak.
|
||||
- **Donkere Rand** (`#30363d`): Standaard donkermodus-rand.
|
||||
- **Donker Fg** (`#e6edf3`): Primaire tekst op donker.
|
||||
|
||||
## 3. Typografieregels
|
||||
|
||||
### Lettertypefamilie
|
||||
- **Hoofdtekst / UI**: `-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif`
|
||||
- **Code / Mono**: `ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace`
|
||||
- **Emoji**: `"Apple Color Emoji", "Segoe UI Emoji"`
|
||||
|
||||
### Hiërarchie
|
||||
|
||||
| Rol | Lettertype | Grootte | Gewicht | Regelafstand | Letterafstand | Opmerkingen |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Display | system-ui | 32px (2rem) | 600 | 1.25 | -0.01em | Repositoryheader, marketinghero |
|
||||
| H1 | system-ui | 24px (1.5rem) | 600 | 1.25 | normaal | Paginakopping |
|
||||
| H2 | system-ui | 20px (1.25rem) | 600 | 1.25 | normaal | Sectiekopping |
|
||||
| H3 | system-ui | 16px (1rem) | 600 | 1.25 | normaal | Subonderdeel, paneelkopje |
|
||||
| Hoofdtekst | system-ui | 14px (0.875rem) | 400 | 1.5 | normaal | Standaard tekstgrootte — niet 16px |
|
||||
| Kleine tekst | system-ui | 12px (0.75rem) | 400 | 1.4 | normaal | Bijschriften, bestandsmetadata |
|
||||
| Code | SFMono | 12px (0.75rem) | 400 | 1.45 | normaal | Codeblokken, diff |
|
||||
| Inline code | SFMono | 0.85em | 400 | overnemen | normaal | Inline `code`-spans |
|
||||
|
||||
### Principes
|
||||
- **14px tekst, niet 16px**: GitHub's prozadichtheid is zijn identiteit. Het product wordt gelezen op 14px om meer rijen in een viewport te passen.
|
||||
- **Binair gewicht**: 400 voor alles standaard; 600 voor koppen en nadruk. Geen 500, geen 700.
|
||||
- **Altijd systeemlettertypen**: laad nooit een weblettertype voor de chrome — tekst moet direct renderen op trage verbindingen.
|
||||
|
||||
## 4. Componentstijlen
|
||||
|
||||
### Knoppen
|
||||
|
||||
**Primair (Groen)**
|
||||
- Achtergrond: `#1f883d`
|
||||
- Tekst: `#ffffff`
|
||||
- Rand: 1px solid `rgba(31, 35, 40, 0.15)`
|
||||
- Opvulling: 5px 16px
|
||||
- Radius: 6px
|
||||
- Schaduw: `0 1px 0 rgba(31,35,40,0.1)`
|
||||
- Hover: achtergrond `#1a7f37`
|
||||
- Gebruik: "Repository aanmaken", "Pull request samenvoegen"
|
||||
|
||||
**Standaard**
|
||||
- Achtergrond: `#f6f8fa`
|
||||
- Tekst: `#1f2328`
|
||||
- Rand: 1px solid `#d0d7de`
|
||||
- Opvulling: 5px 16px
|
||||
- Radius: 6px
|
||||
- Hover: achtergrond `#f3f4f6`, rand `#d0d7de`
|
||||
|
||||
**Omtrek (blauwe linkstijl)**
|
||||
- Achtergrond: `#ffffff`
|
||||
- Tekst: `#0969da`
|
||||
- Rand: 1px solid `#d0d7de`
|
||||
- Hover: achtergrond `#0969da`, tekst `#ffffff`
|
||||
|
||||
**Gevaar**
|
||||
- Achtergrond: `#ffffff`
|
||||
- Tekst: `#cf222e`
|
||||
- Rand: 1px solid `#d0d7de`
|
||||
- Hover: achtergrond `#a40e26`, tekst `#ffffff`, rand `#a40e26`
|
||||
|
||||
### Kaarten / Vakken
|
||||
- Achtergrond: `#ffffff`
|
||||
- Rand: 1px solid `#d0d7de`
|
||||
- Radius: 6px
|
||||
- Opvulling: 16px (koptekst) + 16px (inhoud)
|
||||
- Koptekst heeft een `#f6f8fa`-balk met onderrand.
|
||||
|
||||
### Invoervelden
|
||||
- Achtergrond: `#ffffff`
|
||||
- Rand: 1px solid `#d0d7de`
|
||||
- Radius: 6px
|
||||
- Opvulling: 5px 12px
|
||||
- Focus: rand `#0969da`, ring `0 0 0 3px rgba(9,105,218,0.3)`
|
||||
|
||||
### Statuspillen (Issue / PR)
|
||||
- **Open**: achtergrond `#1a7f37`, tekst wit, opvulling 4px 10px, radius 9999px.
|
||||
- **Gesloten**: achtergrond `#cf222e`, tekst wit.
|
||||
- **Samengevoegd**: achtergrond `#8250df`, tekst wit.
|
||||
- **Concept**: achtergrond `#6e7781`, tekst wit.
|
||||
|
||||
### Labels (Tags op issues/PR's)
|
||||
- Opvulling: 0 7px
|
||||
- Radius: 9999px
|
||||
- Lettertype: 12px / 500
|
||||
- Achtergrond en tekst zijn programmatisch (labelkleur → tekst berekend voor contrast).
|
||||
|
||||
## 5. Afstand en indeling
|
||||
|
||||
- **Basiseenheid**: 4px. Afstandsschaal: 4, 8, 12, 16, 24, 32, 40, 48.
|
||||
- **Maximale paginabreedte**: 1280px (`Container-xl`).
|
||||
- **Zijbalk**: 296px op desktop, klapt samen onder 1012px.
|
||||
- **Rijopvulling**: 16px horizontaal, 12px verticaal (lijsten zijn bewust compact).
|
||||
|
||||
## 6. Beweging
|
||||
|
||||
- **Duur**: 80ms voor hover; 200ms voor menu/popover openen.
|
||||
- **Versoepeling**: `ease-out` voor openen, `ease-in` voor sluiten.
|
||||
- **Vermeden**: paginalaadinimaties, parallax, aanhoudende micro-interacties. Dingen verschijnen; ze voeren geen show op.
|
||||
|
||||
## 7. Gebruiksrichtlijnen
|
||||
|
||||
- Houd dichte lijsten, omrande vakken en systeemtypografie bij elkaar; geïsoleerde groene knoppen zijn niet genoeg om een GitHub-achtig productoppervlak te creëren.
|
||||
- Gebruik groen voor constructieve repositoryacties, blauw voor links en focus, en rood/paars/grijs alleen voor issue-, PR- en workflowstatussen.
|
||||
- Geef de voorkeur aan rustige opmaak, expliciete randen en compacte afstand boven decoratieve schaduwen of grote marketingkaarten.
|
||||
@@ -0,0 +1,161 @@
|
||||
# System projektowy inspirowany GitHub
|
||||
|
||||
> Category: Narzędzia deweloperskie
|
||||
> Platforma zorientowana na kod. Gęstość funkcjonalna, precyzja niebieskiego na białym, fundamenty Primer.
|
||||
|
||||
## 1. Motyw wizualny i atmosfera
|
||||
|
||||
Powierzchnia GitHub jest zaprojektowana, nie ozdobiona. Każdy piksel wyraża stanowisko: to narzędzie dla osób, którym zależy na diffach, buildach i pull requestach. Tło strony to czysty `#ffffff` (jasny) lub `#0d1117` (ciemny), a treść rozmieszczona jest na gęstych prostokątnych panelach oddzielonych cienkimi ramkami zamiast pustą przestrzenią. Gęstość informacji to marka — wiersze list, linie kodu, nagłówki repozytoriów i karty powiadomień są ściśle upakowane, aby zaawansowany użytkownik mógł przeskanować sto elementów bez przewijania.
|
||||
|
||||
Charakterystyczne akcenty to **Primer blue** (`#0969da`) dla łączy i podstawowych akcji oraz **GitHub green** (`#1a7f37`) dla scalonych stanów, sukcesów i samego przycisku scalania. Oba wyglądają nieco stonowanie w porównaniu z niebieskim i zielonym w produktach konsumenckich — wystarczająco nasycone, by odczytywać się na tle gęstego szarego tekstu, na tyle powściągliwe, by znikać w tle, gdy kilka z nich pojawi się w jednym widoku.
|
||||
|
||||
Typografia używa stosu **system-ui** w całym produkcie, dzięki czemu tekst renderuje się ostro na każdym systemie operacyjnym, w parze z **SFMono / Menlo / Consolas** dla kodu. Nie ma editorial display fontu; głosem GitHub jest głos systemu, na którym już pracujesz.
|
||||
|
||||
**Kluczowe cechy:**
|
||||
- Czysto białe płótno (`#ffffff`) lub głęboka granatowa czerń (`#0d1117`) — bez ciepła, bez odcienia
|
||||
- Cienkie szare ramki (`#d0d7de`) definiują każdy panel
|
||||
- Primer blue (`#0969da`) dla łączy/podstawowych; GitHub green (`#1a7f37`) dla sukcesu/scalania
|
||||
- system-ui dla prozy; SFMono dla kodu — brak niestandardowego kroju pisma
|
||||
- Gęste wiersze list z minimalnym paddingiem; białe przestrzenie są rzadkością
|
||||
- Ikonografia Octicon w rozmiarze 16px / 24px — pojedynczy obrys, geometryczna, spójna
|
||||
- Odznaki statusu w kształcie pigułki z mocną semantyką kolorów
|
||||
|
||||
## 2. Paleta kolorów i role
|
||||
|
||||
### Podstawowe
|
||||
- **Canvas Default** (`#ffffff`): Główne tło strony, jasny motyw.
|
||||
- **Canvas Subtle** (`#f6f8fa`): Drugorzędna powierzchnia, pasek boczny, tło pola wprowadzania, pasek nagłówka.
|
||||
- **Canvas Inset** (`#eaeef2`): Tło bloku kodu, głęboko wklęsła powierzchnia.
|
||||
- **Fg Default** (`#1f2328`): Podstawowy tekst, nagłówki, tusz.
|
||||
- **Fg Muted** (`#656d76`): Drugorzędny tekst, podpisy, ścieżki plików.
|
||||
|
||||
### Akcent marki
|
||||
- **Primer Blue** (`#0969da`): Łącza, główne CTA, podstawa pierścienia fokusa — uniwersalny kolor interaktywny.
|
||||
- **Primer Blue Hover** (`#0550ae`): Stan najechania/wciśnięcia dla podstawowego niebieskiego.
|
||||
- **Accent Subtle** (`#ddf4ff`): Delikatna niebieska powierzchnia dla wyróżnień, banerów informacyjnych.
|
||||
|
||||
### Semantyczne
|
||||
- **Success / Merge Green** (`#1a7f37`): Scalone PR, odznaki sukcesu, przycisk scalania.
|
||||
- **Success Subtle** (`#dafbe1`): Odcień powierzchni sukcesu.
|
||||
- **Open Green** (`#1a7f37`): Stan „Open" dla issue/PR.
|
||||
- **Closed / Danger Red** (`#cf222e`): Zamknięte PR, działanie destrukcyjne, błąd walidacji.
|
||||
- **Danger Subtle** (`#ffebe9`): Powierzchnia banera błędu.
|
||||
- **Attention / Warning Yellow** (`#9a6700`): Tekst ostrzeżenia na bursztynowej powierzchni.
|
||||
- **Attention Subtle** (`#fff8c5`): Powierzchnia banera ostrzeżenia.
|
||||
- **Done Purple** (`#8250df`): Scalone i zarchiwizowane, stan „done", odznaka premium.
|
||||
- **Sponsor Pink** (`#bf3989`): Serce sponsorów, marka GitHub Sponsors.
|
||||
|
||||
### Ramka i separator
|
||||
- **Border Default** (`#d0d7de`): Standardowa cienka ramka, obrys panelu.
|
||||
- **Border Muted** (`#d8dee4`): Wewnętrzne separatory w panelu.
|
||||
- **Border Subtle** (`#eaeef2`): Słabe separatory wierszy tabeli.
|
||||
|
||||
### Ciemny motyw
|
||||
- **Dark Canvas** (`#0d1117`): Ciemne tło strony.
|
||||
- **Dark Surface** (`#161b22`): Pasek boczny, nagłówek, drugorzędna powierzchnia.
|
||||
- **Dark Border** (`#30363d`): Standardowa ramka w trybie ciemnym.
|
||||
- **Dark Fg** (`#e6edf3`): Podstawowy tekst na ciemnym tle.
|
||||
|
||||
## 3. Zasady typografii
|
||||
|
||||
### Rodzina czcionek
|
||||
- **Body / UI**: `-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif`
|
||||
- **Code / Mono**: `ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace`
|
||||
- **Emoji**: `"Apple Color Emoji", "Segoe UI Emoji"`
|
||||
|
||||
### Hierarchia
|
||||
|
||||
| Rola | Czcionka | Rozmiar | Grubość | Wysokość linii | Odstęp liter | Uwagi |
|
||||
|------|----------|---------|---------|----------------|--------------|-------|
|
||||
| Display | system-ui | 32px (2rem) | 600 | 1.25 | -0.01em | Nagłówek repo, hero marketingowy |
|
||||
| H1 | system-ui | 24px (1.5rem) | 600 | 1.25 | normal | Nagłówek strony |
|
||||
| H2 | system-ui | 20px (1.25rem) | 600 | 1.25 | normal | Nagłówek sekcji |
|
||||
| H3 | system-ui | 16px (1rem) | 600 | 1.25 | normal | Podsekcja, nagłówek panelu |
|
||||
| Body | system-ui | 14px (0.875rem) | 400 | 1.5 | normal | Domyślny rozmiar tekstu — nie 16px |
|
||||
| Body Small | system-ui | 12px (0.75rem) | 400 | 1.4 | normal | Podpisy, metadane pliku |
|
||||
| Code | SFMono | 12px (0.75rem) | 400 | 1.45 | normal | Bloki kodu, diff |
|
||||
| Code Inline | SFMono | 0.85em | 400 | inherit | normal | Wbudowane fragmenty `code` |
|
||||
|
||||
### Zasady
|
||||
- **14px body, nie 16px**: Gęstość prozy GitHub to jego tożsamość. Produkt renderuje przy 14px, by zmieścić więcej wierszy w widoku.
|
||||
- **Grubość binarna**: 400 dla wszystkiego domyślnie; 600 dla nagłówków i wyróżnień. Bez 500, bez 700.
|
||||
- **Zawsze czcionki systemowe**: nigdy nie ładuj webfontu dla chrome — tekst musi renderować się natychmiast przy wolnym połączeniu.
|
||||
|
||||
## 4. Style komponentów
|
||||
|
||||
### Przyciski
|
||||
|
||||
**Primary (Green)**
|
||||
- Tło: `#1f883d`
|
||||
- Tekst: `#ffffff`
|
||||
- Ramka: 1px solid `rgba(31, 35, 40, 0.15)`
|
||||
- Padding: 5px 16px
|
||||
- Radius: 6px
|
||||
- Cień: `0 1px 0 rgba(31,35,40,0.1)`
|
||||
- Najechanie: tło `#1a7f37`
|
||||
- Użycie: „Create repository", „Merge pull request"
|
||||
|
||||
**Default**
|
||||
- Tło: `#f6f8fa`
|
||||
- Tekst: `#1f2328`
|
||||
- Ramka: 1px solid `#d0d7de`
|
||||
- Padding: 5px 16px
|
||||
- Radius: 6px
|
||||
- Najechanie: tło `#f3f4f6`, ramka `#d0d7de`
|
||||
|
||||
**Outline (Blue Link Style)**
|
||||
- Tło: `#ffffff`
|
||||
- Tekst: `#0969da`
|
||||
- Ramka: 1px solid `#d0d7de`
|
||||
- Najechanie: tło `#0969da`, tekst `#ffffff`
|
||||
|
||||
**Danger**
|
||||
- Tło: `#ffffff`
|
||||
- Tekst: `#cf222e`
|
||||
- Ramka: 1px solid `#d0d7de`
|
||||
- Najechanie: tło `#a40e26`, tekst `#ffffff`, ramka `#a40e26`
|
||||
|
||||
### Karty / Boksy
|
||||
- Tło: `#ffffff`
|
||||
- Ramka: 1px solid `#d0d7de`
|
||||
- Radius: 6px
|
||||
- Padding: 16px (nagłówek) + 16px (treść)
|
||||
- Nagłówek ma pasek `#f6f8fa` z dolną ramką.
|
||||
|
||||
### Pola wprowadzania
|
||||
- Tło: `#ffffff`
|
||||
- Ramka: 1px solid `#d0d7de`
|
||||
- Radius: 6px
|
||||
- Padding: 5px 12px
|
||||
- Fokus: ramka `#0969da`, pierścień `0 0 0 3px rgba(9,105,218,0.3)`
|
||||
|
||||
### Odznaki statusu (Issue / PR)
|
||||
- **Open**: tło `#1a7f37`, tekst biały, padding 4px 10px, radius 9999px.
|
||||
- **Closed**: tło `#cf222e`, tekst biały.
|
||||
- **Merged**: tło `#8250df`, tekst biały.
|
||||
- **Draft**: tło `#6e7781`, tekst biały.
|
||||
|
||||
### Etykiety (tagi na Issues/PRach)
|
||||
- Padding: 0 7px
|
||||
- Radius: 9999px
|
||||
- Czcionka: 12px / 500
|
||||
- Tło i tekst są programowe (kolor etykiety → tekst obliczany dla kontrastu).
|
||||
|
||||
## 5. Odstępy i układ
|
||||
|
||||
- **Jednostka bazowa**: 4px. Skala odstępów: 4, 8, 12, 16, 24, 32, 40, 48.
|
||||
- **Maksymalna szerokość strony**: 1280px (`Container-xl`).
|
||||
- **Pasek boczny**: 296px na desktopie, zwija się poniżej 1012px.
|
||||
- **Padding wiersza**: 16px poziomo, 12px pionowo (listy są gęste z założenia).
|
||||
|
||||
## 6. Ruch
|
||||
|
||||
- **Czas trwania**: 80ms dla najechania; 200ms dla otwarcia menu/popovers.
|
||||
- **Wygładzanie**: `ease-out` dla otwarć, `ease-in` dla zamknięć.
|
||||
- **Unikane**: animacje ładowania strony, parallax, trwałe mikrointerakcje. Rzeczy się pojawiają; nie performują.
|
||||
|
||||
## 7. Wytyczne użytkowania
|
||||
|
||||
- Utrzymuj gęste listy, obramowane boksy i czcionki systemowe razem; izolowane zielone przyciski nie wystarczą, by stworzyć powierzchnię produktu podobną do GitHub.
|
||||
- Używaj zielonego dla konstruktywnych akcji repozytoriów, niebieskiego dla łączy i fokusa, a czerwonego/fioletowego/szarego wyłącznie dla stanów issue, PR i workflow.
|
||||
- Preferuj spokojne chrome, wyraźne ramki i kompaktowe odstępy zamiast dekoracyjnych cieni lub dużych kart w stylu marketingowym.
|
||||
@@ -0,0 +1,161 @@
|
||||
# Sistema de Design Inspirado no GitHub
|
||||
|
||||
> Category: Ferramentas para Desenvolvedores
|
||||
> Plataforma orientada ao código. Densidade funcional, precisão de azul sobre branco, fundações Primer.
|
||||
|
||||
## 1. Tema Visual e Atmosfera
|
||||
|
||||
A superfície do GitHub é projetada, não decorada. Cada pixel transmite uma postura: esta é uma ferramenta para pessoas que se importam com diffs, builds e pull requests. O fundo da página é um `#ffffff` limpo (claro) ou `#0d1117` (escuro), com o conteúdo organizado em painéis retangulares densos separados por bordas finíssimas, em vez de espaço negativo. A densidade de informação é a marca — linhas de listas, linhas de código, cabeçalhos de repositório e cartões de notificação ficam todos próximos uns dos outros, para que um usuário avançado possa percorrer cem itens sem rolar a página.
|
||||
|
||||
Os destaques característicos são o **azul Primer** (`#0969da`) para links e ações primárias, e o **verde GitHub** (`#1a7f37`) para estados de merge, sucesso e o próprio botão de merge. Ambos parecem levemente discretos em comparação com os azuis e verdes de produtos voltados ao consumidor — saturados o suficiente para se destacar sobre o texto cinza denso, contidos o bastante para se diluir no fundo quando vários aparecem em um mesmo viewport.
|
||||
|
||||
A tipografia usa a pilha **system-ui** em todo o produto, para que o texto seja renderizado com nitidez em qualquer sistema operacional, combinada com **SFMono / Menlo / Consolas** para código. Não há fonte editorial de exibição; a voz do GitHub é a voz do sistema em que você já está.
|
||||
|
||||
**Características Principais:**
|
||||
- Tela branca pura (`#ffffff`) ou azul-marinho profundo quase preto (`#0d1117`) — sem calor, sem tonalidade
|
||||
- Bordas cinza finíssimas (`#d0d7de`) definem cada painel e divisão
|
||||
- Azul Primer (`#0969da`) para links/ações primárias; verde GitHub (`#1a7f37`) para sucesso/merge
|
||||
- system-ui para prosa; SFMono para código — sem fonte personalizada
|
||||
- Linhas de lista densas com preenchimento mínimo; espaço em branco é raro
|
||||
- Iconografia Octicon em 16px / 24px — traço único, geométrica, consistente
|
||||
- Emblemas de status em formato pílula com semântica de cor forte
|
||||
|
||||
## 2. Paleta de Cores e Papéis
|
||||
|
||||
### Primárias
|
||||
- **Canvas Default** (`#ffffff`): Fundo principal da página, tema claro.
|
||||
- **Canvas Subtle** (`#f6f8fa`): Superfície secundária, barra lateral, fundo de entrada, faixa de cabeçalho.
|
||||
- **Canvas Inset** (`#eaeef2`): Fundo de bloco de código, superfície profundamente encaixada.
|
||||
- **Fg Default** (`#1f2328`): Texto primário, títulos, tinta.
|
||||
- **Fg Muted** (`#656d76`): Texto secundário, legendas, caminhos de arquivo.
|
||||
|
||||
### Destaque de Marca
|
||||
- **Primer Blue** (`#0969da`): Links, CTAs primários, base do anel de foco — a cor interativa universal.
|
||||
- **Primer Blue Hover** (`#0550ae`): Estado hover/pressionado para o azul primário.
|
||||
- **Accent Subtle** (`#ddf4ff`): Superfície azul suave para chamadas e banners informativos.
|
||||
|
||||
### Semânticas
|
||||
- **Success / Merge Green** (`#1a7f37`): PRs com merge, emblemas de sucesso, botão de merge.
|
||||
- **Success Subtle** (`#dafbe1`): Tonalidade de superfície de sucesso.
|
||||
- **Open Green** (`#1a7f37`): Estado "Aberto" de issue/PR.
|
||||
- **Closed / Danger Red** (`#cf222e`): PRs fechados, ações destrutivas, erro de validação.
|
||||
- **Danger Subtle** (`#ffebe9`): Superfície de banner de erro.
|
||||
- **Attention / Warning Yellow** (`#9a6700`): Texto de aviso sobre superfície âmbar.
|
||||
- **Attention Subtle** (`#fff8c5`): Superfície de banner de aviso.
|
||||
- **Done Purple** (`#8250df`): Com merge e arquivado, estado "concluído", emblema premium.
|
||||
- **Sponsor Pink** (`#bf3989`): Coração de patrocinadores, marca do GitHub Sponsors.
|
||||
|
||||
### Borda e Divisor
|
||||
- **Border Default** (`#d0d7de`): Borda finíssima padrão, contorno do painel.
|
||||
- **Border Muted** (`#d8dee4`): Divisores internos dentro de um painel.
|
||||
- **Border Subtle** (`#eaeef2`): Divisores tênues entre linhas de tabela.
|
||||
|
||||
### Tema Escuro
|
||||
- **Dark Canvas** (`#0d1117`): Fundo da página no modo escuro.
|
||||
- **Dark Surface** (`#161b22`): Barra lateral, cabeçalho, superfície secundária.
|
||||
- **Dark Border** (`#30363d`): Borda padrão no modo escuro.
|
||||
- **Dark Fg** (`#e6edf3`): Texto primário sobre fundo escuro.
|
||||
|
||||
## 3. Regras Tipográficas
|
||||
|
||||
### Família de Fontes
|
||||
- **Corpo / UI**: `-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif`
|
||||
- **Código / Mono**: `ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace`
|
||||
- **Emoji**: `"Apple Color Emoji", "Segoe UI Emoji"`
|
||||
|
||||
### Hierarquia
|
||||
|
||||
| Papel | Fonte | Tamanho | Peso | Altura de Linha | Espaçamento | Notas |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Display | system-ui | 32px (2rem) | 600 | 1.25 | -0.01em | Cabeçalho de repositório, hero de marketing |
|
||||
| H1 | system-ui | 24px (1.5rem) | 600 | 1.25 | normal | Título da página |
|
||||
| H2 | system-ui | 20px (1.25rem) | 600 | 1.25 | normal | Título de seção |
|
||||
| H3 | system-ui | 16px (1rem) | 600 | 1.25 | normal | Subseção, cabeçalho de painel |
|
||||
| Corpo | system-ui | 14px (0.875rem) | 400 | 1.5 | normal | Tamanho de texto padrão — não 16px |
|
||||
| Corpo Pequeno | system-ui | 12px (0.75rem) | 400 | 1.4 | normal | Legendas, metadados de arquivo |
|
||||
| Código | SFMono | 12px (0.75rem) | 400 | 1.45 | normal | Blocos de código, diff |
|
||||
| Código Inline | SFMono | 0.85em | 400 | inherit | normal | Trechos de `code` inline |
|
||||
|
||||
### Princípios
|
||||
- **Corpo em 14px, não 16px**: A densidade de prosa do GitHub é sua identidade. O produto é lido em 14px para caber mais linhas em um viewport.
|
||||
- **Peso binário**: 400 para tudo por padrão; 600 para títulos e ênfase. Sem 500, sem 700.
|
||||
- **Fontes do sistema sempre**: nunca carregue uma webfont para o chrome — o texto deve ser renderizado instantaneamente em conexões lentas.
|
||||
|
||||
## 4. Estilos de Componentes
|
||||
|
||||
### Botões
|
||||
|
||||
**Primário (Verde)**
|
||||
- Fundo: `#1f883d`
|
||||
- Texto: `#ffffff`
|
||||
- Borda: 1px solid `rgba(31, 35, 40, 0.15)`
|
||||
- Preenchimento: 5px 16px
|
||||
- Raio: 6px
|
||||
- Sombra: `0 1px 0 rgba(31,35,40,0.1)`
|
||||
- Hover: fundo `#1a7f37`
|
||||
- Uso: "Criar repositório", "Fazer merge do pull request"
|
||||
|
||||
**Padrão**
|
||||
- Fundo: `#f6f8fa`
|
||||
- Texto: `#1f2328`
|
||||
- Borda: 1px solid `#d0d7de`
|
||||
- Preenchimento: 5px 16px
|
||||
- Raio: 6px
|
||||
- Hover: fundo `#f3f4f6`, borda `#d0d7de`
|
||||
|
||||
**Contorno (Estilo de Link Azul)**
|
||||
- Fundo: `#ffffff`
|
||||
- Texto: `#0969da`
|
||||
- Borda: 1px solid `#d0d7de`
|
||||
- Hover: fundo `#0969da`, texto `#ffffff`
|
||||
|
||||
**Perigo**
|
||||
- Fundo: `#ffffff`
|
||||
- Texto: `#cf222e`
|
||||
- Borda: 1px solid `#d0d7de`
|
||||
- Hover: fundo `#a40e26`, texto `#ffffff`, borda `#a40e26`
|
||||
|
||||
### Cartões / Caixas
|
||||
- Fundo: `#ffffff`
|
||||
- Borda: 1px solid `#d0d7de`
|
||||
- Raio: 6px
|
||||
- Preenchimento: 16px (cabeçalho) + 16px (corpo)
|
||||
- O cabeçalho tem uma faixa `#f6f8fa` com borda inferior.
|
||||
|
||||
### Entradas
|
||||
- Fundo: `#ffffff`
|
||||
- Borda: 1px solid `#d0d7de`
|
||||
- Raio: 6px
|
||||
- Preenchimento: 5px 12px
|
||||
- Foco: borda `#0969da`, anel `0 0 0 3px rgba(9,105,218,0.3)`
|
||||
|
||||
### Pílulas de Status (Issue / PR)
|
||||
- **Aberto**: fundo `#1a7f37`, texto branco, preenchimento 4px 10px, raio 9999px.
|
||||
- **Fechado**: fundo `#cf222e`, texto branco.
|
||||
- **Com merge**: fundo `#8250df`, texto branco.
|
||||
- **Rascunho**: fundo `#6e7781`, texto branco.
|
||||
|
||||
### Etiquetas (Tags em Issues/PRs)
|
||||
- Preenchimento: 0 7px
|
||||
- Raio: 9999px
|
||||
- Fonte: 12px / 500
|
||||
- O fundo e o texto são programáticos (cor da etiqueta → texto calculado para contraste).
|
||||
|
||||
## 5. Espaçamento e Layout
|
||||
|
||||
- **Unidade base**: 4px. Escala de espaçamento: 4, 8, 12, 16, 24, 32, 40, 48.
|
||||
- **Largura máxima da página**: 1280px (`Container-xl`).
|
||||
- **Barra lateral**: 296px no desktop, colapsa abaixo de 1012px.
|
||||
- **Preenchimento de linha**: 16px horizontal, 12px vertical (listas são densas por design).
|
||||
|
||||
## 6. Movimento
|
||||
|
||||
- **Duração**: 80ms para hover; 200ms para abertura de menu/popover.
|
||||
- **Suavização**: `ease-out` para aberturas, `ease-in` para fechamentos.
|
||||
- **Evitado**: animação no carregamento da página, parallax, micro-interações persistentes. As coisas aparecem; elas não se apresentam.
|
||||
|
||||
## 7. Diretrizes de Uso
|
||||
|
||||
- Mantenha listas densas, caixas com bordas e tipografia do sistema juntas; botões verdes isolados não são suficientes para criar uma superfície de produto semelhante ao GitHub.
|
||||
- Use verde para ações construtivas de repositório, azul para links e foco, e vermelho/roxo/cinza apenas para estados de issue, PR e workflow.
|
||||
- Prefira chrome discreto, bordas explícitas e espaçamento compacto a sombras decorativas ou cartões no estilo de marketing de grande porte.
|
||||
@@ -0,0 +1,161 @@
|
||||
# Дизайн-система, вдохновлённая GitHub
|
||||
|
||||
> Category: Инструменты разработчика
|
||||
> Платформа, ориентированная на код. Функциональная плотность, точность синего на белом, основы Primer.
|
||||
|
||||
## 1. Визуальная тема и атмосфера
|
||||
|
||||
Поверхность GitHub спроектирована, а не украшена. Каждый пиксель выражает позицию: это инструмент для людей, которым важны диффы, сборки и pull request'ы. Фон страниц — чистый `#ffffff` (светлая тема) или `#0d1117` (тёмная), а контент размещается на плотных прямоугольных панелях, разделённых тонкими границами, а не отступами. Плотность информации — это бренд: строки списков, строки кода, заголовки репозиториев и карточки уведомлений стоят близко, чтобы опытный пользователь мог просмотреть сотню элементов без прокрутки.
|
||||
|
||||
Характерные акценты — **синий Primer** (`#0969da`) для ссылок и основных действий и **зелёный GitHub** (`#1a7f37`) для состояний слияния, успеха и самой кнопки слияния. Оба цвета выглядят немного приглушёнными по сравнению с синим и зелёным в потребительских продуктах — насыщенными ровно настолько, чтобы читаться на фоне плотного серого текста, и сдержанными настолько, чтобы растворяться в фоне, когда их несколько в одном вьюпорте.
|
||||
|
||||
Типографика использует стек **system-ui** во всём продукте, чтобы текст чётко рендерился в любой ОС; для кода применяется **SFMono / Menlo / Consolas**. Редакционных декоративных шрифтов нет; голос GitHub — это голос системы, в которой вы уже находитесь.
|
||||
|
||||
**Ключевые характеристики:**
|
||||
- Чисто белый холст (`#ffffff`) или глубокий тёмно-синий/чёрный (`#0d1117`) — без теплоты, без оттенка
|
||||
- Тонкие серые границы (`#d0d7de`) определяют каждую панель
|
||||
- Синий Primer (`#0969da`) — для ссылок и основных действий; зелёный GitHub (`#1a7f37`) — для успеха и слияния
|
||||
- system-ui — для прозы; SFMono — для кода; никаких пользовательских гарнитур
|
||||
- Плотные строки списков с минимальными отступами; пространство используется редко
|
||||
- Иконография Octicon 16px / 24px — одноконтурная, геометрическая, последовательная
|
||||
- Статусные бейджи в форме таблеток с чёткой цветовой семантикой
|
||||
|
||||
## 2. Цветовая палитра и роли цветов
|
||||
|
||||
### Основные
|
||||
- **Canvas Default** (`#ffffff`): основной фон страницы, светлая тема.
|
||||
- **Canvas Subtle** (`#f6f8fa`): вторичная поверхность, боковая панель, фон полей ввода, полоса заголовка.
|
||||
- **Canvas Inset** (`#eaeef2`): фон блоков кода, глубоко утопленная поверхность.
|
||||
- **Fg Default** (`#1f2328`): основной текст, заголовки, шрифт.
|
||||
- **Fg Muted** (`#656d76`): вторичный текст, подписи, пути к файлам.
|
||||
|
||||
### Брендовый акцент
|
||||
- **Primer Blue** (`#0969da`): ссылки, основные CTA, кольцо фокуса — универсальный интерактивный цвет.
|
||||
- **Primer Blue Hover** (`#0550ae`): наведение/нажатие для основного синего.
|
||||
- **Accent Subtle** (`#ddf4ff`): мягкая синяя поверхность для подсказок и информационных баннеров.
|
||||
|
||||
### Семантические
|
||||
- **Success / Merge Green** (`#1a7f37`): смёрженные PR, бейджи успеха, кнопка слияния.
|
||||
- **Success Subtle** (`#dafbe1`): оттенок поверхности успеха.
|
||||
- **Open Green** (`#1a7f37`): состояние «Открыт» для issue/PR.
|
||||
- **Closed / Danger Red** (`#cf222e`): закрытые PR, деструктивное действие, ошибка валидации.
|
||||
- **Danger Subtle** (`#ffebe9`): поверхность баннера ошибки.
|
||||
- **Attention / Warning Yellow** (`#9a6700`): предупредительный текст на янтарной поверхности.
|
||||
- **Attention Subtle** (`#fff8c5`): поверхность предупредительного баннера.
|
||||
- **Done Purple** (`#8250df`): смёрженное и архивированное состояние, статус «готово», премиальный бейдж.
|
||||
- **Sponsor Pink** (`#bf3989`): значок сердца спонсоров, бренд GitHub Sponsors.
|
||||
|
||||
### Границы и разделители
|
||||
- **Border Default** (`#d0d7de`): стандартная тонкая граница, контур панели.
|
||||
- **Border Muted** (`#d8dee4`): внутренние разделители внутри панели.
|
||||
- **Border Subtle** (`#eaeef2`): едва заметные разделители строк таблицы.
|
||||
|
||||
### Тёмная тема
|
||||
- **Dark Canvas** (`#0d1117`): тёмный фон страницы.
|
||||
- **Dark Surface** (`#161b22`): боковая панель, заголовок, вторичная поверхность.
|
||||
- **Dark Border** (`#30363d`): стандартная граница тёмного режима.
|
||||
- **Dark Fg** (`#e6edf3`): основной текст на тёмном фоне.
|
||||
|
||||
## 3. Правила типографики
|
||||
|
||||
### Семейство шрифтов
|
||||
- **Основной текст / UI**: `-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif`
|
||||
- **Код / Моно**: `ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace`
|
||||
- **Emoji**: `"Apple Color Emoji", "Segoe UI Emoji"`
|
||||
|
||||
### Иерархия
|
||||
|
||||
| Роль | Шрифт | Размер | Начертание | Межстрочный интервал | Трекинг | Примечания |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Display | system-ui | 32px (2rem) | 600 | 1.25 | -0.01em | Заголовок репозитория, маркетинговый герой |
|
||||
| H1 | system-ui | 24px (1.5rem) | 600 | 1.25 | normal | Заголовок страницы |
|
||||
| H2 | system-ui | 20px (1.25rem) | 600 | 1.25 | normal | Заголовок раздела |
|
||||
| H3 | system-ui | 16px (1rem) | 600 | 1.25 | normal | Подраздел, заголовок панели |
|
||||
| Body | system-ui | 14px (0.875rem) | 400 | 1.5 | normal | Стандартный размер текста — не 16px |
|
||||
| Body Small | system-ui | 12px (0.75rem) | 400 | 1.4 | normal | Подписи, метаданные файлов |
|
||||
| Code | SFMono | 12px (0.75rem) | 400 | 1.45 | normal | Блоки кода, diff |
|
||||
| Code Inline | SFMono | 0.85em | 400 | inherit | normal | Встроенные фрагменты `code` |
|
||||
|
||||
### Принципы
|
||||
- **14px для основного текста, не 16px**: плотность прозы GitHub — его идентичность. Продукт читается при 14px, чтобы вместить больше строк в область просмотра.
|
||||
- **Два варианта начертания**: 400 для всего по умолчанию; 600 для заголовков и акцентов. Ни 500, ни 700.
|
||||
- **Системные шрифты всегда**: никогда не загружайте веб-шрифты для интерфейса — текст должен рендериться мгновенно при медленном соединении.
|
||||
|
||||
## 4. Стили компонентов
|
||||
|
||||
### Кнопки
|
||||
|
||||
**Основная (зелёная)**
|
||||
- Фон: `#1f883d`
|
||||
- Текст: `#ffffff`
|
||||
- Граница: 1px solid `rgba(31, 35, 40, 0.15)`
|
||||
- Отступы: 5px 16px
|
||||
- Скругление: 6px
|
||||
- Тень: `0 1px 0 rgba(31,35,40,0.1)`
|
||||
- Наведение: фон `#1a7f37`
|
||||
- Использование: «Create repository», «Merge pull request»
|
||||
|
||||
**По умолчанию**
|
||||
- Фон: `#f6f8fa`
|
||||
- Текст: `#1f2328`
|
||||
- Граница: 1px solid `#d0d7de`
|
||||
- Отступы: 5px 16px
|
||||
- Скругление: 6px
|
||||
- Наведение: фон `#f3f4f6`, граница `#d0d7de`
|
||||
|
||||
**Контурная (стиль синей ссылки)**
|
||||
- Фон: `#ffffff`
|
||||
- Текст: `#0969da`
|
||||
- Граница: 1px solid `#d0d7de`
|
||||
- Наведение: фон `#0969da`, текст `#ffffff`
|
||||
|
||||
**Опасная**
|
||||
- Фон: `#ffffff`
|
||||
- Текст: `#cf222e`
|
||||
- Граница: 1px solid `#d0d7de`
|
||||
- Наведение: фон `#a40e26`, текст `#ffffff`, граница `#a40e26`
|
||||
|
||||
### Карточки / блоки
|
||||
- Фон: `#ffffff`
|
||||
- Граница: 1px solid `#d0d7de`
|
||||
- Скругление: 6px
|
||||
- Отступы: 16px (заголовок) + 16px (тело)
|
||||
- Заголовок имеет полосу `#f6f8fa` с нижней границей.
|
||||
|
||||
### Поля ввода
|
||||
- Фон: `#ffffff`
|
||||
- Граница: 1px solid `#d0d7de`
|
||||
- Скругление: 6px
|
||||
- Отступы: 5px 12px
|
||||
- Фокус: граница `#0969da`, кольцо `0 0 0 3px rgba(9,105,218,0.3)`
|
||||
|
||||
### Статусные таблетки (Issue / PR)
|
||||
- **Открыт**: фон `#1a7f37`, белый текст, отступы 4px 10px, скругление 9999px.
|
||||
- **Закрыт**: фон `#cf222e`, белый текст.
|
||||
- **Смёрджен**: фон `#8250df`, белый текст.
|
||||
- **Черновик**: фон `#6e7781`, белый текст.
|
||||
|
||||
### Метки (теги на Issue/PR)
|
||||
- Отступы: 0 7px
|
||||
- Скругление: 9999px
|
||||
- Шрифт: 12px / 500
|
||||
- Фон и текст задаются программно (цвет метки → цвет текста вычисляется для контрастности).
|
||||
|
||||
## 5. Отступы и компоновка
|
||||
|
||||
- **Базовая единица**: 4px. Шкала отступов: 4, 8, 12, 16, 24, 32, 40, 48.
|
||||
- **Максимальная ширина страницы**: 1280px (`Container-xl`).
|
||||
- **Боковая панель**: 296px на десктопе, сворачивается ниже 1012px.
|
||||
- **Отступы строки**: 16px по горизонтали, 12px по вертикали (списки намеренно плотные).
|
||||
|
||||
## 6. Движение
|
||||
|
||||
- **Длительность**: 80ms для наведения; 200ms для открытия меню/поповера.
|
||||
- **Easing**: `ease-out` для открытия, `ease-in` для закрытия.
|
||||
- **Избегать**: анимаций при загрузке страницы, параллакса, постоянных микровзаимодействий. Элементы появляются — но не выступают.
|
||||
|
||||
## 7. Ограничения использования
|
||||
|
||||
- Используйте плотные списки, обрамлённые блоки и системную типографику вместе; изолированные зелёные кнопки сами по себе не создают поверхность, похожую на GitHub.
|
||||
- Применяйте зелёный для конструктивных действий с репозиторием, синий — для ссылок и фокуса, красный/фиолетовый/серый — только для состояний issue, PR и рабочих процессов.
|
||||
- Отдавайте предпочтение сдержанному оформлению, чётким границам и компактным отступам вместо декоративных теней или крупных маркетинговых карточек.
|
||||
@@ -0,0 +1,161 @@
|
||||
# GitHub'dan İlham Alan Tasarım Sistemi
|
||||
|
||||
> Category: Geliştirici Araçları
|
||||
> Kod odaklı platform. Fonksiyonel yoğunluk, beyaz üzerine mavi hassasiyet, Primer temelleri.
|
||||
|
||||
## 1. Görsel Tema ve Atmosfer
|
||||
|
||||
GitHub'ın yüzeyi dekore edilmiş değil, mühendislik ürünüdür. Her piksel bir duruş ilan eder: bu, diff'ler, build'ler ve pull request'lerle ilgilenen insanlar için yapılmış bir araçtır. Sayfa arka planı sade bir `#ffffff` (açık) veya `#0d1117` (koyu) şeklindedir; içerik, negatif alan yerine ince çizgi kenarlıklarla ayrılmış yoğun dikdörtgen paneller üzerinde düzenlenir. Bilgi yoğunluğu markanın ta kendisidir — liste satırları, kod satırları, depo başlıkları ve bildirim kartlarının tamamı kaydırmadan yüzlerce öğeyi tarayabilmek için birbirine yakın sıkıştırılmıştır.
|
||||
|
||||
Karakteristik vurgular, bağlantılar ve birincil eylemler için **Primer mavisi** (`#0969da`) ile birleştirilmiş durumlar, başarı ve merge butonu için **GitHub yeşili** (`#1a7f37`)'dir. Her ikisi de tüketici ürünü mavileri ve yeşillerine kıyasla biraz daha mat görünür — yoğun gri metne karşı okunabilecek kadar doygun, ancak tek bir görünüm penceresinde birkaç tanesi göründüğünde arka plana karışacak kadar ölçülüdür.
|
||||
|
||||
Tipografi, metnin her işletim sisteminde net bir şekilde görüntülenmesi için ürünün tamamında **system-ui** yığınını kullanır; kod için ise **SFMono / Menlo / Consolas** ile eşleştirilir. Editoryal bir görüntüleme yazı tipi yoktur; GitHub'ın sesi, halihazırda kullandığınız sistemin sesidir.
|
||||
|
||||
**Temel Özellikler:**
|
||||
- Gerçek beyaz zemin (`#ffffff`) veya derin lacivert-siyah (`#0d1117`) — ısı yok, ton yok
|
||||
- İnce çizgi gri kenarlıklar (`#d0d7de`) her bölme ve paneli tanımlar
|
||||
- Bağlantılar/birincil için Primer mavisi (`#0969da`); başarı/merge için GitHub yeşili (`#1a7f37`)
|
||||
- Düz yazı için system-ui; kod için SFMono — özel yazı tipi yok
|
||||
- Minimal dolgu ile yoğun liste satırları; boşluk nadirdir
|
||||
- 16px / 24px Octicon ikonografisi — tek çizgi, geometrik, tutarlı
|
||||
- Güçlü renk semantiğiyle hap şekilli durum rozetleri
|
||||
|
||||
## 2. Renk Paleti ve Rolleri
|
||||
|
||||
### Birincil
|
||||
- **Canvas Default** (`#ffffff`): Birincil sayfa arka planı, açık tema.
|
||||
- **Canvas Subtle** (`#f6f8fa`): İkincil yüzey, kenar çubuğu, girdi arka planı, başlık şeridi.
|
||||
- **Canvas Inset** (`#eaeef2`): Kod bloğu arka planı, derin iç içe yüzey.
|
||||
- **Fg Default** (`#1f2328`): Birincil metin, başlıklar, mürekkep.
|
||||
- **Fg Muted** (`#656d76`): İkincil metin, açıklamalar, dosya yolları.
|
||||
|
||||
### Marka Vurgusu
|
||||
- **Primer Blue** (`#0969da`): Bağlantılar, birincil çağrı-eylem butonları, odak halkası tabanı — evrensel etkileşimli renk.
|
||||
- **Primer Blue Hover** (`#0550ae`): Birincil mavi için üzerine gelme/basılı durumu.
|
||||
- **Accent Subtle** (`#ddf4ff`): Açıklamalar ve bilgi bannerleri için yumuşak mavi yüzey.
|
||||
|
||||
### Semantik
|
||||
- **Success / Merge Green** (`#1a7f37`): Birleştirilmiş PR'lar, başarı rozetleri, merge butonu.
|
||||
- **Success Subtle** (`#dafbe1`): Başarı yüzey tonu.
|
||||
- **Open Green** (`#1a7f37`): "Açık" issue/PR durumu.
|
||||
- **Closed / Danger Red** (`#cf222e`): Kapatılmış PR'lar, yıkıcı eylem, doğrulama hatası.
|
||||
- **Danger Subtle** (`#ffebe9`): Hata banner yüzeyi.
|
||||
- **Attention / Warning Yellow** (`#9a6700`): Kehribar yüzeyde uyarı metni.
|
||||
- **Attention Subtle** (`#fff8c5`): Uyarı banner yüzeyi.
|
||||
- **Done Purple** (`#8250df`): Birleştirilmiş-ve-arşivlenmiş, "tamamlandı" durumu, premium rozet.
|
||||
- **Sponsor Pink** (`#bf3989`): Sponsors kalbi, GitHub sponsors markası.
|
||||
|
||||
### Kenarlık ve Ayırıcı
|
||||
- **Border Default** (`#d0d7de`): Standart ince çizgi kenarlık, panel dış çizgisi.
|
||||
- **Border Muted** (`#d8dee4`): Panel içindeki iç bölücüler.
|
||||
- **Border Subtle** (`#eaeef2`): Soluk tablo satır bölücüleri.
|
||||
|
||||
### Koyu Tema
|
||||
- **Dark Canvas** (`#0d1117`): Koyu sayfa arka planı.
|
||||
- **Dark Surface** (`#161b22`): Kenar çubuğu, başlık, ikincil yüzey.
|
||||
- **Dark Border** (`#30363d`): Standart koyu mod kenarlığı.
|
||||
- **Dark Fg** (`#e6edf3`): Koyu zemin üzerinde birincil metin.
|
||||
|
||||
## 3. Tipografi Kuralları
|
||||
|
||||
### Yazı Tipi Ailesi
|
||||
- **Gövde / Arayüz**: `-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif`
|
||||
- **Kod / Monospace**: `ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace`
|
||||
- **Emoji**: `"Apple Color Emoji", "Segoe UI Emoji"`
|
||||
|
||||
### Hiyerarşi
|
||||
|
||||
| Rol | Yazı Tipi | Boyut | Kalınlık | Satır Yüksekliği | Harf Aralığı | Notlar |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Display | system-ui | 32px (2rem) | 600 | 1.25 | -0.01em | Depo başlığı, pazarlama hero |
|
||||
| H1 | system-ui | 24px (1.5rem) | 600 | 1.25 | normal | Sayfa başlığı |
|
||||
| H2 | system-ui | 20px (1.25rem) | 600 | 1.25 | normal | Bölüm başlığı |
|
||||
| H3 | system-ui | 16px (1rem) | 600 | 1.25 | normal | Alt bölüm, panel başlığı |
|
||||
| Body | system-ui | 14px (0.875rem) | 400 | 1.5 | normal | Varsayılan metin boyutu — 16px değil |
|
||||
| Body Small | system-ui | 12px (0.75rem) | 400 | 1.4 | normal | Açıklamalar, dosya meta verileri |
|
||||
| Code | SFMono | 12px (0.75rem) | 400 | 1.45 | normal | Kod blokları, diff |
|
||||
| Code Inline | SFMono | 0.85em | 400 | inherit | normal | Satır içi `code` alanları |
|
||||
|
||||
### İlkeler
|
||||
- **14px gövde, 16px değil**: GitHub'ın düz yazı yoğunluğu onun kimliğidir. Ürün, bir görünüm penceresine daha fazla satır sığdırmak için 14px'te okunur.
|
||||
- **İkili kalınlık**: Varsayılan olarak her şey için 400; başlıklar ve vurgu için 600. 500 yok, 700 yok.
|
||||
- **Her zaman sistem yazı tipleri**: Chrome için asla bir web yazı tipi yüklemeyin — metin yavaş bağlantılarda da anında görüntülenmelidir.
|
||||
|
||||
## 4. Bileşen Stilleri
|
||||
|
||||
### Butonlar
|
||||
|
||||
**Birincil (Yeşil)**
|
||||
- Arka plan: `#1f883d`
|
||||
- Metin: `#ffffff`
|
||||
- Kenarlık: 1px solid `rgba(31, 35, 40, 0.15)`
|
||||
- Dolgu: 5px 16px
|
||||
- Yarıçap: 6px
|
||||
- Gölge: `0 1px 0 rgba(31,35,40,0.1)`
|
||||
- Üzerine gelme: arka plan `#1a7f37`
|
||||
- Kullanım: "Depo oluştur", "Pull request'i birleştir"
|
||||
|
||||
**Varsayılan**
|
||||
- Arka plan: `#f6f8fa`
|
||||
- Metin: `#1f2328`
|
||||
- Kenarlık: 1px solid `#d0d7de`
|
||||
- Dolgu: 5px 16px
|
||||
- Yarıçap: 6px
|
||||
- Üzerine gelme: arka plan `#f3f4f6`, kenarlık `#d0d7de`
|
||||
|
||||
**Dış Çizgi (Mavi Bağlantı Stili)**
|
||||
- Arka plan: `#ffffff`
|
||||
- Metin: `#0969da`
|
||||
- Kenarlık: 1px solid `#d0d7de`
|
||||
- Üzerine gelme: arka plan `#0969da`, metin `#ffffff`
|
||||
|
||||
**Tehlike**
|
||||
- Arka plan: `#ffffff`
|
||||
- Metin: `#cf222e`
|
||||
- Kenarlık: 1px solid `#d0d7de`
|
||||
- Üzerine gelme: arka plan `#a40e26`, metin `#ffffff`, kenarlık `#a40e26`
|
||||
|
||||
### Kartlar / Kutular
|
||||
- Arka plan: `#ffffff`
|
||||
- Kenarlık: 1px solid `#d0d7de`
|
||||
- Yarıçap: 6px
|
||||
- Dolgu: 16px (başlık) + 16px (gövde)
|
||||
- Başlıkta alt kenarlıklı `#f6f8fa` şerit bulunur.
|
||||
|
||||
### Girdiler
|
||||
- Arka plan: `#ffffff`
|
||||
- Kenarlık: 1px solid `#d0d7de`
|
||||
- Yarıçap: 6px
|
||||
- Dolgu: 5px 12px
|
||||
- Odak: kenarlık `#0969da`, halka `0 0 0 3px rgba(9,105,218,0.3)`
|
||||
|
||||
### Durum Hapları (Issue / PR)
|
||||
- **Açık**: arka plan `#1a7f37`, beyaz metin, dolgu 4px 10px, yarıçap 9999px.
|
||||
- **Kapalı**: arka plan `#cf222e`, beyaz metin.
|
||||
- **Birleştirildi**: arka plan `#8250df`, beyaz metin.
|
||||
- **Taslak**: arka plan `#6e7781`, beyaz metin.
|
||||
|
||||
### Etiketler (Issue/PR Üzerindeki Etiketler)
|
||||
- Dolgu: 0 7px
|
||||
- Yarıçap: 9999px
|
||||
- Yazı tipi: 12px / 500
|
||||
- Arka plan ve metin programatiktir (etiket rengi → kontrast için metin hesaplanır).
|
||||
|
||||
## 5. Boşluk ve Düzen
|
||||
|
||||
- **Temel birim**: 4px. Boşluk ölçeği: 4, 8, 12, 16, 24, 32, 40, 48.
|
||||
- **Sayfa maksimum genişliği**: 1280px (`Container-xl`).
|
||||
- **Kenar çubuğu**: Masaüstünde 296px, 1012px'in altında daralır.
|
||||
- **Satır dolgusu**: 16px yatay, 12px dikey (listeler tasarım gereği yoğundur).
|
||||
|
||||
## 6. Hareket
|
||||
|
||||
- **Süre**: Üzerine gelme için 80ms; menü/popover açma için 200ms.
|
||||
- **Yumuşatma**: Açılanlar için `ease-out`, kapananlar için `ease-in`.
|
||||
- **Kaçınılanlar**: Sayfa yükleme animasyonu, parallax, kalıcı mikro etkileşimler. Şeyler görünür; performans sergilemez.
|
||||
|
||||
## 7. Kullanım Kılavuzları
|
||||
|
||||
- Yoğun listeleri, kenarlıklı kutuları ve sistem tipografisini bir arada tutun; izole yeşil butonlar GitHub benzeri bir ürün yüzeyi oluşturmak için yeterli değildir.
|
||||
- Yapıcı depo eylemleri için yeşil, bağlantılar ve odak için mavi, yalnızca issue, PR ve iş akışı durumları için kırmızı/mor/gri kullanın.
|
||||
- Dekoratif gölgeler veya büyük pazarlama tarzı kartlar yerine sade krom, açık kenarlıklar ve kompakt aralama tercih edin.
|
||||
@@ -0,0 +1,161 @@
|
||||
# Система дизайну, натхненна GitHub
|
||||
|
||||
> Category: Інструменти для розробників
|
||||
> Платформа з акцентом на код. Функціональна щільність, точність синього на білому, основи Primer.
|
||||
|
||||
## 1. Візуальна тема та атмосфера
|
||||
|
||||
Поверхня GitHub спроєктована, а не прикрашена. Кожен піксель виражає позицію: це інструмент для людей, які дбають про дифи, збірки та пул-реквести. Фон сторінки — чистий `#ffffff` (світла тема) або `#0d1117` (темна), де вміст розташований на щільних прямокутних панелях, розділених тонкими рамками, а не відступами. Інформаційна щільність — це і є бренд: рядки списків, рядки коду, заголовки репозиторіїв і картки сповіщень стоять впритул, щоб досвідчений користувач міг переглянути сотню елементів без прокрутки.
|
||||
|
||||
Характерні акценти — **синій Primer** (`#0969da`) для посилань і основних дій та **зелений GitHub** (`#1a7f37`) для злитих станів, успіху та самої кнопки злиття. Обидва виглядають дещо приглушено порівняно з синіми та зеленими кольорами споживчих продуктів — достатньо насичені, щоб читатися на тлі щільного сірого тексту, і достатньо стримані, щоб зникати у фоні, коли кілька з них з'являються в одному вікні перегляду.
|
||||
|
||||
Типографіка використовує стек **system-ui** в усьому продукті, щоб текст чітко відображався в будь-якій ОС, у поєднанні з **SFMono / Menlo / Consolas** для коду. Тут немає редакторського шрифту для заголовків; голос GitHub — це голос системи, яку ви вже використовуєте.
|
||||
|
||||
**Ключові характеристики:**
|
||||
- Справді білий холст (`#ffffff`) або глибокий темно-синій-чорний (`#0d1117`) — без тепла, без відтінку
|
||||
- Тонкі сірі рамки (`#d0d7de`) визначають кожну панель і блок
|
||||
- Синій Primer (`#0969da`) для посилань/основних дій; зелений GitHub (`#1a7f37`) для успіху/злиття
|
||||
- system-ui для прозового тексту; SFMono для коду — жодного власного шрифту
|
||||
- Щільні рядки списків із мінімальними відступами; відстань між елементами — рідкість
|
||||
- Іконографія Octicon 16px / 24px — одинарний штрих, геометрична, послідовна
|
||||
- Значки статусу у вигляді таблеток із чіткою колірною семантикою
|
||||
|
||||
## 2. Кольорова палітра та ролі
|
||||
|
||||
### Основні
|
||||
- **Canvas Default** (`#ffffff`): Основний фон сторінки, світла тема.
|
||||
- **Canvas Subtle** (`#f6f8fa`): Вторинна поверхня, бічна панель, фон поля введення, смуга заголовка.
|
||||
- **Canvas Inset** (`#eaeef2`): Фон блоку коду, глибоко вкладена поверхня.
|
||||
- **Fg Default** (`#1f2328`): Основний текст, заголовки, чорнило.
|
||||
- **Fg Muted** (`#656d76`): Другорядний текст, підписи, шляхи до файлів.
|
||||
|
||||
### Акцент бренду
|
||||
- **Primer Blue** (`#0969da`): Посилання, основні CTA, базове кільце фокусу — універсальний інтерактивний колір.
|
||||
- **Primer Blue Hover** (`#0550ae`): Стан наведення/натискання для основного синього.
|
||||
- **Accent Subtle** (`#ddf4ff`): М'яка синя поверхня для виносок, інформаційних банерів.
|
||||
|
||||
### Семантичні
|
||||
- **Success / Merge Green** (`#1a7f37`): Злиті PR, значки успіху, кнопка злиття.
|
||||
- **Success Subtle** (`#dafbe1`): Відтінок поверхні успіху.
|
||||
- **Open Green** (`#1a7f37`): Стан «відкрито» для задачі/PR.
|
||||
- **Closed / Danger Red** (`#cf222e`): Закриті PR, деструктивна дія, помилка валідації.
|
||||
- **Danger Subtle** (`#ffebe9`): Поверхня банера помилки.
|
||||
- **Attention / Warning Yellow** (`#9a6700`): Текст попередження на бурштиновому фоні.
|
||||
- **Attention Subtle** (`#fff8c5`): Поверхня банера попередження.
|
||||
- **Done Purple** (`#8250df`): Злито й заархівовано, стан «виконано», преміум-значок.
|
||||
- **Sponsor Pink** (`#bf3989`): Серце спонсорів, бренд GitHub Sponsors.
|
||||
|
||||
### Рамки та розділювачі
|
||||
- **Border Default** (`#d0d7de`): Стандартна тонка рамка, контур панелі.
|
||||
- **Border Muted** (`#d8dee4`): Внутрішні розділювачі всередині панелі.
|
||||
- **Border Subtle** (`#eaeef2`): Ледь помітні розділювачі рядків таблиці.
|
||||
|
||||
### Темна тема
|
||||
- **Dark Canvas** (`#0d1117`): Фон сторінки в темній темі.
|
||||
- **Dark Surface** (`#161b22`): Бічна панель, заголовок, вторинна поверхня.
|
||||
- **Dark Border** (`#30363d`): Стандартна рамка в темному режимі.
|
||||
- **Dark Fg** (`#e6edf3`): Основний текст на темному фоні.
|
||||
|
||||
## 3. Правила типографіки
|
||||
|
||||
### Сімейство шрифтів
|
||||
- **Основний текст / UI**: `-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif`
|
||||
- **Код / Моноширинний**: `ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace`
|
||||
- **Emoji**: `"Apple Color Emoji", "Segoe UI Emoji"`
|
||||
|
||||
### Ієрархія
|
||||
|
||||
| Роль | Шрифт | Розмір | Насиченість | Міжрядковий інтервал | Міжлітерний інтервал | Примітки |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Display | system-ui | 32px (2rem) | 600 | 1.25 | -0.01em | Заголовок репозиторію, маркетинговий герой |
|
||||
| H1 | system-ui | 24px (1.5rem) | 600 | 1.25 | normal | Заголовок сторінки |
|
||||
| H2 | system-ui | 20px (1.25rem) | 600 | 1.25 | normal | Заголовок розділу |
|
||||
| H3 | system-ui | 16px (1rem) | 600 | 1.25 | normal | Підрозділ, заголовок панелі |
|
||||
| Body | system-ui | 14px (0.875rem) | 400 | 1.5 | normal | Розмір тексту за замовчуванням — не 16px |
|
||||
| Body Small | system-ui | 12px (0.75rem) | 400 | 1.4 | normal | Підписи, метадані файлів |
|
||||
| Code | SFMono | 12px (0.75rem) | 400 | 1.45 | normal | Блоки коду, дифи |
|
||||
| Code Inline | SFMono | 0.85em | 400 | inherit | normal | Вбудовані `code` фрагменти |
|
||||
|
||||
### Принципи
|
||||
- **14px для основного тексту, не 16px**: Щільність прозового тексту GitHub — це його ідентичність. Продукт відображається при 14px, щоб вмістити більше рядків у вікні перегляду.
|
||||
- **Бінарна насиченість**: 400 для всього за замовчуванням; 600 для заголовків і виділення. Ніяких 500 або 700.
|
||||
- **Системні шрифти завжди**: ніколи не завантажуйте веб-шрифт для інтерфейсу — текст повинен відображатися миттєво на повільних з'єднаннях.
|
||||
|
||||
## 4. Стилізація компонентів
|
||||
|
||||
### Кнопки
|
||||
|
||||
**Основна (зелена)**
|
||||
- Background: `#1f883d`
|
||||
- Text: `#ffffff`
|
||||
- Border: 1px solid `rgba(31, 35, 40, 0.15)`
|
||||
- Padding: 5px 16px
|
||||
- Radius: 6px
|
||||
- Shadow: `0 1px 0 rgba(31,35,40,0.1)`
|
||||
- Hover: background `#1a7f37`
|
||||
- Використання: «Створити репозиторій», «Злити пул-реквест»
|
||||
|
||||
**Стандартна**
|
||||
- Background: `#f6f8fa`
|
||||
- Text: `#1f2328`
|
||||
- Border: 1px solid `#d0d7de`
|
||||
- Padding: 5px 16px
|
||||
- Radius: 6px
|
||||
- Hover: background `#f3f4f6`, border `#d0d7de`
|
||||
|
||||
**Контурна (стиль синього посилання)**
|
||||
- Background: `#ffffff`
|
||||
- Text: `#0969da`
|
||||
- Border: 1px solid `#d0d7de`
|
||||
- Hover: background `#0969da`, text `#ffffff`
|
||||
|
||||
**Небезпечна**
|
||||
- Background: `#ffffff`
|
||||
- Text: `#cf222e`
|
||||
- Border: 1px solid `#d0d7de`
|
||||
- Hover: background `#a40e26`, text `#ffffff`, border `#a40e26`
|
||||
|
||||
### Картки / Блоки
|
||||
- Background: `#ffffff`
|
||||
- Border: 1px solid `#d0d7de`
|
||||
- Radius: 6px
|
||||
- Padding: 16px (заголовок) + 16px (тіло)
|
||||
- Заголовок має смугу `#f6f8fa` з нижньою рамкою.
|
||||
|
||||
### Поля введення
|
||||
- Background: `#ffffff`
|
||||
- Border: 1px solid `#d0d7de`
|
||||
- Radius: 6px
|
||||
- Padding: 5px 12px
|
||||
- Focus: border `#0969da`, ring `0 0 0 3px rgba(9,105,218,0.3)`
|
||||
|
||||
### Таблетки статусу (задача / PR)
|
||||
- **Відкрито**: background `#1a7f37`, текст білий, padding 4px 10px, radius 9999px.
|
||||
- **Закрито**: background `#cf222e`, текст білий.
|
||||
- **Злито**: background `#8250df`, текст білий.
|
||||
- **Чернетка**: background `#6e7781`, текст білий.
|
||||
|
||||
### Мітки (теги на задачах/PR)
|
||||
- Padding: 0 7px
|
||||
- Radius: 9999px
|
||||
- Font: 12px / 500
|
||||
- Фон і текст визначаються програмно (колір мітки → текст обчислюється для контрастності).
|
||||
|
||||
## 5. Відступи та макет
|
||||
|
||||
- **Базова одиниця**: 4px. Шкала відступів: 4, 8, 12, 16, 24, 32, 40, 48.
|
||||
- **Максимальна ширина сторінки**: 1280px (`Container-xl`).
|
||||
- **Бічна панель**: 296px на десктопі, згортається нижче 1012px.
|
||||
- **Відступ рядка**: 16px горизонтальний, 12px вертикальний (списки щільні за задумом).
|
||||
|
||||
## 6. Анімація
|
||||
|
||||
- **Тривалість**: 80ms для наведення; 200ms для відкриття меню/поповера.
|
||||
- **Прискорення**: `ease-out` для відкриття, `ease-in` для закриття.
|
||||
- **Уникається**: анімація при завантаженні сторінки, ефект паралаксу, постійні мікровзаємодії. Елементи з'являються; вони не виступають.
|
||||
|
||||
## 7. Обмеження використання
|
||||
|
||||
- Тримайте щільні списки, блоки з рамками та системну типографіку разом; одних зелених кнопок недостатньо, щоб створити поверхню, схожу на GitHub.
|
||||
- Використовуйте зелений для конструктивних дій у репозиторії, синій — для посилань і фокусу, а червоний/фіолетовий/сірий — лише для станів задач, PR і робочих процесів.
|
||||
- Надавайте перевагу тихому інтерфейсу, чітким рамкам і компактним відступам, а не декоративним тіням або великим картками у маркетинговому стилі.
|
||||
@@ -0,0 +1,161 @@
|
||||
# Hệ Thống Thiết Kế Lấy Cảm Hứng Từ GitHub
|
||||
|
||||
> Category: Công Cụ Dành Cho Nhà Phát Triển
|
||||
> Nền tảng ưu tiên mã nguồn. Mật độ chức năng cao, độ chính xác xanh-trên-trắng, nền tảng Primer.
|
||||
|
||||
## 1. Chủ Đề Hình Ảnh & Không Khí
|
||||
|
||||
Bề mặt của GitHub được thiết kế theo kiểu kỹ thuật, không phải trang trí. Mỗi pixel đều thể hiện một quan điểm rõ ràng: đây là công cụ dành cho những người quan tâm đến diff, build và pull request. Nền trang là `#ffffff` sạch sẽ (chế độ sáng) hoặc `#0d1117` (chế độ tối), với nội dung được sắp xếp trên các ô chữ nhật dày đặc được phân cách bằng các đường viền mỏng như tóc thay vì khoảng trắng. Mật độ thông tin là thương hiệu — các hàng danh sách, dòng mã, tiêu đề kho lưu trữ và thẻ thông báo đều được xếp gần nhau để người dùng chuyên nghiệp có thể quét hàng trăm mục mà không cần cuộn.
|
||||
|
||||
Điểm nhấn đặc trưng là **màu xanh Primer** (`#0969da`) cho các liên kết và hành động chính, và **màu xanh lá GitHub** (`#1a7f37`) cho trạng thái đã hợp nhất, thành công và nút hợp nhất. Cả hai màu đều có vẻ hơi tắt so với màu xanh dương và xanh lá của các sản phẩm dành cho người tiêu dùng — đủ bão hòa để đọc được trên nền chữ xám dày đặc, nhưng đủ kiềm chế để hòa vào nền khi nhiều màu xuất hiện trong cùng một khung nhìn.
|
||||
|
||||
Typography sử dụng bộ font **system-ui** xuyên suốt toàn bộ sản phẩm để văn bản hiển thị sắc nét trên mọi hệ điều hành, kết hợp với **SFMono / Menlo / Consolas** cho mã nguồn. Không có font hiển thị biên tập; giọng văn của GitHub chính là giọng của hệ thống mà bạn đang sử dụng.
|
||||
|
||||
**Đặc Điểm Chính:**
|
||||
- Nền trắng thuần (`#ffffff`) hoặc xanh đen đậm (`#0d1117`) — không ấm áp, không tông màu
|
||||
- Đường viền xám mỏng như tóc (`#d0d7de`) xác định mọi ô và bảng
|
||||
- Màu xanh Primer (`#0969da`) cho liên kết/chính; màu xanh lá GitHub (`#1a7f37`) cho thành công/hợp nhất
|
||||
- system-ui cho văn xuôi; SFMono cho mã — không có kiểu chữ tùy chỉnh
|
||||
- Các hàng danh sách dày đặc với padding tối thiểu; khoảng trắng hiếm gặp
|
||||
- Biểu tượng Octicon ở 16px / 24px — nét đơn, hình học, nhất quán
|
||||
- Huy hiệu trạng thái dạng pill với ngữ nghĩa màu sắc mạnh
|
||||
|
||||
## 2. Bảng Màu & Vai Trò
|
||||
|
||||
### Chính
|
||||
- **Canvas Default** (`#ffffff`): Nền trang chính, chủ đề sáng.
|
||||
- **Canvas Subtle** (`#f6f8fa`): Bề mặt phụ, thanh bên, nền ô nhập liệu, dải tiêu đề.
|
||||
- **Canvas Inset** (`#eaeef2`): Nền khối mã, bề mặt nhúng sâu.
|
||||
- **Fg Default** (`#1f2328`): Văn bản chính, tiêu đề, mực in.
|
||||
- **Fg Muted** (`#656d76`): Văn bản phụ, chú thích, đường dẫn file.
|
||||
|
||||
### Điểm Nhấn Thương Hiệu
|
||||
- **Primer Blue** (`#0969da`): Liên kết, CTA chính, vòng tiêu điểm — màu tương tác toàn cục.
|
||||
- **Primer Blue Hover** (`#0550ae`): Trạng thái hover/nhấn cho màu xanh chính.
|
||||
- **Accent Subtle** (`#ddf4ff`): Bề mặt xanh nhạt cho các hộp chú ý, banner thông tin.
|
||||
|
||||
### Ngữ Nghĩa
|
||||
- **Success / Merge Green** (`#1a7f37`): PR đã hợp nhất, huy hiệu thành công, nút hợp nhất.
|
||||
- **Success Subtle** (`#dafbe1`): Tông màu bề mặt thành công.
|
||||
- **Open Green** (`#1a7f37`): Trạng thái issue/PR đang "mở".
|
||||
- **Closed / Danger Red** (`#cf222e`): PR đã đóng, hành động phá hủy, lỗi xác thực.
|
||||
- **Danger Subtle** (`#ffebe9`): Bề mặt banner lỗi.
|
||||
- **Attention / Warning Yellow** (`#9a6700`): Văn bản cảnh báo trên nền hổ phách.
|
||||
- **Attention Subtle** (`#fff8c5`): Bề mặt banner cảnh báo.
|
||||
- **Done Purple** (`#8250df`): Đã hợp nhất và lưu trữ, trạng thái "hoàn thành", huy hiệu cao cấp.
|
||||
- **Sponsor Pink** (`#bf3989`): Biểu tượng trái tim Sponsors, thương hiệu GitHub sponsors.
|
||||
|
||||
### Đường Viền & Phân Cách
|
||||
- **Border Default** (`#d0d7de`): Đường viền mỏng tiêu chuẩn, viền ô.
|
||||
- **Border Muted** (`#d8dee4`): Đường phân cách bên trong một ô.
|
||||
- **Border Subtle** (`#eaeef2`): Đường phân cách hàng bảng mờ nhạt.
|
||||
|
||||
### Chủ Đề Tối
|
||||
- **Dark Canvas** (`#0d1117`): Nền trang tối.
|
||||
- **Dark Surface** (`#161b22`): Thanh bên, tiêu đề, bề mặt phụ.
|
||||
- **Dark Border** (`#30363d`): Đường viền tiêu chuẩn chế độ tối.
|
||||
- **Dark Fg** (`#e6edf3`): Văn bản chính trên nền tối.
|
||||
|
||||
## 3. Quy Tắc Typography
|
||||
|
||||
### Font Chữ
|
||||
- **Nội dung / Giao diện**: `-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif`
|
||||
- **Mã nguồn / Mono**: `ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace`
|
||||
- **Emoji**: `"Apple Color Emoji", "Segoe UI Emoji"`
|
||||
|
||||
### Phân Cấp
|
||||
|
||||
| Vai trò | Font | Kích thước | Độ đậm | Chiều cao dòng | Khoảng cách chữ | Ghi chú |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Display | system-ui | 32px (2rem) | 600 | 1.25 | -0.01em | Tiêu đề kho lưu trữ, hero marketing |
|
||||
| H1 | system-ui | 24px (1.5rem) | 600 | 1.25 | normal | Tiêu đề trang |
|
||||
| H2 | system-ui | 20px (1.25rem) | 600 | 1.25 | normal | Tiêu đề mục |
|
||||
| H3 | system-ui | 16px (1rem) | 600 | 1.25 | normal | Tiểu mục, tiêu đề bảng |
|
||||
| Body | system-ui | 14px (0.875rem) | 400 | 1.5 | normal | Cỡ chữ mặc định — không phải 16px |
|
||||
| Body Small | system-ui | 12px (0.75rem) | 400 | 1.4 | normal | Chú thích, metadata file |
|
||||
| Code | SFMono | 12px (0.75rem) | 400 | 1.45 | normal | Khối mã, diff |
|
||||
| Code Inline | SFMono | 0.85em | 400 | inherit | normal | Đoạn `code` inline |
|
||||
|
||||
### Nguyên Tắc
|
||||
- **Body 14px, không phải 16px**: Mật độ văn xuôi của GitHub là bản sắc của nó. Sản phẩm hiển thị ở 14px để vừa nhiều hàng hơn trong một khung nhìn.
|
||||
- **Độ đậm nhị phân**: 400 cho mọi thứ theo mặc định; 600 cho tiêu đề và nhấn mạnh. Không dùng 500, không dùng 700.
|
||||
- **Luôn dùng font hệ thống**: không bao giờ tải webfont cho giao diện — văn bản phải hiển thị ngay lập tức trên kết nối chậm.
|
||||
|
||||
## 4. Kiểu Dáng Thành Phần
|
||||
|
||||
### Nút
|
||||
|
||||
**Chính (Xanh Lá)**
|
||||
- Nền: `#1f883d`
|
||||
- Chữ: `#ffffff`
|
||||
- Viền: 1px solid `rgba(31, 35, 40, 0.15)`
|
||||
- Padding: 5px 16px
|
||||
- Radius: 6px
|
||||
- Bóng đổ: `0 1px 0 rgba(31,35,40,0.1)`
|
||||
- Hover: nền `#1a7f37`
|
||||
- Dùng cho: "Tạo kho lưu trữ", "Hợp nhất pull request"
|
||||
|
||||
**Mặc Định**
|
||||
- Nền: `#f6f8fa`
|
||||
- Chữ: `#1f2328`
|
||||
- Viền: 1px solid `#d0d7de`
|
||||
- Padding: 5px 16px
|
||||
- Radius: 6px
|
||||
- Hover: nền `#f3f4f6`, viền `#d0d7de`
|
||||
|
||||
**Viền Ngoài (Kiểu Liên Kết Xanh)**
|
||||
- Nền: `#ffffff`
|
||||
- Chữ: `#0969da`
|
||||
- Viền: 1px solid `#d0d7de`
|
||||
- Hover: nền `#0969da`, chữ `#ffffff`
|
||||
|
||||
**Nguy Hiểm**
|
||||
- Nền: `#ffffff`
|
||||
- Chữ: `#cf222e`
|
||||
- Viền: 1px solid `#d0d7de`
|
||||
- Hover: nền `#a40e26`, chữ `#ffffff`, viền `#a40e26`
|
||||
|
||||
### Thẻ / Hộp
|
||||
- Nền: `#ffffff`
|
||||
- Viền: 1px solid `#d0d7de`
|
||||
- Radius: 6px
|
||||
- Padding: 16px (tiêu đề) + 16px (nội dung)
|
||||
- Tiêu đề có dải `#f6f8fa` với đường viền dưới.
|
||||
|
||||
### Ô Nhập Liệu
|
||||
- Nền: `#ffffff`
|
||||
- Viền: 1px solid `#d0d7de`
|
||||
- Radius: 6px
|
||||
- Padding: 5px 12px
|
||||
- Tiêu điểm: viền `#0969da`, vòng `0 0 0 3px rgba(9,105,218,0.3)`
|
||||
|
||||
### Pill Trạng Thái (Issue / PR)
|
||||
- **Mở**: nền `#1a7f37`, chữ trắng, padding 4px 10px, radius 9999px.
|
||||
- **Đóng**: nền `#cf222e`, chữ trắng.
|
||||
- **Đã hợp nhất**: nền `#8250df`, chữ trắng.
|
||||
- **Bản nháp**: nền `#6e7781`, chữ trắng.
|
||||
|
||||
### Nhãn (Tags trên Issues/PRs)
|
||||
- Padding: 0 7px
|
||||
- Radius: 9999px
|
||||
- Font: 12px / 500
|
||||
- Nền và chữ được tính theo chương trình (màu nhãn → chữ được tính để đảm bảo độ tương phản).
|
||||
|
||||
## 5. Khoảng Cách & Bố Cục
|
||||
|
||||
- **Đơn vị cơ bản**: 4px. Thang khoảng cách: 4, 8, 12, 16, 24, 32, 40, 48.
|
||||
- **Chiều rộng trang tối đa**: 1280px (`Container-xl`).
|
||||
- **Thanh bên**: 296px trên desktop, thu gọn dưới 1012px.
|
||||
- **Padding hàng**: 16px theo chiều ngang, 12px theo chiều dọc (danh sách dày đặc theo thiết kế).
|
||||
|
||||
## 6. Chuyển Động
|
||||
|
||||
- **Thời lượng**: 80ms cho hover; 200ms cho menu/popover mở.
|
||||
- **Easing**: `ease-out` cho mở, `ease-in` cho đóng.
|
||||
- **Tránh**: hoạt ảnh tải trang, parallax, micro-interaction liên tục. Mọi thứ xuất hiện; chúng không biểu diễn.
|
||||
|
||||
## 7. Guardrail Sử Dụng
|
||||
|
||||
- Giữ danh sách dày đặc, hộp có viền và typography hệ thống cùng nhau; các nút xanh lá đơn lẻ không đủ để tạo ra bề mặt sản phẩm giống GitHub.
|
||||
- Dùng màu xanh lá cho các hành động xây dựng kho lưu trữ, màu xanh dương cho liên kết và tiêu điểm, và chỉ dùng đỏ/tím/xám cho trạng thái issue, PR và workflow.
|
||||
- Ưu tiên giao diện yên tĩnh, viền rõ ràng và khoảng cách gọn gàng hơn bóng đổ trang trí hay thẻ kiểu marketing lớn.
|
||||
@@ -0,0 +1,161 @@
|
||||
# 受 GitHub 啟發的設計系統
|
||||
|
||||
> Category: 開發者工具
|
||||
> 以程式碼為核心的平台。功能密度高，藍白配色精準，基於 Primer 規範。
|
||||
|
||||
## 1. 視覺主題與氛圍
|
||||
|
||||
GitHub 的介面是工程化的，而非裝飾性的。每一個像素都在傳達一種立場：這是一款為在乎 diff、建置和 pull request 的人而生的工具。頁面背景是乾淨的 `#ffffff`（淺色模式）或 `#0d1117`（深色模式），內容排布在密集的矩形面板上，面板之間以細線邊框分隔，而非留白。資訊密度即品牌——列表列、程式碼行、儲存庫標題和通知卡片緊密排列，讓有經驗的使用者無需捲動即可瀏覽上百筆內容。
|
||||
|
||||
標誌性的強調色是用於連結和主要操作的 **Primer 藍** (`#0969da`)，以及用於合併狀態、成功提示和合併按鈕的 **GitHub 綠** (`#1a7f37`)。與消費品的藍綠色相比，兩者都略顯低調——飽和度足以在密集的灰色文字中清晰可辨，又克制到足以在同一視口中出現多次時不顯突兀。
|
||||
|
||||
排版使用覆蓋整個產品的 **system-ui** 字體堆疊，確保文字在所有作業系統上清晰渲染，搭配 **SFMono / Menlo / Consolas** 用於程式碼。沒有編輯類展示字體；GitHub 的聲音就是你正在使用的系統本身的聲音。
|
||||
|
||||
**關鍵特徵：**
|
||||
- 純白畫布（`#ffffff`）或深海軍藍黑（`#0d1117`）——無暖調，無色調傾向
|
||||
- 細線灰色邊框（`#d0d7de`）定義每個面板
|
||||
- Primer 藍（`#0969da`）用於連結/主要操作；GitHub 綠（`#1a7f37`）用於成功/合併
|
||||
- system-ui 用於正文；SFMono 用於程式碼——無自訂字體
|
||||
- 內邊距極小的密集列表列；留白稀少
|
||||
- 16px / 24px 的 Octicon 圖示——單描邊、幾何形態、風格統一
|
||||
- 具有強色彩語義的膠囊狀狀態徽章
|
||||
|
||||
## 2. 色彩調色板與角色
|
||||
|
||||
### 主色
|
||||
- **Canvas Default**（`#ffffff`）：淺色主題主頁面背景。
|
||||
- **Canvas Subtle**（`#f6f8fa`）：次級表面、側邊欄、輸入框背景、頂欄區域。
|
||||
- **Canvas Inset**（`#eaeef2`）：程式碼區塊背景、深內嵌表面。
|
||||
- **Fg Default**（`#1f2328`）：主文字、標題、正文。
|
||||
- **Fg Muted**（`#656d76`）：次級文字、說明文字、檔案路徑。
|
||||
|
||||
### 品牌強調色
|
||||
- **Primer Blue**（`#0969da`）：連結、主要 CTA、焦點圓環基色——通用互動色。
|
||||
- **Primer Blue Hover**（`#0550ae`）：主藍色的懸停/按下狀態。
|
||||
- **Accent Subtle**（`#ddf4ff`）：用於標注、資訊橫幅的柔和藍色表面。
|
||||
|
||||
### 語義色
|
||||
- **Success / Merge Green**（`#1a7f37`）：已合併 PR、成功徽章、合併按鈕。
|
||||
- **Success Subtle**（`#dafbe1`）：成功狀態的表面色調。
|
||||
- **Open Green**（`#1a7f37`）：Issue/PR 的「Open」狀態。
|
||||
- **Closed / Danger Red**（`#cf222e`）：已關閉 PR、破壞性操作、驗證錯誤。
|
||||
- **Danger Subtle**（`#ffebe9`）：錯誤橫幅表面。
|
||||
- **Attention / Warning Yellow**（`#9a6700`）：琥珀色表面上的警告文字。
|
||||
- **Attention Subtle**（`#fff8c5`）：警告橫幅表面。
|
||||
- **Done Purple**（`#8250df`）：已合併並封存、「done」狀態、進階徽章。
|
||||
- **Sponsor Pink**（`#bf3989`）：贊助愛心圖示、GitHub Sponsors 品牌色。
|
||||
|
||||
### 邊框與分隔線
|
||||
- **Border Default**（`#d0d7de`）：標準細線邊框、面板輪廓。
|
||||
- **Border Muted**（`#d8dee4`）：面板內部分隔線。
|
||||
- **Border Subtle**（`#eaeef2`）：隱約的表格列分隔線。
|
||||
|
||||
### 深色主題
|
||||
- **Dark Canvas**（`#0d1117`）：深色頁面背景。
|
||||
- **Dark Surface**（`#161b22`）：側邊欄、頂欄、次級表面。
|
||||
- **Dark Border**（`#30363d`）：標準深色模式邊框。
|
||||
- **Dark Fg**（`#e6edf3`）：深色背景上的主文字。
|
||||
|
||||
## 3. 排版規則
|
||||
|
||||
### 字體系列
|
||||
- **正文 / UI**：`-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif`
|
||||
- **程式碼 / 等寬**：`ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace`
|
||||
- **Emoji**：`"Apple Color Emoji", "Segoe UI Emoji"`
|
||||
|
||||
### 層級
|
||||
|
||||
| 角色 | 字體 | 字號 | 字重 | 行高 | 字距 | 備註 |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Display | system-ui | 32px (2rem) | 600 | 1.25 | -0.01em | 儲存庫標題、行銷首屏 |
|
||||
| H1 | system-ui | 24px (1.5rem) | 600 | 1.25 | normal | 頁面標題 |
|
||||
| H2 | system-ui | 20px (1.25rem) | 600 | 1.25 | normal | 區域標題 |
|
||||
| H3 | system-ui | 16px (1rem) | 600 | 1.25 | normal | 子區域、面板標題 |
|
||||
| Body | system-ui | 14px (0.875rem) | 400 | 1.5 | normal | 預設文字尺寸——非 16px |
|
||||
| Body Small | system-ui | 12px (0.75rem) | 400 | 1.4 | normal | 說明文字、檔案中繼資料 |
|
||||
| Code | SFMono | 12px (0.75rem) | 400 | 1.45 | normal | 程式碼區塊、diff |
|
||||
| Code Inline | SFMono | 0.85em | 400 | inherit | normal | 行內 `code` 段 |
|
||||
|
||||
### 原則
|
||||
- **正文 14px，非 16px**：GitHub 的文字密度是其標識。產品以 14px 閱讀，以便在視口中容納更多列。
|
||||
- **字重二元化**：預設全部 400；標題和強調用 600。無 500，無 700。
|
||||
- **始終使用系統字體**：絕不為介面載入網路字體——文字必須在慢速網路下即時渲染。
|
||||
|
||||
## 4. 元件樣式
|
||||
|
||||
### 按鈕
|
||||
|
||||
**主要按鈕（綠色）**
|
||||
- Background: `#1f883d`
|
||||
- Text: `#ffffff`
|
||||
- Border: 1px solid `rgba(31, 35, 40, 0.15)`
|
||||
- Padding: 5px 16px
|
||||
- Radius: 6px
|
||||
- Shadow: `0 1px 0 rgba(31,35,40,0.1)`
|
||||
- Hover: background `#1a7f37`
|
||||
- 用途：「Create repository」、「Merge pull request」
|
||||
|
||||
**預設按鈕**
|
||||
- Background: `#f6f8fa`
|
||||
- Text: `#1f2328`
|
||||
- Border: 1px solid `#d0d7de`
|
||||
- Padding: 5px 16px
|
||||
- Radius: 6px
|
||||
- Hover: background `#f3f4f6`，border `#d0d7de`
|
||||
|
||||
**輪廓按鈕（藍色連結風格）**
|
||||
- Background: `#ffffff`
|
||||
- Text: `#0969da`
|
||||
- Border: 1px solid `#d0d7de`
|
||||
- Hover: background `#0969da`，text `#ffffff`
|
||||
|
||||
**危險按鈕**
|
||||
- Background: `#ffffff`
|
||||
- Text: `#cf222e`
|
||||
- Border: 1px solid `#d0d7de`
|
||||
- Hover: background `#a40e26`，text `#ffffff`，border `#a40e26`
|
||||
|
||||
### 卡片 / 方塊
|
||||
- Background: `#ffffff`
|
||||
- Border: 1px solid `#d0d7de`
|
||||
- Radius: 6px
|
||||
- Padding: 16px（標題）+ 16px（正文）
|
||||
- 標題區有 `#f6f8fa` 底色帶下邊框。
|
||||
|
||||
### 輸入框
|
||||
- Background: `#ffffff`
|
||||
- Border: 1px solid `#d0d7de`
|
||||
- Radius: 6px
|
||||
- Padding: 5px 12px
|
||||
- Focus: border `#0969da`，ring `0 0 0 3px rgba(9,105,218,0.3)`
|
||||
|
||||
### 狀態徽章（Issue / PR）
|
||||
- **Open**：background `#1a7f37`，文字白色，padding 4px 10px，radius 9999px。
|
||||
- **Closed**：background `#cf222e`，文字白色。
|
||||
- **Merged**：background `#8250df`，文字白色。
|
||||
- **Draft**：background `#6e7781`，文字白色。
|
||||
|
||||
### 標籤（Issue/PR 上的標籤）
|
||||
- Padding: 0 7px
|
||||
- Radius: 9999px
|
||||
- Font: 12px / 500
|
||||
- 背景色和文字顏色由程式計算（標籤顏色→文字顏色按對比度計算）。
|
||||
|
||||
## 5. 間距與佈局
|
||||
|
||||
- **基礎單位**：4px。間距比例：4, 8, 12, 16, 24, 32, 40, 48。
|
||||
- **頁面最大寬度**：1280px（`Container-xl`）。
|
||||
- **側邊欄**：桌面端 296px，低於 1012px 時折疊。
|
||||
- **列內邊距**：水平 16px，垂直 12px（列表天生密集）。
|
||||
|
||||
## 6. 動效
|
||||
|
||||
- **時長**：懸停 80ms；選單/彈出層展開 200ms。
|
||||
- **緩動**：展開用 `ease-out`，關閉用 `ease-in`。
|
||||
- **刻意迴避**：頁面載入動畫、視差效果、持續的微互動。元素直接出現，不表演。
|
||||
|
||||
## 7. 使用護欄
|
||||
|
||||
- 密集列表、帶邊框的方塊和系統字體需搭配使用；單獨使用綠色按鈕不足以營造 GitHub 風格的產品介面。
|
||||
- 綠色用於建設性儲存庫操作，藍色用於連結和焦點，紅色/紫色/灰色僅用於 Issue、PR 和工作流狀態。
|
||||
- 優先選擇低調的介面裝飾、明確的邊框和緊湊的間距，而非裝飾性陰影或大型行銷風格卡片。
|
||||
@@ -0,0 +1,161 @@
|
||||
# 受 GitHub 启发的设计系统
|
||||
|
||||
> Category: 开发者工具
|
||||
> 以代码为核心的平台。功能密度高，蓝白配色精准，基于 Primer 规范。
|
||||
|
||||
## 1. 视觉主题与氛围
|
||||
|
||||
GitHub 的界面是工程化的，而非装饰性的。每一个像素都在传达一种立场：这是一款为在乎 diff、构建和 pull request 的人而生的工具。页面背景是干净的 `#ffffff`（浅色模式）或 `#0d1117`（深色模式），内容排布在密集的矩形面板上，面板之间用细线边框分隔，而非留白。信息密度即品牌——列表行、代码行、仓库标题和通知卡片紧密排列，让有经验的用户无需滚动即可浏览上百条内容。
|
||||
|
||||
标志性的强调色是用于链接和主要操作的 **Primer 蓝** (`#0969da`)，以及用于合并状态、成功提示和合并按钮的 **GitHub 绿** (`#1a7f37`)。与消费品的蓝绿色相比，两者都略显低调——饱和度足以在密集的灰色文字中清晰可辨，又克制到足以在同一视口中出现多次时不显突兀。
|
||||
|
||||
排版使用覆盖整个产品的 **system-ui** 字体栈，确保文字在所有操作系统上清晰渲染，搭配 **SFMono / Menlo / Consolas** 用于代码。没有编辑类展示字体；GitHub 的声音就是你正在使用的系统本身的声音。
|
||||
|
||||
**关键特征：**
|
||||
- 纯白画布（`#ffffff`）或深海军蓝黑（`#0d1117`）——无暖调，无色调倾向
|
||||
- 细线灰色边框（`#d0d7de`）定义每个面板
|
||||
- Primer 蓝（`#0969da`）用于链接/主要操作；GitHub 绿（`#1a7f37`）用于成功/合并
|
||||
- system-ui 用于正文；SFMono 用于代码——无自定义字体
|
||||
- 内边距极小的密集列表行；留白稀少
|
||||
- 16px / 24px 的 Octicon 图标——单描边、几何形态、风格统一
|
||||
- 具有强色彩语义的胶囊状状态徽章
|
||||
|
||||
## 2. 色彩调色板与角色
|
||||
|
||||
### 主色
|
||||
- **Canvas Default**（`#ffffff`）：浅色主题主页面背景。
|
||||
- **Canvas Subtle**（`#f6f8fa`）：次级表面、侧边栏、输入框背景、顶栏区域。
|
||||
- **Canvas Inset**（`#eaeef2`）：代码块背景、深内嵌表面。
|
||||
- **Fg Default**（`#1f2328`）：主文本、标题、正文。
|
||||
- **Fg Muted**（`#656d76`）：次级文本、说明文字、文件路径。
|
||||
|
||||
### 品牌强调色
|
||||
- **Primer Blue**（`#0969da`）：链接、主要 CTA、焦点圆环基色——通用交互色。
|
||||
- **Primer Blue Hover**（`#0550ae`）：主蓝色的悬停/按下状态。
|
||||
- **Accent Subtle**（`#ddf4ff`）：用于标注、信息横幅的柔和蓝色表面。
|
||||
|
||||
### 语义色
|
||||
- **Success / Merge Green**（`#1a7f37`）：已合并 PR、成功徽章、合并按钮。
|
||||
- **Success Subtle**（`#dafbe1`）：成功状态的表面色调。
|
||||
- **Open Green**（`#1a7f37`）：Issue/PR 的"Open"状态。
|
||||
- **Closed / Danger Red**（`#cf222e`）：已关闭 PR、破坏性操作、验证错误。
|
||||
- **Danger Subtle**（`#ffebe9`）：错误横幅表面。
|
||||
- **Attention / Warning Yellow**（`#9a6700`）：琥珀色表面上的警告文字。
|
||||
- **Attention Subtle**（`#fff8c5`）：警告横幅表面。
|
||||
- **Done Purple**（`#8250df`）：已合并并归档、"done"状态、高级徽章。
|
||||
- **Sponsor Pink**（`#bf3989`）：赞助心形图标、GitHub Sponsors 品牌色。
|
||||
|
||||
### 边框与分割线
|
||||
- **Border Default**（`#d0d7de`）：标准细线边框、面板轮廓。
|
||||
- **Border Muted**（`#d8dee4`）：面板内部分割线。
|
||||
- **Border Subtle**（`#eaeef2`）：隐约的表格行分割线。
|
||||
|
||||
### 深色主题
|
||||
- **Dark Canvas**（`#0d1117`）：深色页面背景。
|
||||
- **Dark Surface**（`#161b22`）：侧边栏、顶栏、次级表面。
|
||||
- **Dark Border**（`#30363d`）：标准深色模式边框。
|
||||
- **Dark Fg**（`#e6edf3`）：深色背景上的主文本。
|
||||
|
||||
## 3. 排版规则
|
||||
|
||||
### 字体系列
|
||||
- **正文 / UI**：`-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif`
|
||||
- **代码 / 等宽**：`ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace`
|
||||
- **Emoji**：`"Apple Color Emoji", "Segoe UI Emoji"`
|
||||
|
||||
### 层级
|
||||
|
||||
| 角色 | 字体 | 字号 | 字重 | 行高 | 字距 | 备注 |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Display | system-ui | 32px (2rem) | 600 | 1.25 | -0.01em | 仓库标题、营销首屏 |
|
||||
| H1 | system-ui | 24px (1.5rem) | 600 | 1.25 | normal | 页面标题 |
|
||||
| H2 | system-ui | 20px (1.25rem) | 600 | 1.25 | normal | 区域标题 |
|
||||
| H3 | system-ui | 16px (1rem) | 600 | 1.25 | normal | 子区域、面板标题 |
|
||||
| Body | system-ui | 14px (0.875rem) | 400 | 1.5 | normal | 默认文本尺寸——非 16px |
|
||||
| Body Small | system-ui | 12px (0.75rem) | 400 | 1.4 | normal | 说明文字、文件元数据 |
|
||||
| Code | SFMono | 12px (0.75rem) | 400 | 1.45 | normal | 代码块、diff |
|
||||
| Code Inline | SFMono | 0.85em | 400 | inherit | normal | 行内 `code` 段 |
|
||||
|
||||
### 原则
|
||||
- **正文 14px，非 16px**：GitHub 的文字密度是其标识。产品以 14px 阅读，以便在视口中容纳更多行。
|
||||
- **字重二元化**：默认全部 400；标题和强调用 600。无 500，无 700。
|
||||
- **始终使用系统字体**：绝不为界面加载网络字体——文字必须在慢网络下即时渲染。
|
||||
|
||||
## 4. 组件样式
|
||||
|
||||
### 按钮
|
||||
|
||||
**主要按钮（绿色）**
|
||||
- Background: `#1f883d`
|
||||
- Text: `#ffffff`
|
||||
- Border: 1px solid `rgba(31, 35, 40, 0.15)`
|
||||
- Padding: 5px 16px
|
||||
- Radius: 6px
|
||||
- Shadow: `0 1px 0 rgba(31,35,40,0.1)`
|
||||
- Hover: background `#1a7f37`
|
||||
- 用途："Create repository"、"Merge pull request"
|
||||
|
||||
**默认按钮**
|
||||
- Background: `#f6f8fa`
|
||||
- Text: `#1f2328`
|
||||
- Border: 1px solid `#d0d7de`
|
||||
- Padding: 5px 16px
|
||||
- Radius: 6px
|
||||
- Hover: background `#f3f4f6`，border `#d0d7de`
|
||||
|
||||
**轮廓按钮（蓝色链接风格）**
|
||||
- Background: `#ffffff`
|
||||
- Text: `#0969da`
|
||||
- Border: 1px solid `#d0d7de`
|
||||
- Hover: background `#0969da`，text `#ffffff`
|
||||
|
||||
**危险按钮**
|
||||
- Background: `#ffffff`
|
||||
- Text: `#cf222e`
|
||||
- Border: 1px solid `#d0d7de`
|
||||
- Hover: background `#a40e26`，text `#ffffff`，border `#a40e26`
|
||||
|
||||
### 卡片 / 盒子
|
||||
- Background: `#ffffff`
|
||||
- Border: 1px solid `#d0d7de`
|
||||
- Radius: 6px
|
||||
- Padding: 16px（标题）+ 16px（正文）
|
||||
- 标题区有 `#f6f8fa` 底色带下边框。
|
||||
|
||||
### 输入框
|
||||
- Background: `#ffffff`
|
||||
- Border: 1px solid `#d0d7de`
|
||||
- Radius: 6px
|
||||
- Padding: 5px 12px
|
||||
- Focus: border `#0969da`，ring `0 0 0 3px rgba(9,105,218,0.3)`
|
||||
|
||||
### 状态徽章（Issue / PR）
|
||||
- **Open**：background `#1a7f37`，文字白色，padding 4px 10px，radius 9999px。
|
||||
- **Closed**：background `#cf222e`，文字白色。
|
||||
- **Merged**：background `#8250df`，文字白色。
|
||||
- **Draft**：background `#6e7781`，文字白色。
|
||||
|
||||
### 标签（Issue/PR 上的标签）
|
||||
- Padding: 0 7px
|
||||
- Radius: 9999px
|
||||
- Font: 12px / 500
|
||||
- 背景色和文字颜色由程序计算（标签颜色→文字颜色按对比度计算）。
|
||||
|
||||
## 5. 间距与布局
|
||||
|
||||
- **基础单位**：4px。间距比例：4, 8, 12, 16, 24, 32, 40, 48。
|
||||
- **页面最大宽度**：1280px（`Container-xl`）。
|
||||
- **侧边栏**：桌面端 296px，低于 1012px 时折叠。
|
||||
- **行内边距**：水平 16px，垂直 12px（列表天生密集）。
|
||||
|
||||
## 6. 动效
|
||||
|
||||
- **时长**：悬停 80ms；菜单/弹出层展开 200ms。
|
||||
- **缓动**：展开用 `ease-out`，关闭用 `ease-in`。
|
||||
- **刻意回避**：页面加载动画、视差效果、持续的微交互。元素直接出现，不表演。
|
||||
|
||||
## 7. 使用护栏
|
||||
|
||||
- 密集列表、带边框的盒子和系统字体需搭配使用；单独使用绿色按钮不足以营造 GitHub 风格的产品界面。
|
||||
- 绿色用于建设性仓库操作，蓝色用于链接和焦点，红色/紫色/灰色仅用于 Issue、PR 和工作流状态。
|
||||
- 优先选择低调的界面装饰、明确的边框和紧凑的间距，而非装饰性阴影或大型营销风格卡片。
|
||||
@@ -0,0 +1,161 @@
|
||||
# Design System Inspired by GitHub
|
||||
|
||||
> Category: Developer Tools
|
||||
> Code-forward platform. Functional density, blue-on-white precision, Primer foundations.
|
||||
|
||||
## 1. Visual Theme & Atmosphere
|
||||
|
||||
GitHub's surface is engineered, not decorated. Every pixel announces a stance: this is a tool for people who care about diffs, builds, and pull requests. The page background is a clean `#ffffff` (light) or `#0d1117` (dark), with content arranged on dense rectangular panes separated by hairline borders rather than negative space. Information density is the brand — list rows, code lines, repository headers, and notification cards are all packed close together so a power user can scan a hundred items without scrolling.
|
||||
|
||||
The signature accents are the **Primer blue** (`#0969da`) for links and primary actions, and **GitHub green** (`#1a7f37`) for merged states, success, and the merge button itself. Both feel slightly muted compared to consumer-product blues and greens — saturated enough to read against the dense gray text, restrained enough to disappear into the background when several appear in one viewport.
|
||||
|
||||
Typography uses the **system-ui** stack across the entire product so text renders crisply on every OS, paired with **SFMono / Menlo / Consolas** for code. There is no editorial display font; GitHub's voice is the voice of the system you're already on.
|
||||
|
||||
**Key Characteristics:**
|
||||
- True white canvas (`#ffffff`) or deep navy-black (`#0d1117`) — no warmth, no tint
|
||||
- Hairline gray borders (`#d0d7de`) define every pane and panel
|
||||
- Primer blue (`#0969da`) for links/primary; GitHub green (`#1a7f37`) for success/merge
|
||||
- system-ui for prose; SFMono for code — no custom typeface
|
||||
- Dense list rows with minimal padding; whitespace is rare
|
||||
- Octicon iconography at 16px / 24px — single-stroke, geometric, consistent
|
||||
- Pill-shaped status badges with strong color semantics
|
||||
|
||||
## 2. Color Palette & Roles
|
||||
|
||||
### Primary
|
||||
- **Canvas Default** (`#ffffff`): Primary page background, light theme.
|
||||
- **Canvas Subtle** (`#f6f8fa`): Secondary surface, sidebar, input background, header strip.
|
||||
- **Canvas Inset** (`#eaeef2`): Code block background, deep-inset surface.
|
||||
- **Fg Default** (`#1f2328`): Primary text, headlines, ink.
|
||||
- **Fg Muted** (`#656d76`): Secondary text, captions, file paths.
|
||||
|
||||
### Brand Accent
|
||||
- **Primer Blue** (`#0969da`): Links, primary CTAs, focus ring base — the universal interactive color.
|
||||
- **Primer Blue Hover** (`#0550ae`): Hover/pressed for primary blue.
|
||||
- **Accent Subtle** (`#ddf4ff`): Soft blue surface for callouts, info banners.
|
||||
|
||||
### Semantic
|
||||
- **Success / Merge Green** (`#1a7f37`): Merged PRs, success badges, merge button.
|
||||
- **Success Subtle** (`#dafbe1`): Success surface tint.
|
||||
- **Open Green** (`#1a7f37`): "Open" issue/PR state.
|
||||
- **Closed / Danger Red** (`#cf222e`): Closed PRs, destructive action, validation error.
|
||||
- **Danger Subtle** (`#ffebe9`): Error banner surface.
|
||||
- **Attention / Warning Yellow** (`#9a6700`): Warning text on amber surface.
|
||||
- **Attention Subtle** (`#fff8c5`): Warning banner surface.
|
||||
- **Done Purple** (`#8250df`): Merged-and-archived, "done" state, premium badge.
|
||||
- **Sponsor Pink** (`#bf3989`): Sponsors heart, GitHub sponsors brand.
|
||||
|
||||
### Border & Divider
|
||||
- **Border Default** (`#d0d7de`): Standard hairline border, panel outline.
|
||||
- **Border Muted** (`#d8dee4`): Inner dividers within a panel.
|
||||
- **Border Subtle** (`#eaeef2`): Faint table row dividers.
|
||||
|
||||
### Dark Theme
|
||||
- **Dark Canvas** (`#0d1117`): Dark page background.
|
||||
- **Dark Surface** (`#161b22`): Sidebar, header, secondary surface.
|
||||
- **Dark Border** (`#30363d`): Standard dark-mode border.
|
||||
- **Dark Fg** (`#e6edf3`): Primary text on dark.
|
||||
|
||||
## 3. Typography Rules
|
||||
|
||||
### Font Family
|
||||
- **Body / UI**: `-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif`
|
||||
- **Code / Mono**: `ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace`
|
||||
- **Emoji**: `"Apple Color Emoji", "Segoe UI Emoji"`
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Display | system-ui | 32px (2rem) | 600 | 1.25 | -0.01em | Repo header, marketing hero |
|
||||
| H1 | system-ui | 24px (1.5rem) | 600 | 1.25 | normal | Page heading |
|
||||
| H2 | system-ui | 20px (1.25rem) | 600 | 1.25 | normal | Section heading |
|
||||
| H3 | system-ui | 16px (1rem) | 600 | 1.25 | normal | Sub-section, panel header |
|
||||
| Body | system-ui | 14px (0.875rem) | 400 | 1.5 | normal | Default text size — not 16px |
|
||||
| Body Small | system-ui | 12px (0.75rem) | 400 | 1.4 | normal | Captions, file metadata |
|
||||
| Code | SFMono | 12px (0.75rem) | 400 | 1.45 | normal | Code blocks, diff |
|
||||
| Code Inline | SFMono | 0.85em | 400 | inherit | normal | Inline `code` spans |
|
||||
|
||||
### Principles
|
||||
- **14px body, not 16px**: GitHub's prose density is its identity. The product reads at 14px to fit more rows in a viewport.
|
||||
- **Weight binary**: 400 for everything by default; 600 for headlines and emphasis. No 500, no 700.
|
||||
- **System fonts always**: never load a webfont for chrome — text must render instantly on slow connections.
|
||||
|
||||
## 4. Component Stylings
|
||||
|
||||
### Buttons
|
||||
|
||||
**Primary (Green)**
|
||||
- Background: `#1f883d`
|
||||
- Text: `#ffffff`
|
||||
- Border: 1px solid `rgba(31, 35, 40, 0.15)`
|
||||
- Padding: 5px 16px
|
||||
- Radius: 6px
|
||||
- Shadow: `0 1px 0 rgba(31,35,40,0.1)`
|
||||
- Hover: background `#1a7f37`
|
||||
- Use: "Create repository", "Merge pull request"
|
||||
|
||||
**Default**
|
||||
- Background: `#f6f8fa`
|
||||
- Text: `#1f2328`
|
||||
- Border: 1px solid `#d0d7de`
|
||||
- Padding: 5px 16px
|
||||
- Radius: 6px
|
||||
- Hover: background `#f3f4f6`, border `#d0d7de`
|
||||
|
||||
**Outline (Blue Link Style)**
|
||||
- Background: `#ffffff`
|
||||
- Text: `#0969da`
|
||||
- Border: 1px solid `#d0d7de`
|
||||
- Hover: background `#0969da`, text `#ffffff`
|
||||
|
||||
**Danger**
|
||||
- Background: `#ffffff`
|
||||
- Text: `#cf222e`
|
||||
- Border: 1px solid `#d0d7de`
|
||||
- Hover: background `#a40e26`, text `#ffffff`, border `#a40e26`
|
||||
|
||||
### Cards / Boxes
|
||||
- Background: `#ffffff`
|
||||
- Border: 1px solid `#d0d7de`
|
||||
- Radius: 6px
|
||||
- Padding: 16px (header) + 16px (body)
|
||||
- Header has a `#f6f8fa` strip with bottom border.
|
||||
|
||||
### Inputs
|
||||
- Background: `#ffffff`
|
||||
- Border: 1px solid `#d0d7de`
|
||||
- Radius: 6px
|
||||
- Padding: 5px 12px
|
||||
- Focus: border `#0969da`, ring `0 0 0 3px rgba(9,105,218,0.3)`
|
||||
|
||||
### Status Pills (Issue / PR)
|
||||
- **Open**: background `#1a7f37`, text white, padding 4px 10px, radius 9999px.
|
||||
- **Closed**: background `#cf222e`, text white.
|
||||
- **Merged**: background `#8250df`, text white.
|
||||
- **Draft**: background `#6e7781`, text white.
|
||||
|
||||
### Labels (Tags on Issues/PRs)
|
||||
- Padding: 0 7px
|
||||
- Radius: 9999px
|
||||
- Font: 12px / 500
|
||||
- Background and text are programmatic (label color → text computed for contrast).
|
||||
|
||||
## 5. Spacing & Layout
|
||||
|
||||
- **Base unit**: 4px. Spacing scale: 4, 8, 12, 16, 24, 32, 40, 48.
|
||||
- **Page max-width**: 1280px (`Container-xl`).
|
||||
- **Sidebar**: 296px on desktop, collapses below 1012px.
|
||||
- **Row padding**: 16px horizontal, 12px vertical (lists are dense by design).
|
||||
|
||||
## 6. Motion
|
||||
|
||||
- **Duration**: 80ms for hover; 200ms for menu/popover open.
|
||||
- **Easing**: `ease-out` for opens, `ease-in` for closes.
|
||||
- **Avoided**: page-load animation, parallax, persistent micro-interactions. Things appear; they do not perform.
|
||||
|
||||
## 7. Usage Guardrails
|
||||
|
||||
- Keep dense lists, bordered boxes, and system typography together; isolated green buttons are not enough to create a GitHub-like product surface.
|
||||
- Use green for constructive repository actions, blue for links and focus, and red/purple/gray only for issue, PR, and workflow states.
|
||||
- Prefer quiet chrome, explicit borders, and compact spacing over decorative shadows or large marketing-style cards.
|
||||
@@ -0,0 +1,32 @@
|
||||
# GitHub 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`) or deep navy-black (`#0d1117`) — no warmth, no tint
|
||||
- Hairline gray borders (`#d0d7de`) define every pane and panel
|
||||
- Primer blue (`#0969da`) for links/primary; GitHub green (`#1a7f37`) for success/merge
|
||||
- Dense list rows with minimal padding; whitespace is rare
|
||||
|
||||
## 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`.
|
||||
@@ -0,0 +1,383 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>GitHub — reference components</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Reference fixture for design-systems/github. Every visible
|
||||
value comes from tokens.css. GitHub's signature moves: true white
|
||||
canvas, hairline borders (#d0d7de), Primer blue CTAs, GitHub green
|
||||
for success/merge, system-ui fonts, 14px body density."
|
||||
/>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--bg: #ffffff;
|
||||
--surface: #f6f8fa;
|
||||
--surface-warm: var(--surface);
|
||||
|
||||
--fg: #1f2328;
|
||||
--fg-2: #1f2328;
|
||||
--muted: #656d76;
|
||||
--meta: #656d76;
|
||||
|
||||
--border: #d0d7de;
|
||||
--border-soft: #d8dee4;
|
||||
|
||||
--accent: #0969da;
|
||||
--accent-on: #ffffff;
|
||||
--accent-hover: #0550ae;
|
||||
--accent-active: color-mix(in oklab, var(--accent), black 14%);
|
||||
|
||||
--success: #1a7f37;
|
||||
--warn: #9a6700;
|
||||
--danger: #cf222e;
|
||||
|
||||
--font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
|
||||
--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
|
||||
--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
|
||||
|
||||
--text-xs: 12px;
|
||||
--text-sm: 14px;
|
||||
--text-base: 14px;
|
||||
--text-lg: 16px;
|
||||
--text-xl: 20px;
|
||||
--text-2xl: 24px;
|
||||
--text-3xl: 28px;
|
||||
--text-4xl: 32px;
|
||||
|
||||
--leading-body: 1.5;
|
||||
--leading-tight: 1.25;
|
||||
--tracking-display: -0.01em;
|
||||
|
||||
--space-1: 4px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--space-12: 48px;
|
||||
|
||||
--section-y-desktop: 64px;
|
||||
--section-y-tablet: 48px;
|
||||
--section-y-phone: 32px;
|
||||
|
||||
--radius-sm: 6px;
|
||||
--radius-md: 6px;
|
||||
--radius-lg: 12px;
|
||||
--radius-pill: 9999px;
|
||||
|
||||
--elev-flat: none;
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--elev-raised: 0 1px 3px rgba(31, 35, 40, 0.12), 0 8px 24px rgba(66, 74, 83, 0.12);
|
||||
|
||||
--focus-ring: 0 0 0 3px rgba(9, 105, 218, 0.3);
|
||||
|
||||
--motion-fast: 80ms;
|
||||
--motion-base: 200ms;
|
||||
--ease-standard: ease-out;
|
||||
|
||||
--container-max: 1280px;
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-gutter-phone: 16px;
|
||||
}
|
||||
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
html, body { margin: 0; padding: 0; }
|
||||
body {
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-base);
|
||||
line-height: var(--leading-body);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: var(--container-max);
|
||||
margin-inline: auto;
|
||||
padding-inline: var(--container-gutter-desktop);
|
||||
}
|
||||
section { padding-block: var(--section-y-desktop); }
|
||||
section + section { border-top: 1px solid var(--border); }
|
||||
@media (max-width: 1023px) {
|
||||
.container { padding-inline: var(--container-gutter-tablet); }
|
||||
section { padding-block: var(--section-y-tablet); }
|
||||
}
|
||||
@media (max-width: 639px) {
|
||||
.container { padding-inline: var(--container-gutter-phone); }
|
||||
section { padding-block: var(--section-y-phone); }
|
||||
}
|
||||
|
||||
/* ─── Typography ─────────────────────────── */
|
||||
h1, h2, h3 {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
line-height: var(--leading-tight);
|
||||
}
|
||||
h1 {
|
||||
font-size: var(--text-4xl);
|
||||
letter-spacing: var(--tracking-display);
|
||||
}
|
||||
h2 {
|
||||
font-size: var(--text-xl);
|
||||
/* 20px section heading: line-height 1.25, normal tracking. */
|
||||
}
|
||||
h3 {
|
||||
font-size: var(--text-lg);
|
||||
/* 16px sub-section/panel header: line-height 1.25.
|
||||
Overrides the shared --leading-tight set above. */
|
||||
}
|
||||
p { margin: 0; }
|
||||
.body-muted { color: var(--muted); }
|
||||
.body-sm { font-size: var(--text-sm); }
|
||||
.body-xs { font-size: var(--text-xs); }
|
||||
.eyebrow {
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 600;
|
||||
color: var(--muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
code {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.85em;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 1px 4px;
|
||||
}
|
||||
.stack-3 > * + * { margin-block-start: var(--space-3); }
|
||||
.stack-4 > * + * { margin-block-start: var(--space-4); }
|
||||
|
||||
/* ─── Buttons ────────────────────────────── */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
padding: 5px 16px;
|
||||
border-radius: var(--radius-sm);
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
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: #1f883d;
|
||||
color: #ffffff;
|
||||
border-color: rgba(31, 35, 40, 0.15);
|
||||
box-shadow: 0 1px 0 rgba(31, 35, 40, 0.1);
|
||||
font-weight: 500;
|
||||
}
|
||||
.btn-primary:hover { background: var(--success); }
|
||||
.btn-default {
|
||||
background: var(--surface);
|
||||
color: var(--fg);
|
||||
border-color: var(--border);
|
||||
}
|
||||
.btn-default:hover { background: #f3f4f6; }
|
||||
.btn-outline {
|
||||
background: var(--bg);
|
||||
color: var(--accent);
|
||||
border-color: var(--border);
|
||||
}
|
||||
.btn-outline:hover { background: var(--accent); color: white; }
|
||||
|
||||
/* ─── Status pills ───────────────────────── */
|
||||
.status-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-1);
|
||||
padding: 4px 10px;
|
||||
border-radius: var(--radius-pill);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 500;
|
||||
color: white;
|
||||
line-height: 1;
|
||||
}
|
||||
.status-open { background: #1a7f37; }
|
||||
.status-closed { background: #cf222e; }
|
||||
.status-merged { background: #8250df; }
|
||||
.status-draft { background: #6e7781; }
|
||||
|
||||
/* ─── Box / Card ─────────────────────────── */
|
||||
.box {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
overflow: hidden;
|
||||
}
|
||||
.box-header {
|
||||
background: var(--surface);
|
||||
border-bottom: 1px solid var(--border);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
font-weight: 600;
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
.box-body { padding: var(--space-4); }
|
||||
|
||||
/* ─── Inputs ─────────────────────────────── */
|
||||
.field { display: flex; flex-direction: column; gap: var(--space-2); }
|
||||
.field label { font-size: var(--text-sm); font-weight: 600; color: var(--fg); }
|
||||
.field input {
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 5px 12px;
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-sm);
|
||||
outline: none;
|
||||
transition: border-color var(--motion-fast) var(--ease-standard),
|
||||
box-shadow var(--motion-fast) var(--ease-standard);
|
||||
}
|
||||
.field input::placeholder { color: var(--muted); }
|
||||
.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-8);
|
||||
align-items: start;
|
||||
}
|
||||
@media (max-width: 1023px) { .hero-grid { grid-template-columns: 1fr; } }
|
||||
.features-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: var(--space-4);
|
||||
}
|
||||
@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-4); flex-wrap: wrap; }
|
||||
.icon { width: 16px; height: 16px; flex-shrink: 0; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="container">
|
||||
<!-- HERO -->
|
||||
<section data-od-id="hero">
|
||||
<div class="hero-grid">
|
||||
<div class="stack-4">
|
||||
<p class="eyebrow">Reference fixture · github</p>
|
||||
<h1>Where the world builds software.</h1>
|
||||
<p class="body-muted" style="max-width:48ch;font-size:var(--text-lg);line-height:1.5;margin-top:var(--space-3)">
|
||||
Millions of developers and companies build, ship, and maintain
|
||||
their software on GitHub. Every value below comes from tokens.css
|
||||
— no raw hex, no off-token type.
|
||||
</p>
|
||||
<div class="hero-actions">
|
||||
<a href="./tokens.css" class="btn btn-primary">Sign up for free</a>
|
||||
<a href="./DESIGN.md" class="btn btn-default">Read the spec</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<aside>
|
||||
<div class="box">
|
||||
<div class="box-header">open-design / design-systems</div>
|
||||
<div class="box-body stack-3">
|
||||
<div style="display:flex;align-items:center;justify-content:space-between">
|
||||
<span class="body-sm" style="font-weight:600;color:var(--accent)">Pull requests</span>
|
||||
<span class="status-pill status-open">Open</span>
|
||||
</div>
|
||||
<div style="font-size:var(--text-xs);color:var(--muted)">
|
||||
#1652 · feat: add structured tokens for 5 brands
|
||||
</div>
|
||||
<div style="font-size:var(--text-xs);color:var(--muted)">
|
||||
#1653 · feat: add batch 2 token fixtures
|
||||
</div>
|
||||
<div style="display:flex;gap:var(--space-2);margin-top:var(--space-2)">
|
||||
<span class="status-pill status-merged">Merged</span>
|
||||
<span class="status-pill status-draft">Draft</span>
|
||||
<span class="status-pill status-closed">Closed</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FEATURES -->
|
||||
<section data-od-id="features">
|
||||
<div class="stack-3">
|
||||
<p class="eyebrow">What this fixture exercises</p>
|
||||
<h2>Dense, functional, system-native.</h2>
|
||||
</div>
|
||||
|
||||
<div class="features-grid" style="margin-block-start:var(--space-6)">
|
||||
<article class="box stack-3">
|
||||
<div class="box-header">14px body</div>
|
||||
<div class="box-body">
|
||||
<p class="body-sm body-muted">
|
||||
Not 16px — GitHub's prose density is its identity. 14px base
|
||||
fits more content per viewport. system-ui renders instantly on
|
||||
every OS with zero webfont load.
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="box stack-3">
|
||||
<div class="box-header">Hairline borders</div>
|
||||
<div class="box-body">
|
||||
<p class="body-sm body-muted">
|
||||
<code>#d0d7de</code> — every pane, panel, and card. Structure
|
||||
communicated by stroke, not shadow. Density without visual noise.
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="box stack-3">
|
||||
<div class="box-header">Primer blue + green</div>
|
||||
<div class="box-body">
|
||||
<p class="body-sm body-muted">
|
||||
<code>#0969da</code> for all interactive affordances.
|
||||
<code>#1a7f37</code> exclusively for success/merge states.
|
||||
Both restrained — never decorative.
|
||||
</p>
|
||||
</div>
|
||||
</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="eyebrow">Form components</p>
|
||||
<h2>Primer form inputs.</h2>
|
||||
<p class="body-muted" style="max-width:44ch">
|
||||
Focus: border <code>#0969da</code> + <code>0 0 0 3px rgba(9,105,218,0.3)</code>.
|
||||
5px 12px padding. 6px radius. Weight 600 label.
|
||||
</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 class="field">
|
||||
<label for="repo">Repository name</label>
|
||||
<input id="repo" type="text" placeholder="my-project" />
|
||||
</div>
|
||||
<div style="display:flex;gap:var(--space-3);margin-top:var(--space-2)">
|
||||
<button type="submit" class="btn btn-primary">Create repository</button>
|
||||
<button type="button" class="btn btn-default">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,422 @@
|
||||
{
|
||||
"schemaVersion": 1,
|
||||
"brandId": "github",
|
||||
"source": {
|
||||
"componentsHtml": "components.html",
|
||||
"tokensCss": "tokens.css"
|
||||
},
|
||||
"fixture": {
|
||||
"title": "GitHub — reference components",
|
||||
"description": "Reference fixture for design-systems/github. Every visible value comes from tokens.css. GitHub's signature moves: true white canvas, hairline borders (#d0d7de), Primer blue CTAs, GitHub green for success/merge, system-ui fonts, 14px body density.",
|
||||
"styleBlockCount": 1,
|
||||
"selectorCount": 44,
|
||||
"classCount": 21,
|
||||
"elementCount": 21
|
||||
},
|
||||
"tokens": {
|
||||
"declared": [
|
||||
"--accent",
|
||||
"--accent-active",
|
||||
"--accent-hover",
|
||||
"--accent-on",
|
||||
"--bg",
|
||||
"--border",
|
||||
"--border-soft",
|
||||
"--container-gutter-desktop",
|
||||
"--container-gutter-phone",
|
||||
"--container-gutter-tablet",
|
||||
"--container-max",
|
||||
"--danger",
|
||||
"--ease-standard",
|
||||
"--elev-flat",
|
||||
"--elev-raised",
|
||||
"--elev-ring",
|
||||
"--fg",
|
||||
"--fg-2",
|
||||
"--focus-ring",
|
||||
"--font-body",
|
||||
"--font-display",
|
||||
"--font-mono",
|
||||
"--leading-body",
|
||||
"--leading-tight",
|
||||
"--meta",
|
||||
"--motion-base",
|
||||
"--motion-fast",
|
||||
"--muted",
|
||||
"--radius-lg",
|
||||
"--radius-md",
|
||||
"--radius-pill",
|
||||
"--radius-sm",
|
||||
"--section-y-desktop",
|
||||
"--section-y-phone",
|
||||
"--section-y-tablet",
|
||||
"--space-1",
|
||||
"--space-12",
|
||||
"--space-2",
|
||||
"--space-3",
|
||||
"--space-4",
|
||||
"--space-5",
|
||||
"--space-6",
|
||||
"--space-8",
|
||||
"--success",
|
||||
"--surface",
|
||||
"--surface-warm",
|
||||
"--text-2xl",
|
||||
"--text-3xl",
|
||||
"--text-4xl",
|
||||
"--text-base",
|
||||
"--text-lg",
|
||||
"--text-sm",
|
||||
"--text-xl",
|
||||
"--text-xs",
|
||||
"--tracking-display",
|
||||
"--warn"
|
||||
],
|
||||
"referenced": [
|
||||
"--accent",
|
||||
"--bg",
|
||||
"--border",
|
||||
"--container-gutter-desktop",
|
||||
"--container-gutter-phone",
|
||||
"--container-gutter-tablet",
|
||||
"--container-max",
|
||||
"--ease-standard",
|
||||
"--fg",
|
||||
"--focus-ring",
|
||||
"--font-body",
|
||||
"--font-display",
|
||||
"--font-mono",
|
||||
"--leading-body",
|
||||
"--leading-tight",
|
||||
"--motion-fast",
|
||||
"--muted",
|
||||
"--radius-pill",
|
||||
"--radius-sm",
|
||||
"--section-y-desktop",
|
||||
"--section-y-phone",
|
||||
"--section-y-tablet",
|
||||
"--space-1",
|
||||
"--space-12",
|
||||
"--space-2",
|
||||
"--space-3",
|
||||
"--space-4",
|
||||
"--space-6",
|
||||
"--space-8",
|
||||
"--success",
|
||||
"--surface",
|
||||
"--text-4xl",
|
||||
"--text-base",
|
||||
"--text-lg",
|
||||
"--text-sm",
|
||||
"--text-xl",
|
||||
"--text-xs",
|
||||
"--tracking-display"
|
||||
],
|
||||
"unusedDeclared": [
|
||||
"--accent-active",
|
||||
"--accent-hover",
|
||||
"--accent-on",
|
||||
"--border-soft",
|
||||
"--danger",
|
||||
"--elev-flat",
|
||||
"--elev-raised",
|
||||
"--elev-ring",
|
||||
"--fg-2",
|
||||
"--meta",
|
||||
"--motion-base",
|
||||
"--radius-lg",
|
||||
"--radius-md",
|
||||
"--space-5",
|
||||
"--surface-warm",
|
||||
"--text-2xl",
|
||||
"--text-3xl",
|
||||
"--warn"
|
||||
],
|
||||
"undeclaredReferenced": []
|
||||
},
|
||||
"selectors": [
|
||||
".body-muted",
|
||||
".body-sm",
|
||||
".body-xs",
|
||||
".box",
|
||||
".box-body",
|
||||
".box-header",
|
||||
".btn",
|
||||
".btn-default",
|
||||
".btn-default:hover",
|
||||
".btn-outline",
|
||||
".btn-outline:hover",
|
||||
".btn-primary",
|
||||
".btn-primary:hover",
|
||||
".btn:focus-visible",
|
||||
".container",
|
||||
".eyebrow",
|
||||
".features-grid",
|
||||
".field",
|
||||
".field input",
|
||||
".field input::placeholder",
|
||||
".field input:focus",
|
||||
".field label",
|
||||
".hero-actions",
|
||||
".hero-grid",
|
||||
".icon",
|
||||
".stack-3 > * + *",
|
||||
".stack-4 > * + *",
|
||||
".status-closed",
|
||||
".status-draft",
|
||||
".status-merged",
|
||||
".status-open",
|
||||
".status-pill",
|
||||
"*",
|
||||
"*::after",
|
||||
"*::before",
|
||||
"body",
|
||||
"code",
|
||||
"h1",
|
||||
"h2",
|
||||
"h3",
|
||||
"html",
|
||||
"p",
|
||||
"section",
|
||||
"section + section"
|
||||
],
|
||||
"classes": [
|
||||
"body-muted",
|
||||
"body-sm",
|
||||
"box",
|
||||
"box-body",
|
||||
"box-header",
|
||||
"btn",
|
||||
"btn-default",
|
||||
"btn-primary",
|
||||
"container",
|
||||
"eyebrow",
|
||||
"features-grid",
|
||||
"field",
|
||||
"hero-actions",
|
||||
"hero-grid",
|
||||
"stack-3",
|
||||
"stack-4",
|
||||
"status-closed",
|
||||
"status-draft",
|
||||
"status-merged",
|
||||
"status-open",
|
||||
"status-pill"
|
||||
],
|
||||
"elements": [
|
||||
"a",
|
||||
"article",
|
||||
"aside",
|
||||
"body",
|
||||
"button",
|
||||
"code",
|
||||
"div",
|
||||
"form",
|
||||
"h1",
|
||||
"h2",
|
||||
"head",
|
||||
"html",
|
||||
"input",
|
||||
"label",
|
||||
"main",
|
||||
"meta",
|
||||
"p",
|
||||
"section",
|
||||
"span",
|
||||
"style",
|
||||
"title"
|
||||
],
|
||||
"groups": [
|
||||
{
|
||||
"id": "buttons",
|
||||
"label": "Buttons and calls to action",
|
||||
"present": true,
|
||||
"selectors": [
|
||||
".btn",
|
||||
".btn-default",
|
||||
".btn-default:hover",
|
||||
".btn-outline",
|
||||
".btn-outline:hover",
|
||||
".btn-primary",
|
||||
".btn-primary:hover",
|
||||
".btn:focus-visible"
|
||||
],
|
||||
"classes": [
|
||||
"btn",
|
||||
"btn-default",
|
||||
"btn-primary"
|
||||
],
|
||||
"elements": [
|
||||
"button"
|
||||
],
|
||||
"tokenReferences": [
|
||||
"--accent",
|
||||
"--bg",
|
||||
"--border",
|
||||
"--ease-standard",
|
||||
"--fg",
|
||||
"--font-body",
|
||||
"--motion-fast",
|
||||
"--radius-sm",
|
||||
"--space-2",
|
||||
"--surface",
|
||||
"--text-sm"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "inputs",
|
||||
"label": "Form fields and controls",
|
||||
"present": true,
|
||||
"selectors": [
|
||||
".field",
|
||||
".field input",
|
||||
".field input::placeholder",
|
||||
".field input:focus",
|
||||
".field 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-sm"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "cards",
|
||||
"label": "Cards and panels",
|
||||
"present": false,
|
||||
"selectors": [],
|
||||
"classes": [],
|
||||
"elements": [],
|
||||
"tokenReferences": []
|
||||
},
|
||||
{
|
||||
"id": "badges",
|
||||
"label": "Badges, chips, and status labels",
|
||||
"present": true,
|
||||
"selectors": [],
|
||||
"classes": [
|
||||
"status-closed",
|
||||
"status-draft",
|
||||
"status-merged",
|
||||
"status-open",
|
||||
"status-pill"
|
||||
],
|
||||
"elements": [],
|
||||
"tokenReferences": []
|
||||
},
|
||||
{
|
||||
"id": "links",
|
||||
"label": "Links and inline actions",
|
||||
"present": true,
|
||||
"selectors": [],
|
||||
"classes": [],
|
||||
"elements": [
|
||||
"a"
|
||||
],
|
||||
"tokenReferences": []
|
||||
},
|
||||
{
|
||||
"id": "keyboard",
|
||||
"label": "Keyboard hints",
|
||||
"present": false,
|
||||
"selectors": [],
|
||||
"classes": [],
|
||||
"elements": [],
|
||||
"tokenReferences": []
|
||||
},
|
||||
{
|
||||
"id": "icons",
|
||||
"label": "Icon slots",
|
||||
"present": true,
|
||||
"selectors": [
|
||||
".icon"
|
||||
],
|
||||
"classes": [],
|
||||
"elements": [],
|
||||
"tokenReferences": []
|
||||
},
|
||||
{
|
||||
"id": "typography",
|
||||
"label": "Typography scale and text utilities",
|
||||
"present": true,
|
||||
"selectors": [
|
||||
".body-muted",
|
||||
".body-sm",
|
||||
".eyebrow",
|
||||
"h1",
|
||||
"h2",
|
||||
"h3"
|
||||
],
|
||||
"classes": [
|
||||
"body-muted",
|
||||
"body-sm",
|
||||
"eyebrow"
|
||||
],
|
||||
"elements": [
|
||||
"h1",
|
||||
"h2",
|
||||
"p"
|
||||
],
|
||||
"tokenReferences": [
|
||||
"--font-display",
|
||||
"--leading-tight",
|
||||
"--muted",
|
||||
"--text-sm",
|
||||
"--text-xl",
|
||||
"--text-xs"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "layout",
|
||||
"label": "Layout primitives",
|
||||
"present": true,
|
||||
"selectors": [
|
||||
".container",
|
||||
".stack-3 > * + *",
|
||||
".stack-4 > * + *",
|
||||
"section",
|
||||
"section + section"
|
||||
],
|
||||
"classes": [
|
||||
"container",
|
||||
"features-grid",
|
||||
"hero-grid",
|
||||
"stack-3",
|
||||
"stack-4"
|
||||
],
|
||||
"elements": [
|
||||
"main",
|
||||
"section"
|
||||
],
|
||||
"tokenReferences": [
|
||||
"--border",
|
||||
"--container-gutter-desktop",
|
||||
"--container-gutter-phone",
|
||||
"--container-gutter-tablet",
|
||||
"--container-max",
|
||||
"--space-3"
|
||||
]
|
||||
}
|
||||
],
|
||||
"literals": {
|
||||
"colorExpressions": 9,
|
||||
"pixelValues": 22,
|
||||
"hardcodedFontFamilies": 5
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,701 @@
|
||||
{
|
||||
"schemaVersion": 1,
|
||||
"format": "od-design-tokens/v1",
|
||||
"contract": "TOKEN_SCHEMA",
|
||||
"generatedAt": "2026-06-06T00:00:00.000Z",
|
||||
"source": {
|
||||
"tokensCss": "tokens.css",
|
||||
"tokenContractReport": "source/token-contract.report.json"
|
||||
},
|
||||
"summary": {
|
||||
"totalTokens": 56,
|
||||
"declaredTokens": 56,
|
||||
"sourceBackedTokens": 56,
|
||||
"sourceBackedA1": 26,
|
||||
"fallbackTokens": 26,
|
||||
"aliasTokens": 1,
|
||||
"layerCounts": {
|
||||
"A1-identity": 8,
|
||||
"B-slot": 4,
|
||||
"A2": 26,
|
||||
"A1-structure": 18
|
||||
},
|
||||
"score": 100,
|
||||
"grade": "excellent",
|
||||
"recommendRebuild": false
|
||||
},
|
||||
"tokens": [
|
||||
{
|
||||
"name": "--bg",
|
||||
"value": "#ffffff",
|
||||
"type": "color",
|
||||
"layer": "A1-identity",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --bg; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:30"
|
||||
],
|
||||
"sourceName": "--bg"
|
||||
},
|
||||
{
|
||||
"name": "--surface",
|
||||
"value": "#f6f8fa",
|
||||
"type": "color",
|
||||
"layer": "A1-identity",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --surface; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:31"
|
||||
],
|
||||
"sourceName": "--surface"
|
||||
},
|
||||
{
|
||||
"name": "--surface-warm",
|
||||
"value": "var(--surface)",
|
||||
"type": "color",
|
||||
"layer": "B-slot",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --surface-warm; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:32"
|
||||
],
|
||||
"sourceName": "--surface-warm"
|
||||
},
|
||||
{
|
||||
"name": "--fg",
|
||||
"value": "#1f2328",
|
||||
"type": "color",
|
||||
"layer": "A1-identity",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --fg; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:35"
|
||||
],
|
||||
"sourceName": "--fg"
|
||||
},
|
||||
{
|
||||
"name": "--fg-2",
|
||||
"value": "#1f2328",
|
||||
"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:36"
|
||||
],
|
||||
"sourceName": "--fg-2"
|
||||
},
|
||||
{
|
||||
"name": "--muted",
|
||||
"value": "#656d76",
|
||||
"type": "color",
|
||||
"layer": "A1-identity",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --muted; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:37"
|
||||
],
|
||||
"sourceName": "--muted"
|
||||
},
|
||||
{
|
||||
"name": "--meta",
|
||||
"value": "#656d76",
|
||||
"type": "color",
|
||||
"layer": "B-slot",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --meta; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:38"
|
||||
],
|
||||
"sourceName": "--meta"
|
||||
},
|
||||
{
|
||||
"name": "--border",
|
||||
"value": "#d0d7de",
|
||||
"type": "color",
|
||||
"layer": "A1-identity",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --border; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:41"
|
||||
],
|
||||
"sourceName": "--border"
|
||||
},
|
||||
{
|
||||
"name": "--border-soft",
|
||||
"value": "#d8dee4",
|
||||
"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:42"
|
||||
],
|
||||
"sourceName": "--border-soft"
|
||||
},
|
||||
{
|
||||
"name": "--accent",
|
||||
"value": "#0969da",
|
||||
"type": "color",
|
||||
"layer": "A1-identity",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --accent; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:45"
|
||||
],
|
||||
"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:46"
|
||||
],
|
||||
"sourceName": "--accent-on"
|
||||
},
|
||||
{
|
||||
"name": "--accent-hover",
|
||||
"value": "#0550ae",
|
||||
"type": "color",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --accent-hover; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:47"
|
||||
],
|
||||
"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:48"
|
||||
],
|
||||
"sourceName": "--accent-active"
|
||||
},
|
||||
{
|
||||
"name": "--success",
|
||||
"value": "#1a7f37",
|
||||
"type": "color",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --success; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:51"
|
||||
],
|
||||
"sourceName": "--success"
|
||||
},
|
||||
{
|
||||
"name": "--warn",
|
||||
"value": "#9a6700",
|
||||
"type": "color",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --warn; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:52"
|
||||
],
|
||||
"sourceName": "--warn"
|
||||
},
|
||||
{
|
||||
"name": "--danger",
|
||||
"value": "#cf222e",
|
||||
"type": "color",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --danger; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:53"
|
||||
],
|
||||
"sourceName": "--danger"
|
||||
},
|
||||
{
|
||||
"name": "--font-display",
|
||||
"value": "-apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Noto Sans\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"",
|
||||
"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:57"
|
||||
],
|
||||
"sourceName": "--font-display"
|
||||
},
|
||||
{
|
||||
"name": "--font-body",
|
||||
"value": "-apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Noto Sans\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"",
|
||||
"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:58"
|
||||
],
|
||||
"sourceName": "--font-body"
|
||||
},
|
||||
{
|
||||
"name": "--font-mono",
|
||||
"value": "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", 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:59"
|
||||
],
|
||||
"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:64"
|
||||
],
|
||||
"sourceName": "--text-xs"
|
||||
},
|
||||
{
|
||||
"name": "--text-sm",
|
||||
"value": "14px",
|
||||
"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:65"
|
||||
],
|
||||
"sourceName": "--text-sm"
|
||||
},
|
||||
{
|
||||
"name": "--text-base",
|
||||
"value": "14px",
|
||||
"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:66"
|
||||
],
|
||||
"sourceName": "--text-base"
|
||||
},
|
||||
{
|
||||
"name": "--text-lg",
|
||||
"value": "16px",
|
||||
"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:67"
|
||||
],
|
||||
"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:68"
|
||||
],
|
||||
"sourceName": "--text-xl"
|
||||
},
|
||||
{
|
||||
"name": "--text-2xl",
|
||||
"value": "24px",
|
||||
"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:69"
|
||||
],
|
||||
"sourceName": "--text-2xl"
|
||||
},
|
||||
{
|
||||
"name": "--text-3xl",
|
||||
"value": "28px",
|
||||
"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:70"
|
||||
],
|
||||
"sourceName": "--text-3xl"
|
||||
},
|
||||
{
|
||||
"name": "--text-4xl",
|
||||
"value": "32px",
|
||||
"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:71"
|
||||
],
|
||||
"sourceName": "--text-4xl"
|
||||
},
|
||||
{
|
||||
"name": "--leading-body",
|
||||
"value": "1.5",
|
||||
"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:76"
|
||||
],
|
||||
"sourceName": "--leading-body"
|
||||
},
|
||||
{
|
||||
"name": "--leading-tight",
|
||||
"value": "1.25",
|
||||
"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:77"
|
||||
],
|
||||
"sourceName": "--leading-tight"
|
||||
},
|
||||
{
|
||||
"name": "--tracking-display",
|
||||
"value": "-0.01em",
|
||||
"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:78"
|
||||
],
|
||||
"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:82"
|
||||
],
|
||||
"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:83"
|
||||
],
|
||||
"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:84"
|
||||
],
|
||||
"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:85"
|
||||
],
|
||||
"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:86"
|
||||
],
|
||||
"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:87"
|
||||
],
|
||||
"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:88"
|
||||
],
|
||||
"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:89"
|
||||
],
|
||||
"sourceName": "--space-12"
|
||||
},
|
||||
{
|
||||
"name": "--section-y-desktop",
|
||||
"value": "64px",
|
||||
"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:92"
|
||||
],
|
||||
"sourceName": "--section-y-desktop"
|
||||
},
|
||||
{
|
||||
"name": "--section-y-tablet",
|
||||
"value": "48px",
|
||||
"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:93"
|
||||
],
|
||||
"sourceName": "--section-y-tablet"
|
||||
},
|
||||
{
|
||||
"name": "--section-y-phone",
|
||||
"value": "32px",
|
||||
"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:94"
|
||||
],
|
||||
"sourceName": "--section-y-phone"
|
||||
},
|
||||
{
|
||||
"name": "--radius-sm",
|
||||
"value": "6px",
|
||||
"type": "dimension",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --radius-sm; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:98"
|
||||
],
|
||||
"sourceName": "--radius-sm"
|
||||
},
|
||||
{
|
||||
"name": "--radius-md",
|
||||
"value": "6px",
|
||||
"type": "dimension",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --radius-md; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:99"
|
||||
],
|
||||
"sourceName": "--radius-md"
|
||||
},
|
||||
{
|
||||
"name": "--radius-lg",
|
||||
"value": "12px",
|
||||
"type": "dimension",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --radius-lg; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:100"
|
||||
],
|
||||
"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:101"
|
||||
],
|
||||
"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:106"
|
||||
],
|
||||
"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:107"
|
||||
],
|
||||
"sourceName": "--elev-ring"
|
||||
},
|
||||
{
|
||||
"name": "--elev-raised",
|
||||
"value": "0 1px 3px rgba(31, 35, 40, 0.12), 0 8px 24px rgba(66, 74, 83, 0.12)",
|
||||
"type": "shadow",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --elev-raised; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:108"
|
||||
],
|
||||
"sourceName": "--elev-raised"
|
||||
},
|
||||
{
|
||||
"name": "--focus-ring",
|
||||
"value": "0 0 0 3px rgba(9, 105, 218, 0.3)",
|
||||
"type": "shadow",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --focus-ring; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:112"
|
||||
],
|
||||
"sourceName": "--focus-ring"
|
||||
},
|
||||
{
|
||||
"name": "--motion-fast",
|
||||
"value": "80ms",
|
||||
"type": "duration",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --motion-fast; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:116"
|
||||
],
|
||||
"sourceName": "--motion-fast"
|
||||
},
|
||||
{
|
||||
"name": "--motion-base",
|
||||
"value": "200ms",
|
||||
"type": "duration",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --motion-base; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:117"
|
||||
],
|
||||
"sourceName": "--motion-base"
|
||||
},
|
||||
{
|
||||
"name": "--ease-standard",
|
||||
"value": "ease-out",
|
||||
"type": "cubicBezier",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --ease-standard; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:118"
|
||||
],
|
||||
"sourceName": "--ease-standard"
|
||||
},
|
||||
{
|
||||
"name": "--container-max",
|
||||
"value": "1280px",
|
||||
"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:121"
|
||||
],
|
||||
"sourceName": "--container-max"
|
||||
},
|
||||
{
|
||||
"name": "--container-gutter-desktop",
|
||||
"value": "24px",
|
||||
"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:122"
|
||||
],
|
||||
"sourceName": "--container-gutter-desktop"
|
||||
},
|
||||
{
|
||||
"name": "--container-gutter-tablet",
|
||||
"value": "16px",
|
||||
"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:123"
|
||||
],
|
||||
"sourceName": "--container-gutter-tablet"
|
||||
},
|
||||
{
|
||||
"name": "--container-gutter-phone",
|
||||
"value": "16px",
|
||||
"type": "dimension",
|
||||
"layer": "A1-structure",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --container-gutter-phone; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:124"
|
||||
],
|
||||
"sourceName": "--container-gutter-phone"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
{
|
||||
"schemaVersion": "od-design-system-project/v1",
|
||||
"id": "github",
|
||||
"name": "GitHub",
|
||||
"category": "Developer Tools",
|
||||
"description": "Bundled OpenDesign package for GitHub, 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"
|
||||
}
|
||||
}
|
||||
@@ -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>GitHub 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>
|
||||
@@ -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>GitHub 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>
|
||||
@@ -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>GitHub 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">Developer Tools</p>
|
||||
<h2>Display sample for GitHub</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>
|
||||
@@ -0,0 +1,17 @@
|
||||
# GitHub 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/github/DESIGN.md
|
||||
- design-systems/github/tokens.css
|
||||
- design-systems/github/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.
|
||||
@@ -0,0 +1,641 @@
|
||||
{
|
||||
"schemaVersion": 1,
|
||||
"contract": "TOKEN_SCHEMA",
|
||||
"generatedAt": "2026-06-06T00:00:00.000Z",
|
||||
"sourceScope": "open-design-bundled-fixture",
|
||||
"summary": {
|
||||
"totalTokens": 56,
|
||||
"declaredTokens": 56,
|
||||
"sourceBackedTokens": 56,
|
||||
"sourceBackedA1": 26,
|
||||
"fallbackTokens": 26,
|
||||
"aliasTokens": 1,
|
||||
"layerCounts": {
|
||||
"A1-identity": 8,
|
||||
"B-slot": 4,
|
||||
"A2": 26,
|
||||
"A1-structure": 18
|
||||
},
|
||||
"score": 100,
|
||||
"grade": "excellent",
|
||||
"recommendRebuild": false
|
||||
},
|
||||
"tokens": [
|
||||
{
|
||||
"name": "--bg",
|
||||
"layer": "A1-identity",
|
||||
"value": "#ffffff",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --bg; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:30"
|
||||
],
|
||||
"sourceName": "--bg"
|
||||
},
|
||||
{
|
||||
"name": "--surface",
|
||||
"layer": "A1-identity",
|
||||
"value": "#f6f8fa",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --surface; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:31"
|
||||
],
|
||||
"sourceName": "--surface"
|
||||
},
|
||||
{
|
||||
"name": "--surface-warm",
|
||||
"layer": "B-slot",
|
||||
"value": "var(--surface)",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --surface-warm; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:32"
|
||||
],
|
||||
"sourceName": "--surface-warm"
|
||||
},
|
||||
{
|
||||
"name": "--fg",
|
||||
"layer": "A1-identity",
|
||||
"value": "#1f2328",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --fg; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:35"
|
||||
],
|
||||
"sourceName": "--fg"
|
||||
},
|
||||
{
|
||||
"name": "--fg-2",
|
||||
"layer": "B-slot",
|
||||
"value": "#1f2328",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --fg-2; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:36"
|
||||
],
|
||||
"sourceName": "--fg-2"
|
||||
},
|
||||
{
|
||||
"name": "--muted",
|
||||
"layer": "A1-identity",
|
||||
"value": "#656d76",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --muted; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:37"
|
||||
],
|
||||
"sourceName": "--muted"
|
||||
},
|
||||
{
|
||||
"name": "--meta",
|
||||
"layer": "B-slot",
|
||||
"value": "#656d76",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --meta; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:38"
|
||||
],
|
||||
"sourceName": "--meta"
|
||||
},
|
||||
{
|
||||
"name": "--border",
|
||||
"layer": "A1-identity",
|
||||
"value": "#d0d7de",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --border; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:41"
|
||||
],
|
||||
"sourceName": "--border"
|
||||
},
|
||||
{
|
||||
"name": "--border-soft",
|
||||
"layer": "B-slot",
|
||||
"value": "#d8dee4",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --border-soft; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:42"
|
||||
],
|
||||
"sourceName": "--border-soft"
|
||||
},
|
||||
{
|
||||
"name": "--accent",
|
||||
"layer": "A1-identity",
|
||||
"value": "#0969da",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --accent; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:45"
|
||||
],
|
||||
"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:46"
|
||||
],
|
||||
"sourceName": "--accent-on"
|
||||
},
|
||||
{
|
||||
"name": "--accent-hover",
|
||||
"layer": "A2",
|
||||
"value": "#0550ae",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --accent-hover; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:47"
|
||||
],
|
||||
"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:48"
|
||||
],
|
||||
"sourceName": "--accent-active"
|
||||
},
|
||||
{
|
||||
"name": "--success",
|
||||
"layer": "A2",
|
||||
"value": "#1a7f37",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --success; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:51"
|
||||
],
|
||||
"sourceName": "--success"
|
||||
},
|
||||
{
|
||||
"name": "--warn",
|
||||
"layer": "A2",
|
||||
"value": "#9a6700",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --warn; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:52"
|
||||
],
|
||||
"sourceName": "--warn"
|
||||
},
|
||||
{
|
||||
"name": "--danger",
|
||||
"layer": "A2",
|
||||
"value": "#cf222e",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --danger; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:53"
|
||||
],
|
||||
"sourceName": "--danger"
|
||||
},
|
||||
{
|
||||
"name": "--font-display",
|
||||
"layer": "A1-identity",
|
||||
"value": "-apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Noto Sans\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --font-display; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:57"
|
||||
],
|
||||
"sourceName": "--font-display"
|
||||
},
|
||||
{
|
||||
"name": "--font-body",
|
||||
"layer": "A1-identity",
|
||||
"value": "-apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Noto Sans\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --font-body; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:58"
|
||||
],
|
||||
"sourceName": "--font-body"
|
||||
},
|
||||
{
|
||||
"name": "--font-mono",
|
||||
"layer": "A2",
|
||||
"value": "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --font-mono; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:59"
|
||||
],
|
||||
"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:64"
|
||||
],
|
||||
"sourceName": "--text-xs"
|
||||
},
|
||||
{
|
||||
"name": "--text-sm",
|
||||
"layer": "A1-structure",
|
||||
"value": "14px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-sm; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:65"
|
||||
],
|
||||
"sourceName": "--text-sm"
|
||||
},
|
||||
{
|
||||
"name": "--text-base",
|
||||
"layer": "A1-structure",
|
||||
"value": "14px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-base; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:66"
|
||||
],
|
||||
"sourceName": "--text-base"
|
||||
},
|
||||
{
|
||||
"name": "--text-lg",
|
||||
"layer": "A1-structure",
|
||||
"value": "16px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-lg; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:67"
|
||||
],
|
||||
"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:68"
|
||||
],
|
||||
"sourceName": "--text-xl"
|
||||
},
|
||||
{
|
||||
"name": "--text-2xl",
|
||||
"layer": "A1-structure",
|
||||
"value": "24px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-2xl; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:69"
|
||||
],
|
||||
"sourceName": "--text-2xl"
|
||||
},
|
||||
{
|
||||
"name": "--text-3xl",
|
||||
"layer": "A1-structure",
|
||||
"value": "28px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-3xl; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:70"
|
||||
],
|
||||
"sourceName": "--text-3xl"
|
||||
},
|
||||
{
|
||||
"name": "--text-4xl",
|
||||
"layer": "A1-structure",
|
||||
"value": "32px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-4xl; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:71"
|
||||
],
|
||||
"sourceName": "--text-4xl"
|
||||
},
|
||||
{
|
||||
"name": "--leading-body",
|
||||
"layer": "A1-structure",
|
||||
"value": "1.5",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --leading-body; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:76"
|
||||
],
|
||||
"sourceName": "--leading-body"
|
||||
},
|
||||
{
|
||||
"name": "--leading-tight",
|
||||
"layer": "A1-structure",
|
||||
"value": "1.25",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --leading-tight; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:77"
|
||||
],
|
||||
"sourceName": "--leading-tight"
|
||||
},
|
||||
{
|
||||
"name": "--tracking-display",
|
||||
"layer": "A1-structure",
|
||||
"value": "-0.01em",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --tracking-display; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:78"
|
||||
],
|
||||
"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:82"
|
||||
],
|
||||
"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:83"
|
||||
],
|
||||
"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:84"
|
||||
],
|
||||
"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:85"
|
||||
],
|
||||
"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:86"
|
||||
],
|
||||
"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:87"
|
||||
],
|
||||
"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:88"
|
||||
],
|
||||
"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:89"
|
||||
],
|
||||
"sourceName": "--space-12"
|
||||
},
|
||||
{
|
||||
"name": "--section-y-desktop",
|
||||
"layer": "A1-structure",
|
||||
"value": "64px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --section-y-desktop; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:92"
|
||||
],
|
||||
"sourceName": "--section-y-desktop"
|
||||
},
|
||||
{
|
||||
"name": "--section-y-tablet",
|
||||
"layer": "A1-structure",
|
||||
"value": "48px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --section-y-tablet; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:93"
|
||||
],
|
||||
"sourceName": "--section-y-tablet"
|
||||
},
|
||||
{
|
||||
"name": "--section-y-phone",
|
||||
"layer": "A1-structure",
|
||||
"value": "32px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --section-y-phone; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:94"
|
||||
],
|
||||
"sourceName": "--section-y-phone"
|
||||
},
|
||||
{
|
||||
"name": "--radius-sm",
|
||||
"layer": "A2",
|
||||
"value": "6px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --radius-sm; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:98"
|
||||
],
|
||||
"sourceName": "--radius-sm"
|
||||
},
|
||||
{
|
||||
"name": "--radius-md",
|
||||
"layer": "A2",
|
||||
"value": "6px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --radius-md; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:99"
|
||||
],
|
||||
"sourceName": "--radius-md"
|
||||
},
|
||||
{
|
||||
"name": "--radius-lg",
|
||||
"layer": "A2",
|
||||
"value": "12px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --radius-lg; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:100"
|
||||
],
|
||||
"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:101"
|
||||
],
|
||||
"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:106"
|
||||
],
|
||||
"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:107"
|
||||
],
|
||||
"sourceName": "--elev-ring"
|
||||
},
|
||||
{
|
||||
"name": "--elev-raised",
|
||||
"layer": "A2",
|
||||
"value": "0 1px 3px rgba(31, 35, 40, 0.12), 0 8px 24px rgba(66, 74, 83, 0.12)",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --elev-raised; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:108"
|
||||
],
|
||||
"sourceName": "--elev-raised"
|
||||
},
|
||||
{
|
||||
"name": "--focus-ring",
|
||||
"layer": "A2",
|
||||
"value": "0 0 0 3px rgba(9, 105, 218, 0.3)",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --focus-ring; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:112"
|
||||
],
|
||||
"sourceName": "--focus-ring"
|
||||
},
|
||||
{
|
||||
"name": "--motion-fast",
|
||||
"layer": "A2",
|
||||
"value": "80ms",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --motion-fast; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:116"
|
||||
],
|
||||
"sourceName": "--motion-fast"
|
||||
},
|
||||
{
|
||||
"name": "--motion-base",
|
||||
"layer": "A2",
|
||||
"value": "200ms",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --motion-base; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:117"
|
||||
],
|
||||
"sourceName": "--motion-base"
|
||||
},
|
||||
{
|
||||
"name": "--ease-standard",
|
||||
"layer": "A2",
|
||||
"value": "ease-out",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --ease-standard; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:118"
|
||||
],
|
||||
"sourceName": "--ease-standard"
|
||||
},
|
||||
{
|
||||
"name": "--container-max",
|
||||
"layer": "A1-structure",
|
||||
"value": "1280px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --container-max; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:121"
|
||||
],
|
||||
"sourceName": "--container-max"
|
||||
},
|
||||
{
|
||||
"name": "--container-gutter-desktop",
|
||||
"layer": "A1-structure",
|
||||
"value": "24px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --container-gutter-desktop; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:122"
|
||||
],
|
||||
"sourceName": "--container-gutter-desktop"
|
||||
},
|
||||
{
|
||||
"name": "--container-gutter-tablet",
|
||||
"layer": "A1-structure",
|
||||
"value": "16px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --container-gutter-tablet; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:123"
|
||||
],
|
||||
"sourceName": "--container-gutter-tablet"
|
||||
},
|
||||
{
|
||||
"name": "--container-gutter-phone",
|
||||
"layer": "A1-structure",
|
||||
"value": "16px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --container-gutter-phone; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:124"
|
||||
],
|
||||
"sourceName": "--container-gutter-phone"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,349 @@
|
||||
{
|
||||
"schemaVersion": 1,
|
||||
"sourceScope": "open-design-bundled-fixture",
|
||||
"brandId": "github",
|
||||
"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:30"
|
||||
},
|
||||
{
|
||||
"name": "--surface",
|
||||
"value": "#f6f8fa",
|
||||
"layer": "A1-identity",
|
||||
"source": "tokens.css:31"
|
||||
},
|
||||
{
|
||||
"name": "--surface-warm",
|
||||
"value": "var(--surface)",
|
||||
"layer": "B-slot",
|
||||
"source": "tokens.css:32"
|
||||
},
|
||||
{
|
||||
"name": "--fg",
|
||||
"value": "#1f2328",
|
||||
"layer": "A1-identity",
|
||||
"source": "tokens.css:35"
|
||||
},
|
||||
{
|
||||
"name": "--fg-2",
|
||||
"value": "#1f2328",
|
||||
"layer": "B-slot",
|
||||
"source": "tokens.css:36"
|
||||
},
|
||||
{
|
||||
"name": "--muted",
|
||||
"value": "#656d76",
|
||||
"layer": "A1-identity",
|
||||
"source": "tokens.css:37"
|
||||
},
|
||||
{
|
||||
"name": "--meta",
|
||||
"value": "#656d76",
|
||||
"layer": "B-slot",
|
||||
"source": "tokens.css:38"
|
||||
},
|
||||
{
|
||||
"name": "--border",
|
||||
"value": "#d0d7de",
|
||||
"layer": "A1-identity",
|
||||
"source": "tokens.css:41"
|
||||
},
|
||||
{
|
||||
"name": "--border-soft",
|
||||
"value": "#d8dee4",
|
||||
"layer": "B-slot",
|
||||
"source": "tokens.css:42"
|
||||
},
|
||||
{
|
||||
"name": "--accent",
|
||||
"value": "#0969da",
|
||||
"layer": "A1-identity",
|
||||
"source": "tokens.css:45"
|
||||
},
|
||||
{
|
||||
"name": "--accent-on",
|
||||
"value": "#ffffff",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:46"
|
||||
},
|
||||
{
|
||||
"name": "--accent-hover",
|
||||
"value": "#0550ae",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:47"
|
||||
},
|
||||
{
|
||||
"name": "--accent-active",
|
||||
"value": "color-mix(in oklab, var(--accent), black 14%)",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:48"
|
||||
},
|
||||
{
|
||||
"name": "--success",
|
||||
"value": "#1a7f37",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:51"
|
||||
},
|
||||
{
|
||||
"name": "--warn",
|
||||
"value": "#9a6700",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:52"
|
||||
},
|
||||
{
|
||||
"name": "--danger",
|
||||
"value": "#cf222e",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:53"
|
||||
},
|
||||
{
|
||||
"name": "--font-display",
|
||||
"value": "-apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Noto Sans\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"",
|
||||
"layer": "A1-identity",
|
||||
"source": "tokens.css:57"
|
||||
},
|
||||
{
|
||||
"name": "--font-body",
|
||||
"value": "-apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Noto Sans\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"",
|
||||
"layer": "A1-identity",
|
||||
"source": "tokens.css:58"
|
||||
},
|
||||
{
|
||||
"name": "--font-mono",
|
||||
"value": "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:59"
|
||||
},
|
||||
{
|
||||
"name": "--text-xs",
|
||||
"value": "12px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:64"
|
||||
},
|
||||
{
|
||||
"name": "--text-sm",
|
||||
"value": "14px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:65"
|
||||
},
|
||||
{
|
||||
"name": "--text-base",
|
||||
"value": "14px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:66"
|
||||
},
|
||||
{
|
||||
"name": "--text-lg",
|
||||
"value": "16px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:67"
|
||||
},
|
||||
{
|
||||
"name": "--text-xl",
|
||||
"value": "20px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:68"
|
||||
},
|
||||
{
|
||||
"name": "--text-2xl",
|
||||
"value": "24px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:69"
|
||||
},
|
||||
{
|
||||
"name": "--text-3xl",
|
||||
"value": "28px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:70"
|
||||
},
|
||||
{
|
||||
"name": "--text-4xl",
|
||||
"value": "32px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:71"
|
||||
},
|
||||
{
|
||||
"name": "--leading-body",
|
||||
"value": "1.5",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:76"
|
||||
},
|
||||
{
|
||||
"name": "--leading-tight",
|
||||
"value": "1.25",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:77"
|
||||
},
|
||||
{
|
||||
"name": "--tracking-display",
|
||||
"value": "-0.01em",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:78"
|
||||
},
|
||||
{
|
||||
"name": "--space-1",
|
||||
"value": "4px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:82"
|
||||
},
|
||||
{
|
||||
"name": "--space-2",
|
||||
"value": "8px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:83"
|
||||
},
|
||||
{
|
||||
"name": "--space-3",
|
||||
"value": "12px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:84"
|
||||
},
|
||||
{
|
||||
"name": "--space-4",
|
||||
"value": "16px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:85"
|
||||
},
|
||||
{
|
||||
"name": "--space-5",
|
||||
"value": "20px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:86"
|
||||
},
|
||||
{
|
||||
"name": "--space-6",
|
||||
"value": "24px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:87"
|
||||
},
|
||||
{
|
||||
"name": "--space-8",
|
||||
"value": "32px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:88"
|
||||
},
|
||||
{
|
||||
"name": "--space-12",
|
||||
"value": "48px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:89"
|
||||
},
|
||||
{
|
||||
"name": "--section-y-desktop",
|
||||
"value": "64px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:92"
|
||||
},
|
||||
{
|
||||
"name": "--section-y-tablet",
|
||||
"value": "48px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:93"
|
||||
},
|
||||
{
|
||||
"name": "--section-y-phone",
|
||||
"value": "32px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:94"
|
||||
},
|
||||
{
|
||||
"name": "--radius-sm",
|
||||
"value": "6px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:98"
|
||||
},
|
||||
{
|
||||
"name": "--radius-md",
|
||||
"value": "6px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:99"
|
||||
},
|
||||
{
|
||||
"name": "--radius-lg",
|
||||
"value": "12px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:100"
|
||||
},
|
||||
{
|
||||
"name": "--radius-pill",
|
||||
"value": "9999px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:101"
|
||||
},
|
||||
{
|
||||
"name": "--elev-flat",
|
||||
"value": "none",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:106"
|
||||
},
|
||||
{
|
||||
"name": "--elev-ring",
|
||||
"value": "0 0 0 1px var(--border)",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:107"
|
||||
},
|
||||
{
|
||||
"name": "--elev-raised",
|
||||
"value": "0 1px 3px rgba(31, 35, 40, 0.12), 0 8px 24px rgba(66, 74, 83, 0.12)",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:108"
|
||||
},
|
||||
{
|
||||
"name": "--focus-ring",
|
||||
"value": "0 0 0 3px rgba(9, 105, 218, 0.3)",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:112"
|
||||
},
|
||||
{
|
||||
"name": "--motion-fast",
|
||||
"value": "80ms",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:116"
|
||||
},
|
||||
{
|
||||
"name": "--motion-base",
|
||||
"value": "200ms",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:117"
|
||||
},
|
||||
{
|
||||
"name": "--ease-standard",
|
||||
"value": "ease-out",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:118"
|
||||
},
|
||||
{
|
||||
"name": "--container-max",
|
||||
"value": "1280px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:121"
|
||||
},
|
||||
{
|
||||
"name": "--container-gutter-desktop",
|
||||
"value": "24px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:122"
|
||||
},
|
||||
{
|
||||
"name": "--container-gutter-tablet",
|
||||
"value": "16px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:123"
|
||||
},
|
||||
{
|
||||
"name": "--container-gutter-phone",
|
||||
"value": "16px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:124"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,137 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>GitHub - Pitch deck</title>
|
||||
<style>
|
||||
:root {
|
||||
--accent: #0969da;
|
||||
--accent-active: color-mix(in oklab, var(--accent), black 14%);
|
||||
--accent-hover: #0550ae;
|
||||
--accent-on: #ffffff;
|
||||
--bg: #ffffff;
|
||||
--border: #d0d7de;
|
||||
--border-soft: #d8dee4;
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-phone: 16px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-max: 1280px;
|
||||
--danger: #cf222e;
|
||||
--ease-standard: ease-out;
|
||||
--elev-flat: none;
|
||||
--elev-raised: 0 1px 3px rgba(31, 35, 40, 0.12), 0 8px 24px rgba(66, 74, 83, 0.12);
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--fg: #1f2328;
|
||||
--fg-2: #1f2328;
|
||||
--focus-ring: 0 0 0 3px rgba(9, 105, 218, 0.3);
|
||||
--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
|
||||
--font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
|
||||
--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
|
||||
--leading-body: 1.5;
|
||||
--leading-tight: 1.25;
|
||||
--meta: #656d76;
|
||||
--motion-base: 200ms;
|
||||
--motion-fast: 80ms;
|
||||
--muted: #656d76;
|
||||
--radius-lg: 12px;
|
||||
--radius-md: 6px;
|
||||
--radius-pill: 9999px;
|
||||
--radius-sm: 6px;
|
||||
--section-y-desktop: 64px;
|
||||
--section-y-phone: 32px;
|
||||
--section-y-tablet: 48px;
|
||||
--space-1: 4px;
|
||||
--space-12: 48px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--success: #1a7f37;
|
||||
--surface: #f6f8fa;
|
||||
--surface-warm: var(--surface);
|
||||
--text-2xl: 24px;
|
||||
--text-3xl: 28px;
|
||||
--text-4xl: 32px;
|
||||
--text-base: 14px;
|
||||
--text-lg: 16px;
|
||||
--text-sm: 14px;
|
||||
--text-xl: 20px;
|
||||
--text-xs: 12px;
|
||||
--tracking-display: -0.01em;
|
||||
--warn: #9a6700;
|
||||
}
|
||||
:root {
|
||||
--od-page-bg: #ffffff;
|
||||
--od-surface: #f6f8fa;
|
||||
--od-text: #1f2328;
|
||||
--od-muted: #656d76;
|
||||
--od-border: #d0d7de;
|
||||
--od-accent: #0969da;
|
||||
--od-radius: 6px;
|
||||
--od-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
|
||||
--od-font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
|
||||
}
|
||||
* { 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>GitHub 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 GitHub, 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="GitHub" /></label></div>
|
||||
<div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,137 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>GitHub - Email</title>
|
||||
<style>
|
||||
:root {
|
||||
--accent: #0969da;
|
||||
--accent-active: color-mix(in oklab, var(--accent), black 14%);
|
||||
--accent-hover: #0550ae;
|
||||
--accent-on: #ffffff;
|
||||
--bg: #ffffff;
|
||||
--border: #d0d7de;
|
||||
--border-soft: #d8dee4;
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-phone: 16px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-max: 1280px;
|
||||
--danger: #cf222e;
|
||||
--ease-standard: ease-out;
|
||||
--elev-flat: none;
|
||||
--elev-raised: 0 1px 3px rgba(31, 35, 40, 0.12), 0 8px 24px rgba(66, 74, 83, 0.12);
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--fg: #1f2328;
|
||||
--fg-2: #1f2328;
|
||||
--focus-ring: 0 0 0 3px rgba(9, 105, 218, 0.3);
|
||||
--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
|
||||
--font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
|
||||
--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
|
||||
--leading-body: 1.5;
|
||||
--leading-tight: 1.25;
|
||||
--meta: #656d76;
|
||||
--motion-base: 200ms;
|
||||
--motion-fast: 80ms;
|
||||
--muted: #656d76;
|
||||
--radius-lg: 12px;
|
||||
--radius-md: 6px;
|
||||
--radius-pill: 9999px;
|
||||
--radius-sm: 6px;
|
||||
--section-y-desktop: 64px;
|
||||
--section-y-phone: 32px;
|
||||
--section-y-tablet: 48px;
|
||||
--space-1: 4px;
|
||||
--space-12: 48px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--success: #1a7f37;
|
||||
--surface: #f6f8fa;
|
||||
--surface-warm: var(--surface);
|
||||
--text-2xl: 24px;
|
||||
--text-3xl: 28px;
|
||||
--text-4xl: 32px;
|
||||
--text-base: 14px;
|
||||
--text-lg: 16px;
|
||||
--text-sm: 14px;
|
||||
--text-xl: 20px;
|
||||
--text-xs: 12px;
|
||||
--tracking-display: -0.01em;
|
||||
--warn: #9a6700;
|
||||
}
|
||||
:root {
|
||||
--od-page-bg: #ffffff;
|
||||
--od-surface: #f6f8fa;
|
||||
--od-text: #1f2328;
|
||||
--od-muted: #656d76;
|
||||
--od-border: #d0d7de;
|
||||
--od-accent: #0969da;
|
||||
--od-radius: 6px;
|
||||
--od-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
|
||||
--od-font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
|
||||
}
|
||||
* { 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>GitHub 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 GitHub, 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="GitHub" /></label></div>
|
||||
<div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,137 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>GitHub - Form page</title>
|
||||
<style>
|
||||
:root {
|
||||
--accent: #0969da;
|
||||
--accent-active: color-mix(in oklab, var(--accent), black 14%);
|
||||
--accent-hover: #0550ae;
|
||||
--accent-on: #ffffff;
|
||||
--bg: #ffffff;
|
||||
--border: #d0d7de;
|
||||
--border-soft: #d8dee4;
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-phone: 16px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-max: 1280px;
|
||||
--danger: #cf222e;
|
||||
--ease-standard: ease-out;
|
||||
--elev-flat: none;
|
||||
--elev-raised: 0 1px 3px rgba(31, 35, 40, 0.12), 0 8px 24px rgba(66, 74, 83, 0.12);
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--fg: #1f2328;
|
||||
--fg-2: #1f2328;
|
||||
--focus-ring: 0 0 0 3px rgba(9, 105, 218, 0.3);
|
||||
--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
|
||||
--font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
|
||||
--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
|
||||
--leading-body: 1.5;
|
||||
--leading-tight: 1.25;
|
||||
--meta: #656d76;
|
||||
--motion-base: 200ms;
|
||||
--motion-fast: 80ms;
|
||||
--muted: #656d76;
|
||||
--radius-lg: 12px;
|
||||
--radius-md: 6px;
|
||||
--radius-pill: 9999px;
|
||||
--radius-sm: 6px;
|
||||
--section-y-desktop: 64px;
|
||||
--section-y-phone: 32px;
|
||||
--section-y-tablet: 48px;
|
||||
--space-1: 4px;
|
||||
--space-12: 48px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--success: #1a7f37;
|
||||
--surface: #f6f8fa;
|
||||
--surface-warm: var(--surface);
|
||||
--text-2xl: 24px;
|
||||
--text-3xl: 28px;
|
||||
--text-4xl: 32px;
|
||||
--text-base: 14px;
|
||||
--text-lg: 16px;
|
||||
--text-sm: 14px;
|
||||
--text-xl: 20px;
|
||||
--text-xs: 12px;
|
||||
--tracking-display: -0.01em;
|
||||
--warn: #9a6700;
|
||||
}
|
||||
:root {
|
||||
--od-page-bg: #ffffff;
|
||||
--od-surface: #f6f8fa;
|
||||
--od-text: #1f2328;
|
||||
--od-muted: #656d76;
|
||||
--od-border: #d0d7de;
|
||||
--od-accent: #0969da;
|
||||
--od-radius: 6px;
|
||||
--od-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
|
||||
--od-font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
|
||||
}
|
||||
* { 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>GitHub 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 GitHub, 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="GitHub" /></label></div>
|
||||
<div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,137 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>GitHub - Landing page</title>
|
||||
<style>
|
||||
:root {
|
||||
--accent: #0969da;
|
||||
--accent-active: color-mix(in oklab, var(--accent), black 14%);
|
||||
--accent-hover: #0550ae;
|
||||
--accent-on: #ffffff;
|
||||
--bg: #ffffff;
|
||||
--border: #d0d7de;
|
||||
--border-soft: #d8dee4;
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-phone: 16px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-max: 1280px;
|
||||
--danger: #cf222e;
|
||||
--ease-standard: ease-out;
|
||||
--elev-flat: none;
|
||||
--elev-raised: 0 1px 3px rgba(31, 35, 40, 0.12), 0 8px 24px rgba(66, 74, 83, 0.12);
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--fg: #1f2328;
|
||||
--fg-2: #1f2328;
|
||||
--focus-ring: 0 0 0 3px rgba(9, 105, 218, 0.3);
|
||||
--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
|
||||
--font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
|
||||
--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
|
||||
--leading-body: 1.5;
|
||||
--leading-tight: 1.25;
|
||||
--meta: #656d76;
|
||||
--motion-base: 200ms;
|
||||
--motion-fast: 80ms;
|
||||
--muted: #656d76;
|
||||
--radius-lg: 12px;
|
||||
--radius-md: 6px;
|
||||
--radius-pill: 9999px;
|
||||
--radius-sm: 6px;
|
||||
--section-y-desktop: 64px;
|
||||
--section-y-phone: 32px;
|
||||
--section-y-tablet: 48px;
|
||||
--space-1: 4px;
|
||||
--space-12: 48px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--success: #1a7f37;
|
||||
--surface: #f6f8fa;
|
||||
--surface-warm: var(--surface);
|
||||
--text-2xl: 24px;
|
||||
--text-3xl: 28px;
|
||||
--text-4xl: 32px;
|
||||
--text-base: 14px;
|
||||
--text-lg: 16px;
|
||||
--text-sm: 14px;
|
||||
--text-xl: 20px;
|
||||
--text-xs: 12px;
|
||||
--tracking-display: -0.01em;
|
||||
--warn: #9a6700;
|
||||
}
|
||||
:root {
|
||||
--od-page-bg: #ffffff;
|
||||
--od-surface: #f6f8fa;
|
||||
--od-text: #1f2328;
|
||||
--od-muted: #656d76;
|
||||
--od-border: #d0d7de;
|
||||
--od-accent: #0969da;
|
||||
--od-radius: 6px;
|
||||
--od-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
|
||||
--od-font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
|
||||
}
|
||||
* { 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>GitHub 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 GitHub, 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="GitHub" /></label></div>
|
||||
<div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,137 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>GitHub - Newsletter</title>
|
||||
<style>
|
||||
:root {
|
||||
--accent: #0969da;
|
||||
--accent-active: color-mix(in oklab, var(--accent), black 14%);
|
||||
--accent-hover: #0550ae;
|
||||
--accent-on: #ffffff;
|
||||
--bg: #ffffff;
|
||||
--border: #d0d7de;
|
||||
--border-soft: #d8dee4;
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-phone: 16px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-max: 1280px;
|
||||
--danger: #cf222e;
|
||||
--ease-standard: ease-out;
|
||||
--elev-flat: none;
|
||||
--elev-raised: 0 1px 3px rgba(31, 35, 40, 0.12), 0 8px 24px rgba(66, 74, 83, 0.12);
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--fg: #1f2328;
|
||||
--fg-2: #1f2328;
|
||||
--focus-ring: 0 0 0 3px rgba(9, 105, 218, 0.3);
|
||||
--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
|
||||
--font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
|
||||
--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
|
||||
--leading-body: 1.5;
|
||||
--leading-tight: 1.25;
|
||||
--meta: #656d76;
|
||||
--motion-base: 200ms;
|
||||
--motion-fast: 80ms;
|
||||
--muted: #656d76;
|
||||
--radius-lg: 12px;
|
||||
--radius-md: 6px;
|
||||
--radius-pill: 9999px;
|
||||
--radius-sm: 6px;
|
||||
--section-y-desktop: 64px;
|
||||
--section-y-phone: 32px;
|
||||
--section-y-tablet: 48px;
|
||||
--space-1: 4px;
|
||||
--space-12: 48px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--success: #1a7f37;
|
||||
--surface: #f6f8fa;
|
||||
--surface-warm: var(--surface);
|
||||
--text-2xl: 24px;
|
||||
--text-3xl: 28px;
|
||||
--text-4xl: 32px;
|
||||
--text-base: 14px;
|
||||
--text-lg: 16px;
|
||||
--text-sm: 14px;
|
||||
--text-xl: 20px;
|
||||
--text-xs: 12px;
|
||||
--tracking-display: -0.01em;
|
||||
--warn: #9a6700;
|
||||
}
|
||||
:root {
|
||||
--od-page-bg: #ffffff;
|
||||
--od-surface: #f6f8fa;
|
||||
--od-text: #1f2328;
|
||||
--od-muted: #656d76;
|
||||
--od-border: #d0d7de;
|
||||
--od-accent: #0969da;
|
||||
--od-radius: 6px;
|
||||
--od-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
|
||||
--od-font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
|
||||
}
|
||||
* { 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>GitHub 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 GitHub, 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="GitHub" /></label></div>
|
||||
<div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,137 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>GitHub - Poster</title>
|
||||
<style>
|
||||
:root {
|
||||
--accent: #0969da;
|
||||
--accent-active: color-mix(in oklab, var(--accent), black 14%);
|
||||
--accent-hover: #0550ae;
|
||||
--accent-on: #ffffff;
|
||||
--bg: #ffffff;
|
||||
--border: #d0d7de;
|
||||
--border-soft: #d8dee4;
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-phone: 16px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-max: 1280px;
|
||||
--danger: #cf222e;
|
||||
--ease-standard: ease-out;
|
||||
--elev-flat: none;
|
||||
--elev-raised: 0 1px 3px rgba(31, 35, 40, 0.12), 0 8px 24px rgba(66, 74, 83, 0.12);
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--fg: #1f2328;
|
||||
--fg-2: #1f2328;
|
||||
--focus-ring: 0 0 0 3px rgba(9, 105, 218, 0.3);
|
||||
--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
|
||||
--font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
|
||||
--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
|
||||
--leading-body: 1.5;
|
||||
--leading-tight: 1.25;
|
||||
--meta: #656d76;
|
||||
--motion-base: 200ms;
|
||||
--motion-fast: 80ms;
|
||||
--muted: #656d76;
|
||||
--radius-lg: 12px;
|
||||
--radius-md: 6px;
|
||||
--radius-pill: 9999px;
|
||||
--radius-sm: 6px;
|
||||
--section-y-desktop: 64px;
|
||||
--section-y-phone: 32px;
|
||||
--section-y-tablet: 48px;
|
||||
--space-1: 4px;
|
||||
--space-12: 48px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--success: #1a7f37;
|
||||
--surface: #f6f8fa;
|
||||
--surface-warm: var(--surface);
|
||||
--text-2xl: 24px;
|
||||
--text-3xl: 28px;
|
||||
--text-4xl: 32px;
|
||||
--text-base: 14px;
|
||||
--text-lg: 16px;
|
||||
--text-sm: 14px;
|
||||
--text-xl: 20px;
|
||||
--text-xs: 12px;
|
||||
--tracking-display: -0.01em;
|
||||
--warn: #9a6700;
|
||||
}
|
||||
:root {
|
||||
--od-page-bg: #ffffff;
|
||||
--od-surface: #f6f8fa;
|
||||
--od-text: #1f2328;
|
||||
--od-muted: #656d76;
|
||||
--od-border: #d0d7de;
|
||||
--od-accent: #0969da;
|
||||
--od-radius: 6px;
|
||||
--od-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
|
||||
--od-font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
|
||||
}
|
||||
* { 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>GitHub 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 GitHub, 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="GitHub" /></label></div>
|
||||
<div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,128 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>GitHub - system assets</title>
|
||||
<style>
|
||||
:root {
|
||||
--accent: #0969da;
|
||||
--accent-active: color-mix(in oklab, var(--accent), black 14%);
|
||||
--accent-hover: #0550ae;
|
||||
--accent-on: #ffffff;
|
||||
--bg: #ffffff;
|
||||
--border: #d0d7de;
|
||||
--border-soft: #d8dee4;
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-phone: 16px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-max: 1280px;
|
||||
--danger: #cf222e;
|
||||
--ease-standard: ease-out;
|
||||
--elev-flat: none;
|
||||
--elev-raised: 0 1px 3px rgba(31, 35, 40, 0.12), 0 8px 24px rgba(66, 74, 83, 0.12);
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--fg: #1f2328;
|
||||
--fg-2: #1f2328;
|
||||
--focus-ring: 0 0 0 3px rgba(9, 105, 218, 0.3);
|
||||
--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
|
||||
--font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
|
||||
--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
|
||||
--leading-body: 1.5;
|
||||
--leading-tight: 1.25;
|
||||
--meta: #656d76;
|
||||
--motion-base: 200ms;
|
||||
--motion-fast: 80ms;
|
||||
--muted: #656d76;
|
||||
--radius-lg: 12px;
|
||||
--radius-md: 6px;
|
||||
--radius-pill: 9999px;
|
||||
--radius-sm: 6px;
|
||||
--section-y-desktop: 64px;
|
||||
--section-y-phone: 32px;
|
||||
--section-y-tablet: 48px;
|
||||
--space-1: 4px;
|
||||
--space-12: 48px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--success: #1a7f37;
|
||||
--surface: #f6f8fa;
|
||||
--surface-warm: var(--surface);
|
||||
--text-2xl: 24px;
|
||||
--text-3xl: 28px;
|
||||
--text-4xl: 32px;
|
||||
--text-base: 14px;
|
||||
--text-lg: 16px;
|
||||
--text-sm: 14px;
|
||||
--text-xl: 20px;
|
||||
--text-xs: 12px;
|
||||
--tracking-display: -0.01em;
|
||||
--warn: #9a6700;
|
||||
}
|
||||
:root {
|
||||
--od-page-bg: #ffffff;
|
||||
--od-surface: #f6f8fa;
|
||||
--od-text: #1f2328;
|
||||
--od-muted: #656d76;
|
||||
--od-border: #d0d7de;
|
||||
--od-accent: #0969da;
|
||||
--od-radius: 6px;
|
||||
--od-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
|
||||
--od-font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
|
||||
}
|
||||
* { 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">Developer Tools</p>
|
||||
<h1>GitHub 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>
|
||||
@@ -0,0 +1,149 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>GitHub - dark component kit</title>
|
||||
<style>
|
||||
:root {
|
||||
--accent: #0969da;
|
||||
--accent-active: color-mix(in oklab, var(--accent), black 14%);
|
||||
--accent-hover: #0550ae;
|
||||
--accent-on: #ffffff;
|
||||
--bg: #ffffff;
|
||||
--border: #d0d7de;
|
||||
--border-soft: #d8dee4;
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-phone: 16px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-max: 1280px;
|
||||
--danger: #cf222e;
|
||||
--ease-standard: ease-out;
|
||||
--elev-flat: none;
|
||||
--elev-raised: 0 1px 3px rgba(31, 35, 40, 0.12), 0 8px 24px rgba(66, 74, 83, 0.12);
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--fg: #1f2328;
|
||||
--fg-2: #1f2328;
|
||||
--focus-ring: 0 0 0 3px rgba(9, 105, 218, 0.3);
|
||||
--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
|
||||
--font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
|
||||
--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
|
||||
--leading-body: 1.5;
|
||||
--leading-tight: 1.25;
|
||||
--meta: #656d76;
|
||||
--motion-base: 200ms;
|
||||
--motion-fast: 80ms;
|
||||
--muted: #656d76;
|
||||
--radius-lg: 12px;
|
||||
--radius-md: 6px;
|
||||
--radius-pill: 9999px;
|
||||
--radius-sm: 6px;
|
||||
--section-y-desktop: 64px;
|
||||
--section-y-phone: 32px;
|
||||
--section-y-tablet: 48px;
|
||||
--space-1: 4px;
|
||||
--space-12: 48px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--success: #1a7f37;
|
||||
--surface: #f6f8fa;
|
||||
--surface-warm: var(--surface);
|
||||
--text-2xl: 24px;
|
||||
--text-3xl: 28px;
|
||||
--text-4xl: 32px;
|
||||
--text-base: 14px;
|
||||
--text-lg: 16px;
|
||||
--text-sm: 14px;
|
||||
--text-xl: 20px;
|
||||
--text-xs: 12px;
|
||||
--tracking-display: -0.01em;
|
||||
--warn: #9a6700;
|
||||
}
|
||||
:root {
|
||||
--od-page-bg: #0f1115;
|
||||
--od-surface: #171a21;
|
||||
--od-text: #f8fafc;
|
||||
--od-muted: #a7adba;
|
||||
--od-border: #2a2f3a;
|
||||
--od-accent: #0969da;
|
||||
--od-radius: 6px;
|
||||
--od-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
|
||||
--od-font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
|
||||
}
|
||||
* { 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">Developer Tools system</p>
|
||||
<h1>GitHub component kit</h1>
|
||||
<p class="lead">Bundled OpenDesign package for GitHub, 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>
|
||||
@@ -0,0 +1,149 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>GitHub - component kit</title>
|
||||
<style>
|
||||
:root {
|
||||
--accent: #0969da;
|
||||
--accent-active: color-mix(in oklab, var(--accent), black 14%);
|
||||
--accent-hover: #0550ae;
|
||||
--accent-on: #ffffff;
|
||||
--bg: #ffffff;
|
||||
--border: #d0d7de;
|
||||
--border-soft: #d8dee4;
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-phone: 16px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-max: 1280px;
|
||||
--danger: #cf222e;
|
||||
--ease-standard: ease-out;
|
||||
--elev-flat: none;
|
||||
--elev-raised: 0 1px 3px rgba(31, 35, 40, 0.12), 0 8px 24px rgba(66, 74, 83, 0.12);
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--fg: #1f2328;
|
||||
--fg-2: #1f2328;
|
||||
--focus-ring: 0 0 0 3px rgba(9, 105, 218, 0.3);
|
||||
--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
|
||||
--font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
|
||||
--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
|
||||
--leading-body: 1.5;
|
||||
--leading-tight: 1.25;
|
||||
--meta: #656d76;
|
||||
--motion-base: 200ms;
|
||||
--motion-fast: 80ms;
|
||||
--muted: #656d76;
|
||||
--radius-lg: 12px;
|
||||
--radius-md: 6px;
|
||||
--radius-pill: 9999px;
|
||||
--radius-sm: 6px;
|
||||
--section-y-desktop: 64px;
|
||||
--section-y-phone: 32px;
|
||||
--section-y-tablet: 48px;
|
||||
--space-1: 4px;
|
||||
--space-12: 48px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--success: #1a7f37;
|
||||
--surface: #f6f8fa;
|
||||
--surface-warm: var(--surface);
|
||||
--text-2xl: 24px;
|
||||
--text-3xl: 28px;
|
||||
--text-4xl: 32px;
|
||||
--text-base: 14px;
|
||||
--text-lg: 16px;
|
||||
--text-sm: 14px;
|
||||
--text-xl: 20px;
|
||||
--text-xs: 12px;
|
||||
--tracking-display: -0.01em;
|
||||
--warn: #9a6700;
|
||||
}
|
||||
:root {
|
||||
--od-page-bg: #ffffff;
|
||||
--od-surface: #f6f8fa;
|
||||
--od-text: #1f2328;
|
||||
--od-muted: #656d76;
|
||||
--od-border: #d0d7de;
|
||||
--od-accent: #0969da;
|
||||
--od-radius: 6px;
|
||||
--od-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
|
||||
--od-font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
|
||||
}
|
||||
* { 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">Developer Tools system</p>
|
||||
<h1>GitHub component kit</h1>
|
||||
<p class="lead">Bundled OpenDesign package for GitHub, 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>
|
||||
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"colorPrimary": "#0969da",
|
||||
"colorPrimaryBg": "var(--surface)",
|
||||
"colorPrimaryHover": "#0550ae",
|
||||
"colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)",
|
||||
"fontSize": 14,
|
||||
"borderRadius": 6
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
@@ -0,0 +1,125 @@
|
||||
/* ─────────────────────────────────────────────────────────────────────────
|
||||
* design-systems/github/tokens.css
|
||||
*
|
||||
* Structured token bindings for the "GitHub" brand — Primer foundations,
|
||||
* functional density, blue-on-white precision.
|
||||
*
|
||||
* Brand identity in three sentences:
|
||||
* 1. True white canvas (#ffffff) with a clean canvas-subtle (#f6f8fa)
|
||||
* secondary surface; hairline borders (#d0d7de) define every pane
|
||||
* — density over decoration, information over aesthetics.
|
||||
* 2. System-ui stack throughout — no custom webfont; type renders at
|
||||
* instant on every OS; 14px body (not 16px) is the identity.
|
||||
* 3. Primer blue (#0969da) for all interactive affordances; GitHub
|
||||
* green (#1a7f37) reserved for success/merge states only.
|
||||
*
|
||||
* Schema decisions:
|
||||
* - --bg: #ffffff; --surface: #f6f8fa (canvas-subtle).
|
||||
* - --surface-warm aliases --surface (no warm tier in Primer).
|
||||
* - --fg: #1f2328 (fg-default); --muted: #656d76 (fg-muted).
|
||||
* - --border: #d0d7de (1px hairline — the structural backbone).
|
||||
* - --accent: #0969da (Primer Blue); --accent-hover: #0550ae.
|
||||
* - --success bound to GitHub green (#1a7f37) — merge / open state.
|
||||
* - --tracking-display: -0.01em (only display-size headings use it).
|
||||
* - --text-base: 14px (the 14px body IS GitHub's product density).
|
||||
* - --radius-sm: 6px (universal Primer radius for buttons/inputs).
|
||||
* ─────────────────────────────────────────────────────────────────── */
|
||||
|
||||
:root {
|
||||
/* ─── Surface ──────────────────────────────────────────────────── */
|
||||
--bg: #ffffff;
|
||||
--surface: #f6f8fa; /* canvas-subtle — sidebar, input bg */
|
||||
--surface-warm: var(--surface); /* Primer has no warm tier */
|
||||
|
||||
/* ─── Foreground ───────────────────────────────────────────────── */
|
||||
--fg: #1f2328; /* fg-default — ink */
|
||||
--fg-2: #1f2328; /* same ink; no B-slot split in Primer */
|
||||
--muted: #656d76; /* fg-muted — captions, file paths */
|
||||
--meta: #656d76; /* same muted tier */
|
||||
|
||||
/* ─── Border ───────────────────────────────────────────────────── */
|
||||
--border: #d0d7de; /* border-default — hairline structural */
|
||||
--border-soft: #d8dee4; /* border-muted — inner panel dividers */
|
||||
|
||||
/* ─── Accent ───────────────────────────────────────────────────── */
|
||||
--accent: #0969da; /* Primer Blue — links, primary CTAs */
|
||||
--accent-on: #ffffff;
|
||||
--accent-hover: #0550ae; /* darker pressed state */
|
||||
--accent-active: color-mix(in oklab, var(--accent), black 14%);
|
||||
|
||||
/* ─── Semantic ─────────────────────────────────────────────────── */
|
||||
--success: #1a7f37; /* GitHub green — merge, open, success */
|
||||
--warn: #9a6700; /* attention amber text */
|
||||
--danger: #cf222e; /* closed / destructive red */
|
||||
|
||||
/* ─── Typography ───────────────────────────────────────────────── */
|
||||
/* System fonts only — no webfonts load in GitHub. */
|
||||
--font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
|
||||
--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
|
||||
--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
|
||||
|
||||
/* Type scale — DESIGN.md §Typography.
|
||||
* GitHub's prose density: 14px body (not 16px). Display sits at 32px.
|
||||
* h2 (20px) and h3 (16px) collapse close together for density. */
|
||||
--text-xs: 12px; /* body-small — captions, metadata */
|
||||
--text-sm: 14px; /* body — default UI (GitHub's base) */
|
||||
--text-base: 14px; /* body baseline = 14px for density */
|
||||
--text-lg: 16px; /* h3 / panel header */
|
||||
--text-xl: 20px; /* h2 — section heading */
|
||||
--text-2xl: 24px; /* h1 — page heading */
|
||||
--text-3xl: 28px; /* subpage display */
|
||||
--text-4xl: 32px; /* display — repo header / hero */
|
||||
|
||||
/* Leading + tracking.
|
||||
* GitHub uses 1.25 for headings (tight-but-readable), 1.5 for body.
|
||||
* Only display gets the -0.01em tracking. */
|
||||
--leading-body: 1.5;
|
||||
--leading-tight: 1.25;
|
||||
--tracking-display: -0.01em;
|
||||
|
||||
/* ─── Spacing ──────────────────────────────────────────────────── */
|
||||
/* 4px base grid — Primer spacing. Row padding 16px h, 12px v. */
|
||||
--space-1: 4px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--space-12: 48px;
|
||||
|
||||
/* Section rhythm — GitHub marketing pages. */
|
||||
--section-y-desktop: 64px;
|
||||
--section-y-tablet: 48px;
|
||||
--section-y-phone: 32px;
|
||||
|
||||
/* ─── Radius ───────────────────────────────────────────────────── */
|
||||
/* 6px is the universal Primer radius for all interactive elements. */
|
||||
--radius-sm: 6px;
|
||||
--radius-md: 6px;
|
||||
--radius-lg: 12px;
|
||||
--radius-pill: 9999px;
|
||||
|
||||
/* ─── Elevation ────────────────────────────────────────────────── */
|
||||
/* GitHub uses hairline borders, not shadows, as the primary depth
|
||||
signal. --elev-raised is a whisper for the rare floating element. */
|
||||
--elev-flat: none;
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--elev-raised: 0 1px 3px rgba(31, 35, 40, 0.12), 0 8px 24px rgba(66, 74, 83, 0.12);
|
||||
|
||||
/* ─── Focus ────────────────────────────────────────────────────── */
|
||||
/* Primer focus: 3px rgba ring on the accent color. */
|
||||
--focus-ring: 0 0 0 3px rgba(9, 105, 218, 0.3);
|
||||
|
||||
/* ─── Motion ───────────────────────────────────────────────────── */
|
||||
/* GitHub avoids animation. 80ms hover, 200ms open — short and purposeful. */
|
||||
--motion-fast: 80ms;
|
||||
--motion-base: 200ms;
|
||||
--ease-standard: ease-out;
|
||||
|
||||
/* ─── Layout ───────────────────────────────────────────────────── */
|
||||
--container-max: 1280px;
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-gutter-phone: 16px;
|
||||
}
|
||||
Reference in new issue
Block a user