Refactoring and dashboard state in DB

_frontend/styles/main.scss

@@ -4,19 +4,124 @@
     box-sizing: border-box;
 }
 
+:root {
+    --bg-100: #ffffff;
+    --bg-500: #f0f0f0;
+    --bg-600: #e0e0e0;
+
+    --fg-400: #3d3d3d;
+    --fg-500: #333;
+
+    --ft-sans: 'Open Sans', sans-serif;
+
+    --ft-sans-wt-light: 300;
+    --ft-sans-wt-normal: 400;
+    --ft-sans-wt-bold: 600;
+}
+
 body {
     margin: 0;
 
     width: 100%;
     min-height: 100vh;
 
-    font-family: 'Inter', 'Segoe UI', 'Helvetica', 'Arial', sans-serif;
+    font-family: var(--ft-sans);
     font-size: 16px;
+
+    color: var(--fg-500);
+    background: var(--bg-500);
 }
 
-// Headings
+//
+// Structure
+//
 
-$base-font-size: 18px;
+main {
+    display: flex;
+    flex-direction: column;
+
+    align-items: center;
+
+    gap: 1rem;
+
+    header {
+        width: 100%;
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        padding: 0.5rem 1rem;
+        gap: 0.75rem;
+
+        background: var(--bg-100);
+        border-bottom: 1px solid var(--bg-600);
+
+        color: var(--fg-400);
+        vertical-align: middle;
+
+        .logo {
+            font-size: 32px;
+            font-weight: var(--ft-sans-wt-bold);
+        }
+
+        .machine {
+            font-size: 24px;
+            font-weight: var(--ft-sans-wt-normal);
+        }
+    }
+
+    .widgets {
+        display: flex;
+        justify-content: center;
+        align-items: start;
+
+        flex-wrap: wrap;
+        gap: 2rem;
+
+        max-width: 120ch;
+
+        .widget {
+            background: var(--bg-100);
+            border: 1px solid var(--bg-600);
+            padding: 1rem;
+
+            min-height: 10rem;
+            max-width: 50ch;
+
+            .title {
+                font-weight: var(--ft-sans-wt-bold);
+
+                code {
+                    font-weight: normal;
+                }
+            }
+
+            &.todo {
+                width: 300px;
+                height: 200px;
+            }
+        }
+    }
+}
+
+//
+// Typography
+//
+
+b {
+    font-weight: var(--ft-sans-wt-bold);
+}
+
+p {
+    margin: 0;
+
+    & + p {
+        margin-top: 0.5rem;
+    }
+}
+
+$base-font-size: 16px;
 $heading-scale: 1.33;
 
 @function pow($number, $exponent) {