Apply Aithyra brand color palette to site theme - #3
Merged
Conversation
Light theme: white bg, dark grey fg, Aithyra teal accent, light grey muted, brand grey border. Dark theme: Aithyra dark green bg, light grey fg, brand light green accent (7.6:1 contrast), dark green tint muted, teal border. Colors sourced from official Aithyra RGB ASE swatches. Also updates theme-color meta tags in Layout.astro.
✅ Deploy Preview for tong-group ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
The site has ~80 hardcoded blue-* utility classes across 15 files (buttons, pills, links, highlight boxes) that bypassed the theme tokens and clashed with the dark green theme. Remapping Tailwind's blue scale to a teal ramp centered on brand teal #0A6478 brings all of them on-brand in one place, with WCAG AA contrast in both themes.
- Remap Tailwind's blue-tinted gray scale to the Aithyra neutral greys (#F6F6F6, #C8C8C8, #505050, #1E1E1E anchors) so cards, buttons, and text no longer read as slate-blue on the dark green theme - Restyle homepage 'Join the Lab' card to match sibling cards, keeping emphasis via accent border + accent heading instead of the saturated translucent box that clashed in dark mode - Same neutral treatment for the join page contact CTA
Override gray-700/800 with tints of the brand dark green in the dark theme so cards and buttons elevate the same hue as the page background instead of reading as foreign charcoal panels.
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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
Replaces the AstroPaper default theme colors with the official Aithyra brand palette (from the RGB ASE swatches).
Light theme
#FFFFFF(white)#1E1E1E(brand dark grey)#0A6478(Aithyra teal)#F6F6F6(brand light grey)#C8C8C8(Aithyra grey)Dark theme
#052323(Aithyra dark green)#F6F6F6(brand light grey)#37BE55(brand light green — ~7.6:1 contrast on dark green; the teal fails contrast here)#0E3333(tint derived from the dark green)#0A6478(Aithyra teal)Changes
src/styles/global.css— updated light/dark theme tokenssrc/layouts/Layout.astro— updatedtheme-colormeta tags to match (#FFFFFFlight,#052323dark)Testing
pnpm buildpasses cleanly