diff --git a/packages/ghost-ui/.shadcn/skills.md b/packages/ghost-ui/.shadcn/skills.md index f0a8fbc..edf7f26 100644 --- a/packages/ghost-ui/.shadcn/skills.md +++ b/packages/ghost-ui/.shadcn/skills.md @@ -4,7 +4,7 @@ Ghost UI is a magazine-inspired design system built on shadcn/ui with: - **Pill geometry**: 999px border-radius on buttons, inputs, and pills -- **HK Grotesk typography**: Self-hosted, 7 weights (300-900), magazine-scale heading hierarchy +- **System font stack**: consumers bring their own typeface, magazine-scale heading hierarchy - **4-tier shadow hierarchy**: mini, card, elevated, modal - **97 components** across 9 categories - **323+ CSS custom properties** with full light/dark mode support diff --git a/packages/ghost-ui/registry.json b/packages/ghost-ui/registry.json index 299175f..3ae005f 100644 --- a/packages/ghost-ui/registry.json +++ b/packages/ghost-ui/registry.json @@ -7,12 +7,12 @@ "name": "ghost-ui-base", "type": "registry:base", "title": "Ghost UI", - "description": "Magazine-inspired design system — pill geometry, HK Grotesk typography, 4-tier shadow hierarchy", + "description": "ghost design language", "author": "block", "style": "ghost", "iconLibrary": "lucide", "baseColor": "neutral", - "registryDependencies": ["styles-main", "font-hk-grotesk", "utils"], + "registryDependencies": ["styles-main", "font-faces", "utils"], "dependencies": ["tw-animate-css", "clsx", "tailwind-merge"], "devDependencies": ["tailwindcss"], "files": [], @@ -93,10 +93,10 @@ "--color-surface-dark-text": "var(--surface-dark-text)", "--color-surface-dark-muted": "var(--surface-dark-muted)", "--color-surface-dark-border": "var(--surface-dark-border)", - "--font-sans": "\"HK Grotesk\", sans-serif", + "--font-sans": "system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif", "--font-mono": "\"Geist Mono\", monospace", "--font-serif": "serif", - "--font-display": "\"HK Grotesk\", sans-serif", + "--font-display": "system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif", "--radius-pill": "999px", "--radius-button": "999px", "--radius-input": "999px", @@ -353,7 +353,7 @@ "type": "registry:style", "dependencies": ["tw-animate-css"], "devDependencies": ["tailwindcss"], - "registryDependencies": ["font-hk-grotesk"], + "registryDependencies": ["font-faces"], "files": [ { "type": "registry:theme", @@ -363,7 +363,7 @@ ] }, { - "name": "font-hk-grotesk-faces", + "name": "font-faces", "type": "registry:style", "files": [ { @@ -373,59 +373,6 @@ } ] }, - { - "name": "font-hk-grotesk", - "type": "registry:font", - "font": { - "family": "HK Grotesk", - "provider": "google", - "import": "HK_Grotesk", - "variable": "--font-hk-grotesk", - "weight": ["300", "400", "500", "600", "700", "800", "900"], - "subsets": ["latin"] - }, - "meta": { - "selfHosted": true - }, - "registryDependencies": ["font-hk-grotesk-faces"], - "files": [ - { - "type": "registry:file", - "path": "src/fonts/HKGrotesk-Light.woff2", - "target": "public/fonts/HKGrotesk-Light.woff2" - }, - { - "type": "registry:file", - "path": "src/fonts/HKGrotesk-Regular.woff2", - "target": "public/fonts/HKGrotesk-Regular.woff2" - }, - { - "type": "registry:file", - "path": "src/fonts/HKGrotesk-Medium.woff2", - "target": "public/fonts/HKGrotesk-Medium.woff2" - }, - { - "type": "registry:file", - "path": "src/fonts/HKGrotesk-SemiBold.woff2", - "target": "public/fonts/HKGrotesk-SemiBold.woff2" - }, - { - "type": "registry:file", - "path": "src/fonts/HKGrotesk-Bold.woff2", - "target": "public/fonts/HKGrotesk-Bold.woff2" - }, - { - "type": "registry:file", - "path": "src/fonts/HKGrotesk-ExtraBold.woff2", - "target": "public/fonts/HKGrotesk-ExtraBold.woff2" - }, - { - "type": "registry:file", - "path": "src/fonts/HKGrotesk-Black.woff2", - "target": "public/fonts/HKGrotesk-Black.woff2" - } - ] - }, { "name": "utils", "type": "registry:lib", diff --git a/packages/ghost-ui/scripts/build-base-vars.mjs b/packages/ghost-ui/scripts/build-base-vars.mjs index 935e75b..8b2046d 100644 --- a/packages/ghost-ui/scripts/build-base-vars.mjs +++ b/packages/ghost-ui/scripts/build-base-vars.mjs @@ -58,13 +58,12 @@ if (!baseItem) { name: "ghost-ui-base", type: "registry:base", title: "Ghost UI", - description: - "Magazine-inspired design system — pill geometry, HK Grotesk typography, 4-tier shadow hierarchy", + description: "ghost design language", author: "block", style: "ghost", iconLibrary: "lucide", baseColor: "neutral", - registryDependencies: ["styles-main", "font-hk-grotesk", "utils"], + registryDependencies: ["styles-main", "font-faces", "utils"], dependencies: ["tw-animate-css", "clsx", "tailwind-merge"], devDependencies: ["tailwindcss"], files: [], diff --git a/packages/ghost-ui/scripts/generate-skills.mjs b/packages/ghost-ui/scripts/generate-skills.mjs index b2f344b..47bc182 100644 --- a/packages/ghost-ui/scripts/generate-skills.mjs +++ b/packages/ghost-ui/scripts/generate-skills.mjs @@ -126,7 +126,7 @@ const markdown = `# Ghost UI — Agent Skills Ghost UI is a magazine-inspired design system built on shadcn/ui with: - **Pill geometry**: 999px border-radius on buttons, inputs, and pills -- **HK Grotesk typography**: Self-hosted, 7 weights (300-900), magazine-scale heading hierarchy +- **System font stack**: consumers bring their own typeface, magazine-scale heading hierarchy - **4-tier shadow hierarchy**: mini, card, elevated, modal - **${uiItems.length} components** across ${Object.keys(categories).length} categories - **${tokenCount}+ CSS custom properties** with full light/dark mode support diff --git a/packages/ghost-ui/src/App.tsx b/packages/ghost-ui/src/App.tsx index 1474f93..3726098 100644 --- a/packages/ghost-ui/src/App.tsx +++ b/packages/ghost-ui/src/App.tsx @@ -1,18 +1,25 @@ -import { Route, Routes } from "react-router"; +import { Navigate, Route, Routes, useParams } from "react-router"; import ComponentPage from "@/app/components/[name]/page"; import ComponentsIndex from "@/app/components/page"; import CLIReferencePage from "@/app/docs/cli/page"; import ConceptsPage from "@/app/docs/concepts/page"; import GettingStartedPage from "@/app/docs/getting-started/page"; -import DocsIndex from "@/app/docs/page"; +import DriftEngineIndex from "@/app/docs/page"; import SelfHostingPage from "@/app/docs/self-hosting/page"; import ColorsPage from "@/app/foundations/colors/page"; import FoundationsIndex from "@/app/foundations/page"; import TypographyPage from "@/app/foundations/typography/page"; import HomePage from "@/app/page"; +import ToolsIndex from "@/app/tools/page"; +import DesignLanguageIndex from "@/app/ui/page"; import { Dock } from "@/components/docs/dock"; import { ThemeProvider } from "@/components/theme/ThemeProvider"; +function ComponentRedirect() { + const { name } = useParams<{ name: string }>(); + return ; +} + export function App() { return ( } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> + + {/* Tools */} + } /> + } /> + } + /> + } /> + } /> + } + /> + + {/* Design Language */} + } /> + } /> + } /> + } + /> + } /> + } /> + + {/* Redirects from old URLs */} + } /> + } + /> + } + /> + } + /> + } + /> + } + /> + } + /> + } + /> + } + /> + } /> diff --git a/packages/ghost-ui/src/app/components/[name]/page.tsx b/packages/ghost-ui/src/app/components/[name]/page.tsx index 0f2cba3..0d7f3e3 100644 --- a/packages/ghost-ui/src/app/components/[name]/page.tsx +++ b/packages/ghost-ui/src/app/components/[name]/page.tsx @@ -28,10 +28,10 @@ function getDemoSource( export default function ComponentPage() { const { name } = useParams<{ name: string }>(); - if (!name) return ; + if (!name) return ; const component = getComponent(name); - if (!component) return ; + if (!component) return ; const category = getCategory(component.primaryCategory); const siblings = getComponentsByCategory(component.primaryCategory); diff --git a/packages/ghost-ui/src/app/components/page.tsx b/packages/ghost-ui/src/app/components/page.tsx index 2a7998a..f3d4ff1 100644 --- a/packages/ghost-ui/src/app/components/page.tsx +++ b/packages/ghost-ui/src/app/components/page.tsx @@ -123,7 +123,7 @@ export default function ComponentsIndex() { function ComponentPill({ slug, name }: { slug: string; name: string }) { return ( diff --git a/packages/ghost-ui/src/app/docs/cli/page.tsx b/packages/ghost-ui/src/app/docs/cli/page.tsx index a7a6cc7..156974a 100644 --- a/packages/ghost-ui/src/app/docs/cli/page.tsx +++ b/packages/ghost-ui/src/app/docs/cli/page.tsx @@ -309,11 +309,11 @@ ghost viz *.json --port 8080`}

See{" "} - + Core Concepts {" "} for the ideas behind these commands, or{" "} - + Getting Started {" "} for a guided walkthrough. diff --git a/packages/ghost-ui/src/app/docs/getting-started/page.tsx b/packages/ghost-ui/src/app/docs/getting-started/page.tsx index 367ddbe..d8a1e40 100644 --- a/packages/ghost-ui/src/app/docs/getting-started/page.tsx +++ b/packages/ghost-ui/src/app/docs/getting-started/page.tsx @@ -206,12 +206,12 @@ export default defineConfig({

Next:{" "} - + Core Concepts {" "} to understand fingerprints, drift, and evolution in depth. Or jump to the{" "} - + CLI Reference {" "} for every command and flag. diff --git a/packages/ghost-ui/src/app/docs/page.tsx b/packages/ghost-ui/src/app/docs/page.tsx index 1e7dc91..e92e842 100644 --- a/packages/ghost-ui/src/app/docs/page.tsx +++ b/packages/ghost-ui/src/app/docs/page.tsx @@ -1,13 +1,6 @@ "use client"; -import { - BookOpen, - Compass, - Fingerprint, - Layers, - Rocket, - Server, -} from "lucide-react"; +import { BookOpen, Fingerprint, Rocket, Server } from "lucide-react"; import type { ReactNode } from "react"; import { Link } from "react-router"; import { AnimatedPageHeader } from "@/components/docs/animated-page-header"; @@ -16,7 +9,7 @@ import { useStaggerReveal } from "@/hooks/use-scroll-reveal"; const hero = { name: "Core Concepts", - href: "/docs/concepts", + href: "/tools/drift/concepts", description: "Fingerprints, drift detection, evolution tracking, and fleet observability — the ideas behind Ghost.", hook: "Start here", @@ -31,39 +24,25 @@ const sections: { }[] = [ { name: "Getting Started", - href: "/docs/getting-started", + href: "/tools/drift/getting-started", description: "Install Ghost, create your first config, and run your first drift scan in under five minutes.", icon: , }, { name: "CLI Reference", - href: "/docs/cli", + href: "/tools/drift/cli", description: "All nine commands — scan, profile, compare, diff, ack, adopt, diverge, fleet, and viz.", icon: , }, { name: "Self-Hosting", - href: "/docs/self-hosting", + href: "/tools/drift/self-hosting", description: "Run Ghost UI as your own design system documentation site with your registry and tokens.", icon: , }, - { - name: "Ghost UI", - href: "/components", - description: - "Browse the component catalogue — 49 primitives and 48 AI-native elements ready to use.", - icon: , - }, - { - name: "Foundations", - href: "/foundations", - description: - "Color, typography, and the design tokens that underpin every Ghost UI component.", - icon: , - }, ]; export default function DocsIndex() { @@ -76,8 +55,8 @@ export default function DocsIndex() { return ( diff --git a/packages/ghost-ui/src/app/docs/self-hosting/page.tsx b/packages/ghost-ui/src/app/docs/self-hosting/page.tsx index 45996bd..0dddfe8 100644 --- a/packages/ghost-ui/src/app/docs/self-hosting/page.tsx +++ b/packages/ghost-ui/src/app/docs/self-hosting/page.tsx @@ -102,10 +102,7 @@ pnpm build:registry`} -

- Ghost UI uses self-hosted HK Grotesk (WOFF2). Font files live in{" "} - src/fonts/. To use your own typeface: -

+

Ghost UI defaults to system fonts. To use a custom typeface:

  1. Add your font files to the fonts directory
  2. @@ -191,11 +188,11 @@ RUN echo 'server { listen 80; location / { try_files $uri /index.html; } }' \\

    See{" "} - + Getting Started {" "} for the consumer-side setup, or browse the{" "} - + Component Catalogue {" "} to see what ships out of the box. diff --git a/packages/ghost-ui/src/app/foundations/page.tsx b/packages/ghost-ui/src/app/foundations/page.tsx index f8721e3..560b170 100644 --- a/packages/ghost-ui/src/app/foundations/page.tsx +++ b/packages/ghost-ui/src/app/foundations/page.tsx @@ -46,16 +46,16 @@ const foundations: { }[] = [ { name: "Colors", - href: "/foundations/colors", + href: "/ui/foundations/colors", description: "A pure monochromatic scale with selective semantic color for status and utility.", visual: , }, { name: "Typography", - href: "/foundations/typography", + href: "/ui/foundations/typography", description: - "Magazine-grade hierarchy with HK Grotesk. Display for headers, Regular for body, Mono for data.", + "Magazine-grade hierarchy. Display for headers, Regular for body, Mono for data.", visual: , }, ]; diff --git a/packages/ghost-ui/src/app/foundations/typography/page.tsx b/packages/ghost-ui/src/app/foundations/typography/page.tsx index f54784f..ee32b5e 100644 --- a/packages/ghost-ui/src/app/foundations/typography/page.tsx +++ b/packages/ghost-ui/src/app/foundations/typography/page.tsx @@ -18,7 +18,7 @@ export default function TypographyPage() { diff --git a/packages/ghost-ui/src/app/tools/page.tsx b/packages/ghost-ui/src/app/tools/page.tsx new file mode 100644 index 0000000..5bda754 --- /dev/null +++ b/packages/ghost-ui/src/app/tools/page.tsx @@ -0,0 +1,61 @@ +"use client"; + +import { Fingerprint } from "lucide-react"; +import { Link } from "react-router"; +import { AnimatedPageHeader } from "@/components/docs/animated-page-header"; +import { SectionWrapper } from "@/components/docs/wrappers"; +import { useStaggerReveal } from "@/hooks/use-scroll-reveal"; + +const tools = [ + { + name: "Drift Engine", + href: "/tools/drift", + description: + "Fingerprint design systems, track their evolution, and surface divergence before it compounds.", + icon: , + }, +]; + +export default function ToolsIndex() { + const ref = useStaggerReveal(".tool-card", { + stagger: 0.06, + y: 30, + duration: 0.7, + }); + + return ( + + + +

    + {tools.map((tool) => ( + +
    + {tool.icon} +
    + + + {tool.name} + + + +

    + {tool.description} +

    + + ))} +
    + + ); +} diff --git a/packages/ghost-ui/src/app/ui/page.tsx b/packages/ghost-ui/src/app/ui/page.tsx new file mode 100644 index 0000000..0451f28 --- /dev/null +++ b/packages/ghost-ui/src/app/ui/page.tsx @@ -0,0 +1,128 @@ +"use client"; + +import { type ReactNode } from "react"; +import { Link } from "react-router"; +import { AnimatedPageHeader } from "@/components/docs/animated-page-header"; +import { SectionWrapper } from "@/components/docs/wrappers"; +import { useStaggerReveal } from "@/hooks/use-scroll-reveal"; +import { getAllComponents } from "@/lib/component-registry"; + +function ColorsVisual() { + return ( +
    + {[ + "bg-foreground", + "bg-foreground/80", + "bg-foreground/60", + "bg-foreground/40", + "bg-foreground/20", + "bg-foreground/10", + ].map((bg, i) => ( +
    + ))} +
    + ); +} + +function TypographyVisual() { + return ( +
    +
    +
    +
    +
    +
    + ); +} + +function ComponentsVisual() { + const count = getAllComponents().length; + return ( +
    + {Array.from({ length: 8 }).map((_, i) => ( +
    + ))} + + {count} components + +
    + ); +} + +const sections: { + name: string; + href: string; + description: string; + visual: ReactNode; +}[] = [ + { + name: "Foundations", + href: "/ui/foundations", + description: + "Color, typography, and the design tokens that underpin every Ghost UI component.", + visual: ( +
    +
    + +
    +
    + +
    +
    + ), + }, + { + name: "Components", + href: "/ui/components", + description: + "Production-ready building blocks. Every component follows Ghost UI — pill-first, monochromatic, accessible.", + visual: , + }, +]; + +export default function DesignLanguageIndex() { + const ref = useStaggerReveal(".dl-card", { + stagger: 0.06, + y: 30, + duration: 0.7, + }); + + return ( + + + +
    + {sections.map((item) => ( + +
    {item.visual}
    + + {item.name} + +

    + {item.description} +

    + + ))} +
    +     + ); +} diff --git a/packages/ghost-ui/src/components/docs/component-page-shell.tsx b/packages/ghost-ui/src/components/docs/component-page-shell.tsx index 8fc4b2e..c6a846b 100644 --- a/packages/ghost-ui/src/components/docs/component-page-shell.tsx +++ b/packages/ghost-ui/src/components/docs/component-page-shell.tsx @@ -147,7 +147,7 @@ export function ComponentPageShell({
    @@ -337,7 +337,7 @@ export function ComponentPageShell({ {component.registryDependencies.map((dep) => ( {dep} @@ -376,7 +376,7 @@ export function ComponentPageShell({
    {prev ? ( @@ -394,7 +394,7 @@ export function ComponentPageShell({ )} {next ? (
    diff --git a/packages/ghost-ui/src/components/docs/dock.tsx b/packages/ghost-ui/src/components/docs/dock.tsx index e5f7234..ca4d956 100644 --- a/packages/ghost-ui/src/components/docs/dock.tsx +++ b/packages/ghost-ui/src/components/docs/dock.tsx @@ -2,14 +2,13 @@ import type { LucideIcon } from "lucide-react"; import { - BookOpen, Home, - LayoutGrid, Monitor, Moon, Palette, Search, Sun, + Wrench, } from "lucide-react"; import { motion } from "motion/react"; import { useCallback, useEffect, useState } from "react"; @@ -37,9 +36,8 @@ import { cn } from "@/lib/utils"; const nav: { name: string; path: string; icon: LucideIcon }[] = [ { name: "Home", path: "/", icon: Home }, - { name: "Docs", path: "/docs", icon: BookOpen }, - { name: "Foundations", path: "/foundations", icon: Palette }, - { name: "Components", path: "/components", icon: LayoutGrid }, + { name: "Tools", path: "/tools", icon: Wrench }, + { name: "Design Language", path: "/ui", icon: Palette }, ]; export function Dock() { @@ -194,7 +192,7 @@ export function Dock() { { - navigate("/foundations/colors"); + navigate("/ui/foundations/colors"); setSearchOpen(false); }} > @@ -203,7 +201,7 @@ export function Dock() { { - navigate("/foundations/typography"); + navigate("/ui/foundations/typography"); setSearchOpen(false); }} > @@ -212,50 +210,50 @@ export function Dock() { - + { - navigate("/docs"); + navigate("/tools/drift"); setSearchOpen(false); }} > - - Docs Overview + + Drift Engine { - navigate("/docs/getting-started"); + navigate("/tools/drift/getting-started"); setSearchOpen(false); }} > - + Getting Started { - navigate("/docs/cli"); + navigate("/tools/drift/cli"); setSearchOpen(false); }} > - + CLI Reference { - navigate("/docs/concepts"); + navigate("/tools/drift/concepts"); setSearchOpen(false); }} > - + Core Concepts { - navigate("/docs/self-hosting"); + navigate("/tools/drift/self-hosting"); setSearchOpen(false); }} > - + Self-Hosting @@ -269,7 +267,7 @@ export function Dock() { { - navigate(`/components/${item.slug}`); + navigate(`/ui/components/${item.slug}`); setSearchOpen(false); }} > diff --git a/packages/ghost-ui/src/components/docs/foundations/typography.tsx b/packages/ghost-ui/src/components/docs/foundations/typography.tsx index a47572d..17c8b74 100644 --- a/packages/ghost-ui/src/components/docs/foundations/typography.tsx +++ b/packages/ghost-ui/src/components/docs/foundations/typography.tsx @@ -18,7 +18,7 @@ export function TypographyDemos() { Display

    - Display / 64–96px / Black (900) / HK Grotesk / -0.05em / 0.88 lh + Display / 64–96px / Black (900) /-0.05em / 0.88 lh

    @@ -29,7 +29,7 @@ export function TypographyDemos() { Section heading

    - Section / 44–64px / Bold (700) / HK Grotesk / -0.035em / 0.95 lh + Section / 44–64px / Bold (700) /-0.035em / 0.95 lh

    @@ -40,7 +40,7 @@ export function TypographyDemos() { Subsection heading

    - Sub / 28–40px / Bold (700) / HK Grotesk / -0.02em / 1.0 lh + Sub / 28–40px / Bold (700) /-0.02em / 1.0 lh

    @@ -51,7 +51,7 @@ export function TypographyDemos() { Card heading

    - Card / 20–28px / Semibold (600) / HK Grotesk / -0.01em / 1.1 lh + Card / 20–28px / Semibold (600) /-0.01em / 1.1 lh

    @@ -106,7 +106,7 @@ export function TypographyDemos() {

    - 11px / Semibold (600) / HK Grotesk / uppercase / +0.12em tracking + 11px / Semibold (600) / uppercase / +0.12em tracking

    @@ -274,13 +274,13 @@ export function TypographyDemos() {

    - HK Grotesk — The quick brown fox jumps over the lazy dog + The quick brown fox jumps over the lazy dog

    font-sans

    - HK Grotesk — The quick brown fox + The quick brown fox jumps over the lazy dog

    font-display

    diff --git a/packages/ghost-ui/src/components/docs/hero.tsx b/packages/ghost-ui/src/components/docs/hero.tsx index f5168a7..126ece2 100644 --- a/packages/ghost-ui/src/components/docs/hero.tsx +++ b/packages/ghost-ui/src/components/docs/hero.tsx @@ -101,7 +101,7 @@ export function Hero() { className="mt-4 text-center text-muted-foreground leading-relaxed whitespace-nowrap" style={{ fontSize: "clamp(0.875rem, 1.5vw, 1.125rem)" }} > - design language and drift detection for decentralized systems. + design infrastructure for decentralized systems.

    diff --git a/packages/ghost-ui/src/components/docs/registry-sidebar.tsx b/packages/ghost-ui/src/components/docs/registry-sidebar.tsx index 88880e4..18835df 100644 --- a/packages/ghost-ui/src/components/docs/registry-sidebar.tsx +++ b/packages/ghost-ui/src/components/docs/registry-sidebar.tsx @@ -31,9 +31,9 @@ import { const topNav = [ { name: "home", path: "/" }, - { name: "colors", path: "/foundations/colors" }, - { name: "typography", path: "/foundations/typography" }, - { name: "all components", path: "/components" }, + { name: "colors", path: "/ui/foundations/colors" }, + { name: "typography", path: "/ui/foundations/typography" }, + { name: "all components", path: "/ui/components" }, ]; export function RegistrySidebar() { @@ -170,9 +170,12 @@ function CategorySection({ - + {item.name} diff --git a/packages/ghost-ui/src/main.tsx b/packages/ghost-ui/src/main.tsx index acda205..a833076 100644 --- a/packages/ghost-ui/src/main.tsx +++ b/packages/ghost-ui/src/main.tsx @@ -3,6 +3,7 @@ import { createRoot } from "react-dom/client"; import { BrowserRouter } from "react-router"; import { App } from "./App"; import "./styles/main.css"; +import "./styles/dev-fonts.css"; createRoot(document.getElementById("root")!).render( diff --git a/packages/ghost-ui/src/styles/font-faces.css b/packages/ghost-ui/src/styles/font-faces.css index bce7e45..8c278e0 100644 --- a/packages/ghost-ui/src/styles/font-faces.css +++ b/packages/ghost-ui/src/styles/font-faces.css @@ -1,50 +1 @@ -/* ── HK Grotesk ── */ -@font-face { - font-family: "HK Grotesk"; - src: url("../fonts/HKGrotesk-Light.woff2") format("woff2"); - font-weight: 300; - font-style: normal; - font-display: swap; -} -@font-face { - font-family: "HK Grotesk"; - src: url("../fonts/HKGrotesk-Regular.woff2") format("woff2"); - font-weight: 400; - font-style: normal; - font-display: swap; -} -@font-face { - font-family: "HK Grotesk"; - src: url("../fonts/HKGrotesk-Medium.woff2") format("woff2"); - font-weight: 500; - font-style: normal; - font-display: swap; -} -@font-face { - font-family: "HK Grotesk"; - src: url("../fonts/HKGrotesk-SemiBold.woff2") format("woff2"); - font-weight: 600; - font-style: normal; - font-display: swap; -} -@font-face { - font-family: "HK Grotesk"; - src: url("../fonts/HKGrotesk-Bold.woff2") format("woff2"); - font-weight: 700; - font-style: normal; - font-display: swap; -} -@font-face { - font-family: "HK Grotesk"; - src: url("../fonts/HKGrotesk-ExtraBold.woff2") format("woff2"); - font-weight: 800; - font-style: normal; - font-display: swap; -} -@font-face { - font-family: "HK Grotesk"; - src: url("../fonts/HKGrotesk-Black.woff2") format("woff2"); - font-weight: 900; - font-style: normal; - font-display: swap; -} +/* Design system ships with no bundled fonts — consumers bring their own. */ diff --git a/packages/ghost-ui/src/styles/main.css b/packages/ghost-ui/src/styles/main.css index 596fc8b..af1869b 100644 --- a/packages/ghost-ui/src/styles/main.css +++ b/packages/ghost-ui/src/styles/main.css @@ -363,10 +363,12 @@ --color-surface-dark-border: var(--surface-dark-border); /* fonts */ - --font-sans: "HK Grotesk", sans-serif; + --font-sans: + system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: "Geist Mono", monospace; --font-serif: serif; - --font-display: "HK Grotesk", sans-serif; + --font-display: + system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* shape — pill-first radius system */ --radius-pill: 999px;