From 7619801d1c91f4030a9dd648613090638408cc31 Mon Sep 17 00:00:00 2001 From: karthik rk Date: Sat, 1 Aug 2026 17:49:19 +0530 Subject: [PATCH 1/3] updating styling as per guidelines --- ambient-sounds/index.html | 59 ++++++---- box-breathing/index.html | 63 ++++++---- color-capture/index.html | 124 +++++++++++++------- decision-wheel/index.html | 7 -- event-countdown/index.html | 54 ++++++--- fav-quote-gen/index.html | 62 +++++----- flip-a-coin/index.html | 64 +++++++---- gratitude-journal/index.html | 53 ++++++--- habit-tracker/index.html | 165 ++++++++++++++++----------- markdown-table/index.html | 7 -- metronome/index.html | 7 -- mood-tracker/index.html | 51 ++++++--- package.json | 1 + password-generator/index.html | 7 -- pomodoro-timer/index.html | 137 +++++++++++++--------- progress-tracker/index.html | 149 ++++++++++++++---------- readability-score/index.html | 67 +++++++---- roll-dice/index.html | 81 +++++++++---- screenshots/ambient-sounds.webp | Bin 8510 -> 12658 bytes screenshots/box-breathing.webp | Bin 9150 -> 12382 bytes screenshots/color-capture.webp | Bin 4568 -> 13820 bytes screenshots/decision-wheel.webp | Bin 32624 -> 27114 bytes screenshots/event-countdown.webp | Bin 8526 -> 12050 bytes screenshots/fav-quote-gen.webp | Bin 8080 -> 15294 bytes screenshots/flip-a-coin.webp | Bin 5614 -> 10034 bytes screenshots/gratitude-journal.webp | Bin 18220 -> 17010 bytes screenshots/habit-tracker.webp | Bin 11038 -> 21090 bytes screenshots/markdown-table.webp | Bin 31026 -> 19786 bytes screenshots/metronome.webp | Bin 27566 -> 17012 bytes screenshots/mood-tracker.webp | Bin 10988 -> 16262 bytes screenshots/password-generator.webp | Bin 30370 -> 18564 bytes screenshots/pomodoro-timer.webp | Bin 5396 -> 15072 bytes screenshots/progress-tracker.webp | Bin 35786 -> 53146 bytes screenshots/readability-score.webp | Bin 13470 -> 13002 bytes screenshots/roll-dice.webp | Bin 2942 -> 6560 bytes screenshots/speed-reader.webp | Bin 15410 -> 11972 bytes screenshots/text-case-converter.webp | Bin 15974 -> 11820 bytes screenshots/tic-tac-toe.webp | Bin 8784 -> 8720 bytes screenshots/typing-speed.webp | Bin 13480 -> 17746 bytes screenshots/unit-converter.webp | Bin 25688 -> 17076 bytes screenshots/water-tracker.webp | Bin 10994 -> 11936 bytes screenshots/word-counter.webp | Bin 20870 -> 11806 bytes screenshots/word-of-the-day.webp | Bin 12944 -> 21334 bytes screenshots/world-clock.webp | Bin 28260 -> 18490 bytes screenshots/writing-prompt.webp | Bin 12114 -> 14770 bytes speed-reader/index.html | 2 - text-case-converter/index.html | 53 ++++++--- tic-tac-toe/index.html | 91 +++++++-------- typing-speed/index.html | 58 +++++++--- unit-converter/index.html | 7 -- water-tracker/index.html | 54 ++++++--- word-counter/index.html | 86 +++++++++----- word-of-the-day/index.html | 62 ++++++---- world-clock/index.html | 7 -- writing-prompt/index.html | 53 ++++++--- 55 files changed, 1006 insertions(+), 625 deletions(-) diff --git a/ambient-sounds/index.html b/ambient-sounds/index.html index 39f6771..86b1c8a 100644 --- a/ambient-sounds/index.html +++ b/ambient-sounds/index.html @@ -3,18 +3,22 @@ - + Ambient Sounds diff --git a/markdown-table/index.html b/markdown-table/index.html index 0ff4991..f2cd180 100644 --- a/markdown-table/index.html +++ b/markdown-table/index.html @@ -61,12 +61,6 @@ line-height: 1.05; margin-top: 6px; } - header p { - color: var(--body); - font-size: 0.95rem; - line-height: 1.5; - margin-top: 8px; - } .layout { width: 100%; @@ -262,7 +256,6 @@
Writing · Markdown

Markdown Table Generator

-

Build a table visually, set per-column alignment, and copy clean, ready-to-paste Markdown.

diff --git a/metronome/index.html b/metronome/index.html index 90ebc3a..3e18ec8 100644 --- a/metronome/index.html +++ b/metronome/index.html @@ -63,12 +63,6 @@ line-height: 1.05; margin-top: 6px; } - header p { - color: var(--body); - font-size: 0.95rem; - line-height: 1.5; - margin-top: 8px; - } .layout { width: 100%; @@ -253,7 +247,6 @@
Focus · Rhythm

Metronome

-

Keep perfect time. Set the tempo, choose a beat, and practise to an accurate click — no internet, no accounts.

diff --git a/mood-tracker/index.html b/mood-tracker/index.html index 504a0c5..7c238db 100644 --- a/mood-tracker/index.html +++ b/mood-tracker/index.html @@ -3,18 +3,22 @@ - + Mood Tracker diff --git a/readability-score/index.html b/readability-score/index.html index 5230820..ad562fc 100644 --- a/readability-score/index.html +++ b/readability-score/index.html @@ -3,18 +3,22 @@ - + Readability Score -

✍️ Word Counter

+
+
Writing · Analysis
+

Word Counter

+
diff --git a/word-of-the-day/index.html b/word-of-the-day/index.html index 9bbfd72..14d13bc 100644 --- a/word-of-the-day/index.html +++ b/word-of-the-day/index.html @@ -3,18 +3,22 @@ - + Word of the Day diff --git a/markdown-table/index.html b/markdown-table/index.html index f2cd180..9241bbe 100644 --- a/markdown-table/index.html +++ b/markdown-table/index.html @@ -11,10 +11,11 @@ Palette + shapes follow the Hillnote design system: azure primary, cool-mist canvas, near-black ink, generous 24px card radius. */ :root { + color-scheme: light dark; --primary: #4d63ff; --primary-active: #6f82ff; --primary-pale: #e6ebff; - --on-primary: #f4f6ff; + --on-primary: #ffffff; --ink: #111318; --body: #454852; --mute: #868a93; @@ -28,6 +29,28 @@ --display: "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --mono: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, monospace; + --negative: #e0453f; + --negative-pale: #fbe3e2; + --primary-text: #3b50e0; + } + + @media (prefers-color-scheme: dark) { + :root { + --primary: #8b9bff; + --primary-active: #a8b4ff; + --primary-pale: #232842; + --on-primary: #111318; + --ink: #eceff5; + --body: #a9b0bf; + --mute: #7d8494; + --canvas: #20242e; + --canvas-soft: #14161b; + --line: #2f333d; + --positive: #3ddc84; + --negative: #ff6b63; + --negative-pale: #3a1412; + --primary-text: #8b9bff; + } } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } @@ -51,7 +74,7 @@ font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; - color: var(--primary); + color: var(--primary-text); } header h1 { font-family: var(--display); @@ -140,7 +163,7 @@ align-items: center; justify-content: center; } - .icon-btn:hover { border-color: var(--primary); color: var(--primary); } + .icon-btn:hover { border-color: var(--primary); color: var(--primary-text); } .icon-btn:disabled { opacity: 0.35; cursor: not-allowed; } .icon-btn:disabled:hover { border-color: var(--line); color: var(--ink); } @@ -194,7 +217,7 @@ align-items: center; justify-content: center; } - .row-remove:hover { color: #e0453f; background: #fff0f0; } + .row-remove:hover { color: var(--negative); background: var(--negative-pale); } /* Output */ .output { @@ -202,7 +225,7 @@ font-size: 0.82rem; line-height: 1.6; background: var(--ink); - color: #e7e9f2; + color: var(--canvas); border-radius: var(--r-lg); padding: 16px; white-space: pre; diff --git a/metronome/index.html b/metronome/index.html index 3e18ec8..f6186a4 100644 --- a/metronome/index.html +++ b/metronome/index.html @@ -12,10 +12,11 @@ localStorage. Palette + shapes follow the Hillnote design system: azure primary, cool-mist canvas, near-black ink, generous 24px card radius. */ :root { + color-scheme: light dark; --primary: #4d63ff; --primary-active: #6f82ff; --primary-pale: #e6ebff; - --on-primary: #f4f6ff; + --on-primary: #ffffff; --ink: #111318; --body: #454852; --mute: #868a93; @@ -29,6 +30,25 @@ --r-xl: 24px; --display: "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; + --primary-text: #3b50e0; + } + + @media (prefers-color-scheme: dark) { + :root { + --primary: #8b9bff; + --primary-active: #a8b4ff; + --primary-pale: #232842; + --on-primary: #111318; + --ink: #eceff5; + --body: #a9b0bf; + --mute: #7d8494; + --canvas: #20242e; + --canvas-soft: #14161b; + --line: #2f333d; + --accent-amber: #fbbf24; + --negative: #ff6b63; + --primary-text: #8b9bff; + } } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } @@ -53,7 +73,7 @@ font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; - color: var(--primary); + color: var(--primary-text); } header h1 { font-family: var(--display); @@ -112,7 +132,7 @@ margin-top: 4px; font-size: 0.85rem; font-weight: 600; - color: var(--primary); + color: var(--primary-text); letter-spacing: 0.02em; } @@ -217,7 +237,7 @@ transition: background 0.12s, color 0.12s, border-color 0.12s; } .seg button:hover { background: var(--canvas-soft); } - .seg button.active { background: var(--primary-pale); color: var(--primary); border-color: var(--primary); } + .seg button.active { background: var(--primary-pale); color: var(--primary-text); border-color: var(--primary); } .tap { border: 1px dashed var(--line); @@ -255,14 +275,14 @@

Metronome

diff --git a/mood-tracker/index.html b/mood-tracker/index.html index 7c238db..ad71ed3 100644 --- a/mood-tracker/index.html +++ b/mood-tracker/index.html @@ -7,6 +7,7 @@ Mood Tracker diff --git a/readability-score/index.html b/readability-score/index.html index ad562fc..096fde6 100644 --- a/readability-score/index.html +++ b/readability-score/index.html @@ -7,6 +7,7 @@ Readability Score diff --git a/typing-speed/index.html b/typing-speed/index.html index bd7e536..4783fb9 100644 --- a/typing-speed/index.html +++ b/typing-speed/index.html @@ -7,6 +7,7 @@ Typing Speed diff --git a/world-clock/index.html b/world-clock/index.html index fa2872a..dacfc90 100644 --- a/world-clock/index.html +++ b/world-clock/index.html @@ -12,10 +12,11 @@ and needs no network. Palette + shapes follow the Hillnote design system: azure primary, cool-mist canvas, near-black ink, generous 24px card radius. */ :root { + color-scheme: light dark; --primary: #4d63ff; --primary-active: #6f82ff; --primary-pale: #e6ebff; - --on-primary: #f4f6ff; + --on-primary: #ffffff; --ink: #111318; --body: #454852; --mute: #868a93; @@ -23,12 +24,35 @@ --canvas-soft: #eef0f4; --line: #dfe3ec; --positive: #22a559; + --positive-deep: #0c5230; --warning: #f5b62a; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --display: "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; + --negative-pale: #fbe3e2; + --primary-text: #3b50e0; + } + + @media (prefers-color-scheme: dark) { + :root { + --primary: #8b9bff; + --primary-active: #a8b4ff; + --primary-pale: #232842; + --on-primary: #111318; + --ink: #eceff5; + --body: #a9b0bf; + --mute: #7d8494; + --canvas: #20242e; + --canvas-soft: #14161b; + --line: #2f333d; + --positive: #3ddc84; + --positive-deep: #86efac; + --warning: #fbbf24; + --negative-pale: #3a1412; + --primary-text: #8b9bff; + } } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } @@ -52,7 +76,7 @@ font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; - color: var(--primary); + color: var(--primary-text); } header h1 { font-family: var(--display); @@ -99,9 +123,9 @@ font-variant-numeric: tabular-nums; font-weight: 600; font-size: 0.9rem; - color: var(--primary); + color: var(--primary-text); } - .planner-value.is-now { color: var(--positive); } + .planner-value.is-now { color: var(--positive-deep); } .slider-row { display: flex; align-items: center; gap: 12px; } input[type="range"] { @@ -145,7 +169,7 @@ transition: background 0.15s, color 0.15s, transform 0.1s; white-space: nowrap; } - .btn-now:hover { background: var(--primary-pale); color: var(--primary); } + .btn-now:hover { background: var(--primary-pale); color: var(--primary-text); } .btn-now:active { transform: scale(0.96); } /* ── Zone rows ───────────────────────────────────────── */ @@ -185,7 +209,7 @@ font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; - color: var(--primary); + color: var(--primary-text); background: var(--canvas); border-radius: 9999px; padding: 2px 8px; @@ -201,13 +225,13 @@ } .offset-pill { font-variant-numeric: tabular-nums; - color: var(--mute); + color: var(--body); } .day-diff { font-weight: 600; color: var(--warning); } - .day-diff.behind { color: var(--primary); } + .day-diff.behind { color: var(--primary-text); } .zone .clock { text-align: right; flex-shrink: 0; } .zone .time { @@ -218,8 +242,8 @@ letter-spacing: -0.02em; line-height: 1; } - .zone .ampm { font-size: 0.7rem; font-weight: 700; color: var(--mute); margin-left: 3px; } - .zone .date { font-size: 0.74rem; color: var(--mute); margin-top: 4px; } + .zone .ampm { font-size: 0.7rem; font-weight: 700; color: var(--body); margin-left: 3px; } + .zone .date { font-size: 0.74rem; color: var(--body); margin-top: 4px; } .zone-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; } .mini-btn { @@ -227,7 +251,7 @@ border-radius: 9999px; background: transparent; border: none; - color: var(--mute); + color: var(--body); font-size: 1rem; cursor: pointer; display: inline-flex; @@ -235,9 +259,9 @@ justify-content: center; transition: background 0.15s, color 0.15s, transform 0.1s; } - .mini-btn:hover { background: var(--canvas); color: var(--primary); } + .mini-btn:hover { background: var(--canvas); color: var(--primary-text); } .mini-btn:active { transform: scale(0.9); } - .mini-btn.remove:hover { color: var(--negative, #e0453f); background: #fff0f0; } + .mini-btn.remove:hover { color: var(--negative); background: var(--negative-pale); } .mini-btn:disabled { opacity: 0.25; cursor: not-allowed; } .mini-btn:disabled:hover { background: transparent; color: var(--mute); } diff --git a/writing-prompt/index.html b/writing-prompt/index.html index b8f144c..683fbe8 100644 --- a/writing-prompt/index.html +++ b/writing-prompt/index.html @@ -7,6 +7,7 @@ Writing Prompt From 11259103af451257f85bd438d3fbd547553882f7 Mon Sep 17 00:00:00 2001 From: karthik rk Date: Mon, 3 Aug 2026 11:35:18 +0530 Subject: [PATCH 3/3] updating the version --- CONTRIBUTING.md | 78 +++++++++++++++- Hillnote-Tools-Design-System.md | 8 +- templates/tool-template/index.html | 138 +++++++++++++++++++++++------ tools.json | 56 ++++++------ 4 files changed, 218 insertions(+), 62 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 9e609d7..3b3160e 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -20,6 +20,9 @@ A tool **must**: load. Use system fonts and inline `data:` URIs for any assets; - **not** include analytics, trackers, or any phone-home behavior; - store any state in `localStorage` under a namespaced key (e.g. `my-tool:…`); +- follow [`Hillnote-Tools-Design-System.md`](./Hillnote-Tools-Design-System.md) — + see [Design system](#design-system) below; +- **support light and dark mode** via `prefers-color-scheme`; - look reasonable in the catalog's **800×500** preview frame. > Multi-file bundles are supported by the installer but not used today — keep it @@ -37,6 +40,70 @@ string-argument `setTimeout`/`setInterval`, and `atob`/`unescape`/`String.fromCh These scans are a first-pass filter and a review aid — the runtime CSP in the app is the actual sandbox — so a reviewer still reads every tool's script. +## Design system + +Every tool follows [`Hillnote-Tools-Design-System.md`](./Hillnote-Tools-Design-System.md). +The template already wires this up — copy it and you inherit all of it. The short +version: + +| | | +| --- | --- | +| Accent | Hillnote azure `#4d63ff`. One accent only — don't introduce a second. | +| Surfaces | `--canvas-soft` page → `--canvas` cards. Surface contrast *is* the elevation; no drop shadows. | +| Type | Manrope weight 900 for the headline, Inter for everything else. Both are fallback stacks — no web fonts (the CSP blocks them). | +| Radius | `24px` for cards and buttons. | + +### Two rules that are easy to get wrong + +**1. Never hard-code a colour.** Every colour goes through a token — including +`box-shadow`, `border`, SVG `fill`/`stroke`, and anything assigned from +JavaScript. A literal `#fff` is the single most common reason a tool fails to +flip to dark. If you need a colour the tokens don't cover, add it to *both* +`:root` and the dark block rather than inlining it. + +**2. `--primary` is a fill; `--primary-text` is for type.** Azure at `#4d63ff` +only reaches 4.05:1 on the page background, which fails WCAG AA below 18.66 px. +Use `--primary` for button fills and active states, `--primary-text` for +eyebrows, links, and any small azure text. + +### Dark mode + +Scheme follows the OS — there is no in-product toggle. Declare +`color-scheme: light dark` so native controls, scrollbars and form widgets come +along, then override the tokens: + +```css +@media (prefers-color-scheme: dark) { + :root { + --canvas: #20242e; --canvas-soft: #14161b; --line: #2f333d; + --ink: #eceff5; --body: #a9b0bf; --mute: #7d8494; + --primary: #8b9bff; --primary-text: #8b9bff; --on-primary: #111318; + } +} +``` + +Dark is **not** an inversion. The page stays the darkest surface with cards +lifted above it, the canvas is never pure `#000`, and the CTA flips polarity — +light azure fill with a near-black label. See the Dark Mode section of the +design system for the reasoning. + +Check both schemes before opening a PR: macOS System Settings → Appearance, or +Chrome DevTools → ⌘⇧P → *Emulate CSS prefers-color-scheme: dark*. + +### Illustrative colour + +The single-accent rule covers UI chrome. Genuinely illustrative content — a +game piece, chart series, a spinner's segments — may use other hues; prefer +`--accent-orange` / `--accent-cyan` or the semantic palette before inventing +one. + +The per-tool `color` in `tools.json` is a separate thing again. It tints the +**gallery card in the app**, not the tool, so it is deliberately *not* azure for +most tools — a varied gallery is easier to scan. It does not need to relate to +anything inside your tool. Pick a hue that is not already close to another +entry; if nothing distinct is left, brand azure `#4d63ff` is a fine default and +several tools already use it. + ## Add a tool — step by step 1. **Copy the template** into a new folder named with your tool's slug @@ -46,7 +113,8 @@ is the actual sandbox — so a reviewer still reads every tool's script. cp -r templates/tool-template unit-converter ``` - Edit `unit-converter/index.html` — title, accent color, and the actual tool. + Edit `unit-converter/index.html` — title, eyebrow, and the actual tool. Keep + the token block as-is; it is what makes light and dark mode work. 2. **Add a screenshot** at `screenshots/.webp` (one per tool, 1:1 by name). Generate it from your tool with the bundled helper: @@ -68,7 +136,8 @@ is the actual sandbox — so a reviewer still reads every tool's script. "name": "Unit Converter", // display name "description": "Convert between metric and imperial units.", // one line "glyph": "📐", // a single emoji - "color": "#6366f1", // #rrggbb — used for the card accent + "color": "#6366f1", // #rrggbb — tints the gallery card in the app, + // NOT the tool's own accent (that is always azure) "version": 1 // new tool = 1 } ``` @@ -93,8 +162,9 @@ is the actual sandbox — so a reviewer still reads every tool's script. ### Updating an existing tool -Edit its `index.html` → regenerate its screenshot → increment **that tool's** -`version` → bump `catalogVersion` → open a PR. +Edit its `index.html` → check it in **both light and dark** → regenerate its +screenshot → increment **that tool's** `version` → bump `catalogVersion` → open +a PR. ## Local commands diff --git a/Hillnote-Tools-Design-System.md b/Hillnote-Tools-Design-System.md index c552db6..398af9c 100644 --- a/Hillnote-Tools-Design-System.md +++ b/Hillnote-Tools-Design-System.md @@ -7,7 +7,7 @@ colors: primary: "#4d63ff" primary-text: "#3b50e0" primary-on-ink: "#8b9bff" - on-primary: "#f4f6ff" + on-primary: "#ffffff" primary-active: "#6f82ff" primary-neutral: "#b9c4ff" primary-pale: "#e6ebff" @@ -440,14 +440,16 @@ Measured WCAG 2.1 ratios for the pairings that carry text. Body copy targets 4.5 | `mute` on `canvas` | 3.46:1 | 4.14:1 | | `primary-text` on `canvas-soft` | 5.40:1 | 7.09:1 | | `primary-text` on `canvas` | 6.16:1 | 6.08:1 | -| `on-primary` on `primary` (CTA label) | **4.29:1** | 7.28:1 | +| `on-primary` on `primary` (CTA label) | 4.62:1 | 7.28:1 | | `positive-deep` on `positive-pale` | 8.16:1 | 10.16:1 | | `positive-deep` on `primary-pale` (badge) | 7.81:1 | 10.29:1 | | `warning-content` on `warning-pale` | 9.80:1 | 11.63:1 | | `negative-deep` on `negative-pale` | 5.35:1 | 7.67:1 | | `canvas` vs `canvas-soft` (elevation) | 1.14:1 | 1.17:1 | -**Known gap.** The light CTA label — `{colors.on-primary}` `#f4f6ff` on `{colors.primary}` `#4d63ff` — measures 4.29:1 and falls just short of AA for a 16 px label. Setting `on-primary` to pure `#ffffff` raises it to 4.62:1 and is visually indistinguishable; darkening the fill to `#4459f0` reaches 4.95:1 but shifts the brand hue. The value is left unchanged here because `{colors.primary}` is the brand identity — resolve it deliberately, not by accident. Dark mode has no such gap. +**Resolved.** The light CTA label was `#f4f6ff` on `{colors.primary}`, which measured 4.29:1 and fell just short of AA for a 16 px label. `{colors.on-primary}` is now pure `#ffffff`, taking it to 4.62:1 — visually indistinguishable, and it leaves the brand fill `{colors.primary}` untouched. (Darkening the fill to `#4459f0` would have reached 4.95:1 but shifts the brand hue, so it was rejected.) + +**Remaining gap.** `{colors.mute}` is a deliberate 3:1 fine-print token and clears that comfortably on every surface in both schemes. It does not reach the stricter 4.5:1 body-text bar: 3.46:1 on `{colors.canvas}` and 3.03:1 on `{colors.canvas-soft}` in light, 4.14:1 and 4.83:1 in dark. Strict WCAG AA grants no exemption for small or low-priority text, so `{colors.mute}` set below 18.66 px is technically non-conforming — most visibly in light mode. Closing it would mean roughly `#686c77` in light and `#8a91a1` in dark, at the cost of visibly heavier fine print throughout. The 3:1 target is retained as an explicit, informed trade-off rather than an oversight. ## Typography diff --git a/templates/tool-template/index.html b/templates/tool-template/index.html index ed1104e..dab8e22 100644 --- a/templates/tool-template/index.html +++ b/templates/tool-template/index.html @@ -2,72 +2,156 @@ - + + My Tool + The demo shows the conventions: offline, persists state locally, no + network, and every colour driven by a token so dark mode works for free. -->
-

🛠️ My Tool

+
Category · Subcategory
+

My Tool

A one-line description of what it does.

0
-
+