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 |
|---|---|
As CSS rule
.ipfs-gradient-1 {
background:linear-gradient(to top, #041727 0%,#043b55 100%);
}Rendered example
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:
mfor margin.ma0ismargin: 0pfor padding.pa3ispadding: 1rem
followed by a direction
afor all.pa3ispadding: 3remhfor horizontal, so left and right.mh3ismargin-left: 1rem; margin-right: 1rem;vfor vertical.pv3ispadding-top: 1rem padding-bottom: 1rem;lis left,ris right.pl3ispadding-left: 1rem;tis top,bis bottom.mt3ismargin-top: 1rem;
followed by a size from the scale, so:
<div class='mb3 pa2'>Woo woo</div>mb3: margin bottom 3 =margin-bottom: 1rempa2: 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.