Logo
menu

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Learn more

Dev UI - Basic Components: This page demonstrates the basic UI components used in this project. Use it as a reference during development.

Headings

Heading 1: Lorem ipsum

Heading 2: Lorem ipsum

Heading 3: Lorem ipsum

Heading 4: Lorem ipsum

Heading 5: Lorem ipsum
Heading 6: Lorem ipsum

Paragraphs & headings in blocks

Lorem Ipsum Dolor

Sit Amet Consectetur

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Adipiscing Elit

Vitae Suscipit

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Molestie Consequat

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Laboris Nisi Ut

Exercitation Ullamco

Laboris Nisi

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Laboris Dolor

Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra.

Font sizes (all steps)

Font size 9: Lorem ipsum dolor sit amet

Font size 8: Lorem ipsum dolor sit amet

Font size 7: Lorem ipsum dolor sit amet

Font size 6: Lorem ipsum dolor sit amet

Font size 5: Lorem ipsum dolor sit amet

Font size 4: Lorem ipsum dolor sit amet

Font size 3: Lorem ipsum dolor sit amet

Font size 2: Lorem ipsum dolor sit amet

Font size 1: Lorem ipsum dolor sit amet

Font size 0: Lorem ipsum dolor sit amet

Font size -1: Lorem ipsum dolor sit amet

Font size -2: Lorem ipsum dolor sit amet

Paragraphs

This is a standard paragraph of text. It should have appropriate margins and line height for readability.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi magni aspernatur fugiat dolor consectetur reprehenderit adipisci eum quas fugit distinctio ipsam, nemo esse, itaque error alias nesciunt. Possimus, impedit itaque.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempora incidunt aperiam, atque in veniam voluptatum non similique nam perferendis aliquid ut ad fugit. Illo cupiditate quod, quasi ullam nostrum similique?

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolorem obcaecati possimus inventore suscipit molestiae. Quisquam rerum, dignissimos, odio, voluptatem maiores aspernatur labore qui ratione nihil aliquam pariatur! Soluta, animi totam?

Buttons

Primary Button Secondary Button Dark Button Outlined Primary Button Outlined Secondary Button Dark Button

Primary Button Link Dark Button Link Secondary Button Link Primary Button Link Secondary Button Link

Primary Button Secondary Button Outlined Primary Button Outlined Secondary Button

Notifications

This is a neutral notification.
This is a success notification. check it out!
This is an error notification. something went wrong!
This is a warning notification. be careful!

Cards

Card title

lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.

Card button

Card title

lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.

Card button

Card title

lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.

Card button

// 50 is the default for #DA4030

$_clr-primary-950: hsla(6, 70%, 97%, 1);
$_clr-primary-900: hsla(6, 70%, 92%, 1);
$_clr-primary-850: hsla(6, 70%, 87%, 1);
$_clr-primary-800: hsla(6, 70%, 82%, 1);
$_clr-primary-750: hsla(6, 70%, 77%, 1);
$_clr-primary-700: hsla(6, 70%, 72%, 1);
$_clr-primary-650: hsla(6, 70%, 67%, 1);
$_clr-primary-600: hsla(6, 70%, 62%, 1);
$_clr-primary-550: hsla(6, 70%, 57%, 1);
$_clr-primary-500: hsla(6, 70%, 52%, 1);
$_clr-primary-450: hsla(6, 70%, 47%, 1);
$_clr-primary-400: hsla(6, 70%, 42%, 1);
$_clr-primary-350: hsla(6, 70%, 37%, 1);
$_clr-primary-300: hsla(6, 70%, 32%, 1);
$_clr-primary-250: hsla(6, 70%, 27%, 1);
$_clr-primary-200: hsla(6, 70%, 22%, 1);
$_clr-primary-150: hsla(6, 70%, 17%, 1);
$_clr-primary-100: hsla(6, 70%, 12%, 1);
$_clr-primary-50: hsla(6, 70%, 7%, 1);

// 50 is the default for #DA4030

