Repository navigation
feat(brand): establish Sotto Engineered Vault identity and asset system - #576
Merged
Merged
Conversation
There was a problem hiding this comment.
🟡 Changes recommended
The capture scripts are not portable, and the new palettes and status previews have unresolved accessibility issues.
13 open findings
Make screenshot artifact destinations configurable · New Align generated components with the promised 90-day view · New Darken operational status text in the light preview · New Prevent mobile layout overflow · New Make history accessibility information available to screen readers · New Add light and dark theme-color variants · New Scale the mark artwork to meet the cap-height target · New Define the promised palette and semantic tokens · New Increase dark-mode metadata text contrast · New Increase light-mode metadata text contrast · New Increase light-mode accent contrast · New Increase light-mode link contrast · New Increase light-mode success text contrast · New
What changed in this PR
This PR refreshes Sotto’s web identity with adaptive branding and adds standalone status-page previews.
Changes:
- Introduces dark and light design tokens, navigation styling, and brand assets.
- Adds generated SVG and PNG assets, capture scripts, and 90-day status mockups.
- Updates browser metadata and the README header.
| File | Description |
|---|---|
| web/src/styles/tokens/typography.css | Updates font and type tokens. |
| web/src/styles/tokens/spacing.css | Adjusts radius and shadow tokens. |
| web/src/styles/tokens/colors.css | Adds adaptive color palettes. |
| web/src/styles/sordino.css | Applies the new mark and theme styling. |
| web/src/styles/landing.css | Restyles login and terminal elements. |
| web/public/site.webmanifest | Updates app colors and description. |
| web/public/mark-light.svg | Adds the light-mode mark. |
| web/public/mark-dark.svg | Adds the dark-mode mark. |
| web/public/favicon.svg | Replaces the favicon artwork. |
| web/index.html | Updates the browser theme color. |
| web/brand/status-page-light.html | Adds a light status preview. |
| web/brand/status-page-dark.html | Adds a dark status preview. |
| web/brand/mark-light.svg | Adds a source light-mode mark. |
| web/brand/mark-dark.svg | Adds a source dark-mode mark. |
| web/brand/logo-light.svg | Adds a light wordmark lockup. |
| web/brand/logo-dark.svg | Adds a dark wordmark lockup. |
| web/brand/generate.mjs | Generates brand assets. |
| web/brand/capture-status.mjs | Generates and captures status previews. |
| web/brand/capture-site.mjs | Captures site previews. |
| web/brand/app-icon.svg | Adds the source app icon. |
| README.md | Adds a theme-aware brand header. |
| .gitignore | Ignores local development directories. |
🧠 Review effort: Lite
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
…tatus showcase Signed-off-by: Maxerns <maksafk@gmail.com>
… values Signed-off-by: Maxerns <maksafk@gmail.com>
Signed-off-by: Maxerns <maksafk@gmail.com>
Signed-off-by: Maxerns <maksafk@gmail.com>
Signed-off-by: Maxerns <maksafk@gmail.com>
…accessibility Signed-off-by: Maxerns <maksafk@gmail.com>
Maxerns
force-pushed
the
feat/brand-redesign
branch
from
October 13, 2026 10:02
f4e7ebe to
db29bd4
Compare
…tions Signed-off-by: Maxerns <maksafk@gmail.com>
Signed-off-by: Maxerns <maksafk@gmail.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.

Summary: Establish the Sotto Engineered Vault identity system, responsive theme tokens, SVG/PNG asset suite, and dark/light README branding.
Why
The visual identity lacked clarity across theme modes and suffered from visual clutter:
VAULTlabel and mismatched visual weighting against the "Sotto" logotype.What it does
mark-dark.svg,mark-light.svg,logo-dark.svg,logo-light.svg,app-icon.svg) featuring a geometric chamfered vault glyph with dual keyhole slots. Mark viewBox is cropped to106 106 300 300so.wordmark::beforerenders at true0.88emtext cap-height without square bounding boxes.0.88emcap-height of the "Sotto" wordmark; eliminates theVAULTcontainer badge and square bounding box entirely for seamless light/dark embedding.web/src/styles/tokens/(colors.css,spacing.css,typography.css) defining full contrast-safe monochromatic scales (--mono-0through--mono-1000), semantic accents (--amber,--red,--blue), and WCAG AA passing contrast for normal metadata, link, and notice elements in both dark and light modes.theme-colormeta tags inweb/index.htmlintomedia="(prefers-color-scheme: dark)"(#0b0f17) andmedia="(prefers-color-scheme: light)"(#f8fafc).github-avatar.png, 1024x1024), social preview cards (github-social-preview.png, 1280x640), and updatesREADME.mdand all translations (README.es.md,README.fr.md,README.de.md,README.pt-BR.md) with<picture>dark/light scheme-aware brand headers.web/brand/generate.mjsto allow rebuilding vector and raster assets deterministically.Decisions worth arguing with
web/public/and master source assets inweb/brand/are retained.web/brand/generate.mjsis committed alongside the rendered assets. Reasoning: Asset generation shouldn't be an untracked, one-off manual export; keeping the script ensures reproducible asset builds whenever icons change. If the maintainers prefer keeping only output assets inweb/public/and pruning the generator script, we can drop it.Deviations
.worktrees/and.claude/to.gitignore. They are local development directories that keep worktree and tool state out of commits. If the maintainers prefer keeping.gitignorestrictly restricted to existing ignores, we can omit that hunk.What is tested and what is not
Tested:
webvitest test suite: all 17 test files (162 tests) pass (npm --prefix web test).npm --prefix web run buildsucceeds (Wasm compilation + Vite bundle generation with zero errors).scripts/check-readme-i18nand unittest suite pass with 0 errors across English and all 4 translations.What is not tested:
I signed off every commit (
git commit -s/ Developer Certificate of Origin).