diff --git a/src/_base.scss b/src/_base.scss
index 54e34eb..eed03cc 100644
--- a/src/_base.scss
+++ b/src/_base.scss
@@ -1,6 +1,7 @@
 $font-size: 100vh * 0.01;
 $icon-size: $font-size * 2;
 
+// TODO: To remove once the design updated.
 $border-style: thin solid #BED6E0;
 
 $greyscale-90: #1B1B1B;
@@ -26,29 +27,35 @@ $color-primary-70: #005A75;
 $color-primary-60: #004059;
 $color-primary-50: #002740;
 
-$color-secondary_150: #EAE5F3;
-$color-secondary_140: #D5CCE7;
-$color-secondary_130: #BFB3DB;
-$color-secondary_120: #AA9BCF;
-$color-secondary_110: #9583C3;
-$color-secondary_100: #7E6BB6;
-$color-secondary_90: #6957A0;
-$color-secondary_80: #53448A;
-$color-secondary_70: #3E3174;
-$color-secondary_60: #281F5F;
-$color-secondary_50: #110E4B;
+$color-secondary-150: #EAE5F3;
+$color-secondary-140: #D5CCE7;
+$color-secondary-130: #BFB3DB;
+$color-secondary-120: #AA9BCF;
+$color-secondary-110: #9583C3;
+$color-secondary-100: #7E6BB6;
+$color-secondary-90: #6957A0;
+$color-secondary-80: #53448A;
+$color-secondary-70: #3E3174;
+$color-secondary-60: #281F5F;
+$color-secondary-50: #110E4B;
+
+$color-ternary-150: #FCE0E9;
+$color-ternary-140: #F7C1D4;
+$color-ternary-130: #F1A1BF;
+$color-ternary-120: #E981AA;
+$color-ternary-110: #E05F96;
+$color-ternary-100: #D53583;
+$color-ternary-90: #BC106D;
+$color-ternary-80: #A30059;
+$color-ternary-70: #8B0046;
+$color-ternary-60: #720033;
+$color-ternary-50: #5A0022;
+
+$form-max-height: 1024px;
+$form-aspect-ratio: 1/1.618;
+
+$border-radius: 16px;
 
-$color-ternary_150: #FCE0E9;
-$color-ternary_140: #F7C1D4;
-$color-ternary_130: #F1A1BF;
-$color-ternary_120: #E981AA;
-$color-ternary_110: #E05F96;
-$color-ternary_100: #D53583;
-$color-ternary_90: #BC106D;
-$color-ternary_80: #A30059;
-$color-ternary_70: #8B0046;
-$color-ternary_60: #720033;
-$color-ternary_50: #5A0022;
 $geist-font-path: "../fonts/Geist";
 
 @font-face {
@@ -74,6 +81,7 @@ body {
     width: 100%;
 }
 
+// TODO: To remove once the design updated.
 .aeroButton {
     height: 50%;
     min-height: 16px;