From 5148c253277130bf20ef97c3ae80bfd3434ae895 Mon Sep 17 00:00:00 2001 From: Lakshmi Tanmay Date: Sun, 27 Sep 2026 14:43:38 +0530 Subject: [PATCH 1/7] feat: switch to Archivo and a neutral palette The rounded display face and navy/orange palette made Dexa feel like a toy. Archivo's width axis now covers headings and dense figures, the chrome is neutral grey so type colors are the only hues, and radii are tighter. Co-Authored-By: Claude Opus 5.5 (1M context) --- bun.lock | 7 +-- package.json | 3 +- src/lib/assets/favicon.svg | 2 +- src/lib/components/site/logo.svelte | 7 +-- src/lib/pokemon/types.ts | 2 +- src/routes/+layout.svelte | 2 +- src/routes/layout.css | 96 ++++++++++++++--------------- static/icon.svg | 2 +- static/manifest.webmanifest | 4 +- 9 files changed, 58 insertions(+), 67 deletions(-) diff --git a/bun.lock b/bun.lock index 9c145de..ca93c4a 100644 --- a/bun.lock +++ b/bun.lock @@ -11,8 +11,7 @@ "drizzle-orm": "^0.45.3", }, "devDependencies": { - "@fontsource-variable/onest": "^5.3.1", - "@fontsource-variable/unbounded": "^5.3.0", + "@fontsource-variable/archivo": "^5.3.0", "@internationalized/date": "^3.12.4", "@lucide/svelte": "^1.48.0", "@sveltejs/adapter-vercel": "^6.3.4", @@ -131,9 +130,7 @@ "@floating-ui/utils": ["@floating-ui/utils@0.2.12", "", {}, "sha512-HpCo8tmWzLVad5s2d19EhAz5zqrrQ6s69qd6moPMQvkOuSwDT1YgRfWSVuc4ennqrgv3OHppiOGMQ7oC13yIww=="], - "@fontsource-variable/onest": ["@fontsource-variable/onest@5.3.1", "", {}, "sha512-xaaw6G4HDB2/RczsWLD/2bnib4ykmQlTlBUN3GOEOiyErilZukQWVJG95h9zwAy0i8KY+QzDa+COPfqhI72Acw=="], - - "@fontsource-variable/unbounded": ["@fontsource-variable/unbounded@5.3.0", "", {}, "sha512-ea565Ncn4r7gPdBEHcmaF31V11hDfkL7b/JCklLobQbMfbu2ZZQrVWNgdeEFWFLqNh36yhieZWOgxdAnMTzrLg=="], + "@fontsource-variable/archivo": ["@fontsource-variable/archivo@5.3.0", "", {}, "sha512-HogK8FJelrD1o7TlZlkIVtHgc20bO5PZRWE7mUeUTdMN055alznQV6/00J00IBeu8FQAH4s3zW9UJNvKExXf+g=="], "@internationalized/date": ["@internationalized/date@3.12.4", "", { "dependencies": { "@swc/helpers": "^0.5.0" } }, "sha512-M1dEn4c1U1HsSlaVR8upZtSqvXrTkHDfv18H01uCSJyjVLDxnBR38v/fMxecmlwXKR4i9HeZcmgQAPE6A+aGJQ=="], diff --git a/package.json b/package.json index 8dd58c5..7cb9838 100644 --- a/package.json +++ b/package.json @@ -23,8 +23,7 @@ "drizzle-orm": "^0.45.3" }, "devDependencies": { - "@fontsource-variable/onest": "^5.3.1", - "@fontsource-variable/unbounded": "^5.3.0", + "@fontsource-variable/archivo": "^5.3.0", "@internationalized/date": "^3.12.4", "@lucide/svelte": "^1.48.0", "@sveltejs/adapter-vercel": "^6.3.4", diff --git a/src/lib/assets/favicon.svg b/src/lib/assets/favicon.svg index c0f5513..d9b85bc 100644 --- a/src/lib/assets/favicon.svg +++ b/src/lib/assets/favicon.svg @@ -1 +1 @@ - + diff --git a/src/lib/components/site/logo.svelte b/src/lib/components/site/logo.svelte index fc25e75..f5d88b1 100644 --- a/src/lib/components/site/logo.svelte +++ b/src/lib/components/site/logo.svelte @@ -5,8 +5,7 @@ diff --git a/src/lib/pokemon/types.ts b/src/lib/pokemon/types.ts index b87ef6a..423a861 100644 --- a/src/lib/pokemon/types.ts +++ b/src/lib/pokemon/types.ts @@ -29,7 +29,7 @@ export function isTypeName(value: string): value is TypeName { const LIGHT_TEXT_TYPES = new Set(["fighting", "poison", "ghost", "dragon", "dark"]); export function typeTextClass(type: TypeName): string { - return LIGHT_TEXT_TYPES.has(type) ? "text-white" : "text-[#1c2340]"; + return LIGHT_TEXT_TYPES.has(type) ? "text-white" : "text-[#16181d]"; } export function typeColorVar(type: string): string { diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index efc0ee3..8220837 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -21,7 +21,7 @@ - + {#if data.accountsEnabled} diff --git a/src/routes/layout.css b/src/routes/layout.css index decf20f..d9adb7b 100644 --- a/src/routes/layout.css +++ b/src/routes/layout.css @@ -1,32 +1,32 @@ @import "tailwindcss"; @import "tw-animate-css"; @import "shadcn-svelte/tailwind.css"; -@import "@fontsource-variable/onest"; -@import "@fontsource-variable/unbounded"; +@import "@fontsource-variable/archivo/wdth.css"; @custom-variant dark (&:is(.dark *)); :root { - --radius: 0.75rem; + --radius: 0.5rem; - --background: #f5f6f8; - --foreground: #1c2340; + /* Chrome stays neutral so type colors are the only hues on the page. */ + --background: #f3f4f6; + --foreground: #16181d; --card: #ffffff; - --card-foreground: #1c2340; + --card-foreground: #16181d; --popover: #ffffff; - --popover-foreground: #1c2340; - --primary: #cc2e0b; + --popover-foreground: #16181d; + --primary: #16181d; --primary-foreground: #ffffff; - --secondary: #e9ecf2; - --secondary-foreground: #1c2340; - --muted: #eceef3; - --muted-foreground: #5b6478; - --accent: #e6e9f0; - --accent-foreground: #1c2340; + --secondary: #e8eaee; + --secondary-foreground: #16181d; + --muted: #eceef1; + --muted-foreground: #5c6370; + --accent: #e4e7eb; + --accent-foreground: #16181d; --destructive: #c8102e; - --border: #dde1e8; - --input: #d3d8e1; - --ring: #cc2e0b; + --border: #dcdfe4; + --input: #d0d4da; + --ring: #2f6feb; /* Canonical type palette; text color on each is chosen for contrast. */ --type-normal: #a8a77a; @@ -60,24 +60,24 @@ } .dark { - --background: #0f1528; - --foreground: #e8ebf3; - --card: #161d33; - --card-foreground: #e8ebf3; - --popover: #1a2239; - --popover-foreground: #e8ebf3; - --primary: #ff6a47; - --primary-foreground: #0f1528; - --secondary: #1f2842; - --secondary-foreground: #e8ebf3; - --muted: #1b2339; - --muted-foreground: #98a1b8; - --accent: #232d49; - --accent-foreground: #e8ebf3; + --background: #131417; + --foreground: #e9eaec; + --card: #1b1d21; + --card-foreground: #e9eaec; + --popover: #212328; + --popover-foreground: #e9eaec; + --primary: #e9eaec; + --primary-foreground: #131417; + --secondary: #24262b; + --secondary-foreground: #e9eaec; + --muted: #202226; + --muted-foreground: #989da7; + --accent: #282b31; + --accent-foreground: #e9eaec; --destructive: #ff5c6c; - --border: #262f4a; - --input: #2e3855; - --ring: #ff6a47; + --border: #2b2e34; + --input: #363940; + --ring: #6ea0ff; --series-1: #3987e5; --series-2: #d95926; @@ -86,14 +86,13 @@ } @theme inline { - --font-sans: "Onest Variable", ui-sans-serif, system-ui, sans-serif; - --font-display: "Unbounded Variable", "Onest Variable", ui-sans-serif, sans-serif; + --font-sans: "Archivo Variable", ui-sans-serif, system-ui, sans-serif; --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); - --radius-xl: calc(var(--radius) + 4px); - --radius-2xl: calc(var(--radius) + 10px); + --radius-xl: calc(var(--radius) + 2px); + --radius-2xl: calc(var(--radius) + 4px); --color-background: var(--background); --color-foreground: var(--foreground); @@ -151,7 +150,6 @@ body { @apply bg-background text-foreground font-sans antialiased; - font-feature-settings: "ss01"; } :focus-visible { @@ -159,25 +157,23 @@ } } +/* Archivo's width axis: expanded for headings, condensed for dense figures. */ @utility font-display { - font-family: var(--font-display); - font-feature-settings: "tnum"; + font-stretch: 118%; + font-variant-numeric: tabular-nums; +} + +@utility font-condensed { + font-stretch: 82%; } @utility tabular { font-variant-numeric: tabular-nums; } -/* A soft field of the current tint, used behind artwork. */ +/* A flat wash of the current tint, used behind artwork. */ @utility tint-field { - background: - radial-gradient( - circle at 50% 55%, - color-mix(in oklab, var(--tint) 38%, transparent) 0%, - color-mix(in oklab, var(--tint) 14%, transparent) 55%, - transparent 72% - ), - color-mix(in oklab, var(--tint) 12%, var(--card)); + background: color-mix(in oklab, var(--tint) 16%, var(--card)); } @media (prefers-reduced-motion: reduce) { diff --git a/static/icon.svg b/static/icon.svg index c0f5513..d9b85bc 100644 --- a/static/icon.svg +++ b/static/icon.svg @@ -1 +1 @@ - + diff --git a/static/manifest.webmanifest b/static/manifest.webmanifest index f06b526..5a89af0 100644 --- a/static/manifest.webmanifest +++ b/static/manifest.webmanifest @@ -4,7 +4,7 @@ "description": "The last Pokédex you will ever need.", "start_url": "/", "display": "standalone", - "background_color": "#f5f6f8", - "theme_color": "#cc2e0b", + "background_color": "#f3f4f6", + "theme_color": "#16181d", "icons": [{ "src": "/icon.svg", "sizes": "any", "type": "image/svg+xml", "purpose": "any" }] } From 4b561acb76b3f8d384870f5dacee258380e2e11a Mon Sep 17 00:00:00 2001 From: Lakshmi Tanmay Date: Sun, 27 Sep 2026 14:44:25 +0530 Subject: [PATCH 2/7] feat: restyle the header as a solid app bar The translucent header with pill-shaped links read as a marketing site. It is now a solid bar with an underline marking the current section, matching the footer surface. Co-Authored-By: Claude Opus 5.5 (1M context) --- src/lib/components/site/search-trigger.svelte | 2 +- src/lib/components/site/site-footer.svelte | 2 +- src/lib/components/site/site-header.svelte | 20 +++++++++---------- 3 files changed, 12 insertions(+), 12 deletions(-) diff --git a/src/lib/components/site/search-trigger.svelte b/src/lib/components/site/search-trigger.svelte index e3e8e40..7b44ffb 100644 --- a/src/lib/components/site/search-trigger.svelte +++ b/src/lib/components/site/search-trigger.svelte @@ -15,7 +15,7 @@ variant="outline" size="sm" onclick={() => (palette.open = true)} - class="hidden w-56 justify-start gap-2 text-muted-foreground sm:flex" + class="hidden w-60 justify-start gap-2 bg-background text-muted-foreground sm:flex dark:bg-background" > Search Pokémon diff --git a/src/lib/components/site/site-footer.svelte b/src/lib/components/site/site-footer.svelte index 2c44bb7..24059de 100644 --- a/src/lib/components/site/site-footer.svelte +++ b/src/lib/components/site/site-footer.svelte @@ -1,4 +1,4 @@ -