<div class="tw:p-6 tw:max-w-7xl tw:mx-auto tw:space-y-8"> <!-- Header / Introduction --> <div class="tw-callout"> <p class="tw:mb-1 tw:text-sm tw:font-mono"> <strong>COLOR SYSTEM:</strong> Production color system from Figma<br> <strong>PALETTE:</strong> 4 Brand Colors | 5 Utility Colors | Neutral System | Special Colors<br> <strong>SHADES:</strong> Tailwind-style numbering (100-950) </p> <p class="tw:mb-0 tw:text-sm"> This color system uses descriptive naming with common sense semantics (red = critical, green = positive) rather than enforced semantic meaning, making colors suitable for both UI and data visualization. Each color has 10 shades plus semantic aliases for convenient use. </p> </div> <!-- Section 1: Brand Colors --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Brand Colors</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Brand Colors:</strong> Core colors defining the platform's visual identity. Each has a designated base shade (500) and 10 total shades for hierarchical use. 4 ramps: Primary (navy), Secondary (sky-blue), Accent (legacy orange-red, project-only), Blue (true-blue). </p> </div> <!-- Primary (Dark Blue) --> <div class="tw:mb-6"> <h3 class="tw-h6 tw:mb-3">Primary - Dark Blue (Main signature color)</h3> <div class="tw:grid tw:grid-cols-10 tw:gap-1"> <div class="tw:bg-primary-100 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs">100</div> <div class="tw:bg-primary-200 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs">200</div> <div class="tw:bg-primary-300 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:text-white">300</div> <div class="tw:bg-primary-400 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:text-white">400</div> <div class="tw:bg-primary-500 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:text-white tw:font-bold">500<br>base</div> <div class="tw:bg-primary-600 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:text-white">600</div> <div class="tw:bg-primary-700 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:text-white">700</div> <div class="tw:bg-primary-800 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:text-white">800</div> <div class="tw:bg-primary-900 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:text-white">900</div> <div class="tw:bg-primary-950 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:text-white">950</div> </div> <p class="tw:text-xs tw:mt-2 text-muted">Used for main actions across the system. Aliases: <code>--color-primary</code> → <code>--color-primary-500</code></p> </div> <!-- Secondary (Orange-Red) --> <div class="tw:mb-6"> <h3 class="tw-h6 tw:mb-3">Secondary - Sky-Blue (Figma "Brand Secondary")</h3> <div class="tw:grid tw:grid-cols-10 tw:gap-1"> <div class="tw:bg-secondary-100 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs">100</div> <div class="tw:bg-secondary-200 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs">200</div> <div class="tw:bg-secondary-300 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs">300</div> <div class="tw:bg-secondary-400 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:text-white">400</div> <div class="tw:bg-secondary-500 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:text-white tw:font-bold">500<br>base</div> <div class="tw:bg-secondary-600 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:text-white">600</div> <div class="tw:bg-secondary-700 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:text-white">700</div> <div class="tw:bg-secondary-800 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:text-white">800</div> <div class="tw:bg-secondary-900 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:text-white">900</div> <div class="tw:bg-secondary-950 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:text-white">950</div> </div> <p class="tw:text-xs tw:mt-2 text-muted">Sky-blue brand secondary. Base 500: <code>#35A7E7</code>. Matches Figma "Brand Secondary". Used for hero banners, accent tints, and info accents.</p> </div> <!-- Accent (project-only legacy) --> <div class="tw:mb-6"> <h3 class="tw-h6 tw:mb-3">Accent (Project-only, legacy orange-red — NOT in Figma)</h3> <div class="tw:grid tw:grid-cols-10 tw:gap-1"> <div class="tw:bg-accent-100 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs">100</div> <div class="tw:bg-accent-200 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs">200</div> <div class="tw:bg-accent-300 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs">300</div> <div class="tw:bg-accent-400 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:text-white">400</div> <div class="tw:bg-accent-500 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:text-white tw:font-bold">500<br>base</div> <div class="tw:bg-accent-600 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:text-white">600</div> <div class="tw:bg-accent-700 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:text-white">700</div> <div class="tw:bg-accent-800 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:text-white">800</div> <div class="tw:bg-accent-900 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:text-white">900</div> <div class="tw:bg-accent-950 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:text-white">950</div> </div> <p class="tw:text-xs tw:mt-2 text-muted">Legacy orange-red ramp inherited from A-Plus. Preserved as project-specific extension; NOT in Applicaa One Identity Figma. Base 500: <code>#EC634B</code>.</p> </div> <!-- Blue --> <div class="tw:mb-6"> <h3 class="tw-h6 tw:mb-3">Blue - True-Blue (Figma "Blue", separate from Secondary sky)</h3> <div class="tw:grid tw:grid-cols-10 tw:gap-1"> <div class="tw:bg-blue-100 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs">100</div> <div class="tw:bg-blue-200 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs">200</div> <div class="tw:bg-blue-300 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs">300</div> <div class="tw:bg-blue-400 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:text-white">400</div> <div class="tw:bg-blue-500 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:text-white tw:font-bold">500<br>base</div> <div class="tw:bg-blue-600 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:text-white">600</div> <div class="tw:bg-blue-700 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:text-white">700</div> <div class="tw:bg-blue-800 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:text-white">800</div> <div class="tw:bg-blue-900 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:text-white">900</div> <div class="tw:bg-blue-950 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:text-white">950</div> </div> <p class="tw:text-xs tw:mt-2 text-muted">True-blue brand accent. Base 500: <code>#3478F6</code>. Matches Figma "Blue". Distinct from Secondary sky-blue. Alias: <code>--color-info</code> → <code>--color-blue-500</code>. For navy-leaning info badges use <code>--color-state-info-*</code>.</p> </div> </div> <!-- Section 1b: Link Blue --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Link Blue (Navy-leaning, separate family)</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Link Blue:</strong> Distinct hue from <code>--color-blue-*</code>. Used for links, focus rings, focused-input border, and primary CTAs. </p> </div> <div class="tw:grid tw:grid-cols-3 tw:gap-3"> <div> <div class="tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:text-white tw:font-bold tw:bg-link">--color-link</div> <p class="tw:text-xs tw:mt-1 text-muted">#2C7ECD · links, focus rings, primary CTA</p> </div> <div> <div class="tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:text-white tw:font-bold tw:bg-link-hover">--color-link-hover</div> <p class="tw:text-xs tw:mt-1 text-muted">#2664BB · link / CTA hover</p> </div> <div> <div class="tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:bg-link-subtle">--color-link-subtle</div> <p class="tw:text-xs tw:mt-1 text-muted">#DCEBFB · link-flavored chip / pill bg</p> </div> </div> </div> <!-- Section 2: Utility Colors --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Utility Colors</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Utility Colors:</strong> Common sense colors for UI feedback and data visualization. Red = critical, Green = positive, Yellow = caution/warning, Orange = saturated brand accent, Magenta = data expansion. </p> </div> <!-- Yellow (was --color-orange-*) --> <div class="tw:mb-6"> <h3 class="tw-h6 tw:mb-3">Yellow (Figma "Yellow" — was --color-orange-* pre-Round-1.5)</h3> <div class="tw:grid tw:grid-cols-10 tw:gap-1"> <div class="tw:bg-yellow-100 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs">100</div> <div class="tw:bg-yellow-200 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs">200</div> <div class="tw:bg-yellow-300 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs">300</div> <div class="tw:bg-yellow-400 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs">400</div> <div class="tw:bg-yellow-500 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:font-bold">500<br>base</div> <div class="tw:bg-yellow-600 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:text-white">600</div> <div class="tw:bg-yellow-700 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:text-white">700</div> <div class="tw:bg-yellow-800 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:text-white">800</div> <div class="tw:bg-yellow-900 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:text-white">900</div> <div class="tw:bg-yellow-950 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:text-white">950</div> </div> <p class="tw:text-xs tw:mt-2 text-muted">Warning/caution amber. Base 500: <code>#FFA940</code>. Matches Figma "Yellow". Use dark text for contrast. <code>--color-warning</code> alias points here.</p> </div> <!-- Orange (saturated) --> <div class="tw:mb-6"> <h3 class="tw-h6 tw:mb-3">Orange - Saturated (Figma "Orange")</h3> <div class="tw:grid tw:grid-cols-10 tw:gap-1"> <div class="tw:bg-orange-100 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs">100</div> <div class="tw:bg-orange-200 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs">200</div> <div class="tw:bg-orange-300 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs">300</div> <div class="tw:bg-orange-400 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:text-white">400</div> <div class="tw:bg-orange-500 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:text-white tw:font-bold">500<br>base</div> <div class="tw:bg-orange-600 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:text-white">600</div> <div class="tw:bg-orange-700 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:text-white">700</div> <div class="tw:bg-orange-800 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:text-white">800</div> <div class="tw:bg-orange-900 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:text-white">900</div> <div class="tw:bg-orange-950 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:text-white">950</div> </div> <p class="tw:text-xs tw:mt-2 text-muted">Saturated orange brand accent for promo treatments. Base 500: <code>#F06500</code>. Matches Figma "Orange". Distinct from Yellow.</p> </div> <!-- Red --> <div class="tw:mb-6"> <h3 class="tw-h6 tw:mb-3">Red (Negative/Critical)</h3> <div class="tw:grid tw:grid-cols-10 tw:gap-1"> <div class="tw:bg-red-100 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs">100</div> <div class="tw:bg-red-200 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs">200</div> <div class="tw:bg-red-300 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs">300</div> <div class="tw:bg-red-400 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:text-white">400</div> <div class="tw:bg-red-500 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:text-white tw:font-bold">500</div> <div class="tw:bg-red-600 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:text-white">600</div> <div class="tw:bg-red-700 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:text-white">700</div> <div class="tw:bg-red-800 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:text-white">800</div> <div class="tw:bg-red-900 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:text-white">900</div> <div class="tw:bg-red-950 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:text-white">950</div> </div> <p class="tw:text-xs tw:mt-2 text-muted">Aliases: <code>--color-danger</code> → <code>--color-red-500</code></p> </div> <!-- Green --> <div class="tw:mb-6"> <h3 class="tw-h6 tw:mb-3">Green (Positive/Success)</h3> <div class="tw:grid tw:grid-cols-10 tw:gap-1"> <div class="tw:bg-green-100 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs">100</div> <div class="tw:bg-green-200 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs">200</div> <div class="tw:bg-green-300 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs">300</div> <div class="tw:bg-green-400 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs">400</div> <div class="tw:bg-green-500 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:text-white tw:font-bold">500</div> <div class="tw:bg-green-600 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:text-white">600</div> <div class="tw:bg-green-700 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:text-white">700</div> <div class="tw:bg-green-800 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:text-white">800</div> <div class="tw:bg-green-900 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:text-white">900</div> <div class="tw:bg-green-950 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:text-white">950</div> </div> <p class="tw:text-xs tw:mt-2 text-muted">Aliases: <code>--color-success</code> → <code>--color-green-500</code></p> </div> <!-- Magenta --> <div class="tw:mb-6"> <h3 class="tw-h6 tw:mb-3">Magenta (Data Visualization)</h3> <div class="tw:grid tw:grid-cols-10 tw:gap-1"> <div class="tw:bg-magenta-100 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs">100</div> <div class="tw:bg-magenta-200 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs">200</div> <div class="tw:bg-magenta-300 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs">300</div> <div class="tw:bg-magenta-400 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:text-white">400</div> <div class="tw:bg-magenta-500 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:text-white tw:font-bold">500</div> <div class="tw:bg-magenta-600 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:text-white">600</div> <div class="tw:bg-magenta-700 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:text-white">700</div> <div class="tw:bg-magenta-800 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:text-white">800</div> <div class="tw:bg-magenta-900 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:text-white">900</div> <div class="tw:bg-magenta-950 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:text-white">950</div> </div> <p class="tw:text-xs tw:mt-2 text-muted">Additional color for data visualization expansion.</p> </div> </div> <!-- Section 3: Neutral System --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Neutral System</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Neutral Colors:</strong> Universal colors for backgrounds and text hierarchy. Solid neutrals plus translucent variants for overlays and subtle UI elements. </p> </div> <!-- Neutral Solid --> <div class="tw:mb-6"> <h3 class="tw-h6 tw:mb-3">Neutral (Solid)</h3> <div class="tw:grid tw:grid-cols-11 tw:gap-1"> <div class="tw:bg-neutral-0 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:border tw:border-neutral-300">0</div> <div class="tw:bg-neutral-100 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs">100</div> <div class="tw:bg-neutral-200 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs">200</div> <div class="tw:bg-neutral-300 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs">300</div> <div class="tw:bg-neutral-400 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:text-white">400</div> <div class="tw:bg-neutral-500 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:text-white">500</div> <div class="tw:bg-neutral-600 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:text-white">600</div> <div class="tw:bg-neutral-700 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:text-white">700</div> <div class="tw:bg-neutral-800 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:text-white">800</div> <div class="tw:bg-neutral-900 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:text-white">900</div> <div class="tw:bg-neutral-950 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:text-white">950</div> </div> <p class="tw:text-xs tw:mt-2 text-muted">Aliases: <code>--color-light</code> → <code>--color-neutral-100</code>, <code>--color-dark</code> → <code>--color-neutral-900</code></p> </div> <!-- Neutral Translucent --> <div class="tw:mb-6"> <h3 class="tw-h6 tw:mb-3">Neutral Translucent (Blue-tinted, for overlays/shadows/borders)</h3> <div class="tw:grid tw:grid-cols-10 tw:gap-1"> <div class="tw:bg-neutral-translucent-100 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:border tw:border-neutral-300">100</div> <div class="tw:bg-neutral-translucent-200 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:border tw:border-neutral-300">200</div> <div class="tw:bg-neutral-translucent-300 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:border tw:border-neutral-300">300</div> <div class="tw:bg-neutral-translucent-400 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:border tw:border-neutral-300">400</div> <div class="tw:bg-neutral-translucent-500 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:border tw:border-neutral-300">500</div> <div class="tw:bg-neutral-translucent-600 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:text-white tw:border tw:border-neutral-300">600</div> <div class="tw:bg-neutral-translucent-700 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:text-white tw:border tw:border-neutral-300">700</div> <div class="tw:bg-neutral-translucent-800 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:text-white tw:border tw:border-neutral-300">800</div> <div class="tw:bg-neutral-translucent-900 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:text-white tw:border tw:border-neutral-300">900</div> <div class="tw:bg-neutral-translucent-950 tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:text-white tw:border tw:border-neutral-300">950</div> </div> <p class="tw:text-xs tw:mt-2 text-muted">Base: rgba(37, 58, 106, opacity). Used for texts, shadows, lines, borders, and neutral button appearances.</p> </div> </div> <!-- Section 4: Special Purpose Colors --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Special Purpose Colors</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Special Colors:</strong> Specifically tuned for dedicated uses in the platform. </p> </div> <div class="tw:grid tw:grid-cols-2 tw:gap-4"> <div> <h3 class="tw-h6 tw:mb-2">Background</h3> <div class="tw:bg-background tw:h-24 tw:rounded tw:flex tw:items-center tw:justify-center tw:border tw:border-neutral-300"> <span class="tw:text-sm tw:font-mono">.bg-background</span> </div> <p class="tw:text-xs tw:mt-2 text-muted">For page backgrounds only. <code>--color-background</code></p> </div> <div> <h3 class="tw-h6 tw:mb-2">Table Header</h3> <div class="tw:bg-table-header tw:h-24 tw:rounded tw:flex tw:items-center tw:justify-center tw:border tw:border-neutral-300"> <span class="tw:text-sm tw:font-mono">.bg-table-header</span> </div> <p class="tw:text-xs tw:mt-2 text-muted">For table headers only. <code>--color-table-header</code></p> </div> </div> </div> <!-- Section 5: Semantic Aliases --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Semantic Aliases (Backward Compatibility)</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Semantic Names:</strong> Convenient aliases for common use cases. All point to shade 500 of their respective colors. </p> </div> <div class="tw:grid tw:grid-cols-1 tw:md:grid-cols-2 tw:gap-4"> <div class="tw:space-y-2"> <div class="tw:flex tw:items-center tw:gap-3"> <div class="tw:bg-primary tw:h-12 tw:w-12 tw:rounded tw:flex-shrink-0"></div> <div> <p class="tw:text-sm tw:font-semibold tw:mb-0">primary</p> <p class="tw:text-xs text-muted tw:font-mono tw:mb-0">→ primary-500</p> </div> </div> <div class="tw:flex tw:items-center tw:gap-3"> <div class="tw:bg-success tw:h-12 tw:w-12 tw:rounded tw:flex-shrink-0"></div> <div> <p class="tw:text-sm tw:font-semibold tw:mb-0">success</p> <p class="tw:text-xs text-muted tw:font-mono tw:mb-0">→ green-500</p> </div> </div> <div class="tw:flex tw:items-center tw:gap-3"> <div class="tw:bg-danger tw:h-12 tw:w-12 tw:rounded tw:flex-shrink-0"></div> <div> <p class="tw:text-sm tw:font-semibold tw:mb-0">danger</p> <p class="tw:text-xs text-muted tw:font-mono tw:mb-0">→ red-500</p> </div> </div> <div class="tw:flex tw:items-center tw:gap-3"> <div class="tw:bg-warning tw:h-12 tw:w-12 tw:rounded tw:flex-shrink-0"></div> <div> <p class="tw:text-sm tw:font-semibold tw:mb-0">warning</p> <p class="tw:text-xs text-muted tw:font-mono tw:mb-0">→ yellow-500 (amber, post-Round-1.5)</p> </div> </div> </div> <div class="tw:space-y-2"> <div class="tw:flex tw:items-center tw:gap-3"> <div class="tw:bg-info tw:h-12 tw:w-12 tw:rounded tw:flex-shrink-0"></div> <div> <p class="tw:text-sm tw:font-semibold tw:mb-0">info</p> <p class="tw:text-xs text-muted tw:font-mono tw:mb-0">→ blue-500</p> </div> </div> <div class="tw:flex tw:items-center tw:gap-3"> <div class="tw:bg-light tw:h-12 tw:w-12 tw:rounded tw:flex-shrink-0 tw:border tw:border-neutral-300"></div> <div> <p class="tw:text-sm tw:font-semibold tw:mb-0">light</p> <p class="tw:text-xs text-muted tw:font-mono tw:mb-0">→ neutral-100</p> </div> </div> <div class="tw:flex tw:items-center tw:gap-3"> <div class="tw:bg-dark tw:h-12 tw:w-12 tw:rounded tw:flex-shrink-0"></div> <div> <p class="tw:text-sm tw:font-semibold tw:mb-0">dark</p> <p class="tw:text-xs text-muted tw:font-mono tw:mb-0">→ neutral-900</p> </div> </div> </div> </div> <div class="tw:mt-4 tw:p-3 tw:bg-light tw:rounded tw:text-xs"> <p class="tw:mb-1 tw:font-semibold">Note about Secondary (Round 1.5 change):</p> <p class="tw:mb-0">After Round 1.5, <code>--color-secondary</code> now points to sky-blue (secondary-500 = <code>#35A7E7</code>), matching Figma "Brand Secondary". The legacy orange-red is preserved at <code>--color-accent-*</code>. For component variants like <code>.tw-btn-secondary</code>, neutral colors are used regardless to maintain usability. The <code>--color-warning</code> alias now points to <code>--color-yellow-500</code> (amber), not the new saturated orange.</p> </div> </div> <!-- Section 6: Data Visualization Guidelines --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Data Visualization Guidelines</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Color Pairing:</strong> Recommended color combinations for charts and data visualization. See the full analysis document for detailed guidance. </p> </div> <div class="tw:space-y-4"> <!-- 2-Color Palette --> <div> <h3 class="tw-h6 tw:mb-2">2-Color Categorical (High contrast, brand-aligned)</h3> <div class="tw:flex tw:gap-2"> <div class="tw:bg-primary-500 tw:h-12 tw:flex-1 tw:rounded tw:text-white tw:flex tw:items-center tw:justify-center tw:text-xs">Primary</div> <div class="tw:bg-secondary-500 tw:h-12 tw:flex-1 tw:rounded tw:text-white tw:flex tw:items-center tw:justify-center tw:text-xs">Secondary</div> </div> </div> <!-- 3-Color Palette --> <div> <h3 class="tw-h6 tw:mb-2">3-Color Categorical (Clear distinction)</h3> <div class="tw:flex tw:gap-2"> <div class="tw:bg-blue-500 tw:h-12 tw:flex-1 tw:rounded tw:text-white tw:flex tw:items-center tw:justify-center tw:text-xs">Blue</div> <div class="tw:bg-green-500 tw:h-12 tw:flex-1 tw:rounded tw:text-white tw:flex tw:items-center tw:justify-center tw:text-xs">Green</div> <div class="tw:bg-orange-500 tw:h-12 tw:flex-1 tw:rounded tw:text-white tw:flex tw:items-center tw:justify-center tw:text-xs">Orange</div> </div> </div> <!-- 5-Color Palette --> <div> <h3 class="tw-h6 tw:mb-2">5-Color Categorical (Full range)</h3> <div class="tw:flex tw:gap-2"> <div class="tw:bg-primary-500 tw:h-12 tw:flex-1 tw:rounded tw:text-white tw:flex tw:items-center tw:justify-center tw:text-xs">Primary</div> <div class="tw:bg-blue-500 tw:h-12 tw:flex-1 tw:rounded tw:text-white tw:flex tw:items-center tw:justify-center tw:text-xs">Blue</div> <div class="tw:bg-green-500 tw:h-12 tw:flex-1 tw:rounded tw:text-white tw:flex tw:items-center tw:justify-center tw:text-xs">Green</div> <div class="tw:bg-orange-500 tw:h-12 tw:flex-1 tw:rounded tw:text-white tw:flex tw:items-center tw:justify-center tw:text-xs">Orange</div> <div class="tw:bg-magenta-500 tw:h-12 tw:flex-1 tw:rounded tw:text-white tw:flex tw:items-center tw:justify-center tw:text-xs">Magenta</div> </div> </div> <!-- Diverging Palette --> <div> <h3 class="tw-h6 tw:mb-2">Diverging (Negative ← Neutral → Positive)</h3> <div class="tw:flex tw:gap-2"> <div class="tw:bg-red-500 tw:h-12 tw:flex-1 tw:rounded tw:text-white tw:flex tw:items-center tw:justify-center tw:text-xs">Red</div> <div class="tw:bg-neutral-300 tw:h-12 tw:flex-1 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs">Neutral</div> <div class="tw:bg-green-500 tw:h-12 tw:flex-1 tw:rounded tw:text-white tw:flex tw:items-center tw:justify-center tw:text-xs">Green</div> </div> </div> </div> <div class="tw:mt-4 tw:p-3 tw:bg-light tw:rounded tw:text-xs"> <p class="tw:mb-1 tw:font-semibold">Accessibility Notes:</p> <ul class="tw:mb-0 tw:pl-4 tw:space-y-1"> <li>Always pair color with another indicator (pattern, label, icon)</li> <li>Avoid red-green only combinations for colorblind accessibility</li> <li>Maintain 3:1 minimum contrast ratio between adjacent colors</li> <li>Test palettes with colorblind simulation tools</li> </ul> </div> </div> <!-- Section: State Trios --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">State Trios (bg / border / ink)</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>State Trios:</strong> Fixed three-value palette per state. Use for badges, callouts, validation. Tokens: <code>--color-state-{success|danger|warning|info}-{bg|border|ink}</code>. </p> </div> <div class="tw:grid tw:grid-cols-2 tw:gap-3"> <div class="tw:p-3 tw:rounded tw:bg-state-success-bg tw:border tw:border-state-success-border tw:text-state-success-ink"> <strong>Success</strong> — bg #F6FFED · border #B7EB8F · ink #237804 </div> <div class="tw:p-3 tw:rounded tw:bg-state-danger-bg tw:border tw:border-state-danger-border tw:text-state-danger-ink"> <strong>Danger</strong> — bg #FFF1F0 · border #FFA39E · ink #A8071A </div> <div class="tw:p-3 tw:rounded tw:bg-state-warning-bg tw:border tw:border-state-warning-border tw:text-state-warning-ink"> <strong>Warning</strong> — bg #FFF7E6 · border #FFE7BA · ink #D46B08 </div> <div class="tw:p-3 tw:rounded tw:bg-state-info-bg tw:border tw:border-state-info-border tw:text-state-info-ink"> <strong>Info</strong> — bg #E6F4FF · border #91CAFF · ink #002C8C </div> </div> </div> <!-- Section: Ofsted Aliases --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Ofsted Rating Aliases</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Ofsted Bands:</strong> Convenience aliases for the four Ofsted rating bands used on school cards / profiles. </p> </div> <div class="tw:grid tw:grid-cols-4 tw:gap-3"> <div> <div class="tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:text-white tw:font-bold tw:bg-ofsted-outstanding">Outstanding</div> <p class="tw:text-xs tw:mt-1 text-muted">#237804</p> </div> <div> <div class="tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:text-white tw:font-bold tw:bg-ofsted-good">Good</div> <p class="tw:text-xs tw:mt-1 text-muted">#2C7ECD (= --color-link)</p> </div> <div> <div class="tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:text-white tw:font-bold tw:bg-ofsted-requires">Requires</div> <p class="tw:text-xs tw:mt-1 text-muted">#D46B08</p> </div> <div> <div class="tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:text-white tw:font-bold tw:bg-ofsted-inadequate">Inadequate</div> <p class="tw:text-xs tw:mt-1 text-muted">#A8071A</p> </div> </div> </div> <!-- Section: Primary Ink + Display --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Primary Ink + Display (additive aliases)</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Primary Ink/Display:</strong> Additive aliases on top of <code>--color-primary</code> (#263C91 action navy). Use ink for body headings, display for hero / display headings. </p> </div> <div class="tw:grid tw:grid-cols-3 tw:gap-3"> <div> <div class="tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:text-white tw:font-bold tw:bg-primary">--color-primary</div> <p class="tw:text-xs tw:mt-1 text-muted">#263C91 · action navy (unchanged)</p> </div> <div> <div class="tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:text-white tw:font-bold tw:bg-primary-ink">--color-primary-ink</div> <p class="tw:text-xs tw:mt-1 text-muted">#253A6A · body headings</p> </div> <div> <div class="tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:text-white tw:font-bold tw:bg-primary-display">--color-primary-display</div> <p class="tw:text-xs tw:mt-1 text-muted">#09326A · display headings</p> </div> </div> </div> <!-- Section: Line + Surface Tokens --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Line + Surface Tokens</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Lines + Surfaces:</strong> Named tokens for the most common borders and surface backgrounds across the design system. </p> </div> <div class="tw:grid tw:grid-cols-3 tw:gap-3"> <div> <div class="tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:bg-surface tw:border tw:border-line-card">--color-line-card</div> <p class="tw:text-xs tw:mt-1 text-muted">#E2E6ED · card / input border</p> </div> <div> <div class="tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:bg-surface tw:border-t tw:border-b tw:border-line-divider">--color-line-divider</div> <p class="tw:text-xs tw:mt-1 text-muted">#DDDDDD · section dividers</p> </div> <div> <div class="tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:bg-line-muted tw:border tw:border-line-card">--color-line-muted</div> <p class="tw:text-xs tw:mt-1 text-muted">#F3F4F7 · row hover / muted bg</p> </div> <div> <div class="tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:bg-surface tw:border tw:border-line-card">--color-surface</div> <p class="tw:text-xs tw:mt-1 text-muted">#FFFFFF · default surface</p> </div> <div> <div class="tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:bg-surface-tint tw:border tw:border-line-card">--color-surface-tint</div> <p class="tw:text-xs tw:mt-1 text-muted">#F0F8FF · hero wash</p> </div> <div> <div class="tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:bg-surface-muted tw:border tw:border-line-card">--color-surface-muted</div> <p class="tw:text-xs tw:mt-1 text-muted">#F3F4F7 · muted surface</p> </div> </div> </div> <!-- Custom Singletons --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Custom Singletons</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Singletons:</strong> Single-shade tokens with a dedicated purpose. Not part of a numbered ramp. </p> </div> <div class="tw:grid tw:grid-cols-4 tw:gap-3"> <div> <div class="tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:text-white tw:font-bold tw:bg-black">--color-black</div> <p class="tw:text-xs tw:mt-1 text-muted">#000000 (Figma "Custom Colors")</p> </div> <div> <div class="tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:bg-background tw:border tw:border-line-card">--color-background</div> <p class="tw:text-xs tw:mt-1 text-muted">#EEF1F6 (production exact)</p> </div> <div> <div class="tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:bg-table-header">--color-table-header</div> <p class="tw:text-xs tw:mt-1 text-muted">#C9D6EC</p> </div> <div> <div class="tw:h-16 tw:rounded tw:flex tw:items-center tw:justify-center tw:text-xs tw:bg-white tw:border tw:border-line-card">--color-neutral-0</div> <p class="tw:text-xs tw:mt-1 text-muted">#FFFFFF</p> </div> </div> </div> <!-- Quick Reference Footer --> <div class="tw:border-t tw:pt-6 tw:mt-8"> <div class="tw-callout"> <p class="tw:mb-1 tw:text-sm tw:font-semibold">Quick Reference</p> <p class="tw:mb-0 tw:text-xs tw:font-mono"> <strong>Brand:</strong> primary (navy) | secondary (sky-blue) | accent (legacy orange-red, project-only) | blue (true-blue)<br> <strong>Utility:</strong> yellow (caution/warning) | orange (saturated) | red | green | magenta<br> <strong>Neutral:</strong> neutral-0 through neutral-950 | neutral-translucent-100 through neutral-translucent-950<br> <strong>Special:</strong> background | table-header | black<br> <strong>Semantic Aliases:</strong> primary | success (green) | danger (red) | warning (yellow) | info (blue) | light | dark<br> <strong>Utilities:</strong> .bg-{color}-{shade} | .text-{color}-{shade} | .border-{color}-{shade}<br> <strong>CSS Variables:</strong> var(--color-{name}-{shade}) (e.g., var(--color-primary-500)) </p> </div> </div> </div>