Style Guide

This is a quick introduction to some of the building blocks that Tachyons makes available.

Typography

Level 1 Heading

Level 2 Heading

Level 3 Heading

Level 4 Heading

Level 5 Heading
Level 6 Heading

.f1 { font-size: 3rem; }
.f2 { font-size: 2.25rem; }
.f3 { font-size: 1.5rem; }
.f4 { font-size: 1.25rem; }
.f5 { font-size: 1rem; }
.f6 { font-size: .875rem; }

Type Styles

Italicize: to write or print (text) in italics.

Some text that needs to be super bold.

This text wants to be underlined.

This text should be crossed out.

This text should be capitalized.

This text should be uppercase.


.i {         font-style: italic; }
.b {         font-weight: bold; }
.underline { text-decoration: underline; }
.strike {    text-decoration: line-through; }
.ttc {       text-transform: capitalize; }
.ttu {       text-transform: uppercase; }

Typefaces

system serif

a b c d e f g h i j k l m n o p q r s t u v w x y z

Athelas

a b c d e f g h i j k l m n o p q r s t u v w x y z

a b c d e f g h i j k l m n o p q r s t u v w x y z

georgia

a b c d e f g h i j k l m n o p q r s t u v w x y z

a b c d e f g h i j k l m n o p q r s t u v w x y z

garamond

a b c d e f g h i j k l m n o p q r s t u v w x y z

a b c d e f g h i j k l m n o p q r s t u v w x y z

baskerville

a b c d e f g h i j k l m n o p q r s t u v w x y z

a b c d e f g h i j k l m n o p q r s t u v w x y z

calisto

a b c d e f g h i j k l m n o p q r s t u v w x y z

a b c d e f g h i j k l m n o p q r s t u v w x y z

system sans-serif

a b c d e f g h i j k l m n o p q r s t u v w x y z

a b c d e f g h i j k l m n o p q r s t u v w x y z

Helvetica

a b c d e f g h i j k l m n o p q r s t u v w x y z

a b c d e f g h i j k l m n o p q r s t u v w x y z

Avenir Next

a b c d e f g h i j k l m n o p q r s t u v w x y z

a b c d e f g h i j k l m n o p q r s t u v w x y z

Code

a b c d e f g h i j k l m n o p q r s t u v w x y z

a b c d e f g h i j k l m n o p q r s t u v w x y z

Courier

a b c d e f g h i j k l m n o p q r s t u v w x y z

a b c d e f g h i j k l m n o p q r s t u v w x y z


.sans-serif { font-family: -apple-system, BlinkMacSystemFont,'avenir next', avenir,helvetica, 'helvetica neue',ubuntu,roboto, noto,'segoe ui', arial,sans-serif; }
.serif { font-family: georgia, times, serif; }
.code { font-family: Consolas, monaco, monospace; }
.courier { font-family: 'Courier Next', courier, monospace; }
.helvetica { font-family: 'helvetica neue', helvetica, sans-serif; }
.avenir { font-family: 'avenir next', avenir, sans-serif; }
.athelas { font-family: athelas, georgia, serif; }
.georgia { font-family: georgia, serif; }
.times { font-family: times, serif; }
.bodoni { font-family: "Bodoni MT", serif; }
.calisto { font-family: "Calisto MT", serif; }
.garamond { font-family: garamond, serif; }
.baskerville { font-family: baskerville, serif; }

Measure

Wide Measure

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Measure

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Narrow Measure

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.


.measure-wide {   max-width: 34em; }
.measure {        max-width: 30em; }
.measure-narrow { max-width: 20em; }

Grids

Floats, widths, and padding can be combined to build a wide variety of grids.

fl w-100
fl w-90
fl w-10
fl w-80
fl w-20
fl w-75
fl w-25
fl w-70
fl w-30
fl w-60
fl w-40
fl w-50
fl w-50
fl w-third
fl w-third
fl w-third
fl w-third
fl w-two-thirds
fl w-25
fl w-25
fl w-25
fl w-25
fl w-20
fl w-20
fl w-20
fl w-20
fl w-20
fl w-10
fl w-10
fl w-10
fl w-10
fl w-10
fl w-10
fl w-10
fl w-10
fl w-10
fl w-10

Colors

