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
- 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.
- Replace hard-coded hex across
assets/scss/custom.scss and the partials (chatbot.html, shortcodes, widgets) with those variables.
- Decide the canonical set of UI tints (button, pill, hover, focus) derived from the palette, and apply consistently.
- 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).
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):#004055#b8336a#69b3a2#8e0000, link-hover#ff6bbc#fefdf6Off-palette / inconsistent spots found
#6e54d7). It now gets overridden to teal inassets/scss/custom.scss, but the override is a patch over an external default rather than a shared rule.layouts/partials/chatbot.html) — uses a different navy#0d3c74(and#0a2f5c,#c0392b) throughout for buttons/links/headers instead of the brand teal#004055/ magenta.assets/scss/custom.scss) — introduce lavender / tan / purple tints (e.g. milestone#5c2e8eon#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:hoverand link hovers).custom.scssand partials.Proposal
:root(and/or SCSS variables), e.g.--forrt-teal,--forrt-magenta,--forrt-green,--forrt-link,--forrt-bg.assets/scss/custom.scssand the partials (chatbot.html, shortcodes, widgets) with those variables.CONTRIBUTINGnote) so new components reuse it.Acceptance
Raised from a homepage design review (rotating-quote hero + announcements work).