For Your Review: One Mozilla Style Guide, v1

One Mozilla Style Guide (sample page)

As Mozilla continues to grow and evolve, it becomes increasingly important that we tell our story consistently and effectively at every opportunity. Whenever a user encounters one of our brands, be it an interaction with one of our products, a visit to one of our websites or simply seeing a Firefox shirt, we want the experience to truly feel like Mozilla.

But, what makes something feel like Mozilla? And is it possible to carry that feeling across many different touchpoints? With all that (and much more) in mind, our creative and UX teams have been hard at work defining our rules of style so that anyone who creates on behalf of Mozilla will have a guide to follow.

When it goes live as an open-to-anyone website, this One Mozilla style guide will connect everything from our product design to our logo rules to our written tone. It’s undoubtedly a lot of stuff, which is why we need your help making sure it’s done right. The link below points to a draft of the guide (to put it in Firefox terms, it’s like an Aurora release). Please take a look and let us know what’s working, what’s not working, what might need more explanation and what’s missing altogether. We know there’s more to do, but your input will play a big part in identifying what happens next.

We’ll have more to share about this project soon…until then, thanks for your help!

One Mozilla Style Guide, v1

[note: the product design details currently exist in a different format, so they'll be flowed in during the site development process.]

Stay Connected

Get email updates:

13 Responses to For Your Review: One Mozilla Style Guide, v1

  1. Ken Saunders July 30, 2012 at 10:49 am #

    There’s so much eye candy that I had to bolus some insulin after I was done going through it all. :)

    Excellent work!

    • John Slater July 30, 2012 at 12:39 pm #

      Thanks Ken!

  2. Galaxy Kadiyala July 30, 2012 at 2:33 pm #

    Style guide looks awesome!! :)

  3. Axel Hecht July 30, 2012 at 3:05 pm #

    I confess, I’m a sandstone fanboy. Both visually and by how inclusive it is conceptually.

    Still want to take the opportunity to point at external libraries, say, you want to use jquery.ui within a site that’s sandstoned. Filed bug 753163 on that a while back, but also applies to other 3rd party libs.

    Another challenge I’m facing with l10n.m.o is tabzilla. Say you’re on the German l10n team page https://l10n.mozilla.org/teams/de and I had tabzilla on that. That would have a big link “Get Involved” that’d lead somewhere completely different than you’d expect on the German localization page. Also, in the case of l10n.m.o, I’d love to be able to add some site-global navigation items, and I don’t yet see how they’d integrate with “mozilla-global” navigation items inside tabzilla. Of which “Get Involved” may just be one example.

  4. Berker Peksag July 31, 2012 at 1:24 pm #

    Is there a plan for the local Mozilla community websites[1]?

    [1] (e.g. http://www.mozilla.org.tr/, http://mozilla-antarctica.org/, http://www.mozilla.ba/en)

  5. David Boswell August 1, 2012 at 2:31 pm #

    This looks great. The one suggestion I have is to provide a little more information about how Sandstone could be adapted by local Mozilla communities.

    I know there’s reference to how this is a guide and not a set of absolute rules and that variations are OK.

    With that having been said though, it seems like there could be confusion about how much variation is possible while still feeling like a Mozilla site and what the scope of possible adaptions could be.

    Would it be possible to feature an existing local Mozilla site that has adapted Sandstone or provide a concept for what a localized Sandstone design might look like?

  6. tom jones August 1, 2012 at 5:18 pm #

    am i the only one who doesn’t think blue links go well with the rest of the sandstone theme? i love practically every other thing of this style guide, but the blue links look almost awful to me (sorry).

    they 1) clash with the main sandstone/gray backgrounds and 2) look to outdated imho.

  7. Ross Bruniges August 2, 2012 at 1:25 am #

    All looks great, the only thing I’m finding confusing is the stuff around tables (slide 34) – this might be coming in a separate guide but as an implementor and user of sandstone I don’t get how to follow the guides.

  8. Michael Verdi August 2, 2012 at 1:57 pm #

    This looks beautiful. I think the event signage (placeholder for it on page 21) will be something really important for contributors. We made up our own for the Firefox Clinic event we did this spring. I don’t see a mention of it but I think another really helpful piece would be a wordpress theme for blog.mozilla.org (or that can be downloaded for somewhere else). I’d LOVE that for the SUMO blog.

  9. zipguy September 20, 2012 at 3:37 pm #

    John,

    I am a contributor to Mozilla. Joined on 9/9/2012. Have one article reviewed and approved already, I was told by someone that this was a good place to put it, It is important to me. So here goes.

    I like lots of things they have done so far!
    Readability is the most important issue.
    Colors matter a lot, especially contrasting colors (with backgrounds).
    The styleguide is a good thing, but there’s no way to change it once it is in the rollout phase.
    I have problems with the styleguide, especially with colors, and thus readability.
    It does seperate the design a long way from desicion, a lot of subsequent work, to get near a rollout.
    If there is a problem, then it is really hard to change things to something else. More work!
    I think that the right way to do it is:
    Colors should be variables that are looked up when the page is built, by the server. If you make a mistake (say in your styleguide), that can easily be changed, if necessary. That’s architecture. Also,
    I like what they done with the tabs, but the colors (and bolding) look backwards to me.

    I hope you do understand my comments. You could email me or if you’re a member of Mozilla you could send me a message.

  10. zipguy September 25, 2012 at 1:05 pm #

    Zipguy said (in a meeting):

    I like a lot of the new knowledge base. The tabs moving and all of that!

    There are things I don’t like:

    Readability it the most important thing for me.
    My eyes are old. I’m wearing glasses which work well for me (bi-focal lenses, with a line physically in them).

    The links for example, light blue, on the background greyish (sandstone), makes them hard to notice, NOT more readable but, less readable. Even worse, visited links look a lot more readable then the ones you haven’t visited! Yikes. It at least should be opposite (in other words make the links to the ones you have visited, less visible).

    Making them DarkPurple (very visible for unvisited links) and Semi-DarkPurple (when visited) would greatly improve the readability of the pages when being viewed.

    I do like the tabs on the left. They have a kind of cute (and easily understood) little triangle on the left side of it (which is background color and it is very easy to see which tab you’re on visually. Good job!

    But why is only the one you are currently on being bolded?
    Why not all the bold all the rest and have the one that your’re on normal?
    That would make it a lot more readable, especially when you’re scanning them for another option (other than the one you’re on right now).

    Dark grey on grey is really low in readability.
    In a few places it’s gone back to a white background, which is terrific!
    But not in all like discussion areas for Articles.

    See these page for examples of what I’ve just said:
    Bad readability, both in link colors and in backwards bold’ed tabs (of the only one you’re currently on):
    https://support.mozilla.org/en-US/contributors/most-visited
    https://support.mozilla.org/en-US/kb/mastering-tab-group-editor/discuss/4620
    Fixed grey to white (Yeah!), but still bad readibility in links,
    Light-Blue on grey (Sandstone):
    https://support.mozilla.org/en-US/forums/knowledge-base-articles/708656?last=487644

  11. zipguy September 25, 2012 at 5:45 pm #

    Here’s my screenshot with comments:
    http://www.geocities.ws/thezipguy/misc/Greenshot_2012-09-25_19-45-09a.png

  12. John Slater October 15, 2012 at 10:00 am #

    Zipguy, thanks for the feedback. As discussed the other day, we’ll continue discussing and working on it. Appreciate your help!

Leave a Reply