sync work in progress

public/dssl/index.js

@@ -18,7 +18,7 @@ import { parse } from './parser.js';
 import { resolve, DEFAULT_TOKENS } from './resolver.js';
 import { DsslEngine } from './engine.js';
 
-export const VERSION = '0.3.2';
+export const VERSION = '0.3.3';
 
 let counter = 0;
 const engines = new Map();

public/styles/docs.dssl

@@ -8,15 +8,17 @@
 
 .page-title {
   fluid: 30, 44
-  font-weight: 800
-  letter-spacing: -0.03em
+  font-family: font.serif
+  font-weight: 650
+  letter-spacing: -0.01em
   margin: space.2 0 space.2
 }
 
 .page-sub {
+  font-family: font.serif
   color: color.muted
   font-size: 16.5
-  line-height: 1.65
+  line-height: 1.7
   max-width: 640
 }
 
@@ -88,9 +90,10 @@
 }
 
 .doc-lead {
+  font-family: font.serif
   color: color.muted
   font-size: 15.5
-  line-height: 1.7
+  line-height: 1.75
   margin: 0
 }
 
@@ -190,7 +193,7 @@
 
 .doc-btn:hover {
   border-color: color.accent/50
-  translate: 0 -1px
+  background: color.card
   shadow: sm
 }
 
@@ -207,8 +210,8 @@
 }
 
 .doc-card:hover {
-  translate: 0 -4px
-  shadow: lg
+  shadow: md
+  border-color: color.ink/38
 }
 
 .doc-card-title {
@@ -249,7 +252,6 @@
     background: color.accent
     border-color: color.accent
     color: color.accent-ink
-    translate: 0 -3px
     shadow: md
   }
 }
@@ -272,8 +274,7 @@
 }
 
 .tok-dot:hover {
-  translate: 0 -3px
-  shadow: md
+  shadow: sm
   border-color: color.accent/40
   color: color.accent
 }

public/styles/home.dssl

@@ -16,7 +16,7 @@
   right: -160
   size: 560
   circle: 560
-  background: radial-gradient(circle, color.accent/16, transparent 65%)
+  background: radial-gradient(circle, color.accent/12, transparent 65%)
   pointer-events: none
 }
 
@@ -26,7 +26,7 @@
   left: -200
   size: 520
   circle: 520
-  background: radial-gradient(circle, color.accent/9, transparent 60%)
+  background: radial-gradient(circle, color.accent/6, transparent 60%)
   pointer-events: none
 }
 
@@ -49,20 +49,22 @@
 
 .hero-title {
   fluid: 40, 62
-  font-weight: 800
-  line-height: 1.04
-  letter-spacing: -0.035em
+  font-family: font.serif
+  font-weight: 650
+  line-height: 1.08
+  letter-spacing: -0.015em
   margin: space.3 0 space.4
 }
 
 .hero-title em {
-  font-style: normal
+  font-style: italic
   color: color.accent
 }
 
 .hero-sub {
+  font-family: font.serif
   font-size: 17.5
-  line-height: 1.7
+  line-height: 1.75
   color: color.muted
   margin: 0 0 space.5
 }
@@ -84,7 +86,7 @@
   inline-size: 4
   aspect-ratio: 1
   background: color.ok
-  radius: full
+  radius: 0
   display: inline-block
   margin-right: 7
   vertical-align: 1
