https://design.theguardian.com/

Introduction

Grids & spacing

Brand use

Typography

Colour palette

Graphic elements

  

A guide to digital design at the Guardian

26/07/18

 
Introduction The Guardian website is made up of a series of fronts
and articles.
[Wide_No_Gr]
Introduction Fronts are made up of containers -- these allow stories
to be grouped in a logical manner, by theme or subject matter.
[culture_wi]
Introduction Containers are composed of modular story cards. These
are designed to be flexible; they expand and contract depending on
the number of stories added to them.
[culture_fu]
Introduction Cards can display an image, kicker, headline, standfirst
and meta information.

  * Kicker -- Guardian Headline Bold
  * Headline -- Guardian Headline Medium
  * Standfirst -- Guardian Text Egyptian
  * Meta -- Guardian Text Sans

[labelled_c]
Introduction We have a variety of different card sizes which create
hierarchy and pace on the page, and allow the reader to quickly gauge
a story's importance.
[card_sizes]
Introduction This is a selection of the card types. Each card type is
designed to impart the tone of the story.
[cards_grid]
Introduction Below is a selection of the article types. Articles
follow the design language of the cards, with each having its own
distinct flavour and tone.
[articles_u]
Introduction Thrashers are custom-designed containers usually
promoting a single article or series.
[thrasher]
Grids & spacing The grid provides the substrate and unifies how we
arrange information on all of our digital platforms.
[chaos_big]
Grids & spacing The desktop grid is based on columns of 60px with
20px gutters.
[Wide_grid_]
Grids & spacing We use four fixed grid sizes on large screens:

  * Wide -- 1300px
  * LeftCol -- 1140px
  * Desktop -- 980px
  * Tablet -- 740px

[grid_anima]
Grids & spacing We use a fluid grid on mobile devices, with tweak
points at:

  * Phablet -- 740px
  * MobileLandscape -- 480px
  * MobileMedium -- 375px

[mobile_gri]
Grids & spacing Spacing is intentionally used to echo the placement
of the typography in print.
[paper_full]
Grids & spacing Rules govern the placement of display and text
elements and maintain consistency across print and digital platforms.
[paper_labl]
Grids & spacing This alignment is consistent on headlines, bylines
and container titles across fronts and articles.
[card_spaci]
Brand use The Guardian has two expressions of its brand.
[logo]
Brand use The logo and the roundel are always aligned either top
right or bottom right.
[logo_place]
Brand use The roundel acts as a simplified expression of the brand --
often used to indicate Guardian content on- and off-platform. For
more, visit The Guardian Brand hub
[social_med]
Typography The Guardian has two core typefaces and three additional
typefaces.

  * Guardian Headline (core)
  * Guardian Titlepiece (core)
  * Guardian Text Egyptian
  * Guardian Display Sans
  * Guardian Text Sans

[type_state]
Typography Guardian Headline is designed to provide an optimal
reading experience across all platforms. It is used on the website
and app for headlines, providing their unique character and voice.
[smallsizes]
Typography Guardian Titlepiece was drawn from the Guardian's logotype
and is used for section titling and signposting. High contrast, bold
and striking -- use cautiously and appropriately!
[showoff]
Typography Highly legible text type complements our display family.
[integrity]
Typography We use our sans serif for small sizes or meta information.
[sans_updat]
Colour palette Our colour palette allows us to be bold, playful,
tasteful and sensitive.
[colour_sta]
Colour palette We use colour also as a navigational aid for our
readers, therefore consistency is crucial.
[pillars]
Colour palette Colour is an important tool, both for our UI and for
signifying the type of editorial content and the pillar under which
that content sits.
[colour_exp]
Colour palette Each pillar's colour group comprises of a dark, main,
bright, pastel and faded colour variant. Showing:

News

  * 
    Dark

    #ab0613

    RGB: 171, 6, 19

  * 
    Main

    #c70000

    RGB: 199, 0, 0

  * 
    Bright

    #ff4e36

    RGB: 255, 78, 54

  * 
    Pastel

    #ffbac8

    RGB: 255, 186, 200

  * 
    Faded

    #fff4f2

    RGB: 255, 244, 242

