Hello, Crimson!
Explore our design system featuring comprehensive UI components. Below you'll find our typography system with Bricolage, ITC Garamond, and Lato fonts, button variants with multiple themes and colors, and standardized text styles for consistent visual hierarchy.
Container Usage
This is our container component that maintains a max-width of 1440px and applies responsive padding based on screen size. On mobile devices, it has 25px padding, on medium and large screens it increases to 30px padding, from XL to 2XL screens it expands to 75px padding, and at 3XL screen sizes the padding is removed (0px).
Padding: 25px
Padding: 30px
Padding: 75px
Max Width: 1440px
Padding: 0px
Max Width: 1440px
Typography
Headings - h1 to h5
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Subheadings (sh1 to sh5)
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Pre-heading (ph1 to ph2)
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Quote (q1 to q6)
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Body (n1 to n2)
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Body (a1 to a2)
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Body (b1 to b4)
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Caption (c1)
The quick brown fox jumps over the lazy dog
Button (button)
Text (t1 to t2)
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Handwritten (hw1 to hw5)
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Mobile Headings (mh1 to mb1)
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog