Style Guide
v1.0.0
Button Components
Check the components for the default & hover values in both light & dark mode.
Dark Buttons
Light Buttons
Typography
Open the Text Styles to view all typography details, including line heights, font families, font weights, and more.
Display
Heading Display
H1
Heading H1
H2
Heading H2
H3
Heading H3
H4
Heading H4
H5
Heading H5
H6
Heading H6
Text Large
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare
Text Main
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare
Text Small
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare
Colors
Check out Colors for all the color theme values.
light
dark
yellow
Theme Light
Heading
Lorem ipsum dolor sit amet consectetur. Feugiat bibendum ut auctor pretium donec euismod turpis.
Theme Dark
Heading
Lorem ipsum dolor sit amet consectetur. Feugiat bibendum ut auctor pretium donec euismod turpis.
Theme Brand
Heading
Lorem ipsum dolor sit amet consectetur. Feugiat bibendum ut auctor pretium donec euismod turpis.
Global Styles
Check out the global spacing styles for our content.
Padding vertical Small 80px
Padding vertical Main 112px
Padding vertical Large 160px
Radius
Small 4px
Main 8px
Round
Border width
Main
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 40 41" xmlns="http://www.w3.org/2000/svg"><path d="M 19 36.674 L 19 35.349 C 9.971 35.349 2.651 28.029 2.651 19 L 1.326 19 L 0 19 C 0 29.493 8.507 38 19 38 Z M 36.674 19 L 35.349 19 C 35.349 28.029 28.029 35.349 19 35.349 L 19 36.674 L 19 38 C 29.493 38 38 29.493 38 19 Z M 19 1.326 L 19 2.651 C 28.029 2.651 35.349 9.971 35.349 19 L 36.674 19 L 38 19 C 38 8.507 29.493 0 19 0 Z M 19 1.326 L 19 0 C 8.507 0 0 8.507 0 19 L 1.326 19 L 2.651 19 C 2.651 9.971 9.971 2.651 19 2.651 Z" fill="rgb(31, 29, 30)" height="37.99998474121094px" id="WTSmwJxrK" transform="translate(1.5 1.151)" width="38px"/><g d="M 0 16 L 0 0 L 16 0 L 16 16 Z M 15.954 4.703 C 15.94 4.037 15.814 3.38 15.583 2.76 C 15.166 1.686 14.317 0.834 13.24 0.42 C 12.62 0.189 11.963 0.063 11.297 0.049 C 10.446 0.009 10.171 0 8 0 C 5.829 0 5.557 0.009 4.703 0.049 C 4.04 0.06 3.383 0.186 2.76 0.42 C 1.686 0.834 0.837 1.686 0.42 2.76 C 0.189 3.383 0.063 4.04 0.049 4.703 C 0.011 5.554 0 5.829 0 8 C 0 10.171 0.011 10.446 0.049 11.297 C 0.063 11.963 0.189 12.62 0.42 13.24 C 0.837 14.314 1.686 15.166 2.76 15.58 C 3.383 15.814 4.04 15.94 4.703 15.951 C 5.557 15.991 5.829 16 8 16 C 10.171 16 10.446 15.991 11.3 15.951 C 11.963 15.94 12.62 15.814 13.243 15.58 C 14.317 15.166 15.166 14.314 15.583 13.24 C 15.814 12.62 15.94 11.963 15.954 11.297 C 15.991 10.446 16 10.171 16 8 C 16 5.829 15.991 5.554 15.954 4.703 Z M 8 12.109 C 5.731 12.109 3.894 10.269 3.894 8 C 3.894 5.731 5.731 3.891 8 3.891 C 9.134 3.891 10.16 4.352 10.906 5.094 C 11.649 5.84 12.109 6.866 12.109 8 C 12.109 10.269 10.269 12.109 8 12.109 Z M 12.271 4.689 C 11.74 4.689 11.311 4.26 11.311 3.729 C 11.311 3.197 11.74 2.769 12.271 2.769 C 12.803 2.769 13.231 3.2 13.231 3.729 C 13.231 4.257 12.803 4.689 12.271 4.689 Z M 10.668 8 C 10.668 9.472 9.474 10.666 8.003 10.666 L 8 10.666 C 6.528 10.666 5.334 9.472 5.334 8 C 5.334 6.529 6.528 5.334 8 5.334 C 9.471 5.334 10.668 6.529 10.668 8 Z" fill="transparent" height="16px" id="n0f2emJEm" transform="translate(12 12.349)" width="16px"><path d="M 0 16 L 0 0 L 16 0 L 16 16 Z" fill="transparent" height="16px" id="wUnzrsHuE" width="16px"/><path d="M 15.954 4.703 C 15.94 4.037 15.814 3.38 15.583 2.76 C 15.166 1.686 14.317 0.834 13.24 0.42 C 12.62 0.189 11.963 0.063 11.297 0.049 C 10.446 0.009 10.171 0 8 0 C 5.829 0 5.557 0.009 4.703 0.049 C 4.04 0.06 3.383 0.186 2.76 0.42 C 1.686 0.834 0.837 1.686 0.42 2.76 C 0.189 3.383 0.063 4.04 0.049 4.703 C 0.011 5.554 0 5.829 0 8 C 0 10.171 0.011 10.446 0.049 11.297 C 0.063 11.963 0.189 12.62 0.42 13.24 C 0.837 14.314 1.686 15.166 2.76 15.58 C 3.383 15.814 4.04 15.94 4.703 15.951 C 5.557 15.991 5.829 16 8 16 C 10.171 16 10.446 15.991 11.3 15.951 C 11.963 15.94 12.62 15.814 13.243 15.58 C 14.317 15.166 15.166 14.314 15.583 13.24 C 15.814 12.62 15.94 11.963 15.954 11.297 C 15.991 10.446 16 10.171 16 8 C 16 5.829 15.991 5.554 15.954 4.703 Z M 8 12.109 C 5.731 12.109 3.894 10.269 3.894 8 C 3.894 5.731 5.731 3.891 8 3.891 C 9.134 3.891 10.16 4.352 10.906 5.094 C 11.649 5.84 12.109 6.866 12.109 8 C 12.109 10.269 10.269 12.109 8 12.109 Z M 12.271 4.689 C 11.74 4.689 11.311 4.26 11.311 3.729 C 11.311 3.197 11.74 2.769 12.271 2.769 C 12.803 2.769 13.231 3.2 13.231 3.729 C 13.231 4.257 12.803 4.689 12.271 4.689 Z" fill="rgb(31, 29, 30)" height="16px" id="gE64Aejfb" width="16px"/><path d="M 5.334 2.666 C 5.334 4.137 4.14 5.331 2.669 5.331 L 2.666 5.331 C 1.194 5.331 0 4.137 0 2.666 C 0 1.194 1.194 0 2.666 0 C 4.137 0 5.334 1.194 5.334 2.666 Z" fill="rgb(31, 29, 30)" height="5.331400000000002px" id="KT1MnpC_F" transform="translate(5.334 5.334)" width="5.3343000000000025px"/></g></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><path d="M 19 36.674 L 19 35.349 C 9.971 35.349 2.651 28.029 2.651 19 L 1.326 19 L 0 19 C 0 29.493 8.507 38 19 38 Z M 36.674 19 L 35.349 19 C 35.349 28.029 28.029 35.349 19 35.349 L 19 36.674 L 19 38 C 29.493 38 38 29.493 38 19 Z M 19 1.326 L 19 2.651 C 28.029 2.651 35.349 9.971 35.349 19 L 36.674 19 L 38 19 C 38 8.507 29.493 0 19 0 Z M 19 1.326 L 19 0 C 8.507 0 0 8.507 0 19 L 1.326 19 L 2.651 19 C 2.651 9.971 9.971 2.651 19 2.651 Z" fill="rgb(31, 29, 30)" height="37.99998664855957px" id="IhKgiz0q2" transform="translate(1.5 1.151)" width="38px"/><path d="M 15.833 2.433 C 15.833 2.433 15.667 1.333 15.2 0.833 C 14.6 0.2 13.9 0.2 13.6 0.167 C 11.367 0 8 0 8 0 C 8 0 4.633 0 2.4 0.167 C 2.1 0.2 1.4 0.2 0.8 0.833 C 0.333 1.333 0.167 2.433 0.167 2.433 C 0.167 2.433 0 3.733 0 5.033 L 0 6.233 C 0 7.533 0.167 8.833 0.167 8.833 C 0.167 8.833 0.333 9.933 0.8 10.433 C 1.4 11.067 2.2 11.067 2.567 11.133 C 3.833 11.267 8 11.3 8 11.3 C 8 11.3 11.367 11.3 13.6 11.133 C 13.9 11.1 14.6 11.1 15.2 10.467 C 15.667 9.967 15.833 8.867 15.833 8.867 C 15.833 8.867 16 7.567 16 6.267 L 16 5.067 C 16 3.733 15.833 2.433 15.833 2.433 Z M 6.333 7.7 L 6.333 3.2 L 10.667 5.467 Z" fill="rgb(31, 29, 30)" height="11.299999999999999px" id="bwQ5MGNhW" transform="translate(12 14.716)" width="16px"/></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 40 41" xmlns="http://www.w3.org/2000/svg"><path d="M 19 36.674 L 19 35.349 C 9.971 35.349 2.651 28.029 2.651 19 L 1.326 19 L 0 19 C 0 29.493 8.507 38 19 38 Z M 36.674 19 L 35.349 19 C 35.349 28.029 28.029 35.349 19 35.349 L 19 36.674 L 19 38 C 29.493 38 38 29.493 38 19 Z M 19 1.326 L 19 2.651 C 28.029 2.651 35.349 9.971 35.349 19 L 36.674 19 L 38 19 C 38 8.507 29.493 0 19 0 Z M 19 1.326 L 19 0 C 8.507 0 0 8.507 0 19 L 1.326 19 L 2.651 19 C 2.651 9.971 9.971 2.651 19 2.651 Z" fill="rgb(31, 29, 30)" height="37.99998474121094px" id="WbUQvMLKU" transform="translate(1.5 1.849)" width="38px"/><g d="M 0 16 L 0 0 L 16 0 L 16 16 Z M 9.524 6.759 L 15.481 0 L 14.07 0 L 8.895 5.867 L 4.765 0 L 0 0 L 6.247 8.873 L 0 15.96 L 1.411 15.96 L 6.872 9.763 L 11.235 15.96 L 16 15.96 M 1.921 1.039 L 4.089 1.039 L 14.069 14.972 L 11.9 14.972" fill="transparent" height="16px" id="va9FaUG_c" transform="translate(12 12.349)" width="16px"><path d="M 0 16 L 0 0 L 16 0 L 16 16 Z" fill="transparent" height="16px" id="vDSCuvk_Z" width="16px"/><path d="M 9.524 6.759 L 15.481 0 L 14.07 0 L 8.895 5.867 L 4.765 0 L 0 0 L 6.247 8.873 L 0 15.96 L 1.411 15.96 L 6.872 9.763 L 11.235 15.96 L 16 15.96 M 1.921 1.039 L 4.089 1.039 L 14.069 14.972 L 11.9 14.972" fill="rgb(31, 29, 30)" height="15.9602px" id="mPahwI4J7" width="16px"/></g></svg>)