www: rebrand website with FRI brand guidelines#189
Conversation
- Add Lora, DM Sans, DM Mono via Google Fonts - Replace accent/bg colors with FRI palette (dark green #102B23, stone #F6F8F1, dark stone #EEF0E8, orange #E96B26) - Add FRI SVG logo assets; use icon in masthead and favicon, wordmark in footer - Apply DM Mono uppercase to nav, buttons, and labels - Fix explore chart legend/parity box alignment and text overflow
- Replace `particles.js` animation with static FRI illustration image; move image to `assets/images/illustrations/fri-illustration-8.jpg` - Enlarge FRI logo in masthead (3rem height) - Shrink nav menu items (0.65rem, DM Sans Light, mixed case) - Remove logo from footer bottom bar; fix footer title and copyright colors to be visible on dark green background - Add `th` to body font rule so leaderboard headers match row font
|
Looks great!! Thanks so much for this and for the fast turnaround! I'm going to post in #forecastbench to get general feedback and post my design feedback there so we can all discuss. Posting issues I see here.
|
|
@codex review |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: a5a3229ed1
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| logo: "/assets/images/logo/IconTransparentBCROP.png" | ||
| og_image: "/assets/images/logo/TextColor2.png" | ||
| logo: "/assets/images/logo/fri-icon-green.svg" | ||
| og_image: "/assets/images/logo/fri-logo-green.svg" |
There was a problem hiding this comment.
When ForecastBench links are shared to X/Twitter, this site-wide og_image is used as the social card image, but X's Cards markup supports JPG, PNG, WEBP, and GIF and explicitly says SVG is not supported (https://developer.x.com/en/docs/x-for-websites/cards/overview/markup). Point this at a raster asset instead so link previews keep their image after the rebrand.
Useful? React with 👍 / 👎.
There was a problem hiding this comment.
@jcanedy what do you think about this? It's not something I would've picked up on, codex says og_image should be a jpg/png/webp.
- Fix lockup separator spacing to use equal visual gaps on both sides of the dividing line - Style `.btn--primary` as orange DM Mono text with arrow instead of filled background - Update hero: remove title, update excerpt copy, apply serif font - Add full favicon set (ico, 96px png, apple-touch-icon, webmanifest) under `assets/images/logo/favicon/` - Switch OG image from SVG to JPG - Use `fri.svg` for FRI org logo in leaderboard tables; bump display size to 26px - Update leaderboard row highlight color to `#fef0e6`
|
Thanks @houtanb! Here is the feedback that has been addressed:
I haven't added FRI attribution label on the explore chart (the "Forecasting Research Institute" watermark like on LEAP) or addressed any existing bugs in the explorer charts. I don't think this will be addressable before Wednesday, but happy to look at it in the future. |
2 participants
Closes #175
Summary
particles.jsanimation with a static FRI illustration (fri-illustration-8.jpg)© 2024–2026 Forecasting Research Institute • Content licensed under CC BY-SA 4.0thto the body font rule so leaderboard table headers match row font (DM Sans Light).bundle/to.gitignore