Basic branding/visual review #27

New Issue

Closed

opened 2026-10-05 05:10:13 +02:00 by adam · 10 comments

adam commented 2026-10-05 05:10:13 +02:00

Owner

Copy link

Copy source

To do

Consolidated checklist in this comment summarizes the discussion in the comments underneath ...

Note that this doesn't include font consistency issues ... will take a closer look at those in https://github.com/ipfs/ipfs-blog/issues/36.

• To increase readability of long lines of text, please modify H2 on pages without header images to max out at something similar to this:
  

• To increase readability of long lines of text, please modify body width on individual post pages to something closer to that on the Filecoin blog. This probably means modifying the header width on individual post pages so it doesn't look significantly wider than the body — suggestions welcome on this, but something along this might work (note enlarging hero image to make it feel a little more balanced):
  

• On individual post pages at mobile widths, please add a bit more horizontal margin to the post body area - this looks a little too tight:
  

• Also on individual post pages at mobile widths, please tidy up the chicklets and share links so they don't share a div or word-wrap within chicklets:
  

• Please remove the breadcrumb from the cards page; on individual post pages, add a small subheader for "Blog & news" as in the following:
  

• When links are on a dark blue background, please use #6bc4ce instead of the existing link color.

• Please make visual modifications to the language picker as described in https://github.com/ipfs/ipfs-blog/issues/47.

• On all pages, please change page background to #f1f3f2; on card pages, make cards all white for better card visibility (no need for shadow now). Please don't rip out any of the logic behind identifying blog posts, though; I still suspect we will still need to differentiate these somehow, but let's see what happens in user testing.

• On cards page, now that background is in color, please remove outlines from form fields:
  

• On cards page, please change highlight color to #9ad4db instead of current pink

• In search filter, please add single quotes around "enter" in Press 'enter' to select

• On cards, please rearrange content elements as such:
  

• Also based on the mockup immediately above, please make all chicklets gray and highlight them with ipfs-css charcoal-muted on hover.

• However, please apply this visual treatment for blog post chicklets to make them "special" (sorry this is in a different mockup!)
  

• On cards, please display full card title when hovering on card title (as alt text) so that titles truncated with ellipses can be read in full

• The blueGreen color value used in text links and button backgrounds should be #34797D (understood that isn't in the main ipfs-css set, but teal is not quite WCAG-compliant on the new background noted above).

• On individual blog post pages, please add the same corner radius to the hero image as there is on the cards themselves.

• On individual blog post pages, please de-emphasize tag chicklets by using a lighter background (ipfs-css gray-muted might work out of the box):
  

• Please add visual formatting for code blocks as described in https://github.com/ipfs/ipfs-blog/issues/33 - inline code display is already OK, but still need to match visual formatting for multi-line blocks of code.

## To do Consolidated checklist in this comment summarizes the discussion in the comments underneath ... **Note that this doesn't include font consistency issues ... will take a closer look at those in https://github.com/ipfs/ipfs-blog/issues/36.** - [x] To increase readability of long lines of text, please modify H2 on pages without header images to max out at something similar to this:  - [x] To increase readability of long lines of text, please modify body width on individual post pages to something closer to that on the [Filecoin blog](https://protocol.ai/blog/pl-participation-in-the-filecoin-economy/). This probably means modifying the header width on individual post pages so it doesn't look significantly wider than the body — suggestions welcome on this, but something along this might work (note enlarging hero image to make it feel a little more balanced):  - [x] On individual post pages at mobile widths, please add a bit more horizontal margin to the post body area - this looks a little too tight:  - [x] Also on individual post pages at mobile widths, please tidy up the chicklets and share links so they don't share a div or word-wrap within chicklets:  - [x] Please remove the breadcrumb from the cards page; on individual post pages, add a small subheader for "Blog & news" as in the following:  - [x] When links are on a dark blue background, please use #6bc4ce instead of the existing link color. - [x] Please make visual modifications to the language picker as described in https://github.com/ipfs/ipfs-blog/issues/47. - [x] On all pages, please change page background to #f1f3f2; on card pages, make cards all white for better card visibility (no need for shadow now). Please don't rip out any of the logic behind identifying blog posts, though; I still suspect we will still need to differentiate these somehow, but let's see what happens in user testing. - [x] On cards page, now that background is in color, please remove outlines from form fields:  - [x] On cards page, please change highlight color to #9ad4db instead of current pink - [x] In search filter, please add single quotes around "enter" in `Press 'enter' to select` - [x] On cards, please rearrange content elements as such:  - [x] Also based on the mockup immediately above, please make all chicklets gray and highlight them with [ipfs-css](https://github.com/ipfs-shipyard/ipfs-css) `charcoal-muted` on hover. - [x] However, please apply this visual treatment for blog post chicklets to make them "special" (sorry this is in a different mockup!)  - [x] On cards, please display full card title when hovering on card title (as alt text) so that titles truncated with ellipses can be read in full - [x] The `blueGreen` color value used in text links and button backgrounds should be #34797D (understood that isn't in the main ipfs-css set, but `teal` is not quite WCAG-compliant on the new background noted above). - [x] On individual blog post pages, please add the same corner radius to the hero image as there is on the cards themselves. - [x] On individual blog post pages, please de-emphasize tag chicklets by using a lighter background (ipfs-css `gray-muted` might work out of the box):  - [x] Please add visual formatting for code blocks as described in https://github.com/ipfs/ipfs-blog/issues/33 - inline code display is already OK, but still need to match visual formatting for multi-line blocks of code. <!-- github-sync-id:795508794 -->

