Innovation theme change/additions

[fernzharp]

Hello! We are currently designing and finalizing drafts in Birdbox for the new Mozilla Builders landing page due to launch on June 3rd, and would like to make the following changes/additions to the Innovation theme.

As this is a fast moving project with a launch date fast approaching, I've tried to make this issue/request as straight forward as possible and only include requests that are the highest priority to us to launch with a look and feel close to brand specifications.
Please let me know if there's anything else I can provide or if there's a way you'd prefer me to structure these requests!

Relevant links:

• Work up new Innovation theme for future.m.o #333
• Figma design
• Google drive link for Logo SVG's

Typography

• Change body font to Zilla slab regular - @craigcook

Colour

• Change background colour to #F7FCFA - @craigcook

Nav Bar

• Remove dropshadow from navbar - @craigcook

Logo

• Add a section before the Centered Hero block for Horizontal SVG Logo/Wordmarks

Google drive link for Logo SVG's

Signup/Discord Block

This seems like the most complex and labour intensive. Please check out the design and prototype and let me know if this is too complex for a quick turnaround, or if you have any suggestions for components that could provide the solution!

• Create custom "Connect with us" split component that allows User to Sign-up for updates on the Mozilla Builders Accelerator and future open source projects and initiatives on the left, and to click a link that takes the User to the Mozilla AI Discord server.

Preview of Discord button interaction

Success Criteria:

• Body font changed to Zilla slab regular - @craigcook
• Change background colour to #F7FCFA - @craigcook
• Drop-shadow is removed from navbar - @craigcook
• Section added before the Hero block for Horizontal SVG Logo/Wordmarks - @stevejalim feat. @craigcook
• Create custom "Connect with us" split component that allows User to Sign-up for updates on the Mozilla Builders Accelerator and future open source projects and initiatives on the left, and to click a link that takes the User to the Mozilla AI Discord server. @stevejalim to investigate scale of this

[craigcook]

Some of these proposed changes are pretty easy and we can make them quickly. Others are much more complex, especially the custom component. We'll need to scope this new work and weigh it against other priorities and active workstreams.

@fernzharp If you wouldn't mind filling out our intake form it'll help us understand your requirements and timeline, and get this into our team's backlog: https://form.asana.com/?k=u7QIfO5itUEWkt7fDzrz3Q&d=90589597529

Thanks!

Regarding fonts:

In the past we've found Zilla Slab to be an unsuitable font for body text. It's a display font optimized for large headlines, and it's optically smaller than other fonts at the same size. This makes it harder to read at smaller sizes, especially in large blocks of content. To compensate we tried increasing the standard body size up from 16px to 18px, but that brings problems of its own.

A browser will use a suggested webfont if it's supported and available, but if that font is blocked or otherwise fails to load, or if the browser needs to render a character that the suggested webfont doesn't include (like another language or other special characters), the browser will substitute another suggested font in the stack, or else a fallback system font. This means in some cases you can have a mix of fonts where a single character in a word is rendered in a totally different font... when those fonts are also visibly different in size it looks pretty terrible.

After quite a bit of testing and experimentation, we ultimately decided to reserve Zilla Slab only for titles. That's when we started using Inter as a companion font across the entire brand. We can use Zilla Slab for body text if you insist, but I advise against it.

Regarding the navbar:

The drop shadow is intended to create some visual separation between navigation and the page content. We can certainly tone it down and make it much more subtle, but I still think some separation would help users understand that bar is a navigation element and not a part of the content below it. Even just a thin gray line might be enough. Perhaps we can try a few options and find a good compromise.

[fernzharp]

Thanks so much for the thoughtful reply, Craig!
I appreciate your perspective and advice and have revised the list. I'll complete the intake form to help get the work scoped.

[stevejalim]

Reopening as still a couple more bits to do

[stevejalim]

Hi @fernzharp - I've just pushed the following changes @craigcook and I made to production:

• CSS background color change
• Navbar drop-shadow fix
• Support for SVG wordmarks - they are available as the Horizontal image / Wordmark block in a Streamfield and can go above the hero - see Add a horizontal image block which can display an SVG (eg above the hero) #379 for more details. Spacing is tricky, but hopefully the options already supported (see the block) will be useful enough.

Sorry there wasn't time to work up an alternative newsletter/discord component, but from the revised specs you submitted via the intake form, it sounds like things are workable without that one.

Let us know if something needs a quick tweak ahead of Monday.

[fernzharp]

Hi @stevejalim and @craigcook,

Thanks so much for getting these changes made, it's looking great - I appreciate the effort and quick turnaround!

I've done some testing and found it would look a bit more balanced with a padding adjustment above Logo. This was the smallest tweak I could identify with the biggest impact but I'm not sure how difficult this would be on your end considering the timing. Let me know what you think and a big thanks again!