diff --git a/canon-docs/public/components.css b/canon-docs/public/components.css
index b65a998ae3..58c1b13203 100644
--- a/canon-docs/public/components.css
+++ b/canon-docs/public/components.css
@@ -278,66 +278,78 @@
   }
 }
 
-.canon-input-root {
+.canon-Input {
+  border-radius: var(--canon-border-radius-sm);
+  border: 1px solid var(--canon-border-base);
+  padding: 0 var(--canon-space-4);
+  background-color: var(--canon-surface-1);
+  font-size: var(--canon-font-size-body);
+  font-weight: var(--canon-font-weight-regular);
+  color: var(--canon-text-primary);
+  width: 100%;
+  transition: border-color .2s ease-in-out, outline-color .2s ease-in-out;
+}
+
+.canon-Input::placeholder {
+  color: var(--canon-text-secondary);
+}
+
+.canon-Input:hover {
+  border-color: var(--canon-border-hover);
+}
+
+.canon-Input:focus-visible {
+  outline-color: var(--canon-border-selected);
+  border-color: var(--canon-border-selected);
+  outline-width: 0;
+}
+
+.canon-Input[data-invalid] {
+  border-color: var(--canon-error);
+}
+
+.canon-Input--size-sm {
+  height: 2rem;
+}
+
+.canon-Input--size-md {
+  height: 2.5rem;
+}
+
+.canon-FieldRoot {
   font-family: var(--canon-font-regular);
   flex-direction: column;
   width: 100%;
   display: flex;
 }
 
-.canon-input-label {
+.canon-FieldLabel {
   font-size: var(--canon-font-size-caption);
   font-weight: var(--canon-font-weight-regular);
   color: var(--canon-text-primary);
-  margin-bottom: var(--canon-space-1_5);
+  margin-bottom: var(--canon-spacing-3xs);
 }
 
-.canon-input-control {
-  border-radius: var(--canon-border-radius-sm);
-  border: 1px solid var(--canon-border-base);
-  padding: var(--canon-space-4);
-  background-color: var(--canon-surface-1);
-  font-size: var(--canon-font-size-body);
-  font-weight: var(--canon-font-weight-regular);
-  color: var(--canon-text-primary);
-  transition: border-color .2s ease-in-out, outline-color .2s ease-in-out;
-}
-
-.canon-input-control::placeholder {
-  color: var(--canon-text-secondary);
-}
-
-.canon-input-control:hover {
-  border-color: var(--canon-border-hover);
-}
-
-.canon-input-control:focus-visible {
-  outline-color: var(--canon-border-selected);
-  border-color: var(--canon-border-selected);
-  outline-width: 0;
-}
-
-.canon-input-control[data-invalid] {
-  border-color: var(--canon-error);
-}
-
-.canon-input-control-sm {
-  height: 2rem;
-}
-
-.canon-input-control-md {
-  height: 2.5rem;
-}
-
-.canon-input-description {
+.canon-FieldDescription {
   font-size: var(--canon-font-size-caption);
   font-weight: var(--canon-font-weight-regular);
   color: var(--canon-text-secondary);
-  margin-top: var(--canon-space-1_5);
+  padding-top: var(--canon-spacing-3xs);
+  margin: 0;
 }
 
-.canon-input-error {
+.canon-FieldError {
   font-size: var(--canon-font-size-caption);
+  font-weight: var(--canon-font-weight-regular);
   color: var(--canon-error);
-  margin-top: var(--canon-space-1_5);
+  padding-top: var(--canon-spacing-3xs);
+  margin: 0;
+}
+
+.canon-FieldValidity {
+  font-size: var(--canon-font-size-caption);
+  font-weight: var(--canon-font-weight-regular);
+  color: var(--canon-text-secondary);
+  padding-top: var(--canon-spacing-3xs);
+  margin: 0;
 }
diff --git a/canon-docs/public/core.css b/canon-docs/public/core.css
index f7da40fa15..fd11563886 100644
--- a/canon-docs/public/core.css
+++ b/canon-docs/public/core.css
@@ -5657,7 +5657,7 @@
 }
 
 :root {
-  --canon-font-regular: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --canon-font-regular: system-ui;
   --canon-font-monospace: ui-monospace, "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;
   --canon-font-weight-regular: 400;
   --canon-font-weight-bold: 600;
diff --git a/packages/canon/src/components/Field/Field.styles.css b/packages/canon/src/components/Field/Field.styles.css
index bcafd0eeee..3412ab7b5c 100644
--- a/packages/canon/src/components/Field/Field.styles.css
+++ b/packages/canon/src/components/Field/Field.styles.css
@@ -25,7 +25,7 @@
   font-size: var(--canon-font-size-caption);
   font-weight: var(--canon-font-weight-regular);
   color: var(--canon-text-primary);
-  margin-bottom: var(--canon-spacing-3xs);
+  margin-bottom: var(--canon-space-1_5);
 }
 
 .canon-FieldDescription {
@@ -33,7 +33,7 @@
   font-weight: var(--canon-font-weight-regular);
   color: var(--canon-text-secondary);
   margin: 0;
-  padding-top: var(--canon-spacing-3xs);
+  padding-top: var(--canon-space-1_5);
 }
 
 .canon-FieldError {
@@ -41,7 +41,7 @@
   font-weight: var(--canon-font-weight-regular);
   color: var(--canon-error);
   margin: 0;
-  padding-top: var(--canon-spacing-3xs);
+  padding-top: var(--canon-space-1_5);
 }
 
 .canon-FieldValidity {
@@ -49,5 +49,5 @@
   font-weight: var(--canon-font-weight-regular);
   color: var(--canon-text-secondary);
   margin: 0;
-  padding-top: var(--canon-spacing-3xs);
+  padding-top: var(--canon-space-1_5);
 }
diff --git a/packages/canon/src/components/Input/Input.styles.css b/packages/canon/src/components/Input/Input.styles.css
index 4fe336fe30..6b66c0aedb 100644
--- a/packages/canon/src/components/Input/Input.styles.css
+++ b/packages/canon/src/components/Input/Input.styles.css
@@ -17,7 +17,7 @@
 .canon-Input {
   border-radius: var(--canon-border-radius-sm);
   border: 1px solid var(--canon-border-base);
-  padding: var(--canon-spacing-sm);
+  padding: 0 var(--canon-space-4);
   background-color: var(--canon-surface-1);
   font-size: var(--canon-font-size-body);
   font-weight: var(--canon-font-weight-regular);
diff --git a/packages/canon/src/css/core.css b/packages/canon/src/css/core.css
index e69de29bb2..1bc03a0ae1 100644
--- a/packages/canon/src/css/core.css
+++ b/packages/canon/src/css/core.css
@@ -0,0 +1,125 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* Normalize */
+@import './base.css';
+@import './utilities.css';
+
+/* Light theme tokens */
+
+:root {
+  /* Font families */
+  --canon-font-regular: system-ui;
+  --canon-font-monospace: ui-monospace, 'Menlo', 'Monaco', 'Consolas',
+    'Liberation Mono', 'Courier New', monospace;
+
+  /* Font weights */
+  --canon-font-weight-regular: 400;
+  --canon-font-weight-bold: 600;
+
+  /* Font sizes */
+  --canon-font-size-label: 0.625rem; /* 10px */
+  --canon-font-size-caption: 0.75rem; /* 12px */
+  --canon-font-size-body: 0.875rem; /* 14px */
+  --canon-font-size-subtitle: 1rem; /* 16px */
+  --canon-font-size-title5: 1.25rem; /* 20px */
+  --canon-font-size-title4: 1.5rem; /* 24px */
+  --canon-font-size-title3: 2rem; /* 32px */
+  --canon-font-size-title2: 3rem; /* 48px */
+  --canon-font-size-title1: 4rem; /* 64px */
+  --canon-font-size-display: 5.75rem; /* 92px */
+
+  /* Spacing */
+  /* This is the spacing multiplier */
+  --canon-space: 0.25rem; /* 4px */
+
+  /* These are the spacing scale */
+  --canon-space-0_5: calc(var(--canon-space) * 0.5); /* 2px */
+  --canon-space-1: var(--canon-space); /* 4px */
+  --canon-space-1_5: calc(var(--canon-space) * 1.5); /* 6px */
+  --canon-space-2: calc(var(--canon-space) * 2); /* 8px */
+  --canon-space-3: calc(var(--canon-space) * 3); /* 12px */
+  --canon-space-4: calc(var(--canon-space) * 4); /* 16px */
+  --canon-space-5: calc(var(--canon-space) * 5); /* 20px */
+  --canon-space-6: calc(var(--canon-space) * 6); /* 24px */
+  --canon-space-7: calc(var(--canon-space) * 7); /* 28px */
+  --canon-space-8: calc(var(--canon-space) * 8); /* 32px */
+  --canon-space-9: calc(var(--canon-space) * 9); /* 36px */
+  --canon-space-10: calc(var(--canon-space) * 10); /* 40px */
+  --canon-space-11: calc(var(--canon-space) * 11); /* 44px */
+  --canon-space-12: calc(var(--canon-space) * 12); /* 48px */
+  --canon-space-13: calc(var(--canon-space) * 13); /* 52px */
+  --canon-space-14: calc(var(--canon-space) * 14); /* 56px */
+
+  /* Border radius */
+  --canon-border-radius-2xs: 0.125rem; /* 2px */
+  --canon-border-radius-xs: 0.25rem; /* 4px */
+  --canon-border-radius-sm: 0.5rem; /* 8px */
+  --canon-border-radius-md: 0.75rem; /* 12px */
+  --canon-border-radius-lg: 1rem; /* 16px */
+  --canon-border-radius-xl: 1.25rem; /* 20px */
+  --canon-border-radius-2xl: 1.5rem; /* 24px */
+
+  /* Container */
+  --canon-container-max-width: 1200px;
+  --canon-container-padding: 1rem;
+
+  /* Colors */
+  --canon-accent: #000;
+  --canon-background: #f8f8f8;
+  --canon-surface-1: #fff;
+  --canon-surface-2: #f4f4f4;
+  --canon-surface-3: #f1f1f1;
+
+  /* Borders */
+  --canon-border-base: rgba(0, 0, 0, 0.1);
+  --canon-border-hover: rgba(0, 0, 0, 0.2);
+  --canon-border-warning: #e36d05;
+  --canon-border-error: #e22b2b;
+  --canon-border-selected: rgba(0, 0, 0, 0.4);
+
+  /* States - Add more states */
+  --canon-error: #f50000;
+
+  /* Text colors */
+  --canon-text-primary: #000;
+  --canon-text-primary-on-accent: #fff;
+  --canon-text-secondary: #646464;
+}
+
+/* Dark theme tokens */
+[data-theme='dark'] {
+  /* Colors */
+  --canon-accent: #fff;
+  --canon-background: #000;
+  --canon-surface-1: #121212;
+  --canon-surface-2: #1a1a1a;
+
+  /* Borders */
+  --canon-border-base: rgba(255, 255, 255, 0.2);
+  --canon-border-hover: rgba(255, 255, 255, 0.3);
+  --canon-border-warning: #f50000;
+  --canon-border-error: #f87503;
+  --canon-border-selected: rgba(255, 255, 255, 0.4);
+
+  /* States - Add more states */
+  --canon-error: #f50000;
+
+  /* Text colors */
+  --canon-text-primary: #fff;
+  --canon-text-primary-on-accent: #000;
+  --canon-text-secondary: #b3b3b3;
+}