mosaic-headless 1.2.0 → 1.3.0

package/package.json

@@ -1,59 +1,59 @@
-{
-  "name": "mosaic-headless",
-  "version": "1.2.0",
-  "description": "AI-agent skill: build Mosaic Pro (Nextend) WordPress sites by writing the underlying data model directly - 23 custom tables, no visual editor, no DOM. Every node type, style property and node property swept against a live install and asserted on the delivered HTML and compiled CSS. Installs into Claude Code, Cursor, Codex CLI, Gemini CLI, Copilot, Continue, Windsurf and Claude.ai.",
-  "keywords": [
-    "wordpress",
-    "mosaic",
-    "mosaic-pro",
-    "nextend",
-    "page-builder",
-    "claude-code",
-    "agent-skill",
-    "ai-agent",
-    "headless",
-    "woocommerce",
-    "wp-cli"
-  ],
-  "homepage": "https://github.com/Moksa1123/mosaic-headless#readme",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/Moksa1123/mosaic-headless.git"
-  },
-  "bugs": {
-    "url": "https://github.com/Moksa1123/mosaic-headless/issues"
-  },
-  "license": "MIT",
-  "author": "moksa (https://moksaweb.com)",
-  "type": "module",
-  "bin": {
-    "mosaic-headless": "bin/install.mjs"
-  },
-  "files": [
-    "bin/",
-    "assets/",
-    "data/*.csv",
-    "references/",
-    "sites/_moksa.py",
-    "sites/moksa.json",
-    "tools/*.py",
-    "tools/*.php",
-    "SKILL.md",
-    "README.md",
-    "README.zh-TW.md",
-    "README.zh-CN.md",
-    "README.ja.md",
-    "LICENSE"
-  ],
-  "engines": {
-    "node": ">=18"
-  },
-  "scripts": {
-    "install-skill": "node bin/install.mjs",
-    "check": "node bin/check-release.mjs",
-    "preversion": "npm run check",
-    "version": "node bin/sync-version.mjs && git add SKILL.md assets/templates/platforms",
-    "postversion": "git push && git push --tags",
-    "prepublishOnly": "npm run check"
-  }
-}
+{
+  "name": "mosaic-headless",
+  "version": "1.3.0",
+  "description": "AI-agent skill: build Mosaic Pro (Nextend) WordPress sites by writing the underlying data model directly - 23 custom tables, no visual editor, no DOM. Every node type, style property and node property swept against a live install and asserted on the delivered HTML and compiled CSS. Installs into Claude Code, Cursor, Codex CLI, Gemini CLI, Copilot, Continue, Windsurf and Claude.ai.",
+  "keywords": [
+    "wordpress",
+    "mosaic",
+    "mosaic-pro",
+    "nextend",
+    "page-builder",
+    "claude-code",
+    "agent-skill",
+    "ai-agent",
+    "headless",
+    "woocommerce",
+    "wp-cli"
+  ],
+  "homepage": "https://github.com/Moksa1123/mosaic-headless#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Moksa1123/mosaic-headless.git"
+  },
+  "bugs": {
+    "url": "https://github.com/Moksa1123/mosaic-headless/issues"
+  },
+  "license": "MIT",
+  "author": "moksa (https://moksaweb.com)",
+  "type": "module",
+  "bin": {
+    "mosaic-headless": "bin/install.mjs"
+  },
+  "files": [
+    "bin/",
+    "assets/",
+    "data/*.csv",
+    "references/",
+    "sites/_moksa.py",
+    "sites/moksa.json",
+    "tools/*.py",
+    "tools/*.php",
+    "SKILL.md",
+    "README.md",
+    "README.zh-TW.md",
+    "README.ja.md",
+    "README.ko.md",
+    "LICENSE"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "scripts": {
+    "install-skill": "node bin/install.mjs",
+    "check": "node bin/check-release.mjs",
+    "preversion": "npm run check",
+    "version": "node bin/sync-version.mjs && git add SKILL.md assets/templates/platforms",
+    "postversion": "git push && git push --tags",
+    "prepublishOnly": "npm run check"
+  }
+}

package/references/failure-modes.md

