Building Your Token Layer
This is a member-only chapter. Log in with your Signal Over Noise membership email to continue.
Log in to readModule 3 · Section 3 of 7
Building Your Token Layer
Create src/styles/global.css. This file defines everything that’s site-wide — colours, typography, spacing, and any global resets.
/* src/styles/global.css */
:root {
/* Colours */
--color-text: #1a1a2e;
--color-text-muted: #6b7280;
--color-background: #ffffff;
--color-primary: #457b9d;
--color-primary-dark: #2c5f7a;
--color-border: #e5e7eb;
--color-surface: #f9fafb;
/* Typography */
--font-sans: 'Inter', system-ui, -apple-system, sans-serif;
--font-mono: 'Fira Code', 'Cascadia Code', monospace;
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-lg: 1.125rem;
--font-size-xl: 1.25rem;
--font-size-2xl: 1.5rem;
--font-size-3xl: 2rem;
/* Spacing */
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-4: 1rem;
--space-6: 1.5rem;
--space-8: 2rem;
--space-12: 3rem;
/* Layout */
--container-max: 1200px;
--container-narrow: 720px;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 16px;
}
/* Global resets */
*, *::before, *::after {
box-sizing: border-box;
}
body {
font-family: var(--font-sans);
font-size: var(--font-size-base);
color: var(--color-text);
background: var(--color-background);
line-height: 1.6;
margin: 0;
}
img {
max-width: 100%;
height: auto;
}
a {
color: var(--color-primary);
}Import this in your layout’s <head>:
<style is:global>
@import '../styles/global.css';
</style>Or reference it directly:
<link rel="stylesheet" href="/styles/global.css" />Either works. The is:global approach keeps everything inside the component file.