diff --git a/src/theme/colors.ts b/src/theme/colors.ts
new file mode 100644
index 0000000..73115b5
--- /dev/null
+++ b/src/theme/colors.ts
@@ -0,0 +1,20 @@
+export const colors = {
+  canvas: '#070605',
+  canvasSoft: '#0D0906',
+  surface: '#12100C',
+  surfaceRaised: '#1D170F',
+  surfaceHot: '#251A10',
+  text: '#F8EAD8',
+  textMuted: '#B9A98E',
+  textDim: '#746754',
+  line: '#392D1E',
+  action: '#E23B2E',
+  warning: '#FFB43D',
+  success: '#34C77B',
+  stopSurface: '#FFF0DC',
+  stopText: '#120B07',
+  ringWarn: 'rgba(226, 59, 46, 0.55)',
+  black: '#030302',
+} as const;
+
+export type FightRateColor = keyof typeof colors;
diff --git a/src/theme/typography.ts b/src/theme/typography.ts
new file mode 100644
index 0000000..473ea4e
--- /dev/null
+++ b/src/theme/typography.ts
@@ -0,0 +1,65 @@
+export const typography = {
+  display: {
+    fontSize: 82,
+    lineHeight: 74,
+    fontWeight: '900' as const,
+    letterSpacing: -7,
+  },
+  displaySmall: {
+    fontSize: 48,
+    lineHeight: 46,
+    fontWeight: '900' as const,
+    letterSpacing: -3,
+  },
+  displayNumeric: {
+    fontFamily: 'JetBrainsMono-ExtraBold',
+    fontVariant: ['tabular-nums'] as const,
+    fontSize: 110,
+    lineHeight: 100,
+    fontWeight: '900' as const,
+    letterSpacing: -7,
+  },
+  displaySmallNumeric: {
+    fontFamily: 'JetBrainsMono-ExtraBold',
+    fontVariant: ['tabular-nums'] as const,
+    fontSize: 56,
+    lineHeight: 54,
+    fontWeight: '900' as const,
+    letterSpacing: -3,
+  },
+  metricNumeric: {
+    fontFamily: 'JetBrainsMono-Bold',
+    fontVariant: ['tabular-nums'] as const,
+    fontSize: 28,
+    lineHeight: 30,
+    fontWeight: '800' as const,
+    letterSpacing: -1.2,
+  },
+  detailNumeric: {
+    fontFamily: 'JetBrainsMono-Bold',
+    fontVariant: ['tabular-nums'] as const,
+    fontSize: 18,
+    lineHeight: 22,
+    fontWeight: '800' as const,
+    letterSpacing: -0.8,
+  },
+  label: {
+    fontSize: 10,
+    lineHeight: 13,
+    fontWeight: '900' as const,
+    letterSpacing: 1.4,
+    textTransform: 'uppercase' as const,
+  },
+  body: {
+    fontSize: 15,
+    lineHeight: 22,
+    fontWeight: '500' as const,
+  },
+  button: {
+    fontSize: 12,
+    lineHeight: 16,
+    fontWeight: '900' as const,
+    letterSpacing: 0.8,
+    textTransform: 'uppercase' as const,
+  },
+} as const;