From 0c6815f7484606c663b035541fe83195f38ca182 Mon Sep 17 00:00:00 2001 From: Ronald Tse Date: Thu, 18 Jun 2026 16:46:34 +0800 Subject: [PATCH 01/18] feat(home): redesign homepage as a type specimen MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Replace the generic VitePress-template landing (centered hero, 3-equal-card product grid, stat-counter row, feature cards) with a type-specimen / editorial treatment that makes typography the design engine — the most on-brand direction for a font project and the most differentiated from generic dev-tool sites. Design: warm cream paper + ink, rose as a single printer's-ink accent, SVG paper grain overlay, Fraunces (variable opsz) for display, IBM Plex Sans for body, IBM Plex Mono for labels/terminal. The hero reads like a specimen spread (massive headline with the keyword italic+rose, a mono spec line, a terminal 'specimen plate', a faint ghost numeral). Products become asymmetric specimen plates with variable-font hover. Stats render as typographic colophon prose. The 'why' block has a giant rose drop cap. Engineering: per-page palette via pageClass (specimen-home) in theme/style.css with a full light+dark pair (cream paper / warm ink paper); Google Fonts loaded in config.ts head; all subsite links carry target="_self" (build guard passes); on-load motion is CSS-only (words set themselves with staggered delays). Verified via Playwright on the dev server: all three webfonts load, variable opsz 144 applied, cream/ink palette live in light mode, dark mode swaps correctly to warm dark paper, zero console errors, full page renders. Build + subsite-link guard pass. --- .vitepress/components/HomePage.vue | 1069 +++++++++++++--------------- .vitepress/config.ts | 10 + .vitepress/theme/style.css | 34 + index.md | 1 + 4 files changed, 536 insertions(+), 578 deletions(-) diff --git a/.vitepress/components/HomePage.vue b/.vitepress/components/HomePage.vue index 83fdc9f..5932efe 100644 --- a/.vitepress/components/HomePage.vue +++ b/.vitepress/components/HomePage.vue @@ -1,662 +1,575 @@ diff --git a/.vitepress/config.ts b/.vitepress/config.ts index 4970a6e..ef688b7 100644 --- a/.vitepress/config.ts +++ b/.vitepress/config.ts @@ -41,6 +41,16 @@ export default defineConfig({ ["link", { rel: "apple-touch-icon", sizes: "180x180", href: "/apple-touch-icon.png" }], ["link", { rel: "manifest", href: "/site.webmanifest" }], ["meta", { property: "og:type", content: "website" }], + // Type Specimen homepage typography (also used site-wide for display). + ["link", { rel: "preconnect", href: "https://fonts.googleapis.com" }], + ["link", { rel: "preconnect", href: "https://fonts.gstatic.com", crossorigin: "" }], + [ + "link", + { + rel: "stylesheet", + href: "https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..700;1,9..144,300..700&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@300;400;500;600&display=swap", + }, + ], ], // Per-page og:* and twitter:* tags are derived from each page's frontmatter diff --git a/.vitepress/theme/style.css b/.vitepress/theme/style.css index ba66915..c9e29e1 100644 --- a/.vitepress/theme/style.css +++ b/.vitepress/theme/style.css @@ -150,3 +150,37 @@ html.dark .vp-doc [class*="language-"] { .VPNav .VPImage { height: 39px; } + +/* ─── Type Specimen homepage ─────────────────────────────────────── */ +/* Scoped palette for the homepage (pageClass: specimen-home). + Light = warm cream paper; Dark = warm ink paper. The rose is the + single "printer's ink" accent in both. */ +.specimen-home { + --spec-paper: #f1ece1; + --spec-paper-deep: #e7e0d1; + --spec-ink: #1c1a18; + --spec-ink-soft: #4a4744; + --spec-mute: #75716c; + --spec-rose: #b8475f; + --spec-rose-soft: #d4718a; + --spec-rule: rgba(28, 26, 24, 0.18); + --spec-rule-strong: rgba(28, 26, 24, 0.55); + --spec-term-bg: #1c1a18; + --spec-term-ink: #ecdfd0; + background-color: var(--spec-paper); +} + +html.dark .specimen-home { + --spec-paper: #161513; + --spec-paper-deep: #211f1c; + --spec-ink: #ecdfd0; + --spec-ink-soft: #b8ada0; + --spec-mute: #8a857f; + --spec-rose: #d4718a; + --spec-rose-soft: #e08a9e; + --spec-rule: rgba(236, 223, 208, 0.16); + --spec-rule-strong: rgba(236, 223, 208, 0.45); + --spec-term-bg: #0d0c0c; + --spec-term-ink: #ecdfd0; + background-color: var(--spec-paper); +} diff --git a/index.md b/index.md index b9fe2ed..a85370e 100644 --- a/index.md +++ b/index.md @@ -2,6 +2,7 @@ layout: page title: Fontist - Cross-Platform Font Management description: Install, manage, and build fonts programmatically across Windows, Linux, and macOS. Designed for automated systems and digital publishing. +pageClass: specimen-home --- From 91afc91dde56d65dccf18387f55eaabec93f6dee Mon Sep 17 00:00:00 2001 From: Ronald Tse Date: Thu, 18 Jun 2026 19:29:21 +0800 Subject: [PATCH 02/18] feat(design): site-wide specimen system + fix specimens concept and nav leak MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Three improvements based on review feedback: 1. Site-wide design system: the specimen palette (cream paper + ink + rose), paper grain, Fraunces/IBM Plex typography, and restyled VPNav/VPFooter/.vp-doc now apply GLOBALLY (theme/style.css) — every page (home, about, blog, docs) shares one design language instead of the homepage being skinned in isolation. The nav is transparent-over-paper with mono labels and a hairline rule. 2. Specimens vs Instruments: the three products (Fontist/Fontisan/Formulas) are tools, not typefaces — so rendering them as 'specimens' was incoherent. Split into two honest sections: 'Specimens' (real typefaces from the registry — Roboto, Fraunces, IBM Plex, Source Serif, JetBrains Mono — shown at display size in their own face, the genuine specimen move) and 'The Instruments' (the tools, presented functionally). 3. Fixes: removed the redundant 'Fontist' word from the homepage masthead (already in the nav logo); removed the not-useful 'Set in Fraunces, variable opsz 9-144' meta-row; made the nav background opaque (paper) so scrolled content no longer leaks through the transparent bar. Verified via Playwright: nav opaque at scrollY=800 (rgb(241,236,225), no leak); masthead and meta-row fixes confirmed; all fonts load; global typography (Fraunces headings, IBM Plex body) applies on both homepage and /about/. --- .vitepress/components/HomePage.vue | 346 +++++++++++++----------- .vitepress/config.ts | 2 +- .vitepress/theme/style.css | 413 ++++++++++++++++++++--------- 3 files changed, 468 insertions(+), 293 deletions(-) diff --git a/.vitepress/components/HomePage.vue b/.vitepress/components/HomePage.vue index 5932efe..bd82caa 100644 --- a/.vitepress/components/HomePage.vue +++ b/.vitepress/components/HomePage.vue @@ -1,37 +1,70 @@ @@ -40,7 +73,6 @@ const products = [
- Fontist ● A Specimen for Cross-Platform Font Management Vol. 01 / MMXXVI
@@ -49,11 +81,6 @@ const products = [
-
- Specimen 01 — The Hero - Set in Fraunces, variable opsz 9–144 -
-

Fonts @@ -98,29 +125,55 @@ const products = [

- -
+ +
+
+
+
+

§ Specimens

+

Type, ready
to install.

+
+

+ A glimpse of the openly-licensed typefaces Fontist installs — each available + across Windows, Linux, and macOS with a single command. The registry indexes + 2,175 of them. +

+
+ +
    +
  • +
    {{ s.name }}
    +
    + $ {{ s.install }} + · + {{ s.note }} +
    +
    • +
+
+
+ + +
-

§ The Instrumentarium

-

Three instruments
for the font engineer.

+

§ The Instruments

+

Three tools.
One pipeline.

- A small family of tools that install, shape, and index openly-licensed type — - the same way, on every platform, in every pipeline. + The software that sources, shapes, and indexes the type — small, discrete, + and designed to compose.

-
-
№ {{ p.num }}
-

- {{ p.name }}{{ p.tag }} -

-
-

{{ p.role }}

-

{{ p.spec }}

- {{ p.cta }} → +
+
+
{{ t.num }}
+

{{ t.name }}

+

{{ t.role }}

+

{{ t.spec }}

+ {{ t.cta }} →
@@ -170,9 +223,7 @@ const products = [ diff --git a/.vitepress/components/BlogIndex.vue b/.vitepress/components/BlogIndex.vue index 1e41c3a..2ca8ab2 100644 --- a/.vitepress/components/BlogIndex.vue +++ b/.vitepress/components/BlogIndex.vue @@ -1,8 +1,5 @@