adam closed this issue 2026-10-05 05:10:13 +02:00

adam commented 2026-10-05 05:10:14 +02:00

Author

Owner

Copy link

Copy source

Note from @ericronne in a side-channel chat: he'd like to flush the card images straight to the edges like the screenshot below. @jdiogopeixoto -- up to you whether you want to tidy that now, or as part of a larger visual effort. Thanks!

Note from @ericronne in a side-channel chat: he'd like to flush the card images straight to the edges like the screenshot below. @jdiogopeixoto -- up to you whether you want to tidy that now, or as part of a larger visual effort. Thanks!  <!-- github-comment-id:775480993 -->

adam commented 2026-10-05 05:10:15 +02:00

Author

Owner

Copy link

Copy source

@ericronne, this is solidified enough for you to look over when you have the chance! Some notes:

• Build preview link and password is in the "About" section at top left of main repo page ... sorry for not listing here, just subject to change and don't want to leave a password out when this repo goes public later
• The biggest visual pain point overall might be font hierarchy, particularly considering that many of these posts have long titles (and the PL blog from which much of this code originates doesn't have that consideration). I'm personally torn over whether we need to use Montserrat for titles for consistency with exisitng brand materials if there's a chance we might rework that soon. Your opinion more than welcome on that.
• Related: We're looking to make this visually something that doesn't clash with existing brand materials, but at the moment I'm not sure how perfect we want to make brand consistency given the possibility of impending band refinement overall. Again, looking for your guidance on that.

If this turns into something that's best discussed in a sync session with me and @jdiogopeixoto rather than writing everything out in a first pass, we can definitely set that up.

Thanks!

@ericronne, this is solidified enough for you to look over when you have the chance! Some notes: - Build preview link and password is in the "About" section at top left of [main repo page](https://github.com/ipfs/ipfs-blog) ... sorry for not listing here, just subject to change and don't want to leave a password out when this repo goes public later - The biggest visual pain point overall might be font hierarchy, particularly considering that many of these posts have long titles (and the PL blog from which much of this code originates doesn't have that consideration). I'm personally torn over whether we need to use Montserrat for titles for consistency with exisitng brand materials if there's a chance we might rework that soon. Your opinion more than welcome on that. - Related: We're looking to make this visually something that doesn't clash with existing brand materials, but at the moment I'm not sure how perfect we want to make brand consistency given the possibility of impending band refinement overall. Again, looking for your guidance on that. If this turns into something that's best discussed in a sync session with me and @jdiogopeixoto rather than writing everything out in a first pass, we can definitely set that up. Thanks! <!-- github-comment-id:776292870 -->

adam commented 2026-10-05 05:10:15 +02:00

Author

Owner

Copy link

Copy source

Sweet! I hope to put an 👁️ on this tomorrow and offer some feedback 🙌

@jessicaschilling

Sweet! I hope to put an 👁️ on this tomorrow and offer some feedback 🙌 @jessicaschilling <!-- github-comment-id:777101097 -->

adam commented 2026-10-05 05:10:16 +02:00

Author

Owner

Copy link

Copy source

@ericronne just adding my 2 cents here about something I noticed.

Some cards have images with white background (left card on the image below) and it's hard to notice the boundaries of the card. We might want to add some kind of visual affordance to the cards (right card on the image below). I tried with box-shadow but we could use something else.

@ericronne just adding my 2 cents here about something I noticed. Some cards have images with white background (left card on the image below) and it's hard to notice the boundaries of the card. We might want to add some kind of visual affordance to the cards (right card on the image below). I tried with box-shadow but we could use something else.  <!-- github-comment-id:777106473 -->

adam commented 2026-10-05 05:10:17 +02:00

Author

Owner

Copy link

Copy source

Hello! The blog is definitely coming along. This is a nice evolution. I haven't had time yet to analyze the footer or the design of the blog post itself. The blog-post template is rather wide, which gives us a good deal more characters per line than is recommended for readability.

Here's a few thoughts about the index page. A hard-fought simplicity is always worth the effort. Hopefully some of these suggestions will move us in that direction.

I've mocked up some of my suggestions, and pasted that at the bottom here.

Hero area

• The “Home | Blog & news” eyebrow feels superfluous, since the logo is the home button, and Blog & news is repeated as the headline.
• Also the meaning of the teal and the white is ambiguous there. In the eyebrow, white indicates “you are here,” but the opposite is true for the language selector.
• At about 3.91:1, the contrast between the green text and the dark blue background is a little low (should be 4.5:1+). #6bc4ce is a brighter tint of IPFS green that contrasts much more dramatically.
• The language toggle should read “中文” (i think) rather than “zn-CH”
• And instead of showing both language options (“en-US | zh-CN”), you could simply have a 中文 button when english is active, and en-US when Chinese is active.
• If you do this, the feature becomes easier to miss (despite the brighter green). You could bump it up to about 16, and turn it into a little rectangle button with a 1-pixel border (perhaps filled with the same green at only 30% opacity or so, which could go to 100% on hover). Or you could test it without making it a button, to see if Chinese users are able to find it easily.
• I’d also add 24 pixels or so of padding above the button, to push it further away from the page description.

Body

• The green used for text links and button fill is just a bit too light.
• If we change page the page background from white to a very light gray-green such as #f1f3f2, that opens the door for some visual improvements: outlines can be removed from the form fields, and card backgrounds can be white, so they pop nicely (no need for an outer shadow).
• The bright-pink that highlights “All content” in the drop down is a nice accent color. It seems out of place there since it’s nowhere else, though.
• “Press enter to select” seems like an unnecessary label, since users will click. Am i missing something?
• Why are some cards green and others gray?
• Stacking dates and the byline pushes the content pretty far from the header. One thought is to put the date above everything, and when we have a name, still put that below the header. (Not a perfect solve imo, still thinking 🤔)
• The mix of dark and light tags confuses me, because my mind wants to interpret dark as selected/on, and white as inactive, but it’s not that simple. Are the distinctions necessary, or is it enough that the primary category comes first in the list (and has no hashtag)?
• To me, the tags overpower the design and distract from the content. Instead we could run these labels as tiny text — not buttons — along the bottom of each card, in a subtle color such as light gray. A button could appear when hovered (see mockup below).
• I’d edit the “Blog post” tag to simply “Blog”
• The cards don’t offer much space for the text description. Could the page expand to better fit wider viewports? The PL and Filecoin blogs are a good reference.

Hello! The blog is definitely coming along. This is a nice evolution. I haven't had time yet to analyze the footer or the design of the blog post itself. The blog-post template is rather wide, which gives us a good deal more characters per line than is recommended for [readability](https://www.smashingmagazine.com/2014/09/balancing-line-length-font-size-responsive-web-design/#:~:text=65%20characters%20(2.5%20times%20the,rule%20directly%20to%20the%20web.)). Here's a few thoughts about the index page. A hard-fought simplicity is always worth the effort. Hopefully some of these suggestions will move us in that direction. I've mocked up some of my suggestions, and pasted that at the bottom here. ## Hero area - The “Home | Blog & news” eyebrow feels superfluous, since the logo is the home button, and Blog & news is repeated as the headline. - Also the meaning of the teal and the white is ambiguous there. In the eyebrow, white indicates “you are here,” but the opposite is true for the language selector. - At about 3.91:1, the contrast between the green text and the dark blue background is a little low (should be 4.5:1+). `#6bc4ce` is a brighter tint of IPFS green that contrasts much more dramatically. - The language toggle should read “中文” (i think) rather than “zn-CH” - And instead of showing both language options (“en-US | zh-CN”), you could simply have a 中文 button when english is active, and en-US when Chinese is active. - If you do this, the feature becomes easier to miss (despite the brighter green). You could bump it up to about 16, and turn it into a little rectangle button with a 1-pixel border (perhaps filled with the same green at only 30% opacity or so, which could go to 100% on hover). Or you could test it without making it a button, to see if Chinese users are able to find it easily. - I’d also add 24 pixels or so of padding above the button, to push it further away from the page description. ### Body - The green used for text links and button fill is just a bit too light. - If we change page the page background from white to a very light gray-green such as `#f1f3f2`, that opens the door for some visual improvements: outlines can be removed from the form fields, and card backgrounds can be white, so they pop nicely (no need for an outer shadow). - The bright-pink that highlights “All content” in the drop down is a nice accent color. It seems out of place there since it’s nowhere else, though. - “Press enter to select” seems like an unnecessary label, since users will click. Am i missing something? - Why are some cards green and others gray? - Stacking dates and the byline pushes the content pretty far from the header. One thought is to put the date above everything, and when we have a name, still put that below the header. (Not a perfect solve imo, still thinking 🤔) - The mix of dark and light tags confuses me, because my mind wants to interpret dark as selected/on, and white as inactive, but it’s not that simple. Are the distinctions necessary, or is it enough that the primary category comes first in the list (and has no hashtag)? - To me, the tags overpower the design and distract from the content. Instead we could run these labels as tiny text — not buttons — along the bottom of each card, in a subtle color such as light gray. A button could appear when hovered (see mockup below). - I’d edit the “Blog post” tag to simply “Blog” - The cards don’t offer much space for the text description. Could the page expand to better fit wider viewports? The PL and Filecoin blogs are a good reference.  <!-- github-comment-id:777674988 -->

adam commented 2026-10-05 05:10:17 +02:00

Author

Owner

Copy link

Copy source

Thanks so much, @ericronne! Looking forward to your comments on the footer and individual post pages, and this is a great start in the meantime.

Two questions on your notes above:

The green used for text links and button fill is just a bit too light

Can you please specify a color you'd prefer? Ideally it'd be in the ipfs-css color set, but if that's not possible, a variant on that set would be great too.

Why are some cards green and others gray?

We want to delineate between blog posts and everything else. Clearly that didn't work on first impression. Can you please recommend an alternative?

Thanks so much, @ericronne! Looking forward to your comments on the footer and individual post pages, and this is a great start in the meantime. Two questions on your notes above: > The green used for text links and button fill is just a bit too light Can you please specify a color you'd prefer? Ideally it'd be in the [ipfs-css](https://github.com/ipfs-shipyard/ipfs-css) color set, but if that's not possible, a variant on that set would be great too. > Why are some cards green and others gray? We want to delineate between blog posts and everything else. Clearly that didn't work on first impression. Can you please recommend an alternative? <!-- github-comment-id:777691177 -->

adam commented 2026-10-05 05:10:18 +02:00

Author

Owner

Copy link

Copy source

@ericronne -- one other question. Do you have feedback on font sizes and font relationship overall? Do you feel we need to use Montserrat for IPFS brand consistency?

@ericronne -- one other question. Do you have feedback on font sizes and font relationship overall? Do you feel we need to use Montserrat for IPFS brand consistency? <!-- github-comment-id:777692282 -->

adam commented 2026-10-05 05:10:19 +02:00

Author

Owner

Copy link

Copy source

Index cont.

• IPFS "Teal" #378085 works over white, but is just shy of the small-text accessibility contrast mark (at 4.1:1) if we fill the page background with #F1F3F2 (#34797D works, but isn't in your set). Works fine for buttons with white labels, tho.
• Aileron and source serif pro are lovely fonts (winkwink). For the sake of consistency with the rest of the site, i'd be interested to see how Brandon works. Also if we're addressing the bigger branding question soon (🤞), typography is one of the items we'd look at, natch. Your call!
• Typographical hierarchy is pretty solid here, but the text abstract could drop from 1.125 rem to 1 rem or so (especially if we redo the tag design along the lines of my notes*). That would give us nice breathing space, and room for longer blurbs.
• The background shading seems like too much visually. If blogs need to be special, the "Blog" tag could get a light-green chicklet (with dark green text), while all of the other content types get a simple gray-bg/gray text treatment.

Footer

• Looks good (other than the contrast issue already noted)
• Why is there a checkbox to "Please send me the newsletter," when the button says "Subscribe"?
• Perhaps align the signup utility with the top of the subscription body text …

Card/Header artwork

• On the whole, the art looks great!

• Most of the art has no words. I'd encourage you to continue to avoid words in the header art (often dupes html text just below it, eg), except for special cases such as logos where there is no symbol-only version. For events like ETHDenver, try to trim down the amount of text.
  
  
  

• For newsletter art, swapping out the IPFS cube for the newsletter logo would create a nice consistency (we can create a bg for it if you like).
  

• Re tag designs: be sure to thoroughly test the mobile experience. Small, unbounded text buttons could give users trouble. Space accordingly.

Articles

• I see the utility of the "Blog & News" eyebrow here, which gives it reason to exist on the index page 😅. Do we need anything more than that as the eyebrow, tho? 🤔
• If we're insetting the header art, i would shrink it, both for the sake of balance (so the headline dominates), and to give more room for the title text.
• Additionally, a small corner radius on the artwork will make it look more intentional/neat
  

Hope that helps for now! 🙌

### Index cont. - IPFS "Teal" `#378085` works over white, but is just shy of the small-text accessibility contrast mark (at 4.1:1) if we fill the page background with `#F1F3F2` (`#34797D` works, but isn't in your set). Works fine for buttons with white labels, tho. - Aileron and source serif pro are lovely fonts ([winkwink](https://protocol.ai/)). For the sake of consistency with the rest of the site, i'd be interested to see how Brandon works. Also if we're addressing the bigger branding question soon (🤞), typography is one of the items we'd look at, natch. Your call! - Typographical hierarchy is pretty solid here, but the text abstract could drop from `1.125 rem` to `1 rem` or so (especially if we redo the tag design along the lines of my notes*). That would give us nice breathing space, and room for longer blurbs. - The background shading seems like too much visually. If blogs need to be special, the "Blog" tag could get a light-green chicklet (with dark green text), while all of the other content types get a simple gray-bg/gray text treatment.  ### Footer - Looks good (other than the contrast issue already noted) - Why is there a checkbox to "Please send me the newsletter," when the button says "Subscribe"? - Perhaps align the signup utility with the top of the subscription body text …  ### Card/Header artwork - On the whole, the art looks great! - Most of the art has no words. I'd encourage you to continue to avoid words in the header art (often dupes html text just below it, eg), except for special cases such as logos where there is no symbol-only version. For events like ETHDenver, try to trim down the amount of text.    - For newsletter art, swapping out the IPFS cube for the newsletter logo would create a nice consistency (we can create a bg for it [if you like](https://github.com/protocol/design-shop/issues/new?assignees=&labels=Design-visual+%3Apaintbrush%3A&template=visual-design-general.md&title=)).  * Re tag designs: be sure to thoroughly test the mobile experience. Small, unbounded text buttons could give users trouble. Space accordingly. ### Articles - I see the utility of the "Blog & News" eyebrow here, which gives it reason to exist on the index page 😅. Do we need anything more than that as the eyebrow, tho? 🤔 - If we're insetting the header art, i would shrink it, both for the sake of balance (so the headline dominates), and to give more room for the title text. - Additionally, a small corner radius on the artwork will make it look more intentional/neat  Hope that helps for now! 🙌 <!-- github-comment-id:778515235 -->

adam commented 2026-10-05 05:10:19 +02:00

Author

Owner

Copy link

Copy source

Thanks @ericronne - will likely have a few questions, but wanted to explain the checkbox for newsletter subscribe in the footer: GDPR regs.

Thanks @ericronne - will likely have a few questions, but wanted to explain the checkbox for newsletter subscribe in the footer: GDPR regs. <!-- github-comment-id:778516343 -->

adam commented 2026-10-05 05:10:20 +02:00

Author

Owner

Copy link

Copy source

@jdiogopeixoto - Consolidated everything from the conversation thread into a checklist in the first comment. Once https://github.com/ipfs/ipfs-blog/pull/49 is merged to replace fonts overall, this should be ready to work within your existing priorities (no need to change them) 😊

@jdiogopeixoto - Consolidated everything from the conversation thread into a checklist in the first comment. Once https://github.com/ipfs/ipfs-blog/pull/49 is merged to replace fonts overall, this should be ready to work within your existing priorities (no need to change them) 😊 <!-- github-comment-id:785344833 -->

Sign in to join this conversation.

No Branch/Tag Specified

Branches Tags

main

copilot/fix-failing-github-actions-job

remove-collab-cluster

fix-link

fix-typo

add-nohost

dependabot/npm_and_yarn/p-map-7.0.0

dappfix

revert-641-connect-with-us-in-istanbul-and-prague

disable-hiding-future-posts

dependabot/npm_and_yarn/vue-multiselect-2.1.8

dappling

dependabot/github_actions/actions/checkout-4

githubactionsbump

dependabot/npm_and_yarn/standard-version-9.5.0

dependabot/npm_and_yarn/svg-sprite-loader-6.0.11

dependabot/npm_and_yarn/eslint-plugin-prettier-4.2.1

staging

feat/task-completion-survey-banner

feat/show-future-posts-on-staging

No results found.

Labels

No items

No labels

Milestone

No items

No Milestone

Projects

Clear projects

No projects

Assignees

Clear assignees

adam (Adam Wojcieszonek)

No Assignees

1 Participants

Notifications

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: adam/ipfs-blog#27