$_clr-accent-1-950: hsla(6, 70%, 97%, 1);
$_clr-accent-1-900: hsla(6, 70%, 92%, 1);
$_clr-accent-1-850: hsla(6, 70%, 87%, 1);
$_clr-accent-1-800: hsla(6, 70%, 82%, 1);
$_clr-accent-1-750: hsla(6, 70%, 77%, 1);
$_clr-accent-1-700: hsla(6, 70%, 72%, 1);
$_clr-accent-1-650: hsla(6, 70%, 67%, 1);
$_clr-accent-1-600: hsla(6, 70%, 62%, 1);
$_clr-accent-1-550: hsla(6, 70%, 57%, 1);
$_clr-accent-1-500: hsla(6, 70%, 52%, 1);
$_clr-accent-1-450: hsla(6, 70%, 47%, 1);
$_clr-accent-1-400: hsla(6, 70%, 42%, 1);
$_clr-accent-1-350: hsla(6, 70%, 37%, 1);
$_clr-accent-1-300: hsla(6, 70%, 32%, 1);
$_clr-accent-1-250: hsla(6, 70%, 27%, 1);
$_clr-accent-1-200: hsla(6, 70%, 22%, 1);
$_clr-accent-1-150: hsla(6, 70%, 17%, 1);
$_clr-accent-1-100: hsla(6, 70%, 12%, 1);
$_clr-accent-1-50: hsla(6, 70%, 7%, 1);

// 50 is the default for #DA4030

$_clr-accent-2-950: hsla(6, 70%, 97%, 1);
$_clr-accent-2-900: hsla(6, 70%, 92%, 1);
$_clr-accent-2-850: hsla(6, 70%, 87%, 1);
$_clr-accent-2-800: hsla(6, 70%, 82%, 1);
$_clr-accent-2-750: hsla(6, 70%, 77%, 1);
$_clr-accent-2-700: hsla(6, 70%, 72%, 1);
$_clr-accent-2-650: hsla(6, 70%, 67%, 1);
$_clr-accent-2-600: hsla(6, 70%, 62%, 1);
$_clr-accent-2-550: hsla(6, 70%, 57%, 1);
$_clr-accent-2-500: hsla(6, 70%, 52%, 1);
$_clr-accent-2-450: hsla(6, 70%, 47%, 1);
$_clr-accent-2-400: hsla(6, 70%, 42%, 1);
$_clr-accent-2-350: hsla(6, 70%, 37%, 1);
$_clr-accent-2-300: hsla(6, 70%, 32%, 1);
$_clr-accent-2-250: hsla(6, 70%, 27%, 1);
$_clr-accent-2-200: hsla(6, 70%, 22%, 1);
$_clr-accent-2-150: hsla(6, 70%, 17%, 1);
$_clr-accent-2-100: hsla(6, 70%, 12%, 1);
$_clr-accent-2-50: hsla(6, 70%, 7%, 1);

// 50 is the default for #DA4030

$_clr-accent-3-950: hsla(6, 70%, 97%, 1);
$_clr-accent-3-900: hsla(6, 70%, 92%, 1);
$_clr-accent-3-850: hsla(6, 70%, 87%, 1);
$_clr-accent-3-800: hsla(6, 70%, 82%, 1);
$_clr-accent-3-750: hsla(6, 70%, 77%, 1);
$_clr-accent-3-700: hsla(6, 70%, 72%, 1);
$_clr-accent-3-650: hsla(6, 70%, 67%, 1);
$_clr-accent-3-600: hsla(6, 70%, 62%, 1);
$_clr-accent-3-550: hsla(6, 70%, 57%, 1);
$_clr-accent-3-500: hsla(6, 70%, 52%, 1);
$_clr-accent-3-450: hsla(6, 70%, 47%, 1);
$_clr-accent-3-400: hsla(6, 70%, 42%, 1);
$_clr-accent-3-350: hsla(6, 70%, 37%, 1);
$_clr-accent-3-300: hsla(6, 70%, 32%, 1);
$_clr-accent-3-250: hsla(6, 70%, 27%, 1);
$_clr-accent-3-200: hsla(6, 70%, 22%, 1);
$_clr-accent-3-150: hsla(6, 70%, 17%, 1);
$_clr-accent-3-100: hsla(6, 70%, 12%, 1);
$_clr-accent-3-50: hsla(6, 70%, 7%, 1);

// 50 is the default for #7E7E7E

