diff --git a/app/layout.js b/app/layout.js index 34589a7..d4d41bc 100644 --- a/app/layout.js +++ b/app/layout.js @@ -5,25 +5,28 @@ import Footer from "./components/Footer"; const inter = Inter({ subsets: ["latin"], - weight: ["400", "500"], + weight: ["400", "500", "600", "700"], variable: "--font-inter", + display: "swap", }); const bricolageGrotesque = Bricolage_Grotesque({ subsets: ["latin"], - weight: ["400", "500", "700"], + weight: ["400", "500", "700", "800"], variable: "--font-bricolage-grotesque", + display: "swap", }); const spaceGrotesk = Space_Grotesk({ subsets: ["latin"], weight: ["400", "500", "700"], variable: "--font-space-grotesk", + display: "swap", }); export default function RootLayout({ children }) { return ( - + diff --git a/app/tailwind.css b/app/tailwind.css index df97465..90f379a 100644 --- a/app/tailwind.css +++ b/app/tailwind.css @@ -4,6 +4,7 @@ @source "../stories/**/*"; @source "../app/**/*"; @source "../.storybook/**/*"; +@source "./**/*"; @theme inline { /* Custom breakpoints */ @@ -16,6 +17,14 @@ /* Reset Tailwind color defaults to avoid collisions */ --color-*: initial; + /* Font families */ + --font-sans: var(--font-inter), ui-sans-serif, system-ui, -apple-system, + "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + --font-display: var(--font-bricolage-grotesque), ui-sans-serif, system-ui, + -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + --font-mono: var(--font-space-grotesk), ui-monospace, SFMono-Regular, + "SF Mono", Consolas, "Liberation Mono", Menlo, monospace; + /* Dimension */ --spacing-scale-000: 0px; --spacing-scale-001: 1px; @@ -409,7 +418,6 @@ --shadow-subtle: 0px 0px 48px 0px oklch(0% 0 0 / 10%); --shadow-minimal-shadow: 0px 0px 8px 0px oklch(0% 0 0 / 15%); --shadow-focus-inverse: 0px 0px 10px 1px oklch(23.93% 0 263.28); - --shadow-subtle: 0px 0px 48px 0px oklch(0% 0 0 / 10%); /* Use this shadow most of the time */ --shadow-shallow-below: 0px 4px 16px 0px oklch(0% 0 0 / 12%); --shadow-default: 0px 4px 6px 0px oklch(0% 0 0 / 9%);