admin/workbuddy_skills
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
一、④段整套同步（用户选候选 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 2026-10-15 21:17:28 +08:00
1 parent fa0a9026c8
commit 5afeb6b78a
4184 files changed
+326 -70
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

open-design/design-systems/pinterest/DESIGN-ar.md
+233
View File
@@ -0,0 +1,233 @@
# نظام التصميم المستوحى من Pinterest
> Category: Media & Consumer
> الاكتشاف البصري. لهجة حمراء، شبكة ماسونري، الصورة في المقدمة.
## 1. الثيم البصري والجو العام
يُعدّ موقع Pinterest لوحة فنية دافئة مُلهِمة تُعامل الاكتشاف البصري بوصفه مجلةً لأسلوب الحياة. يعتمد التصميم على خلفية بيضاء ناعمة دافئة قليلاً، مع Pinterest Red (`#e60023`) بوصفها الإضافةَ الجريئةَ الوحيدة للعلامة التجارية. على عكس الدرجات الزرقاء الباردة لمعظم المنصات التقنية، تحمل المقياسُ المحايد لـ Pinterest نبرةً دافئةً واضحةً — تميل الرماديات نحو الزيتوني/الرملي (`#91918c`، `#62625b`، `#e5e5e0`) بدلاً من الفولاذ البارد، مما يُفضي إلى جو مريح يُشبه الحِرَف اليدوية ويدعو إلى الاستكشاف.
تستخدم الطباعة خطَّ Pin Sans — خط مخصص ومحمي الملكية مع مكدس بديل واسع يشمل خطوطاً يابانية، مما يعكس الانتشار العالمي لـ Pinterest. على مقياس العرض (70px، وزن 600)، يُنشئ Pin Sans عناوين كبيرة وجذابة. على الأحجام الأصغر، يكون النظام مضغوطاً: الأزرار بـ 12px، والتعليقات بـ 12–14px. يكشف نظام تسمية متغيرات CSS (`--comp-*`، `--sema-*`، `--base-*`) عن بنية رموز تصميم متطورة من ثلاث طبقات: رموز مستوى المكوّن، والدلالي، والأساسي.
ما يُميّز Pinterest هو نظامه السخي لنصف قطر الحواف (12px–40px، إضافةً إلى 50% للدوائر) وخلفيات الأزرار ذات الدرجات الدافئة. يتميز الزر الثانوي (`#e5e5e0`) بنبرة رملية دافئة وليس رمادياً بارداً. يستخدم الزر الأحمر الأساسي نصف قطر 16px — مُدوَّر لكن ليس بشكل كبسولي. إلى جانب خلفيات الشارات الدافئة (`hsla(60,20%,98%,.5)` — غسيل أصفر-دافئ خفيف) والتخطيطات التي تهيمن عليها الصور، تكون النتيجة تصميماً يبدو مصنوعاً يدوياً وشخصياً، لا مؤسسياً ومعقّماً.
**الخصائص الرئيسية:**
- لوحة بيضاء دافئة مع محايدات ذات نبرة زيتونية/رملية — مريحة لا سريرية
- Pinterest Red (`#e60023`) بوصفها اللهجة الجريئة الوحيدة — لا تكون أبداً خفيةً، بل دائماً واثقة
- خط Pin Sans المخصص مع مكدس بديل عالمي (يشمل CJK)
- بنية رموز ثلاثية الطبقات: `--comp-*` / `--sema-*` / `--base-*`
- أسطح ثانوية دافئة: رمادي رملي (`#e5e5e0`)، شارة دافئة (`hsla(60,20%,98%,.5)`)
- حواف سخية: 16px قياسية، تصل إلى 40px للحاويات الكبيرة
- محتوى يُقدِّم الصورة أولاً — الدبابيس/الصور هي العنصر البصري الأساسي
- نص أرجواني داكن تقريباً (`#211922`) — دافئ مع لمسة برقوقية
## 2. لوحة الألوان والأدوار
### العلامة التجارية الأساسية
- **Pinterest Red** (`#e60023`): CTA الأساسية، لهجة العلامة التجارية — أحمر جريء وواثق
- **Green 700** (`#103c25`): `--base-color-green-700`، لهجة النجاح/الطبيعة
- **Green 700 Hover** (`#0b2819`): `--base-color-hover-green-700`، أخضر مضغوط
### النص
- **الأسود البرقوقي** (`#211922`): النص الأساسي — شبه أسود دافئ بنبرة برقوقية
- **الأسود** (`#000000`): النص الثانوي، نص الأزرار
- **الرمادي الزيتوني** (`#62625b`): أوصاف ثانوية، نص مكتوم
- **الفضي الدافئ** (`#91918c`): `--comp-button-color-text-transparent-disabled`، نص معطَّل، حدود الإدخال
- **الأبيض** (`#ffffff`): نص على الأسطح الداكنة/الملوّنة
### التفاعلية
- **الأزرق البؤري** (`#435ee5`): `--comp-button-color-border-focus-outer-transparent`، حلقات التركيز
- **البنفسجي للأداء** (`#6845ab`): `--sema-color-hover-icon-performance-plus`، ميزات الأداء
- **البنفسجي للتوصية** (`#7e238b`): `--sema-color-hover-text-recommendation`، توصية الذكاء الاصطناعي
- **أزرق الروابط** (`#2b48d4`): لون نص الروابط
- **أزرق فيسبوك** (`#0866ff`): `--facebook-background-color`، تسجيل الدخول الاجتماعي
- **الأزرق المضغوط** (`#617bff`): `--base-color-pressed-blue-200`، الحالة المضغوطة
### السطح والحدود
- **الرمادي الرملي** (`#e5e5e0`): خلفية الزر الثانوي — دافئ يُشبه الحِرَف
- **الضوء الدافئ** (`#e0e0d9`): خلفيات الأزرار الدائرية، الشارات
- **الغسيل الدافئ** (`hsla(60, 20%, 98%, 0.5)`): `--comp-badge-color-background-wash-light`، خلفية شارة دافئة خفيفة
- **الضباب** (`#f6f6f3`): سطح فاتح (عند شفافية 50%)
- **حدود معطَّلة** (`#c8c8c1`): `--sema-color-border-disabled`، حدود معطَّلة
- **رمادي التحويم** (`#bcbcb3`): `--base-color-hover-grayscale-150`، حدود التحويم
- **السطح الداكن** (`#33332e`): خلفيات الأقسام الداكنة
### الدلالية
- **الأحمر للخطأ** (`#9e0a0a`): حالات خطأ خانة الاختيار/النموذج
## 3. قواعد الطباعة
### عائلة الخط
- **الأساسي**: `Pin Sans`، البدائل: `-apple-system, system-ui, Segoe UI, Roboto, Oxygen-Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Arial`
### التسلسل الهرمي
| الدور | الخط | الحجم | الوزن | ارتفاع السطر | تباعد الحروف | ملاحظات |
|-------|------|-------|-------|--------------|-------------|---------|
| عنوان العرض الرئيسي | Pin Sans | 70px (4.38rem) | 600 | عادي | عادي | أقصى تأثير |
| عنوان القسم | Pin Sans | 28px (1.75rem) | 700 | عادي | -1.2px | تتبع سلبي |
| المحتوى | Pin Sans | 16px (1.00rem) | 400 | 1.40 | عادي | قراءة قياسية |
| تعليق غامق | Pin Sans | 14px (0.88rem) | 700 | عادي | عادي | بيانات تعريفية قوية |
| تعليق | Pin Sans | 12px (0.75rem) | 400–500 | 1.50 | عادي | نص صغير، وسوم |
| زر | Pin Sans | 12px (0.75rem) | 400 | عادي | عادي | تسميات الأزرار |
### المبادئ
- **مقياس نصي مضغوط**: يتراوح النطاق بين 12px و70px مع قفزة درامية — معظم النص الوظيفي بين 12–16px، مما يُنشئ تسلسلاً هرمياً للمعلومات كثيفاً يُشبه التطبيقات.
- **توزيع الوزن الدافئ**: 600–700 للعناوين، 400–500 للمحتوى. لا أوزان خفيفة جداً — الطباعة دائماً ذات ثقل محسوس.
- **التتبع السلبي في العناوين**: -1.2px على عناوين 28px يُنشئ عناوين أقسام مريحة وحميمة.
- **عائلة خط واحدة**: يتولى Pin Sans كل شيء — لم يُرصَد خط عرض ثانوي أو أحادي المسافة.
## 4. أنماط المكوّنات
### الأزرار
**الأحمر الأساسي**
- الخلفية: `#e60023` (Pinterest Red)
- النص: `#000000` (أسود — اختيار غير معتاد للتباين على الأحمر)
- الحشو: 6px 14px
- نصف القطر: 16px (مُدوَّر بسخاء، ليس كبسولياً)
- الحدود: `2px solid rgba(255, 255, 255, 0)` (شفاف)
- التركيز: حدود دلالية + مخطط تفصيلي عبر متغيرات CSS
**الرمادي الرملي الثانوي**
- الخلفية: `#e5e5e0` (رمادي رملي دافئ)
- النص: `#000000`
- الحشو: 6px 14px
- نصف القطر: 16px
- التركيز: نفس نظام الحدود الدلالية
**الإجراء الدائري**
- الخلفية: `#e0e0d9` (ضوء دافئ)
- النص: `#211922` (أسود برقوقي)
- نصف القطر: 50% (دائرة)
- الاستخدام: إجراءات الدبابيس، ضوابط التنقل
**Ghost / شفاف**
- الخلفية: شفاف
- النص: `#000000`
- بلا حدود
- الاستخدام: الإجراءات الثالثية
### البطاقات والحاويات
- بطاقات دبابيس تُقدِّم الصور أولاً مع نصف قطر سخي (12px–20px)
- لا box-shadow تقليدي على معظم البطاقات
- خلفيات بيضاء أو ضبابية دافئة
- حدود بيضاء سميكة بـ 8px على بعض حاويات الصور
### حقول الإدخال
- إدخال البريد الإلكتروني: خلفية بيضاء، حدود `1px solid #91918c`، نصف قطر 16px، حشو 11px 15px
- التركيز: نظام حدود ومخطط تفصيلي دلالي عبر متغيرات CSS
### التنقل
- رأس نظيف على خلفية بيضاء أو دافئة
- شعار Pinterest + شريط البحث في المنتصف
- Pin Sans بـ 16px لروابط التنقل
- لهجات Pinterest Red للحالات النشطة
### معالجة الصور
- شبكة ماسونري بأسلوب الدبابيس (تخطيط Pinterest المميز)
- زوايا مُدوَّرة: 12px–20px على الصور
- الصور الفوتوغرافية كمحتوى أساسي — كل دبوس صورة
- حدود بيضاء سميكة (8px) على حاويات الصور البارزة
## 5. مبادئ التخطيط
### نظام التباعد
- الوحدة الأساسية: 8px
- المقياس: 4px، 6px، 7px، 8px، 10px، 11px، 12px، 16px، 18px، 20px، 22px، 24px، 32px، 80px، 100px
- قفزات كبيرة: 32px → 80px → 100px لتباعد الأقسام
### الشبكة والحاوية
- شبكة ماسونري لمحتوى الدبابيس (التخطيط المميز)
- أقسام محتوى في المنتصف مع أقصى عرض سخي
- تذييل داكن بعرض كامل
- شريط البحث كعنصر تنقل أساسي
### فلسفة المساحة البيضاء
- **كثافة الإلهام**: تُحزِّم شبكة ماسونري الدبابيس بإحكام — كثافة المحتوى هي القيمة المُقدَّمة. المساحة البيضاء موجودة بين الأقسام، لا داخل الشبكة.
- **تنفس في الأعلى، كثافة في الأسفل**: تحصل أقسام البطل/الميزات على حشو سخي؛ شبكة الدبابيس مضغوطة وغامرة.
### مقياس نصف قطر الحواف
- قياسي (12px): بطاقات صغيرة، روابط
- زر (16px): أزرار، مدخلات، بطاقات متوسطة
- مريح (20px): بطاقات الميزات
- كبير (28px): حاويات كبيرة
- قسم (32px): عناصر التبويب، لوحات كبيرة
- بطل (40px): حاويات البطل، كتل ميزات كبيرة
- دائرة (50%): أزرار الإجراء، مؤشرات التبويب
## 6. العمق والارتفاع
| المستوى | المعالجة | الاستخدام |
|---------|----------|-----------|
| مسطح (المستوى 0) | بلا ظل | الافتراضي — تعتمد الدبابيس على المحتوى لا الظل |
| خفيف (المستوى 1) | ظل بسيط (من الرموز) | تراكبات مرفوعة، قوائم منسدلة |
| التركيز (إمكانية الوصول) | حلقة `--sema-color-border-focus-outer-default` | حالات التركيز |
**فلسفة الظلال**: يستخدم Pinterest ظلالاً بسيطة. تعتمد شبكة ماسونري على المحتوى (الصور الفوتوغرافية) لخلق الاهتمام البصري بدلاً من تأثيرات الارتفاع. يأتي العمق من دفء ألوان الأسطح والتدوير السخي للحاويات.
## 7. ما يجب فعله وما يجب تجنبه
### افعل
- استخدم المحايدات الدافئة (`#e5e5e0`، `#e0e0d9`، `#91918c`) — النبرة الزيتونية/الرملية الدافئة هي الهوية
- طبِّق Pinterest Red (`#e60023`) فقط على CTA الأساسية — إنها جريئة وفريدة
- استخدم Pin Sans حصرياً — خط واحد لكل شيء
- طبِّق نصف قطر حواف سخياً: 16px للأزرار/المدخلات، 20px+ للبطاقات
- احتفظ بكثافة شبكة ماسونري — كثافة المحتوى هي القيمة
- استخدم خلفيات الشارات الدافئة (`hsla(60,20%,98%,.5)`) للغسيل الدافئ الخفيف
- استخدم `#211922` (الأسود البرقوقي) للنص الأساسي — إنه أدفأ من الأسود الخالص
### لا تفعل
- لا تستخدم محايدات رمادية باردة — دائماً نبرة دافئة/زيتونية
- لا تستخدم الأسود الخالص (`#000000`) كنص أساسي — استخدم الأسود البرقوقي (`#211922`)
- لا تستخدم أزرار كبسولية الشكل — نصف قطر 16px مُدوَّر لكن ليس كبسولياً
- لا تضف ظلالاً ثقيلة — Pinterest مسطح بالتصميم، العمق من المحتوى
- لا تستخدم نصف قطر حواف صغيراً (<12px) على البطاقات — التدوير السخي أساسي
- لا تُدخل ألواناً إضافية للعلامة التجارية — الأحمر + المحايدات الدافئة هو اللوح الكامل
- لا تستخدم أوزان خطوط رفيعة — Pin Sans بحد أدنى 400
## 8. السلوك المتجاوب
### نقاط التوقف
| الاسم | العرض | التغييرات الرئيسية |
|-------|-------|------------------|
| جوال | <576px | عمود واحد، تخطيط مضغوط |
| جوال كبير | 576–768px | شبكة دبابيس بعمودين |
| جهاز لوحي | 768–890px | شبكة موسعة |
| سطح مكتب صغير | 890–1312px | شبكة ماسونري قياسية |
| سطح مكتب | 1312–1440px | التخطيط الكامل |
| سطح مكتب كبير | 1440–1680px | أعمدة شبكة موسعة |
| عريض جداً | >1680px | أقصى كثافة للشبكة |
### استراتيجية الطي
- شبكة الدبابيس: 5+ أعمدة → 3 → 2 → 1
- التنقل: شريط البحث + الأيقونات → تنقل جوال مبسط
- أقسام الميزات: جنباً إلى جنب → مكدسة
- البطل: 70px → يتقلص بالتناسب
- التذييل: داكن متعدد الأعمدة → مكدس
## 9. دليل أوامر الوكيل
### مرجع الألوان السريع
- العلامة التجارية: Pinterest Red (`#e60023`)
- الخلفية: أبيض (`#ffffff`)
- النص: الأسود البرقوقي (`#211922`)
- النص الثانوي: الرمادي الزيتوني (`#62625b`)
- سطح الزر: الرمادي الرملي (`#e5e5e0`)
- الحدود: الفضي الدافئ (`#91918c`)
- التركيز: الأزرق البؤري (`#435ee5`)
### أمثلة على أوامر المكوّنات
- "أنشئ قسم بطل: خلفية بيضاء. عنوان بـ 70px من خط Pin Sans وزن 600، أسود برقوقي (#211922). زر CTA أحمر (#e60023، نصف قطر 16px، حشو 6px 14px). زر رملي ثانوي (#e5e5e0، نصف قطر 16px)."
- "صمِّم بطاقة دبوس: خلفية بيضاء، نصف قطر 16px، بلا ظل. تملأ الصورة الجزء العلوي، وصف بـ 16px Pin Sans وزن 400 أسفله في #62625b."
- "ابنِ زر إجراء دائري: خلفية #e0e0d9، نصف قطر 50%، أيقونة #211922."
- "أنشئ حقل إدخال: خلفية بيضاء، 1px solid #91918c، نصف قطر 16px، حشو 11px 15px. التركيز: مخطط تفصيلي أزرق عبر رموز دلالية."
- "صمِّم التذييل الداكن: خلفية #33332e. شعار Pinterest بالنص الأبيض. روابط بـ 12px Pin Sans في #91918c."
### دليل التكرار
1. محايدات دافئة في كل مكان — رماديات زيتونية/رملية، لا فولاذ بارد أبداً
2. Pinterest Red للـ CTA فقط — جريء وفريد
3. نصف قطر 16px على الأزرار/المدخلات، 20px+ على البطاقات — سخي لكن ليس كبسولياً
4. Pin Sans هو الخط الوحيد — مضغوط بـ 12px للواجهة، 70px للعرض
5. الصور تحمل التصميم — تبقى الواجهة دافئة وبسيطة
6. الأسود البرقوقي (#211922) للنص — أدفأ من الأسود الخالص
open-design/design-systems/pinterest/DESIGN-de.md
+233
View File
@@ -0,0 +1,233 @@
# Von Pinterest inspiriertes Designsystem
> Category: Medien & Konsumenten
> Visuelle Entdeckung. Roter Akzent, Masonry-Grid, Bild-zuerst.
## 1. Visuelles Thema & Atmosphäre
Pinterests Website ist eine warme, inspirationsgetriebene Leinwand, die visuelle Entdeckung wie ein Lifestyle-Magazin behandelt. Das Design basiert auf einem weichen, leicht warmen weißen Hintergrund mit Pinterest-Rot (`#e60023`) als einzigem, kräftigem Markenakzent. Im Gegensatz zu den kühlen Blautönen der meisten Tech-Plattformen hat Pinterests Neutralskala einen deutlich warmen Unterton — Grautöne neigen eher zu Oliv/Sand (`#91918c`, `#62625b`, `#e5e5e0`) als zu kühlem Stahl, was eine gemütliche, handwerkliche Atmosphäre erzeugt, die zum Stöbern einlädt.
Die Typografie verwendet Pin Sans — eine benutzerdefinierte proprietäre Schrift mit einem breiten Fallback-Stack einschließlich japanischer Schriften, was Pinterests globale Reichweite widerspiegelt. Im Display-Maßstab (70px, Stärke 600) erzeugt Pin Sans große, einladende Überschriften. Bei kleineren Größen ist das System kompakt: Schaltflächen bei 12px, Bildunterschriften bei 12–14px. Das CSS-Variablenbenennungssystem (`--comp-*`, `--sema-*`, `--base-*`) offenbart eine ausgefeilte dreistufige Design-Token-Architektur: Komponenten-, Semantik- und Basistoken.
Was Pinterest auszeichnet, ist sein großzügiges Rahmenradius-System (12px–40px, plus 50% für Kreise) und warme, getönte Schaltflächenhintergründe. Der Sekundärknopf (`#e5e5e0`) hat einen deutlich warmen, sandähnlichen Ton statt kaltem Grau. Der primäre rote Knopf verwendet 16px Radius — gerundet, aber nicht pillenförmig. Kombiniert mit warmen Badge-Hintergründen (`hsla(60,20%,98%,.5)` — ein subtiler gelb-warmer Wash) und fotografiedominierten Layouts entsteht ein Design, das handgefertigt und persönlich wirkt, nicht korporativ und steril.
**Wesentliche Merkmale:**
- Warme weiße Leinwand mit Oliv/Sand-getönten Neutralfarben — gemütlich, nicht klinisch
- Pinterest-Rot (`#e60023`) als einziger kräftiger Akzent — niemals subtil, immer selbstbewusst
- Pin-Sans-Schrift mit globalem Fallback-Stack (einschließlich CJK)
- Dreistufige Token-Architektur: `--comp-*` / `--sema-*` / `--base-*`
- Warme Sekundäroberflächen: Sandgrau (`#e5e5e0`), warmes Badge (`hsla(60,20%,98%,.5)`)
- Großzügiger Rahmenradius: 16px Standard, bis zu 40px für große Container
- Fotografie-zuerst-Inhalt — Pins/Bilder sind das primäre visuelle Element
- Dunkler Nah-Lila-Text (`#211922`) — warm, mit einem Hauch von Pflaume
## 2. Farbpalette & Rollen
### Primäre Marke
- **Pinterest-Rot** (`#e60023`): Primäres CTA, Markenakzent — kräftiges, selbstbewusstes Rot
- **Grün 700** (`#103c25`): `--base-color-green-700`, Erfolgs-/Naturakzent
- **Grün 700 Hover** (`#0b2819`): `--base-color-hover-green-700`, gedrücktes Grün
### Text
- **Pflaumenschwarz** (`#211922`): Primärtext — warmes Nahschwarz mit Pflaumenunterton
- **Schwarz** (`#000000`): Sekundärtext, Schaltflächentext
- **Olivgrau** (`#62625b`): Sekundärbeschreibungen, gedämpfter Text
- **Warmsilber** (`#91918c`): `--comp-button-color-text-transparent-disabled`, deaktivierter Text, Eingaberahmen
- **Weiß** (`#ffffff`): Text auf dunklen/farbigen Oberflächen
### Interaktiv
- **Fokusblau** (`#435ee5`): `--comp-button-color-border-focus-outer-transparent`, Fokusringe
- **Leistungslila** (`#6845ab`): `--sema-color-hover-icon-performance-plus`, Leistungsmerkmale
- **Empfehlungslila** (`#7e238b`): `--sema-color-hover-text-recommendation`, KI-Empfehlung
- **Linkblau** (`#2b48d4`): Linktextfarbe
- **Facebook-Blau** (`#0866ff`): `--facebook-background-color`, Soziales Login
- **Gedrücktes Blau** (`#617bff`): `--base-color-pressed-blue-200`, gedrückter Zustand
### Oberfläche & Rahmen
- **Sandgrau** (`#e5e5e0`): Sekundärer Schaltflächenhintergrund — warm, handwerklich
- **Warmes Licht** (`#e0e0d9`): Kreisschaltflächenhintergründe, Badges
- **Warmer Wash** (`hsla(60, 20%, 98%, 0.5)`): `--comp-badge-color-background-wash-light`, subtiler warmer Badge-Hintergrund
- **Nebel** (`#f6f6f3`): Helle Oberfläche (50% Deckkraft)
- **Rahmen deaktiviert** (`#c8c8c1`): `--sema-color-border-disabled`, deaktivierte Rahmen
- **Hover-Grau** (`#bcbcb3`): `--base-color-hover-grayscale-150`, Hover-Rahmen
- **Dunkle Oberfläche** (`#33332e`): Hintergründe dunkler Abschnitte
### Semantisch
- **Fehlerrot** (`#9e0a0a`): Kontrollkästchen/Formularfehlerzustände
## 3. Typografieregeln
### Schriftfamilie
- **Primär**: `Pin Sans`, Fallbacks: `-apple-system, system-ui, Segoe UI, Roboto, Oxygen-Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Arial`
### Hierarchie
| Rolle | Schrift | Größe | Stärke | Zeilenhöhe | Buchstabenabstand | Hinweise |
|------|------|------|--------|-------------|----------------|-------|
| Display-Hero | Pin Sans | 70px (4,38rem) | 600 | normal | normal | Maximaler Eindruck |
| Abschnittsüberschrift | Pin Sans | 28px (1,75rem) | 700 | normal | -1,2px | Negativer Tracking |
| Fließtext | Pin Sans | 16px (1,00rem) | 400 | 1,40 | normal | Standardlesen |
| Bildunterschrift Fett | Pin Sans | 14px (0,88rem) | 700 | normal | normal | Starke Metadaten |
| Bildunterschrift | Pin Sans | 12px (0,75rem) | 400–500 | 1,50 | normal | Kleiner Text, Tags |
| Schaltfläche | Pin Sans | 12px (0,75rem) | 400 | normal | normal | Schaltflächenbeschriftungen |
### Grundsätze
- **Kompakter Typmaßstab**: Der Bereich ist 12px–70px mit einem dramatischen Sprung — der meiste Funktionstext liegt bei 12–16px und schafft eine dichte, app-ähnliche Informationshierarchie.
- **Warme Gewichtsverteilung**: 600–700 für Überschriften, 400–500 für Fließtext. Keine ultraleichten Gewichte — die Schrift fühlt sich immer substanziell an.
- **Negativer Tracking bei Überschriften**: -1,2px bei 28px-Überschriften erzeugt gemütliche, intime Abschnittstitel.
- **Einzelne Schriftfamilie**: Pin Sans übernimmt alles — keine Sekundär-Display- oder Monospace-Schrift erkannt.
## 4. Komponentenstile
### Schaltflächen
**Primäres Rot**
- Hintergrund: `#e60023` (Pinterest-Rot)
- Text: `#000000` (Schwarz — ungewöhnliche Wahl für den Kontrast auf Rot)
- Innenabstand: 6px 14px
- Radius: 16px (großzügig gerundet, nicht pillenförmig)
- Rahmen: `2px solid rgba(255, 255, 255, 0)` (transparent)
- Fokus: semantischer Rahmen + Umriss über CSS-Variablen
**Sekundäres Sand**
- Hintergrund: `#e5e5e0` (warmes Sandgrau)
- Text: `#000000`
- Innenabstand: 6px 14px
- Radius: 16px
- Fokus: dasselbe semantische Rahmensystem
**Kreisförmige Aktion**
- Hintergrund: `#e0e0d9` (warmes Licht)
- Text: `#211922` (Pflaumenschwarz)
- Radius: 50% (Kreis)
- Verwendung: Pin-Aktionen, Navigationssteuerelemente
**Ghost / Transparent**
- Hintergrund: transparent
- Text: `#000000`
- Kein Rahmen
- Verwendung: Tertiäre Aktionen
### Karten & Container
- Fotografiezuerst-Pin-Karten mit großzügigem Radius (12px–20px)
- Kein traditioneller Box-Schatten auf den meisten Karten
- Weiße oder warme Nebelfarbe als Hintergrund
- 8px weißer dicker Rahmen auf einigen Bild-Containern
### Eingabefelder
- E-Mail-Eingabe: weißer Hintergrund, `1px solid #91918c` Rahmen, 16px Radius, 11px 15px Innenabstand
- Fokus: semantisches Rahmen- + Umrisssystem über CSS-Variablen
### Navigation
- Sauberer Header auf weißem oder warmem Hintergrund
- Pinterest-Logo + Suchleiste zentriert
- Pin Sans 16px für Navigationslinks
- Pinterest-Rot als Akzent für aktive Zustände
### Bildbehandlung
- Pin-artiges Masonry-Grid (charakteristisches Pinterest-Layout)
- Abgerundete Ecken: 12px–20px auf Bildern
- Fotografie als primärer Inhalt — jeder Pin ist ein Bild
- Dicke weiße Rahmen (8px) auf hervorgehobenen Bild-Containern
## 5. Layoutgrundsätze
### Abstandssystem
- Basiseinheit: 8px
- Skala: 4px, 6px, 7px, 8px, 10px, 11px, 12px, 16px, 18px, 20px, 22px, 24px, 32px, 80px, 100px
- Große Sprünge: 32px → 80px → 100px für Abschnittsabstände
### Raster & Container
- Masonry-Grid für Pin-Inhalte (charakteristisches Layout)
- Zentrierte Inhaltsabschnitte mit großzügiger Maximalbreite
- Vollbreiter dunkler Footer
- Suchleiste als primäres Navigationselement
### Weißraum-Philosophie
- **Inspirationsdichte**: Das Masonry-Grid packt Pins eng — die Inhaltsdichte IST das Wertversprechen. Weißraum existiert zwischen Abschnitten, nicht innerhalb des Grids.
- **Oben atmen, unten dicht**: Hero-/Feature-Abschnitte erhalten großzügige Abstände; das Pin-Grid ist kompakt und immersiv.
### Rahmenradiusskala
- Standard (12px): Kleine Karten, Links
- Schaltfläche (16px): Schaltflächen, Eingaben, mittlere Karten
- Komfortabel (20px): Feature-Karten
- Groß (28px): Große Container
- Abschnitt (32px): Tab-Elemente, große Panels
- Hero (40px): Hero-Container, große Feature-Blöcke
- Kreis (50%): Aktionsschaltflächen, Tab-Indikatoren
## 6. Tiefe & Elevation
| Ebene | Behandlung | Verwendung |
|-------|-----------|-----|
| Flach (Ebene 0) | Kein Schatten | Standard — Pins setzen auf Inhalt, nicht auf Schatten |
| Subtil (Ebene 1) | Minimaler Schatten (aus Tokens) | Erhöhte Overlays, Dropdowns |
| Fokus (Barrierefreiheit) | `--sema-color-border-focus-outer-default` Ring | Fokuszustände |
**Schattenphilosophie**: Pinterest verwendet minimale Schatten. Das Masonry-Grid setzt auf Inhalt (Fotografie), um visuelles Interesse zu erzeugen, statt auf Elevationseffekte. Tiefe entsteht durch die Wärme der Oberflächenfarben und die großzügige Rundung der Container.
## 7. Gebote und Verbote
### Gebot
- Warme Neutralfarben verwenden (`#e5e5e0`, `#e0e0d9`, `#91918c`) — der warme Oliv/Sand-Ton ist die Identität
- Pinterest-Rot (`#e60023`) nur für primäre CTAs verwenden — es ist kräftig und einzigartig
- Pin Sans ausschließlich verwenden — eine Schrift für alles
- Großzügigen Rahmenradius anwenden: 16px für Schaltflächen/Eingaben, 20px+ für Karten
- Das Masonry-Grid dicht halten — Inhaltsdichte ist der Wert
- Warme Badge-Hintergründe (`hsla(60,20%,98%,.5)`) für subtile warme Washes verwenden
- `#211922` (Pflaumenschwarz) für Primärtext verwenden — wärmer als reines Schwarz
### Verbot
- Keine kühlen Grauneutralen verwenden — immer warm/olivfarben
- Kein reines Schwarz (`#000000`) als Primärtext — Pflaumenschwarz (`#211922`) verwenden
- Keine pillenförmigen Schaltflächen — 16px Radius ist gerundet, aber nicht pillenförmig
- Keine schweren Schatten hinzufügen — Pinterest ist flach by Design, Tiefe kommt aus dem Inhalt
- Keinen kleinen Rahmenradius (<12px) auf Karten — die großzügige Rundung ist essenziell
- Keine zusätzlichen Markenfarben einführen — Rot + warme Neutralfarben ist die vollständige Palette
- Keine dünnen Schriftstärken verwenden — Pin Sans mindestens 400
## 8. Responsives Verhalten
### Haltepunkte
| Name | Breite | Wesentliche Änderungen |
|------|-------|-------------|
| Mobil | <576px | Einzelne Spalte, kompaktes Layout |
| Mobil Groß | 576–768px | 2-spaltiges Pin-Grid |
| Tablet | 768–890px | Erweitertes Grid |
| Desktop Klein | 890–1312px | Standard-Masonry-Grid |
| Desktop | 1312–1440px | Vollständiges Layout |
| Großer Desktop | 1440–1680px | Erweiterte Grid-Spalten |
| Ultrabreit | >1680px | Maximale Grid-Dichte |
### Reduktionsstrategie
- Pin-Grid: 5+ Spalten → 3 → 2 → 1
- Navigation: Suchleiste + Icons → vereinfachte mobile Navigation
- Feature-Abschnitte: nebeneinander → gestapelt
- Hero: 70px → skaliert proportional herunter
- Footer: dunkle Mehrspalten → gestapelt
## 9. Agent-Prompt-Leitfaden
### Schnelle Farbreferenz
- Marke: Pinterest-Rot (`#e60023`)
- Hintergrund: Weiß (`#ffffff`)
- Text: Pflaumenschwarz (`#211922`)
- Sekundärtext: Olivgrau (`#62625b`)
- Schaltflächenoberfläche: Sandgrau (`#e5e5e0`)
- Rahmen: Warmsilber (`#91918c`)
- Fokus: Fokusblau (`#435ee5`)
### Beispiel-Komponentenprompts
- „Hero erstellen: weißer Hintergrund. Überschrift bei 70px Pin Sans Stärke 600, Pflaumenschwarz (#211922). Roter CTA-Knopf (#e60023, 16px Radius, 6px 14px Innenabstand). Sekundärer Sandknopf (#e5e5e0, 16px Radius)."
- „Pin-Karte gestalten: weißer Hintergrund, 16px Radius, kein Schatten. Fotografie füllt oben, 16px Pin Sans Stärke 400 Beschreibung unten in #62625b."
- „Kreisförmige Aktionsschaltfläche erstellen: #e0e0d9 Hintergrund, 50% Radius, #211922 Symbol."
- „Eingabefeld erstellen: weißer Hintergrund, 1px solid #91918c, 16px Radius, 11px 15px Innenabstand. Fokus: blauer Umriss über semantische Tokens."
- „Dunklen Footer gestalten: #33332e Hintergrund. Pinterest-Schriftlogo in Weiß. 12px Pin-Sans-Links in #91918c."
### Iterationsleitfaden
1. Warme Neutralfarben überall — Oliv/Sandgrau, niemals kühler Stahl
2. Pinterest-Rot nur für CTAs — kräftig und einzigartig
3. 16px Radius auf Schaltflächen/Eingaben, 20px+ auf Karten — großzügig, aber nicht pillenförmig
4. Pin Sans ist die einzige Schrift — kompakt bei 12px für die Benutzeroberfläche, 70px für Display
5. Fotografie trägt das Design — die Benutzeroberfläche bleibt warm und minimal
6. Pflaumenschwarz (#211922) für Text — wärmer als reines Schwarz
open-design/design-systems/pinterest/DESIGN-es.md
+233
View File
@@ -0,0 +1,233 @@
# Sistema de diseño inspirado en Pinterest
> Category: Medios y consumidor
> Descubrimiento visual. Acento rojo, cuadrícula de mampostería, imagen primero.
## 1. Tema visual y atmósfera
El sitio web de Pinterest es un lienzo cálido e inspirador que trata el descubrimiento visual como una revista de estilo de vida. El diseño opera sobre un fondo blanco suave y ligeramente cálido con el Rojo Pinterest (`#e60023`) como el único y audaz acento de marca. A diferencia de los azules fríos de la mayoría de las plataformas tecnológicas, la escala de neutros de Pinterest tiene un subtono claramente cálido — los grises tienden hacia el oliva/arena (`#91918c`, `#62625b`, `#e5e5e0`) en lugar del acero frío, creando una atmósfera acogedora y artesanal que invita a explorar.
La tipografía usa Pin Sans — una fuente propietaria personalizada con una amplia pila de respaldo que incluye fuentes japonesas, lo que refleja el alcance global de Pinterest. A escala de display (70px, peso 600), Pin Sans crea titulares grandes e invitadores. En tamaños más pequeños, el sistema es compacto: botones a 12px, subtítulos a 12–14px. El sistema de nomenclatura de variables CSS (`--comp-*`, `--sema-*`, `--base-*`) revela una sofisticada arquitectura de tokens de diseño de tres niveles: nivel de componente, nivel semántico y nivel base.
Lo que distingue a Pinterest es su generoso sistema de radio de borde (12px–40px, más 50% para círculos) y los fondos de botones con matiz cálido. El botón secundario (`#e5e5e0`) tiene un tono arena claramente cálido en lugar de gris frío. El botón rojo primario usa un radio de 16px — redondeado pero no en forma de píldora. Combinado con fondos de insignias cálidos (`hsla(60,20%,98%,.5)` — un sutil lavado amarillo cálido) y diseños dominados por la fotografía, el resultado es un diseño que se siente artesanal y personal, no corporativo y estéril.
**Características clave:**
- Lienzo blanco cálido con neutros en tono oliva/arena — acogedor, no clínico
- Rojo Pinterest (`#e60023`) como único acento audaz — nunca sutil, siempre seguro
- Fuente personalizada Pin Sans con pila de respaldo global (incluye CJK)
- Arquitectura de tokens de tres niveles: `--comp-*` / `--sema-*` / `--base-*`
- Superficies secundarias cálidas: gris arena (`#e5e5e0`), insignia cálida (`hsla(60,20%,98%,.5)`)
- Radio de borde generoso: 16px estándar, hasta 40px para contenedores grandes
- Contenido con fotografía primero — los pines/imágenes son el elemento visual principal
- Texto casi violeta oscuro (`#211922`) — cálido, con un toque de ciruela
## 2. Paleta de colores y roles
### Marca principal
- **Rojo Pinterest** (`#e60023`): CTA principal, acento de marca — rojo audaz y seguro
- **Verde 700** (`#103c25`): `--base-color-green-700`, acento de éxito/naturaleza
- **Verde 700 Hover** (`#0b2819`): `--base-color-hover-green-700`, verde presionado
### Texto
- **Negro ciruela** (`#211922`): Texto principal — casi negro cálido con subtono ciruela
- **Negro** (`#000000`): Texto secundario, texto de botón
- **Gris oliva** (`#62625b`): Descripciones secundarias, texto tenue
- **Plateado cálido** (`#91918c`): `--comp-button-color-text-transparent-disabled`, texto deshabilitado, bordes de entrada
- **Blanco** (`#ffffff`): Texto sobre superficies oscuras/de color
### Interactivo
- **Azul foco** (`#435ee5`): `--comp-button-color-border-focus-outer-transparent`, anillos de foco
- **Morado rendimiento** (`#6845ab`): `--sema-color-hover-icon-performance-plus`, características de rendimiento
- **Morado recomendación** (`#7e238b`): `--sema-color-hover-text-recommendation`, recomendación IA
- **Azul enlace** (`#2b48d4`): Color de texto de enlace
- **Azul Facebook** (`#0866ff`): `--facebook-background-color`, inicio de sesión social
- **Azul presionado** (`#617bff`): `--base-color-pressed-blue-200`, estado presionado
### Superficie y borde
- **Gris arena** (`#e5e5e0`): Fondo de botón secundario — cálido, artesanal
- **Claro cálido** (`#e0e0d9`): Fondos de botones circulares, insignias
- **Lavado cálido** (`hsla(60, 20%, 98%, 0.5)`): `--comp-badge-color-background-wash-light`, fondo de insignia cálido sutil
- **Neblina** (`#f6f6f3`): Superficie clara (al 50% de opacidad)
- **Borde deshabilitado** (`#c8c8c1`): `--sema-color-border-disabled`, bordes deshabilitados
- **Gris hover** (`#bcbcb3`): `--base-color-hover-grayscale-150`, borde al pasar el cursor
- **Superficie oscura** (`#33332e`): Fondos de secciones oscuras
### Semántico
- **Rojo error** (`#9e0a0a`): Estados de error de casilla/formulario
## 3. Reglas tipográficas
### Familia de fuentes
- **Principal**: `Pin Sans`, respaldos: `-apple-system, system-ui, Segoe UI, Roboto, Oxygen-Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Arial`
### Jerarquía
| Rol | Fuente | Tamaño | Peso | Altura de línea | Espaciado de letras | Notas |
|------|------|------|--------|-------------|----------------|-------|
| Display Hero | Pin Sans | 70px (4,38rem) | 600 | normal | normal | Máximo impacto |
| Encabezado de sección | Pin Sans | 28px (1,75rem) | 700 | normal | -1,2px | Tracking negativo |
| Cuerpo | Pin Sans | 16px (1,00rem) | 400 | 1,40 | normal | Lectura estándar |
| Subtítulo negrita | Pin Sans | 14px (0,88rem) | 700 | normal | normal | Metadatos fuertes |
| Subtítulo | Pin Sans | 12px (0,75rem) | 400–500 | 1,50 | normal | Texto pequeño, etiquetas |
| Botón | Pin Sans | 12px (0,75rem) | 400 | normal | normal | Etiquetas de botón |
### Principios
- **Escala de tipo compacta**: El rango es 12px–70px con un salto dramático — la mayoría del texto funcional está en 12–16px, creando una jerarquía de información densa, similar a una aplicación.
- **Distribución de peso cálida**: 600–700 para encabezados, 400–500 para cuerpo. Sin pesos ultraligeros — el tipo siempre se siente sustancial.
- **Tracking negativo en encabezados**: -1,2px en encabezados de 28px crea títulos de sección acogedores e íntimos.
- **Familia de fuentes única**: Pin Sans maneja todo — no se detectó fuente de display secundaria ni monoespaciada.
## 4. Estilos de componentes
### Botones
**Rojo primario**
- Fondo: `#e60023` (Rojo Pinterest)
- Texto: `#000000` (negro — elección inusual para contraste sobre rojo)
- Relleno: 6px 14px
- Radio: 16px (generosamente redondeado, no en píldora)
- Borde: `2px solid rgba(255, 255, 255, 0)` (transparente)
- Foco: borde semántico + contorno via variables CSS
**Arena secundario**
- Fondo: `#e5e5e0` (gris arena cálido)
- Texto: `#000000`
- Relleno: 6px 14px
- Radio: 16px
- Foco: mismo sistema de borde semántico
**Acción circular**
- Fondo: `#e0e0d9` (claro cálido)
- Texto: `#211922` (negro ciruela)
- Radio: 50% (círculo)
- Uso: acciones de pin, controles de navegación
**Fantasma / Transparente**
- Fondo: transparente
- Texto: `#000000`
- Sin borde
- Uso: acciones terciarias
### Tarjetas y contenedores
- Tarjetas de pin con fotografía primero y radio generoso (12px–20px)
- Sin sombra de caja tradicional en la mayoría de las tarjetas
- Fondos blancos o de neblina cálida
- Borde blanco grueso de 8px en algunos contenedores de imagen
### Entradas
- Entrada de correo: fondo blanco, borde `1px solid #91918c`, radio 16px, relleno 11px 15px
- Foco: sistema de borde semántico + contorno via variables CSS
### Navegación
- Encabezado limpio sobre fondo blanco o cálido
- Logo Pinterest + barra de búsqueda centrados
- Pin Sans 16px para enlaces de navegación
- Acentos Rojo Pinterest para estados activos
### Tratamiento de imágenes
- Cuadrícula de mampostería estilo pin (diseño característico de Pinterest)
- Esquinas redondeadas: 12px–20px en imágenes
- Fotografía como contenido principal — cada pin es una imagen
- Bordes blancos gruesos (8px) en contenedores de imágenes destacadas
## 5. Principios de diseño
### Sistema de espaciado
- Unidad base: 8px
- Escala: 4px, 6px, 7px, 8px, 10px, 11px, 12px, 16px, 18px, 20px, 22px, 24px, 32px, 80px, 100px
- Saltos grandes: 32px → 80px → 100px para espaciado de secciones
### Cuadrícula y contenedor
- Cuadrícula de mampostería para contenido de pines (diseño característico)
- Secciones de contenido centradas con ancho máximo generoso
- Pie de página oscuro de ancho completo
- Barra de búsqueda como elemento de navegación principal
### Filosofía del espacio en blanco
- **Densidad de inspiración**: La cuadrícula de mampostería empaqueta los pines apretados — la densidad del contenido ES la propuesta de valor. El espacio en blanco existe entre secciones, no dentro de la cuadrícula.
- **Respira arriba, densidad abajo**: Las secciones hero/featured reciben relleno generoso; la cuadrícula de pines es compacta e inmersiva.
### Escala de radio de borde
- Estándar (12px): Tarjetas pequeñas, enlaces
- Botón (16px): Botones, entradas, tarjetas medianas
- Cómodo (20px): Tarjetas featured
- Grande (28px): Contenedores grandes
- Sección (32px): Elementos de pestaña, paneles grandes
- Hero (40px): Contenedores hero, bloques featured grandes
- Círculo (50%): Botones de acción, indicadores de pestaña
## 6. Profundidad y elevación
| Nivel | Tratamiento | Uso |
|-------|-----------|-----|
| Plano (Nivel 0) | Sin sombra | Por defecto — los pines dependen del contenido, no de la sombra |
| Sutil (Nivel 1) | Sombra mínima (de tokens) | Superposiciones elevadas, menús desplegables |
| Foco (Accesibilidad) | Anillo `--sema-color-border-focus-outer-default` | Estados de foco |
**Filosofía de sombras**: Pinterest usa sombras mínimas. La cuadrícula de mampostería depende del contenido (fotografía) para crear interés visual en lugar de efectos de elevación. La profundidad proviene de la calidez de los colores de superficie y el generoso redondeado de los contenedores.
## 7. Qué hacer y qué no hacer
### Hacer
- Usar neutros cálidos (`#e5e5e0`, `#e0e0d9`, `#91918c`) — el tono cálido oliva/arena es la identidad
- Aplicar Rojo Pinterest (`#e60023`) solo para CTAs principales — es audaz y singular
- Usar Pin Sans exclusivamente — una fuente para todo
- Aplicar radio de borde generoso: 16px para botones/entradas, 20px+ para tarjetas
- Mantener la cuadrícula de mampostería densa — la densidad del contenido es el valor
- Usar fondos de insignia cálidos (`hsla(60,20%,98%,.5)`) para lavados cálidos sutiles
- Usar `#211922` (negro ciruela) para texto principal — más cálido que el negro puro
### No hacer
- No usar neutros grises fríos — siempre cálido/tono oliva
- No usar negro puro (`#000000`) como texto principal — usar negro ciruela (`#211922`)
- No usar botones en forma de píldora — el radio de 16px es redondeado pero no píldora
- No agregar sombras pesadas — Pinterest es plano por diseño, la profundidad viene del contenido
- No usar radio de borde pequeño (<12px) en tarjetas — el redondeado generoso es esencial
- No introducir colores de marca adicionales — rojo + neutros cálidos es la paleta completa
- No usar pesos de fuente finos — Pin Sans mínimo 400
## 8. Comportamiento responsive
### Puntos de interrupción
| Nombre | Ancho | Cambios clave |
|------|-------|-------------|
| Móvil | <576px | Columna única, diseño compacto |
| Móvil grande | 576–768px | Cuadrícula de pines de 2 columnas |
| Tablet | 768–890px | Cuadrícula expandida |
| Escritorio pequeño | 890–1312px | Cuadrícula de mampostería estándar |
| Escritorio | 1312–1440px | Diseño completo |
| Escritorio grande | 1440–1680px | Columnas de cuadrícula expandidas |
| Ultra ancho | >1680px | Densidad máxima de cuadrícula |
### Estrategia de colapso
- Cuadrícula de pines: 5+ columnas → 3 → 2 → 1
- Navegación: barra de búsqueda + iconos → nav móvil simplificada
- Secciones featured: lado a lado → apilado
- Hero: 70px → escala proporcionalmente hacia abajo
- Pie de página: oscuro multicolumna → apilado
## 9. Guía de prompts para agentes
### Referencia rápida de colores
- Marca: Rojo Pinterest (`#e60023`)
- Fondo: Blanco (`#ffffff`)
- Texto: Negro ciruela (`#211922`)
- Texto secundario: Gris oliva (`#62625b`)
- Superficie de botón: Gris arena (`#e5e5e0`)
- Borde: Plateado cálido (`#91918c`)
- Foco: Azul foco (`#435ee5`)
### Ejemplos de prompts de componentes
- "Crear un hero: fondo blanco. Titular a 70px Pin Sans peso 600, negro ciruela (#211922). Botón CTA rojo (#e60023, radio 16px, relleno 6px 14px). Botón arena secundario (#e5e5e0, radio 16px)."
- "Diseñar una tarjeta pin: fondo blanco, radio 16px, sin sombra. La fotografía llena la parte superior, descripción 16px Pin Sans peso 400 debajo en #62625b."
- "Construir un botón de acción circular: fondo #e0e0d9, radio 50%, icono #211922."
- "Crear un campo de entrada: fondo blanco, 1px solid #91918c, radio 16px, relleno 11px 15px. Foco: contorno azul via tokens semánticos."
- "Diseñar el pie de página oscuro: fondo #33332e. Logo script Pinterest en blanco. Enlaces 12px Pin Sans en #91918c."
### Guía de iteración
1. Neutros cálidos en todas partes — grises oliva/arena, nunca acero frío
2. Rojo Pinterest solo para CTAs — audaz y singular
3. Radio de 16px en botones/entradas, 20px+ en tarjetas — generoso pero no píldora
4. Pin Sans es la única fuente — compacto a 12px para interfaz, 70px para display
5. La fotografía lleva el diseño — la interfaz se mantiene cálida y minimal
6. Negro ciruela (#211922) para texto — más cálido que el negro puro
open-design/design-systems/pinterest/DESIGN-fr.md
+233
View File
@@ -0,0 +1,233 @@
# Système de design inspiré de Pinterest
> Category: Médias & Grand public
> Découverte visuelle. Accent rouge, grille maçonnique, image en premier.
## 1. Thème visuel & Atmosphère
Le site de Pinterest est une toile chaude et inspirante qui traite la découverte visuelle comme un magazine lifestyle. Le design repose sur un fond blanc doux et légèrement chaud, avec le Rouge Pinterest (`#e60023`) comme seul accent de marque audacieux. Contrairement aux tons bleus froids de la plupart des plateformes tech, l'échelle de neutrals de Pinterest a un sous-ton résolument chaud — les gris tendent vers l'olive/sable (`#91918c`, `#62625b`, `#e5e5e0`) plutôt que vers l'acier froid, créant une atmosphère chaleureuse et artisanale qui invite à la navigation.
La typographie utilise Pin Sans — une police propriétaire personnalisée avec une large pile de replis incluant des polices japonaises, reflétant la portée mondiale de Pinterest. À l'échelle d'affichage (70px, graisse 600), Pin Sans crée de grands titres accueillants. À des tailles plus petites, le système est compact : boutons à 12px, légendes à 12–14px. Le système de nommage des variables CSS (`--comp-*`, `--sema-*`, `--base-*`) révèle une architecture sophistiquée de tokens de design à trois niveaux : composant, sémantique et base.
Ce qui distingue Pinterest, c'est son généreux système de rayon de bordure (12px–40px, plus 50% pour les cercles) et ses fonds de boutons teintés de chaleur. Le bouton secondaire (`#e5e5e0`) a une tonalité sable distinctement chaude plutôt que gris froid. Le bouton rouge principal utilise un rayon de 16px — arrondi mais pas en forme de pilule. Combiné avec des fonds de badges chauds (`hsla(60,20%,98%,.5)` — un léger lavis jaune-chaud) et des mises en page dominées par la photographie, le résultat est un design qui semble artisanal et personnel, pas corporate et stérile.
**Caractéristiques clés :**
- Toile blanche chaude avec des neutrals teintés olive/sable — douillet, pas clinique
- Rouge Pinterest (`#e60023`) comme seul accent audacieux — jamais subtil, toujours confiant
- Police personnalisée Pin Sans avec pile de replis mondiale (incluant CJK)
- Architecture de tokens à trois niveaux : `--comp-*` / `--sema-*` / `--base-*`
- Surfaces secondaires chaudes : gris sable (`#e5e5e0`), badge chaud (`hsla(60,20%,98%,.5)`)
- Rayon de bordure généreux : 16px standard, jusqu'à 40px pour les grands conteneurs
- Contenu photo en premier — les pins/images sont l'élément visuel principal
- Texte quasi-violet foncé (`#211922`) — chaud, avec une touche de prune
## 2. Palette de couleurs & Rôles
### Marque principale
- **Rouge Pinterest** (`#e60023`) : CTA principal, accent de marque — rouge audacieux et confiant
- **Vert 700** (`#103c25`) : `--base-color-green-700`, accent succès/nature
- **Vert 700 Survol** (`#0b2819`) : `--base-color-hover-green-700`, vert enfoncé
### Texte
- **Noir prune** (`#211922`) : Texte principal — quasi-noir chaud avec sous-ton prune
- **Noir** (`#000000`) : Texte secondaire, texte de bouton
- **Gris olive** (`#62625b`) : Descriptions secondaires, texte atténué
- **Argent chaud** (`#91918c`) : `--comp-button-color-text-transparent-disabled`, texte désactivé, bordures d'entrée
- **Blanc** (`#ffffff`) : Texte sur surfaces sombres/colorées
### Interactif
- **Bleu focus** (`#435ee5`) : `--comp-button-color-border-focus-outer-transparent`, anneaux de focus
- **Violet performance** (`#6845ab`) : `--sema-color-hover-icon-performance-plus`, fonctionnalités de performance
- **Violet recommandation** (`#7e238b`) : `--sema-color-hover-text-recommendation`, recommandation IA
- **Bleu lien** (`#2b48d4`) : Couleur du texte de lien
- **Bleu Facebook** (`#0866ff`) : `--facebook-background-color`, connexion sociale
- **Bleu enfoncé** (`#617bff`) : `--base-color-pressed-blue-200`, état enfoncé
### Surface & Bordure
- **Gris sable** (`#e5e5e0`) : Fond bouton secondaire — chaud, artisanal
- **Lumière chaude** (`#e0e0d9`) : Fonds de boutons circulaires, badges
- **Lavis chaud** (`hsla(60, 20%, 98%, 0.5)`) : `--comp-badge-color-background-wash-light`, fond de badge chaud subtil
- **Brume** (`#f6f6f3`) : Surface claire (à 50% d'opacité)
- **Bordure désactivée** (`#c8c8c1`) : `--sema-color-border-disabled`, bordures désactivées
- **Gris survol** (`#bcbcb3`) : `--base-color-hover-grayscale-150`, bordure au survol
- **Surface sombre** (`#33332e`) : Fonds de sections sombres
### Sémantique
- **Rouge erreur** (`#9e0a0a`) : États d'erreur case à cocher/formulaire
## 3. Règles typographiques
### Famille de polices
- **Principale** : `Pin Sans`, replis : `-apple-system, system-ui, Segoe UI, Roboto, Oxygen-Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Arial`
### Hiérarchie
| Rôle | Police | Taille | Graisse | Hauteur de ligne | Espacement des lettres | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Héros display | Pin Sans | 70px (4,38rem) | 600 | normal | normal | Impact maximal |
| Titre de section | Pin Sans | 28px (1,75rem) | 700 | normal | -1,2px | Tracking négatif |
| Corps | Pin Sans | 16px (1,00rem) | 400 | 1,40 | normal | Lecture standard |
| Légende gras | Pin Sans | 14px (0,88rem) | 700 | normal | normal | Métadonnées fortes |
| Légende | Pin Sans | 12px (0,75rem) | 400–500 | 1,50 | normal | Petit texte, tags |
| Bouton | Pin Sans | 12px (0,75rem) | 400 | normal | normal | Libellés de bouton |
### Principes
- **Échelle typographique compacte** : La plage est 12px–70px avec un saut dramatique — la plupart du texte fonctionnel est à 12–16px, créant une hiérarchie d'information dense, similaire à une application.
- **Distribution de graisse chaude** : 600–700 pour les titres, 400–500 pour le corps. Pas de graisses ultra-légères — le texte semble toujours substantiel.
- **Tracking négatif sur les titres** : -1,2px sur les titres de 28px crée des titres de section confortables et intimes.
- **Famille de polices unique** : Pin Sans gère tout — aucune police d'affichage secondaire ou monospace détectée.
## 4. Styles de composants
### Boutons
**Rouge principal**
- Fond : `#e60023` (Rouge Pinterest)
- Texte : `#000000` (noir — choix inhabituel pour le contraste sur rouge)
- Rembourrage : 6px 14px
- Rayon : 16px (généreusement arrondi, pas en pilule)
- Bordure : `2px solid rgba(255, 255, 255, 0)` (transparent)
- Focus : bordure sémantique + contour via variables CSS
**Sable secondaire**
- Fond : `#e5e5e0` (gris sable chaud)
- Texte : `#000000`
- Rembourrage : 6px 14px
- Rayon : 16px
- Focus : même système de bordure sémantique
**Action circulaire**
- Fond : `#e0e0d9` (lumière chaude)
- Texte : `#211922` (noir prune)
- Rayon : 50% (cercle)
- Utilisation : actions de pin, contrôles de navigation
**Fantôme / Transparent**
- Fond : transparent
- Texte : `#000000`
- Pas de bordure
- Utilisation : actions tertiaires
### Cartes & Conteneurs
- Cartes de pin photo en premier avec rayon généreux (12px–20px)
- Pas d'ombre de boîte traditionnelle sur la plupart des cartes
- Fonds blancs ou brume chaude
- Bordure épaisse blanche de 8px sur certains conteneurs d'image
### Champs de saisie
- Saisie d'e-mail : fond blanc, bordure `1px solid #91918c`, rayon 16px, rembourrage 11px 15px
- Focus : système de bordure sémantique + contour via variables CSS
### Navigation
- En-tête épuré sur fond blanc ou chaud
- Logo Pinterest + barre de recherche centrés
- Pin Sans 16px pour les liens de navigation
- Accents Rouge Pinterest pour les états actifs
### Traitement des images
- Grille maçonnique style pin (mise en page signature de Pinterest)
- Coins arrondis : 12px–20px sur les images
- Photographie comme contenu principal — chaque pin est une image
- Bordures blanches épaisses (8px) sur les conteneurs d'images en vedette
## 5. Principes de mise en page
### Système d'espacement
- Unité de base : 8px
- Échelle : 4px, 6px, 7px, 8px, 10px, 11px, 12px, 16px, 18px, 20px, 22px, 24px, 32px, 80px, 100px
- Grands sauts : 32px → 80px → 100px pour l'espacement des sections
### Grille & Conteneur
- Grille maçonnique pour le contenu des pins (mise en page signature)
- Sections de contenu centrées avec une largeur maximale généreuse
- Pied de page sombre pleine largeur
- Barre de recherche comme élément de navigation principal
### Philosophie des espaces blancs
- **Densité d'inspiration** : La grille maçonnique entasse les pins serré — la densité du contenu EST la proposition de valeur. L'espace blanc existe entre les sections, pas dans la grille.
- **Respiration en haut, densité en bas** : Les sections héros/featured reçoivent un rembourrage généreux ; la grille de pins est compacte et immersive.
### Échelle de rayon de bordure
- Standard (12px) : Petites cartes, liens
- Bouton (16px) : Boutons, entrées, cartes moyennes
- Confortable (20px) : Cartes featured
- Grand (28px) : Grands conteneurs
- Section (32px) : Éléments d'onglet, grands panneaux
- Héros (40px) : Conteneurs héros, grands blocs featured
- Cercle (50%) : Boutons d'action, indicateurs d'onglet
## 6. Profondeur & Élévation
| Niveau | Traitement | Utilisation |
|-------|-----------|-----|
| Plat (Niveau 0) | Pas d'ombre | Par défaut — les pins s'appuient sur le contenu, pas l'ombre |
| Subtil (Niveau 1) | Ombre minimale (depuis les tokens) | Superpositions élevées, menus déroulants |
| Focus (Accessibilité) | Anneau `--sema-color-border-focus-outer-default` | États de focus |
**Philosophie des ombres** : Pinterest utilise des ombres minimales. La grille maçonnique s'appuie sur le contenu (photographie) pour créer de l'intérêt visuel plutôt que des effets d'élévation. La profondeur vient de la chaleur des couleurs de surface et de l'arrondi généreux des conteneurs.
## 7. À faire et à ne pas faire
### À faire
- Utiliser des neutrals chauds (`#e5e5e0`, `#e0e0d9`, `#91918c`) — le ton olive/sable chaud est l'identité
- Appliquer le Rouge Pinterest (`#e60023`) uniquement pour les CTAs principaux — il est audacieux et unique
- Utiliser Pin Sans exclusivement — une police pour tout
- Appliquer un rayon de bordure généreux : 16px pour les boutons/saisies, 20px+ pour les cartes
- Garder la grille maçonnique dense — la densité du contenu est la valeur
- Utiliser des fonds de badge chauds (`hsla(60,20%,98%,.5)`) pour des lavis chauds subtils
- Utiliser `#211922` (noir prune) pour le texte principal — plus chaud que le noir pur
### À ne pas faire
- Ne pas utiliser de neutrals gris froids — toujours chaud/olive
- Ne pas utiliser le noir pur (`#000000`) comme texte principal — utiliser le noir prune (`#211922`)
- Ne pas utiliser de boutons en forme de pilule — le rayon 16px est arrondi mais pas en pilule
- Ne pas ajouter d'ombres lourdes — Pinterest est plat par conception, la profondeur vient du contenu
- Ne pas utiliser un petit rayon de bordure (<12px) sur les cartes — l'arrondi généreux est essentiel
- Ne pas introduire de couleurs de marque supplémentaires — rouge + neutrals chauds est la palette complète
- Ne pas utiliser de graisses de police légères — Pin Sans au minimum 400
## 8. Comportement responsive
### Points de rupture
| Nom | Largeur | Changements clés |
|------|-------|-------------|
| Mobile | <576px | Colonne unique, mise en page compacte |
| Grand mobile | 576–768px | Grille de pins à 2 colonnes |
| Tablette | 768–890px | Grille étendue |
| Petit bureau | 890–1312px | Grille maçonnique standard |
| Bureau | 1312–1440px | Mise en page complète |
| Grand bureau | 1440–1680px | Colonnes de grille étendues |
| Ultra-large | >1680px | Densité de grille maximale |
### Stratégie de réduction
- Grille de pins : 5+ colonnes → 3 → 2 → 1
- Navigation : barre de recherche + icônes → navigation mobile simplifiée
- Sections featured : côte à côte → empilées
- Héros : 70px → réduit proportionnellement
- Pied de page : multicolonne sombre → empilé
## 9. Guide de prompt pour agents
### Référence rapide des couleurs
- Marque : Rouge Pinterest (`#e60023`)
- Fond : Blanc (`#ffffff`)
- Texte : Noir prune (`#211922`)
- Texte secondaire : Gris olive (`#62625b`)
- Surface de bouton : Gris sable (`#e5e5e0`)
- Bordure : Argent chaud (`#91918c`)
- Focus : Bleu focus (`#435ee5`)
### Exemples de prompts de composants
- « Créer un héros : fond blanc. Titre à 70px Pin Sans graisse 600, noir prune (#211922). Bouton CTA rouge (#e60023, rayon 16px, rembourrage 6px 14px). Bouton sable secondaire (#e5e5e0, rayon 16px). »
- « Concevoir une carte pin : fond blanc, rayon 16px, pas d'ombre. La photographie remplit le haut, description 16px Pin Sans graisse 400 en dessous en #62625b. »
- « Construire un bouton d'action circulaire : fond #e0e0d9, rayon 50%, icône #211922. »
- « Créer un champ de saisie : fond blanc, 1px solid #91918c, rayon 16px, rembourrage 11px 15px. Focus : contour bleu via tokens sémantiques. »
- « Concevoir le pied de page sombre : fond #33332e. Logo script Pinterest en blanc. Liens 12px Pin Sans en #91918c. »
### Guide d'itération
1. Neutrals chauds partout — gris olive/sable, jamais acier froid
2. Rouge Pinterest pour les CTAs uniquement — audacieux et unique
3. Rayon 16px sur les boutons/saisies, 20px+ sur les cartes — généreux mais pas en pilule
4. Pin Sans est la seule police — compact à 12px pour l'interface, 70px pour l'affichage
5. La photographie porte le design — l'interface reste chaude et minimale
6. Noir prune (#211922) pour le texte — plus chaud que le noir pur
open-design/design-systems/pinterest/DESIGN-id.md
+233
View File
@@ -0,0 +1,233 @@
# Sistem Desain Terinspirasi dari Pinterest
> Category: Media & Consumer
> Penemuan visual. Aksen merah, grid masonry, gambar sebagai prioritas utama.
## 1. Tema Visual & Atmosfer
Situs web Pinterest adalah kanvas yang hangat dan menginspirasi, memperlakukan penemuan visual seperti majalah gaya hidup. Desain ini beroperasi dengan latar belakang putih yang lembut dan sedikit hangat, dengan Pinterest Red (`#e60023`) sebagai aksen merek tunggal yang berani. Berbeda dengan biru dingin sebagian besar platform teknologi, skala netral Pinterest memiliki nada hangat yang jelas — abu-abu condong ke arah zaitun/pasir (`#91918c`, `#62625b`, `#e5e5e0`) daripada baja dingin, menciptakan suasana nyaman dan kerajinan tangan yang mengundang untuk dijelajahi.
Tipografi menggunakan Pin Sans — font proprietary khusus dengan tumpukan fallback yang luas termasuk font Jepang, mencerminkan jangkauan global Pinterest. Pada skala tampilan (70px, berat 600), Pin Sans menciptakan judul besar yang mengundang. Pada ukuran lebih kecil, sistemnya kompak: tombol 12px, keterangan 12–14px. Sistem penamaan variabel CSS (`--comp-*`, `--sema-*`, `--base-*`) mengungkapkan arsitektur token desain tiga tingkat yang canggih: token tingkat komponen, semantik, dan dasar.
Yang membedakan Pinterest adalah sistem border-radius yang dermawan (12px–40px, ditambah 50% untuk lingkaran) dan latar belakang tombol bernada hangat. Tombol sekunder (`#e5e5e0`) memiliki nada pasir yang hangat, bukan abu-abu dingin. Tombol merah utama menggunakan radius 16px — melengkung tetapi tidak berbentuk pil. Dikombinasikan dengan latar belakang lencana hangat (`hsla(60,20%,98%,.5)` — lapisan kekuningan yang halus) dan tata letak yang didominasi fotografi, hasilnya adalah desain yang terasa buatan tangan dan personal, bukan korporat dan steril.
**Karakteristik Utama:**
- Kanvas putih hangat dengan netral bernada zaitun/pasir — nyaman, bukan klinis
- Pinterest Red (`#e60023`) sebagai aksen berani tunggal — tidak pernah halus, selalu percaya diri
- Font khusus Pin Sans dengan tumpukan fallback global (termasuk CJK)
- Arsitektur token tiga tingkat: `--comp-*` / `--sema-*` / `--base-*`
- Permukaan sekunder hangat: abu-abu pasir (`#e5e5e0`), lencana hangat (`hsla(60,20%,98%,.5)`)
- Border-radius dermawan: 16px standar, hingga 40px untuk kontainer besar
- Konten fotografi sebagai prioritas — pin/gambar adalah elemen visual utama
- Teks ungu gelap (`#211922`) — hangat, dengan sentuhan plum
## 2. Palet Warna & Peran
### Merek Utama
- **Pinterest Red** (`#e60023`): CTA utama, aksen merek — merah berani dan percaya diri
- **Green 700** (`#103c25`): `--base-color-green-700`, aksen sukses/alam
- **Green 700 Hover** (`#0b2819`): `--base-color-hover-green-700`, hijau ditekan
### Teks
- **Hitam Plum** (`#211922`): Teks utama — hampir hitam hangat dengan nada plum
- **Hitam** (`#000000`): Teks sekunder, teks tombol
- **Abu Zaitun** (`#62625b`): Deskripsi sekunder, teks redup
- **Perak Hangat** (`#91918c`): `--comp-button-color-text-transparent-disabled`, teks dinonaktifkan, batas input
- **Putih** (`#ffffff`): Teks pada permukaan gelap/berwarna
### Interaktif
- **Biru Fokus** (`#435ee5`): `--comp-button-color-border-focus-outer-transparent`, cincin fokus
- **Ungu Performa** (`#6845ab`): `--sema-color-hover-icon-performance-plus`, fitur performa
- **Ungu Rekomendasi** (`#7e238b`): `--sema-color-hover-text-recommendation`, rekomendasi AI
- **Biru Tautan** (`#2b48d4`): Warna teks tautan
- **Biru Facebook** (`#0866ff`): `--facebook-background-color`, login sosial
- **Biru Ditekan** (`#617bff`): `--base-color-pressed-blue-200`, status ditekan
### Permukaan & Batas
- **Abu Pasir** (`#e5e5e0`): Latar belakang tombol sekunder — hangat, seperti kerajinan
- **Cahaya Hangat** (`#e0e0d9`): Latar belakang tombol melingkar, lencana
- **Lapisan Hangat** (`hsla(60, 20%, 98%, 0.5)`): `--comp-badge-color-background-wash-light`, latar lencana hangat halus
- **Kabut** (`#f6f6f3`): Permukaan terang (pada opasitas 50%)
- **Batas Dinonaktifkan** (`#c8c8c1`): `--sema-color-border-disabled`, batas dinonaktifkan
- **Abu Hover** (`#bcbcb3`): `--base-color-hover-grayscale-150`, batas hover
- **Permukaan Gelap** (`#33332e`): Latar belakang bagian gelap
### Semantik
- **Merah Error** (`#9e0a0a`): Status error kotak centang/formulir
## 3. Aturan Tipografi
### Keluarga Font
- **Utama**: `Pin Sans`, fallback: `-apple-system, system-ui, Segoe UI, Roboto, Oxygen-Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Arial`
### Hierarki
| Peran | Font | Ukuran | Berat | Tinggi Baris | Spasi Huruf | Catatan |
|-------|------|--------|-------|--------------|-------------|---------|
| Hero Tampilan | Pin Sans | 70px (4.38rem) | 600 | normal | normal | Dampak maksimum |
| Judul Bagian | Pin Sans | 28px (1.75rem) | 700 | normal | -1.2px | Pelacakan negatif |
| Isi | Pin Sans | 16px (1.00rem) | 400 | 1.40 | normal | Bacaan standar |
| Keterangan Tebal | Pin Sans | 14px (0.88rem) | 700 | normal | normal | Metadata kuat |
| Keterangan | Pin Sans | 12px (0.75rem) | 400–500 | 1.50 | normal | Teks kecil, tag |
| Tombol | Pin Sans | 12px (0.75rem) | 400 | normal | normal | Label tombol |
### Prinsip
- **Skala tipe kompak**: Rentangnya 12px–70px dengan lompatan dramatis — sebagian besar teks fungsional adalah 12–16px, menciptakan hierarki informasi yang padat dan mirip aplikasi.
- **Distribusi berat hangat**: 600–700 untuk judul, 400–500 untuk isi. Tidak ada berat ultra-ringan — tipografi selalu terasa substansial.
- **Pelacakan negatif pada judul**: -1.2px pada judul 28px menciptakan judul bagian yang nyaman dan intim.
- **Keluarga font tunggal**: Pin Sans menangani segalanya — tidak ada font tampilan sekunder atau monospace yang terdeteksi.
## 4. Gaya Komponen
### Tombol
**Merah Utama**
- Latar belakang: `#e60023` (Pinterest Red)
- Teks: `#000000` (hitam — pilihan tidak biasa untuk kontras pada merah)
- Padding: 6px 14px
- Radius: 16px (melengkung dermawan, bukan pil)
- Batas: `2px solid rgba(255, 255, 255, 0)` (transparan)
- Fokus: batas semantik + outline via variabel CSS
**Pasir Sekunder**
- Latar belakang: `#e5e5e0` (abu pasir hangat)
- Teks: `#000000`
- Padding: 6px 14px
- Radius: 16px
- Fokus: sistem batas semantik yang sama
**Aksi Melingkar**
- Latar belakang: `#e0e0d9` (cahaya hangat)
- Teks: `#211922` (hitam plum)
- Radius: 50% (lingkaran)
- Penggunaan: Aksi pin, kontrol navigasi
**Ghost / Transparan**
- Latar belakang: transparan
- Teks: `#000000`
- Tidak ada batas
- Penggunaan: Aksi tersier
### Kartu & Kontainer
- Kartu pin dengan fotografi sebagai prioritas dan radius dermawan (12px–20px)
- Tidak ada box-shadow tradisional pada sebagian besar kartu
- Latar belakang putih atau kabut hangat
- Batas putih tebal 8px pada beberapa kontainer gambar
### Input
- Input email: latar belakang putih, batas `1px solid #91918c`, radius 16px, padding 11px 15px
- Fokus: sistem batas semantik + outline via variabel CSS
### Navigasi
- Header bersih pada latar putih atau hangat
- Logo Pinterest + bilah pencarian terpusat
- Pin Sans 16px untuk tautan navigasi
- Aksen Pinterest Red untuk status aktif
### Perlakuan Gambar
- Grid masonry gaya pin (tata letak khas Pinterest)
- Sudut membulat: 12px–20px pada gambar
- Fotografi sebagai konten utama — setiap pin adalah gambar
- Batas putih tebal (8px) pada kontainer gambar unggulan
## 5. Prinsip Tata Letak
### Sistem Spasi
- Unit dasar: 8px
- Skala: 4px, 6px, 7px, 8px, 10px, 11px, 12px, 16px, 18px, 20px, 22px, 24px, 32px, 80px, 100px
- Lompatan besar: 32px → 80px → 100px untuk spasi bagian
### Grid & Kontainer
- Grid masonry untuk konten pin (tata letak khas)
- Bagian konten terpusat dengan lebar maksimum yang dermawan
- Footer gelap lebar penuh
- Bilah pencarian sebagai elemen navigasi utama
### Filosofi Ruang Putih
- **Kepadatan inspirasi**: Grid masonry mengemas pin dengan rapat — kepadatan konten ADALAH proposisi nilai. Ruang putih ada di antara bagian, bukan di dalam grid.
- **Napas di atas, kepadatan di bawah**: Bagian hero/fitur mendapat padding dermawan; grid pin kompak dan imersif.
### Skala Border Radius
- Standar (12px): Kartu kecil, tautan
- Tombol (16px): Tombol, input, kartu sedang
- Nyaman (20px): Kartu fitur
- Besar (28px): Kontainer besar
- Bagian (32px): Elemen tab, panel besar
- Hero (40px): Kontainer hero, blok fitur besar
- Lingkaran (50%): Tombol aksi, indikator tab
## 6. Kedalaman & Elevasi
| Level | Perlakuan | Penggunaan |
|-------|-----------|------------|
| Datar (Level 0) | Tidak ada bayangan | Default — pin mengandalkan konten, bukan bayangan |
| Halus (Level 1) | Bayangan minimal (dari token) | Overlay terangkat, dropdown |
| Fokus (Aksesibilitas) | Cincin `--sema-color-border-focus-outer-default` | Status fokus |
**Filosofi Bayangan**: Pinterest menggunakan bayangan minimal. Grid masonry mengandalkan konten (fotografi) untuk menciptakan minat visual daripada efek elevasi. Kedalaman berasal dari kehangatan warna permukaan dan pembulatan kontainer yang dermawan.
## 7. Yang Boleh dan Tidak Boleh Dilakukan
### Boleh
- Gunakan netral hangat (`#e5e5e0`, `#e0e0d9`, `#91918c`) — nada zaitun/pasir hangat adalah identitas
- Terapkan Pinterest Red (`#e60023`) hanya untuk CTA utama — berani dan tunggal
- Gunakan Pin Sans secara eksklusif — satu font untuk segalanya
- Terapkan border-radius dermawan: 16px untuk tombol/input, 20px+ untuk kartu
- Jaga kepadatan grid masonry — kepadatan konten adalah nilainya
- Gunakan latar lencana hangat (`hsla(60,20%,98%,.5)`) untuk lapisan hangat yang halus
- Gunakan `#211922` (hitam plum) untuk teks utama — lebih hangat dari hitam murni
### Tidak Boleh
- Jangan gunakan netral abu-abu dingin — selalu bernada hangat/zaitun
- Jangan gunakan hitam murni (`#000000`) sebagai teks utama — gunakan hitam plum (`#211922`)
- Jangan gunakan tombol berbentuk pil — radius 16px melengkung tetapi bukan pil
- Jangan tambahkan bayangan berat — Pinterest datar berdasarkan desain, kedalaman dari konten
- Jangan gunakan border-radius kecil (<12px) pada kartu — pembulatan dermawan adalah inti
- Jangan perkenalkan warna merek tambahan — merah + netral hangat adalah palet lengkap
- Jangan gunakan berat font tipis — Pin Sans minimum 400
## 8. Perilaku Responsif
### Titik Henti
| Nama | Lebar | Perubahan Utama |
|------|-------|-----------------|
| Mobile | <576px | Satu kolom, tata letak kompak |
| Mobile Besar | 576–768px | Grid pin 2 kolom |
| Tablet | 768–890px | Grid yang diperluas |
| Desktop Kecil | 890–1312px | Grid masonry standar |
| Desktop | 1312–1440px | Tata letak penuh |
| Desktop Besar | 1440–1680px | Kolom grid yang diperluas |
| Ultra-lebar | >1680px | Kepadatan grid maksimum |
### Strategi Pemadatan
- Grid pin: 5+ kolom → 3 → 2 → 1
- Navigasi: bilah pencarian + ikon → navigasi mobile disederhanakan
- Bagian fitur: berdampingan → ditumpuk
- Hero: 70px → menyusut secara proporsional
- Footer: multi-kolom gelap → ditumpuk
## 9. Panduan Prompt Agen
### Referensi Warna Cepat
- Merek: Pinterest Red (`#e60023`)
- Latar belakang: Putih (`#ffffff`)
- Teks: Hitam Plum (`#211922`)
- Teks sekunder: Abu Zaitun (`#62625b`)
- Permukaan tombol: Abu Pasir (`#e5e5e0`)
- Batas: Perak Hangat (`#91918c`)
- Fokus: Biru Fokus (`#435ee5`)
### Contoh Prompt Komponen
- "Buat hero: latar belakang putih. Judul 70px Pin Sans berat 600, hitam plum (#211922). Tombol CTA merah (#e60023, radius 16px, padding 6px 14px). Tombol pasir sekunder (#e5e5e0, radius 16px)."
- "Desain kartu pin: latar belakang putih, radius 16px, tanpa bayangan. Fotografi mengisi bagian atas, deskripsi Pin Sans 16px berat 400 di bawah dalam #62625b."
- "Bangun tombol aksi melingkar: latar belakang #e0e0d9, radius 50%, ikon #211922."
- "Buat field input: latar belakang putih, 1px solid #91918c, radius 16px, padding 11px 15px. Fokus: outline biru via token semantik."
- "Desain footer gelap: latar belakang #33332e. Logo skrip Pinterest dalam putih. Tautan 12px Pin Sans dalam #91918c."
### Panduan Iterasi
1. Netral hangat di mana-mana — abu-abu zaitun/pasir, tidak pernah baja dingin
2. Pinterest Red hanya untuk CTA — berani dan tunggal
3. Radius 16px pada tombol/input, 20px+ pada kartu — dermawan tetapi bukan pil
4. Pin Sans adalah satu-satunya font — kompak 12px untuk UI, 70px untuk tampilan
5. Fotografi membawa desain — UI tetap hangat dan minimal
6. Hitam plum (#211922) untuk teks — lebih hangat dari hitam murni
open-design/design-systems/pinterest/DESIGN-it.md
+233
View File
@@ -0,0 +1,233 @@
# Sistema di design ispirato a Pinterest
> Category: Media e consumatori
> Scoperta visiva. Accento rosso, griglia a muratura, immagine prima.
## 1. Tema visivo e atmosfera
Il sito web di Pinterest è una tela calda e ricca di ispirazione che tratta la scoperta visiva come una rivista di lifestyle. Il design si basa su uno sfondo bianco morbido e leggermente caldo con il Rosso Pinterest (`#e60023`) come unico e audace accento del brand. A differenza dei blu freddi della maggior parte delle piattaforme tecnologiche, la scala di neutri di Pinterest ha un sottotono decisamente caldo — i grigi tendono verso l'oliva/sabbia (`#91918c`, `#62625b`, `#e5e5e0`) piuttosto che verso l'acciaio freddo, creando un'atmosfera accogliente e artigianale che invita alla navigazione.
La tipografia usa Pin Sans — un carattere proprietario personalizzato con un'ampia pila di fallback che include caratteri giapponesi, a riflettere la portata globale di Pinterest. Alla scala display (70px, peso 600), Pin Sans crea titoli grandi e accoglienti. Nelle dimensioni più piccole, il sistema è compatto: bottoni a 12px, didascalie a 12–14px. Il sistema di denominazione delle variabili CSS (`--comp-*`, `--sema-*`, `--base-*`) rivela una sofisticata architettura di token di design a tre livelli: componente, semantico e base.
Ciò che distingue Pinterest è il suo generoso sistema di raggi dei bordi (12px–40px, più 50% per i cerchi) e gli sfondi dei bottoni con tonalità calda. Il bottone secondario (`#e5e5e0`) ha una tonalità sabbia distintamente calda piuttosto che grigio freddo. Il bottone rosso primario usa un raggio di 16px — arrotondato ma non a forma di pillola. Combinato con gli sfondi caldi dei badge (`hsla(60,20%,98%,.5)` — un sottile lavaggio giallo-caldo) e i layout dominati dalla fotografia, il risultato è un design che sembra artigianale e personale, non aziendale e sterile.
**Caratteristiche chiave:**
- Tela bianca calda con neutri nelle tonalità oliva/sabbia — accogliente, non clinico
- Rosso Pinterest (`#e60023`) come unico accento audace — mai sottile, sempre sicuro
- Carattere personalizzato Pin Sans con pila di fallback globale (incluso CJK)
- Architettura di token a tre livelli: `--comp-*` / `--sema-*` / `--base-*`
- Superfici secondarie calde: grigio sabbia (`#e5e5e0`), badge caldo (`hsla(60,20%,98%,.5)`)
- Raggio dei bordi generoso: 16px standard, fino a 40px per i contenitori grandi
- Contenuto con fotografia prima — i pin/immagini sono l'elemento visivo principale
- Testo quasi viola scuro (`#211922`) — caldo, con un tocco di prugna
## 2. Tavolozza dei colori e ruoli
### Brand principale
- **Rosso Pinterest** (`#e60023`): CTA primario, accento del brand — rosso audace e sicuro
- **Verde 700** (`#103c25`): `--base-color-green-700`, accento successo/natura
- **Verde 700 Hover** (`#0b2819`): `--base-color-hover-green-700`, verde premuto
### Testo
- **Nero prugna** (`#211922`): Testo principale — quasi nero caldo con sottotono prugna
- **Nero** (`#000000`): Testo secondario, testo del bottone
- **Grigio oliva** (`#62625b`): Descrizioni secondarie, testo attenuato
- **Argento caldo** (`#91918c`): `--comp-button-color-text-transparent-disabled`, testo disabilitato, bordi di input
- **Bianco** (`#ffffff`): Testo su superfici scure/colorate
### Interattivo
- **Blu focus** (`#435ee5`): `--comp-button-color-border-focus-outer-transparent`, anelli di focus
- **Viola performance** (`#6845ab`): `--sema-color-hover-icon-performance-plus`, funzionalità di performance
- **Viola raccomandazione** (`#7e238b`): `--sema-color-hover-text-recommendation`, raccomandazione IA
- **Blu link** (`#2b48d4`): Colore del testo del link
- **Blu Facebook** (`#0866ff`): `--facebook-background-color`, accesso social
- **Blu premuto** (`#617bff`): `--base-color-pressed-blue-200`, stato premuto
### Superficie e bordo
- **Grigio sabbia** (`#e5e5e0`): Sfondo bottone secondario — caldo, artigianale
- **Luce calda** (`#e0e0d9`): Sfondi bottoni circolari, badge
- **Lavaggio caldo** (`hsla(60, 20%, 98%, 0.5)`): `--comp-badge-color-background-wash-light`, sfondo badge caldo sottile
- **Nebbia** (`#f6f6f3`): Superficie chiara (al 50% di opacità)
- **Bordo disabilitato** (`#c8c8c1`): `--sema-color-border-disabled`, bordi disabilitati
- **Grigio hover** (`#bcbcb3`): `--base-color-hover-grayscale-150`, bordo al passaggio del cursore
- **Superficie scura** (`#33332e`): Sfondi delle sezioni scure
### Semantico
- **Rosso errore** (`#9e0a0a`): Stati di errore checkbox/modulo
## 3. Regole tipografiche
### Famiglia di caratteri
- **Principale**: `Pin Sans`, fallback: `-apple-system, system-ui, Segoe UI, Roboto, Oxygen-Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Arial`
### Gerarchia
| Ruolo | Carattere | Dimensione | Peso | Altezza di riga | Spaziatura lettere | Note |
|------|------|------|--------|-------------|----------------|-------|
| Display Hero | Pin Sans | 70px (4,38rem) | 600 | normal | normal | Impatto massimo |
| Titolo sezione | Pin Sans | 28px (1,75rem) | 700 | normal | -1,2px | Tracking negativo |
| Corpo | Pin Sans | 16px (1,00rem) | 400 | 1,40 | normal | Lettura standard |
| Didascalia grassetto | Pin Sans | 14px (0,88rem) | 700 | normal | normal | Metadati forti |
| Didascalia | Pin Sans | 12px (0,75rem) | 400–500 | 1,50 | normal | Testo piccolo, tag |
| Bottone | Pin Sans | 12px (0,75rem) | 400 | normal | normal | Etichette bottone |
### Principi
- **Scala tipografica compatta**: L'intervallo è 12px–70px con un salto drammatico — la maggior parte del testo funzionale è a 12–16px, creando una gerarchia di informazioni densa, simile a un'app.
- **Distribuzione del peso calda**: 600–700 per i titoli, 400–500 per il corpo. Nessun peso ultrasottile — il tipo sembra sempre sostanziale.
- **Tracking negativo nei titoli**: -1,2px nei titoli di 28px crea titoli di sezione accoglienti e intimi.
- **Famiglia di caratteri singola**: Pin Sans gestisce tutto — nessun carattere display secondario o a spaziatura fissa rilevato.
## 4. Stili dei componenti
### Bottoni
**Rosso primario**
- Sfondo: `#e60023` (Rosso Pinterest)
- Testo: `#000000` (nero — scelta insolita per il contrasto sul rosso)
- Padding: 6px 14px
- Raggio: 16px (generosamente arrotondato, non a pillola)
- Bordo: `2px solid rgba(255, 255, 255, 0)` (trasparente)
- Focus: bordo semantico + contorno tramite variabili CSS
**Sabbia secondario**
- Sfondo: `#e5e5e0` (grigio sabbia caldo)
- Testo: `#000000`
- Padding: 6px 14px
- Raggio: 16px
- Focus: stesso sistema di bordo semantico
**Azione circolare**
- Sfondo: `#e0e0d9` (luce calda)
- Testo: `#211922` (nero prugna)
- Raggio: 50% (cerchio)
- Uso: azioni pin, controlli di navigazione
**Ghost / Trasparente**
- Sfondo: trasparente
- Testo: `#000000`
- Nessun bordo
- Uso: azioni terziarie
### Schede e contenitori
- Schede pin con fotografia prima e raggio generoso (12px–20px)
- Nessuna ombra box tradizionale sulla maggior parte delle schede
- Sfondi bianchi o nebbia calda
- Bordo bianco spesso di 8px su alcuni contenitori di immagini
### Input
- Input email: sfondo bianco, bordo `1px solid #91918c`, raggio 16px, padding 11px 15px
- Focus: sistema di bordo semantico + contorno tramite variabili CSS
### Navigazione
- Intestazione pulita su sfondo bianco o caldo
- Logo Pinterest + barra di ricerca centrati
- Pin Sans 16px per i link di navigazione
- Accenti Rosso Pinterest per gli stati attivi
### Trattamento delle immagini
- Griglia a muratura stile pin (layout caratteristico di Pinterest)
- Angoli arrotondati: 12px–20px sulle immagini
- Fotografia come contenuto principale — ogni pin è un'immagine
- Bordi bianchi spessi (8px) sui contenitori delle immagini in evidenza
## 5. Principi di layout
### Sistema di spaziatura
- Unità base: 8px
- Scala: 4px, 6px, 7px, 8px, 10px, 11px, 12px, 16px, 18px, 20px, 22px, 24px, 32px, 80px, 100px
- Salti grandi: 32px → 80px → 100px per la spaziatura delle sezioni
### Griglia e contenitore
- Griglia a muratura per il contenuto dei pin (layout caratteristico)
- Sezioni di contenuto centrate con larghezza massima generosa
- Footer scuro a larghezza intera
- Barra di ricerca come elemento di navigazione principale
### Filosofia degli spazi bianchi
- **Densità di ispirazione**: La griglia a muratura comprime i pin — la densità del contenuto È la proposta di valore. Lo spazio bianco esiste tra le sezioni, non all'interno della griglia.
- **Respira sopra, densità sotto**: Le sezioni hero/in evidenza ricevono padding generoso; la griglia dei pin è compatta e immersiva.
### Scala del raggio dei bordi
- Standard (12px): Schede piccole, link
- Bottone (16px): Bottoni, input, schede medie
- Comodo (20px): Schede in evidenza
- Grande (28px): Contenitori grandi
- Sezione (32px): Elementi tab, pannelli grandi
- Hero (40px): Contenitori hero, blocchi in evidenza grandi
- Cerchio (50%): Bottoni di azione, indicatori tab
## 6. Profondità ed elevazione
| Livello | Trattamento | Uso |
|-------|-----------|-----|
| Piatto (Livello 0) | Nessuna ombra | Predefinito — i pin si affidano al contenuto, non all'ombra |
| Sottile (Livello 1) | Ombra minimale (dai token) | Overlay elevati, menu a tendina |
| Focus (Accessibilità) | Anello `--sema-color-border-focus-outer-default` | Stati di focus |
**Filosofia delle ombre**: Pinterest usa ombre minimali. La griglia a muratura si affida al contenuto (fotografia) per creare interesse visivo piuttosto che agli effetti di elevazione. La profondità deriva dal calore dei colori delle superfici e dall'arrotondamento generoso dei contenitori.
## 7. Da fare e da non fare
### Da fare
- Usare neutri caldi (`#e5e5e0`, `#e0e0d9`, `#91918c`) — il tono caldo oliva/sabbia è l'identità
- Applicare il Rosso Pinterest (`#e60023`) solo per i CTA principali — è audace e singolare
- Usare Pin Sans esclusivamente — un carattere per tutto
- Applicare raggio dei bordi generoso: 16px per bottoni/input, 20px+ per schede
- Mantenere la griglia a muratura densa — la densità del contenuto è il valore
- Usare sfondi badge caldi (`hsla(60,20%,98%,.5)`) per lavaggi caldi sottili
- Usare `#211922` (nero prugna) per il testo principale — più caldo del nero puro
### Da non fare
- Non usare neutri grigio freddi — sempre caldo/tonalità oliva
- Non usare il nero puro (`#000000`) come testo principale — usare il nero prugna (`#211922`)
- Non usare bottoni a forma di pillola — il raggio di 16px è arrotondato ma non a pillola
- Non aggiungere ombre pesanti — Pinterest è piatto per design, la profondità viene dal contenuto
- Non usare piccolo raggio dei bordi (<12px) sulle schede — l'arrotondamento generoso è essenziale
- Non introdurre colori del brand aggiuntivi — rosso + neutri caldi è la tavolozza completa
- Non usare pesi del carattere sottili — Pin Sans minimo 400
## 8. Comportamento responsivo
### Punti di interruzione
| Nome | Larghezza | Cambiamenti chiave |
|------|-------|-------------|
| Mobile | <576px | Colonna singola, layout compatto |
| Mobile grande | 576–768px | Griglia pin a 2 colonne |
| Tablet | 768–890px | Griglia espansa |
| Desktop piccolo | 890–1312px | Griglia a muratura standard |
| Desktop | 1312–1440px | Layout completo |
| Desktop grande | 1440–1680px | Colonne griglia espanse |
| Ultra wide | >1680px | Densità massima della griglia |
### Strategia di riduzione
- Griglia pin: 5+ colonne → 3 → 2 → 1
- Navigazione: barra di ricerca + icone → nav mobile semplificata
- Sezioni in evidenza: fianco a fianco → impilate
- Hero: 70px → scala proporzionalmente verso il basso
- Footer: scuro multicolonna → impilato
## 9. Guida ai prompt per agenti
### Riferimento rapido dei colori
- Brand: Rosso Pinterest (`#e60023`)
- Sfondo: Bianco (`#ffffff`)
- Testo: Nero prugna (`#211922`)
- Testo secondario: Grigio oliva (`#62625b`)
- Superficie bottone: Grigio sabbia (`#e5e5e0`)
- Bordo: Argento caldo (`#91918c`)
- Focus: Blu focus (`#435ee5`)
### Esempi di prompt per componenti
- "Creare un hero: sfondo bianco. Titolo a 70px Pin Sans peso 600, nero prugna (#211922). Bottone CTA rosso (#e60023, raggio 16px, padding 6px 14px). Bottone sabbia secondario (#e5e5e0, raggio 16px)."
- "Progettare una scheda pin: sfondo bianco, raggio 16px, nessuna ombra. La fotografia riempie la parte superiore, descrizione 16px Pin Sans peso 400 sotto in #62625b."
- "Costruire un bottone di azione circolare: sfondo #e0e0d9, raggio 50%, icona #211922."
- "Creare un campo di input: sfondo bianco, 1px solid #91918c, raggio 16px, padding 11px 15px. Focus: contorno blu tramite token semantici."
- "Progettare il footer scuro: sfondo #33332e. Logo script Pinterest in bianco. Link 12px Pin Sans in #91918c."
### Guida all'iterazione
1. Neutri caldi ovunque — grigi oliva/sabbia, mai acciaio freddo
2. Rosso Pinterest solo per i CTA — audace e singolare
3. Raggio di 16px su bottoni/input, 20px+ su schede — generoso ma non a pillola
4. Pin Sans è l'unico carattere — compatto a 12px per l'interfaccia, 70px per il display
5. La fotografia porta il design — l'interfaccia rimane calda e minimale
6. Nero prugna (#211922) per il testo — più caldo del nero puro
open-design/design-systems/pinterest/DESIGN-ja.md
+233
View File
@@ -0,0 +1,233 @@
# Pinterest にインスパイアされたデザインシステム
> Category: メディア・コンシューマー
> ビジュアル探索。レッドアクセント、マソングリッド、画像ファースト。
## 1. ビジュアルテーマと雰囲気
Pinterest のウェブサイトは、ビジュアル探索をライフスタイル誌のように演出する、温かくインスピレーション溢れるキャンバスです。デザインは柔らかくやや温かみのある白い背景を基調とし、Pinterest レッド（`#e60023`）を唯一の大胆なブランドアクセントとして使用しています。多くのテックプラットフォームのクールなブルーとは異なり、Pinterest のニュートラルスケールには明確な温かみが感じられます——グレーはクールなスチールではなく、オリーブ/サンドトーン（`#91918c`、`#62625b`、`#e5e5e0`）に傾いており、居心地よくクラフト感のある雰囲気を作り出し、ブラウジングへの誘いを高めています。
タイポグラフィには Pin Sans を使用しています——日本語フォントを含む幅広いフォールバックスタックを持つカスタムプロプライエタリフォントで、Pinterest のグローバルなリーチを反映しています。ディスプレイサイズ（70px、ウェイト 600）では、Pin Sans は大きく親しみやすいヘッドラインを生み出します。小さいサイズではシステムはコンパクトです：ボタン 12px、キャプション 12–14px。CSS 変数の命名システム（`--comp-*`、`--sema-*`、`--base-*`）は、洗練された3層のデザイントークンアーキテクチャを示しています：コンポーネントレベル、セマンティックレベル、ベースレベルのトークンです。
Pinterest の特徴は、寛大なボーダーラジウスシステム（12px–40px、円形には 50%）と温かみのあるボタン背景です。セカンダリボタン（`#e5e5e0`）はコールドグレーではなく、明確に温かみのあるサンドトーンを持ちます。プライマリレッドボタンは 16px のラジウスを使用——丸みがありますが、ピル形ではありません。温かみのあるバッジ背景（`hsla(60,20%,98%,.5)`——微妙なイエロー温色調）と写真主体のレイアウトを組み合わせることで、コーポレートでステリルではなく、手作り感があり個人的なデザインが生まれています。
**主な特徴：**
- オリーブ/サンドトーンのニュートラルカラーを持つ温かい白いキャンバス——居心地よく、クリニカルではない
- Pinterest レッド（`#e60023`）を唯一の大胆なアクセントとして——控えめにならず、常に自信に満ちている
- グローバルフォールバックスタック（CJK を含む）を持つ Pin Sans カスタムフォント
- 3層トークンアーキテクチャ：`--comp-*` / `--sema-*` / `--base-*`
- 温かみのあるセカンダリサーフェス：サンドグレー（`#e5e5e0`）、温かいバッジ（`hsla(60,20%,98%,.5)`）
- 寛大なボーダーラジウス：標準 16px、大きなコンテナには最大 40px
- 写真ファーストのコンテンツ——ピン/画像が主要なビジュアル要素
- ダークに近いパープルのテキスト（`#211922`）——温かみがあり、プラムのヒントを持つ
## 2. カラーパレットとロール
### プライマリブランド
- **Pinterest レッド**（`#e60023`）：プライマリ CTA、ブランドアクセント——大胆で自信に満ちた赤
- **グリーン 700**（`#103c25`）：`--base-color-green-700`、成功/ネイチャーアクセント
- **グリーン 700 ホバー**（`#0b2819`）：`--base-color-hover-green-700`、プレスされたグリーン
### テキスト
- **プラムブラック**（`#211922`）：プライマリテキスト——プラムのアンダートーンを持つ温かいニアブラック
- **ブラック**（`#000000`）：セカンダリテキスト、ボタンテキスト
- **オリーブグレー**（`#62625b`）：セカンダリ説明、ミュートテキスト
- **ウォームシルバー**（`#91918c`）：`--comp-button-color-text-transparent-disabled`、無効テキスト、入力ボーダー
- **ホワイト**（`#ffffff`）：ダーク/カラーサーフェス上のテキスト
### インタラクティブ
- **フォーカスブルー**（`#435ee5`）：`--comp-button-color-border-focus-outer-transparent`、フォーカスリング
- **パフォーマンスパープル**（`#6845ab`）：`--sema-color-hover-icon-performance-plus`、パフォーマンス機能
- **レコメンデーションパープル**（`#7e238b`）：`--sema-color-hover-text-recommendation`、AI レコメンデーション
- **リンクブルー**（`#2b48d4`）：リンクテキストカラー
- **Facebook ブルー**（`#0866ff`）：`--facebook-background-color`、ソーシャルログイン
- **プレストブルー**（`#617bff`）：`--base-color-pressed-blue-200`、プレスした状態
### サーフェスとボーダー
- **サンドグレー**（`#e5e5e0`）：セカンダリボタン背景——温かみがあり、クラフト感がある
- **ウォームライト**（`#e0e0d9`）：円形ボタン背景、バッジ
- **ウォームウォッシュ**（`hsla(60, 20%, 98%, 0.5)`）：`--comp-badge-color-background-wash-light`、微妙な温かいバッジ背景
- **フォグ**（`#f6f6f3`）：ライトサーフェス（50% 不透明度）
- **ボーダー無効**（`#c8c8c1`）：`--sema-color-border-disabled`、無効ボーダー
- **ホバーグレー**（`#bcbcb3`）：`--base-color-hover-grayscale-150`、ホバーボーダー
- **ダークサーフェス**（`#33332e`）：ダークセクションの背景
### セマンティック
- **エラーレッド**（`#9e0a0a`）：チェックボックス/フォームエラー状態
## 3. タイポグラフィルール
### フォントファミリー
- **プライマリ**：`Pin Sans`、フォールバック：`-apple-system, system-ui, Segoe UI, Roboto, Oxygen-Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Arial`
### 階層
| ロール | フォント | サイズ | ウェイト | 行高 | 文字間隔 | 備考 |
|------|------|------|--------|-------------|----------------|-------|
| ディスプレイヒーロー | Pin Sans | 70px (4.38rem) | 600 | normal | normal | 最大インパクト |
| セクション見出し | Pin Sans | 28px (1.75rem) | 700 | normal | -1.2px | ネガティブトラッキング |
| ボディ | Pin Sans | 16px (1.00rem) | 400 | 1.40 | normal | 標準読み取り |
| キャプションボールド | Pin Sans | 14px (0.88rem) | 700 | normal | normal | 強いメタデータ |
| キャプション | Pin Sans | 12px (0.75rem) | 400–500 | 1.50 | normal | 小テキスト、タグ |
| ボタン | Pin Sans | 12px (0.75rem) | 400 | normal | normal | ボタンラベル |
### 原則
- **コンパクトなタイプスケール**：範囲は 12px–70px で劇的なジャンプ——ほとんどの機能的テキストは 12–16px で、密度の高いアプリのような情報階層を作ります。
- **温かいウェイト分布**：見出しに 600–700、ボディに 400–500。超軽量ウェイトなし——テキストは常に実質感があります。
- **見出しのネガティブトラッキング**：28px 見出しの -1.2px により、居心地よく親密なセクションタイトルが生まれます。
- **シングルフォントファミリー**：Pin Sans がすべてを担当——セカンダリディスプレイやモノスペースフォントは検出されませんでした。
## 4. コンポーネントスタイリング
### ボタン
**プライマリレッド**
- 背景：`#e60023`（Pinterest レッド）
- テキスト：`#000000`（黒——赤に対するコントラストとしては珍しい選択）
- パディング：6px 14px
- ラジウス：16px（寛大な丸み、ピル形ではない）
- ボーダー：`2px solid rgba(255, 255, 255, 0)`（透明）
- フォーカス：CSS 変数によるセマンティックボーダー + アウトライン
**セカンダリサンド**
- 背景：`#e5e5e0`（温かいサンドグレー）
- テキスト：`#000000`
- パディング：6px 14px
- ラジウス：16px
- フォーカス：同じセマンティックボーダーシステム
**サーキュラーアクション**
- 背景：`#e0e0d9`（ウォームライト）
- テキスト：`#211922`（プラムブラック）
- ラジウス：50%（円形）
- 用途：ピンアクション、ナビゲーションコントロール
**ゴースト/トランスペアレント**
- 背景：透明
- テキスト：`#000000`
- ボーダーなし
- 用途：第三のアクション
### カードとコンテナ
- 寛大なラジウス（12px–20px）を持つ写真ファーストのピンカード
- ほとんどのカードに従来のボックスシャドウなし
- 白または温かいフォグ背景
- 一部の画像コンテナに 8px の白い太いボーダー
### インプット
- メール入力：白い背景、`1px solid #91918c` ボーダー、16px ラジウス、11px 15px パディング
- フォーカス：CSS 変数によるセマンティックボーダー + アウトラインシステム
### ナビゲーション
- 白または温かい背景上のクリーンなヘッダー
- Pinterest ロゴ + 検索バーを中央に
- ナビリンクに Pin Sans 16px
- アクティブ状態に Pinterest レッドアクセント
### 画像処理
- ピンスタイルのマソングリッド（Pinterest のシグネチャレイアウト）
- 画像の角丸：12px–20px
- 写真をプライマリコンテンツとして——すべてのピンは画像
- フィーチャード画像コンテナに太い白いボーダー（8px）
## 5. レイアウト原則
### スペーシングシステム
- ベースユニット：8px
- スケール：4px、6px、7px、8px、10px、11px、12px、16px、18px、20px、22px、24px、32px、80px、100px
- 大きなジャンプ：セクション間隔に 32px → 80px → 100px
### グリッドとコンテナ
- ピンコンテンツにマソングリッド（シグネチャレイアウト）
- 寛大な最大幅を持つ中央揃えのコンテンツセクション
- フルワイドのダークフッター
- プライマリナビゲーション要素としての検索バー
### ホワイトスペース哲学
- **インスピレーション密度**：マソングリッドはピンをぎっしりと詰め込みます——コンテンツ密度自体が価値提案です。ホワイトスペースはグリッド内ではなく、セクション間に存在します。
- **上で呼吸し、下で密度を**：ヒーロー/フィーチャーセクションには寛大なパディングを。ピングリッドはコンパクトでイマーシブ。
### ボーダーラジウススケール
- スタンダード（12px）：小カード、リンク
- ボタン（16px）：ボタン、入力、中サイズカード
- コンフォータブル（20px）：フィーチャーカード
- ラージ（28px）：大きなコンテナ
- セクション（32px）：タブ要素、大パネル
- ヒーロー（40px）：ヒーローコンテナ、大型フィーチャーブロック
- サークル（50%）：アクションボタン、タブインジケーター
## 6. 奥行きと高さ
| レベル | 処理 | 用途 |
|-------|-----------|-----|
| フラット（レベル 0）| シャドウなし | デフォルト——ピンはシャドウではなくコンテンツに依存 |
| サブトル（レベル 1）| 最小シャドウ（トークンより） | 高架のオーバーレイ、ドロップダウン |
| フォーカス（アクセシビリティ）| `--sema-color-border-focus-outer-default` リング | フォーカス状態 |
**シャドウ哲学**：Pinterest は最小限のシャドウを使用します。マソングリッドは、エレベーション効果ではなくコンテンツ（写真）に依存して視覚的な興味を作り出します。深度は、サーフェスカラーの温かみとコンテナの寛大な丸みから生まれます。
## 7. やること・やらないこと
### やること
- 温かいニュートラル（`#e5e5e0`、`#e0e0d9`、`#91918c`）を使用する——温かいオリーブ/サンドトーンがアイデンティティ
- Pinterest レッド（`#e60023`）はプライマリ CTA のみに適用する——大胆でシングル
- Pin Sans のみを使用する——すべてに一つのフォント
- 寛大なボーダーラジウスを適用する：ボタン/入力に 16px、カードに 20px 以上
- マソングリッドを密に保つ——コンテンツ密度が価値
- 温かいバッジ背景（`hsla(60,20%,98%,.5)`）を微妙な温かいウォッシュに使用する
- プライマリテキストには `#211922`（プラムブラック）を使用する——純粋な黒より温かい
### やらないこと
- クールなグレーのニュートラルを使用しない——常に温かい/オリーブトーン
- プライマリテキストに純粋な黒（`#000000`）を使用しない——プラムブラック（`#211922`）を使用する
- ピル形のボタンを使用しない——16px ラジウスは丸みがあるが、ピル形ではない
- 重いシャドウを追加しない——Pinterest はデザイン上フラットで、深度はコンテンツから
- カードに小さなボーダーラジウス（<12px）を使用しない——寛大な丸みが核心
- 追加のブランドカラーを導入しない——赤 + 温かいニュートラルが完全なパレット
- 細いフォントウェイトを使用しない——Pin Sans は最低 400
## 8. レスポンシブ動作
### ブレークポイント
| 名前 | 幅 | 主な変更 |
|------|-------|-------------|
| モバイル | <576px | シングルカラム、コンパクトレイアウト |
| モバイルラージ | 576–768px | 2 カラムピングリッド |
| タブレット | 768–890px | 拡張グリッド |
| デスクトップスモール | 890–1312px | 標準マソングリッド |
| デスクトップ | 1312–1440px | フルレイアウト |
| ラージデスクトップ | 1440–1680px | 拡張グリッドカラム |
| ウルトラワイド | >1680px | 最大グリッド密度 |
### 折りたたみ戦略
- ピングリッド：5+ カラム → 3 → 2 → 1
- ナビゲーション：検索バー + アイコン → 簡略化されたモバイルナビ
- フィーチャーセクション：サイドバイサイド → スタック
- ヒーロー：70px → 比例的にスケールダウン
- フッター：ダークマルチカラム → スタック
## 9. エージェントプロンプトガイド
### クイックカラーリファレンス
- ブランド：Pinterest レッド（`#e60023`）
- 背景：ホワイト（`#ffffff`）
- テキスト：プラムブラック（`#211922`）
- セカンダリテキスト：オリーブグレー（`#62625b`）
- ボタンサーフェス：サンドグレー（`#e5e5e0`）
- ボーダー：ウォームシルバー（`#91918c`）
- フォーカス：フォーカスブルー（`#435ee5`）
### コンポーネントプロンプト例
- 「ヒーローを作成：白い背景。ヘッドラインは 70px Pin Sans ウェイト 600、プラムブラック（#211922）。レッド CTA ボタン（#e60023、16px ラジウス、6px 14px パディング）。セカンダリサンドボタン（#e5e5e0、16px ラジウス）。」
- 「ピンカードをデザイン：白い背景、16px ラジウス、シャドウなし。写真が上部を埋め、下に 16px Pin Sans ウェイト 400 の説明、#62625b で。」
- 「円形アクションボタンを構築：#e0e0d9 背景、50% ラジウス、#211922 アイコン。」
- 「入力フィールドを作成：白い背景、1px solid #91918c、16px ラジウス、11px 15px パディング。フォーカス：セマンティックトークンによるブルーアウトライン。」
- 「ダークフッターをデザイン：#33332e 背景。白い Pinterest スクリプトロゴ。12px Pin Sans リンク、#91918c で。」
### イテレーションガイド
1. いたるところに温かいニュートラル——オリーブ/サンドグレー、クールスチールは決して使わない
2. Pinterest レッドは CTA のみ——大胆でシングル
3. ボタン/入力に 16px ラジウス、カードに 20px 以上——寛大だがピル形ではない
4. Pin Sans が唯一のフォント——UI は 12px でコンパクト、ディスプレイは 70px
5. 写真がデザインを担う——UI は温かくミニマルを保つ
6. テキストにはプラムブラック（#211922）——純粋な黒より温かい
open-design/design-systems/pinterest/DESIGN-ko.md
+233
View File
@@ -0,0 +1,233 @@
# Pinterest에서 영감받은 디자인 시스템
> Category: 미디어 및 소비자
> 시각적 발견. 레드 액센트, 메이슨리 그리드, 이미지 우선.
## 1. 비주얼 테마 및 분위기
Pinterest 웹사이트는 시각적 발견을 라이프스타일 매거진처럼 느끼게 만드는 따뜻하고 영감 넘치는 캔버스입니다. 디자인은 부드럽고 약간 따뜻한 흰색 배경 위에 Pinterest 레드（`#e60023`）를 유일하고 강렬한 브랜드 액센트로 사용합니다. 대부분의 테크 플랫폼의 쿨한 블루와 달리, Pinterest의 뉴트럴 스케일은 뚜렷한 따뜻한 언더톤을 가집니다——그레이는 쿨 스틸이 아닌 올리브/샌드 톤（`#91918c`, `#62625b`, `#e5e5e0`）으로 기울어져 있어 아늑하고 수공예 같은 분위기를 만들어 브라우징을 유도합니다.
타이포그래피는 Pin Sans를 사용합니다——일본어 폰트를 포함한 광범위한 폴백 스택을 가진 커스텀 독점 폰트로, Pinterest의 글로벌 범위를 반영합니다. 디스플레이 크기（70px, 웨이트 600）에서 Pin Sans는 크고 초대하는 헤드라인을 만듭니다. 작은 크기에서 시스템은 컴팩트합니다: 버튼 12px, 캡션 12–14px. CSS 변수 명명 시스템（`--comp-*`, `--sema-*`, `--base-*`）은 정교한 3단계 디자인 토큰 아키텍처를 드러냅니다: 컴포넌트 레벨, 시맨틱 레벨, 베이스 레벨 토큰.
Pinterest를 차별화하는 것은 넉넉한 보더 라디우스 시스템（12px–40px, 원형에는 50%）과 따뜻한 버튼 배경입니다. 세컨더리 버튼（`#e5e5e0`）은 차가운 그레이가 아닌 뚜렷하게 따뜻한 샌드 톤을 가집니다. 프라이머리 레드 버튼은 16px 라디우스 사용——둥글지만 필 형태는 아닙니다. 따뜻한 배지 배경（`hsla(60,20%,98%,.5)`——미묘한 노란 따뜻한 세척）과 사진 주도 레이아웃을 결합하면, 기업적이고 무균적이지 않은 수공예적이고 개인적인 디자인이 탄생합니다.
**주요 특징:**
- 올리브/샌드 톤 뉴트럴을 가진 따뜻한 화이트 캔버스——아늑함, 임상적이지 않음
- Pinterest 레드（`#e60023`）를 유일한 강렬한 액센트로——결코 미묘하지 않고, 항상 자신감 있음
- 글로벌 폴백 스택（CJK 포함）을 가진 Pin Sans 커스텀 폰트
- 3단계 토큰 아키텍처: `--comp-*` / `--sema-*` / `--base-*`
- 따뜻한 세컨더리 서피스: 샌드 그레이（`#e5e5e0`）, 따뜻한 배지（`hsla(60,20%,98%,.5)`）
- 넉넉한 보더 라디우스: 표준 16px, 큰 컨테이너에는 최대 40px
- 사진 우선 콘텐츠——핀/이미지가 주요 비주얼 요소
- 어두운 근보라색 텍스트（`#211922`）——따뜻하고, 자두빛 힌트가 있음
## 2. 컬러 팔레트 및 역할
### 프라이머리 브랜드
- **Pinterest 레드**（`#e60023`）: 프라이머리 CTA, 브랜드 액센트——강렬하고 자신감 있는 빨강
- **그린 700**（`#103c25`）: `--base-color-green-700`, 성공/자연 액센트
- **그린 700 호버**（`#0b2819`）: `--base-color-hover-green-700`, 눌린 그린
### 텍스트
- **플럼 블랙**（`#211922`）: 프라이머리 텍스트——자두빛 언더톤을 가진 따뜻한 근검정
- **블랙**（`#000000`）: 세컨더리 텍스트, 버튼 텍스트
- **올리브 그레이**（`#62625b`）: 세컨더리 설명, 뮤트 텍스트
- **웜 실버**（`#91918c`）: `--comp-button-color-text-transparent-disabled`, 비활성 텍스트, 입력 보더
- **화이트**（`#ffffff`）: 어두운/컬러 서피스 위의 텍스트
### 인터랙티브
- **포커스 블루**（`#435ee5`）: `--comp-button-color-border-focus-outer-transparent`, 포커스 링
- **퍼포먼스 퍼플**（`#6845ab`）: `--sema-color-hover-icon-performance-plus`, 퍼포먼스 기능
- **리커멘데이션 퍼플**（`#7e238b`）: `--sema-color-hover-text-recommendation`, AI 추천
- **링크 블루**（`#2b48d4`）: 링크 텍스트 색상
- **Facebook 블루**（`#0866ff`）: `--facebook-background-color`, 소셜 로그인
- **프레스드 블루**（`#617bff`）: `--base-color-pressed-blue-200`, 눌린 상태
### 서피스 및 보더
- **샌드 그레이**（`#e5e5e0`）: 세컨더리 버튼 배경——따뜻하고, 수공예 느낌
- **웜 라이트**（`#e0e0d9`）: 원형 버튼 배경, 배지
- **웜 워시**（`hsla(60, 20%, 98%, 0.5)`）: `--comp-badge-color-background-wash-light`, 미묘한 따뜻한 배지 배경
- **포그**（`#f6f6f3`）: 라이트 서피스（50% 불투명도）
- **보더 비활성**（`#c8c8c1`）: `--sema-color-border-disabled`, 비활성 보더
- **호버 그레이**（`#bcbcb3`）: `--base-color-hover-grayscale-150`, 호버 보더
- **다크 서피스**（`#33332e`）: 다크 섹션 배경
### 시맨틱
- **에러 레드**（`#9e0a0a`）: 체크박스/폼 에러 상태
## 3. 타이포그래피 규칙
### 폰트 패밀리
- **프라이머리**: `Pin Sans`, 폴백: `-apple-system, system-ui, Segoe UI, Roboto, Oxygen-Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Arial`
### 계층 구조
| 역할 | 폰트 | 크기 | 웨이트 | 행간 | 자간 | 비고 |
|------|------|------|--------|-------------|----------------|-------|
| 디스플레이 히어로 | Pin Sans | 70px (4.38rem) | 600 | normal | normal | 최대 임팩트 |
| 섹션 헤딩 | Pin Sans | 28px (1.75rem) | 700 | normal | -1.2px | 네거티브 트래킹 |
| 본문 | Pin Sans | 16px (1.00rem) | 400 | 1.40 | normal | 표준 읽기 |
| 캡션 볼드 | Pin Sans | 14px (0.88rem) | 700 | normal | normal | 강한 메타데이터 |
| 캡션 | Pin Sans | 12px (0.75rem) | 400–500 | 1.50 | normal | 소형 텍스트, 태그 |
| 버튼 | Pin Sans | 12px (0.75rem) | 400 | normal | normal | 버튼 레이블 |
### 원칙
- **컴팩트 타입 스케일**: 범위는 12px–70px로 극적인 점프——대부분의 기능적 텍스트는 12–16px로, 밀도 높은 앱 같은 정보 계층을 만듭니다.
- **따뜻한 웨이트 분포**: 헤딩에 600–700, 본문에 400–500. 초경량 웨이트 없음——텍스트는 항상 실질감이 있습니다.
- **헤딩의 네거티브 트래킹**: 28px 헤딩에서 -1.2px는 아늑하고 친밀한 섹션 타이틀을 만듭니다.
- **단일 폰트 패밀리**: Pin Sans가 모든 것을 처리——세컨더리 디스플레이나 모노스페이스 폰트는 감지되지 않았습니다.
## 4. 컴포넌트 스타일링
### 버튼
**프라이머리 레드**
- 배경: `#e60023`（Pinterest 레드）
- 텍스트: `#000000`（검정——레드 위에 대비를 위한 특이한 선택）
- 패딩: 6px 14px
- 라디우스: 16px（넉넉히 둥글지만 필 형태 아님）
- 보더: `2px solid rgba(255, 255, 255, 0)`（투명）
- 포커스: CSS 변수를 통한 시맨틱 보더 + 아웃라인
**세컨더리 샌드**
- 배경: `#e5e5e0`（따뜻한 샌드 그레이）
- 텍스트: `#000000`
- 패딩: 6px 14px
- 라디우스: 16px
- 포커스: 동일한 시맨틱 보더 시스템
**서큘러 액션**
- 배경: `#e0e0d9`（웜 라이트）
- 텍스트: `#211922`（플럼 블랙）
- 라디우스: 50%（원형）
- 용도: 핀 액션, 네비게이션 컨트롤
**고스트/투명**
- 배경: 투명
- 텍스트: `#000000`
- 보더 없음
- 용도: 3차 액션
### 카드 및 컨테이너
- 넉넉한 라디우스（12px–20px）를 가진 사진 우선 핀 카드
- 대부분의 카드에 전통적인 박스 쉐도우 없음
- 화이트 또는 따뜻한 포그 배경
- 일부 이미지 컨테이너에 8px 화이트 두꺼운 보더
### 인풋
- 이메일 인풋: 흰 배경, `1px solid #91918c` 보더, 16px 라디우스, 11px 15px 패딩
- 포커스: CSS 변수를 통한 시맨틱 보더 + 아웃라인 시스템
### 네비게이션
- 화이트 또는 따뜻한 배경 위의 깔끔한 헤더
- Pinterest 로고 + 검색 바 중앙 배치
- 네비 링크에 Pin Sans 16px
- 활성 상태에 Pinterest 레드 액센트
### 이미지 처리
- 핀 스타일 메이슨리 그리드（Pinterest 시그니처 레이아웃）
- 이미지 둥근 모서리: 12px–20px
- 사진을 주요 콘텐츠로——모든 핀은 이미지
- 피처드 이미지 컨테이너에 두꺼운 화이트 보더（8px）
## 5. 레이아웃 원칙
### 간격 시스템
- 기본 단위: 8px
- 스케일: 4px, 6px, 7px, 8px, 10px, 11px, 12px, 16px, 18px, 20px, 22px, 24px, 32px, 80px, 100px
- 큰 점프: 섹션 간격에 32px → 80px → 100px
### 그리드 및 컨테이너
- 핀 콘텐츠에 메이슨리 그리드（시그니처 레이아웃）
- 넉넉한 최대 너비를 가진 중앙 정렬 콘텐츠 섹션
- 전체 너비 다크 푸터
- 주요 네비게이션 요소로서의 검색 바
### 공백 철학
- **영감 밀도**: 메이슨리 그리드는 핀을 촘촘히 쌓습니다——콘텐츠 밀도 자체가 가치 제안입니다. 공백은 그리드 내부가 아닌 섹션 사이에 존재합니다.
- **위에서 숨쉬고, 아래에서 밀도**: 히어로/피처 섹션은 넉넉한 패딩을 얻습니다; 핀 그리드는 컴팩트하고 몰입적입니다.
### 보더 라디우스 스케일
- 표준（12px）: 소형 카드, 링크
- 버튼（16px）: 버튼, 인풋, 중형 카드
- 편안함（20px）: 피처 카드
- 라지（28px）: 대형 컨테이너
- 섹션（32px）: 탭 요소, 대형 패널
- 히어로（40px）: 히어로 컨테이너, 대형 피처 블록
- 서클（50%）: 액션 버튼, 탭 인디케이터
## 6. 깊이와 높이
| 레벨 | 처리 | 용도 |
|-------|-----------|-----|
| 플랫（레벨 0）| 쉐도우 없음 | 기본——핀은 쉐도우가 아닌 콘텐츠에 의존 |
| 서틀（레벨 1）| 최소 쉐도우（토큰에서） | 높은 오버레이, 드롭다운 |
| 포커스（접근성）| `--sema-color-border-focus-outer-default` 링 | 포커스 상태 |
**쉐도우 철학**: Pinterest는 최소한의 쉐도우를 사용합니다. 메이슨리 그리드는 엘리베이션 효과가 아닌 콘텐츠（사진）에 의존하여 시각적 흥미를 만듭니다. 깊이는 서피스 색상의 따뜻함과 컨테이너의 넉넉한 라운딩에서 옵니다.
## 7. 해야 할 것과 하지 말아야 할 것
### 해야 할 것
- 따뜻한 뉴트럴（`#e5e5e0`, `#e0e0d9`, `#91918c`）사용——따뜻한 올리브/샌드 톤이 아이덴티티
- Pinterest 레드（`#e60023`）는 프라이머리 CTA에만 적용——강렬하고 단독
- Pin Sans만 독점 사용——모든 것에 하나의 폰트
- 넉넉한 보더 라디우스 적용: 버튼/인풋에 16px, 카드에 20px 이상
- 메이슨리 그리드를 밀도 높게 유지——콘텐츠 밀도가 가치
- 따뜻한 배지 배경（`hsla(60,20%,98%,.5)`）을 미묘한 따뜻한 워시에 사용
- 프라이머리 텍스트에 `#211922`（플럼 블랙）사용——순수한 검정보다 따뜻함
### 하지 말아야 할 것
- 쿨 그레이 뉴트럴 사용하지 않기——항상 따뜻한/올리브 톤
- 프라이머리 텍스트에 순수한 검정（`#000000`）사용하지 않기——플럼 블랙（`#211922`）사용
- 필 형태 버튼 사용하지 않기——16px 라디우스는 둥글지만 필 형태 아님
- 무거운 쉐도우 추가하지 않기——Pinterest는 디자인적으로 플랫, 깊이는 콘텐츠에서
- 카드에 작은 보더 라디우스（<12px）사용하지 않기——넉넉한 라운딩이 핵심
- 추가 브랜드 색상 도입하지 않기——빨강 + 따뜻한 뉴트럴이 완전한 팔레트
- 얇은 폰트 웨이트 사용하지 않기——Pin Sans 최소 400
## 8. 반응형 동작
### 브레이크포인트
| 이름 | 너비 | 주요 변경 |
|------|-------|-------------|
| 모바일 | <576px | 단일 컬럼, 컴팩트 레이아웃 |
| 모바일 라지 | 576–768px | 2컬럼 핀 그리드 |
| 태블릿 | 768–890px | 확장 그리드 |
| 데스크톱 스몰 | 890–1312px | 표준 메이슨리 그리드 |
| 데스크톱 | 1312–1440px | 전체 레이아웃 |
| 라지 데스크톱 | 1440–1680px | 확장 그리드 컬럼 |
| 울트라 와이드 | >1680px | 최대 그리드 밀도 |
### 접힘 전략
- 핀 그리드: 5+ 컬럼 → 3 → 2 → 1
- 네비게이션: 검색 바 + 아이콘 → 단순화된 모바일 네비
- 피처 섹션: 나란히 → 스택
- 히어로: 70px → 비례적으로 축소
- 푸터: 다크 멀티컬럼 → 스택
## 9. 에이전트 프롬프트 가이드
### 빠른 컬러 레퍼런스
- 브랜드: Pinterest 레드（`#e60023`）
- 배경: 화이트（`#ffffff`）
- 텍스트: 플럼 블랙（`#211922`）
- 세컨더리 텍스트: 올리브 그레이（`#62625b`）
- 버튼 서피스: 샌드 그레이（`#e5e5e0`）
- 보더: 웜 실버（`#91918c`）
- 포커스: 포커스 블루（`#435ee5`）
### 컴포넌트 프롬프트 예시
- "히어로 만들기: 흰 배경. 헤드라인은 70px Pin Sans 웨이트 600, 플럼 블랙（#211922）. 레드 CTA 버튼（#e60023, 16px 라디우스, 6px 14px 패딩）. 세컨더리 샌드 버튼（#e5e5e0, 16px 라디우스）."
- "핀 카드 디자인: 흰 배경, 16px 라디우스, 쉐도우 없음. 사진이 상단을 채우고, 아래에 16px Pin Sans 웨이트 400 설명을 #62625b로."
- "서큘러 액션 버튼 구성: #e0e0d9 배경, 50% 라디우스, #211922 아이콘."
- "입력 필드 만들기: 흰 배경, 1px solid #91918c, 16px 라디우스, 11px 15px 패딩. 포커스: 시맨틱 토큰을 통한 블루 아웃라인."
- "다크 푸터 디자인: #33332e 배경. 흰색 Pinterest 스크립트 로고. 12px Pin Sans 링크, #91918c로."
### 이터레이션 가이드
1. 모든 곳에 따뜻한 뉴트럴——올리브/샌드 그레이, 쿨 스틸은 절대 안 됨
2. Pinterest 레드는 CTA에만——강렬하고 단독
3. 버튼/인풋에 16px 라디우스, 카드에 20px 이상——넉넉하지만 필 형태 아님
4. Pin Sans가 유일한 폰트——UI는 12px로 컴팩트, 디스플레이는 70px
5. 사진이 디자인을 이끌어——UI는 따뜻하고 미니멀하게 유지
6. 텍스트에 플럼 블랙（#211922）——순수한 검정보다 따뜻함
open-design/design-systems/pinterest/DESIGN-nl.md
+233
View File
@@ -0,0 +1,233 @@
# Ontwerpsysteem Geïnspireerd door Pinterest
> Category: Media & Consumer
> Visuele ontdekking. Rood accent, masonry-raster, afbeelding staat centraal.
## 1. Visueel Thema & Sfeer
De website van Pinterest is een warm, inspirerend canvas dat visuele ontdekking behandelt als een lifestylemagazine. Het ontwerp werkt op een zachte, licht warme witte achtergrond met Pinterest Red (`#e60023`) als het enige, gedurfde merkaccent. In tegenstelling tot de koele blauwtinten van de meeste techplatforms heeft de neutrale schaal van Pinterest een duidelijk warme ondertoon — grijstinten neigen naar olijf/zand (`#91918c`, `#62625b`, `#e5e5e0`) in plaats van koel staal, wat een gezellige, ambachtelijke sfeer creëert die uitnodigt tot browsen.
De typografie maakt gebruik van Pin Sans — een aangepast propriëtair lettertype met een brede fallback-stack inclusief Japanse lettertypen, wat de wereldwijde reikwijdte van Pinterest weerspiegelt. Op displayschaal (70px, gewicht 600) creëert Pin Sans grote, uitnodigende koppen. Op kleinere formaten is het systeem compact: knoppen op 12px, onderschriften op 12–14px. Het CSS-variabelennaamgevingssysteem (`--comp-*`, `--sema-*`, `--base-*`) onthult een verfijnde drielaagse ontwerptokenarchitectuur: tokens op component-, semantisch en basisniveau.
Wat Pinterest onderscheidt, is zijn genereuze border-radius-systeem (12px–40px, plus 50% voor cirkels) en warm getinte knopachtergronden. De secundaire knop (`#e5e5e0`) heeft een duidelijk warme, zandachtige toon in plaats van koud grijs. De primaire rode knop gebruikt een radius van 16px — afgerond maar niet pilvormig. Gecombineerd met warme badge-achtergronden (`hsla(60,20%,98%,.5)` — een subtiele geel-warme waas) en door fotografie gedomineerde layouts, resulteert dit in een ontwerp dat handgemaakt en persoonlijk aanvoelt, niet zakelijk en steriel.
**Kernkenmerken:**
- Warm wit canvas met olijf/zandkleurige neutrale tinten — gezellig, niet klinisch
- Pinterest Red (`#e60023`) als enig gedurfd accent — nooit subtiel, altijd zelfverzekerd
- Aangepast lettertype Pin Sans met wereldwijde fallback-stack (inclusief CJK)
- Drielaagse tokenarchitectuur: `--comp-*` / `--sema-*` / `--base-*`
- Warme secundaire oppervlakken: zandgrijs (`#e5e5e0`), warme badge (`hsla(60,20%,98%,.5)`)
- Genereuze border-radius: 16px standaard, tot 40px voor grote containers
- Fotografie-eerste inhoud — pins/afbeeldingen zijn het primaire visuele element
- Donker bijna-paars tekst (`#211922`) — warm, met een vleugje pruim
## 2. Kleurenpalet & Rollen
### Primair Merk
- **Pinterest Red** (`#e60023`): Primaire CTA, merkaccent — gedurfd, zelfverzekerd rood
- **Green 700** (`#103c25`): `--base-color-green-700`, succes-/natuuraccent
- **Green 700 Hover** (`#0b2819`): `--base-color-hover-green-700`, ingedrukt groen
### Tekst
- **Pruimzwart** (`#211922`): Primaire tekst — warme bijna-zwart met pruimondertoon
- **Zwart** (`#000000`): Secundaire tekst, knoptekst
- **Olijfgrijs** (`#62625b`): Secundaire beschrijvingen, gedempte tekst
- **Warm Zilver** (`#91918c`): `--comp-button-color-text-transparent-disabled`, uitgeschakelde tekst, invoergransen
- **Wit** (`#ffffff`): Tekst op donkere/gekleurde oppervlakken
### Interactief
- **Focusblauw** (`#435ee5`): `--comp-button-color-border-focus-outer-transparent`, focusringen
- **Prestatiepaars** (`#6845ab`): `--sema-color-hover-icon-performance-plus`, prestatiefuncties
- **Aanbevelingspaars** (`#7e238b`): `--sema-color-hover-text-recommendation`, AI-aanbeveling
- **Linkblauw** (`#2b48d4`): Linktekstkleur
- **Facebookblauw** (`#0866ff`): `--facebook-background-color`, sociale login
- **Ingedrukt Blauw** (`#617bff`): `--base-color-pressed-blue-200`, ingedrukte toestand
### Oppervlak & Rand
- **Zandgrijs** (`#e5e5e0`): Achtergrond secundaire knop — warm, ambachtelijk
- **Warm Licht** (`#e0e0d9`): Achtergronden cirkelvormige knoppen, badges
- **Warme Waas** (`hsla(60, 20%, 98%, 0.5)`): `--comp-badge-color-background-wash-light`, subtiele warme badge-achtergrond
- **Mist** (`#f6f6f3`): Licht oppervlak (bij 50% dekking)
- **Uitgeschakelde Rand** (`#c8c8c1`): `--sema-color-border-disabled`, uitgeschakelde randen
- **Hovergrijs** (`#bcbcb3`): `--base-color-hover-grayscale-150`, hoverrand
- **Donker Oppervlak** (`#33332e`): Achtergronden donkere secties
### Semantisch
- **Foutrood** (`#9e0a0a`): Foutstatus voor selectievakjes/formulieren
## 3. Typografieregels
### Lettertypefamilie
- **Primair**: `Pin Sans`, fallbacks: `-apple-system, system-ui, Segoe UI, Roboto, Oxygen-Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Arial`
### Hiërarchie
| Rol | Lettertype | Grootte | Gewicht | Regelhoogte | Letterafstand | Notities |
|-----|-----------|---------|---------|-------------|---------------|---------|
| Display Hero | Pin Sans | 70px (4.38rem) | 600 | normaal | normaal | Maximale impact |
| Sectiekop | Pin Sans | 28px (1.75rem) | 700 | normaal | -1.2px | Negatieve tracking |
| Hoofdtekst | Pin Sans | 16px (1.00rem) | 400 | 1.40 | normaal | Standaard lezen |
| Vet onderschrift | Pin Sans | 14px (0.88rem) | 700 | normaal | normaal | Sterke metadata |
| Onderschrift | Pin Sans | 12px (0.75rem) | 400–500 | 1.50 | normaal | Kleine tekst, tags |
| Knop | Pin Sans | 12px (0.75rem) | 400 | normaal | normaal | Knoplabels |
### Principes
- **Compacte typeschaal**: Het bereik is 12px–70px met een dramatische sprong — de meeste functionele tekst is 12–16px, waardoor een dichte, app-achtige informatiehiërarchie ontstaat.
- **Warme gewichtsverdeling**: 600–700 voor koppen, 400–500 voor hoofdtekst. Geen ultra-lichte gewichten — de typografie voelt altijd substantieel aan.
- **Negatieve tracking op koppen**: -1.2px op 28px-koppen creëert gezellige, intieme sectietitels.
- **Enkele lettertypefamilie**: Pin Sans verzorgt alles — geen secundair display- of monospace-lettertype gedetecteerd.
## 4. Componentstijlen
### Knoppen
**Primair Rood**
- Achtergrond: `#e60023` (Pinterest Red)
- Tekst: `#000000` (zwart — ongebruikelijke keuze voor contrast op rood)
- Opvulling: 6px 14px
- Radius: 16px (royaal afgerond, niet pilvormig)
- Rand: `2px solid rgba(255, 255, 255, 0)` (transparant)
- Focus: semantische rand + omtrek via CSS-variabelen
**Secundair Zand**
- Achtergrond: `#e5e5e0` (warm zandgrijs)
- Tekst: `#000000`
- Opvulling: 6px 14px
- Radius: 16px
- Focus: hetzelfde semantische randsysteem
**Cirkelvormige Actie**
- Achtergrond: `#e0e0d9` (warm licht)
- Tekst: `#211922` (pruimzwart)
- Radius: 50% (cirkel)
- Gebruik: Pinacties, navigatiecontroles
**Ghost / Transparant**
- Achtergrond: transparant
- Tekst: `#000000`
- Geen rand
- Gebruik: Tertiaire acties
### Kaarten & Containers
- Fotografie-eerste pinkaarten met royale radius (12px–20px)
- Geen traditionele box-shadow op de meeste kaarten
- Witte of warme mistige achtergronden
- Witte dikke rand van 8px op sommige afbeeldingscontainers
### Invoervelden
- E-mailinvoer: witte achtergrond, `1px solid #91918c` rand, radius 16px, opvulling 11px 15px
- Focus: semantisch rand- en omtreksysteem via CSS-variabelen
### Navigatie
- Schone koptekst op witte of warme achtergrond
- Pinterest-logo + zoekbalk gecentreerd
- Pin Sans 16px voor navigatielinks
- Pinterest Red-accenten voor actieve toestanden
### Beeldbehandeling
- Masonry-raster in pinstijl (kenmerkende Pinterest-layout)
- Afgeronde hoeken: 12px–20px op afbeeldingen
- Fotografie als primaire inhoud — elke pin is een afbeelding
- Dikke witte randen (8px) op uitgelichte afbeeldingscontainers
## 5. Layoutprincipes
### Spaatsysteem
- Basiseenheid: 8px
- Schaal: 4px, 6px, 7px, 8px, 10px, 11px, 12px, 16px, 18px, 20px, 22px, 24px, 32px, 80px, 100px
- Grote sprongen: 32px → 80px → 100px voor sectie-spatiëring
### Raster & Container
- Masonry-raster voor pin-inhoud (kenmerkende layout)
- Gecentreerde inhoudssecties met royale maximale breedte
- Donkere voettekst op volledige breedte
- Zoekbalk als primair navigatie-element
### Witruimtefilosofie
- **Inspiratiedichtheid**: Het masonry-raster pakt pins dicht op elkaar — de inhoudsdichtheid IS de waardepropositie. Witruimte bestaat tussen secties, niet binnen het raster.
- **Adem boven, dichtheid onder**: Hero-/functiesecties krijgen royale opvulling; het pinraster is compact en immersief.
### Border Radius-schaal
- Standaard (12px): Kleine kaarten, links
- Knop (16px): Knoppen, invoervelden, middelgrote kaarten
- Comfortabel (20px): Functiekaarten
- Groot (28px): Grote containers
- Sectie (32px): Tabelementen, grote panelen
- Hero (40px): Hero-containers, grote functieblokken
- Cirkel (50%): Actieknoppen, tabindicatoren
## 6. Diepte & Elevatie
| Niveau | Behandeling | Gebruik |
|--------|-------------|---------|
| Vlak (Niveau 0) | Geen schaduw | Standaard — pins vertrouwen op inhoud, niet op schaduw |
| Subtiel (Niveau 1) | Minimale schaduw (van tokens) | Verhoogde overlays, dropdowns |
| Focus (Toegankelijkheid) | `--sema-color-border-focus-outer-default` ring | Focustoestanden |
**Schaduwfilosofie**: Pinterest gebruikt minimale schaduwen. Het masonry-raster vertrouwt op inhoud (fotografie) om visuele interesse te creëren in plaats van elevatie-effecten. Diepte komt van de warmte van oppervlakkleuren en de royale afronding van containers.
## 7. Do's en Don'ts
### Doen
- Gebruik warme neutralen (`#e5e5e0`, `#e0e0d9`, `#91918c`) — de warme olijf-/zandtoon is de identiteit
- Pas Pinterest Red (`#e60023`) alleen toe voor primaire CTA's — het is gedurfd en enkelvoudig
- Gebruik Pin Sans uitsluitend — één lettertype voor alles
- Pas royale border-radius toe: 16px voor knoppen/invoervelden, 20px+ voor kaarten
- Houd het masonry-raster dicht — inhoudsdichtheid is de waarde
- Gebruik warme badge-achtergronden (`hsla(60,20%,98%,.5)`) voor subtiele warme wazen
- Gebruik `#211922` (pruimzwart) voor primaire tekst — het is warmer dan puur zwart
### Niet Doen
- Gebruik geen koele grijze neutralen — altijd warm/olijfgetint
- Gebruik geen puur zwart (`#000000`) als primaire tekst — gebruik pruimzwart (`#211922`)
- Gebruik geen pilvormige knoppen — een radius van 16px is afgerond maar niet pilvormig
- Voeg geen zware schaduwen toe — Pinterest is plat by design, diepte komt van inhoud
- Gebruik geen kleine border-radius (<12px) op kaarten — de royale afronding is essentieel
- Introduceer geen extra merkkleuren — rood + warme neutralen is het complete palet
- Gebruik geen dunne lettergewichten — Pin Sans minimaal 400
## 8. Responsief Gedrag
### Breekpunten
| Naam | Breedte | Belangrijke Wijzigingen |
|------|---------|------------------------|
| Mobiel | <576px | Enkele kolom, compact layout |
| Groot Mobiel | 576–768px | 2-koloms pinraster |
| Tablet | 768–890px | Uitgebreid raster |
| Klein Bureau | 890–1312px | Standaard masonry-raster |
| Bureau | 1312–1440px | Volledige layout |
| Groot Bureau | 1440–1680px | Uitgebreide rasterkolommen |
| Ultrabreed | >1680px | Maximale rasterdichtheid |
### Samenvouwstrategie
- Pinraster: 5+ kolommen → 3 → 2 → 1
- Navigatie: zoekbalk + pictogrammen → vereenvoudigde mobiele navigatie
- Functiesecties: naast elkaar → gestapeld
- Hero: 70px → schaalt proportioneel omlaag
- Voettekst: donkere meerdere kolommen → gestapeld
## 9. Agentpromptgids
### Snelle Kleurverwijzing
- Merk: Pinterest Red (`#e60023`)
- Achtergrond: Wit (`#ffffff`)
- Tekst: Pruimzwart (`#211922`)
- Secundaire tekst: Olijfgrijs (`#62625b`)
- Knopoppervlak: Zandgrijs (`#e5e5e0`)
- Rand: Warm Zilver (`#91918c`)
- Focus: Focusblauw (`#435ee5`)
### Voorbeeldcomponentprompts
- "Maak een hero: witte achtergrond. Kop van 70px Pin Sans gewicht 600, pruimzwart (#211922). Rode CTA-knop (#e60023, radius 16px, opvulling 6px 14px). Secundaire zandknop (#e5e5e0, radius 16px)."
- "Ontwerp een pinkaart: witte achtergrond, radius 16px, geen schaduw. Fotografie vult de bovenkant, beschrijving van 16px Pin Sans gewicht 400 eronder in #62625b."
- "Bouw een cirkelvormige actieknop: achtergrond #e0e0d9, radius 50%, pictogram #211922."
- "Maak een invoerveld: witte achtergrond, 1px solid #91918c, radius 16px, opvulling 11px 15px. Focus: blauwe omtrek via semantische tokens."
- "Ontwerp de donkere voettekst: achtergrond #33332e. Pinterest-scriptlogo in wit. Links van 12px Pin Sans in #91918c."
### Iteratiegids
1. Warme neutralen overal — olijf-/zandgrijzen, nooit koel staal
2. Pinterest Red alleen voor CTA's — gedurfd en enkelvoudig
3. Radius 16px op knoppen/invoervelden, 20px+ op kaarten — royaal maar niet pilvormig
4. Pin Sans is het enige lettertype — compact op 12px voor UI, 70px voor display
5. Fotografie draagt het ontwerp — de UI blijft warm en minimaal
6. Pruimzwart (#211922) voor tekst — warmer dan puur zwart
open-design/design-systems/pinterest/DESIGN-pl.md
+233
View File
@@ -0,0 +1,233 @@
# System Projektowania Inspirowany Pinterestem
> Category: Media & Consumer
> Wizualne odkrywanie. Czerwony akcent, siatka masonry, obraz na pierwszym planie.
## 1. Motyw Wizualny i Atmosfera
Witryna Pinteresta to ciepłe, inspirujące płótno, które traktuje wizualne odkrywanie jak magazyn lifestyle'owy. Projekt opiera się na miękkim, lekko ciepłym białym tle, z Pinterest Red (`#e60023`) jako jedynym, wyrazistym akcentem marki. W przeciwieństwie do chłodnych błękitów większości platform technologicznych, skala neutralna Pinteresta ma wyraźnie ciepły podton — szarości przechylają się ku oliwce/piaskowi (`#91918c`, `#62625b`, `#e5e5e0`), a nie ku chłodnej stali, tworząc przytulną, rzemieślniczą atmosferę sprzyjającą przeglądaniu.
Typografia używa Pin Sans — niestandardowego, zastrzeżonego kroju pisma z szerokim stosem awaryjnym, obejmującym japońskie czcionki, co odzwierciedla globalny zasięg Pinteresta. W skali wyświetlania (70px, grubość 600) Pin Sans tworzy duże, zachęcające nagłówki. W mniejszych rozmiarach system jest kompaktowy: przyciski 12px, podpisy 12–14px. System nazewnictwa zmiennych CSS (`--comp-*`, `--sema-*`, `--base-*`) ujawnia zaawansowaną, trójpoziomową architekturę tokenów projektowych: tokeny na poziomie komponentu, semantycznym i bazowym.
To, co wyróżnia Pinterest, to hojny system zaokrągleń (12px–40px plus 50% dla kół) oraz ciepło zabarwione tła przycisków. Przycisk drugorzędny (`#e5e5e0`) ma wyraźnie ciepły, piaskowobeżowy ton, a nie zimną szarość. Główny czerwony przycisk używa promienia 16px — zaokrąglony, ale nie w kształcie pigułki. W połączeniu z ciepłymi tłami odznak (`hsla(60,20%,98%,.5)` — subtelna żółtawa poświata) i układami zdominowanymi przez fotografię efektem jest projekt, który wygląda rzemieślniczo i osobiście, a nie korporacyjnie i sterylnie.
**Kluczowe Cechy:**
- Ciepłe białe płótno z neutralnymi tonami oliwkowymi/piaskowymi — przytulne, nie kliniczne
- Pinterest Red (`#e60023`) jako jedyny wyrazisty akcent — nigdy subtelny, zawsze pewny siebie
- Niestandardowa czcionka Pin Sans z globalnym stosem awaryjnym (w tym CJK)
- Trójpoziomowa architektura tokenów: `--comp-*` / `--sema-*` / `--base-*`
- Ciepłe powierzchnie drugorzędne: piaskowa szarość (`#e5e5e0`), ciepła odznaka (`hsla(60,20%,98%,.5)`)
- Hojne zaokrąglenia: 16px standardowe, do 40px dla dużych kontenerów
- Treść na pierwszym planie — piny/obrazy są głównym elementem wizualnym
- Ciemnofioletowy tekst (`#211922`) — ciepły, z nutą śliwki
## 2. Paleta Kolorów i Role
### Główna Marka
- **Pinterest Red** (`#e60023`): Główne CTA, akcent marki — odważna, pewna siebie czerwień
- **Green 700** (`#103c25`): `--base-color-green-700`, akcent sukcesu/natury
- **Green 700 Hover** (`#0b2819`): `--base-color-hover-green-700`, wciśnięta zieleń
### Tekst
- **Śliwkowa Czerń** (`#211922`): Tekst główny — ciepła, prawie czarna z podtonem śliwki
- **Czerń** (`#000000`): Tekst drugorzędny, tekst przycisków
- **Oliwkowa Szarość** (`#62625b`): Opisy drugorzędne, wyciszony tekst
- **Ciepłe Srebro** (`#91918c`): `--comp-button-color-text-transparent-disabled`, tekst wyłączony, obramowania pól
- **Biel** (`#ffffff`): Tekst na ciemnych/kolorowych powierzchniach
### Interaktywne
- **Niebieski Fokus** (`#435ee5`): `--comp-button-color-border-focus-outer-transparent`, pierścienie fokusu
- **Fiolet Wydajności** (`#6845ab`): `--sema-color-hover-icon-performance-plus`, funkcje wydajności
- **Fiolet Rekomendacji** (`#7e238b`): `--sema-color-hover-text-recommendation`, rekomendacja AI
- **Niebieski Linków** (`#2b48d4`): Kolor tekstu linków
- **Niebieski Facebooka** (`#0866ff`): `--facebook-background-color`, logowanie społecznościowe
- **Wciśnięty Niebieski** (`#617bff`): `--base-color-pressed-blue-200`, stan wciśnięty
### Powierzchnia i Obramowanie
- **Piaskowa Szarość** (`#e5e5e0`): Tło przycisku drugorzędnego — ciepłe, rzemieślnicze
- **Ciepłe Światło** (`#e0e0d9`): Tła okrągłych przycisków, odznaki
- **Ciepły Napar** (`hsla(60, 20%, 98%, 0.5)`): `--comp-badge-color-background-wash-light`, subtelne ciepłe tło odznaki
- **Mgła** (`#f6f6f3`): Jasna powierzchnia (przy 50% kryciu)
- **Obramowanie Wyłączone** (`#c8c8c1`): `--sema-color-border-disabled`, wyłączone obramowania
- **Szarość Hover** (`#bcbcb3`): `--base-color-hover-grayscale-150`, obramowanie hover
- **Ciemna Powierzchnia** (`#33332e`): Tła ciemnych sekcji
### Semantyczne
- **Czerwień Błędu** (`#9e0a0a`): Stany błędów pól wyboru/formularzy
## 3. Zasady Typografii
### Rodzina Czcionek
- **Główna**: `Pin Sans`, zamienniki: `-apple-system, system-ui, Segoe UI, Roboto, Oxygen-Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Arial`
### Hierarchia
| Rola | Czcionka | Rozmiar | Grubość | Wysokość Linii | Odstęp Liter | Uwagi |
|------|----------|---------|---------|----------------|--------------|-------|
| Nagłówek Główny | Pin Sans | 70px (4.38rem) | 600 | normalny | normalny | Maksymalny impact |
| Nagłówek Sekcji | Pin Sans | 28px (1.75rem) | 700 | normalny | -1.2px | Ujemne śledzenie |
| Treść | Pin Sans | 16px (1.00rem) | 400 | 1.40 | normalny | Standardowy odczyt |
| Pogrubiony Podpis | Pin Sans | 14px (0.88rem) | 700 | normalny | normalny | Wyraziste metadane |
| Podpis | Pin Sans | 12px (0.75rem) | 400–500 | 1.50 | normalny | Mały tekst, tagi |
| Przycisk | Pin Sans | 12px (0.75rem) | 400 | normalny | normalny | Etykiety przycisków |
### Zasady
- **Kompaktowa skala typograficzna**: Zakres to 12px–70px z dramatycznym skokiem — większość tekstu funkcjonalnego to 12–16px, tworząc gęstą, aplikacyjną hierarchię informacji.
- **Ciepły rozkład grubości**: 600–700 dla nagłówków, 400–500 dla treści. Bez ultralekkich grubości — typografia zawsze wydaje się solidna.
- **Ujemne śledzenie w nagłówkach**: -1.2px w nagłówkach 28px tworzy przytulne, bliskie tytuły sekcji.
- **Pojedyncza rodzina czcionek**: Pin Sans obsługuje wszystko — nie wykryto drugorzędnej czcionki wyświetlania ani o stałej szerokości.
## 4. Stylizacja Komponentów
### Przyciski
**Główny Czerwony**
- Tło: `#e60023` (Pinterest Red)
- Tekst: `#000000` (czarny — niezwykły wybór dla kontrastu na czerwonym)
- Padding: 6px 14px
- Promień: 16px (hojnie zaokrąglony, nie w kształcie pigułki)
- Obramowanie: `2px solid rgba(255, 255, 255, 0)` (przezroczysty)
- Fokus: semantyczne obramowanie + kontur przez zmienne CSS
**Drugorzędny Piaskowy**
- Tło: `#e5e5e0` (ciepła piaskowa szarość)
- Tekst: `#000000`
- Padding: 6px 14px
- Promień: 16px
- Fokus: ten sam semantyczny system obramowania
**Okrągła Akcja**
- Tło: `#e0e0d9` (ciepłe światło)
- Tekst: `#211922` (śliwkowa czerń)
- Promień: 50% (koło)
- Zastosowanie: Akcje pinów, elementy sterowania nawigacją
**Duch / Przezroczysty**
- Tło: przezroczysty
- Tekst: `#000000`
- Brak obramowania
- Zastosowanie: Trzeciorzędne akcje
### Karty i Kontenery
- Karty pinów na pierwszym planie fotografii z hojnym promieniem (12px–20px)
- Brak tradycyjnego box-shadow na większości kart
- Białe lub ciepłe mgłowe tła
- Białe grube obramowanie 8px na niektórych kontenerach obrazów
### Pola Wejściowe
- Pole e-mail: białe tło, obramowanie `1px solid #91918c`, promień 16px, padding 11px 15px
- Fokus: semantyczny system obramowania + konturu przez zmienne CSS
### Nawigacja
- Czysty nagłówek na białym lub ciepłym tle
- Logo Pinteresta + pasek wyszukiwania wyśrodkowany
- Pin Sans 16px dla linków nawigacyjnych
- Akcenty Pinterest Red dla aktywnych stanów
### Obróbka Obrazów
- Siatka masonry w stylu pinów (charakterystyczny układ Pinteresta)
- Zaokrąglone rogi: 12px–20px na obrazach
- Fotografia jako główna treść — każdy pin to obraz
- Grube białe obramowania (8px) na wyróżnionych kontenerach obrazów
## 5. Zasady Układu
### System Odstępów
- Jednostka bazowa: 8px
- Skala: 4px, 6px, 7px, 8px, 10px, 11px, 12px, 16px, 18px, 20px, 22px, 24px, 32px, 80px, 100px
- Duże skoki: 32px → 80px → 100px dla odstępów sekcji
### Siatka i Kontener
- Siatka masonry dla treści pinów (charakterystyczny układ)
- Wyśrodkowane sekcje treści z hojną maksymalną szerokością
- Pełnoszerokie ciemne stopka
- Pasek wyszukiwania jako główny element nawigacji
### Filozofia Białej Przestrzeni
- **Gęstość inspiracji**: Siatka masonry pakuje piny ciasno — gęstość treści JEST propozycją wartości. Biała przestrzeń istnieje między sekcjami, nie wewnątrz siatki.
- **Oddech powyżej, gęstość poniżej**: Sekcje hero/funkcje mają hojny padding; siatka pinów jest kompaktowa i immersywna.
### Skala Zaokrągleń
- Standardowe (12px): Małe karty, linki
- Przycisk (16px): Przyciski, pola wejściowe, średnie karty
- Komfortowe (20px): Karty funkcji
- Duże (28px): Duże kontenery
- Sekcja (32px): Elementy zakładek, duże panele
- Hero (40px): Kontenery hero, duże bloki funkcji
- Koło (50%): Przyciski akcji, wskaźniki zakładek
## 6. Głębokość i Elewacja
| Poziom | Leczenie | Zastosowanie |
|--------|----------|--------------|
| Płaski (Poziom 0) | Brak cienia | Domyślny — piny opierają się na treści, nie na cieniu |
| Subtelny (Poziom 1) | Minimalny cień (z tokenów) | Podwyższone nakładki, rozwijane menu |
| Fokus (Dostępność) | Pierścień `--sema-color-border-focus-outer-default` | Stany fokusu |
**Filozofia Cieni**: Pinterest używa minimalnych cieni. Siatka masonry opiera się na treści (fotografii) do tworzenia zainteresowania wizualnego, a nie na efektach elewacji. Głębokość pochodzi z ciepła kolorów powierzchni i hojnego zaokrąglenia kontenerów.
## 7. Co Robić i Czego Unikać
### Robić
- Używaj ciepłych neutralów (`#e5e5e0`, `#e0e0d9`, `#91918c`) — ciepły oliwkowo/piaskowy ton to tożsamość marki
- Stosuj Pinterest Red (`#e60023`) tylko dla głównych CTA — jest odważny i wyjątkowy
- Używaj wyłącznie Pin Sans — jedna czcionka do wszystkiego
- Stosuj hojne zaokrąglenia: 16px dla przycisków/pól, 20px+ dla kart
- Utrzymuj gęstą siatkę masonry — gęstość treści to wartość
- Używaj ciepłych teł odznak (`hsla(60,20%,98%,.5)`) dla subtelnych ciepłych przemyceń
- Używaj `#211922` (śliwkowej czerni) dla tekstu głównego — jest cieplejsza niż czysta czerń
### Unikać
- Nie używaj chłodnych szarości neutralnych — zawsze ciepłe/oliwkowe tony
- Nie używaj czystej czerni (`#000000`) jako tekstu głównego — używaj śliwkowej czerni (`#211922`)
- Nie używaj przycisków w kształcie pigułki — promień 16px jest zaokrąglony, ale nie w kształcie pigułki
- Nie dodawaj ciężkich cieni — Pinterest jest z założenia płaski, głębokość pochodzi z treści
- Nie używaj małego promienia zaokrąglenia (<12px) na kartach — hojne zaokrąglenie jest podstawą
- Nie wprowadzaj dodatkowych kolorów marki — czerwień + ciepłe neutralne to kompletna paleta
- Nie używaj cienkich grubości czcionek — Pin Sans minimum 400
## 8. Responsywne Zachowanie
### Punkty Przerwania
| Nazwa | Szerokość | Kluczowe Zmiany |
|-------|-----------|-----------------|
| Mobilny | <576px | Jedna kolumna, kompaktowy układ |
| Duży Mobilny | 576–768px | Siatka pinów 2-kolumnowa |
| Tablet | 768–890px | Rozszerzona siatka |
| Mały Desktop | 890–1312px | Standardowa siatka masonry |
| Desktop | 1312–1440px | Pełny układ |
| Duży Desktop | 1440–1680px | Rozszerzone kolumny siatki |
| Ultraszeroki | >1680px | Maksymalna gęstość siatki |
### Strategia Zwijania
- Siatka pinów: 5+ kolumn → 3 → 2 → 1
- Nawigacja: pasek wyszukiwania + ikony → uproszczona nawigacja mobilna
- Sekcje funkcji: bok do boku → ułożone
- Hero: 70px → skaluje się proporcjonalnie
- Stopka: ciemna wielokolumnowa → ułożona
## 9. Przewodnik Promptów Agenta
### Szybka Referenca Kolorów
- Marka: Pinterest Red (`#e60023`)
- Tło: Biały (`#ffffff`)
- Tekst: Śliwkowa Czerń (`#211922`)
- Tekst drugorzędny: Oliwkowa Szarość (`#62625b`)
- Powierzchnia przycisku: Piaskowa Szarość (`#e5e5e0`)
- Obramowanie: Ciepłe Srebro (`#91918c`)
- Fokus: Niebieski Fokus (`#435ee5`)
### Przykładowe Prompty Komponentów
- "Stwórz hero: białe tło. Nagłówek 70px Pin Sans grubość 600, śliwkowa czerń (#211922). Czerwony przycisk CTA (#e60023, promień 16px, padding 6px 14px). Drugorzędny piaskowy przycisk (#e5e5e0, promień 16px)."
- "Zaprojektuj kartę pinu: białe tło, promień 16px, brak cienia. Fotografia wypełnia górę, opis 16px Pin Sans grubość 400 poniżej w #62625b."
- "Zbuduj okrągły przycisk akcji: tło #e0e0d9, promień 50%, ikona #211922."
- "Stwórz pole wejściowe: białe tło, 1px solid #91918c, promień 16px, padding 11px 15px. Fokus: niebieski kontur przez tokeny semantyczne."
- "Zaprojektuj ciemną stopkę: tło #33332e. Logo Pinteresta w bieli. Linki 12px Pin Sans w #91918c."
### Przewodnik Iteracji
1. Ciepłe neutralne wszędzie — oliwkowe/piaskowe szarości, nigdy chłodna stal
2. Pinterest Red tylko dla CTA — odważny i wyjątkowy
3. Promień 16px na przyciskach/polach, 20px+ na kartach — hojny, ale nie w kształcie pigułki
4. Pin Sans to jedyna czcionka — kompaktowy 12px dla UI, 70px dla wyświetlania
5. Fotografia niesie projekt — UI pozostaje ciepłe i minimalne
6. Śliwkowa czerń (#211922) dla tekstu — cieplejsza niż czysta czerń
open-design/design-systems/pinterest/DESIGN-pt-br.md
+233
View File
@@ -0,0 +1,233 @@
# Sistema de design inspirado no Pinterest
> Category: Mídia e consumidor
> Descoberta visual. Acento vermelho, grade de alvenaria, imagem em primeiro lugar.
## 1. Tema visual e atmosfera
O site do Pinterest é uma tela quente e inspiradora que trata a descoberta visual como uma revista de estilo de vida. O design opera em um fundo branco suave e ligeiramente quente com o Vermelho Pinterest (`#e60023`) como o único acento de marca audacioso. Ao contrário dos azuis frios da maioria das plataformas de tecnologia, a escala de neutros do Pinterest tem um subtom claramente quente — os cinzas tendem para oliva/areia (`#91918c`, `#62625b`, `#e5e5e0`) em vez de aço frio, criando uma atmosfera aconchegante e artesanal que convida à navegação.
A tipografia usa Pin Sans — uma fonte proprietária personalizada com uma ampla pilha de fallback incluindo fontes japonesas, refletindo o alcance global do Pinterest. Na escala de display (70px, peso 600), Pin Sans cria títulos grandes e convidativos. Em tamanhos menores, o sistema é compacto: botões em 12px, legendas em 12–14px. O sistema de nomenclatura de variáveis CSS (`--comp-*`, `--sema-*`, `--base-*`) revela uma sofisticada arquitetura de tokens de design em três camadas: nível de componente, semântico e base.
O que distingue o Pinterest é seu generoso sistema de raio de borda (12px–40px, mais 50% para círculos) e fundos de botões com tonalidade quente. O botão secundário (`#e5e5e0`) tem um tom de areia claramente quente em vez de cinza frio. O botão vermelho primário usa raio de 16px — arredondado, mas não em forma de pílula. Combinado com fundos de emblemas quentes (`hsla(60,20%,98%,.5)` — um sutil lavado amarelo-quente) e layouts dominados por fotografia, o resultado é um design que parece artesanal e pessoal, não corporativo e estéril.
**Características principais:**
- Tela branca quente com neutros em tonalidade oliva/areia — aconchegante, não clínico
- Vermelho Pinterest (`#e60023`) como único acento audacioso — nunca sutil, sempre confiante
- Fonte personalizada Pin Sans com pilha de fallback global (incluindo CJK)
- Arquitetura de tokens em três camadas: `--comp-*` / `--sema-*` / `--base-*`
- Superfícies secundárias quentes: cinza areia (`#e5e5e0`), emblema quente (`hsla(60,20%,98%,.5)`)
- Raio de borda generoso: 16px padrão, até 40px para contêineres grandes
- Conteúdo com fotografia em primeiro lugar — pins/imagens são o elemento visual principal
- Texto quase violeta escuro (`#211922`) — quente, com um toque de ameixa
## 2. Paleta de cores e funções
### Marca principal
- **Vermelho Pinterest** (`#e60023`): CTA principal, acento de marca — vermelho audacioso e confiante
- **Verde 700** (`#103c25`): `--base-color-green-700`, acento de sucesso/natureza
- **Verde 700 Hover** (`#0b2819`): `--base-color-hover-green-700`, verde pressionado
### Texto
- **Preto ameixa** (`#211922`): Texto principal — quase preto quente com subtom ameixa
- **Preto** (`#000000`): Texto secundário, texto de botão
- **Cinza oliva** (`#62625b`): Descrições secundárias, texto discreto
- **Prata quente** (`#91918c`): `--comp-button-color-text-transparent-disabled`, texto desabilitado, bordas de entrada
- **Branco** (`#ffffff`): Texto em superfícies escuras/coloridas
### Interativo
- **Azul foco** (`#435ee5`): `--comp-button-color-border-focus-outer-transparent`, anéis de foco
- **Roxo desempenho** (`#6845ab`): `--sema-color-hover-icon-performance-plus`, recursos de desempenho
- **Roxo recomendação** (`#7e238b`): `--sema-color-hover-text-recommendation`, recomendação de IA
- **Azul link** (`#2b48d4`): Cor do texto do link
- **Azul Facebook** (`#0866ff`): `--facebook-background-color`, login social
- **Azul pressionado** (`#617bff`): `--base-color-pressed-blue-200`, estado pressionado
### Superfície e borda
- **Cinza areia** (`#e5e5e0`): Fundo do botão secundário — quente, artesanal
- **Claro quente** (`#e0e0d9`): Fundos de botões circulares, emblemas
- **Lavado quente** (`hsla(60, 20%, 98%, 0.5)`): `--comp-badge-color-background-wash-light`, fundo de emblema quente sutil
- **Névoa** (`#f6f6f3`): Superfície clara (a 50% de opacidade)
- **Borda desabilitada** (`#c8c8c1`): `--sema-color-border-disabled`, bordas desabilitadas
- **Cinza hover** (`#bcbcb3`): `--base-color-hover-grayscale-150`, borda ao passar o cursor
- **Superfície escura** (`#33332e`): Fundos de seções escuras
### Semântico
- **Vermelho erro** (`#9e0a0a`): Estados de erro de caixa de seleção/formulário
## 3. Regras tipográficas
### Família de fontes
- **Principal**: `Pin Sans`, fallbacks: `-apple-system, system-ui, Segoe UI, Roboto, Oxygen-Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Arial`
### Hierarquia
| Função | Fonte | Tamanho | Peso | Altura da linha | Espaçamento de letras | Observações |
|------|------|------|--------|-------------|----------------|-------|
| Display Hero | Pin Sans | 70px (4,38rem) | 600 | normal | normal | Impacto máximo |
| Título de seção | Pin Sans | 28px (1,75rem) | 700 | normal | -1,2px | Tracking negativo |
| Corpo | Pin Sans | 16px (1,00rem) | 400 | 1,40 | normal | Leitura padrão |
| Legenda em negrito | Pin Sans | 14px (0,88rem) | 700 | normal | normal | Metadados fortes |
| Legenda | Pin Sans | 12px (0,75rem) | 400–500 | 1,50 | normal | Texto pequeno, tags |
| Botão | Pin Sans | 12px (0,75rem) | 400 | normal | normal | Rótulos de botão |
### Princípios
- **Escala de tipo compacta**: O intervalo é 12px–70px com um salto dramático — a maioria dos textos funcionais está em 12–16px, criando uma hierarquia de informação densa, semelhante a um aplicativo.
- **Distribuição de peso quente**: 600–700 para títulos, 400–500 para corpo. Sem pesos ultraleves — o tipo sempre parece substancial.
- **Tracking negativo nos títulos**: -1,2px nos títulos de 28px cria títulos de seção aconchegantes e íntimos.
- **Família de fonte única**: Pin Sans cuida de tudo — nenhuma fonte de display secundária ou monoespaçada detectada.
## 4. Estilos de componentes
### Botões
**Vermelho primário**
- Fundo: `#e60023` (Vermelho Pinterest)
- Texto: `#000000` (preto — escolha incomum para contraste no vermelho)
- Padding: 6px 14px
- Raio: 16px (generosamente arredondado, não em pílula)
- Borda: `2px solid rgba(255, 255, 255, 0)` (transparente)
- Foco: borda semântica + contorno via variáveis CSS
**Areia secundário**
- Fundo: `#e5e5e0` (cinza areia quente)
- Texto: `#000000`
- Padding: 6px 14px
- Raio: 16px
- Foco: mesmo sistema de borda semântica
**Ação circular**
- Fundo: `#e0e0d9` (claro quente)
- Texto: `#211922` (preto ameixa)
- Raio: 50% (círculo)
- Uso: ações de pin, controles de navegação
**Fantasma / Transparente**
- Fundo: transparente
- Texto: `#000000`
- Sem borda
- Uso: ações terciárias
### Cartões e contêineres
- Cartões de pin com fotografia em primeiro lugar e raio generoso (12px–20px)
- Sem sombra de caixa tradicional na maioria dos cartões
- Fundos brancos ou névoa quente
- Borda branca grossa de 8px em alguns contêineres de imagem
### Entradas
- Entrada de e-mail: fundo branco, borda `1px solid #91918c`, raio 16px, padding 11px 15px
- Foco: sistema de borda semântica + contorno via variáveis CSS
### Navegação
- Cabeçalho limpo em fundo branco ou quente
- Logo Pinterest + barra de pesquisa centralizados
- Pin Sans 16px para links de navegação
- Acentos Vermelho Pinterest para estados ativos
### Tratamento de imagens
- Grade de alvenaria estilo pin (layout característico do Pinterest)
- Cantos arredondados: 12px–20px nas imagens
- Fotografia como conteúdo principal — cada pin é uma imagem
- Bordas brancas grossas (8px) em contêineres de imagens em destaque
## 5. Princípios de layout
### Sistema de espaçamento
- Unidade base: 8px
- Escala: 4px, 6px, 7px, 8px, 10px, 11px, 12px, 16px, 18px, 20px, 22px, 24px, 32px, 80px, 100px
- Saltos grandes: 32px → 80px → 100px para espaçamento de seções
### Grade e contêiner
- Grade de alvenaria para conteúdo de pins (layout característico)
- Seções de conteúdo centralizadas com largura máxima generosa
- Rodapé escuro com largura total
- Barra de pesquisa como elemento de navegação principal
### Filosofia do espaço em branco
- **Densidade de inspiração**: A grade de alvenaria empacota os pins com força — a densidade do conteúdo É a proposta de valor. O espaço em branco existe entre as seções, não dentro da grade.
- **Respira acima, densidade abaixo**: As seções hero/em destaque recebem padding generoso; a grade de pins é compacta e imersiva.
### Escala de raio de borda
- Padrão (12px): Cartões pequenos, links
- Botão (16px): Botões, entradas, cartões médios
- Confortável (20px): Cartões em destaque
- Grande (28px): Contêineres grandes
- Seção (32px): Elementos de aba, painéis grandes
- Hero (40px): Contêineres hero, blocos em destaque grandes
- Círculo (50%): Botões de ação, indicadores de aba
## 6. Profundidade e elevação
| Nível | Tratamento | Uso |
|-------|-----------|-----|
| Plano (Nível 0) | Sem sombra | Padrão — pins dependem do conteúdo, não da sombra |
| Sutil (Nível 1) | Sombra mínima (dos tokens) | Sobreposições elevadas, menus suspensos |
| Foco (Acessibilidade) | Anel `--sema-color-border-focus-outer-default` | Estados de foco |
**Filosofia de sombras**: O Pinterest usa sombras mínimas. A grade de alvenaria depende do conteúdo (fotografia) para criar interesse visual em vez de efeitos de elevação. A profundidade vem do calor das cores de superfície e do arredondamento generoso dos contêineres.
## 7. O que fazer e o que não fazer
### Fazer
- Usar neutros quentes (`#e5e5e0`, `#e0e0d9`, `#91918c`) — o tom quente oliva/areia é a identidade
- Aplicar Vermelho Pinterest (`#e60023`) apenas para CTAs principais — é audacioso e singular
- Usar Pin Sans exclusivamente — uma fonte para tudo
- Aplicar raio de borda generoso: 16px para botões/entradas, 20px+ para cartões
- Manter a grade de alvenaria densa — a densidade do conteúdo é o valor
- Usar fundos de emblema quentes (`hsla(60,20%,98%,.5)`) para lavados quentes sutis
- Usar `#211922` (preto ameixa) para texto principal — mais quente que preto puro
### Não fazer
- Não usar neutros cinza frios — sempre quente/tom oliva
- Não usar preto puro (`#000000`) como texto principal — usar preto ameixa (`#211922`)
- Não usar botões em forma de pílula — raio de 16px é arredondado, mas não é pílula
- Não adicionar sombras pesadas — o Pinterest é plano por design, a profundidade vem do conteúdo
- Não usar raio de borda pequeno (<12px) em cartões — o arredondamento generoso é essencial
- Não introduzir cores de marca adicionais — vermelho + neutros quentes é a paleta completa
- Não usar pesos de fonte finos — Pin Sans no mínimo 400
## 8. Comportamento responsivo
### Pontos de quebra
| Nome | Largura | Mudanças principais |
|------|-------|-------------|
| Mobile | <576px | Coluna única, layout compacto |
| Mobile grande | 576–768px | Grade de pins de 2 colunas |
| Tablet | 768–890px | Grade expandida |
| Desktop pequeno | 890–1312px | Grade de alvenaria padrão |
| Desktop | 1312–1440px | Layout completo |
| Desktop grande | 1440–1680px | Colunas de grade expandidas |
| Ultra wide | >1680px | Densidade máxima da grade |
### Estratégia de colapso
- Grade de pins: 5+ colunas → 3 → 2 → 1
- Navegação: barra de pesquisa + ícones → nav mobile simplificada
- Seções em destaque: lado a lado → empilhado
- Hero: 70px → reduz proporcionalmente
- Rodapé: escuro multicoluna → empilhado
## 9. Guia de prompts para agentes
### Referência rápida de cores
- Marca: Vermelho Pinterest (`#e60023`)
- Fundo: Branco (`#ffffff`)
- Texto: Preto ameixa (`#211922`)
- Texto secundário: Cinza oliva (`#62625b`)
- Superfície do botão: Cinza areia (`#e5e5e0`)
- Borda: Prata quente (`#91918c`)
- Foco: Azul foco (`#435ee5`)
### Exemplos de prompts de componentes
- "Criar um hero: fundo branco. Título em 70px Pin Sans peso 600, preto ameixa (#211922). Botão CTA vermelho (#e60023, raio 16px, padding 6px 14px). Botão areia secundário (#e5e5e0, raio 16px)."
- "Criar um cartão pin: fundo branco, raio 16px, sem sombra. Fotografia preenche o topo, descrição 16px Pin Sans peso 400 abaixo em #62625b."
- "Construir um botão de ação circular: fundo #e0e0d9, raio 50%, ícone #211922."
- "Criar um campo de entrada: fundo branco, 1px solid #91918c, raio 16px, padding 11px 15px. Foco: contorno azul via tokens semânticos."
- "Criar o rodapé escuro: fundo #33332e. Logo script Pinterest em branco. Links 12px Pin Sans em #91918c."
### Guia de iteração
1. Neutros quentes em todo lugar — cinzas oliva/areia, nunca aço frio
2. Vermelho Pinterest apenas para CTAs — audacioso e singular
3. Raio de 16px em botões/entradas, 20px+ em cartões — generoso mas não pílula
4. Pin Sans é a única fonte — compacto em 12px para interface, 70px para display
5. A fotografia carrega o design — a interface permanece quente e minimalista
6. Preto ameixa (#211922) para texto — mais quente que preto puro
open-design/design-systems/pinterest/DESIGN-ru.md
+233
View File
@@ -0,0 +1,233 @@
# Дизайн-система, вдохновлённая Pinterest
> Category: Медиа и потребительский сектор
> Визуальное открытие. Красный акцент, кирпичная сетка, изображение на первом месте.
## 1. Визуальная тема и атмосфера
Сайт Pinterest — это тёплый холст, наполненный вдохновением, который делает визуальное открытие похожим на лайфстайл-журнал. Дизайн построен на мягком, слегка тёплом белом фоне с Pinterest-красным (`#e60023`) в качестве единственного яркого акцента бренда. В отличие от холодных синих тонов большинства технологических платформ, нейтральная шкала Pinterest имеет выраженный тёплый подтон — серые тона тяготеют к оливковому/песчаному (`#91918c`, `#62625b`, `#e5e5e0`), а не к холодной стали, создавая уютную, ремесленную атмосферу, располагающую к просмотру.
Типографика использует Pin Sans — фирменный шрифт с широким набором запасных вариантов, включая японские шрифты, что отражает глобальный охват Pinterest. В крупном масштабе (70px, насыщенность 600) Pin Sans создаёт большие, привлекательные заголовки. В меньшем размере система компактна: кнопки — 12px, подписи — 12–14px. Система именования переменных CSS (`--comp-*`, `--sema-*`, `--base-*`) раскрывает изощрённую трёхуровневую архитектуру дизайн-токенов: уровень компонентов, семантический уровень и базовый уровень.
Отличительные черты Pinterest — щедрая система скруглений (12px–40px, плюс 50% для кругов) и тёплые фоны кнопок. Вторичная кнопка (`#e5e5e0`) имеет выраженный тёплый, песчаный оттенок, а не холодный серый. Основная красная кнопка использует скругление 16px — округлое, но не «таблеткообразное». В сочетании с тёплыми фонами бейджей (`hsla(60,20%,98%,.5)` — тонкий жёлто-тёплый оттенок) и макетами, где главенствует фотография, результатом становится дизайн, ощущаемый как рукотворный и личный, а не корпоративный и стерильный.
**Ключевые характеристики:**
- Тёплый белый холст с нейтральными оливковыми/песчаными тонами — уютно, не стерильно
- Pinterest-красный (`#e60023`) как единственный смелый акцент — никогда не тонкий, всегда уверенный
- Шрифт Pin Sans с глобальным набором запасных вариантов (включая CJK)
- Трёхуровневая архитектура токенов: `--comp-*` / `--sema-*` / `--base-*`
- Тёплые вторичные поверхности: песчаный серый (`#e5e5e0`), тёплый бейдж (`hsla(60,20%,98%,.5)`)
- Щедрые скругления: 16px стандарт, до 40px для крупных контейнеров
- Фотография на первом плане — пины/изображения являются основным визуальным элементом
- Тёмный тёмно-фиолетовый текст (`#211922`) — тёплый, с лёгким сливовым оттенком
## 2. Цветовая палитра и роли
### Основной бренд
- **Pinterest-красный** (`#e60023`): Основной CTA, акцент бренда — смелый, уверенный красный
- **Зелёный 700** (`#103c25`): `--base-color-green-700`, акцент успеха/природы
- **Зелёный 700 при наведении** (`#0b2819`): `--base-color-hover-green-700`, нажатый зелёный
### Текст
- **Сливово-чёрный** (`#211922`): Основной текст — тёплый почти-чёрный со сливовым подтоном
- **Чёрный** (`#000000`): Вторичный текст, текст кнопок
- **Оливковый серый** (`#62625b`): Вторичные описания, приглушённый текст
- **Тёплый серебристый** (`#91918c`): `--comp-button-color-text-transparent-disabled`, отключённый текст, границы полей ввода
- **Белый** (`#ffffff`): Текст на тёмных/цветных поверхностях
### Интерактивные
- **Синий фокус** (`#435ee5`): `--comp-button-color-border-focus-outer-transparent`, кольца фокуса
- **Фиолетовый производительности** (`#6845ab`): `--sema-color-hover-icon-performance-plus`, функции производительности
- **Фиолетовый рекомендаций** (`#7e238b`): `--sema-color-hover-text-recommendation`, рекомендации ИИ
- **Синий ссылки** (`#2b48d4`): Цвет текста ссылки
- **Синий Facebook** (`#0866ff`): `--facebook-background-color`, социальный вход
- **Нажатый синий** (`#617bff`): `--base-color-pressed-blue-200`, нажатое состояние
### Поверхности и границы
- **Песчаный серый** (`#e5e5e0`): Фон вторичной кнопки — тёплый, ремесленный
- **Тёплый светлый** (`#e0e0d9`): Фоны круглых кнопок, бейджи
- **Тёплый смыв** (`hsla(60, 20%, 98%, 0.5)`): `--comp-badge-color-background-wash-light`, тонкий тёплый фон бейджа
- **Туман** (`#f6f6f3`): Светлая поверхность (при 50% непрозрачности)
- **Граница отключена** (`#c8c8c1`): `--sema-color-border-disabled`, отключённые границы
- **Серый при наведении** (`#bcbcb3`): `--base-color-hover-grayscale-150`, граница при наведении
- **Тёмная поверхность** (`#33332e`): Фоны тёмных секций
### Семантические
- **Красный ошибки** (`#9e0a0a`): Состояния ошибки флажков/форм
## 3. Правила типографики
### Семейство шрифтов
- **Основной**: `Pin Sans`, запасные: `-apple-system, system-ui, Segoe UI, Roboto, Oxygen-Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Arial`
### Иерархия
| Роль | Шрифт | Размер | Насыщенность | Межстрочный интервал | Межбуквенный интервал | Примечания |
|------|------|------|--------|-------------|----------------|-------|
| Дисплейный герой | Pin Sans | 70px (4,38rem) | 600 | normal | normal | Максимальный эффект |
| Заголовок секции | Pin Sans | 28px (1,75rem) | 700 | normal | -1,2px | Отрицательный трекинг |
| Основной текст | Pin Sans | 16px (1,00rem) | 400 | 1,40 | normal | Стандартное чтение |
| Жирная подпись | Pin Sans | 14px (0,88rem) | 700 | normal | normal | Выраженные метаданные |
| Подпись | Pin Sans | 12px (0,75rem) | 400–500 | 1,50 | normal | Мелкий текст, теги |
| Кнопка | Pin Sans | 12px (0,75rem) | 400 | normal | normal | Надписи на кнопках |
### Принципы
- **Компактная шкала кегля**: Диапазон 12px–70px с драматическим скачком — большинство функционального текста находится в диапазоне 12–16px, создавая плотную, похожую на приложение информационную иерархию.
- **Тёплое распределение насыщенности**: 600–700 для заголовков, 400–500 для основного текста. Нет сверхлёгких насыщенностей — текст всегда ощущается весомым.
- **Отрицательный трекинг у заголовков**: -1,2px при 28px создаёт уютные, интимные заголовки секций.
- **Единственное семейство шрифтов**: Pin Sans справляется со всем — дополнительный дисплейный или моноширинный шрифт не обнаружен.
## 4. Стили компонентов
### Кнопки
**Основной красный**
- Фон: `#e60023` (Pinterest-красный)
- Текст: `#000000` (чёрный — необычный выбор для контраста на красном)
- Отступы: 6px 14px
- Скругление: 16px (щедро скруглённый, не «таблетка»)
- Граница: `2px solid rgba(255, 255, 255, 0)` (прозрачная)
- Фокус: семантическая граница + контур через переменные CSS
**Вторичный песчаный**
- Фон: `#e5e5e0` (тёплый песчаный серый)
- Текст: `#000000`
- Отступы: 6px 14px
- Скругление: 16px
- Фокус: та же семантическая система границ
**Круговое действие**
- Фон: `#e0e0d9` (тёплый светлый)
- Текст: `#211922` (сливово-чёрный)
- Скругление: 50% (круг)
- Использование: действия с пинами, элементы управления навигацией
**Призрак / Прозрачный**
- Фон: прозрачный
- Текст: `#000000`
- Без границы
- Использование: третичные действия
### Карточки и контейнеры
- Пин-карточки с приоритетом фотографии и щедрым скруглением (12px–20px)
- Отсутствие традиционной тени блока на большинстве карточек
- Белые или тёплые туманные фоны
- Белая толстая граница 8px на некоторых контейнерах изображений
### Поля ввода
- Ввод электронной почты: белый фон, граница `1px solid #91918c`, скругление 16px, отступы 11px 15px
- Фокус: система семантических границ + контур через переменные CSS
### Навигация
- Чистый заголовок на белом или тёплом фоне
- Логотип Pinterest + строка поиска по центру
- Pin Sans 16px для навигационных ссылок
- Pinterest-красные акценты для активных состояний
### Обработка изображений
- Кирпичная сетка в стиле пинов (фирменный макет Pinterest)
- Скруглённые углы: 12px–20px на изображениях
- Фотография как основной контент — каждый пин является изображением
- Толстые белые границы (8px) на контейнерах избранных изображений
## 5. Принципы макета
### Система отступов
- Базовая единица: 8px
- Шкала: 4px, 6px, 7px, 8px, 10px, 11px, 12px, 16px, 18px, 20px, 22px, 24px, 32px, 80px, 100px
- Большие скачки: 32px → 80px → 100px для отступов между секциями
### Сетка и контейнер
- Кирпичная сетка для контента пинов (фирменный макет)
- Центрированные секции контента с щедрой максимальной шириной
- Полноширинный тёмный подвал
- Строка поиска как основной элемент навигации
### Философия пространства
- **Плотность вдохновения**: Кирпичная сетка плотно укладывает пины — плотность контента И ЕСТЬ ценностное предложение. Пустое пространство существует между секциями, а не внутри сетки.
- **Дышит сверху, плотность снизу**: Героические/featured секции получают щедрые отступы; сетка пинов компактна и иммерсивна.
### Шкала скруглений
- Стандарт (12px): Маленькие карточки, ссылки
- Кнопка (16px): Кнопки, поля ввода, средние карточки
- Комфортный (20px): Featured-карточки
- Большой (28px): Крупные контейнеры
- Секция (32px): Элементы вкладок, большие панели
- Герой (40px): Героические контейнеры, крупные блоки-featured
- Круг (50%): Кнопки действий, индикаторы вкладок
## 6. Глубина и высота
| Уровень | Обработка | Использование |
|-------|-----------|-----|
| Плоский (Уровень 0) | Без тени | По умолчанию — пины опираются на контент, а не тень |
| Тонкий (Уровень 1) | Минимальная тень (из токенов) | Приподнятые оверлеи, выпадающие меню |
| Фокус (Доступность) | Кольцо `--sema-color-border-focus-outer-default` | Состояния фокуса |
**Философия теней**: Pinterest использует минимальные тени. Кирпичная сетка опирается на контент (фотографию) для создания визуального интереса, а не на эффекты высоты. Глубина исходит из тепла цветов поверхностей и щедрого скругления контейнеров.
## 7. Что делать и чего не делать
### Делать
- Использовать тёплые нейтральные цвета (`#e5e5e0`, `#e0e0d9`, `#91918c`) — тёплый оливковый/песчаный тон — это идентичность
- Применять Pinterest-красный (`#e60023`) только для основных CTA — он смелый и единственный
- Использовать исключительно Pin Sans — один шрифт для всего
- Применять щедрые скругления: 16px для кнопок/полей ввода, 20px+ для карточек
- Держать кирпичную сетку плотной — плотность контента — это ценность
- Использовать тёплые фоны бейджей (`hsla(60,20%,98%,.5)`) для тонких тёплых смывов
- Использовать `#211922` (сливово-чёрный) для основного текста — теплее чистого чёрного
### Не делать
- Не использовать холодные серые нейтральные — всегда тёплые/оливковые тона
- Не использовать чистый чёрный (`#000000`) в качестве основного текста — использовать сливово-чёрный (`#211922`)
- Не использовать кнопки в форме «таблетки» — скругление 16px округлое, но не «таблетка»
- Не добавлять тяжёлые тени — Pinterest плоский по дизайну, глубина из контента
- Не использовать малые скругления (<12px) на карточках — щедрое скругление является основным
- Не вводить дополнительные цвета бренда — красный + тёплые нейтральные — это полная палитра
- Не использовать тонкие насыщенности шрифта — Pin Sans минимум 400
## 8. Адаптивное поведение
### Контрольные точки
| Название | Ширина | Ключевые изменения |
|------|-------|-------------|
| Мобильный | <576px | Один столбец, компактный макет |
| Большой мобильный | 576–768px | Сетка пинов в 2 столбца |
| Планшет | 768–890px | Расширенная сетка |
| Небольшой десктоп | 890–1312px | Стандартная кирпичная сетка |
| Десктоп | 1312–1440px | Полный макет |
| Большой десктоп | 1440–1680px | Расширенные столбцы сетки |
| Ультраширокий | >1680px | Максимальная плотность сетки |
### Стратегия сворачивания
- Сетка пинов: 5+ столбцов → 3 → 2 → 1
- Навигация: строка поиска + иконки → упрощённая мобильная навигация
- Блоки featured: бок о бок → стек
- Герой: 70px → масштабируется пропорционально
- Подвал: тёмный многоколоночный → стек
## 9. Руководство по промптам для агентов
### Быстрая цветовая справка
- Бренд: Pinterest-красный (`#e60023`)
- Фон: Белый (`#ffffff`)
- Текст: Сливово-чёрный (`#211922`)
- Вторичный текст: Оливковый серый (`#62625b`)
- Поверхность кнопки: Песчаный серый (`#e5e5e0`)
- Граница: Тёплый серебристый (`#91918c`)
- Фокус: Синий фокус (`#435ee5`)
### Примеры промптов для компонентов
- «Создать герой: белый фон. Заголовок 70px Pin Sans насыщенность 600, сливово-чёрный (#211922). Красная кнопка CTA (#e60023, скругление 16px, отступы 6px 14px). Вторичная песчаная кнопка (#e5e5e0, скругление 16px).»
- «Оформить карточку пина: белый фон, скругление 16px, без тени. Фотография заполняет верхнюю часть, ниже описание 16px Pin Sans насыщенность 400 в #62625b.»
- «Создать круговую кнопку действия: фон #e0e0d9, скругление 50%, иконка #211922.»
- «Создать поле ввода: белый фон, 1px solid #91918c, скругление 16px, отступы 11px 15px. Фокус: синий контур через семантические токены.»
- «Оформить тёмный подвал: фон #33332e. Логотип Pinterest в белом цвете. Ссылки 12px Pin Sans в #91918c.»
### Руководство по итерациям
1. Тёплые нейтральные повсюду — оливковый/песчаный серый, никогда холодная сталь
2. Pinterest-красный только для CTA — смелый и единственный
3. 16px скругление на кнопках/полях ввода, 20px+ на карточках — щедро, но не «таблетка»
4. Pin Sans — единственный шрифт — компактный 12px для интерфейса, 70px для дисплея
5. Фотография несёт дизайн — интерфейс остаётся тёплым и минималистичным
6. Сливово-чёрный (#211922) для текста — теплее чистого чёрного
open-design/design-systems/pinterest/DESIGN-tr.md
+233
View File
@@ -0,0 +1,233 @@
# Pinterest'ten İlham Alan Tasarım Sistemi
> Category: Media & Consumer
> Görsel keşif. Kırmızı vurgu, masonry ızgara, görsel ön planda.
## 1. Görsel Tema ve Atmosfer
Pinterest'in web sitesi, görsel keşfi bir yaşam tarzı dergisi gibi ele alan sıcak, ilham verici bir tuvaldir. Tasarım, yumuşak, hafif sıcak bir beyaz arka plan üzerinde çalışır; Pinterest Red (`#e60023`) ise tekil, cesur marka vurgusu olarak öne çıkar. Çoğu teknoloji platformunun soğuk mavileri yerine, Pinterest'in nötr skalası belirgin biçimde sıcak bir alt tona sahiptir — gri tonlar soğuk çelik yerine zeytin/kum renklerine (`#91918c`, `#62625b`, `#e5e5e0`) yaklaşır ve gezinmeyi teşvik eden sıcak, el yapımı bir atmosfer yaratır.
Tipografi, Pin Sans kullanır — Japonca yazı tiplerini de kapsayan geniş bir geri dönüş yığınıyla birlikte özel, tescilli bir yazı tipidir; bu, Pinterest'in küresel erişimini yansıtır. Görüntü ölçeğinde (70px, ağırlık 600), Pin Sans büyük ve davetkar başlıklar oluşturur. Daha küçük boyutlarda sistem kompakttır: düğmeler 12px, altyazılar 12–14px. CSS değişken adlandırma sistemi (`--comp-*`, `--sema-*`, `--base-*`), bileşen düzeyinde, semantik düzeyde ve temel düzeyde olmak üzere üç katmanlı bir tasarım token mimarisini ortaya koyar.
Pinterest'i farklı kılan, cömert border-radius sistemi (12px–40px, artı daireler için %50) ve sıcak tonlu düğme arka planlarıdır. İkincil düğme (`#e5e5e0`), soğuk gri yerine belirgin biçimde sıcak, kum benzeri bir tona sahiptir. Birincil kırmızı düğme 16px yarıçap kullanır — yuvarlak ama hap şeklinde değil. Sıcak rozet arka planları (`hsla(60,20%,98%,.5)` — ince sarı-sıcak bir parlaklık) ve fotoğraf ağırlıklı düzenlerle birlikte, sonuç kurumsal ve steril değil, el yapımı ve kişisel hissettiren bir tasarımdır.
**Temel Özellikler:**
- Zeytin/kum tonlu nötrlerle sıcak beyaz tuval — rahat, klinik değil
- Tekil cesur vurgu olarak Pinterest Red (`#e60023`) — asla ince, her zaman kendinden emin
- Küresel geri dönüş yığınıyla özel Pin Sans yazı tipi (CJK dahil)
- Üç katmanlı token mimarisi: `--comp-*` / `--sema-*` / `--base-*`
- Sıcak ikincil yüzeyler: kum grisi (`#e5e5e0`), sıcak rozet (`hsla(60,20%,98%,.5)`)
- Cömert border-radius: standart 16px, büyük konteynerler için 40px'e kadar
- Fotoğraf öncelikli içerik — pinler/görseller birincil görsel öğedir
- Koyu mor-yakını metin (`#211922`) — sıcak, bir dokunuş erik tonu
## 2. Renk Paleti ve Roller
### Birincil Marka
- **Pinterest Red** (`#e60023`): Birincil CTA, marka vurgusu — cesur, kendinden emin kırmızı
- **Green 700** (`#103c25`): `--base-color-green-700`, başarı/doğa vurgusu
- **Green 700 Hover** (`#0b2819`): `--base-color-hover-green-700`, basılı yeşil
### Metin
- **Erik Siyahı** (`#211922`): Birincil metin — erik alt tonuyla sıcak, neredeyse siyah
- **Siyah** (`#000000`): İkincil metin, düğme metni
- **Zeytin Grisi** (`#62625b`): İkincil açıklamalar, soluk metin
- **Sıcak Gümüş** (`#91918c`): `--comp-button-color-text-transparent-disabled`, devre dışı metin, giriş kenarlıkları
- **Beyaz** (`#ffffff`): Koyu/renkli yüzeylerdeki metin
### Etkileşimli
- **Odak Mavisi** (`#435ee5`): `--comp-button-color-border-focus-outer-transparent`, odak halkaları
- **Performans Moru** (`#6845ab`): `--sema-color-hover-icon-performance-plus`, performans özellikleri
- **Öneri Moru** (`#7e238b`): `--sema-color-hover-text-recommendation`, yapay zeka önerisi
- **Bağlantı Mavisi** (`#2b48d4`): Bağlantı metni rengi
- **Facebook Mavisi** (`#0866ff`): `--facebook-background-color`, sosyal oturum açma
- **Basılı Mavi** (`#617bff`): `--base-color-pressed-blue-200`, basılı durum
### Yüzey ve Kenarlık
- **Kum Grisi** (`#e5e5e0`): İkincil düğme arka planı — sıcak, el yapımı hissi
- **Sıcak Işık** (`#e0e0d9`): Dairesel düğme arka planları, rozetler
- **Sıcak Parlaklık** (`hsla(60, 20%, 98%, 0.5)`): `--comp-badge-color-background-wash-light`, ince sıcak rozet arka planı
- **Sis** (`#f6f6f3`): Açık yüzey (%50 opaklıkta)
- **Devre Dışı Kenarlık** (`#c8c8c1`): `--sema-color-border-disabled`, devre dışı kenarlıklar
- **Hover Grisi** (`#bcbcb3`): `--base-color-hover-grayscale-150`, hover kenarlığı
- **Koyu Yüzey** (`#33332e`): Koyu bölüm arka planları
### Semantik
- **Hata Kırmızısı** (`#9e0a0a`): Onay kutusu/form hata durumları
## 3. Tipografi Kuralları
### Yazı Tipi Ailesi
- **Birincil**: `Pin Sans`, geri dönüşler: `-apple-system, system-ui, Segoe UI, Roboto, Oxygen-Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Arial`
### Hiyerarşi
| Rol | Yazı Tipi | Boyut | Ağırlık | Satır Yüksekliği | Harf Aralığı | Notlar |
|-----|-----------|-------|---------|-----------------|--------------|--------|
| Ekran Hero | Pin Sans | 70px (4.38rem) | 600 | normal | normal | Maksimum etki |
| Bölüm Başlığı | Pin Sans | 28px (1.75rem) | 700 | normal | -1.2px | Negatif izleme |
| Gövde | Pin Sans | 16px (1.00rem) | 400 | 1.40 | normal | Standart okuma |
| Kalın Altyazı | Pin Sans | 14px (0.88rem) | 700 | normal | normal | Güçlü meta veri |
| Altyazı | Pin Sans | 12px (0.75rem) | 400–500 | 1.50 | normal | Küçük metin, etiketler |
| Düğme | Pin Sans | 12px (0.75rem) | 400 | normal | normal | Düğme etiketleri |
### İlkeler
- **Kompakt tür skalası**: Aralık dramatik bir sıçramayla 12px–70px arasındadır — çoğu işlevsel metin yoğun, uygulama benzeri bir bilgi hiyerarşisi oluşturan 12–16px arasındadır.
- **Sıcak ağırlık dağılımı**: Başlıklar için 600–700, gövde için 400–500. Ultra-hafif ağırlıklar yok — yazı tipi her zaman önemli hissettiriyor.
- **Başlıklarda negatif izleme**: 28px başlıklarda -1.2px, rahat ve samimi bölüm başlıkları oluşturur.
- **Tek yazı tipi ailesi**: Pin Sans her şeyi halleder — ikincil bir ekran veya sabit aralıklı yazı tipi algılanmadı.
## 4. Bileşen Stilleri
### Düğmeler
**Birincil Kırmızı**
- Arka plan: `#e60023` (Pinterest Red)
- Metin: `#000000` (siyah — kırmızı üzerinde kontrast için alışılmadık tercih)
- Dolgu: 6px 14px
- Yarıçap: 16px (cömertçe yuvarlak, hap şeklinde değil)
- Kenarlık: `2px solid rgba(255, 255, 255, 0)` (şeffaf)
- Odak: semantik kenarlık + CSS değişkenleri aracılığıyla taslak
**İkincil Kum**
- Arka plan: `#e5e5e0` (sıcak kum grisi)
- Metin: `#000000`
- Dolgu: 6px 14px
- Yarıçap: 16px
- Odak: aynı semantik kenarlık sistemi
**Dairesel Eylem**
- Arka plan: `#e0e0d9` (sıcak ışık)
- Metin: `#211922` (erik siyahı)
- Yarıçap: %50 (daire)
- Kullanım: Pin eylemleri, gezinme denetimleri
**Ghost / Şeffaf**
- Arka plan: şeffaf
- Metin: `#000000`
- Kenarlık yok
- Kullanım: Üçüncül eylemler
### Kartlar ve Konteynerler
- Cömert yarıçaplı (12px–20px) fotoğraf öncelikli pin kartları
- Çoğu kartta geleneksel box-shadow yok
- Beyaz veya sıcak sis arka planları
- Bazı görsel konteynerlerde 8px kalın beyaz kenarlık
### Giriş Alanları
- E-posta girişi: beyaz arka plan, `1px solid #91918c` kenarlık, 16px yarıçap, 11px 15px dolgu
- Odak: CSS değişkenleri aracılığıyla semantik kenarlık + taslak sistemi
### Gezinme
- Beyaz veya sıcak arka planda temiz başlık
- Pinterest logosu + arama çubuğu ortalanmış
- Gezinme bağlantıları için 16px Pin Sans
- Aktif durumlar için Pinterest Red vurguları
### Görsel İşleme
- Pin tarzı masonry ızgara (Pinterest'in imzalı düzeni)
- Yuvarlak köşeler: görsellerde 12px–20px
- Birincil içerik olarak fotoğrafçılık — her pin bir görseldir
- Öne çıkan görsel konteynerlerinde kalın beyaz kenarlıklar (8px)
## 5. Düzen İlkeleri
### Boşluk Sistemi
- Temel birim: 8px
- Skala: 4px, 6px, 7px, 8px, 10px, 11px, 12px, 16px, 18px, 20px, 22px, 24px, 32px, 80px, 100px
- Büyük sıçramalar: Bölüm aralığı için 32px → 80px → 100px
### Izgara ve Konteyner
- Pin içeriği için masonry ızgara (imzalı düzen)
- Cömert maksimum genişlikle ortalanmış içerik bölümleri
- Tam genişlikte koyu alt bilgi
- Birincil gezinme öğesi olarak arama çubuğu
### Boşluk Felsefesi
- **İlham yoğunluğu**: Masonry ızgara pinleri sıkıca paketler — içerik yoğunluğu DEĞERİN kendisidir. Boşluk bölümler arasında bulunur, ızgara içinde değil.
- **Yukarıda nefes, aşağıda yoğunluk**: Kahraman/özellik bölümleri cömert dolgu alır; pin ızgarası kompakt ve sürükleyicidir.
### Border Radius Skalası
- Standart (12px): Küçük kartlar, bağlantılar
- Düğme (16px): Düğmeler, girişler, orta kartlar
- Konforlu (20px): Özellik kartları
- Büyük (28px): Büyük konteynerler
- Bölüm (32px): Sekme öğeleri, büyük paneller
- Kahraman (40px): Kahraman konteynerleri, büyük özellik blokları
- Daire (%50): Eylem düğmeleri, sekme göstergeleri
## 6. Derinlik ve Yükseklik
| Seviye | İşlem | Kullanım |
|--------|-------|---------|
| Düz (Seviye 0) | Gölge yok | Varsayılan — pinler gölge değil içeriğe güvenir |
| İnce (Seviye 1) | Minimal gölge (tokenlardan) | Yükseltilmiş katmanlar, açılır menüler |
| Odak (Erişilebilirlik) | `--sema-color-border-focus-outer-default` halkası | Odak durumları |
**Gölge Felsefesi**: Pinterest minimal gölgeler kullanır. Masonry ızgara, yükseklik efektleri yerine görsel ilgi oluşturmak için içeriğe (fotoğrafçılık) dayanır. Derinlik, yüzey renklerinin sıcaklığından ve konteynerlerin cömert yuvarlaklığından gelir.
## 7. Yapılacaklar ve Yapılmayacaklar
### Yapılacaklar
- Sıcak nötrler kullan (`#e5e5e0`, `#e0e0d9`, `#91918c`) — sıcak zeytin/kum tonu kimliğin kendisidir
- Pinterest Red'i (`#e60023`) yalnızca birincil CTA'lar için uygula — cesur ve tekil
- Yalnızca Pin Sans kullan — her şey için tek yazı tipi
- Cömert border-radius uygula: düğmeler/girişler için 16px, kartlar için 20px+
- Masonry ızgarayı yoğun tut — içerik yoğunluğu değerdir
- İnce sıcak parlaklıklar için sıcak rozet arka planları kullan (`hsla(60,20%,98%,.5)`)
- Birincil metin için `#211922` (erik siyahı) kullan — saf siyahtan daha sıcak
### Yapılmayacaklar
- Soğuk gri nötrler kullanma — her zaman sıcak/zeytin tonlu
- Birincil metin olarak saf siyah (`#000000`) kullanma — erik siyahı (`#211922`) kullan
- Hap şekilli düğmeler kullanma — 16px yarıçap yuvarlak ama hap şeklinde değil
- Ağır gölgeler ekleme — Pinterest tasarım olarak düzdür, derinlik içerikten gelir
- Kartlarda küçük border-radius (<12px) kullanma — cömert yuvarlama esastır
- Ek marka renkleri tanıtma — kırmızı + sıcak nötrler tam paletdir
- İnce yazı tipi ağırlıkları kullanma — Pin Sans minimum 400
## 8. Duyarlı Davranış
### Kırılma Noktaları
| İsim | Genişlik | Temel Değişiklikler |
|------|---------|-------------------|
| Mobil | <576px | Tek sütun, kompakt düzen |
| Büyük Mobil | 576–768px | 2 sütunlu pin ızgarası |
| Tablet | 768–890px | Genişletilmiş ızgara |
| Küçük Masaüstü | 890–1312px | Standart masonry ızgara |
| Masaüstü | 1312–1440px | Tam düzen |
| Büyük Masaüstü | 1440–1680px | Genişletilmiş ızgara sütunları |
| Ultra-geniş | >1680px | Maksimum ızgara yoğunluğu |
### Daraltma Stratejisi
- Pin ızgarası: 5+ sütun → 3 → 2 → 1
- Gezinme: arama çubuğu + simgeler → basitleştirilmiş mobil gezinme
- Özellik bölümleri: yan yana → yığılmış
- Kahraman: 70px → orantılı olarak küçülür
- Alt bilgi: koyu çok sütunlu → yığılmış
## 9. Ajan Prompt Kılavuzu
### Hızlı Renk Referansı
- Marka: Pinterest Red (`#e60023`)
- Arka plan: Beyaz (`#ffffff`)
- Metin: Erik Siyahı (`#211922`)
- İkincil metin: Zeytin Grisi (`#62625b`)
- Düğme yüzeyi: Kum Grisi (`#e5e5e0`)
- Kenarlık: Sıcak Gümüş (`#91918c`)
- Odak: Odak Mavisi (`#435ee5`)
### Örnek Bileşen Promptları
- "Kahraman oluştur: beyaz arka plan. 70px Pin Sans ağırlık 600 başlık, erik siyahı (#211922). Kırmızı CTA düğmesi (#e60023, 16px yarıçap, 6px 14px dolgu). İkincil kum düğmesi (#e5e5e0, 16px yarıçap)."
- "Pin kartı tasarla: beyaz arka plan, 16px yarıçap, gölge yok. Fotoğrafçılık üstte, 16px Pin Sans ağırlık 400 açıklama altında #62625b rengiyle."
- "Dairesel eylem düğmesi oluştur: #e0e0d9 arka plan, %50 yarıçap, #211922 simge."
- "Giriş alanı oluştur: beyaz arka plan, 1px solid #91918c, 16px yarıçap, 11px 15px dolgu. Odak: semantik tokenlar aracılığıyla mavi taslak."
- "Koyu alt bilgi tasarla: #33332e arka plan. Beyaz Pinterest script logosu. #91918c rengiyle 12px Pin Sans bağlantılar."
### Yineleme Kılavuzu
1. Her yerde sıcak nötrler — zeytin/kum griler, asla soğuk çelik
2. Yalnızca CTA'lar için Pinterest Red — cesur ve tekil
3. Düğmeler/girişler için 16px yarıçap, kartlar için 20px+ — cömert ama hap şeklinde değil
4. Pin Sans tek yazı tipidir — UI için 12px kompakt, ekran için 70px
5. Fotoğrafçılık tasarımı taşır — UI sıcak ve minimal kalır
6. Metin için erik siyahı (#211922) — saf siyahtan daha sıcak
open-design/design-systems/pinterest/DESIGN-uk.md
+233
View File
@@ -0,0 +1,233 @@
# Система Дизайну, Натхненна Pinterest
> Category: Media & Consumer
> Візуальне відкриття. Червоний акцент, сітка masonry, зображення на першому плані.
## 1. Візуальна Тема та Атмосфера
Вебсайт Pinterest — це тепле, надихаюче полотно, яке перетворює візуальне відкриття на стиль мисленнєвого журналу. Дизайн побудований на м'якому, злегка теплому білому тлі, де Pinterest Red (`#e60023`) є єдиним сміливим акцентом бренду. На відміну від холодних відтінків синього більшості технологічних платформ, нейтральна шкала Pinterest має виразно теплий підтон — сірі відтінки тяжіють до оливково-піщаних тонів (`#91918c`, `#62625b`, `#e5e5e0`) замість холодної сталі, утворюючи затишну, ремісничу атмосферу, яка запрошує до перегляду.
Типографіка використовує Pin Sans — власний фірмовий шрифт із широким стеком запасних варіантів, включаючи японські шрифти, що відображає глобальний охоплення Pinterest. На відображальному масштабі (70px, жирність 600) Pin Sans створює великі, привабливі заголовки. На менших розмірах система компактна: кнопки 12px, підписи 12–14px. Система іменування CSS-змінних (`--comp-*`, `--sema-*`, `--base-*`) розкриває складну трирівневу архітектуру токенів дизайну: токени рівня компонента, семантичного рівня та базового рівня.
Pinterest вирізняється щедрою системою border-radius (12px–40px, плюс 50% для кіл) і теплими фонами кнопок. Другорядна кнопка (`#e5e5e0`) має виразно теплий, піщаний тон, а не холодний сірий. Основна червона кнопка використовує радіус 16px — округла, але не пігулкоподібна. У поєднанні з теплими фонами значків (`hsla(60,20%,98%,.5)` — ледь помітна жовто-тепла підсвітка) та макетами, де домінує фотографія, результатом є дизайн, що відчувається як рукотворний і особистісний, а не корпоративний і стерильний.
**Ключові Характеристики:**
- Тепле біле полотно з оливково/піщаними нейтральними тонами — затишне, не клінічне
- Pinterest Red (`#e60023`) як єдиний сміливий акцент — ніколи не ненав'язливий, завжди впевнений
- Фірмовий шрифт Pin Sans із глобальним стеком запасних варіантів (включаючи CJK)
- Трирівнева архітектура токенів: `--comp-*` / `--sema-*` / `--base-*`
- Теплі другорядні поверхні: піщаний сірий (`#e5e5e0`), тепла нашивка (`hsla(60,20%,98%,.5)`)
- Щедрий border-radius: стандартний 16px, до 40px для великих контейнерів
- Контент, де зображення на першому місці — пін/зображення є основним візуальним елементом
- Темно-майже-фіолетовий текст (`#211922`) — теплий, з відтінком сливи
## 2. Кольорова Палітра та Ролі
### Основний Бренд
- **Pinterest Red** (`#e60023`): Основний CTA, акцент бренду — сміливий, впевнений червоний
- **Green 700** (`#103c25`): `--base-color-green-700`, акцент успіху/природи
- **Green 700 Hover** (`#0b2819`): `--base-color-hover-green-700`, натиснутий зелений
### Текст
- **Сливовий Чорний** (`#211922`): Основний текст — теплий майже чорний із відтінком сливи
- **Чорний** (`#000000`): Другорядний текст, текст кнопок
- **Оливковий Сірий** (`#62625b`): Другорядні описи, приглушений текст
- **Тепле Срібло** (`#91918c`): `--comp-button-color-text-transparent-disabled`, вимкнений текст, межі полів введення
- **Білий** (`#ffffff`): Текст на темних/кольорових поверхнях
### Інтерактивні
- **Синій Фокус** (`#435ee5`): `--comp-button-color-border-focus-outer-transparent`, кільця фокусування
- **Фіолетовий Продуктивності** (`#6845ab`): `--sema-color-hover-icon-performance-plus`, функції продуктивності
- **Фіолетовий Рекомендації** (`#7e238b`): `--sema-color-hover-text-recommendation`, рекомендація ШІ
- **Синій Посилань** (`#2b48d4`): Колір тексту посилань
- **Синій Facebook** (`#0866ff`): `--facebook-background-color`, соціальний вхід
- **Натиснутий Синій** (`#617bff`): `--base-color-pressed-blue-200`, натиснутий стан
### Поверхня та Межа
- **Піщаний Сірий** (`#e5e5e0`): Фон другорядної кнопки — теплий, ремісничий
- **Тепле Світло** (`#e0e0d9`): Фони круглих кнопок, нашивки
- **Тепле Промивання** (`hsla(60, 20%, 98%, 0.5)`): `--comp-badge-color-background-wash-light`, ледь помітний теплий фон нашивки
- **Туман** (`#f6f6f3`): Світла поверхня (при 50% прозорості)
- **Вимкнена Межа** (`#c8c8c1`): `--sema-color-border-disabled`, вимкнені межі
- **Сірий Hover** (`#bcbcb3`): `--base-color-hover-grayscale-150`, межа hover
- **Темна Поверхня** (`#33332e`): Фони темних секцій
### Семантичні
- **Червоний Помилки** (`#9e0a0a`): Стани помилок для прапорців/форм
## 3. Правила Типографіки
### Сімейство Шрифтів
- **Основний**: `Pin Sans`, запасні: `-apple-system, system-ui, Segoe UI, Roboto, Oxygen-Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Arial`
### Ієрархія
| Роль | Шрифт | Розмір | Жирність | Висота рядка | Міжлітерний інтервал | Примітки |
|------|-------|--------|---------|--------------|---------------------|---------|
| Відображальний Герой | Pin Sans | 70px (4.38rem) | 600 | нормальний | нормальний | Максимальний ефект |
| Заголовок секції | Pin Sans | 28px (1.75rem) | 700 | нормальний | -1.2px | Від'ємне трекінгування |
| Основний текст | Pin Sans | 16px (1.00rem) | 400 | 1.40 | нормальний | Стандартне читання |
| Жирний підпис | Pin Sans | 14px (0.88rem) | 700 | нормальний | нормальний | Виразні метадані |
| Підпис | Pin Sans | 12px (0.75rem) | 400–500 | 1.50 | нормальний | Малий текст, теги |
| Кнопка | Pin Sans | 12px (0.75rem) | 400 | нормальний | нормальний | Мітки кнопок |
### Принципи
- **Компактна типографічна шкала**: Діапазон — від 12px до 70px із драматичним стрибком; більшість функціонального тексту — 12–16px, утворюючи щільну ієрархію інформації на кшталт додатка.
- **Теплий розподіл жирності**: 600–700 для заголовків, 400–500 для основного тексту. Без ультралегких жирностей — типографіка завжди відчувається вагомою.
- **Від'ємне трекінгування в заголовках**: -1.2px у заголовках 28px створює затишні, інтимні назви секцій.
- **Одне сімейство шрифтів**: Pin Sans обслуговує все — не виявлено другорядного відображального або моноширинного шрифту.
## 4. Стилі Компонентів
### Кнопки
**Основний Червоний**
- Фон: `#e60023` (Pinterest Red)
- Текст: `#000000` (чорний — незвичний вибір для контрасту на червоному)
- Відступ: 6px 14px
- Радіус: 16px (щедро округлений, не пігулкоподібний)
- Межа: `2px solid rgba(255, 255, 255, 0)` (прозора)
- Фокус: семантична межа + обведення через CSS-змінні
**Другорядний Піщаний**
- Фон: `#e5e5e0` (теплий піщаний сірий)
- Текст: `#000000`
- Відступ: 6px 14px
- Радіус: 16px
- Фокус: та сама семантична система меж
**Кругла Дія**
- Фон: `#e0e0d9` (тепле світло)
- Текст: `#211922` (сливовий чорний)
- Радіус: 50% (коло)
- Використання: дії з пінами, елементи навігації
**Ghost / Прозорий**
- Фон: прозорий
- Текст: `#000000`
- Без межі
- Використання: третинні дії
### Картки та Контейнери
- Картки пінів із пріоритетом фотографії та щедрим радіусом (12px–20px)
- Немає традиційної box-shadow на більшості карток
- Білі або теплі туманні фони
- Товста біла межа 8px на деяких контейнерах зображень
### Поля Введення
- Введення email: білий фон, межа `1px solid #91918c`, радіус 16px, відступ 11px 15px
- Фокус: семантична система меж і обведення через CSS-змінні
### Навігація
- Чистий заголовок на білому або теплому фоні
- Логотип Pinterest + рядок пошуку по центру
- Pin Sans 16px для навігаційних посилань
- Акценти Pinterest Red для активних станів
### Обробка Зображень
- Сітка masonry у стилі пінів (фірмовий макет Pinterest)
- Скруглені кути: 12px–20px на зображеннях
- Фотографія як основний контент — кожен пін є зображенням
- Товсті білі межі (8px) на виділених контейнерах зображень
## 5. Принципи Макету
### Система Відступів
- Базова одиниця: 8px
- Шкала: 4px, 6px, 7px, 8px, 10px, 11px, 12px, 16px, 18px, 20px, 22px, 24px, 32px, 80px, 100px
- Великі стрибки: 32px → 80px → 100px для відступів між секціями
### Сітка та Контейнер
- Сітка masonry для контенту пінів (фірмовий макет)
- Центровані секції контенту із щедрою максимальною шириною
- Темний футер на всю ширину
- Рядок пошуку як основний елемент навігації
### Філософія Пустого Простору
- **Щільність натхнення**: Сітка masonry щільно пакує піни — щільність контенту є ціннісною пропозицією. Пустий простір існує між секціями, але не всередині сітки.
- **Дихання зверху, щільність знизу**: Секції героя/функцій отримують щедрий відступ; сітка пінів компактна й занурююча.
### Шкала Border Radius
- Стандартний (12px): Малі картки, посилання
- Кнопка (16px): Кнопки, поля введення, середні картки
- Комфортний (20px): Картки функцій
- Великий (28px): Великі контейнери
- Секція (32px): Елементи вкладок, великі панелі
- Герой (40px): Контейнери героїв, великі блоки функцій
- Коло (50%): Кнопки дії, індикатори вкладок
## 6. Глибина та Висота
| Рівень | Обробка | Використання |
|--------|---------|-------------|
| Плаский (Рівень 0) | Без тіні | За замовчуванням — піни покладаються на контент, а не на тінь |
| Ледь помітний (Рівень 1) | Мінімальна тінь (із токенів) | Піднятими накладки, спадні меню |
| Фокус (Доступність) | Кільце `--sema-color-border-focus-outer-default` | Стани фокусування |
**Філософія Тіней**: Pinterest використовує мінімальні тіні. Сітка masonry покладається на контент (фотографію) для створення візуального інтересу, а не на ефекти підняття. Глибина походить від теплоти кольорів поверхонь і щедрого скруглення контейнерів.
## 7. Що Робити і Чого Уникати
### Робити
- Використовуй теплі нейтральні тони (`#e5e5e0`, `#e0e0d9`, `#91918c`) — теплий оливково/піщаний тон є ідентичністю
- Застосовуй Pinterest Red (`#e60023`) лише для основних CTA — він сміливий і єдиний
- Використовуй Pin Sans виключно — один шрифт для всього
- Застосовуй щедрий border-radius: 16px для кнопок/полів введення, 20px+ для карток
- Зберігай сітку masonry щільною — щільність контенту є цінністю
- Використовуй теплі фони нашивок (`hsla(60,20%,98%,.5)`) для ледь помітних теплих промивань
- Використовуй `#211922` (сливовий чорний) для основного тексту — він тепліший за чистий чорний
### Уникати
- Не використовуй холодні сірі нейтральні тони — завжди теплий/оливковий відтінок
- Не використовуй чистий чорний (`#000000`) як основний текст — використовуй сливовий чорний (`#211922`)
- Не використовуй кнопки пігулкоподібної форми — радіус 16px округлений, але не пігулкоподібний
- Не додавай важких тіней — Pinterest плаский за своєю суттю, глибина від контенту
- Не використовуй малий border-radius (<12px) на картках — щедре скруглення є основним
- Не вводь додаткові кольори бренду — червоний + теплі нейтральні є повною палітрою
- Не використовуй тонкі жирності шрифту — Pin Sans мінімум 400
## 8. Адаптивна Поведінка
### Точки Перелому
| Назва | Ширина | Ключові Зміни |
|-------|--------|--------------|
| Мобільний | <576px | Один стовпець, компактний макет |
| Великий Мобільний | 576–768px | Сітка пінів у 2 стовпці |
| Планшет | 768–890px | Розширена сітка |
| Малий Десктоп | 890–1312px | Стандартна сітка masonry |
| Десктоп | 1312–1440px | Повний макет |
| Великий Десктоп | 1440–1680px | Розширені стовпці сітки |
| Ультрашироке | >1680px | Максимальна щільність сітки |
### Стратегія Згортання
- Сітка пінів: 5+ стовпців → 3 → 2 → 1
- Навігація: рядок пошуку + іконки → спрощена мобільна навігація
- Секції функцій: поруч → укладені
- Герой: 70px → масштабується пропорційно вниз
- Футер: темний багатоколонковий → укладений
## 9. Посібник із Запитів Агента
### Швидка Кольорова Довідка
- Бренд: Pinterest Red (`#e60023`)
- Фон: Білий (`#ffffff`)
- Текст: Сливовий Чорний (`#211922`)
- Другорядний текст: Оливковий Сірий (`#62625b`)
- Поверхня кнопки: Піщаний Сірий (`#e5e5e0`)
- Межа: Тепле Срібло (`#91918c`)
- Фокус: Синій Фокус (`#435ee5`)
### Приклади Запитів для Компонентів
- "Створи блок героя: білий фон. Заголовок 70px Pin Sans жирність 600, сливовий чорний (#211922). Червона кнопка CTA (#e60023, радіус 16px, відступ 6px 14px). Другорядна піщана кнопка (#e5e5e0, радіус 16px)."
- "Спроєктуй картку пінів: білий фон, радіус 16px, без тіні. Фотографія заповнює верхню частину, опис Pin Sans 16px жирність 400 нижче у кольорі #62625b."
- "Побудуй кругла кнопку дії: фон #e0e0d9, радіус 50%, іконка #211922."
- "Створи поле введення: білий фон, 1px solid #91918c, радіус 16px, відступ 11px 15px. Фокус: синє обведення через семантичні токени."
- "Спроєктуй темний футер: фон #33332e. Логотип Pinterest скриптом у білому. Посилання 12px Pin Sans у #91918c."
### Посібник з Ітерацій
1. Теплі нейтральні скрізь — оливково/піщані сірі, ніколи холодна сталь
2. Pinterest Red лише для CTA — сміливий і єдиний
3. Радіус 16px на кнопках/полях введення, 20px+ на картках — щедрий, але не пігулкоподібний
4. Pin Sans є єдиним шрифтом — компактний 12px для UI, 70px для відображення
5. Фотографія несе дизайн — UI залишається теплим і мінімалістичним
6. Сливовий чорний (#211922) для тексту — тепліший за чистий чорний
open-design/design-systems/pinterest/DESIGN-vi.md
+233
View File
@@ -0,0 +1,233 @@
# Hệ thống thiết kế lấy cảm hứng từ Pinterest
> Category: Truyền thông & Người tiêu dùng
> Khám phá trực quan. Điểm nhấn màu đỏ, lưới xây, ưu tiên hình ảnh.
## 1. Chủ đề trực quan và bầu không khí
Trang web của Pinterest là một khung vẽ ấm áp, đầy cảm hứng, coi việc khám phá trực quan như một tạp chí lifestyle. Thiết kế vận hành trên nền trắng mềm mại, hơi ấm áp với Đỏ Pinterest (`#e60023`) là điểm nhấn thương hiệu duy nhất, táo bạo. Khác với màu xanh lạnh của hầu hết các nền tảng công nghệ, thang màu trung tính của Pinterest có sắc ấm rõ rệt — màu xám nghiêng về olive/cát (`#91918c`, `#62625b`, `#e5e5e0`) thay vì thép lạnh, tạo ra không khí ấm cúng, thủ công, mời gọi người dùng khám phá.
Kiểu chữ sử dụng Pin Sans — phông chữ độc quyền tùy chỉnh với ngăn xếp dự phòng rộng bao gồm phông chữ tiếng Nhật, phản ánh tầm vươn toàn cầu của Pinterest. Ở quy mô hiển thị (70px, đậm 600), Pin Sans tạo ra các tiêu đề lớn, mời gọi. Ở kích thước nhỏ hơn, hệ thống gọn gàng: nút 12px, chú thích 12–14px. Hệ thống đặt tên biến CSS (`--comp-*`, `--sema-*`, `--base-*`) tiết lộ kiến trúc token thiết kế ba tầng tinh tế: tầng thành phần, tầng ngữ nghĩa và tầng cơ sở.
Điều phân biệt Pinterest là hệ thống bán kính góc hào phóng (12px–40px, cộng 50% cho hình tròn) và nền nút có sắc ấm. Nút thứ cấp (`#e5e5e0`) có sắc cát ấm rõ rệt thay vì xám lạnh. Nút đỏ chính sử dụng bán kính 16px — bo tròn nhưng không dạng viên thuốc. Kết hợp với nền huy hiệu ấm áp (`hsla(60,20%,98%,.5)` — lớp phủ vàng ấm tinh tế) và bố cục lấy nhiếp ảnh làm trọng tâm, kết quả là thiết kế mang cảm giác thủ công và cá nhân, không phải doanh nghiệp và vô trùng.
**Đặc điểm chính:**
- Khung vẽ trắng ấm với màu trung tính tông olive/cát — ấm cúng, không lâm sàng
- Đỏ Pinterest (`#e60023`) là điểm nhấn táo bạo duy nhất — không bao giờ kín đáo, luôn tự tin
- Phông chữ tùy chỉnh Pin Sans với ngăn xếp dự phòng toàn cầu (bao gồm CJK)
- Kiến trúc token ba tầng: `--comp-*` / `--sema-*` / `--base-*`
- Bề mặt thứ cấp ấm: xám cát (`#e5e5e0`), huy hiệu ấm (`hsla(60,20%,98%,.5)`)
- Bán kính góc hào phóng: 16px tiêu chuẩn, tối đa 40px cho các vùng chứa lớn
- Nội dung ưu tiên nhiếp ảnh — ghim/hình ảnh là yếu tố trực quan chính
- Văn bản tím đậm gần đen (`#211922`) — ấm, với gợi ý màu mận
## 2. Bảng màu và vai trò
### Thương hiệu chính
- **Đỏ Pinterest** (`#e60023`): CTA chính, điểm nhấn thương hiệu — đỏ táo bạo, tự tin
- **Xanh lá 700** (`#103c25`): `--base-color-green-700`, điểm nhấn thành công/thiên nhiên
- **Xanh lá 700 Hover** (`#0b2819`): `--base-color-hover-green-700`, xanh lá khi nhấn
### Văn bản
- **Đen mận** (`#211922`): Văn bản chính — gần đen ấm với sắc mận
- **Đen** (`#000000`): Văn bản thứ cấp, văn bản nút
- **Xám olive** (`#62625b`): Mô tả thứ cấp, văn bản mờ
- **Bạc ấm** (`#91918c`): `--comp-button-color-text-transparent-disabled`, văn bản vô hiệu, viền nhập liệu
- **Trắng** (`#ffffff`): Văn bản trên bề mặt tối/có màu
### Tương tác
- **Xanh dương tiêu điểm** (`#435ee5`): `--comp-button-color-border-focus-outer-transparent`, vòng tiêu điểm
- **Tím hiệu năng** (`#6845ab`): `--sema-color-hover-icon-performance-plus`, tính năng hiệu năng
- **Tím gợi ý** (`#7e238b`): `--sema-color-hover-text-recommendation`, gợi ý AI
- **Xanh dương liên kết** (`#2b48d4`): Màu văn bản liên kết
- **Xanh dương Facebook** (`#0866ff`): `--facebook-background-color`, đăng nhập mạng xã hội
- **Xanh dương nhấn** (`#617bff`): `--base-color-pressed-blue-200`, trạng thái nhấn
### Bề mặt và viền
- **Xám cát** (`#e5e5e0`): Nền nút thứ cấp — ấm, thủ công
- **Sáng ấm** (`#e0e0d9`): Nền nút tròn, huy hiệu
- **Rửa ấm** (`hsla(60, 20%, 98%, 0.5)`): `--comp-badge-color-background-wash-light`, nền huy hiệu ấm tinh tế
- **Sương** (`#f6f6f3`): Bề mặt sáng (ở 50% độ mờ)
- **Viền vô hiệu** (`#c8c8c1`): `--sema-color-border-disabled`, viền vô hiệu
- **Xám hover** (`#bcbcb3`): `--base-color-hover-grayscale-150`, viền khi di chuột
- **Bề mặt tối** (`#33332e`): Nền phần tối
### Ngữ nghĩa
- **Đỏ lỗi** (`#9e0a0a`): Trạng thái lỗi hộp kiểm/biểu mẫu
## 3. Quy tắc kiểu chữ
### Họ phông chữ
- **Chính**: `Pin Sans`, dự phòng: `-apple-system, system-ui, Segoe UI, Roboto, Oxygen-Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Arial`
### Phân cấp
| Vai trò | Phông chữ | Kích thước | Độ đậm | Chiều cao dòng | Khoảng cách chữ | Ghi chú |
|------|------|------|--------|-------------|----------------|-------|
| Hiển thị anh hùng | Pin Sans | 70px (4,38rem) | 600 | normal | normal | Tác động tối đa |
| Tiêu đề phần | Pin Sans | 28px (1,75rem) | 700 | normal | -1,2px | Tracking âm |
| Nội dung | Pin Sans | 16px (1,00rem) | 400 | 1,40 | normal | Đọc tiêu chuẩn |
| Chú thích đậm | Pin Sans | 14px (0,88rem) | 700 | normal | normal | Siêu dữ liệu mạnh |
| Chú thích | Pin Sans | 12px (0,75rem) | 400–500 | 1,50 | normal | Văn bản nhỏ, thẻ |
| Nút | Pin Sans | 12px (0,75rem) | 400 | normal | normal | Nhãn nút |
### Nguyên tắc
- **Thang kiểu chữ gọn**: Phạm vi 12px–70px với bước nhảy lớn — hầu hết văn bản chức năng ở 12–16px, tạo phân cấp thông tin dày đặc kiểu ứng dụng.
- **Phân phối độ đậm ấm**: 600–700 cho tiêu đề, 400–500 cho nội dung. Không có độ đậm siêu nhẹ — kiểu chữ luôn có trọng lượng.
- **Tracking âm trên tiêu đề**: -1,2px trên tiêu đề 28px tạo ra tiêu đề phần ấm cúng, gần gũi.
- **Một họ phông duy nhất**: Pin Sans xử lý tất cả — không phát hiện phông hiển thị thứ cấp hay phông đơn cách.
## 4. Kiểu thành phần
### Nút
**Đỏ chính**
- Nền: `#e60023` (Đỏ Pinterest)
- Văn bản: `#000000` (đen — lựa chọn bất thường cho tương phản trên đỏ)
- Đệm: 6px 14px
- Bán kính: 16px (bo tròn hào phóng, không dạng viên thuốc)
- Viền: `2px solid rgba(255, 255, 255, 0)` (trong suốt)
- Tiêu điểm: viền ngữ nghĩa + đường viền qua biến CSS
**Cát thứ cấp**
- Nền: `#e5e5e0` (xám cát ấm)
- Văn bản: `#000000`
- Đệm: 6px 14px
- Bán kính: 16px
- Tiêu điểm: cùng hệ thống viền ngữ nghĩa
**Hành động tròn**
- Nền: `#e0e0d9` (sáng ấm)
- Văn bản: `#211922` (đen mận)
- Bán kính: 50% (tròn)
- Dùng: hành động ghim, điều khiển điều hướng
**Ghost / Trong suốt**
- Nền: trong suốt
- Văn bản: `#000000`
- Không viền
- Dùng: hành động cấp ba
### Thẻ và vùng chứa
- Thẻ ghim ưu tiên nhiếp ảnh với bán kính hào phóng (12px–20px)
- Không có bóng hộp truyền thống trên hầu hết thẻ
- Nền trắng hoặc sương ấm
- Viền trắng dày 8px trên một số vùng chứa hình ảnh
### Nhập liệu
- Nhập email: nền trắng, viền `1px solid #91918c`, bán kính 16px, đệm 11px 15px
- Tiêu điểm: hệ thống viền ngữ nghĩa + đường viền qua biến CSS
### Điều hướng
- Tiêu đề gọn gàng trên nền trắng hoặc ấm
- Logo Pinterest + thanh tìm kiếm căn giữa
- Pin Sans 16px cho liên kết điều hướng
- Điểm nhấn Đỏ Pinterest cho trạng thái hoạt động
### Xử lý hình ảnh
- Lưới xây kiểu ghim (bố cục đặc trưng của Pinterest)
- Góc bo tròn: 12px–20px trên hình ảnh
- Nhiếp ảnh là nội dung chính — mỗi ghim là một hình ảnh
- Viền trắng dày (8px) trên vùng chứa hình ảnh nổi bật
## 5. Nguyên tắc bố cục
### Hệ thống khoảng cách
- Đơn vị cơ sở: 8px
- Thang: 4px, 6px, 7px, 8px, 10px, 11px, 12px, 16px, 18px, 20px, 22px, 24px, 32px, 80px, 100px
- Bước nhảy lớn: 32px → 80px → 100px cho khoảng cách phần
### Lưới và vùng chứa
- Lưới xây cho nội dung ghim (bố cục đặc trưng)
- Các phần nội dung căn giữa với chiều rộng tối đa hào phóng
- Chân trang tối toàn chiều rộng
- Thanh tìm kiếm là yếu tố điều hướng chính
### Triết lý khoảng trắng
- **Mật độ cảm hứng**: Lưới xây đóng gói ghim chặt chẽ — mật độ nội dung CHÍNH LÀ đề xuất giá trị. Khoảng trắng tồn tại giữa các phần, không trong lưới.
- **Thở ở trên, mật độ ở dưới**: Các phần anh hùng/nổi bật nhận được đệm hào phóng; lưới ghim gọn gàng và đắm chìm.
### Thang bán kính viền
- Tiêu chuẩn (12px): Thẻ nhỏ, liên kết
- Nút (16px): Nút, nhập liệu, thẻ vừa
- Thoải mái (20px): Thẻ nổi bật
- Lớn (28px): Vùng chứa lớn
- Phần (32px): Phần tử tab, bảng lớn
- Anh hùng (40px): Vùng chứa anh hùng, khối nổi bật lớn
- Tròn (50%): Nút hành động, chỉ báo tab
## 6. Độ sâu và độ cao
| Mức độ | Xử lý | Dùng |
|-------|-----------|-----|
| Phẳng (Mức 0) | Không bóng | Mặc định — ghim dựa vào nội dung, không bóng |
| Tinh tế (Mức 1) | Bóng tối thiểu (từ token) | Lớp phủ nổi, menu thả xuống |
| Tiêu điểm (Trợ năng) | Vòng `--sema-color-border-focus-outer-default` | Trạng thái tiêu điểm |
**Triết lý bóng đổ**: Pinterest sử dụng bóng tối thiểu. Lưới xây dựa vào nội dung (nhiếp ảnh) để tạo sự thú vị trực quan thay vì hiệu ứng độ cao. Độ sâu đến từ sắc ấm của màu bề mặt và góc bo tròn hào phóng của vùng chứa.
## 7. Nên làm và không nên làm
### Nên làm
- Dùng trung tính ấm (`#e5e5e0`, `#e0e0d9`, `#91918c`) — sắc ấm olive/cát là bản sắc
- Áp dụng Đỏ Pinterest (`#e60023`) chỉ cho CTA chính — táo bạo và độc nhất
- Dùng Pin Sans độc quyền — một phông cho tất cả
- Áp dụng bán kính viền hào phóng: 16px cho nút/nhập liệu, 20px+ cho thẻ
- Giữ lưới xây dày đặc — mật độ nội dung là giá trị
- Dùng nền huy hiệu ấm (`hsla(60,20%,98%,.5)`) cho lớp rửa ấm tinh tế
- Dùng `#211922` (đen mận) cho văn bản chính — ấm hơn đen thuần
### Không nên làm
- Không dùng trung tính xám lạnh — luôn dùng sắc ấm/olive
- Không dùng đen thuần (`#000000`) làm văn bản chính — dùng đen mận (`#211922`)
- Không dùng nút dạng viên thuốc — bán kính 16px là bo tròn nhưng không phải viên thuốc
- Không thêm bóng nặng — Pinterest phẳng theo thiết kế, độ sâu từ nội dung
- Không dùng bán kính viền nhỏ (<12px) trên thẻ — bo tròn hào phóng là cốt lõi
- Không giới thiệu màu thương hiệu bổ sung — đỏ + trung tính ấm là bảng màu đầy đủ
- Không dùng độ đậm phông nhẹ — Pin Sans tối thiểu 400
## 8. Hành vi đáp ứng
### Điểm dừng
| Tên | Chiều rộng | Thay đổi chính |
|------|-------|-------------|
| Di động | <576px | Một cột, bố cục gọn |
| Di động lớn | 576–768px | Lưới ghim 2 cột |
| Máy tính bảng | 768–890px | Lưới mở rộng |
| Máy tính nhỏ | 890–1312px | Lưới xây tiêu chuẩn |
| Máy tính | 1312–1440px | Bố cục đầy đủ |
| Máy tính lớn | 1440–1680px | Cột lưới mở rộng |
| Siêu rộng | >1680px | Mật độ lưới tối đa |
### Chiến lược thu gọn
- Lưới ghim: 5+ cột → 3 → 2 → 1
- Điều hướng: thanh tìm kiếm + biểu tượng → điều hướng di động đơn giản
- Phần nổi bật: cạnh nhau → xếp chồng
- Anh hùng: 70px → thu nhỏ theo tỷ lệ
- Chân trang: tối nhiều cột → xếp chồng
## 9. Hướng dẫn gợi ý cho tác nhân
### Tham khảo màu nhanh
- Thương hiệu: Đỏ Pinterest (`#e60023`)
- Nền: Trắng (`#ffffff`)
- Văn bản: Đen mận (`#211922`)
- Văn bản thứ cấp: Xám olive (`#62625b`)
- Bề mặt nút: Xám cát (`#e5e5e0`)
- Viền: Bạc ấm (`#91918c`)
- Tiêu điểm: Xanh dương tiêu điểm (`#435ee5`)
### Gợi ý thành phần mẫu
- "Tạo anh hùng: nền trắng. Tiêu đề 70px Pin Sans đậm 600, đen mận (#211922). Nút CTA đỏ (#e60023, bán kính 16px, đệm 6px 14px). Nút cát thứ cấp (#e5e5e0, bán kính 16px)."
- "Thiết kế thẻ ghim: nền trắng, bán kính 16px, không bóng. Nhiếp ảnh lấp đầy phần trên, mô tả 16px Pin Sans đậm 400 bên dưới bằng #62625b."
- "Xây nút hành động tròn: nền #e0e0d9, bán kính 50%, biểu tượng #211922."
- "Tạo trường nhập: nền trắng, 1px solid #91918c, bán kính 16px, đệm 11px 15px. Tiêu điểm: đường viền xanh qua token ngữ nghĩa."
- "Thiết kế chân trang tối: nền #33332e. Logo chữ thảo Pinterest màu trắng. Liên kết 12px Pin Sans bằng #91918c."
### Hướng dẫn lặp
1. Trung tính ấm ở khắp nơi — xám olive/cát, không bao giờ thép lạnh
2. Đỏ Pinterest chỉ cho CTA — táo bạo và độc nhất
3. Bán kính 16px trên nút/nhập liệu, 20px+ trên thẻ — hào phóng nhưng không viên thuốc
4. Pin Sans là phông duy nhất — gọn 12px cho giao diện, 70px cho hiển thị
5. Nhiếp ảnh mang thiết kế — giao diện giữ ấm và tối giản
6. Đen mận (#211922) cho văn bản — ấm hơn đen thuần
open-design/design-systems/pinterest/DESIGN-zh-tw.md
+233
View File
@@ -0,0 +1,233 @@
# 受 Pinterest 啟發的設計系統
> Category: 媒體與消費
> 視覺探索。紅色強調，瀑布流網格，圖片優先。
## 1. 視覺主題與氛圍
Pinterest 的網站是一塊溫暖、充滿靈感的畫布，將視覺探索體驗打造得如同生活風格雜誌。設計基於柔和、略帶暖意的白色背景，以 Pinterest 紅（`#e60023`）作為唯一醒目的品牌強調色。與大多數科技平台的冷藍色調不同，Pinterest 的中性色系帶有明顯的暖色調——灰色偏向橄欖/沙色（`#91918c`、`#62625b`、`#e5e5e0`），而非冷鋼色，營造出溫馨、手工感十足的氛圍，讓人忍不住想要瀏覽下去。
字型使用 Pin Sans——一款訂製專屬字型，擁有寬泛的備用字型堆疊（包含日文字型），體現了 Pinterest 的全球影響力。在展示級別（70px，字重 600），Pin Sans 打造出寬大、親切的標題。在較小尺寸下，系統保持緊湊：按鈕 12px，說明文字 12–14px。CSS 變數命名體系（`--comp-*`、`--sema-*`、`--base-*`）揭示了一套精密的三層設計 token 架構：元件層、語意層和基礎層 token。
Pinterest 的特色在於其慷慨的圓角系統（12px–40px，加上圓形的 50%）以及帶暖色調的按鈕背景。次要按鈕（`#e5e5e0`）呈現出明顯的暖沙色調，而非冷灰色。主要紅色按鈕使用 16px 圓角——圓潤但不是膠囊形。結合暖色徽章背景（`hsla(60,20%,98%,.5)`——微妙的暖黃色調）以及以攝影為主導的版面，最終呈現出一種手工感、個性化的設計，而非企業化、千篇一律的風格。
**關鍵特徵：**
- 帶橄欖/沙色中性色的暖白色畫布——溫馨，而非冷峻
- Pinterest 紅（`#e60023`）作為唯一醒目的強調色——從不低調，始終自信
- Pin Sans 訂製字型，配備全球備用字型堆疊（含 CJK）
- 三層 token 架構：`--comp-*` / `--sema-*` / `--base-*`
- 暖色次要表面：沙灰色（`#e5e5e0`）、暖色徽章（`hsla(60,20%,98%,.5)`）
- 慷慨的圓角：標準 16px，大容器最高 40px
- 攝影內容優先——圖釘/圖像是主要視覺元素
- 深近紫色文字（`#211922`）——溫暖，帶一絲梅紅色
## 2. 色彩調色盤與用途
### 主品牌色
- **Pinterest 紅**（`#e60023`）：主要 CTA、品牌強調——醒目、自信的紅色
- **綠色 700**（`#103c25`）：`--base-color-green-700`，成功/自然強調
- **綠色 700 懸停**（`#0b2819`）：`--base-color-hover-green-700`，按下的綠色
### 文字色
- **梅黑色**（`#211922`）：主要文字——帶梅紅色調的暖近黑色
- **純黑**（`#000000`）：次要文字、按鈕文字
- **橄欖灰**（`#62625b`）：次要描述，低調文字
- **暖銀色**（`#91918c`）：`--comp-button-color-text-transparent-disabled`，停用文字，輸入框邊框
- **白色**（`#ffffff`）：深色/彩色表面上的文字
### 互動色
- **焦點藍**（`#435ee5`）：`--comp-button-color-border-focus-outer-transparent`，焦點環
- **效能紫**（`#6845ab`）：`--sema-color-hover-icon-performance-plus`，效能功能
- **推薦紫**（`#7e238b`）：`--sema-color-hover-text-recommendation`，AI 推薦
- **連結藍**（`#2b48d4`）：連結文字顏色
- **Facebook 藍**（`#0866ff`）：`--facebook-background-color`，社群登入
- **按下藍**（`#617bff`）：`--base-color-pressed-blue-200`，按下狀態
### 表面與邊框
- **沙灰色**（`#e5e5e0`）：次要按鈕背景——溫暖，手工感
- **暖亮色**（`#e0e0d9`）：圓形按鈕背景，徽章
- **暖色調**（`hsla(60, 20%, 98%, 0.5)`）：`--comp-badge-color-background-wash-light`，微妙的暖色徽章背景
- **霧色**（`#f6f6f3`）：淺色表面（50% 不透明度）
- **停用邊框**（`#c8c8c1`）：`--sema-color-border-disabled`，停用邊框
- **懸停灰**（`#bcbcb3`）：`--base-color-hover-grayscale-150`，懸停邊框
- **深色表面**（`#33332e`）：深色區域背景
### 語意色
- **錯誤紅**（`#9e0a0a`）：核取方塊/表單錯誤狀態
## 3. 字型規則
### 字型家族
- **主字型**：`Pin Sans`，備用字型：`-apple-system, system-ui, Segoe UI, Roboto, Oxygen-Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Arial`
### 層次結構
| 角色 | 字型 | 大小 | 字重 | 行高 | 字間距 | 備注 |
|------|------|------|--------|-------------|----------------|-------|
| 展示主標題 | Pin Sans | 70px (4.38rem) | 600 | normal | normal | 最大視覺衝擊力 |
| 區塊標題 | Pin Sans | 28px (1.75rem) | 700 | normal | -1.2px | 負字間距 |
| 內文 | Pin Sans | 16px (1.00rem) | 400 | 1.40 | normal | 標準閱讀 |
| 加粗說明 | Pin Sans | 14px (0.88rem) | 700 | normal | normal | 強調中繼資料 |
| 說明 | Pin Sans | 12px (0.75rem) | 400–500 | 1.50 | normal | 小字，標籤 |
| 按鈕 | Pin Sans | 12px (0.75rem) | 400 | normal | normal | 按鈕標籤 |
### 原則
- **緊湊字型比例**：字型範圍 12px–70px，跨度顯著——大多數功能性文字為 12–16px，營造密集的應用感資訊層次。
- **暖色字重分佈**：標題 600–700，內文 400–500。無超細字重——文字始終感覺有分量。
- **標題負字間距**：28px 標題的 -1.2px 字間距創造出溫馨、親近的區塊標題感。
- **單一字型家族**：Pin Sans 承擔所有排版——未偵測到次要展示或等寬字型。
## 4. 元件樣式
### 按鈕
**主要紅色按鈕**
- 背景：`#e60023`（Pinterest 紅）
- 文字：`#000000`（黑色——在紅色上的對比度是個不尋常的選擇）
- 內邊距：6px 14px
- 圓角：16px（圓潤但非膠囊形）
- 邊框：`2px solid rgba(255, 255, 255, 0)`（透明）
- 焦點：透過 CSS 變數實現的語意邊框 + 外框
**次要沙色按鈕**
- 背景：`#e5e5e0`（暖沙灰色）
- 文字：`#000000`
- 內邊距：6px 14px
- 圓角：16px
- 焦點：相同的語意邊框系統
**圓形操作按鈕**
- 背景：`#e0e0d9`（暖亮色）
- 文字：`#211922`（梅黑色）
- 圓角：50%（圓形）
- 用途：圖釘操作、導覽控制項
**幽靈/透明按鈕**
- 背景：透明
- 文字：`#000000`
- 無邊框
- 用途：第三級操作
### 卡片與容器
- 以攝影為主的圖釘卡片，慷慨的圓角（12px–20px）
- 大多數卡片無傳統盒陰影
- 白色或暖霧色背景
- 部分圖片容器有 8px 白色厚邊框
### 輸入框
- 電子郵件輸入框：白色背景，`1px solid #91918c` 邊框，16px 圓角，11px 15px 內邊距
- 焦點：透過 CSS 變數實現的語意邊框 + 外框系統
### 導覽
- 白色或暖色背景上的簡潔頂部列
- Pinterest logo + 搜尋列居中
- 導覽連結 Pin Sans 16px
- 活躍狀態使用 Pinterest 紅色強調
### 圖片處理
- 圖釘式瀑布流網格（Pinterest 標誌性版面）
- 圖片圓角：12px–20px
- 攝影作為主要內容——每個圖釘都是一張圖片
- 精選圖片容器有 8px 白色厚邊框
## 5. 版面原則
### 間距系統
- 基礎單位：8px
- 刻度：4px、6px、7px、8px、10px、11px、12px、16px、18px、20px、22px、24px、32px、80px、100px
- 大跳躍：32px → 80px → 100px 用於區塊間距
### 網格與容器
- 圖釘內容使用瀑布流網格（標誌性版面）
- 居中內容區塊，充裕的最大寬度
- 全寬深色頁腳
- 搜尋列作為主要導覽元素
### 留白哲學
- **靈感密度**：瀑布流網格將圖釘緊密排列——內容密度本身就是價值主張。留白存在於區塊之間，而非網格內部。
- **上方呼吸，下方密集**：主視覺/特色區塊獲得充裕的內邊距；圖釘網格緊湊而沉浸。
### 圓角體系
- 標準（12px）：小卡片，連結
- 按鈕（16px）：按鈕、輸入框、中等卡片
- 舒適（20px）：特色卡片
- 大（28px）：大容器
- 區塊（32px）：索引標籤元素，大面板
- 主視覺（40px）：主視覺容器，大型特色塊
- 圓形（50%）：操作按鈕，索引標籤指示器
## 6. 層次與陰影
| 層級 | 處理方式 | 用途 |
|-------|-----------|-----|
| 扁平（0 級）| 無陰影 | 預設——圖釘依靠內容而非陰影 |
| 微妙（1 級）| 最小陰影（來自 token） | 懸浮疊層，下拉選單 |
| 焦點（無障礙）| `--sema-color-border-focus-outer-default` 環 | 焦點狀態 |
**陰影哲學**：Pinterest 使用極少的陰影。瀑布流網格依靠內容（攝影）創造視覺趣味，而非依靠提升效果。深度來自表面顏色的溫暖感和容器的慷慨圓角。
## 7. 應做與不應做
### 應做
- 使用暖中性色（`#e5e5e0`、`#e0e0d9`、`#91918c`）——橄欖/沙色調是品牌標識
- 僅將 Pinterest 紅（`#e60023`）用於主要 CTA——它醒目且唯一
- 專一使用 Pin Sans——一種字型統攬一切
- 應用慷慨的圓角：按鈕/輸入框 16px，卡片 20px+
- 保持瀑布流網格的密集感——內容密度就是價值
- 使用暖色徽章背景（`hsla(60,20%,98%,.5)`）實現微妙的暖色調
- 主要文字使用 `#211922`（梅黑色）——比純黑更溫暖
### 不應做
- 不要使用冷灰色中性色——始終保持暖色/橄欖色調
- 不要使用純黑（`#000000`）作為主要文字——使用梅黑色（`#211922`）
- 不要使用膠囊形按鈕——16px 圓角是圓潤的，但不是膠囊形
- 不要添加厚重陰影——Pinterest 設計上是扁平的，深度來自內容
- 不要在卡片上使用小圓角（<12px）——慷慨的圓角是核心
- 不要引入額外的品牌色——紅色+暖中性色就是完整的色彩體系
- 不要使用細字重——Pin Sans 最低 400
## 8. 響應式行為
### 中斷點
| 名稱 | 寬度 | 主要變化 |
|------|-------|-------------|
| 行動裝置 | <576px | 單欄，緊湊版面 |
| 大型行動裝置 | 576–768px | 2 欄圖釘網格 |
| 平板 | 768–890px | 擴展網格 |
| 小桌面 | 890–1312px | 標準瀑布流網格 |
| 桌面 | 1312–1440px | 完整版面 |
| 大桌面 | 1440–1680px | 擴展網格欄 |
| 超寬螢幕 | >1680px | 最大網格密度 |
### 折疊策略
- 圖釘網格：5+ 欄 → 3 → 2 → 1
- 導覽：搜尋列 + 圖示 → 簡化行動端導覽
- 特色區塊：並排 → 堆疊
- 主視覺：70px → 按比例縮小
- 頁腳：深色多欄 → 堆疊
## 9. 智能代理提示指南
### 快速顏色參考
- 品牌色：Pinterest 紅（`#e60023`）
- 背景色：白色（`#ffffff`）
- 文字色：梅黑色（`#211922`）
- 次要文字：橄欖灰（`#62625b`）
- 按鈕表面：沙灰色（`#e5e5e0`）
- 邊框色：暖銀色（`#91918c`）
- 焦點色：焦點藍（`#435ee5`）
### 示例元件提示
- 「建立一個主視覺區塊：白色背景。標題使用 70px Pin Sans 字重 600，梅黑色（#211922）。紅色 CTA 按鈕（#e60023，16px 圓角，6px 14px 內邊距）。次要沙色按鈕（#e5e5e0，16px 圓角）。」
- 「設計一個圖釘卡片：白色背景，16px 圓角，無陰影。攝影填充頂部，下方 16px Pin Sans 字重 400 描述文字，顏色 #62625b。」
- 「製作一個圓形操作按鈕：#e0e0d9 背景，50% 圓角，#211922 圖示。」
- 「建立一個輸入框：白色背景，1px solid #91918c，16px 圓角，11px 15px 內邊距。焦點：透過語意 token 實現藍色外框。」
- 「設計深色頁腳：#33332e 背景。白色 Pinterest 手寫體 logo。12px Pin Sans 連結，顏色 #91918c。」
### 迭代指南
1. 隨處使用暖中性色——橄欖/沙灰色，絕不用冷鋼色
2. Pinterest 紅僅用於 CTA——醒目且唯一
3. 按鈕/輸入框 16px 圓角，卡片 20px+——慷慨但非膠囊形
4. Pin Sans 是唯一字型——UI 緊湊 12px，展示 70px
5. 攝影承載設計——UI 保持溫暖而簡約
6. 文字使用梅黑色（#211922）——比純黑更溫暖
open-design/design-systems/pinterest/DESIGN-zh.md
+233
View File
@@ -0,0 +1,233 @@
# 受 Pinterest 启发的设计系统
> Category: 媒体与消费
> 视觉发现。红色点缀，瀑布流网格，图片优先。
## 1. 视觉主题与氛围
Pinterest 的网站是一块温暖、充满灵感的画布，将视觉发现体验打造得如同生活方式杂志。设计基于柔和、略带暖意的白色背景，以 Pinterest 红（`#e60023`）作为唯一醒目的品牌点缀色。与大多数科技平台的冷蓝色调不同，Pinterest 的中性色系带有明显的暖色调——灰色偏向橄榄/沙色（`#91918c`、`#62625b`、`#e5e5e0`），而非冷钢色，营造出温馨、手工感十足的氛围，让人忍不住想要浏览下去。
字体使用 Pin Sans——一款定制专属字体，拥有宽泛的备用字体栈（包含日文字体），体现了 Pinterest 的全球影响力。在展示级别（70px，字重 600），Pin Sans 打造出宽大、亲切的标题。在较小尺寸下，系统保持紧凑：按钮 12px，说明文字 12–14px。CSS 变量命名体系（`--comp-*`、`--sema-*`、`--base-*`）揭示了一套精密的三层设计 token 架构：组件层、语义层和基础层 token。
Pinterest 的特色在于其慷慨的圆角系统（12px–40px，加上圆形的 50%）以及带暖色调的按钮背景。次要按钮（`#e5e5e0`）呈现出明显的暖沙色调，而非冷灰色。主要红色按钮使用 16px 圆角——圆润但不是药丸形。结合暖色徽章背景（`hsla(60,20%,98%,.5)`——微妙的暖黄色调）以及以摄影为主导的版面，最终呈现出一种手工感、个性化的设计，而非企业化、千篇一律的风格。
**关键特征：**
- 带橄榄/沙色中性色的暖白色画布——温馨，而非冷峻
- Pinterest 红（`#e60023`）作为唯一醒目的点缀色——从不低调，始终自信
- Pin Sans 定制字体，配备全球备用字体栈（含 CJK）
- 三层 token 架构：`--comp-*` / `--sema-*` / `--base-*`
- 暖色次要表面：沙灰色（`#e5e5e0`）、暖色徽章（`hsla(60,20%,98%,.5)`）
- 慷慨的圆角：标准 16px，大容器最高 40px
- 摄影内容优先——图钉/图像是主要视觉元素
- 深近紫色文字（`#211922`）——温暖，带一丝梅红色
## 2. 色彩调色板与用途
### 主品牌色
- **Pinterest 红**（`#e60023`）：主要 CTA、品牌点缀——醒目、自信的红色
- **绿色 700**（`#103c25`）：`--base-color-green-700`，成功/自然点缀
- **绿色 700 悬停**（`#0b2819`）：`--base-color-hover-green-700`，按下的绿色
### 文字色
- **梅黑色**（`#211922`）：主要文字——带梅红色调的暖近黑色
- **纯黑**（`#000000`）：次要文字、按钮文字
- **橄榄灰**（`#62625b`）：次要描述，低调文字
- **暖银色**（`#91918c`）：`--comp-button-color-text-transparent-disabled`，禁用文字，输入框边框
- **白色**（`#ffffff`）：深色/彩色表面上的文字
### 交互色
- **焦点蓝**（`#435ee5`）：`--comp-button-color-border-focus-outer-transparent`，焦点环
- **性能紫**（`#6845ab`）：`--sema-color-hover-icon-performance-plus`，性能功能
- **推荐紫**（`#7e238b`）：`--sema-color-hover-text-recommendation`，AI 推荐
- **链接蓝**（`#2b48d4`）：链接文字颜色
- **Facebook 蓝**（`#0866ff`）：`--facebook-background-color`，社交登录
- **按下蓝**（`#617bff`）：`--base-color-pressed-blue-200`，按下状态
### 表面与边框
- **沙灰色**（`#e5e5e0`）：次要按钮背景——温暖，手工感
- **暖亮色**（`#e0e0d9`）：圆形按钮背景，徽章
- **暖色调**（`hsla(60, 20%, 98%, 0.5)`）：`--comp-badge-color-background-wash-light`，微妙的暖色徽章背景
- **雾色**（`#f6f6f3`）：浅色表面（50% 不透明度）
- **禁用边框**（`#c8c8c1`）：`--sema-color-border-disabled`，禁用边框
- **悬停灰**（`#bcbcb3`）：`--base-color-hover-grayscale-150`，悬停边框
- **深色表面**（`#33332e`）：深色区域背景
### 语义色
- **错误红**（`#9e0a0a`）：复选框/表单错误状态
## 3. 字体规则
### 字体家族
- **主字体**：`Pin Sans`，备用字体：`-apple-system, system-ui, Segoe UI, Roboto, Oxygen-Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Arial`
### 层次结构
| 角色 | 字体 | 大小 | 字重 | 行高 | 字间距 | 备注 |
|------|------|------|--------|-------------|----------------|-------|
| 展示主标题 | Pin Sans | 70px (4.38rem) | 600 | normal | normal | 最大视觉冲击力 |
| 区块标题 | Pin Sans | 28px (1.75rem) | 700 | normal | -1.2px | 负字间距 |
| 正文 | Pin Sans | 16px (1.00rem) | 400 | 1.40 | normal | 标准阅读 |
| 加粗说明 | Pin Sans | 14px (0.88rem) | 700 | normal | normal | 强调元数据 |
| 说明 | Pin Sans | 12px (0.75rem) | 400–500 | 1.50 | normal | 小字，标签 |
| 按钮 | Pin Sans | 12px (0.75rem) | 400 | normal | normal | 按钮标签 |
### 原则
- **紧凑字号体系**：字号范围 12px–70px，跨度显著——大多数功能性文字为 12–16px，营造密集的应用感信息层次。
- **暖色字重分布**：标题 600–700，正文 400–500。无超轻字重——文字始终感觉有分量。
- **标题负字间距**：28px 标题的 -1.2px 字间距创造出温馨、亲近的区块标题感。
- **单一字体家族**：Pin Sans 承担所有排版——未检测到次要展示或等宽字体。
## 4. 组件样式
### 按钮
**主要红色按钮**
- 背景：`#e60023`（Pinterest 红）
- 文字：`#000000`（黑色——在红色上的对比度是个不寻常的选择）
- 内边距：6px 14px
- 圆角：16px（圆润但非药丸形）
- 边框：`2px solid rgba(255, 255, 255, 0)`（透明）
- 焦点：通过 CSS 变量实现的语义边框 + 轮廓
**次要沙色按钮**
- 背景：`#e5e5e0`（暖沙灰色）
- 文字：`#000000`
- 内边距：6px 14px
- 圆角：16px
- 焦点：相同的语义边框系统
**圆形操作按钮**
- 背景：`#e0e0d9`（暖亮色）
- 文字：`#211922`（梅黑色）
- 圆角：50%（圆形）
- 用途：图钉操作、导航控件
**幽灵/透明按钮**
- 背景：透明
- 文字：`#000000`
- 无边框
- 用途：第三级操作
### 卡片与容器
- 以摄影为主的图钉卡片，慷慨的圆角（12px–20px）
- 大多数卡片无传统盒阴影
- 白色或暖雾色背景
- 部分图片容器有 8px 白色厚边框
### 输入框
- 邮箱输入框：白色背景，`1px solid #91918c` 边框，16px 圆角，11px 15px 内边距
- 焦点：通过 CSS 变量实现的语义边框 + 轮廓系统
### 导航
- 白色或暖色背景上的简洁顶部栏
- Pinterest logo + 搜索栏居中
- 导航链接 Pin Sans 16px
- 活跃状态使用 Pinterest 红色点缀
### 图片处理
- 图钉式瀑布流网格（Pinterest 标志性版面）
- 图片圆角：12px–20px
- 摄影作为主要内容——每个图钉都是一张图片
- 精选图片容器有 8px 白色厚边框
## 5. 版面原则
### 间距系统
- 基础单位：8px
- 刻度：4px、6px、7px、8px、10px、11px、12px、16px、18px、20px、22px、24px、32px、80px、100px
- 大跳跃：32px → 80px → 100px 用于区块间距
### 网格与容器
- 图钉内容使用瀑布流网格（标志性版面）
- 居中内容区块，充裕的最大宽度
- 全宽深色页脚
- 搜索栏作为主要导航元素
### 留白哲学
- **灵感密度**：瀑布流网格将图钉紧密排列——内容密度本身就是价值主张。留白存在于区块之间，而非网格内部。
- **上方呼吸，下方密集**：主角/特色区块获得充裕的内边距；图钉网格紧凑而沉浸。
### 圆角体系
- 标准（12px）：小卡片，链接
- 按钮（16px）：按钮、输入框、中等卡片
- 舒适（20px）：特色卡片
- 大（28px）：大容器
- 区块（32px）：标签元素，大面板
- 主角（40px）：主角容器，大型特色块
- 圆形（50%）：操作按钮，标签指示器
## 6. 层次与阴影
| 层级 | 处理方式 | 用途 |
|-------|-----------|-----|
| 扁平（0 级）| 无阴影 | 默认——图钉依靠内容而非阴影 |
| 微妙（1 级）| 最小阴影（来自 token） | 悬浮叠层，下拉菜单 |
| 焦点（无障碍）| `--sema-color-border-focus-outer-default` 环 | 焦点状态 |
**阴影哲学**：Pinterest 使用极少的阴影。瀑布流网格依靠内容（摄影）创造视觉趣味，而非依靠提升效果。深度来自表面颜色的温暖感和容器的慷慨圆角。
## 7. 应做与不应做
### 应做
- 使用暖中性色（`#e5e5e0`、`#e0e0d9`、`#91918c`）——橄榄/沙色调是品牌标识
- 仅将 Pinterest 红（`#e60023`）用于主要 CTA——它醒目且唯一
- 专一使用 Pin Sans——一种字体统揽一切
- 应用慷慨的圆角：按钮/输入框 16px，卡片 20px+
- 保持瀑布流网格的密集感——内容密度就是价值
- 使用暖色徽章背景（`hsla(60,20%,98%,.5)`）实现微妙的暖色调
- 主要文字使用 `#211922`（梅黑色）——比纯黑更温暖
### 不应做
- 不要使用冷灰色中性色——始终保持暖色/橄榄色调
- 不要使用纯黑（`#000000`）作为主要文字——使用梅黑色（`#211922`）
- 不要使用药丸形按钮——16px 圆角是圆润的，但不是药丸形
- 不要添加厚重阴影——Pinterest 设计上是扁平的，深度来自内容
- 不要在卡片上使用小圆角（<12px）——慷慨的圆角是核心
- 不要引入额外的品牌色——红色+暖中性色就是完整的色彩体系
- 不要使用细字重——Pin Sans 最低 400
## 8. 响应式行为
### 断点
| 名称 | 宽度 | 主要变化 |
|------|-------|-------------|
| 移动端 | <576px | 单列，紧凑布局 |
| 大移动端 | 576–768px | 2 列图钉网格 |
| 平板 | 768–890px | 扩展网格 |
| 小桌面 | 890–1312px | 标准瀑布流网格 |
| 桌面 | 1312–1440px | 完整布局 |
| 大桌面 | 1440–1680px | 扩展网格列 |
| 超宽屏 | >1680px | 最大网格密度 |
### 折叠策略
- 图钉网格：5+ 列 → 3 → 2 → 1
- 导航：搜索栏 + 图标 → 简化移动端导航
- 特色区块：并排 → 堆叠
- 主角：70px → 按比例缩小
- 页脚：深色多列 → 堆叠
## 9. 智能代理提示指南
### 快速颜色参考
- 品牌色：Pinterest 红（`#e60023`）
- 背景色：白色（`#ffffff`）
- 文字色：梅黑色（`#211922`）
- 次要文字：橄榄灰（`#62625b`）
- 按钮表面：沙灰色（`#e5e5e0`）
- 边框色：暖银色（`#91918c`）
- 焦点色：焦点蓝（`#435ee5`）
### 示例组件提示
- "创建一个主角区块：白色背景。标题使用 70px Pin Sans 字重 600，梅黑色（#211922）。红色 CTA 按钮（#e60023，16px 圆角，6px 14px 内边距）。次要沙色按钮（#e5e5e0，16px 圆角）。"
- "设计一个图钉卡片：白色背景，16px 圆角，无阴影。摄影填充顶部，下方 16px Pin Sans 字重 400 描述文字，颜色 #62625b。"
- "制作一个圆形操作按钮：#e0e0d9 背景，50% 圆角，#211922 图标。"
- "创建一个输入框：白色背景，1px solid #91918c，16px 圆角，11px 15px 内边距。焦点：通过语义 token 实现蓝色轮廓。"
- "设计深色页脚：#33332e 背景。白色 Pinterest 手写体 logo。12px Pin Sans 链接，颜色 #91918c。"
### 迭代指南
1. 随处使用暖中性色——橄榄/沙灰色，绝不用冷钢色
2. Pinterest 红仅用于 CTA——醒目且唯一
3. 按钮/输入框 16px 圆角，卡片 20px+——慷慨但非药丸形
4. Pin Sans 是唯一字体——UI 紧凑 12px，展示 70px
5. 摄影承载设计——UI 保持温暖而简约
6. 文字使用梅黑色（#211922）——比纯黑更温暖
open-design/design-systems/pinterest/DESIGN.md
+233
View File
@@ -0,0 +1,233 @@
# Design System Inspired by Pinterest
> Category: Media & Consumer
> Visual discovery. Red accent, masonry grid, image-first.
## 1. Visual Theme & Atmosphere
Pinterest's website is a warm, inspiration-driven canvas that treats visual discovery like a lifestyle magazine. The design operates on a soft, slightly warm white background with Pinterest Red (`#e60023`) as the singular, bold brand accent. Unlike the cool blues of most tech platforms, Pinterest's neutral scale has a distinctly warm undertone — grays lean toward olive/sand (`#91918c`, `#62625b`, `#e5e5e0`) rather than cool steel, creating a cozy, craft-like atmosphere that invites browsing.
The typography uses Pin Sans — a custom proprietary font with a broad fallback stack including Japanese fonts, reflecting Pinterest's global reach. At display scale (70px, weight 600), Pin Sans creates large, inviting headlines. At smaller sizes, the system is compact: buttons at 12px, captions at 12–14px. The CSS variable naming system (`--comp-*`, `--sema-*`, `--base-*`) reveals a sophisticated three-tier design token architecture: component-level, semantic-level, and base-level tokens.
What distinguishes Pinterest is its generous border-radius system (12px–40px, plus 50% for circles) and warm-tinted button backgrounds. The secondary button (`#e5e5e0`) has a distinctly warm, sand-like tone rather than cold gray. The primary red button uses 16px radius — rounded but not pill-shaped. Combined with warm badge backgrounds (`hsla(60,20%,98%,.5)` — a subtle yellow-warm wash) and photography-dominant layouts, the result is a design that feels handcrafted and personal, not corporate and sterile.
**Key Characteristics:**
- Warm white canvas with olive/sand-toned neutrals — cozy, not clinical
- Pinterest Red (`#e60023`) as singular bold accent — never subtle, always confident
- Pin Sans custom font with global fallback stack (including CJK)
- Three-tier token architecture: `--comp-*` / `--sema-*` / `--base-*`
- Warm secondary surfaces: sand gray (`#e5e5e0`), warm badge (`hsla(60,20%,98%,.5)`)
- Generous border-radius: 16px standard, up to 40px for large containers
- Photography-first content — pins/images are the primary visual element
- Dark near-purple text (`#211922`) — warm, with a hint of plum
## 2. Color Palette & Roles
### Primary Brand
- **Pinterest Red** (`#e60023`): Primary CTA, brand accent — bold, confident red
- **Green 700** (`#103c25`): `--base-color-green-700`, success/nature accent
- **Green 700 Hover** (`#0b2819`): `--base-color-hover-green-700`, pressed green
### Text
- **Plum Black** (`#211922`): Primary text — warm near-black with plum undertone
- **Black** (`#000000`): Secondary text, button text
- **Olive Gray** (`#62625b`): Secondary descriptions, muted text
- **Warm Silver** (`#91918c`): `--comp-button-color-text-transparent-disabled`, disabled text, input borders
- **White** (`#ffffff`): Text on dark/colored surfaces
### Interactive
- **Focus Blue** (`#435ee5`): `--comp-button-color-border-focus-outer-transparent`, focus rings
- **Performance Purple** (`#6845ab`): `--sema-color-hover-icon-performance-plus`, performance features
- **Recommendation Purple** (`#7e238b`): `--sema-color-hover-text-recommendation`, AI recommendation
- **Link Blue** (`#2b48d4`): Link text color
- **Facebook Blue** (`#0866ff`): `--facebook-background-color`, social login
- **Pressed Blue** (`#617bff`): `--base-color-pressed-blue-200`, pressed state
### Surface & Border
- **Sand Gray** (`#e5e5e0`): Secondary button background — warm, craft-like
- **Warm Light** (`#e0e0d9`): Circular button backgrounds, badges
- **Warm Wash** (`hsla(60, 20%, 98%, 0.5)`): `--comp-badge-color-background-wash-light`, subtle warm badge bg
- **Fog** (`#f6f6f3`): Light surface (at 50% opacity)
- **Border Disabled** (`#c8c8c1`): `--sema-color-border-disabled`, disabled borders
- **Hover Gray** (`#bcbcb3`): `--base-color-hover-grayscale-150`, hover border
- **Dark Surface** (`#33332e`): Dark section backgrounds
### Semantic
- **Error Red** (`#9e0a0a`): Checkbox/form error states
## 3. Typography Rules
### Font Family
- **Primary**: `Pin Sans`, fallbacks: `-apple-system, system-ui, Segoe UI, Roboto, Oxygen-Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Arial`
### Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Display Hero | Pin Sans | 70px (4.38rem) | 600 | normal | normal | Maximum impact |
| Section Heading | Pin Sans | 28px (1.75rem) | 700 | normal | -1.2px | Negative tracking |
| Body | Pin Sans | 16px (1.00rem) | 400 | 1.40 | normal | Standard reading |
| Caption Bold | Pin Sans | 14px (0.88rem) | 700 | normal | normal | Strong metadata |
| Caption | Pin Sans | 12px (0.75rem) | 400–500 | 1.50 | normal | Small text, tags |
| Button | Pin Sans | 12px (0.75rem) | 400 | normal | normal | Button labels |
### Principles
- **Compact type scale**: The range is 12px–70px with a dramatic jump — most functional text is 12–16px, creating a dense, app-like information hierarchy.
- **Warm weight distribution**: 600–700 for headings, 400–500 for body. No ultra-light weights — the type always feels substantial.
- **Negative tracking on headings**: -1.2px on 28px headings creates cozy, intimate section titles.
- **Single font family**: Pin Sans handles everything — no secondary display or monospace font detected.
## 4. Component Stylings
### Buttons
**Primary Red**
- Background: `#e60023` (Pinterest Red)
- Text: `#000000` (black — unusual choice for contrast on red)
- Padding: 6px 14px
- Radius: 16px (generously rounded, not pill)
- Border: `2px solid rgba(255, 255, 255, 0)` (transparent)
- Focus: semantic border + outline via CSS variables
**Secondary Sand**
- Background: `#e5e5e0` (warm sand gray)
- Text: `#000000`
- Padding: 6px 14px
- Radius: 16px
- Focus: same semantic border system
**Circular Action**
- Background: `#e0e0d9` (warm light)
- Text: `#211922` (plum black)
- Radius: 50% (circle)
- Use: Pin actions, navigation controls
**Ghost / Transparent**
- Background: transparent
- Text: `#000000`
- No border
- Use: Tertiary actions
### Cards & Containers
- Photography-first pin cards with generous radius (12px–20px)
- No traditional box-shadow on most cards
- White or warm fog backgrounds
- 8px white thick border on some image containers
### Inputs
- Email input: white background, `1px solid #91918c` border, 16px radius, 11px 15px padding
- Focus: semantic border + outline system via CSS variables
### Navigation
- Clean header on white or warm background
- Pinterest logo + search bar centered
- Pin Sans 16px for nav links
- Pinterest Red accents for active states
### Image Treatment
- Pin-style masonry grid (signature Pinterest layout)
- Rounded corners: 12px–20px on images
- Photography as primary content — every pin is an image
- Thick white borders (8px) on featured image containers
## 5. Layout Principles
### Spacing System
- Base unit: 8px
- Scale: 4px, 6px, 7px, 8px, 10px, 11px, 12px, 16px, 18px, 20px, 22px, 24px, 32px, 80px, 100px
- Large jumps: 32px → 80px → 100px for section spacing
### Grid & Container
- Masonry grid for pin content (signature layout)
- Centered content sections with generous max-width
- Full-width dark footer
- Search bar as primary navigation element
### Whitespace Philosophy
- **Inspiration density**: The masonry grid packs pins tightly — the content density IS the value proposition. Whitespace exists between sections, not within the grid.
- **Breathing above, density below**: Hero/feature sections get generous padding; the pin grid is compact and immersive.
### Border Radius Scale
- Standard (12px): Small cards, links
- Button (16px): Buttons, inputs, medium cards
- Comfortable (20px): Feature cards
- Large (28px): Large containers
- Section (32px): Tab elements, large panels
- Hero (40px): Hero containers, large feature blocks
- Circle (50%): Action buttons, tab indicators
## 6. Depth & Elevation
| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (Level 0) | No shadow | Default — pins rely on content, not shadow |
| Subtle (Level 1) | Minimal shadow (from tokens) | Elevated overlays, dropdowns |
| Focus (Accessibility) | `--sema-color-border-focus-outer-default` ring | Focus states |
**Shadow Philosophy**: Pinterest uses minimal shadows. The masonry grid relies on content (photography) to create visual interest rather than elevation effects. Depth comes from the warmth of surface colors and the generous rounding of containers.
## 7. Do's and Don'ts
### Do
- Use warm neutrals (`#e5e5e0`, `#e0e0d9`, `#91918c`) — the warm olive/sand tone is the identity
- Apply Pinterest Red (`#e60023`) only for primary CTAs — it's bold and singular
- Use Pin Sans exclusively — one font for everything
- Apply generous border-radius: 16px for buttons/inputs, 20px+ for cards
- Keep the masonry grid dense — content density is the value
- Use warm badge backgrounds (`hsla(60,20%,98%,.5)`) for subtle warm washes
- Use `#211922` (plum black) for primary text — it's warmer than pure black
### Don't
- Don't use cool gray neutrals — always warm/olive-toned
- Don't use pure black (`#000000`) as primary text — use plum black (`#211922`)
- Don't use pill-shaped buttons — 16px radius is rounded but not pill
- Don't add heavy shadows — Pinterest is flat by design, depth from content
- Don't use small border-radius (<12px) on cards — the generous rounding is core
- Don't introduce additional brand colors — red + warm neutrals is the complete palette
- Don't use thin font weights — Pin Sans at 400 minimum
## 8. Responsive Behavior
### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <576px | Single column, compact layout |
| Mobile Large | 576–768px | 2-column pin grid |
| Tablet | 768–890px | Expanded grid |
| Desktop Small | 890–1312px | Standard masonry grid |
| Desktop | 1312–1440px | Full layout |
| Large Desktop | 1440–1680px | Expanded grid columns |
| Ultra-wide | >1680px | Maximum grid density |
### Collapsing Strategy
- Pin grid: 5+ columns → 3 → 2 → 1
- Navigation: search bar + icons → simplified mobile nav
- Feature sections: side-by-side → stacked
- Hero: 70px → scales down proportionally
- Footer: dark multi-column → stacked
## 9. Agent Prompt Guide
### Quick Color Reference
- Brand: Pinterest Red (`#e60023`)
- Background: White (`#ffffff`)
- Text: Plum Black (`#211922`)
- Secondary text: Olive Gray (`#62625b`)
- Button surface: Sand Gray (`#e5e5e0`)
- Border: Warm Silver (`#91918c`)
- Focus: Focus Blue (`#435ee5`)
### Example Component Prompts
- "Create a hero: white background. Headline at 70px Pin Sans weight 600, plum black (#211922). Red CTA button (#e60023, 16px radius, 6px 14px padding). Secondary sand button (#e5e5e0, 16px radius)."
- "Design a pin card: white background, 16px radius, no shadow. Photography fills top, 16px Pin Sans weight 400 description below in #62625b."
- "Build a circular action button: #e0e0d9 background, 50% radius, #211922 icon."
- "Create an input field: white background, 1px solid #91918c, 16px radius, 11px 15px padding. Focus: blue outline via semantic tokens."
- "Design the dark footer: #33332e background. Pinterest script logo in white. 12px Pin Sans links in #91918c."
### Iteration Guide
1. Warm neutrals everywhere — olive/sand grays, never cool steel
2. Pinterest Red for CTAs only — bold and singular
3. 16px radius on buttons/inputs, 20px+ on cards — generous but not pill
4. Pin Sans is the only font — compact at 12px for UI, 70px for display
5. Photography carries the design — the UI stays warm and minimal
6. Plum black (#211922) for text — warmer than pure black
open-design/design-systems/pinterest/USAGE.md
+32
View File
@@ -0,0 +1,32 @@
# Pinterest 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
- Warm white canvas with olive/sand-toned neutrals — cozy, not clinical
- Pinterest Red (`#e60023`) as singular bold accent — never subtle, always confident
- Pin Sans custom font with global fallback stack (including CJK)
- Three-tier token architecture: `--comp-*` / `--sema-*` / `--base-*`
## Do
- Preserve the schema token names exactly so cross-brand switching stays reliable.
- Use `--accent` for primary actions, links, focus states, and one clear focal element.
- Reuse component groups from `components.manifest.json` before inventing new controls.
- Treat `source/` files as audit evidence for the bundled fixture backfill.
## Avoid
- Avoid raw hex values outside the copied `:root` token block.
- Avoid redefining Tailwind or design-token values independently of `tokens.css`.
- Avoid claiming original upstream source evidence; this package is based on the curated bundled fixture.
- Avoid adding new component recipes that are not represented in `components.html` or `DESIGN.md`.
open-design/design-systems/pinterest/components.html
+865
View File
@@ -0,0 +1,865 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Pinterest — reference components</title>
<meta
name="description"
content="Reference fixture for design-systems/pinterest. Warm visual-
discovery canvas, olive/sand neutrals, Pinterest Red (#e60023) as
the single bold accent, Pin Sans across the entire hierarchy,
generous 12–28px radii, photography-first masonry layouts."
/>
<style>
:root {
--bg: #ffffff;
--surface: #f6f6f3;
--surface-warm: #e5e5e0;
--fg: #211922;
--fg-2: #000000;
--muted: #62625b;
--meta: #91918c;
--border: #c8c8c1;
--border-soft: #e0e0d9;
--accent: #e60023;
--accent-on: #000000;
--accent-hover: color-mix(in oklab, var(--accent), black 8%);
--accent-active: color-mix(in oklab, var(--accent), black 14%);
--success: #103c25;
--warn: #c47700;
--danger: #9e0a0a;
--font-display:
"Pin Sans", -apple-system, system-ui, "Segoe UI", Roboto, "Oxygen-Sans",
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", Ubuntu, Cantarell,
"Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica,
"ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", Arial,
sans-serif;
--font-body:
"Pin Sans", -apple-system, system-ui, "Segoe UI", Roboto, "Oxygen-Sans",
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", Ubuntu, Cantarell,
"Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica,
"ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", Arial,
sans-serif;
--font-mono:
ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco,
Consolas, monospace;
--text-xs: 12px;
--text-sm: 14px;
--text-base: 16px;
--text-lg: 18px;
--text-xl: 22px;
--text-2xl: 28px;
--text-3xl: 44px;
--text-4xl: 70px;
--leading-body: 1.4;
--leading-tight: 1.15;
--tracking-display: -0.02em;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-12: 48px;
--section-y-desktop: 80px;
--section-y-tablet: 48px;
--section-y-phone: 32px;
--radius-sm: 12px;
--radius-md: 16px;
--radius-lg: 28px;
--radius-pill: 9999px;
--elev-flat: none;
--elev-ring: 0 0 0 1px var(--border);
--elev-raised: 0 4px 16px rgba(33, 25, 34, 0.06);
--focus-ring: 0 0 0 3px color-mix(in oklab, #435ee5, transparent 70%);
--motion-fast: 150ms;
--motion-base: 200ms;
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--container-max: 1280px;
--container-gutter-desktop: 32px;
--container-gutter-tablet: 24px;
--container-gutter-phone: 16px;
}
/* ─── Reset ─────────────────────────────────────────────── */
*, *::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);
font-weight: 400;
line-height: var(--leading-body);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ─── Layout primitives ─────────────────────────────────── */
.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-soft); }
@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 — Pin Sans, plum-black, friendly weights ─ */
h1, h2, h3 {
font-family: var(--font-display);
line-height: var(--leading-tight);
color: var(--fg);
margin: 0;
}
h1 {
font-size: var(--text-4xl);
font-weight: 600;
letter-spacing: var(--tracking-display);
}
h2 {
font-size: var(--text-2xl);
font-weight: 700;
letter-spacing: var(--tracking-display);
}
h3 {
font-size: var(--text-lg);
font-weight: 700;
line-height: 1.3;
}
p { margin: 0; }
.lede {
font-size: var(--text-base);
line-height: var(--leading-body);
color: var(--muted);
}
.body-muted { color: var(--muted); }
.body-meta { color: var(--meta); font-size: var(--text-sm); }
.body-sm { font-size: var(--text-sm); }
.eyebrow {
font-family: var(--font-display);
font-size: var(--text-xs);
font-weight: 700;
line-height: 1.3;
color: var(--accent);
text-transform: uppercase;
letter-spacing: 0.1em;
}
.stack-2 > * + * { margin-block-start: var(--space-2); }
.stack-3 > * + * { margin-block-start: var(--space-3); }
.stack-4 > * + * { margin-block-start: var(--space-4); }
.stack-6 > * + * { margin-block-start: var(--space-6); }
/* ─── Buttons — 16px radius, generous but never pill ────── */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: 12px 20px;
border: 2px solid transparent;
border-radius: var(--radius-md);
font-family: var(--font-display);
font-weight: 700;
font-size: var(--text-sm);
line-height: 1;
cursor: pointer;
text-decoration: none;
transition:
background-color var(--motion-fast) var(--ease-standard),
color var(--motion-fast) var(--ease-standard),
border-color var(--motion-fast) var(--ease-standard),
box-shadow var(--motion-fast) var(--ease-standard);
}
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn:active { transform: translateY(1px); }
/* Primary: Pinterest Red — DESIGN.md §4 carries BLACK text on red */
.btn-primary {
background: var(--accent);
color: var(--accent-on);
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:active { background: var(--accent-active); }
/* Secondary: warm Sand Gray — Pinterest's signature secondary surface */
.btn-secondary {
background: var(--surface-warm);
color: var(--fg-2);
}
.btn-secondary:hover {
background: color-mix(in oklab, var(--surface-warm), black 6%);
}
/* Ghost / transparent — DESIGN.md §4 tertiary action */
.btn-ghost {
background: transparent;
color: var(--fg-2);
}
.btn-ghost:hover {
background: color-mix(in oklab, var(--surface-warm), transparent 50%);
}
/* Circular action — DESIGN.md §4: --radius-pill, warm light bg */
.btn-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
border: none;
border-radius: var(--radius-pill);
background: var(--border-soft);
color: var(--fg);
cursor: pointer;
transition:
background-color var(--motion-fast) var(--ease-standard),
transform var(--motion-fast) var(--ease-standard);
}
.btn-icon:hover {
background: color-mix(in oklab, var(--border-soft), black 8%);
}
.btn-icon:active { transform: scale(0.94); }
.btn-icon:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn-icon svg { width: 18px; height: 18px; }
/* ─── Inputs — 16px radius, Warm Silver border ──────────── */
.field {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.field label {
font-family: var(--font-display);
font-size: var(--text-sm);
font-weight: 700;
color: var(--fg);
}
.field input {
padding: 11px 15px;
border-radius: var(--radius-md);
border: 1px solid var(--meta);
background: var(--bg);
color: var(--fg);
font-family: inherit;
font-size: var(--text-base);
outline: none;
transition:
border-color var(--motion-fast) var(--ease-standard),
box-shadow var(--motion-fast) var(--ease-standard);
}
.field input::placeholder { color: var(--meta); }
.field input:focus-visible {
border-color: var(--fg);
box-shadow: var(--focus-ring);
}
.field-help {
font-size: var(--text-xs);
color: var(--muted);
}
/* ─── Cards — Pinterest pin shape, soft warm shadow ─────── */
.pin {
position: relative;
display: flex;
flex-direction: column;
background: var(--surface);
border-radius: var(--radius-lg);
overflow: hidden;
transition:
transform var(--motion-base) var(--ease-standard),
box-shadow var(--motion-base) var(--ease-standard);
}
.pin:hover {
transform: translateY(-2px);
box-shadow: var(--elev-raised);
}
.pin-photo {
position: relative;
aspect-ratio: 4 / 5;
background: var(--surface-warm);
overflow: hidden;
}
.pin-photo::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(
ellipse at 30% 25%,
color-mix(in oklab, var(--accent), transparent 70%) 0%,
transparent 55%
),
linear-gradient(
150deg,
var(--surface-warm) 0%,
var(--border-soft) 45%,
var(--surface) 100%
);
}
.pin-photo.alt-2::before {
background:
radial-gradient(
ellipse at 70% 75%,
color-mix(in oklab, #103c25, transparent 60%) 0%,
transparent 60%
),
linear-gradient(
210deg,
var(--border-soft) 0%,
var(--surface-warm) 60%,
var(--surface) 100%
);
}
.pin-photo.alt-3::before {
background:
radial-gradient(
ellipse at 50% 35%,
color-mix(in oklab, var(--accent), transparent 80%) 0%,
transparent 50%
),
linear-gradient(
330deg,
var(--surface) 0%,
var(--surface-warm) 45%,
var(--border-soft) 100%
);
}
.pin-overlay {
position: absolute;
top: var(--space-3);
right: var(--space-3);
z-index: 1;
}
.pin-badge {
position: absolute;
bottom: var(--space-3);
left: var(--space-3);
z-index: 1;
}
.pin-meta {
padding: var(--space-4) var(--space-5) var(--space-5);
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.pin-title {
font-family: var(--font-display);
font-size: var(--text-base);
font-weight: 700;
color: var(--fg);
line-height: 1.3;
}
.pin-subtitle {
font-size: var(--text-sm);
color: var(--muted);
line-height: var(--leading-body);
}
.pin-author {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-xs);
color: var(--muted);
margin-block-start: var(--space-2);
}
.pin-avatar {
width: 24px;
height: 24px;
border-radius: var(--radius-pill);
background: var(--border-soft);
color: var(--fg);
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-size: 10px;
font-weight: 700;
flex-shrink: 0;
}
/* ─── Badges ────────────────────────────────────────────── */
.badge {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 5px var(--space-3);
font-family: var(--font-display);
font-size: var(--text-xs);
font-weight: 700;
line-height: 1.2;
border-radius: var(--radius-pill);
}
.badge-soft {
background: hsla(60, 20%, 98%, 0.85);
color: var(--fg);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.badge-warm {
background: var(--surface-warm);
color: var(--fg);
}
.badge-status {
background: color-mix(in oklab, var(--success), transparent 88%);
color: var(--success);
}
.badge-dot {
width: 6px;
height: 6px;
border-radius: var(--radius-pill);
background: currentColor;
}
/* ─── Links ────────────────────────────────────────────── */
a {
color: var(--fg);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-color: var(--border);
transition: text-decoration-color var(--motion-fast) var(--ease-standard);
}
a:hover { text-decoration-color: var(--fg); }
a:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
border-radius: var(--radius-sm);
}
/* ─── Kbd ─────────────────────────────────────────────── */
kbd {
display: inline-block;
font-family: var(--font-mono);
font-size: var(--text-xs);
padding: 2px 6px;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
background: var(--surface);
color: var(--muted);
line-height: 1.2;
font-variant-numeric: tabular-nums;
}
/* ─── Hero / nav / grids ───────────────────────────────── */
.nav-row {
display: flex;
align-items: center;
justify-content: space-between;
padding-block: var(--space-4);
gap: var(--space-4);
}
.nav-logo {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-display);
font-size: var(--text-lg);
font-weight: 700;
color: var(--accent);
letter-spacing: var(--tracking-display);
text-decoration: none;
}
.nav-logo svg { width: 24px; height: 24px; }
.nav-search {
flex: 1;
max-width: 540px;
display: flex;
align-items: center;
gap: var(--space-2);
padding: 10px var(--space-4);
background: var(--surface);
border-radius: var(--radius-pill);
border: 1px solid transparent;
transition: border-color var(--motion-fast) var(--ease-standard);
}
.nav-search:focus-within { border-color: var(--fg); box-shadow: var(--focus-ring); }
.nav-search svg { width: 16px; height: 16px; color: var(--muted); flex-shrink: 0; }
.nav-search input {
flex: 1;
border: none;
background: transparent;
outline: none;
font: inherit;
color: var(--fg);
min-width: 0;
}
.nav-search input::placeholder { color: var(--muted); }
.nav-cluster {
display: flex;
align-items: center;
gap: var(--space-2);
}
.hero-grid {
display: grid;
grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
gap: var(--space-12);
align-items: start;
}
@media (max-width: 1023px) {
.hero-grid { grid-template-columns: 1fr; gap: var(--space-8); }
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
margin-block-start: var(--space-6);
}
.hero-aside {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-3);
align-content: start;
}
.hero-aside .pin:nth-child(1) { transform: translateY(0); }
.hero-aside .pin:nth-child(2) { transform: translateY(var(--space-8)); }
.pins-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-5);
margin-block-start: var(--space-8);
align-items: start;
}
.pins-grid .pin:nth-child(2) { margin-block-start: var(--space-6); }
.pins-grid .pin:nth-child(3) { margin-block-start: var(--space-12); }
@media (max-width: 1023px) {
.pins-grid { grid-template-columns: repeat(2, 1fr); }
.pins-grid .pin:nth-child(3) { margin-block-start: 0; }
}
@media (max-width: 639px) {
.pins-grid { grid-template-columns: 1fr; gap: var(--space-4); }
.pins-grid .pin:nth-child(2),
.pins-grid .pin:nth-child(3) { margin-block-start: 0; }
}
.form-row {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
gap: var(--space-12);
align-items: start;
}
@media (max-width: 1023px) {
.form-row { grid-template-columns: 1fr; }
}
.form {
display: flex;
flex-direction: column;
gap: var(--space-4);
padding: var(--space-6);
background: var(--surface);
border-radius: var(--radius-lg);
}
.form-actions {
display: flex;
gap: var(--space-3);
flex-wrap: wrap;
margin-block-start: var(--space-2);
}
.form-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
flex-wrap: wrap;
}
.icon { width: 16px; height: 16px; flex-shrink: 0; }
</style>
</head>
<body>
<main class="container">
<nav class="nav-row" aria-label="Primary">
<a href="#" class="nav-logo" aria-label="Pinterest">
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<path d="M12 2a10 10 0 0 0-3.6 19.32c-.07-.74-.13-1.86.03-2.66.14-.71 1.06-4.52 1.06-4.52s-.27-.54-.27-1.35c0-1.27.74-2.21 1.66-2.21.78 0 1.16.59 1.16 1.29 0 .79-.5 1.96-.76 3.05-.21.91.46 1.65 1.36 1.65 1.63 0 2.88-1.72 2.88-4.2 0-2.2-1.58-3.74-3.83-3.74-2.61 0-4.14 1.96-4.14 3.98 0 .79.3 1.63.68 2.09.08.09.09.17.06.27-.07.27-.21.85-.24.97-.04.16-.13.19-.29.12-1.1-.51-1.78-2.11-1.78-3.4 0-2.77 2.01-5.31 5.81-5.31 3.05 0 5.42 2.17 5.42 5.08 0 3.03-1.91 5.47-4.57 5.47-.89 0-1.73-.46-2.02-1.01l-.55 2.09c-.2.77-.74 1.73-1.1 2.32A10 10 0 1 0 12 2z" />
</svg>
Pinterest
</a>
<label class="nav-search" aria-label="Search Pinterest">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
aria-hidden="true">
<circle cx="11" cy="11" r="7" />
<path d="M21 21l-4.3-4.3" />
</svg>
<input type="search" placeholder="Search for ideas" />
</label>
<div class="nav-cluster">
<button class="btn-icon" type="button" aria-label="Notifications">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
aria-hidden="true">
<path d="M18 16v-5a6 6 0 0 0-12 0v5l-2 2h16z" />
<path d="M10 20a2 2 0 0 0 4 0" />
</svg>
</button>
<button class="btn-icon" type="button" aria-label="Messages">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
aria-hidden="true">
<path d="M21 12a8 8 0 1 1-3.3-6.5L21 4l-1.5 3.5A7.9 7.9 0 0 1 21 12z" />
</svg>
</button>
</div>
</nav>
<section data-od-id="hero">
<div class="hero-grid">
<div class="stack-4">
<p class="eyebrow">Reference fixture · pinterest</p>
<h1 style="max-width: 14ch">Find the next thing you love.</h1>
<p class="lede" style="max-width: 56ch">
A warm-canvas token system distilled from Pinterest's 2026 brand —
Pin Sans across the entire hierarchy, olive/sand neutrals that
feel handcrafted, and Pinterest Red used once per screen as the
only confident accent. The masonry below uses the same
<code style="font-family: var(--font-mono); font-size: var(--text-sm)">:root</code>
block agents paste into every artifact.
</p>
<div class="hero-actions">
<a href="./tokens.css" class="btn btn-primary">
Explore tokens
<svg class="icon" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round"
aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
</a>
<a href="./DESIGN.md" class="btn btn-secondary">Read the brand</a>
<button type="button" class="btn btn-ghost">Save for later</button>
</div>
<div class="form-meta" style="margin-block-start: var(--space-6)">
<span class="badge badge-status">
<span class="badge-dot" aria-hidden="true"></span>
56 tokens passing schema
</span>
<span class="body-meta">
Press <kbd>⌘</kbd> <kbd>K</kbd> to jump to the token grep.
</span>
</div>
</div>
<aside class="hero-aside" aria-label="Sample pins">
<article class="pin">
<div class="pin-photo">
<button class="btn-icon pin-overlay" type="button"
aria-label="Save this pin"
style="background: var(--accent); color: var(--accent-on)">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2.25" stroke-linecap="round"
stroke-linejoin="round" aria-hidden="true">
<path d="M12 5v14M5 12h14" />
</svg>
</button>
<span class="badge badge-soft pin-badge">Inspiration</span>
</div>
<div class="pin-meta">
<p class="pin-title">Soft palettes for warm rooms</p>
<div class="pin-author">
<span class="pin-avatar" aria-hidden="true">SA</span>
Sand &amp; Olive
</div>
</div>
</article>
<article class="pin">
<div class="pin-photo alt-2">
<button class="btn-icon pin-overlay" type="button" aria-label="More">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" aria-hidden="true">
<circle cx="5" cy="12" r="1.4" />
<circle cx="12" cy="12" r="1.4" />
<circle cx="19" cy="12" r="1.4" />
</svg>
</button>
<span class="badge badge-warm pin-badge">Idea pin</span>
</div>
<div class="pin-meta">
<p class="pin-title">Green hour, plum dusk</p>
<div class="pin-author">
<span class="pin-avatar" aria-hidden="true">PL</span>
Plum Studio
</div>
</div>
</article>
</aside>
</div>
</section>
<section data-od-id="features">
<div class="stack-3">
<p class="eyebrow">What the fixture exercises</p>
<h2 style="max-width: 24ch">Three pins, one Pinterest Red, no cool grays.</h2>
<p class="body-muted" style="max-width: 58ch">
Every visible value resolves through
<code style="font-family: var(--font-mono); font-size: var(--text-sm)">var(--*)</code>.
The masonry offsets, the warm card surface, the 16px button radius,
the plum-tinted whisper shadow on hover — all driven by the same
paste block above.
</p>
</div>
<div class="pins-grid">
<article class="pin">
<div class="pin-photo">
<button class="btn-icon pin-overlay" type="button"
aria-label="Save this pin"
style="background: var(--accent); color: var(--accent-on)">
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<path d="M12 21s-7-4.5-7-10a4 4 0 0 1 7-2.7A4 4 0 0 1 19 11c0 5.5-7 10-7 10z" />
</svg>
</button>
<span class="badge badge-soft pin-badge">Warmth as a system</span>
</div>
<div class="pin-meta">
<h3>Olive &amp; sand neutrals</h3>
<p class="pin-subtitle">
Surface, border, and meta colors all lean warm. The page never
feels clinical — even the disabled state carries an olive
undertone.
</p>
<div class="pin-author">
<span class="pin-avatar" aria-hidden="true">OD</span>
<a href="./tokens.css">Inspect the neutrals</a>
</div>
</div>
</article>
<article class="pin">
<div class="pin-photo alt-2">
<button class="btn-icon pin-overlay" type="button"
aria-label="Save this pin"
style="background: var(--accent); color: var(--accent-on)">
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<path d="M12 21s-7-4.5-7-10a4 4 0 0 1 7-2.7A4 4 0 0 1 19 11c0 5.5-7 10-7 10z" />
</svg>
</button>
<span class="badge badge-warm pin-badge">Pin Sans, end to end</span>
</div>
<div class="pin-meta">
<h3>One font, twelve to seventy</h3>
<p class="pin-subtitle">
Pin Sans handles every label — 12px caption, 16px body, 70px
hero. No secondary display family, no monospace beyond
<kbd>⌘</kbd> hints.
</p>
<div class="pin-author">
<span class="pin-avatar" aria-hidden="true">PS</span>
<a href="./DESIGN.md">Read the rule</a>
</div>
</div>
</article>
<article class="pin">
<div class="pin-photo alt-3">
<button class="btn-icon pin-overlay" type="button"
aria-label="Save this pin"
style="background: var(--accent); color: var(--accent-on)">
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<path d="M12 21s-7-4.5-7-10a4 4 0 0 1 7-2.7A4 4 0 0 1 19 11c0 5.5-7 10-7 10z" />
</svg>
</button>
<span class="badge badge-soft pin-badge">Generous geometry</span>
</div>
<div class="pin-meta">
<h3>12, 16, 28 — never pill on text</h3>
<p class="pin-subtitle">
Buttons land at 16px, pin cards at 28px, chips at 12px. Pinterest's
soft geometry sits between sharp and pill — friendly, never
corporate.
</p>
<div class="pin-author">
<span class="pin-avatar" aria-hidden="true">RA</span>
<a href="./tokens.css">Inspect the radii</a>
</div>
</div>
</article>
</div>
</section>
<section data-od-id="form">
<div class="form-row">
<div class="stack-4">
<p class="eyebrow">Form components</p>
<h2 style="max-width: 22ch">Save ideas to your private board.</h2>
<p class="body-muted" style="max-width: 52ch">
Inputs sit on the white canvas with a 1px Warm Silver edge and
the brand's 16px button radius. Focus rings switch to Focus Blue
so they survive both the warm secondary surface and the red CTA —
an accent-tinted ring would vanish into Pinterest Red.
</p>
<p class="body-meta">
Full reference at <a href="./tokens.css">tokens.css</a> ·
brand at <a href="./DESIGN.md">DESIGN.md</a>.
</p>
</div>
<form class="form" onsubmit="event.preventDefault();">
<div class="field">
<label for="email">Email</label>
<input
id="email"
type="email"
placeholder="[email protected]"
autocomplete="email"
required
/>
<p class="field-help">
We&rsquo;ll send a single weekly idea digest — never more.
</p>
</div>
<div class="field">
<label for="board">Board name</label>
<input
id="board"
type="text"
placeholder="Warm rooms, soft light"
autocomplete="off"
/>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Create board</button>
<button type="button" class="btn btn-secondary">Add later</button>
</div>
<div class="form-meta" style="margin-block-start: var(--space-2)">
<span class="badge badge-warm">
<svg viewBox="0 0 24 24" fill="currentColor"
style="width: 12px; height: 12px" aria-hidden="true">
<path d="M12 2l2.9 6.9 7.1.6-5.4 4.7 1.7 7L12 17l-6.3 4.2 1.7-7L2 9.5l7.1-.6z" />
</svg>
Private board
</span>
<span class="body-meta">No one sees this but you.</span>
</div>
</form>
</div>
</section>
</main>
</body>
</html>
open-design/design-systems/pinterest/components.manifest.json
+563
View File
@@ -0,0 +1,563 @@
{
"schemaVersion": 1,
"brandId": "pinterest",
"source": {
"componentsHtml": "components.html",
"tokensCss": "tokens.css"
},
"fixture": {
"title": "Pinterest — reference components",
"description": "Reference fixture for design-systems/pinterest. Warm visual- discovery canvas, olive/sand neutrals, Pinterest Red (#e60023) as the single bold accent, Pin Sans across the entire hierarchy, generous 12–28px radii, photography-first masonry layouts.",
"styleBlockCount": 1,
"selectorCount": 86,
"classCount": 43,
"elementCount": 27
},
"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",
"--accent-active",
"--accent-hover",
"--accent-on",
"--bg",
"--border",
"--border-soft",
"--container-gutter-desktop",
"--container-gutter-phone",
"--container-gutter-tablet",
"--container-max",
"--ease-standard",
"--elev-raised",
"--fg",
"--fg-2",
"--focus-ring",
"--font-body",
"--font-display",
"--font-mono",
"--leading-body",
"--leading-tight",
"--meta",
"--motion-base",
"--motion-fast",
"--muted",
"--radius-lg",
"--radius-md",
"--radius-pill",
"--radius-sm",
"--section-y-desktop",
"--section-y-phone",
"--section-y-tablet",
"--space-12",
"--space-2",
"--space-3",
"--space-4",
"--space-5",
"--space-6",
"--space-8",
"--success",
"--surface",
"--surface-warm",
"--text-2xl",
"--text-4xl",
"--text-base",
"--text-lg",
"--text-sm",
"--text-xs",
"--tracking-display"
],
"unusedDeclared": [
"--danger",
"--elev-flat",
"--elev-ring",
"--space-1",
"--text-3xl",
"--text-xl",
"--warn"
],
"undeclaredReferenced": []
},
"selectors": [
".badge",
".badge-dot",
".badge-soft",
".badge-status",
".badge-warm",
".body-meta",
".body-muted",
".body-sm",
".btn",
".btn-ghost",
".btn-ghost:hover",
".btn-icon",
".btn-icon svg",
".btn-icon:active",
".btn-icon:focus-visible",
".btn-icon:hover",
".btn-primary",
".btn-primary:active",
".btn-primary:hover",
".btn-secondary",
".btn-secondary:hover",
".btn:active",
".btn:focus-visible",
".container",
".eyebrow",
".field",
".field input",
".field input::placeholder",
".field input:focus-visible",
".field label",
".field-help",
".form",
".form-actions",
".form-meta",
".form-row",
".hero-actions",
".hero-aside",
".hero-aside .pin:nth-child(1)",
".hero-aside .pin:nth-child(2)",
".hero-grid",
".icon",
".lede",
".nav-cluster",
".nav-logo",
".nav-logo svg",
".nav-row",
".nav-search",
".nav-search input",
".nav-search input::placeholder",
".nav-search svg",
".nav-search:focus-within",
".pin",
".pin-author",
".pin-avatar",
".pin-badge",
".pin-meta",
".pin-overlay",
".pin-photo",
".pin-photo::before",
".pin-photo.alt-2::before",
".pin-photo.alt-3::before",
".pin-subtitle",
".pin-title",
".pin:hover",
".pins-grid",
".pins-grid .pin:nth-child(2)",
".pins-grid .pin:nth-child(3)",
".stack-2 > * + *",
".stack-3 > * + *",
".stack-4 > * + *",
".stack-6 > * + *",
"*",
"*::after",
"*::before",
"a",
"a:focus-visible",
"a:hover",
"body",
"h1",
"h2",
"h3",
"html",
"kbd",
"p",
"section",
"section + section"
],
"classes": [
"alt-2",
"alt-3",
"badge",
"badge-dot",
"badge-soft",
"badge-status",
"badge-warm",
"body-meta",
"body-muted",
"btn",
"btn-ghost",
"btn-icon",
"btn-primary",
"btn-secondary",
"container",
"eyebrow",
"field",
"field-help",
"form",
"form-actions",
"form-meta",
"form-row",
"hero-actions",
"hero-aside",
"hero-grid",
"icon",
"lede",
"nav-cluster",
"nav-logo",
"nav-row",
"nav-search",
"pin",
"pin-author",
"pin-avatar",
"pin-badge",
"pin-meta",
"pin-overlay",
"pin-photo",
"pin-subtitle",
"pin-title",
"pins-grid",
"stack-3",
"stack-4"
],
"elements": [
"a",
"article",
"aside",
"body",
"button",
"circle",
"code",
"div",
"form",
"h1",
"h2",
"h3",
"head",
"html",
"input",
"kbd",
"label",
"main",
"meta",
"nav",
"p",
"path",
"section",
"span",
"style",
"svg",
"title"
],
"groups": [
{
"id": "buttons",
"label": "Buttons and calls to action",
"present": true,
"selectors": [
".btn",
".btn-ghost",
".btn-ghost:hover",
".btn-icon",
".btn-icon svg",
".btn-icon:active",
".btn-icon:focus-visible",
".btn-icon:hover",
".btn-primary",
".btn-primary:active",
".btn-primary:hover",
".btn-secondary",
".btn-secondary:hover",
".btn:active",
".btn:focus-visible"
],
"classes": [
"btn",
"btn-ghost",
"btn-icon",
"btn-primary",
"btn-secondary"
],
"elements": [
"button"
],
"tokenReferences": [
"--accent-hover",
"--border-soft",
"--ease-standard",
"--fg",
"--fg-2",
"--font-display",
"--motion-fast",
"--radius-md",
"--radius-pill",
"--space-2",
"--surface-warm",
"--text-sm"
]
},
{
"id": "inputs",
"label": "Form fields and controls",
"present": true,
"selectors": [
".field",
".field input",
".field input::placeholder",
".field input:focus-visible",
".field label",
".field-help",
".nav-search input",
".nav-search input::placeholder"
],
"classes": [
"field",
"field-help",
"form",
"form-actions",
"form-meta",
"form-row"
],
"elements": [
"form",
"input",
"label"
],
"tokenReferences": [
"--fg",
"--font-display",
"--meta",
"--muted",
"--text-sm",
"--text-xs"
]
},
{
"id": "cards",
"label": "Cards and panels",
"present": false,
"selectors": [],
"classes": [],
"elements": [],
"tokenReferences": []
},
{
"id": "badges",
"label": "Badges, chips, and status labels",
"present": true,
"selectors": [
".badge",
".badge-dot",
".badge-soft",
".badge-status",
".badge-warm"
],
"classes": [
"badge",
"badge-dot",
"badge-soft",
"badge-status",
"badge-warm"
],
"elements": [],
"tokenReferences": [
"--fg",
"--font-display",
"--radius-pill",
"--space-2",
"--space-3",
"--surface-warm",
"--text-xs"
]
},
{
"id": "links",
"label": "Links and inline actions",
"present": true,
"selectors": [
"a",
"a:focus-visible",
"a:hover"
],
"classes": [],
"elements": [
"a"
],
"tokenReferences": [
"--fg"
]
},
{
"id": "keyboard",
"label": "Keyboard hints",
"present": true,
"selectors": [
"kbd"
],
"classes": [],
"elements": [
"kbd"
],
"tokenReferences": [
"--border",
"--font-mono",
"--muted",
"--radius-sm",
"--surface",
"--text-xs"
]
},
{
"id": "icons",
"label": "Icon slots",
"present": true,
"selectors": [
".icon"
],
"classes": [
"icon"
],
"elements": [
"svg"
],
"tokenReferences": []
},
{
"id": "typography",
"label": "Typography scale and text utilities",
"present": true,
"selectors": [
".body-muted",
".body-sm",
".eyebrow",
"h1",
"h2",
"h3"
],
"classes": [
"body-muted",
"eyebrow"
],
"elements": [
"h1",
"h2",
"h3",
"p"
],
"tokenReferences": [
"--fg",
"--font-display",
"--leading-tight",
"--muted",
"--text-2xl",
"--text-sm",
"--tracking-display"
]
},
{
"id": "layout",
"label": "Layout primitives",
"present": true,
"selectors": [
".container",
".nav-cluster",
".nav-logo",
".nav-logo svg",
".nav-row",
".nav-search",
".nav-search input",
".nav-search input::placeholder",
".nav-search svg",
".nav-search:focus-within",
".stack-2 > * + *",
".stack-3 > * + *",
".stack-4 > * + *",
".stack-6 > * + *",
"section",
"section + section"
],
"classes": [
"container",
"hero-grid",
"pins-grid",
"stack-3",
"stack-4"
],
"elements": [
"main",
"nav",
"section"
],
"tokenReferences": [
"--accent",
"--border-soft",
"--container-gutter-desktop",
"--container-gutter-phone",
"--container-gutter-tablet",
"--container-max",
"--ease-standard",
"--font-display",
"--motion-fast",
"--muted",
"--radius-pill",
"--space-2",
"--space-4",
"--surface",
"--text-lg",
"--tracking-display"
]
}
],
"literals": {
"colorExpressions": 8,
"pixelValues": 40,
"hardcodedFontFamilies": 11
}
}
open-design/design-systems/pinterest/design-tokens.json
+701
View File
@@ -0,0 +1,701 @@
{
"schemaVersion": 1,
"format": "od-design-tokens/v1",
"contract": "TOKEN_SCHEMA",
"generatedAt": "2026-06-06T00:00:00.000Z",
"source": {
"tokensCss": "tokens.css",
"tokenContractReport": "source/token-contract.report.json"
},
"summary": {
"totalTokens": 56,
"declaredTokens": 56,
"sourceBackedTokens": 56,
"sourceBackedA1": 26,
"fallbackTokens": 26,
"aliasTokens": 0,
"layerCounts": {
"A1-identity": 8,
"B-slot": 4,
"A2": 26,
"A1-structure": 18
},
"score": 100,
"grade": "excellent",
"recommendRebuild": false
},
"tokens": [
{
"name": "--bg",
"value": "#ffffff",
"type": "color",
"layer": "A1-identity",
"confidence": "high",
"reason": "Bundled tokens.css declares --bg; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:90"
],
"sourceName": "--bg"
},
{
"name": "--surface",
"value": "#f6f6f3",
"type": "color",
"layer": "A1-identity",
"confidence": "high",
"reason": "Bundled tokens.css declares --surface; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:91"
],
"sourceName": "--surface"
},
{
"name": "--surface-warm",
"value": "#e5e5e0",
"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:92"
],
"sourceName": "--surface-warm"
},
{
"name": "--fg",
"value": "#211922",
"type": "color",
"layer": "A1-identity",
"confidence": "high",
"reason": "Bundled tokens.css declares --fg; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:101"
],
"sourceName": "--fg"
},
{
"name": "--fg-2",
"value": "#000000",
"type": "color",
"layer": "B-slot",
"confidence": "high",
"reason": "Bundled tokens.css declares --fg-2; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:102"
],
"sourceName": "--fg-2"
},
{
"name": "--muted",
"value": "#62625b",
"type": "color",
"layer": "A1-identity",
"confidence": "high",
"reason": "Bundled tokens.css declares --muted; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:103"
],
"sourceName": "--muted"
},
{
"name": "--meta",
"value": "#91918c",
"type": "color",
"layer": "B-slot",
"confidence": "high",
"reason": "Bundled tokens.css declares --meta; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:104"
],
"sourceName": "--meta"
},
{
"name": "--border",
"value": "#c8c8c1",
"type": "color",
"layer": "A1-identity",
"confidence": "high",
"reason": "Bundled tokens.css declares --border; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:112"
],
"sourceName": "--border"
},
{
"name": "--border-soft",
"value": "#e0e0d9",
"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:113"
],
"sourceName": "--border-soft"
},
{
"name": "--accent",
"value": "#e60023",
"type": "color",
"layer": "A1-identity",
"confidence": "high",
"reason": "Bundled tokens.css declares --accent; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:121"
],
"sourceName": "--accent"
},
{
"name": "--accent-on",
"value": "#000000",
"type": "color",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --accent-on; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:122"
],
"sourceName": "--accent-on"
},
{
"name": "--accent-hover",
"value": "color-mix(in oklab, var(--accent), black 8%)",
"type": "color",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --accent-hover; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:123"
],
"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:124"
],
"sourceName": "--accent-active"
},
{
"name": "--success",
"value": "#103c25",
"type": "color",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --success; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:132"
],
"sourceName": "--success"
},
{
"name": "--warn",
"value": "#c47700",
"type": "color",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --warn; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:133"
],
"sourceName": "--warn"
},
{
"name": "--danger",
"value": "#9e0a0a",
"type": "color",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --danger; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:134"
],
"sourceName": "--danger"
},
{
"name": "--font-display",
"value": "\"Pin Sans\", -apple-system, system-ui, \"Segoe UI\", Roboto, \"Oxygen-Sans\", \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", Helvetica, \"ヒラギノ角ゴ Pro W3\", メイリオ, Meiryo, \"ＭＳ Ｐゴシック\", Arial, sans-serif",
"type": "fontFamily",
"layer": "A1-identity",
"confidence": "high",
"reason": "Bundled tokens.css declares --font-display; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:144"
],
"sourceName": "--font-display"
},
{
"name": "--font-body",
"value": "\"Pin Sans\", -apple-system, system-ui, \"Segoe UI\", Roboto, \"Oxygen-Sans\", \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", Helvetica, \"ヒラギノ角ゴ Pro W3\", メイリオ, Meiryo, \"ＭＳ Ｐゴシック\", Arial, sans-serif",
"type": "fontFamily",
"layer": "A1-identity",
"confidence": "high",
"reason": "Bundled tokens.css declares --font-body; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:150"
],
"sourceName": "--font-body"
},
{
"name": "--font-mono",
"value": "ui-monospace, \"SF Mono\", \"JetBrains Mono\", Menlo, Monaco, Consolas, monospace",
"type": "fontFamily",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --font-mono; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:156"
],
"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:167"
],
"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:168"
],
"sourceName": "--text-sm"
},
{
"name": "--text-base",
"value": "16px",
"type": "dimension",
"layer": "A1-structure",
"confidence": "high",
"reason": "Bundled tokens.css declares --text-base; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:169"
],
"sourceName": "--text-base"
},
{
"name": "--text-lg",
"value": "18px",
"type": "dimension",
"layer": "A1-structure",
"confidence": "high",
"reason": "Bundled tokens.css declares --text-lg; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:170"
],
"sourceName": "--text-lg"
},
{
"name": "--text-xl",
"value": "22px",
"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:171"
],
"sourceName": "--text-xl"
},
{
"name": "--text-2xl",
"value": "28px",
"type": "dimension",
"layer": "A1-structure",
"confidence": "high",
"reason": "Bundled tokens.css declares --text-2xl; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:172"
],
"sourceName": "--text-2xl"
},
{
"name": "--text-3xl",
"value": "44px",
"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:173"
],
"sourceName": "--text-3xl"
},
{
"name": "--text-4xl",
"value": "70px",
"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:174"
],
"sourceName": "--text-4xl"
},
{
"name": "--leading-body",
"value": "1.4",
"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:182"
],
"sourceName": "--leading-body"
},
{
"name": "--leading-tight",
"value": "1.15",
"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:183"
],
"sourceName": "--leading-tight"
},
{
"name": "--tracking-display",
"value": "-0.02em",
"type": "dimension",
"layer": "A1-structure",
"confidence": "high",
"reason": "Bundled tokens.css declares --tracking-display; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:184"
],
"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:191"
],
"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:192"
],
"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:193"
],
"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:194"
],
"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:195"
],
"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:196"
],
"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:197"
],
"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:198"
],
"sourceName": "--space-12"
},
{
"name": "--section-y-desktop",
"value": "80px",
"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:205"
],
"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:206"
],
"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:207"
],
"sourceName": "--section-y-phone"
},
{
"name": "--radius-sm",
"value": "12px",
"type": "dimension",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --radius-sm; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:217"
],
"sourceName": "--radius-sm"
},
{
"name": "--radius-md",
"value": "16px",
"type": "dimension",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --radius-md; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:218"
],
"sourceName": "--radius-md"
},
{
"name": "--radius-lg",
"value": "28px",
"type": "dimension",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --radius-lg; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:219"
],
"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:220"
],
"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:228"
],
"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:229"
],
"sourceName": "--elev-ring"
},
{
"name": "--elev-raised",
"value": "0 4px 16px rgba(33, 25, 34, 0.06)",
"type": "shadow",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --elev-raised; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:230"
],
"sourceName": "--elev-raised"
},
{
"name": "--focus-ring",
"value": "0 0 0 3px color-mix(in oklab, #435ee5, transparent 70%)",
"type": "shadow",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --focus-ring; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:238"
],
"sourceName": "--focus-ring"
},
{
"name": "--motion-fast",
"value": "150ms",
"type": "duration",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --motion-fast; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:246"
],
"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:247"
],
"sourceName": "--motion-base"
},
{
"name": "--ease-standard",
"value": "cubic-bezier(0.2, 0, 0, 1)",
"type": "cubicBezier",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --ease-standard; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:248"
],
"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:258"
],
"sourceName": "--container-max"
},
{
"name": "--container-gutter-desktop",
"value": "32px",
"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:259"
],
"sourceName": "--container-gutter-desktop"
},
{
"name": "--container-gutter-tablet",
"value": "24px",
"type": "dimension",
"layer": "A1-structure",
"confidence": "high",
"reason": "Bundled tokens.css declares --container-gutter-tablet; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:260"
],
"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:261"
],
"sourceName": "--container-gutter-phone"
}
]
}
open-design/design-systems/pinterest/manifest.json
+54
View File
@@ -0,0 +1,54 @@
{
"schemaVersion": "od-design-system-project/v1",
"id": "pinterest",
"name": "Pinterest",
"category": "Media & Consumer",
"description": "Bundled OpenDesign package for Pinterest, derived from curated DESIGN.md, tokens.css, and components.html fixtures.",
"source": {
"type": "bundled",
"origin": "OpenDesign curated bundled fixture"
},
"files": {
"design": "DESIGN.md",
"tokens": "tokens.css",
"designTokens": "design-tokens.json",
"tailwind": "tailwind-v4.css",
"components": "components.html"
},
"usage": "USAGE.md",
"componentsManifest": "components.manifest.json",
"importMode": "normalized",
"craft": {
"applies": [],
"suggested": [
"color",
"accessibility-baseline"
],
"exemptions": []
},
"preview": {
"dir": "preview",
"pages": [
{
"path": "preview/colors.html",
"role": "colors",
"title": "Colors"
},
{
"path": "preview/typography.html",
"role": "typography",
"title": "Typography"
},
{
"path": "preview/spacing.html",
"role": "spacing",
"title": "Spacing"
}
]
},
"sourceFiles": {
"evidence": "source/evidence.md",
"tokens": "source/tokens.source.json",
"report": "source/token-contract.report.json"
}
}
open-design/design-systems/pinterest/preview/colors.html
+39
View File
@@ -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>Pinterest colors</title>
<link rel="stylesheet" href="../tokens.css" />
<style>
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); }
main { max-width: var(--container-max); margin: 0 auto; padding: var(--space-12) var(--space-6); }
h1 { margin: 0 0 var(--space-6); font-family: var(--font-display); font-size: var(--text-2xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-4); }
.swatch { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; box-shadow: var(--elev-ring); }
.color { height: 88px; background: var(--value); }
.meta { padding: var(--space-3); color: var(--muted); font-size: var(--text-sm); }
strong { display: block; margin-bottom: var(--space-1); color: var(--fg); }
</style>
</head>
<body>
<main>
<h1>Color roles</h1>
<section class="grid">
<article class="swatch" style="--value: var(--bg)"><div class="color"></div><div class="meta"><strong>Background</strong>--bg</div></article>
<article class="swatch" style="--value: var(--surface)"><div class="color"></div><div class="meta"><strong>Surface</strong>--surface</div></article>
<article class="swatch" style="--value: var(--fg)"><div class="color"></div><div class="meta"><strong>Foreground</strong>--fg</div></article>
<article class="swatch" style="--value: var(--muted)"><div class="color"></div><div class="meta"><strong>Muted</strong>--muted</div></article>
<article class="swatch" style="--value: var(--border)"><div class="color"></div><div class="meta"><strong>Border</strong>--border</div></article>
<article class="swatch" style="--value: var(--accent)"><div class="color"></div><div class="meta"><strong>Accent</strong>--accent</div></article>
<article class="swatch" style="--value: var(--success)"><div class="color"></div><div class="meta"><strong>Success</strong>--success</div></article>
<article class="swatch" style="--value: var(--warn)"><div class="color"></div><div class="meta"><strong>Warning</strong>--warn</div></article>
<article class="swatch" style="--value: var(--danger)"><div class="color"></div><div class="meta"><strong>Danger</strong>--danger</div></article>
</section>
</main>
</body>
</html>
open-design/design-systems/pinterest/preview/spacing.html
+41
View File
@@ -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>Pinterest spacing</title>
<link rel="stylesheet" href="../tokens.css" />
<style>
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); }
main { max-width: var(--container-max); margin: 0 auto; padding: var(--space-12) var(--space-6); }
h1 { margin: 0 0 var(--space-6); font-family: var(--font-display); font-size: var(--text-2xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
.stack { display: grid; gap: var(--space-3); margin-bottom: var(--space-8); }
.row { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: var(--space-4); color: var(--muted); font-size: var(--text-sm); }
.bar { height: var(--space-4); min-width: 2px; background: var(--accent); }
.radii { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-4); }
.radii article { min-height: 88px; display: grid; place-items: center; border: 1px solid var(--border); background: var(--surface); color: var(--fg-2); font-size: var(--text-sm); box-shadow: var(--elev-ring); }
</style>
</head>
<body>
<main>
<h1>Spacing and radius</h1>
<section class="stack">
<div class="row"><span>--space-2</span><div class="bar" style="width: var(--space-2)"></div></div>
<div class="row"><span>--space-4</span><div class="bar" style="width: var(--space-4)"></div></div>
<div class="row"><span>--space-6</span><div class="bar" style="width: var(--space-6)"></div></div>
<div class="row"><span>--space-8</span><div class="bar" style="width: var(--space-8)"></div></div>
<div class="row"><span>--space-12</span><div class="bar" style="width: var(--space-12)"></div></div>
</section>
<section class="radii">
<article style="border-radius: var(--radius-sm)">--radius-sm</article>
<article style="border-radius: var(--radius-md)">--radius-md</article>
<article style="border-radius: var(--radius-lg)">--radius-lg</article>
<article style="border-radius: var(--radius-pill)">--radius-pill</article>
</section>
</main>
</body>
</html>
open-design/design-systems/pinterest/preview/typography.html
+34
View File
@@ -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>Pinterest 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">Media & Consumer</p>
<h2>Display sample for Pinterest</h2>
<p class="lede">Body rhythm, heading scale, and muted metadata all resolve through the committed token contract.</p>
<p class="body">The preview intentionally uses only schema tokens so reviewers can confirm the package remains portable across OpenDesign artifacts.</p>
</section>
</main>
</body>
</html>
open-design/design-systems/pinterest/source/evidence.md
+17
View File
@@ -0,0 +1,17 @@
# Pinterest 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/pinterest/DESIGN.md
- design-systems/pinterest/tokens.css
- design-systems/pinterest/components.html
## Token Contract
`source/token-contract.report.json` maps every TOKEN_SCHEMA binding back to the committed `tokens.css` declaration line.
`design-tokens.json` and `tailwind-v4.css` are derived outputs and should be regenerated from the report and token stylesheet rather than edited by hand.
open-design/design-systems/pinterest/source/token-contract.report.json
+641
View File
@@ -0,0 +1,641 @@
{
"schemaVersion": 1,
"contract": "TOKEN_SCHEMA",
"generatedAt": "2026-06-06T00:00:00.000Z",
"sourceScope": "open-design-bundled-fixture",
"summary": {
"totalTokens": 56,
"declaredTokens": 56,
"sourceBackedTokens": 56,
"sourceBackedA1": 26,
"fallbackTokens": 26,
"aliasTokens": 0,
"layerCounts": {
"A1-identity": 8,
"B-slot": 4,
"A2": 26,
"A1-structure": 18
},
"score": 100,
"grade": "excellent",
"recommendRebuild": false
},
"tokens": [
{
"name": "--bg",
"layer": "A1-identity",
"value": "#ffffff",
"confidence": "high",
"reason": "Bundled tokens.css declares --bg; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:90"
],
"sourceName": "--bg"
},
{
"name": "--surface",
"layer": "A1-identity",
"value": "#f6f6f3",
"confidence": "high",
"reason": "Bundled tokens.css declares --surface; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:91"
],
"sourceName": "--surface"
},
{
"name": "--surface-warm",
"layer": "B-slot",
"value": "#e5e5e0",
"confidence": "high",
"reason": "Bundled tokens.css declares --surface-warm; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:92"
],
"sourceName": "--surface-warm"
},
{
"name": "--fg",
"layer": "A1-identity",
"value": "#211922",
"confidence": "high",
"reason": "Bundled tokens.css declares --fg; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:101"
],
"sourceName": "--fg"
},
{
"name": "--fg-2",
"layer": "B-slot",
"value": "#000000",
"confidence": "high",
"reason": "Bundled tokens.css declares --fg-2; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:102"
],
"sourceName": "--fg-2"
},
{
"name": "--muted",
"layer": "A1-identity",
"value": "#62625b",
"confidence": "high",
"reason": "Bundled tokens.css declares --muted; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:103"
],
"sourceName": "--muted"
},
{
"name": "--meta",
"layer": "B-slot",
"value": "#91918c",
"confidence": "high",
"reason": "Bundled tokens.css declares --meta; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:104"
],
"sourceName": "--meta"
},
{
"name": "--border",
"layer": "A1-identity",
"value": "#c8c8c1",
"confidence": "high",
"reason": "Bundled tokens.css declares --border; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:112"
],
"sourceName": "--border"
},
{
"name": "--border-soft",
"layer": "B-slot",
"value": "#e0e0d9",
"confidence": "high",
"reason": "Bundled tokens.css declares --border-soft; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:113"
],
"sourceName": "--border-soft"
},
{
"name": "--accent",
"layer": "A1-identity",
"value": "#e60023",
"confidence": "high",
"reason": "Bundled tokens.css declares --accent; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:121"
],
"sourceName": "--accent"
},
{
"name": "--accent-on",
"layer": "A2",
"value": "#000000",
"confidence": "high",
"reason": "Bundled tokens.css declares --accent-on; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:122"
],
"sourceName": "--accent-on"
},
{
"name": "--accent-hover",
"layer": "A2",
"value": "color-mix(in oklab, var(--accent), black 8%)",
"confidence": "high",
"reason": "Bundled tokens.css declares --accent-hover; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:123"
],
"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:124"
],
"sourceName": "--accent-active"
},
{
"name": "--success",
"layer": "A2",
"value": "#103c25",
"confidence": "high",
"reason": "Bundled tokens.css declares --success; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:132"
],
"sourceName": "--success"
},
{
"name": "--warn",
"layer": "A2",
"value": "#c47700",
"confidence": "high",
"reason": "Bundled tokens.css declares --warn; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:133"
],
"sourceName": "--warn"
},
{
"name": "--danger",
"layer": "A2",
"value": "#9e0a0a",
"confidence": "high",
"reason": "Bundled tokens.css declares --danger; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:134"
],
"sourceName": "--danger"
},
{
"name": "--font-display",
"layer": "A1-identity",
"value": "\"Pin Sans\", -apple-system, system-ui, \"Segoe UI\", Roboto, \"Oxygen-Sans\", \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", Helvetica, \"ヒラギノ角ゴ Pro W3\", メイリオ, Meiryo, \"ＭＳ Ｐゴシック\", Arial, sans-serif",
"confidence": "high",
"reason": "Bundled tokens.css declares --font-display; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:144"
],
"sourceName": "--font-display"
},
{
"name": "--font-body",
"layer": "A1-identity",
"value": "\"Pin Sans\", -apple-system, system-ui, \"Segoe UI\", Roboto, \"Oxygen-Sans\", \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", Helvetica, \"ヒラギノ角ゴ Pro W3\", メイリオ, Meiryo, \"ＭＳ Ｐゴシック\", Arial, sans-serif",
"confidence": "high",
"reason": "Bundled tokens.css declares --font-body; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:150"
],
"sourceName": "--font-body"
},
{
"name": "--font-mono",
"layer": "A2",
"value": "ui-monospace, \"SF Mono\", \"JetBrains Mono\", Menlo, Monaco, Consolas, monospace",
"confidence": "high",
"reason": "Bundled tokens.css declares --font-mono; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:156"
],
"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:167"
],
"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:168"
],
"sourceName": "--text-sm"
},
{
"name": "--text-base",
"layer": "A1-structure",
"value": "16px",
"confidence": "high",
"reason": "Bundled tokens.css declares --text-base; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:169"
],
"sourceName": "--text-base"
},
{
"name": "--text-lg",
"layer": "A1-structure",
"value": "18px",
"confidence": "high",
"reason": "Bundled tokens.css declares --text-lg; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:170"
],
"sourceName": "--text-lg"
},
{
"name": "--text-xl",
"layer": "A1-structure",
"value": "22px",
"confidence": "high",
"reason": "Bundled tokens.css declares --text-xl; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:171"
],
"sourceName": "--text-xl"
},
{
"name": "--text-2xl",
"layer": "A1-structure",
"value": "28px",
"confidence": "high",
"reason": "Bundled tokens.css declares --text-2xl; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:172"
],
"sourceName": "--text-2xl"
},
{
"name": "--text-3xl",
"layer": "A1-structure",
"value": "44px",
"confidence": "high",
"reason": "Bundled tokens.css declares --text-3xl; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:173"
],
"sourceName": "--text-3xl"
},
{
"name": "--text-4xl",
"layer": "A1-structure",
"value": "70px",
"confidence": "high",
"reason": "Bundled tokens.css declares --text-4xl; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:174"
],
"sourceName": "--text-4xl"
},
{
"name": "--leading-body",
"layer": "A1-structure",
"value": "1.4",
"confidence": "high",
"reason": "Bundled tokens.css declares --leading-body; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:182"
],
"sourceName": "--leading-body"
},
{
"name": "--leading-tight",
"layer": "A1-structure",
"value": "1.15",
"confidence": "high",
"reason": "Bundled tokens.css declares --leading-tight; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:183"
],
"sourceName": "--leading-tight"
},
{
"name": "--tracking-display",
"layer": "A1-structure",
"value": "-0.02em",
"confidence": "high",
"reason": "Bundled tokens.css declares --tracking-display; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:184"
],
"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:191"
],
"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:192"
],
"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:193"
],
"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:194"
],
"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:195"
],
"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:196"
],
"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:197"
],
"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:198"
],
"sourceName": "--space-12"
},
{
"name": "--section-y-desktop",
"layer": "A1-structure",
"value": "80px",
"confidence": "high",
"reason": "Bundled tokens.css declares --section-y-desktop; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:205"
],
"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:206"
],
"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:207"
],
"sourceName": "--section-y-phone"
},
{
"name": "--radius-sm",
"layer": "A2",
"value": "12px",
"confidence": "high",
"reason": "Bundled tokens.css declares --radius-sm; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:217"
],
"sourceName": "--radius-sm"
},
{
"name": "--radius-md",
"layer": "A2",
"value": "16px",
"confidence": "high",
"reason": "Bundled tokens.css declares --radius-md; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:218"
],
"sourceName": "--radius-md"
},
{
"name": "--radius-lg",
"layer": "A2",
"value": "28px",
"confidence": "high",
"reason": "Bundled tokens.css declares --radius-lg; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:219"
],
"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:220"
],
"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:228"
],
"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:229"
],
"sourceName": "--elev-ring"
},
{
"name": "--elev-raised",
"layer": "A2",
"value": "0 4px 16px rgba(33, 25, 34, 0.06)",
"confidence": "high",
"reason": "Bundled tokens.css declares --elev-raised; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:230"
],
"sourceName": "--elev-raised"
},
{
"name": "--focus-ring",
"layer": "A2",
"value": "0 0 0 3px color-mix(in oklab, #435ee5, transparent 70%)",
"confidence": "high",
"reason": "Bundled tokens.css declares --focus-ring; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:238"
],
"sourceName": "--focus-ring"
},
{
"name": "--motion-fast",
"layer": "A2",
"value": "150ms",
"confidence": "high",
"reason": "Bundled tokens.css declares --motion-fast; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:246"
],
"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:247"
],
"sourceName": "--motion-base"
},
{
"name": "--ease-standard",
"layer": "A2",
"value": "cubic-bezier(0.2, 0, 0, 1)",
"confidence": "high",
"reason": "Bundled tokens.css declares --ease-standard; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:248"
],
"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:258"
],
"sourceName": "--container-max"
},
{
"name": "--container-gutter-desktop",
"layer": "A1-structure",
"value": "32px",
"confidence": "high",
"reason": "Bundled tokens.css declares --container-gutter-desktop; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:259"
],
"sourceName": "--container-gutter-desktop"
},
{
"name": "--container-gutter-tablet",
"layer": "A1-structure",
"value": "24px",
"confidence": "high",
"reason": "Bundled tokens.css declares --container-gutter-tablet; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:260"
],
"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:261"
],
"sourceName": "--container-gutter-phone"
}
]
}
open-design/design-systems/pinterest/source/tokens.source.json
+349
View File
@@ -0,0 +1,349 @@
{
"schemaVersion": 1,
"sourceScope": "open-design-bundled-fixture",
"brandId": "pinterest",
"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:90"
},
{
"name": "--surface",
"value": "#f6f6f3",
"layer": "A1-identity",
"source": "tokens.css:91"
},
{
"name": "--surface-warm",
"value": "#e5e5e0",
"layer": "B-slot",
"source": "tokens.css:92"
},
{
"name": "--fg",
"value": "#211922",
"layer": "A1-identity",
"source": "tokens.css:101"
},
{
"name": "--fg-2",
"value": "#000000",
"layer": "B-slot",
"source": "tokens.css:102"
},
{
"name": "--muted",
"value": "#62625b",
"layer": "A1-identity",
"source": "tokens.css:103"
},
{
"name": "--meta",
"value": "#91918c",
"layer": "B-slot",
"source": "tokens.css:104"
},
{
"name": "--border",
"value": "#c8c8c1",
"layer": "A1-identity",
"source": "tokens.css:112"
},
{
"name": "--border-soft",
"value": "#e0e0d9",
"layer": "B-slot",
"source": "tokens.css:113"
},
{
"name": "--accent",
"value": "#e60023",
"layer": "A1-identity",
"source": "tokens.css:121"
},
{
"name": "--accent-on",
"value": "#000000",
"layer": "A2",
"source": "tokens.css:122"
},
{
"name": "--accent-hover",
"value": "color-mix(in oklab, var(--accent), black 8%)",
"layer": "A2",
"source": "tokens.css:123"
},
{
"name": "--accent-active",
"value": "color-mix(in oklab, var(--accent), black 14%)",
"layer": "A2",
"source": "tokens.css:124"
},
{
"name": "--success",
"value": "#103c25",
"layer": "A2",
"source": "tokens.css:132"
},
{
"name": "--warn",
"value": "#c47700",
"layer": "A2",
"source": "tokens.css:133"
},
{
"name": "--danger",
"value": "#9e0a0a",
"layer": "A2",
"source": "tokens.css:134"
},
{
"name": "--font-display",
"value": "\"Pin Sans\", -apple-system, system-ui, \"Segoe UI\", Roboto, \"Oxygen-Sans\", \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", Helvetica, \"ヒラギノ角ゴ Pro W3\", メイリオ, Meiryo, \"ＭＳ Ｐゴシック\", Arial, sans-serif",
"layer": "A1-identity",
"source": "tokens.css:144"
},
{
"name": "--font-body",
"value": "\"Pin Sans\", -apple-system, system-ui, \"Segoe UI\", Roboto, \"Oxygen-Sans\", \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", Helvetica, \"ヒラギノ角ゴ Pro W3\", メイリオ, Meiryo, \"ＭＳ Ｐゴシック\", Arial, sans-serif",
"layer": "A1-identity",
"source": "tokens.css:150"
},
{
"name": "--font-mono",
"value": "ui-monospace, \"SF Mono\", \"JetBrains Mono\", Menlo, Monaco, Consolas, monospace",
"layer": "A2",
"source": "tokens.css:156"
},
{
"name": "--text-xs",
"value": "12px",
"layer": "A1-structure",
"source": "tokens.css:167"
},
{
"name": "--text-sm",
"value": "14px",
"layer": "A1-structure",
"source": "tokens.css:168"
},
{
"name": "--text-base",
"value": "16px",
"layer": "A1-structure",
"source": "tokens.css:169"
},
{
"name": "--text-lg",
"value": "18px",
"layer": "A1-structure",
"source": "tokens.css:170"
},
{
"name": "--text-xl",
"value": "22px",
"layer": "A1-structure",
"source": "tokens.css:171"
},
{
"name": "--text-2xl",
"value": "28px",
"layer": "A1-structure",
"source": "tokens.css:172"
},
{
"name": "--text-3xl",
"value": "44px",
"layer": "A1-structure",
"source": "tokens.css:173"
},
{
"name": "--text-4xl",
"value": "70px",
"layer": "A1-structure",
"source": "tokens.css:174"
},
{
"name": "--leading-body",
"value": "1.4",
"layer": "A1-structure",
"source": "tokens.css:182"
},
{
"name": "--leading-tight",
"value": "1.15",
"layer": "A1-structure",
"source": "tokens.css:183"
},
{
"name": "--tracking-display",
"value": "-0.02em",
"layer": "A1-structure",
"source": "tokens.css:184"
},
{
"name": "--space-1",
"value": "4px",
"layer": "A2",
"source": "tokens.css:191"
},
{
"name": "--space-2",
"value": "8px",
"layer": "A2",
"source": "tokens.css:192"
},
{
"name": "--space-3",
"value": "12px",
"layer": "A2",
"source": "tokens.css:193"
},
{
"name": "--space-4",
"value": "16px",
"layer": "A2",
"source": "tokens.css:194"
},
{
"name": "--space-5",
"value": "20px",
"layer": "A2",
"source": "tokens.css:195"
},
{
"name": "--space-6",
"value": "24px",
"layer": "A2",
"source": "tokens.css:196"
},
{
"name": "--space-8",
"value": "32px",
"layer": "A2",
"source": "tokens.css:197"
},
{
"name": "--space-12",
"value": "48px",
"layer": "A2",
"source": "tokens.css:198"
},
{
"name": "--section-y-desktop",
"value": "80px",
"layer": "A1-structure",
"source": "tokens.css:205"
},
{
"name": "--section-y-tablet",
"value": "48px",
"layer": "A1-structure",
"source": "tokens.css:206"
},
{
"name": "--section-y-phone",
"value": "32px",
"layer": "A1-structure",
"source": "tokens.css:207"
},
{
"name": "--radius-sm",
"value": "12px",
"layer": "A2",
"source": "tokens.css:217"
},
{
"name": "--radius-md",
"value": "16px",
"layer": "A2",
"source": "tokens.css:218"
},
{
"name": "--radius-lg",
"value": "28px",
"layer": "A2",
"source": "tokens.css:219"
},
{
"name": "--radius-pill",
"value": "9999px",
"layer": "A2",
"source": "tokens.css:220"
},
{
"name": "--elev-flat",
"value": "none",
"layer": "A2",
"source": "tokens.css:228"
},
{
"name": "--elev-ring",
"value": "0 0 0 1px var(--border)",
"layer": "A2",
"source": "tokens.css:229"
},
{
"name": "--elev-raised",
"value": "0 4px 16px rgba(33, 25, 34, 0.06)",
"layer": "A2",
"source": "tokens.css:230"
},
{
"name": "--focus-ring",
"value": "0 0 0 3px color-mix(in oklab, #435ee5, transparent 70%)",
"layer": "A2",
"source": "tokens.css:238"
},
{
"name": "--motion-fast",
"value": "150ms",
"layer": "A2",
"source": "tokens.css:246"
},
{
"name": "--motion-base",
"value": "200ms",
"layer": "A2",
"source": "tokens.css:247"
},
{
"name": "--ease-standard",
"value": "cubic-bezier(0.2, 0, 0, 1)",
"layer": "A2",
"source": "tokens.css:248"
},
{
"name": "--container-max",
"value": "1280px",
"layer": "A1-structure",
"source": "tokens.css:258"
},
{
"name": "--container-gutter-desktop",
"value": "32px",
"layer": "A1-structure",
"source": "tokens.css:259"
},
{
"name": "--container-gutter-tablet",
"value": "24px",
"layer": "A1-structure",
"source": "tokens.css:260"
},
{
"name": "--container-gutter-phone",
"value": "16px",
"layer": "A1-structure",
"source": "tokens.css:261"
}
]
}
open-design/design-systems/pinterest/system/artifacts/deck.html
+137
View File
@@ -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>Pinterest - Pitch deck</title>
<style>
:root {
--accent: #e60023;
--accent-active: color-mix(in oklab, var(--accent), black 14%);
--accent-hover: color-mix(in oklab, var(--accent), black 8%);
--accent-on: #000000;
--bg: #ffffff;
--border: #c8c8c1;
--border-soft: #e0e0d9;
--container-gutter-desktop: 32px;
--container-gutter-phone: 16px;
--container-gutter-tablet: 24px;
--container-max: 1280px;
--danger: #9e0a0a;
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--elev-flat: none;
--elev-raised: 0 4px 16px rgba(33, 25, 34, 0.06);
--elev-ring: 0 0 0 1px var(--border);
--fg: #211922;
--fg-2: #000000;
--focus-ring: 0 0 0 3px color-mix(in oklab, #435ee5, transparent 70%);
--font-body: "Pin Sans", -apple-system, system-ui, "Segoe UI", Roboto, "Oxygen-Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", Arial, sans-serif;
--font-display: "Pin Sans", -apple-system, system-ui, "Segoe UI", Roboto, "Oxygen-Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", Arial, sans-serif;
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
--leading-body: 1.4;
--leading-tight: 1.15;
--meta: #91918c;
--motion-base: 200ms;
--motion-fast: 150ms;
--muted: #62625b;
--radius-lg: 28px;
--radius-md: 16px;
--radius-pill: 9999px;
--radius-sm: 12px;
--section-y-desktop: 80px;
--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: #103c25;
--surface: #f6f6f3;
--surface-warm: #e5e5e0;
--text-2xl: 28px;
--text-3xl: 44px;
--text-4xl: 70px;
--text-base: 16px;
--text-lg: 18px;
--text-sm: 14px;
--text-xl: 22px;
--text-xs: 12px;
--tracking-display: -0.02em;
--warn: #c47700;
}
:root {
--od-page-bg: #ffffff;
--od-surface: #f6f6f3;
--od-text: #211922;
--od-muted: #62625b;
--od-border: #c8c8c1;
--od-accent: #e60023;
--od-radius: 16px;
--od-font-body: "Pin Sans", -apple-system, system-ui, "Segoe UI", Roboto, "Oxygen-Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", Arial, sans-serif;
--od-font-display: "Pin Sans", -apple-system, system-ui, "Segoe UI", Roboto, "Oxygen-Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", Arial, sans-serif;
}
* { box-sizing: border-box; }
body {
margin: 0;
min-height: 100vh;
background: var(--od-page-bg);
color: var(--od-text);
font-family: var(--od-font-body);
-webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
h1 { margin-top: 12px; font-size: 64px; }
h2 { font-size: 40px; }
h3 { font-size: 22px; }
.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
.button.secondary { background: var(--od-surface); }
.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.metric, .card { padding: 18px; }
.metric strong { display: block; font-size: 30px; line-height: 1; }
.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
</style>
</head>
<body>
<main class="page">
<section class="hero">
<div>
<p class="eyebrow">Deck module</p>
<h1>Pinterest 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 Pinterest, 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="Pinterest" /></label></div>
<div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
</div>
</article>
</section>
</main>
</body>
</html>
open-design/design-systems/pinterest/system/artifacts/email.html
+137
View File
@@ -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>Pinterest - Email</title>
<style>
:root {
--accent: #e60023;
--accent-active: color-mix(in oklab, var(--accent), black 14%);
--accent-hover: color-mix(in oklab, var(--accent), black 8%);
--accent-on: #000000;
--bg: #ffffff;
--border: #c8c8c1;
--border-soft: #e0e0d9;
--container-gutter-desktop: 32px;
--container-gutter-phone: 16px;
--container-gutter-tablet: 24px;
--container-max: 1280px;
--danger: #9e0a0a;
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--elev-flat: none;
--elev-raised: 0 4px 16px rgba(33, 25, 34, 0.06);
--elev-ring: 0 0 0 1px var(--border);
--fg: #211922;
--fg-2: #000000;
--focus-ring: 0 0 0 3px color-mix(in oklab, #435ee5, transparent 70%);
--font-body: "Pin Sans", -apple-system, system-ui, "Segoe UI", Roboto, "Oxygen-Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", Arial, sans-serif;
--font-display: "Pin Sans", -apple-system, system-ui, "Segoe UI", Roboto, "Oxygen-Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", Arial, sans-serif;
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
--leading-body: 1.4;
--leading-tight: 1.15;
--meta: #91918c;
--motion-base: 200ms;
--motion-fast: 150ms;
--muted: #62625b;
--radius-lg: 28px;
--radius-md: 16px;
--radius-pill: 9999px;
--radius-sm: 12px;
--section-y-desktop: 80px;
--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: #103c25;
--surface: #f6f6f3;
--surface-warm: #e5e5e0;
--text-2xl: 28px;
--text-3xl: 44px;
--text-4xl: 70px;
--text-base: 16px;
--text-lg: 18px;
--text-sm: 14px;
--text-xl: 22px;
--text-xs: 12px;
--tracking-display: -0.02em;
--warn: #c47700;
}
:root {
--od-page-bg: #ffffff;
--od-surface: #f6f6f3;
--od-text: #211922;
--od-muted: #62625b;
--od-border: #c8c8c1;
--od-accent: #e60023;
--od-radius: 16px;
--od-font-body: "Pin Sans", -apple-system, system-ui, "Segoe UI", Roboto, "Oxygen-Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", Arial, sans-serif;
--od-font-display: "Pin Sans", -apple-system, system-ui, "Segoe UI", Roboto, "Oxygen-Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", Arial, sans-serif;
}
* { box-sizing: border-box; }
body {
margin: 0;
min-height: 100vh;
background: var(--od-page-bg);
color: var(--od-text);
font-family: var(--od-font-body);
-webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
h1 { margin-top: 12px; font-size: 64px; }
h2 { font-size: 40px; }
h3 { font-size: 22px; }
.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
.button.secondary { background: var(--od-surface); }
.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.metric, .card { padding: 18px; }
.metric strong { display: block; font-size: 30px; line-height: 1; }
.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
</style>
</head>
<body>
<main class="page">
<section class="hero">
<div>
<p class="eyebrow">Email module</p>
<h1>Pinterest 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 Pinterest, 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="Pinterest" /></label></div>
<div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
</div>
</article>
</section>
</main>
</body>
</html>
open-design/design-systems/pinterest/system/artifacts/form.html
+137
View File
@@ -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>Pinterest - Form page</title>
<style>
:root {
--accent: #e60023;
--accent-active: color-mix(in oklab, var(--accent), black 14%);
--accent-hover: color-mix(in oklab, var(--accent), black 8%);
--accent-on: #000000;
--bg: #ffffff;
--border: #c8c8c1;
--border-soft: #e0e0d9;
--container-gutter-desktop: 32px;
--container-gutter-phone: 16px;
--container-gutter-tablet: 24px;
--container-max: 1280px;
--danger: #9e0a0a;
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--elev-flat: none;
--elev-raised: 0 4px 16px rgba(33, 25, 34, 0.06);
--elev-ring: 0 0 0 1px var(--border);
--fg: #211922;
--fg-2: #000000;
--focus-ring: 0 0 0 3px color-mix(in oklab, #435ee5, transparent 70%);
--font-body: "Pin Sans", -apple-system, system-ui, "Segoe UI", Roboto, "Oxygen-Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", Arial, sans-serif;
--font-display: "Pin Sans", -apple-system, system-ui, "Segoe UI", Roboto, "Oxygen-Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", Arial, sans-serif;
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
--leading-body: 1.4;
--leading-tight: 1.15;
--meta: #91918c;
--motion-base: 200ms;
--motion-fast: 150ms;
--muted: #62625b;
--radius-lg: 28px;
--radius-md: 16px;
--radius-pill: 9999px;
--radius-sm: 12px;
--section-y-desktop: 80px;
--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: #103c25;
--surface: #f6f6f3;
--surface-warm: #e5e5e0;
--text-2xl: 28px;
--text-3xl: 44px;
--text-4xl: 70px;
--text-base: 16px;
--text-lg: 18px;
--text-sm: 14px;
--text-xl: 22px;
--text-xs: 12px;
--tracking-display: -0.02em;
--warn: #c47700;
}
:root {
--od-page-bg: #ffffff;
--od-surface: #f6f6f3;
--od-text: #211922;
--od-muted: #62625b;
--od-border: #c8c8c1;
--od-accent: #e60023;
--od-radius: 16px;
--od-font-body: "Pin Sans", -apple-system, system-ui, "Segoe UI", Roboto, "Oxygen-Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", Arial, sans-serif;
--od-font-display: "Pin Sans", -apple-system, system-ui, "Segoe UI", Roboto, "Oxygen-Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", Arial, sans-serif;
}
* { box-sizing: border-box; }
body {
margin: 0;
min-height: 100vh;
background: var(--od-page-bg);
color: var(--od-text);
font-family: var(--od-font-body);
-webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
h1 { margin-top: 12px; font-size: 64px; }
h2 { font-size: 40px; }
h3 { font-size: 22px; }
.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
.button.secondary { background: var(--od-surface); }
.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.metric, .card { padding: 18px; }
.metric strong { display: block; font-size: 30px; line-height: 1; }
.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
</style>
</head>
<body>
<main class="page">
<section class="hero">
<div>
<p class="eyebrow">Form module</p>
<h1>Pinterest 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 Pinterest, 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="Pinterest" /></label></div>
<div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
</div>
</article>
</section>
</main>
</body>
</html>
open-design/design-systems/pinterest/system/artifacts/landing.html
+137
View File
@@ -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>Pinterest - Landing page</title>
<style>
:root {
--accent: #e60023;
--accent-active: color-mix(in oklab, var(--accent), black 14%);
--accent-hover: color-mix(in oklab, var(--accent), black 8%);
--accent-on: #000000;
--bg: #ffffff;
--border: #c8c8c1;
--border-soft: #e0e0d9;
--container-gutter-desktop: 32px;
--container-gutter-phone: 16px;
--container-gutter-tablet: 24px;
--container-max: 1280px;
--danger: #9e0a0a;
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--elev-flat: none;
--elev-raised: 0 4px 16px rgba(33, 25, 34, 0.06);
--elev-ring: 0 0 0 1px var(--border);
--fg: #211922;
--fg-2: #000000;
--focus-ring: 0 0 0 3px color-mix(in oklab, #435ee5, transparent 70%);
--font-body: "Pin Sans", -apple-system, system-ui, "Segoe UI", Roboto, "Oxygen-Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", Arial, sans-serif;
--font-display: "Pin Sans", -apple-system, system-ui, "Segoe UI", Roboto, "Oxygen-Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", Arial, sans-serif;
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
--leading-body: 1.4;
--leading-tight: 1.15;
--meta: #91918c;
--motion-base: 200ms;
--motion-fast: 150ms;
--muted: #62625b;
--radius-lg: 28px;
--radius-md: 16px;
--radius-pill: 9999px;
--radius-sm: 12px;
--section-y-desktop: 80px;
--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: #103c25;
--surface: #f6f6f3;
--surface-warm: #e5e5e0;
--text-2xl: 28px;
--text-3xl: 44px;
--text-4xl: 70px;
--text-base: 16px;
--text-lg: 18px;
--text-sm: 14px;
--text-xl: 22px;
--text-xs: 12px;
--tracking-display: -0.02em;
--warn: #c47700;
}
:root {
--od-page-bg: #ffffff;
--od-surface: #f6f6f3;
--od-text: #211922;
--od-muted: #62625b;
--od-border: #c8c8c1;
--od-accent: #e60023;
--od-radius: 16px;
--od-font-body: "Pin Sans", -apple-system, system-ui, "Segoe UI", Roboto, "Oxygen-Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", Arial, sans-serif;
--od-font-display: "Pin Sans", -apple-system, system-ui, "Segoe UI", Roboto, "Oxygen-Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", Arial, sans-serif;
}
* { box-sizing: border-box; }
body {
margin: 0;
min-height: 100vh;
background: var(--od-page-bg);
color: var(--od-text);
font-family: var(--od-font-body);
-webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
h1 { margin-top: 12px; font-size: 64px; }
h2 { font-size: 40px; }
h3 { font-size: 22px; }
.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
.button.secondary { background: var(--od-surface); }
.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.metric, .card { padding: 18px; }
.metric strong { display: block; font-size: 30px; line-height: 1; }
.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
</style>
</head>
<body>
<main class="page">
<section class="hero">
<div>
<p class="eyebrow">Landing module</p>
<h1>Pinterest 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 Pinterest, 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="Pinterest" /></label></div>
<div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
</div>
</article>
</section>
</main>
</body>
</html>
open-design/design-systems/pinterest/system/artifacts/newsletter.html
+137
View File
@@ -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>Pinterest - Newsletter</title>
<style>
:root {
--accent: #e60023;
--accent-active: color-mix(in oklab, var(--accent), black 14%);
--accent-hover: color-mix(in oklab, var(--accent), black 8%);
--accent-on: #000000;
--bg: #ffffff;
--border: #c8c8c1;
--border-soft: #e0e0d9;
--container-gutter-desktop: 32px;
--container-gutter-phone: 16px;
--container-gutter-tablet: 24px;
--container-max: 1280px;
--danger: #9e0a0a;
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--elev-flat: none;
--elev-raised: 0 4px 16px rgba(33, 25, 34, 0.06);
--elev-ring: 0 0 0 1px var(--border);
--fg: #211922;
--fg-2: #000000;
--focus-ring: 0 0 0 3px color-mix(in oklab, #435ee5, transparent 70%);
--font-body: "Pin Sans", -apple-system, system-ui, "Segoe UI", Roboto, "Oxygen-Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", Arial, sans-serif;
--font-display: "Pin Sans", -apple-system, system-ui, "Segoe UI", Roboto, "Oxygen-Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", Arial, sans-serif;
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
--leading-body: 1.4;
--leading-tight: 1.15;
--meta: #91918c;
--motion-base: 200ms;
--motion-fast: 150ms;
--muted: #62625b;
--radius-lg: 28px;
--radius-md: 16px;
--radius-pill: 9999px;
--radius-sm: 12px;
--section-y-desktop: 80px;
--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: #103c25;
--surface: #f6f6f3;
--surface-warm: #e5e5e0;
--text-2xl: 28px;
--text-3xl: 44px;
--text-4xl: 70px;
--text-base: 16px;
--text-lg: 18px;
--text-sm: 14px;
--text-xl: 22px;
--text-xs: 12px;
--tracking-display: -0.02em;
--warn: #c47700;
}
:root {
--od-page-bg: #ffffff;
--od-surface: #f6f6f3;
--od-text: #211922;
--od-muted: #62625b;
--od-border: #c8c8c1;
--od-accent: #e60023;
--od-radius: 16px;
--od-font-body: "Pin Sans", -apple-system, system-ui, "Segoe UI", Roboto, "Oxygen-Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", Arial, sans-serif;
--od-font-display: "Pin Sans", -apple-system, system-ui, "Segoe UI", Roboto, "Oxygen-Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", Arial, sans-serif;
}
* { box-sizing: border-box; }
body {
margin: 0;
min-height: 100vh;
background: var(--od-page-bg);
color: var(--od-text);
font-family: var(--od-font-body);
-webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
h1 { margin-top: 12px; font-size: 64px; }
h2 { font-size: 40px; }
h3 { font-size: 22px; }
.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
.button.secondary { background: var(--od-surface); }
.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.metric, .card { padding: 18px; }
.metric strong { display: block; font-size: 30px; line-height: 1; }
.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
</style>
</head>
<body>
<main class="page">
<section class="hero">
<div>
<p class="eyebrow">Newsletter module</p>
<h1>Pinterest 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 Pinterest, 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="Pinterest" /></label></div>
<div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
</div>
</article>
</section>
</main>
</body>
</html>
open-design/design-systems/pinterest/system/artifacts/poster.html
+137
View File
@@ -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>Pinterest - Poster</title>
<style>
:root {
--accent: #e60023;
--accent-active: color-mix(in oklab, var(--accent), black 14%);
--accent-hover: color-mix(in oklab, var(--accent), black 8%);
--accent-on: #000000;
--bg: #ffffff;
--border: #c8c8c1;
--border-soft: #e0e0d9;
--container-gutter-desktop: 32px;
--container-gutter-phone: 16px;
--container-gutter-tablet: 24px;
--container-max: 1280px;
--danger: #9e0a0a;
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--elev-flat: none;
--elev-raised: 0 4px 16px rgba(33, 25, 34, 0.06);
--elev-ring: 0 0 0 1px var(--border);
--fg: #211922;
--fg-2: #000000;
--focus-ring: 0 0 0 3px color-mix(in oklab, #435ee5, transparent 70%);
--font-body: "Pin Sans", -apple-system, system-ui, "Segoe UI", Roboto, "Oxygen-Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", Arial, sans-serif;
--font-display: "Pin Sans", -apple-system, system-ui, "Segoe UI", Roboto, "Oxygen-Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", Arial, sans-serif;
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
--leading-body: 1.4;
--leading-tight: 1.15;
--meta: #91918c;
--motion-base: 200ms;
--motion-fast: 150ms;
--muted: #62625b;
--radius-lg: 28px;
--radius-md: 16px;
--radius-pill: 9999px;
--radius-sm: 12px;
--section-y-desktop: 80px;
--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: #103c25;
--surface: #f6f6f3;
--surface-warm: #e5e5e0;
--text-2xl: 28px;
--text-3xl: 44px;
--text-4xl: 70px;
--text-base: 16px;
--text-lg: 18px;
--text-sm: 14px;
--text-xl: 22px;
--text-xs: 12px;
--tracking-display: -0.02em;
--warn: #c47700;
}
:root {
--od-page-bg: #ffffff;
--od-surface: #f6f6f3;
--od-text: #211922;
--od-muted: #62625b;
--od-border: #c8c8c1;
--od-accent: #e60023;
--od-radius: 16px;
--od-font-body: "Pin Sans", -apple-system, system-ui, "Segoe UI", Roboto, "Oxygen-Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", Arial, sans-serif;
--od-font-display: "Pin Sans", -apple-system, system-ui, "Segoe UI", Roboto, "Oxygen-Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", Arial, sans-serif;
}
* { box-sizing: border-box; }
body {
margin: 0;
min-height: 100vh;
background: var(--od-page-bg);
color: var(--od-text);
font-family: var(--od-font-body);
-webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
h1 { margin-top: 12px; font-size: 64px; }
h2 { font-size: 40px; }
h3 { font-size: 22px; }
.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
.button.secondary { background: var(--od-surface); }
.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.metric, .card { padding: 18px; }
.metric strong { display: block; font-size: 30px; line-height: 1; }
.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
</style>
</head>
<body>
<main class="page">
<section class="hero">
<div>
<p class="eyebrow">Poster module</p>
<h1>Pinterest 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 Pinterest, 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="Pinterest" /></label></div>
<div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
</div>
</article>
</section>
</main>
</body>
</html>
open-design/design-systems/pinterest/system/index.html
+128
View File
@@ -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>Pinterest - system assets</title>
<style>
:root {
--accent: #e60023;
--accent-active: color-mix(in oklab, var(--accent), black 14%);
--accent-hover: color-mix(in oklab, var(--accent), black 8%);
--accent-on: #000000;
--bg: #ffffff;
--border: #c8c8c1;
--border-soft: #e0e0d9;
--container-gutter-desktop: 32px;
--container-gutter-phone: 16px;
--container-gutter-tablet: 24px;
--container-max: 1280px;
--danger: #9e0a0a;
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--elev-flat: none;
--elev-raised: 0 4px 16px rgba(33, 25, 34, 0.06);
--elev-ring: 0 0 0 1px var(--border);
--fg: #211922;
--fg-2: #000000;
--focus-ring: 0 0 0 3px color-mix(in oklab, #435ee5, transparent 70%);
--font-body: "Pin Sans", -apple-system, system-ui, "Segoe UI", Roboto, "Oxygen-Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", Arial, sans-serif;
--font-display: "Pin Sans", -apple-system, system-ui, "Segoe UI", Roboto, "Oxygen-Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", Arial, sans-serif;
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
--leading-body: 1.4;
--leading-tight: 1.15;
--meta: #91918c;
--motion-base: 200ms;
--motion-fast: 150ms;
--muted: #62625b;
--radius-lg: 28px;
--radius-md: 16px;
--radius-pill: 9999px;
--radius-sm: 12px;
--section-y-desktop: 80px;
--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: #103c25;
--surface: #f6f6f3;
--surface-warm: #e5e5e0;
--text-2xl: 28px;
--text-3xl: 44px;
--text-4xl: 70px;
--text-base: 16px;
--text-lg: 18px;
--text-sm: 14px;
--text-xl: 22px;
--text-xs: 12px;
--tracking-display: -0.02em;
--warn: #c47700;
}
:root {
--od-page-bg: #ffffff;
--od-surface: #f6f6f3;
--od-text: #211922;
--od-muted: #62625b;
--od-border: #c8c8c1;
--od-accent: #e60023;
--od-radius: 16px;
--od-font-body: "Pin Sans", -apple-system, system-ui, "Segoe UI", Roboto, "Oxygen-Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", Arial, sans-serif;
--od-font-display: "Pin Sans", -apple-system, system-ui, "Segoe UI", Roboto, "Oxygen-Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", Arial, sans-serif;
}
* { box-sizing: border-box; }
body {
margin: 0;
min-height: 100vh;
background: var(--od-page-bg);
color: var(--od-text);
font-family: var(--od-font-body);
-webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
h1 { margin-top: 12px; font-size: 64px; }
h2 { font-size: 40px; }
h3 { font-size: 22px; }
.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
.button.secondary { background: var(--od-surface); }
.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.metric, .card { padding: 18px; }
.metric strong { display: block; font-size: 30px; line-height: 1; }
.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
</style>
</head>
<body>
<main class="page">
<p class="eyebrow">Media &amp; Consumer</p>
<h1>Pinterest system assets</h1>
<p class="lead">Generated preview modules for bundled official presets.</p>
<section class="card-grid"><a class="card" href="kit.html"><h3>Component kit</h3><p>kit.html</p></a>
<a class="card" href="kit.dark.html"><h3>Dark component kit</h3><p>kit.dark.html</p></a>
<a class="card" href="artifacts/landing.html"><h3>Landing page</h3><p>artifacts/landing.html</p></a>
<a class="card" href="artifacts/deck.html"><h3>Pitch deck</h3><p>artifacts/deck.html</p></a>
<a class="card" href="artifacts/poster.html"><h3>Poster</h3><p>artifacts/poster.html</p></a>
<a class="card" href="artifacts/email.html"><h3>Email</h3><p>artifacts/email.html</p></a>
<a class="card" href="artifacts/newsletter.html"><h3>Newsletter</h3><p>artifacts/newsletter.html</p></a>
<a class="card" href="artifacts/form.html"><h3>Form page</h3><p>artifacts/form.html</p></a></section>
</main>
</body>
</html>
open-design/design-systems/pinterest/system/kit.dark.html
+149
View File
@@ -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>Pinterest - dark component kit</title>
<style>
:root {
--accent: #e60023;
--accent-active: color-mix(in oklab, var(--accent), black 14%);
--accent-hover: color-mix(in oklab, var(--accent), black 8%);
--accent-on: #000000;
--bg: #ffffff;
--border: #c8c8c1;
--border-soft: #e0e0d9;
--container-gutter-desktop: 32px;
--container-gutter-phone: 16px;
--container-gutter-tablet: 24px;
--container-max: 1280px;
--danger: #9e0a0a;
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--elev-flat: none;
--elev-raised: 0 4px 16px rgba(33, 25, 34, 0.06);
--elev-ring: 0 0 0 1px var(--border);
--fg: #211922;
--fg-2: #000000;
--focus-ring: 0 0 0 3px color-mix(in oklab, #435ee5, transparent 70%);
--font-body: "Pin Sans", -apple-system, system-ui, "Segoe UI", Roboto, "Oxygen-Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", Arial, sans-serif;
--font-display: "Pin Sans", -apple-system, system-ui, "Segoe UI", Roboto, "Oxygen-Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", Arial, sans-serif;
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
--leading-body: 1.4;
--leading-tight: 1.15;
--meta: #91918c;
--motion-base: 200ms;
--motion-fast: 150ms;
--muted: #62625b;
--radius-lg: 28px;
--radius-md: 16px;
--radius-pill: 9999px;
--radius-sm: 12px;
--section-y-desktop: 80px;
--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: #103c25;
--surface: #f6f6f3;
--surface-warm: #e5e5e0;
--text-2xl: 28px;
--text-3xl: 44px;
--text-4xl: 70px;
--text-base: 16px;
--text-lg: 18px;
--text-sm: 14px;
--text-xl: 22px;
--text-xs: 12px;
--tracking-display: -0.02em;
--warn: #c47700;
}
:root {
--od-page-bg: #0f1115;
--od-surface: #171a21;
--od-text: #f8fafc;
--od-muted: #a7adba;
--od-border: #2a2f3a;
--od-accent: #e60023;
--od-radius: 16px;
--od-font-body: "Pin Sans", -apple-system, system-ui, "Segoe UI", Roboto, "Oxygen-Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", Arial, sans-serif;
--od-font-display: "Pin Sans", -apple-system, system-ui, "Segoe UI", Roboto, "Oxygen-Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", Arial, sans-serif;
}
* { box-sizing: border-box; }
body {
margin: 0;
min-height: 100vh;
background: var(--od-page-bg);
color: var(--od-text);
font-family: var(--od-font-body);
-webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
h1 { margin-top: 12px; font-size: 64px; }
h2 { font-size: 40px; }
h3 { font-size: 22px; }
.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #0b0b0b; }
.button.secondary { background: var(--od-surface); }
.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.32); }
.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.metric, .card { padding: 18px; }
.metric strong { display: block; font-size: 30px; line-height: 1; }
.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
</style>
</head>
<body>
<main class="page">
<section class="hero">
<div>
<p class="eyebrow">Media &amp; Consumer system</p>
<h1>Pinterest component kit</h1>
<p class="lead">Bundled OpenDesign package for Pinterest, derived from curated DESIGN.md, tokens.css, and components.html fixtures.</p>
<div class="actions">
<a class="button primary" href="#">Primary</a>
<a class="button secondary" href="#">Default</a>
<a class="button secondary" href="#">Dashed</a>
</div>
</div>
<article class="panel">
<p class="eyebrow">Reference module</p>
<h3>Token-driven surface</h3>
<div class="metric-grid">
<div class="metric"><strong>12</strong><span>Components</span></div>
<div class="metric"><strong>4</strong><span>States</span></div>
<div class="metric"><strong>1</strong><span>Token contract</span></div>
</div>
<div class="chip-row">
<span class="chip">Hover</span>
<span class="chip">Focus</span>
<span class="chip">Active</span>
<span class="chip">Disabled</span>
</div>
</article>
</section>
<section class="card-grid" aria-label="Component examples">
<article class="card"><h3>Buttons</h3><p>Primary, secondary, text, and destructive treatments resolve through shared color tokens.</p></article>
<article class="card"><h3>Inputs</h3><p>Labels, helper text, and focus state use the same spacing and radius scale.</p></article>
<article class="card"><h3>Cards</h3><p>Information modules keep elevation, border, and padding consistent across breakpoints.</p></article>
</section>
</main>
</body>
</html>
open-design/design-systems/pinterest/system/kit.html
+149
View File
@@ -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>Pinterest - component kit</title>
<style>
:root {
--accent: #e60023;
--accent-active: color-mix(in oklab, var(--accent), black 14%);
--accent-hover: color-mix(in oklab, var(--accent), black 8%);
--accent-on: #000000;
--bg: #ffffff;
--border: #c8c8c1;
--border-soft: #e0e0d9;
--container-gutter-desktop: 32px;
--container-gutter-phone: 16px;
--container-gutter-tablet: 24px;
--container-max: 1280px;
--danger: #9e0a0a;
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--elev-flat: none;
--elev-raised: 0 4px 16px rgba(33, 25, 34, 0.06);
--elev-ring: 0 0 0 1px var(--border);
--fg: #211922;
--fg-2: #000000;
--focus-ring: 0 0 0 3px color-mix(in oklab, #435ee5, transparent 70%);
--font-body: "Pin Sans", -apple-system, system-ui, "Segoe UI", Roboto, "Oxygen-Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", Arial, sans-serif;
--font-display: "Pin Sans", -apple-system, system-ui, "Segoe UI", Roboto, "Oxygen-Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", Arial, sans-serif;
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
--leading-body: 1.4;
--leading-tight: 1.15;
--meta: #91918c;
--motion-base: 200ms;
--motion-fast: 150ms;
--muted: #62625b;
--radius-lg: 28px;
--radius-md: 16px;
--radius-pill: 9999px;
--radius-sm: 12px;
--section-y-desktop: 80px;
--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: #103c25;
--surface: #f6f6f3;
--surface-warm: #e5e5e0;
--text-2xl: 28px;
--text-3xl: 44px;
--text-4xl: 70px;
--text-base: 16px;
--text-lg: 18px;
--text-sm: 14px;
--text-xl: 22px;
--text-xs: 12px;
--tracking-display: -0.02em;
--warn: #c47700;
}
:root {
--od-page-bg: #ffffff;
--od-surface: #f6f6f3;
--od-text: #211922;
--od-muted: #62625b;
--od-border: #c8c8c1;
--od-accent: #e60023;
--od-radius: 16px;
--od-font-body: "Pin Sans", -apple-system, system-ui, "Segoe UI", Roboto, "Oxygen-Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", Arial, sans-serif;
--od-font-display: "Pin Sans", -apple-system, system-ui, "Segoe UI", Roboto, "Oxygen-Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", Arial, sans-serif;
}
* { box-sizing: border-box; }
body {
margin: 0;
min-height: 100vh;
background: var(--od-page-bg);
color: var(--od-text);
font-family: var(--od-font-body);
-webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
h1 { margin-top: 12px; font-size: 64px; }
h2 { font-size: 40px; }
h3 { font-size: 22px; }
.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
.button.secondary { background: var(--od-surface); }
.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.metric, .card { padding: 18px; }
.metric strong { display: block; font-size: 30px; line-height: 1; }
.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
</style>
</head>
<body>
<main class="page">
<section class="hero">
<div>
<p class="eyebrow">Media &amp; Consumer system</p>
<h1>Pinterest component kit</h1>
<p class="lead">Bundled OpenDesign package for Pinterest, derived from curated DESIGN.md, tokens.css, and components.html fixtures.</p>
<div class="actions">
<a class="button primary" href="#">Primary</a>
<a class="button secondary" href="#">Default</a>
<a class="button secondary" href="#">Dashed</a>
</div>
</div>
<article class="panel">
<p class="eyebrow">Reference module</p>
<h3>Token-driven surface</h3>
<div class="metric-grid">
<div class="metric"><strong>12</strong><span>Components</span></div>
<div class="metric"><strong>4</strong><span>States</span></div>
<div class="metric"><strong>1</strong><span>Token contract</span></div>
</div>
<div class="chip-row">
<span class="chip">Hover</span>
<span class="chip">Focus</span>
<span class="chip">Active</span>
<span class="chip">Disabled</span>
</div>
</article>
</section>
<section class="card-grid" aria-label="Component examples">
<article class="card"><h3>Buttons</h3><p>Primary, secondary, text, and destructive treatments resolve through shared color tokens.</p></article>
<article class="card"><h3>Inputs</h3><p>Labels, helper text, and focus state use the same spacing and radius scale.</p></article>
<article class="card"><h3>Cards</h3><p>Information modules keep elevation, border, and padding consistent across breakpoints.</p></article>
</section>
</main>
</body>
</html>
open-design/design-systems/pinterest/system/tokens.default.json
+8
View File
@@ -0,0 +1,8 @@
{
"colorPrimary": "#e60023",
"colorPrimaryBg": "#e5e5e0",
"colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)",
"colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)",
"fontSize": 16,
"borderRadius": 16
}
open-design/design-systems/pinterest/tailwind-v4.css
+63
View File
@@ -0,0 +1,63 @@
/* Derived from tokens.css. Keep tokens.css as the source of truth. */
@import "tailwindcss";
@import "./tokens.css";
@theme {
--color-bg: var(--bg);
--color-surface: var(--surface);
--color-surface-warm: var(--surface-warm);
--color-fg: var(--fg);
--color-fg-2: var(--fg-2);
--color-muted: var(--muted);
--color-meta: var(--meta);
--color-border: var(--border);
--color-border-soft: var(--border-soft);
--color-accent: var(--accent);
--color-accent-on: var(--accent-on);
--color-accent-hover: var(--accent-hover);
--color-accent-active: var(--accent-active);
--color-success: var(--success);
--color-warn: var(--warn);
--color-danger: var(--danger);
--font-display: var(--font-display);
--font-body: var(--font-body);
--font-sans: var(--font-body);
--font-mono: var(--font-mono);
--text-xs: var(--text-xs);
--text-sm: var(--text-sm);
--text-base: var(--text-base);
--text-lg: var(--text-lg);
--text-xl: var(--text-xl);
--text-2xl: var(--text-2xl);
--text-3xl: var(--text-3xl);
--text-4xl: var(--text-4xl);
--leading-body: var(--leading-body);
--leading-tight: var(--leading-tight);
--tracking-display: var(--tracking-display);
--spacing-1: var(--space-1);
--spacing-2: var(--space-2);
--spacing-3: var(--space-3);
--spacing-4: var(--space-4);
--spacing-5: var(--space-5);
--spacing-6: var(--space-6);
--spacing-8: var(--space-8);
--spacing-12: var(--space-12);
--spacing-section-desktop: var(--section-y-desktop);
--spacing-section-tablet: var(--section-y-tablet);
--spacing-section-phone: var(--section-y-phone);
--radius-sm: var(--radius-sm);
--radius-md: var(--radius-md);
--radius-lg: var(--radius-lg);
--radius-pill: var(--radius-pill);
--shadow-flat: var(--elev-flat);
--shadow-ring: var(--elev-ring);
--shadow-raised: var(--elev-raised);
--shadow-focus-ring: var(--focus-ring);
--duration-fast: var(--motion-fast);
--duration-base: var(--motion-base);
--ease-standard: var(--ease-standard);
--container-max: var(--container-max);
--spacing-container-desktop: var(--container-gutter-desktop);
--spacing-container-tablet: var(--container-gutter-tablet);
--spacing-container-phone: var(--container-gutter-phone);
}
open-design/design-systems/pinterest/tokens.css
+262
View File
@@ -0,0 +1,262 @@
/* ─────────────────────────────────────────────────────────────────────────
* design-systems/pinterest/tokens.css
*
* Structured token bindings for "Design System Inspired by Pinterest".
* Warm visual-discovery canvas: olive/sand neutrals, signature Pinterest
* Red (#e60023) as the singular bold accent, Pin Sans across the entire
* type hierarchy, generous 12–28px radii, and minimal shadow because
* the photography is the elevation.
*
* This file pre-compiles the values described in `DESIGN.md` into the
* schema shared with every OD design system. Agents should paste the
* `:root { … }` block verbatim into the first `<style>` of an artifact,
* then resolve every value via `var(--*)` from that point on.
*
* Key brand decisions encoded here:
*
* #Bind 1 — --bg is Canvas White (#ffffff) per DESIGN.md §9. The
* warm-white reading the brand gives off comes from its
* olive/sand neutrals (#e5e5e0, #e0e0d9, #91918c), never
* from tinting the page background itself. --surface is
* Fog (#f6f6f3) — the warm light tier used for cards,
* search bars, and elevated containers; one subtle step
* warmer than the page so masonry pin cards earn a
* recognizable shape even without a border.
*
* #Bind 2 — --surface-warm is Sand Gray (#e5e5e0), Pinterest's
* warmest published surface — the secondary button
* background, the saved-pin chip background, the warm
* shelf behind clustered metadata (DESIGN.md §2 Surface).
*
* #Bind 3 — --fg is Plum Black (#211922), NOT pure black. DESIGN.md
* §7 explicitly forbids #000000 as primary text because
* Pinterest's near-black carries a plum/warm undertone
* that holds together with the olive neutrals. --fg-2
* binds to #000000 — the brand reserves pure black for
* button labels and high-emphasis secondary text only.
*
* #Bind 4 — --accent-on is #000000, not white. Pinterest's primary
* red button (#e60023) carries black text — DESIGN.md §4
* calls this out as "an unusual choice for contrast on
* red". White-on-red would over-saturate the canvas and
* read as alarm; black-on-red reads as confident, lifestyle-
* magazine punch. Honor the brand value over schema default.
*
* #Bind 5 — Radius scale follows the brand's signature generous
* soft-circle geometry. 12px (--radius-sm) is the brand's
* "Standard" radius for small chips and links; 16px
* (--radius-md) is the workhorse — every button, every
* input, every secondary card; 28px (--radius-lg) is the
* "Large" container radius for tab elements and hero
* panels. The brand also publishes a 20px "Comfortable"
* and a 40px "Hero" tier but those collapse into the
* shared md/lg slots without losing identity (§5).
*
* #Bind 6 — --focus-ring uses Focus Blue (#435ee5) at 30% opacity,
* NOT the schema's accent-tinted default. DESIGN.md §2
* binds focus to a dedicated blue (--comp-button-color-
* border-focus-outer-transparent: #435ee5) so the ring
* survives both the warm-red CTA fill and the warm-sand
* secondary surface — a red-tinted ring would disappear
* into Pinterest Red.
*
* #Bind 7 — --leading-body is 1.40 (DESIGN.md §3 Body) — tighter
* than the schema default 1.5 because Pinterest's
* information-dense pin grid pairs short body strings
* with image-first layouts; longer leading would shred
* the rhythm of pin metadata under photographs.
*
* #Bind 8 — --elev-raised is a plum-tinted whisper rather than a
* cool gray drop. DESIGN.md §6 commits to "minimal shadows
* — Pinterest is flat by design, depth from content".
* When a shadow is necessary (sticky panels, overlays),
* the tint matches the warm plum --fg so the elevation
* reads as part of the warm system instead of a cold
* halo.
*
* Brand-specific extensions: none in this revision. The Performance
* Purple (#6845ab) and Recommendation Purple (#7e238b) product-tier
* accents from DESIGN.md §2 stay inline at the tier-specific
* components that need them; promoting them to schema slots would
* encourage non-tier surfaces to reach for them.
* ─────────────────────────────────────────────────────────────────── */
:root {
/* ─── Surface (3 levels) ────────────────────────────────────────
* Canvas White is the page; Fog (#f6f6f3) is the warm light card
* tier; Sand Gray (#e5e5e0) is the warm secondary surface (the
* brand's named "secondary button" background). The neutrals lean
* olive/sand, never cool steel — that warmth is the identity. */
--bg: #ffffff;
--surface: #f6f6f3;
--surface-warm: #e5e5e0;
/* ─── Foreground ramp (4 levels) ────────────────────────────────
* Plum Black (#211922) carries every heading and primary body
* string — a warm near-black with a plum undertone. Pure black
* (#000000) is reserved for the secondary tier (button labels,
* high-contrast captions). Olive Gray (#62625b) is the muted
* description tone; Warm Silver (#91918c) is the disabled /
* metadata tone — also the brand's input-border color. */
--fg: #211922;
--fg-2: #000000;
--muted: #62625b;
--meta: #91918c;
/* ─── Border (2 levels) ─────────────────────────────────────────
* Pinterest is flat-by-design; borders appear sparingly. The
* default --border is the published "Border Disabled" tone
* (#c8c8c1) — soft, warm, doesn't compete with the photography.
* --border-soft is Warm Light (#e0e0d9), an even softer hairline
* for inner row separators. */
--border: #c8c8c1;
--border-soft: #e0e0d9;
/* ─── Accent ────────────────────────────────────────────────────
* Pinterest Red — the only brand accent, used for primary CTAs
* and the highest-signal brand moments. Cap at two visible uses
* per screen; when a third red element appears, neutralize one.
* Note that --accent-on is #000000 (not white): the brand's
* primary red button carries black text per DESIGN.md §4. */
--accent: #e60023;
--accent-on: #000000;
--accent-hover: color-mix(in oklab, var(--accent), black 8%);
--accent-active: color-mix(in oklab, var(--accent), black 14%);
/* ─── Semantic ──────────────────────────────────────────────────
* Error Red is the published Pinterest error value (DESIGN.md §2,
* #9e0a0a). Success and warn are not specified by the brand;
* they bind to desaturated warm values that survive the olive/
* sand canvas without competing with Pinterest Red. Keep total
* semantic-color pixels under five percent of any page. */
--success: #103c25; /* Green 700 — the brand's published green */
--warn: #c47700; /* burnt amber — warm-aligned, never tailwind yellow */
--danger: #9e0a0a; /* Error Red — DESIGN.md §2 */
/* ─── Typography — fonts ────────────────────────────────────────
* Pin Sans is the proprietary face that carries everything from
* 12px caption to 70px hero — no secondary display family, no
* monospace need beyond kbd. The fallback chain mirrors the
* brand's global stack including Japanese fallbacks
* (ヒラギノ角ゴ / メイリオ / ＭＳ Ｐゴシック) reflecting
* Pinterest's CJK reach. Display and body share the same stack
* — visual identity comes from the family itself. */
--font-display:
"Pin Sans", -apple-system, system-ui, "Segoe UI", Roboto, "Oxygen-Sans",
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", Ubuntu, Cantarell,
"Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica,
"ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", Arial,
sans-serif;
--font-body:
"Pin Sans", -apple-system, system-ui, "Segoe UI", Roboto, "Oxygen-Sans",
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", Ubuntu, Cantarell,
"Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica,
"ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", Arial,
sans-serif;
--font-mono:
ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco,
Consolas, monospace;
/* ─── Typography — type scale (px) ──────────────────────────────
* Derived from DESIGN.md §3 Hierarchy. The system clusters
* tightly between 12 and 16px for app-like density, jumps to
* 28px for the published Section Heading, and explodes to 70px
* for the Display Hero — the dramatic gap is the brand's voice.
* The intermediate lg/xl/3xl tiers fill in the curve so generic
* components have somewhere to land. */
--text-xs: 12px; /* Caption — small tags, footer disclaimer */
--text-sm: 14px; /* Caption Bold — metadata, button labels */
--text-base: 16px; /* Body — standard reading, nav links */
--text-lg: 18px; /* H3 / featured body */
--text-xl: 22px; /* H2 / subsection title */
--text-2xl: 28px; /* Section Heading — DESIGN.md §3 */
--text-3xl: 44px; /* H1 — hero subtitles, large numerals */
--text-4xl: 70px; /* Display Hero — DESIGN.md §3 */
/* ─── Typography — leading & tracking ───────────────────────────
* Body leads at 1.40 per DESIGN.md §3 — tighter than the schema
* default 1.5 because Pinterest's pin metadata is short and
* sits under photography. Display headings carry negative
* tracking (DESIGN.md "-1.2px at 28px" → -0.02em scales evenly
* across the display sizes); body and caption hold at zero. */
--leading-body: 1.4;
--leading-tight: 1.15;
--tracking-display: -0.02em;
/* ─── Spacing — base scale ──────────────────────────────────────
* 8px base unit per DESIGN.md §5. The brand publishes off-grid
* sub-pixel values (5.5, 7, 10, 11, 22) for fine icon alignment;
* the shared scale stays on the standard 4px grid — off-grid
* spacing belongs inline at the component level. */
--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 ────────────────────────────────────────────
* DESIGN.md §5 commits to "Large jumps: 32px → 80px → 100px for
* section spacing". 80px is the desktop default — generous
* breathing room between content blocks; the pin grid itself
* stays dense within the block. 32px is the phone floor. */
--section-y-desktop: 80px;
--section-y-tablet: 48px;
--section-y-phone: 32px;
/* ─── Radius ────────────────────────────────────────────────────
* The brand's signature soft-circle geometry. 16px is the
* workhorse (every button, every input — DESIGN.md §4) and
* lands on --radius-md. 12px (--radius-sm) is the brand's
* "Standard" small-card radius; 28px (--radius-lg) is the brand
* "Large" container radius for tab elements and hero panels.
* --radius-pill (9999px) carries circular action buttons and
* avatars (DESIGN.md §5 "Circle: 50%"). */
--radius-sm: 12px;
--radius-md: 16px;
--radius-lg: 28px;
--radius-pill: 9999px;
/* ─── Elevation ─────────────────────────────────────────────────
* Pinterest is flat-by-design — most surfaces sit on the canvas
* with no shadow at all (DESIGN.md §6). When elevation is
* necessary (overlays, sticky panels), the shadow is a plum-
* tinted whisper rather than a cool gray drop — the warmth of
* the system carries through into the elevation. */
--elev-flat: none;
--elev-ring: 0 0 0 1px var(--border);
--elev-raised: 0 4px 16px rgba(33, 25, 34, 0.06);
/* ─── Focus ring ────────────────────────────────────────────────
* Focus Blue (#435ee5) at 30% opacity — the brand's published
* focus color (DESIGN.md §2 --comp-button-color-border-focus-
* outer-transparent). A blue ring survives both the warm-red
* primary CTA fill and the warm-sand secondary surface; an
* accent-tinted ring would vanish into Pinterest Red. */
--focus-ring: 0 0 0 3px color-mix(in oklab, #435ee5, transparent 70%);
/* ─── Motion ────────────────────────────────────────────────────
* DESIGN.md did not specify transition timings (static
* extraction scope). We bind defaults consistent with the
* brand's friendly tactile feel: 150ms for micro-states, 200ms
* for general state changes. Standard easing — short,
* purposeful, no overshoot. */
--motion-fast: 150ms;
--motion-base: 200ms;
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
/* ─── Layout ────────────────────────────────────────────────────
* 1280px container — the standard magazine-y content width for
* hero, feature, and form sections. The masonry pin grid itself
* breathes wider on ultra-wide screens via its own column rules,
* but the shared container stays at 1280 because that is the
* geometry agents will most often generate (lifestyle landing
* pages, signup flows, marketing sections). Gutters tighten
* progressively per DESIGN.md §8 small-mobile clause. */
--container-max: 1280px;
--container-gutter-desktop: 32px;
--container-gutter-tablet: 24px;
--container-gutter-phone: 16px;
}