feat(studio): choose and load Google Fonts in manual design

packages/design-system/src/validation.ts

@@ -127,6 +127,7 @@ export function validateDesignSystem(input: unknown): DesignDiagnostic[] {
     "name",
     "version",
     "description",
+    "googleFonts",
     "extends",
     "tokens",
     "modes",
@@ -156,6 +157,22 @@ export function validateDesignSystem(input: unknown): DesignDiagnostic[] {
     (typeof input.defaultMode !== "string" || !validName(input.defaultMode))
   )
     error("WRN-DS-NAME", "defaultMode", "Invalid mode name.");
+  if (
+    input.googleFonts !== undefined &&
+    (!Array.isArray(input.googleFonts) ||
+      input.googleFonts.length > 10 ||
+      input.googleFonts.some(
+        (name: unknown) =>
+          typeof name !== "string" ||
+          !/^[A-Za-z][A-Za-z0-9 ]{0,79}$/.test(name) ||
+          name.trim() !== name,
+      ))
+  )
+    error(
+      "WRN-DS-SCHEMA",
+      "googleFonts",
+      "Choose up to ten Google Font family names using letters, numbers and spaces.",
+    );
   const map = (value: unknown, path: string) => {
     if (!isRecord(value)) {
       error("WRN-DS-SCHEMA", path, "Expected a token map.");