diff --git a/app/index.html b/app/index.html
index edffd74..9261c6e 100644
--- a/app/index.html
+++ b/app/index.html
@@ -8,7 +8,7 @@
 		<link rel="preconnect" href="https://fonts.googleapis.com" />
 		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 		<link
-			href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Inconsolata:wght@500&display=swap"
+			href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Inconsolata:wght@500&family=Space+Grotesk:wght@400;500;700&family=JetBrains+Mono:wght@400;500&display=swap"
 			rel="stylesheet"
 		/>
 	</head>
diff --git a/app/src/main.tsx b/app/src/main.tsx
index 17ad524..2e52a16 100644
--- a/app/src/main.tsx
+++ b/app/src/main.tsx
@@ -3,6 +3,7 @@ import { StrictMode } from "react"
 import { createRoot } from "react-dom/client"
 import { BrowserRouter } from "react-router-dom"
 import "@stellar-scaffold/app-lib/styles.css"
+import "./styles/tokens.css"
 import App from "./App.tsx"
 import { NotificationProvider } from "./providers/NotificationProvider.tsx"
 import { WalletProvider } from "./providers/WalletProvider.tsx"
diff --git a/app/src/styles/tokens.css b/app/src/styles/tokens.css
new file mode 100644
index 0000000..c65785b
--- /dev/null
+++ b/app/src/styles/tokens.css
@@ -0,0 +1,19 @@
+:root {
+	--vault-surface-card: #ffffff;
+	--vault-surface-inset: #f7f7f7;
+	--vault-surface-page: #efefef;
+	--vault-fill-warn: var(--vault-surface-page);
+	--vault-border-faint: #f2f2f2;
+	--vault-border-hairline: #e0e0e0;
+	--vault-border-inactive: #b4b4b4;
+	--vault-text-muted: #6e6e6e;
+	--vault-text-body: #2e2e2e;
+	--vault-ink: #000000;
+	--vault-action: #1d4ed8;
+	--vault-action-ring: #edf2fe;
+	--vault-success: #1f7a4c;
+	--vault-success-fill: #ebf4ef;
+	--vault-danger: #b3261e;
+	--vault-font-sans: "Space Grotesk", system-ui, sans-serif;
+	--vault-font-mono: "JetBrains Mono", ui-monospace, monospace;
+}
diff --git a/app/src/styles/type.module.css b/app/src/styles/type.module.css
new file mode 100644
index 0000000..bf0235a
--- /dev/null
+++ b/app/src/styles/type.module.css
@@ -0,0 +1,113 @@
+.vaultName {
+	font-family: var(--vault-font-sans);
+	font-weight: 700;
+	font-size: 30px;
+	line-height: 1.05;
+	letter-spacing: -0.02em;
+}
+
+.cardHead {
+	font-family: var(--vault-font-sans);
+	font-weight: 500;
+	font-size: 21px;
+	line-height: 1.2;
+}
+
+.waitHead {
+	font-family: var(--vault-font-sans);
+	font-weight: 500;
+	font-size: 19px;
+	line-height: 1.25;
+}
+
+.sectionHead {
+	font-family: var(--vault-font-sans);
+	font-weight: 500;
+	font-size: 18px;
+	line-height: 1.25;
+}
+
+.body {
+	font-family: var(--vault-font-sans);
+	font-weight: 400;
+	font-size: 16px;
+	line-height: 1.5;
+}
+
+.stepTitle {
+	font-family: var(--vault-font-sans);
+	font-weight: 500;
+	font-size: 15.5px;
+	line-height: 1.3;
+}
+
+.footnote {
+	font-family: var(--vault-font-sans);
+	font-weight: 400;
+	font-size: 13.5px;
+	line-height: 1.5;
+}
+
+.label {
+	font-family: var(--vault-font-mono);
+	font-weight: 500;
+	font-size: 11px;
+	line-height: 1;
+	letter-spacing: 0.12em;
+	text-transform: uppercase;
+}
+
+.position {
+	font-family: var(--vault-font-mono);
+	font-weight: 500;
+	font-size: 28px;
+	line-height: 1.05;
+	font-variant-numeric: tabular-nums;
+}
+
+.metric {
+	font-family: var(--vault-font-mono);
+	font-weight: 500;
+	font-size: 25px;
+	line-height: 1.05;
+	font-variant-numeric: tabular-nums;
+}
+
+.amountInput {
+	font-family: var(--vault-font-mono);
+	font-weight: 400;
+	font-size: 25px;
+	line-height: 1.1;
+	font-variant-numeric: tabular-nums;
+}
+
+.estimate {
+	font-family: var(--vault-font-mono);
+	font-weight: 500;
+	font-size: 22px;
+	line-height: 1.15;
+	font-variant-numeric: tabular-nums;
+}
+
+.summaryValue {
+	font-family: var(--vault-font-mono);
+	font-weight: 400;
+	font-size: 15px;
+	line-height: 1.4;
+	font-variant-numeric: tabular-nums;
+}
+
+.railValue {
+	font-family: var(--vault-font-mono);
+	font-weight: 400;
+	font-size: 13.5px;
+	line-height: 1.4;
+	font-variant-numeric: tabular-nums;
+}
+
+.metricSub {
+	font-family: var(--vault-font-mono);
+	font-weight: 400;
+	font-size: 12.5px;
+	line-height: 1.3;
+}