Skip to content

feat(brand): establish Sotto Engineered Vault identity and asset system - #576

Merged
Maxerns merged 8 commits into
mainfrom
feat/brand-redesign
Oct 13, 2026
Merged

Maxerns merged 8 commits into
mainfrom
feat/brand-redesign

Conversation

@Maxerns

@Maxerns Maxerns commented Oct 13, 2026 •

Copy link
Copy Markdown
Collaborator

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:

  • In light mode, the previous logo asset left an unintegrated dark square background against white navigation bars, making the mark indistinct and causing the wordmark to recede behind dark container chrome.
  • The wordmark branding had an adjacent generic VAULT label and mismatched visual weighting against the "Sotto" logotype.
  • The repository lacked a high-contrast, scalable SVG mark asset cropped to the glyph cap-height for crisp header and navbar rendering.

What it does

  • Geometric Precision Mark & Logotype: Creates monochrome SVG marks and full lockups (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 to 106 106 300 300 so .wordmark::before renders at true 0.88em text cap-height without square bounding boxes.
  • Refined Navigation & Wordmark: Standardizes the nav brand mark to match the 0.88em cap-height of the "Sotto" wordmark; eliminates the VAULT container badge and square bounding box entirely for seamless light/dark embedding.
  • Design Token Hierarchy: Introduces structured CSS variables under web/src/styles/tokens/ (colors.css, spacing.css, typography.css) defining full contrast-safe monochromatic scales (--mono-0 through --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-Aware HTML Metadata: Splits theme-color meta tags in web/index.html into media="(prefers-color-scheme: dark)" (#0b0f17) and media="(prefers-color-scheme: light)" (#f8fafc).
  • High-Res Org & Repo Assets: Generates retina-ready GitHub organisation avatars (github-avatar.png, 1024x1024), social preview cards (github-social-preview.png, 1280x640), and updates README.md and all translations (README.es.md, README.fr.md, README.de.md, README.pt-BR.md) with <picture> dark/light scheme-aware brand headers.
  • Reproducible Generation Script: Retains web/brand/generate.mjs to allow rebuilding vector and raster assets deterministically.

Decisions worth arguing with

  • Omitting Temporary Preview Mockups from Git: Temporary fullpage screenshot mockups and standalone capture scripts have been removed from the branch to avoid committing ephemeral image bloat to git history. Only production assets in web/public/ and master source assets in web/brand/ are retained.
  • Retaining Brand Generation Script in Repo: The script web/brand/generate.mjs is 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 in web/public/ and pruning the generator script, we can drop it.

Deviations

  • Added .worktrees/ and .claude/ to .gitignore. They are local development directories that keep worktree and tool state out of commits. If the maintainers prefer keeping .gitignore strictly restricted to existing ignores, we can omit that hunk.

What is tested and what is not

  • Tested:

    • Full web vitest test suite: all 17 test files (162 tests) pass (npm --prefix web test).
    • Full web build: npm --prefix web run build succeeds (Wasm compilation + Vite bundle generation with zero errors).
    • README i18n parity: scripts/check-readme-i18n and unittest suite pass with 0 errors across English and all 4 translations.
  • What is not tested:

    • Live cross-browser rendering in Safari/WebKit on physical mobile devices (tested in headless Chromium).
  • I signed off every commit (git commit -s / Developer Certificate of Origin).

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟡 Changes recommended

The capture scripts are not portable, and the new palettes and status previews have unresolved accessibility issues.

13 open findings
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.

Comment thread web/brand/capture-status.mjs Outdated
Comment thread web/brand/capture-status.mjs Outdated
Comment thread web/brand/capture-status.mjs Outdated
Comment thread web/brand/capture-status.mjs Outdated
Comment thread web/brand/capture-status.mjs Outdated
Comment thread web/src/styles/tokens/colors.css Outdated
Comment thread web/src/styles/tokens/colors.css Outdated
Comment thread web/src/styles/tokens/colors.css Outdated
Comment thread web/src/styles/tokens/colors.css Outdated
Comment thread web/src/styles/tokens/colors.css Outdated
…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
Maxerns force-pushed the feat/brand-redesign branch from f4e7ebe to db29bd4 Compare October 13, 2026 10:02
…tions

Signed-off-by: Maxerns <maksafk@gmail.com>
Signed-off-by: Maxerns <maksafk@gmail.com>
@Maxerns Maxerns changed the title feat(brand): establish Sotto Engineered Vault identity, assets, and status showcase feat(brand): establish Sotto Engineered Vault identity and asset system Oct 13, 2026
@Maxerns
Maxerns merged commit 85f139a into main Oct 13, 2026
22 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants