diff --git a/assets/audios/icons.txt b/assets/audios/icons.txt
new file mode 100644
index 0000000..e69de29
diff --git a/assets/css/global.css b/assets/css/global.css
new file mode 100644
index 0000000..5087f50
--- /dev/null
+++ b/assets/css/global.css
@@ -0,0 +1,78 @@
+@import url(/assets/css/root.css);
+
+*,
+html {
+ font-family: 'inter' sans-serif;
+ letter-spacing: 0.5px;
+}
+
+body {
+ background-color: var(--body-bg);
+}
+
+
+.logo {
+ width: 48px;
+ height: auto;
+}
+
+a {
+ color: var(--primary);
+ text-decoration: none;
+}
+
+a:hover {
+ color: var(--accent);
+}
+
+/* icon sizing */
+.icon-16px {
+ width: 16px;
+}
+
+.icon-20px {
+ width: 20px;
+}
+
+.icon {
+ width: 24px;
+}
+
+.icon-32px {
+ width: 32px;
+}
+
+.icon-36px {
+ width: 36px;
+}
+
+.icon-40px {
+ width: 40px;
+}
+
+.icon-48px {
+ width: 48px;
+}
+
+
+.search_container {
+ display: flex;
+ flex-direction: row;
+ padding: 4px 16px;
+ height: 40px;
+ width: auto;
+ gap: 12px;
+ border: 2px solid var(--light-stroke-3);
+ border-radius: 12px;
+}
+
+#search-input {
+ height: auto;
+ width: 100%;
+ outline: none;
+ border: none;
+ border-radius: 12px;
+ height: auto;
+ color: var(--dark-text-6);
+ font-size: 16px;
+}
\ No newline at end of file
diff --git a/assets/css/media-screen.css b/assets/css/media-screen.css
new file mode 100644
index 0000000..e69de29
diff --git a/assets/css/root.css b/assets/css/root.css
new file mode 100644
index 0000000..d2f577c
--- /dev/null
+++ b/assets/css/root.css
@@ -0,0 +1,90 @@
+/* main colors */
+:root {
+ --primary: rgb(0, 115, 230);
+ --secondary: rgb(255, 111, 97);
+ --accent: rgb(76, 175, 80);
+ --white: rgb(255, 255, 255);
+ --background: rgb(251, 252, 254);
+ --dark: var(--black);
+}
+
+/* main shade from black */
+:root {
+ --black-shade-14: #fcfcfd;
+ --black-shade-13: #f6f6f8;
+ --black-shade-12: #e8e8ee;
+ --black-shade-11: #caccd8;
+ --black-shade-10: #adafc2;
+ --black-shade-9: #9092ad;
+ --black-shade-8: #727697;
+ --black-shade-7: #5b5e7b;
+ --black-shade-6: #45485e;
+ --black-shade-5: #363849;
+ --black-shade-4: #2b2d3b;
+ --black-shade-3: #21222c;
+ --black-shade-2: #16161d;
+ --black-shade: #0d0d12;
+}
+
+
+
+/* color tokens */
+:root {
+ --body-margin: 160px;
+ --body-bg: var(--background);
+ --content-bg: var(--white);
+
+
+ /* text */
+ --dark-text: var(--black-shade);
+ --dark-text-2: var(--black-shade-2);
+ --dark-text-3: var(--black-shade-3);
+ --dark-text-4: var(--black-shade-4);
+ --dark-text-5: var(--black-shade-5);
+ --dark-text-6: var(--black-shade-6);
+ --dark-text-7: var(--black-shade-7);
+ --dark-text-8: var(--black-shade-8);
+ --dark-text-9: var(--black-shade-9);
+
+ --light-text: var(--black-shade-14);
+ --light-text-2: var(--black-shade-13);
+ --light-text-3: var(--black-shade-12);
+ --light-text-4: var(--black-shade-11);
+ --light-text-5: var(--black-shade-10);
+
+
+ /* stroke */
+ --dark-stroke: var(--black-shade);
+ --dark-stroke-2: var(--black-shade-2);
+ --dark-stroke-3: var(--black-shade-3);
+ --dark-stroke-4: var(--black-shade-4);
+ --dark-stroke-5: var(--black-shade-5);
+ --dark-stroke-6: var(--black-shade-6);
+ --dark-stroke-7: var(--black-shade-7);
+ --dark-stroke-8: var(--black-shade-8);
+ --dark-stroke-9: var(--black-shade-9);
+
+ --light-stroke: var(--black-shade-14);
+ --light-stroke-2: var(--black-shade-13);
+ --light-stroke-3: var(--black-shade-12);
+ --light-stroke-4: var(--black-shade-11);
+ --light-stroke-5: var(--black-shade-10);
+}
+
+
+
+/* effect - shadows */
+:root {
+ --drop-shadow-sm: 0px 5px 5px 0px rgba(0, 0, 0, 0.05);
+ --drop-shadow-sm-2: 0px 15px 25px 0px rgba(0, 0, 0, 0.05);
+}
+
+/* typescale */
+:root {
+ --font-family: 'inter', sans-serif;
+ --letter-spacing: -0.5px;
+
+ /* caption */
+ --caption-semibold: 12px/20px var(--font-family) var(--letter-spacing) uppercase;
+
+}
\ No newline at end of file
diff --git a/assets/favicons/android-chrome-192x192.png b/assets/favicons/android-chrome-192x192.png
new file mode 100644
index 0000000..b71c3b2
Binary files /dev/null and b/assets/favicons/android-chrome-192x192.png differ
diff --git a/assets/favicons/apple-touch-icon-180x180.png b/assets/favicons/apple-touch-icon-180x180.png
new file mode 100644
index 0000000..4192a69
Binary files /dev/null and b/assets/favicons/apple-touch-icon-180x180.png differ
diff --git a/assets/favicons/favicon-16x16.png b/assets/favicons/favicon-16x16.png
new file mode 100644
index 0000000..e7285f3
Binary files /dev/null and b/assets/favicons/favicon-16x16.png differ
diff --git a/assets/favicons/favicon-32x32.png b/assets/favicons/favicon-32x32.png
new file mode 100644
index 0000000..248ea73
Binary files /dev/null and b/assets/favicons/favicon-32x32.png differ
diff --git a/assets/favicons/favicon-48x48.png b/assets/favicons/favicon-48x48.png
new file mode 100644
index 0000000..bdb09c5
Binary files /dev/null and b/assets/favicons/favicon-48x48.png differ
diff --git a/assets/favicons/ms-icon-144x144.png b/assets/favicons/ms-icon-144x144.png
new file mode 100644
index 0000000..e003d77
Binary files /dev/null and b/assets/favicons/ms-icon-144x144.png differ
diff --git a/assets/favicons/safari-pinned-tab.svg b/assets/favicons/safari-pinned-tab.svg
new file mode 100644
index 0000000..199ee50
--- /dev/null
+++ b/assets/favicons/safari-pinned-tab.svg
@@ -0,0 +1,17 @@
+
diff --git a/assets/icons/arrow-down-fill.svg b/assets/icons/arrow-down-fill.svg
new file mode 100644
index 0000000..8c99c2d
--- /dev/null
+++ b/assets/icons/arrow-down-fill.svg
@@ -0,0 +1,3 @@
+
diff --git a/assets/icons/github.svg b/assets/icons/github.svg
new file mode 100644
index 0000000..d0f6ba4
--- /dev/null
+++ b/assets/icons/github.svg
@@ -0,0 +1,3 @@
+
diff --git a/assets/icons/menu.svg b/assets/icons/menu.svg
new file mode 100644
index 0000000..d3cef53
--- /dev/null
+++ b/assets/icons/menu.svg
@@ -0,0 +1,4 @@
+
+
\ No newline at end of file
diff --git a/assets/icons/search.svg b/assets/icons/search.svg
new file mode 100644
index 0000000..c330604
--- /dev/null
+++ b/assets/icons/search.svg
@@ -0,0 +1,3 @@
+
diff --git a/assets/images/icons.txt b/assets/images/icons.txt
new file mode 100644
index 0000000..e69de29
diff --git a/assets/js/main.js b/assets/js/main.js
new file mode 100644
index 0000000..e69de29
diff --git a/assets/logo-txt.svg b/assets/logo-txt.svg
new file mode 100644
index 0000000..2bd4cd9
--- /dev/null
+++ b/assets/logo-txt.svg
@@ -0,0 +1,9 @@
+
diff --git a/assets/logo.svg b/assets/logo.svg
new file mode 100644
index 0000000..d309f3c
--- /dev/null
+++ b/assets/logo.svg
@@ -0,0 +1,3 @@
+
diff --git a/assets/videos/icons.txt b/assets/videos/icons.txt
new file mode 100644
index 0000000..e69de29
diff --git a/scripts/script.js b/scripts/script.js
new file mode 100644
index 0000000..8b13789
--- /dev/null
+++ b/scripts/script.js
@@ -0,0 +1 @@
+
diff --git a/styles/about.css b/styles/about.css
new file mode 100644
index 0000000..e69de29
diff --git a/styles/index.css b/styles/index.css
index 8b13789..e69de29 100644
--- a/styles/index.css
+++ b/styles/index.css
@@ -1 +0,0 @@
-
diff --git a/uixgen.code-workspace b/uixgen.code-workspace
new file mode 100644
index 0000000..876a149
--- /dev/null
+++ b/uixgen.code-workspace
@@ -0,0 +1,8 @@
+{
+ "folders": [
+ {
+ "path": "."
+ }
+ ],
+ "settings": {}
+}
\ No newline at end of file