Public Lab Wiki documentation



Style guide

2 | 8 | | #11739

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


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

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.

Icons

On our website, we use Font Awesome icons in version 4.5+ -- https://fontawesome.com/v4.7.0/

icons.png

Text slide

For text slides, 80% dark grey for lead title and 60% grey for subtitles works well:

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:

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.

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:

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:

IMG_1530.JPG

14370756105_b1ddde6b02_k.jpg

WarnerLkVis7344TrapaSH1800.jpg

4948314953_68052f75ef_b.jpg

Using difficult images

Some images are great but it's still hard to get text to stand out over them:

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:

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.

Screen_Shot_2015-04-02_at_1.16.42_PM.png

Images can fit into this with 0.6 inch padding below:

Screen_Shot_2015-04-02_at_1.20.31_PM.png


This is part of:

design

5 following

Follow

style-guide

1 following

Follow

sidebar:none