@@ -171,6 +171,80 @@ required children on commit.
 A record committed with `"modified_gmt": "2026-09-05 17:00:00"` came back stored as
 `16:59:16`. The server overwrites it. Do not use a value you sent as a local cache key.
 
+## A page cache turns "it worked" into "the node does not exist"
+
+Not a Mosaic failure - a failure of *checking* Mosaic, and it produces the exact
+result this skill exists to prevent: a confident negative about something that is
+actually there.
+
+Commit succeeds. `build_site.py` reports the byte size the renderer produced. Then
+the verifier fetches the URL, a full-page cache in front of WordPress (Varnish on
+Cloudways, or any CDN) answers with the pre-commit HTML, and every declaration on a
+node you have just added comes back `no-element`. Measured on this install: the
+builder saw 138878 bytes, `curl` on the same URL a second later got 136021, and
+seven declarations on two brand-new grid wrappers were reported missing while the
+wrappers were sitting correctly in the database and in the committed JSON.
+
+The tell is the byte count: if the size the builder reports and the size you fetch
+disagree, you are not looking at what you wrote.
+
+`tools/verify_rwd.py` now appends a unique `_v=<ms>` query string and sends
+`Cache-Control: no-cache` on every fetch, so the assertion is always made against the
+document that was actually committed. Do the same in anything else that checks a page
+- including a browser: hard-reload is not always enough, a query string always is.
+
+## Changing a design token's VALUE leaves the old one in `:root`
+
+A collection variable is a row, and a row is identified by its ID. If the writer
+mints a fresh ID each run - which `build_page.py` did, because its `_varIDs` cache
+starts empty every time - then changing a token's value does not change the token.
+It adds a second one.
+
+The rows hang off the theme's collection, and `build_site.py` makes a fresh master
+per build while the collection persists, so nothing ever cleans them up. Both
+declarations reach `:root` and the later one wins:
+
+```css
+:root{ ... --mk-faint: rgb(107, 109, 113); ... --mk-faint: rgb(160, 162, 168); ... }
+```
+
+Measured: after changing `--mk-faint`, a rebuild reported OK, the new variable
+existed with the correct value, `verify_rwd.py` passed, and the page kept rendering
+the old grey. Ten stale rows had accumulated across earlier builds. **Every
+server-side check agreed with the intent and the page still disagreed** - only
+`verify_browser.py`, reading the computed colour off the element, could see it.
+
+The fix is that a token's row ID must be a function of its name -
+`uuid5(VAR_NAMESPACE, "--mk-faint")` - so a rebuild rebinds the row instead of
+adding one, plus a reap of anything on the collection claiming a managed custom
+property under an ID we did not derive. Both are in `theme_records()`.
+
+The general shape is worth remembering beyond tokens: **anything keyed by a random
+ID that you write repeatedly will accumulate**, and duplicates in a cascade fail
+silently in favour of whichever happens to be last.
+
+## A declaration can be present, correct, and still wrong
+
+The fourth failure mode in SKILL.md - "wrong value SHAPE, HTTP 200, and the CSS rule
+is simply absent" - has a quieter sibling: the rule is *present*, the value is what
+you asked for, and what the browser does with it is not what you meant.
+
+Three ways, all measured on the example page:
+
+- **The unit resolves against something you did not think about.**
+  `letter-spacing: -0.035em` is a normal amount of tightening for a Latin display
+  face. On a 62px headline it is -2.17px, and the headline was Chinese.
+- **The face cannot render the text.** `font-family: 'Space Grotesk', 'Noto Sans TC'`
+  is honoured exactly: Space Grotesk has no CJK coverage, so Han characters come from
+  Noto Sans TC - while still carrying the tracking that was chosen for the Latin
+  face. Nothing reports a fallback.
+- **The property was never in play.** `display: inline-block` on a flex item is
+  blockified by the spec. The declaration was in the stylesheet, correct, and
+  computed to `block`.
+
+None of these is visible to anything that reads the stylesheet, because the
+stylesheet is right. `verify_browser.py` asks the element instead.
+
 ## Reproducing all of this
 
 ```bash

package/sites/_moksa.py

@@ -41,9 +41,10 @@ TOKENS = {
     "--mk-paper":   {"type": "color", "value": "rgb(250,250,247)"},
     "--mk-panel":   {"type": "color", "value": "rgb(243,243,239)"},
     "--mk-accent":  {"type": "color", "value": "rgb(255,90,54)"},
-    "--mk-muted":   {"type": "color", "value": "rgb(111,113,120)"},
+    "--mk-accent-ink": {"type": "color", "value": "rgb(191,68,40)"},
+    "--mk-muted":   {"type": "color", "value": "rgb(90,92,97)"},
     "--mk-rule":    {"type": "color", "value": "rgb(214,214,206)"},
-    "--mk-faint":   {"type": "color", "value": "rgb(160,162,168)"},
+    "--mk-faint":   {"type": "color", "value": "rgb(107,109,113)"},
 }
 
 RULE = "rgba(22,24,28,.16)"
@@ -131,7 +132,7 @@ def mono(text, size="11px", color="--mk-muted", track="0.14em", **st):
              fontSize=size, letterSpacing=track, **st)
 
 
-def figure(attr, num, size="40px", t="34px", m="27px"):
+def figure(attr, num, size="56px", t="44px", m="34px"):
     """A number set as one masked box per digit.
 
     A count-up needs JavaScript; a digit rolling out from behind its own edge does
@@ -145,12 +146,17 @@ def figure(attr, num, size="40px", t="34px", m="27px"):
                                       "font-variant-numeric:tabular-nums;"}}},
             "children": [
                 {"type": "div", "data": {"attrID": attr + "-d%d" % j},
+                 # No `display:inline-block` here: these are flex items, and the
+                 # spec blockifies a flex item's display value. The declaration was
+                 # in the stylesheet, correct, and computed to `block` anyway -
+                 # which is exactly the class of dead code verify_browser.py exists
+                 # to find, and it found this one.
                  "style": {"&": {"_": {"customStyles":
-                                           "overflow:hidden;display:inline-block;"
+                                           "overflow:hidden;"
                                            "--d:%dms;" % (j * 70)}}},
                  "children": [T("h3", ch, color={"token": "--mk-ink"}, fontSize=size,
-                                fontWeight="500", letterSpacing="-0.04em",
-                                lineHeight="1.05", fontFamily=MONO,
+                                fontWeight="600", letterSpacing="-0.03em",
+                                lineHeight="1.02", fontFamily=DISPLAY,
                                 _t={"fontSize": t}, _m={"fontSize": m})]}
                 for j, ch in enumerate(num)
             ]}
@@ -168,11 +174,12 @@ def clause(num, en, zh, attr):
                       "customStyles": "border-top:1px solid " + RULE + ";"},
                _m={"gridCols": "48px 1fr"},
                children=[
-                   mono("§" + num, size="12px", color="--mk-accent", track="0.06em"),
+                   mono("§" + num, size="12px", color="--mk-accent-ink",
+                        track="0.06em"),
                    box(attr + "-t", {}, [
                        mono(en, size="11px", color="--mk-muted"),
                        T("h2", zh, color={"token": "--mk-ink"}, fontSize="34px",
-                         fontWeight="600", letterSpacing="-0.025em", lineHeight="1.3",
+                         fontWeight="600", letterSpacing="0.01em", lineHeight="1.35",
                          fontFamily=DISPLAY, marginTop="10px",
                          _t={"fontSize": "29px"}, _m={"fontSize": "23px"}),
                    ]),
@@ -234,6 +241,16 @@ SPEC = [
     ("SUPPORT", "876", "技術支援與服務"),
 ]
 
+# The masthead's right-hand column. A profile document states its terms in its own
+# header, and it is the content that fills the frame the headline leaves empty.
+SIDE = [
+    ("DISCIPLINE", "Web / AI / Automation"),
+    ("STACK", "WordPress · n8n · Claude"),
+    ("ENGAGEMENT", "專案制 / 長期維運"),
+    ("LEAD TIME", "3–8 週"),
+    ("RESPONSE", "1 個工作天"),
+]
+
 SERVICES = [
     ("01", "WEB & E-COMMERCE", "網站與電商",
      "品牌官網、電商平台與 WordPress 開發，乾淨的結構與好管理的後台。"),
@@ -624,8 +641,12 @@ HEADER = box("mk-shell-top", {}, [
                                              "url": "#contact"},
                   "style": {"&": {"_m": {"display": "none"},
                                   "_t": {"fontSize": "12px"},
+                                  # 13px of the bright orange on the glass header is
+                                  # 3.10:1; the darkened cut is 4.9:1. The BORDER
+                                  # stays bright, because a rule is not text and
+                                  # nobody has to read it.
                                   "_": {"backgroundColor": "rgba(0,0,0,0)",
-                                        "color": {"token": "--mk-accent"},
+                                        "color": {"token": "--mk-accent-ink"},
                                         "fontSize": "13px", "fontFamily": MONO,
                                         "letterSpacing": "0.06em",
                                         "paddingTop": "6px", "paddingBottom": "6px",
@@ -635,7 +656,7 @@ HEADER = box("mk-shell-top", {}, [
                                                    "color": "rgb(255,90,54)"},
                                         "transitionAll": "180ms ease"}},
                             "hover": {"_": {"backgroundColor": {"token": "--mk-accent"},
-                                            "color": {"token": "--mk-paper"}}}},
+                                            "color": {"token": "--mk-ink"}}}},
                   "text": "START A PROJECT"},
              ]}
         ])]),
@@ -659,7 +680,7 @@ FOOTER = box("mk-footer",
                     mono("MAKE WEB MEANINGFUL", size="11px", color="--mk-accent",
                          track="0.2em"),
                     T("h2", "打造有價值的網站體驗。", color={"token": "--mk-paper"},
-                      fontSize="30px", fontWeight="500", letterSpacing="-0.01em",
+                      fontSize="30px", fontWeight="500", letterSpacing="0.02em",
                       lineHeight="1.5", fontFamily=CJK, marginTop="16px",
                       _m={"fontSize": "22px"}),
                     box("mk-f-contact",
@@ -674,7 +695,7 @@ FOOTER = box("mk-footer",
                 ]),
                 grid("mk-f-links", 2, "28px", tcols=2, mcols=2, children=[
                     box("mk-f-col-0", {}, [
-                        mono("PAGES", size="10px", color="rgb(122,124,132)",
+                        mono("PAGES", size="10px", color="rgb(128,130,138)",
                              track="0.2em"),
                         box("mk-f-col-0-list",
                             {"marginTop": "16px", "display": "grid", "rowGap": "9px"},
@@ -683,7 +704,7 @@ FOOTER = box("mk-footer",
                              for t in ["作品集", "團隊成員", "關於我們", "服務報價"]]),
                     ]),
                     box("mk-f-col-1", {}, [
-                        mono("LEARN", size="10px", color="rgb(122,124,132)",
+                        mono("LEARN", size="10px", color="rgb(128,130,138)",
                              track="0.2em"),
                         box("mk-f-col-1-list",
                             {"marginTop": "16px", "display": "grid", "rowGap": "9px"},
@@ -703,17 +724,17 @@ FOOTER = box("mk-footer",
                            "customStyles": "flex-wrap:wrap;"}, None, None),
               "children": [
                   mono("© 2026 MOKSA WEB — ALL RIGHTS RESERVED", size="10px",
-                       color="rgb(112,114,122)", track="0.1em"),
+                       color="rgb(128,130,138)", track="0.1em"),
                   mono("BUILT HEADLESS ON MOSAIC", size="10px",
-                       color="rgb(112,114,122)", track="0.1em"),
+                       color="rgb(128,130,138)", track="0.1em"),
               ]}]),
     ])])
 
 
 # ── the page ──────────────────────────────────────────────────────────────────
 HERO_LINE = dict(color={"token": "--mk-ink"}, fontSize="62px", fontWeight="600",
-                 lineHeight="1.12", letterSpacing="-0.035em", fontFamily=DISPLAY,
-                 _t={"fontSize": "46px"}, _m={"fontSize": "31px"})
+                 lineHeight="1.14", letterSpacing="0.005em", fontFamily=DISPLAY,
+                 _t={"fontSize": "48px"}, _m={"fontSize": "32px"})
 
 MASTHEAD = section("mk-mast", [wrap("mk-mast-in", [
     # the document's own header block: what this is, where it is from, which revision
@@ -733,11 +754,19 @@ MASTHEAD = section("mk-mast", [wrap("mk-mast-in", [
                 {"display": "flex", "alignItems": "center", "marginTop": "10px"},
                 [box("mk-caret", {}, [])]),
         ]),
+    box("mk-mast-body",
+        {"display": "grid", "gridCols": "1.35fr .65fr", "columnGap": "56px",
+         "rowGap": "32px", "alignItems": "start", "marginTop": "26px"},
+        _t={"gridCols": "1.2fr .8fr", "columnGap": "36px"},
+        _m={"gridCols": "repeat(1, 1fr)", "columnGap": "0px", "rowGap": "26px",
+            "marginTop": "20px"},
+        children=[
+          box("mk-mast-left", {}, [
     {"type": "text", "data": {"tagName": "p", "attrID": "mk-mast-lede"},
      "style": bp({"color": {"token": "--mk-muted"}, "fontSize": "16px",
-                  "lineHeight": "2", "marginTop": "24px", "maxWidth": "34em"},
+                  "lineHeight": "2", "marginTop": "0px", "maxWidth": "30em"},
                  None,
-                 {"fontSize": "14px", "lineHeight": "1.95", "marginTop": "20px"}),
+                 {"fontSize": "14px", "lineHeight": "1.95", "marginTop": "0px"}),
      "text": "我打造網站、開發軟體、導入 AI、串起自動化流程，"
              "讓技術不只是工具，而是幫你省下時間、長出業績的數位夥伴。"},
     {"type": "div", "data": {"attrID": "mk-mast-cta"},
@@ -747,19 +776,46 @@ MASTHEAD = section("mk-mast", [wrap("mk-mast-in", [
      "children": [
          # underlined links, not buttons: a document points, it does not sell
          {"type": "button", "data": {"attrID": "mk-cta-%d" % n, "url": href},
-          "style": {"&": {"_": {"backgroundColor": "rgba(0,0,0,0)",
-                                "color": {"token": "--mk-ink"}, "fontSize": "14px",
-                                "fontFamily": MONO, "letterSpacing": "0.06em",
-                                "paddingTop": "8px", "paddingBottom": "8px",
-                                "radius": "0px", "cursor": "pointer",
-                                "customStyles":
-                                    "border-bottom:1px solid rgb(22,24,28);",
-                                "transitionAll": "180ms ease"}},
-                    "hover": {"_": {"color": {"token": "--mk-accent"}}}},
+          "style": {"&": {"_": dict(
+              {"backgroundColor": {"token": "--mk-accent"},
+               "color": {"token": "--mk-ink"},
+               "paddingLeft": "22px", "paddingRight": "22px",
+               "paddingTop": "13px", "paddingBottom": "13px",
+               "customStyles": "border:1px solid rgb(255,90,54);"}
+              if n == 1 else
+              {"backgroundColor": "rgba(0,0,0,0)", "color": {"token": "--mk-ink"},
+               "paddingLeft": "0px", "paddingRight": "0px",
+               "paddingTop": "13px", "paddingBottom": "13px",
+               "customStyles": "border:1px solid rgba(0,0,0,0);"
+                               "border-bottom-color:rgb(22,24,28);"},
+              fontSize="13px", fontFamily=MONO, letterSpacing="0.1em",
+              radius="0px", cursor="pointer", transitionAll="180ms ease")},
+                    "hover": {"_": ({"backgroundColor": {"token": "--mk-ink"},
+                                     "customStyles": "border:1px solid rgb(22,24,28);"}
+                                    if n == 1
+                                    else {"color": {"token": "--mk-accent"}})}},
           "text": text}
-         for n, (text, href) in enumerate([("→ 服務項目", "#services"),
-                                           ("→ 精選作品", "#works")], start=1)
+         for n, (text, href) in enumerate([("服務項目 →", "#services"),
+                                           ("精選作品 →", "#works")], start=1)
      ]},
+          ]),
+          # the right-hand column: what a spec sheet puts in its header block
+          box("mk-mast-side",
+              {"display": "grid", "rowGap": "0px",
+               "customStyles": "border-top:1px solid " + RULE_INK + ";"},
+              _m={"customStyles": "border-top:1px solid " + RULE + ";"},
+              children=[
+                  box("mk-mast-side-%d" % i,
+                      {"display": "grid", "gridCols": "1fr auto",
+                       "columnGap": "14px", "alignItems": "baseline",
+                       "paddingTop": "11px", "paddingBottom": "11px",
+                       "customStyles": ("" if i == 0
+                                        else "border-top:1px solid " + RULE + ";")},
+                      [mono(k, size="10px", color="--mk-faint", track="0.18em"),
+                       mono(v, size="12px", color="--mk-ink", track="0.02em")])
+                  for i, (k, v) in enumerate(SIDE)
+              ]),
+        ]),
     box("mk-spec-rule", {"marginTop": "56px"}, [], _m={"marginTop": "40px"}),
     # the figures as a datasheet, not as four big numbers looking for attention
     grid("mk-spec", 4, "0px", tcols=2, mcols=2,
@@ -786,8 +842,9 @@ MASTHEAD = section("mk-mast", [wrap("mk-mast-in", [
                          {"display": "flex", "alignItems": "baseline",
                           "columnGap": "3px", "marginTop": "12px"},
                          [figure("mk-fig-%d" % i, num),
-                          T("p", "+", color={"token": "--mk-accent"},
-                            fontSize="17px", fontFamily=MONO, fontWeight="500")]),
+                          T("p", "+", color={"token": "--mk-accent-ink"},
+                            fontSize="22px", fontFamily=DISPLAY, fontWeight="600",
+                            _m={"fontSize": "16px"})]),
                      T("p", zh, color={"token": "--mk-muted"}, fontSize="12px",
                        marginTop="10px", lineHeight="1.7", _m={"fontSize": "11px"}),
                  ])
@@ -822,7 +879,8 @@ SERVICE_SEC = section("services", [wrap("mk-svc-in", [
                 children=[
                     mono(num, size="12px", color="--mk-faint", track="0.06em"),
                     box("mk-svc-t-%d" % i, {}, [
-                        mono(en, size="10px", color="--mk-accent", track="0.16em"),
+                        mono(en, size="10px", color="--mk-accent-ink",
+                             track="0.16em"),
                         T("h3", zh, color={"token": "--mk-ink"}, fontSize="19px",
                           fontWeight="500", marginTop="9px", fontFamily=CJK,
                           letterSpacing="0.01em"),
@@ -857,7 +915,8 @@ PROCESS_SEC = section("process", [wrap("mk-proc-in", [
                             T("h3", zh, color={"token": "--mk-ink"}, fontSize="19px",
                               fontWeight="500", fontFamily=CJK, marginTop="10px",
                               letterSpacing="0.01em"),
-                            mono(en, size="10px", color="--mk-accent", track="0.16em",
+                            mono(en, size="10px", color="--mk-accent-ink",
+                                 track="0.16em",
                                  marginTop="7px"),
                             T("p", body, color={"token": "--mk-muted"},
                               fontSize="13px", lineHeight="2", marginTop="12px"),
@@ -946,7 +1005,8 @@ WORK_SEC = section("works", [wrap("mk-works-in", [
                           fontWeight="500", fontFamily=CJK, letterSpacing="0.01em",
                           _m={"fontSize": "16px"}),
                         mono(cat, size="11px", color="--mk-muted", track="0.1em"),
-                        mono(domain, size="12px", color="--mk-accent", track="0.02em"),
+                        mono(domain, size="12px", color="--mk-accent-ink",
+                             track="0.02em"),
                     ])
                 for i, (name, cat, domain) in enumerate(WORKS)
             ]),
@@ -970,8 +1030,8 @@ PRODUCT_SEC = section("products", [wrap("mk-prod-in", [
                         mono("OUR PRODUCTS", size="11px", color="rgb(140,142,150)"),
                         T("h2", "不只接案，也開發自己的產品",
                           color={"token": "--mk-paper"}, fontSize="34px",
-                          fontWeight="600", letterSpacing="-0.025em",
-                          lineHeight="1.3", fontFamily=DISPLAY, marginTop="10px",
+                          fontWeight="600", letterSpacing="0.01em",
+                          lineHeight="1.35", fontFamily=DISPLAY, marginTop="10px",
                           _t={"fontSize": "29px"}, _m={"fontSize": "23px"}),
                     ]),
                 ]),
@@ -988,14 +1048,14 @@ PRODUCT_SEC = section("products", [wrap("mk-prod-in", [
                             "paddingTop": "20px", "paddingBottom": "20px"},
                         children=[
                             mono("%02d" % (i + 1), size="12px",
-                                 color="rgb(122,124,132)", track="0.06em"),
+                                 color="rgb(128,130,138)", track="0.06em"),
                             box("mk-prod-t-%d" % i, {}, [
                                 mono(en, size="10px", color="--mk-accent",
                                      track="0.16em"),
                                 T("h3", name, color={"token": "--mk-paper"},
                                   fontSize="24px", fontWeight="600",
                                   fontFamily=DISPLAY, marginTop="9px",
-                                  letterSpacing="-0.02em", _m={"fontSize": "21px"}),
+                                  letterSpacing="0.01em", _m={"fontSize": "21px"}),
                                 # a property of the product, not a column of the
                                 # table: as a fourth grid child it landed alone in
                                 # the 72px number gutter on row two at tablet
@@ -1035,7 +1095,7 @@ VOICE_SEC = section("mk-voices", [wrap("mk-voice-in", [
                     "customStyles": "border-top:1px solid " + RULE + ";"
                                     "border-left:0;"},
                 children=[
-                    mono("“", size="24px", color="--mk-accent", track="0"),
+                    mono("“", size="24px", color="--mk-accent-ink", track="0"),
                     T("p", quote, color={"token": "--mk-ink"}, fontSize="14px",
                       lineHeight="2.05", marginTop="4px"),
                     box("mk-voice-a-%d" % i, {"marginTop": "22px"}, [
@@ -1058,13 +1118,14 @@ CONTACT = section("contact", [wrap("mk-contact-in", [
                  "customStyles": "border-top:1px solid " + RULE + ";"},
                 _m={"gridCols": "48px 1fr"},
                 children=[
-                    mono("§07", size="12px", color="--mk-accent", track="0.06em"),
+                    mono("§07", size="12px", color="--mk-accent-ink",
+                         track="0.06em"),
                     box("mk-contact-head-t", {}, [
                         mono("START A PROJECT", size="11px", color="--mk-muted"),
                         ml("h2", "準備好升級\n你的數位競爭力了嗎？",
                            color={"token": "--mk-ink"}, fontSize="44px",
-                           fontWeight="600", letterSpacing="-0.03em",
-                           lineHeight="1.24", fontFamily=DISPLAY, marginTop="12px",
+                           fontWeight="600", letterSpacing="0.01em",
+                           lineHeight="1.3", fontFamily=DISPLAY, marginTop="12px",
                            _t={"fontSize": "36px"}, _m={"fontSize": "26px"}),
                         T("p", "先看方案抓預算，或直接告訴我們你想解決的問題，"
                                "一個工作天內回覆。",
@@ -1089,7 +1150,8 @@ CONTACT = section("contact", [wrap("mk-contact-in", [
                                           _m={"fontSize": "13px"}),
                                  ])
                              for i, (k, v, vc) in enumerate([
-                                 ("EMAIL", "services@moksaweb.com", "--mk-accent"),
+                                 ("EMAIL", "services@moksaweb.com",
+                                  "--mk-accent-ink"),
                                  ("PHONE", "+886-958-839-939", "--mk-ink"),
                                  ("LOCATION", "TAICHUNG, TAIWAN", "--mk-ink"),
                                  ("RESPONSE", "WITHIN 1 BUSINESS DAY", "--mk-ink"),