Style guide

style-guide

In 2019 we published a style guide for the PublicLab.org website, to set some clear design conventions, and improve consistency. This guide is designed to support coders, designers, and writers building and designing pages on PublicLab.org. [Link to draft Style Guide](https://publiclab.org/notes/warren/05-07-2019/introducing-a-draft-style-guide-for-public-lab)  **** Notes for staff (and anyone else who's interested) on a consistent style language for Public Lab materials -- if you're interested in consistency across PL materials, feel free to use these guidelines! ## Logos See [this page for logos in different sizes and formats](/logos) ## Flyer Generator You can use this **flyer generator** to make graphics following these guidelines: http://jywarren.github.io/flyer/ ## Fonts, sizes We use Junction Light in large sizes with relatively large margins on white backgrounds for many things. Sometimes Chunk Five can be used if extreme emphasis is needed. Both fonts are open source and available from the [League of Movable Type](https://www.theleagueofmoveabletype.com/). ## Icons On our website, we use Font Awesome icons in version 4.5+ -- https://fontawesome.com/v4.7.0/ [](/i/26669) ### Text slide For text slides, 80% dark grey for lead title and 60% grey for subtitles works well: [](https://i.publiclab.org/system/images/photos/000/009/532/original/Screen_Shot_2015-04-02_at_1.00.26_PM.png) A good alternative is to use 5% light grey as a background and a darker 90% grey for the main title: [](https://i.publiclab.org/system/images/photos/000/009/533/original/Screen_Shot_2015-04-02_at_1.04.32_PM.png) ## Slide with image Images can be full-bleed with no margins, with white text over them. One image per slide is preferred. [](https://i.publiclab.org/system/images/photos/000/009/530/original/Screen_Shot_2015-04-02_at_12.54.54_PM.png) If your image (see image guidelines below) does not have clear space near the bottom, you can put the text near the top, too: [](https://i.publiclab.org/system/images/photos/000/009/531/original/Screen_Shot_2015-04-02_at_12.55.21_PM.png) ## Images * Good images have good contrast, but are not too busy that text won't read well. Dense high contrast patterns don't work well * Images should be at least 750px wide for web use * Text needs to be REALLY SHORT to fit over an image effectively. Think: title of 3 words, next line <8 words * Either overall light or overall dark images work best, as we'll put either white or black text over them. Here are a few examples of nice images to run text over: [](https://i.publiclab.org/system/images/photos/000/008/765/original/IMG_1530.JPG) [](https://i.publiclab.org/system/images/photos/000/005/435/original/14370756105_b1ddde6b02_k.jpg) [](https://i.publiclab.org/system/images/photos/000/000/909/original/WarnerLkVis7344TrapaSH1800.jpg) [](https://i.publiclab.org/system/images/photos/000/009/643/original/4948314953_68052f75ef_b.jpg) ### Using difficult images Some images are great but it's still hard to get text to stand out over them: [](https://i.publiclab.org/system/images/photos/000/009/534/original/Screen_Shot_2015-04-02_at_1.07.20_PM.png) You can lay text over a white background with even spacing above/below where you can't get text to stand out well enough: [](https://i.publiclab.org/system/images/photos/000/009/535/original/Screen_Shot_2015-04-02_at_1.10.03_PM.png) ## Print documents Letter sized documents can use a 1 inch margin and 48pt Junction Light, all text in black, with body text in 12pt with 18pt line spacing. [](https://i.publiclab.org/system/images/photos/000/009/536/original/Screen_Shot_2015-04-02_at_1.16.42_PM.png) Images can fit into this with 0.6 inch padding below: [](https://i.publiclab.org/system/images/photos/000/009/537/original/Screen_Shot_2015-04-02_at_1.20.31_PM.png) ...