Last updated: June 2017
A clear information hierarchy is pivotal to the legibility of a page. With that in mind it’s incredibly important we have a robust and flexible spacing system that supports our typography and wider components.
These guidelines are here to help facilitate the spacing across our products without being too prescriptive at a base level. Each component or module should reference this system and stay true to the baseline grid.
All spacing across FanDuel should be divisible by 8. Simple, right? OK there’s some more to it than that but at its core everything comes back to that.
Going into a bit more detail we have a single core guideline:
All viewports use a base spacing of
16, with the option of increasing to
48 as appropriate.
With the previous guidelines in mind it’s also important not to think solely about the size of a screen but rather the context of which the component or module will be placed and used.
Friends Mode as an example is a view comprised of three unique sections, contest, activity, and leaderboard. On desktop each column only occupies 1⁄3 of the screen width and therefore makes sense for components or modules to use the small screen spacing.
In a situation that didn’t follow this rule, perhaps one large content card that takes up the whole screen, we would employ a larger context spacing increasing from
Now, these guidelines refer to the inner workings of a component/module within the context of a page, page layouts themselves should always follow the
16/24 rule where possible with a maximum width of
1400. For more information see the cards documentation.
Horizontal spacing is crucial in ensuring that all content is aligned correctly. To ensure equal spacing and alignment we have applied
16 margins to the left and right screen edge while the vertical spacing between a component/module is also set at
Vertical spacing between a component/module is set at
16 in order to ensure a clear visual seperation between each.
A component/module on small screen has
16 padding all round in order to ensure good readability and seperation of contnet on screen. The content within a component/module will define the height of each individual area without the need for additional margin or padding. For more information see the cards documentation.
Horizontal spacing on larger screens is determined by the relationship of each individual component/module. Unrelated components/modules such as side navigation or promotional modules have
48 vertical spacing between them and any other content, creating a clear seperation. A good example of this is friends mode on desktop where the content is split into 3 distinct columns and would therefore require the larger
48 margins applied between each column.
Related content that is displayed across multiple columns has a vertical spacing of
24 helping create a clear connection. An example of this is the lobby where the filters on the left are directly related to the list of contests to the right and would therefore require the smaller
Ensuring the correct vertical spacing between a component/module will help to visually connect/disconnect each. Unrelated components/modules have
24 vertical spacing between them and any other content. Related content that is displayed across multiple components/modules has a vertical spacing of
16 helping create a clear connection.
The spacing inside of a component/module is dependant on the screen space taken up by each individual component/module. If that component is only taking up a quarter of the screen as it’s just a small part of the layout as a whole? Then it makes sense to maintain the small screen margins of
16. Think less about the width of the screen itself and rather the width of the container that holds it. If that component/module is taking up 2⁄3 of the screen then it makes sense to apply the larger spacing of
The values in this documentation refer to rendered spacing. In a text item, the top edge of the bounding box is always a few units above the top of the text (ascenders), because of leading/line-height/line spacing. Therefore, the spacing between the text box and anything above it will not be the same as the desired rendered spacing, which should be between the actual top of the text and the item above it.
Always space a text box from an item above it by making sure that the top of the text is the correct spacing value from the other item. Do not position the top of the text box to the correct spacing value from the other item.
The numbers used in this example are illustrative only. The actual values will depend on the type size and leading used.
The heading text is correctly spaced so that the top of it is
16 from the top of the card. However in this example, the top of the text box is only 11 from the top of the card. Use the value that Sketch or Zeplin gives you (in this case 11) and that will render the spacing correctly (in this case
When adding space between the bottom of text and an item below it, always space from the baseline of the text, not the very bottom (descenders). By doing this, the spacing will look visually correct regardless of whether the text has any descenders.