$_clr-neutral-950: hsla(0, 0%, 94%, 1);
$_clr-neutral-900: hsla(0, 0%, 89%, 1);
$_clr-neutral-850: hsla(0, 0%, 84%, 1);
$_clr-neutral-800: hsla(0, 0%, 79%, 1);
$_clr-neutral-750: hsla(0, 0%, 74%, 1);
$_clr-neutral-700: hsla(0, 0%, 69%, 1);
$_clr-neutral-650: hsla(0, 0%, 64%, 1);
$_clr-neutral-600: hsla(0, 0%, 59%, 1);
$_clr-neutral-550: hsla(0, 0%, 54%, 1);
$_clr-neutral-500: hsla(0, 0%, 49%, 1);
$_clr-neutral-450: hsla(0, 0%, 44%, 1);
$_clr-neutral-400: hsla(0, 0%, 39%, 1);
$_clr-neutral-350: hsla(0, 0%, 34%, 1);
$_clr-neutral-300: hsla(0, 0%, 29%, 1);
$_clr-neutral-250: hsla(0, 0%, 24%, 1);
$_clr-neutral-200: hsla(0, 0%, 19%, 1);
$_clr-neutral-150: hsla(0, 0%, 14%, 1);
$_clr-neutral-100: hsla(0, 0%, 9%, 1);
$_clr-neutral-50: hsla(0, 0%, 4%, 1);

// 50 is the default for #DA4030

$_clr-desaturated-950: hsla(6, 70%, 97%, 1);
$_clr-desaturated-900: hsla(6, 70%, 92%, 1);
$_clr-desaturated-850: hsla(6, 70%, 87%, 1);
$_clr-desaturated-800: hsla(6, 70%, 82%, 1);
$_clr-desaturated-750: hsla(6, 70%, 77%, 1);
$_clr-desaturated-700: hsla(6, 70%, 72%, 1);
$_clr-desaturated-650: hsla(6, 70%, 67%, 1);
$_clr-desaturated-600: hsla(6, 70%, 62%, 1);
$_clr-desaturated-550: hsla(6, 70%, 57%, 1);
$_clr-desaturated-500: hsla(6, 70%, 52%, 1);
$_clr-desaturated-450: hsla(6, 70%, 47%, 1);
$_clr-desaturated-400: hsla(6, 70%, 42%, 1);
$_clr-desaturated-350: hsla(6, 70%, 37%, 1);
$_clr-desaturated-300: hsla(6, 70%, 32%, 1);
$_clr-desaturated-250: hsla(6, 70%, 27%, 1);
$_clr-desaturated-200: hsla(6, 70%, 22%, 1);
$_clr-desaturated-150: hsla(6, 70%, 17%, 1);
$_clr-desaturated-100: hsla(6, 70%, 12%, 1);
$_clr-desaturated-50: hsla(6, 70%, 7%, 1);

