nova-design-model-testing 0.0.2 → 0.0.3

package/src/design-system/tokens/primitives/colors.json

@@ -0,0 +1,122 @@
+{
+  "gray": {
+    "1": "#FFFFFF",
+    "7": "#8C8C8C",
+    "9": "#262626"
+  },
+  "background": {
+    "neutral": {
+      "secondary": "#f2f2fd"
+    }
+  },
+  "oxfordBlue": {
+    "50": "#ffffff",
+    "100": "#f4f4f7",
+    "200": "#e0e0e5",
+    "300": "#b7b7bf",
+    "400": "#9f9faa",
+    "500": "#868694",
+    "600": "#6e6e7f",
+    "700": "#343440",
+    "800": "#19191c",
+    "900": "#080809"
+  },
+  "botimBlue": {
+    "50": "#f2f2fd",
+    "100": "#dfe5ff",
+    "200": "#c0caff",
+    "300": "#a0b0ff",
+    "400": "#8196ff",
+    "500": "#617bff",
+    "600": "#4161ff",
+    "700": "#2247ff",
+    "800": "#0123ff",
+    "900": "#011fe5",
+    "950": "#081b99"
+  },
+  "nonPhotoBlue": {
+    "50": "#f6fdff",
+    "100": "#edfcff",
+    "200": "#e3faff",
+    "300": "#daf9ff",
+    "400": "#d1f7ff",
+    "500": "#c8f6ff",
+    "600": "#bff4ff",
+    "700": "#b6f3ff",
+    "800": "#acf1ff",
+    "900": "#a3f0ff",
+    "950": "#49d7f2"
+  },
+  "engineeringRed": {
+    "100": "#feebeb",
+    "200": "#facdcd",
+    "700": "#f41915",
+    "800": "#cf0c0a",
+    "900": "#b21313",
+    "950": "#330505"
+  },
+  "pigmentGreen": {
+    "100": "#e7f8ee",
+    "200": "#cdecda",
+    "700": "#16da68",
+    "900": "#05a246",
+    "950": "#03662c"
+  },
+  "goldenrod": {
+    "100": "#fffadb",
+    "200": "#ffefaf",
+    "700": "#fbcf23",
+    "900": "#eec005",
+    "950": "#9e770c"
+  },
+  "opacity": {
+    "black": {
+      "10": "#0505051a",
+      "20": "#05050533",
+      "30": "#0505054d",
+      "40": "#05050566",
+      "50": "#05050580",
+      "60": "#05050599",
+      "70": "#050505b2",
+      "80": "#050505cc",
+      "90": "#050505e5",
+      "100": "#050505"
+    },
+    "grey": {
+      "10": "#19191c1a",
+      "20": "#19191c33",
+      "30": "#19191c4d",
+      "40": "#19191c66",
+      "50": "#19191c80",
+      "60": "#19191c99",
+      "70": "#19191cb2",
+      "80": "#19191ccc",
+      "90": "#19191ce5",
+      "100": "#19191c"
+    },
+    "white": {
+      "10": "#b7b7bf1a",
+      "20": "#b7b7bf33",
+      "30": "#b7b7bf4d",
+      "40": "#b7b7bf66",
+      "50": "#b7b7bf80",
+      "60": "#b7b7bf99",
+      "70": "#b7b7bfb2",
+      "80": "#b7b7bfcc",
+      "90": "#b7b7bfe5",
+      "100": "#b7b7bf"
+    },
+    "pureWhite": {
+      "10": "#ffffff1a",
+      "20": "#ffffff33",
+      "30": "#ffffff4d",
+      "40": "#ffffff66",
+      "50": "#ffffff80",
+      "60": "#ffffff99",
+      "70": "#ffffffb2",
+      "80": "#ffffffcc",
+      "90": "#ffffffe5",
+      "100": "#ffffff"
+    }
+  }
+}

package/src/design-system/tokens/primitives/radius.json

@@ -0,0 +1,9 @@
+{
+  "radius-xs": 8,
+  "radius-sm": 12,
+  "radius-md": 16,
+  "radius-lg": 24,
+  "radius-xl": 32,
+  "radius-xxl": 40,
+  "radius-pill": 999
+}

package/src/design-system/tokens/primitives/sizes.json

@@ -0,0 +1,10 @@
+{
+  "size-xxs": 16,
+  "size-xs": 20,
+  "size-md": 32,
+  "size-lg": 40,
+  "size-xl": 56,
+  "size-2xl": 64,
+  "size-3xl": 120,
+  "size-4xl": 240
+}

