From e57e0f481695a4038b028041bd7a294f5e93ec3a Mon Sep 17 00:00:00 2001 From: jhauga Date: Wed, 14 Jan 2026 16:01:01 -0500 Subject: [PATCH 1/2] Instructions for best color practices --- docs/README.instructions.md | 1 + ...html-css-style-color-guide.instructions.md | 104 ++++++++++++++++++ 2 files changed, 105 insertions(+) create mode 100644 instructions/html-css-style-color-guide.instructions.md diff --git a/docs/README.instructions.md b/docs/README.instructions.md index 1f7d3272..4574b3d5 100644 --- a/docs/README.instructions.md +++ b/docs/README.instructions.md @@ -86,6 +86,7 @@ Team and project-specific instructions to enhance GitHub Copilot's behavior for | [Go MCP Server Development Guidelines](../instructions/go-mcp-server.instructions.md)
[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fgo-mcp-server.instructions.md)
[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fgo-mcp-server.instructions.md) | Best practices and patterns for building Model Context Protocol (MCP) servers in Go using the official github.com/modelcontextprotocol/go-sdk package. | | [Guidance for Localization](../instructions/localization.instructions.md)
[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Flocalization.instructions.md)
[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Flocalization.instructions.md) | Guidelines for localizing markdown documents | | [How to Use the Sample Components](../instructions/pcf-sample-components.instructions.md)
[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fpcf-sample-components.instructions.md)
[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fpcf-sample-components.instructions.md) | How to use and run PCF sample components from the PowerApps-Samples repository | +| [HTML CSS Style Color Guide](../instructions/html-css-style-color-guide.instructions.md)
[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fhtml-css-style-color-guide.instructions.md)
[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fhtml-css-style-color-guide.instructions.md) | Color usage guidelines and styling rules for HTML elements to ensure accessible, professional designs. | | [Instructions for accessibility](../instructions/a11y.instructions.md)
[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fa11y.instructions.md)
[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fa11y.instructions.md) | Guidance for creating more accessible code | | [Java 11 to Java 17 Upgrade Guide](../instructions/java-11-to-java-17-upgrade.instructions.md)
[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fjava-11-to-java-17-upgrade.instructions.md)
[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fjava-11-to-java-17-upgrade.instructions.md) | Comprehensive best practices for adopting new Java 17 features since the release of Java 11. | | [Java 17 to Java 21 Upgrade Guide](../instructions/java-17-to-java-21-upgrade.instructions.md)
[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fjava-17-to-java-21-upgrade.instructions.md)
[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fjava-17-to-java-21-upgrade.instructions.md) | Comprehensive best practices for adopting new Java 21 features since the release of Java 17. | diff --git a/instructions/html-css-style-color-guide.instructions.md b/instructions/html-css-style-color-guide.instructions.md new file mode 100644 index 00000000..6a017d9b --- /dev/null +++ b/instructions/html-css-style-color-guide.instructions.md @@ -0,0 +1,104 @@ +--- +description: 'Color usage guidelines and styling rules for HTML elements to ensure accessible, professional designs.' +applyTo: '**/*.html, **/*.css, **/*.js' +--- + +# HTML CSS Style Color Guide + +Follow these guidelines when updating or creating HTML/CSS styles for browser rendering. Color names +represent the full spectrum of their respective hue ranges (e.g., "blue" includes navy, sky blue, etc.). + +## Color Definitions + +- **Hot Colors**: Oranges, reds, and yellows +- **Cool Colors**: Blues, greens, and purples +- **Neutral Colors**: Grays and grayscale variations +- **Binary Colors**: Black and white +- **60-30-10 Rule** + - **Primary Color**: Use 60% of the time (*cool or light color*) + - **Secondary Color**: Use 30% of the time (*cool or light color*) + - **Accent**: Use 10% of the time (*complimentary hot color*) + +## Color Usage Guidelines + +Balance the colors used by applying the **60-30-10 rule** to graphic desing elements like backgrounds, +buttons, cards, etc... + +### Background Colors + +**Never Use:** + +- Purple or magenta +- Red, orange, or yellow +- Pink +- Any hot color + +**Recommended:** + +- White or off-white +- Light cool colors (e.g., light blues, light greens) +- Subtle neutral tones +- Light gradients with minimal color shift + +### Text Colors + +**Never Use:** + +- Yellow (poor contrast and readability) +- Pink +- Pure white or light text on light backgrounds +- Pure black or dark text on dark backgrounds + +**Recommended:** + +- Dark neutral colors (e.g., #1f2328, #24292f) +- Near-black variations (#000000 to #333333) + - Ensure background is a light color +- Dark grays (#4d4d4d, #6c757d) +- High-contrast combinations for accessibility +- Near-white variations (#ffffff to #f0f2f3) + - Ensure background is a dark color + +### Colors to Avoid + +Unless explicitly required by design specifications or user request, avoid: + +- Bright purples and magentas +- Bright pinks and neon colors +- Highly saturated hot colors +- Colors with low contrast ratios (fails WCAG accessibility standards) + +### Colors to Use Sparingly + +**Hot Colors** (red, orange, yellow): + +- Reserve for critical alerts, warnings, or error messages +- Use only when conveying urgency or importance +- Limit to small accent areas rather than large sections +- Consider alternatives like icons or bold text before using hot colors + +## Gradients + +Apply gradients with subtle color transitions to maintain professional aesthetics. + +### Best Practices + +- Keep color shifts minimal (e.g., #E6F2FF to #F5F7FA) +- Use gradients within the same color family +- Avoid combining hot and cool colors in a single gradient +- Prefer linear gradients over radial for backgrounds + +### Appropriate Use Cases + +- Background containers and sections +- Button hover states and interactive elements +- Drop shadows and depth effects +- Header and navigation bars +- Card components and panels + +## Additional Resources + +- [Color Tool](https://civicactions.github.io/uswds-color-tool/) +- [Government or Professional Color Standards](https://designsystem.digital.gov/design-tokens/color/overview/) +- [UI Color Palette Best Practices](https://www.interaction-design.org/literature/article/ui-color-palette) +- [Color Combination Resource](https://www.figma.com/resource-library/color-combinations/) From 0b9fb232657524894f5eec9bd97d0d3eab2020fb Mon Sep 17 00:00:00 2001 From: John Haugabook Date: Wed, 14 Jan 2026 16:39:55 -0500 Subject: [PATCH 2/2] Apply suggestions from code review Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- instructions/html-css-style-color-guide.instructions.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/instructions/html-css-style-color-guide.instructions.md b/instructions/html-css-style-color-guide.instructions.md index 6a017d9b..828a2027 100644 --- a/instructions/html-css-style-color-guide.instructions.md +++ b/instructions/html-css-style-color-guide.instructions.md @@ -17,11 +17,11 @@ represent the full spectrum of their respective hue ranges (e.g., "blue" include - **60-30-10 Rule** - **Primary Color**: Use 60% of the time (*cool or light color*) - **Secondary Color**: Use 30% of the time (*cool or light color*) - - **Accent**: Use 10% of the time (*complimentary hot color*) + - **Accent**: Use 10% of the time (*complementary hot color*) ## Color Usage Guidelines -Balance the colors used by applying the **60-30-10 rule** to graphic desing elements like backgrounds, +Balance the colors used by applying the **60-30-10 rule** to graphic design elements like backgrounds, buttons, cards, etc... ### Background Colors