Welcome to Our Style Guide

Discover our design system, components, and guidelines that help us create beautiful, consistent experiences across all our products.

Explore Components

Style Guide

Color
#090c0f
#202031
#5a6068
#525252
#5d5ad6
Typography

Heading 1-This is an example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

PARAGRAPH - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque amet, urna fames tincidunt. Risus scelerisque purus mattis tellus adipiscing eget integer nunc sagittis. Maecenas adipiscing libero, consequat et amet duis et commodo, scelerisque. Proin id enim et natoque mattis pharetra fringilla pharetra. Ultrices pellentesque ultricies diam vitae gravida quis ultricies. Commodo ut ultrices dignissim sem vel aliquam accumsan molestie dis. Consequat ut risus in id mauris vehicula at.

Heading 2-This is an example

PARAGRAPH - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque amet, urna fames tincidunt. Risus scelerisque purus mattis tellus adipiscing eget integer nunc sagittis. Maecenas adipiscing libero, consequat et amet duis et commodo, scelerisque. Proin id enim et natoque mattis pharetra fringilla pharetra. Ultrices pellentesque ultricies diam vitae gravida quis ultricies. Commodo ut ultrices dignissim sem vel aliquam accumsan molestie dis. Consequat ut risus in id mauris vehicula at.

Heading 3-This is an example

PARAGRAPH - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque amet, urna fames tincidunt. Risus scelerisque purus mattis tellus adipiscing eget integer nunc sagittis. Maecenas adipiscing libero, consequat et amet duis et commodo, scelerisque. Proin id enim et natoque mattis pharetra fringilla pharetra. Ultrices pellentesque ultricies diam vitae gravida quis ultricies. Commodo ut ultrices dignissim sem vel aliquam accumsan molestie dis. Consequat ut risus in id mauris vehicula at.

Heading 4-This is an example

PARAGRAPH - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque amet, urna fames tincidunt. Risus scelerisque purus mattis tellus adipiscing eget integer nunc sagittis. Maecenas adipiscing libero, consequat et amet duis et commodo, scelerisque. Proin id enim et natoque mattis pharetra fringilla pharetra. Ultrices pellentesque ultricies diam vitae gravida quis ultricies. Commodo ut ultrices dignissim sem vel aliquam accumsan molestie dis. Consequat ut risus in id mauris vehicula at.

Heading 5-This is an example

PARAGRAPH - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque amet, urna fames tincidunt. Risus scelerisque purus mattis tellus adipiscing eget integer nunc sagittis. Maecenas adipiscing libero, consequat et amet duis et commodo, scelerisque. Proin id enim et natoque mattis pharetra fringilla pharetra. Ultrices pellentesque ultricies diam vitae gravida quis ultricies. Commodo ut ultrices dignissim sem vel aliquam accumsan molestie dis. Consequat ut risus in id mauris vehicula at.

Heading 6-This is an example

PARAGRAPH - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque amet, urna fames tincidunt. Risus scelerisque purus mattis tellus adipiscing eget integer nunc sagittis. Maecenas adipiscing libero, consequat et amet duis et commodo, scelerisque. Proin id enim et natoque mattis pharetra fringilla pharetra. Ultrices pellentesque ultricies diam vitae gravida quis ultricies. Commodo ut ultrices dignissim sem vel aliquam accumsan molestie dis. Consequat ut risus in id mauris vehicula at.

List style
  • This is some text inside of a div block.
  • This is some text inside of a div block.
  • This is some text inside of a div block.
  1. This is some text inside of a div block.
  2. This is some text inside of a div block.
  3. This is some text inside of a div block.

Typography

The font family used in Regix is Urbanist and Manrope, an open-source font from Google Fonts

Design System Showcase

Explore our comprehensive design system components, patterns, and guidelines that help us create beautiful, consistent experiences across all our digital products.

This is some text inside of a div block.

Button Showcase

Primary, secondary, and tertiary button styles with hover states, focus rings, and accessibility features built right in.

This is some text inside of a div block.

Heading Hierarchy

A complete type scale with consistent spacing, weights, and sizes that maintain readability across all screen sizes and use cases.

This is some text inside of a div block.

Brand Palette

Carefully curated colors with semantic meanings, accessibility considerations, and dark mode variants for consistent branding.

This is some text inside of a div block.

Grid System

Flexible 12-column grid with responsive breakpoints, consistent gutters, and container widths that adapt to any screen size.

This is some text inside of a div block.

Design Tokens

Systematic spacing scale with 8px base unit that ensures visual rhythm and consistent white space throughout all components.

This is some text inside of a div block.

Inclusive Design

WCAG 2.1 AA compliant design patterns with proper contrast ratios, keyboard navigation, and screen reader optimizations built in.