package/src/design-system/tokens/primitives/spacing.json

@@ -0,0 +1,10 @@
+{
+  "space-xxs": 16,
+  "space-xs": 20,
+  "space-md": 32,
+  "space-lg": 40,
+  "space-xl": 56,
+  "space-xxl": 64,
+  "space-xxxl": 120,
+  "space-xl4": 240
+}

package/src/design-system/tokens/semantic/colors.dark.json

@@ -0,0 +1,139 @@
+{
+  "Gray / gray-1": "primitives.gray.1",
+  "Gray / gray-7": "primitives.gray.7",
+  "Gray / gray-9": "primitives.gray.9",
+  "background/neutral/action sheet": "primitives.oxfordBlue.800",
+  "background/neutral/disabled": "primitives.oxfordBlue.100",
+  "background/neutral/list pressed": "primitives.oxfordBlue.700",
+  "background/neutral/message bubble": "primitives.botimBlue.500",
+  "background/neutral/overlay": "primitives.opacity.grey.80",
+  "background/neutral/pop up": "primitives.oxfordBlue.900",
+  "background/neutral/primary": "primitives.oxfordBlue.900",
+  "background/neutral/secondary": "primitives.oxfordBlue.800",
+  "background/neutral/tertiary": "primitives.oxfordBlue.700",
+  "background/neutral/toast": "primitives.oxfordBlue.700",
+  "avatar/blue/info": "primitives.nonPhotoBlue.200",
+  "avatar/blue/text-on": "primitives.botimBlue.900",
+  "avatar/gold/bg": "primitives.goldenrod.100",
+  "avatar/gold/text-on": "primitives.goldenrod.950",
+  "avatar/green/bg": "primitives.pigmentGreen.100",
+  "avatar/green/text-on": "primitives.pigmentGreen.900",
+  "border/functional/blue": "primitives.botimBlue.900",
+  "border/neutral/primary": "primitives.botimBlue.100",
+  "border/neutral/secondary": "primitives.gray.1",
+  "badge/bg/default": "primitives.engineeringRed.900",
+  "badge/text-on/default": "primitives.oxfordBlue.50",
+  "button/secondary/bg-disabled": "primitives.oxfordBlue.700",
+  "button/danger primary/bg-default": "primitives.engineeringRed.900",
+  "button/danger primary/bg-pressed": "primitives.engineeringRed.800",
+  "button/danger primary/text-on": "primitives.oxfordBlue.50",
+  "button/danger secondary/bg-default": "primitives.engineeringRed.100",
+  "button/danger secondary/bg-pressed": "primitives.engineeringRed.200",
+  "button/danger secondary/text-on": "primitives.engineeringRed.800",
+  "button/primary/bg-default": "primitives.botimBlue.600",
+  "button/primary/bg-pressed": "primitives.botimBlue.500",
+  "button/primary/text-on": "primitives.oxfordBlue.50",
+  "button/secondary/bg-default": "primitives.oxfordBlue.700",
+  "button/secondary/bg-pressed": "primitives.oxfordBlue.600",
+  "button/secondary/text-on": "primitives.oxfordBlue.50",
+  "card/brand secondary/bg-default": "primitives.oxfordBlue.900",
+  "card/brand secondary/bg-pressed": "primitives.oxfordBlue.700",
+  "card/brand secondary/text-on": "primitives.gray.1",
+  "card/neutral primary/bg-default": "primitives.gray.1",
+  "card/neutral primary/bg-pressed": "primitives.oxfordBlue.100",
+  "card/neutral seconday/bg-pressed": "primitives.botimBlue.100",
+  "card/neutral seconday/default": "primitives.botimBlue.50",
+  "check/active/checkmark": "primitives.gray.1",
+  "check/active/selected": "primitives.botimBlue.900",
+  "check/active/unselected": "primitives.oxfordBlue.600",
+  "check/disabled/checkmark": "primitives.gray.1",
+  "check/disabled/selected": "primitives.oxfordBlue.200",
+  "check/disabled/unselected": "primitives.oxfordBlue.200",
+  "chips/active/bg-default": "primitives.botimBlue.100",
+  "chips/active/bg-pressed": "primitives.botimBlue.200",
+  "chips/active/text-on": "primitives.botimBlue.900",
+  "chips/default/bg-default": "primitives.oxfordBlue.100",
+  "chips/default/bg-pressed": "primitives.oxfordBlue.200",
+  "chips/default/text-on": "primitives.oxfordBlue.600",
+  "chips/disable/bg-selected": "primitives.oxfordBlue.100",
+  "chips/disable/bg-unselected": "primitives.oxfordBlue.100",
+  "chips/disable/text-on": "primitives.oxfordBlue.300",
+  "divider/neutral/primary": "primitives.botimBlue.50",
+  "divider/neutral/secondary": "primitives.botimBlue.100",
+  "divider/neutral/tertiary": "primitives.botimBlue.300",
+  "Input/error/bg": "primitives.engineeringRed.950",
+  "Input/error/text-on": "primitives.engineeringRed.100",
+  "notification/error/bg": "primitives.engineeringRed.100",
+  "notification/error/text-on": "primitives.engineeringRed.800",
+  "notification/info/info": "primitives.nonPhotoBlue.200",
+  "notification/info/text-on": "primitives.botimBlue.900",
+  "notification/success/bg": "primitives.pigmentGreen.100",
+  "notification/success/text-on": "primitives.pigmentGreen.900",
+  "notification/warning/bg": "primitives.goldenrod.100",
+  "notification/warning/text-on": "primitives.goldenrod.950",
+  "radio/active/selected": "primitives.botimBlue.900",
+  "radio/active/unselected": "primitives.oxfordBlue.600",
+  "radio/disabled/selected": "primitives.oxfordBlue.200",
+  "radio/disabled/unselected": "primitives.oxfordBlue.200",
+  "tab/active/text": "primitives.botimBlue.900",
+  "tab/active/text-pressed": "primitives.botimBlue.950",
+  "tab/default/text": "primitives.oxfordBlue.400",
+  "tab/default/text-pressed": "primitives.oxfordBlue.600",
+  "text icon/functional/danger": "primitives.engineeringRed.600",
+  "text icon/functional/info": "primitives.botimBlue.700",
+  "text icon/functional/link": "primitives.botimBlue.900",
+  "text icon/functional/success": "primitives.pigmentGreen.900",
+  "text icon/functional/warning": "primitives.goldenrod.900",
+  "text icon/neutral/disabled": "primitives.oxfordBlue.600",
+  "text icon/neutral/inverse": "primitives.oxfordBlue.100",
+  "text icon/neutral/inverse secondary": "primitives.botimBlue.100",
+  "text icon/neutral/placeholder": "primitives.oxfordBlue.600",
+  "text icon/neutral/primary": "primitives.oxfordBlue.50",
+  "text icon/neutral/secondary": "primitives.oxfordBlue.400",
+  "toggle/active/bg-selected": "primitives.botimBlue.900",
+  "toggle/active/bg-unselected": "primitives.oxfordBlue.500",
+  "toggle/active/handle": "primitives.gray.1",
+  "toggle/disabled/bg-selcted": "primitives.oxfordBlue.200",
+  "toggle/disabled/bg-unselected": "primitives.oxfordBlue.200",
+  "toggle/disabled/handle": "primitives.oxfordBlue.400",
+  "transparent/black/10": "primitives.opacity.black.10",
+  "transparent/black/20": "primitives.opacity.black.20",
+  "transparent/black/30": "primitives.opacity.black.30",
+  "transparent/black/40": "primitives.opacity.black.40",
+  "transparent/black/50": "primitives.opacity.black.50",
+  "transparent/black/60": "primitives.opacity.black.60",
+  "transparent/black/70": "primitives.opacity.black.70",
+  "transparent/black/80": "primitives.opacity.black.80",
+  "transparent/black/90": "primitives.opacity.black.90",
+  "transparent/black/100": "primitives.opacity.black.100",
+  "transparent/grey/10": "primitives.opacity.grey.10",
+  "transparent/grey/20": "primitives.opacity.grey.20",
+  "transparent/grey/30": "primitives.opacity.grey.30",
+  "transparent/grey/40": "primitives.opacity.grey.40",
+  "transparent/grey/50": "primitives.opacity.grey.50",
+  "transparent/grey/60": "primitives.opacity.grey.60",
+  "transparent/grey/70": "primitives.opacity.grey.70",
+  "transparent/grey/80": "primitives.opacity.grey.80",
+  "transparent/grey/90": "primitives.opacity.grey.90",
+  "transparent/grey/100": "primitives.opacity.grey.100",
+  "transparent/white/10": "primitives.opacity.white.10",
+  "transparent/white/20": "primitives.opacity.white.20",
+  "transparent/white/30": "primitives.opacity.white.30",
+  "transparent/white/40": "primitives.opacity.white.40",
+  "transparent/white/50": "primitives.opacity.white.50",
+  "transparent/white/60": "primitives.opacity.white.60",
+  "transparent/white/70": "primitives.opacity.white.70",
+  "transparent/white/80": "primitives.opacity.white.80",
+  "transparent/white/90": "primitives.opacity.white.90",
+  "transparent/white/100": "primitives.opacity.white.100",
+  "transparent/pure white/10": "primitives.opacity.pureWhite.10",
+  "transparent/pure white/20": "primitives.opacity.pureWhite.20",
+  "transparent/pure white/30": "primitives.opacity.pureWhite.30",
+  "transparent/pure white/40": "primitives.opacity.pureWhite.40",
+  "transparent/pure white/50": "primitives.opacity.pureWhite.50",
+  "transparent/pure white/60": "primitives.opacity.pureWhite.60",
+  "transparent/pure white/70": "primitives.opacity.pureWhite.70",
+  "transparent/pure white/80": "primitives.opacity.pureWhite.80",
+  "transparent/pure white/90": "primitives.opacity.pureWhite.90",
+  "transparent/pure white/100": "primitives.opacity.pureWhite.100"
+}

