Loading...
change the colour palette to Ki Brand Guidelines shared below, remove the previous colour theme and replace with the below
2.Core Hues & Roles Hue Primary Use Light Token Lavender Empathy highlights, hyperlinks lavender-500 Aqua CTAs, focus rings aqua-500 Mint Success, onboarding mint-500 Coral Info / warning banners coral-500 Magenta Delight badges, error states, limited accents magenta-500 Gold Achievement / gamification gold-500 Plum Data‑viz, dark gradients plum-500
2.2 Extended Scale (50‑900) All core hues have tints (50‑400) and shades (600‑900). See palette board (image 1) for hex codes.
2.3 Usage Ratios (per screen) Light Theme: 68 % neutrals · 14 % Aqua/Lavender · 6 % Magenta · 7 % Mint/Coral · 5 % Gold/Plum.
2.4 Gradient Library Name Stops Purpose Hero‑Light Soft‑Sky → Mint‑300 Calm onboarding
Celebration Magenta‑500 → Gold‑400 Achievement modal Insight Aqua‑500 → Lavender‑500 Dashboard cards
2.5 Do’s & Don’ts Use Magenta sparingly (≤ one element per view). Keep CTAs Aqua only—never Magenta. Avoid Magenta text on Coral backgrounds (fails contrast). Don’t mix more than 3 accent hues in a single chart.
Loading...
Refactor the application's color scheme to align with the Ki Brand Guidelines. Implement the specified color system, core hues, extended scale, usage ratios, and gradient library. Ensure that the application's visual elements, including but not limited to, text, backgrounds, buttons, and interactive components, accurately reflect the new color palette. Specifically, replace the existing color theme with the following:
Color System: Utilize the provided image as a reference for the color system.
Core Hues & Roles:
Extended Scale (50-900): Apply tints (50-400) and shades (600-900) for all core hues, referencing the palette board image for hex codes.
Usage Ratios (per screen) - Light Theme:
Gradient Library:
Ensure that the application adheres to these guidelines, paying close attention to the usage ratios and the specific roles of each color. Verify that the gradients are correctly implemented and that the application's overall aesthetic is consistent with the Ki Brand Guidelines. The previous color theme should be entirely removed, and the new color palette should be comprehensively applied throughout the application. The components should be styled according to the attached image 2.