Skip to content

Give Studio the Firefly brand foundation - #14

Merged
ancongui merged 14 commits into
mainfrom
feat/brand-studio-foundation
Oct 8, 2026
Merged

ancongui merged 14 commits into
mainfrom
feat/brand-studio-foundation

Conversation

@ancongui

@ancongui ancongui commented Oct 8, 2026

Copy link
Copy Markdown
Contributor

Summary

Brand PR 1 of 3: the Studio foundation (contract C1) for the usable-product program.

  • Dark design tokens. studio/src/styles.css :root now holds one dark, role-named value set (color-scheme: dark): surfaces, text, accent, lines, status tones, focus and selection, canvas, charts, sticky notes, code, diffs and loading. Every component color is a token, including the 21 former literals; decorative icons use --muted and placeholders use --subtle. Unit tests enforce the contrast floors and forbid color literals and token redefinitions outside :root, so a light theme can be added later as one more value set.
  • Manrope. Self-hosted from @fontsource-variable/manrope 5.3.0 (OFL-1.1) at /fonts/manrope/, with a preload; Studio no longer depends on system fonts, so Linux CI measures the same text widths that people see.
  • Lucide icons. lucide-static 1.52.0 (ISC, with MIT for the Feather-derived icons) feeds studio/scripts/build-icons.mjs, which generates icon-data.ts for 94 Weave names (51 used today and 43 reserved for the editor, AI and operations lanes). <weave-icon> draws them at a 1.5px stroke and flags any unknown name.
  • Firefly Weave lockup, mark and favicons. The expanded sidebar and the pairing pages show the lockup; the collapsed sidebar and widths up to 1280px show the Firefly mark; the favicon set comes from the brand kit. scripts/brand/weave-lockup.mjs composes the files from a local checkout of the private kit at run time; no kit source is in the repository. At the sidebar's 200px the Firefly part of the lockup measures 86.79px (FW 619.4 of 1427.4 units).
  • No mascot. The Lumi artwork is gone from Studio, the API explorer, graph exports, the README and docs images, and the takeaway band of 44 diagrams ("Takeaway" at the left margin).
  • Weave AI. Every Studio string says "Weave AI" ("Ask Weave AI", "Weave AI settings", "Explain with Weave AI", the Settings card "AI models", the roles "Weave AI user" and "Weave AI manager"). lumi identifiers, API paths, capabilities, roles and storage names are unchanged.
  • Licensing. NOTICE states that the Firefly name, logo and icon are trademarks of Firefly Software Solutions Inc., used by the Firefly Software Foundation with permission and not licensed under the Apache License 2.0, and adds the Manrope and Lucide notices. The source inventory records every mark, font and Lucide-derived file as third-party.

Not in this PR

  • Brand PR 2: desktop icons and DMG background, launch page, CLI help, graph export and API explorer palettes, server and worker messages, README banner, shields, badges and the social preview.
  • Brand PR 3: docs site theme, diagram recolor, labels and fonts, docs/guides/weave-ai.md, docs and README prose, and the removal of assets/weave-logo*.svg.

Verification

What ran locally on macOS (arm64) with Node 26.3.0 (CI pins Node 24.15.0), at 7e1d572:

  • uv run --locked --no-editable --reinstall-package firefly-weave --all-extras --group docs python scripts/check.py: All requested checks passed. The stages were source inventory, docs links and SVGs, the strict MkDocs build, Ruff lint and format, mypy, the unit and contract tests (3,730 collected), the agentic and files workers, release preparation and installed artifacts. The run did not use --release, so it did not build container images.
  • Studio: npm run check, npm run format:check, npm test (59 files, 668 tests) and npm run build all exit 0.
  • Playwright, every browser test with Chromium and 4 workers: 921 passed and 6 skipped (927 total, 7.3 minutes). The skipped tests are the six in real-platform.spec.ts, which need a real platform.
  • Visual tour at 360x740, 600x500, 768x1024, 1280x720, 1440x900, 1920x1080 and 1280x720 at 200% zoom: 224 passed. The tour measures contrast against the page's own dark ground, requires focus outlines at 3:1, checks that Manrope renders the text and fails on any icon without a drawing.
  • Until the S6-M0 cross-platform tier lands, the Python and Playwright suites run on Linux CI only; the Desktop installers workflow runs the Studio type check, unit tests and production build on macOS, Windows and Linux.

