diff --git a/public/fonts/fraunces-v31-latin-600.woff2 b/public/fonts/fraunces-v31-latin-600.woff2
new file mode 100644
index 0000000..2046e95
Binary files /dev/null and b/public/fonts/fraunces-v31-latin-600.woff2 differ
diff --git a/public/fonts/inter-tight-v7-latin-600.woff2 b/public/fonts/inter-tight-v7-latin-600.woff2
new file mode 100644
index 0000000..86a4abf
Binary files /dev/null and b/public/fonts/inter-tight-v7-latin-600.woff2 differ
diff --git a/public/fonts/inter-v13-latin-regular.woff2 b/public/fonts/inter-v13-latin-regular.woff2
new file mode 100644
index 0000000..d228a4a
Binary files /dev/null and b/public/fonts/inter-v13-latin-regular.woff2 differ
diff --git a/src/layouts/layout.astro b/src/layouts/layout.astro
index 7b552be..e8acf27 100644
--- a/src/layouts/layout.astro
+++ b/src/layouts/layout.astro
@@ -1,6 +1,8 @@
---
+import '@/styles/global.css';
+
interface Props {
- title: string;
+ title: string;
}
const { title } = Astro.props;
@@ -8,44 +10,15 @@ const { title } = Astro.props;
-
-
-
-
-
-
- {title}
-
-
-
-
+
+
+
+
+
+
+ {title}
+
+
+
+
-
diff --git a/src/styles/base/base.css b/src/styles/base/base.css
new file mode 100644
index 0000000..174ad6b
--- /dev/null
+++ b/src/styles/base/base.css
@@ -0,0 +1,20 @@
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ padding: 0;
+ margin: 0;
+ font: inherit;
+}
+
+body {
+ background-color: var(--color-neutral-50);
+ color: var(--color-foreground);
+ font-family: var(--font-body);
+ font-size: var(--font-base);
+}
+
+::selection {
+ background-color: var(--color-neutral-300);
+ color: var(--color-foreground);
+}
diff --git a/src/styles/fonts.css b/src/styles/fonts.css
new file mode 100644
index 0000000..b7d6419
--- /dev/null
+++ b/src/styles/fonts.css
@@ -0,0 +1,26 @@
+/* fraunces-600 - latin */
+@font-face {
+ font-display: swap;
+ font-family: Fraunces;
+ font-style: normal;
+ font-weight: 600;
+ src: url('/fonts/fraunces-v31-latin-600.woff2') format('woff2');
+}
+
+/* inter-regular - latin */
+@font-face {
+ font-display: swap;
+ font-family: Inter;
+ font-style: normal;
+ font-weight: 400;
+ src: url('/fonts/inter-v13-latin-regular.woff2') format('woff2');
+}
+
+/* inter-tight-600 - latin */
+@font-face {
+ font-display: swap;
+ font-family: 'Inter Tight';
+ font-style: normal;
+ font-weight: 600;
+ src: url('/fonts/inter-tight-v7-latin-600.woff2') format('woff2');
+}
diff --git a/src/styles/global.css b/src/styles/global.css
new file mode 100644
index 0000000..9b00cbe
--- /dev/null
+++ b/src/styles/global.css
@@ -0,0 +1,3 @@
+@import 'variables/index.css';
+@import 'base/base.css';
+@import 'fonts.css';
diff --git a/src/styles/variables/color.css b/src/styles/variables/color.css
new file mode 100644
index 0000000..e8a6f27
--- /dev/null
+++ b/src/styles/variables/color.css
@@ -0,0 +1,18 @@
+:root {
+ --color-neutral-50: #09090b;
+ --color-neutral-100: #18181b;
+ --color-neutral-200: #27272a;
+ --color-neutral-300: #3f3f46;
+ --color-neutral-400: #52525b;
+ --color-neutral-500: #71717a;
+ --color-neutral-600: #a1a1aa;
+ --color-neutral-700: #d4d4d8;
+ --color-neutral-800: #e4e4e7;
+ --color-neutral-900: #f4f4f5;
+ --color-neutral-950: #fafafa;
+
+ /* Foreground */
+ --color-foreground: var(--color-neutral-900);
+ --color-foreground-subtle: var(--color-neutral-600);
+ --color-foreground-subtler: var(--color-neutral-500);
+}
diff --git a/src/styles/variables/index.css b/src/styles/variables/index.css
new file mode 100644
index 0000000..bf1b760
--- /dev/null
+++ b/src/styles/variables/index.css
@@ -0,0 +1,2 @@
+@import 'color.css';
+@import 'typography.css';
diff --git a/src/styles/variables/typography.css b/src/styles/variables/typography.css
new file mode 100644
index 0000000..e71fe7b
--- /dev/null
+++ b/src/styles/variables/typography.css
@@ -0,0 +1,20 @@
+:root {
+ --font-body: 'Inter', sans-serif;
+ --font-heading: 'Inter Tight', sans-serif;
+ --font-display: 'Fraunces', serif;
+
+ /* Font Sizes */
+ --font-base-size: 1rem;
+ --font-pos-ratio: 1.2;
+ --font-neg-ratio: 1.125;
+ --font-3xlg: calc(var(--font-xxlg) * var(--font-pos-ratio));
+ --font-2xlg: calc(var(--font-xlg) * var(--font-pos-ratio));
+ --font-xlg: calc(var(--font-lg) * var(--font-pos-ratio));
+ --font-lg: calc(var(--font-md) * var(--font-pos-ratio));
+ --font-md: calc(var(--font-base) * var(--font-pos-ratio));
+ --font-base: var(--font-base-size);
+ --font-sm: calc(var(--font-base) / var(--font-neg-ratio));
+ --font-xsm: calc(var(--font-sm) / var(--font-neg-ratio));
+ --font-2xsm: calc(var(--font-xsm) / var(--font-neg-ratio));
+ --font-3xsm: calc(var(--font-xxsm) / var(--font-neg-ratio));
+}