package/src/design-system/tokens/semantic/colors.light.json

@@ -0,0 +1,139 @@
+{
+  "Gray / gray-1": "primitives.gray.1",
+  "Gray / gray-7": "primitives.gray.7",
+  "Gray / gray-9": "primitives.gray.9",
+  "background/neutral/action sheet": "primitives.gray.1",
+  "background/neutral/disabled": "primitives.oxfordBlue.100",
+  "background/neutral/list pressed": "primitives.oxfordBlue.100",
+  "background/neutral/message bubble": "primitives.botimBlue.400",
+  "background/neutral/overlay": "primitives.opacity.grey.80",
+  "background/neutral/pop up": "primitives.oxfordBlue.900",
+  "background/neutral/primary": "primitives.gray.1",
+  "background/neutral/secondary": "primitives.botimBlue.50",
+  "background/neutral/tertiary": "primitives.botimBlue.100",
+  "background/neutral/toast": "primitives.oxfordBlue.800",
+  "avatar/blue/info": "primitives.nonPhotoBlue.200",
+  "avatar/blue/text-on": "primitives.botimBlue.900",
+  "avatar/gold/bg": "primitives.goldenrod.100",
+  "avatar/gold/text-on": "primitives.goldenrod.950",
+  "avatar/green/bg": "primitives.pigmentGreen.100",
+  "avatar/green/text-on": "primitives.pigmentGreen.900",
+  "border/functional/blue": "primitives.botimBlue.900",
+  "border/neutral/primary": "primitives.botimBlue.100",
+  "border/neutral/secondary": "primitives.gray.1",
+  "badge/bg/default": "primitives.engineeringRed.800",
+  "badge/text-on/default": "primitives.gray.1",
+  "button/secondary/bg-disabled": "primitives.oxfordBlue.100",
+  "button/danger primary/bg-default": "primitives.engineeringRed.800",
+  "button/danger primary/bg-pressed": "primitives.engineeringRed.900",
+  "button/danger primary/text-on": "primitives.gray.1",
+  "button/danger secondary/bg-default": "primitives.engineeringRed.100",
+  "button/danger secondary/bg-pressed": "primitives.engineeringRed.200",
+  "button/danger secondary/text-on": "primitives.engineeringRed.800",
+  "button/primary/bg-default": "primitives.botimBlue.900",
+  "button/primary/bg-pressed": "primitives.botimBlue.950",
+  "button/primary/text-on": "primitives.gray.1",
+  "button/secondary/bg-default": "primitives.botimBlue.100",
+  "button/secondary/bg-pressed": "primitives.botimBlue.200",
+  "button/secondary/text-on": "primitives.botimBlue.900",
+  "card/brand secondary/bg-default": "primitives.oxfordBlue.900",
+  "card/brand secondary/bg-pressed": "primitives.oxfordBlue.700",
+  "card/brand secondary/text-on": "primitives.gray.1",
+  "card/neutral primary/bg-default": "primitives.gray.1",
+  "card/neutral primary/bg-pressed": "primitives.oxfordBlue.100",
+  "card/neutral seconday/bg-pressed": "primitives.botimBlue.100",
+  "card/neutral seconday/default": "primitives.botimBlue.50",
+  "check/active/checkmark": "primitives.gray.1",
+  "check/active/selected": "primitives.botimBlue.900",
+  "check/active/unselected": "primitives.oxfordBlue.600",
+  "check/disabled/checkmark": "primitives.gray.1",
+  "check/disabled/selected": "primitives.oxfordBlue.200",
+  "check/disabled/unselected": "primitives.oxfordBlue.200",
+  "chips/active/bg-default": "primitives.botimBlue.100",
+  "chips/active/bg-pressed": "primitives.botimBlue.200",
+  "chips/active/text-on": "primitives.botimBlue.900",
+  "chips/default/bg-default": "primitives.oxfordBlue.100",
+  "chips/default/bg-pressed": "primitives.oxfordBlue.200",
+  "chips/default/text-on": "primitives.oxfordBlue.600",
+  "chips/disable/bg-selected": "primitives.oxfordBlue.100",
+  "chips/disable/bg-unselected": "primitives.oxfordBlue.100",
+  "chips/disable/text-on": "primitives.oxfordBlue.300",
+  "divider/neutral/primary": "primitives.botimBlue.50",
+  "divider/neutral/secondary": "primitives.botimBlue.100",
+  "divider/neutral/tertiary": "primitives.botimBlue.300",
+  "Input/error/bg": "primitives.engineeringRed.100",
+  "Input/error/text-on": "primitives.engineeringRed.800",
+  "notification/error/bg": "primitives.engineeringRed.100",
+  "notification/error/text-on": "primitives.engineeringRed.800",
+  "notification/info/info": "primitives.nonPhotoBlue.200",
+  "notification/info/text-on": "primitives.botimBlue.900",
+  "notification/success/bg": "primitives.pigmentGreen.100",
+  "notification/success/text-on": "primitives.pigmentGreen.900",
+  "notification/warning/bg": "primitives.goldenrod.100",
+  "notification/warning/text-on": "primitives.goldenrod.950",
+  "radio/active/selected": "primitives.botimBlue.900",
+  "radio/active/unselected": "primitives.oxfordBlue.600",
+  "radio/disabled/selected": "primitives.oxfordBlue.200",
+  "radio/disabled/unselected": "primitives.oxfordBlue.200",
+  "tab/active/text": "primitives.botimBlue.900",
+  "tab/active/text-pressed": "primitives.botimBlue.950",
+  "tab/default/text": "primitives.oxfordBlue.400",
+  "tab/default/text-pressed": "primitives.oxfordBlue.600",
+  "text icon/functional/danger": "primitives.engineeringRed.800",
+  "text icon/functional/info": "primitives.botimBlue.700",
+  "text icon/functional/link": "primitives.botimBlue.900",
+  "text icon/functional/success": "primitives.pigmentGreen.900",
+  "text icon/functional/warning": "primitives.goldenrod.900",
+  "text icon/neutral/disabled": "primitives.oxfordBlue.300",
+  "text icon/neutral/inverse": "primitives.gray.1",
+  "text icon/neutral/inverse secondary": "primitives.botimBlue.100",
+  "text icon/neutral/placeholder": "primitives.oxfordBlue.400",
+  "text icon/neutral/primary": "primitives.oxfordBlue.900",
+  "text icon/neutral/secondary": "primitives.oxfordBlue.600",
+  "toggle/active/bg-selected": "primitives.botimBlue.900",
+  "toggle/active/bg-unselected": "primitives.oxfordBlue.500",
+  "toggle/active/handle": "primitives.gray.1",
+  "toggle/disabled/bg-selcted": "primitives.oxfordBlue.200",
+  "toggle/disabled/bg-unselected": "primitives.oxfordBlue.200",
+  "toggle/disabled/handle": "primitives.oxfordBlue.400",
+  "transparent/black/10": "primitives.opacity.black.10",
+  "transparent/black/20": "primitives.opacity.black.20",
+  "transparent/black/30": "primitives.opacity.black.30",
+  "transparent/black/40": "primitives.opacity.black.40",
+  "transparent/black/50": "primitives.opacity.black.50",
+  "transparent/black/60": "primitives.opacity.black.60",
+  "transparent/black/70": "primitives.opacity.black.70",
+  "transparent/black/80": "primitives.opacity.black.80",
+  "transparent/black/90": "primitives.opacity.black.90",
+  "transparent/black/100": "primitives.opacity.black.100",
+  "transparent/grey/10": "primitives.opacity.grey.10",
+  "transparent/grey/20": "primitives.opacity.grey.20",
+  "transparent/grey/30": "primitives.opacity.grey.30",
+  "transparent/grey/40": "primitives.opacity.grey.40",
+  "transparent/grey/50": "primitives.opacity.grey.50",
+  "transparent/grey/60": "primitives.opacity.grey.60",
+  "transparent/grey/70": "primitives.opacity.grey.70",
+  "transparent/grey/80": "primitives.opacity.grey.80",
+  "transparent/grey/90": "primitives.opacity.grey.90",
+  "transparent/grey/100": "primitives.opacity.grey.100",
+  "transparent/white/10": "primitives.opacity.white.10",
+  "transparent/white/20": "primitives.opacity.white.20",
+  "transparent/white/30": "primitives.opacity.white.30",
+  "transparent/white/40": "primitives.opacity.white.40",
+  "transparent/white/50": "primitives.opacity.white.50",
+  "transparent/white/60": "primitives.opacity.white.60",
+  "transparent/white/70": "primitives.opacity.white.70",
+  "transparent/white/80": "primitives.opacity.white.80",
+  "transparent/white/90": "primitives.opacity.white.90",
+  "transparent/white/100": "primitives.opacity.white.100",
+  "transparent/pure white/10": "primitives.opacity.pureWhite.10",
+  "transparent/pure white/20": "primitives.opacity.pureWhite.20",
+  "transparent/pure white/30": "primitives.opacity.pureWhite.30",
+  "transparent/pure white/40": "primitives.opacity.pureWhite.40",
+  "transparent/pure white/50": "primitives.opacity.pureWhite.50",
+  "transparent/pure white/60": "primitives.opacity.pureWhite.60",
+  "transparent/pure white/70": "primitives.opacity.pureWhite.70",
+  "transparent/pure white/80": "primitives.opacity.pureWhite.80",
+  "transparent/pure white/90": "primitives.opacity.pureWhite.90",
+  "transparent/pure white/100": "primitives.opacity.pureWhite.100"
+}

