NIFI-16096 DESIGN.md standard for agents

[scottyaslan]

Summary

Adds nifi-frontend/src/main/frontend/DESIGN.md — a machine-readable and human-readable design system reference for the NiFi frontend, following the google-labs-code/design.md open standard.

This file gives AI coding agents (Cursor, Copilot, Claude Code, etc.) a single source of truth for NiFi's visual identity and Angular implementation patterns, so they produce correct, consistent UI code without needing to grep through SCSS files or guess from prior context.

What is DESIGN.md?

The design.md specification defines a standard file format that combines:

• YAML front matter — machine-readable design tokens (colors, typography, spacing, border radii, component states) with token references between entries
• Markdown body — human-readable rationale, usage rules, and implementation patterns

AI tools that understand this format can read it as a first step before generating any UI code, ensuring all output respects the project's actual design language.

What the file documents

YAML tokens (sourced directly from material.scss and _*.scss component overrides):

Section	Contents
colors	Full MD3 palette (light mode hex values from --md-ref-palette-*), NiFi-specific --nf-* canvas and status colors, dark mode overrides
typography	Inter font family, 5 MD3 type scale entries (body-sm → headline)
spacing	6-step Tailwind-mapped spacing scale (4px → 32px)
rounded	3 border radius values traced to source SCSS: buttons (4px, _button.scss), dialogs (6px, _dialog.scss), cards (12px, MD3 default)
components	button, form-field, dialog, card, canvas with token references ({colors.primary}, {rounded.sm})

Markdown sections:

• Colors — MD3 system token mapping table, NiFi-specific --nf-* token table, dark mode override values, CodeMirror 6 syntax highlighting tokens
• Typography — MD3 type scale with NiFi-specific usage notes
• Layout — Tailwind v4 spacing guide, host element layout rules, flex-1 min-h-0 fill-height pattern
• Shapes — Border radius table with source file citations for each value
• Components — Angular Material button directives, Font Awesome 4.7 icon usage, NifiSpinnerDirective, outline form fields with --nf-*/--mat-sys-* theming pattern
• Implementation Notes — Technology stack table, key file locations, import alias (@nifi/shared), SCSS theming pattern, no-hardcoded-colors rule

Approach

All values are sourced from the actual implementation — no invented or theoretical tokens:

• Color hex values read from libs/shared/src/assets/themes/material.scss
• Border radius values traced to specific overrides in libs/shared/src/assets/themes/components/_button.scss, _dialog.scss
• Where no SCSS override exists, the MD3 default is noted explicitly (e.g., "MD3 default extra-small, no override in _form-field.scss")

Testing

Documentation-only change. No runtime code is modified.
NIFI-16096

Tracking

Please complete the following tracking steps prior to pull request creation.

Issue Tracking

• Apache NiFi Jira issue created

Pull Request Tracking

• Pull Request title starts with Apache NiFi Jira issue number, such as NIFI-16096
• Pull Request commit message starts with Apache NiFi Jira issue number, as such NIFI-16096
• Pull request contains commits signed with a registered key indicating Verified status

Pull Request Formatting

• Pull Request based on current revision of the main branch
• Pull Request refers to a feature branch with one commit containing changes

Verification

Please indicate the verification steps performed prior to pull request creation.

Build

• Build completed using ./mvnw clean install -P contrib-check
  • JDK 21
  • JDK 25

Licensing

• New dependencies are compatible with the Apache License 2.0 according to the License Policy
• New dependencies are documented in applicable LICENSE and NOTICE files

Documentation

• Documentation formatting appears as expected in rendered files