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
#191a1b17.431.20
#2b2c3013.951.51
#3e404710.352.03
#52565e7.362.85
#676c775.273.99
#7e838d3.815.52
#979aa32.817.47
#b0b2b92.129.91
#cacbd01.6212.96
#e4e5e71.2616.66
#151a2117.481.20
#212d3c13.951.51
#2d425a10.302.04
#3958797.382.85
#456f9a5.263.99
#5186bc3.835.49
#629edc2.827.44
#8fb6e52.109.99
#b6cdee1.6212.96
#dbe6f71.2616.67
#25132b17.401.21
#431b5113.871.51
#64217b10.272.05
#8625a77.402.84
#aa28d65.273.98
#c83ff73.815.51
#d76efa2.807.50
#e494fc2.119.94
#efb9fd1.6113.03
#f8dcfe1.2616.66
#28122417.471.20
#4a194413.871.51
#6e1e6510.312.04
#9520897.382.85
#bd1eaf5.293.97
#e815d63.815.51
#f35ee12.807.50
#f98ce92.119.96
#feb4f01.6213.00
#ffdaf81.2616.64
#2c121217.471.20
#51191d13.941.51
#7a1e2810.272.04
#a420337.412.83
#c92f435.293.97
#d7595f3.835.48
#e47c7d2.817.48
#ee9d9c2.119.94
#f6bebc1.6113.01
#fcdedd1.2616.63
#21180b17.501.20
#3a291113.951.51
#563c1410.232.05
#724f167.382.85
#9063185.273.98
#af78183.805.52
#cf8d162.817.47
#e9a63d2.109.99
#f6c37f1.6113.03
#fee0be1.2616.62
#162d2a14.551.44
#1b403c11.381.85
#1f55508.492.47
#226a646.343.31
#2480784.744.43
#24978e3.565.89
#22afa42.717.74
#1ec7ba2.119.93
#16e0d11.6612.62
#84f1e61.3415.71
#1d2c1514.751.42
#27411b11.301.86
#3257228.332.52
#3c6d276.163.41
#47852d4.514.66
#529d333.376.23
#5db6392.568.22
#68cf3e1.9810.58
#91e46c1.5513.52
#ccf2b61.2416.94
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
-apple-system, BlinkMacSystemFont, -system-ui, 'avenir next', avenir, helvetica, 'helvetica neue', ubuntu, roboto, noto, 'segoe ui', arial, sans-serif
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%^&*()_+=
georgia, serif
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%^&*()_+=
"SFMono-Regular", 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
9rem
7rem
5rem
4rem
3rem
2rem
1.5rem
1rem
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 Variabels

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