diff --git a/app.js b/app.js
index c27d9da..e61492c 100644
--- a/app.js
+++ b/app.js
@@ -59,14 +59,12 @@ function downloadBinaryFile(data, filename) {
   }, 100);
 }
 
-export async function createBinary() {
+export async function createBinary(logoFile, loaderFile) {
   const BRAND_NAME = "TRMNL";
   const API_URL = "https://trmnl.app";
 
-  const logo = document.getElementById('logo-input');
-  const loader = document.getElementById('loader-input');
-  const logoBinary = await encodePNG(logo.files[0]);
-  const loaderBinary = await encodePNG(loader.files[0]);
+  const logoBinary = await encodePNG(logoFile);
+  const loaderBinary = await encodePNG(loaderFile);
 
   const totalLength = logoBinary.length + loaderBinary.length;
   if (totalLength > IMAGES_SIZE) {
diff --git a/design-system.css b/design-system.css
new file mode 100644
index 0000000..cb7d296
--- /dev/null
+++ b/design-system.css
@@ -0,0 +1,1351 @@
+/**
+ * TRMNL Design System
+ * A standalone CSS file for TRMNL-branded pages without Tailwind.
+ * 
+ * USAGE:
+ *   <link rel="icon" href="favicon.ico" type="image/x-icon">
+ *   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=EB+Garamond:wght@400;500;600;700&display=swap" rel="stylesheet">
+ *   <link rel="stylesheet" href="design-system.css">
+ */
+
+/* ==========================================================================
+   1. RESET (minimal)
+   ========================================================================== */
+
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+/* ==========================================================================
+   2. DESIGN TOKENS (CSS Custom Properties)
+   ========================================================================== */
+
+:root {
+  /* --- Colors: Primary (Coral/Orange) --- */
+  --color-primary-25: #fff9f7;
+  --color-primary-50: #fff1eb;
+  --color-primary-100: #ffe4d7;
+  --color-primary-200: #ffd1c0;
+  --color-primary-300: #ffbaa3;
+  --color-primary-400: #ff9280;
+  --color-primary-500: #f8654b;
+  --color-primary-600: #e05b44;
+  --color-primary-700: #b94938;
+  --color-primary-800: #91372d;
+  --color-primary-900: #6a251f;
+
+  /* --- Colors: Gray (Warm to Neutral) --- */
+  --color-gray-25: #fdfcfb;
+  --color-gray-50: #fbfaf8;
+  --color-gray-75: #f8f7f5;
+  --color-gray-100: #f2f0ed;
+  --color-gray-150: #edebe8;
+  --color-gray-200: #e8e7e4;
+  --color-gray-250: #e3e2df;
+  --color-gray-300: #dcdbd9;
+  --color-gray-400: #c4c3c2;
+  --color-gray-500: #8f8f8f;
+  --color-gray-600: #5b5b5b;
+  --color-gray-700: #202020;
+  --color-gray-800: #151515;
+  --color-gray-900: #0d0d0d;
+
+  /* --- Colors: Semantic --- */
+  --color-green-50: #f0fdf0;
+  --color-green-100: #e1f9e1;
+  --color-green-500: #22c55e;
+  --color-green-600: #16a34a;
+  --color-green-700: #15803d;
+
+  --color-red-50: #fef2f2;
+  --color-red-100: #fee2e2;
+  --color-red-200: #fecaca;
+  --color-red-500: #dc2626;
+  --color-red-600: #b91c1c;
+  --color-red-700: #991b1b;
+
+  --color-blue-50: #eff6ff;
+  --color-blue-100: #dbeafe;
+  --color-blue-500: #3b82f6;
+  --color-blue-600: #2563eb;
+
+  --color-yellow-50: #fefdf0;
+  --color-yellow-100: #fef9c3;
+  --color-yellow-500: #c28e0d;
+
+  /* --- Colors: Utility --- */
+  --color-white: #ffffff;
+  --color-black: #000000;
+
+  /* --- Typography --- */
+  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --font-heading: 'EB Garamond', Georgia, 'Times New Roman', serif;
+  --font-mono: 'Space Mono', ui-monospace, monospace;
+
+  --text-xs: 0.75rem;     /* 12px */
+  --text-sm: 0.875rem;    /* 14px */
+  --text-base: 1rem;      /* 16px */
+  --text-lg: 1.125rem;    /* 18px */
+  --text-xl: 1.25rem;     /* 20px */
+  --text-2xl: 1.5rem;     /* 24px */
+  --text-3xl: 1.875rem;   /* 30px */
+  --text-4xl: 2.25rem;    /* 36px */
+  --text-5xl: 3rem;       /* 48px */
+
+  --leading-none: 1;
+  --leading-tight: 1.25;
+  --leading-normal: 1.5;
+  --leading-relaxed: 1.625;
+
+  --tracking-tight: -0.025em;
+  --tracking-normal: 0;
+  --tracking-wide: 0.025em;
+
+  --font-light: 300;
+  --font-normal: 400;
+  --font-medium: 500;
+  --font-semibold: 600;
+  --font-bold: 700;
+
+  /* --- Spacing (4px grid) --- */
+  --space-0: 0;
+  --space-1: 0.25rem;   /* 4px */
+  --space-2: 0.5rem;    /* 8px */
+  --space-3: 0.75rem;   /* 12px */
+  --space-4: 1rem;      /* 16px */
+  --space-5: 1.25rem;   /* 20px */
+  --space-6: 1.5rem;    /* 24px */
+  --space-7: 1.75rem;   /* 28px */
+  --space-8: 2rem;      /* 32px */
+  --space-9: 2.25rem;   /* 36px */
+  --space-10: 2.5rem;   /* 40px */
+  --space-11: 2.75rem;  /* 44px */
+  --space-12: 3rem;     /* 48px */
+  --space-14: 3.5rem;   /* 56px */
+  --space-16: 4rem;     /* 64px */
+
+  /* --- Max Width Scale --- */
+  --max-w-xs: 20rem;     /* 320px */
+  --max-w-sm: 24rem;     /* 384px */
+  --max-w-md: 28rem;     /* 448px */
+  --max-w-lg: 32rem;    /* 472px */
+  --max-w-xl: 36rem;     /* 576px */
+  --max-w-2xl: 42rem;    /* 672px */
+  --max-w-3xl: 48rem;    /* 768px */
+
+  /* --- Breakpoints --- */
+  --breakpoint-md: 769px;
+
+  /* --- Border Radius --- */
+  --radius-sm: 0.375rem;  /* 6px */
+  --radius-md: 0.5rem;    /* 8px */
+  --radius-lg: 0.75rem;   /* 12px */
+  --radius-xl: 1rem;      /* 16px */
+  --radius-full: 9999px;
+
+  /* --- Shadows --- */
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+
+  /* --- Transitions --- */
+  --transition-fast: 150ms ease;
+  --transition-normal: 250ms ease;
+}
+
+/* ==========================================================================
+   3. BASE STYLES
+   ========================================================================== */
+
+html {
+  font-size: 16px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  font-family: var(--font-sans);
+  font-size: var(--text-base);
+  line-height: var(--leading-normal);
+  color: var(--color-gray-900);
+  background-color: var(--color-gray-100);
+  min-height: 100vh;
+}
+
+a {
+  color: var(--color-primary-500);
+  text-decoration: none;
+  transition: color var(--transition-fast);
+}
+
+a:hover {
+  color: var(--color-primary-600);
+}
+
+a.underline {
+  text-decoration: underline;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+
+/* Hide file inputs */
+input[type="file"] {
+  display: none;
+}
+
+/* ==========================================================================
+   4. COMPONENTS
+   ========================================================================== */
+
+/* --- Container --- */
+.container {
+  max-width: 76rem;
+  margin: 0 auto;
+  padding: 0 var(--space-6);
+}
+
+.container-wide {
+  max-width: 72rem;
+}
+
+/* --- Header --- */
+.header {
+  padding: var(--space-16) 0 var(--space-12);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+.header-glyph {
+  height: 48px;
+  width: auto;
+  margin-bottom: var(--space-8);
+}
+
+.eyebrow {
+  font-size: 14px;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.7px;
+  line-height: 20px;
+  color: var(--color-gray-800);
+  margin-bottom: var(--space-3);
+}
+
+.header h1 {
+  font-family: var(--font-heading);
+  font-size: 60px;
+  font-weight: 400;
+  letter-spacing: -1.5px;
+  line-height: 60px;
+  color: var(--color-black);
+  margin: 0 0 var(--space-4) 0;
+}
+
+.subtitle {
+  font-size: 16px;
+  font-weight: 400;
+  letter-spacing: -0.01em;
+  color: var(--color-black);
+  line-height: 24px;
+  max-width: 42rem;
+  margin: 0;
+}
+
+/* --- Grid --- */
+.grid {
+  display: grid;
+  gap: var(--space-6);
+}
+
+.grid-2 {
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.grid-2 > * {
+  min-width: 0;
+}
+
+.grid-3 {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.grid-4 {
+  grid-template-columns: repeat(4, 1fr);
+}
+
+.grid-2-md {
+  grid-template-columns: 1fr;
+}
+
+@media (min-width: 769px) {
+  .grid-2-md {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+/* --- Card --- */
+.card {
+  background: var(--color-gray-50);
+  border: 1px solid var(--color-gray-200);
+  border-radius: var(--radius-xl);
+  padding: var(--space-6);
+  box-shadow: var(--shadow-sm);
+}
+
+.card-full {
+  grid-column: 1 / -1;
+}
+
+.card h2 {
+  font-size: var(--text-xl);
+  font-weight: var(--font-semibold);
+  color: var(--color-gray-900);
+}
+
+/* --- Well --- */
+.well {
+  background: var(--color-gray-200);
+  border: 1px solid var(--color-gray-300);
+  border-radius: var(--radius-xl);
+  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+/* --- Upload Zone --- */
+.upload-zone {
+  position: relative;
+  background: var(--color-gray-50);
+  border: 1px dashed var(--color-gray-300);
+  border-radius: 16px;
+  padding: var(--space-6);
+  text-align: center;
+  cursor: pointer;
+  transition: background-color var(--transition-fast), border-color var(--transition-fast);
+  min-width: 0;
+  width: 100%;
+  max-width: 100%;
+  overflow: hidden;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.upload-zone:hover {
+  background: var(--color-primary-50);
+  border-color: var(--color-primary-500);
+}
+
+.upload-zone:hover .upload-icon,
+.upload-zone:hover .upload-text,
+.upload-zone:hover .field-label {
+  color: var(--color-primary-500);
+}
+
+.upload-zone:hover .upload-hint {
+  color: var(--color-primary-400);
+}
+
+.upload-zone.active {
+  background: var(--color-primary-100);
+}
+
+.upload-zone--has-image {
+  background: var(--color-white);
+  border-color: transparent;
+  min-height: 160px;
+  position: relative;
+}
+
+.upload-zone--has-image:hover {
+  background: var(--color-white);
+  border-color: transparent;
+}
+
+.upload-zone-bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-size: 75%;
+  background-position: center center;
+  background-repeat: no-repeat;
+  z-index: 1;
+  pointer-events: none;
+}
+
+.upload-icon {
+  font-size: 32px;
+  margin-bottom: var(--space-4);
+}
+
+.upload-text {
+  font-weight: var(--font-medium);
+  margin-bottom: var(--space-2);
+  color: var(--color-gray-500);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 100%;
+}
+
+.upload-hint {
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+  color: var(--color-gray-500);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 100%;
+}
+
+.upload-icon,
+.upload-text,
+.upload-hint,
+.field-label {
+  position: relative;
+  z-index: 2;
+}
+
+.upload-status-heading {
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+  color: var(--color-gray-700);
+}
+
+/* --- Field Group --- */
+.field-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+
+.field-label {
+  font-size: var(--text-base);
+  font-weight: var(--font-semibold);
+  color: var(--color-gray-900);
+  margin-bottom: var(--space-4);
+  text-align: center;
+  width: 100%;
+}
+
+/* --- Preview --- */
+.preview {
+  margin-top: var(--space-4);
+  display: none;
+}
+
+.preview img {
+  width: 100%;
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--color-gray-250);
+  margin-bottom: var(--space-3);
+  background: var(--color-gray-75);
+}
+
+.preview-info {
+  font-size: var(--text-sm);
+  color: var(--color-gray-500);
+  text-align: center;
+}
+
+/* --- Message --- */
+.message {
+  display: flex;
+  align-items: center;
+  padding: 0.625rem;
+  border-radius: var(--radius-xl);
+  
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+}
+
+.message-icon {
+  flex-shrink: 0;
+  width: 1.25rem;
+  height: 1.25rem;
+  margin-right: var(--space-3);
+}
+
+.message-content {
+  flex: 1;
+}
+
+.message-error {
+  background: var(--color-red-100);
+  color: var(--color-red-700);
+  border: 1px solid var(--color-red-200);
+}
+
+.message-success {
+  background: var(--color-green-100);
+  color: var(--color-green-700);
+  border: 1px solid var(--color-green-200);
+}
+
+.message-warning {
+  background: var(--color-yellow-100);
+  color: var(--color-yellow-500);
+  border: 1px solid var(--color-yellow-100);
+}
+
+.message-info {
+  background: var(--color-blue-100);
+  color: var(--color-blue-700);
+  border: 1px solid var(--color-blue-200);
+}
+
+.message-primary {
+  background: var(--color-primary-100);
+  color: var(--color-primary-700);
+  border: 1px solid var(--color-primary-200);
+}
+
+.message-gray {
+  background: var(--color-gray-100);
+  color: var(--color-gray-700);
+  border: 1px solid var(--color-gray-200);
+}
+
+/* --- Button --- */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-3) var(--space-4);
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+  font-family: var(--font-sans);
+  border: none;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+  gap: var(--space-2);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.btn-lg {
+  width: 100%;
+  padding: var(--space-4);
+  font-size: var(--text-base);
+  font-weight: var(--font-semibold);
+  border-radius: var(--radius-lg);
+}
+
+.btn-primary {
+  background: var(--color-primary-500);
+  color: var(--color-white);
+}
+
+.btn-primary:hover:not(:disabled) {
+  background: var(--color-primary-600);
+}
+
+.btn-secondary {
+  background: var(--color-primary-100);
+  color: var(--color-primary-600);
+}
+
+.btn-secondary:hover:not(:disabled) {
+  background: var(--color-primary-200);
+}
+
+.btn-gray {
+  background: var(--color-gray-100);
+  color: var(--color-gray-700);
+}
+
+.btn-gray:hover:not(:disabled) {
+  background: var(--color-gray-200);
+}
+
+.btn:disabled {
+  background: var(--color-gray-300);
+  color: var(--color-gray-600);
+  cursor: not-allowed;
+}
+
+/* --- Status --- */
+.status {
+  display: flex;
+  gap: var(--space-6);
+}
+
+.status-item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+}
+
+.dot {
+  width: 8px;
+  height: 8px;
+  border-radius: var(--radius-full);
+  background: var(--color-gray-300);
+  flex-shrink: 0;
+}
+
+.dot-ready {
+  background: var(--color-green-500);
+}
+
+.status-label {
+  font-size: var(--text-sm);
+  color: var(--color-gray-500);
+}
+
+/* --- Badge --- */
+.badge {
+  display: inline-block;
+  font-size: var(--text-xs);
+  font-weight: var(--font-medium);
+  padding: 0.125rem 0.625rem;
+  border-radius: var(--radius-xl);
+  flex-shrink: 0;
+}
+
+.badge-gray {
+  background: var(--color-gray-100);
+  color: var(--color-gray-600);
+}
+
+.badge-green {
+  background: var(--color-green-100);
+  color: var(--color-green-700);
+}
+
+.badge-red {
+  background: var(--color-red-100);
+  color: var(--color-red-700);
+}
+
+/* --- Code Block --- */
+.code-block {
+  background: var(--color-gray-150);
+  border: 1px solid var(--color-gray-250);
+  border-radius: var(--radius-xl);
+  padding: var(--space-4);
+}
+
+.code-block pre {
+  margin: 0;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+.code-block code {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  line-height: var(--leading-tight);
+  color: var(--color-gray-600);
+}
+
+/* --- Steps --- */
+.steps {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-6);
+}
+
+.step {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.step-title {
+  font-size: var(--text-lg);
+  font-weight: var(--font-medium);
+  color: var(--color-gray-900);
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+}
+
+.step-number {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  color: var(--color-gray-500);
+  border-radius: var(--radius-md);
+  font-size: var(--text-sm);
+  font-weight: var(--font-semibold);
+  flex-shrink: 0;
+}
+
+.step-content {
+  font-size: var(--text-base);
+  color: var(--color-gray-700);
+  line-height: var(--leading-relaxed);
+  margin-left: 40px;
+}
+
+.step-content a {
+  text-decoration: underline;
+}
+
+.step-list {
+  list-style: decimal inside;
+  padding: 0;
+  margin: var(--space-2) 0 0 40px;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+
+.step-list li {
+  font-size: var(--text-base);
+  color: var(--color-gray-700);
+  line-height: var(--leading-relaxed);
+}
+
+/* --- Footer --- */
+.footer {
+  border-top: 1px solid var(--color-gray-200);
+  padding: var(--space-8) 0;
+  margin-top: var(--space-16);
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  font-size: var(--text-sm);
+  color: var(--color-gray-500);
+}
+
+.footer-left {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  align-items: flex-start;
+}
+
+.footer-logo-link {
+  display: inline-block;
+  line-height: 0;
+}
+
+.footer-logo {
+  height: 24px;
+  width: auto;
+  filter: brightness(0);
+}
+
+/* ==========================================================================
+   5. UTILITIES (minimal)
+   ========================================================================== */
+
+/* --- Display --- */
+.hidden { display: none; }
+.block { display: block; }
+.flex { display: flex; }
+.inline-flex { display: inline-flex; }
+
+/* --- Flex utilities --- */
+.flex-col { flex-direction: column; }
+.flex-row { flex-direction: row; }
+.flex-wrap { flex-wrap: wrap; }
+.flex-nowrap { flex-wrap: nowrap; }
+.flex-1 { flex: 1 1 0%; }
+.flex-auto { flex: 1 1 auto; }
+.flex-none { flex: none; }
+
+.items-start { align-items: flex-start; }
+.items-center { align-items: center; }
+.items-end { align-items: flex-end; }
+.items-stretch { align-items: stretch; }
+
+.justify-start { justify-content: flex-start; }
+.justify-center { justify-content: center; }
+.justify-end { justify-content: flex-end; }
+.justify-between { justify-content: space-between; }
+.justify-around { justify-content: space-around; }
+.justify-evenly { justify-content: space-evenly; }
+
+.gap-0 { gap: var(--space-0); }
+.gap-1 { gap: var(--space-1); }
+.gap-2 { gap: var(--space-2); }
+.gap-3 { gap: var(--space-3); }
+.gap-4 { gap: var(--space-4); }
+.gap-5 { gap: var(--space-5); }
+.gap-6 { gap: var(--space-6); }
+.gap-7 { gap: var(--space-7); }
+.gap-8 { gap: var(--space-8); }
+.gap-9 { gap: var(--space-9); }
+.gap-10 { gap: var(--space-10); }
+.gap-11 { gap: var(--space-11); }
+.gap-12 { gap: var(--space-12); }
+.gap-14 { gap: var(--space-14); }
+.gap-16 { gap: var(--space-16); }
+
+/* --- Text --- */
+.text-xs { font-size: var(--text-xs); }
+.text-sm { font-size: var(--text-sm); }
+.text-base { font-size: var(--text-base); }
+.text-lg { font-size: var(--text-lg); }
+.text-xl { font-size: var(--text-xl); }
+.text-2xl { font-size: var(--text-2xl); }
+.text-3xl { font-size: var(--text-3xl); }
+.text-4xl { font-size: var(--text-4xl); }
+
+.font-light { font-weight: var(--font-light); }
+.font-normal { font-weight: var(--font-normal); }
+.font-medium { font-weight: var(--font-medium); }
+.font-semibold { font-weight: var(--font-semibold); }
+.font-bold { font-weight: var(--font-bold); }
+
+.font-heading { font-family: var(--font-heading); }
+.font-mono { font-family: var(--font-mono); }
+
+.text-center { text-align: center; }
+.leading-tight { line-height: var(--leading-tight); }
+.leading-relaxed { line-height: var(--leading-relaxed); }
+.tracking-tight { letter-spacing: var(--tracking-tight); }
+.tracking-wider { letter-spacing: 0.05em; }
+.uppercase { text-transform: uppercase; }
+
+/* --- Text colors --- */
+.text-primary { color: var(--color-primary-500); }
+.text-primary-600 { color: var(--color-primary-600); }
+.text-primary-700 { color: var(--color-primary-700); }
+
+.text-gray-25 { color: var(--color-gray-25); }
+.text-gray-50 { color: var(--color-gray-50); }
+.text-gray-75 { color: var(--color-gray-75); }
+.text-gray-100 { color: var(--color-gray-100); }
+.text-gray-150 { color: var(--color-gray-150); }
+.text-gray-200 { color: var(--color-gray-200); }
+.text-gray-250 { color: var(--color-gray-250); }
+.text-gray-300 { color: var(--color-gray-300); }
+.text-gray-400 { color: var(--color-gray-400); }
+.text-gray-500 { color: var(--color-gray-500); }
+.text-gray-600 { color: var(--color-gray-600); }
+.text-gray-700 { color: var(--color-gray-700); }
+.text-gray-800 { color: var(--color-gray-800); }
+.text-gray-900 { color: var(--color-gray-900); }
+
+.text-green-50 { color: var(--color-green-50); }
+.text-green-100 { color: var(--color-green-100); }
+.text-green-500 { color: var(--color-green-500); }
+.text-green-600 { color: var(--color-green-600); }
+.text-green-700 { color: var(--color-green-700); }
+
+.text-red-50 { color: var(--color-red-50); }
+.text-red-100 { color: var(--color-red-100); }
+.text-red-200 { color: var(--color-red-200); }
+.text-red-500 { color: var(--color-red-500); }
+.text-red-600 { color: var(--color-red-600); }
+
+.text-blue-50 { color: var(--color-blue-50); }
+.text-blue-100 { color: var(--color-blue-100); }
+.text-blue-500 { color: var(--color-blue-500); }
+.text-blue-600 { color: var(--color-blue-600); }
+
+.text-yellow-50 { color: var(--color-yellow-50); }
+.text-yellow-100 { color: var(--color-yellow-100); }
+.text-yellow-500 { color: var(--color-yellow-500); }
+
+.text-white { color: var(--color-white); }
+.text-black { color: var(--color-black); }
+
+/* --- Background colors --- */
+.bg-white { background-color: var(--color-white); }
+.bg-black { background-color: var(--color-black); }
+
+.bg-primary-25 { background-color: var(--color-primary-25); }
+.bg-primary-50 { background-color: var(--color-primary-50); }
+.bg-primary-100 { background-color: var(--color-primary-100); }
+.bg-primary-200 { background-color: var(--color-primary-200); }
+.bg-primary-300 { background-color: var(--color-primary-300); }
+.bg-primary-400 { background-color: var(--color-primary-400); }
+.bg-primary-500 { background-color: var(--color-primary-500); }
+.bg-primary-600 { background-color: var(--color-primary-600); }
+.bg-primary-700 { background-color: var(--color-primary-700); }
+.bg-primary-800 { background-color: var(--color-primary-800); }
+.bg-primary-900 { background-color: var(--color-primary-900); }
+
+.bg-gray-25 { background-color: var(--color-gray-25); }
+.bg-gray-50 { background-color: var(--color-gray-50); }
+.bg-gray-75 { background-color: var(--color-gray-75); }
+.bg-gray-100 { background-color: var(--color-gray-100); }
+.bg-gray-150 { background-color: var(--color-gray-150); }
+.bg-gray-200 { background-color: var(--color-gray-200); }
+.bg-gray-250 { background-color: var(--color-gray-250); }
+.bg-gray-300 { background-color: var(--color-gray-300); }
+.bg-gray-400 { background-color: var(--color-gray-400); }
+.bg-gray-500 { background-color: var(--color-gray-500); }
+.bg-gray-600 { background-color: var(--color-gray-600); }
+.bg-gray-700 { background-color: var(--color-gray-700); }
+.bg-gray-800 { background-color: var(--color-gray-800); }
+.bg-gray-900 { background-color: var(--color-gray-900); }
+
+.bg-green-50 { background-color: var(--color-green-50); }
+.bg-green-100 { background-color: var(--color-green-100); }
+.bg-green-500 { background-color: var(--color-green-500); }
+.bg-green-600 { background-color: var(--color-green-600); }
+.bg-green-700 { background-color: var(--color-green-700); }
+
+.bg-red-50 { background-color: var(--color-red-50); }
+.bg-red-100 { background-color: var(--color-red-100); }
+.bg-red-200 { background-color: var(--color-red-200); }
+.bg-red-500 { background-color: var(--color-red-500); }
+.bg-red-600 { background-color: var(--color-red-600); }
+
+.bg-blue-50 { background-color: var(--color-blue-50); }
+.bg-blue-100 { background-color: var(--color-blue-100); }
+.bg-blue-500 { background-color: var(--color-blue-500); }
+.bg-blue-600 { background-color: var(--color-blue-600); }
+
+.bg-yellow-50 { background-color: var(--color-yellow-50); }
+.bg-yellow-100 { background-color: var(--color-yellow-100); }
+.bg-yellow-500 { background-color: var(--color-yellow-500); }
+
+/* --- Spacing --- */
+/* Margin - All sides */
+.m-0 { margin: var(--space-0); }
+.m-1 { margin: var(--space-1); }
+.m-2 { margin: var(--space-2); }
+.m-3 { margin: var(--space-3); }
+.m-4 { margin: var(--space-4); }
+.m-5 { margin: var(--space-5); }
+.m-6 { margin: var(--space-6); }
+.m-7 { margin: var(--space-7); }
+.m-8 { margin: var(--space-8); }
+.m-9 { margin: var(--space-9); }
+.m-10 { margin: var(--space-10); }
+.m-11 { margin: var(--space-11); }
+.m-12 { margin: var(--space-12); }
+.m-14 { margin: var(--space-14); }
+.m-16 { margin: var(--space-16); }
+
+/* Margin - Horizontal */
+.mx-0 { margin-left: var(--space-0); margin-right: var(--space-0); }
+.mx-1 { margin-left: var(--space-1); margin-right: var(--space-1); }
+.mx-2 { margin-left: var(--space-2); margin-right: var(--space-2); }
+.mx-3 { margin-left: var(--space-3); margin-right: var(--space-3); }
+.mx-4 { margin-left: var(--space-4); margin-right: var(--space-4); }
+.mx-5 { margin-left: var(--space-5); margin-right: var(--space-5); }
+.mx-6 { margin-left: var(--space-6); margin-right: var(--space-6); }
+.mx-7 { margin-left: var(--space-7); margin-right: var(--space-7); }
+.mx-8 { margin-left: var(--space-8); margin-right: var(--space-8); }
+.mx-9 { margin-left: var(--space-9); margin-right: var(--space-9); }
+.mx-10 { margin-left: var(--space-10); margin-right: var(--space-10); }
+.mx-11 { margin-left: var(--space-11); margin-right: var(--space-11); }
+.mx-12 { margin-left: var(--space-12); margin-right: var(--space-12); }
+.mx-14 { margin-left: var(--space-14); margin-right: var(--space-14); }
+.mx-16 { margin-left: var(--space-16); margin-right: var(--space-16); }
+.mx-auto { margin-left: auto; margin-right: auto; }
+
+/* Margin - Vertical */
+.my-0 { margin-top: var(--space-0); margin-bottom: var(--space-0); }
+.my-1 { margin-top: var(--space-1); margin-bottom: var(--space-1); }
+.my-2 { margin-top: var(--space-2); margin-bottom: var(--space-2); }
+.my-3 { margin-top: var(--space-3); margin-bottom: var(--space-3); }
+.my-4 { margin-top: var(--space-4); margin-bottom: var(--space-4); }
+.my-5 { margin-top: var(--space-5); margin-bottom: var(--space-5); }
+.my-6 { margin-top: var(--space-6); margin-bottom: var(--space-6); }
+.my-7 { margin-top: var(--space-7); margin-bottom: var(--space-7); }
+.my-8 { margin-top: var(--space-8); margin-bottom: var(--space-8); }
+.my-9 { margin-top: var(--space-9); margin-bottom: var(--space-9); }
+.my-10 { margin-top: var(--space-10); margin-bottom: var(--space-10); }
+.my-11 { margin-top: var(--space-11); margin-bottom: var(--space-11); }
+.my-12 { margin-top: var(--space-12); margin-bottom: var(--space-12); }
+.my-14 { margin-top: var(--space-14); margin-bottom: var(--space-14); }
+.my-16 { margin-top: var(--space-16); margin-bottom: var(--space-16); }
+
+/* Margin - Top */
+.mt-0 { margin-top: var(--space-0); }
+.mt-1 { margin-top: var(--space-1); }
+.mt-2 { margin-top: var(--space-2); }
+.mt-3 { margin-top: var(--space-3); }
+.mt-4 { margin-top: var(--space-4); }
+.mt-5 { margin-top: var(--space-5); }
+.mt-6 { margin-top: var(--space-6); }
+.mt-7 { margin-top: var(--space-7); }
+.mt-8 { margin-top: var(--space-8); }
+.mt-9 { margin-top: var(--space-9); }
+.mt-10 { margin-top: var(--space-10); }
+.mt-11 { margin-top: var(--space-11); }
+.mt-12 { margin-top: var(--space-12); }
+.mt-14 { margin-top: var(--space-14); }
+.mt-16 { margin-top: var(--space-16); }
+
+/* Margin - Bottom */
+.mb-0 { margin-bottom: var(--space-0); }
+.mb-1 { margin-bottom: var(--space-1); }
+.mb-2 { margin-bottom: var(--space-2); }
+.mb-3 { margin-bottom: var(--space-3); }
+.mb-4 { margin-bottom: var(--space-4); }
+.mb-5 { margin-bottom: var(--space-5); }
+.mb-6 { margin-bottom: var(--space-6); }
+.mb-7 { margin-bottom: var(--space-7); }
+.mb-8 { margin-bottom: var(--space-8); }
+.mb-9 { margin-bottom: var(--space-9); }
+.mb-10 { margin-bottom: var(--space-10); }
+.mb-11 { margin-bottom: var(--space-11); }
+.mb-12 { margin-bottom: var(--space-12); }
+.mb-14 { margin-bottom: var(--space-14); }
+.mb-16 { margin-bottom: var(--space-16); }
+
+/* Margin - Left */
+.ml-0 { margin-left: var(--space-0); }
+.ml-1 { margin-left: var(--space-1); }
+.ml-2 { margin-left: var(--space-2); }
+.ml-3 { margin-left: var(--space-3); }
+.ml-4 { margin-left: var(--space-4); }
+.ml-5 { margin-left: var(--space-5); }
+.ml-6 { margin-left: var(--space-6); }
+.ml-7 { margin-left: var(--space-7); }
+.ml-8 { margin-left: var(--space-8); }
+.ml-9 { margin-left: var(--space-9); }
+.ml-10 { margin-left: var(--space-10); }
+.ml-11 { margin-left: var(--space-11); }
+.ml-12 { margin-left: var(--space-12); }
+.ml-14 { margin-left: var(--space-14); }
+.ml-16 { margin-left: var(--space-16); }
+
+/* Margin - Right */
+.mr-0 { margin-right: var(--space-0); }
+.mr-1 { margin-right: var(--space-1); }
+.mr-2 { margin-right: var(--space-2); }
+.mr-3 { margin-right: var(--space-3); }
+.mr-4 { margin-right: var(--space-4); }
+.mr-5 { margin-right: var(--space-5); }
+.mr-6 { margin-right: var(--space-6); }
+.mr-7 { margin-right: var(--space-7); }
+.mr-8 { margin-right: var(--space-8); }
+.mr-9 { margin-right: var(--space-9); }
+.mr-10 { margin-right: var(--space-10); }
+.mr-11 { margin-right: var(--space-11); }
+.mr-12 { margin-right: var(--space-12); }
+.mr-14 { margin-right: var(--space-14); }
+.mr-16 { margin-right: var(--space-16); }
+
+/* Padding - All sides */
+.p-0 { padding: var(--space-0); }
+.p-1 { padding: var(--space-1); }
+.p-2 { padding: var(--space-2); }
+.p-3 { padding: var(--space-3); }
+.p-4 { padding: var(--space-4); }
+.p-5 { padding: var(--space-5); }
+.p-6 { padding: var(--space-6); }
+.p-7 { padding: var(--space-7); }
+.p-8 { padding: var(--space-8); }
+.p-9 { padding: var(--space-9); }
+.p-10 { padding: var(--space-10); }
+.p-11 { padding: var(--space-11); }
+.p-12 { padding: var(--space-12); }
+.p-14 { padding: var(--space-14); }
+.p-16 { padding: var(--space-16); }
+
+/* Padding - Horizontal */
+.px-0 { padding-left: var(--space-0); padding-right: var(--space-0); }
+.px-1 { padding-left: var(--space-1); padding-right: var(--space-1); }
+.px-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
+.px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
+.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
+.px-5 { padding-left: var(--space-5); padding-right: var(--space-5); }
+.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }
+.px-7 { padding-left: var(--space-7); padding-right: var(--space-7); }
+.px-8 { padding-left: var(--space-8); padding-right: var(--space-8); }
+.px-9 { padding-left: var(--space-9); padding-right: var(--space-9); }
+.px-10 { padding-left: var(--space-10); padding-right: var(--space-10); }
+.px-11 { padding-left: var(--space-11); padding-right: var(--space-11); }
+.px-12 { padding-left: var(--space-12); padding-right: var(--space-12); }
+.px-14 { padding-left: var(--space-14); padding-right: var(--space-14); }
+.px-16 { padding-left: var(--space-16); padding-right: var(--space-16); }
+
+/* Padding - Vertical */
+.py-0 { padding-top: var(--space-0); padding-bottom: var(--space-0); }
+.py-1 { padding-top: var(--space-1); padding-bottom: var(--space-1); }
+.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
+.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
+.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
+.py-5 { padding-top: var(--space-5); padding-bottom: var(--space-5); }
+.py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }
+.py-7 { padding-top: var(--space-7); padding-bottom: var(--space-7); }
+.py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); }
+.py-9 { padding-top: var(--space-9); padding-bottom: var(--space-9); }
+.py-10 { padding-top: var(--space-10); padding-bottom: var(--space-10); }
+.py-11 { padding-top: var(--space-11); padding-bottom: var(--space-11); }
+.py-12 { padding-top: var(--space-12); padding-bottom: var(--space-12); }
+.py-14 { padding-top: var(--space-14); padding-bottom: var(--space-14); }
+.py-16 { padding-top: var(--space-16); padding-bottom: var(--space-16); }
+
+/* Padding - Top */
+.pt-0 { padding-top: var(--space-0); }
+.pt-1 { padding-top: var(--space-1); }
+.pt-2 { padding-top: var(--space-2); }
+.pt-3 { padding-top: var(--space-3); }
+.pt-4 { padding-top: var(--space-4); }
+.pt-5 { padding-top: var(--space-5); }
+.pt-6 { padding-top: var(--space-6); }
+.pt-7 { padding-top: var(--space-7); }
+.pt-8 { padding-top: var(--space-8); }
+.pt-9 { padding-top: var(--space-9); }
+.pt-10 { padding-top: var(--space-10); }
+.pt-11 { padding-top: var(--space-11); }
+.pt-12 { padding-top: var(--space-12); }
+.pt-14 { padding-top: var(--space-14); }
+.pt-16 { padding-top: var(--space-16); }
+
+/* Padding - Bottom */
+.pb-0 { padding-bottom: var(--space-0); }
+.pb-1 { padding-bottom: var(--space-1); }
+.pb-2 { padding-bottom: var(--space-2); }
+.pb-3 { padding-bottom: var(--space-3); }
+.pb-4 { padding-bottom: var(--space-4); }
+.pb-5 { padding-bottom: var(--space-5); }
+.pb-6 { padding-bottom: var(--space-6); }
+.pb-7 { padding-bottom: var(--space-7); }
+.pb-8 { padding-bottom: var(--space-8); }
+.pb-9 { padding-bottom: var(--space-9); }
+.pb-10 { padding-bottom: var(--space-10); }
+.pb-11 { padding-bottom: var(--space-11); }
+.pb-12 { padding-bottom: var(--space-12); }
+.pb-14 { padding-bottom: var(--space-14); }
+.pb-16 { padding-bottom: var(--space-16); }
+
+/* Padding - Left */
+.pl-0 { padding-left: var(--space-0); }
+.pl-1 { padding-left: var(--space-1); }
+.pl-2 { padding-left: var(--space-2); }
+.pl-3 { padding-left: var(--space-3); }
+.pl-4 { padding-left: var(--space-4); }
+.pl-5 { padding-left: var(--space-5); }
+.pl-6 { padding-left: var(--space-6); }
+.pl-7 { padding-left: var(--space-7); }
+.pl-8 { padding-left: var(--space-8); }
+.pl-9 { padding-left: var(--space-9); }
+.pl-10 { padding-left: var(--space-10); }
+.pl-11 { padding-left: var(--space-11); }
+.pl-12 { padding-left: var(--space-12); }
+.pl-14 { padding-left: var(--space-14); }
+.pl-16 { padding-left: var(--space-16); }
+
+/* Padding - Right */
+.pr-0 { padding-right: var(--space-0); }
+.pr-1 { padding-right: var(--space-1); }
+.pr-2 { padding-right: var(--space-2); }
+.pr-3 { padding-right: var(--space-3); }
+.pr-4 { padding-right: var(--space-4); }
+.pr-5 { padding-right: var(--space-5); }
+.pr-6 { padding-right: var(--space-6); }
+.pr-7 { padding-right: var(--space-7); }
+.pr-8 { padding-right: var(--space-8); }
+.pr-9 { padding-right: var(--space-9); }
+.pr-10 { padding-right: var(--space-10); }
+.pr-11 { padding-right: var(--space-11); }
+.pr-12 { padding-right: var(--space-12); }
+.pr-14 { padding-right: var(--space-14); }
+.pr-16 { padding-right: var(--space-16); }
+
+/* --- Border --- */
+.border { border: 1px solid var(--color-gray-200); }
+.border-0 { border-width: 0; }
+.border-2 { border-width: 2px; }
+.border-4 { border-width: 4px; }
+.border-t { border-top: 1px solid var(--color-gray-200); }
+.border-r { border-right: 1px solid var(--color-gray-200); }
+.border-b { border-bottom: 1px solid var(--color-gray-200); }
+.border-l { border-left: 1px solid var(--color-gray-200); }
+.border-x { border-left: 1px solid var(--color-gray-200); border-right: 1px solid var(--color-gray-200); }
+.border-y { border-top: 1px solid var(--color-gray-200); border-bottom: 1px solid var(--color-gray-200); }
+
+/* Border colors - Gray */
+.border-gray-200 { border-color: var(--color-gray-200); }
+.border-gray-300 { border-color: var(--color-gray-300); }
+.border-gray-400 { border-color: var(--color-gray-400); }
+.border-gray-500 { border-color: var(--color-gray-500); }
+
+/* Border colors - Primary */
+.border-primary-400 { border-color: var(--color-primary-400); }
+.border-primary-500 { border-color: var(--color-primary-500); }
+.border-primary-600 { border-color: var(--color-primary-600); }
+
+/* Border radius */
+.rounded-none { border-radius: 0; }
+.rounded-sm { border-radius: var(--radius-sm); }
+.rounded { border-radius: var(--radius-md); }
+.rounded-md { border-radius: var(--radius-md); }
+.rounded-lg { border-radius: var(--radius-lg); }
+.rounded-xl { border-radius: var(--radius-xl); }
+.rounded-full { border-radius: var(--radius-full); }
+
+/* --- Position --- */
+.static { position: static; }
+.relative { position: relative; }
+.absolute { position: absolute; }
+.fixed { position: fixed; }
+.sticky { position: sticky; }
+
+.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
+
+.top-0 { top: 0; }
+.right-0 { right: 0; }
+.bottom-0 { bottom: 0; }
+.left-0 { left: 0; }
+
+.top-auto { top: auto; }
+.right-auto { right: auto; }
+.bottom-auto { bottom: auto; }
+.left-auto { left: auto; }
+
+/* Position with spacing scale */
+.top-1 { top: var(--space-1); }
+.top-2 { top: var(--space-2); }
+.top-3 { top: var(--space-3); }
+.top-4 { top: var(--space-4); }
+.top-5 { top: var(--space-5); }
+.top-6 { top: var(--space-6); }
+.top-8 { top: var(--space-8); }
+.top-12 { top: var(--space-12); }
+.top-16 { top: var(--space-16); }
+
+.right-1 { right: var(--space-1); }
+.right-2 { right: var(--space-2); }
+.right-3 { right: var(--space-3); }
+.right-4 { right: var(--space-4); }
+.right-5 { right: var(--space-5); }
+.right-6 { right: var(--space-6); }
+.right-8 { right: var(--space-8); }
+.right-12 { right: var(--space-12); }
+.right-16 { right: var(--space-16); }
+
+.bottom-1 { bottom: var(--space-1); }
+.bottom-2 { bottom: var(--space-2); }
+.bottom-3 { bottom: var(--space-3); }
+.bottom-4 { bottom: var(--space-4); }
+.bottom-5 { bottom: var(--space-5); }
+.bottom-6 { bottom: var(--space-6); }
+.bottom-8 { bottom: var(--space-8); }
+.bottom-12 { bottom: var(--space-12); }
+.bottom-16 { bottom: var(--space-16); }
+
+.left-1 { left: var(--space-1); }
+.left-2 { left: var(--space-2); }
+.left-3 { left: var(--space-3); }
+.left-4 { left: var(--space-4); }
+.left-5 { left: var(--space-5); }
+.left-6 { left: var(--space-6); }
+.left-8 { left: var(--space-8); }
+.left-12 { left: var(--space-12); }
+.left-16 { left: var(--space-16); }
+
+/* --- Overflow --- */
+.overflow-auto { overflow: auto; }
+.overflow-hidden { overflow: hidden; }
+.overflow-visible { overflow: visible; }
+.overflow-scroll { overflow: scroll; }
+
+.overflow-x-auto { overflow-x: auto; }
+.overflow-x-hidden { overflow-x: hidden; }
+.overflow-x-visible { overflow-x: visible; }
+.overflow-x-scroll { overflow-x: scroll; }
+
+.overflow-y-auto { overflow-y: auto; }
+.overflow-y-hidden { overflow-y: hidden; }
+.overflow-y-visible { overflow-y: visible; }
+.overflow-y-scroll { overflow-y: scroll; }
+
+/* --- Z-Index --- */
+.z-0 { z-index: 0; }
+.z-10 { z-index: 10; }
+.z-20 { z-index: 20; }
+.z-30 { z-index: 30; }
+.z-40 { z-index: 40; }
+.z-50 { z-index: 50; }
+
+/* --- Width / Height --- */
+.w-auto { width: auto; }
+.w-1\/2 { width: 50%; }
+.w-1\/3 { width: 33.333333%; }
+.w-2\/3 { width: 66.666667%; }
+.w-1\/4 { width: 25%; }
+.w-3\/4 { width: 75%; }
+.w-full { width: 100%; }
+.w-screen { width: 100vw; }
+
+.min-w-0 { min-width: 0; }
+.min-w-full { min-width: 100%; }
+
+.h-auto { height: auto; }
+.h-1\/2 { height: 50%; }
+.h-full { height: 100%; }
+.h-screen { height: 100vh; }
+.h-12 { height: 3rem; }
+
+.min-h-0 { min-height: 0; }
+.min-h-full { min-height: 100%; }
+.min-h-screen { min-height: 100vh; }
+
+/* --- Aspect Ratio --- */
+.aspect-square { aspect-ratio: 1 / 1; }
+
+/* --- Max Width Utilities --- */
+.max-w-xs { max-width: var(--max-w-xs); }
+.max-w-sm { max-width: var(--max-w-sm); }
+.max-w-md { max-width: var(--max-w-md); }
+.max-w-lg { max-width: var(--max-w-lg); }
+.max-w-xl { max-width: var(--max-w-xl); }
+.max-w-2xl { max-width: var(--max-w-2xl); }
+.max-w-3xl { max-width: var(--max-w-3xl); }
+
+/* --- Responsive utilities (md breakpoint) --- */
+@media (min-width: 769px) {
+  /* Display */
+  .md\:block { display: block; }
+  .md\:flex { display: flex; }
+  .md\:inline-flex { display: inline-flex; }
+  .md\:hidden { display: none; }
+
+  /* Flex direction */
+  .md\:flex-row { flex-direction: row; }
+  .md\:flex-col { flex-direction: column; }
+
+  /* Width */
+  .md\:w-auto { width: auto; }
+  .md\:w-1\/2 { width: 50%; }
+  .md\:w-1\/3 { width: 33.333333%; }
+  .md\:w-2\/3 { width: 66.666667%; }
+  .md\:w-1\/4 { width: 25%; }
+  .md\:w-3\/4 { width: 75%; }
+  .md\:w-full { width: 100%; }
+
+  /* Max width */
+  .md\:max-w-xs { max-width: var(--max-w-xs); }
+  .md\:max-w-sm { max-width: var(--max-w-sm); }
+  .md\:max-w-md { max-width: var(--max-w-md); }
+  .md\:max-w-lg { max-width: var(--max-w-lg); }
+  .md\:max-w-xl { max-width: var(--max-w-xl); }
+  .md\:max-w-2xl { max-width: var(--max-w-2xl); }
+  .md\:max-w-3xl { max-width: var(--max-w-3xl); }
+}
+
+/* --- Underline for links --- */
+.underline { text-decoration: underline; }
+
+/* --- Text truncation --- */
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* --- List styles --- */
+.list-decimal { list-style-type: decimal; }
+.list-inside { list-style-position: inside; }
+.space-y-1 > * + * { margin-top: var(--space-1); }
+.space-y-2 > * + * { margin-top: var(--space-2); }
diff --git a/favicon.ico b/favicon.ico
new file mode 100644
index 0000000..f631a46
Binary files /dev/null and b/favicon.ico differ
diff --git a/index.html b/index.html
index 1198cd2..fe4931c 100644
--- a/index.html
+++ b/index.html
@@ -3,260 +3,13 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>TRMNL Custom Logo Uploader</title>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <link rel="icon" href="favicon.ico" type="image/x-icon">
+    <title>TRMNL Tailor - Custom Branding Tool</title>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=EB+Garamond:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="design-system.css">
     <script type="module" src="app.js"></script>
     <script type="module" src="https://unpkg.com/@zjwhitehead/esp-web-tools@10.2.0-b1/dist/web/install-button.js?module"></script>
     <script src="g5_wasm.js"></script>
-    <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-
-        body {
-            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-            background: #fff;
-            color: #111;
-            line-height: 1.5;
-            min-height: 100vh;
-        }
-
-        .container {
-            max-width: 1100px;
-            margin: 0 auto;
-            padding: 0 24px;
-        }
-
-        header {
-            padding: 48px 0 32px;
-            border-bottom: 1px solid #e5e7eb;
-            margin-bottom: 48px;
-        }
-
-        .logo {
-            margin-bottom: 24px;
-        }
-
-        .logo svg {
-            height: 32px;
-            width: auto;
-        }
-
-        h1 {
-            font-size: 48px;
-            font-weight: 700;
-            letter-spacing: -0.03em;
-            margin-bottom: 16px;
-        }
-
-        .subtitle {
-            font-size: 18px;
-            color: #6b7280;
-            max-width: 600px;
-        }
-
-        .grid {
-            display: grid;
-            grid-template-columns: repeat(2, 1fr);
-            gap: 24px;
-            margin-bottom: 64px;
-        }
-
-        .card {
-            background: #fff;
-            border: 1px solid #e5e7eb;
-            border-radius: 8px;
-            padding: 32px;
-        }
-
-        .card h2 {
-            font-size: 20px;
-            font-weight: 600;
-            margin-bottom: 20px;
-        }
-
-        .upload-zone {
-            border: 2px dashed #d1d5db;
-            border-radius: 8px;
-            padding: 48px 24px;
-            text-align: center;
-            cursor: pointer;
-            transition: all 0.2s;
-            background: #fafafa;
-        }
-
-        .upload-zone:hover {
-            border-color: #10b981;
-            background: #f0fdf4;
-        }
-
-        .upload-zone.active {
-            border-color: #10b981;
-            background: #f0fdf4;
-        }
-
-        .upload-icon {
-            font-size: 32px;
-            margin-bottom: 16px;
-        }
-
-        .upload-text {
-            font-weight: 500;
-            margin-bottom: 8px;
-        }
-
-        .upload-hint {
-            font-size: 14px;
-            color: #9ca3af;
-        }
-
-        input[type="file"] {
-            display: none;
-        }
-
-        .preview {
-            margin-top: 24px;
-            display: none;
-        }
-
-        .preview img {
-            width: 100%;
-            border-radius: 6px;
-            border: 1px solid #e5e7eb;
-            margin-bottom: 12px;
-        }
-
-        .preview-info {
-            font-size: 14px;
-            color: #6b7280;
-        }
-
-        .message {
-            padding: 12px 16px;
-            border-radius: 6px;
-            margin-top: 16px;
-            font-size: 14px;
-            display: none;
-        }
-
-        .message.error {
-            background: #fef2f2;
-            color: #dc2626;
-            border: 1px solid #fecaca;
-        }
-
-        .message.success {
-            background: #f0fdf4;
-            color: #059669;
-            border: 1px solid #a7f3d0;
-        }
-
-        .flash-card {
-            grid-column: 1 / -1;
-        }
-
-        .status {
-            display: flex;
-            gap: 24px;
-            margin-bottom: 32px;
-        }
-
-        .status-item {
-            display: flex;
-            align-items: center;
-            gap: 12px;
-        }
-
-        .dot {
-            width: 8px;
-            height: 8px;
-            border-radius: 50%;
-            background: #d1d5db;
-        }
-
-        .dot.ready {
-            background: #10b981;
-        }
-
-        .status-label {
-            font-size: 14px;
-            color: #6b7280;
-        }
-
-        .btn {
-            width: 100%;
-            padding: 16px;
-            font-size: 16px;
-            font-weight: 600;
-            border: none;
-            border-radius: 8px;
-            cursor: pointer;
-            transition: all 0.2s;
-            background: #10b981;
-            color: #fff;
-        }
-
-        .btn:hover:not(:disabled) {
-            background: #059669;
-        }
-
-        .btn:disabled {
-            background: #e5e7eb;
-            color: #9ca3af;
-            cursor: not-allowed;
-        }
-
-        .install-section {
-            margin-top: 32px;
-            padding-top: 32px;
-            border-top: 1px solid #e5e7eb;
-        }
-
-        .instructions {
-            padding: 20px;
-            background: #fafafa;
-            border-radius: 8px;
-        }
-
-        .instructions h3 {
-            font-size: 14px;
-            font-weight: 600;
-            text-transform: uppercase;
-            letter-spacing: 0.05em;
-            margin-bottom: 16px;
-        }
-
-        .instructions ol {
-            padding-left: 20px;
-            font-size: 14px;
-            color: #6b7280;
-        }
-
-        .instructions li {
-            margin-bottom: 5px;
-        }
-
-        footer {
-            border-top: 1px solid #e5e7eb;
-            padding: 32px 0;
-            margin-top: 64px;
-            text-align: center;
-            font-size: 14px;
-            color: #6b7280;
-        }
-
-        @media (max-width: 768px) {
-            .grid {
-                grid-template-columns: 1fr;
-            }
-
-            h1 {
-                font-size: 36px;
-            }
-        }
-    </style>
     <script type="module">
       import { createBinary } from './app.js';
 
@@ -266,20 +19,16 @@
           loaderInput: document.getElementById('loader-input'),
           logoZone: document.getElementById('logo-zone'),
           loaderZone: document.getElementById('loader-zone'),
-          logoPreview: document.getElementById('logo-preview'),
-          loaderPreview: document.getElementById('loader-preview'),
-          logoMsg: document.getElementById('logo-msg'),
-          loaderMsg: document.getElementById('loader-msg'),
-          logoDot: document.getElementById('logo-dot'),
-          loaderDot: document.getElementById('loader-dot'),
+          logoBadge: document.getElementById('logo-badge'),
+          loaderBadge: document.getElementById('loader-badge'),
           logoStatus: document.getElementById('logo-status'),
           loaderStatus: document.getElementById('loader-status'),
           generateBtn: document.getElementById('generate-btn')
         };
 
         let state = {
-          logo: { file: null, valid: false },
-          loader: { file: null, valid: false }
+          logo: { file: null, valid: false, objectURL: null, status: 'waiting' },
+          loader: { file: null, valid: false, objectURL: null, status: 'waiting' }
         };
 
         function validateImage(file, callback) {
@@ -300,62 +49,87 @@
           img.src = url;
         }
 
+        function getBadgeClass(status) {
+          if (status === 'ready') return 'badge badge-green';
+          if (status === 'invalid') return 'badge badge-red';
+          return 'badge badge-gray';
+        }
+
+        function getBadgeText(type) {
+          const status = state[type].status;
+          if (status === 'ready') return 'Ready';
+          if (status === 'invalid') return state[type].invalidReason || 'Invalid';
+          return 'Waiting';
+        }
+
         function updateUI() {
           const allValid = state.logo.valid && state.loader.valid;
           els.generateBtn.disabled = !allValid;
 
-          els.logoDot.classList.toggle('ready', state.logo.valid);
-          els.loaderDot.classList.toggle('ready', state.loader.valid);
-
-          els.logoStatus.textContent = state.logo.valid ? 'Ready' : 'Waiting';
-          els.loaderStatus.textContent = state.loader.valid ? 'Ready' : 'Waiting';
+          els.logoBadge.className = getBadgeClass(state.logo.status);
+          els.loaderBadge.className = getBadgeClass(state.loader.status);
+          els.logoStatus.textContent = getBadgeText('logo');
+          els.loaderStatus.textContent = getBadgeText('loader');
         }
 
         function handleFile(file, type) {
           const isLogo = type === 'logo';
           const zone = isLogo ? els.logoZone : els.loaderZone;
-          const preview = isLogo ? els.logoPreview : els.loaderPreview;
-          const msg = isLogo ? els.logoMsg : els.loaderMsg;
 
-          msg.style.display = 'none';
-          msg.className = 'message';
-          preview.style.display = 'none';
+          if (state[type].objectURL) {
+            URL.revokeObjectURL(state[type].objectURL);
+            state[type].objectURL = null;
+          }
+
+          // Remove background image element if it exists
+          const bgElement = zone.querySelector('.upload-zone-bg');
+          if (bgElement) {
+            bgElement.remove();
+          }
+          zone.style.backgroundImage = '';
+          zone.style.backgroundSize = '';
+          zone.style.backgroundPosition = '';
+          zone.style.backgroundRepeat = '';
+          zone.style.filter = '';
+          zone.style.transition = '';
+          zone.classList.remove('upload-zone--has-image');
 
           if (!file.type.startsWith('image/')) {
-            msg.textContent = 'Please upload an image file';
-            msg.classList.add('error');
-            msg.style.display = 'block';
+            state[type] = { file: null, valid: false, objectURL: null, status: 'invalid', invalidReason: 'Not an image' };
+            updateUI();
             return;
           }
 
-          zone.innerHTML = '<div class="upload-icon">⏳</div><div class="upload-text">Processing...</div>';
+          zone.innerHTML = `<div class="upload-text">Processing...</div><div class="upload-icon">⏳</div><div class="upload-hint">Max 800×480 pixels</div>`;
 
           validateImage(file, result => {
-            zone.innerHTML = `
-              <div class="upload-icon">📁</div>
-              <div class="upload-text">${file.name}</div>
-              <div class="upload-hint">Click to replace</div>
-            `;
-
             if (result.valid) {
-              preview.querySelector('img').src = result.url;
-              preview.querySelector('.preview-info').textContent =
-                `${result.width}×${result.height} • ${(file.size / 1024).toFixed(1)} KB`;
-              preview.style.display = 'block';
+              zone.classList.add('upload-zone--has-image');
+              zone.innerHTML = '';
+              
+              // Create separate element for background image
+              const bgElement = document.createElement('div');
+              bgElement.className = 'upload-zone-bg';
+              bgElement.style.backgroundImage = `url(${result.url})`;
+              bgElement.style.filter = 'blur(8px)';
+              zone.appendChild(bgElement);
+              
+              // Animate from blur to sharp
+              requestAnimationFrame(() => {
+                bgElement.style.transition = 'filter 0.4s ease-out';
+                bgElement.style.filter = 'blur(0)';
+              });
 
-              msg.textContent = `Valid image (${result.width}×${result.height})`;
-              msg.classList.add('success');
-              msg.style.display = 'block';
-
-              state[type] = { file, valid: true };
+              state[type] = { file, valid: true, objectURL: result.url, status: 'ready' };
             } else {
-              msg.textContent = result.width
-                ? `Invalid: ${result.width}×${result.height} (max 800×480)`
-                : 'Failed to load image';
-              msg.classList.add('error');
-              msg.style.display = 'block';
+              // Keep drop zone in original state - don't change it
+              zone.innerHTML = `
+                <div class="upload-text">Click or drag to upload</div>
+                <div class="upload-hint">Max 800×480 pixels</div>
+              `;
 
-              state[type] = { file: null, valid: false };
+              const invalidReason = result.width ? 'Too large' : 'Load failed';
+              state[type] = { file: null, valid: false, objectURL: null, status: 'invalid', invalidReason };
             }
 
             updateUI();
@@ -363,8 +137,10 @@
         }
 
         function setupUpload(zone, input, type) {
+          // Make zone clickable
           zone.onclick = () => input.click();
 
+          // Handle drag events on the zone itself
           zone.ondragover = e => {
             e.preventDefault();
             zone.classList.add('active');
@@ -394,7 +170,7 @@
           btn.disabled = true;
 
           try {
-            const blob = await createBinary();
+            const blob = await createBinary(state.logo.file, state.loader.file);
             const manifest = {
               name: "TRMNL Firmware",
               new_install_prevent_erase: true,
@@ -408,10 +184,7 @@
             document.querySelector("esp-web-install-button").manifest = URL.createObjectURL(manifestBlob);
 
             btn.textContent = 'Ready to Flash!';
-            setTimeout(() => {
-              btn.textContent = '';
-              btn.disabled = true;
-            }, 2000);
+            btn.disabled = true;
           } catch (error) {
             console.error(error);
             btn.textContent = 'Error - Try Again';
@@ -424,97 +197,216 @@
 
         updateUI();
       })();
+
+      function showError(message) {
+        const errorText = document.getElementById("error-text");
+        const errorMessage = document.getElementById("error-message");
+        if (errorText && errorMessage) {
+          errorText.textContent = message;
+          errorMessage.classList.remove("hidden");
+        }
+      }
+
+      function checkForBrowserError(installButton) {
+        const shadowText = installButton.shadowRoot?.textContent?.trim();
+        if (shadowText?.includes('Your browser does not support')) {
+          showError(shadowText);
+          installButton.style.display = 'none';
+          return true;
+        }
+        return false;
+      }
+
+      function setupErrorHandling() {
+        const installButton = document.querySelector("esp-web-install-button");
+        if (!installButton) return;
+
+        customElements.whenDefined('esp-web-install-button').then(() => {
+          if (!checkForBrowserError(installButton)) {
+            setTimeout(() => checkForBrowserError(installButton), 25);
+            setTimeout(() => checkForBrowserError(installButton), 200);
+          }
+        });
+      }
+
+      if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', setupErrorHandling);
+      } else {
+        setupErrorHandling();
+      }
     </script>
+    <style>
+      :root {
+        --esp-tools-button-color: #f8654b;
+        --esp-tools-button-text-color: #ffffff;
+        --esp-tools-button-border-radius: .5rem;
+      }
+    </style>
 </head>
 <body>
 <div class="container">
-    <header>
-        <a class="logo" href="https://trmnl.com/">
-            <svg viewBox="0 0 200 60" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <text x="0" y="45" font-family="Inter, system-ui, sans-serif" font-size="48" font-weight="700" fill="#000" letter-spacing="-0.02em">TRMNL</text>
-            </svg>
-        </a>
+    <header class="header">
+        <!-- TRMNL Glyph -->
+        <svg class="header-glyph" viewBox="0 0 90 90" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path fill-rule="evenodd" d="M24.07,6.34l23.59,8.88-4.38,11.73-23.59-8.88,4.38-11.73Z" fill="currentColor"/>
+            <path fill-rule="evenodd" d="M61.89,3.44l7.79,24.06-11.87,3.87-7.79-24.06,11.87-3.87Z" fill="currentColor"/>
+            <path fill-rule="evenodd" d="M87.73,31.34l-13.88,21.12-10.42-6.9,13.88-21.12,10.42,6.9Z" fill="currentColor"/>
+            <path fill-rule="evenodd" d="M82.12,69.01l-25.1,2.27-1.12-12.48,25.1-2.27,1.12,12.48Z" fill="currentColor"/>
+            <path fill-rule="evenodd" d="M49.29,88.09l-17.42-18.28,9.02-8.66,17.42,18.28-9.02,8.66Z" fill="currentColor"/>
+            <path fill-rule="evenodd" d="M13.96,74.23l3.38-25.07,12.37,1.68-3.38,25.07-12.37-1.68Z" fill="currentColor"/>
+            <path fill-rule="evenodd" d="M2.73,37.82l21.63-12.98,6.4,10.75-21.63,12.98-6.4-10.75Z" fill="currentColor"/>
+        </svg>
+        <p class="eyebrow">Custom branding tool</p>
         <h1>Tailor your TRMNL</h1>
-        <p class="subtitle">Upload custom logo and loader images to your TRMNL. Maximum 800×480 pixels.</p>
+        <p class="subtitle">Upload custom splash and loader images. Flash them directly to your device via USB - no coding required.</p>
     </header>
 
-    <div class="grid">
-        <div class="card">
-            <h2>Logo Image</h2>
-            <div class="upload-zone" id="logo-zone">
-                <div class="upload-icon">📁</div>
-                <div class="upload-text">Click or drag logo</div>
-                <div class="upload-hint">Max 800×480 pixels</div>
-            </div>
-            <input type="file" id="logo-input" accept="image/*">
-            <div class="message" id="logo-msg"></div>
-            <div class="preview" id="logo-preview">
-                <img alt="Logo preview">
-                <div class="preview-info"></div>
-            </div>
-        </div>
-
-        <div class="card">
-            <h2>Loader Image</h2>
-            <div class="upload-zone" id="loader-zone">
-                <div class="upload-icon">📁</div>
-                <div class="upload-text">Click or drag loader</div>
-                <div class="upload-hint">Max 800×480 pixels</div>
-            </div>
-            <input type="file" id="loader-input" accept="image/*">
-            <div class="message" id="loader-msg"></div>
-            <div class="preview" id="loader-preview">
-                <img alt="Loader preview">
-                <div class="preview-info"></div>
-            </div>
-        </div>
-
-        <div class="card flash-card">
-            <h2>Upload Firmware</h2>
-
-            <div class="status">
-                <div class="status-item">
-                    <div class="dot" id="logo-dot"></div>
-                    <span class="status-label">Logo: <span id="logo-status">Waiting</span></span>
+    <div class="grid grid-2-md">
+        <div>
+            <div class="steps md:max-w-lg">
+                <div class="step">
+                    <p class="step-title">
+                        <span class="step-number">1</span>
+                        <span>Upload images</span>
+                    </p>
+                    <p class="step-content">Upload splash and loader images (max 800×480 pixels).</p>
                 </div>
-                <div class="status-item">
-                    <div class="dot" id="loader-dot"></div>
-                    <span class="status-label">Loader: <span id="loader-status">Waiting</span></span>
+
+                <div class="step">
+                    <p class="step-title">
+                        <span class="step-number">2</span>
+                        <span>Generate binary</span>
+                    </p>
+                    <p class="step-content">Click the 'Generate Binary' button.</p>
+                </div>
+
+                <div class="step">
+                    <p class="step-title">
+                        <span class="step-number">3</span>
+                        <span>Plug in your device</span>
+                    </p>
+                    <p class="step-content">Use a USB-C cable to connect your TRMNL to your computer.</p>
+                </div>
+
+                <div class="step">
+                    <p class="step-title">
+                        <span class="step-number">4</span>
+                        <span>Enter 'Flashing mode'</span>
+                    </p>
+                    <ol class="step-list">
+                        <li>Turn off the device by flipping the power switch to 'OFF'</li>
+                        <li>While pressing down on the circular button, flip the power switch to 'ON'</li>
+                        <li>Let go of the circular button</li>
+                    </ol>
+                </div>
+
+                <div class="step">
+                    <p class="step-title">
+                        <span class="step-number">5</span>
+                        <span>Flash firmware</span>
+                    </p>
+                    <ol class="step-list">
+                        <li>Click the 'Connect' button above</li>
+                        <li>Select 'USB JTAG/serial...' from the list</li>
+                        <li>Select 'Install' from the popup menu and confirm</li>
+                        <li>Wait for the device to write brand binary (this may take up to a minute)</li>
+                        <li>You should see a confirmation message within the popup menu</li>
+                    </ol>
+                </div>
+
+                <div class="step">
+                    <p class="step-title">
+                        <span class="step-number">6</span>
+                        <span>Restart your device</span>
+                    </p>
+                    <ol class="step-list">
+                        <li>Turn the device off by flipping the power switch to 'OFF'</li>
+                        <li>Wait approximately 15 seconds</li>
+                        <li>Flip the power switch to 'ON'</li>
+                    </ol>
+                </div>
+            </div>
+        </div>
+
+        <div class="flex flex-col gap-6">
+            <div class="card">
+                <div class="flex flex-col gap-6">
+                    <h2>Upload Images</h2>
+
+                    <div class="flex flex-col gap-5">
+                        <div class="grid grid-2 gap-5">
+                            <div class="flex flex-col">
+                                <div class="upload-zone aspect-square" id="logo-zone">
+                                    <div class="upload-text">Click or drag to upload</div>
+                                    <div class="upload-hint">Max 800×480 pixels</div>
+                                </div>
+                                <div class="flex justify-between items-center mt-4">
+                                    <span class="upload-status-heading">Splash image</span>
+                                    <span class="badge badge-gray" id="logo-badge"><span id="logo-status">Waiting</span></span>
+                                </div>
+                            </div>
+
+                            <div class="flex flex-col">
+                                <div class="upload-zone aspect-square" id="loader-zone">
+                                    <div class="upload-text">Click or drag to upload</div>
+                                    <div class="upload-hint">Max 800×480 pixels</div>
+                                </div>
+                                <div class="flex justify-between items-center mt-4">
+                                    <span class="upload-status-heading">Loader image</span>
+                                    <span class="badge badge-gray" id="loader-badge"><span id="loader-status">Waiting</span></span>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="grid grid-2 gap-5">
+                            <div class="field-group">
+                                <input type="file" id="logo-input" accept="image/*">
+                            </div>
+
+                            <div class="field-group">
+                                <input type="file" id="loader-input" accept="image/*">
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </div>
 
-            <button class="btn" id="generate-btn" disabled>Generate Binary</button>
+            <div class="card">
+                <div class="flex flex-col gap-6">
+                    <h2>Generate binary</h2>
 
-            <div class="install-section">
-                <esp-web-install-button></esp-web-install-button>
+                    <button class="btn btn-lg btn-primary" id="generate-btn" disabled>Generate Binary</button>
+                </div>
             </div>
-        </div>
-        <div class="card flash-card">
-            <h2>Instructions</h2>
-            <div class="instructions">
-                <ol>
-                    <li>Upload logo and loader images (max 800×480 pixels)</li>
-                    <li>Click 'Generate Binary'</li>
-                    <li>Plug in your device via USB</li>
-                    <li>Enter Flashing mode</li>
-                        <ol>1. Turn off the device by flipping the power switch to 'OFF'</ol>
-                        <ol>2. While pressing down on the circular button, flip the power switch to 'ON'</ol>
-                        <ol>3. Let go of the circular button</ol>
-                    <li>Upload Brand Binary to device</li>
-                        <ol>1. Click the 'Connect' button below</ol>
-                        <ol>2. Select 'USB JTAG/serial...' from the list</ol>
-                        <ol>3. Select 'Install' from the popup menu and confirm</ol>
-                        <ol>4. Wait for the device to write brand binary (this may take upto a minute)</ol>
-                        <ol>5. You should see a confirmation message within the popup menu</ol>
-                    <li>Step 5 - Restart your device </li>
-                        <ol>1. Turn the device off by flipping the power switch to 'OFF'</ol>
-                        <ol>2. Wait approximately 15 seconds</ol>
-                        <ol>3. Flip the power switch to 'ON'</ol>
+
+            <div class="card">
+                <div class="flex flex-col gap-6">
+                    <h2>Flash to device</h2>
+
+                    <div id="error-message" class="hidden">
+                        <div class="message message-error">
+                            <svg class="message-icon" fill="currentColor" viewBox="0 0 20 20">
+                                <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
+                            </svg>
+                            <p id="error-text" class="message-content"></p>
+                        </div>
+                    </div>
+
+                    <esp-web-install-button></esp-web-install-button>
+                </div>
             </div>
         </div>
     </div>
 
-    <footer>Tailor your TRMNL</footer>
+    <footer class="footer">
+        <div class="footer-left">
+            <a href="https://trmnl.com" target="_blank" rel="noopener noreferrer" class="footer-logo-link" aria-label="TRMNL">
+                <svg class="footer-logo" width="145" height="30" viewBox="0 0 145 30" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><g clip-path="url(#clip0_footer)"><path fill-rule="evenodd" clip-rule="evenodd" d="M34.9489 10.2789V7.28125H52.8609V10.2789H45.6156V22.884H42.2154V10.2789H34.9489Z" fill="#000"/><path fill-rule="evenodd" clip-rule="evenodd" d="M56.3649 7.28125V22.884H59.7862V17.4183H69.0494C69.694 17.4183 70.1156 17.5554 70.3773 17.7967C70.634 18.0333 70.7919 18.4217 70.7919 19.0548V22.884H74.1921V18.6523C74.1921 17.6928 73.8642 16.9067 73.2671 16.3544C72.9253 16.0383 72.5047 15.8073 72.0255 15.6619C72.5977 15.3836 73.0714 15.0168 73.4365 14.5636C74.0122 13.849 74.298 12.9443 74.298 11.8943C74.298 10.4152 73.8044 9.23925 72.7523 8.44439C71.7156 7.66117 70.1794 7.28125 68.1596 7.28125H56.3649ZM67.5665 14.5054H59.7862V10.173H67.5665C68.6983 10.173 69.5072 10.3223 70.0276 10.6499C70.5182 10.9587 70.7919 11.4522 70.7919 12.2756C70.7919 13.1124 70.5157 13.6415 70.0192 13.9783C69.4992 14.3312 68.692 14.5054 67.5665 14.5054Z" fill="#000"/><path fill-rule="evenodd" clip-rule="evenodd" d="M78.5827 22.884V7.28125H83.3207L90.1229 18.9421L96.9044 7.28125H101.621V22.884H98.2212V11.3754L91.6053 22.884H88.62L82.0041 11.3754V22.884H78.5827Z" fill="#000"/><path fill-rule="evenodd" clip-rule="evenodd" d="M110.897 7.28125H106.304V22.884H109.725V10.8879L120.66 22.884H125.232V7.28125H121.832V19.2774L110.897 7.28125Z" fill="#000"/><path fill-rule="evenodd" clip-rule="evenodd" d="M133.35 7.28125H129.928V22.884H144.641V19.8864H133.35V7.28125Z" fill="#000"/><path fill-rule="evenodd" clip-rule="evenodd" d="M8.02188 2.11328L15.8862 5.07445L14.4258 8.98481L6.56146 6.02364L8.02188 2.11328Z" fill="#000"/><path fill-rule="evenodd" clip-rule="evenodd" d="M20.6315 1.14647L23.2291 9.16642L19.2738 10.458L16.6761 2.43807L20.6315 1.14647Z" fill="#000"/><path fill-rule="evenodd" clip-rule="evenodd" d="M29.244 10.4452L24.6188 17.4848L21.147 15.185L25.7722 8.14549L29.244 10.4452Z" fill="#000"/><path fill-rule="evenodd" clip-rule="evenodd" d="M27.374 23.0034L19.0089 23.7616L18.6349 19.6023L27 18.8441L27.374 23.0034Z" fill="#000"/><path fill-rule="evenodd" clip-rule="evenodd" d="M16.4297 29.3638L10.6237 23.2697L13.6293 20.3828L19.4352 26.4769L16.4297 29.3638Z" fill="#000"/><path fill-rule="evenodd" clip-rule="evenodd" d="M4.65232 24.7423L5.77753 16.3849L9.89932 16.9443L8.77411 25.3017L4.65232 24.7423Z" fill="#000"/><path fill-rule="evenodd" clip-rule="evenodd" d="M0.910558 12.6074L8.11961 8.28L10.2539 11.8645L3.04481 16.192L0.910558 12.6074Z" fill="#000"/></g><defs><clipPath id="clip0_footer"><rect width="145" height="30" fill="white"/></clipPath></defs></svg>
+            </a>
+            <a href="https://trmnl.com" target="_blank" rel="noopener noreferrer" class="text-gray-500">trmnl.com</a>
+        </div>
+        <a href="https://github.com/usetrmnl/tailor" target="_blank" rel="noopener noreferrer" class="text-gray-500">github.com/usetrmnl/tailor</a>
+    </footer>
 </div>
 </body>
-</html>
\ No newline at end of file
+</html>