$colors: (
 primary: (
  950: $_clr-primary-950,
  900: $_clr-primary-900,
  850: $_clr-primary-850,
  800: $_clr-primary-800,
  750: $_clr-primary-750,
  700: $_clr-primary-700,
  650: $_clr-primary-650,
  600: $_clr-primary-600,
  550: $_clr-primary-550,
  500: $_clr-primary-500,
  450: $_clr-primary-450,
  400: $_clr-primary-400,
  350: $_clr-primary-350,
  300: $_clr-primary-300,
  250: $_clr-primary-250,
  200: $_clr-primary-200,
  150: $_clr-primary-150,
  100: $_clr-primary-100,
  50: $_clr-primary-50,
 ),
 accent-1: (
  950: $_clr-accent-1-950,
  900: $_clr-accent-1-900,
  850: $_clr-accent-1-850,
  800: $_clr-accent-1-800,
  750: $_clr-accent-1-750,
  700: $_clr-accent-1-700,
  650: $_clr-accent-1-650,
  600: $_clr-accent-1-600,
  550: $_clr-accent-1-550,
  500: $_clr-accent-1-500,
  450: $_clr-accent-1-450,
  400: $_clr-accent-1-400,
  350: $_clr-accent-1-350,
  300: $_clr-accent-1-300,
  250: $_clr-accent-1-250,
  200: $_clr-accent-1-200,
  150: $_clr-accent-1-150,
  100: $_clr-accent-1-100,
  50: $_clr-accent-1-50,
 ),
 accent-2: (
  950: $_clr-accent-2-950,
  900: $_clr-accent-2-900,
  850: $_clr-accent-2-850,
  800: $_clr-accent-2-800,
  750: $_clr-accent-2-750,
  700: $_clr-accent-2-700,
  650: $_clr-accent-2-650,
  600: $_clr-accent-2-600,
  550: $_clr-accent-2-550,
  500: $_clr-accent-2-500,
  450: $_clr-accent-2-450,
  400: $_clr-accent-2-400,
  350: $_clr-accent-2-350,
  300: $_clr-accent-2-300,
  250: $_clr-accent-2-250,
  200: $_clr-accent-2-200,
  150: $_clr-accent-2-150,
  100: $_clr-accent-2-100,
  50: $_clr-accent-2-50,
 ),
 accent-3: (
  950: $_clr-accent-3-950,
  900: $_clr-accent-3-900,
  850: $_clr-accent-3-850,
  800: $_clr-accent-3-800,
  750: $_clr-accent-3-750,
  700: $_clr-accent-3-700,
  650: $_clr-accent-3-650,
  600: $_clr-accent-3-600,
  550: $_clr-accent-3-550,
  500: $_clr-accent-3-500,
  450: $_clr-accent-3-450,
  400: $_clr-accent-3-400,
  350: $_clr-accent-3-350,
  300: $_clr-accent-3-300,
  250: $_clr-accent-3-250,
  200: $_clr-accent-3-200,
  150: $_clr-accent-3-150,
  100: $_clr-accent-3-100,
  50: $_clr-accent-3-50,
 ),
 neutral: (
  950: $_clr-neutral-950,
  900: $_clr-neutral-900,
  850: $_clr-neutral-850,
  800: $_clr-neutral-800,
  750: $_clr-neutral-750,
  700: $_clr-neutral-700,
  650: $_clr-neutral-650,
  600: $_clr-neutral-600,
  550: $_clr-neutral-550,
  500: $_clr-neutral-500,
  450: $_clr-neutral-450,
  400: $_clr-neutral-400,
  350: $_clr-neutral-350,
  300: $_clr-neutral-300,
  250: $_clr-neutral-250,
  200: $_clr-neutral-200,
  150: $_clr-neutral-150,
  100: $_clr-neutral-100,
  50: $_clr-neutral-50,
 ),
 desaturated: (
  950: $_clr-desaturated-950,
  900: $_clr-desaturated-900,
  850: $_clr-desaturated-850,
  800: $_clr-desaturated-800,
  750: $_clr-desaturated-750,
  700: $_clr-desaturated-700,
  650: $_clr-desaturated-650,
  600: $_clr-desaturated-600,
  550: $_clr-desaturated-550,
  500: $_clr-desaturated-500,
  450: $_clr-desaturated-450,
  400: $_clr-desaturated-400,
  350: $_clr-desaturated-350,
  300: $_clr-desaturated-300,
  250: $_clr-desaturated-250,
  200: $_clr-desaturated-200,
  150: $_clr-desaturated-150,
  100: $_clr-desaturated-100,
  50: $_clr-desaturated-50,
 ),
);

$color-primary-950: var(--primary-950);
$color-primary-900: var(--primary-900);
$color-primary-850: var(--primary-850);
$color-primary-800: var(--primary-800);
$color-primary-750: var(--primary-750);
$color-primary-700: var(--primary-700);
$color-primary-650: var(--primary-650);
$color-primary-600: var(--primary-600);
$color-primary-550: var(--primary-550);
$color-primary-500: var(--primary-500);
$color-primary-450: var(--primary-450);
$color-primary-400: var(--primary-400);
$color-primary-350: var(--primary-350);
$color-primary-300: var(--primary-300);
$color-primary-250: var(--primary-250);
$color-primary-200: var(--primary-200);
$color-primary-150: var(--primary-150);
$color-primary-100: var(--primary-100);
$color-primary-50: var(--primary-50);

$color-accent-1-950: var(--accent-1-950);
$color-accent-1-900: var(--accent-1-900);
$color-accent-1-850: var(--accent-1-850);
$color-accent-1-800: var(--accent-1-800);
$color-accent-1-750: var(--accent-1-750);
$color-accent-1-700: var(--accent-1-700);
$color-accent-1-650: var(--accent-1-650);
$color-accent-1-600: var(--accent-1-600);
$color-accent-1-550: var(--accent-1-550);
$color-accent-1-500: var(--accent-1-500);
$color-accent-1-450: var(--accent-1-450);
$color-accent-1-400: var(--accent-1-400);
$color-accent-1-350: var(--accent-1-350);
$color-accent-1-300: var(--accent-1-300);
$color-accent-1-250: var(--accent-1-250);
$color-accent-1-200: var(--accent-1-200);
$color-accent-1-150: var(--accent-1-150);
$color-accent-1-100: var(--accent-1-100);
$color-accent-1-50: var(--accent-1-50);