Screenshot review

360x740: 133 screenshots checked; fixed in cb330ea: the inspector title "Wait for signal" no longer wraps (44-inspector-signal.png, 44-inspector-signal-2.png), the simulation tabs "Workflow input" and "Action results (1)" no longer wrap (50-simulation-setup.png, 50-simulation-setup-results.png), and decorative icons use --muted instead of --link (01-workflows-new-menu.png, 43-designer-step-picker.png, 73-connections-list.png, 80-runs-list.png, 81-runs-detail.png, 82-tasks-list.png, 84-email-list.png, 86-workers-list.png); pre-existing (also at b4c0643): condition chips cut without an ellipsis, "North America" shows "North A" and "is in list" shows "is in lis" (39-condition-operators.png, 39-condition-operators-2.png), the field chip "approval › decision" shows "approval › decisio" (39-path-cards-2.png, 39-path-cards-3.png), the button label "Sign in with a different account" wraps to two lines (21-wizard-not-linked.png), the button label "Check configuration (no request is sent)" wraps to two lines (74-connections-detail.png, 74-connections-detail-2.png), the "Local draft" pill is cut at the row's right edge (03-workflows-local.png); left for the owner: a secondary action filled amber (51-simulation-wait.png, 52-simulation-signal.png, 66-openapi-listed.png, 67-openapi-created.png), the native "Choose File" button is Chromium's dark-scheme grey #6b6b6b (human-task-files.png, human-task-files-2.png). No other label is clipped or wrapped inside its control; content that continues below the window in a scrolling pane is not counted. Pairing (lockup, no mascot), local Home (one column, no mascot) and the collapsed-sidebar mark look right. Fixed in 17ea1af: the empty-branch "+ Add a step" hint uses --muted instead of --link (not in view in 41-designer-branches.png at this size; checked at 768x1024 and wider).
600x500: 166 screenshots checked; fixed in cb330ea: decorative icons use --muted instead of --link (01-workflows-new-menu.png, 73-connections-list.png, 80-runs-list.png, 82-tasks-list.png, 84-email-list.png, 86-workers-list.png); pre-existing (also at b4c0643): "Assign role" and "Cancel" cut at the window's bottom edge, reachable by scrolling the sheet (33-settings-assign-role.png, 33-settings-assign-role-2.png), "Cancel" and "Start run" cut at the window's bottom edge (56-start-run-dialog.png), "Reload settings" continues below the dialog's scroll area (lumi-settings-2.png), the sign-in address row continues under the wizard's sticky footer (17-wizard-sign-in-code.png); left for the owner: a secondary action filled amber (51-simulation-wait.png, 52-simulation-signal.png, 67-openapi-created.png), the native "Choose File" button is Chromium's dark-scheme grey #6b6b6b (human-task-files.png, human-task-files-2.png). No label is clipped or wrapped inside its control ("North America" fits in 39-condition-operators.png); the viewport-edge cases are the ones listed above. Pairing (lockup, no mascot), local Home (one column, no mascot) and the collapsed-sidebar mark look right. Fixed in 17ea1af: the empty-branch "+ Add a step" hint uses --muted instead of --link (not in view in 41-designer-branches.png at this size; checked at 768x1024 and wider).
768x1024: 105 screenshots checked; fixed in cb330ea: decorative icons use --muted instead of --link (01-home-local.png template glyphs, 01-workflows-new-menu.png, 43-designer-step-picker.png, 73-connections-list.png, 80-runs-list.png, 81-runs-detail.png, 82-tasks-list.png, 84-email-list.png, 86-workers-list.png); pre-existing (also at b4c0643): the condition chip "North America" shows "North Ameri" without an ellipsis (39-condition-operators.png, 39-condition-operators-2.png); left for the owner: a secondary action filled amber (51-simulation-wait.png, 52-simulation-signal.png, 66-openapi-listed.png, 67-openapi-created.png), the native "Choose File" button is Chromium's dark-scheme grey #6b6b6b (human-task-files.png). No other label is clipped or wrapped inside its control; content that continues below the window in a scrolling pane is not counted. Pairing (lockup, no mascot), local Home (one column, no mascot) and the collapsed-sidebar mark look right. Fixed in 17ea1af: the empty-branch "+ Add a step" hint uses --muted instead of --link (41-designer-branches.png).
1280x720: 142 screenshots checked; fixed in cb330ea: decorative icons use --muted instead of --link in the designer's Steps palette (64 files: 38-designer-lanes.png … 53-simulation-human-task.png) and in 01-home-local.png (template glyphs), 01-workflows-new-menu.png, 73-connections-list.png, 80-runs-list.png, 81-runs-detail.png, 82-tasks-list.png, 84-email-list.png, 86-workers-list.png; pre-existing (also at b4c0643): the condition chip "North America" shows "North Ameri" without an ellipsis (39-condition-operators.png), the button label "Check configuration (no request is sent)" wraps to two lines in the detail panel (74-connections-detail.png, 74-connections-detail-2.png); left for the owner: a secondary action filled amber (51-simulation-wait.png, 52-simulation-signal.png, 66-openapi-listed.png, 67-openapi-created.png), the native "Choose File" button is Chromium's dark-scheme grey #6b6b6b (human-task-files.png, human-task-files-2.png). No other label is clipped or wrapped inside its control; content that continues below the window in a scrolling pane is not counted. Pairing (lockup, no mascot), local Home (one column, no mascot) and the collapsed-sidebar mark look right. Fixed in 17ea1af: the empty-branch "+ Add a step" hint uses --muted instead of --link (41-designer-branches.png).
1440x900: 119 screenshots checked; fixed in cb330ea: decorative icons use --muted instead of --link in the designer's Steps palette (49 files: 38-designer-lanes.png … 53-simulation-human-task.png) and in 01-home-local.png (template glyphs), 01-workflows-new-menu.png, 73-connections-list.png, 80-runs-list.png, 81-runs-detail.png, 82-tasks-list.png, 84-email-list.png, 86-workers-list.png, human-task-files.png (row icon); pre-existing (also at b4c0643): the condition chip "North America" shows "North Ameri" without an ellipsis (39-condition-operators.png, 39-condition-operators-2.png); left for the owner: "List operations" and "Create 1 action" filled amber beside the dialog's primary "Publish action" (66-openapi-listed.png, 67-openapi-created.png) and the simulation panel's "Finish the wait at wait-1 (1 min)" / "Send customer-approved" filled amber beside the toolbar's "Save draft" (51-simulation-wait.png, 52-simulation-signal.png), the native "Choose File" button is Chromium's dark-scheme grey #6b6b6b (human-task-files.png). No other label is clipped or wrapped inside its control; content that continues below the window in a scrolling pane is not counted. Pairing (lockup, no mascot), local Home (one column, no mascot) and the expanded-sidebar lockup look right. Fixed in 17ea1af: the empty-branch "+ Add a step" hint uses --muted instead of --link (41-designer-branches.png).
1920x1080: 102 screenshots checked; fixed in cb330ea: decorative icons use --muted instead of --link in the designer's Steps palette (41 files: 38-designer-lanes.png … 53-simulation-human-task.png) and in 01-home-local.png (template glyphs), 01-workflows-new-menu.png, 73-connections-list.png, 80-runs-list.png, 81-runs-detail.png, 82-tasks-list.png, 84-email-list.png, 86-workers-list.png; left for the owner: "List operations" and "Create 1 action" filled amber beside the primary "Publish action" (66-openapi-listed.png, 67-openapi-created.png) and the simulation panel's action filled amber (51-simulation-wait.png, 52-simulation-signal.png), the native "Choose File" button is Chromium's dark-scheme grey #6b6b6b (human-task-files.png). No label is clipped or wrapped inside its control ("North America" fits in 39-condition-operators.png); content that continues below the window in a scrolling pane is not counted. Pairing (lockup, no mascot), local Home (one column, no mascot) and the expanded-sidebar lockup look right. Fixed in 17ea1af: the empty-branch "+ Add a step" hint uses --muted instead of --link (41-designer-branches.png).
1280x720-zoom200: 208 screenshots checked; fixed in cb330ea: decorative icons use --muted instead of --link (01-workflows-new-menu.png, 43-designer-step-picker.png, 73-connections-list.png, 80-runs-list.png, 82-tasks-list.png, 84-email-list.png, 86-workers-list.png); pre-existing (also at b4c0643): "Open sign-in page" sits half under the wizard's sticky footer (17-wizard-sign-in-code.png); left for the owner, pre-existing (also at b4c0643): the collapsed sidebar is scrolled so the mark is out of view (21 files: 17-wizard-sign-in-code.png, 18-wizard-workspace.png, 30-settings-local.png, 30-settings-local-2.png, 30-settings-local-3.png, 30-settings-local-4.png, 31-settings-platforms.png, 31-settings-platforms-2.png, 31-settings-platforms-3.png, 31-settings-platforms-4.png, 31-settings-platforms-5.png, 31-settings-platforms-6.png, 31-settings-platforms-7.png, 31-settings-platforms-8.png, 32-settings-people.png, 32-settings-people-2.png, 32-settings-people-3.png, 32-settings-people-4.png, 33-settings-assign-role.png, 33-settings-assign-role-2.png, 33-settings-assign-role-3.png); left for the owner: a secondary action filled amber (51-simulation-wait.png, 52-simulation-signal.png, 67-openapi-created.png). No label is clipped or wrapped inside its control ("North America" fits in 39-condition-operators.png); content that continues below the window in a scrolling pane is not counted. Pairing (lockup, no mascot) and local Home (one column, no mascot) look right. Fixed in 17ea1af: the empty-branch "+ Add a step" hint uses --muted instead of --link (41-designer-branches.png).
Method: agent review of every screenshot via contact sheets (scales: 360x740 1:1, 8 per sheet; 600x500 1:1, 6 per sheet; 768x1024 0.75, 4 per sheet; 1280x720 0.6, 6 per sheet; 1440x900 0.53, 4 per sheet; 1920x1080 0.4, 4 per sheet; 1280x720-zoom200 0.6 of its 2x pixels, 6 per sheet), with full-resolution checks of 87 screenshots and baseline comparisons against b4c0643 for every pre-existing finding; the contact sheets cover the run at cb330ea, and the re-run at 17ea1af (224 passed) was checked for the hint color in 41-designer-branches.png at every size (full resolution at 360x740, 600x500 and 1440x900, pixel measurement at the others); the owner's own review is pending.