@@ -104,7 +106,7 @@
 
 .demo-tab {
   padding: 7 14
-  radius: full
+  radius: sm
   font-size: 13
   font-weight: 600
   color: color.muted
@@ -116,7 +118,7 @@
 
 .demo-tab:hover {
   color: color.ink
-  translate: 0 -1px
+  border-color: color.ink/40
 }
 
 .demo-tab[aria-pressed="true"] {
@@ -176,9 +178,8 @@ motion rise-in {
 }
 
 .demo-card:hover {
-  translate: 0 -5px
-  shadow: lg
-  border-color: color.accent/40
+  shadow: md
+  border-color: color.ink/38
 }
 
 .demo-swatch {
@@ -211,7 +212,7 @@ motion rise-in {
   color: color.accent
   background: color.accent/12
   padding: 3 9
-  radius: full
+  radius: sm
 }
 
 // states demo: a real focusable button styled by focus-visible
@@ -227,7 +228,7 @@ motion rise-in {
   border: none
 }
 
-.demo-btn:hover { translate: 0 -2px; shadow: md }
+.demo-btn:hover { shadow: md; filter: brightness(1.15) }
 
 // motion demo
 .demo-motion {

public/styles/site.dssl

@@ -58,9 +58,9 @@ select { use focus-ring }
   position: sticky
   top: 0
   z: 50
-  background: color.paper/82
-  backdrop-filter: blur(14) saturate(1.5)
-  border-bottom: 1 solid color.line
+  background: color.paper/92
+  backdrop-filter: blur(10)
+  border-bottom: 1 solid color.ink/30
   transition: 200
 }
 
@@ -72,17 +72,19 @@ select { use focus-ring }
 
 .nav-logo {
   row: gap 2 center
-  font-weight: 800
-  font-size: 21
-  letter-spacing: -0.02em
+  font-family: font.serif
+  font-weight: 700
+  font-size: 22
+  letter-spacing: 0
   color: color.ink
   transition: 120
 }
 
 .logo-mark {
-  font-family: font.mono
+  font-family: font.serif
   color: color.accent
-  font-weight: 700
+  font-weight: 400
+  font-size: 24
   margin-right: 6
 }
 
@@ -145,7 +147,7 @@ html:not([data-theme-mode="dark"]):not([data-theme-mode="light"]) .theme-btn {
   font-size: 11.5
   color: color.muted
   border: 1 solid color.line
-  radius: full
+  radius: sm
   padding: 4 10
   background: color.card/60
 }
@@ -206,13 +208,13 @@ html:not([data-theme-mode="dark"]):not([data-theme-mode="light"]) .theme-btn {
 }
 
 .btn-primary:hover {
-  translate: 0 -2px
   shadow: md
+  filter: brightness(1.12)
 }
 
 .btn-primary:active {
-  translate: 0 0
   shadow: sm
+  filter: brightness(0.96)
   transition: 60
 }
 
@@ -224,8 +226,7 @@ html:not([data-theme-mode="dark"]):not([data-theme-mode="light"]) .theme-btn {
 
 .btn-ghost:hover {
   background: color.line/45
-  translate: 0 -2px
-  shadow: sm
+  border-color: color.ink/35
 }
 
 .btn-sm {
@@ -244,9 +245,8 @@ html:not([data-theme-mode="dark"]):not([data-theme-mode="light"]) .theme-btn {
 }
 
 .card-hover:hover {
-  translate: 0 -3px
-  shadow: lg
-  border-color: color.accent/35
+  shadow: md
+  border-color: color.ink/38
 }
 
 .kicker {
@@ -260,7 +260,7 @@ html:not([data-theme-mode="dark"]):not([data-theme-mode="light"]) .theme-btn {
 }
 
 .kicker::before {
-  content: "//"
+  content: "§"
   color: color.accent/55
 }
 
@@ -269,16 +269,18 @@ html:not([data-theme-mode="dark"]):not([data-theme-mode="light"]) .theme-btn {
 }
 
 .section-title {
-  font-size: 30
-  font-weight: 750
-  letter-spacing: -0.025em
+  font-family: font.serif
+  font-size: 31
+  font-weight: 650
+  letter-spacing: -0.01em
   margin: space.2 0 space.3
 }
 
 .section-sub {
+  font-family: font.serif
   color: color.muted
   font-size: 16.5
-  line-height: 1.65
+  line-height: 1.7
   max-width: 640
 }
 
@@ -358,8 +360,9 @@ html:not([data-theme-mode="dark"]):not([data-theme-mode="light"]) .theme-btn {
 }
 
 .prose p {
+  font-family: font.serif
   margin: 0 0 space.4
-  line-height: 1.8
+  line-height: 1.85
   color: color.ink/88
   font-size: 16
 }
@@ -367,16 +370,18 @@ html:not([data-theme-mode="dark"]):not([data-theme-mode="light"]) .theme-btn {
 .prose p:last-child { margin-bottom: 0 }
 
 .prose h2 {
-  font-size: 26
-  font-weight: 750
-  letter-spacing: -0.02em
+  font-family: font.serif
+  font-size: 27
+  font-weight: 650
+  letter-spacing: -0.01em
   margin: space.7 0 space.3
   scroll-margin-top: 88
 }
 
 .prose h3 {
-  font-size: 19
-  font-weight: 700
+  font-family: font.serif
+  font-size: 19.5
+  font-weight: 650
   margin: space.5 0 space.2
   scroll-margin-top: 88
 }
@@ -396,13 +401,13 @@ html:not([data-theme-mode="dark"]):not([data-theme-mode="light"]) .theme-btn {
 }
 
 .prose li::before {
-  content: ""
+  content: "—"
   position: absolute
   left: 0
-  top: 9
-  size: 6
-  circle: 6
-  background: color.accent
+  top: 0
+  background: none
+  color: color.accent/70
+  font-family: font.serif
 }
 
 .prose strong {
@@ -439,7 +444,7 @@ html:not([data-theme-mode="dark"]):not([data-theme-mode="light"]) .theme-btn {
 
 .footer {
   margin-top: auto
-  border-top: 1 solid color.line
+  border-top: 1 solid color.ink/30
   padding: space.6 0 space.5
   background: color.card/40
 }
@@ -461,9 +466,10 @@ html:not([data-theme-mode="dark"]):not([data-theme-mode="light"]) .theme-btn {
 
 .footer-fine {
   color: color.muted
-  font-size: 12
-  font-family: font.mono
-  letter-spacing: 0.02em
+  font-size: 12.5
+  font-family: font.serif
+  font-style: italic
+  letter-spacing: 0.01em
 }
 
 .footer-links {

public/styles/tokens.dssl

@@ -1,67 +1,80 @@
 // =========================================================================
 // tokens.dssl — DSSL's own design tokens
+// v0.3.3 "The Classic Edition": a print-era look — parchment paper, ink,
+// oxblood accent, serif display type, squared corners, hairline rules.
 // The dark palette lives in a behavior and is `use`d by both the system
 // preference and the manual theme signal — define once, apply twice.
 // =========================================================================
 
 tokens {
+  font {
+    serif: "Charter", "Iowan Old Style", "Palatino Linotype", "Palatino", "Georgia", "Times New Roman", serif
+    sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
+    mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace
+  }
   color {
-    paper: #faf8f4
-    card: #ffffff
-    ink: #1a1721
-    muted: #6d6680
-    line: #e9e3d9
-    accent: oklch(0.58 0.19 33)
-    accent-ink: #fff6ee
-    ok: #2e7d4f
-    err: #b3372e
-    code-bg: #211d2b
-    code-ink: #ece9f4
-    code-line: #37314a
-    code-key: #f2a86c
-    code-sel: #8fd0b2
-    code-prop: #9ec1f0
-    code-str: #d8b16e
-    code-num: #d8a0df
-    code-com: #857d9c
+    paper: #f5f0e4
+    card: #fdfaf2
+    ink: #26201a
+    muted: #6f6250
+    line: #ddd2bc
+    accent: #8e2c1f
+    accent-ink: #f9efdd
+    ok: #3d6b46
+    err: #a83226
+    code-bg: #ece4cf
+    code-ink: #2b2318
+    code-line: #d8cbac
+    code-key: #8e3b1f
+    code-sel: #38614f
+    code-prop: #35566e
+    code-str: #7a6428
+    code-num: #77488c
+    code-com: #8d8069
   }
   radius {
-    sm: 8
-    md: 14
-    lg: 20
-    xl: 28
+    sm: 2
+    md: 4
+    lg: 6
+    xl: 8
     full: 999
   }
   shadow {
-    sm: 0 1 2 color.ink/8, 0 1 3 color.ink/6
-    md: 0 2 4 color.ink/10, 0 4 14 color.ink/8
-    lg: 0 4 8 color.ink/12, 0 14 36 color.ink/12
+    sm: 0 1 2 color.ink/12
+    md: 0 2 6 color.ink/14
+    lg: 0 6 18 color.ink/16
   }
 }
 
 // ---- dark palette (shared) ---------------------------------------------
+// classic dark = a candlelit study: deep walnut, parchment text, brass accent
 
 behavior palette-dark {
   tokens {
+    font {
+      serif: "Charter", "Iowan Old Style", "Palatino Linotype", "Palatino", "Georgia", "Times New Roman", serif
+      sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
+      mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace
+    }
     color {
-      paper: #14111c
-      card: #1d1927
-      ink: #edeaf6
-      muted: #a29ab8
-      line: #2c2739
-      accent: oklch(0.72 0.15 45)
-      accent-ink: #241304
-      ok: #6fc793
-      err: #e5766a
-      code-bg: #100e18
-      code-ink: #e4e0f0
-      code-line: #292438
-      code-key: #f2a86c
-      code-sel: #8fd0b2
-      code-prop: #9ec1f0
-      code-str: #d8b16e
-      code-num: #d8a0df
-      code-com: #6f6885
+      paper: #181310
+      card: #221b15
+      ink: #ece2cd
+      muted: #a5937a
+      line: #372d21
+      accent: #c98d52
+      accent-ink: #241402
+      ok: #7fae8a
+      err: #d97e6c
+      code-bg: #120e0b
+      code-ink: #e5d9bd
+      code-line: #2e261c
+      code-key: #d99a62
+      code-sel: #8fb8a2
+      code-prop: #92b4cc
+      code-str: #c9b47c
+      code-num: #b995c9
+      code-com: #87795f
     }
   }
 }
@@ -80,25 +93,30 @@ behavior palette-dark {
 
 behavior palette-light {
   tokens {
+    font {
+      serif: "Charter", "Iowan Old Style", "Palatino Linotype", "Palatino", "Georgia", "Times New Roman", serif
+      sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
+      mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace
+    }
     color {
-      paper: #faf8f4
-      card: #ffffff
-      ink: #1a1721
-      muted: #6d6680
-      line: #e9e3d9
-      accent: oklch(0.58 0.19 33)
-      accent-ink: #fff6ee
-      ok: #2e7d4f
-      err: #b3372e
-      code-bg: #211d2b
-      code-ink: #ece9f4
-      code-line: #37314a
-      code-key: #f2a86c
-      code-sel: #8fd0b2
-      code-prop: #9ec1f0
-      code-str: #d8b16e
-      code-num: #d8a0df
-      code-com: #857d9c
+      paper: #f5f0e4
+      card: #fdfaf2
+      ink: #26201a
+      muted: #6f6250
+      line: #ddd2bc
+      accent: #8e2c1f
+      accent-ink: #f9efdd
+      ok: #3d6b46
+      err: #a83226
+      code-bg: #ece4cf
+      code-ink: #2b2318
+      code-line: #d8cbac
+      code-key: #8e3b1f
+      code-sel: #38614f
+      code-prop: #35566e
+      code-str: #7a6428
+      code-num: #77488c
+      code-com: #8d8069
     }
   }
 }

src/app/layout.tsx

@@ -19,8 +19,8 @@ export const viewport: Viewport = {
 // The ONLY non-DSSL styling in this app: a pre-paint shim so the very first
 // frame doesn't flash white before the DSSL engine boots (dark-mode respect).
 const prePaint = `
-  html { background: #faf8f4; }
-  @media (prefers-color-scheme: dark) { html { background: #14111c; } }
+  html { background: #f5f0e4; }
+  @media (prefers-color-scheme: dark) { html { background: #181310; } }
 `;
 
 // v0.3.2 — performance: the stylesheets ride INSIDE the HTML. The engine's

src/components/dssl/SiteRoot.tsx

@@ -98,11 +98,11 @@ export default function SiteRoot() {
   }, []);
 
   return (
-    <div className="site">
+    <div className="site" data-view={view}>
       <header className="nav">
         <div className="wrap nav-inner">
           <a href="#/" className="nav-logo" onClick={(e) => { e.preventDefault(); go("home"); }}>
-            <span className="logo-mark">{"//"}</span>
+            <span className="logo-mark">{"§"}</span>
             DSSL
           </a>
 
@@ -120,7 +120,7 @@ export default function SiteRoot() {
           </nav>
 
           <div className="nav-side">
-            <span className="ver-badge">v0.3.2</span>
+            <span className="ver-badge">v0.3.3</span>
             <button type="button" className="theme-btn" onClick={cycleTheme} aria-label="Toggle color theme" title="Theme: auto / light / dark">
               <span className="icon-sun"><SunIcon /></span>
               <span className="icon-moon"><MoonIcon /></span>
@@ -132,7 +132,10 @@ export default function SiteRoot() {
         </div>
       </header>
 
-      <main className="main" data-view={view}>
+      {/* data-view lives on the ROOT so the nav-active rules can reach the
+          header links — on <main> they never matched (main is a SIBLING of
+          the header, and descendant selectors only look down the tree) */}
+      <main className="main">
         {view === "home" && <HomeView go={go} />}
         {view === "docs" && <DocsView />}
         {view === "cheat" && <CheatSheetView />}
@@ -145,12 +148,13 @@ export default function SiteRoot() {
         <div className="wrap footer-inner">
           <div className="footer-col">
             <div className="footer-note">
-              <strong>DSSL</strong> — domain specific style language. Built v0.1 → v0.3.2 while
+              <strong>DSSL</strong> — domain specific style language. Built v0.1 → v0.3.3 while
               building this site; every feature it needed, it grew, and every bug you sent got
               fixed for real. This page runs on its own engine, no stylesheet attached.
             </div>
             <div className="footer-fine">
-              © 2026 <strong>Firstlight</strong> — the studio that grows DSSL.
+              © 2026 <strong>DSSL. inc</strong> — named after the product, because naming things
+              is hard.
             </div>
           </div>
           <nav className="footer-links" aria-label="Footer">

src/components/dssl/views/ChangelogView.tsx

@@ -197,6 +197,19 @@ const base = rule.sel
 <style type="text/dssl" data-dssl-name="tokens.dssl">…</style>
 <script type="module" src="/dssl/boot.js"></script>  <!-- in <head> -->`,
   },
+  {
+    version: "v0.3.3",
+    date: "user feedback → release",
+    title: "The Classic Edition — and a company name",
+    why: "user request: “name the company DSSL. inc, make the website look more classic”",
+    kind: "add",
+    body:
+      "The company is called DSSL. inc. The founder describes the choice as boring; we describe it as honest — the company is named after the thing it ships, and now the footer says so. The re-skin went classic: serif display type (a Charter/Iowan/Palatino stack — no webfonts, still zero dependencies), parchment paper with ink text and an oxblood accent, squared corners, hairline rules instead of glow shadows, book-page code blocks, a candlelit dark mode, and calmer hovers — cards darken their border instead of flying off the page. The § now stands where the comment slash used to. Best part: the entire re-skin is ONE file. radius tokens went 14→4, the palette swapped, serif entered the font tokens — and all six views followed, because that is the whole argument DSSL makes about tokens.",
+    code: `// tokens.dssl — the only file the re-skin touched
+radius { md: 14  →  md: 4 }
+color  { paper: #faf8f4 → #f5f0e4, accent: oklch(…) → #8e2c1f }
+font   { serif: "Charter", "Iowan Old Style", "Palatino", … }   // new`,
+  },
 ];
 
 export default function ChangelogView() {