chore: Add DESIGN.md for Langflow's visual design system (#12830)

* docs: Add DESIGN.md specification for Langflow's visual design system

Machine-readable design tokens (YAML frontmatter) paired with
human-readable design rationale following the open-source DESIGN.md
format from Google Labs. Intended for AI agents generating UI that
must match Langflow's visual identity.

Covers 129 color tokens, 15 typography scales, 50 component
definitions, spacing/rounding/elevation systems, dark mode strategy,
and the 14-hue data type color system used for node port encoding.

* ci: Add DESIGN.md lint workflow

Runs `@google/design.md lint` against DESIGN.md on pull requests that
modify the file. Catches spec violations, broken token references, and
WCAG AA contrast failures before merge. CLI version is pinned via env
var so format spec changes require a deliberate bump.

* ci: Integrate DESIGN.md lint into CI Success pipeline

Replaces the standalone workflow with a job inside ci.yml so it gates
the "CI Success" aggregate check. Path-filter skips the job on PRs
that don't touch DESIGN.md, so cost is near-zero for normal PRs.
This commit is contained in:
Gabriel Luiz Freitas Almeida
2026-05-05 15:51:04 -03:00
committed by GitHub
parent 2c021ac0c7
commit 60627bec3a
3 changed files with 781 additions and 0 deletions

View File

@ -110,3 +110,7 @@ database:
mainpage:
- "src/frontend/src/pages/MainPage/**"
design-md:
- "DESIGN.md"
- ".github/workflows/ci.yml"

View File

@ -186,6 +186,7 @@ jobs:
api: ${{ steps.filter.outputs.api }}
database: ${{ steps.filter.outputs.database }}
docker: ${{ steps.filter.outputs.docker }}
design-md: ${{ steps.filter.outputs.design-md }}
docs-only: ${{
steps.filter.outputs.docs == 'true' &&
steps.filter.outputs.python != 'true' &&
@ -345,6 +346,27 @@ jobs:
DOCKERHUB_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}
DOCKERHUB_TOKEN: ${{ secrets.DOCKERHUB_TOKEN }}
lint-design-md:
needs: path-filter
name: Lint DESIGN.md
if: ${{ inputs.run-all-tests || needs.path-filter.outputs.design-md == 'true' }}
runs-on: ubuntu-latest
env:
DESIGN_MD_CLI_VERSION: "0.1.1"
steps:
- name: Checkout code
uses: actions/checkout@v6
with:
ref: ${{ inputs.ref || github.ref }}
- name: Setup Node.js
uses: actions/setup-node@v6
with:
node-version: "22"
- name: Lint DESIGN.md
run: npx --yes @google/design.md@${{ env.DESIGN_MD_CLI_VERSION }} lint DESIGN.md
merge-frontend-coverage:
name: Merge Frontend Jest + Playwright Coverage Reports
needs: [path-filter, set-ci-condition, test-frontend-unit, test-frontend]
@ -411,6 +433,7 @@ jobs:
test-docs-build,
test-templates,
test-docker,
lint-design-md,
set-ci-condition,
path-filter,
check-nightly-status,
@ -465,6 +488,8 @@ jobs:
" - Template Tests: Check starter project templates"
elif $job == "test-docker" then
" - Docker Tests: Check Docker image builds and version verification"
elif $job == "lint-design-md" then
" - DESIGN.md Lint: Check token references, WCAG contrast, and spec compliance"
elif $job == "path-filter" then
" - Path Filter: File path filtering failed"
elif $job == "set-ci-condition" then