$color-accent-2-950: var(--accent-2-950);
$color-accent-2-900: var(--accent-2-900);
$color-accent-2-850: var(--accent-2-850);
$color-accent-2-800: var(--accent-2-800);
$color-accent-2-750: var(--accent-2-750);
$color-accent-2-700: var(--accent-2-700);
$color-accent-2-650: var(--accent-2-650);
$color-accent-2-600: var(--accent-2-600);
$color-accent-2-550: var(--accent-2-550);
$color-accent-2-500: var(--accent-2-500);
$color-accent-2-450: var(--accent-2-450);
$color-accent-2-400: var(--accent-2-400);
$color-accent-2-350: var(--accent-2-350);
$color-accent-2-300: var(--accent-2-300);
$color-accent-2-250: var(--accent-2-250);
$color-accent-2-200: var(--accent-2-200);
$color-accent-2-150: var(--accent-2-150);
$color-accent-2-100: var(--accent-2-100);
$color-accent-2-50: var(--accent-2-50);

$color-accent-3-950: var(--accent-3-950);
$color-accent-3-900: var(--accent-3-900);
$color-accent-3-850: var(--accent-3-850);
$color-accent-3-800: var(--accent-3-800);
$color-accent-3-750: var(--accent-3-750);
$color-accent-3-700: var(--accent-3-700);
$color-accent-3-650: var(--accent-3-650);
$color-accent-3-600: var(--accent-3-600);
$color-accent-3-550: var(--accent-3-550);
$color-accent-3-500: var(--accent-3-500);
$color-accent-3-450: var(--accent-3-450);
$color-accent-3-400: var(--accent-3-400);
$color-accent-3-350: var(--accent-3-350);
$color-accent-3-300: var(--accent-3-300);
$color-accent-3-250: var(--accent-3-250);
$color-accent-3-200: var(--accent-3-200);
$color-accent-3-150: var(--accent-3-150);
$color-accent-3-100: var(--accent-3-100);
$color-accent-3-50: var(--accent-3-50);

$color-neutral-950: var(--neutral-950);
$color-neutral-900: var(--neutral-900);
$color-neutral-850: var(--neutral-850);
$color-neutral-800: var(--neutral-800);
$color-neutral-750: var(--neutral-750);
$color-neutral-700: var(--neutral-700);
$color-neutral-650: var(--neutral-650);
$color-neutral-600: var(--neutral-600);
$color-neutral-550: var(--neutral-550);
$color-neutral-500: var(--neutral-500);
$color-neutral-450: var(--neutral-450);
$color-neutral-400: var(--neutral-400);
$color-neutral-350: var(--neutral-350);
$color-neutral-300: var(--neutral-300);
$color-neutral-250: var(--neutral-250);
$color-neutral-200: var(--neutral-200);
$color-neutral-150: var(--neutral-150);
$color-neutral-100: var(--neutral-100);
$color-neutral-50: var(--neutral-50);

$color-desaturated-950: var(--desaturated-950);
$color-desaturated-900: var(--desaturated-900);
$color-desaturated-850: var(--desaturated-850);
$color-desaturated-800: var(--desaturated-800);
$color-desaturated-750: var(--desaturated-750);
$color-desaturated-700: var(--desaturated-700);
$color-desaturated-650: var(--desaturated-650);
$color-desaturated-600: var(--desaturated-600);
$color-desaturated-550: var(--desaturated-550);
$color-desaturated-500: var(--desaturated-500);
$color-desaturated-450: var(--desaturated-450);
$color-desaturated-400: var(--desaturated-400);
$color-desaturated-350: var(--desaturated-350);
$color-desaturated-300: var(--desaturated-300);
$color-desaturated-250: var(--desaturated-250);
$color-desaturated-200: var(--desaturated-200);
$color-desaturated-150: var(--desaturated-150);
$color-desaturated-100: var(--desaturated-100);
$color-desaturated-50: var(--desaturated-50);