package/src/design-system/tokens/semantic/spacing.json

@@ -0,0 +1,18 @@
+{
+  "horizontal": {
+    "between-cards": "primitives.spacing.space-xs",
+    "between-chips": "primitives.spacing.space-xxs",
+    "screen-mobile": "primitives.spacing.space-xl",
+    "component-default": "primitives.spacing.space-xxs"
+  },
+  "vertical": {
+    "between-text": "primitives.spacing.space-xxs",
+    "image-bottom": "primitives.spacing.space-xxs",
+    "display-text-bottom": "primitives.spacing.space-xxs",
+    "text-to-component": "primitives.spacing.space-xxs",
+    "content-to-button": "primitives.spacing.space-lg",
+    "between-sections": "primitives.spacing.space-md",
+    "between-options": "primitives.spacing.space-xxs",
+    "component-default": "primitives.spacing.space-xxs"
+  }
+}

package/src/index.css

@@ -0,0 +1,99 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@font-face {
+  font-family: "Inter";
+  src: url("./assets/fonts/inter_regular.otf") format("opentype");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Inter";
+  src: url("./assets/fonts/inter_italic.otf") format("opentype");
+  font-weight: 400;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Inter";
+  src: url("./assets/fonts/inter_medium.otf") format("opentype");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Inter";
+  src: url("./assets/fonts/inter_semi_bold.otf") format("opentype");
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Inter";
+  src: url("./assets/fonts/inter_bold.otf") format("opentype");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Space Grotesk";
+  src: url("./assets/fonts/space_grotesk_regular.otf") format("opentype");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Space Grotesk";
+  src: url("./assets/fonts/space_grotesk_medium.otf") format("opentype");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Space Grotesk";
+  src: url("./assets/fonts/space_grotesk_semi_bold.otf") format("opentype");
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Space Grotesk";
+  src: url("./assets/fonts/space_grotesk_bold.otf") format("opentype");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@layer base {
+  html {
+    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+      sans-serif;
+  }
+
+  body {
+    @apply bg-white text-slate-900;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4 {
+    @apply font-display;
+  }
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

package/src/main.jsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.jsx'
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)