VeillaxandClaude Sonnet 5.5
b548faa258
Plain markdown files, tags by typing #hashtags, a page per day, search, pin and trash with undo, autosave with conflict warnings, API tokens, zip export, and the Lightwell dashboard. Includes install.sh, CI and release workflows. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
32 lines
2.5 KiB
Markdown
32 lines
2.5 KiB
Markdown
# Basking design language
|
|
|
|
Basking follows the Lightwell design language, the same one Hammerhead and Megalodon use. The reference is `docs/design.md` in the Lightwell repository. When this page and Lightwell disagree, Lightwell wins.
|
|
|
|
## Shared with Lightwell
|
|
|
|
* **Tokens.** Colors, spacing (4px scale), radius, type sizes, the single shadow and the dark theme are the Lightwell values. The accent is teal, `#1f5c5c`. Raw colors live only between `tokens:begin` and `tokens:end` in `style.css`.
|
|
* **Voice.** No emoji, no em or en dashes, no exclamation marks, sentence case, buttons that name the result, and errors that say what happened and what to do next. Server errors are capitalized in one place (`fail` in `internal/web/server.go`).
|
|
* **Status carries text.** "Pinned", "Saving", "Saved" and "Not saved" are words, never a colored dot.
|
|
* **Structure.** Sidebar and drawer shell, cards, dialogs with a focus trap, `confirmDialog` for anything that cannot be undone, skeletons for loading, empty states that say why a list is empty.
|
|
|
|
## Where Basking differs
|
|
|
|
* **The writing box is the primary action.** Lightwell puts the one primary button in the page header. On Notes the header has none: the primary button, Save note, sits in the composer, because writing is the page. Elsewhere the rule holds: Write today on the Journal, Done while editing a note.
|
|
* **Deleting a note is not confirmed, it is undoable.** Delete moves a note to the trash and offers Undo. Only Delete for good and Empty trash ask first, naming what is lost.
|
|
* **Script and styles are separate files**, because the Content-Security-Policy forbids inline script and `style` attributes. Widths come from classes. The one use of `element.style` is sizing a text box to its text, which the policy allows.
|
|
* **Rendered notes** use a small safe markdown renderer in `app.js`. It builds elements, never HTML, and only `http(s)` links are links.
|
|
|
|
## Icons
|
|
|
|
Lucide style, outline only, stroke 1.75, round caps, `currentColor`, sizes 16, 18 and 22. An icon goes with a text label, and icon-only buttons carry an `aria-label`.
|
|
|
|
Approved names: `fin`, `notes`, `today`, `journal`, `pin`, `tag`, `trash`, `edit`, `restore`, `clock`, `view`, `download`, `copy`, `prev`, `next`, `settings`, `out`, `menu`, `close`, `add`, `check`, `light`, `dark`, `alert`. Add a name here and in `ICONS` together.
|
|
|
|
## Checking a change
|
|
|
|
```
|
|
node scripts/lint-design.mjs
|
|
```
|
|
|
|
It fails on em and en dashes, emoji, and raw colors outside the token block. Then check the page in light and dark, at phone and desktop width, using only the keyboard.
|