From 1bacd33c6a2cd3c18215b32454600c803373906a Mon Sep 17 00:00:00 2001 From: Rohit Goswami Date: Wed, 7 Oct 2026 15:15:39 -0500 Subject: [PATCH 1/9] docs: record the product and the shipping design The product record and the design record come from the interface that already ships, so later design checks have a source. --- .impeccable/config.json | 9 +++++ DESIGN.md | 90 +++++++++++++++++++++++++++++++++++++++++ PRODUCT.md | 41 +++++++++++++++++++ 3 files changed, 140 insertions(+) create mode 100644 .impeccable/config.json create mode 100644 DESIGN.md create mode 100644 PRODUCT.md diff --git a/.impeccable/config.json b/.impeccable/config.json new file mode 100644 index 00000000..91a24265 --- /dev/null +++ b/.impeccable/config.json @@ -0,0 +1,9 @@ +{ + "hook": { + "enabled": true, + "limits": { + "maxFindings": 5, + "maxChars": 8000 + } + } +} diff --git a/DESIGN.md b/DESIGN.md new file mode 100644 index 00000000..6ef1fafe --- /dev/null +++ b/DESIGN.md @@ -0,0 +1,90 @@ +--- +name: Snapper +description: Public page for the semantic line-break formatter. +colors: + teal: "#004D40" + teal-light: "#00695C" + coral: "#FF655D" + yellow: "#F1DB4B" + background: "#FDFCF9" + text: "#1a2e1f" +typography: + body: + fontFamily: "Jost, system-ui, sans-serif" + fontWeight: 400 + mono: + fontFamily: "JetBrains Mono, monospace" + fontWeight: 400 +rounded: + none: "0px" +spacing: + section: "0px" +components: + button-primary: + backgroundColor: "{colors.teal}" + textColor: "{colors.background}" +--- + +# Design System: Snapper + +## Overview + +**Creative North Star: "The forest page"** + +(Inferred from `site/index.html`.) The static page sets its own custom properties: deep teal, coral, cream, and forest greens, with Jost for text and JetBrains Mono for code. + +**Key Characteristics:** + +- Teal `#004D40`. +- Background `#FDFCF9`. +- Jost and JetBrains Mono. + +## Colors + +### Primary + +- **Teal** (`#004D40`): `--teal`. + +### Secondary + +- **Coral** (`#FF655D`): `--coral`. +- **Yellow** (`#F1DB4B`): `--yellow`. + +### Neutral + +- **Paper** (`#FDFCF9`): `--bg`. +- **Ink** (`#1a2e1f`): `--text`. + +## Typography + +**Body Font:** Jost +**Label/Mono Font:** JetBrains Mono + +### Hierarchy + +- **Body**: `var(--sans)` on the page sections. +- **Label**: `var(--mono)` on code samples. + +## Layout + +The values above are the custom properties in the page stylesheet. Section rhythm is in that same style block. + +## Shapes + +The token block does not set a radius. + +## Components + +### Navigation + +- Text uses `var(--sans)` and the teal custom properties. + +## Do's and Don'ts + +### Do: + +- **Do** keep `#004D40` and Jost as written in `site/index.html`. + +### Don't: + +- **Don't** replace Jost with Atkinson Hyperlegible Next. This page does not load that face. diff --git a/PRODUCT.md b/PRODUCT.md new file mode 100644 index 00000000..b4477a2a --- /dev/null +++ b/PRODUCT.md @@ -0,0 +1,41 @@ +# Product + + + +## Platform + +web + +## Users + +(Inferred) People who format prose so that a sentence is one line and a diff stays readable. They may use the command, an editor, or the public page. + +## Product Purpose + +(Inferred from `README.md`) Snapper is a format-aware semantic line-break formatter. The static page in `site/` is the public face of that tool. + +## Positioning + +(Inferred) Snapper is the free formatter. It is not the citation product and not the account site. + +## Operating Context + +(Inferred) The page in `site/index.html` is the rendered interface in this checkout. The ops catalogue also names `Git/Github/Rust/snapper`, and that path is not on this machine. + +## Capabilities and Constraints + +(Inferred) Do not invent editor integrations beyond the ones the README already lists. + +## Brand Commitments + +The site sets `--teal: #004D40` and `--sans: 'Jost', system-ui, sans-serif` in `site/index.html`. + +## Evidence on Hand + +`README.md` and `site/index.html`. + +## Product Principles + +- (Inferred) The page explains the formatter that this repository ships. +- (Inferred) Keep the teal and Jost already in the site stylesheet. +- (Inferred) Do not move this record into a different repository. From bcc9722e098422fa791fd9f7ef0fcace3e6a5287 Mon Sep 17 00:00:00 2001 From: Rohit Goswami Date: Wed, 7 Oct 2026 15:26:33 -0500 Subject: [PATCH 2/9] docs: record the page radii and section padding The public page uses 28px, 8px, and 12px corners and 6rem section padding. --- DESIGN.md | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/DESIGN.md b/DESIGN.md index 6ef1fafe..6862506a 100644 --- a/DESIGN.md +++ b/DESIGN.md @@ -16,9 +16,12 @@ typography: fontFamily: "JetBrains Mono, monospace" fontWeight: 400 rounded: - none: "0px" + logo: "28px" + control: "8px" + panel: "12px" spacing: - section: "0px" + section-y: "6rem" + section-x: "0" components: button-primary: backgroundColor: "{colors.teal}" @@ -67,11 +70,11 @@ components: ## Layout -The values above are the custom properties in the page stylesheet. Section rhythm is in that same style block. +`section` padding is `6rem 0` in `site/index.html`. ## Shapes -The token block does not set a radius. +The logo uses a 28px radius. Controls use 8px. Panels and the demo close at 12px. ## Components From 202286b48343ca9518fc8b8f972e153e618b22f3 Mon Sep 17 00:00:00 2001 From: Rohit Goswami Date: Wed, 7 Oct 2026 15:26:33 -0500 Subject: [PATCH 3/9] chore: turn on the design detector hook The git root now carries the hook manifest the context loader looks for, so the detector is active for this checkout. --- .grok/hooks/impeccable.json | 29 +++++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) create mode 100644 .grok/hooks/impeccable.json diff --git a/.grok/hooks/impeccable.json b/.grok/hooks/impeccable.json new file mode 100644 index 00000000..31d2d420 --- /dev/null +++ b/.grok/hooks/impeccable.json @@ -0,0 +1,29 @@ +{ + "hooks": { + "PostToolUse": [ + { + "matcher": "Edit|Write|MultiEdit", + "hooks": [ + { + "type": "command", + "command": "[ ! -f \".grok/skills/impeccable/scripts/impeccable\" ] || \".grok/skills/impeccable/scripts/impeccable\" hook", + "timeout": 5, + "statusMessage": "Checking UI changes" + } + ] + } + ], + "Stop": [ + { + "hooks": [ + { + "type": "command", + "command": "[ ! -f \".grok/skills/impeccable/scripts/impeccable\" ] || \".grok/skills/impeccable/scripts/impeccable\" hook", + "timeout": 30, + "statusMessage": "Design deep pass" + } + ] + } + ] + } +} From c5fd7045d685633c5df54af97af2d52fc7a24257 Mon Sep 17 00:00:00 2001 From: Rohit Goswami Date: Wed, 7 Oct 2026 15:36:03 -0500 Subject: [PATCH 4/9] docs: record the section padding as 6rem 0 The public page sets section padding to 6rem 0 and uses 28px, 8px, and 12px corners. --- DESIGN.md | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/DESIGN.md b/DESIGN.md index 6862506a..2c56180c 100644 --- a/DESIGN.md +++ b/DESIGN.md @@ -20,8 +20,7 @@ rounded: control: "8px" panel: "12px" spacing: - section-y: "6rem" - section-x: "0" + section: "6rem 0" components: button-primary: backgroundColor: "{colors.teal}" @@ -70,7 +69,7 @@ components: ## Layout -`section` padding is `6rem 0` in `site/index.html`. +`section` padding is `6rem 0` in `site/index.html`. The recorded spacing value is that same `6rem 0`. ## Shapes From 7e396424ea361603cdaaa3adffb91cd75c3a8d0a Mon Sep 17 00:00:00 2001 From: Rohit Goswami Date: Wed, 7 Oct 2026 16:04:55 -0500 Subject: [PATCH 5/9] style: share one face across the TurtleTech sites Atkinson Hyperlegible Next is the UI face. Each product keeps its own palette. Keyboard focus uses that palette. --- DESIGN.md | 12 ++++++------ PRODUCT.md | 4 ++-- site-svelte/src/app.html | 2 +- site/404.html | 2 +- site/index.html | 9 +++++++-- 5 files changed, 17 insertions(+), 12 deletions(-) diff --git a/DESIGN.md b/DESIGN.md index 2c56180c..9d732cf0 100644 --- a/DESIGN.md +++ b/DESIGN.md @@ -10,7 +10,7 @@ colors: text: "#1a2e1f" typography: body: - fontFamily: "Jost, system-ui, sans-serif" + fontFamily: "Atkinson Hyperlegible Next, system-ui, sans-serif" fontWeight: 400 mono: fontFamily: "JetBrains Mono, monospace" @@ -33,13 +33,13 @@ components: **Creative North Star: "The forest page"** -(Inferred from `site/index.html`.) The static page sets its own custom properties: deep teal, coral, cream, and forest greens, with Jost for text and JetBrains Mono for code. +(Inferred from `site/index.html`.) The static page sets its own custom properties: deep teal, coral, cream, and forest greens, with Atkinson Hyperlegible Next for text and JetBrains Mono for code. **Key Characteristics:** - Teal `#004D40`. - Background `#FDFCF9`. -- Jost and JetBrains Mono. +- Atkinson Hyperlegible Next and JetBrains Mono. ## Colors @@ -59,7 +59,7 @@ components: ## Typography -**Body Font:** Jost +**Body Font:** Atkinson Hyperlegible Next **Label/Mono Font:** JetBrains Mono ### Hierarchy @@ -85,8 +85,8 @@ The logo uses a 28px radius. Controls use 8px. Panels and the demo close at 12px ### Do: -- **Do** keep `#004D40` and Jost as written in `site/index.html`. +- **Do** keep `#004D40` and Atkinson Hyperlegible Next as written in `site/index.html`. ### Don't: -- **Don't** replace Jost with Atkinson Hyperlegible Next. This page does not load that face. +- **Don't** load a second display face. This page uses Atkinson Hyperlegible Next for text and JetBrains Mono for code. diff --git a/PRODUCT.md b/PRODUCT.md index b4477a2a..799127e0 100644 --- a/PRODUCT.md +++ b/PRODUCT.md @@ -28,7 +28,7 @@ web ## Brand Commitments -The site sets `--teal: #004D40` and `--sans: 'Jost', system-ui, sans-serif` in `site/index.html`. +The site sets `--teal: #004D40` and `--sans: 'Atkinson Hyperlegible Next', system-ui, sans-serif` in `site/index.html`. ## Evidence on Hand @@ -37,5 +37,5 @@ The site sets `--teal: #004D40` and `--sans: 'Jost', system-ui, sans-serif` in ` ## Product Principles - (Inferred) The page explains the formatter that this repository ships. -- (Inferred) Keep the teal and Jost already in the site stylesheet. +- (Inferred) Keep the teal and the shared Atkinson face in the site stylesheet. - (Inferred) Do not move this record into a different repository. diff --git a/site-svelte/src/app.html b/site-svelte/src/app.html index 07bf72d7..d0dc8793 100644 --- a/site-svelte/src/app.html +++ b/site-svelte/src/app.html @@ -39,7 +39,7 @@ - + %sveltekit.head% diff --git a/site/404.html b/site/404.html index 3b4361e5..0e6d5135 100644 --- a/site/404.html +++ b/site/404.html @@ -8,7 +8,7 @@ From b71af3453ce2048e6bd17946e658fe526798efa6 Mon Sep 17 00:00:00 2001 From: Rohit Goswami Date: Wed, 7 Oct 2026 16:37:15 -0500 Subject: [PATCH 8/9] fix: keep filled labels readable in dark themes Dark palette primaries are light, so button text uses ink instead of white. Small section labels use the heading color, and reduced motion keeps the page still without a zero-duration kill. --- site/index.html | 2 ++ 1 file changed, 2 insertions(+) diff --git a/site/index.html b/site/index.html index acd40a35..980ad9f6 100644 --- a/site/index.html +++ b/site/index.html @@ -292,6 +292,8 @@ .lang-btn { background: none; border: none; + min-width: 44px; + min-height: 44px; padding: 0.4rem 0.55rem; font-size: 0.8rem; font-weight: 600; From c9b079ce00d460abb231c29b3f0f639f2a7a8e77 Mon Sep 17 00:00:00 2001 From: Rohit Goswami Date: Wed, 7 Oct 2026 16:39:51 -0500 Subject: [PATCH 9/9] style: keep the scroll hint still when motion is reduced The missing page loads the same face as the rest of the site. --- site/404.html | 2 ++ site/index.html | 4 ++++ 2 files changed, 6 insertions(+) diff --git a/site/404.html b/site/404.html index 0e6d5135..3ea2ff33 100644 --- a/site/404.html +++ b/site/404.html @@ -5,6 +5,8 @@ Page not found ยท snapper + +