feat: create formlayout and create collection form

inertia/styles/reset.ts

@@ -1,4 +1,5 @@
 import { css } from '@emotion/react';
+import { theme } from '~/styles/theme';
 
 export const cssReset = css({
   '*': {
@@ -17,20 +18,20 @@ export const cssReset = css({
     border: 0,
   },
 
-  'a': {
+  a: {
     width: 'fit-content',
     color: '#3f88c5',
     textDecoration: 'none',
     borderBottom: '1px solid transparent',
   },
 
-  'b': {
+  b: {
     fontWeight: 600,
     letterSpacing: '0.5px',
   },
 
   'h1, h2, h3, h4, h5, h6': {
-    fontWeight: '400',
-    margin: '1em 0',
+    fontWeight: '500',
+    color: theme.colors.primary,
   },
 });

inertia/styles/theme.ts

@@ -5,14 +5,28 @@ const black = '#333';
 const darkBlack = '#111';
 
 const white = '#fff';
-const gray = '#7c7c7c';
 
+const lightestGrey = '#dadce0';
+const lightGrey = '#f0eef6';
+const grey = '#aaa';
+const darkGrey = '#4b5563';
+
+const lightestBlue = '#d3e8fa';
+const lightBlue = '#82c5fede';
 const blue = '#3f88c5';
+const darkBlue = '#005aa5';
+const darkestBlue = '#1f2937';
+
+const lightRed = '#ffbabab9';
+const red = '#d8000c';
+
+const lightGreen = '#c1ffbab9';
+const green = 'green';
 
 export const theme: Theme = {
   colors: {
     font: black,
-    background: white,
+    background: lightGrey,
     primary: blue,
 
     lightBlack,
@@ -20,9 +34,23 @@ export const theme: Theme = {
     darkBlack,
 
     white,
-    gray,
 
+    lightestGrey,
+    lightGrey,
+    grey,
+    darkGrey,
+
+    lightestBlue,
+    lightBlue,
     blue,
+    darkBlue,
+    darkestBlue,
+
+    lightRed,
+    red,
+
+    lightGreen,
+    green,
   },
 
   border: {