An example of an alert component
An example of an alert component
An example of an alert component
An example of an alert component
An example of an alert component
An example of an alert component
An example of an alert component
An example of an alert component
An example of an alert component
An example of an alert component
An example of an alert component
An example of an alert component
An example of an alert component
An example of an alert component
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge

Card Title

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.

Read More

Card Title

Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Read More

Card Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Read More
Colors
#1a1a1b17.391.21
#2c2c2f13.921.51
#40404410.322.03
#55555a7.412.83
#6b6b725.293.97
#81828a3.825.49
#999aa22.807.50
#b1b2b82.119.93
#cbcbcf1.6212.98
#e5e5e71.2616.69
#16182b17.511.20
#202a5313.841.52
#283c7d10.332.03
#2d50ab7.382.85
#2e64db5.303.96
#4b7afc3.835.49
#7e93fd2.817.48
#a3adfe2.119.97
#c4c7ff1.6212.96
#e2e3ff1.2616.67
#26112d17.491.20
#46165713.881.51
#68158510.322.03
#8c0cb67.392.84
#a631cf5.303.96
#b85ad83.825.49
#c87de02.817.47
#d89ee82.119.98
#e6bef01.6212.99
#f3def81.2616.61
#27122a17.411.21
#47184f13.891.51
#6a1b7710.312.04
#8f1aa27.402.84
#b611d05.283.98
#c64fd93.805.52
#d476e12.817.48
#e199e92.119.93
#ecbcf11.6113.03
#f6ddf81.2616.62
#2b131217.431.20
#4f1c1d13.851.52
#76232910.282.04
#9f29357.392.84
#ca2e415.283.98
#e64b563.815.51
#f174752.807.50
#f998962.119.96
#febbb81.6113.01
#ffdddb1.2616.62
#1e190b17.511.20
#332c1213.911.51
#4b401510.282.04
#6355187.392.84
#7d6b195.263.99
#9782193.805.52
#b299182.817.46
#ceb1152.129.92
#ebca0f1.6212.99
#fce4971.2616.68
#182c2a14.661.43
#1e3f3d11.451.83
#2453518.642.43
#2969656.363.30
#2e7f7a4.744.43
#3295903.605.84
#35ada72.737.69
#38c5be2.129.90
#3bddd51.6812.49
#94eee71.3415.64
#212e1714.311.47
#2e421e10.971.91
#3a57248.182.57
#476d2b6.023.49
#5584324.444.73
#639c393.316.34
#71b4402.538.30
#7fcd461.9610.72
#8ee64d1.5513.58
#bbf98a1.2317.03
Type scale
Headline
Subheadline
Font Size 1
Font Size 2
Font Size 3
Font Size 4
Font Size 5
Font Size 6
Font Size 7
Font Family
'Gill Sans MT', 'Gill Sans', sans-serif
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%^&*()_+=
georgia, serif
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%^&*()_+=
consolas, monospace
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%^&*()_+=
Line heights
Solid
Lorem ipsum dolor sit amet, consetetur sadipscing elitr
Title
Lorem ipsum dolor sit amet, consetetur sadipscing elitr
Copy
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Spacing
Shadows
Border Radius

Tachyons Custom Theme

Colors

Font Family

Type Scale
6rem
5rem
3rem
2.25rem
1.5rem
1.25rem
1rem
0.875rem
0.75rem

Line Height
1
1.25
1.5

Spacing
0.25rem
0.5rem
1rem
2rem
4rem
8rem
16rem

Border Radius
rem
rem
rem
rem

Box Shadow

Css Variables

For use with Tachyons Custom. Copy and paste the above vars into src/_variables.css.

Generator Config

For use with the Tachyons Generator. Save the above as config.json and run the command below.

curl -X POST -H "Content-Type: application/json" -d @config.json https://tachyons.pub/api