forrtproject / forrtproject/forrtproject.github.io

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

オープン
#813 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る
主要言語
HTML
スター
42
フォーク
33
平均マージ
2日 6時間
マージ済み PR(30日)
19

説明

## 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)._

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

data/themes/forrt.toml のパレットから始め、次に assets/scss/custom.scss と、指定された layouts/partials/chatbot.html、shortcodes、widgets を調べて、ハードコードされた色を確認します。関連するスタイルと Partials を監査し、正規のパレットと色合いを確認したうえで、newsletter、chatbot、ボタン、リンク、ホバー状態、カテゴリーピルが提示された受け入れ基準を満たしていることを検証します。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
html, hugo, scss
領域
design, frontend, web-dev
issue の種類
リファクタリング
難易度
4/5
見積もり時間
3〜5日
活発さ
静か
明瞭さ
おおむね明確
初心者へのやさしさ
48/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。