diff --git a/assets/site.css b/assets/site.css
index 628031b..74b3cc0 100644
--- a/assets/site.css
+++ b/assets/site.css
@@ -1,3 +1,55 @@
 :root {
   font-family: sans-serif, sans-serif;
+  /** Dark theme primary colors */
+  --clr-primary-a0: #813d9c;
+  --clr-primary-a10: #9052a7;
+  --clr-primary-a20: #9e68b2;
+  --clr-primary-a30: #ac7cbd;
+  --clr-primary-a40: #ba92c8;
+  --clr-primary-a50: #c8a7d3;
+
+  /** Dark theme surface colors */
+  --clr-surface-a0: #000000;
+  --clr-surface-a10: #1e1e1e;
+  --clr-surface-a20: #353535;
+  --clr-surface-a30: #4e4e4e;
+  --clr-surface-a40: #696969;
+  --clr-surface-a50: #858585;
+
+  /** Dark theme tonal surface colors */
+  --clr-surface-tonal-a0: #130b15;
+  --clr-surface-tonal-a10: #28232a;
+  --clr-surface-tonal-a20: #3f3a41;
+  --clr-surface-tonal-a30: #585359;
+  --clr-surface-tonal-a40: #716d72;
+  --clr-surface-tonal-a50: #8c888d;
+
+  --clr-txt-on-dark: #fff;
+  --clr-txt-on-light: #000;
+
+  font-size: 1.2em;
+  color: var(--clr-txt-on-dark);
+  background-color: var(--clr-surface-tonal-a0);
+}
+
+input,
+select,
+button {
+  border: 2pt solid var(--clr-surface-tonal-a50);
+  border-radius: 4pt;
+  padding: 4pt 8pt;
+  color: var(--clr-txt-on-dark);
+  background-color: var(--clr-surface-tonal-a10);
+}
+
+input:hover,
+select:hover,
+button:hover {
+  border-color: var(--clr-primary-a0);
+}
+
+input#ident {
+  font-family: monospace;
+  width: 7ch;
+  font-size: 1.4em;
 }
diff --git a/templates/index.html.tera b/templates/index.html.tera
index adda224..aa2e359 100644
--- a/templates/index.html.tera
+++ b/templates/index.html.tera
@@ -6,7 +6,7 @@
 
   <form>
     <label for="ident">Enter the 6-digit ID you found:</label>
-    <input type="text" id="ident" name="ident" required placeholder="000-000" />
+    <input type="text" inputmode="numeric" pattern="\d{3}-?\d{3}" id="ident" name="ident" required minlength="6" maxlength="7" placeholder="000-000" />
 
     <button type="submit">Search the database</button>
   </form>