Follow-ups for the owner and the lanes

  • Already present at b4c0643 and not fixed here (seen in the screenshot review): condition chips clipped without an ellipsis; some wrapped labels at 360px and 1280px; the "Local draft" pill cut at 360px; buttons at the window's bottom edge at 600x500; the collapsed rail scrolling the mark out of view at 200% zoom.
  • Design choices left as they are: several amber primary buttons in one view (OpenAPI import, simulation panel); Chromium's native file button.
  • Component vocabulary from the brand design still to align: field fill --sunken, menus --raised with a 1px --border, a 1px border on modal panels, a 2px selected-row bar.
  • Lane E: node-card fill and states, and start/end nodes on the selected fill. Lane O: the raw lumi component kind shown in Operations.
  • Five 11px labels are grandfathered in design-tokens.test.ts and can only shrink.

CI

This PR is ready to merge only when CI is green on Linux ("Checks": offline and studio, with Playwright and the visual tour) and in "Desktop installers" on macOS (arm64 and Intel), Windows and Linux, which run the Studio type check, unit tests and production build on each operating system. The owner's own review of the screenshots is still pending.

Andres Contreras added 14 commits October 7, 2026 21:50
…e scale

Placeholders draw in --subtle at full opacity instead of Chromium's grey.
Human task looks like every other step kind. Operations error notices use
the danger tokens, the canvas dot grid uses --canvas-dot, and the disabled
checked segment keeps 7:1 text. Off-scale weights (650, 550) move to the
scale, and the weight and 12px rules now scan component styles. The lockup
reserves its box, tokenColor() refuses an undefined token, and stale color
names leave the comments.
Its label stayed on one line and was wider than the dialog's column, so it
widened every section of the connection form's grid past the panel. macOS hid
the overflow in the panel's padding; Linux font metrics pushed it past.
@ancongui
ancongui merged commit 6bdbf57 into main Oct 8, 2026
12 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.

1 participant