CI color alignment, typography

src/components/QRCode.css

@@ -1,5 +1,5 @@
 .qr-code-container {
-  background-color: rgb(223 110 37);
+  background-color: hsl(18.6deg 100% 55.1%);
   flex-basis: 20%;
   flex-shrink: 0;
   padding: 16px;
@@ -13,7 +13,13 @@
   flex-direction: column;
   align-items: center;
 
+  p {
+    text-align: center;
+  }
+
   img {
+    display: block;
+    margin: 0 auto;
     background-color: #fff;
     border-radius: 16px;
     padding: 16px;

src/config.ts

@@ -14,11 +14,11 @@ export const config = {
 
 // Color scheme for Likert scale responses
 const aaiColors = [
-  "rgb(205 208 219)",
-  "rgb(177 214 217)",
-  "rgb(116 178 183)",
-  "rgb(81	137 141)",
-  "rgb(73	101 104)",
+  "rgb(204	208	219)",
+  "rgb(157	216	217)",
+  "rgb(65	181	184)",
+  "rgb(19	140	141)",
+  "rgb(55	102	104)",
 ];
 export const colorScheme = Object.fromEntries(
   aaiColors.map((color, index) => [index, color])

src/index.css

@@ -1,5 +1,5 @@
 :root {
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;
   font-weight: 400;
 
@@ -19,6 +19,17 @@ body {
   align-items: center;
 }
 
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: "Work Sans", sans-serif;
+  font-weight: 800;
+  margin: 0;
+}
+
 a {
   font-weight: 500;
   color: #646cff;