You are viewing a plain text version of this content. The canonical link for it is here.
Posted to issues@nifi.apache.org by "Scott Aslan (Jira)" <ji...@apache.org> on 2026/07/08 21:37:00 UTC

[jira] [Created] (NIFI-16096) Add DESIGN.md to nifi-frontend following Google Labs AI design standard

Scott Aslan created NIFI-16096:
----------------------------------

             Summary: Add DESIGN.md to nifi-frontend following Google Labs AI design standard
                 Key: NIFI-16096
                 URL: https://issues.apache.org/jira/browse/NIFI-16096
             Project: Apache NiFi
          Issue Type: Improvement
            Reporter: Scott Aslan
            Assignee: Scott Aslan


Implements the [Google Labs DESIGN.md standard|https://github.com/google-labs-code/design.md] — a machine-readable file format that gives AI coding agents structured knowledge of a project's visual identity, design tokens, component patterns, and implementation rules.

Adds {{DESIGN.md}} to {{nifi-frontend/src/main/frontend/}} with:
 * YAML front matter — machine-readable light-mode hex values sourced directly from {{{}material.scss{}}}: primary teal palette, surface levels, text/border colors, NiFi-specific status colors ({{{}--nf-*{}}}), canvas background, typography scale (Inter, MD3 type scale), spacing, and border radius.
 * Color system — {{--mat-sys-*}} and {{--nf-*}} variable reference tables for both light and dark mode, covering the canvas, status indicators, and standard Material surfaces.
 * Typography — Angular Material MD3 type scale roles mapped to NiFi use cases.
 * Components — Button directives ({{{}mat-flat-button{}}}, {{{}mat-button{}}}, {{{}mat-stroked-button{}}}, {{{}mat-icon-button{}}}), Font Awesome 4.7 icon usage, {{{}NifiSpinnerDirective{}}}, form fields, and CodeMirror syntax highlighting token reference.
 * Implementation notes — Angular/NgRx/Tailwind stack summary, key file locations, theming pattern, and no-hardcoded-colors policy.



--
This message was sent by Atlassian Jira
(v8.20.10#820010)