sass/badge/_index.scss

@@ -16,10 +16,10 @@
 
 .badge--cost:not(.badge--large) {
   background-color: $lbry-yellow-2;
+  color: $lbry-black;
 
   [data-mode="dark"] & {
     background-color: $lbry-yellow-3;
-    color: $lbry-black;
   }
 }
 
@@ -33,7 +33,7 @@
 }
 
 .badge--large {
-  font-size: 5rem;
+  font-size: 4rem;
   line-height: 1;
 }
 
@@ -50,3 +50,8 @@
   background-color: $lbry-teal-5;
   color: $lbry-white;
 }
+
+.badge--alert {
+  background-color: $lbry-red-2;
+  color: $lbry-white;
+}

sass/form/_index.scss

@@ -1,23 +1,33 @@
 form {
   // setting the font size here sizes everything within
+  &:not(:last-child) {
     margin-bottom: var(--spacing-s);
+  }
 
-  button,
+  button:not(.button--link),
   input,
   select {
     height: var(--spacing-l);
     border: 1px solid;
   }
 
+  checkbox-element,
+  radio-element,
+  select {
+    cursor: pointer;
+  }
+
   [type="email"],
+  [type="number"],
+  [type="password"]
   [type="text"] {
     padding-right: var(--spacing-s);
     padding-left: var(--spacing-s);
     transition: border 0.2s;
   }
 
-  [type="button"],
+  [type="submit"],
-  [type="submit"] {
+  .button--primary {
     color: $lbry-white;
     padding-right: var(--spacing-m);
     padding-left: var(--spacing-m);
@@ -218,8 +228,6 @@ radio-toggle {
   }
 }
 
-
-
 // Custom elements are apparently difficult to use in React, so use classes
 
 .checkbox-element {