diff --git a/packages/ui/.vscode/extensions.json b/packages/ui/.vscode/extensions.json
new file mode 100644
index 000000000..d3feec66a
--- /dev/null
+++ b/packages/ui/.vscode/extensions.json
@@ -0,0 +1,7 @@
+{
+  "recommendations": [
+    "mikestead.dotenv",
+    "dbaeumer.vscode-eslint",
+    "stylelint.vscode-stylelint"
+  ]
+}
diff --git a/packages/ui/.vscode/settings.json b/packages/ui/.vscode/settings.json
new file mode 100644
index 000000000..ff26b9bc4
--- /dev/null
+++ b/packages/ui/.vscode/settings.json
@@ -0,0 +1,9 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "editor.formatOnSave": true,
+  "[scss]": {
+    "editor.codeActionsOnSave": {
+      "source.fixAll.stylelint": true
+    }
+  }
+}
diff --git a/packages/ui/README.md b/packages/ui/README.md
index 39a0af1f8..6851c29f7 100644
--- a/packages/ui/README.md
+++ b/packages/ui/README.md
@@ -1,3 +1,3 @@
-# React Boilerplate
+# @logto/ui
 
-TypeScript React + SCSS Modules
+The core register / sign in experience for end-users.
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 128710ec9..c3c0b73e9 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "react-boilerplate",
+  "name": "@logto/ui",
   "version": "0.1.0",
   "license": "UNLICENSED",
   "scripts": {
diff --git a/packages/ui/src/scss/_theme.scss b/packages/ui/src/scss/_theme.scss
new file mode 100644
index 000000000..02f342766
--- /dev/null
+++ b/packages/ui/src/scss/_theme.scss
@@ -0,0 +1,42 @@
+.universal {
+  // Color
+  --color-gradient: linear-gradient(12.07deg, #3c4ce3 8.81%, #717ce0 93.49%);
+  --color-button-background: #3c4ce3;
+  --color-button-background-disabled: #626fe8;
+  --color-button-text: #f5f5f5;
+  --color-button-text-disabled: #eee;
+  --color-error: #ff6b66;
+
+  // Shadow
+  --shadow-button: 2px 2px 8px rgb(60 76 227 / 25%);
+}
+
+.dark {
+  // Color
+  --color-heading: #f3f6f9;
+  --color-body: #dadae0;
+  --color-secondary: #b3b7ba;
+  --color-placeholder: #888;
+  --color-control-background: #45484a;
+  --color-control-background-disabled: #65686a;
+  --color-background: #101419;
+
+  // Shadow
+  --shadow-card: 2px 2px 24px rgb(59 61 63 / 25%);
+  --shadow-control: 1px 1px 2px rgb(221 221 221 / 25%);
+}
+
+.light {
+  // Color
+  --color-heading: #333;
+  --color-body: #555;
+  --color-secondary: #888;
+  --color-placeholder: #aaa;
+  --color-control-background: #f5f8fa;
+  --color-control-background-disabled: #eaeaea;
+  --color-background: #fdfdff;
+
+  // Shadow
+  --shadow-card: 2px 2px 24px rgb(187 189 191 / 20%);
+  --shadow-control: 1px 1px 2px rgb(221 221 221 / 25%);
+}