feat: build UI

my-bulma-project.scss

@@ -1,53 +1,32 @@
-$blue-dianne: #204853;
-$parchment: #fefefe;
-$sirocco: #758385;
-$delta: #b0afaa;
-$cutty-sark: #566c72;
-$silver-rust: #ccc5bc;
-$fiord: #3c5b63;
-$pewter: #959b99;
-$pearl-bush: #ffffff;
+$red: #ff2e4e;
+$orange: #fd8206;
+$yellow: #eec704;
+$green: #16d164;
+$cyan: #03c2c2;
+$blue: #1678ff;
+$purple: #833bff;
+$pink: #ff2bdd;
+$grey: #767676;
 
-// Set your brand colors
-$primary: $blue-dianne;
-$secondary: $fiord;
-$accent: $parchment;
-$findata: $sirocco;
-$danger: #f14668;
-$dark: $cutty-sark;
-$light: $pearl-bush;
-$twitter: $pewter;
-$warning: $cutty-sark;
-$info: $sirocco;
-$success: $fiord;
-
-// Path to Bulma's sass folder
 @use "bulma/sass" with (
-  $family-primary: 'Arial, sans-serif',
-  $primary: $primary,
-  $info: $info,
-  $success: $success,
-  $warning: $warning,
-  $danger: $danger,
-  $body-color: $sitecolor,
-  $text: $sitecolor,
-  $link: $blue-dianne,
-  $link-hover: $fiord
+  $family-primary: "'Inter', 'SF Pro', 'Helvetica', 'Arial', sans-serif",
+  $primary: $blue,
+  $link: $blue,
+  $info: $cyan,
+  $success: $green,
+  $warning: $yellow,
+  $danger: $red,
+  $custom-colors: (
+    "red": $red,
+    "orange": $orange,
+    "yellow": $yellow,  
+    "green": $green,
+    "cyan": $cyan,
+    "blue": $blue,
+    "purple": $purple,
+    "pink": $pink,
+    "grey": $grey
+  )
 );
 
-a {
-  color: inherit !important;
-}
-
-a:hover {
-  color: $primary !important;
-}
-
-strong, label {
-  color: $sitecolor !important;
-}
-
-.hyperlink:hover {
-  cursor: pointer;
-  color: $primary !important;
-}
+@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900');