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/webflow/DESIGN-ar.md
+95
View File
@@ -0,0 +1,95 @@
# نظام تصميم مستوحى من Webflow
> Category: التصميم والإبداع
> منشئ مواقع مرئي. جمالية موقع تسويقي مصقول بنبرة زرقاء.
## 1. الطابع المرئي والأجواء
موقع Webflow منصة غنية بصرياً وموجهة للأدوات تُعبّر عن مفهوم "التصميم بلا كود" عبر أسطح بيضاء نظيفة، والأزرق المميز لـ Webflow（`#146ef5`）، وفلتة ألوان ثانوية ثرية（بنفسجي، وردي، أخضر، برتقالي، أصفر، أحمر）. خط WF Visual Sans Variable المخصص يُنشئ نظاماً طباعياً واثقاً ودقيقاً بوزن 600 للعناوين الكبيرة و500 للنص العادي.
**السمات الرئيسية：**
- لوحة بيضاء مع نص شبه أسود（`#080808`）
- أزرق Webflow（`#146ef5`）كلون العلامة التجارية والتفاعل الأساسي
- WF Visual Sans Variable — خط متغير مخصص بوزن 500–600
- فلتة ثانوية ثرية：بنفسجي `#7a3dff`، وردي `#ed52cb`، أخضر `#00d722`، برتقالي `#ff6b00`، أصفر `#ffae13`، أحمر `#ee1d36`
- نصف قطر حد محافظ 4px–8px — حاد، غير مستدير
- طبقات ظل متعددة（5 طبقات ظل متتالية）
- تسميات بأحرف كبيرة：10px–15px، وزن 500–600، تباعد حروف واسع（0.6px–1.5px）
- تأثير حركي translate(6px) عند تمرير المؤشر على الأزرار
## 2. فلتة الألوان والأدوار
### الأساسي
- **شبه أسود**（`#080808`）：النص الأساسي
- **أزرق Webflow**（`#146ef5`）：`--_color---primary--webflow-blue`، الـ CTA الأساسي والروابط
- **أزرق 400**（`#3b89ff`）：`--_color---primary--blue-400`، أزرق تفاعلي أفتح
- **أزرق 300**（`#006acc`）：`--_color---blue-300`، متغيّر أزرق أغمق
- **أزرق تمرير الزر**（`#0055d4`）：`--mkto-embed-color-button-hover`
### نبرات ثانوية
- **بنفسجي**（`#7a3dff`）：`--_color---secondary--purple`
- **وردي**（`#ed52cb`）：`--_color---secondary--pink`
- **أخضر**（`#00d722`）：`--_color---secondary--green`
- **برتقالي**（`#ff6b00`）：`--_color---secondary--orange`
- **أصفر**（`#ffae13`）：`--_color---secondary--yellow`
- **أحمر**（`#ee1d36`）：`--_color---secondary--red`
### المحايد
- **رمادي 800**（`#222222`）：نص ثانوي داكن
- **رمادي 700**（`#363636`）：نص متوسط
- **رمادي 300**（`#ababab`）：نص خافت، نص حيّز
- **رمادي متوسط**（`#5a5a5a`）：نص الرابط
- **رمادي الحد**（`#d8d8d8`）：الحدود، الفواصل
- **حد التمرير**（`#898989`）：الحد عند التمرير
### الظلال
- **تتالٍ بخمس طبقات**：`rgba(0,0,0,0) 0px 84px 24px, rgba(0,0,0,0.01) 0px 54px 22px, rgba(0,0,0,0.04) 0px 30px 18px, rgba(0,0,0,0.08) 0px 13px 13px, rgba(0,0,0,0.09) 0px 3px 7px`
## 3. قواعد الطباعة
### الخط：`WF Visual Sans Variable`، الاحتياطي：`Arial`
| الدور | الحجم | الوزن | ارتفاع السطر | تباعد الحروف | ملاحظات |
|------|------|--------|-------------|----------------|-------|
| بطل العرض | 80px | 600 | 1.04 | -0.8px | |
| عنوان القسم | 56px | 600 | 1.04 | normal | |
| العنوان الفرعي | 32px | 500 | 1.30 | normal | |
| عنوان الميزة | 24px | 500–600 | 1.30 | normal | |
| النص | 20px | 400–500 | 1.40–1.50 | normal | |
| النص المعياري | 16px | 400–500 | 1.60 | -0.16px | |
| الزر | 16px | 500 | 1.60 | -0.16px | |
| تسمية بأحرف كبيرة | 15px | 500 | 1.30 | 1.5px | uppercase |
| التعليق | 14px | 400–500 | 1.40–1.60 | normal | |
| شارة بأحرف كبيرة | 12.8px | 550 | 1.20 | normal | uppercase |
| ميكرو بأحرف كبيرة | 10px | 500–600 | 1.30 | 1px | uppercase |
| الكود：Inconsolata（خط أحادي المسافة المرافق）
## 4. تنسيق المكونات
### الأزرار
- شفاف：نص `#080808`، translate(6px) عند التمرير
- دائرة بيضاء：نصف قطر 50%، خلفية بيضاء
- شارة زرقاء：خلفية `#146ef5`، نصف قطر 4px، وزن 550
### البطاقات：`1px solid #d8d8d8`، نصف قطر 4px–8px
### الشارات：خلفية بصبغة زرقاء بشفافية 10%، نصف قطر 4px
## 5. التخطيط
- التباعد：مقياس كسري（1px، 2.4px، 3.2px، 4px، 5.6px، 6px، 7.2px، 8px، 9.6px، 12px، 16px، 24px）
- نصف القطر：2px، 4px، 8px، 50% — محافظ وحاد
- نقاط الكسر：479px، 768px، 992px
## 6. العمق：نظام ظلال متتالية بخمس طبقات
## 7. ما يجب وما لا يجب فعله
- يجب：استخدام WF Visual Sans Variable بوزن 500–600. الأزرق（`#146ef5`）لعناصر CTA. نصف قطر 4px. translate(6px) عند التمرير.
- لا يجب：تدوير العناصر الوظيفية أكثر من 8px. استخدام الألوان الثانوية على عناصر CTA الأساسية.
## 8. التجاوب：479px، 768px، 992px
## 9. دليل موجّه Agent
- النص：شبه أسود（`#080808`）
- CTA：أزرق Webflow（`#146ef5`）
- الخلفية：أبيض（`#ffffff`）
- الحد：`#d8d8d8`
- ثانوي：بنفسجي `#7a3dff`، وردي `#ed52cb`، أخضر `#00d722`
open-design/design-systems/webflow/DESIGN-de.md
+95
View File
@@ -0,0 +1,95 @@
# Von Webflow inspiriertes Designsystem
> Category: Design & Kreatives
> Visueller Web-Builder. Blau-akzentuierte, polierte Marketing-Site-Ästhetik.
## 1. Visuelles Thema & Atmosphäre
Die Webflow-Website ist eine visuell reichhaltige, werkzeugorientierte Plattform, die „Design ohne Code" durch saubere weiße Oberflächen, das charakteristische Webflow-Blau（`#146ef5`）und eine reichhaltige sekundäre Farbpalette（Lila, Pink, Grün, Orange, Gelb, Rot）kommuniziert. Die benutzerdefinierte Schrift WF Visual Sans Variable schafft mit Stärke 600 für Display-Text und 500 für den Fließtext ein selbstbewusstes, präzises Typografiesystem.
**Hauptmerkmale：**
- Weißes Canvas mit nahezu schwarzem（`#080808`）Text
- Webflow-Blau（`#146ef5`）als primäre Marken- und Interaktionsfarbe
- WF Visual Sans Variable——benutzerdefinierte variable Schrift mit Stärke 500–600
- Reichhaltige Sekundärpalette：Lila `#7a3dff`, Pink `#ed52cb`, Grün `#00d722`, Orange `#ff6b00`, Gelb `#ffae13`, Rot `#ee1d36`
- Konservative Rahmenradien von 4px–8px——scharf, nicht gerundet
- Mehrstufige Schatten-Stacks（5-schichtige kaskadierte Schatten）
- Großbuchstaben-Labels：10px–15px, Stärke 500–600, großzügiger Buchstabenabstand（0,6px–1,5px）
- translate(6px)-Hover-Animation auf Schaltflächen
## 2. Farbpalette & Rollen
### Primär
- **Nahezu Schwarz**（`#080808`）：Primärer Text
- **Webflow-Blau**（`#146ef5`）：`--_color---primary--webflow-blue`, primärer CTA und Links
- **Blau 400**（`#3b89ff`）：`--_color---primary--blue-400`, helleres interaktives Blau
- **Blau 300**（`#006acc`）：`--_color---blue-300`, dunklere Blauvariante
- **Schaltflächen-Hover-Blau**（`#0055d4`）：`--mkto-embed-color-button-hover`
### Sekundäre Akzente
- **Lila**（`#7a3dff`）：`--_color---secondary--purple`
- **Pink**（`#ed52cb`）：`--_color---secondary--pink`
- **Grün**（`#00d722`）：`--_color---secondary--green`
- **Orange**（`#ff6b00`）：`--_color---secondary--orange`
- **Gelb**（`#ffae13`）：`--_color---secondary--yellow`
- **Rot**（`#ee1d36`）：`--_color---secondary--red`
### Neutral
- **Grau 800**（`#222222`）：Dunkler Sekundärtext
- **Grau 700**（`#363636`）：Mittlerer Text
- **Grau 300**（`#ababab`）：Gedämpfter Text, Platzhalter
- **Mittelgrau**（`#5a5a5a`）：Linktext
- **Rahmengrau**（`#d8d8d8`）：Rahmen, Trennlinien
- **Rahmen-Hover**（`#898989`）：Hover-Rahmen
### Schatten
- **5-schichtiger Kaskade**：`rgba(0,0,0,0) 0px 84px 24px, rgba(0,0,0,0.01) 0px 54px 22px, rgba(0,0,0,0.04) 0px 30px 18px, rgba(0,0,0,0.08) 0px 13px 13px, rgba(0,0,0,0.09) 0px 3px 7px`
## 3. Typografieregeln
### Schrift：`WF Visual Sans Variable`, Fallback：`Arial`
| Rolle | Größe | Stärke | Zeilenhöhe | Buchstabenabstand | Hinweise |
|------|------|--------|-------------|----------------|-------|
| Display-Hero | 80px | 600 | 1,04 | -0,8px | |
| Abschnittsüberschrift | 56px | 600 | 1,04 | normal | |
| Unterüberschrift | 32px | 500 | 1,30 | normal | |
| Feature-Titel | 24px | 500–600 | 1,30 | normal | |
| Fließtext | 20px | 400–500 | 1,40–1,50 | normal | |
| Standard-Fließtext | 16px | 400–500 | 1,60 | -0,16px | |
| Schaltfläche | 16px | 500 | 1,60 | -0,16px | |
| Großbuchstaben-Label | 15px | 500 | 1,30 | 1,5px | uppercase |
| Beschriftung | 14px | 400–500 | 1,40–1,60 | normal | |
| Badge-Großbuchstaben | 12,8px | 550 | 1,20 | normal | uppercase |
| Mikro-Großbuchstaben | 10px | 500–600 | 1,30 | 1px | uppercase |
| Code：Inconsolata（begleitende Monospace-Schrift）
## 4. Komponenten-Styling
### Schaltflächen
- Transparent：Text `#080808`, translate(6px) beim Hover
- Weißer Kreis：Radius 50%, weißer Hintergrund
- Blauer Badge：`#146ef5` Hintergrund, Radius 4px, Stärke 550
### Karten：`1px solid #d8d8d8`, Radius 4px–8px
### Badges：Blaustichiger Hintergrund bei 10% Deckkraft, Radius 4px
## 5. Layout
- Abstände：Bruchzahlskala（1px, 2,4px, 3,2px, 4px, 5,6px, 6px, 7,2px, 8px, 9,6px, 12px, 16px, 24px）
- Radius：2px, 4px, 8px, 50%——konservativ, scharf
- Breakpoints：479px, 768px, 992px
## 6. Tiefe：5-schichtiges kaskadiertes Schattensystem
## 7. Was man tun und lassen sollte
- Tun：WF Visual Sans Variable mit Stärke 500–600 verwenden. Blau（`#146ef5`）für CTAs. Radius 4px. translate(6px) beim Hover.
- Lassen：Funktionale Elemente nicht über 8px runden. Sekundärfarben nicht für primäre CTAs verwenden.
## 8. Responsiv：479px, 768px, 992px
## 9. Agent-Prompt-Leitfaden
- Text：Nahezu Schwarz（`#080808`）
- CTA：Webflow-Blau（`#146ef5`）
- Hintergrund：Weiß（`#ffffff`）
- Rahmen：`#d8d8d8`
- Sekundär：Lila `#7a3dff`, Pink `#ed52cb`, Grün `#00d722`
open-design/design-systems/webflow/DESIGN-es.md
+95
View File
@@ -0,0 +1,95 @@
# Sistema de diseño inspirado en Webflow
> Category: Diseño y creatividad
> Constructor web visual. Estética de sitio de marketing pulida con acento azul.
## 1. Tema visual y atmósfera
El sitio web de Webflow es una plataforma visualmente rica y orientada a herramientas que comunica el "diseño sin código" a través de superficies blancas limpias, el característico azul Webflow（`#146ef5`）y una rica paleta de colores secundarios（violeta, rosa, verde, naranja, amarillo, rojo）. La fuente personalizada WF Visual Sans Variable crea un sistema tipográfico seguro y preciso con peso 600 para el display y 500 para el cuerpo.
**Características clave：**
- Lienzo blanco con texto casi negro（`#080808`）
- Azul Webflow（`#146ef5`）como color de marca principal e interactivo
- WF Visual Sans Variable — fuente variable personalizada con peso 500–600
- Paleta secundaria rica：violeta `#7a3dff`, rosa `#ed52cb`, verde `#00d722`, naranja `#ff6b00`, amarillo `#ffae13`, rojo `#ee1d36`
- Radio de borde conservador de 4px–8px — nítido, no redondeado
- Apilamientos de sombra multicapa（sombras en cascada de 5 capas）
- Etiquetas en mayúsculas：10px–15px, peso 500–600, espaciado amplio（0,6px–1,5px）
- Animación translate(6px) al pasar el cursor sobre los botones
## 2. Paleta de colores y roles
### Primario
- **Casi Negro**（`#080808`）：Texto principal
- **Azul Webflow**（`#146ef5`）：`--_color---primary--webflow-blue`, CTA principal y enlaces
- **Azul 400**（`#3b89ff`）：`--_color---primary--blue-400`, azul interactivo más claro
- **Azul 300**（`#006acc`）：`--_color---blue-300`, variante de azul más oscuro
- **Azul hover del botón**（`#0055d4`）：`--mkto-embed-color-button-hover`
### Acentos secundarios
- **Violeta**（`#7a3dff`）：`--_color---secondary--purple`
- **Rosa**（`#ed52cb`）：`--_color---secondary--pink`
- **Verde**（`#00d722`）：`--_color---secondary--green`
- **Naranja**（`#ff6b00`）：`--_color---secondary--orange`
- **Amarillo**（`#ffae13`）：`--_color---secondary--yellow`
- **Rojo**（`#ee1d36`）：`--_color---secondary--red`
### Neutro
- **Gris 800**（`#222222`）：Texto secundario oscuro
- **Gris 700**（`#363636`）：Texto medio
- **Gris 300**（`#ababab`）：Texto atenuado, marcador de posición
- **Gris medio**（`#5a5a5a`）：Texto de enlace
- **Gris borde**（`#d8d8d8`）：Bordes, divisores
- **Borde hover**（`#898989`）：Borde al pasar el cursor
### Sombras
- **Cascada de 5 capas**：`rgba(0,0,0,0) 0px 84px 24px, rgba(0,0,0,0.01) 0px 54px 22px, rgba(0,0,0,0.04) 0px 30px 18px, rgba(0,0,0,0.08) 0px 13px 13px, rgba(0,0,0,0.09) 0px 3px 7px`
## 3. Reglas tipográficas
### Fuente：`WF Visual Sans Variable`, alternativa：`Arial`
| Rol | Tamaño | Peso | Altura de línea | Espaciado de letras | Notas |
|------|------|--------|-------------|----------------|-------|
| Hero de display | 80px | 600 | 1,04 | -0,8px | |
| Encabezado de sección | 56px | 600 | 1,04 | normal | |
| Subencabezado | 32px | 500 | 1,30 | normal | |
| Título de función | 24px | 500–600 | 1,30 | normal | |
| Cuerpo | 20px | 400–500 | 1,40–1,50 | normal | |
| Cuerpo estándar | 16px | 400–500 | 1,60 | -0,16px | |
| Botón | 16px | 500 | 1,60 | -0,16px | |
| Etiqueta en mayúsculas | 15px | 500 | 1,30 | 1,5px | uppercase |
| Leyenda | 14px | 400–500 | 1,40–1,60 | normal | |
| Badge en mayúsculas | 12,8px | 550 | 1,20 | normal | uppercase |
| Micro en mayúsculas | 10px | 500–600 | 1,30 | 1px | uppercase |
| Código：Inconsolata（fuente monoespaciada complementaria）
## 4. Estilos de componentes
### Botones
- Transparente：texto `#080808`, translate(6px) al pasar el cursor
- Círculo blanco：radio 50%, fondo blanco
- Badge azul：fondo `#146ef5`, radio 4px, peso 550
### Tarjetas：`1px solid #d8d8d8`, radio 4px–8px
### Badges：fondo con tinte azul al 10% de opacidad, radio 4px
## 5. Maquetación
- Espaciado：escala fraccionaria（1px, 2,4px, 3,2px, 4px, 5,6px, 6px, 7,2px, 8px, 9,6px, 12px, 16px, 24px）
- Radio：2px, 4px, 8px, 50% — conservador, nítido
- Puntos de quiebre：479px, 768px, 992px
## 6. Profundidad：sistema de sombras en cascada de 5 capas
## 7. Lo que se debe y no se debe hacer
- Hacer：Usar WF Visual Sans Variable con peso 500–600. Azul（`#146ef5`）para los CTA. Radio 4px. translate(6px) al pasar el cursor.
- No hacer：Redondear elementos funcionales más de 8px. Usar colores secundarios en CTA primarios.
## 8. Responsive：479px, 768px, 992px
## 9. Guía de prompt para Agent
- Texto：Casi Negro（`#080808`）
- CTA：Azul Webflow（`#146ef5`）
- Fondo：Blanco（`#ffffff`）
- Borde：`#d8d8d8`
- Secundario：Violeta `#7a3dff`, Rosa `#ed52cb`, Verde `#00d722`
open-design/design-systems/webflow/DESIGN-fr.md
+95
View File
@@ -0,0 +1,95 @@
# Système de design inspiré de Webflow
> Category: Design & Créatif
> Constructeur web visuel. Esthétique de site marketing soignée avec accents bleus.
## 1. Thème visuel & atmosphère
Le site de Webflow est une plateforme visuellement riche et orientée outil qui communique le concept de « design sans code » à travers des surfaces blanches épurées, le bleu signature de Webflow（`#146ef5`）et une palette de couleurs secondaires abondante（violet, rose, vert, orange, jaune, rouge）. La police personnalisée WF Visual Sans Variable crée un système typographique confiant et précis, avec un grammage 600 pour l'affichage et 500 pour le corps de texte.
**Caractéristiques clés :**
- Canvas blanc avec texte presque noir（`#080808`）
- Bleu Webflow（`#146ef5`）comme couleur de marque et d'interaction principale
- WF Visual Sans Variable — police variable personnalisée avec un grammage 500–600
- Palette secondaire riche : violet `#7a3dff`, rose `#ed52cb`, vert `#00d722`, orange `#ff6b00`, jaune `#ffae13`, rouge `#ee1d36`
- Rayon de bordure conservateur de 4px–8px — net, non arrondi
- Empilements d'ombres multicouches（5 ombres en cascade）
- Étiquettes en majuscules : 10px–15px, grammage 500–600, espacement large（0,6px–1,5px）
- Animation translate(6px) au survol des boutons
## 2. Palette de couleurs & rôles
### Primaire
- **Presque Noir**（`#080808`）: Texte principal
- **Bleu Webflow**（`#146ef5`）: `--_color---primary--webflow-blue`, CTA principal et liens
- **Bleu 400**（`#3b89ff`）: `--_color---primary--blue-400`, bleu interactif plus clair
- **Bleu 300**（`#006acc`）: `--_color---blue-300`, variante de bleu plus foncée
- **Bleu survol bouton**（`#0055d4`）: `--mkto-embed-color-button-hover`
### Accents secondaires
- **Violet**（`#7a3dff`）: `--_color---secondary--purple`
- **Rose**（`#ed52cb`）: `--_color---secondary--pink`
- **Vert**（`#00d722`）: `--_color---secondary--green`
- **Orange**（`#ff6b00`）: `--_color---secondary--orange`
- **Jaune**（`#ffae13`）: `--_color---secondary--yellow`
- **Rouge**（`#ee1d36`）: `--_color---secondary--red`
### Neutre
- **Gris 800**（`#222222`）: Texte secondaire foncé
- **Gris 700**（`#363636`）: Texte intermédiaire
- **Gris 300**（`#ababab`）: Texte atténué, espace réservé
- **Gris moyen**（`#5a5a5a`）: Texte des liens
- **Gris bordure**（`#d8d8d8`）: Bordures, séparateurs
- **Bordure survol**（`#898989`）: Bordure au survol
### Ombres
- **Cascade à 5 couches** : `rgba(0,0,0,0) 0px 84px 24px, rgba(0,0,0,0.01) 0px 54px 22px, rgba(0,0,0,0.04) 0px 30px 18px, rgba(0,0,0,0.08) 0px 13px 13px, rgba(0,0,0,0.09) 0px 3px 7px`
## 3. Règles typographiques
### Police : `WF Visual Sans Variable`, repli : `Arial`
| Rôle | Taille | Grammage | Hauteur de ligne | Espacement | Notes |
|------|------|--------|-------------|----------------|-------|
| Hero d'affichage | 80px | 600 | 1,04 | -0,8px | |
| Titre de section | 56px | 600 | 1,04 | normal | |
| Sous-titre | 32px | 500 | 1,30 | normal | |
| Titre de fonctionnalité | 24px | 500–600 | 1,30 | normal | |
| Corps | 20px | 400–500 | 1,40–1,50 | normal | |
| Corps standard | 16px | 400–500 | 1,60 | -0,16px | |
| Bouton | 16px | 500 | 1,60 | -0,16px | |
| Étiquette majuscule | 15px | 500 | 1,30 | 1,5px | uppercase |
| Légende | 14px | 400–500 | 1,40–1,60 | normal | |
| Badge majuscule | 12,8px | 550 | 1,20 | normal | uppercase |
| Micro majuscule | 10px | 500–600 | 1,30 | 1px | uppercase |
| Code : Inconsolata（police monospace complémentaire）
## 4. Style des composants
### Boutons
- Transparent : texte `#080808`, translate(6px) au survol
- Cercle blanc : rayon 50%, fond blanc
- Badge bleu : fond `#146ef5`, rayon 4px, grammage 550
### Cartes : `1px solid #d8d8d8`, rayon 4px–8px
### Badges : fond teinté bleu à 10% d'opacité, rayon 4px
## 5. Mise en page
- Espacement : échelle fractionnelle（1px, 2,4px, 3,2px, 4px, 5,6px, 6px, 7,2px, 8px, 9,6px, 12px, 16px, 24px）
- Rayon : 2px, 4px, 8px, 50% — conservateur, net
- Points de rupture : 479px, 768px, 992px
## 6. Profondeur : système d'ombres en cascade à 5 couches
## 7. À faire et à éviter
- À faire : Utiliser WF Visual Sans Variable avec un grammage 500–600. Bleu（`#146ef5`）pour les CTA. Rayon 4px. translate(6px) au survol.
- À éviter : Ne pas arrondir les éléments fonctionnels au-delà de 8px. Ne pas utiliser les couleurs secondaires sur les CTA principaux.
## 8. Responsive : 479px, 768px, 992px
## 9. Guide de prompt Agent
- Texte : Presque Noir（`#080808`）
- CTA : Bleu Webflow（`#146ef5`）
- Arrière-plan : Blanc（`#ffffff`）
- Bordure : `#d8d8d8`
- Secondaire : Violet `#7a3dff`, Rose `#ed52cb`, Vert `#00d722`
open-design/design-systems/webflow/DESIGN-id.md
+95
View File
@@ -0,0 +1,95 @@
# Sistem desain terinspirasi Webflow
> Category: Desain & Kreatif
> Pembangun web visual. Estetika situs marketing yang halus dengan aksen biru.
## 1. Tema visual & Suasana
Situs web Webflow adalah platform yang kaya visual dan berorientasi pada alat, yang mengkomunikasikan "desain tanpa kode" melalui permukaan putih bersih, biru khas Webflow（`#146ef5`）, dan palet warna sekunder yang kaya（ungu, merah muda, hijau, oranye, kuning, merah）. Font kustom WF Visual Sans Variable menciptakan sistem tipografi yang percaya diri dan presisi dengan bobot 600 untuk display dan 500 untuk isi teks.
**Karakteristik utama：**
- Kanvas putih dengan teks hampir hitam（`#080808`）
- Biru Webflow（`#146ef5`）sebagai warna merek utama dan interaktif
- WF Visual Sans Variable — font variabel kustom dengan bobot 500–600
- Palet sekunder yang kaya：ungu `#7a3dff`, merah muda `#ed52cb`, hijau `#00d722`, oranye `#ff6b00`, kuning `#ffae13`, merah `#ee1d36`
- Radius batas konservatif 4px–8px — tajam, tidak bulat
- Tumpukan bayangan berlapis（5 bayangan bertingkat）
- Label huruf kapital：10px–15px, bobot 500–600, jarak huruf lebar（0,6px–1,5px）
- Animasi translate(6px) saat hover pada tombol
## 2. Palet warna & Peran
### Utama
- **Hampir Hitam**（`#080808`）：Teks utama
- **Biru Webflow**（`#146ef5`）：`--_color---primary--webflow-blue`, CTA utama dan tautan
- **Biru 400**（`#3b89ff`）：`--_color---primary--blue-400`, biru interaktif lebih terang
- **Biru 300**（`#006acc`）：`--_color---blue-300`, varian biru lebih gelap
- **Biru hover tombol**（`#0055d4`）：`--mkto-embed-color-button-hover`
### Aksen sekunder
- **Ungu**（`#7a3dff`）：`--_color---secondary--purple`
- **Merah muda**（`#ed52cb`）：`--_color---secondary--pink`
- **Hijau**（`#00d722`）：`--_color---secondary--green`
- **Oranye**（`#ff6b00`）：`--_color---secondary--orange`
- **Kuning**（`#ffae13`）：`--_color---secondary--yellow`
- **Merah**（`#ee1d36`）：`--_color---secondary--red`
### Netral
- **Abu 800**（`#222222`）：Teks sekunder gelap
- **Abu 700**（`#363636`）：Teks tengah
- **Abu 300**（`#ababab`）：Teks redup, placeholder
- **Abu tengah**（`#5a5a5a`）：Teks tautan
- **Abu batas**（`#d8d8d8`）：Batas, pembagi
- **Batas hover**（`#898989`）：Batas saat hover
### Bayangan
- **Bertingkat 5 lapis**：`rgba(0,0,0,0) 0px 84px 24px, rgba(0,0,0,0.01) 0px 54px 22px, rgba(0,0,0,0.04) 0px 30px 18px, rgba(0,0,0,0.08) 0px 13px 13px, rgba(0,0,0,0.09) 0px 3px 7px`
## 3. Aturan tipografi
### Font：`WF Visual Sans Variable`, cadangan：`Arial`
| Peran | Ukuran | Bobot | Tinggi baris | Jarak huruf | Catatan |
|------|------|--------|-------------|----------------|-------|
| Hero display | 80px | 600 | 1,04 | -0,8px | |
| Judul bagian | 56px | 600 | 1,04 | normal | |
| Sub-judul | 32px | 500 | 1,30 | normal | |
| Judul fitur | 24px | 500–600 | 1,30 | normal | |
| Isi | 20px | 400–500 | 1,40–1,50 | normal | |
| Isi standar | 16px | 400–500 | 1,60 | -0,16px | |
| Tombol | 16px | 500 | 1,60 | -0,16px | |
| Label huruf kapital | 15px | 500 | 1,30 | 1,5px | uppercase |
| Keterangan | 14px | 400–500 | 1,40–1,60 | normal | |
| Lencana huruf kapital | 12,8px | 550 | 1,20 | normal | uppercase |
| Mikro huruf kapital | 10px | 500–600 | 1,30 | 1px | uppercase |
| Kode：Inconsolata（font monospace pendamping）
## 4. Gaya komponen
### Tombol
- Transparan：teks `#080808`, translate(6px) saat hover
- Lingkaran putih：radius 50%, latar putih
- Lencana biru：latar `#146ef5`, radius 4px, bobot 550
### Kartu：`1px solid #d8d8d8`, radius 4px–8px
### Lencana：latar bernuansa biru 10% opasitas, radius 4px
## 5. Tata letak
- Jarak：skala fraksional（1px, 2,4px, 3,2px, 4px, 5,6px, 6px, 7,2px, 8px, 9,6px, 12px, 16px, 24px）
- Radius：2px, 4px, 8px, 50% — konservatif, tajam
- Titik putus：479px, 768px, 992px
## 6. Kedalaman：sistem bayangan bertingkat 5 lapis
## 7. Yang harus dan tidak boleh dilakukan
- Lakukan：Gunakan WF Visual Sans Variable dengan bobot 500–600. Biru（`#146ef5`）untuk CTA. Radius 4px. translate(6px) saat hover.
- Hindari：Membulatkan elemen fungsional lebih dari 8px. Menggunakan warna sekunder pada CTA utama.
## 8. Responsif：479px, 768px, 992px
## 9. Panduan prompt untuk Agent
- Teks：Hampir Hitam（`#080808`）
- CTA：Biru Webflow（`#146ef5`）
- Latar belakang：Putih（`#ffffff`）
- Batas：`#d8d8d8`
- Sekunder：Ungu `#7a3dff`, Merah muda `#ed52cb`, Hijau `#00d722`
open-design/design-systems/webflow/DESIGN-it.md
+95
View File
@@ -0,0 +1,95 @@
# Sistema di design ispirato a Webflow
> Category: Design e creatività
> Costruttore web visuale. Estetica di sito marketing curata con accenti blu.
## 1. Tema visivo e atmosfera
Il sito di Webflow è una piattaforma visivamente ricca e orientata agli strumenti che comunica il "design senza codice" attraverso superfici bianche pulite, il caratteristico blu Webflow（`#146ef5`）e una ricca tavolozza di colori secondari（viola, rosa, verde, arancione, giallo, rosso）. Il font personalizzato WF Visual Sans Variable crea un sistema tipografico sicuro e preciso con peso 600 per il display e 500 per il corpo del testo.
**Caratteristiche principali：**
- Canvas bianco con testo quasi nero（`#080808`）
- Blu Webflow（`#146ef5`）come colore del brand principale e interattivo
- WF Visual Sans Variable — font variabile personalizzato con peso 500–600
- Tavolozza secondaria ricca：viola `#7a3dff`, rosa `#ed52cb`, verde `#00d722`, arancione `#ff6b00`, giallo `#ffae13`, rosso `#ee1d36`
- Raggio del bordo conservativo 4px–8px — netto, non arrotondato
- Stack di ombre a più livelli（5 ombre in cascata）
- Etichette in maiuscolo：10px–15px, peso 500–600, spaziatura ampia（0,6px–1,5px）
- Animazione translate(6px) al passaggio del cursore sui pulsanti
## 2. Palette colori e ruoli
### Primario
- **Quasi Nero**（`#080808`）：Testo principale
- **Blu Webflow**（`#146ef5`）：`--_color---primary--webflow-blue`, CTA principale e link
- **Blu 400**（`#3b89ff`）：`--_color---primary--blue-400`, blu interattivo più chiaro
- **Blu 300**（`#006acc`）：`--_color---blue-300`, variante blu più scura
- **Blu hover pulsante**（`#0055d4`）：`--mkto-embed-color-button-hover`
### Accenti secondari
- **Viola**（`#7a3dff`）：`--_color---secondary--purple`
- **Rosa**（`#ed52cb`）：`--_color---secondary--pink`
- **Verde**（`#00d722`）：`--_color---secondary--green`
- **Arancione**（`#ff6b00`）：`--_color---secondary--orange`
- **Giallo**（`#ffae13`）：`--_color---secondary--yellow`
- **Rosso**（`#ee1d36`）：`--_color---secondary--red`
### Neutro
- **Grigio 800**（`#222222`）：Testo secondario scuro
- **Grigio 700**（`#363636`）：Testo intermedio
- **Grigio 300**（`#ababab`）：Testo attenuato, segnaposto
- **Grigio medio**（`#5a5a5a`）：Testo dei link
- **Grigio bordo**（`#d8d8d8`）：Bordi, divisori
- **Bordo hover**（`#898989`）：Bordo al passaggio del cursore
### Ombre
- **Cascata a 5 livelli**：`rgba(0,0,0,0) 0px 84px 24px, rgba(0,0,0,0.01) 0px 54px 22px, rgba(0,0,0,0.04) 0px 30px 18px, rgba(0,0,0,0.08) 0px 13px 13px, rgba(0,0,0,0.09) 0px 3px 7px`
## 3. Regole tipografiche
### Font：`WF Visual Sans Variable`, alternativa：`Arial`
| Ruolo | Dimensione | Peso | Altezza riga | Spaziatura | Note |
|------|------|--------|-------------|----------------|-------|
| Hero display | 80px | 600 | 1,04 | -0,8px | |
| Intestazione sezione | 56px | 600 | 1,04 | normal | |
| Sottotitolo | 32px | 500 | 1,30 | normal | |
| Titolo funzionalità | 24px | 500–600 | 1,30 | normal | |
| Corpo | 20px | 400–500 | 1,40–1,50 | normal | |
| Corpo standard | 16px | 400–500 | 1,60 | -0,16px | |
| Pulsante | 16px | 500 | 1,60 | -0,16px | |
| Etichetta maiuscolo | 15px | 500 | 1,30 | 1,5px | uppercase |
| Didascalia | 14px | 400–500 | 1,40–1,60 | normal | |
| Badge maiuscolo | 12,8px | 550 | 1,20 | normal | uppercase |
| Micro maiuscolo | 10px | 500–600 | 1,30 | 1px | uppercase |
| Codice：Inconsolata（font monospaziato complementare）
## 4. Stile dei componenti
### Pulsanti
- Trasparente：testo `#080808`, translate(6px) al passaggio del cursore
- Cerchio bianco：raggio 50%, sfondo bianco
- Badge blu：sfondo `#146ef5`, raggio 4px, peso 550
### Schede：`1px solid #d8d8d8`, raggio 4px–8px
### Badge：sfondo con tinta blu al 10% di opacità, raggio 4px
## 5. Layout
- Spaziatura：scala frazionaria（1px, 2,4px, 3,2px, 4px, 5,6px, 6px, 7,2px, 8px, 9,6px, 12px, 16px, 24px）
- Raggio：2px, 4px, 8px, 50% — conservativo, netto
- Breakpoint：479px, 768px, 992px
## 6. Profondità：sistema di ombre in cascata a 5 livelli
## 7. Da fare e da evitare
- Da fare：Usare WF Visual Sans Variable con peso 500–600. Blu（`#146ef5`）per i CTA. Raggio 4px. translate(6px) al passaggio del cursore.
- Da evitare：Arrotondare gli elementi funzionali oltre 8px. Usare colori secondari sui CTA principali.
## 8. Responsivo：479px, 768px, 992px
## 9. Guida al prompt per Agent
- Testo：Quasi Nero（`#080808`）
- CTA：Blu Webflow（`#146ef5`）
- Sfondo：Bianco（`#ffffff`）
- Bordo：`#d8d8d8`
- Secondario：Viola `#7a3dff`, Rosa `#ed52cb`, Verde `#00d722`
open-design/design-systems/webflow/DESIGN-ja.md
+95
View File
@@ -0,0 +1,95 @@
# Webflow にインスパイアされたデザインシステム
> Category: デザイン・クリエイティブ
> ビジュアル Web ビルダー。ブルーアクセントの洗練されたマーケティングサイト美学。
## 1. ビジュアルテーマと雰囲気
Webflow のウェブサイトは、視覚的に豊かなツール主体のプラットフォームです。クリーンな白いサーフェス、シグネチャカラーの Webflow ブルー（`#146ef5`）、そして豊富なセカンダリカラーパレット（パープル、ピンク、グリーン、オレンジ、イエロー、レッド）を通じて「コードなしでデザインする」という世界観を伝えています。カスタムの WF Visual Sans Variable フォントは、ディスプレイにウェイト 600、本文にウェイト 500 を使用し、自信に満ちた精密なタイポグラフィシステムを形成しています。
**主な特徴：**
- ニアブラック（`#080808`）のテキストを乗せたホワイトキャンバス
- Webflow ブルー（`#146ef5`）をプライマリブランドカラーおよびインタラクティブカラーとして使用
- WF Visual Sans Variable——ウェイト 500～600 のカスタム可変フォント
- 豊富なセカンダリパレット：パープル `#7a3dff`、ピンク `#ed52cb`、グリーン `#00d722`、オレンジ `#ff6b00`、イエロー `#ffae13`、レッド `#ee1d36`
- 控えめな 4px～8px の角丸——丸みを帯びず、シャープな印象
- 多層シャドウスタック（5 層カスケードシャドウ）
- 大文字ラベル：10px～15px、ウェイト 500～600、広めのレタースペーシング（0.6px～1.5px）
- ボタンのホバー時に translate(6px) アニメーション
## 2. カラーパレットと役割
### プライマリ
- **ニアブラック**（`#080808`）：プライマリテキスト
- **Webflow ブルー**（`#146ef5`）：`--_color---primary--webflow-blue`、プライマリ CTA およびリンク
- **ブルー 400**（`#3b89ff`）：`--_color---primary--blue-400`、明るめのインタラクティブブルー
- **ブルー 300**（`#006acc`）：`--_color---blue-300`、暗めのブルーバリアント
- **ボタンホバーブルー**（`#0055d4`）：`--mkto-embed-color-button-hover`
### セカンダリアクセント
- **パープル**（`#7a3dff`）：`--_color---secondary--purple`
- **ピンク**（`#ed52cb`）：`--_color---secondary--pink`
- **グリーン**（`#00d722`）：`--_color---secondary--green`
- **オレンジ**（`#ff6b00`）：`--_color---secondary--orange`
- **イエロー**（`#ffae13`）：`--_color---secondary--yellow`
- **レッド**（`#ee1d36`）：`--_color---secondary--red`
### ニュートラル
- **グレー 800**（`#222222`）：ダークセカンダリテキスト
- **グレー 700**（`#363636`）：ミッドテキスト
- **グレー 300**（`#ababab`）：ミュートテキスト、プレースホルダー
- **ミッドグレー**（`#5a5a5a`）：リンクテキスト
- **ボーダーグレー**（`#d8d8d8`）：ボーダー、ディバイダー
- **ボーダーホバー**（`#898989`）：ホバー時のボーダー
### シャドウ
- **5 層カスケード**：`rgba(0,0,0,0) 0px 84px 24px, rgba(0,0,0,0.01) 0px 54px 22px, rgba(0,0,0,0.04) 0px 30px 18px, rgba(0,0,0,0.08) 0px 13px 13px, rgba(0,0,0,0.09) 0px 3px 7px`
## 3. タイポグラフィルール
### フォント：`WF Visual Sans Variable`、フォールバック：`Arial`
| 役割 | サイズ | ウェイト | 行高 | レタースペーシング | 備考 |
|------|------|--------|-------------|----------------|-------|
| ディスプレイヒーロー | 80px | 600 | 1.04 | -0.8px | |
| セクション見出し | 56px | 600 | 1.04 | normal | |
| サブ見出し | 32px | 500 | 1.30 | normal | |
| フィーチャータイトル | 24px | 500–600 | 1.30 | normal | |
| 本文 | 20px | 400–500 | 1.40–1.50 | normal | |
| 標準本文 | 16px | 400–500 | 1.60 | -0.16px | |
| ボタン | 16px | 500 | 1.60 | -0.16px | |
| 大文字ラベル | 15px | 500 | 1.30 | 1.5px | uppercase |
| キャプション | 14px | 400–500 | 1.40–1.60 | normal | |
| バッジ大文字 | 12.8px | 550 | 1.20 | normal | uppercase |
| マイクロ大文字 | 10px | 500–600 | 1.30 | 1px | uppercase |
| コード：Inconsolata（専用等幅フォント）
## 4. コンポーネントスタイリング
### ボタン
- 透明：テキスト `#080808`、ホバー時 translate(6px)
- ホワイトサークル：radius 50%、白背景
- ブルーバッジ：`#146ef5` 背景、radius 4px、ウェイト 550
### カード：`1px solid #d8d8d8`、radius 4px～8px
### バッジ：ブルーがかった背景、不透明度 10%、radius 4px
## 5. レイアウト
- スペーシング：小数スケール（1px、2.4px、3.2px、4px、5.6px、6px、7.2px、8px、9.6px、12px、16px、24px）
- 角丸：2px、4px、8px、50%——控えめでシャープ
- ブレークポイント：479px、768px、992px
## 6. 深度：5 層カスケードシャドウシステム
## 7. すべきこととすべきでないこと
- すべきこと：ウェイト 500～600 の WF Visual Sans Variable を使用する。CTA にはブルー（`#146ef5`）を使用する。角丸 4px。ホバー時 translate(6px)。
- すべきでないこと：機能的な要素の角丸を 8px 以上にしない。プライマリ CTA にセカンダリカラーを使用しない。
## 8. レスポンシブ：479px、768px、992px
## 9. Agent プロンプトガイド
- テキスト：ニアブラック（`#080808`）
- CTA：Webflow ブルー（`#146ef5`）
- 背景：ホワイト（`#ffffff`）
- ボーダー：`#d8d8d8`
- セカンダリ：パープル `#7a3dff`、ピンク `#ed52cb`、グリーン `#00d722`
open-design/design-systems/webflow/DESIGN-ko.md
+95
View File
@@ -0,0 +1,95 @@
# Webflow에서 영감을 받은 디자인 시스템
> Category: 디자인 & 크리에이티브
> 비주얼 웹 빌더. 블루 액센트의 세련된 마케팅 사이트 미학.
## 1. 비주얼 테마 & 분위기
Webflow 웹사이트는 시각적으로 풍부하고 도구 중심의 플랫폼으로, 깔끔한 흰색 배경, 시그니처 Webflow 블루（`#146ef5`）, 그리고 풍부한 보조 색상 팔레트（퍼플, 핑크, 그린, 오렌지, 옐로, 레드）를 통해 "코드 없이 디자인하기"를 전달합니다. 커스텀 WF Visual Sans Variable 폰트는 디스플레이에 웨이트 600, 본문에 웨이트 500을 사용해 자신감 있고 정밀한 타이포그래피 시스템을 구성합니다.
**주요 특징：**
- 화이트 캔버스에 니어 블랙（`#080808`）텍스트
- Webflow 블루（`#146ef5`）를 프라이머리 브랜드 & 인터랙티브 색상으로 사용
- WF Visual Sans Variable——웨이트 500–600의 커스텀 가변 폰트
- 풍부한 보조 팔레트：퍼플 `#7a3dff`, 핑크 `#ed52cb`, 그린 `#00d722`, 오렌지 `#ff6b00`, 옐로 `#ffae13`, 레드 `#ee1d36`
- 보수적인 4px–8px 보더 반경——날카롭고 둥글지 않음
- 다층 그림자 스택（5단계 캐스케이딩 그림자）
- 대문자 레이블：10px–15px, 웨이트 500–600, 넓은 자간（0.6px–1.5px）
- 버튼 hover 시 translate(6px) 애니메이션
## 2. 색상 팔레트 & 역할
### 프라이머리
- **니어 블랙**（`#080808`）：프라이머리 텍스트
- **Webflow 블루**（`#146ef5`）：`--_color---primary--webflow-blue`, 프라이머리 CTA 및 링크
- **블루 400**（`#3b89ff`）：`--_color---primary--blue-400`, 밝은 인터랙티브 블루
- **블루 300**（`#006acc`）：`--_color---blue-300`, 어두운 블루 변형
- **버튼 호버 블루**（`#0055d4`）：`--mkto-embed-color-button-hover`
### 보조 액센트
- **퍼플**（`#7a3dff`）：`--_color---secondary--purple`
- **핑크**（`#ed52cb`）：`--_color---secondary--pink`
- **그린**（`#00d722`）：`--_color---secondary--green`
- **오렌지**（`#ff6b00`）：`--_color---secondary--orange`
- **옐로**（`#ffae13`）：`--_color---secondary--yellow`
- **레드**（`#ee1d36`）：`--_color---secondary--red`
### 뉴트럴
- **그레이 800**（`#222222`）：다크 보조 텍스트
- **그레이 700**（`#363636`）：미드 텍스트
- **그레이 300**（`#ababab`）：음소거 텍스트, 플레이스홀더
- **미드 그레이**（`#5a5a5a`）：링크 텍스트
- **보더 그레이**（`#d8d8d8`）：보더, 디바이더
- **보더 호버**（`#898989`）：호버 보더
### 그림자
- **5단계 캐스케이드**：`rgba(0,0,0,0) 0px 84px 24px, rgba(0,0,0,0.01) 0px 54px 22px, rgba(0,0,0,0.04) 0px 30px 18px, rgba(0,0,0,0.08) 0px 13px 13px, rgba(0,0,0,0.09) 0px 3px 7px`
## 3. 타이포그래피 규칙
### 폰트：`WF Visual Sans Variable`, 폴백：`Arial`
| 역할 | 크기 | 웨이트 | 줄 높이 | 자간 | 비고 |
|------|------|--------|-------------|----------------|-------|
| 디스플레이 히어로 | 80px | 600 | 1.04 | -0.8px | |
| 섹션 제목 | 56px | 600 | 1.04 | normal | |
| 서브 제목 | 32px | 500 | 1.30 | normal | |
| 기능 타이틀 | 24px | 500–600 | 1.30 | normal | |
| 본문 | 20px | 400–500 | 1.40–1.50 | normal | |
| 표준 본문 | 16px | 400–500 | 1.60 | -0.16px | |
| 버튼 | 16px | 500 | 1.60 | -0.16px | |
| 대문자 레이블 | 15px | 500 | 1.30 | 1.5px | uppercase |
| 캡션 | 14px | 400–500 | 1.40–1.60 | normal | |
| 뱃지 대문자 | 12.8px | 550 | 1.20 | normal | uppercase |
| 마이크로 대문자 | 10px | 500–600 | 1.30 | 1px | uppercase |
| 코드：Inconsolata（보조 고정폭 폰트）
## 4. 컴포넌트 스타일링
### 버튼
- 투명：텍스트 `#080808`, 호버 시 translate(6px)
- 화이트 서클：반경 50%, 흰색 배경
- 블루 뱃지：`#146ef5` 배경, 반경 4px, 웨이트 550
### 카드：`1px solid #d8d8d8`, 반경 4px–8px
### 뱃지：블루 틴트 배경 10% 불투명도, 반경 4px
## 5. 레이아웃
- 간격：분수 스케일（1px, 2.4px, 3.2px, 4px, 5.6px, 6px, 7.2px, 8px, 9.6px, 12px, 16px, 24px）
- 반경：2px, 4px, 8px, 50%——보수적이고 날카로움
- 브레이크포인트：479px, 768px, 992px
## 6. 깊이：5단계 캐스케이딩 그림자 시스템
## 7. 권장 사항 & 금지 사항
- 권장：웨이트 500–600의 WF Visual Sans Variable 사용. CTA에 블루（`#146ef5`）사용. 반경 4px. 호버 시 translate(6px).
- 금지：기능적 요소의 반경을 8px 이상으로 설정하지 않기. 프라이머리 CTA에 보조 색상 사용하지 않기.
## 8. 반응형：479px, 768px, 992px
## 9. Agent 프롬프트 가이드
- 텍스트：니어 블랙（`#080808`）
- CTA：Webflow 블루（`#146ef5`）
- 배경：화이트（`#ffffff`）
- 보더：`#d8d8d8`
- 보조：퍼플 `#7a3dff`, 핑크 `#ed52cb`, 그린 `#00d722`
open-design/design-systems/webflow/DESIGN-nl.md
+95
View File
@@ -0,0 +1,95 @@
# Ontwerpsysteem geïnspireerd door Webflow
> Category: Design & Creatief
> Visuele websitebouwer. Gepolijste marketingsite-esthetiek met blauwe accenten.
## 1. Visueel thema & sfeer
De website van Webflow is een visueel rijke, tool-georiënteerde platform dat "ontwerpen zonder code" communiceert via schone witte oppervlakken, het kenmerkende Webflow-blauw（`#146ef5`）en een rijke secundaire kleurenpalet（paars, roze, groen, oranje, geel, rood）. Het aangepaste lettertype WF Visual Sans Variable creëert een zelfverzekerd, precies typografisch systeem met gewicht 600 voor weergave en 500 voor de tekst.
**Belangrijkste kenmerken：**
- Wit canvas met bijna zwarte（`#080808`）tekst
- Webflow-blauw（`#146ef5`）als primaire merkkleur en interactieve kleur
- WF Visual Sans Variable — aangepast variabel lettertype met gewicht 500–600
- Rijke secundaire palet：paars `#7a3dff`, roze `#ed52cb`, groen `#00d722`, oranje `#ff6b00`, geel `#ffae13`, rood `#ee1d36`
- Conservatieve randradius van 4px–8px — scherp, niet afgerond
- Meerdere schaduwlagen（5-laags cascadesschaduwen）
- Hoofdletters labels：10px–15px, gewicht 500–600, grote letterafstand（0,6px–1,5px）
- translate(6px)-hover-animatie op knoppen
## 2. Kleurenpalet & rollen
### Primair
- **Bijna Zwart**（`#080808`）：Primaire tekst
- **Webflow-blauw**（`#146ef5`）：`--_color---primary--webflow-blue`, primaire CTA en links
- **Blauw 400**（`#3b89ff`）：`--_color---primary--blue-400`, lichter interactief blauw
- **Blauw 300**（`#006acc`）：`--_color---blue-300`, donkerdere blauwvariant
- **Knop hover blauw**（`#0055d4`）：`--mkto-embed-color-button-hover`
### Secundaire accenten
- **Paars**（`#7a3dff`）：`--_color---secondary--purple`
- **Roze**（`#ed52cb`）：`--_color---secondary--pink`
- **Groen**（`#00d722`）：`--_color---secondary--green`
- **Oranje**（`#ff6b00`）：`--_color---secondary--orange`
- **Geel**（`#ffae13`）：`--_color---secondary--yellow`
- **Rood**（`#ee1d36`）：`--_color---secondary--red`
### Neutraal
- **Grijs 800**（`#222222`）：Donkere secundaire tekst
- **Grijs 700**（`#363636`）：Middentekst
- **Grijs 300**（`#ababab`）：Gedempte tekst, tijdelijke aanduiding
- **Middengrijs**（`#5a5a5a`）：Linktekst
- **Randgrijs**（`#d8d8d8`）：Randen, scheidingslijnen
- **Rand hover**（`#898989`）：Hover-rand
### Schaduwen
- **5-laags cascade**：`rgba(0,0,0,0) 0px 84px 24px, rgba(0,0,0,0.01) 0px 54px 22px, rgba(0,0,0,0.04) 0px 30px 18px, rgba(0,0,0,0.08) 0px 13px 13px, rgba(0,0,0,0.09) 0px 3px 7px`
## 3. Typografieregels
### Lettertype：`WF Visual Sans Variable`, terugval：`Arial`
| Rol | Grootte | Gewicht | Regelhoogte | Letterafstand | Opmerkingen |
|------|------|--------|-------------|----------------|-------|
| Display-hero | 80px | 600 | 1,04 | -0,8px | |
| Sectiekop | 56px | 600 | 1,04 | normal | |
| Subtitel | 32px | 500 | 1,30 | normal | |
| Functietitel | 24px | 500–600 | 1,30 | normal | |
| Tekst | 20px | 400–500 | 1,40–1,50 | normal | |
| Standaardtekst | 16px | 400–500 | 1,60 | -0,16px | |
| Knop | 16px | 500 | 1,60 | -0,16px | |
| Hoofdletter label | 15px | 500 | 1,30 | 1,5px | uppercase |
| Onderschrift | 14px | 400–500 | 1,40–1,60 | normal | |
| Badge hoofdletters | 12,8px | 550 | 1,20 | normal | uppercase |
| Micro hoofdletters | 10px | 500–600 | 1,30 | 1px | uppercase |
| Code：Inconsolata（bijbehorend monospace-lettertype）
## 4. Componentstijlen
### Knoppen
- Transparant：tekst `#080808`, translate(6px) bij hover
- Witte cirkel：radius 50%, witte achtergrond
- Blauwe badge：`#146ef5` achtergrond, radius 4px, gewicht 550
### Kaarten：`1px solid #d8d8d8`, radius 4px–8px
### Badges：blauwtint achtergrond bij 10% dekking, radius 4px
## 5. Opmaak
- Afstand：fractionele schaal（1px, 2,4px, 3,2px, 4px, 5,6px, 6px, 7,2px, 8px, 9,6px, 12px, 16px, 24px）
- Radius：2px, 4px, 8px, 50% — conservatief, scherp
- Breekpunten：479px, 768px, 992px
## 6. Diepte：5-laags cascadeschaduwsysteem
## 7. Wat te doen en te laten
- Doen：WF Visual Sans Variable gebruiken met gewicht 500–600. Blauw（`#146ef5`）voor CTA's. Radius 4px. translate(6px) bij hover.
- Laten：Functionele elementen niet meer dan 8px afronden. Secundaire kleuren niet gebruiken op primaire CTA's.
## 8. Responsief：479px, 768px, 992px
## 9. Agent-promptgids
- Tekst：Bijna Zwart（`#080808`）
- CTA：Webflow-blauw（`#146ef5`）
- Achtergrond：Wit（`#ffffff`）
- Rand：`#d8d8d8`
- Secundair：Paars `#7a3dff`, Roze `#ed52cb`, Groen `#00d722`
open-design/design-systems/webflow/DESIGN-pl.md
+95
View File
@@ -0,0 +1,95 @@
# System projektowania inspirowany Webflow
> Category: Design i kreatywność
> Wizualny kreator stron. Dopracowana estetyka strony marketingowej z niebieskimi akcentami.
## 1. Motyw wizualny i atmosfera
Strona Webflow to bogata wizualnie, narzędziowa platforma, która komunikuje "design bez kodu" przez czyste białe powierzchnie, charakterystyczny niebieski Webflow（`#146ef5`）i bogatą drugorzędną paletę kolorów（fioletowy, różowy, zielony, pomarańczowy, żółty, czerwony）. Niestandardowa czcionka WF Visual Sans Variable tworzy pewny i precyzyjny system typografii z wagą 600 dla nagłówków i 500 dla treści.
**Kluczowe cechy：**
- Biały kanwas z tekstem niemal czarnym（`#080808`）
- Niebieski Webflow（`#146ef5`）jako główny kolor marki i interakcji
- WF Visual Sans Variable — niestandardowa czcionka zmienna z wagą 500–600
- Bogata paleta drugorzędna：fioletowy `#7a3dff`, różowy `#ed52cb`, zielony `#00d722`, pomarańczowy `#ff6b00`, żółty `#ffae13`, czerwony `#ee1d36`
- Konserwatywny promień krawędzi 4px–8px — ostry, nieokrągły
- Wielowarstwowe stosy cieni（5-warstwowe kaskadowe cienie）
- Etykiety z dużych liter：10px–15px, waga 500–600, szerokie odstępy（0,6px–1,5px）
- Animacja translate(6px) przy najechaniu na przyciski
## 2. Paleta kolorów i role
### Podstawowy
- **Niemal Czarny**（`#080808`）：Tekst główny
- **Niebieski Webflow**（`#146ef5`）：`--_color---primary--webflow-blue`, główne CTA i linki
- **Niebieski 400**（`#3b89ff`）：`--_color---primary--blue-400`, jaśniejszy niebieski interaktywny
- **Niebieski 300**（`#006acc`）：`--_color---blue-300`, ciemniejszy wariant niebieskiego
- **Niebieski hover przycisku**（`#0055d4`）：`--mkto-embed-color-button-hover`
### Akcenty drugorzędne
- **Fioletowy**（`#7a3dff`）：`--_color---secondary--purple`
- **Różowy**（`#ed52cb`）：`--_color---secondary--pink`
- **Zielony**（`#00d722`）：`--_color---secondary--green`
- **Pomarańczowy**（`#ff6b00`）：`--_color---secondary--orange`
- **Żółty**（`#ffae13`）：`--_color---secondary--yellow`
- **Czerwony**（`#ee1d36`）：`--_color---secondary--red`
### Neutralny
- **Szary 800**（`#222222`）：Ciemny tekst drugorzędny
- **Szary 700**（`#363636`）：Tekst środkowy
- **Szary 300**（`#ababab`）：Wyciszony tekst, symbol zastępczy
- **Szary środkowy**（`#5a5a5a`）：Tekst linku
- **Szary krawędzi**（`#d8d8d8`）：Krawędzie, rozdzielacze
- **Krawędź hover**（`#898989`）：Krawędź przy najechaniu
### Cienie
- **Kaskada 5-warstwowa**：`rgba(0,0,0,0) 0px 84px 24px, rgba(0,0,0,0.01) 0px 54px 22px, rgba(0,0,0,0.04) 0px 30px 18px, rgba(0,0,0,0.08) 0px 13px 13px, rgba(0,0,0,0.09) 0px 3px 7px`
## 3. Zasady typografii
### Czcionka：`WF Visual Sans Variable`, zapasowa：`Arial`
| Rola | Rozmiar | Waga | Wysokość wiersza | Odstęp liter | Uwagi |
|------|------|--------|-------------|----------------|-------|
| Hero wyświetlacza | 80px | 600 | 1,04 | -0,8px | |
| Nagłówek sekcji | 56px | 600 | 1,04 | normal | |
| Podtytuł | 32px | 500 | 1,30 | normal | |
| Tytuł funkcji | 24px | 500–600 | 1,30 | normal | |
| Treść | 20px | 400–500 | 1,40–1,50 | normal | |
| Standardowa treść | 16px | 400–500 | 1,60 | -0,16px | |
| Przycisk | 16px | 500 | 1,60 | -0,16px | |
| Etykieta wielkich liter | 15px | 500 | 1,30 | 1,5px | uppercase |
| Podpis | 14px | 400–500 | 1,40–1,60 | normal | |
| Odznaka wielkich liter | 12,8px | 550 | 1,20 | normal | uppercase |
| Mikro wielkich liter | 10px | 500–600 | 1,30 | 1px | uppercase |
| Kod：Inconsolata（towarzysząca czcionka o stałej szerokości）
## 4. Stylizacja komponentów
### Przyciski
- Przezroczysty：tekst `#080808`, translate(6px) przy najechaniu
- Biały okrąg：promień 50%, białe tło
- Niebieska odznaka：tło `#146ef5`, promień 4px, waga 550
### Karty：`1px solid #d8d8d8`, promień 4px–8px
### Odznaki：tło z niebieskim odcieniem przy 10% kryciu, promień 4px
## 5. Układ
- Odstępy：skala ułamkowa（1px, 2,4px, 3,2px, 4px, 5,6px, 6px, 7,2px, 8px, 9,6px, 12px, 16px, 24px）
- Promień：2px, 4px, 8px, 50% — konserwatywny, ostry
- Punkty przerwania：479px, 768px, 992px
## 6. Głębia：5-warstwowy kaskadowy system cieni
## 7. Co robić i czego unikać
- Robić：Używać WF Visual Sans Variable z wagą 500–600. Niebieski（`#146ef5`）dla CTA. Promień 4px. translate(6px) przy najechaniu.
- Unikać：Zaokrąglać elementy funkcjonalne powyżej 8px. Używać kolorów drugorzędnych na głównych CTA.
## 8. Responsywny：479px, 768px, 992px
## 9. Przewodnik po promptach dla Agent
- Tekst：Niemal Czarny（`#080808`）
- CTA：Niebieski Webflow（`#146ef5`）
- Tło：Biały（`#ffffff`）
- Krawędź：`#d8d8d8`
- Drugorzędny：Fioletowy `#7a3dff`, Różowy `#ed52cb`, Zielony `#00d722`
open-design/design-systems/webflow/DESIGN-pt-br.md
+95
View File
@@ -0,0 +1,95 @@
# Sistema de design inspirado no Webflow
> Category: Design e criativo
> Construtor visual de sites. Estética de site de marketing polida com acento azul.
## 1. Tema visual e atmosfera
O site da Webflow é uma plataforma visualmente rica e orientada a ferramentas que comunica o "design sem código" por meio de superfícies brancas limpas, o azul característico Webflow（`#146ef5`）e uma rica paleta de cores secundárias（roxo, rosa, verde, laranja, amarelo, vermelho）. A fonte personalizada WF Visual Sans Variable cria um sistema tipográfico confiante e preciso com peso 600 para display e 500 para o corpo do texto.
**Características principais：**
- Tela branca com texto quase preto（`#080808`）
- Azul Webflow（`#146ef5`）como cor principal de marca e interação
- WF Visual Sans Variable — fonte variável personalizada com peso 500–600
- Paleta secundária rica：roxo `#7a3dff`, rosa `#ed52cb`, verde `#00d722`, laranja `#ff6b00`, amarelo `#ffae13`, vermelho `#ee1d36`
- Raio de borda conservador de 4px–8px — nítido, não arredondado
- Pilhas de sombra multicamada（5 camadas de sombras em cascata）
- Rótulos em maiúsculas：10px–15px, peso 500–600, espaçamento amplo（0,6px–1,5px）
- Animação translate(6px) ao passar o cursor sobre botões
## 2. Paleta de cores e funções
### Primário
- **Quase Preto**（`#080808`）：Texto principal
- **Azul Webflow**（`#146ef5`）：`--_color---primary--webflow-blue`, CTA principal e links
- **Azul 400**（`#3b89ff`）：`--_color---primary--blue-400`, azul interativo mais claro
- **Azul 300**（`#006acc`）：`--_color---blue-300`, variante de azul mais escura
- **Azul hover do botão**（`#0055d4`）：`--mkto-embed-color-button-hover`
### Destaques secundários
- **Roxo**（`#7a3dff`）：`--_color---secondary--purple`
- **Rosa**（`#ed52cb`）：`--_color---secondary--pink`
- **Verde**（`#00d722`）：`--_color---secondary--green`
- **Laranja**（`#ff6b00`）：`--_color---secondary--orange`
- **Amarelo**（`#ffae13`）：`--_color---secondary--yellow`
- **Vermelho**（`#ee1d36`）：`--_color---secondary--red`
### Neutro
- **Cinza 800**（`#222222`）：Texto secundário escuro
- **Cinza 700**（`#363636`）：Texto intermediário
- **Cinza 300**（`#ababab`）：Texto atenuado, marcador de posição
- **Cinza médio**（`#5a5a5a`）：Texto de link
- **Cinza borda**（`#d8d8d8`）：Bordas, divisores
- **Borda hover**（`#898989`）：Borda ao passar o cursor
### Sombras
- **Cascata de 5 camadas**：`rgba(0,0,0,0) 0px 84px 24px, rgba(0,0,0,0.01) 0px 54px 22px, rgba(0,0,0,0.04) 0px 30px 18px, rgba(0,0,0,0.08) 0px 13px 13px, rgba(0,0,0,0.09) 0px 3px 7px`
## 3. Regras tipográficas
### Fonte：`WF Visual Sans Variable`, alternativa：`Arial`
| Função | Tamanho | Peso | Altura da linha | Espaçamento | Notas |
|------|------|--------|-------------|----------------|-------|
| Hero de display | 80px | 600 | 1,04 | -0,8px | |
| Título de seção | 56px | 600 | 1,04 | normal | |
| Subtítulo | 32px | 500 | 1,30 | normal | |
| Título de funcionalidade | 24px | 500–600 | 1,30 | normal | |
| Corpo | 20px | 400–500 | 1,40–1,50 | normal | |
| Corpo padrão | 16px | 400–500 | 1,60 | -0,16px | |
| Botão | 16px | 500 | 1,60 | -0,16px | |
| Rótulo em maiúsculas | 15px | 500 | 1,30 | 1,5px | uppercase |
| Legenda | 14px | 400–500 | 1,40–1,60 | normal | |
| Badge em maiúsculas | 12,8px | 550 | 1,20 | normal | uppercase |
| Micro em maiúsculas | 10px | 500–600 | 1,30 | 1px | uppercase |
| Código：Inconsolata（fonte monoespaçada complementar）
## 4. Estilos de componentes
### Botões
- Transparente：texto `#080808`, translate(6px) ao passar o cursor
- Círculo branco：raio 50%, fundo branco
- Badge azul：fundo `#146ef5`, raio 4px, peso 550
### Cartões：`1px solid #d8d8d8`, raio 4px–8px
### Badges：fundo com matiz azul a 10% de opacidade, raio 4px
## 5. Layout
- Espaçamento：escala fracionária（1px, 2,4px, 3,2px, 4px, 5,6px, 6px, 7,2px, 8px, 9,6px, 12px, 16px, 24px）
- Raio：2px, 4px, 8px, 50% — conservador, nítido
- Pontos de quebra：479px, 768px, 992px
## 6. Profundidade：sistema de sombras em cascata de 5 camadas
## 7. O que fazer e o que evitar
- Fazer：Usar WF Visual Sans Variable com peso 500–600. Azul（`#146ef5`）para CTAs. Raio 4px. translate(6px) ao passar o cursor.
- Evitar：Arredondar elementos funcionais acima de 8px. Usar cores secundárias em CTAs primários.
## 8. Responsivo：479px, 768px, 992px
## 9. Guia de prompt para Agent
- Texto：Quase Preto（`#080808`）
- CTA：Azul Webflow（`#146ef5`）
- Fundo：Branco（`#ffffff`）
- Borda：`#d8d8d8`
- Secundário：Roxo `#7a3dff`, Rosa `#ed52cb`, Verde `#00d722`
open-design/design-systems/webflow/DESIGN-ru.md
+95
View File
@@ -0,0 +1,95 @@
# Дизайн-система, вдохновлённая Webflow
> Category: Дизайн и творчество
> Визуальный конструктор сайтов. Эстетика полированного маркетингового сайта с синими акцентами.
## 1. Визуальная тема и атмосфера
Сайт Webflow — это визуально насыщенная, ориентированная на инструменты платформа, которая передаёт концепцию «дизайна без кода» через чистые белые поверхности, фирменный синий Webflow（`#146ef5`）и богатую вторичную цветовую палитру（фиолетовый, розовый, зелёный, оранжевый, жёлтый, красный）. Кастомный шрифт WF Visual Sans Variable создаёт уверенную и точную типографскую систему: жирность 600 для заголовков и 500 для основного текста.
**Ключевые характеристики：**
- Белый холст с почти чёрным（`#080808`）текстом
- Синий Webflow（`#146ef5`）как основной брендовый и интерактивный цвет
- WF Visual Sans Variable — кастомный вариативный шрифт с жирностью 500–600
- Богатая вторичная палитра：фиолетовый `#7a3dff`, розовый `#ed52cb`, зелёный `#00d722`, оранжевый `#ff6b00`, жёлтый `#ffae13`, красный `#ee1d36`
- Консервативное скругление углов 4px–8px — чёткое, не круглое
- Многослойные стеки теней（5-слойные каскадные тени）
- Верхний регистр для меток：10px–15px, жирность 500–600, широкий интервал между буквами（0,6px–1,5px）
- Анимация translate(6px) при наведении на кнопки
## 2. Цветовая палитра и роли
### Основные
- **Почти чёрный**（`#080808`）：Основной текст
- **Синий Webflow**（`#146ef5`）：`--_color---primary--webflow-blue`, основной CTA и ссылки
- **Синий 400**（`#3b89ff`）：`--_color---primary--blue-400`, более светлый интерактивный синий
- **Синий 300**（`#006acc`）：`--_color---blue-300`, более тёмный вариант синего
- **Синий при наведении на кнопку**（`#0055d4`）：`--mkto-embed-color-button-hover`
### Вторичные акценты
- **Фиолетовый**（`#7a3dff`）：`--_color---secondary--purple`
- **Розовый**（`#ed52cb`）：`--_color---secondary--pink`
- **Зелёный**（`#00d722`）：`--_color---secondary--green`
- **Оранжевый**（`#ff6b00`）：`--_color---secondary--orange`
- **Жёлтый**（`#ffae13`）：`--_color---secondary--yellow`
- **Красный**（`#ee1d36`）：`--_color---secondary--red`
### Нейтральные
- **Серый 800**（`#222222`）：Тёмный вторичный текст
- **Серый 700**（`#363636`）：Средний текст
- **Серый 300**（`#ababab`）：Приглушённый текст, заполнитель
- **Средний серый**（`#5a5a5a`）：Текст ссылки
- **Серый бордера**（`#d8d8d8`）：Границы, разделители
- **Бордер при наведении**（`#898989`）：Граница при наведении
### Тени
- **5-слойный каскад**：`rgba(0,0,0,0) 0px 84px 24px, rgba(0,0,0,0.01) 0px 54px 22px, rgba(0,0,0,0.04) 0px 30px 18px, rgba(0,0,0,0.08) 0px 13px 13px, rgba(0,0,0,0.09) 0px 3px 7px`
## 3. Правила типографики
### Шрифт：`WF Visual Sans Variable`, запасной：`Arial`
| Роль | Размер | Жирность | Высота строки | Интервал | Примечания |
|------|------|--------|-------------|----------------|-------|
| Главный заголовок | 80px | 600 | 1,04 | -0,8px | |
| Заголовок раздела | 56px | 600 | 1,04 | normal | |
| Подзаголовок | 32px | 500 | 1,30 | normal | |
| Заголовок функции | 24px | 500–600 | 1,30 | normal | |
| Основной текст | 20px | 400–500 | 1,40–1,50 | normal | |
| Стандартный текст | 16px | 400–500 | 1,60 | -0,16px | |
| Кнопка | 16px | 500 | 1,60 | -0,16px | |
| Метка в верхнем регистре | 15px | 500 | 1,30 | 1,5px | uppercase |
| Подпись | 14px | 400–500 | 1,40–1,60 | normal | |
| Значок в верхнем регистре | 12,8px | 550 | 1,20 | normal | uppercase |
| Мини в верхнем регистре | 10px | 500–600 | 1,30 | 1px | uppercase |
| Код：Inconsolata（сопутствующий моноширинный шрифт）
## 4. Стилизация компонентов
### Кнопки
- Прозрачная：текст `#080808`, translate(6px) при наведении
- Белый круг：радиус 50%, белый фон
- Синий значок：фон `#146ef5`, радиус 4px, жирность 550
### Карточки：`1px solid #d8d8d8`, радиус 4px–8px
### Значки：синеватый фон с 10% непрозрачностью, радиус 4px
## 5. Макет
- Отступы：дробная шкала（1px, 2,4px, 3,2px, 4px, 5,6px, 6px, 7,2px, 8px, 9,6px, 12px, 16px, 24px）
- Радиус：2px, 4px, 8px, 50% — консервативный, чёткий
- Контрольные точки：479px, 768px, 992px
## 6. Глубина：5-слойная каскадная система теней
## 7. Рекомендации и ограничения
- Рекомендуется：Использовать WF Visual Sans Variable с жирностью 500–600. Синий（`#146ef5`）для CTA. Радиус 4px. translate(6px) при наведении.
- Не рекомендуется：Скруглять функциональные элементы более 8px. Использовать вторичные цвета на основных CTA.
## 8. Адаптивный：479px, 768px, 992px
## 9. Руководство по промпту Agent
- Текст：Почти чёрный（`#080808`）
- CTA：Синий Webflow（`#146ef5`）
- Фон：Белый（`#ffffff`）
- Граница：`#d8d8d8`
- Вторичный：Фиолетовый `#7a3dff`, Розовый `#ed52cb`, Зелёный `#00d722`
open-design/design-systems/webflow/DESIGN-tr.md
+95
View File
@@ -0,0 +1,95 @@
# Webflow'dan İlham Alan Tasarım Sistemi
> Category: Tasarım ve Yaratıcılık
> Görsel web oluşturucu. Mavi aksentli, cilalı pazarlama sitesi estetiği.
## 1. Görsel Tema ve Atmosfer
Webflow'un web sitesi, temiz beyaz yüzeyler, imza rengi olan Webflow Mavisi（`#146ef5`）ve zengin ikincil renk paleti（mor, pembe, yeşil, turuncu, sarı, kırmızı）aracılığıyla "kodsuz tasarım" anlayışını aktaran, görsel açıdan zengin ve araç odaklı bir platformdur. Özel WF Visual Sans Variable yazı tipi, görsel başlıklar için 600 ve metin için 500 ağırlığıyla kendinden emin ve hassas bir tipografi sistemi oluşturur.
**Temel Özellikler：**
- Neredeyse siyah（`#080808`）metin ile beyaz tuval
- Webflow Mavisi（`#146ef5`）birincil marka ve etkileşim rengi olarak
- WF Visual Sans Variable — 500–600 ağırlık aralığında özel değişken yazı tipi
- Zengin ikincil palet：mor `#7a3dff`, pembe `#ed52cb`, yeşil `#00d722`, turuncu `#ff6b00`, sarı `#ffae13`, kırmızı `#ee1d36`
- Tutucu 4px–8px kenarlık yarıçapı — keskin, yuvarlak değil
- Çok katmanlı gölge yığınları（5 katmanlı basamaklı gölgeler）
- Büyük harf etiketler：10px–15px, ağırlık 500–600, geniş harf aralığı（0,6px–1,5px）
- Düğmelerde translate(6px) hover animasyonu
## 2. Renk Paleti ve Rolleri
### Birincil
- **Neredeyse Siyah**（`#080808`）：Birincil metin
- **Webflow Mavisi**（`#146ef5`）：`--_color---primary--webflow-blue`, birincil CTA ve bağlantılar
- **Mavi 400**（`#3b89ff`）：`--_color---primary--blue-400`, daha açık etkileşimli mavi
- **Mavi 300**（`#006acc`）：`--_color---blue-300`, daha koyu mavi varyantı
- **Düğme Hover Mavisi**（`#0055d4`）：`--mkto-embed-color-button-hover`
### İkincil Aksentler
- **Mor**（`#7a3dff`）：`--_color---secondary--purple`
- **Pembe**（`#ed52cb`）：`--_color---secondary--pink`
- **Yeşil**（`#00d722`）：`--_color---secondary--green`
- **Turuncu**（`#ff6b00`）：`--_color---secondary--orange`
- **Sarı**（`#ffae13`）：`--_color---secondary--yellow`
- **Kırmızı**（`#ee1d36`）：`--_color---secondary--red`
### Nötr
- **Gri 800**（`#222222`）：Koyu ikincil metin
- **Gri 700**（`#363636`）：Orta metin
- **Gri 300**（`#ababab`）：Soluk metin, yer tutucu
- **Orta Gri**（`#5a5a5a`）：Bağlantı metni
- **Kenarlık Grisi**（`#d8d8d8`）：Kenarlıklar, bölücüler
- **Kenarlık Hover**（`#898989`）：Hover kenarlığı
### Gölgeler
- **5 Katmanlı Basamak**：`rgba(0,0,0,0) 0px 84px 24px, rgba(0,0,0,0.01) 0px 54px 22px, rgba(0,0,0,0.04) 0px 30px 18px, rgba(0,0,0,0.08) 0px 13px 13px, rgba(0,0,0,0.09) 0px 3px 7px`
## 3. Tipografi Kuralları
### Yazı tipi：`WF Visual Sans Variable`, yedek：`Arial`
| Rol | Boyut | Ağırlık | Satır Yüksekliği | Harf Aralığı | Notlar |
|------|------|--------|-------------|----------------|-------|
| Display Hero | 80px | 600 | 1,04 | -0,8px | |
| Bölüm Başlığı | 56px | 600 | 1,04 | normal | |
| Alt Başlık | 32px | 500 | 1,30 | normal | |
| Özellik Başlığı | 24px | 500–600 | 1,30 | normal | |
| Gövde | 20px | 400–500 | 1,40–1,50 | normal | |
| Standart Gövde | 16px | 400–500 | 1,60 | -0,16px | |
| Düğme | 16px | 500 | 1,60 | -0,16px | |
| Büyük Harf Etiketi | 15px | 500 | 1,30 | 1,5px | uppercase |
| Açıklama | 14px | 400–500 | 1,40–1,60 | normal | |
| Rozet Büyük Harf | 12,8px | 550 | 1,20 | normal | uppercase |
| Mikro Büyük Harf | 10px | 500–600 | 1,30 | 1px | uppercase |
| Kod：Inconsolata（eşlik eden monospace yazı tipi）
## 4. Bileşen Stilleri
### Düğmeler
- Şeffaf：metin `#080808`, hover'da translate(6px)
- Beyaz daire：yarıçap %50, beyaz arka plan
- Mavi rozet：`#146ef5` arka plan, 4px yarıçap, ağırlık 550
### Kartlar：`1px solid #d8d8d8`, 4px–8px yarıçap
### Rozetler：%10 opaklıkta mavi tonlu arka plan, 4px yarıçap
## 5. Düzen
- Aralık：kesirli ölçek（1px, 2,4px, 3,2px, 4px, 5,6px, 6px, 7,2px, 8px, 9,6px, 12px, 16px, 24px）
- Yarıçap：2px, 4px, 8px, %50 — tutucu, keskin
- Kırılma noktaları：479px, 768px, 992px
## 6. Derinlik：5 Katmanlı Basamaklı Gölge Sistemi
## 7. Yapılması ve Yapılmaması Gerekenler
- Yapın：WF Visual Sans Variable'ı ağırlık 500–600 ile kullanın. CTA'lar için Mavi（`#146ef5`）kullanın. 4px yarıçap. Hover'da translate(6px).
- Yapmayın：İşlevsel öğeleri 8px'in üzerinde yuvarlayın. Birincil CTA'larda ikincil renkleri kullanmayın.
## 8. Duyarlı：479px, 768px, 992px
## 9. Agent Prompt Kılavuzu
- Metin：Neredeyse Siyah（`#080808`）
- CTA：Webflow Mavisi（`#146ef5`）
- Arka plan：Beyaz（`#ffffff`）
- Kenarlık：`#d8d8d8`
- İkincil：Mor `#7a3dff`, Pembe `#ed52cb`, Yeşil `#00d722`
open-design/design-systems/webflow/DESIGN-uk.md
+95
View File
@@ -0,0 +1,95 @@
# Система дизайну, натхненна Webflow
> Category: Дизайн та творчість
> Візуальний конструктор сайтів. Відполірована естетика маркетингового сайту з синіми акцентами.
## 1. Візуальна тема та атмосфера
Сайт Webflow — це візуально насичена, інструментоорієнтована платформа, яка передає концепцію "дизайну без коду" через чисті білі поверхні, фірмовий синій Webflow（`#146ef5`）та багату вторинну кольорову палітру（фіолетовий, рожевий, зелений, помаранчевий, жовтий, червоний）. Кастомний шрифт WF Visual Sans Variable створює впевнену і точну типографічну систему з вагою 600 для заголовків та 500 для основного тексту.
**Ключові характеристики：**
- Білий холст з майже чорним（`#080808`）текстом
- Синій Webflow（`#146ef5`）як основний колір бренду та взаємодії
- WF Visual Sans Variable — кастомний змінний шрифт з вагою 500–600
- Багата вторинна палітра：фіолетовий `#7a3dff`, рожевий `#ed52cb`, зелений `#00d722`, помаранчевий `#ff6b00`, жовтий `#ffae13`, червоний `#ee1d36`
- Консервативний радіус меж 4px–8px — чіткий, не округлий
- Багатошарові стеки тіней（5-шарові каскадні тіні）
- Мітки у верхньому регістрі：10px–15px, вага 500–600, широкий інтервал між літерами（0,6px–1,5px）
- Анімація translate(6px) при наведенні курсора на кнопки
## 2. Кольорова палітра та ролі
### Основний
- **Майже Чорний**（`#080808`）：Основний текст
- **Синій Webflow**（`#146ef5`）：`--_color---primary--webflow-blue`, основний CTA та посилання
- **Синій 400**（`#3b89ff`）：`--_color---primary--blue-400`, світліший інтерактивний синій
- **Синій 300**（`#006acc`）：`--_color---blue-300`, темніший варіант синього
- **Синій при наведенні на кнопку**（`#0055d4`）：`--mkto-embed-color-button-hover`
### Вторинні акценти
- **Фіолетовий**（`#7a3dff`）：`--_color---secondary--purple`
- **Рожевий**（`#ed52cb`）：`--_color---secondary--pink`
- **Зелений**（`#00d722`）：`--_color---secondary--green`
- **Помаранчевий**（`#ff6b00`）：`--_color---secondary--orange`
- **Жовтий**（`#ffae13`）：`--_color---secondary--yellow`
- **Червоний**（`#ee1d36`）：`--_color---secondary--red`
### Нейтральний
- **Сірий 800**（`#222222`）：Темний вторинний текст
- **Сірий 700**（`#363636`）：Середній текст
- **Сірий 300**（`#ababab`）：Приглушений текст, заповнювач
- **Середній сірий**（`#5a5a5a`）：Текст посилання
- **Сірий меж**（`#d8d8d8`）：Межі, роздільники
- **Межа при наведенні**（`#898989`）：Межа при наведенні
### Тіні
- **5-шаровий каскад**：`rgba(0,0,0,0) 0px 84px 24px, rgba(0,0,0,0.01) 0px 54px 22px, rgba(0,0,0,0.04) 0px 30px 18px, rgba(0,0,0,0.08) 0px 13px 13px, rgba(0,0,0,0.09) 0px 3px 7px`
## 3. Правила типографіки
### Шрифт：`WF Visual Sans Variable`, запасний：`Arial`
| Роль | Розмір | Вага | Висота рядка | Інтервал | Примітки |
|------|------|--------|-------------|----------------|-------|
| Головний заголовок | 80px | 600 | 1,04 | -0,8px | |
| Заголовок розділу | 56px | 600 | 1,04 | normal | |
| Підзаголовок | 32px | 500 | 1,30 | normal | |
| Заголовок функції | 24px | 500–600 | 1,30 | normal | |
| Основний текст | 20px | 400–500 | 1,40–1,50 | normal | |
| Стандартний текст | 16px | 400–500 | 1,60 | -0,16px | |
| Кнопка | 16px | 500 | 1,60 | -0,16px | |
| Мітка у верхньому регістрі | 15px | 500 | 1,30 | 1,5px | uppercase |
| Підпис | 14px | 400–500 | 1,40–1,60 | normal | |
| Значок у верхньому регістрі | 12,8px | 550 | 1,20 | normal | uppercase |
| Мікро у верхньому регістрі | 10px | 500–600 | 1,30 | 1px | uppercase |
| Код：Inconsolata（супровідний моноширинний шрифт）
## 4. Стилізація компонентів
### Кнопки
- Прозора：текст `#080808`, translate(6px) при наведенні
- Біле коло：радіус 50%, білий фон
- Синій значок：фон `#146ef5`, радіус 4px, вага 550
### Картки：`1px solid #d8d8d8`, радіус 4px–8px
### Значки：синюватий фон з 10% непрозорістю, радіус 4px
## 5. Макет
- Відступи：дробна шкала（1px, 2,4px, 3,2px, 4px, 5,6px, 6px, 7,2px, 8px, 9,6px, 12px, 16px, 24px）
- Радіус：2px, 4px, 8px, 50% — консервативний, чіткий
- Контрольні точки：479px, 768px, 992px
## 6. Глибина：5-шарова каскадна система тіней
## 7. Що слід і чого не слід робити
- Слід：Використовувати WF Visual Sans Variable з вагою 500–600. Синій（`#146ef5`）для CTA. Радіус 4px. translate(6px) при наведенні.
- Не слід：Заокруглювати функціональні елементи більш ніж на 8px. Використовувати вторинні кольори на основних CTA.
## 8. Адаптивний：479px, 768px, 992px
## 9. Посібник з промптів для Agent
- Текст：Майже Чорний（`#080808`）
- CTA：Синій Webflow（`#146ef5`）
- Фон：Білий（`#ffffff`）
- Межа：`#d8d8d8`
- Вторинний：Фіолетовий `#7a3dff`, Рожевий `#ed52cb`, Зелений `#00d722`
open-design/design-systems/webflow/DESIGN-vi.md
+95
View File
@@ -0,0 +1,95 @@
# Hệ thống thiết kế lấy cảm hứng từ Webflow
> Category: Thiết kế & Sáng tạo
> Trình tạo web trực quan. Thẩm mỹ trang marketing bóng bẩy với điểm nhấn màu xanh.
## 1. Chủ đề hình ảnh & Bầu không khí
Trang web của Webflow là một nền tảng giàu hình ảnh và hướng đến công cụ, truyền đạt "thiết kế không cần code" qua các bề mặt trắng sạch, màu xanh đặc trưng Webflow（`#146ef5`）và bảng màu phụ phong phú（tím, hồng, xanh lá, cam, vàng, đỏ）. Font chữ tùy chỉnh WF Visual Sans Variable tạo nên hệ thống chữ viết tự tin, chính xác với độ đậm 600 cho tiêu đề hiển thị và 500 cho nội dung.
**Đặc điểm chính：**
- Canvas trắng với văn bản gần đen（`#080808`）
- Xanh Webflow（`#146ef5`）là màu thương hiệu chính và màu tương tác
- WF Visual Sans Variable — font biến thiên tùy chỉnh với độ đậm 500–600
- Bảng màu phụ phong phú：tím `#7a3dff`, hồng `#ed52cb`, xanh lá `#00d722`, cam `#ff6b00`, vàng `#ffae13`, đỏ `#ee1d36`
- Bán kính viền bảo thủ 4px–8px — sắc nét, không bo tròn
- Ngăn xếp bóng đổ nhiều lớp（5 lớp bóng đổ xếp tầng）
- Nhãn chữ hoa：10px–15px, độ đậm 500–600, khoảng cách chữ rộng（0,6px–1,5px）
- Hoạt ảnh translate(6px) khi di chuột qua nút
## 2. Bảng màu & Vai trò
### Màu chính
- **Gần đen**（`#080808`）：Văn bản chính
- **Xanh Webflow**（`#146ef5`）：`--_color---primary--webflow-blue`, CTA chính và liên kết
- **Xanh 400**（`#3b89ff`）：`--_color---primary--blue-400`, xanh tương tác sáng hơn
- **Xanh 300**（`#006acc`）：`--_color---blue-300`, biến thể xanh tối hơn
- **Xanh hover nút**（`#0055d4`）：`--mkto-embed-color-button-hover`
### Màu nhấn phụ
- **Tím**（`#7a3dff`）：`--_color---secondary--purple`
- **Hồng**（`#ed52cb`）：`--_color---secondary--pink`
- **Xanh lá**（`#00d722`）：`--_color---secondary--green`
- **Cam**（`#ff6b00`）：`--_color---secondary--orange`
- **Vàng**（`#ffae13`）：`--_color---secondary--yellow`
- **Đỏ**（`#ee1d36`）：`--_color---secondary--red`
### Trung tính
- **Xám 800**（`#222222`）：Văn bản phụ tối
- **Xám 700**（`#363636`）：Văn bản trung
- **Xám 300**（`#ababab`）：Văn bản mờ, trình giữ chỗ
- **Xám trung**（`#5a5a5a`）：Văn bản liên kết
- **Xám viền**（`#d8d8d8`）：Viền, đường phân cách
- **Viền hover**（`#898989`）：Viền khi di chuột
### Bóng đổ
- **Xếp tầng 5 lớp**：`rgba(0,0,0,0) 0px 84px 24px, rgba(0,0,0,0.01) 0px 54px 22px, rgba(0,0,0,0.04) 0px 30px 18px, rgba(0,0,0,0.08) 0px 13px 13px, rgba(0,0,0,0.09) 0px 3px 7px`
## 3. Quy tắc typography
### Font：`WF Visual Sans Variable`, dự phòng：`Arial`
| Vai trò | Kích thước | Độ đậm | Chiều cao dòng | Khoảng cách chữ | Ghi chú |
|------|------|--------|-------------|----------------|-------|
| Hero hiển thị | 80px | 600 | 1,04 | -0,8px | |
| Tiêu đề phần | 56px | 600 | 1,04 | normal | |
| Tiêu đề phụ | 32px | 500 | 1,30 | normal | |
| Tiêu đề tính năng | 24px | 500–600 | 1,30 | normal | |
| Nội dung | 20px | 400–500 | 1,40–1,50 | normal | |
| Nội dung chuẩn | 16px | 400–500 | 1,60 | -0,16px | |
| Nút | 16px | 500 | 1,60 | -0,16px | |
| Nhãn chữ hoa | 15px | 500 | 1,30 | 1,5px | uppercase |
| Chú thích | 14px | 400–500 | 1,40–1,60 | normal | |
| Huy hiệu chữ hoa | 12,8px | 550 | 1,20 | normal | uppercase |
| Chữ hoa nhỏ | 10px | 500–600 | 1,30 | 1px | uppercase |
| Code：Inconsolata（font monospace đi kèm）
## 4. Kiểu dáng thành phần
### Nút
- Trong suốt：văn bản `#080808`, translate(6px) khi di chuột
- Vòng tròn trắng：bán kính 50%, nền trắng
- Huy hiệu xanh：nền `#146ef5`, bán kính 4px, độ đậm 550
### Thẻ：`1px solid #d8d8d8`, bán kính 4px–8px
### Huy hiệu：nền màu xanh nhạt 10% độ mờ, bán kính 4px
## 5. Bố cục
- Khoảng cách：thang phân số（1px, 2,4px, 3,2px, 4px, 5,6px, 6px, 7,2px, 8px, 9,6px, 12px, 16px, 24px）
- Bán kính：2px, 4px, 8px, 50% — bảo thủ, sắc nét
- Điểm ngắt：479px, 768px, 992px
## 6. Độ sâu：hệ thống bóng đổ xếp tầng 5 lớp
## 7. Nên làm và không nên làm
- Nên：Dùng WF Visual Sans Variable với độ đậm 500–600. Xanh（`#146ef5`）cho CTA. Bán kính 4px. translate(6px) khi di chuột.
- Không nên：Bo tròn các phần tử chức năng quá 8px. Dùng màu phụ trên CTA chính.
## 8. Responsive：479px, 768px, 992px
## 9. Hướng dẫn prompt cho Agent
- Văn bản：Gần đen（`#080808`）
- CTA：Xanh Webflow（`#146ef5`）
- Nền：Trắng（`#ffffff`）
- Viền：`#d8d8d8`
- Phụ：Tím `#7a3dff`, Hồng `#ed52cb`, Xanh lá `#00d722`
open-design/design-systems/webflow/DESIGN-zh-tw.md
+95
View File
@@ -0,0 +1,95 @@
# 受 Webflow 啟發的設計系統
> Category: 設計與創意
> 可視化網頁建構器。以藍色為主的精緻行銷網站美學。
## 1. 視覺主題與氛圍
Webflow 網站是一個視覺豐富、以工具為核心的平台，透過簡潔的白色介面、標誌性的 Webflow 藍（`#146ef5`）以及豐富的輔助色盤（紫色、粉色、綠色、橙色、黃色、紅色）來傳達「無程式碼設計」的理念。定制的 WF Visual Sans Variable 字型以 600 字重用於展示標題、500 字重用於內文，構建出一套自信而精準的排版系統。
**核心特徵：**
- 白色畫布搭配近黑色（`#080808`）文字
- Webflow 藍（`#146ef5`）作為主品牌色與互動色
- WF Visual Sans Variable——自訂可變字型，字重範圍 500–600
- 豐富輔助色盤：紫色 `#7a3dff`、粉色 `#ed52cb`、綠色 `#00d722`、橙色 `#ff6b00`、黃色 `#ffae13`、紅色 `#ee1d36`
- 保守的 4px–8px 圓角——銳利而非圓潤
- 多層陰影疊加（5 層串聯陰影）
- 大寫標籤：10px–15px，字重 500–600，寬字母間距（0.6px–1.5px）
- 按鈕懸停時 translate(6px) 動畫
## 2. 色盤與角色
### 主色
- **近黑色**（`#080808`）：主要文字色
- **Webflow 藍**（`#146ef5`）：`--_color---primary--webflow-blue`，主要 CTA 和連結
- **藍色 400**（`#3b89ff`）：`--_color---primary--blue-400`，較淺的互動藍
- **藍色 300**（`#006acc`）：`--_color---blue-300`，較深的藍色變體
- **按鈕懸停藍**（`#0055d4`）：`--mkto-embed-color-button-hover`
### 輔助強調色
- **紫色**（`#7a3dff`）：`--_color---secondary--purple`
- **粉色**（`#ed52cb`）：`--_color---secondary--pink`
- **綠色**（`#00d722`）：`--_color---secondary--green`
- **橙色**（`#ff6b00`）：`--_color---secondary--orange`
- **黃色**（`#ffae13`）：`--_color---secondary--yellow`
- **紅色**（`#ee1d36`）：`--_color---secondary--red`
### 中性色
- **灰色 800**（`#222222`）：深色次要文字
- **灰色 700**（`#363636`）：中等文字色
- **灰色 300**（`#ababab`）：弱化文字、佔位符
- **中灰色**（`#5a5a5a`）：連結文字
- **邊框灰**（`#d8d8d8`）：邊框、分隔線
- **懸停邊框**（`#898989`）：懸停邊框
### 陰影
- **5 層串聯**：`rgba(0,0,0,0) 0px 84px 24px, rgba(0,0,0,0.01) 0px 54px 22px, rgba(0,0,0,0.04) 0px 30px 18px, rgba(0,0,0,0.08) 0px 13px 13px, rgba(0,0,0,0.09) 0px 3px 7px`
## 3. 排版規則
### 字型：`WF Visual Sans Variable`，備用字型：`Arial`
| 角色 | 尺寸 | 字重 | 行高 | 字母間距 | 備註 |
|------|------|--------|-------------|----------------|-------|
| 展示主標題 | 80px | 600 | 1.04 | -0.8px | |
| 章節標題 | 56px | 600 | 1.04 | 正常 | |
| 副標題 | 32px | 500 | 1.30 | 正常 | |
| 功能標題 | 24px | 500–600 | 1.30 | 正常 | |
| 內文 | 20px | 400–500 | 1.40–1.50 | 正常 | |
| 標準內文 | 16px | 400–500 | 1.60 | -0.16px | |
| 按鈕 | 16px | 500 | 1.60 | -0.16px | |
| 大寫標籤 | 15px | 500 | 1.30 | 1.5px | 大寫 |
| 說明文字 | 14px | 400–500 | 1.40–1.60 | 正常 | |
| 徽章大寫 | 12.8px | 550 | 1.20 | 正常 | 大寫 |
| 微型大寫 | 10px | 500–600 | 1.30 | 1px | 大寫 |
| 程式碼：Inconsolata（配套等寬字型）
## 4. 元件樣式
### 按鈕
- 透明按鈕：文字色 `#080808`，懸停時 translate(6px)
- 白色圓形：50% 圓角，白色背景
- 藍色徽章：`#146ef5` 背景，4px 圓角，字重 550
### 卡片：`1px solid #d8d8d8`，4px–8px 圓角
### 徽章：藍色調背景，10% 不透明度，4px 圓角
## 5. 佈局
- 間距：分數刻度（1px、2.4px、3.2px、4px、5.6px、6px、7.2px、8px、9.6px、12px、16px、24px）
- 圓角：2px、4px、8px、50%——保守而銳利
- 斷點：479px、768px、992px
## 6. 深度：5 層串聯陰影系統
## 7. 應當與避免
- 應當：使用字重 500–600 的 WF Visual Sans Variable。藍色（`#146ef5`）用於 CTA。4px 圓角。懸停時 translate(6px)。
- 避免：功能性元素圓角超過 8px。在主要 CTA 上使用輔助色。
## 8. 響應式：479px、768px、992px
## 9. Agent 提示指南
- 文字：近黑色（`#080808`）
- CTA：Webflow 藍（`#146ef5`）
- 背景：白色（`#ffffff`）
- 邊框：`#d8d8d8`
- 輔助色：紫色 `#7a3dff`、粉色 `#ed52cb`、綠色 `#00d722`
open-design/design-systems/webflow/DESIGN-zh.md
+95
View File
@@ -0,0 +1,95 @@
# 受 Webflow 启发的设计系统
> Category: 设计与创意
> 可视化网页构建器。以蓝色为主的精致营销网站美学。
## 1. 视觉主题与氛围
Webflow 网站是一个视觉丰富、以工具为核心的平台，通过简洁的白色界面、标志性的 Webflow 蓝（`#146ef5`）以及丰富的辅助色板（紫色、粉色、绿色、橙色、黄色、红色）来传达"无代码设计"的理念。定制的 WF Visual Sans Variable 字体以 600 字重用于展示标题、500 字重用于正文，构建出一套自信而精准的排版系统。
**核心特征：**
- 白色画布配近黑色（`#080808`）文字
- Webflow 蓝（`#146ef5`）作为主品牌色与交互色
- WF Visual Sans Variable——自定义可变字体，字重范围 500–600
- 丰富辅助色板：紫色 `#7a3dff`、粉色 `#ed52cb`、绿色 `#00d722`、橙色 `#ff6b00`、黄色 `#ffae13`、红色 `#ee1d36`
- 保守的 4px–8px 圆角——锐利而非圆润
- 多层阴影叠加（5 层级联阴影）
- 大写标签：10px–15px，字重 500–600，宽字母间距（0.6px–1.5px）
- 按钮悬停时 translate(6px) 动画
## 2. 色板与角色
### 主色
- **近黑色**（`#080808`）：主要文字色
- **Webflow 蓝**（`#146ef5`）：`--_color---primary--webflow-blue`，主要 CTA 和链接
- **蓝色 400**（`#3b89ff`）：`--_color---primary--blue-400`，较浅的交互蓝
- **蓝色 300**（`#006acc`）：`--_color---blue-300`，较深的蓝色变体
- **按钮悬停蓝**（`#0055d4`）：`--mkto-embed-color-button-hover`
### 辅助强调色
- **紫色**（`#7a3dff`）：`--_color---secondary--purple`
- **粉色**（`#ed52cb`）：`--_color---secondary--pink`
- **绿色**（`#00d722`）：`--_color---secondary--green`
- **橙色**（`#ff6b00`）：`--_color---secondary--orange`
- **黄色**（`#ffae13`）：`--_color---secondary--yellow`
- **红色**（`#ee1d36`）：`--_color---secondary--red`
### 中性色
- **灰色 800**（`#222222`）：深色次要文字
- **灰色 700**（`#363636`）：中等文字色
- **灰色 300**（`#ababab`）：弱化文字、占位符
- **中灰色**（`#5a5a5a`）：链接文字
- **边框灰**（`#d8d8d8`）：边框、分隔线
- **悬停边框**（`#898989`）：悬停边框
### 阴影
- **5 层级联**：`rgba(0,0,0,0) 0px 84px 24px, rgba(0,0,0,0.01) 0px 54px 22px, rgba(0,0,0,0.04) 0px 30px 18px, rgba(0,0,0,0.08) 0px 13px 13px, rgba(0,0,0,0.09) 0px 3px 7px`
## 3. 排版规则
### 字体：`WF Visual Sans Variable`，备用字体：`Arial`
| 角色 | 尺寸 | 字重 | 行高 | 字母间距 | 备注 |
|------|------|--------|-------------|----------------|-------|
| 展示主标题 | 80px | 600 | 1.04 | -0.8px | |
| 章节标题 | 56px | 600 | 1.04 | 正常 | |
| 副标题 | 32px | 500 | 1.30 | 正常 | |
| 功能标题 | 24px | 500–600 | 1.30 | 正常 | |
| 正文 | 20px | 400–500 | 1.40–1.50 | 正常 | |
| 标准正文 | 16px | 400–500 | 1.60 | -0.16px | |
| 按钮 | 16px | 500 | 1.60 | -0.16px | |
| 大写标签 | 15px | 500 | 1.30 | 1.5px | 大写 |
| 说明文字 | 14px | 400–500 | 1.40–1.60 | 正常 | |
| 徽章大写 | 12.8px | 550 | 1.20 | 正常 | 大写 |
| 微型大写 | 10px | 500–600 | 1.30 | 1px | 大写 |
| 代码：Inconsolata（配套等宽字体）
## 4. 组件样式
### 按钮
- 透明按钮：文字色 `#080808`，悬停时 translate(6px)
- 白色圆形：50% 圆角，白色背景
- 蓝色徽章：`#146ef5` 背景，4px 圆角，字重 550
### 卡片：`1px solid #d8d8d8`，4px–8px 圆角
### 徽章：蓝色调背景，10% 不透明度，4px 圆角
## 5. 布局
- 间距：分数刻度（1px、2.4px、3.2px、4px、5.6px、6px、7.2px、8px、9.6px、12px、16px、24px）
- 圆角：2px、4px、8px、50%——保守而锐利
- 断点：479px、768px、992px
## 6. 深度：5 层级联阴影系统
## 7. 应当与避免
- 应当：使用字重 500–600 的 WF Visual Sans Variable。蓝色（`#146ef5`）用于 CTA。4px 圆角。悬停时 translate(6px)。
- 避免：功能性元素圆角超过 8px。在主要 CTA 上使用辅助色。
## 8. 响应式：479px、768px、992px
## 9. Agent 提示指南
- 文字：近黑色（`#080808`）
- CTA：Webflow 蓝（`#146ef5`）
- 背景：白色（`#ffffff`）
- 边框：`#d8d8d8`
- 辅助色：紫色 `#7a3dff`、粉色 `#ed52cb`、绿色 `#00d722`
open-design/design-systems/webflow/DESIGN.md
+95
View File
@@ -0,0 +1,95 @@
# Design System Inspired by Webflow
> Category: Design & Creative
> Visual web builder. Blue-accented, polished marketing site aesthetic.
## 1. Visual Theme & Atmosphere
Webflow's website is a visually rich, tool-forward platform that communicates "design without code" through clean white surfaces, the signature Webflow Blue (`#146ef5`), and a rich secondary color palette (purple, pink, green, orange, yellow, red). The custom WF Visual Sans Variable font creates a confident, precise typographic system with weight 600 for display and 500 for body.
**Key Characteristics:**
- White canvas with near-black (`#080808`) text
- Webflow Blue (`#146ef5`) as primary brand + interactive color
- WF Visual Sans Variable — custom variable font with weight 500–600
- Rich secondary palette: purple `#7a3dff`, pink `#ed52cb`, green `#00d722`, orange `#ff6b00`, yellow `#ffae13`, red `#ee1d36`
- Conservative 4px–8px border-radius — sharp, not rounded
- Multi-layer shadow stacks (5-layer cascading shadows)
- Uppercase labels: 10px–15px, weight 500–600, wide letter-spacing (0.6px–1.5px)
- translate(6px) hover animation on buttons
## 2. Color Palette & Roles
### Primary
- **Near Black** (`#080808`): Primary text
- **Webflow Blue** (`#146ef5`): `--_color---primary--webflow-blue`, primary CTA and links
- **Blue 400** (`#3b89ff`): `--_color---primary--blue-400`, lighter interactive blue
- **Blue 300** (`#006acc`): `--_color---blue-300`, darker blue variant
- **Button Hover Blue** (`#0055d4`): `--mkto-embed-color-button-hover`
### Secondary Accents
- **Purple** (`#7a3dff`): `--_color---secondary--purple`
- **Pink** (`#ed52cb`): `--_color---secondary--pink`
- **Green** (`#00d722`): `--_color---secondary--green`
- **Orange** (`#ff6b00`): `--_color---secondary--orange`
- **Yellow** (`#ffae13`): `--_color---secondary--yellow`
- **Red** (`#ee1d36`): `--_color---secondary--red`
### Neutral
- **Gray 800** (`#222222`): Dark secondary text
- **Gray 700** (`#363636`): Mid text
- **Gray 300** (`#ababab`): Muted text, placeholder
- **Mid Gray** (`#5a5a5a`): Link text
- **Border Gray** (`#d8d8d8`): Borders, dividers
- **Border Hover** (`#898989`): Hover border
### Shadows
- **5-layer cascade**: `rgba(0,0,0,0) 0px 84px 24px, rgba(0,0,0,0.01) 0px 54px 22px, rgba(0,0,0,0.04) 0px 30px 18px, rgba(0,0,0,0.08) 0px 13px 13px, rgba(0,0,0,0.09) 0px 3px 7px`
## 3. Typography Rules
### Font: `WF Visual Sans Variable`, fallback: `Arial`
| Role | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|--------|-------------|----------------|-------|
| Display Hero | 80px | 600 | 1.04 | -0.8px | |
| Section Heading | 56px | 600 | 1.04 | normal | |
| Sub-heading | 32px | 500 | 1.30 | normal | |
| Feature Title | 24px | 500–600 | 1.30 | normal | |
| Body | 20px | 400–500 | 1.40–1.50 | normal | |
| Body Standard | 16px | 400–500 | 1.60 | -0.16px | |
| Button | 16px | 500 | 1.60 | -0.16px | |
| Uppercase Label | 15px | 500 | 1.30 | 1.5px | uppercase |
| Caption | 14px | 400–500 | 1.40–1.60 | normal | |
| Badge Uppercase | 12.8px | 550 | 1.20 | normal | uppercase |
| Micro Uppercase | 10px | 500–600 | 1.30 | 1px | uppercase |
| Code: Inconsolata (companion monospace font)
## 4. Component Stylings
### Buttons
- Transparent: text `#080808`, translate(6px) on hover
- White circle: 50% radius, white bg
- Blue badge: `#146ef5` bg, 4px radius, weight 550
### Cards: `1px solid #d8d8d8`, 4px–8px radius
### Badges: Blue-tinted bg at 10% opacity, 4px radius
## 5. Layout
- Spacing: fractional scale (1px, 2.4px, 3.2px, 4px, 5.6px, 6px, 7.2px, 8px, 9.6px, 12px, 16px, 24px)
- Radius: 2px, 4px, 8px, 50% — conservative, sharp
- Breakpoints: 479px, 768px, 992px
## 6. Depth: 5-layer cascading shadow system
## 7. Do's and Don'ts
- Do: Use WF Visual Sans Variable at 500–600. Blue (#146ef5) for CTAs. 4px radius. translate(6px) hover.
- Don't: Round beyond 8px for functional elements. Use secondary colors on primary CTAs.
## 8. Responsive: 479px, 768px, 992px
## 9. Agent Prompt Guide
- Text: Near Black (`#080808`)
- CTA: Webflow Blue (`#146ef5`)
- Background: White (`#ffffff`)
- Border: `#d8d8d8`
- Secondary: Purple `#7a3dff`, Pink `#ed52cb`, Green `#00d722`
open-design/design-systems/webflow/USAGE.md
+32
View File
@@ -0,0 +1,32 @@
# Webflow 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
- White canvas with near-black (`#080808`) text
- Webflow Blue (`#146ef5`) as primary brand + interactive color
- WF Visual Sans Variable — custom variable font with weight 500–600
- Rich secondary palette: purple `#7a3dff`, pink `#ed52cb`, green `#00d722`, orange `#ff6b00`, yellow `#ffae13`, red `#ee1d36`
## 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/webflow/components.html
+413
View File
@@ -0,0 +1,413 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Webflow — reference components</title>
<meta
name="description"
content="Reference fixture for design-systems/webflow. White marketing canvas,
Webflow Blue (#146ef5) accent, conservative 4px corners, 5-layer cascading
shadow on raised surfaces, WF Visual Sans Variable + Inconsolata."
/>
<style>
:root {
--bg: #ffffff;
--surface: #ffffff;
--surface-warm: var(--surface);
--fg: #080808;
--fg-2: #363636;
--muted: #5a5a5a;
--meta: #ababab;
--border: #d8d8d8;
--border-soft: #ebebeb;
--accent: #146ef5;
--accent-on: #ffffff;
--accent-hover: #0055d4;
--accent-active: color-mix(in oklab, var(--accent), black 14%);
--success: #00d722;
--warn: #ffae13;
--danger: #ee1d36;
--font-display: "WF Visual Sans Variable", "Inter", Arial, system-ui, sans-serif;
--font-body: "WF Visual Sans Variable", "Inter", Arial, system-ui, sans-serif;
--font-mono: "Inconsolata", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
--text-xs: 12px;
--text-sm: 14px;
--text-base: 16px;
--text-lg: 20px;
--text-xl: 24px;
--text-2xl: 32px;
--text-3xl: 56px;
--text-4xl: 80px;
--leading-body: 1.6;
--leading-tight: 1.04;
--tracking-display: -0.01em;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-12: 48px;
--section-y-desktop: 96px;
--section-y-tablet: 64px;
--section-y-phone: 48px;
--radius-sm: 4px;
--radius-md: 4px;
--radius-lg: 8px;
--radius-pill: 9999px;
--elev-flat: none;
--elev-ring: 0 0 0 1px var(--border);
--elev-raised:
0px 84px 24px rgba(0, 0, 0, 0),
0px 54px 22px rgba(0, 0, 0, 0.01),
0px 30px 18px rgba(0, 0, 0, 0.04),
0px 13px 13px rgba(0, 0, 0, 0.08),
0px 3px 7px rgba(0, 0, 0, 0.09);
--focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
--motion-fast: 150ms;
--motion-base: 200ms;
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--container-max: 1200px;
--container-gutter-desktop: 24px;
--container-gutter-tablet: 16px;
--container-gutter-phone: 12px;
}
/* ─── 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: 500;
line-height: var(--leading-body);
-webkit-font-smoothing: antialiased;
}
/* ─── Layout ─────────────────────────────────────────────── */
.container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-gutter-desktop); }
section { padding-block: var(--section-y-desktop); }
section + section { border-top: 1px solid var(--border); }
@media (max-width: 991px) {
.container { padding-inline: var(--container-gutter-tablet); }
section { padding-block: var(--section-y-tablet); }
}
@media (max-width: 479px) {
.container { padding-inline: var(--container-gutter-phone); }
section { padding-block: var(--section-y-phone); }
}
/* ─── Typography — display 600, body 500 (DESIGN.md §3) ── */
h1, h2, h3 {
font-family: var(--font-display);
font-weight: 600;
line-height: var(--leading-tight);
color: var(--fg);
margin: 0;
}
h1 { font-size: var(--text-4xl); letter-spacing: var(--tracking-display); }
h2 { font-size: var(--text-3xl); letter-spacing: normal; }
h3 { font-size: var(--text-xl); font-weight: 500; line-height: 1.3; }
p { margin: 0; color: var(--fg-2); }
.lead { font-size: var(--text-lg); color: var(--fg-2); line-height: 1.4; }
.body-muted { color: var(--muted); }
.body-sm { font-size: var(--text-sm); }
/* Uppercase eyebrow — DESIGN.md §3 Micro Uppercase: 10–15px,
weight 500–600, wide tracking. We use 12px / 600 / 0.12em. */
.eyebrow {
font-family: var(--font-display);
font-size: var(--text-xs);
color: var(--accent);
text-transform: uppercase;
letter-spacing: 0.12em;
font-weight: 600;
line-height: 1.3;
}
.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 — 4px radius, 6px translate hover (DESIGN.md §4) */
.btn {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 12px 20px;
border-radius: var(--radius-sm);
font-family: var(--font-body);
font-size: var(--text-base);
font-weight: 500;
line-height: 1;
letter-spacing: -0.01em;
cursor: pointer;
border: 1px solid transparent;
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),
transform var(--motion-fast) var(--ease-standard);
}
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn .btn-icon {
transition: transform var(--motion-fast) var(--ease-standard);
}
/* The signature translate(6px) on the trailing icon — DESIGN.md §7 */
.btn:hover .btn-icon { transform: translateX(6px); }
/* Primary: Webflow Blue */
.btn-primary { background: var(--accent); color: var(--accent-on); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:active { background: var(--accent-active); }
/* Secondary: outlined, near-black ink — the precise builder look */
.btn-secondary {
background: var(--bg);
color: var(--fg);
border-color: var(--border);
}
.btn-secondary:hover { border-color: #898989; } /* DESIGN.md §2 Border Hover */
/* ─── Inputs — 4px radius, blue focus ring ──────────────── */
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field label {
font-size: var(--text-sm);
font-weight: 500;
color: var(--fg);
}
.field input {
padding: 12px 14px;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
background: var(--bg);
color: var(--fg);
font-family: var(--font-body);
font-size: var(--text-base);
font-weight: 500;
outline: none;
transition:
border-color var(--motion-fast) var(--ease-standard),
box-shadow var(--motion-fast) var(--ease-standard);
}
.field input:hover { border-color: #898989; }
.field input:focus-visible {
border-color: var(--accent);
box-shadow: var(--focus-ring);
}
.field input::placeholder { color: var(--meta); font-weight: 500; }
.field-help { font-size: var(--text-xs); color: var(--muted); }
/* ─── Cards — 1px border, 5-layer cascading shadow ──────── */
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: var(--space-6);
display: flex;
flex-direction: column;
gap: var(--space-3);
box-shadow: var(--elev-raised);
transition:
transform var(--motion-base) var(--ease-standard),
border-color var(--motion-base) var(--ease-standard);
}
.card:hover {
transform: translateY(-2px);
border-color: #898989;
}
.card .card-link {
color: var(--accent);
font-weight: 500;
margin-block-start: auto;
padding-block-start: var(--space-2);
}
/* ─── Badges — blue 10% tint, 4px radius (DESIGN.md §4) ─── */
.badge {
display: inline-flex; align-items: center; gap: var(--space-2);
padding: 4px var(--space-2);
border-radius: var(--radius-sm);
font-size: var(--text-xs);
font-weight: 550;
line-height: 1.2;
font-family: var(--font-display);
}
.badge-accent {
color: var(--accent);
background: color-mix(in oklab, var(--accent), transparent 90%);
}
.badge-success {
color: var(--success);
background: color-mix(in oklab, var(--success), transparent 88%);
}
.badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
/* ─── Links + kbd ───────────────────────────────────────── */
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 3px; }
kbd {
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);
}
/* ─── Section helpers ───────────────────────────────────── */
.hero-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-12); align-items: end; }
@media (max-width: 991px) { .hero-grid { grid-template-columns: 1fr; gap: var(--space-8); } }
.hero-actions { display: flex; gap: var(--space-3); margin-block-start: var(--space-6); flex-wrap: wrap; }
.hero-meta {
display: flex; flex-direction: column; gap: var(--space-3);
padding: var(--space-5);
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: var(--surface);
box-shadow: var(--elev-raised);
}
.meta-row {
display: flex; align-items: center; justify-content: space-between;
gap: var(--space-3);
padding-block: var(--space-2);
}
.meta-row + .meta-row { border-top: 1px solid var(--border-soft); }
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
@media (max-width: 991px) { .features-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 479px) { .features-grid { grid-template-columns: 1fr; } }
.form-row { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-12); align-items: start; }
@media (max-width: 991px) { .form-row { grid-template-columns: 1fr; } }
.form { display: flex; flex-direction: column; gap: var(--space-4); max-width: 440px; }
.form-actions { display: flex; gap: var(--space-3); margin-block-start: var(--space-2); }
.icon { width: 16px; height: 16px; flex-shrink: 0; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
</style>
</head>
<body>
<main class="container">
<section data-od-id="hero">
<div class="hero-grid">
<div class="stack-4">
<p class="eyebrow">Reference fixture · webflow</p>
<h1>Design and build production-ready websites — visually.</h1>
<p class="lead" style="max-width: 52ch">
The visual web platform for designers. Drag, configure, and ship sites
that meet the standards of the production web — no shortcuts, no compromises.
</p>
<div class="hero-actions">
<a href="./tokens.css" class="btn btn-primary">
Start building
<svg class="icon btn-icon" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.75"
stroke-linecap="round" stroke-linejoin="round"
aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
</a>
<a href="./DESIGN.md" class="btn btn-secondary">Read the spec</a>
</div>
</div>
<aside class="hero-meta" aria-label="System status">
<div class="meta-row">
<span class="body-sm body-muted">Render status</span>
<span class="badge badge-success">
<span class="badge-dot" aria-hidden="true"></span>
Live
</span>
</div>
<div class="meta-row">
<span class="body-sm body-muted">Brand version</span>
<span class="badge badge-accent">v1.0</span>
</div>
<div class="meta-row">
<span class="body-sm body-muted">Shortcut</span>
<span class="body-sm"><kbd>⌘</kbd> <kbd>K</kbd></span>
</div>
</aside>
</div>
</section>
<section data-od-id="features">
<div class="stack-3">
<p class="eyebrow">What this fixture exercises</p>
<h2 style="max-width: 22ch">A precise builder, made for the production web.</h2>
</div>
<div class="features-grid" style="margin-block-start: var(--space-8)">
<article class="card">
<h3>Webflow Blue, on purpose</h3>
<p class="body-muted body-sm">
--accent (#146ef5) is the single chromatic move — CTAs, links,
focus rings. Hover darkens to the documented #0055d4, not a formula.
</p>
<a href="./tokens.css" class="card-link body-sm">Inspect accents →</a>
</article>
<article class="card">
<h3>Five-layer cascading shadow</h3>
<p class="body-muted body-sm">
--elev-raised stacks five shadows from 84px presence to 3px contact.
Cards feel built into the page, not floating above it.
</p>
<a href="./DESIGN.md" class="card-link body-sm">Read the rule →</a>
</article>
<article class="card">
<h3>Sharp, conservative corners</h3>
<p class="body-muted body-sm">
--radius-sm and --radius-md sit at 4px; --radius-lg caps at 8px.
Nothing rounds beyond functional — precise, builder-grade geometry.
</p>
<a href="./tokens.css" class="card-link body-sm">Inspect radius →</a>
</article>
</div>
</section>
<section data-od-id="form">
<div class="form-row">
<div class="stack-4">
<p class="eyebrow">Form components</p>
<h2>Inputs on the white canvas.</h2>
<p class="body-muted" style="max-width: 48ch">
Border Gray (#d8d8d8) at rest, Border Hover (#898989) on hover,
Webflow Blue focus ring. The same precision applies to every interactive
surface — buttons, inputs, cards.
</p>
</div>
<form class="form" onsubmit="event.preventDefault();">
<div class="field">
<label for="email">Work email</label>
<input id="email" type="email" placeholder="[email protected]" autocomplete="email" required />
<p class="field-help">We'll send a workspace invite — nothing else.</p>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">
Get started
<svg class="icon btn-icon" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.75"
stroke-linecap="round" stroke-linejoin="round"
aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
</button>
<button type="button" class="btn btn-secondary">Talk to sales</button>
</div>
</form>
</div>
</section>
</main>
</body>
</html>
open-design/design-systems/webflow/components.manifest.json
+485
View File
@@ -0,0 +1,485 @@
{
"schemaVersion": 1,
"brandId": "webflow",
"source": {
"componentsHtml": "components.html",
"tokensCss": "tokens.css"
},
"fixture": {
"title": "Webflow — reference components",
"description": "Reference fixture for design-systems/webflow. White marketing canvas, Webflow Blue (#146ef5) accent, conservative 4px corners, 5-layer cascading shadow on raised surfaces, WF Visual Sans Variable + Inconsolata.",
"styleBlockCount": 1,
"selectorCount": 56,
"classCount": 28,
"elementCount": 24
},
"tokens": {
"declared": [
"--accent",
"--accent-active",
"--accent-hover",
"--accent-on",
"--bg",
"--border",
"--border-soft",
"--container-gutter-desktop",
"--container-gutter-phone",
"--container-gutter-tablet",
"--container-max",
"--danger",
"--ease-standard",
"--elev-flat",
"--elev-raised",
"--elev-ring",
"--fg",
"--fg-2",
"--focus-ring",
"--font-body",
"--font-display",
"--font-mono",
"--leading-body",
"--leading-tight",
"--meta",
"--motion-base",
"--motion-fast",
"--muted",
"--radius-lg",
"--radius-md",
"--radius-pill",
"--radius-sm",
"--section-y-desktop",
"--section-y-phone",
"--section-y-tablet",
"--space-1",
"--space-12",
"--space-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-md",
"--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",
"--text-3xl",
"--text-4xl",
"--text-base",
"--text-lg",
"--text-sm",
"--text-xl",
"--text-xs",
"--tracking-display"
],
"unusedDeclared": [
"--danger",
"--elev-flat",
"--elev-ring",
"--radius-lg",
"--radius-pill",
"--space-1",
"--surface-warm",
"--text-2xl",
"--warn"
],
"undeclaredReferenced": []
},
"selectors": [
".badge",
".badge-accent",
".badge-dot",
".badge-success",
".body-muted",
".body-sm",
".btn",
".btn .btn-icon",
".btn-primary",
".btn-primary:active",
".btn-primary:hover",
".btn-secondary",
".btn-secondary:hover",
".btn:focus-visible",
".btn:hover .btn-icon",
".card",
".card .card-link",
".card:hover",
".container",
".eyebrow",
".features-grid",
".field",
".field input",
".field input::placeholder",
".field input:focus-visible",
".field input:hover",
".field label",
".field-help",
".form",
".form-actions",
".form-row",
".hero-actions",
".hero-grid",
".hero-meta",
".icon",
".lead",
".meta-row",
".meta-row + .meta-row",
".row-between",
".stack-3 > * + *",
".stack-4 > * + *",
".stack-6 > * + *",
"*",
"*::after",
"*::before",
"a",
"a:hover",
"body",
"h1",
"h2",
"h3",
"html",
"kbd",
"p",
"section",
"section + section"
],
"classes": [
"badge",
"badge-accent",
"badge-dot",
"badge-success",
"body-muted",
"body-sm",
"btn",
"btn-icon",
"btn-primary",
"btn-secondary",
"card",
"card-link",
"container",
"eyebrow",
"features-grid",
"field",
"field-help",
"form",
"form-actions",
"form-row",
"hero-actions",
"hero-grid",
"hero-meta",
"icon",
"lead",
"meta-row",
"stack-3",
"stack-4"
],
"elements": [
"a",
"article",
"aside",
"body",
"button",
"div",
"form",
"h1",
"h2",
"h3",
"head",
"html",
"input",
"kbd",
"label",
"main",
"meta",
"p",
"path",
"section",
"span",
"style",
"svg",
"title"
],
"groups": [
{
"id": "buttons",
"label": "Buttons and calls to action",
"present": true,
"selectors": [
".btn",
".btn .btn-icon",
".btn-primary",
".btn-primary:active",
".btn-primary:hover",
".btn-secondary",
".btn-secondary:hover",
".btn:focus-visible",
".btn:hover .btn-icon"
],
"classes": [
"btn",
"btn-icon",
"btn-primary",
"btn-secondary"
],
"elements": [
"button"
],
"tokenReferences": [
"--accent",
"--accent-active",
"--accent-on",
"--ease-standard",
"--font-body",
"--motion-fast",
"--radius-sm",
"--space-2",
"--text-base"
]
},
{
"id": "inputs",
"label": "Form fields and controls",
"present": true,
"selectors": [
".field",
".field input",
".field input::placeholder",
".field input:focus-visible",
".field input:hover",
".field label",
".field-help"
],
"classes": [
"field",
"field-help",
"form",
"form-actions",
"form-row"
],
"elements": [
"form",
"input",
"label"
],
"tokenReferences": [
"--fg",
"--meta",
"--text-sm"
]
},
{
"id": "cards",
"label": "Cards and panels",
"present": true,
"selectors": [
".card",
".card .card-link",
".card:hover"
],
"classes": [
"card",
"card-link"
],
"elements": [],
"tokenReferences": [
"--accent",
"--border",
"--ease-standard",
"--elev-raised",
"--motion-base",
"--radius-md",
"--space-2",
"--space-3",
"--space-6",
"--surface"
]
},
{
"id": "badges",
"label": "Badges, chips, and status labels",
"present": true,
"selectors": [
".badge",
".badge-accent",
".badge-dot",
".badge-success"
],
"classes": [
"badge",
"badge-accent",
"badge-dot",
"badge-success"
],
"elements": [],
"tokenReferences": [
"--accent"
]
},
{
"id": "links",
"label": "Links and inline actions",
"present": true,
"selectors": [
"a",
"a:hover"
],
"classes": [],
"elements": [
"a"
],
"tokenReferences": [
"--accent-hover"
]
},
{
"id": "keyboard",
"label": "Keyboard hints",
"present": true,
"selectors": [
"kbd"
],
"classes": [],
"elements": [
"kbd"
],
"tokenReferences": []
},
{
"id": "icons",
"label": "Icon slots",
"present": true,
"selectors": [
".icon"
],
"classes": [
"icon"
],
"elements": [
"svg"
],
"tokenReferences": []
},
{
"id": "typography",
"label": "Typography scale and text utilities",
"present": true,
"selectors": [
".body-muted",
".body-sm",
".eyebrow",
".lead",
"h1",
"h2",
"h3"
],
"classes": [
"body-muted",
"body-sm",
"eyebrow",
"lead"
],
"elements": [
"h1",
"h2",
"h3",
"p"
],
"tokenReferences": [
"--accent",
"--fg",
"--font-display",
"--leading-tight",
"--muted",
"--text-3xl",
"--text-xs"
]
},
{
"id": "layout",
"label": "Layout primitives",
"present": true,
"selectors": [
".container",
".row-between",
".stack-3 > * + *",
".stack-4 > * + *",
".stack-6 > * + *",
"section",
"section + section"
],
"classes": [
"container",
"features-grid",
"hero-grid",
"stack-3",
"stack-4"
],
"elements": [
"main",
"section"
],
"tokenReferences": [
"--border",
"--container-gutter-desktop",
"--container-gutter-phone",
"--container-gutter-tablet",
"--container-max",
"--space-4"
]
}
],
"literals": {
"colorExpressions": 5,
"pixelValues": 28,
"hardcodedFontFamilies": 7
}
}
open-design/design-systems/webflow/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": 1,
"layerCounts": {
"A1-identity": 8,
"B-slot": 4,
"A2": 26,
"A1-structure": 18
},
"score": 100,
"grade": "excellent",
"recommendRebuild": false
},
"tokens": [
{
"name": "--bg",
"value": "#ffffff",
"type": "color",
"layer": "A1-identity",
"confidence": "high",
"reason": "Bundled tokens.css declares --bg; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:44"
],
"sourceName": "--bg"
},
{
"name": "--surface",
"value": "#ffffff",
"type": "color",
"layer": "A1-identity",
"confidence": "high",
"reason": "Bundled tokens.css declares --surface; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:45"
],
"sourceName": "--surface"
},
{
"name": "--surface-warm",
"value": "var(--surface)",
"type": "color",
"layer": "B-slot",
"confidence": "high",
"reason": "Bundled tokens.css declares --surface-warm; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:46"
],
"sourceName": "--surface-warm"
},
{
"name": "--fg",
"value": "#080808",
"type": "color",
"layer": "A1-identity",
"confidence": "high",
"reason": "Bundled tokens.css declares --fg; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:56"
],
"sourceName": "--fg"
},
{
"name": "--fg-2",
"value": "#363636",
"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:57"
],
"sourceName": "--fg-2"
},
{
"name": "--muted",
"value": "#5a5a5a",
"type": "color",
"layer": "A1-identity",
"confidence": "high",
"reason": "Bundled tokens.css declares --muted; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:58"
],
"sourceName": "--muted"
},
{
"name": "--meta",
"value": "#ababab",
"type": "color",
"layer": "B-slot",
"confidence": "high",
"reason": "Bundled tokens.css declares --meta; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:59"
],
"sourceName": "--meta"
},
{
"name": "--border",
"value": "#d8d8d8",
"type": "color",
"layer": "A1-identity",
"confidence": "high",
"reason": "Bundled tokens.css declares --border; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:66"
],
"sourceName": "--border"
},
{
"name": "--border-soft",
"value": "#ebebeb",
"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:67"
],
"sourceName": "--border-soft"
},
{
"name": "--accent",
"value": "#146ef5",
"type": "color",
"layer": "A1-identity",
"confidence": "high",
"reason": "Bundled tokens.css declares --accent; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:75"
],
"sourceName": "--accent"
},
{
"name": "--accent-on",
"value": "#ffffff",
"type": "color",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --accent-on; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:76"
],
"sourceName": "--accent-on"
},
{
"name": "--accent-hover",
"value": "#0055d4",
"type": "color",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --accent-hover; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:77"
],
"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:78"
],
"sourceName": "--accent-active"
},
{
"name": "--success",
"value": "#00d722",
"type": "color",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --success; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:85"
],
"sourceName": "--success"
},
{
"name": "--warn",
"value": "#ffae13",
"type": "color",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --warn; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:86"
],
"sourceName": "--warn"
},
{
"name": "--danger",
"value": "#ee1d36",
"type": "color",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --danger; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:87"
],
"sourceName": "--danger"
},
{
"name": "--font-display",
"value": "\"WF Visual Sans Variable\", \"Inter\", Arial, system-ui, 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:95"
],
"sourceName": "--font-display"
},
{
"name": "--font-body",
"value": "\"WF Visual Sans Variable\", \"Inter\", Arial, system-ui, sans-serif",
"type": "fontFamily",
"layer": "A1-identity",
"confidence": "high",
"reason": "Bundled tokens.css declares --font-body; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:96"
],
"sourceName": "--font-body"
},
{
"name": "--font-mono",
"value": "\"Inconsolata\", ui-monospace, \"SF 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:97"
],
"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:104"
],
"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:105"
],
"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:106"
],
"sourceName": "--text-base"
},
{
"name": "--text-lg",
"value": "20px",
"type": "dimension",
"layer": "A1-structure",
"confidence": "high",
"reason": "Bundled tokens.css declares --text-lg; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:107"
],
"sourceName": "--text-lg"
},
{
"name": "--text-xl",
"value": "24px",
"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:108"
],
"sourceName": "--text-xl"
},
{
"name": "--text-2xl",
"value": "32px",
"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:109"
],
"sourceName": "--text-2xl"
},
{
"name": "--text-3xl",
"value": "56px",
"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:110"
],
"sourceName": "--text-3xl"
},
{
"name": "--text-4xl",
"value": "80px",
"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:111"
],
"sourceName": "--text-4xl"
},
{
"name": "--leading-body",
"value": "1.6",
"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:118"
],
"sourceName": "--leading-body"
},
{
"name": "--leading-tight",
"value": "1.04",
"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:119"
],
"sourceName": "--leading-tight"
},
{
"name": "--tracking-display",
"value": "-0.01em",
"type": "dimension",
"layer": "A1-structure",
"confidence": "high",
"reason": "Bundled tokens.css declares --tracking-display; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:120"
],
"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:127"
],
"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:128"
],
"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:129"
],
"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:130"
],
"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:131"
],
"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:132"
],
"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:133"
],
"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:134"
],
"sourceName": "--space-12"
},
{
"name": "--section-y-desktop",
"value": "96px",
"type": "dimension",
"layer": "A1-structure",
"confidence": "high",
"reason": "Bundled tokens.css declares --section-y-desktop; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:139"
],
"sourceName": "--section-y-desktop"
},
{
"name": "--section-y-tablet",
"value": "64px",
"type": "dimension",
"layer": "A1-structure",
"confidence": "high",
"reason": "Bundled tokens.css declares --section-y-tablet; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:140"
],
"sourceName": "--section-y-tablet"
},
{
"name": "--section-y-phone",
"value": "48px",
"type": "dimension",
"layer": "A1-structure",
"confidence": "high",
"reason": "Bundled tokens.css declares --section-y-phone; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:141"
],
"sourceName": "--section-y-phone"
},
{
"name": "--radius-sm",
"value": "4px",
"type": "dimension",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --radius-sm; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:148"
],
"sourceName": "--radius-sm"
},
{
"name": "--radius-md",
"value": "4px",
"type": "dimension",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --radius-md; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:149"
],
"sourceName": "--radius-md"
},
{
"name": "--radius-lg",
"value": "8px",
"type": "dimension",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --radius-lg; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:150"
],
"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:151"
],
"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:160"
],
"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:161"
],
"sourceName": "--elev-ring"
},
{
"name": "--elev-raised",
"value": "0px 84px 24px rgba(0, 0, 0, 0), 0px 54px 22px rgba(0, 0, 0, 0.01), 0px 30px 18px rgba(0, 0, 0, 0.04), 0px 13px 13px rgba(0, 0, 0, 0.08), 0px 3px 7px rgba(0, 0, 0, 0.09)",
"type": "shadow",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --elev-raised; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:162"
],
"sourceName": "--elev-raised"
},
{
"name": "--focus-ring",
"value": "0 0 0 3px color-mix(in oklab, var(--accent), 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:173"
],
"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:179"
],
"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:180"
],
"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:181"
],
"sourceName": "--ease-standard"
},
{
"name": "--container-max",
"value": "1200px",
"type": "dimension",
"layer": "A1-structure",
"confidence": "high",
"reason": "Bundled tokens.css declares --container-max; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:187"
],
"sourceName": "--container-max"
},
{
"name": "--container-gutter-desktop",
"value": "24px",
"type": "dimension",
"layer": "A1-structure",
"confidence": "high",
"reason": "Bundled tokens.css declares --container-gutter-desktop; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:188"
],
"sourceName": "--container-gutter-desktop"
},
{
"name": "--container-gutter-tablet",
"value": "16px",
"type": "dimension",
"layer": "A1-structure",
"confidence": "high",
"reason": "Bundled tokens.css declares --container-gutter-tablet; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:189"
],
"sourceName": "--container-gutter-tablet"
},
{
"name": "--container-gutter-phone",
"value": "12px",
"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:190"
],
"sourceName": "--container-gutter-phone"
}
]
}
open-design/design-systems/webflow/manifest.json
+54
View File
@@ -0,0 +1,54 @@
{
"schemaVersion": "od-design-system-project/v1",
"id": "webflow",
"name": "Webflow",
"category": "Design & Creative",
"description": "Bundled OpenDesign package for Webflow, 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/webflow/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>Webflow 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/webflow/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>Webflow 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/webflow/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>Webflow typography</title>
<link rel="stylesheet" href="../tokens.css" />
<style>
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); }
main { max-width: var(--container-max); margin: 0 auto; padding: var(--space-12) var(--space-6); }
h1 { margin: 0 0 var(--space-6); font-family: var(--font-display); font-size: var(--text-2xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
.type-stack { display: grid; gap: var(--space-4); max-width: 760px; }
.eyebrow { margin: 0; color: var(--accent); font-size: var(--text-xs); letter-spacing: var(--tracking-display); text-transform: uppercase; }
h2 { margin: 0; font-family: var(--font-display); font-size: var(--text-4xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
.lede { margin: 0; color: var(--fg-2); font-size: var(--text-lg); line-height: var(--leading-body); }
.body { margin: 0; color: var(--muted); font-size: var(--text-base); line-height: var(--leading-body); }
</style>
</head>
<body>
<main>
<h1>Typography</h1>
<section class="type-stack">
<p class="eyebrow">Design & Creative</p>
<h2>Display sample for Webflow</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/webflow/source/evidence.md
+17
View File
@@ -0,0 +1,17 @@
# Webflow 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/webflow/DESIGN.md
- design-systems/webflow/tokens.css
- design-systems/webflow/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/webflow/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": 1,
"layerCounts": {
"A1-identity": 8,
"B-slot": 4,
"A2": 26,
"A1-structure": 18
},
"score": 100,
"grade": "excellent",
"recommendRebuild": false
},
"tokens": [
{
"name": "--bg",
"layer": "A1-identity",
"value": "#ffffff",
"confidence": "high",
"reason": "Bundled tokens.css declares --bg; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:44"
],
"sourceName": "--bg"
},
{
"name": "--surface",
"layer": "A1-identity",
"value": "#ffffff",
"confidence": "high",
"reason": "Bundled tokens.css declares --surface; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:45"
],
"sourceName": "--surface"
},
{
"name": "--surface-warm",
"layer": "B-slot",
"value": "var(--surface)",
"confidence": "high",
"reason": "Bundled tokens.css declares --surface-warm; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:46"
],
"sourceName": "--surface-warm"
},
{
"name": "--fg",
"layer": "A1-identity",
"value": "#080808",
"confidence": "high",
"reason": "Bundled tokens.css declares --fg; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:56"
],
"sourceName": "--fg"
},
{
"name": "--fg-2",
"layer": "B-slot",
"value": "#363636",
"confidence": "high",
"reason": "Bundled tokens.css declares --fg-2; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:57"
],
"sourceName": "--fg-2"
},
{
"name": "--muted",
"layer": "A1-identity",
"value": "#5a5a5a",
"confidence": "high",
"reason": "Bundled tokens.css declares --muted; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:58"
],
"sourceName": "--muted"
},
{
"name": "--meta",
"layer": "B-slot",
"value": "#ababab",
"confidence": "high",
"reason": "Bundled tokens.css declares --meta; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:59"
],
"sourceName": "--meta"
},
{
"name": "--border",
"layer": "A1-identity",
"value": "#d8d8d8",
"confidence": "high",
"reason": "Bundled tokens.css declares --border; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:66"
],
"sourceName": "--border"
},
{
"name": "--border-soft",
"layer": "B-slot",
"value": "#ebebeb",
"confidence": "high",
"reason": "Bundled tokens.css declares --border-soft; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:67"
],
"sourceName": "--border-soft"
},
{
"name": "--accent",
"layer": "A1-identity",
"value": "#146ef5",
"confidence": "high",
"reason": "Bundled tokens.css declares --accent; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:75"
],
"sourceName": "--accent"
},
{
"name": "--accent-on",
"layer": "A2",
"value": "#ffffff",
"confidence": "high",
"reason": "Bundled tokens.css declares --accent-on; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:76"
],
"sourceName": "--accent-on"
},
{
"name": "--accent-hover",
"layer": "A2",
"value": "#0055d4",
"confidence": "high",
"reason": "Bundled tokens.css declares --accent-hover; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:77"
],
"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:78"
],
"sourceName": "--accent-active"
},
{
"name": "--success",
"layer": "A2",
"value": "#00d722",
"confidence": "high",
"reason": "Bundled tokens.css declares --success; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:85"
],
"sourceName": "--success"
},
{
"name": "--warn",
"layer": "A2",
"value": "#ffae13",
"confidence": "high",
"reason": "Bundled tokens.css declares --warn; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:86"
],
"sourceName": "--warn"
},
{
"name": "--danger",
"layer": "A2",
"value": "#ee1d36",
"confidence": "high",
"reason": "Bundled tokens.css declares --danger; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:87"
],
"sourceName": "--danger"
},
{
"name": "--font-display",
"layer": "A1-identity",
"value": "\"WF Visual Sans Variable\", \"Inter\", Arial, system-ui, sans-serif",
"confidence": "high",
"reason": "Bundled tokens.css declares --font-display; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:95"
],
"sourceName": "--font-display"
},
{
"name": "--font-body",
"layer": "A1-identity",
"value": "\"WF Visual Sans Variable\", \"Inter\", Arial, system-ui, sans-serif",
"confidence": "high",
"reason": "Bundled tokens.css declares --font-body; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:96"
],
"sourceName": "--font-body"
},
{
"name": "--font-mono",
"layer": "A2",
"value": "\"Inconsolata\", ui-monospace, \"SF 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:97"
],
"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:104"
],
"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:105"
],
"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:106"
],
"sourceName": "--text-base"
},
{
"name": "--text-lg",
"layer": "A1-structure",
"value": "20px",
"confidence": "high",
"reason": "Bundled tokens.css declares --text-lg; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:107"
],
"sourceName": "--text-lg"
},
{
"name": "--text-xl",
"layer": "A1-structure",
"value": "24px",
"confidence": "high",
"reason": "Bundled tokens.css declares --text-xl; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:108"
],
"sourceName": "--text-xl"
},
{
"name": "--text-2xl",
"layer": "A1-structure",
"value": "32px",
"confidence": "high",
"reason": "Bundled tokens.css declares --text-2xl; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:109"
],
"sourceName": "--text-2xl"
},
{
"name": "--text-3xl",
"layer": "A1-structure",
"value": "56px",
"confidence": "high",
"reason": "Bundled tokens.css declares --text-3xl; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:110"
],
"sourceName": "--text-3xl"
},
{
"name": "--text-4xl",
"layer": "A1-structure",
"value": "80px",
"confidence": "high",
"reason": "Bundled tokens.css declares --text-4xl; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:111"
],
"sourceName": "--text-4xl"
},
{
"name": "--leading-body",
"layer": "A1-structure",
"value": "1.6",
"confidence": "high",
"reason": "Bundled tokens.css declares --leading-body; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:118"
],
"sourceName": "--leading-body"
},
{
"name": "--leading-tight",
"layer": "A1-structure",
"value": "1.04",
"confidence": "high",
"reason": "Bundled tokens.css declares --leading-tight; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:119"
],
"sourceName": "--leading-tight"
},
{
"name": "--tracking-display",
"layer": "A1-structure",
"value": "-0.01em",
"confidence": "high",
"reason": "Bundled tokens.css declares --tracking-display; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:120"
],
"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:127"
],
"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:128"
],
"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:129"
],
"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:130"
],
"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:131"
],
"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:132"
],
"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:133"
],
"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:134"
],
"sourceName": "--space-12"
},
{
"name": "--section-y-desktop",
"layer": "A1-structure",
"value": "96px",
"confidence": "high",
"reason": "Bundled tokens.css declares --section-y-desktop; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:139"
],
"sourceName": "--section-y-desktop"
},
{
"name": "--section-y-tablet",
"layer": "A1-structure",
"value": "64px",
"confidence": "high",
"reason": "Bundled tokens.css declares --section-y-tablet; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:140"
],
"sourceName": "--section-y-tablet"
},
{
"name": "--section-y-phone",
"layer": "A1-structure",
"value": "48px",
"confidence": "high",
"reason": "Bundled tokens.css declares --section-y-phone; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:141"
],
"sourceName": "--section-y-phone"
},
{
"name": "--radius-sm",
"layer": "A2",
"value": "4px",
"confidence": "high",
"reason": "Bundled tokens.css declares --radius-sm; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:148"
],
"sourceName": "--radius-sm"
},
{
"name": "--radius-md",
"layer": "A2",
"value": "4px",
"confidence": "high",
"reason": "Bundled tokens.css declares --radius-md; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:149"
],
"sourceName": "--radius-md"
},
{
"name": "--radius-lg",
"layer": "A2",
"value": "8px",
"confidence": "high",
"reason": "Bundled tokens.css declares --radius-lg; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:150"
],
"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:151"
],
"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:160"
],
"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:161"
],
"sourceName": "--elev-ring"
},
{
"name": "--elev-raised",
"layer": "A2",
"value": "0px 84px 24px rgba(0, 0, 0, 0), 0px 54px 22px rgba(0, 0, 0, 0.01), 0px 30px 18px rgba(0, 0, 0, 0.04), 0px 13px 13px rgba(0, 0, 0, 0.08), 0px 3px 7px rgba(0, 0, 0, 0.09)",
"confidence": "high",
"reason": "Bundled tokens.css declares --elev-raised; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:162"
],
"sourceName": "--elev-raised"
},
{
"name": "--focus-ring",
"layer": "A2",
"value": "0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%)",
"confidence": "high",
"reason": "Bundled tokens.css declares --focus-ring; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:173"
],
"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:179"
],
"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:180"
],
"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:181"
],
"sourceName": "--ease-standard"
},
{
"name": "--container-max",
"layer": "A1-structure",
"value": "1200px",
"confidence": "high",
"reason": "Bundled tokens.css declares --container-max; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:187"
],
"sourceName": "--container-max"
},
{
"name": "--container-gutter-desktop",
"layer": "A1-structure",
"value": "24px",
"confidence": "high",
"reason": "Bundled tokens.css declares --container-gutter-desktop; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:188"
],
"sourceName": "--container-gutter-desktop"
},
{
"name": "--container-gutter-tablet",
"layer": "A1-structure",
"value": "16px",
"confidence": "high",
"reason": "Bundled tokens.css declares --container-gutter-tablet; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:189"
],
"sourceName": "--container-gutter-tablet"
},
{
"name": "--container-gutter-phone",
"layer": "A1-structure",
"value": "12px",
"confidence": "high",
"reason": "Bundled tokens.css declares --container-gutter-phone; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:190"
],
"sourceName": "--container-gutter-phone"
}
]
}
open-design/design-systems/webflow/source/tokens.source.json
+349
View File
@@ -0,0 +1,349 @@
{
"schemaVersion": 1,
"sourceScope": "open-design-bundled-fixture",
"brandId": "webflow",
"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:44"
},
{
"name": "--surface",
"value": "#ffffff",
"layer": "A1-identity",
"source": "tokens.css:45"
},
{
"name": "--surface-warm",
"value": "var(--surface)",
"layer": "B-slot",
"source": "tokens.css:46"
},
{
"name": "--fg",
"value": "#080808",
"layer": "A1-identity",
"source": "tokens.css:56"
},
{
"name": "--fg-2",
"value": "#363636",
"layer": "B-slot",
"source": "tokens.css:57"
},
{
"name": "--muted",
"value": "#5a5a5a",
"layer": "A1-identity",
"source": "tokens.css:58"
},
{
"name": "--meta",
"value": "#ababab",
"layer": "B-slot",
"source": "tokens.css:59"
},
{
"name": "--border",
"value": "#d8d8d8",
"layer": "A1-identity",
"source": "tokens.css:66"
},
{
"name": "--border-soft",
"value": "#ebebeb",
"layer": "B-slot",
"source": "tokens.css:67"
},
{
"name": "--accent",
"value": "#146ef5",
"layer": "A1-identity",
"source": "tokens.css:75"
},
{
"name": "--accent-on",
"value": "#ffffff",
"layer": "A2",
"source": "tokens.css:76"
},
{
"name": "--accent-hover",
"value": "#0055d4",
"layer": "A2",
"source": "tokens.css:77"
},
{
"name": "--accent-active",
"value": "color-mix(in oklab, var(--accent), black 14%)",
"layer": "A2",
"source": "tokens.css:78"
},
{
"name": "--success",
"value": "#00d722",
"layer": "A2",
"source": "tokens.css:85"
},
{
"name": "--warn",
"value": "#ffae13",
"layer": "A2",
"source": "tokens.css:86"
},
{
"name": "--danger",
"value": "#ee1d36",
"layer": "A2",
"source": "tokens.css:87"
},
{
"name": "--font-display",
"value": "\"WF Visual Sans Variable\", \"Inter\", Arial, system-ui, sans-serif",
"layer": "A1-identity",
"source": "tokens.css:95"
},
{
"name": "--font-body",
"value": "\"WF Visual Sans Variable\", \"Inter\", Arial, system-ui, sans-serif",
"layer": "A1-identity",
"source": "tokens.css:96"
},
{
"name": "--font-mono",
"value": "\"Inconsolata\", ui-monospace, \"SF Mono\", Menlo, Monaco, Consolas, monospace",
"layer": "A2",
"source": "tokens.css:97"
},
{
"name": "--text-xs",
"value": "12px",
"layer": "A1-structure",
"source": "tokens.css:104"
},
{
"name": "--text-sm",
"value": "14px",
"layer": "A1-structure",
"source": "tokens.css:105"
},
{
"name": "--text-base",
"value": "16px",
"layer": "A1-structure",
"source": "tokens.css:106"
},
{
"name": "--text-lg",
"value": "20px",
"layer": "A1-structure",
"source": "tokens.css:107"
},
{
"name": "--text-xl",
"value": "24px",
"layer": "A1-structure",
"source": "tokens.css:108"
},
{
"name": "--text-2xl",
"value": "32px",
"layer": "A1-structure",
"source": "tokens.css:109"
},
{
"name": "--text-3xl",
"value": "56px",
"layer": "A1-structure",
"source": "tokens.css:110"
},
{
"name": "--text-4xl",
"value": "80px",
"layer": "A1-structure",
"source": "tokens.css:111"
},
{
"name": "--leading-body",
"value": "1.6",
"layer": "A1-structure",
"source": "tokens.css:118"
},
{
"name": "--leading-tight",
"value": "1.04",
"layer": "A1-structure",
"source": "tokens.css:119"
},
{
"name": "--tracking-display",
"value": "-0.01em",
"layer": "A1-structure",
"source": "tokens.css:120"
},
{
"name": "--space-1",
"value": "4px",
"layer": "A2",
"source": "tokens.css:127"
},
{
"name": "--space-2",
"value": "8px",
"layer": "A2",
"source": "tokens.css:128"
},
{
"name": "--space-3",
"value": "12px",
"layer": "A2",
"source": "tokens.css:129"
},
{
"name": "--space-4",
"value": "16px",
"layer": "A2",
"source": "tokens.css:130"
},
{
"name": "--space-5",
"value": "20px",
"layer": "A2",
"source": "tokens.css:131"
},
{
"name": "--space-6",
"value": "24px",
"layer": "A2",
"source": "tokens.css:132"
},
{
"name": "--space-8",
"value": "32px",
"layer": "A2",
"source": "tokens.css:133"
},
{
"name": "--space-12",
"value": "48px",
"layer": "A2",
"source": "tokens.css:134"
},
{
"name": "--section-y-desktop",
"value": "96px",
"layer": "A1-structure",
"source": "tokens.css:139"
},
{
"name": "--section-y-tablet",
"value": "64px",
"layer": "A1-structure",
"source": "tokens.css:140"
},
{
"name": "--section-y-phone",
"value": "48px",
"layer": "A1-structure",
"source": "tokens.css:141"
},
{
"name": "--radius-sm",
"value": "4px",
"layer": "A2",
"source": "tokens.css:148"
},
{
"name": "--radius-md",
"value": "4px",
"layer": "A2",
"source": "tokens.css:149"
},
{
"name": "--radius-lg",
"value": "8px",
"layer": "A2",
"source": "tokens.css:150"
},
{
"name": "--radius-pill",
"value": "9999px",
"layer": "A2",
"source": "tokens.css:151"
},
{
"name": "--elev-flat",
"value": "none",
"layer": "A2",
"source": "tokens.css:160"
},
{
"name": "--elev-ring",
"value": "0 0 0 1px var(--border)",
"layer": "A2",
"source": "tokens.css:161"
},
{
"name": "--elev-raised",
"value": "0px 84px 24px rgba(0, 0, 0, 0), 0px 54px 22px rgba(0, 0, 0, 0.01), 0px 30px 18px rgba(0, 0, 0, 0.04), 0px 13px 13px rgba(0, 0, 0, 0.08), 0px 3px 7px rgba(0, 0, 0, 0.09)",
"layer": "A2",
"source": "tokens.css:162"
},
{
"name": "--focus-ring",
"value": "0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%)",
"layer": "A2",
"source": "tokens.css:173"
},
{
"name": "--motion-fast",
"value": "150ms",
"layer": "A2",
"source": "tokens.css:179"
},
{
"name": "--motion-base",
"value": "200ms",
"layer": "A2",
"source": "tokens.css:180"
},
{
"name": "--ease-standard",
"value": "cubic-bezier(0.2, 0, 0, 1)",
"layer": "A2",
"source": "tokens.css:181"
},
{
"name": "--container-max",
"value": "1200px",
"layer": "A1-structure",
"source": "tokens.css:187"
},
{
"name": "--container-gutter-desktop",
"value": "24px",
"layer": "A1-structure",
"source": "tokens.css:188"
},
{
"name": "--container-gutter-tablet",
"value": "16px",
"layer": "A1-structure",
"source": "tokens.css:189"
},
{
"name": "--container-gutter-phone",
"value": "12px",
"layer": "A1-structure",
"source": "tokens.css:190"
}
]
}
open-design/design-systems/webflow/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>Webflow - Pitch deck</title>
<style>
:root {
--accent: #146ef5;
--accent-active: color-mix(in oklab, var(--accent), black 14%);
--accent-hover: #0055d4;
--accent-on: #ffffff;
--bg: #ffffff;
--border: #d8d8d8;
--border-soft: #ebebeb;
--container-gutter-desktop: 24px;
--container-gutter-phone: 12px;
--container-gutter-tablet: 16px;
--container-max: 1200px;
--danger: #ee1d36;
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--elev-flat: none;
--elev-raised: 0px 84px 24px rgba(0, 0, 0, 0), 0px 54px 22px rgba(0, 0, 0, 0.01), 0px 30px 18px rgba(0, 0, 0, 0.04), 0px 13px 13px rgba(0, 0, 0, 0.08), 0px 3px 7px rgba(0, 0, 0, 0.09);
--elev-ring: 0 0 0 1px var(--border);
--fg: #080808;
--fg-2: #363636;
--focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
--font-body: "WF Visual Sans Variable", "Inter", Arial, system-ui, sans-serif;
--font-display: "WF Visual Sans Variable", "Inter", Arial, system-ui, sans-serif;
--font-mono: "Inconsolata", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
--leading-body: 1.6;
--leading-tight: 1.04;
--meta: #ababab;
--motion-base: 200ms;
--motion-fast: 150ms;
--muted: #5a5a5a;
--radius-lg: 8px;
--radius-md: 4px;
--radius-pill: 9999px;
--radius-sm: 4px;
--section-y-desktop: 96px;
--section-y-phone: 48px;
--section-y-tablet: 64px;
--space-1: 4px;
--space-12: 48px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--success: #00d722;
--surface: #ffffff;
--surface-warm: var(--surface);
--text-2xl: 32px;
--text-3xl: 56px;
--text-4xl: 80px;
--text-base: 16px;
--text-lg: 20px;
--text-sm: 14px;
--text-xl: 24px;
--text-xs: 12px;
--tracking-display: -0.01em;
--warn: #ffae13;
}
:root {
--od-page-bg: #ffffff;
--od-surface: #ffffff;
--od-text: #080808;
--od-muted: #5a5a5a;
--od-border: #d8d8d8;
--od-accent: #146ef5;
--od-radius: 4px;
--od-font-body: "WF Visual Sans Variable", "Inter", Arial, system-ui, sans-serif;
--od-font-display: "WF Visual Sans Variable", "Inter", Arial, system-ui, 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>Webflow 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 Webflow, 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="Webflow" /></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/webflow/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>Webflow - Email</title>
<style>
:root {
--accent: #146ef5;
--accent-active: color-mix(in oklab, var(--accent), black 14%);
--accent-hover: #0055d4;
--accent-on: #ffffff;
--bg: #ffffff;
--border: #d8d8d8;
--border-soft: #ebebeb;
--container-gutter-desktop: 24px;
--container-gutter-phone: 12px;
--container-gutter-tablet: 16px;
--container-max: 1200px;
--danger: #ee1d36;
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--elev-flat: none;
--elev-raised: 0px 84px 24px rgba(0, 0, 0, 0), 0px 54px 22px rgba(0, 0, 0, 0.01), 0px 30px 18px rgba(0, 0, 0, 0.04), 0px 13px 13px rgba(0, 0, 0, 0.08), 0px 3px 7px rgba(0, 0, 0, 0.09);
--elev-ring: 0 0 0 1px var(--border);
--fg: #080808;
--fg-2: #363636;
--focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
--font-body: "WF Visual Sans Variable", "Inter", Arial, system-ui, sans-serif;
--font-display: "WF Visual Sans Variable", "Inter", Arial, system-ui, sans-serif;
--font-mono: "Inconsolata", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
--leading-body: 1.6;
--leading-tight: 1.04;
--meta: #ababab;
--motion-base: 200ms;
--motion-fast: 150ms;
--muted: #5a5a5a;
--radius-lg: 8px;
--radius-md: 4px;
--radius-pill: 9999px;
--radius-sm: 4px;
--section-y-desktop: 96px;
--section-y-phone: 48px;
--section-y-tablet: 64px;
--space-1: 4px;
--space-12: 48px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--success: #00d722;
--surface: #ffffff;
--surface-warm: var(--surface);
--text-2xl: 32px;
--text-3xl: 56px;
--text-4xl: 80px;
--text-base: 16px;
--text-lg: 20px;
--text-sm: 14px;
--text-xl: 24px;
--text-xs: 12px;
--tracking-display: -0.01em;
--warn: #ffae13;
}
:root {
--od-page-bg: #ffffff;
--od-surface: #ffffff;
--od-text: #080808;
--od-muted: #5a5a5a;
--od-border: #d8d8d8;
--od-accent: #146ef5;
--od-radius: 4px;
--od-font-body: "WF Visual Sans Variable", "Inter", Arial, system-ui, sans-serif;
--od-font-display: "WF Visual Sans Variable", "Inter", Arial, system-ui, 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>Webflow 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 Webflow, 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="Webflow" /></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/webflow/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>Webflow - Form page</title>
<style>
:root {
--accent: #146ef5;
--accent-active: color-mix(in oklab, var(--accent), black 14%);
--accent-hover: #0055d4;
--accent-on: #ffffff;
--bg: #ffffff;
--border: #d8d8d8;
--border-soft: #ebebeb;
--container-gutter-desktop: 24px;
--container-gutter-phone: 12px;
--container-gutter-tablet: 16px;
--container-max: 1200px;
--danger: #ee1d36;
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--elev-flat: none;
--elev-raised: 0px 84px 24px rgba(0, 0, 0, 0), 0px 54px 22px rgba(0, 0, 0, 0.01), 0px 30px 18px rgba(0, 0, 0, 0.04), 0px 13px 13px rgba(0, 0, 0, 0.08), 0px 3px 7px rgba(0, 0, 0, 0.09);
--elev-ring: 0 0 0 1px var(--border);
--fg: #080808;
--fg-2: #363636;
--focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
--font-body: "WF Visual Sans Variable", "Inter", Arial, system-ui, sans-serif;
--font-display: "WF Visual Sans Variable", "Inter", Arial, system-ui, sans-serif;
--font-mono: "Inconsolata", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
--leading-body: 1.6;
--leading-tight: 1.04;
--meta: #ababab;
--motion-base: 200ms;
--motion-fast: 150ms;
--muted: #5a5a5a;
--radius-lg: 8px;
--radius-md: 4px;
--radius-pill: 9999px;
--radius-sm: 4px;
--section-y-desktop: 96px;
--section-y-phone: 48px;
--section-y-tablet: 64px;
--space-1: 4px;
--space-12: 48px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--success: #00d722;
--surface: #ffffff;
--surface-warm: var(--surface);
--text-2xl: 32px;
--text-3xl: 56px;
--text-4xl: 80px;
--text-base: 16px;
--text-lg: 20px;
--text-sm: 14px;
--text-xl: 24px;
--text-xs: 12px;
--tracking-display: -0.01em;
--warn: #ffae13;
}
:root {
--od-page-bg: #ffffff;
--od-surface: #ffffff;
--od-text: #080808;
--od-muted: #5a5a5a;
--od-border: #d8d8d8;
--od-accent: #146ef5;
--od-radius: 4px;
--od-font-body: "WF Visual Sans Variable", "Inter", Arial, system-ui, sans-serif;
--od-font-display: "WF Visual Sans Variable", "Inter", Arial, system-ui, 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>Webflow 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 Webflow, 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="Webflow" /></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/webflow/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>Webflow - Landing page</title>
<style>
:root {
--accent: #146ef5;
--accent-active: color-mix(in oklab, var(--accent), black 14%);
--accent-hover: #0055d4;
--accent-on: #ffffff;
--bg: #ffffff;
--border: #d8d8d8;
--border-soft: #ebebeb;
--container-gutter-desktop: 24px;
--container-gutter-phone: 12px;
--container-gutter-tablet: 16px;
--container-max: 1200px;
--danger: #ee1d36;
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--elev-flat: none;
--elev-raised: 0px 84px 24px rgba(0, 0, 0, 0), 0px 54px 22px rgba(0, 0, 0, 0.01), 0px 30px 18px rgba(0, 0, 0, 0.04), 0px 13px 13px rgba(0, 0, 0, 0.08), 0px 3px 7px rgba(0, 0, 0, 0.09);
--elev-ring: 0 0 0 1px var(--border);
--fg: #080808;
--fg-2: #363636;
--focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
--font-body: "WF Visual Sans Variable", "Inter", Arial, system-ui, sans-serif;
--font-display: "WF Visual Sans Variable", "Inter", Arial, system-ui, sans-serif;
--font-mono: "Inconsolata", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
--leading-body: 1.6;
--leading-tight: 1.04;
--meta: #ababab;
--motion-base: 200ms;
--motion-fast: 150ms;
--muted: #5a5a5a;
--radius-lg: 8px;
--radius-md: 4px;
--radius-pill: 9999px;
--radius-sm: 4px;
--section-y-desktop: 96px;
--section-y-phone: 48px;
--section-y-tablet: 64px;
--space-1: 4px;
--space-12: 48px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--success: #00d722;
--surface: #ffffff;
--surface-warm: var(--surface);
--text-2xl: 32px;
--text-3xl: 56px;
--text-4xl: 80px;
--text-base: 16px;
--text-lg: 20px;
--text-sm: 14px;
--text-xl: 24px;
--text-xs: 12px;
--tracking-display: -0.01em;
--warn: #ffae13;
}
:root {
--od-page-bg: #ffffff;
--od-surface: #ffffff;
--od-text: #080808;
--od-muted: #5a5a5a;
--od-border: #d8d8d8;
--od-accent: #146ef5;
--od-radius: 4px;
--od-font-body: "WF Visual Sans Variable", "Inter", Arial, system-ui, sans-serif;
--od-font-display: "WF Visual Sans Variable", "Inter", Arial, system-ui, 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>Webflow 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 Webflow, 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="Webflow" /></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/webflow/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>Webflow - Newsletter</title>
<style>
:root {
--accent: #146ef5;
--accent-active: color-mix(in oklab, var(--accent), black 14%);
--accent-hover: #0055d4;
--accent-on: #ffffff;
--bg: #ffffff;
--border: #d8d8d8;
--border-soft: #ebebeb;
--container-gutter-desktop: 24px;
--container-gutter-phone: 12px;
--container-gutter-tablet: 16px;
--container-max: 1200px;
--danger: #ee1d36;
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--elev-flat: none;
--elev-raised: 0px 84px 24px rgba(0, 0, 0, 0), 0px 54px 22px rgba(0, 0, 0, 0.01), 0px 30px 18px rgba(0, 0, 0, 0.04), 0px 13px 13px rgba(0, 0, 0, 0.08), 0px 3px 7px rgba(0, 0, 0, 0.09);
--elev-ring: 0 0 0 1px var(--border);
--fg: #080808;
--fg-2: #363636;
--focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
--font-body: "WF Visual Sans Variable", "Inter", Arial, system-ui, sans-serif;
--font-display: "WF Visual Sans Variable", "Inter", Arial, system-ui, sans-serif;
--font-mono: "Inconsolata", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
--leading-body: 1.6;
--leading-tight: 1.04;
--meta: #ababab;
--motion-base: 200ms;
--motion-fast: 150ms;
--muted: #5a5a5a;
--radius-lg: 8px;
--radius-md: 4px;
--radius-pill: 9999px;
--radius-sm: 4px;
--section-y-desktop: 96px;
--section-y-phone: 48px;
--section-y-tablet: 64px;
--space-1: 4px;
--space-12: 48px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--success: #00d722;
--surface: #ffffff;
--surface-warm: var(--surface);
--text-2xl: 32px;
--text-3xl: 56px;
--text-4xl: 80px;
--text-base: 16px;
--text-lg: 20px;
--text-sm: 14px;
--text-xl: 24px;
--text-xs: 12px;
--tracking-display: -0.01em;
--warn: #ffae13;
}
:root {
--od-page-bg: #ffffff;
--od-surface: #ffffff;
--od-text: #080808;
--od-muted: #5a5a5a;
--od-border: #d8d8d8;
--od-accent: #146ef5;
--od-radius: 4px;
--od-font-body: "WF Visual Sans Variable", "Inter", Arial, system-ui, sans-serif;
--od-font-display: "WF Visual Sans Variable", "Inter", Arial, system-ui, 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>Webflow 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 Webflow, 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="Webflow" /></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/webflow/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>Webflow - Poster</title>
<style>
:root {
--accent: #146ef5;
--accent-active: color-mix(in oklab, var(--accent), black 14%);
--accent-hover: #0055d4;
--accent-on: #ffffff;
--bg: #ffffff;
--border: #d8d8d8;
--border-soft: #ebebeb;
--container-gutter-desktop: 24px;
--container-gutter-phone: 12px;
--container-gutter-tablet: 16px;
--container-max: 1200px;
--danger: #ee1d36;
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--elev-flat: none;
--elev-raised: 0px 84px 24px rgba(0, 0, 0, 0), 0px 54px 22px rgba(0, 0, 0, 0.01), 0px 30px 18px rgba(0, 0, 0, 0.04), 0px 13px 13px rgba(0, 0, 0, 0.08), 0px 3px 7px rgba(0, 0, 0, 0.09);
--elev-ring: 0 0 0 1px var(--border);
--fg: #080808;
--fg-2: #363636;
--focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
--font-body: "WF Visual Sans Variable", "Inter", Arial, system-ui, sans-serif;
--font-display: "WF Visual Sans Variable", "Inter", Arial, system-ui, sans-serif;
--font-mono: "Inconsolata", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
--leading-body: 1.6;
--leading-tight: 1.04;
--meta: #ababab;
--motion-base: 200ms;
--motion-fast: 150ms;
--muted: #5a5a5a;
--radius-lg: 8px;
--radius-md: 4px;
--radius-pill: 9999px;
--radius-sm: 4px;
--section-y-desktop: 96px;
--section-y-phone: 48px;
--section-y-tablet: 64px;
--space-1: 4px;
--space-12: 48px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--success: #00d722;
--surface: #ffffff;
--surface-warm: var(--surface);
--text-2xl: 32px;
--text-3xl: 56px;
--text-4xl: 80px;
--text-base: 16px;
--text-lg: 20px;
--text-sm: 14px;
--text-xl: 24px;
--text-xs: 12px;
--tracking-display: -0.01em;
--warn: #ffae13;
}
:root {
--od-page-bg: #ffffff;
--od-surface: #ffffff;
--od-text: #080808;
--od-muted: #5a5a5a;
--od-border: #d8d8d8;
--od-accent: #146ef5;
--od-radius: 4px;
--od-font-body: "WF Visual Sans Variable", "Inter", Arial, system-ui, sans-serif;
--od-font-display: "WF Visual Sans Variable", "Inter", Arial, system-ui, 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>Webflow 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 Webflow, 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="Webflow" /></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/webflow/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>Webflow - system assets</title>
<style>
:root {
--accent: #146ef5;
--accent-active: color-mix(in oklab, var(--accent), black 14%);
--accent-hover: #0055d4;
--accent-on: #ffffff;
--bg: #ffffff;
--border: #d8d8d8;
--border-soft: #ebebeb;
--container-gutter-desktop: 24px;
--container-gutter-phone: 12px;
--container-gutter-tablet: 16px;
--container-max: 1200px;
--danger: #ee1d36;
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--elev-flat: none;
--elev-raised: 0px 84px 24px rgba(0, 0, 0, 0), 0px 54px 22px rgba(0, 0, 0, 0.01), 0px 30px 18px rgba(0, 0, 0, 0.04), 0px 13px 13px rgba(0, 0, 0, 0.08), 0px 3px 7px rgba(0, 0, 0, 0.09);
--elev-ring: 0 0 0 1px var(--border);
--fg: #080808;
--fg-2: #363636;
--focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
--font-body: "WF Visual Sans Variable", "Inter", Arial, system-ui, sans-serif;
--font-display: "WF Visual Sans Variable", "Inter", Arial, system-ui, sans-serif;
--font-mono: "Inconsolata", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
--leading-body: 1.6;
--leading-tight: 1.04;
--meta: #ababab;
--motion-base: 200ms;
--motion-fast: 150ms;
--muted: #5a5a5a;
--radius-lg: 8px;
--radius-md: 4px;
--radius-pill: 9999px;
--radius-sm: 4px;
--section-y-desktop: 96px;
--section-y-phone: 48px;
--section-y-tablet: 64px;
--space-1: 4px;
--space-12: 48px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--success: #00d722;
--surface: #ffffff;
--surface-warm: var(--surface);
--text-2xl: 32px;
--text-3xl: 56px;
--text-4xl: 80px;
--text-base: 16px;
--text-lg: 20px;
--text-sm: 14px;
--text-xl: 24px;
--text-xs: 12px;
--tracking-display: -0.01em;
--warn: #ffae13;
}
:root {
--od-page-bg: #ffffff;
--od-surface: #ffffff;
--od-text: #080808;
--od-muted: #5a5a5a;
--od-border: #d8d8d8;
--od-accent: #146ef5;
--od-radius: 4px;
--od-font-body: "WF Visual Sans Variable", "Inter", Arial, system-ui, sans-serif;
--od-font-display: "WF Visual Sans Variable", "Inter", Arial, system-ui, sans-serif;
}
* { box-sizing: border-box; }
body {
margin: 0;
min-height: 100vh;
background: var(--od-page-bg);
color: var(--od-text);
font-family: var(--od-font-body);
-webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
h1 { margin-top: 12px; font-size: 64px; }
h2 { font-size: 40px; }
h3 { font-size: 22px; }
.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
.button.secondary { background: var(--od-surface); }
.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.metric, .card { padding: 18px; }
.metric strong { display: block; font-size: 30px; line-height: 1; }
.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
</style>
</head>
<body>
<main class="page">
<p class="eyebrow">Design &amp; Creative</p>
<h1>Webflow 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/webflow/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>Webflow - dark component kit</title>
<style>
:root {
--accent: #146ef5;
--accent-active: color-mix(in oklab, var(--accent), black 14%);
--accent-hover: #0055d4;
--accent-on: #ffffff;
--bg: #ffffff;
--border: #d8d8d8;
--border-soft: #ebebeb;
--container-gutter-desktop: 24px;
--container-gutter-phone: 12px;
--container-gutter-tablet: 16px;
--container-max: 1200px;
--danger: #ee1d36;
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--elev-flat: none;
--elev-raised: 0px 84px 24px rgba(0, 0, 0, 0), 0px 54px 22px rgba(0, 0, 0, 0.01), 0px 30px 18px rgba(0, 0, 0, 0.04), 0px 13px 13px rgba(0, 0, 0, 0.08), 0px 3px 7px rgba(0, 0, 0, 0.09);
--elev-ring: 0 0 0 1px var(--border);
--fg: #080808;
--fg-2: #363636;
--focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
--font-body: "WF Visual Sans Variable", "Inter", Arial, system-ui, sans-serif;
--font-display: "WF Visual Sans Variable", "Inter", Arial, system-ui, sans-serif;
--font-mono: "Inconsolata", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
--leading-body: 1.6;
--leading-tight: 1.04;
--meta: #ababab;
--motion-base: 200ms;
--motion-fast: 150ms;
--muted: #5a5a5a;
--radius-lg: 8px;
--radius-md: 4px;
--radius-pill: 9999px;
--radius-sm: 4px;
--section-y-desktop: 96px;
--section-y-phone: 48px;
--section-y-tablet: 64px;
--space-1: 4px;
--space-12: 48px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--success: #00d722;
--surface: #ffffff;
--surface-warm: var(--surface);
--text-2xl: 32px;
--text-3xl: 56px;
--text-4xl: 80px;
--text-base: 16px;
--text-lg: 20px;
--text-sm: 14px;
--text-xl: 24px;
--text-xs: 12px;
--tracking-display: -0.01em;
--warn: #ffae13;
}
:root {
--od-page-bg: #0f1115;
--od-surface: #171a21;
--od-text: #f8fafc;
--od-muted: #a7adba;
--od-border: #2a2f3a;
--od-accent: #146ef5;
--od-radius: 4px;
--od-font-body: "WF Visual Sans Variable", "Inter", Arial, system-ui, sans-serif;
--od-font-display: "WF Visual Sans Variable", "Inter", Arial, system-ui, sans-serif;
}
* { box-sizing: border-box; }
body {
margin: 0;
min-height: 100vh;
background: var(--od-page-bg);
color: var(--od-text);
font-family: var(--od-font-body);
-webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
h1 { margin-top: 12px; font-size: 64px; }
h2 { font-size: 40px; }
h3 { font-size: 22px; }
.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #0b0b0b; }
.button.secondary { background: var(--od-surface); }
.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.32); }
.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.metric, .card { padding: 18px; }
.metric strong { display: block; font-size: 30px; line-height: 1; }
.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
</style>
</head>
<body>
<main class="page">
<section class="hero">
<div>
<p class="eyebrow">Design &amp; Creative system</p>
<h1>Webflow component kit</h1>
<p class="lead">Bundled OpenDesign package for Webflow, 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/webflow/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>Webflow - component kit</title>
<style>
:root {
--accent: #146ef5;
--accent-active: color-mix(in oklab, var(--accent), black 14%);
--accent-hover: #0055d4;
--accent-on: #ffffff;
--bg: #ffffff;
--border: #d8d8d8;
--border-soft: #ebebeb;
--container-gutter-desktop: 24px;
--container-gutter-phone: 12px;
--container-gutter-tablet: 16px;
--container-max: 1200px;
--danger: #ee1d36;
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--elev-flat: none;
--elev-raised: 0px 84px 24px rgba(0, 0, 0, 0), 0px 54px 22px rgba(0, 0, 0, 0.01), 0px 30px 18px rgba(0, 0, 0, 0.04), 0px 13px 13px rgba(0, 0, 0, 0.08), 0px 3px 7px rgba(0, 0, 0, 0.09);
--elev-ring: 0 0 0 1px var(--border);
--fg: #080808;
--fg-2: #363636;
--focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
--font-body: "WF Visual Sans Variable", "Inter", Arial, system-ui, sans-serif;
--font-display: "WF Visual Sans Variable", "Inter", Arial, system-ui, sans-serif;
--font-mono: "Inconsolata", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
--leading-body: 1.6;
--leading-tight: 1.04;
--meta: #ababab;
--motion-base: 200ms;
--motion-fast: 150ms;
--muted: #5a5a5a;
--radius-lg: 8px;
--radius-md: 4px;
--radius-pill: 9999px;
--radius-sm: 4px;
--section-y-desktop: 96px;
--section-y-phone: 48px;
--section-y-tablet: 64px;
--space-1: 4px;
--space-12: 48px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--success: #00d722;
--surface: #ffffff;
--surface-warm: var(--surface);
--text-2xl: 32px;
--text-3xl: 56px;
--text-4xl: 80px;
--text-base: 16px;
--text-lg: 20px;
--text-sm: 14px;
--text-xl: 24px;
--text-xs: 12px;
--tracking-display: -0.01em;
--warn: #ffae13;
}
:root {
--od-page-bg: #ffffff;
--od-surface: #ffffff;
--od-text: #080808;
--od-muted: #5a5a5a;
--od-border: #d8d8d8;
--od-accent: #146ef5;
--od-radius: 4px;
--od-font-body: "WF Visual Sans Variable", "Inter", Arial, system-ui, sans-serif;
--od-font-display: "WF Visual Sans Variable", "Inter", Arial, system-ui, sans-serif;
}
* { box-sizing: border-box; }
body {
margin: 0;
min-height: 100vh;
background: var(--od-page-bg);
color: var(--od-text);
font-family: var(--od-font-body);
-webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
h1 { margin-top: 12px; font-size: 64px; }
h2 { font-size: 40px; }
h3 { font-size: 22px; }
.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
.button.secondary { background: var(--od-surface); }
.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.metric, .card { padding: 18px; }
.metric strong { display: block; font-size: 30px; line-height: 1; }
.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
</style>
</head>
<body>
<main class="page">
<section class="hero">
<div>
<p class="eyebrow">Design &amp; Creative system</p>
<h1>Webflow component kit</h1>
<p class="lead">Bundled OpenDesign package for Webflow, 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/webflow/system/tokens.default.json
+8
View File
@@ -0,0 +1,8 @@
{
"colorPrimary": "#146ef5",
"colorPrimaryBg": "var(--surface)",
"colorPrimaryHover": "#0055d4",
"colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)",
"fontSize": 16,
"borderRadius": 4
}
open-design/design-systems/webflow/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/webflow/tokens.css
+191
View File
@@ -0,0 +1,191 @@
/* ─────────────────────────────────────────────────────────────────────────
* design-systems/webflow/tokens.css
*
* Structured token bindings for "Design System Inspired by Webflow".
* The visual web builder: a white marketing-grade canvas, near-black
* ink, the signature Webflow Blue (#146ef5), conservative 4px corners,
* and a five-layer cascading shadow that gives every card a built-not-
* floating quality.
*
* Key brand decisions encoded here:
* - White canvas with near-black (#080808) text — DESIGN.md §1 / §9.
* The marketing site does NOT shift surfaces warm; section variation
* comes from borders + the 5-layer shadow stack, not from tinting.
* - Webflow Blue (#146ef5) as the single accent, with the documented
* darker Button Hover Blue (#0055d4) as `--accent-hover` (not a
* formulaic black-mix — Webflow's docs specify the hover value).
* - Four-tier foreground ramp: #080808 → #363636 → #5a5a5a → #ababab,
* matching the Near Black / Gray 700 / Mid Gray / Gray 300 scale
* from DESIGN.md §2 so cross-brand components targeting --fg-2 and
* --meta resolve to Webflow's actual gray ramp.
* - Conservative radius (4px–8px). DESIGN.md §7 forbids rounding
* beyond 8px for functional elements — sharp, precise, tool-like.
* - Five-layer cascading shadow on --elev-raised, reproduced verbatim
* from DESIGN.md §2 / §6: the stack is the depth signature and
* should never be flattened to a single blur.
* - WF Visual Sans Variable display + body, Inconsolata for code —
* the dual identity DESIGN.md §3 calls out (design + code).
* - Webflow Green / Yellow / Red bound to semantic tokens (DESIGN.md
* §2 Secondary Accents) so semantic state stays inside the brand
* palette rather than borrowing the schema's generic hues.
*
* Source contracts:
* - Standard token names: design-systems/_schema/tokens.schema.ts
* - A2 fallback parity: design-systems/_schema/defaults.css
* - Lint enforcement: apps/daemon/src/lint-artifact.ts
* ─────────────────────────────────────────────────────────────────── */
:root {
/* ─── Surface (no warm tier) ───────────────────────────────────────
* Webflow's marketing canvas is pure white. Sections do not shift
* background color — depth comes from the 5-layer shadow stack and
* 1px borders, not from tinted surfaces. `--surface-warm` aliases
* to surface because the brand has no warmer tier. */
--bg: #ffffff; /* White — the page canvas */
--surface: #ffffff; /* White — cards stay flush with the canvas */
--surface-warm: var(--surface); /* alias — Webflow has no warm tier */
/* ─── Foreground ramp (4 levels) ──────────────────────────────────
* Near Black → Gray 700 → Mid Gray → Gray 300, the four documented
* text tiers from DESIGN.md §2 (headings / body / captions / muted).
* `#080808` instead of `#000000` matters — DESIGN.md §1 / §9 names
* the near-black explicitly. The four tiers are independently bound
* (not aliased) because Webflow's marketing site genuinely uses all
* four: H1 black, body Gray 700, captions Mid Gray, placeholder /
* disabled Gray 300. */
--fg: #080808; /* Near Black — primary text */
--fg-2: #363636; /* Gray 700 — body description */
--muted: #5a5a5a; /* Mid Gray — captions, link text */
--meta: #ababab; /* Gray 300 — placeholder, disabled */
/* ─── Border (2 levels) ──────────────────────────────────────────
* Borders are visible and structural in Webflow — `1px solid #d8d8d8`
* is the documented card edge (DESIGN.md §4). `--border-soft` drops
* to a paler tint for inner row separators that must not visually
* compete with the card outline. */
--border: #d8d8d8; /* Border Gray — card / divider edge */
--border-soft: #ebebeb; /* paler tint — inner row separator */
/* ─── Accent ─────────────────────────────────────────────────────
* Webflow Blue (#146ef5): primary CTA, link, focus ring, badge tint.
* `--accent-hover` is the documented Button Hover Blue (#0055d4),
* NOT a formulaic black-mix — Webflow's brand spec names the darker
* value, so we honor it verbatim instead of computing one. Hard cap
* of ≤2 visible uses per screen (schema lint). */
--accent: #146ef5; /* Webflow Blue — primary brand signal */
--accent-on: #ffffff; /* white label on saturated blue */
--accent-hover: #0055d4; /* Button Hover Blue — documented value */
--accent-active: color-mix(in oklab, var(--accent), black 14%);
/* ─── Semantic ───────────────────────────────────────────────────
* Bound to Webflow's secondary palette (DESIGN.md §2) so state
* colors live inside the brand instead of borrowing the schema's
* generic semantic hues. Webflow Green / Yellow / Red are vivid
* enough to read as state without falling out of the system. */
--success: #00d722; /* Webflow Green */
--warn: #ffae13; /* Webflow Yellow */
--danger: #ee1d36; /* Webflow Red */
/* ─── Typography — fonts ─────────────────────────────────────────
* WF Visual Sans Variable is Webflow's custom variable face used at
* weight 500–600 throughout. Inter/Arial fall back so artifacts
* render legibly when the brand face is not loaded. Inconsolata is
* the companion monospace from DESIGN.md §3 — the "design + code"
* dual identity is part of the brand voice. */
--font-display: "WF Visual Sans Variable", "Inter", Arial, system-ui, sans-serif;
--font-body: "WF Visual Sans Variable", "Inter", Arial, system-ui, sans-serif;
--font-mono: "Inconsolata", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
/* Type scale (px) — DESIGN.md §3 hierarchy table. Display hero is
* 80px (the big marketing-page number), section heading is 56px,
* sub-heading 32px, feature 24px, body 20px, body-standard 16px,
* caption 14px. The schema's 8 tiers map directly onto Webflow's
* documented sizes. */
--text-xs: 12px; /* badge uppercase / micro */
--text-sm: 14px; /* caption */
--text-base: 16px; /* body standard / button */
--text-lg: 20px; /* body */
--text-xl: 24px; /* feature title */
--text-2xl: 32px; /* sub-heading */
--text-3xl: 56px; /* section heading */
--text-4xl: 80px; /* display hero */
/* `--leading-tight` is 1.04 (DESIGN.md §3 display + section line-
* height). `--leading-body` is 1.6 (the documented body-standard
* ratio). `--tracking-display` is `-0.01em`, the em-relative form
* of Webflow's `-0.8px at 80px` display tracking — scales correctly
* with size. */
--leading-body: 1.6;
--leading-tight: 1.04;
--tracking-display: -0.01em;
/* ─── Spacing ────────────────────────────────────────────────────
* 4px-grid base. DESIGN.md §5's fractional scale (2.4 / 3.2 / 5.6 /
* 7.2 / 9.6) is component-internal micro-padding and is inlined
* per-component; the 4/8/12/16/20/24/32/48 tier carries the
* structural rhythm. */
--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 — Webflow's marketing sections breathe but stay
* tighter than a gallery: 96px desktop, 64px tablet, 48px phone
* (matching the documented 992 / 768 / 479 breakpoints in §8). */
--section-y-desktop: 96px;
--section-y-tablet: 64px;
--section-y-phone: 48px;
/* ─── Radius ─────────────────────────────────────────────────────
* DESIGN.md §5: 2 / 4 / 8 / 50%. The "Do" list (§7) is explicit:
* 4px is the default, do NOT round beyond 8px for functional
* elements. We bind sm/md to 4px (buttons, inputs, cards), lg to
* 8px (featured containers), pill to 9999px (badges, avatars). */
--radius-sm: 4px; /* buttons, inputs, chips */
--radius-md: 4px; /* cards, modals — same conservative 4px */
--radius-lg: 8px; /* featured containers — the soft cap */
--radius-pill: 9999px; /* badges, avatars */
/* ─── Elevation (3 levels, raised = 5-layer cascade) ─────────────
* The 5-layer shadow stack from DESIGN.md §2 / §6 is the depth
* signature. The outer layer at 84px is a "presence" cushion (alpha
* 0), the inner 3px layer is the contact shadow, and three middle
* layers create the smooth falloff. Never flatten this stack to a
* single blur — the cascade is what makes Webflow cards feel
* physically built rather than digitally floating. */
--elev-flat: none;
--elev-ring: 0 0 0 1px var(--border);
--elev-raised:
0px 84px 24px rgba(0, 0, 0, 0),
0px 54px 22px rgba(0, 0, 0, 0.01),
0px 30px 18px rgba(0, 0, 0, 0.04),
0px 13px 13px rgba(0, 0, 0, 0.08),
0px 3px 7px rgba(0, 0, 0, 0.09);
/* ─── Focus ring ─────────────────────────────────────────────────
* Webflow Blue at 30% — the accent is already the brand's focus
* color in product, so the schema default (alpha glow of accent)
* matches without override. */
--focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
/* ─── Motion ─────────────────────────────────────────────────────
* 150 / 200ms with standard easing. Webflow's marketing site uses a
* 6px translate hover on buttons (DESIGN.md §4) — that micro-move
* runs at --motion-fast. */
--motion-fast: 150ms;
--motion-base: 200ms;
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
/* ─── Layout ─────────────────────────────────────────────────────
* 1200px max content width — Webflow's marketing pages cap around
* this width to keep line lengths readable. Breakpoints from
* DESIGN.md §8 (992 / 768 / 479) gate the gutter scale. */
--container-max: 1200px;
--container-gutter-desktop: 24px;
--container-gutter-tablet: 16px;
--container-gutter-phone: 12px;
}