/ipfs-ui-style-guide

A UI style guide for IPFS Apps

Primary LanguageJavaScript

IPFS UI Style Guide

A shared style guide for UI design in the IPFS universe.

Reuse these colors, typography, and spacing values to create a coherent feel across all IPFS applications.

Colors

Extracted from ipfs.io and TBC

teal turquoise blue
#469ea2 #6acad1 #00b0e9
red orange beige
#f05234 #f59223 #ffe5ca
blue black text gray light gray
#041727 #4d5659 #b7c0c3

Fancy hero header gradient

from #043b55 to #041727
#043b55 #041727

As CSS rule

.ipfs-gradient-1 {
  background:linear-gradient(to top, #041727 0%,#043b55 100%);
}

Rendered example

screenshot 2018-01-09 10 57 23

Typography

Extracted from tachyons and TBC

Font family

Use the system font for general instructional text.

.system-ui-font {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

https://css-tricks.com/snippets/css/system-font-stack/

Provide the main content in a font that blends in with the users system, and is already installed.

Font size

Use a type scale to pick a small set of font sizes that work together. The tachyons type scale is good.

class name px rem Example
.f1 48px 3 Main header <h1 class="f1">
.f2 36px 2.25 Sub head <h2 class="f2">
.f3 24px 1.5 <h3 class="f3">
.f4 20px 1.25 <h3 class="f4">
.f5 16px 1 General copy <p class='f5'>
.f6 14px 0.875 Small header <h4 class="f6 b uppercase">
.f7 12px 0.75 Small print <small class='f7'>

Capturing the font sizes for your app as isolated, single purpose css classes, adds flexibility by decoupling your design from your markup semantics. An <h1> doesn't have to be the largest text on the page.

Agreeing to a finite set of font sizes prevents the font-size sprawl that often occurs when trying to maintain a ui and associated css over time. (GitHub, at time of writing has 56 unique font sizes defined: github cssstats)

Headers and Heros

Sometimes you need really big text, for fancy splash pages and hero sections.

class name px rem Example
.f-headline 48px 6 Hero headline <h1 class="f-headline">
.f-subheadline 36px 5 <h2 class="f-subheadline">

These are just there to help get things done quickly. Use whatever font-size the design calls for. If the it's a one time use for a big impact intro, then just use an inline style.

Spacing

Use a spacing scale to define a finite set of margin and padding sizes.

Using a scale gives a layout coherence and pinning the possible values to a fixed set avoids littering the stylesheet with magic numbers. Reusing the same spacing values creates vertical rhythm.

Capturing your spacing values as single purpose css classes allows you to quickly adjust layouts without side effects. You can modify the use site in the DOM without the risk of breaking another part of the UI.

The tachyons spacing scale is:

class name px rem CSS declaration
.pa0 0px 0 padding: 0
.pa1 4px 0.25 padding: 0.25rem
.pa2 8px 0.5 padding: 0.5rem
.pa3 16px 1 padding: 1rem
.pa4 32px 2 padding: 2rem
.pa5 64px 4 padding: 4rem
.pa6 128px 8 padding: 8rem
.pa7 256px 16 padding: 16rem

See: http://tachyons.io/docs/layout/spacing/

The class names follow a simple structure. They start with either:

  • m for margin. ma0 is margin: 0
  • p for padding. pa3 is padding: 1rem

followed by a direction

  • a for all. pa3 is padding: 3rem
  • h for horizontal, so left and right. mh3 is margin-left: 1rem; margin-right: 1rem;
  • v for vertical. pv3 is padding-top: 1rem padding-bottom: 1rem;
  • l is left, r is right. pl3 is padding-left: 1rem;
  • t is top, b is bottom. mt3 is margin-top: 1rem;

followed by a size from the scale, so:

<div class='mb3 pa2'>Woo woo</div>
  • mb3: margin bottom 3 = margin-bottom: 1rem
  • pa2: margin all 2 = padding: 0.5rem

Credits

This style guide uses ideas from http://tachyons.io/docs/ and http://basscss.com/ and was inspired by https://airbnb.design/building-a-visual-language/

License

This repository is mainly for documents. All of these are licensed under the CC-BY-SA 3.0 license © 2016 Protocol Labs Inc. Any code is under an MIT license © 2016 Protocol Labs Inc.