Opinion

  * 
    Dark

    #bd5318

    RGB: 189, 83, 24

  * 
    Main

    #e05e00

    RGB: 224, 94, 0

  * 
    Bright

    #ff7f0f

    RGB: 255, 127, 15

  * 
    Pastel

    #f9b376

    RGB: 249, 179, 118

  * 
    Faded

    #fef9f5

    RGB: 254, 249, 245

Sport

  * 
    Dark

    #005689

    RGB: 0, 86, 137

  * 
    Main

    #0084c6

    RGB: 0, 132, 198

  * 
    Bright

    #00b2ff

    RGB: 0, 178, 255

  * 
    Pastel

    #90dcff

    RGB: 144, 220, 255

  * 
    Faded

    #f1f8fc

    RGB: 241, 248, 252

Culture

  * 
    Dark

    #6b5840

    RGB: 107, 88, 64

  * 
    Main

    #a1845c

    RGB: 161, 132, 92

  * 
    Bright

    #eacca0

    RGB: 234, 204, 160

  * 
    Pastel

    #e7d4b9

    RGB: 231, 212, 185

  * 
    Faded

    #fbf6ef

    RGB: 251, 246, 239

Lifestyle

  * 
    Dark

    #7d0068

    RGB: 125, 0, 104

  * 
    Main

    #bb3b80

    RGB: 187, 59, 128

  * 
    Bright

    #ffabdb

    RGB: 255, 171, 219

  * 
    Pastel

    #fec8d3

    RGB: 254, 200, 211

  * 
    Faded

    #feeef7

    RGB: 254, 238, 247

Colour palette In addition to our pillar colours, we use 'Highlight'
for important information, an extensive array of 'Neutrals' for page
architecture and a set of template specific colours. Showing:

Brand

  * 
    Dark

    #041f4a

    RGB: 4, 31, 74

  * 
    Main

    #052962

    RGB: 5, 41, 98

  * 
    Pastel

    #506991

    RGB: 80, 105, 145

Highlight

  * 
    Highlight main

    #ffe500

    RGB: 255, 229, 0

  * 
    Highlight dark

    #ffbb50

    RGB: 255, 187, 80

Neutral

  * 
    Brightness 7

    #121212

    RGB: 18, 18, 18

  * 
    Brightness 20

    #333333

    RGB: 51, 51, 51

  * 
    Brightness 46

    #767676

    RGB: 118, 118, 118

  * 
    Brightness 60

    #999999

    RGB: 153, 153, 153

  * 
    Brightness 86

    #dcdcdc

    RGB: 220, 220, 220

  * 
    Brightness 93

    #ededed

    RGB: 237, 237, 237

  * 
    Brightness 97

    #f6f6f6

    RGB: 246, 246, 246

  * 
    Brightness 100

    #ffffff

    RGB: 255, 255, 255

Other

  * 
    Special report dark

    #3f464a

    RGB: 63, 70, 74

  * 
    Labs dark

    #4B8878

    RGB: 75, 136, 120

  * 
    Labs main

    #69d1ca

    RGB: 105, 209, 202

  * 
    Green dark

    #236925

    RGB: 35, 105, 37

  * 
    Green main

    #3db540

    RGB: 61, 181, 64

Graphic elements Various devices create hierarchy, structure and help
readers to navigate.
[elements_s]
Graphic elements We have two styles of button. Consider weighting
when choosing a style: the lozenge is bolder, the circular button is
more subtle. Icons help the reader navigate and sit centrally inside
an imaginary circle at the edge of the button.
[Filled-Out]
Graphic elements We use highlighting for impact and to create
hierarchy and emphasis within designs.
[highlights]
Graphic elements Rules provide structure and also add a subtle
difference in flavour across article types. We have four styles for
different parts of the website.
[rules_rule]