padreug/nr-interior-design
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: stone-warm OKLCH palette + Fraunces/Inter typography

Browse source 
Replace the boilerplate's neutral-gray HSL tokens with a stone-warm
OKLCH palette in both light and dark variants. Drop --radius to 0.25rem
for the clean architectural feel the brief asks for ("clean lines,
matte black accents, layered textures").

Pair Fraunces (display) with Inter (UI/body) via Bunny Fonts, exposed
through Tailwind 4 @theme inline as --font-serif / --font-sans. h1-h3
default to Fraunces; everything else uses Inter. Adds an `eyebrow`
utility for the uppercase tracked labels used across editorial portfolio
layouts.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Padreug 2026-05-27 11:11:01 +02:00
commit 2d75a40d7d
2 changed files with 73 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

11
index.html
View file

@ -4,7 +4,16 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Boilerplate Website</title> <meta
name="description"
content="Earth Walker Design — grounded, architectural, restorative interior design."
/>
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin />
<link
rel="stylesheet"
href="https://fonts.bunny.net/css?family=fraunces:300,400,500,600|inter:300,400,500,600&display=swap"
/>
<title>Earth Walker Design</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

105
src/style.css
View file

@ -4,48 +4,48 @@
@custom-variant dark (&:is(.dark *)); @custom-variant dark (&:is(.dark *));
:root { :root {
--background: hsl(0 0% 100%); --background: oklch(0.985 0.005 80);
--foreground: hsl(0 0% 3.9%); --foreground: oklch(0.2 0.012 60);
--card: hsl(0 0% 100%); --card: oklch(0.985 0.005 80);
--card-foreground: hsl(0 0% 3.9%); --card-foreground: oklch(0.2 0.012 60);
--popover: hsl(0 0% 100%); --popover: oklch(0.985 0.005 80);
--popover-foreground: hsl(0 0% 3.9%); --popover-foreground: oklch(0.2 0.012 60);
--primary: hsl(0 0% 9%); --primary: oklch(0.18 0.008 60);
--primary-foreground: hsl(0 0% 98%); --primary-foreground: oklch(0.97 0.008 80);
--secondary: hsl(0 0% 96.1%); --secondary: oklch(0.94 0.008 75);
--secondary-foreground: hsl(0 0% 9%); --secondary-foreground: oklch(0.2 0.012 60);
--muted: hsl(0 0% 96.1%); --muted: oklch(0.94 0.008 75);
--muted-foreground: hsl(0 0% 45.1%); --muted-foreground: oklch(0.5 0.015 60);
--accent: hsl(0 0% 96.1%); --accent: oklch(0.92 0.018 65);
--accent-foreground: hsl(0 0% 9%); --accent-foreground: oklch(0.2 0.012 60);
--destructive: hsl(0 84.2% 60.2%); --destructive: oklch(0.55 0.18 25);
--destructive-foreground: hsl(0 0% 98%); --destructive-foreground: oklch(0.97 0.008 80);
--border: hsl(0 0% 89.8%); --border: oklch(0.88 0.01 70);
--input: hsl(0 0% 89.8%); --input: oklch(0.88 0.01 70);
--ring: hsl(0 0% 3.9%); --ring: oklch(0.2 0.012 60);
--radius: 0.5rem; --radius: 0.25rem;
} }
.dark { .dark {
--background: hsl(0 0% 3.9%); --background: oklch(0.16 0.008 60);
--foreground: hsl(0 0% 98%); --foreground: oklch(0.95 0.01 80);
--card: hsl(0 0% 3.9%); --card: oklch(0.18 0.008 60);
--card-foreground: hsl(0 0% 98%); --card-foreground: oklch(0.95 0.01 80);
--popover: hsl(0 0% 3.9%); --popover: oklch(0.18 0.008 60);
--popover-foreground: hsl(0 0% 98%); --popover-foreground: oklch(0.95 0.01 80);
--primary: hsl(0 0% 98%); --primary: oklch(0.95 0.01 80);
--primary-foreground: hsl(0 0% 9%); --primary-foreground: oklch(0.18 0.008 60);
--secondary: hsl(0 0% 14.9%); --secondary: oklch(0.24 0.012 60);
--secondary-foreground: hsl(0 0% 98%); --secondary-foreground: oklch(0.95 0.01 80);
--muted: hsl(0 0% 14.9%); --muted: oklch(0.24 0.012 60);
--muted-foreground: hsl(0 0% 63.9%); --muted-foreground: oklch(0.7 0.012 70);
--accent: hsl(0 0% 14.9%); --accent: oklch(0.3 0.022 65);
--accent-foreground: hsl(0 0% 98%); --accent-foreground: oklch(0.95 0.01 80);
--destructive: hsl(0 62.8% 30.6%); --destructive: oklch(0.45 0.18 25);
--destructive-foreground: hsl(0 0% 98%); --destructive-foreground: oklch(0.95 0.01 80);
--border: hsl(0 0% 14.9%); --border: oklch(0.28 0.012 60);
--input: hsl(0 0% 14.9%); --input: oklch(0.28 0.012 60);
--ring: hsl(0 0% 83.1%); --ring: oklch(0.85 0.012 75);
} }
@theme inline { @theme inline {
@ -69,15 +69,36 @@
--color-input: var(--input); --color-input: var(--input);
--color-ring: var(--ring); --color-ring: var(--ring);
--radius-lg: var(--radius); --radius-lg: var(--radius);
--radius-md: calc(var(--radius) - 2px); --radius-md: calc(var(--radius) - 1px);
--radius-sm: calc(var(--radius) - 4px); --radius-sm: calc(var(--radius) - 2px);
--font-sans:
'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
'Helvetica Neue', Arial, sans-serif;
--font-serif: 'Fraunces', ui-serif, Georgia, 'Times New Roman', serif;
} }
@layer base { @layer base {
* { * {
@apply border-border; @apply border-border;
} }
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body { body {
@apply bg-background text-foreground; @apply bg-background text-foreground font-sans;
font-feature-settings:
'ss01',
'cv11';
}
h1,
h2,
h3 {
@apply font-serif;
font-feature-settings: 'ss01';
} }
} }
@utility eyebrow {
@apply text-xs uppercase tracking-[0.18em] text-muted-foreground;
}