Colors
Typography
Header Font: Something

Header 1
Mauris hendrerit, tellus in tristique pharetra.

Header 2
Mauris hendrerit, tellus in tristique pharetra.

Header 3
Mauris hendrerit, tellus in tristique pharetra, magna velit pulvinar odio

Header 4
Mauris hendrerit, tellus in tristique pharetra, magna velit pulvinar odio

Header 5
Mauris hendrerit, tellus in tristique pharetra, magna velit pulvinar odio
Header 6
Mauris hendrerit, tellus in tristique pharetra, magna velit pulvinar odio
This is a hyperlink
Body Font: Something
.text-4xl
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tempus mauris ex, et aliquet lectus finibus et. Nulla justo lorem, mattis vitae turpis at, consectetur efficitur lacus.
.text-3xl
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tempus mauris ex, et aliquet lectus finibus et. Nulla justo lorem, mattis vitae turpis at, consectetur efficitur lacus.
.text-2xl
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tempus mauris ex, et aliquet lectus finibus et. Nulla justo lorem, mattis vitae turpis at, consectetur efficitur lacus.
.text-xl
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tempus mauris ex, et aliquet lectus finibus et. Nulla justo lorem, mattis vitae turpis at, consectetur efficitur lacus.
.text-l
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tempus mauris ex, et aliquet lectus finibus et. Nulla justo lorem, mattis vitae turpis at, consectetur efficitur lacus. Etiam tincidunt nunc in dolor maximus, non tempus odio dignissim. Curabitur congue, elit eu consectetur posuere, purus est rutrum erat, quis dignissim sem ex quis magna. Praesent vel feugiat tortor. In ultrices, leo at scelerisque pulvinar, mauris lectus vehicula massa, vel tempor quam ex ut nisi. Sed massa nisi, placerat vitae metus quis, fringilla tempus ligula. Integer pulvinar gravida porta. Curabitur at pharetra magna.
.text-m
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tempus mauris ex, et aliquet lectus finibus et. Nulla justo lorem, mattis vitae turpis at, consectetur efficitur lacus. Etiam tincidunt nunc in dolor maximus, non tempus odio dignissim. Curabitur congue, elit eu consectetur posuere, purus est rutrum erat, quis dignissim sem ex quis magna. Praesent vel feugiat tortor. In ultrices, leo at scelerisque pulvinar, mauris lectus vehicula massa, vel tempor quam ex ut nisi. Sed massa nisi, placerat vitae metus quis, fringilla tempus ligula. Integer pulvinar gravida porta. Curabitur at pharetra magna.
.text-s
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tempus mauris ex, et aliquet lectus finibus et. Nulla justo lorem, mattis vitae turpis at, consectetur efficitur lacus. Etiam tincidunt nunc in dolor maximus, non tempus odio dignissim. Curabitur congue, elit eu consectetur posuere, purus est rutrum erat, quis dignissim sem ex quis magna. Praesent vel feugiat tortor. In ultrices, leo at scelerisque pulvinar, mauris lectus vehicula massa, vel tempor quam ex ut nisi. Sed massa nisi, placerat vitae metus quis, fringilla tempus ligula. Integer pulvinar gravida porta. Curabitur at pharetra magna.
.text-xs
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tempus mauris ex, et aliquet lectus finibus et. Nulla justo lorem, mattis vitae turpis at, consectetur efficitur lacus. Etiam tincidunt nunc in dolor maximus, non tempus odio dignissim. Curabitur congue, elit eu consectetur posuere, purus est rutrum erat, quis dignissim sem ex quis magna. Praesent vel feugiat tortor. In ultrices, leo at scelerisque pulvinar, mauris lectus vehicula massa, vel tempor quam ex ut nisi. Sed massa nisi, placerat vitae metus quis, fringilla tempus ligula. Integer pulvinar gravida porta. Curabitur at pharetra magna.
.font-100 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.font-200 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.font-300 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.font-400 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.font-500 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.font-600 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.font-700 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.font-800 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.font-900 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Elements
Buttons
.btn
.btn
.btn
.btn
Card
.card
Card Heading Here
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Main ButtonNext Button
Icons
.icon
Sizing
.space-4xl
.space-3xl
.space-2xl
.space-xl
.space-l
.space-m
.space-s
.space-xs
.space-2xs
.space-3xs
.space-4xs
.padding-4xl
.padding-3xl
.padding-2xl
.padding-xl
.padding-l
.padding-m
.padding-s
.padding-xs
.padding-2xs
.padding-3xs
.padding-4xs