feat: 🎨 rebrand with new color palette and logo - #1
Merged
Conversation
There was a problem hiding this comment.
Pull request overview
Visual rebrand of the frontend to a teal-tinted dark theme with updated brand tokens, improved CTA contrast, and a new double-triangle logo (including favicon) to keep the mark consistent across the site.
Changes:
- Updated Tailwind color tokens to the new brand palette (accent/warm/highlight + refreshed neutrals and text colors).
- Re-mapped key UI states (active nav, selected chips/switcher, timelines, CTAs) onto the new tokens for consistency and contrast.
- Replaced the old “network graph” logo with the new triangle mark in both header logo SVG and favicon.
Reviewed changes
Copilot reviewed 17 out of 18 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/tailwind.config.js | Introduces new palette tokens (accent/warm/highlight) and updates neutrals/text colors. |
| frontend/src/pages/NotFound.tsx | Updates “Back home” button styling to the warm CTA token with dark text. |
| frontend/src/pages/admin/AdminMedia.tsx | Updates file input button text color for contrast on the accent background. |
| frontend/src/pages/admin/AdminDashboard.tsx | Switches metric color from accent-hover to accent for the new palette. |
| frontend/src/components/ui/Button.tsx | Makes primary buttons use warm token + dark text for contrast. |
| frontend/src/components/ui/Badge.tsx | Aligns badge tones to new accent/highlight tokens. |
| frontend/src/components/projects/TechnologyPicker.tsx | Updates selected chip state to dark text on accent background. |
| frontend/src/components/learning/TagPicker.tsx | Updates selected chip state to dark text on accent background. |
| frontend/src/components/layout/NavBar.tsx | Uses highlight background for active nav state with dark text. |
| frontend/src/components/layout/NavBar.test.tsx | Updates assertion to match the new active-nav styling. |
| frontend/src/components/layout/Logo.tsx | Replaces SVG mark with new overlapping triangles logo. |
| frontend/src/components/layout/LanguageSwitcher.tsx | Updates selected language styling to dark text on accent background. |
| frontend/src/components/layout/AdminLayout.tsx | Updates active admin nav styling to use accent (not accent-hover). |
| frontend/src/components/home/Hero.tsx | Updates hero accent text and CTA styling to new accent/warm tokens. |
| frontend/src/components/about/ExperienceTimeline.tsx | Uses highlight for timeline marker and list markers; uses accent for company text. |
| frontend/src/components/about/EducationTimeline.tsx | Uses highlight for marker and accent for school text. |
| frontend/src/components/about/DownloadCvButton.tsx | Simplifies button props (but now implicitly uses primary variant). |
| frontend/public/favicon.svg | Updates favicon to the new triangle mark. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| onClick={handleDownload} | ||
| disabled={isFetching} | ||
| > | ||
| <Button type="button" onClick={handleDownload} disabled={isFetching}> |
Comment on lines
+3
to
+7
| // Brand palette (dark theme): | ||
| // #03728B blu pastello #03A9C1 azzurro pastello #F4DF6D giallo pastello | ||
| // #F38C30 arancione #F4F0F0 bianco tortora | ||
| // Neutrals (background/surface/raised/edge/muted) are derived, tinted toward | ||
| // teal for cohesion. `warm` is the CTA accent, `highlight` is for badges/tags. |
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
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.
What changes
Visual rebrand of the site onto the new palette (teal-tinted dark theme) and a new logo.
Palette (tokens in
tailwind.config.js)#03A9C1(accent) → links, accents, selected states#F38C30(warm) → primary action buttons#F4DF6D(highlight) → ambient emphasis (active nav, timeline markers)Main changes
Verification
Commits
2cdf6d1apply new brand color palette (dark theme)931aed4surface highlight color in nav, timeline and home CTA602b94duse highlight color for the education timeline marker1aa564cuse the bright cyan accent for accent text and primary buttonse6e54beupdate brand logo to the new triangle mark0e43fe1make primary actions warm and fix accent contrast