feat: integrate official SUPAP branding assets and color palette #7
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Add comprehensive branding documentation (docs/design-system/branding.md) - Brand color specifications (Purple #864C9C, Blue #4D5AA6) - Typography guidelines (Druk Wide Bold for logo, Calibri for org name) - Gradient definitions and usage guidelines - Logo specifications and usage rules - Accessibility considerations and contrast ratios - Update design system components documentation - Add SUPAP brand colors section with all official colors - Include gradient color definitions - Update accessibility requirements for brand colors - Add brand font specifications and usage guidelines - Cross-reference to branding.md for complete guidelines - Implement brand colors in globals.css - Add CSS custom properties for all brand colors - Include both hex and oklch color formats - Add gradient color variables - Integrate colors into Tailwind theme configuration - Maintain existing color system for backwards compatibility - Add official branding reference image - Include supap-branding.png with complete color palette - Shows CMYK, RGB, and HEX color specifications - Displays gradient options and transparency guidelines - Documents typography specifications Benefits: - Consistent brand identity across all platforms - Clear color usage guidelines for developers - WCAG AA compliant color combinations - Easy Tailwind integration with new brand colors - Comprehensive documentation for future development 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
- Update primary color from generic purple to brand purple #864C9C - Update secondary color from generic teal to brand blue #4D5AA6 - Update accent color to use brand turquoise #5FD4C4 from gradients - Update focus ring colors to use brand blue - Update chart colors to use official brand palette - Update sidebar colors to match brand identity - Apply lighter variants for dark mode while maintaining brand consistency Visual impact: - Hero section gradient now uses official brand purple and blue - All buttons and CTAs use official brand colors - Icon accents use turquoise from brand gradient palette - Focus states use brand blue for consistency - Charts and data visualizations use brand colors This ensures complete brand consistency across all UI elements as specified in the official SUPAP branding guidelines. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
This PR introduces the official SUPAP branding assets into the design system, including comprehensive brand guidelines, color specifications, and applies the official color palette throughout the application.
What's Included
Brand Identity Documentation (
docs/design-system/branding.md)Design System Updates (
docs/design-system/components.md)CSS Implementation (
app/globals.css)Brand Assets (
public/images/supap-branding.png)Official Brand Colors
#864C9C- CMYK: C:58 M:89 Y:0 K:0#4D5AA6- CMYK: C:74 M:69 Y:5 K:0#5FD4C4- Gradient color#F9C732, Soft Yellow#F5E676Visual Changes
The brand colors are now applied throughout the application:
Accessibility
All color combinations have been verified for WCAG AA compliance:
Product Team Review Needed
Please review the color palette and visual changes to determine if this aligns with SUPAP's brand direction. The implementation provides:
Test Plan
Related Documentation
docs/design-system/branding.mddocs/design-system/components.mdpublic/images/supap-branding.png🤖 Generated with Claude Code