forrtproject / forrtproject/forrtproject.github.io

Unify colours across the website (consolidate to the brand palette)

Ouverte
#813 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub
Langage dominant
HTML
Étoiles
42
Forks
33
Merge moyen
2 j 6 h
PR mergées (30 j)
19

Description

## Problem

Colours are defined and hard-coded in many places across the site, and several are **off-brand** or inconsistent with the FORRT palette. This was surfaced during a design review of the homepage but applies site-wide.

**Brand palette** (`data/themes/forrt.toml`):
- Primary teal `#004055`
- Secondary / magenta `#b8336a`
- Accent green `#69b3a2`
- Link `#8e0000`, link-hover `#ff6bbc`
- Background `#fefdf6`

## Off-palette / inconsistent spots found

- **Newsletter “Subscribe” button** — the EmailOctopus embed ships a Bootstrap-purple button (`#6e54d7`). It now gets overridden to teal in `assets/scss/custom.scss`, but the override is a patch over an external default rather than a shared rule.
- **JUST-OS chatbot UI** (`layouts/partials/chatbot.html`) — uses a different navy `#0d3c74` (and `#0a2f5c`, `#c0392b`) throughout for buttons/links/headers instead of the brand teal `#004055` / magenta.
- **Announcement category pills** (`assets/scss/custom.scss`) — introduce lavender / tan / purple tints (e.g. milestone `#5c2e8e` on `#ece0f7`) that aren’t in the palette.
- **`link_hover` `#ff6bbc`** — a neon pink; worth confirming it’s intentional vs. the brand magenta `#b8336a` (e.g. `.ac-more:hover` and link hovers).
- Numerous one-off hex values scattered across `custom.scss` and partials.

## Proposal

1. Define the brand palette **once** as CSS custom properties in `:root` (and/or SCSS variables), e.g. `--forrt-teal`, `--forrt-magenta`, `--forrt-green`, `--forrt-link`, `--forrt-bg`.
2. Replace hard-coded hex across `assets/scss/custom.scss` and the partials (`chatbot.html`, shortcodes, widgets) with those variables.
3. Decide the canonical set of UI tints (button, pill, hover, focus) derived from the palette, and apply consistently.
4. Document the palette (a short comment block or `CONTRIBUTING` note) so new components reuse it.

## Acceptance

- No off-palette colours in custom CSS/partials (audited).
- Buttons, links, hovers, and category tints all derive from the documented palette.
- JUST-OS chat UI and the newsletter form visually match the brand.

_Raised from a homepage design review (rotating-quote hero + announcements work)._

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par la palette dans data/themes/forrt.toml, puis inspectez assets/scss/custom.scss ainsi que les layouts/partials/chatbot.html, shortcodes et widgets indiqués à la recherche de couleurs codées en dur. Auditez les styles et partials concernés, confirmez la palette canonique et les teintes, puis vérifiez que la newsletter, le chatbot, les boutons, les liens, les états au survol et les pills de catégorie respectent les critères d’acceptation indiqués.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
html, hugo, scss
Domaine
design, frontend, web-dev
Type d'issue
Refactorisation
Difficulté
4/5
Temps estimé
3-5 jours
Activité
Calme
Clarté
Plutôt claire
Accessibilité débutants
48/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.