Colors
Light Mode
Dark Mode
--primary
Value Here
Light Mode
Dark Mode
--secondary
Value Here
Light Mode
Dark Mode
--tertiary
Value Here
Light Mode
Dark Mode
--soft-almond
Value Here
Light Mode
Dark Mode
--feather-gray
Value Here
Light Mode
Dark Mode
--cloud-mist
Value Here
Light Mode
Dark Mode
--alabaster
Value Here
Light Mode
Dark Mode
--ghost-white
Value Here
Light Mode
Dark Mode
--ice-mist
Value Here
Light Mode
Dark Mode
--sleet
Value Here
Light Mode
Dark Mode
--cream
Value Here
Light Mode
Dark Mode
--Ivory
Value Here
Light Mode
Dark Mode
--haze
Value Here
Light Mode
Dark Mode
--snow
Value Here
Light Mode
Dark Mode
--obsidian
Value Here
Light Mode
Dark Mode
--lava-black
Value Here
Light Mode
Dark Mode
--oil-black
Value Here
Light Mode
Dark Mode
--midnight-blue
Value Here
Light Mode
Dark Mode
--oil-slick
Value Here
Light Mode
Dark Mode
--smoky-black
Value Here
Light Mode
Dark Mode
--arsenic
Value Here
Light Mode
Dark Mode
--oxford-blue
Value Here
Light Mode
Dark Mode
--eerie-black
Value Here
Light Mode
Dark Mode
--gunmetal
Value Here
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.
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.
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.
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.
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.
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.
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.
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.
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
.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.
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