Aa --dark-red: #e7040f;
Aa --red: #ff4136;
Aa --light-red: #ff725c;
Aa --orange: #ff6300;
Aa --gold: #ffb700;
Aa --yellow: #ffde37;
Aa --light-yellow: #fbf1a9;
Aa --purple: #5e2ca5;
Aa --light-purple: #a463f2;
Aa --dark-pink: #d5008f;
Aa --hot-pink: #ff41b4;
Aa --pink: #ff80cc;
Aa --light-pink: #ffa3d7;
Aa --dark-green: #137752;
Aa --green: #19a974;
Aa --light-green: #9eebcf;
--navy: #001b44;
Aa --dark-blue: #00449e;
Aa --blue: #357edd;
Aa --light-blue: #96ccff;
Aa --lightest-blue: #cdecff;
Aa --washed-blue: #f6fffe;
Aa --washed-green: #e8fdf5;
Aa --washed-yellow: #fffceb;
Aa --washed-red: #ffdfdf;


.bg-dark-red { background-color: var(--dark-red); }
.bg-red { background-color: var(--red); }
.bg-orange { background-color: var(--orange); }
.bg-gold { background-color: var(--gold); }
.bg-yellow { background-color: var(--yellow); }
.bg-purple { background-color: var(--purple); }
.bg-light-purple { background-color: var(--light-purple); }
.bg-hot-pink { background-color:  var(--hot-pink); }
.bg-dark-pink { background-color: var(--dark-pink); }
.bg-pink { background-color: var(--pink); }
.bg-dark-green { background-color: var(--dark-green); }
.bg-green { background-color: var(--green); }
.bg-navy { background-color: var(--navy); }
.bg-dark-blue { background-color: var(--dark-blue); }
.bg-blue { background-color: var(--blue); }
.bg-light-blue { background-color: var(--light-blue); }
.bg-lightest-blue { background-color: var(--lightest-blue); }
.bg-washed-blue { background-color: var(--washed-blue); }
.bg-washed-green { background-color: var(--washed-green); }
.bg-washed-yellow { background-color: var(--washed-yellow); }
.bg-light-pink { background-color: var(--light-pink); }
.bg-light-yellow { background-color: var(--light-yellow); }
.bg-light-red { background-color: var(--light-red); }

.dark-red { color: var(--dark-red); }
.red { color: var(--red); }
.orange { color: var(--orange); }
.gold { color: var(--gold); }
.yellow { color: var(--yellow); }
.purple { color: var(--purple); }
.light-purple { color: var(--light-purple); }
.hot-pink { color:  var(--hot-pink); }
.dark-pink { color: var(--dark-pink); }
.pink { color: var(--pink); }
.dark-green { color: var(--dark-green); }
.green { color: var(--green); }
.navy { color: var(--navy); }
.dark-blue { color: var(--dark-blue); }
.blue { color: var(--blue); }
.light-blue { color: var(--light-blue); }
.lightest-blue { color: var(--lightest-blue); }
.washed-blue { color: var(--washed-blue); }
.washed-green { color: var(--washed-green); }
.washed-yellow { color: var(--washed-yellow); }
.light-pink { color: var(--light-pink); }
.light-yellow { color: var(--light-yellow); }
.light-red { color: var(--light-red); }

Borders

ba = border on all sides
bt = border top
br = border right
bb = border bottom
bl = border left
bn = border none

.ba { border-style: solid; border-width: 1px; }
.bt { border-top-style: solid; border-top-width: 1px; }
.br { border-right-style: solid; border-right-width: 1px; }
.bb { border-bottom-style: solid; border-bottom-width: 1px; }
.bl { border-left-style: solid; border-left-width: 1px; }
.bn { border-style: none; border-width: 0; }

Border Styles

dotted
dashed
solid
none

.b--dotted { border-style: dotted; }
.b--dashed { border-style: dashed; }
.b--solid {  border-style: solid; }
.b--none {   border-style: none; }

Border Widths

default
.125rem
.25rem
.5rem
1rem
2rem

.bw0 { border-width: 0; }
.bw1 { border-width: .125rem; }
.bw2 { border-width: .25rem; }
.bw3 { border-width: .5rem; }
.bw4 { border-width: 1rem; }
.bw5 { border-width: 2rem; }

Border Colors

b--black
b--black-90
b--black-80
b--black-70
b--black-60
b--black-50
b--black-40
b--black-30
b--black-20
b--black-10
b--black-05
b--black-025
b--black-0125
b--near-black
b--dark-gray
b--mid-gray
b--gray
b--silver
b--light-silver
b--light-gray
b--near-white
b--white
b--white-90
b--white-80
b--white-70
b--white-60
b--white-50
b--white-40
b--white-30
b--white-20
b--white-10
b--white-05
b--white-025
b--white-0125
b--dark-red
b--red
b--orange
b--gold
b--yellow
b--purple
b--light-purple
b--hot-pink
b--dark-pink
b--pink
b--dark-green
b--green
b--dark-blue
b--blue
b--light-blue
b--lightest-blue
b--washed-blue
b--washed-green
b--washed-yellow
b--light-pink
b--light-yellow
b--light-red
b--transparent

.b--black {        border-color: var(--black); }
.b--black-90 {   border-color: var(--black-90); }
.b--black-80 {   border-color: var(--black-80); }
.b--black-70 {   border-color: var(--black-70); }
.b--black-60 {   border-color: var(--black-60); }
.b--black-50 {   border-color: var(--black-50); }
.b--black-40 {   border-color: var(--black-40); }
.b--black-30 {   border-color: var(--black-30); }
.b--black-20 {   border-color: var(--black-20); }
.b--black-10 {   border-color: var(--black-10); }
.b--black-05 {   border-color: var(--black-05); }
.b--black-025 {   border-color: var(--black-025); }
.b--black-0125 {   border-color: var(--black-0125); }
.b--near-black {   border-color: var(--near-black); }
.b--dark-gray {    border-color: var(--dark-gray); }
.b--mid-gray {     border-color: var(--mid-gray); }
.b--gray {         border-color: var(--gray); }
.b--silver {       border-color: var(--silver); }
.b--light-silver { border-color: var(--light-silver); }
.b--light-gray {   border-color: var(--light-gray); }
.b--near-white {   border-color: var(--near-white); }
.b--white {        border-color: var(--white); }
.b--white-90 {   border-color: var(--white-90); }
.b--white-80 {   border-color: var(--white-80); }
.b--white-70 {   border-color: var(--white-70); }
.b--white-60 {   border-color: var(--white-60); }
.b--white-50 {   border-color: var(--white-50); }
.b--white-40 {   border-color: var(--white-40); }
.b--white-30 {   border-color: var(--white-30); }
.b--white-20 {   border-color: var(--white-20); }
.b--white-10 {   border-color: var(--white-10); }
.b--white-05 {   border-color: var(--white-05); }
.b--white-025 {   border-color: var(--white-025); }
.b--white-0125 {   border-color: var(--white-0125); }
.b--dark-red { border-color:  var(--dark-red); }
.b--red { border-color:  var(--red); }
.b--orange { border-color:  var(--orange); }
.b--gold { border-color:  var(--gold); }
.b--yellow { border-color:  var(--yellow); }
.b--purple { border-color:  var(--purple); }
.b--light-purple { border-color:  var(--light-purple); }
.b--hot-pink { border-color:  var(--hot-pink); }
.b--dark-pink { border-color:  var(--dark-pink); }
.b--pink { border-color:  var(--pink); }
.b--dark-green { border-color:  var(--dark-green); }
.b--green { border-color:  var(--green); }
.b--navy { border-color:  var(--navy); }
.b--dark-blue { border-color:  var(--dark-blue); }
.b--blue { border-color:  var(--blue); }
.b--light-blue { border-color:  var(--light-blue); }
.b--lightest-blue { border-color:  var(--lightest-blue); }
.b--washed-blue { border-color:  var(--washed-blue); }
.b--washed-green { border-color:  var(--washed-green); }
.b--washed-yellow { border-color:  var(--washed-yellow); }
.b--light-pink { border-color:  var(--light-pink); }
.b--light-yellow { border-color:  var(--light-yellow); }
.b--light-red { border-color:  var(--light-red); }
.b--transparent { border-color: var(--transparent); }

Border Radii

br1
br2
br3
br4

pill
br--bottom
br--top

br--left
br--right

.br0 {        border-radius: 0; }
.br1 {        border-radius: .125rem; }
.br2 {        border-radius: .25rem; }
.br3 {        border-radius: .5rem; }
.br4 {        border-radius: 1rem; }
.br-100 {     border-radius: 100%; }
.br-pill {    border-radius: 9999px; }
.br--bottom {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.br--top {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.br--right {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.br--left {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}

Hover Animations

Grow
Dim

.grow {
-moz-osx-font-smoothing: grayscale;
backface-visibility: hidden;
transform: translateZ(0);
transition: transform 0.25s ease-out;
}

.grow:hover,
.grow:focus {
transform: scale(1.05);
}

.dim {
opacity: 1;
transition: opacity .15s ease-in;
}
.dim:hover,
.dim:focus {
opacity: .5;
transition: opacity .15s ease-in;
}