From 182faf96de6bcf8a641a0ff33c169e8d0ff2128a Mon Sep 17 00:00:00 2001
From: chennan <chennan@qiniu.com>
Date: Tue, 31 Mar 2026 11:10:33 +0800
Subject: [PATCH 01/10] sv

---
 docs/develop/tailwind-css-migration.md        | 509 ++++++++++++++++++
 spx-gui/.vscode/extensions.json               |   5 +-
 spx-gui/AGENTS.md                             |  26 +
 spx-gui/package-lock.json                     | 394 +++++++++++++-
 spx-gui/package.json                          |   2 +
 spx-gui/src/App.vue                           |   4 -
 spx-gui/src/app.css                           | 243 +++++++++
 .../src/components/common/RouterUILink.vue    |  18 +-
 .../components/community/CenteredWrapper.vue  |  40 +-
 .../components/community/CommunityCard.vue    |   3 +-
 .../components/community/CommunityHeader.vue  |  37 +-
 .../components/community/ProjectsSection.vue  |  83 +--
 .../community/user/sidebar/UserSidebar.vue    |  21 +-
 .../user/sidebar/UserSidebarItem.vue          |  73 +--
 .../code-editor/spx-code-editor/CodeLink.vue  |  10 +-
 .../ui/completion/CompletionItem.vue          |  47 +-
 .../editor/map-editor/MapEditor.vue           |  69 +--
 .../src/components/navbar/NavbarWrapper.vue   |  68 +--
 .../src/components/project/ProjectItem.vue    | 192 +------
 .../components/tutorials/CourseSeriesItem.vue |  54 +-
 .../components/tutorials/TutorialsBanner.vue  |  67 +--
 spx-gui/src/components/ui/UILink.vue          |  26 +-
 spx-gui/src/components/ui/global.css          |  18 +
 spx-gui/src/components/ui/global.scss         |  16 -
 spx-gui/src/components/ui/link.scss           |  24 -
 spx-gui/src/components/ui/responsive.scss     |  22 -
 spx-gui/src/components/ui/responsive.ts       |   2 +-
 spx-gui/src/main.ts                           |   1 +
 spx-gui/src/pages/404/index.vue               |  44 +-
 spx-gui/src/pages/community/explore.vue       |  21 +-
 spx-gui/src/pages/community/home.vue          |  14 +-
 spx-gui/src/pages/community/index.vue         |  13 +-
 spx-gui/src/pages/sign-in/callback.vue        |  10 +-
 spx-gui/src/pages/sign-in/token.vue           |  43 +-
 spx-gui/src/pages/tutorials/course-start.vue  |  12 +-
 spx-gui/src/pages/tutorials/index.vue         |  38 +-
 spx-gui/src/utils/utils.scss                  |   5 -
 spx-gui/vercel-output-plugin.ts               |   2 +-
 spx-gui/vite.config.ts                        |   2 +
 39 files changed, 1389 insertions(+), 889 deletions(-)
 create mode 100644 docs/develop/tailwind-css-migration.md
 create mode 100644 spx-gui/src/app.css
 create mode 100644 spx-gui/src/components/ui/global.css
 delete mode 100644 spx-gui/src/components/ui/global.scss
 delete mode 100644 spx-gui/src/components/ui/link.scss
 delete mode 100644 spx-gui/src/components/ui/responsive.scss
 delete mode 100644 spx-gui/src/utils/utils.scss

diff --git a/docs/develop/tailwind-css-migration.md b/docs/develop/tailwind-css-migration.md
new file mode 100644
index 0000000000..464e56a036
--- /dev/null
+++ b/docs/develop/tailwind-css-migration.md
@@ -0,0 +1,509 @@
+# Tailwind CSS Migration Assessment for spx-gui
+
+This document investigates whether XBuilder frontend styling in `spx-gui` should migrate to Tailwind CSS.
+
+Issue: `goplus/builder#2981`
+
+## Conclusion
+
+Tailwind CSS is technically feasible in `spx-gui`, but a full migration is not a good near-term tradeoff.
+
+The current frontend already has a working design-token layer, a custom UI component library, and deep integration with Naive UI theme overrides. Because of that, Tailwind would mainly change the authoring model for layout and simple component styling. It would not replace major parts of the existing styling system unless the project also commits to a broader UI-layer refactor.
+
+The recommended direction is an incremental hybrid approach:
+
+- keep the existing `--ui-*` design tokens and Naive UI theme layer
+- add Tailwind only as an optional utility layer
+- validate it on a small set of low-risk pages or self-contained components first
+- only expand usage if the pilot materially improves development speed and code review quality
+
+## Current Target
+
+The current target is not "remove all SCSS from the repo".
+
+The near-term goal is more specific:
+
+- in business code outside `src/components/ui/`, use Tailwind as the default styling tool for local layout and surface styling
+- if business code still needs local authored styles, prefer plain CSS over SCSS
+- remove business-code imports of SCSS helpers from `src/components/ui/`
+- remove remaining SCSS files outside `src/components/ui/` as part of this phase
+- keep the existing design-system layer in `src/components/ui/` as the source of truth for tokens and Naive UI integration
+- allow `src/components/ui/` to keep local SCSS for now when that remains the clearest implementation
+
+This means the project is pursuing two related but different directions:
+
+- business code should move toward Tailwind-first plus plain CSS fallback, with SCSS being removed from that layer in this phase
+- the component-library layer should move more cautiously, with looser short-term requirements on SCSS removal
+
+## Current Styling Architecture
+
+The current frontend styling model is centered around Vue SFC local styles plus shared CSS variables, with Tailwind now added as an optional utility layer.
+
+- `spx-gui` uses Vite + Vue 3, includes both Tailwind and Sass tooling in [spx-gui/package.json](../../spx-gui/package.json)
+- the app loads global styling through [spx-gui/src/main.ts](../../spx-gui/src/main.ts) and [spx-gui/src/app.css](../../spx-gui/src/app.css), which imports [spx-gui/src/components/ui/global.css](../../spx-gui/src/components/ui/global.css)
+- design tokens are defined in TypeScript under [spx-gui/src/components/ui/tokens/index.ts](../../spx-gui/src/components/ui/tokens/index.ts) and related files
+- the token objects are converted into `--ui-*` CSS variables and injected globally by [spx-gui/src/components/ui/UIConfigProvider.vue](../../spx-gui/src/components/ui/UIConfigProvider.vue)
+- Naive UI theme overrides are also defined in [spx-gui/src/components/ui/UIConfigProvider.vue](../../spx-gui/src/components/ui/UIConfigProvider.vue), so the token system serves both custom CSS and third-party components
+- most component styles live inside local `<style scoped lang="scss">` blocks, for example [spx-gui/src/components/ui/UIButton.vue](../../spx-gui/src/components/ui/UIButton.vue) and [spx-gui/src/components/editor/navbar/EditorNavbar.vue](../../spx-gui/src/components/editor/navbar/EditorNavbar.vue)
+
+Measured footprint in `spx-gui/src`:
+
+- 411 Vue files total
+- 325 Vue files contain a `<style>` block
+- 322 Vue files use SCSS in the SFC
+- 115 `:deep(...)` usages override descendants or third-party internals
+- 22 direct imports from `naive-ui`
+- 5 standalone stylesheet files under `src`, with most styling still embedded in Vue SFCs
+
+Representative styling patterns:
+
+- token-driven custom components: [spx-gui/src/components/ui/UIButton.vue](../../spx-gui/src/components/ui/UIButton.vue)
+- app-wide token and theme bridge: [spx-gui/src/components/ui/UIConfigProvider.vue](../../spx-gui/src/components/ui/UIConfigProvider.vue)
+- responsive breakpoint logic: [spx-gui/src/components/ui/responsive.ts](../../spx-gui/src/components/ui/responsive.ts) and [spx-gui/src/components/community/CenteredWrapper.vue](../../spx-gui/src/components/community/CenteredWrapper.vue)
+- complex page-level nested styling: [spx-gui/src/pages/community/project.vue](../../spx-gui/src/pages/community/project.vue)
+- content-renderer deep selectors: [spx-gui/src/components/copilot/MarkdownView.vue](../../spx-gui/src/components/copilot/MarkdownView.vue)
+
+## Tailwind Fit Assessment
+
+Tailwind fits part of the project well, but not all of it.
+
+Good fit:
+
+- layout-heavy pages using flex, grid, spacing, width, and alignment utilities
+- simple presentational components with limited state combinations
+- new pages or isolated features where templates are already the main source of UI structure
+- responsive layout rules, because the current breakpoint usage is limited and can be mapped into a custom Tailwind config
+
+Weak fit:
+
+- components with many styling states encoded through local CSS variables and nested selectors
+- custom wrappers around Naive UI that rely on theme overrides plus `:deep(...)` selectors
+- content renderers and editor surfaces that style generated DOM, not just authored template nodes
+- components with runtime geometry or inline styles, such as sliders, image previews, waveform editors, or draggable/resizable panes
+
+Poor or no fit:
+
+- Monaco editor integration and other third-party DOM that already depends on custom CSS
+- Konva or canvas-rendered surfaces where styling is not driven by CSS utility classes
+
+## Migration Cost Estimate
+
+Estimated cost if the goal is only to introduce Tailwind as an optional utility layer:
+
+- setup and token mapping: 1 to 2 engineer-days
+- pilot migration for 1 small feature area: 2 to 5 engineer-days
+- documentation and team conventions: 1 engineer-day
+
+Estimated cost for a meaningful incremental rollout across layout-heavy areas:
+
+- 2 to 4 engineer-weeks
+- includes Tailwind setup, token mapping, conventions, 10 to 20 component/page migrations, and cleanup of duplicated styling patterns
+
+Estimated cost for a broad migration that tries to make Tailwind the dominant styling approach in `spx-gui`:
+
+- 6 to 10 engineer-weeks at minimum
+- likely more if the scope includes reworking Naive UI wrappers, complex editor surfaces, and duplicated `:deep(...)` customizations
+
+Estimated cost for a true full migration away from the current SCSS-plus-token approach:
+
+- high risk and not currently justified
+- would effectively become a UI architecture refactor, not just a styling migration
+
+## Major Risks And Constraints
+
+### 1. Existing token system already solves part of the problem
+
+The project already has a centralized token system and shared CSS variables. Tailwind would not replace that cleanly unless the team rewrites token consumption across both custom components and Naive UI overrides.
+
+### 2. Tailwind does not remove the Naive UI dependency
+
+Naive UI is embedded in the app theme model via [spx-gui/src/components/ui/UIConfigProvider.vue](../../spx-gui/src/components/ui/UIConfigProvider.vue). Even after adding Tailwind, the project would still need to maintain Naive UI theming and style overrides.
+
+### 3. Scoped SCSS is currently aligned with component boundaries
+
+A large share of the codebase keeps style logic close to each Vue component. Tailwind can improve speed for simple cases, but moving every component to class-heavy templates would be noisy and produce uneven code style if done inconsistently.
+
+### 4. `:deep(...)` usage is a real migration brake
+
+There are 115 `:deep(...)` usages. These target generated content, child internals, or third-party component markup. Tailwind utilities do not eliminate that category of styling work.
+
+### 5. Complex editor UI gets limited value from utility classes
+
+Several editor surfaces rely on runtime positions, inline CSS variables, drag behavior, SVG, or canvas-like rendering. Those areas already need custom CSS or programmatic styling, so Tailwind adds little leverage there.
+
+### 6. Design consistency can regress during mixed migration
+
+If the team starts using raw Tailwind classes without a token bridge and a small set of conventions, the result will drift away from the existing `--ui-*` design language.
+
+### 7. Maintenance cost can increase before it decreases
+
+During the transition, the project would have to maintain:
+
+- scoped SCSS
+- CSS variables
+- Naive UI theme overrides
+- Tailwind config and utilities
+
+That is acceptable only if the migration remains intentionally narrow at first.
+
+## Strategy Comparison
+
+### Full Migration
+
+Pros:
+
+- one dominant styling model after the migration finishes
+- potentially faster AI-assisted markup styling in the long run
+
+Cons:
+
+- high rewrite cost
+- high risk of regressions in editor surfaces and custom UI components
+- still does not remove the need for custom CSS in several critical areas
+- poor short-term return on effort
+
+Assessment: not recommended.
+
+### Incremental Migration
+
+Pros:
+
+- low risk
+- easy to stop if the benefits are smaller than expected
+- preserves current design tokens and Naive UI integration
+- lets the team learn where Tailwind actually helps
+
+Cons:
+
+- mixed styling models for some time
+- requires discipline to avoid ad hoc utility usage
+
+Assessment: viable.
+
+### Hybrid Approach With Guardrails
+
+This means Tailwind is introduced first where it improves business-code authoring, while the design-system layer keeps its current implementation patterns unless there is a clear payoff in changing them.
+
+Recommended usage boundaries:
+
+- use Tailwind for business-code page layout, spacing, simple cards, and simple wrappers
+- in business code, prefer plain CSS over SCSS when Tailwind is not the right expression
+- remove business-code dependencies on shared SCSS helper files from `src/components/ui/`
+- remove remaining SCSS files outside `src/components/ui/` instead of carrying them forward as a second-tier target
+- keep the existing token system as the source of truth
+- allow `src/components/ui/` to keep local SCSS in the short term, especially where it wraps Naive UI, exposes component variants, or relies on local stateful styling
+- keep CSS or SCSS for complex stateful widgets, `:deep(...)` overrides, editor internals, animation-heavy UI, and third-party DOM styling
+
+Assessment: best option.
+
+## Recommended Plan
+
+### Phase 1: Proof Of Fit
+
+- add Tailwind to `spx-gui` without changing existing styling
+- map Tailwind theme values to the current `--ui-*` tokens where practical
+- define custom breakpoints that match current responsive behavior
+- document when Tailwind is allowed and when local SCSS should remain the default
+
+Success criteria:
+
+- build works cleanly with Vite
+- no conflicts with current global styles or Naive UI theme overrides
+- a pilot page can use Tailwind without introducing duplicated design values
+
+### Phase 2: Pilot Migration
+
+Choose one small, layout-oriented area first. Good candidates are community or tutorial pages, not the editor core.
+
+Suggested pilot targets:
+
+- [spx-gui/src/components/community/CenteredWrapper.vue](../../spx-gui/src/components/community/CenteredWrapper.vue)
+- community listing or detail sections with mostly layout styling
+- simple UI wrappers that do not depend heavily on `:deep(...)`
+
+Avoid as first pilots:
+
+- editor navbar and editor panels
+- Monaco-related UI
+- waveform, drag-and-drop, or resize-heavy components
+- components that mainly customize Naive UI internals
+
+Success criteria:
+
+- the converted code is shorter or clearer than the current SCSS
+- design stays visually identical
+- AI-assisted edits become easier in practice, not just in theory
+
+### Phase 3: Decide Whether To Expand
+
+After the pilot, compare:
+
+- implementation speed
+- readability in code review
+- consistency with existing design tokens
+- regression rate
+- amount of residual SCSS still required
+
+If the pilot does not show a clear gain, stop and keep the current styling model.
+
+If the pilot is successful, expand only into other layout-heavy areas.
+
+## SCSS Migration Backlog
+
+The current SCSS usage in `spx-gui` should not be treated as a single migration bucket.
+
+The practical migration unit is not "all SCSS files" but "SCSS by responsibility":
+
+- layout-heavy page and card styling is a good Tailwind candidate
+- global foundation styling should remain, even if it later moves from SCSS to plain CSS
+- deep overrides, generated content styling, and editor surfaces should remain in CSS or SCSS
+- small SCSS helper layers should be phased out only after their consumers are migrated
+
+### Priority 1: Good Tailwind Candidates
+
+These files are strong candidates for early migration because they are business-code surfaces whose styling is mostly local layout, spacing, sizing, and simple visual presentation on authored template nodes.
+
+Recommended first batch:
+
+- [spx-gui/src/pages/community/explore.vue](../../spx-gui/src/pages/community/explore.vue)
+- [spx-gui/src/pages/community/home.vue](../../spx-gui/src/pages/community/home.vue)
+- [spx-gui/src/components/community/user/sidebar/UserSidebar.vue](../../spx-gui/src/components/community/user/sidebar/UserSidebar.vue)
+- [spx-gui/src/pages/tutorials/course-series.vue](../../spx-gui/src/pages/tutorials/course-series.vue)
+
+Recommended second batch:
+
+- [spx-gui/src/components/navbar/NavbarWrapper.vue](../../spx-gui/src/components/navbar/NavbarWrapper.vue)
+- [spx-gui/src/components/project/ProjectItem.vue](../../spx-gui/src/components/project/ProjectItem.vue)
+- user-page wrappers and list pages under `src/pages/community/user/` where the styling is primarily page shell and list layout
+
+Migration rule for this category:
+
+- move layout, spacing, sizing, typography, and simple hover states into Tailwind classes or small project utilities in `src/app.css`
+- if local authored styles still remain, prefer plain CSS over SCSS
+- remove the local `<style scoped lang="scss">` block after the migrated component is visually verified
+
+### Priority 2: Keep CSS Or SCSS Explicitly
+
+These files should remain outside the primary Tailwind migration target because their value comes from deep selectors, third-party DOM overrides, generated content styling, complex runtime layout, or highly stateful design-system behavior.
+
+Representative keep-as-CSS-or-SCSS areas:
+
+- design-system wrappers such as [spx-gui/src/components/ui/UIButton.vue](../../spx-gui/src/components/ui/UIButton.vue) and [spx-gui/src/components/ui/UITextInput.vue](../../spx-gui/src/components/ui/UITextInput.vue)
+- content renderers such as [spx-gui/src/components/copilot/MarkdownView.vue](../../spx-gui/src/components/copilot/MarkdownView.vue) and [spx-gui/src/components/common/CodeView.vue](../../spx-gui/src/components/common/CodeView.vue)
+- editor and runner surfaces such as [spx-gui/src/components/editor/preview/EditorPreview.vue](../../spx-gui/src/components/editor/preview/EditorPreview.vue), [spx-gui/src/pages/community/project.vue](../../spx-gui/src/pages/community/project.vue), and components under `src/components/project/runner/` and `src/components/editor/`
+
+Migration rule for this category:
+
+- do not migrate these files just to reduce SCSS usage
+- keep local CSS or SCSS where it is the clearest way to express stateful styling, `:deep(...)` overrides, pseudo-elements, counters, container queries, or generated DOM styling
+
+### Priority 2.5: Remove Business-Code Dependencies On Shared SCSS Helpers
+
+Business code should stop depending on shared SCSS helper files even if those helper files still temporarily exist for `src/components/ui/`.
+
+Current remaining helper dependencies include:
+
+- 2 direct imports of `src/components/ui/link.scss`
+
+Migration rule for this category:
+
+- replace `link.scss` usage with local CSS or template classes at the call site
+- do not keep business-code SCSS imports just because the helper file still exists for another area
+
+### Priority 2.6: Remove SCSS Files Outside `src/components/ui/`
+
+This phase should not leave a second bucket of non-UI-library SCSS behind.
+
+Migration rule for this category:
+
+- for files outside `src/components/ui/`, convert remaining `<style lang="scss">` blocks to Tailwind or plain CSS in the same pass
+- if a non-UI-library file still needs authored local styles after migration, keep them as plain CSS rather than SCSS
+- reserve SCSS carryover for `src/components/ui/` only in this phase
+
+### Priority 3: Phase Out Small SCSS Helper Layers
+
+These files are not long-term migration targets themselves. They should be removed only after the remaining consumers are migrated or absorbed into component-local styles.
+
+- [spx-gui/src/components/ui/link.scss](../../spx-gui/src/components/ui/link.scss)
+	This should be folded into link components or replaced by a small Tailwind utility convention before deleting the mixin file.
+- [spx-gui/src/utils/utils.scss](../../spx-gui/src/utils/utils.scss)
+	This should be replaced by direct Tailwind utilities such as truncation helpers or by local component CSS where needed.
+
+### Global Foundation Styling
+
+Global foundation styling should remain even in a Tailwind-based hybrid model.
+
+- [spx-gui/src/components/ui/global.css](../../spx-gui/src/components/ui/global.css) should not be deleted as part of Tailwind adoption
+- reset rules, `box-sizing`, and `@font-face` declarations are still needed
+- this file may later be converted from SCSS to plain CSS, but it should remain as a base layer stylesheet
+
+### Recommended Execution Order
+
+1. Finish low-risk page-shell and list-layout migrations in community and tutorials areas.
+2. Migrate simple card components such as project and course list items.
+3. Replace the remaining `link.scss` and `utils.scss` consumers.
+4. Delete helper SCSS files only after they have no remaining imports or mixin usages.
+5. Keep editor, runner, markdown, and Naive UI wrapper styling outside the migration scope unless there is a separate reason to refactor them.
+
+## Pilot Conventions And Preferences
+
+The community and tutorials pilot clarified a few practical conventions that should guide follow-up migrations.
+
+These are not abstract preferences. They reflect patterns that were already implemented and verified in the pilot components and pages.
+
+### 1. Keep Tailwind As A Local Authoring Tool, Not A New Global Dumping Ground
+
+The global entry file [spx-gui/src/app.css](../../spx-gui/src/app.css) should stay narrowly scoped.
+
+It is the right place for:
+
+- Tailwind entry setup such as `@import "tailwindcss"` and `@source`
+- the theme bridge from existing `--ui-*` variables to Tailwind tokens
+- rare project-wide utilities that are truly cross-feature and not page-specific
+
+It is not the right place for:
+
+- tutorials-only utilities
+- page-local dimensions, transforms, or background colors
+- feature-specific card or banner styles
+
+Rule of thumb:
+
+- if a class name would only make sense inside one page or one small feature area, keep it local to that component instead of promoting it into `app.css`
+
+### 2. Bridge Global Tokens, Not Page-Specific Business Styling
+
+The Tailwind theme bridge should cover stable design-system tokens from [spx-gui/src/components/ui/tokens/index.ts](../../spx-gui/src/components/ui/tokens/index.ts).
+
+That includes:
+
+- shared palette tokens
+- semantic tokens such as `primary`, `danger`, `success`, `sprite`, `sound`, and `stage`
+- typography, spacing, radius, and shadow tokens
+
+It should not absorb page-specific visual decisions such as a tutorials-only banner color or one-off sizing tokens.
+
+Rule of thumb:
+
+- bridge values that belong to the whole product design language
+- keep values that exist only for one feature in the feature itself
+
+Theme-reset preference:
+
+- for theme namespaces already covered by the design system, such as color, shadow, font, font-size, radius, and line-height, reset Tailwind's default values and expose only the project-specific values intended for use in this repo
+
+Token usage preference:
+
+- in Tailwind utility classes, prefer the bridged semantic tokens such as `text-text`, `text-title`, and `bg-primary-100`
+- in local CSS or SCSS rules, prefer using the original `--ui-*` variables directly, because `--ui-*` remains the source of truth and the Tailwind bridge exists primarily for utility-class authoring
+
+### 3. Prefer Tailwind For Straightforward Layout And Surface Styling
+
+The pilot confirmed that Tailwind works well for the following kinds of changes:
+
+- flex and grid layout
+- spacing, width, height, alignment, and overflow
+- simple typography application through bridged tokens
+- simple hover transitions on authored template nodes
+
+Representative examples from the pilot:
+
+- [spx-gui/src/pages/tutorials/index.vue](../../spx-gui/src/pages/tutorials/index.vue)
+- [spx-gui/src/components/tutorials/TutorialsBanner.vue](../../spx-gui/src/components/tutorials/TutorialsBanner.vue)
+- [spx-gui/src/components/tutorials/CourseSeriesItem.vue](../../spx-gui/src/components/tutorials/CourseSeriesItem.vue)
+
+Preferred style in this category:
+
+- write the style directly in the template when the utilities remain readable
+- remove the local style block after the result is verified
+
+Responsive styling preference:
+
+- reset Tailwind's default breakpoint names and use only the project-specific names `tablet`, `desktop`, and `desktop-large`
+- map the project breakpoints into Tailwind once in [spx-gui/src/app.css](../../spx-gui/src/app.css)
+- prefer Tailwind responsive variants for style changes instead of runtime `useResponsive()` checks
+- keep runtime responsive helpers only for non-style logic such as changing counts, queries, or other behavior that CSS cannot express
+
+### 4. Do Not Force Tailwind Where A Small Inline Style Is Clearer
+
+Some values are technically expressible in Tailwind but are not a good fit for utility classes.
+
+Examples from the pilot:
+
+- special color expressions such as `rgb(from var(--ui-color-grey-1000) r g b / 0.2)`
+- asset URLs that are clearer when imported through TypeScript
+- one-off values that would otherwise require long arbitrary-value classes
+
+Preferred style in this category:
+
+- import the asset or compute the value in script when that makes the dependency explicit
+- bind it through `:style` when the inline form is shorter and clearer than a custom utility or arbitrary class
+
+This is the current preferred pattern for one-off backgrounds in migrated components such as [spx-gui/src/components/tutorials/CourseSeriesItem.vue](../../spx-gui/src/components/tutorials/CourseSeriesItem.vue).
+
+### 5. Do Not Introduce Setup Variables For Single-Use Style Values Without A Payoff
+
+During the pilot, a temporary setup variable was introduced for a single background image style and then removed.
+
+Preferred style:
+
+- if a style value is used only once and is still readable inline, bind it directly in the template
+- only lift it into script when it is reused, computed, or meaningfully improves readability
+
+### 6. Prefer Explicit Asset Imports Over Tailwind `url(...)` Classes When Readability Matters
+
+Tailwind arbitrary `url(...)` classes do work correctly through Vite build and asset hashing.
+
+However, the pilot showed that this form can still create review friction because the dependency path is less explicit in the template.
+
+Preferred style:
+
+- for important or non-obvious asset references, prefer `import stageBgUrl from '...'` plus `:style="{ backgroundImage: \`url(${stageBgUrl})\` }"`
+- reserve Tailwind `bg-[url(...)]` for cases where the shorthand is clearly readable and unlikely to cause doubt
+
+### 7. Keep Migration Decisions At The Responsibility Level, Not The File-Extension Level
+
+The pilot reinforced the original migration strategy:
+
+- Tailwind is a good fit for local page-shell and card layout concerns
+- local CSS or SCSS should remain for deep selectors, generated content, third-party DOM overrides, and complex stateful widgets
+- a file does not need to become "100% Tailwind" to count as successfully migrated
+
+The goal is clearer and more maintainable code, not maximizing utility-class usage.
+
+### 8. Keep Exact Local Values Local, With A Visible TODO
+
+Some migrated components still need exact local visual values that are not part of the current token system.
+
+Preferred style:
+
+- keep those values local instead of forcing them into the global theme bridge
+- add a nearby comment such as `TODO: review this ... value` so later cleanup can decide whether the value should remain local or become a token
+
+## Recommendation
+
+Tailwind CSS is worth evaluating in `spx-gui`, but only as a constrained utility layer.
+
+It is not worth pursuing as a near-term full migration target because the project already has:
+
+- a functioning token system
+- a custom UI component layer
+- Naive UI theme integration
+- many component-local scoped SCSS blocks
+- a meaningful number of deep selectors and complex editor surfaces
+
+The practical recommendation for issue `#2981` is:
+
+- conclude that Tailwind is feasible
+- reject full migration for now
+- recommend a hybrid incremental pilot
+- make the pilot target a simple community or tutorial area before touching editor internals
+
+## Suggested Next Step
+
+If the team wants to continue after this assessment, the next task should be a small proof-of-concept PR that:
+
+- installs Tailwind in `spx-gui`
+- defines the minimal theme bridge to current tokens
+- converts one low-risk page or wrapper component
+- records what became simpler and what still required SCSS
\ No newline at end of file
diff --git a/spx-gui/.vscode/extensions.json b/spx-gui/.vscode/extensions.json
index 93ea3e7838..48993148e7 100644
--- a/spx-gui/.vscode/extensions.json
+++ b/spx-gui/.vscode/extensions.json
@@ -1,7 +1,8 @@
 {
   "recommendations": [
-    "Vue.volar",
+    "vue.volar",
     "dbaeumer.vscode-eslint",
-    "esbenp.prettier-vscode"
+    "esbenp.prettier-vscode",
+    "bradlc.vscode-tailwindcss"
   ]
 }
diff --git a/spx-gui/AGENTS.md b/spx-gui/AGENTS.md
index 11ad9facd4..2fe4852b97 100644
--- a/spx-gui/AGENTS.md
+++ b/spx-gui/AGENTS.md
@@ -80,6 +80,32 @@ When working with backend unique string identifiers such as `username`, project
 
 * Generate accessibility info for interactive elements using `v-radar` directive.
 
+## Styling Preferences
+
+* For business code outside `src/components/ui/`, prefer Tailwind as the default way to implement local layout and surface styling.
+* If business code still needs local authored styles, prefer plain CSS over SCSS.
+* Do not add or keep business-code imports of SCSS helpers from `src/components/ui/`.
+* For `src/components/ui/`, the long-term direction is the same, but this phase still allows local SCSS where it remains the clearest implementation.
+* Keep [src/app.css](src/app.css) limited to Tailwind entry setup, the theme bridge, and rare project-wide utilities.
+* Do not move page-local or feature-local styles into `src/app.css` just because they are written with Tailwind.
+* Keep page-specific dimensions, transforms, colors, and card/banner styling local to the relevant page or component.
+* Keep the existing `--ui-*` design token system as the source of truth.
+* In Tailwind utility classes, prefer the bridged semantic tokens such as `text-text`, `text-title`, and `bg-primary-100`.
+* In local CSS or SCSS rules, prefer using the original `--ui-*` variables directly instead of routing those rules back through Tailwind bridge variables.
+* For theme namespaces already covered by the design system, such as color, shadow, font, font-size, radius, and line-height, reset Tailwind's default values in `src/app.css` and expose only the project-specific values intended for use in this repo.
+* Keep the project breakpoint mapping in `src/app.css` aligned with `src/components/ui/responsive.ts`.
+* Reset Tailwind's default breakpoint names in `src/app.css` and use only the project-specific names `tablet`, `desktop`, and `desktop-large` in responsive classes.
+* For responsive styling, prefer Tailwind responsive variants over runtime `useResponsive()` checks.
+* Keep `useResponsive()` for non-style logic only, such as changing fetched counts or other runtime behavior that CSS cannot express.
+* Prefer Tailwind for straightforward layout and surface styling: flex, grid, spacing, sizing, alignment, overflow, simple typography, and simple hover states.
+* When Tailwind classes stay readable, write them directly in the template and remove the local style block after verification.
+* Keep local CSS or SCSS for deep selectors, generated content, third-party DOM overrides, and complex stateful widgets.
+* Do not force a file to become fully Tailwind if a small amount of local CSS or SCSS remains the clearest expression.
+* Use `:style` for one-off values that are clearer inline than as Tailwind arbitrary values or custom utilities.
+* For important or non-obvious background assets, prefer TypeScript imports plus inline `backgroundImage` binding over Tailwind `bg-[url(...)]` classes.
+* Do not introduce setup variables for single-use style values unless they are reused, computed, or materially improve readability.
+* When a non-token visual value needs to remain exact and local, keep it local instead of forcing it into the global token bridge. Add a nearby comment such as `TODO: review this ... value` so it is visible in later design cleanup or tokenization work.
+
 ### Menu Item Text Guidelines
 
 When creating or modifying menu items, follow these UI guidelines for ellipses:
diff --git a/spx-gui/package-lock.json b/spx-gui/package-lock.json
index 1503b962b7..4df41e1050 100644
--- a/spx-gui/package-lock.json
+++ b/spx-gui/package-lock.json
@@ -16,6 +16,7 @@
         "@sentry/core": "^9.33.0",
         "@sentry/vue": "^9.33.0",
         "@shikijs/monaco": "^3.2.2",
+        "@tailwindcss/vite": "^4.2.2",
         "@tanstack/vue-query": "^5.36.1",
         "@tsconfig/node24": "^24.0.3",
         "@types/file-saver": "^2.0.7",
@@ -58,6 +59,7 @@
         "scss": "^0.2.4",
         "shiki": "^3.2.2",
         "sortablejs": "^1.15.6",
+        "tailwindcss": "^4.2.2",
         "typescript": "^5.9.3",
         "vite": "^8.0.0",
         "vite-plugin-ejs": "^1.7.0",
@@ -840,6 +842,26 @@
         "url": "https://github.com/chalk/strip-ansi?sponsor=1"
       }
     },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.13",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/remapping": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
+      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
     "node_modules/@jridgewell/resolve-uri": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
@@ -853,6 +875,16 @@
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
       "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og=="
     },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.31",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
     "node_modules/@juggle/resize-observer": {
       "version": "3.4.0",
       "resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.4.0.tgz",
@@ -2281,6 +2313,321 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@tailwindcss/node": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.2.2.tgz",
+      "integrity": "sha512-pXS+wJ2gZpVXqFaUEjojq7jzMpTGf8rU6ipJz5ovJV6PUGmlJ+jvIwGrzdHdQ80Sg+wmQxUFuoW1UAAwHNEdFA==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/remapping": "^2.3.5",
+        "enhanced-resolve": "^5.19.0",
+        "jiti": "^2.6.1",
+        "lightningcss": "1.32.0",
+        "magic-string": "^0.30.21",
+        "source-map-js": "^1.2.1",
+        "tailwindcss": "4.2.2"
+      }
+    },
+    "node_modules/@tailwindcss/oxide": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.2.2.tgz",
+      "integrity": "sha512-qEUA07+E5kehxYp9BVMpq9E8vnJuBHfJEC0vPC5e7iL/hw7HR61aDKoVoKzrG+QKp56vhNZe4qwkRmMC0zDLvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 20"
+      },
+      "optionalDependencies": {
+        "@tailwindcss/oxide-android-arm64": "4.2.2",
+        "@tailwindcss/oxide-darwin-arm64": "4.2.2",
+        "@tailwindcss/oxide-darwin-x64": "4.2.2",
+        "@tailwindcss/oxide-freebsd-x64": "4.2.2",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.2.2",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.2.2",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.2.2",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.2.2",
+        "@tailwindcss/oxide-linux-x64-musl": "4.2.2",
+        "@tailwindcss/oxide-wasm32-wasi": "4.2.2",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.2.2",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.2.2"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-android-arm64": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.2.2.tgz",
+      "integrity": "sha512-dXGR1n+P3B6748jZO/SvHZq7qBOqqzQ+yFrXpoOWWALWndF9MoSKAT3Q0fYgAzYzGhxNYOoysRvYlpixRBBoDg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-arm64": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.2.2.tgz",
+      "integrity": "sha512-iq9Qjr6knfMpZHj55/37ouZeykwbDqF21gPFtfnhCCKGDcPI/21FKC9XdMO/XyBM7qKORx6UIhGgg6jLl7BZlg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-x64": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.2.2.tgz",
+      "integrity": "sha512-BlR+2c3nzc8f2G639LpL89YY4bdcIdUmiOOkv2GQv4/4M0vJlpXEa0JXNHhCHU7VWOKWT/CjqHdTP8aUuDJkuw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-freebsd-x64": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.2.2.tgz",
+      "integrity": "sha512-YUqUgrGMSu2CDO82hzlQ5qSb5xmx3RUrke/QgnoEx7KvmRJHQuZHZmZTLSuuHwFf0DJPybFMXMYf+WJdxHy/nQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.2.2.tgz",
+      "integrity": "sha512-FPdhvsW6g06T9BWT0qTwiVZYE2WIFo2dY5aCSpjG/S/u1tby+wXoslXS0kl3/KXnULlLr1E3NPRRw0g7t2kgaQ==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.2.2.tgz",
+      "integrity": "sha512-4og1V+ftEPXGttOO7eCmW7VICmzzJWgMx+QXAJRAhjrSjumCwWqMfkDrNu1LXEQzNAwz28NCUpucgQPrR4S2yw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.2.2.tgz",
+      "integrity": "sha512-oCfG/mS+/+XRlwNjnsNLVwnMWYH7tn/kYPsNPh+JSOMlnt93mYNCKHYzylRhI51X+TbR+ufNhhKKzm6QkqX8ag==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.2.2.tgz",
+      "integrity": "sha512-rTAGAkDgqbXHNp/xW0iugLVmX62wOp2PoE39BTCGKjv3Iocf6AFbRP/wZT/kuCxC9QBh9Pu8XPkv/zCZB2mcMg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-musl": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.2.2.tgz",
+      "integrity": "sha512-XW3t3qwbIwiSyRCggeO2zxe3KWaEbM0/kW9e8+0XpBgyKU4ATYzcVSMKteZJ1iukJ3HgHBjbg9P5YPRCVUxlnQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.2.2.tgz",
+      "integrity": "sha512-eKSztKsmEsn1O5lJ4ZAfyn41NfG7vzCg496YiGtMDV86jz1q/irhms5O0VrY6ZwTUkFy/EKG3RfWgxSI3VbZ8Q==",
+      "bundleDependencies": [
+        "@napi-rs/wasm-runtime",
+        "@emnapi/core",
+        "@emnapi/runtime",
+        "@tybys/wasm-util",
+        "@emnapi/wasi-threads",
+        "tslib"
+      ],
+      "cpu": [
+        "wasm32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.8.1",
+        "@emnapi/runtime": "^1.8.1",
+        "@emnapi/wasi-threads": "^1.1.0",
+        "@napi-rs/wasm-runtime": "^1.1.1",
+        "@tybys/wasm-util": "^0.10.1",
+        "tslib": "^2.8.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@emnapi/core": {
+      "version": "1.8.1",
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/wasi-threads": "1.1.0",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@emnapi/runtime": {
+      "version": "1.8.1",
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@emnapi/wasi-threads": {
+      "version": "1.1.0",
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@napi-rs/wasm-runtime": {
+      "version": "1.1.1",
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.7.1",
+        "@emnapi/runtime": "^1.7.1",
+        "@tybys/wasm-util": "^0.10.1"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@tybys/wasm-util": {
+      "version": "0.10.1",
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/tslib": {
+      "version": "2.8.1",
+      "inBundle": true,
+      "license": "0BSD",
+      "optional": true
+    },
+    "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.2.2.tgz",
+      "integrity": "sha512-qPmaQM4iKu5mxpsrWZMOZRgZv1tOZpUm+zdhhQP0VhJfyGGO3aUKdbh3gDZc/dPLQwW4eSqWGrrcWNBZWUWaXQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.2.2.tgz",
+      "integrity": "sha512-1T/37VvI7WyH66b+vqHj/cLwnCxt7Qt3WFu5Q8hk65aOvlwAhs7rAp1VkulBJw/N4tMirXjVnylTR72uI0HGcA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/vite": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.2.2.tgz",
+      "integrity": "sha512-mEiF5HO1QqCLXoNEfXVA1Tzo+cYsrqV7w9Juj2wdUFyW07JRenqMG225MvPwr3ZD9N1bFQj46X7r33iHxLUW0w==",
+      "license": "MIT",
+      "dependencies": {
+        "@tailwindcss/node": "4.2.2",
+        "@tailwindcss/oxide": "4.2.2",
+        "tailwindcss": "4.2.2"
+      },
+      "peerDependencies": {
+        "vite": "^5.2.0 || ^6 || ^7 || ^8"
+      }
+    },
     "node_modules/@tanstack/match-sorter-utils": {
       "version": "8.15.1",
       "resolved": "https://registry.npmjs.org/@tanstack/match-sorter-utils/-/match-sorter-utils-8.15.1.tgz",
@@ -4044,6 +4391,19 @@
       "resolved": "https://registry.npmjs.org/emoji-regex-xs/-/emoji-regex-xs-1.0.0.tgz",
       "integrity": "sha512-LRlerrMYoIDrT6jgpeZ2YYl/L8EulRTt5hQcYjy5AInh7HWXKimpqx68aknBFpGL2+/IcogTcaydJEgaTmOpDg=="
     },
+    "node_modules/enhanced-resolve": {
+      "version": "5.20.1",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.20.1.tgz",
+      "integrity": "sha512-Qohcme7V1inbAfvjItgw0EaxVX5q2rdVEZHRBrEQdRZTssLDGsL8Lwrznl8oQ/6kuTJONLaDcGjkNP247XEhcA==",
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.3.0"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/entities": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
@@ -4651,6 +5011,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "license": "ISC"
+    },
     "node_modules/graphemer": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
@@ -5234,6 +5600,15 @@
         "node": "*"
       }
     },
+    "node_modules/jiti": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz",
+      "integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==",
+      "license": "MIT",
+      "bin": {
+        "jiti": "lib/jiti-cli.mjs"
+      }
+    },
     "node_modules/js-base64": {
       "version": "3.7.8",
       "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-3.7.8.tgz",
@@ -7829,12 +8204,25 @@
       }
     },
     "node_modules/tailwindcss": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.2.1.tgz",
-      "integrity": "sha512-/tBrSQ36vCleJkAOsy9kbNTgaxvGbyOamC30PRePTQe/o1MFwEKHQk4Cn7BNGaPtjp+PuUrByJehM1hgxfq4sw==",
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.2.2.tgz",
+      "integrity": "sha512-KWBIxs1Xb6NoLdMVqhbhgwZf2PGBpPEiwOqgI4pFIYbNTfBXiKYyWoTsXgBQ9WFg/OlhnvHaY+AEpW7wSmFo2Q==",
       "license": "MIT",
       "peer": true
     },
+    "node_modules/tapable": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.2.tgz",
+      "integrity": "sha512-1MOpMXuhGzGL5TTCZFItxCc0AARf1EZFQkGqMm7ERKj8+Hgr5oLvJOVFcC+lRmR8hCe2S3jC4T5D7Vg/d7/fhA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
     "node_modules/tinybench": {
       "version": "2.9.0",
       "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz",
diff --git a/spx-gui/package.json b/spx-gui/package.json
index 64a87f3bdf..c4497e54ec 100644
--- a/spx-gui/package.json
+++ b/spx-gui/package.json
@@ -24,6 +24,7 @@
     "@sentry/vue": "^9.33.0",
     "@shikijs/monaco": "^3.2.2",
     "@tanstack/vue-query": "^5.36.1",
+    "@tailwindcss/vite": "^4.2.2",
     "@tsconfig/node24": "^24.0.3",
     "@types/file-saver": "^2.0.7",
     "@types/node": "^24.10.1",
@@ -65,6 +66,7 @@
     "scss": "^0.2.4",
     "shiki": "^3.2.2",
     "sortablejs": "^1.15.6",
+    "tailwindcss": "^4.2.2",
     "typescript": "^5.9.3",
     "vite": "^8.0.0",
     "vite-plugin-ejs": "^1.7.0",
diff --git a/spx-gui/src/App.vue b/spx-gui/src/App.vue
index d0f0e66c05..6b3cbeb5f3 100644
--- a/spx-gui/src/App.vue
+++ b/spx-gui/src/App.vue
@@ -53,7 +53,3 @@ const config = computed<Config>(() => ({
 
 useInstallRouteLoading()
 </script>
-
-<style lang="scss">
-@import '@/components/ui/global.scss';
-</style>
diff --git a/spx-gui/src/app.css b/spx-gui/src/app.css
new file mode 100644
index 0000000000..6cdbf42474
--- /dev/null
+++ b/spx-gui/src/app.css
@@ -0,0 +1,243 @@
+@import "./components/ui/global.css";
+@import "tailwindcss";
+
+@source "./**/*.{vue,ts,tsx,js,jsx,html}";
+
+/*
+ * Shared UILink component variants.
+ *
+ * These classes mirror the public variants used by src/components/ui/UILink.vue.
+ * Keep the interaction states aligned, but do not treat this file as the source of truth
+ * for the component implementation under src/components/ui/.
+ */
+@layer components {
+	.link-primary {
+		transition: color 0.1s;
+		color: var(--ui-color-primary-main);
+		text-decoration: none;
+
+		&:hover {
+			color: var(--ui-color-primary-400);
+		}
+
+		&:active {
+			color: var(--ui-color-primary-600);
+		}
+	}
+
+	.link-boring {
+		transition: color 0.1s;
+		color: inherit;
+
+		&:hover {
+			color: var(--ui-color-primary-main);
+		}
+
+		&:active {
+			color: var(--ui-color-primary-600);
+		}
+	}
+}
+
+/*
+ * Tailwind theme bridge for the existing UI token system.
+ *
+ * Source of truth:
+ * - token definitions live in src/components/ui/tokens/
+ * - UIConfigProvider exposes them as global --ui-* CSS variables
+ *
+ * This file maps those --ui-* variables into Tailwind theme tokens so template
+ * utilities can use semantic classes such as text-text and bg-primary-100.
+ */
+@theme {
+	/* Keep only the project's breakpoint names to avoid a parallel default scale. */
+	--breakpoint-*: initial;
+	--color-*: initial;
+	--shadow-*: initial;
+	--font-*: initial;
+	--text-*: initial;
+	--radius-*: initial;
+	--leading-*: initial;
+
+	/* Mirrors src/components/ui/responsive.ts. */
+	--breakpoint-tablet: 48rem;
+	--breakpoint-desktop: 80rem;
+	--breakpoint-desktop-large: 105rem;
+
+	/* Product palette and semantic color tokens bridged from global --ui-color-* vars. */
+	--color-turquoise-100: var(--ui-color-turquoise-100, #f3fcfd);
+	--color-turquoise-200: var(--ui-color-turquoise-200, #e7f9fa);
+	--color-turquoise-300: var(--ui-color-turquoise-300, #b5ebf0);
+	--color-turquoise-400: var(--ui-color-turquoise-400, #3fcdd9);
+	--color-turquoise-500: var(--ui-color-turquoise-500, #0bc0cf);
+	--color-turquoise-600: var(--ui-color-turquoise-600, #0eafbc);
+	--color-turquoise-700: var(--ui-color-turquoise-700, #0b8893);
+	--color-turquoise-main: var(--ui-color-turquoise-main, #0bc0cf);
+
+	--color-yellow-100: var(--ui-color-yellow-100, #fffaf5);
+	--color-yellow-200: var(--ui-color-yellow-200, #fff6eb);
+	--color-yellow-300: var(--ui-color-yellow-300, #fde2c0);
+	--color-yellow-400: var(--ui-color-yellow-400, #fbb45d);
+	--color-yellow-500: var(--ui-color-yellow-500, #faa135);
+	--color-yellow-600: var(--ui-color-yellow-600, #e49330);
+	--color-yellow-700: var(--ui-color-yellow-700, #b27226);
+	--color-yellow-main: var(--ui-color-yellow-main, #faa135);
+
+	--color-purple-100: var(--ui-color-purple-100, #faf8ff);
+	--color-purple-200: var(--ui-color-purple-200, #f6f1ff);
+	--color-purple-300: var(--ui-color-purple-300, #e2d4ff);
+	--color-purple-400: var(--ui-color-purple-400, #b390ff);
+	--color-purple-500: var(--ui-color-purple-500, #a074ff);
+	--color-purple-600: var(--ui-color-purple-600, #926ae8);
+	--color-purple-700: var(--ui-color-purple-700, #7252b5);
+	--color-purple-main: var(--ui-color-purple-main, #a074ff);
+
+	--color-blue-100: var(--ui-color-blue-100, #f4faff);
+	--color-blue-200: var(--ui-color-blue-200, #e9f5ff);
+	--color-blue-300: var(--ui-color-blue-300, #bae1fe);
+	--color-blue-400: var(--ui-color-blue-400, #4db2fd);
+	--color-blue-500: var(--ui-color-blue-500, #219ffc);
+	--color-blue-600: var(--ui-color-blue-600, #1e91e5);
+	--color-blue-700: var(--ui-color-blue-700, #1771b3);
+	--color-blue-main: var(--ui-color-blue-main, #219ffc);
+
+	--color-red-100: var(--ui-color-red-100, #feefef);
+	--color-red-200: var(--ui-color-red-200, #fdc7c7);
+	--color-red-300: var(--ui-color-red-300, #ff97a0);
+	--color-red-400: var(--ui-color-red-400, #f15d64);
+	--color-red-500: var(--ui-color-red-500, #ef4149);
+	--color-red-600: var(--ui-color-red-600, #bc292e);
+	--color-red-main: var(--ui-color-red-main, #ef4149);
+
+	--color-green-100: var(--ui-color-green-100, #e0f8e3);
+	--color-green-200: var(--ui-color-green-200, #cbf1cd);
+	--color-green-300: var(--ui-color-green-300, #b0ea90);
+	--color-green-400: var(--ui-color-green-400, #90e05a);
+	--color-green-500: var(--ui-color-green-500, #63ce29);
+	--color-green-600: var(--ui-color-green-600, #3ca80c);
+	--color-green-main: var(--ui-color-green-main, #63ce29);
+
+	--color-grey-100: var(--ui-color-grey-100, #ffffff);
+	--color-grey-200: var(--ui-color-grey-200, #fbfcfd);
+	--color-grey-300: var(--ui-color-grey-300, #f6f8fa);
+	--color-grey-400: var(--ui-color-grey-400, #eaeff3);
+	--color-grey-500: var(--ui-color-grey-500, #d9dfe5);
+	--color-grey-600: var(--ui-color-grey-600, #cbd2d8);
+	--color-grey-700: var(--ui-color-grey-700, #a7b1bb);
+	--color-grey-800: var(--ui-color-grey-800, #6e7781);
+	--color-grey-900: var(--ui-color-grey-900, #57606a);
+	--color-grey-1000: var(--ui-color-grey-1000, #24292f);
+
+	--color-primary-100: var(--ui-color-primary-100, #f3fcfd);
+	--color-primary-200: var(--ui-color-primary-200, #e7f9fa);
+	--color-primary-300: var(--ui-color-primary-300, #b5ebf0);
+	--color-primary-400: var(--ui-color-primary-400, #3fcdd9);
+	--color-primary-500: var(--ui-color-primary-500, #0bc0cf);
+	--color-primary-600: var(--ui-color-primary-600, #0eafbc);
+	--color-primary-700: var(--ui-color-primary-700, #0b8893);
+	--color-primary-main: var(--ui-color-primary-main, #0bc0cf);
+
+	--color-sprite-100: var(--ui-color-sprite-100, #fffaf5);
+	--color-sprite-200: var(--ui-color-sprite-200, #fff6eb);
+	--color-sprite-300: var(--ui-color-sprite-300, #fde2c0);
+	--color-sprite-400: var(--ui-color-sprite-400, #fbb45d);
+	--color-sprite-500: var(--ui-color-sprite-500, #faa135);
+	--color-sprite-600: var(--ui-color-sprite-600, #e49330);
+	--color-sprite-700: var(--ui-color-sprite-700, #b27226);
+	--color-sprite-main: var(--ui-color-sprite-main, #faa135);
+	--color-sprite-bg-selected: var(--ui-color-sprite-bg-selected, #fff6eb);
+
+	--color-sound-100: var(--ui-color-sound-100, #f4faff);
+	--color-sound-200: var(--ui-color-sound-200, #e9f5ff);
+	--color-sound-300: var(--ui-color-sound-300, #bae1fe);
+	--color-sound-400: var(--ui-color-sound-400, #4db2fd);
+	--color-sound-500: var(--ui-color-sound-500, #219ffc);
+	--color-sound-600: var(--ui-color-sound-600, #1e91e5);
+	--color-sound-700: var(--ui-color-sound-700, #1771b3);
+	--color-sound-main: var(--ui-color-sound-main, #219ffc);
+	--color-sound-bg-selected: var(--ui-color-sound-bg-selected, #e9f5ff);
+
+	--color-stage-100: var(--ui-color-stage-100, #f4faff);
+	--color-stage-200: var(--ui-color-stage-200, #e9f5ff);
+	--color-stage-300: var(--ui-color-stage-300, #bae1fe);
+	--color-stage-400: var(--ui-color-stage-400, #4db2fd);
+	--color-stage-500: var(--ui-color-stage-500, #219ffc);
+	--color-stage-600: var(--ui-color-stage-600, #1e91e5);
+	--color-stage-700: var(--ui-color-stage-700, #1771b3);
+	--color-stage-main: var(--ui-color-stage-main, #219ffc);
+	--color-stage-bg-selected: var(--ui-color-stage-bg-selected, #e9f5ff);
+
+	--color-danger-100: var(--ui-color-danger-100, #feefef);
+	--color-danger-200: var(--ui-color-danger-200, #fdc7c7);
+	--color-danger-300: var(--ui-color-danger-300, #ff97a0);
+	--color-danger-400: var(--ui-color-danger-400, #f15d64);
+	--color-danger-500: var(--ui-color-danger-500, #ef4149);
+	--color-danger-600: var(--ui-color-danger-600, #bc292e);
+	--color-danger-main: var(--ui-color-danger-main, #ef4149);
+
+	--color-success-100: var(--ui-color-success-100, #e0f8e3);
+	--color-success-200: var(--ui-color-success-200, #cbf1cd);
+	--color-success-300: var(--ui-color-success-300, #b0ea90);
+	--color-success-400: var(--ui-color-success-400, #90e05a);
+	--color-success-500: var(--ui-color-success-500, #63ce29);
+	--color-success-600: var(--ui-color-success-600, #3ca80c);
+	--color-success-main: var(--ui-color-success-main, #63ce29);
+
+	--color-disabled-bg: var(--ui-color-disabled-bg, #f6f8fa);
+	--color-disabled-text: var(--ui-color-disabled-text, #cbd2d8);
+	--color-title: var(--ui-color-title, #24292f);
+	--color-text: var(--ui-color-text, #57606a);
+	--color-hint-1: var(--ui-color-hint-1, #6e7781);
+	--color-hint-2: var(--ui-color-hint-2, #a7b1bb);
+	--color-dividing-line-1: var(--ui-color-dividing-line-1, #d9dfe5);
+	--color-dividing-line-2: var(--ui-color-dividing-line-2, #eaeff3);
+	--color-border: var(--ui-color-border, #cbd2d8);
+
+	/* Typography tokens bridged from the UI token layer. */
+	--font-sans: var(
+		--ui-font-family-main,
+		AlibabaHealthB,
+		-apple-system,
+		BlinkMacSystemFont,
+		'Segoe UI',
+		Roboto,
+		'Helvetica Neue',
+		Arial,
+		'Noto Sans',
+		sans-serif,
+		'Apple Color Emoji',
+		'Segoe UI Emoji',
+		'Segoe UI Symbol',
+		'Noto Color Emoji'
+	);
+	--font-mono: var(--ui-font-family-code, Menlo, Monaco, 'Courier New', monospace);
+	--font-main: var(--font-sans);
+	--font-code: var(--font-mono);
+
+	/* Radius and shadow tokens bridged from the UI token layer. */
+	--radius-none: 0px;
+	--radius-full: 9999px;
+	--radius-1: var(--ui-border-radius-1, 8px);
+	--radius-2: var(--ui-border-radius-2, 12px);
+	--radius-3: var(--ui-border-radius-3, 20px);
+
+	--shadow-none: 0 0 #0000;
+	--shadow-small: var(--ui-box-shadow-small, 0px 2px 8px 0px rgba(51, 51, 51, 0.08));
+	--shadow-big: var(--ui-box-shadow-big, 0px 4px 24px 0px rgba(36, 41, 47, 0.08));
+	--shadow-diffusion: var(--ui-box-shadow-diffusion, 0px 4px 12px 0px #d0f2f8);
+
+	/* Shared spacing and text-size helpers bridged for utility-class authoring. */
+	--leading-1: var(--ui-line-height-1, 26px);
+	--leading-2: var(--ui-line-height-2, 32px);
+	--leading-3: var(--ui-line-height-3, 40px);
+
+	--spacing-middle: var(--ui-gap-middle, 16px);
+	--spacing-large: var(--ui-gap-large, 24px);
+
+	--text-body: var(--ui-font-size-text, 14px);
+	--text-body--line-height: 1.57143;
+	--text-15: 15px;
+	--text-15--line-height: 1.5;
+	--text-20: 20px;
+	--text-20--line-height: 1.5;
+}
diff --git a/spx-gui/src/components/common/RouterUILink.vue b/spx-gui/src/components/common/RouterUILink.vue
index d8d653a1b6..d1800f0256 100644
--- a/spx-gui/src/components/common/RouterUILink.vue
+++ b/spx-gui/src/components/common/RouterUILink.vue
@@ -1,6 +1,7 @@
 <!-- RouterLink + UILink -->
 
 <script setup lang="ts">
+import { computed } from 'vue'
 import { RouterLink, type RouterLinkProps } from 'vue-router'
 
 const props = withDefaults(
@@ -13,23 +14,12 @@ const props = withDefaults(
     type: 'primary'
   }
 )
+
+const linkClass = computed(() => (props.type === 'primary' ? 'link-primary' : 'link-boring'))
 </script>
 
 <template>
-  <RouterLink v-bind="props" class="router-ui-link" :class="`type-${type}`">
+  <RouterLink v-bind="props" :class="linkClass">
     <slot />
   </RouterLink>
 </template>
-
-<style lang="scss" scoped>
-@import '@/components/ui/link.scss';
-
-.router-ui-link {
-  &.type-primary {
-    @include link(primary);
-  }
-  &.type-boring {
-    @include link(boring);
-  }
-}
-</style>
diff --git a/spx-gui/src/components/community/CenteredWrapper.vue b/spx-gui/src/components/community/CenteredWrapper.vue
index 1e3418da71..fb48854b96 100644
--- a/spx-gui/src/components/community/CenteredWrapper.vue
+++ b/spx-gui/src/components/community/CenteredWrapper.vue
@@ -1,14 +1,10 @@
-<template>
-  <section class="centered" :class="`size-${size}`">
-    <slot></slot>
-  </section>
-</template>
-
 <script setup lang="ts">
+import { computed } from 'vue'
+
 // different size of centered-content for different pages
 type Size = 'medium' | 'large'
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     size?: Size
   }>(),
@@ -16,28 +12,12 @@ withDefaults(
     size: 'medium'
   }
 )
-</script>
-
-<style scoped lang="scss">
-@import '@/components/ui/responsive';
 
-.centered {
-  position: relative;
-  margin-left: auto;
-  margin-right: auto;
-
-  &.size-medium {
-    width: 988px;
-    @include responsive(desktop-large) {
-      width: 1240px;
-    }
-  }
+const widthClass = computed(() => (props.size === 'large' ? 'w-310 desktop-large:w-373' : 'w-247 desktop-large:w-310'))
+</script>
 
-  &.size-large {
-    width: 1240px;
-    @include responsive(desktop-large) {
-      width: 1492px;
-    }
-  }
-}
-</style>
+<template>
+  <section class="relative mx-auto self-center" :class="widthClass">
+    <slot></slot>
+  </section>
+</template>
diff --git a/spx-gui/src/components/community/CommunityCard.vue b/spx-gui/src/components/community/CommunityCard.vue
index f6b8b9ffcd..254043f02e 100644
--- a/spx-gui/src/components/community/CommunityCard.vue
+++ b/spx-gui/src/components/community/CommunityCard.vue
@@ -10,8 +10,9 @@
 import { UICard } from '@/components/ui'
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 .community-card {
+  /* TODO: review this shadow value before promoting it into a shared token. */
   box-shadow: 0px 2px 4px 0px rgba(36, 41, 47, 0.05);
 }
 </style>
diff --git a/spx-gui/src/components/community/CommunityHeader.vue b/spx-gui/src/components/community/CommunityHeader.vue
index ad56bed8de..3eadb3a0d2 100644
--- a/spx-gui/src/components/community/CommunityHeader.vue
+++ b/spx-gui/src/components/community/CommunityHeader.vue
@@ -1,12 +1,12 @@
 <!-- Simple header component for pages like search & explore -->
 
 <template>
-  <section class="header">
-    <CenteredWrapper class="header-content">
-      <h1 class="title">
+  <section class="flex-none bg-grey-100">
+    <CenteredWrapper class="flex h-16 items-center justify-between gap-5">
+      <h1 class="min-w-0 flex-1 truncate text-body leading-1 text-title">
         <slot></slot>
       </h1>
-      <label class="options">
+      <label class="shrink-0">
         <slot name="options"></slot>
       </label>
     </CenteredWrapper>
@@ -16,32 +16,3 @@
 <script setup lang="ts">
 import CenteredWrapper from '@/components/community/CenteredWrapper.vue'
 </script>
-
-<style lang="scss" scoped>
-@import '@/utils/utils';
-
-.header {
-  flex: 0 0 auto;
-  background-color: var(--ui-color-grey-100);
-}
-
-.header-content {
-  height: 64px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 20px;
-
-  .title {
-    flex: 1 1 0;
-    @include text-ellipsis;
-    line-height: 26px;
-    font-size: 16px;
-    color: var(--ui-color-title);
-  }
-
-  .options {
-    flex: 0 0 auto;
-  }
-}
-</style>
diff --git a/spx-gui/src/components/community/ProjectsSection.vue b/spx-gui/src/components/community/ProjectsSection.vue
index f1cd948eb4..3630436446 100644
--- a/spx-gui/src/components/community/ProjectsSection.vue
+++ b/spx-gui/src/components/community/ProjectsSection.vue
@@ -1,27 +1,30 @@
 <!-- Project list as a section -->
 
 <template>
-  <section :class="`context-${context}`" :style="{ '--project-num-in-row': numInRow }">
-    <header class="header">
-      <h2 class="title">
+  <section :style="{ '--project-num-in-row': numInRow }">
+    <header class="flex items-center justify-between" :class="isUserContext ? 'h-15 pt-5 pb-2' : 'h-13'">
+      <h2 class="text-title" :class="isUserContext ? 'text-body leading-1' : 'text-20 leading-7'">
         <slot name="title"></slot>
       </h2>
       <RouterUILink
         v-if="linkTo != null"
         v-radar="{ name: 'Link to more', desc: 'Link to more similar projects' }"
-        class="link"
+        class="flex items-center text-15"
         :to="linkTo"
       >
         <slot name="link"></slot>
-        <UIIcon class="link-icon" type="arrowRightSmall" />
+        <UIIcon class="ml-2 h-5 w-5" type="arrowRightSmall" />
       </RouterUILink>
     </header>
-    <div class="projects-wrapper">
+    <div class="projects-wrapper relative mt-2" :class="isUserContext ? 'mb-4' : 'mb-8'">
       <ListResultWrapper content-type="project" :query-ret="queryRet" :height="254">
         <template v-if="!!slots.empty" #empty="emptyProps">
           <slot name="empty" v-bind="emptyProps"></slot>
         </template>
-        <ul class="projects">
+        <ul
+          class="grid grid-cols-[repeat(var(--project-num-in-row),minmax(0,1fr))]"
+          :class="isUserContext ? 'gap-4' : 'gap-5'"
+        >
           <slot></slot>
         </ul>
       </ListResultWrapper>
@@ -30,7 +33,7 @@
 </template>
 
 <script setup lang="ts">
-import { useSlots } from 'vue'
+import { computed, useSlots } from 'vue'
 import type { QueryRet } from '@/utils/query'
 import { UIIcon } from '@/components/ui'
 import ListResultWrapper from '../common/ListResultWrapper.vue'
@@ -44,7 +47,7 @@ import RouterUILink from '../common/RouterUILink.vue'
  */
 type Context = 'home' | 'user' | 'project'
 
-defineProps<{
+const props = defineProps<{
   linkTo?: string | null
   queryRet: QueryRet<unknown[] | null>
   context: Context
@@ -52,64 +55,12 @@ defineProps<{
 }>()
 
 const slots = useSlots()
+const isUserContext = computed(() => props.context === 'user')
 </script>
 
-<style lang="scss" scoped>
-.header {
-  height: 52px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-
-  .title {
-    line-height: 28px;
-    font-size: 20px;
-    color: var(--ui-color-title);
-  }
-
-  .link {
-    display: flex;
-    align-items: center;
-    font-size: 15px;
-  }
-
-  .link-icon {
-    margin-left: 8px;
-    width: 20px;
-    height: 20px;
-  }
-}
-
-.projects-wrapper {
-  margin: 8px 0 32px;
-  position: relative;
-
-  &:not(:has(.projects)) {
-    background-color: var(--ui-color-grey-100);
-    border-radius: var(--ui-border-radius-2);
-  }
-}
-
-.projects {
-  display: grid;
-  grid-template-columns: repeat(var(--project-num-in-row), 1fr);
-  gap: 20px;
-}
-
-.context-user {
-  .header {
-    height: 60px;
-    padding: 20px 0 8px;
-  }
-  .title {
-    font-size: 16px;
-    line-height: 26px;
-  }
-  .projects-wrapper {
-    margin: 8px 0 16px;
-  }
-  .projects {
-    gap: 16px;
-  }
+<style scoped>
+.projects-wrapper:not(:has(.projects)) {
+  background-color: var(--ui-color-grey-100);
+  border-radius: var(--ui-border-radius-2);
 }
 </style>
diff --git a/spx-gui/src/components/community/user/sidebar/UserSidebar.vue b/spx-gui/src/components/community/user/sidebar/UserSidebar.vue
index 79955c9776..0fa56060a6 100644
--- a/spx-gui/src/components/community/user/sidebar/UserSidebar.vue
+++ b/spx-gui/src/components/community/user/sidebar/UserSidebar.vue
@@ -9,7 +9,10 @@ defineProps<{
 </script>
 
 <template>
-  <CommunityCard v-radar="{ name: 'User sidebar', desc: 'Sidebar navigation for user pages' }" class="user-sidebar">
+  <CommunityCard
+    v-radar="{ name: 'User sidebar', desc: 'Sidebar navigation for user pages' }"
+    class="flex w-53 flex-col gap-1 p-2 desktop-large:w-54"
+  >
     <!-- TODO: check text here -->
     <UserSidebarItem
       v-radar="{ name: 'Overview link', desc: 'Click to navigate to user overview' }"
@@ -94,19 +97,3 @@ defineProps<{
     </UserSidebarItem>
   </CommunityCard>
 </template>
-
-<style lang="scss" scoped>
-@import '@/components/ui/responsive';
-
-.user-sidebar {
-  padding: 8px;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-
-  width: 212px;
-  @include responsive(desktop-large) {
-    width: 216px;
-  }
-}
-</style>
diff --git a/spx-gui/src/components/community/user/sidebar/UserSidebarItem.vue b/spx-gui/src/components/community/user/sidebar/UserSidebarItem.vue
index e0392026af..3239fc7efa 100644
--- a/spx-gui/src/components/community/user/sidebar/UserSidebarItem.vue
+++ b/spx-gui/src/components/community/user/sidebar/UserSidebarItem.vue
@@ -7,71 +7,36 @@ defineProps<{
 </script>
 
 <template>
-  <RouterLink class="user-sidebar-item" exact-active-class="active" :to="to">
-    <i class="icon-bg" />
-    <span class="content">
+  <RouterLink
+    class="user-sidebar-item relative flex items-center rounded-2 p-3 no-underline transition-all duration-100"
+    exact-active-class="active"
+    :to="to"
+  >
+    <i class="icon-bg absolute left-3 top-3.5 h-4.25 w-4.25 rounded-full transition-all duration-100" />
+    <span
+      class="relative flex-1 pl-6.5 text-[13px] leading-5 [&_svg]:absolute [&_svg]:left-0 [&_svg]:top-1/2 [&_svg]:z-1 [&_svg]:-translate-y-1/2"
+    >
       <slot></slot>
     </span>
-    <UIIcon class="arrow" type="arrowAlt" />
+    <UIIcon class="h-3 w-3 flex-none rotate-90 text-grey-800" type="arrowAlt" />
   </RouterLink>
 </template>
 
-<style lang="scss" scoped>
-@import '@/utils/utils';
-
+<style scoped>
 .user-sidebar-item {
-  padding: 12px;
-  position: relative;
-  display: flex;
-  align-items: center;
-
-  border-radius: 12px;
   color: var(--ui-color-text);
-  text-decoration: none;
-  transition: 0.1s;
-
-  .icon-bg {
-    position: absolute;
-    left: 12px;
-    top: 14px;
-    width: 17px;
-    height: 17px;
-    border-radius: 50%;
-    background: var(--ui-color-grey-500);
-    transition: 0.1s;
-  }
-
-  &.active {
-    color: var(--ui-color-primary-main);
-    background: var(--ui-color-primary-100);
-
-    .icon-bg {
-      background: var(--ui-color-primary-300);
-    }
-  }
 }
 
-.content {
-  position: relative;
-  padding-left: 26px;
-  flex: 1 1 0;
-  font-size: 13px;
-  line-height: 20px;
+.icon-bg {
+  background: var(--ui-color-grey-500);
+}
 
-  :deep(svg) {
-    position: absolute;
-    left: 0;
-    top: 50%;
-    transform: translateY(-50%);
-    z-index: 1;
-  }
+.user-sidebar-item.active {
+  color: var(--ui-color-primary-main);
+  background: var(--ui-color-primary-100);
 }
 
-.arrow {
-  flex: 0 0 auto;
-  width: 12px;
-  height: 12px;
-  transform: rotate(90deg);
-  color: var(--ui-color-grey-800);
+.user-sidebar-item.active .icon-bg {
+  background: var(--ui-color-primary-300);
 }
 </style>
diff --git a/spx-gui/src/components/editor/code-editor/spx-code-editor/CodeLink.vue b/spx-gui/src/components/editor/code-editor/spx-code-editor/CodeLink.vue
index fd19ba4630..0cfcc0dd4f 100644
--- a/spx-gui/src/components/editor/code-editor/spx-code-editor/CodeLink.vue
+++ b/spx-gui/src/components/editor/code-editor/spx-code-editor/CodeLink.vue
@@ -73,7 +73,7 @@ const handleClick = useMessageHandle(
 </script>
 
 <template>
-  <a class="code-link" href="javascript:;" @click.prevent="handleClick">
+  <a class="link-boring" href="javascript:;" @click.prevent="handleClick">
     <template v-if="!!slots.default">
       <slot></slot>
     </template>
@@ -82,11 +82,3 @@ const handleClick = useMessageHandle(
     </template>
   </a>
 </template>
-
-<style lang="scss" scoped>
-@import '@/components/ui/link.scss';
-
-.code-link {
-  @include link(boring);
-}
-</style>
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/completion/CompletionItem.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/completion/CompletionItem.vue
index 419bb5bb03..9d5c4fbeab 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/completion/CompletionItem.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/completion/CompletionItem.vue
@@ -40,45 +40,14 @@ watchEffect(() => {
 </script>
 
 <template>
-  <li ref="wrapperRef" class="completion-item" :class="{ active }" :title="item.label">
-    <code class="code"
-      ><span v-for="(part, i) in parts" :key="i" :class="{ matched: part.isMatched }">{{ part.content }}</span></code
+  <li
+    ref="wrapperRef"
+    class="flex min-w-24 max-w-42 cursor-pointer items-center rounded-1 p-1.75 text-xs text-grey-1000 hover:bg-grey-300"
+    :class="active ? 'bg-grey-400' : ''"
+    :title="item.label"
+  >
+    <code class="min-w-0 flex-1 truncate font-code"
+      ><span v-for="(part, i) in parts" :key="i" :class="part.isMatched ? 'text-primary-main' : ''">{{ part.content }}</span></code
     >
   </li>
 </template>
-
-<style lang="scss" scoped>
-@import '@/utils/utils';
-
-.completion-item {
-  min-width: 8em;
-  max-width: 14em;
-  display: flex;
-  align-items: center;
-  padding: 7px;
-  border-radius: var(--ui-border-radius-1);
-  cursor: pointer;
-  font-size: 12px;
-  color: var(--ui-color-grey-1000);
-  &:hover {
-    background: var(--ui-color-grey-300);
-  }
-  &.active {
-    background: var(--ui-color-grey-400);
-  }
-}
-
-.icon {
-  margin-right: 8px;
-}
-
-.code {
-  flex: 1 1 0;
-  font-family: var(--ui-font-family-code);
-  @include text-ellipsis;
-}
-
-.matched {
-  color: var(--ui-color-primary-main);
-}
-</style>
diff --git a/spx-gui/src/components/editor/map-editor/MapEditor.vue b/spx-gui/src/components/editor/map-editor/MapEditor.vue
index 6626ccc93f..98f8fedfc4 100644
--- a/spx-gui/src/components/editor/map-editor/MapEditor.vue
+++ b/spx-gui/src/components/editor/map-editor/MapEditor.vue
@@ -26,14 +26,14 @@ function handleSpriteSelect(sprite: Sprite | null) {
 </script>
 
 <template>
-  <div class="body">
-    <div class="main">
+  <div class="flex flex-1 flex-row gap-middle">
+    <div class="flex w-0 min-w-0 flex-1 items-center justify-center">
       <MapViewer :project="project" :selected-sprite="selectedSprite" @update:selected-sprite="handleSpriteSelect" />
     </div>
-    <div class="sider">
+    <div class="flex basis-100 grow-0 shrink-0 flex-col gap-middle desktop-large:basis-124">
       <UICard>
         <UICardHeader>
-          <div class="collapse-header">
+          <div class="flex w-full items-center justify-between">
             {{
               $t({
                 en: 'Global Config',
@@ -43,8 +43,8 @@ function handleSpriteSelect(sprite: Sprite | null) {
             <UITooltip>
               <template #trigger>
                 <UIIcon
-                  class="collapse-icon"
-                  :class="{ collapsed }"
+                  class="ml-2 cursor-pointer transition-transform duration-300"
+                  :class="collapsed ? '-rotate-180' : ''"
                   type="doubleArrowDown"
                   @click="collapsed = !collapsed"
                 />
@@ -53,10 +53,10 @@ function handleSpriteSelect(sprite: Sprite | null) {
             </UITooltip>
           </div>
         </UICardHeader>
-        <MapBasicConfig v-if="!collapsed" class="map-config" :project="project" />
+        <MapBasicConfig v-if="!collapsed" class="p-4" :project="project" />
       </UICard>
       <SpritesPanel
-        class="sprite-list"
+        class="min-h-0 flex-1 basis-0"
         :project="project"
         :selected-sprite="selectedSprite"
         @update:selected-sprite="handleSpriteSelect"
@@ -64,56 +64,3 @@ function handleSpriteSelect(sprite: Sprite | null) {
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-@import '@/components/ui/responsive';
-
-.body {
-  flex: 1 1 0;
-  display: flex;
-  flex-direction: row;
-  gap: var(--ui-gap-middle);
-}
-.main {
-  flex: 1;
-  width: 0;
-  min-width: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.sider {
-  flex: 0 0 400px;
-  display: flex;
-  flex-direction: column;
-  gap: var(--ui-gap-middle);
-
-  @include responsive(desktop-large) {
-    flex-basis: 496px;
-  }
-
-  .collapse-header {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-
-  .collapse-icon {
-    transition: transform 0.3s;
-    margin-left: 8px;
-    cursor: pointer;
-
-    &.collapsed {
-      transform: rotate(-180deg);
-    }
-  }
-
-  .map-config {
-    padding: 16px;
-  }
-}
-.sprite-list {
-  flex: 1 1 0;
-}
-</style>
diff --git a/spx-gui/src/components/navbar/NavbarWrapper.vue b/spx-gui/src/components/navbar/NavbarWrapper.vue
index 5da57b48bb..8b53de72e6 100644
--- a/spx-gui/src/components/navbar/NavbarWrapper.vue
+++ b/spx-gui/src/components/navbar/NavbarWrapper.vue
@@ -1,14 +1,21 @@
 <template>
-  <nav v-radar="{ name: 'Navbar', desc: 'Top navigation bar' }" class="top-nav">
-    <div class="content" :class="{ centered }">
-      <div class="left">
+  <nav
+    v-radar="{ name: 'Navbar', desc: 'Top navigation bar' }"
+    class="flex w-full justify-center bg-primary-main bg-center bg-repeat text-grey-100 shadow-diffusion"
+    :style="{ backgroundImage: `url(${bgUrl})` }"
+  >
+    <div
+      class="flex h-12.5 w-full items-stretch justify-between gap-3"
+      :class="centered ? 'w-305 desktop-large:w-370' : 'w-full'"
+    >
+      <div class="flex basis-[30%]">
         <NavbarLogo />
         <slot name="left"></slot>
       </div>
-      <div class="center">
+      <div class="flex basis-[40%] items-center justify-center overflow-hidden">
         <slot name="center"></slot>
       </div>
-      <div class="right">
+      <div class="flex basis-[30%] justify-end">
         <slot name="right"></slot>
         <NavbarProfile />
       </div>
@@ -17,6 +24,7 @@
 </template>
 
 <script setup lang="ts">
+import bgUrl from './bg.svg'
 import NavbarLogo from './NavbarLogo.vue'
 import NavbarProfile from './NavbarProfile.vue'
 
@@ -34,53 +42,3 @@ withDefaults(
   }
 )
 </script>
-
-<style lang="scss" scoped>
-@import '@/components/ui/responsive';
-
-.top-nav {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  color: var(--ui-color-grey-100);
-  background-color: var(--ui-color-primary-main);
-  background-position: center;
-  background-repeat: repeat;
-  background-image: url(./bg.svg);
-  box-shadow: var(--ui-box-shadow-diffusion);
-}
-
-.content {
-  width: 100%;
-  display: flex;
-  align-items: stretch;
-  justify-content: space-between;
-  gap: 12px;
-  height: 50px;
-
-  &.centered {
-    width: 1220px;
-    @include responsive(desktop-large) {
-      width: 1480px;
-    }
-  }
-}
-
-.left,
-.right {
-  flex-basis: 30%;
-  display: flex;
-}
-
-.center {
-  flex-basis: 40%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-}
-
-.right {
-  justify-content: flex-end;
-}
-</style>
diff --git a/spx-gui/src/components/project/ProjectItem.vue b/spx-gui/src/components/project/ProjectItem.vue
index a65d0ca5ff..53037bde32 100644
--- a/spx-gui/src/components/project/ProjectItem.vue
+++ b/spx-gui/src/components/project/ProjectItem.vue
@@ -4,11 +4,14 @@
       name: `Project item \u0022${project.owner}/${project.name}\u0022`,
       desc: `Click to ${props.context === 'edit' ? 'edit' : 'view'} the project${operatable ? ', hover for more operations' : ''}`
     }"
-    class="project-item"
+    class="group w-58 flex-none overflow-hidden rounded-2 border border-grey-400 bg-grey-100 transition-all duration-100 hover:shadow-[0px_4px_12px_0px_rgba(36,41,47,0.08)]"
   >
-    <RouterLink class="link" :to="to" @click="emit('selected')">
-      <div class="thumbnail-wrapper">
-        <UIImg class="thumbnail" :src="thumbnailUrl" size="cover" />
+    <RouterLink class="flex flex-col no-underline" :to="to" @click="emit('selected')">
+      <div
+        class="relative h-43 w-full bg-center bg-contain"
+        :style="{ backgroundImage: `url(${stageBgUrl})` }"
+      >
+        <UIImg class="h-full w-full" :src="thumbnailUrl" size="cover" />
         <UIDropdown v-if="operatable" trigger="click" placement="bottom-end">
           <template #trigger>
             <div
@@ -16,10 +19,10 @@
                 name: 'Project item operations',
                 desc: 'More operations (edit, remove) for project item, click to open the menu'
               }"
-              class="options"
+              class="invisible absolute top-2 right-2 flex h-8 w-8 items-center justify-center rounded-full bg-grey-100 text-grey-800 opacity-0 transition-all duration-100 group-hover:visible group-hover:opacity-100 hover:bg-primary-main hover:text-grey-100"
               @click.stop.prevent
             >
-              <UIIcon class="icon" type="more" />
+              <UIIcon class="h-5.25 w-5.25" type="more" />
             </div>
           </template>
           <UIMenu>
@@ -31,9 +34,9 @@
             </UIMenuItem>
           </UIMenu>
         </UIDropdown>
-        <div v-if="context === 'public'" class="owner-avatar-wrapper">
+        <div v-if="context === 'public'" class="absolute -bottom-2.25 left-0 h-3.25 w-full bg-grey-100">
           <svg
-            class="avatar-bg"
+            class="absolute bottom-0 left-0"
             xmlns="http://www.w3.org/2000/svg"
             width="67"
             height="31"
@@ -47,17 +50,23 @@
           </svg>
           <UserAvatar
             v-radar="{ name: 'Project owner avatar', desc: 'Click to view profile of project owner' }"
-            class="owner-avatar"
+            class="absolute -bottom-0.5 left-3.5"
             size="small"
             :user="project.owner"
           />
         </div>
       </div>
-      <div class="info">
-        <div class="header">
-          <h5 class="display-name" :title="project.displayName">{{ project.displayName }}</h5>
+      <div class="p-middle">
+        <div class="flex items-center gap-1">
+          <h5 class="min-w-0 shrink truncate text-15 leading-6 text-title" :title="project.displayName">
+            {{ project.displayName }}
+          </h5>
           <template v-if="context !== 'public' && isOwner">
-            <i v-if="project.visibility === Visibility.Public" class="icon" :title="$t({ en: 'Public', zh: '公开' })">
+            <i
+              v-if="project.visibility === Visibility.Public"
+              class="h-4 w-4 flex-none"
+              :title="$t({ en: 'Public', zh: '公开' })"
+            >
               <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path
                   fill-rule="evenodd"
@@ -80,7 +89,7 @@
                 </defs>
               </svg>
             </i>
-            <i v-else class="icon" :title="$t({ en: 'Private', zh: '私有' })">
+            <i v-else class="h-4 w-4 flex-none" :title="$t({ en: 'Private', zh: '私有' })">
               <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path
                   fill-rule="evenodd"
@@ -96,12 +105,12 @@
             </i>
           </template>
         </div>
-        <p class="others">
-          <span class="part" :class="{ liking }" :title="$t(likesTitle)">
-            <UIIcon class="icon" type="heart" />
+        <p class="mt-1 flex h-5 gap-3 text-[13px] leading-5 text-grey-700">
+          <span class="flex flex-none items-center gap-1" :class="{ 'text-red-main': liking }" :title="$t(likesTitle)">
+            <UIIcon class="h-3.5 w-3.5" type="heart" />
             {{ $t(humanizeCount(project.likeCount)) }}
           </span>
-          <span class="part time" :title="$t(timeTitle)">
+          <span class="min-w-0 flex-1 truncate" :title="$t(timeTitle)">
             {{ $t(humanizeTime(project.updatedAt)) }}
           </span>
         </p>
@@ -123,6 +132,7 @@ import {
 } from '@/utils/utils'
 import { getProjectEditorRoute, getProjectPageRoute } from '@/router'
 import { Visibility, type ProjectData } from '@/apis/project'
+import stageBgUrl from '@/assets/images/stage-bg.svg'
 import { createFileWithUniversalUrl, getPublishedContent } from '@/models/common/cloud'
 import { useSignedInUser } from '@/stores/user'
 import { useIsLikingProject } from '@/stores/liking'
@@ -207,149 +217,3 @@ const handleRemove = useMessageHandle(
   { en: 'Failed to remove project', zh: '删除项目失败' }
 ).fn
 </script>
-
-<style lang="scss" scoped>
-@import '@/utils/utils';
-
-.project-item {
-  width: 232px;
-  flex: 0 0 auto;
-  overflow: hidden;
-  border-radius: var(--ui-border-radius-2);
-  border: 1px solid var(--ui-color-grey-400);
-  background-color: var(--ui-color-grey-100);
-  transition: 0.1s;
-}
-
-.link {
-  display: flex;
-  flex-direction: column;
-  text-decoration: none;
-}
-
-.thumbnail-wrapper {
-  position: relative;
-  width: 100%;
-  height: 172px;
-  background-position: center;
-  background-size: contain;
-  background-image: url(@/assets/images/stage-bg.svg);
-
-  .thumbnail {
-    width: 100%;
-    height: 100%;
-  }
-
-  .options {
-    opacity: 0;
-    visibility: hidden;
-    position: absolute;
-    top: 8px;
-    right: 8px;
-    width: 32px;
-    height: 32px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border-radius: 50%;
-    color: var(--ui-color-grey-800);
-    background-color: var(--ui-color-grey-100);
-    cursor: pointer;
-    transition: 0.1s;
-
-    &:hover {
-      color: var(--ui-color-grey-100);
-      background-color: var(--ui-color-primary-main);
-    }
-
-    .icon {
-      width: 21px;
-      height: 21px;
-    }
-  }
-
-  .owner-avatar-wrapper {
-    position: absolute;
-    bottom: -9px;
-    left: 0;
-    width: 100%;
-    height: 13px;
-    background-color: var(--ui-color-grey-100);
-
-    .avatar-bg {
-      position: absolute;
-      bottom: 0;
-      left: 0;
-    }
-
-    .owner-avatar {
-      position: absolute;
-      bottom: -2px;
-      left: 14px;
-    }
-  }
-}
-
-.project-item:hover {
-  box-shadow: 0px 4px 12px 0px rgba(36, 41, 47, 0.08);
-  .options {
-    visibility: visible;
-    opacity: 1;
-  }
-}
-
-.info {
-  padding: var(--ui-gap-middle);
-
-  .header {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-
-    .display-name {
-      flex: 0 1 auto;
-      font-size: 15px;
-      line-height: 24px;
-      color: var(--ui-color-title);
-      @include text-ellipsis;
-    }
-
-    .icon {
-      width: 16px;
-      height: 16px;
-    }
-  }
-
-  .others {
-    margin-top: 4px;
-    display: flex;
-    height: 20px;
-    gap: 12px;
-    font-size: 13px;
-    line-height: 20px;
-    color: var(--ui-color-grey-700);
-
-    .part {
-      flex: 0 0 auto;
-      display: flex;
-      align-items: center;
-      gap: 4px;
-
-      .icon {
-        width: 14px;
-        height: 14px;
-      }
-
-      &.liking {
-        color: var(--ui-color-red-main);
-      }
-
-      &.time {
-        flex: 1 1 auto;
-        display: block; // text-ellipsis does not work on `display: flex` elements
-        @include text-ellipsis;
-      }
-    }
-  }
-}
-</style>
diff --git a/spx-gui/src/components/tutorials/CourseSeriesItem.vue b/spx-gui/src/components/tutorials/CourseSeriesItem.vue
index e3bcd3fbb0..28d5d02aa3 100644
--- a/spx-gui/src/components/tutorials/CourseSeriesItem.vue
+++ b/spx-gui/src/components/tutorials/CourseSeriesItem.vue
@@ -3,8 +3,9 @@ export const courseSeriesItemHeight = 214
 </script>
 
 <script lang="ts" setup>
-import { UIImg } from '@/components/ui'
 import type { CourseSeries } from '@/apis/course-series'
+import stageBgUrl from '@/assets/images/stage-bg.svg'
+import { UIImg } from '@/components/ui'
 import { useAsyncComputed } from '@/utils/utils'
 import { createFileWithUniversalUrl } from '@/models/common/cloud'
 
@@ -26,50 +27,17 @@ const thumbnailUrl = useAsyncComputed(async (onCleanup) => {
       name: `Course series item \u0022${props.courseSeries.title}\u0022`,
       desc: 'Click to view the course series'
     }"
-    class="course-series-item"
-    :style="{ height: `${courseSeriesItemHeight}px` }"
+    class="relative h-53.5 w-58 overflow-hidden rounded-3 transition-all duration-200 hover:cursor-pointer hover:-translate-y-0.5 hover:shadow-[0_4px_12px_rgba(0,0,0,0.3)]"
+    :style="{ backgroundImage: `url(${stageBgUrl})` }"
   >
     <RouterLink :to="`/course-series/${props.courseSeries.id}`">
-      <UIImg class="thumbnail" :src="thumbnailUrl" size="cover" />
-      <div class="title">{{ courseSeries.title }}</div>
+      <UIImg class="h-full w-full" :src="thumbnailUrl" size="cover" />
+      <div
+        class="absolute bottom-0 h-10 w-full overflow-hidden whitespace-nowrap px-4 text-15 leading-10 text-grey-100 text-ellipsis"
+        :style="{ background: 'rgb(from var(--ui-color-grey-1000) r g b / 0.2)' }"
+      >
+        {{ courseSeries.title }}
+      </div>
     </RouterLink>
   </li>
 </template>
-
-<style lang="scss" scoped>
-.course-series-item {
-  position: relative;
-  width: 232px;
-  border-radius: var(--ui-border-radius-3);
-  transition: all 0.2s;
-  overflow: hidden;
-  // TODO: Temporary background, replace with the latest assets
-  background-image: url(@/assets/images/stage-bg.svg);
-
-  &:hover {
-    cursor: pointer;
-    transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-  }
-
-  .thumbnail {
-    width: 100%;
-    height: 100%;
-  }
-
-  .title {
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    height: 40px;
-    font-size: 15px;
-    line-height: 40px;
-    padding: 0 16px;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-    color: var(--ui-color-grey-100);
-    background: rgb(from var(--ui-color-grey-1000) r g b / 0.2);
-  }
-}
-</style>
diff --git a/spx-gui/src/components/tutorials/TutorialsBanner.vue b/spx-gui/src/components/tutorials/TutorialsBanner.vue
index 306c9c3ed5..016643863f 100644
--- a/spx-gui/src/components/tutorials/TutorialsBanner.vue
+++ b/spx-gui/src/components/tutorials/TutorialsBanner.vue
@@ -1,63 +1,28 @@
 <script lang="ts" setup>
+import { computed } from 'vue'
 import { useI18n } from '@/utils/i18n'
 
 const i18n = useI18n()
+
+const bannerTextClass = computed(() =>
+  i18n.lang.value === 'zh' ? 'translate-x-[70%] -translate-y-[80%]' : '-translate-y-[80%]'
+)
 </script>
 
 <template>
-  <div class="tutorials-banner-wrapper">
-    <div class="banner">
-      <img src="@/components/tutorials/banner.png" alt="Tutorials Banner" class="banner-image" />
+  <div class="relative flex items-center justify-center">
+    <div class="overflow-hidden">
+      <img
+        src="@/components/tutorials/banner.png"
+        alt="Tutorials Banner"
+        class="h-85 w-full object-cover object-center"
+      />
     </div>
-    <div class="banner-text" :lang="i18n.lang.value">
-      <div class="title">{{ $t({ en: 'Explore the User Tutorial', zh: '探索用户教程' }) }}</div>
-      <div class="des">
-        {{ $t({ en: 'Learn XBuilder and improve programming skills', zh: '学习 XBuilder，提高编程技能' }) }}
+    <div class="absolute left-1/2 top-1/2 whitespace-nowrap text-[#006375]" :class="bannerTextClass">
+      <div class="text-[36px]">{{ $t({ en: 'Explore the User Tutorial', zh: '探索用户教程' }) }}</div>
+      <div class="mt-2 text-[18px]">
+      {{ $t({ en: 'Learn XBuilder and improve programming skills', zh: '学习 XBuilder，提高编程技能' }) }}
       </div>
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.tutorials-banner-wrapper {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-
-  .banner {
-    overflow: hidden;
-
-    .banner-image {
-      height: 340px;
-      width: 100%;
-      object-fit: cover;
-      object-position: center;
-    }
-  }
-
-  .banner-text {
-    position: absolute;
-    white-space: nowrap;
-    top: 50%;
-    left: 50%;
-    color: #006375;
-
-    .title {
-      font-size: 36px;
-    }
-
-    .des {
-      font-size: 18px;
-      margin-top: 8px;
-    }
-
-    &[lang='en'] {
-      transform: translate(0%, -80%);
-    }
-    &[lang='zh'] {
-      transform: translate(70%, -80%);
-    }
-  }
-}
-</style>
diff --git a/spx-gui/src/components/ui/UILink.vue b/spx-gui/src/components/ui/UILink.vue
index 41e37ba8aa..7cd229300a 100644
--- a/spx-gui/src/components/ui/UILink.vue
+++ b/spx-gui/src/components/ui/UILink.vue
@@ -18,14 +18,32 @@ withDefaults(
 </template>
 
 <style lang="scss" scoped>
-@import './link.scss';
-
 .ui-link {
+  transition: color 0.1s;
+
   &.type-primary {
-    @include link(primary);
+    color: var(--ui-color-primary-main);
+    text-decoration: none;
+
+    &:hover {
+      color: var(--ui-color-primary-400);
+    }
+
+    &:active {
+      color: var(--ui-color-primary-600);
+    }
   }
+
   &.type-boring {
-    @include link(boring);
+    color: inherit;
+
+    &:hover {
+      color: var(--ui-color-primary-main);
+    }
+
+    &:active {
+      color: var(--ui-color-primary-600);
+    }
   }
 }
 </style>
diff --git a/spx-gui/src/components/ui/global.css b/spx-gui/src/components/ui/global.css
new file mode 100644
index 0000000000..34e65297e0
--- /dev/null
+++ b/spx-gui/src/components/ui/global.css
@@ -0,0 +1,18 @@
+@import './reset.css' layer(base);
+
+@layer base {
+	*,
+	::before,
+	::after {
+		box-sizing: border-box;
+	}
+
+	button {
+		font-family: inherit;
+	}
+}
+
+@font-face {
+	font-family: 'AlibabaHealthB';
+	src: url('./fonts/AlibabaHealthFont2.0CN-85B.ttf') format('truetype');
+}
\ No newline at end of file
diff --git a/spx-gui/src/components/ui/global.scss b/spx-gui/src/components/ui/global.scss
deleted file mode 100644
index 9d922db141..0000000000
--- a/spx-gui/src/components/ui/global.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-@import './reset.css';
-
-*,
-::before,
-::after {
-  box-sizing: border-box;
-}
-
-button {
-  font-family: inherit;
-}
-
-@font-face {
-  font-family: 'AlibabaHealthB';
-  src: url('./fonts/AlibabaHealthFont2.0CN-85B.ttf') format('truetype');
-}
diff --git a/spx-gui/src/components/ui/link.scss b/spx-gui/src/components/ui/link.scss
deleted file mode 100644
index effea58f0f..0000000000
--- a/spx-gui/src/components/ui/link.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-@mixin link($type) {
-  transition: 0.1s;
-
-  @if $type == primary {
-    color: var(--ui-color-primary-main);
-    text-decoration: none;
-
-    &:hover {
-      color: var(--ui-color-primary-400);
-    }
-    &:active {
-      color: var(--ui-color-primary-600);
-    }
-  } @else if $type == boring {
-    color: inherit;
-
-    &:hover {
-      color: var(--ui-color-primary-main);
-    }
-    &:active {
-      color: var(--ui-color-primary-600);
-    }
-  }
-}
diff --git a/spx-gui/src/components/ui/responsive.scss b/spx-gui/src/components/ui/responsive.scss
deleted file mode 100644
index 5ad45a0e18..0000000000
--- a/spx-gui/src/components/ui/responsive.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-// definition for responsive mixin
-
-@mixin responsive($size) {
-  // NOTE: remember to keep these values in sync with the breakpoints in ./responsive.ts
-  @if $size == mobile {
-    @media (max-width: 767px) {
-      @content;
-    }
-  } @else if $size == tablet {
-    @media (min-width: 768px) and (max-width: 1279px) {
-      @content;
-    }
-  } @else if $size == desktop {
-    @media (min-width: 1280px) and (max-width: 1679px) {
-      @content;
-    }
-  } @else if $size == desktop-large {
-    @media (min-width: 1680px) {
-      @content;
-    }
-  }
-}
diff --git a/spx-gui/src/components/ui/responsive.ts b/spx-gui/src/components/ui/responsive.ts
index 27624afb91..3596844bda 100644
--- a/spx-gui/src/components/ui/responsive.ts
+++ b/spx-gui/src/components/ui/responsive.ts
@@ -5,7 +5,7 @@ export type ReponsiveSize = 'mobile' | 'tablet' | 'desktop' | 'desktop-large'
 function getQuery(size: ReponsiveSize) {
   let query: string
   switch (size) {
-    // NOTE: remember to keep these values in sync with the breakpoints in ./responsive.scss
+    // NOTE: remember to keep these values in sync with the breakpoints in @/app.css
     case 'mobile':
       query = '(max-width: 767px)'
       break
diff --git a/spx-gui/src/main.ts b/spx-gui/src/main.ts
index a9316e80ca..d76881e1cf 100644
--- a/spx-gui/src/main.ts
+++ b/spx-gui/src/main.ts
@@ -1,4 +1,5 @@
 import './polyfills'
+import './app.css'
 import { createApp, watchEffect, type App as VueApp } from 'vue'
 import * as Sentry from '@sentry/vue'
 import type { Router } from 'vue-router'
diff --git a/spx-gui/src/pages/404/index.vue b/spx-gui/src/pages/404/index.vue
index 8c5e3fb427..1d2c0c4e25 100644
--- a/spx-gui/src/pages/404/index.vue
+++ b/spx-gui/src/pages/404/index.vue
@@ -10,15 +10,20 @@ const router = useRouter()
 </script>
 
 <template>
-  <div v-radar="{ name: '404 page', desc: 'Displayed when a page is not found' }" class="not-found">
+  <div
+    v-radar="{ name: '404 page', desc: 'Displayed when a page is not found' }"
+    class="bg-grey-200 flex h-full flex-col"
+  >
     <CommunityNavbar />
-    <div class="content">
+    <div class="flex w-full flex-1 flex-col items-center justify-center gap-4">
       <!-- eslint-disable-next-line vue/no-v-html -->
       <div v-html="errorSvg"></div>
-      <p class="tips">{{ $t({ en: 'Page not found', zh: '页面未找到' }) }}</p>
+      <p class="text-20 text-grey-1000 font-semibold">
+        {{ $t({ en: 'Page not found', zh: '页面未找到' }) }}
+      </p>
       <UIButton
         v-radar="{ name: '404 go home button', desc: 'Button to go back to home page' }"
-        class="go-home"
+        class="mt-4 h-9 text-[15px]"
         @click="router.push('/')"
         >{{ $t({ en: 'Return to home page', zh: '回到首页' }) }}</UIButton
       >
@@ -26,34 +31,3 @@ const router = useRouter()
     <CommunityFooter />
   </div>
 </template>
-
-<style scoped lang="scss">
-.not-found {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  background: var(--ui-color-grey-200);
-}
-
-.content {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  width: 100%;
-  justify-content: center;
-  align-items: center;
-}
-
-.tips {
-  font-size: 20px;
-  font-weight: 600;
-  color: var(--ui-color-grey-1000);
-}
-
-.go-home {
-  height: 36px;
-  font-size: 15px;
-  margin-top: 16px;
-}
-</style>
diff --git a/spx-gui/src/pages/community/explore.vue b/spx-gui/src/pages/community/explore.vue
index b03bfd21f2..6f9e44f8d8 100644
--- a/spx-gui/src/pages/community/explore.vue
+++ b/spx-gui/src/pages/community/explore.vue
@@ -15,9 +15,9 @@
       </UIChipRadioGroup>
     </template>
   </CommunityHeader>
-  <CenteredWrapper class="main">
+  <CenteredWrapper class="flex flex-1 flex-col gap-5 py-5">
     <ListResultWrapper v-slot="slotProps" content-type="project" :query-ret="queryRet">
-      <ul class="projects">
+      <ul class="flex flex-wrap content-start gap-5">
         <ProjectItem v-for="project in slotProps.data" :key="project.id" :project="project" />
       </ul>
     </ListResultWrapper>
@@ -64,20 +64,3 @@ const queryRet = useQuery(
   }
 )
 </script>
-
-<style lang="scss" scoped>
-.main {
-  flex: 1 1 0;
-  padding: 20px 0;
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-.projects {
-  display: flex;
-  flex-wrap: wrap;
-  align-content: flex-start;
-  gap: 20px;
-}
-</style>
diff --git a/spx-gui/src/pages/community/home.vue b/spx-gui/src/pages/community/home.vue
index 94950b8af9..a123691fe6 100644
--- a/spx-gui/src/pages/community/home.vue
+++ b/spx-gui/src/pages/community/home.vue
@@ -1,6 +1,6 @@
 <template>
-  <CenteredWrapper class="home-page">
-    <GuestBanner v-if="!isSignedIn()" class="guest-banner" />
+  <CenteredWrapper class="mt-5">
+    <GuestBanner v-if="!isSignedIn()" class="my-3 mb-8" />
     <ProjectsSection
       v-else
       v-radar="{ name: 'Your projects', desc: 'Section showing user\'s own projects' }"
@@ -178,13 +178,3 @@ const followingCreatedProjects = useQuery(
   { en: 'Failed to load projects', zh: '加载失败' }
 )
 </script>
-
-<style lang="scss" scoped>
-.home-page {
-  margin-top: 20px;
-}
-
-.guest-banner {
-  margin: 12px 0 32px;
-}
-</style>
diff --git a/spx-gui/src/pages/community/index.vue b/spx-gui/src/pages/community/index.vue
index 53447fa733..e794ff9d01 100644
--- a/spx-gui/src/pages/community/index.vue
+++ b/spx-gui/src/pages/community/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="wrapper">
+  <div class="bg-grey-300 flex h-full w-full flex-col overflow-y-auto">
     <CommunityNavbar />
     <router-view />
     <CommunityFooter />
@@ -10,14 +10,3 @@
 import CommunityNavbar from '@/components/community/CommunityNavbar.vue'
 import CommunityFooter from '@/components/community/footer/CommunityFooter.vue'
 </script>
-
-<style lang="scss" scoped>
-.wrapper {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  overflow-y: auto;
-  background-color: var(--ui-color-grey-300);
-}
-</style>
diff --git a/spx-gui/src/pages/sign-in/callback.vue b/spx-gui/src/pages/sign-in/callback.vue
index 123b6ac912..b1272c482a 100644
--- a/spx-gui/src/pages/sign-in/callback.vue
+++ b/spx-gui/src/pages/sign-in/callback.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="container">
+  <div class="flex h-screen items-center justify-center">
     <h4>{{ $t(title) }}</h4>
   </div>
 </template>
@@ -23,11 +23,3 @@ try {
   window.location.replace('/')
 }
 </script>
-<style scoped lang="scss">
-.container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100vh;
-}
-</style>
diff --git a/spx-gui/src/pages/sign-in/token.vue b/spx-gui/src/pages/sign-in/token.vue
index a593516253..dee70301f4 100644
--- a/spx-gui/src/pages/sign-in/token.vue
+++ b/spx-gui/src/pages/sign-in/token.vue
@@ -1,17 +1,17 @@
 <template>
-  <div class="page">
-    <UIForm class="form" :form="form" @submit="handleSubmit.fn">
-      <h1 class="title">{{ $t(title) }}</h1>
+  <div class="flex h-full w-full items-center justify-center">
+    <UIForm class="flex w-80 flex-col" :form="form" @submit="handleSubmit.fn">
+      <h1 class="mb-4 text-center text-body">{{ $t(title) }}</h1>
       <UIFormItem path="token">
         <UITextInput
           v-model:value="form.value.token"
           v-radar="{ name: 'Token input', desc: 'Input field for authentication token' }"
-          class="input"
+          class="h-40 justify-self-stretch"
           type="textarea"
           :placeholder="$t({ en: 'Paste token here', zh: '在此粘贴 Token' })"
         />
       </UIFormItem>
-      <footer class="footer">
+      <footer class="mt-4 flex justify-center gap-4">
         <UIButton
           v-radar="{ name: 'Cancel button', desc: 'Click to cancel token sign-in' }"
           color="boring"
@@ -99,36 +99,3 @@ const handleSubmit = useMessageHandle(
   }
 )
 </script>
-<style scoped lang="scss">
-.page {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.form {
-  width: 320px;
-  display: flex;
-  flex-direction: column;
-}
-
-.title {
-  margin-bottom: 1em;
-  font-size: 16px;
-  text-align: center;
-}
-
-.input {
-  justify-self: stretch;
-  height: 160px;
-}
-
-.footer {
-  margin-top: 1em;
-  display: flex;
-  justify-content: center;
-  gap: 1em;
-}
-</style>
diff --git a/spx-gui/src/pages/tutorials/course-start.vue b/spx-gui/src/pages/tutorials/course-start.vue
index fac7408f2c..6bf0d50ea4 100644
--- a/spx-gui/src/pages/tutorials/course-start.vue
+++ b/spx-gui/src/pages/tutorials/course-start.vue
@@ -37,7 +37,7 @@ const allQueryRet = useQuery(
 </script>
 
 <template>
-  <section class="course-start-page">
+  <section class="flex h-full w-full items-center justify-center">
     <UIDetailedLoading v-if="allQueryRet.isLoading.value" :percentage="allQueryRet.progress.value.percentage">
       <span>{{ $t(allQueryRet.progress.value.desc ?? { zh: '跳转中...', en: 'Redirecting...' }) }}</span>
     </UIDetailedLoading>
@@ -46,13 +46,3 @@ const allQueryRet = useQuery(
     </UIError>
   </section>
 </template>
-
-<style lang="scss" scoped>
-.course-start-page {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-</style>
diff --git a/spx-gui/src/pages/tutorials/index.vue b/spx-gui/src/pages/tutorials/index.vue
index 53d0141b58..1fdd094fc5 100644
--- a/spx-gui/src/pages/tutorials/index.vue
+++ b/spx-gui/src/pages/tutorials/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="tutorials-wrapper">
+  <div class="bg-grey-300 flex h-full w-full flex-col overflow-y-auto">
     <!-- TODO: Temporarily import the community component -->
     <CommunityNavbar />
 
@@ -7,7 +7,7 @@
 
     <CenteredWrapper
       v-radar="{ name: 'Course series list', desc: 'Scroll to view the course series' }"
-      class="centered-wrapper"
+      class="my-8 flex flex-1 flex-col items-center"
       :style="{ '--num-in-row': numInRow }"
     >
       <ListResultWrapper :query-ret="courseSeriesQuery" :height="height">
@@ -17,13 +17,13 @@
           </UIEmpty>
         </template>
         <template #default="{ data }">
-          <ul class="course-series-list">
+          <ul class="grid grid-cols-[repeat(var(--num-in-row),minmax(0,1fr))] gap-middle">
             <CourseSeriesItem v-for="courseSeries in data.data" :key="courseSeries.id" :course-series="courseSeries" />
           </ul>
         </template>
       </ListResultWrapper>
 
-      <UIPagination v-show="pageTotal > 1" v-model:current="page" class="pagination" :total="pageTotal" />
+      <UIPagination v-show="pageTotal > 1" v-model:current="page" class="mt-9 self-center" :total="pageTotal" />
     </CenteredWrapper>
 
     <CommunityFooter />
@@ -81,33 +81,3 @@ const courseSeriesQuery = useQuery(
   }
 )
 </script>
-
-<style lang="scss" scoped>
-.tutorials-wrapper {
-  display: flex;
-  flex-direction: column;
-  overflow-y: auto;
-  width: 100%;
-  height: 100%;
-  background-color: var(--ui-color-grey-300);
-
-  .centered-wrapper {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    margin: 32px auto;
-    flex: 1;
-
-    .course-series-list {
-      display: grid;
-      grid-template-columns: repeat(var(--num-in-row), 1fr);
-      gap: var(--ui-gap-middle);
-    }
-
-    .pagination {
-      align-self: center;
-      margin-top: 36px;
-    }
-  }
-}
-</style>
diff --git a/spx-gui/src/utils/utils.scss b/spx-gui/src/utils/utils.scss
deleted file mode 100644
index ce57a72d20..0000000000
--- a/spx-gui/src/utils/utils.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@mixin text-ellipsis {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
diff --git a/spx-gui/vercel-output-plugin.ts b/spx-gui/vercel-output-plugin.ts
index fa48b7c9ff..87da003cf7 100644
--- a/spx-gui/vercel-output-plugin.ts
+++ b/spx-gui/vercel-output-plugin.ts
@@ -91,7 +91,7 @@ export const createVercelOutputPlugin = ({ outputDir = defaultOutputDir, headers
     configResolved(config) {
       resolvedConfig = config
     },
-    async closeBundle() {
+    async writeBundle() {
       if (resolvedConfig == null || resolvedConfig.build.ssr) {
         return
       }
diff --git a/spx-gui/vite.config.ts b/spx-gui/vite.config.ts
index ed8eb463eb..7f9c0d49d3 100644
--- a/spx-gui/vite.config.ts
+++ b/spx-gui/vite.config.ts
@@ -3,6 +3,7 @@
 import path from 'node:path'
 import { defineConfig, loadEnv } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import tailwindcss from '@tailwindcss/vite'
 import { ViteEjsPlugin } from 'vite-plugin-ejs'
 import browserslistToEsbuild from 'browserslist-to-esbuild'
 
@@ -17,6 +18,7 @@ export default defineConfig(({ mode }) => {
   return {
     plugins: [
       vue(),
+      tailwindcss(),
       ViteEjsPlugin(),
       createVercelOutputPlugin({
         headers: [

From 2a8411833fd2dbf3a5d0bc2ba395f9c2cecc845b Mon Sep 17 00:00:00 2001
From: chennan <chennan@qiniu.com>
Date: Tue, 31 Mar 2026 11:30:35 +0800
Subject: [PATCH 02/10] disable tailwind preflight

---
 docs/develop/tailwind-css-migration.md | 12 ++++++------
 spx-gui/AGENTS.md                      |  1 +
 spx-gui/src/app.css                    |  5 ++++-
 3 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/docs/develop/tailwind-css-migration.md b/docs/develop/tailwind-css-migration.md
index 464e56a036..e1e78ca09b 100644
--- a/docs/develop/tailwind-css-migration.md
+++ b/docs/develop/tailwind-css-migration.md
@@ -40,7 +40,7 @@ This means the project is pursuing two related but different directions:
 The current frontend styling model is centered around Vue SFC local styles plus shared CSS variables, with Tailwind now added as an optional utility layer.
 
 - `spx-gui` uses Vite + Vue 3, includes both Tailwind and Sass tooling in [spx-gui/package.json](../../spx-gui/package.json)
-- the app loads global styling through [spx-gui/src/main.ts](../../spx-gui/src/main.ts) and [spx-gui/src/app.css](../../spx-gui/src/app.css), which imports [spx-gui/src/components/ui/global.css](../../spx-gui/src/components/ui/global.css)
+- the app loads global styling through [spx-gui/src/main.ts](../../spx-gui/src/main.ts) and [spx-gui/src/app.css](../../spx-gui/src/app.css), which keeps [spx-gui/src/components/ui/global.css](../../spx-gui/src/components/ui/global.css) as the base layer; Tailwind preflight is intentionally disabled, and the app imports only Tailwind theme and utilities layers
 - design tokens are defined in TypeScript under [spx-gui/src/components/ui/tokens/index.ts](../../spx-gui/src/components/ui/tokens/index.ts) and related files
 - the token objects are converted into `--ui-*` CSS variables and injected globally by [spx-gui/src/components/ui/UIConfigProvider.vue](../../spx-gui/src/components/ui/UIConfigProvider.vue)
 - Naive UI theme overrides are also defined in [spx-gui/src/components/ui/UIConfigProvider.vue](../../spx-gui/src/components/ui/UIConfigProvider.vue), so the token system serves both custom CSS and third-party components
@@ -333,9 +333,9 @@ These files are not long-term migration targets themselves. They should be remov
 
 Global foundation styling should remain even in a Tailwind-based hybrid model.
 
-- [spx-gui/src/components/ui/global.css](../../spx-gui/src/components/ui/global.css) should not be deleted as part of Tailwind adoption
-- reset rules, `box-sizing`, and `@font-face` declarations are still needed
-- this file may later be converted from SCSS to plain CSS, but it should remain as a base layer stylesheet
+- [spx-gui/src/components/ui/global.css](../../spx-gui/src/components/ui/global.css) and its imported [spx-gui/src/components/ui/reset.css](../../spx-gui/src/components/ui/reset.css) should not be deleted as part of Tailwind adoption
+- Tailwind preflight is intentionally disabled, so these files remain the project base layer for reset rules, `box-sizing`, button font inheritance, `@font-face`, and other shared foundation styles
+- this base layer may evolve over time, but it should continue to live in project-owned CSS rather than being replaced implicitly by Tailwind preflight
 
 ### Recommended Execution Order
 
@@ -357,7 +357,7 @@ The global entry file [spx-gui/src/app.css](../../spx-gui/src/app.css) should st
 
 It is the right place for:
 
-- Tailwind entry setup such as `@import "tailwindcss"` and `@source`
+- Tailwind entry setup such as importing `tailwindcss/theme.css`, `tailwindcss/utilities.css`, and `@source`
 - the theme bridge from existing `--ui-*` variables to Tailwind tokens
 - rare project-wide utilities that are truly cross-feature and not page-specific
 
@@ -506,4 +506,4 @@ If the team wants to continue after this assessment, the next task should be a s
 - installs Tailwind in `spx-gui`
 - defines the minimal theme bridge to current tokens
 - converts one low-risk page or wrapper component
-- records what became simpler and what still required SCSS
\ No newline at end of file
+- records what became simpler and what still required SCSS
diff --git a/spx-gui/AGENTS.md b/spx-gui/AGENTS.md
index 2fe4852b97..865832f8be 100644
--- a/spx-gui/AGENTS.md
+++ b/spx-gui/AGENTS.md
@@ -87,6 +87,7 @@ When working with backend unique string identifiers such as `username`, project
 * Do not add or keep business-code imports of SCSS helpers from `src/components/ui/`.
 * For `src/components/ui/`, the long-term direction is the same, but this phase still allows local SCSS where it remains the clearest implementation.
 * Keep [src/app.css](src/app.css) limited to Tailwind entry setup, the theme bridge, and rare project-wide utilities.
+* Tailwind preflight is intentionally disabled in `src/app.css`. Keep [src/components/ui/global.css](src/components/ui/global.css) and [src/components/ui/reset.css](src/components/ui/reset.css) as the project's base layer for reset and foundation styles.
 * Do not move page-local or feature-local styles into `src/app.css` just because they are written with Tailwind.
 * Keep page-specific dimensions, transforms, colors, and card/banner styling local to the relevant page or component.
 * Keep the existing `--ui-*` design token system as the source of truth.
diff --git a/spx-gui/src/app.css b/spx-gui/src/app.css
index 6cdbf42474..302f06efbd 100644
--- a/spx-gui/src/app.css
+++ b/spx-gui/src/app.css
@@ -1,5 +1,8 @@
+@layer theme, base, components, utilities;
+
 @import "./components/ui/global.css";
-@import "tailwindcss";
+@import "tailwindcss/theme.css" layer(theme);
+@import "tailwindcss/utilities.css" layer(utilities);
 
 @source "./**/*.{vue,ts,tsx,js,jsx,html}";
 

From d1204be6b7d0bd7aa49378509304687de79ffd54 Mon Sep 17 00:00:00 2001
From: chennan <chennan@qiniu.com>
Date: Tue, 31 Mar 2026 18:07:04 +0800
Subject: [PATCH 03/10] fix:  theme leading/text variables & tailwind utilities
 confliction with existing classes

---
 spx-gui/src/app.css                           | 452 +++++++++---------
 .../components/community/CommunityHeader.vue  |   2 +-
 .../components/community/ProjectsSection.vue  |  14 +-
 .../user/sidebar/UserSidebarItem.vue          |   2 +-
 .../ui/completion/CompletionItem.vue          |   8 +-
 .../src/components/project/ProjectItem.vue    |   9 +-
 .../components/tutorials/CourseSeriesItem.vue |   6 +-
 .../components/tutorials/TutorialsBanner.vue  |   6 +-
 spx-gui/src/components/ui/UIButton.vue        |   8 +-
 .../src/components/ui/UIConfigProvider.vue    |  59 +--
 spx-gui/src/components/ui/UITag.vue           |   4 +-
 spx-gui/src/components/ui/UITextInput.vue     |   6 +-
 spx-gui/src/components/ui/empty/UIEmpty.vue   |  10 +-
 spx-gui/src/components/ui/global.css          |  22 +-
 spx-gui/src/components/ui/modal/UIModal.vue   |  10 +-
 .../src/components/ui/modal/UIModalClose.vue  |   9 +-
 spx-gui/src/pages/404/index.vue               |   2 +-
 spx-gui/src/pages/community/project.vue       |   4 +-
 spx-gui/src/pages/sign-in/token.vue           |   2 +-
 19 files changed, 325 insertions(+), 310 deletions(-)

diff --git a/spx-gui/src/app.css b/spx-gui/src/app.css
index 302f06efbd..402c6bbd70 100644
--- a/spx-gui/src/app.css
+++ b/spx-gui/src/app.css
@@ -1,8 +1,8 @@
 @layer theme, base, components, utilities;
 
-@import "./components/ui/global.css";
-@import "tailwindcss/theme.css" layer(theme);
-@import "tailwindcss/utilities.css" layer(utilities);
+@import './components/ui/global.css';
+@import 'tailwindcss/theme.css' layer(theme);
+@import 'tailwindcss/utilities.css' layer(utilities);
 
 @source "./**/*.{vue,ts,tsx,js,jsx,html}";
 
@@ -14,32 +14,32 @@
  * for the component implementation under src/components/ui/.
  */
 @layer components {
-	.link-primary {
-		transition: color 0.1s;
-		color: var(--ui-color-primary-main);
-		text-decoration: none;
-
-		&:hover {
-			color: var(--ui-color-primary-400);
-		}
-
-		&:active {
-			color: var(--ui-color-primary-600);
-		}
-	}
-
-	.link-boring {
-		transition: color 0.1s;
-		color: inherit;
-
-		&:hover {
-			color: var(--ui-color-primary-main);
-		}
-
-		&:active {
-			color: var(--ui-color-primary-600);
-		}
-	}
+  .link-primary {
+    transition: color 0.1s;
+    color: var(--ui-color-primary-main);
+    text-decoration: none;
+
+    &:hover {
+      color: var(--ui-color-primary-400);
+    }
+
+    &:active {
+      color: var(--ui-color-primary-600);
+    }
+  }
+
+  .link-boring {
+    transition: color 0.1s;
+    color: inherit;
+
+    &:hover {
+      color: var(--ui-color-primary-main);
+    }
+
+    &:active {
+      color: var(--ui-color-primary-600);
+    }
+  }
 }
 
 /*
@@ -53,194 +53,208 @@
  * utilities can use semantic classes such as text-text and bg-primary-100.
  */
 @theme {
-	/* Keep only the project's breakpoint names to avoid a parallel default scale. */
-	--breakpoint-*: initial;
-	--color-*: initial;
-	--shadow-*: initial;
-	--font-*: initial;
-	--text-*: initial;
-	--radius-*: initial;
-	--leading-*: initial;
-
-	/* Mirrors src/components/ui/responsive.ts. */
-	--breakpoint-tablet: 48rem;
-	--breakpoint-desktop: 80rem;
-	--breakpoint-desktop-large: 105rem;
-
-	/* Product palette and semantic color tokens bridged from global --ui-color-* vars. */
-	--color-turquoise-100: var(--ui-color-turquoise-100, #f3fcfd);
-	--color-turquoise-200: var(--ui-color-turquoise-200, #e7f9fa);
-	--color-turquoise-300: var(--ui-color-turquoise-300, #b5ebf0);
-	--color-turquoise-400: var(--ui-color-turquoise-400, #3fcdd9);
-	--color-turquoise-500: var(--ui-color-turquoise-500, #0bc0cf);
-	--color-turquoise-600: var(--ui-color-turquoise-600, #0eafbc);
-	--color-turquoise-700: var(--ui-color-turquoise-700, #0b8893);
-	--color-turquoise-main: var(--ui-color-turquoise-main, #0bc0cf);
-
-	--color-yellow-100: var(--ui-color-yellow-100, #fffaf5);
-	--color-yellow-200: var(--ui-color-yellow-200, #fff6eb);
-	--color-yellow-300: var(--ui-color-yellow-300, #fde2c0);
-	--color-yellow-400: var(--ui-color-yellow-400, #fbb45d);
-	--color-yellow-500: var(--ui-color-yellow-500, #faa135);
-	--color-yellow-600: var(--ui-color-yellow-600, #e49330);
-	--color-yellow-700: var(--ui-color-yellow-700, #b27226);
-	--color-yellow-main: var(--ui-color-yellow-main, #faa135);
-
-	--color-purple-100: var(--ui-color-purple-100, #faf8ff);
-	--color-purple-200: var(--ui-color-purple-200, #f6f1ff);
-	--color-purple-300: var(--ui-color-purple-300, #e2d4ff);
-	--color-purple-400: var(--ui-color-purple-400, #b390ff);
-	--color-purple-500: var(--ui-color-purple-500, #a074ff);
-	--color-purple-600: var(--ui-color-purple-600, #926ae8);
-	--color-purple-700: var(--ui-color-purple-700, #7252b5);
-	--color-purple-main: var(--ui-color-purple-main, #a074ff);
-
-	--color-blue-100: var(--ui-color-blue-100, #f4faff);
-	--color-blue-200: var(--ui-color-blue-200, #e9f5ff);
-	--color-blue-300: var(--ui-color-blue-300, #bae1fe);
-	--color-blue-400: var(--ui-color-blue-400, #4db2fd);
-	--color-blue-500: var(--ui-color-blue-500, #219ffc);
-	--color-blue-600: var(--ui-color-blue-600, #1e91e5);
-	--color-blue-700: var(--ui-color-blue-700, #1771b3);
-	--color-blue-main: var(--ui-color-blue-main, #219ffc);
-
-	--color-red-100: var(--ui-color-red-100, #feefef);
-	--color-red-200: var(--ui-color-red-200, #fdc7c7);
-	--color-red-300: var(--ui-color-red-300, #ff97a0);
-	--color-red-400: var(--ui-color-red-400, #f15d64);
-	--color-red-500: var(--ui-color-red-500, #ef4149);
-	--color-red-600: var(--ui-color-red-600, #bc292e);
-	--color-red-main: var(--ui-color-red-main, #ef4149);
-
-	--color-green-100: var(--ui-color-green-100, #e0f8e3);
-	--color-green-200: var(--ui-color-green-200, #cbf1cd);
-	--color-green-300: var(--ui-color-green-300, #b0ea90);
-	--color-green-400: var(--ui-color-green-400, #90e05a);
-	--color-green-500: var(--ui-color-green-500, #63ce29);
-	--color-green-600: var(--ui-color-green-600, #3ca80c);
-	--color-green-main: var(--ui-color-green-main, #63ce29);
-
-	--color-grey-100: var(--ui-color-grey-100, #ffffff);
-	--color-grey-200: var(--ui-color-grey-200, #fbfcfd);
-	--color-grey-300: var(--ui-color-grey-300, #f6f8fa);
-	--color-grey-400: var(--ui-color-grey-400, #eaeff3);
-	--color-grey-500: var(--ui-color-grey-500, #d9dfe5);
-	--color-grey-600: var(--ui-color-grey-600, #cbd2d8);
-	--color-grey-700: var(--ui-color-grey-700, #a7b1bb);
-	--color-grey-800: var(--ui-color-grey-800, #6e7781);
-	--color-grey-900: var(--ui-color-grey-900, #57606a);
-	--color-grey-1000: var(--ui-color-grey-1000, #24292f);
-
-	--color-primary-100: var(--ui-color-primary-100, #f3fcfd);
-	--color-primary-200: var(--ui-color-primary-200, #e7f9fa);
-	--color-primary-300: var(--ui-color-primary-300, #b5ebf0);
-	--color-primary-400: var(--ui-color-primary-400, #3fcdd9);
-	--color-primary-500: var(--ui-color-primary-500, #0bc0cf);
-	--color-primary-600: var(--ui-color-primary-600, #0eafbc);
-	--color-primary-700: var(--ui-color-primary-700, #0b8893);
-	--color-primary-main: var(--ui-color-primary-main, #0bc0cf);
-
-	--color-sprite-100: var(--ui-color-sprite-100, #fffaf5);
-	--color-sprite-200: var(--ui-color-sprite-200, #fff6eb);
-	--color-sprite-300: var(--ui-color-sprite-300, #fde2c0);
-	--color-sprite-400: var(--ui-color-sprite-400, #fbb45d);
-	--color-sprite-500: var(--ui-color-sprite-500, #faa135);
-	--color-sprite-600: var(--ui-color-sprite-600, #e49330);
-	--color-sprite-700: var(--ui-color-sprite-700, #b27226);
-	--color-sprite-main: var(--ui-color-sprite-main, #faa135);
-	--color-sprite-bg-selected: var(--ui-color-sprite-bg-selected, #fff6eb);
-
-	--color-sound-100: var(--ui-color-sound-100, #f4faff);
-	--color-sound-200: var(--ui-color-sound-200, #e9f5ff);
-	--color-sound-300: var(--ui-color-sound-300, #bae1fe);
-	--color-sound-400: var(--ui-color-sound-400, #4db2fd);
-	--color-sound-500: var(--ui-color-sound-500, #219ffc);
-	--color-sound-600: var(--ui-color-sound-600, #1e91e5);
-	--color-sound-700: var(--ui-color-sound-700, #1771b3);
-	--color-sound-main: var(--ui-color-sound-main, #219ffc);
-	--color-sound-bg-selected: var(--ui-color-sound-bg-selected, #e9f5ff);
-
-	--color-stage-100: var(--ui-color-stage-100, #f4faff);
-	--color-stage-200: var(--ui-color-stage-200, #e9f5ff);
-	--color-stage-300: var(--ui-color-stage-300, #bae1fe);
-	--color-stage-400: var(--ui-color-stage-400, #4db2fd);
-	--color-stage-500: var(--ui-color-stage-500, #219ffc);
-	--color-stage-600: var(--ui-color-stage-600, #1e91e5);
-	--color-stage-700: var(--ui-color-stage-700, #1771b3);
-	--color-stage-main: var(--ui-color-stage-main, #219ffc);
-	--color-stage-bg-selected: var(--ui-color-stage-bg-selected, #e9f5ff);
-
-	--color-danger-100: var(--ui-color-danger-100, #feefef);
-	--color-danger-200: var(--ui-color-danger-200, #fdc7c7);
-	--color-danger-300: var(--ui-color-danger-300, #ff97a0);
-	--color-danger-400: var(--ui-color-danger-400, #f15d64);
-	--color-danger-500: var(--ui-color-danger-500, #ef4149);
-	--color-danger-600: var(--ui-color-danger-600, #bc292e);
-	--color-danger-main: var(--ui-color-danger-main, #ef4149);
-
-	--color-success-100: var(--ui-color-success-100, #e0f8e3);
-	--color-success-200: var(--ui-color-success-200, #cbf1cd);
-	--color-success-300: var(--ui-color-success-300, #b0ea90);
-	--color-success-400: var(--ui-color-success-400, #90e05a);
-	--color-success-500: var(--ui-color-success-500, #63ce29);
-	--color-success-600: var(--ui-color-success-600, #3ca80c);
-	--color-success-main: var(--ui-color-success-main, #63ce29);
-
-	--color-disabled-bg: var(--ui-color-disabled-bg, #f6f8fa);
-	--color-disabled-text: var(--ui-color-disabled-text, #cbd2d8);
-	--color-title: var(--ui-color-title, #24292f);
-	--color-text: var(--ui-color-text, #57606a);
-	--color-hint-1: var(--ui-color-hint-1, #6e7781);
-	--color-hint-2: var(--ui-color-hint-2, #a7b1bb);
-	--color-dividing-line-1: var(--ui-color-dividing-line-1, #d9dfe5);
-	--color-dividing-line-2: var(--ui-color-dividing-line-2, #eaeff3);
-	--color-border: var(--ui-color-border, #cbd2d8);
-
-	/* Typography tokens bridged from the UI token layer. */
-	--font-sans: var(
-		--ui-font-family-main,
-		AlibabaHealthB,
-		-apple-system,
-		BlinkMacSystemFont,
-		'Segoe UI',
-		Roboto,
-		'Helvetica Neue',
-		Arial,
-		'Noto Sans',
-		sans-serif,
-		'Apple Color Emoji',
-		'Segoe UI Emoji',
-		'Segoe UI Symbol',
-		'Noto Color Emoji'
-	);
-	--font-mono: var(--ui-font-family-code, Menlo, Monaco, 'Courier New', monospace);
-	--font-main: var(--font-sans);
-	--font-code: var(--font-mono);
-
-	/* Radius and shadow tokens bridged from the UI token layer. */
-	--radius-none: 0px;
-	--radius-full: 9999px;
-	--radius-1: var(--ui-border-radius-1, 8px);
-	--radius-2: var(--ui-border-radius-2, 12px);
-	--radius-3: var(--ui-border-radius-3, 20px);
-
-	--shadow-none: 0 0 #0000;
-	--shadow-small: var(--ui-box-shadow-small, 0px 2px 8px 0px rgba(51, 51, 51, 0.08));
-	--shadow-big: var(--ui-box-shadow-big, 0px 4px 24px 0px rgba(36, 41, 47, 0.08));
-	--shadow-diffusion: var(--ui-box-shadow-diffusion, 0px 4px 12px 0px #d0f2f8);
-
-	/* Shared spacing and text-size helpers bridged for utility-class authoring. */
-	--leading-1: var(--ui-line-height-1, 26px);
-	--leading-2: var(--ui-line-height-2, 32px);
-	--leading-3: var(--ui-line-height-3, 40px);
-
-	--spacing-middle: var(--ui-gap-middle, 16px);
-	--spacing-large: var(--ui-gap-large, 24px);
-
-	--text-body: var(--ui-font-size-text, 14px);
-	--text-body--line-height: 1.57143;
-	--text-15: 15px;
-	--text-15--line-height: 1.5;
-	--text-20: 20px;
-	--text-20--line-height: 1.5;
+  /* Keep only the project's breakpoint names to avoid a parallel default scale. */
+  --breakpoint-*: initial;
+  --color-*: initial;
+  --shadow-*: initial;
+  --font-*: initial;
+  --text-*: initial;
+  --radius-*: initial;
+
+  /* Mirrors src/components/ui/responsive.ts. */
+  --breakpoint-tablet: 48rem;
+  --breakpoint-desktop: 80rem;
+  --breakpoint-desktop-large: 105rem;
+
+  /* Product palette and semantic color tokens bridged from global --ui-color-* vars. */
+  --color-turquoise-100: var(--ui-color-turquoise-100, #f3fcfd);
+  --color-turquoise-200: var(--ui-color-turquoise-200, #e7f9fa);
+  --color-turquoise-300: var(--ui-color-turquoise-300, #b5ebf0);
+  --color-turquoise-400: var(--ui-color-turquoise-400, #3fcdd9);
+  --color-turquoise-500: var(--ui-color-turquoise-500, #0bc0cf);
+  --color-turquoise-600: var(--ui-color-turquoise-600, #0eafbc);
+  --color-turquoise-700: var(--ui-color-turquoise-700, #0b8893);
+  --color-turquoise-main: var(--ui-color-turquoise-main, #0bc0cf);
+
+  --color-yellow-100: var(--ui-color-yellow-100, #fffaf5);
+  --color-yellow-200: var(--ui-color-yellow-200, #fff6eb);
+  --color-yellow-300: var(--ui-color-yellow-300, #fde2c0);
+  --color-yellow-400: var(--ui-color-yellow-400, #fbb45d);
+  --color-yellow-500: var(--ui-color-yellow-500, #faa135);
+  --color-yellow-600: var(--ui-color-yellow-600, #e49330);
+  --color-yellow-700: var(--ui-color-yellow-700, #b27226);
+  --color-yellow-main: var(--ui-color-yellow-main, #faa135);
+
+  --color-purple-100: var(--ui-color-purple-100, #faf8ff);
+  --color-purple-200: var(--ui-color-purple-200, #f6f1ff);
+  --color-purple-300: var(--ui-color-purple-300, #e2d4ff);
+  --color-purple-400: var(--ui-color-purple-400, #b390ff);
+  --color-purple-500: var(--ui-color-purple-500, #a074ff);
+  --color-purple-600: var(--ui-color-purple-600, #926ae8);
+  --color-purple-700: var(--ui-color-purple-700, #7252b5);
+  --color-purple-main: var(--ui-color-purple-main, #a074ff);
+
+  --color-blue-100: var(--ui-color-blue-100, #f4faff);
+  --color-blue-200: var(--ui-color-blue-200, #e9f5ff);
+  --color-blue-300: var(--ui-color-blue-300, #bae1fe);
+  --color-blue-400: var(--ui-color-blue-400, #4db2fd);
+  --color-blue-500: var(--ui-color-blue-500, #219ffc);
+  --color-blue-600: var(--ui-color-blue-600, #1e91e5);
+  --color-blue-700: var(--ui-color-blue-700, #1771b3);
+  --color-blue-main: var(--ui-color-blue-main, #219ffc);
+
+  --color-red-100: var(--ui-color-red-100, #feefef);
+  --color-red-200: var(--ui-color-red-200, #fdc7c7);
+  --color-red-300: var(--ui-color-red-300, #ff97a0);
+  --color-red-400: var(--ui-color-red-400, #f15d64);
+  --color-red-500: var(--ui-color-red-500, #ef4149);
+  --color-red-600: var(--ui-color-red-600, #bc292e);
+  --color-red-main: var(--ui-color-red-main, #ef4149);
+
+  --color-green-100: var(--ui-color-green-100, #e0f8e3);
+  --color-green-200: var(--ui-color-green-200, #cbf1cd);
+  --color-green-300: var(--ui-color-green-300, #b0ea90);
+  --color-green-400: var(--ui-color-green-400, #90e05a);
+  --color-green-500: var(--ui-color-green-500, #63ce29);
+  --color-green-600: var(--ui-color-green-600, #3ca80c);
+  --color-green-main: var(--ui-color-green-main, #63ce29);
+
+  --color-grey-100: var(--ui-color-grey-100, #ffffff);
+  --color-grey-200: var(--ui-color-grey-200, #fbfcfd);
+  --color-grey-300: var(--ui-color-grey-300, #f6f8fa);
+  --color-grey-400: var(--ui-color-grey-400, #eaeff3);
+  --color-grey-500: var(--ui-color-grey-500, #d9dfe5);
+  --color-grey-600: var(--ui-color-grey-600, #cbd2d8);
+  --color-grey-700: var(--ui-color-grey-700, #a7b1bb);
+  --color-grey-800: var(--ui-color-grey-800, #6e7781);
+  --color-grey-900: var(--ui-color-grey-900, #57606a);
+  --color-grey-1000: var(--ui-color-grey-1000, #24292f);
+
+  --color-primary-100: var(--ui-color-primary-100, #f3fcfd);
+  --color-primary-200: var(--ui-color-primary-200, #e7f9fa);
+  --color-primary-300: var(--ui-color-primary-300, #b5ebf0);
+  --color-primary-400: var(--ui-color-primary-400, #3fcdd9);
+  --color-primary-500: var(--ui-color-primary-500, #0bc0cf);
+  --color-primary-600: var(--ui-color-primary-600, #0eafbc);
+  --color-primary-700: var(--ui-color-primary-700, #0b8893);
+  --color-primary-main: var(--ui-color-primary-main, #0bc0cf);
+
+  --color-sprite-100: var(--ui-color-sprite-100, #fffaf5);
+  --color-sprite-200: var(--ui-color-sprite-200, #fff6eb);
+  --color-sprite-300: var(--ui-color-sprite-300, #fde2c0);
+  --color-sprite-400: var(--ui-color-sprite-400, #fbb45d);
+  --color-sprite-500: var(--ui-color-sprite-500, #faa135);
+  --color-sprite-600: var(--ui-color-sprite-600, #e49330);
+  --color-sprite-700: var(--ui-color-sprite-700, #b27226);
+  --color-sprite-main: var(--ui-color-sprite-main, #faa135);
+  --color-sprite-bg-selected: var(--ui-color-sprite-bg-selected, #fff6eb);
+
+  --color-sound-100: var(--ui-color-sound-100, #f4faff);
+  --color-sound-200: var(--ui-color-sound-200, #e9f5ff);
+  --color-sound-300: var(--ui-color-sound-300, #bae1fe);
+  --color-sound-400: var(--ui-color-sound-400, #4db2fd);
+  --color-sound-500: var(--ui-color-sound-500, #219ffc);
+  --color-sound-600: var(--ui-color-sound-600, #1e91e5);
+  --color-sound-700: var(--ui-color-sound-700, #1771b3);
+  --color-sound-main: var(--ui-color-sound-main, #219ffc);
+  --color-sound-bg-selected: var(--ui-color-sound-bg-selected, #e9f5ff);
+
+  --color-stage-100: var(--ui-color-stage-100, #f4faff);
+  --color-stage-200: var(--ui-color-stage-200, #e9f5ff);
+  --color-stage-300: var(--ui-color-stage-300, #bae1fe);
+  --color-stage-400: var(--ui-color-stage-400, #4db2fd);
+  --color-stage-500: var(--ui-color-stage-500, #219ffc);
+  --color-stage-600: var(--ui-color-stage-600, #1e91e5);
+  --color-stage-700: var(--ui-color-stage-700, #1771b3);
+  --color-stage-main: var(--ui-color-stage-main, #219ffc);
+  --color-stage-bg-selected: var(--ui-color-stage-bg-selected, #e9f5ff);
+
+  --color-danger-100: var(--ui-color-danger-100, #feefef);
+  --color-danger-200: var(--ui-color-danger-200, #fdc7c7);
+  --color-danger-300: var(--ui-color-danger-300, #ff97a0);
+  --color-danger-400: var(--ui-color-danger-400, #f15d64);
+  --color-danger-500: var(--ui-color-danger-500, #ef4149);
+  --color-danger-600: var(--ui-color-danger-600, #bc292e);
+  --color-danger-main: var(--ui-color-danger-main, #ef4149);
+
+  --color-success-100: var(--ui-color-success-100, #e0f8e3);
+  --color-success-200: var(--ui-color-success-200, #cbf1cd);
+  --color-success-300: var(--ui-color-success-300, #b0ea90);
+  --color-success-400: var(--ui-color-success-400, #90e05a);
+  --color-success-500: var(--ui-color-success-500, #63ce29);
+  --color-success-600: var(--ui-color-success-600, #3ca80c);
+  --color-success-main: var(--ui-color-success-main, #63ce29);
+
+  --color-disabled-bg: var(--ui-color-disabled-bg, #f6f8fa);
+  --color-disabled-text: var(--ui-color-disabled-text, #cbd2d8);
+  --color-title: var(--ui-color-title, #24292f);
+  --color-text: var(--ui-color-text, #57606a);
+  --color-hint-1: var(--ui-color-hint-1, #6e7781);
+  --color-hint-2: var(--ui-color-hint-2, #a7b1bb);
+  --color-dividing-line-1: var(--ui-color-dividing-line-1, #d9dfe5);
+  --color-dividing-line-2: var(--ui-color-dividing-line-2, #eaeff3);
+  --color-border: var(--ui-color-border, #cbd2d8);
+
+  /* Typography tokens bridged from the UI token layer. */
+  --font-sans: var(
+    --ui-font-family-main,
+    AlibabaHealthB,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    'Helvetica Neue',
+    Arial,
+    'Noto Sans',
+    sans-serif,
+    'Apple Color Emoji',
+    'Segoe UI Emoji',
+    'Segoe UI Symbol',
+    'Noto Color Emoji'
+  );
+  --font-mono: var(--ui-font-family-code, Menlo, Monaco, 'Courier New', monospace);
+  --font-main: var(--font-sans);
+  --font-code: var(--font-mono);
+
+  /* Radius and shadow tokens bridged from the UI token layer. */
+  --radius-none: 0px;
+  --radius-full: 9999px;
+  --radius-1: var(--ui-border-radius-1, 8px);
+  --radius-2: var(--ui-border-radius-2, 12px);
+  --radius-3: var(--ui-border-radius-3, 20px);
+
+  --shadow-none: 0 0 #0000;
+  --shadow-small: var(--ui-box-shadow-small, 0px 2px 8px 0px rgba(51, 51, 51, 0.08));
+  --shadow-big: var(--ui-box-shadow-big, 0px 4px 24px 0px rgba(36, 41, 47, 0.08));
+  --shadow-diffusion: var(--ui-box-shadow-diffusion, 0px 4px 12px 0px #d0f2f8);
+
+  /* Shared spacing and text-size helpers bridged for utility-class authoring. */
+  /* TODO: The `leading-<number>` variables conflict with Tailwind's default syntax. These styles are not very generic either, confirm whether can be removed. */
+  /* --leading-*: initial; */
+  /* --leading-1: var(--ui-line-height-1, 26px); */
+  /* --leading-2: var(--ui-line-height-2, 32px); */
+  /* --leading-3: var(--ui-line-height-3, 40px); */
+
+  /* Shared spacing and text-size helpers bridged for utility-class authoring. */
+  --spacing-middle: var(--ui-gap-middle, 16px);
+  --spacing-large: var(--ui-gap-large, 24px);
+
+  --text-body: var(--ui-font-size-text, 14px);
+  --text-body--line-height: 1.57143;
+  --text-12: 12px;
+  --text-12--line-height: 1.5;
+  --text-13: 13px;
+  --text-13--line-height: 1.5;
+  --text-15: 15px;
+  --text-15--line-height: 1.5;
+  --text-16: 16px;
+  --text-16--line-height: 1.5;
+  --text-18: 18px;
+  --text-18--line-height: 1.5;
+  --text-20: 20px;
+  --text-20--line-height: 1.5;
+  --text-24: 24px;
+  --text-24--line-height: 1.5;
+  --text-36: 36px;
+  --text-36--line-height: 1.5;
 }
diff --git a/spx-gui/src/components/community/CommunityHeader.vue b/spx-gui/src/components/community/CommunityHeader.vue
index 3eadb3a0d2..a27db5fa47 100644
--- a/spx-gui/src/components/community/CommunityHeader.vue
+++ b/spx-gui/src/components/community/CommunityHeader.vue
@@ -3,7 +3,7 @@
 <template>
   <section class="flex-none bg-grey-100">
     <CenteredWrapper class="flex h-16 items-center justify-between gap-5">
-      <h1 class="min-w-0 flex-1 truncate text-body leading-1 text-title">
+      <h1 class="min-w-0 flex-1 truncate text-16/6.5 text-title">
         <slot></slot>
       </h1>
       <label class="shrink-0">
diff --git a/spx-gui/src/components/community/ProjectsSection.vue b/spx-gui/src/components/community/ProjectsSection.vue
index 3630436446..f02c5cf853 100644
--- a/spx-gui/src/components/community/ProjectsSection.vue
+++ b/spx-gui/src/components/community/ProjectsSection.vue
@@ -3,7 +3,7 @@
 <template>
   <section :style="{ '--project-num-in-row': numInRow }">
     <header class="flex items-center justify-between" :class="isUserContext ? 'h-15 pt-5 pb-2' : 'h-13'">
-      <h2 class="text-title" :class="isUserContext ? 'text-body leading-1' : 'text-20 leading-7'">
+      <h2 class="text-title" :class="isUserContext ? 'text-16/6.5' : 'text-20/7'">
         <slot name="title"></slot>
       </h2>
       <RouterUILink
@@ -16,7 +16,10 @@
         <UIIcon class="ml-2 h-5 w-5" type="arrowRightSmall" />
       </RouterUILink>
     </header>
-    <div class="projects-wrapper relative mt-2" :class="isUserContext ? 'mb-4' : 'mb-8'">
+    <div
+      class="relative mt-2"
+      :class="[isUserContext ? 'mb-4' : 'mb-8', !queryRet.data.value?.length ? 'bg-grey-100 rounded-2' : '']"
+    >
       <ListResultWrapper content-type="project" :query-ret="queryRet" :height="254">
         <template v-if="!!slots.empty" #empty="emptyProps">
           <slot name="empty" v-bind="emptyProps"></slot>
@@ -57,10 +60,3 @@ const props = defineProps<{
 const slots = useSlots()
 const isUserContext = computed(() => props.context === 'user')
 </script>
-
-<style scoped>
-.projects-wrapper:not(:has(.projects)) {
-  background-color: var(--ui-color-grey-100);
-  border-radius: var(--ui-border-radius-2);
-}
-</style>
diff --git a/spx-gui/src/components/community/user/sidebar/UserSidebarItem.vue b/spx-gui/src/components/community/user/sidebar/UserSidebarItem.vue
index 3239fc7efa..c990385ab3 100644
--- a/spx-gui/src/components/community/user/sidebar/UserSidebarItem.vue
+++ b/spx-gui/src/components/community/user/sidebar/UserSidebarItem.vue
@@ -14,7 +14,7 @@ defineProps<{
   >
     <i class="icon-bg absolute left-3 top-3.5 h-4.25 w-4.25 rounded-full transition-all duration-100" />
     <span
-      class="relative flex-1 pl-6.5 text-[13px] leading-5 [&_svg]:absolute [&_svg]:left-0 [&_svg]:top-1/2 [&_svg]:z-1 [&_svg]:-translate-y-1/2"
+      class="relative flex-1 pl-6.5 text-13/5 [&_svg]:absolute [&_svg]:left-0 [&_svg]:top-1/2 [&_svg]:z-1 [&_svg]:-translate-y-1/2"
     >
       <slot></slot>
     </span>
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/completion/CompletionItem.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/completion/CompletionItem.vue
index 9d5c4fbeab..96f42d4fac 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/completion/CompletionItem.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/completion/CompletionItem.vue
@@ -46,8 +46,10 @@ watchEffect(() => {
     :class="active ? 'bg-grey-400' : ''"
     :title="item.label"
   >
-    <code class="min-w-0 flex-1 truncate font-code"
-      ><span v-for="(part, i) in parts" :key="i" :class="part.isMatched ? 'text-primary-main' : ''">{{ part.content }}</span></code
-    >
+    <code class="min-w-0 flex-1 truncate font-code">
+      <span v-for="(part, i) in parts" :key="i" :class="part.isMatched ? 'text-primary-main' : ''">
+        {{ part.content }}
+      </span>
+    </code>
   </li>
 </template>
diff --git a/spx-gui/src/components/project/ProjectItem.vue b/spx-gui/src/components/project/ProjectItem.vue
index 53037bde32..b3f7db01b6 100644
--- a/spx-gui/src/components/project/ProjectItem.vue
+++ b/spx-gui/src/components/project/ProjectItem.vue
@@ -7,10 +7,7 @@
     class="group w-58 flex-none overflow-hidden rounded-2 border border-grey-400 bg-grey-100 transition-all duration-100 hover:shadow-[0px_4px_12px_0px_rgba(36,41,47,0.08)]"
   >
     <RouterLink class="flex flex-col no-underline" :to="to" @click="emit('selected')">
-      <div
-        class="relative h-43 w-full bg-center bg-contain"
-        :style="{ backgroundImage: `url(${stageBgUrl})` }"
-      >
+      <div class="relative h-43 w-full bg-center bg-contain" :style="{ backgroundImage: `url(${stageBgUrl})` }">
         <UIImg class="h-full w-full" :src="thumbnailUrl" size="cover" />
         <UIDropdown v-if="operatable" trigger="click" placement="bottom-end">
           <template #trigger>
@@ -58,7 +55,7 @@
       </div>
       <div class="p-middle">
         <div class="flex items-center gap-1">
-          <h5 class="min-w-0 shrink truncate text-15 leading-6 text-title" :title="project.displayName">
+          <h5 class="min-w-0 shrink truncate text-15/6 text-title" :title="project.displayName">
             {{ project.displayName }}
           </h5>
           <template v-if="context !== 'public' && isOwner">
@@ -105,7 +102,7 @@
             </i>
           </template>
         </div>
-        <p class="mt-1 flex h-5 gap-3 text-[13px] leading-5 text-grey-700">
+        <p class="mt-1 flex h-5 gap-3 text-13/5 text-grey-700">
           <span class="flex flex-none items-center gap-1" :class="{ 'text-red-main': liking }" :title="$t(likesTitle)">
             <UIIcon class="h-3.5 w-3.5" type="heart" />
             {{ $t(humanizeCount(project.likeCount)) }}
diff --git a/spx-gui/src/components/tutorials/CourseSeriesItem.vue b/spx-gui/src/components/tutorials/CourseSeriesItem.vue
index 28d5d02aa3..23922a6321 100644
--- a/spx-gui/src/components/tutorials/CourseSeriesItem.vue
+++ b/spx-gui/src/components/tutorials/CourseSeriesItem.vue
@@ -27,13 +27,13 @@ const thumbnailUrl = useAsyncComputed(async (onCleanup) => {
       name: `Course series item \u0022${props.courseSeries.title}\u0022`,
       desc: 'Click to view the course series'
     }"
-    class="relative h-53.5 w-58 overflow-hidden rounded-3 transition-all duration-200 hover:cursor-pointer hover:-translate-y-0.5 hover:shadow-[0_4px_12px_rgba(0,0,0,0.3)]"
-    :style="{ backgroundImage: `url(${stageBgUrl})` }"
+    class="relative w-58 overflow-hidden rounded-3 transition-all duration-200 hover:cursor-pointer hover:-translate-y-0.5 hover:shadow-[0_4px_12px_rgba(0,0,0,0.3)]"
+    :style="{ height: `${courseSeriesItemHeight}px`, backgroundImage: `url(${stageBgUrl})` }"
   >
     <RouterLink :to="`/course-series/${props.courseSeries.id}`">
       <UIImg class="h-full w-full" :src="thumbnailUrl" size="cover" />
       <div
-        class="absolute bottom-0 h-10 w-full overflow-hidden whitespace-nowrap px-4 text-15 leading-10 text-grey-100 text-ellipsis"
+        class="absolute bottom-0 h-10 w-full overflow-hidden whitespace-nowrap px-4 text-15/10 text-grey-100 text-ellipsis"
         :style="{ background: 'rgb(from var(--ui-color-grey-1000) r g b / 0.2)' }"
       >
         {{ courseSeries.title }}
diff --git a/spx-gui/src/components/tutorials/TutorialsBanner.vue b/spx-gui/src/components/tutorials/TutorialsBanner.vue
index 016643863f..f13863c6c1 100644
--- a/spx-gui/src/components/tutorials/TutorialsBanner.vue
+++ b/spx-gui/src/components/tutorials/TutorialsBanner.vue
@@ -19,9 +19,9 @@ const bannerTextClass = computed(() =>
       />
     </div>
     <div class="absolute left-1/2 top-1/2 whitespace-nowrap text-[#006375]" :class="bannerTextClass">
-      <div class="text-[36px]">{{ $t({ en: 'Explore the User Tutorial', zh: '探索用户教程' }) }}</div>
-      <div class="mt-2 text-[18px]">
-      {{ $t({ en: 'Learn XBuilder and improve programming skills', zh: '学习 XBuilder，提高编程技能' }) }}
+      <div class="text-36">{{ $t({ en: 'Explore the User Tutorial', zh: '探索用户教程' }) }}</div>
+      <div class="mt-2 text-18">
+        {{ $t({ en: 'Learn XBuilder and improve programming skills', zh: '学习 XBuilder，提高编程技能' }) }}
       </div>
     </div>
   </div>
diff --git a/spx-gui/src/components/ui/UIButton.vue b/spx-gui/src/components/ui/UIButton.vue
index 61e5407530..01fc311673 100644
--- a/spx-gui/src/components/ui/UIButton.vue
+++ b/spx-gui/src/components/ui/UIButton.vue
@@ -6,7 +6,7 @@
       `variant-${variant}`,
       `shape-${shape}`,
       `color-${color}`,
-      `size-${size}`,
+      `ui-button-size-${size}`,
       loading && 'loading',
       iconOnly && 'icon-only'
     ]"
@@ -259,7 +259,7 @@ defineExpose({
 }
 
 // size
-.size-large {
+.ui-button-size-large {
   --ui-button-height: var(--ui-line-height-3);
   --ui-button-icon-size: 18px;
   --ui-button-content-padding: 0 24px;
@@ -273,7 +273,7 @@ defineExpose({
   }
 }
 
-.size-medium {
+.ui-button-size-medium {
   --ui-button-height: var(--ui-line-height-2);
   --ui-button-icon-size: 14px;
   --ui-button-content-padding: 0 16px;
@@ -287,7 +287,7 @@ defineExpose({
   }
 }
 
-.size-small {
+.ui-button-size-small {
   --ui-button-height: var(--ui-line-height-1);
   --ui-button-icon-size: 13px;
   --ui-button-content-padding: 0 12px;
diff --git a/spx-gui/src/components/ui/UIConfigProvider.vue b/spx-gui/src/components/ui/UIConfigProvider.vue
index 9f5b223eb3..4e5e2c328d 100644
--- a/spx-gui/src/components/ui/UIConfigProvider.vue
+++ b/spx-gui/src/components/ui/UIConfigProvider.vue
@@ -178,39 +178,42 @@ const cssVariables = getCssVars('--ui-', uiVariables)
 </style>
 
 <style lang="scss">
-/* Special title */
-h1 {
-  font-size: 20px;
-  line-height: 1.4;
-}
+// TODO: should move these styles to global.css ?
+@layer base {
+  /* Special title */
+  h1 {
+    font-size: 20px;
+    line-height: 1.4;
+  }
 
-/* Standard title */
-h2 {
-  font-size: 16px;
-  line-height: 1.5;
-}
+  /* Standard title */
+  h2 {
+    font-size: 16px;
+    line-height: 1.5;
+  }
 
-/* Text in navigation bar */
-h3,
-/* Text */
-h4 {
-  font-size: 14px;
-  line-height: 1.57143;
-}
+  /* Text in navigation bar */
+  h3,
+  /* Text */
+  h4 {
+    font-size: 14px;
+    line-height: 1.57143;
+  }
 
-/* More information */
-h5 {
-  font-size: 12px;
-  line-height: 1.5;
-}
+  /* More information */
+  h5 {
+    font-size: 12px;
+    line-height: 1.5;
+  }
 
-h6 {
-  font-size: 10px;
-  line-height: 1.6;
-}
+  h6 {
+    font-size: 10px;
+    line-height: 1.6;
+  }
 
-button:focus {
-  outline: 2px solid var(--ui-color-primary-700);
+  button:focus {
+    outline: 2px solid var(--ui-color-primary-700);
+  }
 }
 
 // vueuc (dep of naive-ui) uses `pointer-events: all` on children of `v-binder-follower-content`, which wraps `Popover` content in naive-ui.
diff --git a/spx-gui/src/components/ui/UITag.vue b/spx-gui/src/components/ui/UITag.vue
index f3576960c9..c6a439f6e6 100644
--- a/spx-gui/src/components/ui/UITag.vue
+++ b/spx-gui/src/components/ui/UITag.vue
@@ -41,7 +41,7 @@ const slots = useSlots()
     :class="[
       `variant-${variant}`,
       `color-${color}`,
-      `size-${size}`,
+      `ui-tag-size-${size}`,
       { checkable: !!checkable, checked: checkable ? checkable.checked : false }
     ]"
     :disabled="disabled"
@@ -174,7 +174,7 @@ const slots = useSlots()
 }
 
 // size
-.size-small {
+.ui-tag-size-small {
   --ui-tag-padding: 0 8px;
   --ui-tag-height: 20px;
   --ui-tag-font-size: 12px;
diff --git a/spx-gui/src/components/ui/UITextInput.vue b/spx-gui/src/components/ui/UITextInput.vue
index 069e85943a..ab0745b5fc 100644
--- a/spx-gui/src/components/ui/UITextInput.vue
+++ b/spx-gui/src/components/ui/UITextInput.vue
@@ -2,7 +2,7 @@
   <NInput
     ref="nInput"
     class="ui-text-input"
-    :class="[`color-${color}`, `size-${size}`]"
+    :class="[`color-${color}`, `ui-input-size-${size}`]"
     :placeholder="placeholder || ''"
     :value="value"
     :type="type"
@@ -105,10 +105,10 @@ onMounted(() => {
 }
 
 // size
-.size-medium {
+.ui-input-size-medium {
   --ui-text-input-height: 32px;
 }
-.size-large {
+.ui-input-size-large {
   --ui-text-input-height: 40px;
 }
 
diff --git a/spx-gui/src/components/ui/empty/UIEmpty.vue b/spx-gui/src/components/ui/empty/UIEmpty.vue
index f6d26fc161..45015e1323 100644
--- a/spx-gui/src/components/ui/empty/UIEmpty.vue
+++ b/spx-gui/src/components/ui/empty/UIEmpty.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="ui-empty" :class="[`size-${size}`]">
+  <div class="ui-empty" :class="[`ui-empty-size-${size}`]">
     <template v-if="size === 'large'">
       <img :src="img" />
       <slot></slot>
@@ -84,7 +84,7 @@ const slots = useSlots()
   justify-content: center;
 }
 
-.size-large {
+.ui-empty-size-large {
   width: 100%;
   flex-direction: column;
   gap: 12px;
@@ -94,7 +94,7 @@ const slots = useSlots()
   color: var(--ui-color-grey-1000);
 }
 
-.size-extra-large {
+.ui-empty-size-extra-large {
   flex-direction: column;
 
   .text {
@@ -118,8 +118,8 @@ const slots = useSlots()
   }
 }
 
-.size-small,
-.size-medium {
+.ui-empty-size-small,
+.ui-empty-size-medium {
   color: var(--ui-color-grey-600);
   gap: 8px;
 }
diff --git a/spx-gui/src/components/ui/global.css b/spx-gui/src/components/ui/global.css
index 34e65297e0..fe84e19472 100644
--- a/spx-gui/src/components/ui/global.css
+++ b/spx-gui/src/components/ui/global.css
@@ -1,18 +1,18 @@
 @import './reset.css' layer(base);
 
 @layer base {
-	*,
-	::before,
-	::after {
-		box-sizing: border-box;
-	}
+  *,
+  ::before,
+  ::after {
+    box-sizing: border-box;
+  }
 
-	button {
-		font-family: inherit;
-	}
+  button {
+    font-family: inherit;
+  }
 }
 
 @font-face {
-	font-family: 'AlibabaHealthB';
-	src: url('./fonts/AlibabaHealthFont2.0CN-85B.ttf') format('truetype');
-}
\ No newline at end of file
+  font-family: 'AlibabaHealthB';
+  src: url('./fonts/AlibabaHealthFont2.0CN-85B.ttf') format('truetype');
+}
diff --git a/spx-gui/src/components/ui/modal/UIModal.vue b/spx-gui/src/components/ui/modal/UIModal.vue
index 6410f9f879..d215bf1fa6 100644
--- a/spx-gui/src/components/ui/modal/UIModal.vue
+++ b/spx-gui/src/components/ui/modal/UIModal.vue
@@ -12,7 +12,7 @@
     <div
       ref="containerRef"
       v-radar="radar ?? { name: 'Modal', desc: 'A modal dialog for specific purpose' }"
-      :class="['container', `size-${size || 'medium'}`]"
+      :class="['container', `ui-modal-size-${size || 'medium'}`]"
     >
       <slot></slot>
     </div>
@@ -116,19 +116,19 @@ useModalEsc(
   overflow: hidden;
 }
 
-.size-small {
+.ui-modal-size-small {
   width: 480px;
 }
 
-.size-medium {
+.ui-modal-size-medium {
   width: 640px;
 }
 
-.size-large {
+.ui-modal-size-large {
   width: 960px;
 }
 
-.size-full {
+.ui-modal-size-full {
   width: 100%;
   margin: 16px;
 }
diff --git a/spx-gui/src/components/ui/modal/UIModalClose.vue b/spx-gui/src/components/ui/modal/UIModalClose.vue
index e1a4b05c98..9bbf673616 100644
--- a/spx-gui/src/components/ui/modal/UIModalClose.vue
+++ b/spx-gui/src/components/ui/modal/UIModalClose.vue
@@ -1,5 +1,8 @@
 <template>
-  <div v-radar="{ name: 'Close button', desc: 'Click to close the modal' }" :class="['ui-modal-close', `size-${size}`]">
+  <div
+    v-radar="{ name: 'Close button', desc: 'Click to close the modal' }"
+    :class="['ui-modal-close', `ui-modal-close-size-${size}`]"
+  >
     <UIIcon type="close" class="icon" />
   </div>
 </template>
@@ -34,7 +37,7 @@ withDefaults(
     background-color: var(--ui-color-grey-500);
   }
 
-  &.size-medium {
+  &.ui-modal-close-size-medium {
     width: 28px;
     height: 28px;
 
@@ -44,7 +47,7 @@ withDefaults(
     }
   }
 
-  &.size-large {
+  &.ui-modal-close-size-large {
     width: 32px;
     height: 32px;
 
diff --git a/spx-gui/src/pages/404/index.vue b/spx-gui/src/pages/404/index.vue
index 1d2c0c4e25..cfee3c308a 100644
--- a/spx-gui/src/pages/404/index.vue
+++ b/spx-gui/src/pages/404/index.vue
@@ -23,7 +23,7 @@ const router = useRouter()
       </p>
       <UIButton
         v-radar="{ name: '404 go home button', desc: 'Button to go back to home page' }"
-        class="mt-4 h-9 text-[15px]"
+        class="mt-4 h-9 text-15"
         @click="router.push('/')"
         >{{ $t({ en: 'Return to home page', zh: '回到首页' }) }}</UIButton
       >
diff --git a/spx-gui/src/pages/community/project.vue b/spx-gui/src/pages/community/project.vue
index 051dd6751c..b8168748dd 100644
--- a/spx-gui/src/pages/community/project.vue
+++ b/spx-gui/src/pages/community/project.vue
@@ -565,7 +565,7 @@ const remixesRet = useQuery(
               name: 'Project details',
               desc: 'Collapsible sections showing project description, instructions and release history'
             }"
-            class="collapse"
+            class="collapse-container"
             :default-expanded-names="['description', 'instructions', 'releases']"
           >
             <UICollapseItem :title="$t({ en: 'Description', zh: '描述' })" name="description">
@@ -804,7 +804,7 @@ const remixesRet = useQuery(
     margin: 24px 0 16px;
   }
 
-  .collapse {
+  .collapse-container {
     margin-bottom: 8px;
     flex: 1 1 0;
     overflow-y: auto;
diff --git a/spx-gui/src/pages/sign-in/token.vue b/spx-gui/src/pages/sign-in/token.vue
index dee70301f4..d45bd4140c 100644
--- a/spx-gui/src/pages/sign-in/token.vue
+++ b/spx-gui/src/pages/sign-in/token.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex h-full w-full items-center justify-center">
     <UIForm class="flex w-80 flex-col" :form="form" @submit="handleSubmit.fn">
-      <h1 class="mb-4 text-center text-body">{{ $t(title) }}</h1>
+      <h1 class="mb-4 text-center text-16">{{ $t(title) }}</h1>
       <UIFormItem path="token">
         <UITextInput
           v-model:value="form.value.token"

From e22dc7e4120ec92917c869da7f0a329b34871a3b Mon Sep 17 00:00:00 2001
From: chennan <chennan@qiniu.com>
Date: Tue, 31 Mar 2026 21:48:26 +0800
Subject: [PATCH 04/10] batch migration task 1

---
 docs/develop/tailwind-css-migration.md        |  59 +++++++-
 spx-gui/AGENTS.md                             |   5 +
 .../browser-check/BrowserVersionReminder.vue  |  12 +-
 .../app/device-check/MobileReminder.vue       |  51 +------
 .../UpdateNotificationWrapper.vue             |  53 ++-----
 .../asset/gen/animation/AnimationGenItem.vue  |  11 +-
 .../asset/gen/costume/CostumeGenItem.vue      |  15 +-
 .../components/asset/gen/sprite/SpriteGen.vue |   2 -
 .../asset/gen/sprite/SpriteGenItem.vue        |   2 -
 .../asset/gen/sprite/SpriteSettingsInput.vue  |   2 -
 .../components/community/CommunityNavbar.vue  |  13 +-
 .../components/community/MyProjectsEmpty.vue  |   2 -
 .../components/community/ProjectsSection.vue  |   2 +-
 spx-gui/src/components/community/TextView.vue |  10 +-
 .../community/footer/CommunityFooter.vue      |  47 ++----
 .../community/home/banner/GuestBanner.vue     |  47 ++----
 .../community/project/OwnerInfo.vue           |  49 ++----
 .../community/project/ReleaseHistory.vue      |   2 -
 .../community/user/AvatarZoomSlider.vue       |  71 ++-------
 .../community/user/EditAvatarModal.vue        |  49 ++----
 .../community/user/EditProfileModal.vue       |  91 ++----------
 .../community/user/FollowButton.vue           |   2 -
 .../community/user/ModifyUsernameModal.vue    |  12 +-
 .../components/community/user/UserAvatar.vue  |  32 +---
 .../components/community/user/UserHeader.vue  |  87 ++---------
 .../components/community/user/UserItem.vue    |  59 ++------
 .../community/user/UserJoinedAt.vue           |  10 +-
 .../community/user/UserUsernameInline.vue     |  92 ++----------
 .../community/user/content/UserContent.vue    |  41 +----
 .../user/sidebar/UserSidebarItem.vue          |  27 +---
 .../course/management/CourseEditModal.vue     |  56 ++-----
 .../course/management/CourseItem.vue          |  80 +++-------
 .../management/CourseItemCornerMenu.vue       |  32 +---
 .../course/management/CourseItemMini.vue      |  67 ++-------
 .../management/CourseManagementModal.vue      |  61 ++------
 .../course/management/CourseSelector.vue      |  45 +-----
 .../management/CourseSeriesEditModal.vue      | 113 ++++----------
 .../course/management/CourseSeriesItem.vue    | 140 +++++-------------
 .../management/CourseSeriesItemCornerMenu.vue |  32 +---
 .../CourseSeriesManagementModal.vue           |  61 ++------
 .../management/ProjectReferencesInput.vue     |  64 ++------
 .../course/management/SelectedCoursesList.vue |  51 ++-----
 .../course/management/ThumbnailUploader.vue   |  40 +----
 .../ui/completion/CompletionUI.vue            |   2 -
 .../ui/context-menu/ContextMenu.vue           |   2 -
 .../ui/definition/DefinitionDetail.vue        |   2 -
 .../ui/markdown/ResourcePreview.vue           |   2 -
 .../components/editor/common/PlayControl.vue  |   6 +-
 .../components/editor/navbar/EditorNavbar.vue |   2 +-
 .../editor/sprite/CostumeDetail.vue           |  29 +---
 .../editor/stage/backdrop/BackdropDetail.vue  |  20 +--
 .../src/components/navbar/NavbarDropdown.vue  |  27 +---
 spx-gui/src/components/navbar/NavbarLang.vue  |  16 +-
 spx-gui/src/components/navbar/NavbarLogo.vue  |  32 ++--
 .../src/components/navbar/NavbarProfile.vue   |  65 ++------
 .../src/components/navbar/NavbarTutorials.vue |  24 +--
 .../components/project/ProjectCreateModal.vue |  17 +--
 .../src/components/project/ProjectItem.vue    |   4 +-
 .../project/ProjectModifyNameModal.vue        |  12 +-
 .../components/project/ProjectOpenModal.vue   |  17 +--
 .../project/ProjectPublishModal.vue           |  37 +----
 .../project/ProjectPublishedModal.vue         |  23 +--
 .../project/ProjectSharingLinkModal.vue       |  23 +--
 .../src/components/tutorials/CourseItem.vue   |  46 +-----
 .../tutorials/TutorialCourseSuccessModal.vue  |  42 +-----
 .../tutorials/TutorialStateIndicator.vue      |  38 +----
 spx-gui/src/pages/community/search.vue        |  44 +-----
 .../src/pages/community/user/followers.vue    |   9 +-
 .../src/pages/community/user/following.vue    |   9 +-
 spx-gui/src/pages/community/user/index.vue    |  42 +-----
 spx-gui/src/pages/community/user/likes.vue    |  23 +--
 spx-gui/src/pages/community/user/overview.vue |  18 +--
 spx-gui/src/pages/community/user/projects.vue |  31 +---
 spx-gui/src/pages/tutorials/course-series.vue | 106 +++----------
 74 files changed, 494 insertions(+), 2075 deletions(-)

diff --git a/docs/develop/tailwind-css-migration.md b/docs/develop/tailwind-css-migration.md
index e1e78ca09b..754fd38b3c 100644
--- a/docs/develop/tailwind-css-migration.md
+++ b/docs/develop/tailwind-css-migration.md
@@ -397,6 +397,12 @@ Token usage preference:
 - in Tailwind utility classes, prefer the bridged semantic tokens such as `text-text`, `text-title`, and `bg-primary-100`
 - in local CSS or SCSS rules, prefer using the original `--ui-*` variables directly, because `--ui-*` remains the source of truth and the Tailwind bridge exists primarily for utility-class authoring
 
+Bridge naming and text-token preference:
+
+- choose bridge names that do not collide with Tailwind defaults or existing UI-library class names; avoid introducing helpers such as `leading-1` that look like built-in Tailwind utilities but mean something project-specific
+- define text-size tokens in `@theme` before using named utilities such as `text-12`, `text-13`, `text-24`, or `text-36`
+- when a named text utility should carry a default line-height, define it through the paired `--text-*-line-height` token instead of introducing a parallel custom leading scale
+
 ### 3. Prefer Tailwind For Straightforward Layout And Surface Styling
 
 The pilot confirmed that Tailwind works well for the following kinds of changes:
@@ -471,7 +477,58 @@ The pilot reinforced the original migration strategy:
 
 The goal is clearer and more maintainable code, not maximizing utility-class usage.
 
-### 8. Keep Exact Local Values Local, With A Visible TODO
+### 8. Preserve Styling Hook Classes Across Component Boundaries
+
+Recent migrations exposed a failure mode that is easy to miss in review: some business components rely on semantic classes exported by child components as part of a styling contract.
+
+Examples from the pilot:
+
+- `CourseItem.vue` and `CourseSeriesItem.vue` reveal slotted menus through parent `:deep(.corner-menu)` rules
+- `CourseSelector.vue` adjusts a child action icon through selectors that depend on `.course-item-mini` and `.action-icon`
+
+Preferred style:
+
+- treat these semantic classes as styling API surfaces, not incidental markup
+- do not remove them just because the element's own spacing, color, or border styles moved into Tailwind utilities
+- when a parent or sibling component still depends on one of these classes, preserve it and migrate only the visual declarations around it
+
+Rule of thumb:
+
+- if a class name is referenced outside the current component file, keep it unless the dependent selector is removed in the same change
+
+### 9. Keep Cross-Component Descendant Styling In Local CSS
+
+The pilot also showed that Tailwind arbitrary descendant selectors become hard to read once they cross component boundaries, target slot content, or mix with `:deep(...)`.
+
+Examples:
+
+- hover-reveal logic for slotted corner menus
+- parent selectors that style child internals through `:deep(...)`
+- slot-content targeting where the child controls the rendered class names
+
+Preferred style:
+
+- keep authored layout, spacing, and simple surfaces in Tailwind
+- keep cross-component descendant styling in a small local CSS block, preferably plain CSS when SCSS features are not needed
+
+This split is usually clearer than packing selectors such as `[&:hover_.corner-menu]...` into the template.
+
+### 10. Respect Internal Root Styles Of Wrapper Components
+
+Wrapper components in `src/components/ui/` sometimes style their own root elements in ways that external utilities cannot safely replace.
+
+Two concrete cases from the pilot:
+
+- `UIImg` keeps `position: relative` on its root so loading overlays and background-image behavior work correctly
+- `UIIcon` fixes its root width and height, so `h-*` / `w-*` classes on the component instance may not win
+
+Preferred style:
+
+- before applying root-level positioning or sizing utilities to a wrapped UI component, inspect the component implementation
+- if the wrapper already owns the root layout semantics, use an outer wrapper for positioning concerns such as `absolute`, `top`, `left`, and `z-index`
+- for one-off width/height overrides on wrapper roots such as `UIIcon`, prefer inline `style` when that is the shortest and clearest way to win the cascade
+
+### 11. Keep Exact Local Values Local, With A Visible TODO
 
 Some migrated components still need exact local visual values that are not part of the current token system.
 
diff --git a/spx-gui/AGENTS.md b/spx-gui/AGENTS.md
index 865832f8be..9834d8e226 100644
--- a/spx-gui/AGENTS.md
+++ b/spx-gui/AGENTS.md
@@ -101,11 +101,16 @@ When working with backend unique string identifiers such as `username`, project
 * Prefer Tailwind for straightforward layout and surface styling: flex, grid, spacing, sizing, alignment, overflow, simple typography, and simple hover states.
 * When Tailwind classes stay readable, write them directly in the template and remove the local style block after verification.
 * Keep local CSS or SCSS for deep selectors, generated content, third-party DOM overrides, and complex stateful widgets.
+* Preserve semantic hook classes that are consumed by parent selectors, slot content, or `:deep(...)` rules. Do not remove classes such as `.corner-menu` or `.course-item-mini` just because the element's own visual styles moved to Tailwind.
+* Prefer plain local CSS over Tailwind arbitrary descendant selectors for cross-component styling, slot-content targeting, and `:deep(...)` behavior. Keep Tailwind for the authored layout, but keep these cross-component hooks easy to read and audit.
 * Do not force a file to become fully Tailwind if a small amount of local CSS or SCSS remains the clearest expression.
 * Use `:style` for one-off values that are clearer inline than as Tailwind arbitrary values or custom utilities.
 * For important or non-obvious background assets, prefer TypeScript imports plus inline `backgroundImage` binding over Tailwind `bg-[url(...)]` classes.
+* Before styling `UIImg`, `UIIcon`, or similar wrappers with root-level positioning or sizing utilities, check whether the component already styles its own root element. If those internal root styles conflict, prefer an outer wrapper for layout and inline `style` for one-off width/height overrides.
 * Do not introduce setup variables for single-use style values unless they are reused, computed, or materially improve readability.
 * When a non-token visual value needs to remain exact and local, keep it local instead of forcing it into the global token bridge. Add a nearby comment such as `TODO: review this ... value` so it is visible in later design cleanup or tokenization work.
+* When extending the Tailwind theme bridge in `src/app.css`, choose token names that do not collide with Tailwind defaults or existing UI-library class names. Define text-size tokens before using named utilities like `text-24`, and use `--text-*-line-height` when a named text utility should carry a default line-height.
+* Preserve existing comments and TODOs during style migration when they still explain a real styling constraint or follow-up.
 
 ### Menu Item Text Guidelines
 
diff --git a/spx-gui/src/components/app/browser-check/BrowserVersionReminder.vue b/spx-gui/src/components/app/browser-check/BrowserVersionReminder.vue
index e8ffa0ae56..be6886cfb1 100644
--- a/spx-gui/src/components/app/browser-check/BrowserVersionReminder.vue
+++ b/spx-gui/src/components/app/browser-check/BrowserVersionReminder.vue
@@ -8,7 +8,8 @@
     @update:visible="visible = $event"
   >
     <div>{{ $t(content) }}</div>
-    <footer class="footer">
+
+    <footer class="mt-6 flex justify-end gap-3">
       <UIButton
         v-radar="{
           name: 'Do not show again button',
@@ -87,12 +88,3 @@ onMounted(() => {
   visible.value = true
 })
 </script>
-
-<style scoped lang="scss">
-.footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 12px;
-  margin-top: 24px;
-}
-</style>
diff --git a/spx-gui/src/components/app/device-check/MobileReminder.vue b/spx-gui/src/components/app/device-check/MobileReminder.vue
index 7fa1a1129e..4a2444d57f 100644
--- a/spx-gui/src/components/app/device-check/MobileReminder.vue
+++ b/spx-gui/src/components/app/device-check/MobileReminder.vue
@@ -1,11 +1,13 @@
 <template>
-  <div class="mobile-reminder">
-    <div class="guide-img">
-      <img :src="imgDesktopRequired" alt="Desktop Required Image" />
+  <div class="flex min-h-screen flex-col items-center justify-center px-15 py-10">
+    <div class="mb-12">
+      <img class="h-auto w-60" :src="imgDesktopRequired" alt="Desktop Required Image" />
     </div>
-    <div class="guide-text">
-      <h1>{{ t({ en: 'Please visit on desktop', zh: '请在电脑上访问' }) }}</h1>
-      <p>
+    <div class="mb-10 text-center">
+      <h1 class="mb-3 text-20 font-semibold text-grey-1000">
+        {{ t({ en: 'Please visit on desktop', zh: '请在电脑上访问' }) }}
+      </h1>
+      <p class="text-body text-grey-900">
         {{
           t({
             en: 'XBuilder is designed for desktop devices. Please visit this page on your computer for the full experience.',
@@ -42,40 +44,3 @@ const handleCopy = useMessageHandle(
   { en: 'Copied to clipboard', zh: '已复制到剪贴板' }
 ).fn
 </script>
-
-<style lang="scss" scoped>
-.mobile-reminder {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 40px 60px;
-
-  .guide-img {
-    margin-bottom: 48px;
-    img {
-      width: 240px;
-      height: auto;
-    }
-  }
-
-  .guide-text {
-    margin-bottom: 40px;
-    text-align: center;
-
-    h1 {
-      font-size: 20px;
-      font-weight: 600;
-      color: var(--ui-color-grey-1000);
-      margin-bottom: 12px;
-    }
-
-    p {
-      font-size: 14px;
-      line-height: 22px;
-      color: var(--ui-color-grey-900);
-    }
-  }
-}
-</style>
diff --git a/spx-gui/src/components/app/update-check/UpdateNotificationWrapper.vue b/spx-gui/src/components/app/update-check/UpdateNotificationWrapper.vue
index e0f44a89a5..7ded17675c 100644
--- a/spx-gui/src/components/app/update-check/UpdateNotificationWrapper.vue
+++ b/spx-gui/src/components/app/update-check/UpdateNotificationWrapper.vue
@@ -1,8 +1,13 @@
 <template>
-  <div class="update-notification-wrapper">
-    <div v-if="visible" class="notification" role="status" aria-live="polite">
-      <div class="message">
-        <DotLottieVue class="icon" autoplay loop :src="notificationIconUrl" />
+  <div class="flex h-full min-h-0 flex-col">
+    <div
+      v-if="visible"
+      class="flex flex-none items-center justify-center gap-6 bg-yellow-200 px-6 py-2.75 text-grey-900"
+      role="status"
+      aria-live="polite"
+    >
+      <div class="flex items-center gap-3 text-body text-grey-900">
+        <DotLottieVue class="h-6 w-6" autoplay loop :src="notificationIconUrl" />
         {{
           $t({
             en: 'A new version of XBuilder is available. Reload to get the latest features and improvements.',
@@ -20,7 +25,7 @@
         {{ $t({ en: 'Reload now', zh: '立即刷新' }) }}
       </UIButton>
     </div>
-    <div class="content">
+    <div class="min-h-0 flex-1">
       <slot></slot>
     </div>
   </div>
@@ -54,41 +59,3 @@ onUnmounted(() => {
   checker.stop()
 })
 </script>
-
-<style lang="scss" scoped>
-.update-notification-wrapper {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  min-height: 0;
-}
-
-.notification {
-  flex: 0 0 auto;
-  padding: 11px 24px;
-  background-color: var(--ui-color-yellow-200);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 24px;
-  color: var(--ui-color-grey-900);
-
-  .message {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    font-size: 14px;
-    line-height: 22px;
-
-    .icon {
-      width: 24px;
-      height: 24px;
-    }
-  }
-}
-
-.content {
-  flex: 1 1 auto;
-  min-height: 0;
-}
-</style>
diff --git a/spx-gui/src/components/asset/gen/animation/AnimationGenItem.vue b/spx-gui/src/components/asset/gen/animation/AnimationGenItem.vue
index b0f2ab2220..d36bc64a06 100644
--- a/spx-gui/src/components/asset/gen/animation/AnimationGenItem.vue
+++ b/spx-gui/src/components/asset/gen/animation/AnimationGenItem.vue
@@ -68,12 +68,12 @@ const highlight = computed(() => props.gen.generateVideoState.status === 'finish
     <template v-if="gen.result != null" #preview>
       <CostumesAutoPlayer
         v-if="hovered"
-        class="preview"
+        class="h-full w-full"
         :costumes="gen.result.costumes"
         :duration="gen.result.duration"
         :placeholder-img="imgSrc"
       />
-      <UIImg v-else class="preview" :src="imgSrc" :loading="imgLoading" />
+      <UIImg v-else class="h-full w-full" :src="imgSrc" :loading="imgLoading" />
     </template>
     <UIBlockItemTitle size="medium">{{ gen.name }}</UIBlockItemTitle>
     <CornerMenu v-if="active" color="primary">
@@ -82,10 +82,3 @@ const highlight = computed(() => props.gen.generateVideoState.status === 'finish
     </CornerMenu>
   </GenItem>
 </template>
-
-<style lang="scss" scoped>
-.preview {
-  width: 100%;
-  height: 100%;
-}
-</style>
diff --git a/spx-gui/src/components/asset/gen/costume/CostumeGenItem.vue b/spx-gui/src/components/asset/gen/costume/CostumeGenItem.vue
index 03f22343ab..3961e72b3d 100644
--- a/spx-gui/src/components/asset/gen/costume/CostumeGenItem.vue
+++ b/spx-gui/src/components/asset/gen/costume/CostumeGenItem.vue
@@ -66,9 +66,9 @@ const highlight = computed(() => props.gen.generateState.status === 'finished')
     @click="emit('click')"
   >
     <template v-if="gen.result != null" #preview>
-      <UIImg class="preview" :src="url" :loading="imageLoading" />
+      <UIImg class="h-full w-full" :src="url" :loading="imageLoading" />
     </template>
-    <UIBlockItemTitle size="medium" :class="{ 'is-default': isDefault }">{{ gen.name }}</UIBlockItemTitle>
+    <UIBlockItemTitle size="medium" :class="{ 'text-turquoise-500': isDefault }">{{ gen.name }}</UIBlockItemTitle>
     <CornerMenu v-if="operable && active" color="primary">
       <RenameMenuItem v-radar="{ name: 'Rename', desc: 'Click to rename the costume' }" @click="emit('rename')" />
       <RemoveMenuItem
@@ -79,14 +79,3 @@ const highlight = computed(() => props.gen.generateState.status === 'finished')
     </CornerMenu>
   </GenItem>
 </template>
-
-<style lang="scss" scoped>
-.preview {
-  width: 100%;
-  height: 100%;
-}
-
-.is-default {
-  color: var(--ui-color-turquoise-500);
-}
-</style>
diff --git a/spx-gui/src/components/asset/gen/sprite/SpriteGen.vue b/spx-gui/src/components/asset/gen/sprite/SpriteGen.vue
index 0d81fcbb84..89a60fa931 100644
--- a/spx-gui/src/components/asset/gen/sprite/SpriteGen.vue
+++ b/spx-gui/src/components/asset/gen/sprite/SpriteGen.vue
@@ -59,5 +59,3 @@ provideLocalEditorCtx(editorCtxInGen)
     @resolved="emit('resolved', $event)"
   />
 </template>
-
-<style lang="scss" scoped></style>
diff --git a/spx-gui/src/components/asset/gen/sprite/SpriteGenItem.vue b/spx-gui/src/components/asset/gen/sprite/SpriteGenItem.vue
index ebc43ca816..9ea4686092 100644
--- a/spx-gui/src/components/asset/gen/sprite/SpriteGenItem.vue
+++ b/spx-gui/src/components/asset/gen/sprite/SpriteGenItem.vue
@@ -47,5 +47,3 @@ const highlight = computed(() => props.gen.contentPreparingState.status === 'fin
     <UIBlockItemTitle size="medium">{{ gen.settings.name }}</UIBlockItemTitle>
   </GenItem>
 </template>
-
-<style lang="scss" scoped></style>
diff --git a/spx-gui/src/components/asset/gen/sprite/SpriteSettingsInput.vue b/spx-gui/src/components/asset/gen/sprite/SpriteSettingsInput.vue
index fa76ac2686..676f47741b 100644
--- a/spx-gui/src/components/asset/gen/sprite/SpriteSettingsInput.vue
+++ b/spx-gui/src/components/asset/gen/sprite/SpriteSettingsInput.vue
@@ -79,5 +79,3 @@ const submitText = computed(() => {
     </template>
   </SettingsInput>
 </template>
-
-<style lang="scss" scoped></style>
diff --git a/spx-gui/src/components/community/CommunityNavbar.vue b/spx-gui/src/components/community/CommunityNavbar.vue
index 65bf5c182d..338e53e034 100644
--- a/spx-gui/src/components/community/CommunityNavbar.vue
+++ b/spx-gui/src/components/community/CommunityNavbar.vue
@@ -5,7 +5,7 @@
         :trigger-radar="{ name: 'Project menu', desc: 'Hover to see project options (create/open project)' }"
       >
         <template #trigger>
-          <UIIcon type="plus" />
+          <UIIcon type="plus" style="width: 24px; height: 24px" />
         </template>
         <UIMenu>
           <NavbarNewProjectItem />
@@ -16,7 +16,7 @@
       <NavbarTutorials v-if="showTutorialsEntry" />
     </template>
     <template #right>
-      <div class="search">
+      <div class="flex w-85 items-center px-3">
         <UITextInput
           v-model:value="searchInput"
           v-radar="{ name: 'Search input', desc: 'Input and press enter to search projects' }"
@@ -76,12 +76,3 @@ watch(
   { immediate: true }
 )
 </script>
-
-<style lang="scss" scoped>
-.search {
-  padding: 0 12px;
-  width: 340px;
-  display: flex;
-  align-items: center;
-}
-</style>
diff --git a/spx-gui/src/components/community/MyProjectsEmpty.vue b/spx-gui/src/components/community/MyProjectsEmpty.vue
index 9a74aa25cf..f661763dad 100644
--- a/spx-gui/src/components/community/MyProjectsEmpty.vue
+++ b/spx-gui/src/components/community/MyProjectsEmpty.vue
@@ -40,5 +40,3 @@ const handleNewProject = useMessageHandle(
     </template>
   </UIEmpty>
 </template>
-
-<style lang="scss" scoped></style>
diff --git a/spx-gui/src/components/community/ProjectsSection.vue b/spx-gui/src/components/community/ProjectsSection.vue
index f02c5cf853..9fa6917b58 100644
--- a/spx-gui/src/components/community/ProjectsSection.vue
+++ b/spx-gui/src/components/community/ProjectsSection.vue
@@ -13,7 +13,7 @@
         :to="linkTo"
       >
         <slot name="link"></slot>
-        <UIIcon class="ml-2 h-5 w-5" type="arrowRightSmall" />
+        <UIIcon class="ml-2" style="width: 20px; height: 20px" type="arrowRightSmall" />
       </RouterUILink>
     </header>
     <div
diff --git a/spx-gui/src/components/community/TextView.vue b/spx-gui/src/components/community/TextView.vue
index 9ef1ce0980..11b8607b47 100644
--- a/spx-gui/src/components/community/TextView.vue
+++ b/spx-gui/src/components/community/TextView.vue
@@ -8,16 +8,8 @@ defineProps<{
 </script>
 
 <template>
-  <div class="text-view">
+  <div class="overflow-y-auto wrap-break-word whitespace-pre-wrap">
     <template v-if="!!text">{{ text }}</template>
     <template v-else>{{ placeholder ?? '&nbsp;' }}</template>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.text-view {
-  overflow-y: auto;
-  white-space: pre-wrap;
-  word-break: break-word;
-}
-</style>
diff --git a/spx-gui/src/components/community/footer/CommunityFooter.vue b/spx-gui/src/components/community/footer/CommunityFooter.vue
index 6727e29c69..8fd6ec2391 100644
--- a/spx-gui/src/components/community/footer/CommunityFooter.vue
+++ b/spx-gui/src/components/community/footer/CommunityFooter.vue
@@ -4,43 +4,26 @@ import { UILink } from '@/components/ui'
 </script>
 
 <template>
-  <footer v-if="showLicense" class="community-footer">
-    <span class="part">{{ $t({ en: '© 2025 Qiniu Cloud.', zh: '© 2025 七牛云' }) }}</span>
+  <footer
+    v-if="showLicense"
+    class="flex h-12.5 w-full shrink-0 items-center justify-center gap-6 text-12 text-grey-700"
+  >
+    <span class="flex items-center justify-center">{{ $t({ en: '© 2025 Qiniu Cloud.', zh: '© 2025 七牛云' }) }}</span>
     <UILink
-      class="part"
+      class="flex items-center justify-center no-underline"
       type="boring"
       target="_blank"
       href="https://www.beian.gov.cn/portal/registerSystemInfo?recordcode=31011502000961"
-      ><img class="icon" src="./license-icon.png" />沪公网安备 31011502000961 号</UILink
     >
-    <UILink class="part" type="boring" target="_blank" href="https://beian.miit.gov.cn/"
-      >浙 ICP 备 2025161674 号-3</UILink
+      <img class="mr-1 h-4 w-4" src="./license-icon.png" />沪公网安备 31011502000961 号
+    </UILink>
+    <UILink
+      class="flex items-center justify-center no-underline"
+      type="boring"
+      target="_blank"
+      href="https://beian.miit.gov.cn/"
     >
+      浙 ICP 备 2025161674 号-3
+    </UILink>
   </footer>
 </template>
-
-<style lang="scss" scoped>
-.community-footer {
-  flex: 0 0 auto;
-  width: 100%;
-  height: 50px;
-  display: flex;
-  flex-direction: row;
-  gap: 24px;
-  justify-content: center;
-  align-items: center;
-  color: var(--ui-color-grey-700);
-  font-size: 12px;
-}
-.part {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-decoration: none;
-}
-.icon {
-  margin-right: 4px;
-  width: 16px;
-  height: 16px;
-}
-</style>
diff --git a/spx-gui/src/components/community/home/banner/GuestBanner.vue b/spx-gui/src/components/community/home/banner/GuestBanner.vue
index 3e1442febc..50f2b6aae9 100644
--- a/spx-gui/src/components/community/home/banner/GuestBanner.vue
+++ b/spx-gui/src/components/community/home/banner/GuestBanner.vue
@@ -2,6 +2,7 @@
 import { initiateSignIn } from '@/stores/user'
 import { UIButton } from '@/components/ui'
 import CommunityCard from '../../CommunityCard.vue'
+import bgSvg from './bg.svg'
 
 function handleJoin() {
   initiateSignIn()
@@ -9,17 +10,20 @@ function handleJoin() {
 </script>
 
 <template>
-  <CommunityCard class="guest-banner">
-    <div class="main">
-      <h1 class="title">
+  <CommunityCard class="p-3">
+    <div
+      class="relative rounded-2 bg-[#f0faff] bg-no-repeat px-13 pt-12 pb-12.5 text-[#073156]"
+      :style="{ backgroundImage: `url(${bgSvg})`, backgroundPosition: 'center right 54px' }"
+    >
+      <h1 class="text-24">
         {{ $t({ en: 'Join XBuilder', zh: '加入 XBuilder' }) }}
       </h1>
-      <h4 class="sub-title">
+      <h4 class="mt-2 text-13/5">
         {{ $t({ en: 'Build and share your projects', zh: '创作并分享你的作品' }) }}
       </h4>
       <UIButton
         v-radar="{ name: 'Join now button', desc: 'Click to sign in/up' }"
-        class="join-btn"
+        class="mt-7"
         color="primary"
         size="large"
         @click="handleJoin"
@@ -29,36 +33,3 @@ function handleJoin() {
     </div>
   </CommunityCard>
 </template>
-
-<style lang="scss" scoped>
-.guest-banner {
-  padding: 12px;
-}
-
-.main {
-  position: relative;
-  padding: 48px 52px 50px;
-
-  border-radius: var(--ui-border-radius-2);
-  color: #073156;
-  background-color: #f0faff;
-  background-image: url('./bg.svg');
-  background-repeat: no-repeat;
-  background-position: center right 54px;
-}
-
-.title {
-  font-size: 24px;
-  line-height: 1.5;
-}
-
-.sub-title {
-  font-size: 13px;
-  line-height: 20px;
-  margin-top: 8px;
-}
-
-.join-btn {
-  margin-top: 28px;
-}
-</style>
diff --git a/spx-gui/src/components/community/project/OwnerInfo.vue b/spx-gui/src/components/community/project/OwnerInfo.vue
index 9f22363e8e..9e724e3e06 100644
--- a/spx-gui/src/components/community/project/OwnerInfo.vue
+++ b/spx-gui/src/components/community/project/OwnerInfo.vue
@@ -12,46 +12,15 @@ const avatarUrl = useAvatarUrl(() => user.value?.avatar)
 </script>
 
 <template>
-  <UserLink class="owner-info" :user="user?.username ?? null">
-    <i class="avatar" :style="user != null ? { backgroundImage: `url(${avatarUrl})` } : null"></i>
+  <!-- TODO: extract to `@/components/ui/`? -->
+  <UserLink
+    class="link-boring group inline-flex items-center gap-1 text-title underline"
+    :user="user?.username ?? null"
+  >
+    <i
+      class="block h-6 w-6 rounded-full border-2 border-grey-100 bg-grey-100 bg-center bg-contain transition-[border-color] duration-100 group-hover:border-primary-400 group-active:border-primary-600"
+      :style="user != null ? { backgroundImage: `url(${avatarUrl})` } : null"
+    ></i>
     {{ user?.displayName }}
   </UserLink>
 </template>
-
-<style lang="scss" scoped>
-.owner-info {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-
-  color: var(--ui-color-title);
-  // TODO: extract to `@/components/ui/`?
-  text-decoration: underline;
-  transition: 0.1s;
-
-  &:hover {
-    color: var(--ui-color-primary-main);
-    .avatar {
-      border-color: var(--ui-color-primary-400);
-    }
-  }
-  &:active {
-    color: var(--ui-color-primary-600);
-    .avatar {
-      border-color: var(--ui-color-primary-600);
-    }
-  }
-}
-
-.avatar {
-  display: block;
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  border: 2px solid var(--ui-color-grey-100);
-  background-color: var(--ui-color-grey-100);
-  background-position: center;
-  background-size: contain;
-  transition: 0.1s;
-}
-</style>
diff --git a/spx-gui/src/components/community/project/ReleaseHistory.vue b/spx-gui/src/components/community/project/ReleaseHistory.vue
index bf82076720..ffd6e7a009 100644
--- a/spx-gui/src/components/community/project/ReleaseHistory.vue
+++ b/spx-gui/src/components/community/project/ReleaseHistory.vue
@@ -28,5 +28,3 @@ defineProps<{
     </UITimelineItem>
   </UITimeline>
 </template>
-
-<style lang="scss" scoped></style>
diff --git a/spx-gui/src/components/community/user/AvatarZoomSlider.vue b/spx-gui/src/components/community/user/AvatarZoomSlider.vue
index 050dfa4dc0..567044d94a 100644
--- a/spx-gui/src/components/community/user/AvatarZoomSlider.vue
+++ b/spx-gui/src/components/community/user/AvatarZoomSlider.vue
@@ -31,19 +31,19 @@ function handleValueUpdate(value: number) {
 </script>
 
 <template>
-  <div class="avatar-zoom-slider">
+  <div class="flex h-12 w-91.5 items-center justify-center gap-2.5">
     <button
       v-radar="{ name: 'Zoom out avatar button', desc: 'Click to zoom out the avatar image' }"
-      class="zoom-button"
+      class="flex h-6 w-6 flex-none items-center justify-center border-none bg-transparent p-0 text-grey-900 enabled:cursor-pointer enabled:hover:text-grey-1000 disabled:cursor-not-allowed disabled:text-grey-700"
       type="button"
       :disabled="props.disabled || props.value <= props.min"
       @click="handleValueUpdate(props.value - props.buttonStep)"
     >
-      <UIIcon class="zoom-icon" type="minus" />
+      <UIIcon style="width: 20px; height: 20px" type="minus" />
     </button>
 
     <UISlider
-      class="slider"
+      class="slider min-w-0 flex-[1_1_auto]"
       update-on="input"
       :min="props.min"
       :max="props.max"
@@ -56,40 +56,29 @@ function handleValueUpdate(value: number) {
 
     <button
       v-radar="{ name: 'Zoom in avatar button', desc: 'Click to zoom in the avatar image' }"
-      class="zoom-button"
+      class="flex h-6 w-6 flex-none items-center justify-center border-none bg-transparent p-0 text-grey-900 enabled:cursor-pointer enabled:hover:text-grey-1000 disabled:cursor-not-allowed disabled:text-grey-700"
       type="button"
       :disabled="props.disabled || props.value >= props.max"
       @click="handleValueUpdate(props.value + props.buttonStep)"
     >
-      <UIIcon class="zoom-icon" type="plus" />
+      <UIIcon style="width: 20px; height: 20px" type="plus" />
     </button>
   </div>
 </template>
 
-<style scoped lang="scss">
-.avatar-zoom-slider {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
-  width: 366px;
-  height: 48px;
-}
-
+<style scoped>
 .slider {
-  flex: 1 1 auto;
-  min-width: 0;
+}
 
-  &:deep(.n-slider-handle) {
-    background: transparent;
-    box-shadow: none;
-  }
+.slider:deep(.n-slider-handle) {
+  background: transparent;
+  box-shadow: none;
+}
 
-  &:deep(.n-slider-rail),
-  &:deep(.n-slider-rail__fill) {
-    height: 6px;
-    border-radius: 999px;
-  }
+.slider:deep(.n-slider-rail),
+.slider:deep(.n-slider-rail__fill) {
+  height: 6px;
+  border-radius: 999px;
 }
 
 .slider:deep(.thumb) {
@@ -98,32 +87,4 @@ function handleValueUpdate(value: number) {
     inset 0 0 0 2px var(--ui-color-primary-400),
     0 1px 2px rgb(36 41 47 / 10%);
 }
-
-.zoom-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex: 0 0 auto;
-  width: 24px;
-  height: 24px;
-  padding: 0;
-  border: none;
-  background: none;
-  color: var(--ui-color-grey-900);
-  cursor: pointer;
-
-  &:not(:disabled):hover {
-    color: var(--ui-color-grey-1000);
-  }
-
-  &:disabled {
-    color: var(--ui-color-grey-700);
-    cursor: not-allowed;
-  }
-}
-
-.zoom-icon {
-  width: 20px;
-  height: 20px;
-}
 </style>
diff --git a/spx-gui/src/components/community/user/EditAvatarModal.vue b/spx-gui/src/components/community/user/EditAvatarModal.vue
index 62f165cd61..e082cf4d5a 100644
--- a/spx-gui/src/components/community/user/EditAvatarModal.vue
+++ b/spx-gui/src/components/community/user/EditAvatarModal.vue
@@ -392,21 +392,15 @@ async function handleImageLoad() {
   >
     <div
       ref="cropperHostRef"
-      class="cropper-host"
+      class="cropper-host mx-auto aspect-square w-91.5 overflow-hidden bg-grey-300"
       :class="{ disabled: handleConfirm.isLoading.value }"
       @wheel.prevent="handleWheelZoom"
     >
-      <img
-        ref="imageRef"
-        class="source-image"
-        :src="sourceUrlRef"
-        @load="handleImageLoad"
-        @error="handleImageLoadError.fn"
-      />
+      <img ref="imageRef" class="hidden" :src="sourceUrlRef" @load="handleImageLoad" @error="handleImageLoadError.fn" />
     </div>
 
     <AvatarZoomSlider
-      class="zoom-slider"
+      class="mx-auto mt-2.5"
       :value="zoomValueRef"
       :min="zoomMin"
       :max="zoomMax"
@@ -416,8 +410,8 @@ async function handleImageLoad() {
       @update:value="setZoomValue"
     />
 
-    <footer class="footer">
-      <div class="actions">
+    <footer class="mt-10 flex justify-end">
+      <div class="flex items-center gap-5">
         <UIButton
           v-radar="{ name: 'Cancel edit avatar button', desc: 'Click to cancel editing avatar' }"
           color="boring"
@@ -440,38 +434,13 @@ async function handleImageLoad() {
   </UIFormModal>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .cropper-host {
-  width: 366px;
-  aspect-ratio: 1 / 1;
-  margin: 0 auto;
-  overflow: hidden;
-  background: var(--ui-color-grey-300);
-
-  &.disabled {
-    pointer-events: none;
-    opacity: 0.9;
-  }
-}
-
-.source-image {
-  display: none;
-}
-
-.footer {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 40px;
-}
-
-.zoom-slider {
-  margin: 10px auto 0;
 }
 
-.actions {
-  display: flex;
-  align-items: center;
-  gap: 20px;
+.cropper-host.disabled {
+  pointer-events: none;
+  opacity: 0.9;
 }
 
 .cropper-host:deep(cropper-canvas) {
diff --git a/spx-gui/src/components/community/user/EditProfileModal.vue b/spx-gui/src/components/community/user/EditProfileModal.vue
index 25636452f6..acac23d7a6 100644
--- a/spx-gui/src/components/community/user/EditProfileModal.vue
+++ b/spx-gui/src/components/community/user/EditProfileModal.vue
@@ -117,19 +117,25 @@ const handleSubmit = useMessageHandle(async () => {
     :visible="props.visible"
     @update:visible="handleCancel"
   >
-    <div class="cover" :style="{ backgroundImage: `url(${coverImgUrl})` }"></div>
-    <div class="account-section">
+    <div
+      class="-mx-6 -mt-5 h-42 bg-center bg-cover bg-no-repeat"
+      :style="{ backgroundImage: `url(${coverImgUrl})` }"
+    ></div>
+    <div class="-mt-11 mb-large flex items-start gap-5">
       <button
         v-radar="{ name: 'Edit avatar button', desc: 'Click to choose a new avatar image' }"
-        class="avatar-button"
+        class="group relative h-30 w-30 flex-none cursor-pointer border-none bg-transparent p-0 outline-none shadow-none"
         type="button"
         @click="handleChooseAvatar.fn"
       >
-        <UIImg class="avatar" :src="avatarUrl" size="cover" />
-        <UIIcon class="avatar-trigger" type="camera" />
+        <UIImg class="h-full w-full rounded-full border-2 border-grey-100 bg-grey-100" :src="avatarUrl" size="cover" />
+        <UIIcon
+          class="absolute right-0 bottom-0 h-8 w-8 text-turquoise-200 transition-[color,transform] duration-200 group-hover:text-turquoise-300 group-focus-visible:text-turquoise-300 group-active:scale-[0.96]"
+          type="camera"
+        />
       </button>
       <UserUsernameInline
-        class="account-username"
+        class="mt-16 min-w-0"
         :username="props.user.username"
         show-modify
         @modified="handleUsernameModified"
@@ -150,7 +156,7 @@ const handleSubmit = useMessageHandle(async () => {
           :placeholder="$t({ en: 'Tell us something about you', zh: '介绍一下自己' })"
         />
       </UIFormItem>
-      <footer class="footer">
+      <footer class="mt-5 flex justify-end gap-3">
         <UIButton
           v-radar="{ name: 'Cancel button', desc: 'Click to cancel editing profile' }"
           color="boring"
@@ -170,74 +176,3 @@ const handleSubmit = useMessageHandle(async () => {
     </UIForm>
   </UIFormModal>
 </template>
-
-<style lang="scss" scoped>
-.cover {
-  margin: -20px -24px 0;
-  height: 168px;
-  background-position: center;
-  background-size: cover;
-  background-repeat: no-repeat;
-}
-
-.account-section {
-  display: flex;
-  align-items: flex-start;
-  gap: 20px;
-  margin: -44px 0 var(--ui-gap-large);
-}
-
-.avatar-button {
-  position: relative;
-  flex: 0 0 auto;
-  width: 120px;
-  height: 120px;
-  padding: 0;
-  border: none;
-  background: none;
-  outline: none;
-  box-shadow: none;
-  cursor: pointer;
-
-  &:hover .avatar-trigger,
-  &:focus-visible .avatar-trigger {
-    color: var(--ui-color-turquoise-300);
-  }
-
-  &:active .avatar-trigger {
-    transform: scale(0.96);
-  }
-}
-
-.avatar {
-  width: 100%;
-  height: 100%;
-  border: 2px solid var(--ui-color-grey-100);
-  border-radius: 50%;
-  background-color: var(--ui-color-grey-100);
-}
-
-.avatar-trigger {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  width: 32px;
-  height: 32px;
-  color: var(--ui-color-turquoise-200);
-  transition:
-    color 0.2s,
-    transform 0.2s;
-}
-
-.account-username {
-  min-width: 0;
-  margin-top: 64px;
-}
-
-.footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 12px;
-  margin-top: 20px;
-}
-</style>
diff --git a/spx-gui/src/components/community/user/FollowButton.vue b/spx-gui/src/components/community/user/FollowButton.vue
index cec3736fe0..fefa9c9446 100644
--- a/spx-gui/src/components/community/user/FollowButton.vue
+++ b/spx-gui/src/components/community/user/FollowButton.vue
@@ -40,5 +40,3 @@ const handleClick = useMessageHandle(async () => {
     {{ $t(following ? { en: 'Unfollow', zh: '取消关注' } : { en: 'Follow', zh: '关注' }) }}
   </UIButton>
 </template>
-
-<style lang="scss" scoped></style>
diff --git a/spx-gui/src/components/community/user/ModifyUsernameModal.vue b/spx-gui/src/components/community/user/ModifyUsernameModal.vue
index 2199903f22..44021d50e4 100644
--- a/spx-gui/src/components/community/user/ModifyUsernameModal.vue
+++ b/spx-gui/src/components/community/user/ModifyUsernameModal.vue
@@ -95,7 +95,7 @@ const handleSubmit = useMessageHandle(async () => {
           autofocus
         />
       </UIFormItem>
-      <footer class="footer">
+      <footer class="mt-large flex justify-end gap-middle pb-1">
         <UIButton
           v-radar="{ name: 'Cancel button', desc: 'Click to cancel modifying username' }"
           color="boring"
@@ -115,13 +115,3 @@ const handleSubmit = useMessageHandle(async () => {
     </UIForm>
   </UIFormModal>
 </template>
-
-<style scoped lang="scss">
-.footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: var(--ui-gap-middle);
-  margin-top: var(--ui-gap-large);
-  padding-bottom: 4px;
-}
-</style>
diff --git a/spx-gui/src/components/community/user/UserAvatar.vue b/spx-gui/src/components/community/user/UserAvatar.vue
index 18ad8a0680..580520f46d 100644
--- a/spx-gui/src/components/community/user/UserAvatar.vue
+++ b/spx-gui/src/components/community/user/UserAvatar.vue
@@ -1,7 +1,7 @@
 <template>
   <UserLink
-    class="user-avatar"
-    :class="`size-${size}`"
+    class="block overflow-hidden rounded-full border-grey-100 bg-grey-100 bg-center bg-contain transition-[border-color] duration-100 hover:border-primary-400 active:border-primary-600"
+    :class="size === 'small' ? 'h-7.5 w-7.5 border-2' : 'h-12 w-12 border-3'"
     :style="avatarUrl != null ? { backgroundImage: `url(${avatarUrl})` } : null"
     :user="userInfo?.username ?? null"
   ></UserLink>
@@ -27,31 +27,3 @@ const props = withDefaults(
 const { data: userInfo } = useUser(() => props.user)
 const avatarUrl = useAvatarUrl(() => userInfo.value?.avatar)
 </script>
-
-<style lang="scss" scoped>
-.user-avatar {
-  display: block;
-  width: 48px;
-  height: 48px;
-  border-radius: 50%;
-  overflow: hidden;
-  border: 3px solid var(--ui-color-grey-100);
-  background-color: var(--ui-color-grey-100);
-  background-position: center;
-  background-size: contain;
-  transition: 0.1s;
-
-  &.size-small {
-    width: 30px;
-    height: 30px;
-    border-width: 2px;
-  }
-
-  &:hover {
-    border-color: var(--ui-color-primary-400);
-  }
-  &:active {
-    border-color: var(--ui-color-primary-600);
-  }
-}
-</style>
diff --git a/spx-gui/src/components/community/user/UserHeader.vue b/spx-gui/src/components/community/user/UserHeader.vue
index 7ca1098b19..ec56e5f742 100644
--- a/spx-gui/src/components/community/user/UserHeader.vue
+++ b/spx-gui/src/components/community/user/UserHeader.vue
@@ -70,19 +70,24 @@ const handleEditProfile = useMessageHandle(
 </script>
 
 <template>
-  <CommunityCard class="user-header">
-    <div class="cover" :style="{ backgroundImage: `url(${coverImgUrl})` }"></div>
-    <UIImg class="avatar" :src="avatarUrl" />
-    <div class="content">
-      <div class="info">
-        <div class="title-row">
-          <h2 class="name">{{ user.displayName }}</h2>
+  <CommunityCard class="relative">
+    <div
+      class="h-[21.74vh] max-h-50 w-full bg-center bg-cover bg-no-repeat"
+      :style="{ backgroundImage: `url(${coverImgUrl})` }"
+    ></div>
+    <div class="absolute bottom-5 left-5 h-38 w-38">
+      <UIImg class="h-full w-full rounded-full border-2 border-grey-100 bg-grey-100" :src="avatarUrl" />
+    </div>
+    <div class="flex items-end gap-25 px-5 pt-5 pb-5 pl-48">
+      <div class="flex flex-1 flex-col gap-3">
+        <div class="flex flex-wrap items-center gap-middle">
+          <h2 class="m-0 text-20/7 text-title">{{ user.displayName }}</h2>
           <UserUsernameInline :username="user.username" />
           <UserJoinedAt class="joined-at" :time="user.createdAt" />
         </div>
         <TextView style="max-height: 66px" :text="user.description" />
       </div>
-      <div class="op">
+      <div class="flex shrink-0 basis-27.5 justify-end">
         <UIButton
           v-if="isSignedInUser"
           v-radar="{ name: 'Edit profile button', desc: 'Click to edit user profile' }"
@@ -95,69 +100,3 @@ const handleEditProfile = useMessageHandle(
     </div>
   </CommunityCard>
 </template>
-
-<style lang="scss" scoped>
-.user-header {
-  position: relative;
-}
-
-.cover {
-  width: 100%;
-  height: 21.74vh;
-  max-height: 200px;
-  background-position: center;
-  background-size: cover;
-  background-repeat: no-repeat;
-}
-
-.avatar {
-  position: absolute;
-  left: 20px;
-  bottom: 20px;
-  width: 152px;
-  height: 152px;
-  border: 2px solid var(--ui-color-grey-100);
-  border-radius: 50%;
-  background-color: var(--ui-color-grey-100);
-}
-
-.content {
-  padding: 20px 20px 20px 192px;
-  display: flex;
-  align-items: end;
-  gap: 100px;
-}
-
-.info {
-  flex: 1 1 0;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-
-  .title-row {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: var(--ui-gap-middle);
-  }
-
-  .name {
-    font-size: 20px;
-    line-height: 28px;
-    color: var(--ui-color-title);
-    margin: 0;
-  }
-
-  .description {
-    font-size: 13px;
-    line-height: 20px;
-    color: var(--ui-color-text);
-  }
-}
-
-.op {
-  flex: 0 0 110px;
-  display: flex;
-  justify-content: flex-end;
-}
-</style>
diff --git a/spx-gui/src/components/community/user/UserItem.vue b/spx-gui/src/components/community/user/UserItem.vue
index 19b82ae9ce..8bb875c80e 100644
--- a/spx-gui/src/components/community/user/UserItem.vue
+++ b/spx-gui/src/components/community/user/UserItem.vue
@@ -16,60 +16,19 @@ const userRoute = computed(() => getUserPageRoute(props.user.username))
 </script>
 
 <template>
-  <li class="user-item">
-    <UserAvatar class="avatar" :user="user.username" />
+  <li class="relative flex flex-col py-3 pl-14">
+    <UserAvatar class="absolute top-3 left-0" :user="user.username" />
+    <!-- TODO: should no-underline be one type of `UILink` / `RouterUILink`? -->
     <RouterUILink
       v-radar="{ name: 'User link', desc: 'Click to view user profile' }"
-      class="name"
+      class="w-fit text-15/6 text-title no-underline"
       type="boring"
       :to="userRoute"
-      >{{ user.displayName }}</RouterUILink
     >
-    <UserJoinedAt class="joined-at" :time="user.createdAt" />
-    <TextView v-if="!!user.description" class="description" :text="user.description" />
-    <FollowButton class="follow" :name="user.username" />
+      {{ user.displayName }}
+    </RouterUILink>
+    <UserJoinedAt class="w-fit" :time="user.createdAt" />
+    <TextView v-if="!!user.description" class="mt-1.5 max-h-15 w-fit text-13/5 text-text" :text="user.description" />
+    <FollowButton class="absolute top-3 right-0" :name="user.username" />
   </li>
 </template>
-
-<style lang="scss" scoped>
-.user-item {
-  position: relative;
-  padding: 12px 0 12px 56px;
-  display: flex;
-  flex-direction: column;
-}
-
-.avatar {
-  position: absolute;
-  left: 0;
-  top: 12px;
-}
-
-.name,
-.joined-at,
-.description {
-  width: fit-content;
-}
-
-.name {
-  font-size: 15px;
-  line-height: 24px;
-  color: var(--ui-color-title);
-  // TODO: should this style be one type of `UILink` / `RouterUILink`?
-  text-decoration: none;
-}
-
-.description {
-  margin-top: 6px;
-  max-height: 60px;
-  font-size: 13px;
-  line-height: 20px;
-  color: var(--ui-color-text);
-}
-
-.follow {
-  position: absolute;
-  top: 12px;
-  right: 0;
-}
-</style>
diff --git a/spx-gui/src/components/community/user/UserJoinedAt.vue b/spx-gui/src/components/community/user/UserJoinedAt.vue
index b20f639a2d..c7cef15c48 100644
--- a/spx-gui/src/components/community/user/UserJoinedAt.vue
+++ b/spx-gui/src/components/community/user/UserJoinedAt.vue
@@ -16,15 +16,7 @@ const joinedAtText = computed(() => {
 </script>
 
 <template>
-  <span class="user-joined-at" :title="$t(humanizeExactTime(props.time))">
+  <span class="text-12 text-hint-2" :title="$t(humanizeExactTime(props.time))">
     {{ $t(joinedAtText) }}
   </span>
 </template>
-
-<style lang="scss" scoped>
-.user-joined-at {
-  font-size: 12px;
-  line-height: 18px;
-  color: var(--ui-color-hint-2);
-}
-</style>
diff --git a/spx-gui/src/components/community/user/UserUsernameInline.vue b/spx-gui/src/components/community/user/UserUsernameInline.vue
index 2f214a6c93..43560de196 100644
--- a/spx-gui/src/components/community/user/UserUsernameInline.vue
+++ b/spx-gui/src/components/community/user/UserUsernameInline.vue
@@ -39,8 +39,8 @@ const handleModifyUsername = useMessageHandle(
 </script>
 
 <template>
-  <span class="username-inline">
-    <span class="text-group">
+  <span class="inline-flex min-w-0 items-center gap-1 font-main text-12 text-hint-2">
+    <span class="min-w-0 flex-[0_1_auto]">
       <UITooltip placement="top">
         {{
           $t({
@@ -49,22 +49,24 @@ const handleModifyUsername = useMessageHandle(
           })
         }}
         <template #trigger>
-          <span class="username">{{ props.username }}</span>
+          <span class="block overflow-hidden text-ellipsis whitespace-nowrap">{{ props.username }}</span>
         </template>
       </UITooltip>
     </span>
-    <span class="actions">
+    <span class="inline-flex flex-none items-center gap-1">
       <UITooltip placement="top">
         {{ $t({ en: 'Copy username', zh: '复制用户名' }) }}
         <template #trigger>
           <button
             v-radar="{ name: 'Copy username button', desc: 'Click to copy username to clipboard' }"
-            class="action-button"
+            class="inline-flex h-3.5 w-3.5 flex-none cursor-pointer items-center justify-center border-none bg-transparent p-0 text-inherit transition-colors duration-200 hover:text-primary-main"
             type="button"
             @click="handleCopyUsername"
           >
-            <span class="sr-only">{{ $t({ en: 'Copy username', zh: '复制用户名' }) }}</span>
-            <UIIcon class="action-icon" type="copyAltFilled" />
+            <span class="absolute -m-px h-px w-px overflow-hidden border-0 p-0 whitespace-nowrap [clip:rect(0,0,0,0)]">
+              {{ $t({ en: 'Copy username', zh: '复制用户名' }) }}
+            </span>
+            <UIIcon style="width: 14px; height: 14px" type="copyAltFilled" />
           </button>
         </template>
       </UITooltip>
@@ -73,83 +75,17 @@ const handleModifyUsername = useMessageHandle(
         <template #trigger>
           <button
             v-radar="{ name: 'Modify username button', desc: 'Click to modify username' }"
-            class="action-button"
+            class="inline-flex h-3.5 w-3.5 flex-none cursor-pointer items-center justify-center border-none bg-transparent p-0 text-inherit transition-colors duration-200 hover:text-primary-main"
             type="button"
             @click="handleModifyUsername"
           >
-            <span class="sr-only">{{ $t({ en: 'Modify username', zh: '修改用户名' }) }}</span>
-            <UIIcon class="action-icon" type="edit" />
+            <span class="absolute -m-px h-px w-px overflow-hidden border-0 p-0 whitespace-nowrap [clip:rect(0,0,0,0)]">
+              {{ $t({ en: 'Modify username', zh: '修改用户名' }) }}
+            </span>
+            <UIIcon style="width: 14px; height: 14px" type="edit" />
           </button>
         </template>
       </UITooltip>
     </span>
   </span>
 </template>
-
-<style scoped lang="scss">
-.username-inline {
-  min-width: 0;
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  color: var(--ui-color-hint-2);
-  font-size: 12px;
-  font-family: var(--ui-font-family-main);
-  line-height: 18px;
-}
-
-.text-group {
-  flex: 0 1 auto;
-  min-width: 0;
-}
-
-.username {
-  display: block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.actions {
-  flex: 0 0 auto;
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.action-button {
-  flex: 0 0 auto;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 14px;
-  height: 14px;
-  padding: 0;
-  border: none;
-  background: none;
-  color: inherit;
-  cursor: pointer;
-  transition: color 0.2s ease;
-
-  &:hover {
-    color: var(--ui-color-primary-main);
-  }
-}
-
-.action-icon {
-  width: 14px;
-  height: 14px;
-}
-
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
-</style>
diff --git a/spx-gui/src/components/community/user/content/UserContent.vue b/spx-gui/src/components/community/user/content/UserContent.vue
index bb011ff413..14626a8916 100644
--- a/spx-gui/src/components/community/user/content/UserContent.vue
+++ b/spx-gui/src/components/community/user/content/UserContent.vue
@@ -5,44 +5,19 @@ import CommunityCard from '../../CommunityCard.vue'
 </script>
 
 <template>
-  <CommunityCard v-radar="{ name: 'User content', desc: 'Main content area for user pages' }" class="user-content">
-    <header class="header">
-      <h2 class="title">
+  <CommunityCard
+    v-radar="{ name: 'User content', desc: 'Main content area for user pages' }"
+    class="flex flex-col px-middle py-5"
+  >
+    <header class="mb-2 flex h-8 items-center justify-between gap-5">
+      <!-- TODO: Layout here shifts when jumping from `/user/:name` to `/user/:name/projects`, which is not ideal -->
+      <h2 class="text-16/6.5 text-title">
         <slot name="title"></slot>
       </h2>
-      <div class="extra">
+      <div class="flex gap-6">
         <slot name="extra"></slot>
       </div>
     </header>
     <slot></slot>
   </CommunityCard>
 </template>
-
-<style lang="scss" scoped>
-.user-content {
-  padding: 20px var(--ui-gap-middle);
-  display: flex;
-  flex-direction: column;
-}
-
-.header {
-  margin-bottom: 8px;
-  height: 32px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 20px;
-
-  .title {
-    // TODO: Layout here shifts when jumping from `/user/:name` to `/user/:name/projects`, which is not ideal
-    line-height: 26px;
-    font-size: 16px;
-    color: var(--ui-color-title);
-  }
-
-  .extra {
-    display: flex;
-    gap: 24px;
-  }
-}
-</style>
diff --git a/spx-gui/src/components/community/user/sidebar/UserSidebarItem.vue b/spx-gui/src/components/community/user/sidebar/UserSidebarItem.vue
index c990385ab3..f865cfbb8b 100644
--- a/spx-gui/src/components/community/user/sidebar/UserSidebarItem.vue
+++ b/spx-gui/src/components/community/user/sidebar/UserSidebarItem.vue
@@ -8,35 +8,18 @@ defineProps<{
 
 <template>
   <RouterLink
-    class="user-sidebar-item relative flex items-center rounded-2 p-3 no-underline transition-all duration-100"
+    class="group relative flex items-center rounded-2 p-3 text-text no-underline transition-all duration-100 [&.active]:bg-primary-100 [&.active]:text-primary-main"
     exact-active-class="active"
     :to="to"
   >
-    <i class="icon-bg absolute left-3 top-3.5 h-4.25 w-4.25 rounded-full transition-all duration-100" />
+    <i
+      class="absolute left-3 top-3.5 h-4.25 w-4.25 rounded-full bg-grey-500 transition-all duration-100 group-[.active]:bg-primary-300"
+    />
     <span
       class="relative flex-1 pl-6.5 text-13/5 [&_svg]:absolute [&_svg]:left-0 [&_svg]:top-1/2 [&_svg]:z-1 [&_svg]:-translate-y-1/2"
     >
       <slot></slot>
     </span>
-    <UIIcon class="h-3 w-3 flex-none rotate-90 text-grey-800" type="arrowAlt" />
+    <UIIcon class="flex-none rotate-90 text-grey-800" style="width: 12px; height: 12px" type="arrowAlt" />
   </RouterLink>
 </template>
-
-<style scoped>
-.user-sidebar-item {
-  color: var(--ui-color-text);
-}
-
-.icon-bg {
-  background: var(--ui-color-grey-500);
-}
-
-.user-sidebar-item.active {
-  color: var(--ui-color-primary-main);
-  background: var(--ui-color-primary-100);
-}
-
-.user-sidebar-item.active .icon-bg {
-  background: var(--ui-color-primary-300);
-}
-</style>
diff --git a/spx-gui/src/components/course/management/CourseEditModal.vue b/spx-gui/src/components/course/management/CourseEditModal.vue
index 722c8dd2c1..59523fb9ae 100644
--- a/spx-gui/src/components/course/management/CourseEditModal.vue
+++ b/spx-gui/src/components/course/management/CourseEditModal.vue
@@ -94,8 +94,8 @@ const handleSubmit = useMessageHandle(
     @update:visible="emit('cancelled')"
   >
     <UIForm :form="form" @submit="handleSubmit.fn">
-      <div class="form-row">
-        <UIFormItem path="title" :label="$t({ en: 'Title', zh: '标题' })">
+      <div class="mb-6 grid grid-cols-2 gap-8">
+        <UIFormItem class="mt-0!" path="title" :label="$t({ en: 'Title', zh: '标题' })">
           <UITextInput
             v-model:value="form.value.title"
             :placeholder="
@@ -107,7 +107,7 @@ const handleSubmit = useMessageHandle(
           />
         </UIFormItem>
 
-        <UIFormItem path="entrypoint" :label="$t({ en: 'Entrypoint', zh: '起始地址' })">
+        <UIFormItem class="mt-0!" path="entrypoint" :label="$t({ en: 'Entrypoint', zh: '起始地址' })">
           <UITextInput
             v-model:value="form.value.entrypoint"
             :placeholder="
@@ -120,17 +120,17 @@ const handleSubmit = useMessageHandle(
         </UIFormItem>
       </div>
 
-      <div class="form-row">
-        <UIFormItem path="thumbnail" :label="$t({ en: 'Thumbnail', zh: '缩略图' })">
-          <ThumbnailUploader v-model:thumbnail="form.value.thumbnail" class="thumbnail-uploader" />
+      <div class="mb-6 grid grid-cols-2 gap-8">
+        <UIFormItem class="mt-0!" path="thumbnail" :label="$t({ en: 'Thumbnail', zh: '缩略图' })">
+          <ThumbnailUploader v-model:thumbnail="form.value.thumbnail" class="h-50 w-full" />
         </UIFormItem>
 
-        <UIFormItem path="references" :label="$t({ en: 'Reference projects', zh: '参考项目' })">
-          <ProjectReferencesInput v-model:references="form.value.references" class="project-references" />
+        <UIFormItem class="mt-0!" path="references" :label="$t({ en: 'Reference projects', zh: '参考项目' })">
+          <ProjectReferencesInput v-model:references="form.value.references" class="h-50 w-full" />
         </UIFormItem>
       </div>
 
-      <UIFormItem class="full-width" path="prompt" :label="$t({ en: 'Prompt for Copilot', zh: 'Copilot 提示词' })">
+      <UIFormItem class="mb-6" path="prompt" :label="$t({ en: 'Prompt for Copilot', zh: 'Copilot 提示词' })">
         <UITextInput
           v-model:value="form.value.prompt"
           type="textarea"
@@ -144,7 +144,7 @@ const handleSubmit = useMessageHandle(
         />
       </UIFormItem>
 
-      <footer class="footer">
+      <footer class="mt-5 flex justify-end gap-3 border-t border-dividing-line-2 pt-5">
         <UIButton color="boring" @click="emit('cancelled')">
           {{ $t({ en: 'Cancel', zh: '取消' }) }}
         </UIButton>
@@ -155,39 +155,3 @@ const handleSubmit = useMessageHandle(
     </UIForm>
   </UIFormModal>
 </template>
-
-<style lang="scss" scoped>
-.form-row {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 32px;
-  margin-bottom: 24px;
-
-  > :deep(.ui-form-item) {
-    margin-top: 0 !important;
-  }
-}
-
-.thumbnail-uploader {
-  width: 100%;
-  height: 200px;
-}
-
-.project-references {
-  width: 100%;
-  height: 200px;
-}
-
-.full-width {
-  margin-bottom: 24px;
-}
-
-.footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 12px;
-  padding-top: 20px;
-  margin-top: 20px;
-  border-top: 1px solid var(--ui-color-divider-subtle);
-}
-</style>
diff --git a/spx-gui/src/components/course/management/CourseItem.vue b/spx-gui/src/components/course/management/CourseItem.vue
index 67f071974b..1a04089ea5 100644
--- a/spx-gui/src/components/course/management/CourseItem.vue
+++ b/spx-gui/src/components/course/management/CourseItem.vue
@@ -16,71 +16,31 @@ const thumbnailUrl = useAsyncComputed(async (onCleanup) => {
 </script>
 
 <template>
-  <li class="course-item">
-    <UIImg class="thumbnail" :src="thumbnailUrl" size="cover" />
-    <div class="title" :title="course.title">{{ course.title }}</div>
-    <div class="action-section">
+  <li
+    class="course-item relative box-border h-53.5 w-58 shrink-0 cursor-pointer overflow-hidden rounded-3 border-2 border-grey-300 transition-all duration-200 hover:-translate-y-0.5 hover:border-grey-400 hover:shadow-[0_4px_12px_rgba(0,0,0,0.08)]"
+  >
+    <UIImg class="h-full w-full" :src="thumbnailUrl" size="cover" />
+    <div
+      class="absolute bottom-0 w-full box-border overflow-hidden bg-grey-1000/30 px-4 text-15/10 font-semibold text-grey-100 text-ellipsis whitespace-nowrap"
+      :title="course.title"
+    >
+      {{ course.title }}
+    </div>
+    <div class="action-section absolute top-2 right-2">
       <slot />
     </div>
   </li>
 </template>
 
-<style lang="scss" scoped>
-.course-item {
-  width: 232px;
-  height: 214px;
-  border-radius: var(--ui-border-radius-3);
-  overflow: hidden;
-  position: relative;
-  cursor: pointer;
-  transition: 0.2s;
-  border: 2px solid var(--ui-color-grey-300);
-  flex-shrink: 0;
-  box-sizing: border-box;
-
-  &:hover {
-    border-color: var(--ui-color-grey-400);
-    transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-
-    .action-section :deep(.corner-menu) {
-      visibility: visible;
-      opacity: 1;
-    }
-  }
-
-  .title {
-    padding: 0 16px;
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    height: 40px;
-    line-height: 40px;
-    font-size: 15px;
-    font-weight: 600;
-    color: var(--ui-color-grey-100);
-    background: rgb(from var(--ui-color-grey-1000) r g b / 0.3);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    box-sizing: border-box;
-  }
-
-  .thumbnail {
-    width: 100%;
-    height: 100%;
-  }
-
-  .action-section {
-    position: absolute;
-    top: 8px;
-    right: 8px;
+<style scoped>
+.action-section :deep(.corner-menu) {
+  visibility: hidden;
+  opacity: 0;
+  transition: 0.1s;
+}
 
-    :deep(.corner-menu) {
-      opacity: 0;
-      visibility: hidden;
-      transition: 0.1s;
-    }
-  }
+.course-item:hover .action-section :deep(.corner-menu) {
+  visibility: visible;
+  opacity: 1;
 }
 </style>
diff --git a/spx-gui/src/components/course/management/CourseItemCornerMenu.vue b/spx-gui/src/components/course/management/CourseItemCornerMenu.vue
index 1f113bfabd..b671d19ee0 100644
--- a/spx-gui/src/components/course/management/CourseItemCornerMenu.vue
+++ b/spx-gui/src/components/course/management/CourseItemCornerMenu.vue
@@ -15,8 +15,11 @@ const emit = defineEmits<{
 <template>
   <UIDropdown trigger="click" placement="bottom-end">
     <template #trigger>
-      <div class="corner-menu" @click.stop.prevent>
-        <UIIcon class="icon" type="more" />
+      <div
+        class="corner-menu flex h-8 w-8 cursor-pointer items-center justify-center rounded-full bg-grey-100 text-grey-800 transition-all duration-100 hover:bg-primary-main hover:text-grey-100"
+        @click.stop.prevent
+      >
+        <UIIcon style="width: 21px; height: 21px" type="more" />
       </div>
     </template>
     <UIMenu>
@@ -34,28 +37,3 @@ const emit = defineEmits<{
     </UIMenu>
   </UIDropdown>
 </template>
-
-<style lang="scss" scoped>
-.corner-menu {
-  width: 32px;
-  height: 32px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 50%;
-  color: var(--ui-color-grey-800);
-  background-color: var(--ui-color-grey-100);
-  cursor: pointer;
-  transition: 0.1s;
-
-  &:hover {
-    color: var(--ui-color-grey-100);
-    background-color: var(--ui-color-primary-main);
-  }
-
-  .icon {
-    width: 21px;
-    height: 21px;
-  }
-}
-</style>
diff --git a/spx-gui/src/components/course/management/CourseItemMini.vue b/spx-gui/src/components/course/management/CourseItemMini.vue
index 787cd5f390..c8952cc942 100644
--- a/spx-gui/src/components/course/management/CourseItemMini.vue
+++ b/spx-gui/src/components/course/management/CourseItemMini.vue
@@ -20,69 +20,20 @@ const thumbnailUrl = useAsyncComputedLegacy(async (onCleanup) => {
 
 <template>
   <div
-    class="course-item-mini"
+    class="course-item-mini flex items-center rounded-1 border-2 border-transparent bg-grey-50 p-2 transition-all duration-200"
     :class="{
-      interactive,
-      highlighted,
-      dimmed
+      'cursor-pointer hover:bg-primary-100': interactive,
+      'border-grey-400 bg-grey-100': highlighted,
+      'opacity-50': dimmed
     }"
   >
     <slot name="prefix" />
-    <UIImg class="thumbnail" :src="thumbnailUrl" size="cover" />
-    <div class="info">
-      <div class="title">{{ course.title }}</div>
+    <UIImg class="h-9 w-12 shrink-0 rounded-1" :src="thumbnailUrl" size="cover" />
+    <div class="mx-3 flex-1 overflow-hidden">
+      <div class="overflow-hidden text-body font-medium text-grey-900 text-ellipsis whitespace-nowrap">
+        {{ course.title }}
+      </div>
     </div>
     <slot name="suffix" />
   </div>
 </template>
-
-<style lang="scss" scoped>
-.course-item-mini {
-  display: flex;
-  align-items: center;
-  padding: 8px;
-  border-radius: var(--ui-border-radius-1);
-  background: var(--ui-color-grey-50);
-  border: 2px solid transparent;
-  transition: all 0.2s;
-
-  &.interactive {
-    cursor: pointer;
-
-    &:hover {
-      background: var(--ui-color-primary-100);
-    }
-  }
-
-  &.highlighted {
-    border-color: var(--ui-color-grey-400);
-    background: var(--ui-color-grey-100);
-  }
-
-  &.dimmed {
-    opacity: 0.5;
-  }
-}
-
-.thumbnail {
-  width: 48px;
-  height: 36px;
-  border-radius: var(--ui-border-radius-1);
-  flex-shrink: 0;
-}
-
-.info {
-  flex: 1;
-  margin: 0 12px;
-  overflow: hidden;
-}
-
-.title {
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--ui-color-grey-900);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-</style>
diff --git a/spx-gui/src/components/course/management/CourseManagementModal.vue b/spx-gui/src/components/course/management/CourseManagementModal.vue
index 9cf274c600..eea034e81c 100644
--- a/spx-gui/src/components/course/management/CourseManagementModal.vue
+++ b/spx-gui/src/components/course/management/CourseManagementModal.vue
@@ -109,12 +109,15 @@ const handleRemove = useMessageHandle(
         <span>{{ $t({ en: 'Create course', zh: '创建课程' }) }}</span>
       </UIButton>
     </template>
-    <section class="body">
+    <section class="flex flex-col px-6 pt-5 pb-6">
       <ListResultWrapper v-slot="slotProps" :query-ret="queryRet" :height="444">
-        <div class="content">
-          <div v-if="slotProps.data.data.length === 0" class="empty">
+        <div class="flex flex-col">
+          <div
+            v-if="slotProps.data.data.length === 0"
+            class="flex flex-1 flex-col items-center justify-center text-grey-700"
+          >
             <p>{{ $t({ en: 'No courses yet', zh: '还没有课程' }) }}</p>
-            <p class="hint">
+            <p class="mt-2 text-body text-grey-600">
               {{
                 $t({
                   en: 'Click "Create course" to add your first course',
@@ -123,60 +126,14 @@ const handleRemove = useMessageHandle(
               }}
             </p>
           </div>
-          <ul v-else class="course-list">
+          <ul v-else class="flex flex-wrap content-start gap-middle">
             <CourseItem v-for="course in slotProps.data.data" :key="course.id" :course="course">
               <CourseItemCornerMenu :course="course" @edit="handleEdit(course)" @remove="handleRemove(course)" />
             </CourseItem>
           </ul>
         </div>
       </ListResultWrapper>
-      <UIPagination v-show="pageTotal > 1" v-model:current="page" class="pagination" :total="pageTotal" />
+      <UIPagination v-show="pageTotal > 1" v-model:current="page" class="mt-8 mb-4 justify-center" :total="pageTotal" />
     </section>
   </UISearchableModal>
 </template>
-
-<style lang="scss" scoped>
-.body {
-  display: flex;
-  flex-direction: column;
-  padding: 20px 24px 24px;
-}
-
-.content {
-  display: flex;
-  flex-direction: column;
-}
-
-.empty {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  color: var(--ui-color-grey-700);
-
-  .hint {
-    font-size: 14px;
-    color: var(--ui-color-grey-600);
-    margin-top: 8px;
-  }
-}
-
-.course-list {
-  display: flex;
-  flex-wrap: wrap;
-  align-content: flex-start;
-  gap: var(--ui-gap-middle);
-}
-
-.pagination {
-  justify-content: center;
-  margin: 32px 0 16px;
-}
-
-.create-button {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-</style>
diff --git a/spx-gui/src/components/course/management/CourseSelector.vue b/spx-gui/src/components/course/management/CourseSelector.vue
index b781c160b1..937d92436c 100644
--- a/spx-gui/src/components/course/management/CourseSelector.vue
+++ b/spx-gui/src/components/course/management/CourseSelector.vue
@@ -31,8 +31,8 @@ const availableCourses = computed(() => {
 </script>
 
 <template>
-  <div class="course-selector">
-    <div class="search-bar">
+  <div class="flex h-full flex-col">
+    <div class="border-b border-dividing-line-2 p-3">
       <UITextInput v-model:value="searchKeyword" :placeholder="$t({ en: 'Search courses...', zh: '搜索课程...' })">
         <template #prefix>
           <UIIcon type="search" />
@@ -40,7 +40,7 @@ const availableCourses = computed(() => {
       </UITextInput>
     </div>
 
-    <div class="course-list">
+    <div class="flex-1 overflow-y-auto p-3">
       <UILoading v-if="loading" />
       <UIEmpty
         v-else-if="availableCourses.length === 0"
@@ -51,7 +51,7 @@ const availableCourses = computed(() => {
             : $t({ en: 'All courses have been selected', zh: '所有课程都已选择' })
         "
       />
-      <div v-else class="course-items">
+      <div v-else class="flex flex-col gap-2 [&_.course-item-mini:hover_.action-icon]:text-primary-600">
         <CourseItemMini
           v-for="course in availableCourses"
           :key="course.id"
@@ -60,45 +60,10 @@ const availableCourses = computed(() => {
           @click="emit('select', course.id)"
         >
           <template #suffix>
-            <UIIcon class="action-icon" type="plus" />
+            <UIIcon class="action-icon shrink-0 text-grey-400 transition-colors duration-200" type="plus" />
           </template>
         </CourseItemMini>
       </div>
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.course-selector {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-
-.search-bar {
-  padding: 12px;
-  border-bottom: 1px solid var(--ui-color-divider-subtle);
-}
-
-.course-list {
-  flex: 1;
-  overflow-y: auto;
-  padding: 12px;
-}
-
-.course-items {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.action-icon {
-  color: var(--ui-color-grey-400);
-  flex-shrink: 0;
-  transition: color 0.2s;
-}
-
-.course-items :deep(.course-item-mini:hover) .action-icon {
-  color: var(--ui-color-primary-600);
-}
-</style>
diff --git a/spx-gui/src/components/course/management/CourseSeriesEditModal.vue b/spx-gui/src/components/course/management/CourseSeriesEditModal.vue
index 2781475dd1..5ed4c0d905 100644
--- a/spx-gui/src/components/course/management/CourseSeriesEditModal.vue
+++ b/spx-gui/src/components/course/management/CourseSeriesEditModal.vue
@@ -159,13 +159,17 @@ const handleSubmit = useMessageHandle(
     @update:visible="emit('cancelled')"
   >
     <UIForm :form="form" @submit="handleSubmit.fn">
-      <div class="form-row">
-        <UIFormItem class="thumbnail-wrapper" path="thumbnail" :label="$t({ en: 'Thumbnail', zh: '缩略图' })">
-          <ThumbnailUploader :thumbnail="form.value.thumbnail" @update:thumbnail="(v) => (form.value.thumbnail = v)" />
+      <div class="mb-6 grid grid-cols-[350px_1fr] gap-6">
+        <UIFormItem class="thumbnail-wrapper mt-0!" path="thumbnail" :label="$t({ en: 'Thumbnail', zh: '缩略图' })">
+          <ThumbnailUploader
+            class="h-65"
+            :thumbnail="form.value.thumbnail"
+            @update:thumbnail="(v) => (form.value.thumbnail = v)"
+          />
         </UIFormItem>
 
         <div>
-          <UIFormItem path="title" :label="$t({ en: 'Title', zh: '标题' })">
+          <UIFormItem class="mt-0!" path="title" :label="$t({ en: 'Title', zh: '标题' })">
             <UITextInput
               v-model:value="form.value.title"
               :placeholder="
@@ -177,7 +181,7 @@ const handleSubmit = useMessageHandle(
             />
           </UIFormItem>
 
-          <UIFormItem path="description" :label="$t({ en: 'Description', zh: '描述' })">
+          <UIFormItem class="mt-0!" path="description" :label="$t({ en: 'Description', zh: '描述' })">
             <UITextInput
               v-model:value="form.value.description"
               type="textarea"
@@ -191,7 +195,7 @@ const handleSubmit = useMessageHandle(
             />
           </UIFormItem>
 
-          <UIFormItem path="order" :label="$t({ en: 'Sort order', zh: '排序优先级' })">
+          <UIFormItem class="mt-0!" path="order" :label="$t({ en: 'Sort order', zh: '排序优先级' })">
             <UINumberInput
               v-model:value="form.value.order"
               :placeholder="
@@ -209,35 +213,41 @@ const handleSubmit = useMessageHandle(
         <span />
       </UIFormItem>
 
-      <div class="courses-section">
-        <label class="section-label">
+      <div class="mb-6">
+        <label class="mb-3 block font-medium text-grey-800">
           {{ $t({ en: 'Courses', zh: '课程' }) }}
         </label>
-        <div class="course-selection">
-          <div class="selection-panel">
-            <label class="course-label">{{ $t({ en: 'Available courses', zh: '可选课程' }) }}</label>
+        <div class="grid h-100 grid-cols-2 gap-6">
+          <div class="flex flex-col overflow-hidden rounded-2 border border-dividing-line-2">
+            <label class="border-b border-dividing-line-2 bg-grey-50 px-4 py-3 text-grey-800">
+              {{ $t({ en: 'Available courses', zh: '可选课程' }) }}
+            </label>
             <CourseSelector
+              class="min-h-0 flex-1"
               :courses="allCourses"
               :selected-ids="form.value.courseIDs"
               :loading="coursesLoading"
               @select="(id) => (form.value.courseIDs = [...form.value.courseIDs, id])"
             />
           </div>
-          <div class="selection-panel">
-            <label class="course-label">{{ $t({ en: 'Selected courses', zh: '已选课程' }) }}</label>
+          <div class="flex flex-col overflow-hidden rounded-2 border border-dividing-line-2">
+            <label class="border-b border-dividing-line-2 bg-grey-50 px-4 py-3 text-grey-800">
+              {{ $t({ en: 'Selected courses', zh: '已选课程' }) }}
+            </label>
             <SelectedCoursesList
+              class="min-h-0 flex-1"
               :course-ids="form.value.courseIDs"
               :all-courses="allCourses"
               @update:course-ids="(ids) => (form.value.courseIDs = ids)"
             />
           </div>
         </div>
-        <div v-if="form.validated.courseIDs?.hasError" class="error-message">
+        <div v-if="form.validated.courseIDs?.hasError" class="mt-2 text-danger-500">
           {{ form.validated.courseIDs.error }}
         </div>
       </div>
 
-      <footer class="footer">
+      <footer class="mt-5 flex justify-end gap-3 border-t border-dividing-line-2 pt-5">
         <UIButton color="boring" @click="emit('cancelled')">
           {{ $t({ en: 'Cancel', zh: '取消' }) }}
         </UIButton>
@@ -248,76 +258,3 @@ const handleSubmit = useMessageHandle(
     </UIForm>
   </UIFormModal>
 </template>
-
-<style lang="scss" scoped>
-.form-row {
-  display: grid;
-  grid-template-columns: 350px 1fr;
-  gap: 24px;
-  margin-bottom: 24px;
-
-  > :deep(.ui-form-item) {
-    margin-top: 0 !important;
-  }
-
-  :deep(.thumbnail-wrapper) > div {
-    height: 260px;
-  }
-}
-
-.thumbnail-uploader {
-  width: 100%;
-  height: 100%;
-}
-
-.courses-section {
-  margin-bottom: 24px;
-}
-
-.section-label {
-  font-weight: 500;
-  color: var(--ui-color-grey-800);
-  margin-bottom: 12px;
-}
-
-.error-message {
-  margin-top: 8px;
-  color: var(--ui-color-danger-500);
-}
-
-.course-selection {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 24px;
-  height: 400px;
-}
-
-.selection-panel {
-  display: flex;
-  flex-direction: column;
-  border: 1px solid var(--ui-color-divider-subtle);
-  border-radius: var(--ui-border-radius-2);
-  overflow: hidden;
-
-  .course-label {
-    padding: 12px 16px;
-    color: var(--ui-color-grey-800);
-    background: var(--ui-color-grey-50);
-    border-bottom: 1px solid var(--ui-color-divider-subtle);
-  }
-
-  > div {
-    flex: 1;
-    min-height: 0;
-  }
-}
-
-.footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 12px;
-  padding-top: 20px;
-  margin-top: 20px;
-  border-top: 1px solid var(--ui-color-divider-subtle);
-}
-</style>
diff --git a/spx-gui/src/components/course/management/CourseSeriesItem.vue b/spx-gui/src/components/course/management/CourseSeriesItem.vue
index 2bdf6e539d..4462251995 100644
--- a/spx-gui/src/components/course/management/CourseSeriesItem.vue
+++ b/spx-gui/src/components/course/management/CourseSeriesItem.vue
@@ -16,12 +16,33 @@ const thumbnailUrl = useAsyncComputed(async (onCleanup) => {
 </script>
 
 <template>
-  <li class="course-series-item">
-    <UIImg v-if="thumbnailUrl != null" class="thumbnail" :src="thumbnailUrl" size="cover" />
-    <div class="content" :class="{ 'has-thumbnail': thumbnailUrl != null }">
-      <div class="order">{{ courseSeries.order }}</div>
-      <h3 class="title" :title="courseSeries.title">{{ courseSeries.title }}</h3>
-      <div class="course-count">
+  <li
+    class="course-series-item relative h-40 w-58 cursor-pointer overflow-hidden rounded-3 border-2 border-grey-300 bg-grey-50 transition-all duration-200 hover:-translate-y-0.5 hover:border-grey-400 hover:shadow-[0_4px_12px_rgba(0,0,0,0.08)]"
+  >
+    <div v-if="thumbnailUrl != null" class="absolute inset-0">
+      <UIImg class="h-full w-full" :src="thumbnailUrl" size="cover" />
+    </div>
+    <div
+      class="relative flex h-full flex-col items-center justify-center p-5 text-center"
+      :class="{ 'has-thumbnail': thumbnailUrl != null }"
+    >
+      <div
+        class="absolute top-3 left-3 h-7 w-7 [text-shadow:0_1px_3px_rgba(0,0,0,0.3)]"
+        :class="thumbnailUrl != null ? 'text-grey-100' : 'text-grey-900'"
+      >
+        {{ courseSeries.order }}
+      </div>
+      <h3
+        class="m-0 w-full overflow-hidden text-16/[1.4] text-ellipsis wrap-break-word line-clamp-2 [text-shadow:0_1px_3px_rgba(0,0,0,0.3)]"
+        :class="thumbnailUrl != null ? 'text-grey-100' : 'text-grey-900'"
+        :title="courseSeries.title"
+      >
+        {{ courseSeries.title }}
+      </h3>
+      <div
+        class="mt-2"
+        :class="thumbnailUrl != null ? 'text-grey-400 [text-shadow:0_1px_2px_rgba(0,0,0,0.3)]' : 'text-grey-600'"
+      >
         {{
           $t({
             en: `${courseSeries.courseIDs.length} course${courseSeries.courseIDs.length !== 1 ? 's' : ''}`,
@@ -31,110 +52,21 @@ const thumbnailUrl = useAsyncComputed(async (onCleanup) => {
       </div>
     </div>
 
-    <div class="action-section">
+    <div class="action-section absolute top-2 right-2">
       <slot />
     </div>
   </li>
 </template>
 
-<style lang="scss" scoped>
-.course-series-item {
-  position: relative;
-  width: 232px;
-  height: 160px;
-  border-radius: var(--ui-border-radius-3);
-  background: var(--ui-color-grey-50);
-  border: 2px solid var(--ui-color-grey-300);
-  cursor: pointer;
-  transition: all 0.2s;
-  overflow: hidden;
-
-  &:hover {
-    border-color: var(--ui-color-grey-400);
-    transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-
-    .action-section :deep(.corner-menu) {
-      visibility: visible;
-      opacity: 1;
-    }
-  }
-}
-
-.thumbnail {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.content {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  padding: 20px;
-  text-align: center;
-
-  &.has-thumbnail {
-    .title {
-      color: var(--ui-color-grey-100);
-    }
-
-    .order {
-      color: var(--ui-color-grey-100);
-    }
-
-    .course-count {
-      color: var(--ui-color-grey-400);
-      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
-    }
-  }
+<style scoped>
+.action-section :deep(.corner-menu) {
+  visibility: hidden;
+  opacity: 0;
+  transition: 0.1s;
 }
 
-.order {
-  position: absolute;
-  top: 12px;
-  left: 12px;
-  width: 28px;
-  height: 28px;
-  color: var(--ui-color-grey-900);
-  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-}
-
-.title {
-  margin: 0 0 8px;
-  font-size: 16px;
-  color: var(--ui-color-grey-900);
-  overflow: hidden;
-  display: -webkit-box;
-  line-clamp: 2;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  text-overflow: ellipsis;
-  line-height: 1.4;
-  width: 100%;
-  word-break: break-word;
-  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-}
-
-.course-count {
-  color: var(--ui-color-grey-600);
-}
-
-.action-section {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-
-  :deep(.corner-menu) {
-    opacity: 0;
-    visibility: hidden;
-    transition: 0.1s;
-  }
+.course-series-item:hover .action-section :deep(.corner-menu) {
+  visibility: visible;
+  opacity: 1;
 }
 </style>
diff --git a/spx-gui/src/components/course/management/CourseSeriesItemCornerMenu.vue b/spx-gui/src/components/course/management/CourseSeriesItemCornerMenu.vue
index 50701dc76a..85cecb81d8 100644
--- a/spx-gui/src/components/course/management/CourseSeriesItemCornerMenu.vue
+++ b/spx-gui/src/components/course/management/CourseSeriesItemCornerMenu.vue
@@ -15,8 +15,11 @@ const emit = defineEmits<{
 <template>
   <UIDropdown trigger="click" placement="bottom-end">
     <template #trigger>
-      <div class="corner-menu" @click.stop.prevent>
-        <UIIcon class="icon" type="more" />
+      <div
+        class="corner-menu flex h-8 w-8 cursor-pointer items-center justify-center rounded-full bg-grey-100 text-grey-800 transition-all duration-100 hover:bg-primary-main hover:text-grey-100"
+        @click.stop.prevent
+      >
+        <UIIcon style="width: 21px; height: 21px" type="more" />
       </div>
     </template>
     <UIMenu>
@@ -34,28 +37,3 @@ const emit = defineEmits<{
     </UIMenu>
   </UIDropdown>
 </template>
-
-<style lang="scss" scoped>
-.corner-menu {
-  width: 32px;
-  height: 32px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 50%;
-  color: var(--ui-color-grey-800);
-  background-color: var(--ui-color-grey-100);
-  cursor: pointer;
-  transition: 0.1s;
-
-  &:hover {
-    color: var(--ui-color-grey-100);
-    background-color: var(--ui-color-primary-main);
-  }
-
-  .icon {
-    width: 21px;
-    height: 21px;
-  }
-}
-</style>
diff --git a/spx-gui/src/components/course/management/CourseSeriesManagementModal.vue b/spx-gui/src/components/course/management/CourseSeriesManagementModal.vue
index c2390bf7ee..518cb52126 100644
--- a/spx-gui/src/components/course/management/CourseSeriesManagementModal.vue
+++ b/spx-gui/src/components/course/management/CourseSeriesManagementModal.vue
@@ -112,12 +112,15 @@ const handleRemove = useMessageHandle(
         <span>{{ $t({ en: 'Create course series', zh: '创建课程系列' }) }}</span>
       </UIButton>
     </template>
-    <section class="body">
+    <section class="flex flex-col px-6 pt-5 pb-6">
       <ListResultWrapper v-slot="slotProps" :query-ret="queryRet" :height="352">
-        <div class="content">
-          <div v-if="slotProps.data.data.length === 0" class="empty">
+        <div class="flex flex-col">
+          <div
+            v-if="slotProps.data.data.length === 0"
+            class="flex flex-1 flex-col items-center justify-center text-grey-700"
+          >
             <p>{{ $t({ en: 'No course series yet', zh: '还没有课程系列' }) }}</p>
-            <p class="hint">
+            <p class="mt-2 text-body text-grey-600">
               {{
                 $t({
                   en: 'Click "Create course series" to add your first series',
@@ -126,7 +129,7 @@ const handleRemove = useMessageHandle(
               }}
             </p>
           </div>
-          <ul v-else class="course-series-list">
+          <ul v-else class="flex flex-wrap content-start gap-middle">
             <CourseSeriesItem
               v-for="courseSeries in slotProps.data.data"
               :key="courseSeries.id"
@@ -141,53 +144,7 @@ const handleRemove = useMessageHandle(
           </ul>
         </div>
       </ListResultWrapper>
-      <UIPagination v-show="pageTotal > 1" v-model:current="page" class="pagination" :total="pageTotal" />
+      <UIPagination v-show="pageTotal > 1" v-model:current="page" class="mt-8 mb-4 justify-center" :total="pageTotal" />
     </section>
   </UISearchableModal>
 </template>
-
-<style lang="scss" scoped>
-.body {
-  display: flex;
-  flex-direction: column;
-  padding: 20px 24px 24px;
-}
-
-.content {
-  display: flex;
-  flex-direction: column;
-}
-
-.empty {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  color: var(--ui-color-grey-700);
-
-  .hint {
-    font-size: 14px;
-    color: var(--ui-color-grey-600);
-    margin-top: 8px;
-  }
-}
-
-.course-series-list {
-  display: flex;
-  flex-wrap: wrap;
-  align-content: flex-start;
-  gap: var(--ui-gap-middle);
-}
-
-.pagination {
-  justify-content: center;
-  margin: 32px 0 16px;
-}
-
-.create-button {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-</style>
diff --git a/spx-gui/src/components/course/management/ProjectReferencesInput.vue b/spx-gui/src/components/course/management/ProjectReferencesInput.vue
index f699a82230..43d003dcf2 100644
--- a/spx-gui/src/components/course/management/ProjectReferencesInput.vue
+++ b/spx-gui/src/components/course/management/ProjectReferencesInput.vue
@@ -79,7 +79,7 @@ function handleRemove(index: number) {
 </script>
 
 <template>
-  <div class="project-references-input">
+  <div class="flex flex-col gap-3">
     <UITextInput
       v-model:value="projectInput"
       class="project-input"
@@ -95,62 +95,24 @@ function handleRemove(index: number) {
       </template>
     </UITextInput>
 
-    <div class="references-list">
+    <div class="flex flex-1 flex-col gap-2 overflow-y-auto rounded-2 border border-grey-400 p-2">
       <template v-if="references.length > 0">
-        <div v-for="(reference, index) in references" :key="reference.fullName" class="reference-item">
+        <div
+          v-for="(reference, index) in references"
+          :key="reference.fullName"
+          class="flex items-center justify-between rounded-1 border border-grey-400 px-3 py-2"
+        >
           <span class="reference-name">{{ reference.fullName }}</span>
-          <UIIcon type="close" class="remove-icon" @click="handleRemove(index)" />
+          <UIIcon
+            type="close"
+            class="cursor-pointer text-grey-500 transition-colors duration-200 hover:text-danger-600"
+            @click="handleRemove(index)"
+          />
         </div>
       </template>
-      <div v-else class="empty-hint">
+      <div v-else class="flex flex-1 items-center justify-center text-grey-700">
         {{ $t({ en: 'No reference projects added yet', zh: '尚未添加参考项目' }) }}
       </div>
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.project-references-input {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.references-list {
-  flex: 1 1 0;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  padding: 8px;
-  border: 1px solid var(--ui-color-grey-400);
-  border-radius: var(--ui-border-radius-2);
-  overflow-y: auto;
-}
-
-.reference-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 8px 12px;
-  border: 1px solid var(--ui-color-grey-400);
-  border-radius: var(--ui-border-radius-1);
-
-  .remove-icon {
-    cursor: pointer;
-    color: var(--ui-color-grey-500);
-    transition: 0.2s;
-
-    &:hover {
-      color: var(--ui-color-error);
-    }
-  }
-}
-
-.empty-hint {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--ui-color-grey-700);
-}
-</style>
diff --git a/spx-gui/src/components/course/management/SelectedCoursesList.vue b/spx-gui/src/components/course/management/SelectedCoursesList.vue
index 2f16343958..b8f384e2de 100644
--- a/spx-gui/src/components/course/management/SelectedCoursesList.vue
+++ b/spx-gui/src/components/course/management/SelectedCoursesList.vue
@@ -75,16 +75,17 @@ function removeCourse(index: number) {
 </script>
 
 <template>
-  <div class="selected-courses-list">
+  <div class="h-full overflow-y-auto p-3">
     <UIEmpty
       v-if="selectedCourses.length === 0"
       size="small"
       :description="$t({ en: 'No courses selected', zh: '未选择任何课程' })"
     />
-    <div v-else class="course-items">
+    <div v-else class="flex flex-col gap-2">
       <div
         v-for="(course, index) in selectedCourses"
         :key="course.id"
+        class="cursor-move"
         draggable="true"
         @dragstart="handleDragStart($event, index)"
         @dragend="handleDragEnd"
@@ -94,51 +95,17 @@ function removeCourse(index: number) {
       >
         <CourseItemMini :course="course" :dimmed="draggedIndex === index" :highlighted="dragOverIndex === index">
           <template #prefix>
-            <UIIcon class="drag-handle" type="exchange" />
+            <UIIcon class="mr-2 cursor-grab text-grey-400 active:cursor-grabbing" type="exchange" />
           </template>
           <template #suffix>
-            <UIIcon class="remove-icon" type="close" @click="removeCourse(index)" />
+            <UIIcon
+              class="cursor-pointer text-grey-400 transition-colors duration-200 hover:text-danger-600"
+              type="close"
+              @click="removeCourse(index)"
+            />
           </template>
         </CourseItemMini>
       </div>
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.selected-courses-list {
-  height: 100%;
-  overflow-y: auto;
-  padding: 12px;
-}
-
-.course-items {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-
-  > div {
-    cursor: move;
-  }
-}
-
-.drag-handle {
-  color: var(--ui-color-grey-400);
-  margin-right: 8px;
-  cursor: grab;
-
-  &:active {
-    cursor: grabbing;
-  }
-}
-
-.remove-icon {
-  color: var(--ui-color-grey-400);
-  cursor: pointer;
-  transition: color 0.2s;
-
-  &:hover {
-    color: var(--ui-color-danger-600);
-  }
-}
-</style>
diff --git a/spx-gui/src/components/course/management/ThumbnailUploader.vue b/spx-gui/src/components/course/management/ThumbnailUploader.vue
index 6e265b9296..09bdb182bb 100644
--- a/spx-gui/src/components/course/management/ThumbnailUploader.vue
+++ b/spx-gui/src/components/course/management/ThumbnailUploader.vue
@@ -34,45 +34,17 @@ const thumbnailUrl = useAsyncComputed(async (onCleanup) => {
 </script>
 
 <template>
-  <div class="thumbnail-uploader" @click="handleUpload.fn">
+  <div
+    class="flex cursor-pointer items-center justify-center overflow-hidden rounded-2 border border-dashed border-grey-400 transition-[border-color,background-color] duration-300 hover:border-primary-main hover:bg-grey-400"
+    @click="handleUpload.fn"
+  >
     <UILoading v-if="handleUpload.isLoading.value" />
     <template v-else>
-      <UIImg v-if="thumbnailUrl != null" :src="thumbnailUrl" class="preview" size="contain" />
-      <div v-else class="placeholder">
+      <UIImg v-if="thumbnailUrl != null" :src="thumbnailUrl" class="h-full w-full" size="contain" />
+      <div v-else class="flex flex-col items-center gap-2 text-grey-700">
         <UIIcon type="plus" />
         {{ $t({ en: 'Click to upload', zh: '点击上传' }) }}
       </div>
     </template>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.thumbnail-uploader {
-  border: 1px dashed var(--ui-color-grey-400);
-  border-radius: var(--ui-border-radius-2);
-  cursor: pointer;
-  overflow: hidden;
-  transition: 0.3s;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  &:hover {
-    border-color: var(--ui-color-primary-main);
-    background: var(--ui-color-grey-400);
-  }
-
-  .preview {
-    width: 100%;
-    height: 100%;
-  }
-
-  .placeholder {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 8px;
-    color: var(--ui-color-grey-700);
-  }
-}
-</style>
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/completion/CompletionUI.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/completion/CompletionUI.vue
index 23246eddd2..284017f641 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/completion/CompletionUI.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/completion/CompletionUI.vue
@@ -51,5 +51,3 @@ watchEffect(() => {
     />
   </UIDropdown>
 </template>
-
-<style lang="scss" scoped></style>
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/context-menu/ContextMenu.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/context-menu/ContextMenu.vue
index 59bcf2adfe..eb361df180 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/context-menu/ContextMenu.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/context-menu/ContextMenu.vue
@@ -34,5 +34,3 @@ const handleItemClick = useMessageHandle((item: InternalMenuItem) => props.contr
     </UIMenu>
   </UIDropdown>
 </template>
-
-<style lang="scss" scoped></style>
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/definition/DefinitionDetail.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/definition/DefinitionDetail.vue
index 175dadbed4..111b200422 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/definition/DefinitionDetail.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/definition/DefinitionDetail.vue
@@ -30,5 +30,3 @@ const hasContent = computed(() => documentation.value != null || childrenText.va
     <MarkdownView v-else :value="childrenText" />
   </DefinitionDetailWrapper>
 </template>
-
-<style lang="scss" scoped></style>
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/markdown/ResourcePreview.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/markdown/ResourcePreview.vue
index db2299a19c..7ed76e3c3d 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/markdown/ResourcePreview.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/markdown/ResourcePreview.vue
@@ -19,5 +19,3 @@ const resourceIdentifier = computed<ResourceIdentifier>(() => ({
   <!-- TODO: Design specially for `ResourcePreview`, instead of using the same `ResourceItem` as `ResourceSelector` -->
   <component :is="provider?.provideResourceItemRenderer()" :resource="resourceIdentifier" autoplay />
 </template>
-
-<style lang="scss" scoped></style>
diff --git a/spx-gui/src/components/editor/common/PlayControl.vue b/spx-gui/src/components/editor/common/PlayControl.vue
index 680aa0a020..dc2a76e89e 100644
--- a/spx-gui/src/components/editor/common/PlayControl.vue
+++ b/spx-gui/src/components/editor/common/PlayControl.vue
@@ -1,7 +1,7 @@
 <!-- Sound / video play control (only UI) -->
 
 <template>
-  <div class="play-control" :class="[`size-${props.size}`]" :style="colorCssVars">
+  <div class="play-control" :class="[`container-size-${props.size}`]" :style="colorCssVars">
     <div v-show="!playing" class="play" @click.stop="handlePlay.fn">
       <UIIcon class="icon" type="play" />
     </div>
@@ -79,12 +79,12 @@ const colorCssVars = computed(() => {
 .play-control {
   position: relative;
 
-  &.size-medium {
+  &.container-size-medium {
     width: 36px;
     height: 36px;
   }
 
-  &.size-large {
+  &.container-size-large {
     width: 48px;
     height: 48px;
     .icon {
diff --git a/spx-gui/src/components/editor/navbar/EditorNavbar.vue b/spx-gui/src/components/editor/navbar/EditorNavbar.vue
index 1b6f0184ec..8defe909f0 100644
--- a/spx-gui/src/components/editor/navbar/EditorNavbar.vue
+++ b/spx-gui/src/components/editor/navbar/EditorNavbar.vue
@@ -9,7 +9,7 @@
         }"
       >
         <template #trigger>
-          <UIIcon type="file" />
+          <UIIcon type="file" style="width: 24px; height: 24px" />
         </template>
         <UIMenu>
           <UIMenuGroup :disabled="!isOnline">
diff --git a/spx-gui/src/components/editor/sprite/CostumeDetail.vue b/spx-gui/src/components/editor/sprite/CostumeDetail.vue
index 676293b9b9..3dfbb115bd 100644
--- a/spx-gui/src/components/editor/sprite/CostumeDetail.vue
+++ b/spx-gui/src/components/editor/sprite/CostumeDetail.vue
@@ -1,8 +1,8 @@
 <template>
   <EditorItemDetail :name="costume.name" @rename="emit('rename')">
-    <div class="img-wrapper">
-      <CheckerboardBackground class="background" />
-      <UIImg class="img" :src="imgSrc" :loading="imgLoading" />
+    <div class="relative flex-1 overflow-hidden rounded-1 w-full">
+      <CheckerboardBackground class="absolute inset-0" />
+      <UIImg class="h-full w-full" :src="imgSrc" :loading="imgLoading" />
     </div>
   </EditorItemDetail>
 </template>
@@ -24,26 +24,3 @@ const emit = defineEmits<{
 
 const [imgSrc, imgLoading] = useFileUrl(() => props.costume.img)
 </script>
-
-<style lang="scss" scoped>
-.img-wrapper {
-  width: 100%;
-  flex: 1 1 0;
-  border-radius: 8px;
-  position: relative;
-  overflow: hidden;
-}
-
-.background {
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-}
-
-.img {
-  width: 100%;
-  height: 100%;
-}
-</style>
diff --git a/spx-gui/src/components/editor/stage/backdrop/BackdropDetail.vue b/spx-gui/src/components/editor/stage/backdrop/BackdropDetail.vue
index 3ad73f5bb0..27d9e49fec 100644
--- a/spx-gui/src/components/editor/stage/backdrop/BackdropDetail.vue
+++ b/spx-gui/src/components/editor/stage/backdrop/BackdropDetail.vue
@@ -1,7 +1,7 @@
 <template>
   <EditorItemDetail :name="backdrop.name" @rename="handleRename">
-    <div class="img-wrapper">
-      <img v-if="imgSrc != null" class="img" :src="imgSrc" />
+    <div class="flex min-h-0 flex-1 items-center justify-center w-full">
+      <img v-if="imgSrc != null" class="max-h-full max-w-full rounded-1" :src="imgSrc" />
       <UILoading :visible="imgLoading" cover />
     </div>
   </EditorItemDetail>
@@ -27,19 +27,3 @@ const handleRename = useMessageHandle(() => renameBackdrop(props.backdrop), {
 
 const [imgSrc, imgLoading] = useFileUrl(() => props.backdrop.img)
 </script>
-
-<style lang="scss" scoped>
-.img-wrapper {
-  width: 100%;
-  flex: 1 1 0;
-  min-height: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.img {
-  max-width: 100%;
-  max-height: 100%;
-  border-radius: 8px;
-}
-</style>
diff --git a/spx-gui/src/components/navbar/NavbarDropdown.vue b/spx-gui/src/components/navbar/NavbarDropdown.vue
index ccb6ee3b34..8521292715 100644
--- a/spx-gui/src/components/navbar/NavbarDropdown.vue
+++ b/spx-gui/src/components/navbar/NavbarDropdown.vue
@@ -1,9 +1,9 @@
 <template>
   <UIDropdown placement="bottom-start">
     <template #trigger>
-      <div v-radar="triggerRadar" class="dropdown">
+      <div v-radar="triggerRadar" class="flex h-full cursor-pointer items-center px-5 hover:bg-primary-600">
         <slot name="trigger"></slot>
-        <UIIcon class="icon-arrow" type="arrowDown" />
+        <UIIcon style="width: 16px; height: 16px" type="arrowDown" />
       </div>
     </template>
     <slot></slot>
@@ -18,26 +18,3 @@ defineProps<{
   triggerRadar: RadarNodeMeta
 }>()
 </script>
-
-<style lang="scss" scoped>
-.dropdown {
-  // TODO: common style with NavbarLang
-  height: 100%;
-  padding: 0 20px;
-  display: flex;
-  align-items: center;
-
-  &:hover {
-    background-color: var(--ui-color-primary-600);
-  }
-
-  :deep(.ui-icon) {
-    width: 24px;
-    height: 24px;
-  }
-  .icon-arrow {
-    width: 16px;
-    height: 16px;
-  }
-}
-</style>
diff --git a/spx-gui/src/components/navbar/NavbarLang.vue b/spx-gui/src/components/navbar/NavbarLang.vue
index 8766dca465..9ca7532be8 100644
--- a/spx-gui/src/components/navbar/NavbarLang.vue
+++ b/spx-gui/src/components/navbar/NavbarLang.vue
@@ -4,7 +4,7 @@
     <template #trigger>
       <div
         v-radar="{ name: 'Language switcher', desc: 'Click to switch between English and Chinese' }"
-        class="lang"
+        class="flex h-full cursor-pointer items-center px-5 hover:bg-primary-600"
         @click="toggleLang"
         v-html="langContent"
       ></div>
@@ -27,17 +27,3 @@ function toggleLang() {
   i18n.setLang(i18n.lang.value === 'en' ? 'zh' : 'en')
 }
 </script>
-
-<style lang="scss" scoped>
-.lang {
-  height: 100%;
-  padding: 0 20px;
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-
-  &:hover {
-    background-color: var(--ui-color-primary-600);
-  }
-}
-</style>
diff --git a/spx-gui/src/components/navbar/NavbarLogo.vue b/spx-gui/src/components/navbar/NavbarLogo.vue
index b39da13429..fefb7f766a 100644
--- a/spx-gui/src/components/navbar/NavbarLogo.vue
+++ b/spx-gui/src/components/navbar/NavbarLogo.vue
@@ -1,5 +1,9 @@
 <template>
-  <router-link v-radar="{ name: 'Logo link', desc: 'Logo image as link to the homepage' }" class="logo" to="/">
+  <router-link
+    v-radar="{ name: 'Logo link', desc: 'Logo image as link to the homepage' }"
+    class="logo relative mx-6 flex h-full items-center"
+    to="/"
+  >
     <img :src="logoSvg" />
   </router-link>
 </template>
@@ -8,22 +12,14 @@
 import logoSvg from './logo.svg'
 </script>
 
-<style lang="scss" scoped>
-.logo {
-  position: relative;
-  height: 100%;
-  margin: 0 24px 0 24px;
-  display: flex;
-  align-items: center;
-
-  &::after {
-    content: '';
-    position: absolute;
-    right: -24px;
-    display: block;
-    width: 1px;
-    height: 24px;
-    background: rgba(255, 255, 255, 0.3);
-  }
+<style scoped>
+.logo::after {
+  content: '';
+  position: absolute;
+  right: -24px;
+  display: block;
+  width: 1px;
+  height: 24px;
+  background: rgba(255, 255, 255, 0.3);
 }
 </style>
diff --git a/spx-gui/src/components/navbar/NavbarProfile.vue b/spx-gui/src/components/navbar/NavbarProfile.vue
index e09e87b820..da4e958104 100644
--- a/spx-gui/src/components/navbar/NavbarProfile.vue
+++ b/spx-gui/src/components/navbar/NavbarProfile.vue
@@ -1,9 +1,8 @@
 <!-- eslint-disable vue/no-v-html -->
 <template>
-  <div v-if="!loading && signedInUser == null" class="sign-in">
+  <div v-if="!loading && signedInUser == null" class="mr-2 flex h-full items-center px-5 whitespace-nowrap">
     <UIButton
       v-radar="{ name: 'Sign-in button', desc: 'Click to sign in' }"
-      class="sign-in-button"
       color="secondary"
       :disabled="!isOnline"
       @click="initiateSignIn()"
@@ -12,11 +11,11 @@
   </div>
   <UIDropdown v-else placement="bottom-end" :offset="{ x: 0, y: 8 }">
     <template #trigger>
-      <div class="avatar">
-        <img class="avatar-img" :src="avatarUrl ?? undefined" />
+      <div class="mr-2 flex h-full items-center justify-center px-5 hover:bg-primary-600">
+        <img class="h-8 w-8 rounded-full" :src="avatarUrl ?? undefined" />
       </div>
     </template>
-    <UIMenu class="user-menu">
+    <UIMenu class="min-w-30">
       <UIMenuGroup>
         <UIMenuItem :interactive="false">
           <div class="user-info-wrapper">
@@ -27,11 +26,11 @@
           <template #trigger>
             <UIMenuItem
               v-radar="{ name: 'Language switcher', desc: 'Click to switch between English and Chinese' }"
-              class="lang-item"
+              class="justify-between p-2"
               @click="toggleLang"
             >
               {{ $t({ en: 'Language', zh: '语言' }) }}
-              <div class="icon" v-html="langContent"></div>
+              <div class="lang-switch-icon h-4.5 w-4.5 text-turquoise-600" v-html="langContent"></div>
             </UIMenuItem>
           </template>
           {{ $t({ en: 'English / 中文', zh: '中文 / English' }) }}
@@ -124,55 +123,9 @@ function handleSignOut() {
 }
 </script>
 
-<style lang="scss" scoped>
-.sign-in,
-.avatar {
-  padding: 0 20px;
-  margin-right: 8px;
+<style scoped>
+.lang-switch-icon :deep(svg) {
+  width: 100%;
   height: 100%;
-  display: flex;
-  align-items: center;
-}
-
-.sign-in-button {
-  font: inherit;
-}
-
-.sign-in {
-  white-space: nowrap;
-}
-
-.avatar {
-  justify-content: center;
-
-  &:hover {
-    background-color: var(--ui-color-primary-600);
-  }
-
-  .avatar-img {
-    width: 32px;
-    height: 32px;
-    border-radius: 16px;
-  }
-}
-
-.lang-item {
-  padding: 8px;
-  justify-content: space-between;
-
-  .icon {
-    width: 18px;
-    height: 18px;
-    color: var(--ui-color-turquoise-600);
-
-    :deep(svg) {
-      width: 100%;
-      height: 100%;
-    }
-  }
-}
-
-.user-menu {
-  min-width: 120px;
 }
 </style>
diff --git a/spx-gui/src/components/navbar/NavbarTutorials.vue b/spx-gui/src/components/navbar/NavbarTutorials.vue
index fbb12d1ba0..d73126337b 100644
--- a/spx-gui/src/components/navbar/NavbarTutorials.vue
+++ b/spx-gui/src/components/navbar/NavbarTutorials.vue
@@ -3,10 +3,10 @@
     <template #trigger>
       <router-link
         v-radar="{ name: 'Navbar tutorials link', desc: 'Click to open the tutorials page' }"
-        class="navbar-tutorials"
+        class="flex h-full cursor-pointer items-center px-5 hover:bg-primary-600"
         to="/tutorials"
       >
-        <UIIcon class="icon" type="tutorial" />
+        <UIIcon type="tutorial" class="text-grey-100" style="width: 24px; height: 24px" />
       </router-link>
     </template>
     <div class="text">{{ $t({ en: 'Tutorials', zh: '教程' }) }}</div>
@@ -16,23 +16,3 @@
 <script setup lang="ts">
 import { UIIcon, UITooltip } from '@/components/ui'
 </script>
-
-<style lang="scss" scoped>
-.navbar-tutorials {
-  height: 100%;
-  padding: 0 20px;
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-
-  .icon {
-    width: 24px;
-    height: 24px;
-    color: white;
-  }
-
-  &:hover {
-    background-color: var(--ui-color-primary-600);
-  }
-}
-</style>
diff --git a/spx-gui/src/components/project/ProjectCreateModal.vue b/spx-gui/src/components/project/ProjectCreateModal.vue
index 8685678a0a..a038a3e9fb 100644
--- a/spx-gui/src/components/project/ProjectCreateModal.vue
+++ b/spx-gui/src/components/project/ProjectCreateModal.vue
@@ -7,7 +7,7 @@
     @update:visible="handleCancel"
   >
     <UIForm :form="form" has-success-feedback @submit="handleSubmit.fn">
-      <div class="alert">
+      <div class="h-7.5 text-grey-900">
         {{
           $t({
             en: 'The project name will also be used in project URLs.',
@@ -22,7 +22,7 @@
           :placeholder="$t({ en: 'Please enter the project name', zh: '请输入项目名' })"
         />
       </UIFormItem>
-      <footer class="footer">
+      <footer class="mt-10 flex justify-center">
         <UIButton
           v-radar="{ name: 'Create button', desc: 'Click to create the project' }"
           class="create-button"
@@ -150,16 +150,3 @@ async function validateName(name: string): Promise<FormValidationResult> {
     })
 }
 </script>
-
-<style scoped lang="scss">
-.alert {
-  height: 30px;
-  color: var(--ui-color-grey-900);
-}
-
-.footer {
-  margin-top: 40px;
-  display: flex;
-  justify-content: center;
-}
-</style>
diff --git a/spx-gui/src/components/project/ProjectItem.vue b/spx-gui/src/components/project/ProjectItem.vue
index b3f7db01b6..832d949f47 100644
--- a/spx-gui/src/components/project/ProjectItem.vue
+++ b/spx-gui/src/components/project/ProjectItem.vue
@@ -19,7 +19,7 @@
               class="invisible absolute top-2 right-2 flex h-8 w-8 items-center justify-center rounded-full bg-grey-100 text-grey-800 opacity-0 transition-all duration-100 group-hover:visible group-hover:opacity-100 hover:bg-primary-main hover:text-grey-100"
               @click.stop.prevent
             >
-              <UIIcon class="h-5.25 w-5.25" type="more" />
+              <UIIcon style="width: 21px; height: 21px" type="more" />
             </div>
           </template>
           <UIMenu>
@@ -104,7 +104,7 @@
         </div>
         <p class="mt-1 flex h-5 gap-3 text-13/5 text-grey-700">
           <span class="flex flex-none items-center gap-1" :class="{ 'text-red-main': liking }" :title="$t(likesTitle)">
-            <UIIcon class="h-3.5 w-3.5" type="heart" />
+            <UIIcon style="width: 14px; height: 14px" type="heart" />
             {{ $t(humanizeCount(project.likeCount)) }}
           </span>
           <span class="min-w-0 flex-1 truncate" :title="$t(timeTitle)">
diff --git a/spx-gui/src/components/project/ProjectModifyNameModal.vue b/spx-gui/src/components/project/ProjectModifyNameModal.vue
index 6d81a88fe2..9ab7cfdba1 100644
--- a/spx-gui/src/components/project/ProjectModifyNameModal.vue
+++ b/spx-gui/src/components/project/ProjectModifyNameModal.vue
@@ -103,7 +103,7 @@ async function validateName(name: string): Promise<FormValidationResult> {
           :placeholder="$t({ en: 'Please enter the project name', zh: '请输入项目名' })"
         />
       </UIFormItem>
-      <footer class="footer">
+      <footer class="mt-large flex justify-end gap-middle pb-1">
         <UIButton
           v-radar="{ name: 'Cancel button', desc: 'Click to cancel updating project name' }"
           color="boring"
@@ -123,13 +123,3 @@ async function validateName(name: string): Promise<FormValidationResult> {
     </UIForm>
   </UIFormModal>
 </template>
-
-<style scoped lang="scss">
-.footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: var(--ui-gap-middle);
-  margin-top: var(--ui-gap-large);
-  padding-bottom: 4px;
-}
-</style>
diff --git a/spx-gui/src/components/project/ProjectOpenModal.vue b/spx-gui/src/components/project/ProjectOpenModal.vue
index 1645861d85..280589a5bb 100644
--- a/spx-gui/src/components/project/ProjectOpenModal.vue
+++ b/spx-gui/src/components/project/ProjectOpenModal.vue
@@ -43,7 +43,7 @@ const queryRet = useQuery(
     @update:visible="emit('cancelled')"
   >
     <ListResultWrapper v-slot="slotProps" content-type="project" :query-ret="queryRet" :height="524">
-      <ul class="project-list">
+      <ul class="flex flex-wrap content-start gap-middle">
         <ProjectItem
           v-for="project in slotProps.data.data"
           :key="project.id"
@@ -53,19 +53,6 @@ const queryRet = useQuery(
         />
       </ul>
     </ListResultWrapper>
-    <UIPagination v-show="pageTotal > 1" v-model:current="page" class="pagination" :total="pageTotal" />
+    <UIPagination v-show="pageTotal > 1" v-model:current="page" class="mt-8 mb-4 justify-center" :total="pageTotal" />
   </UIFormModal>
 </template>
-
-<style scoped lang="scss">
-.project-list {
-  display: flex;
-  flex-wrap: wrap;
-  align-content: flex-start;
-  gap: var(--ui-gap-middle);
-}
-.pagination {
-  justify-content: center;
-  margin: 32px 0 16px;
-}
-</style>
diff --git a/spx-gui/src/components/project/ProjectPublishModal.vue b/spx-gui/src/components/project/ProjectPublishModal.vue
index 3c8808f9c8..ea3ae1b175 100644
--- a/spx-gui/src/components/project/ProjectPublishModal.vue
+++ b/spx-gui/src/components/project/ProjectPublishModal.vue
@@ -10,6 +10,7 @@ import type { SpxProject } from '@/models/spx/project'
 import { isProjectUsingAIInteraction } from '@/utils/project'
 import { UIImg, UIFormModal, UIForm, UIFormItem, UITextInput, UIButton, useForm } from '@/components/ui'
 import { stringifyProjectFullName } from '@/apis/project'
+import stageBg from '@/assets/images/stage-bg.svg'
 
 const props = defineProps<{
   project: SpxProject
@@ -93,7 +94,7 @@ const handleSubmit = useMessageHandle(
     @update:visible="handleCancel"
   >
     <UIForm :form="form" has-success-feedback @submit="handleSubmit.fn">
-      <p v-if="project.visibility === Visibility.Private" class="tip">
+      <p v-if="project.visibility === Visibility.Private" class="mb-6">
         {{
           $t({
             en: 'Published projects will be visible to all XBuilder users.',
@@ -101,8 +102,11 @@ const handleSubmit = useMessageHandle(
           })
         }}
       </p>
-      <div class="thumbnail-wrapper">
-        <UIImg class="thumbnail" :src="thumbnailUrl" :loading="thumbnailUrlLoading" size="contain" />
+      <div
+        class="mb-6 h-56 w-full overflow-hidden rounded-1 bg-center bg-cover bg-no-repeat"
+        :style="{ backgroundImage: `url(${stageBg})` }"
+      >
+        <UIImg class="h-full w-full" :src="thumbnailUrl" :loading="thumbnailUrlLoading" size="contain" />
       </div>
       <UIFormItem :label="$t({ en: 'Release description', zh: '发布内容' })" path="releaseDescription">
         <UITextInput
@@ -139,7 +143,7 @@ const handleSubmit = useMessageHandle(
           "
         />
       </UIFormItem>
-      <footer class="footer">
+      <footer class="mt-5 flex justify-end gap-3">
         <UIButton
           v-radar="{ name: 'Cancel button', desc: 'Click to cancel project publishing' }"
           color="boring"
@@ -159,28 +163,3 @@ const handleSubmit = useMessageHandle(
     </UIForm>
   </UIFormModal>
 </template>
-
-<style lang="scss" scoped>
-.tip {
-  margin-bottom: 24px;
-}
-.thumbnail-wrapper {
-  margin-bottom: 24px;
-  width: 100%;
-  height: 224px;
-  background: url(@/assets/images/stage-bg.svg) center / cover no-repeat;
-  border-radius: var(--ui-border-radius-1);
-  overflow: hidden;
-
-  .thumbnail {
-    width: 100%;
-    height: 100%;
-  }
-}
-.footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 12px;
-  margin-top: 20px;
-}
-</style>
diff --git a/spx-gui/src/components/project/ProjectPublishedModal.vue b/spx-gui/src/components/project/ProjectPublishedModal.vue
index 0a749f6cbb..d7deac7149 100644
--- a/spx-gui/src/components/project/ProjectPublishedModal.vue
+++ b/spx-gui/src/components/project/ProjectPublishedModal.vue
@@ -33,7 +33,7 @@ const handleCopy = useMessageHandle(
     :auto-focus="false"
     @update:visible="emit('cancelled')"
   >
-    <div class="desc">
+    <div class="mb-2 text-grey-900">
       <I18nT>
         <template #en>
           Visit
@@ -54,7 +54,7 @@ const handleCopy = useMessageHandle(
         </template>
       </I18nT>
     </div>
-    <div class="link-wrapper">
+    <div class="mb-4 flex">
       <UITextInput
         v-radar="{ name: 'Project link input', desc: 'Input field showing the published project link' }"
         :value="projectPageLink"
@@ -63,7 +63,7 @@ const handleCopy = useMessageHandle(
       />
       <UIButton
         v-radar="{ name: 'Copy link button', desc: 'Click to copy project link to clipboard' }"
-        class="copy-button"
+        class="ml-3 whitespace-nowrap"
         @click="handleCopy"
       >
         {{ $t({ en: 'Copy link', zh: '复制链接' }) }}
@@ -71,20 +71,3 @@ const handleCopy = useMessageHandle(
     </div>
   </UIFormModal>
 </template>
-
-<style scoped lang="scss">
-.desc {
-  color: var(--ui-color-grey-900);
-  margin-bottom: 8px;
-}
-
-.link-wrapper {
-  display: flex;
-  margin-bottom: 16px;
-}
-
-.copy-button {
-  margin-left: 12px;
-  white-space: nowrap;
-}
-</style>
diff --git a/spx-gui/src/components/project/ProjectSharingLinkModal.vue b/spx-gui/src/components/project/ProjectSharingLinkModal.vue
index f981f489e6..d7b6cd3788 100644
--- a/spx-gui/src/components/project/ProjectSharingLinkModal.vue
+++ b/spx-gui/src/components/project/ProjectSharingLinkModal.vue
@@ -6,7 +6,7 @@
     :auto-focus="false"
     @update:visible="emit('cancelled')"
   >
-    <div class="desc">
+    <div class="mb-2 text-grey-900">
       {{
         $t({
           en: 'A sharing link to the project has been created. Feel free to copy it below to share the project with others.',
@@ -14,7 +14,7 @@
         })
       }}
     </div>
-    <div class="link">
+    <div class="mb-4 flex">
       <UITextInput
         v-radar="{ name: 'Sharing link input', desc: 'Input field showing the project sharing link' }"
         :value="projectSharingLink"
@@ -23,7 +23,7 @@
       />
       <UIButton
         v-radar="{ name: 'Copy button', desc: 'Click to copy sharing link to clipboard' }"
-        class="copy-button"
+        class="ml-3 whitespace-nowrap"
         :loading="handleCopy.isLoading.value"
         @click="handleCopy.fn"
       >
@@ -60,20 +60,3 @@ const handleCopy = useMessageHandle(
   { en: 'Link copied to clipboard', zh: '分享链接已复制到剪贴板' }
 )
 </script>
-
-<style scoped lang="scss">
-.desc {
-  color: var(--ui-color-grey-900);
-  margin-bottom: 8px;
-}
-
-.link {
-  display: flex;
-  margin-bottom: 16px;
-}
-
-.copy-button {
-  margin-left: 12px;
-  white-space: nowrap;
-}
-</style>
diff --git a/spx-gui/src/components/tutorials/CourseItem.vue b/spx-gui/src/components/tutorials/CourseItem.vue
index 94d9626a2e..905ac855c7 100644
--- a/spx-gui/src/components/tutorials/CourseItem.vue
+++ b/spx-gui/src/components/tutorials/CourseItem.vue
@@ -23,47 +23,15 @@ const thumbnailUrl = useAsyncComputed(async (onCleanup) => {
 <template>
   <li
     v-radar="{ name: `Course item \u0022${props.course.title}\u0022`, desc: 'Click to start the course' }"
-    class="course-item"
+    class="relative w-58 overflow-hidden rounded-3 transition-all hover:cursor-pointer hover:-translate-y-0.5 hover:shadow-[0_4px_12px_rgba(0,0,0,0.3)]"
     :style="{ height: `${courseItemHeight}px` }"
   >
-    <UIImg class="thumbnail" :src="thumbnailUrl" size="cover" />
+    <UIImg class="h-full w-full" :src="thumbnailUrl" size="cover" />
 
-    <div class="title">{{ course.title }}</div>
+    <div
+      class="absolute bottom-0 h-10 w-full overflow-hidden bg-grey-1000/30 px-4 text-15/10 whitespace-nowrap text-ellipsis text-grey-100"
+    >
+      {{ course.title }}
+    </div>
   </li>
 </template>
-
-<style lang="scss" scoped>
-.course-item {
-  width: 232px;
-  border-radius: var(--ui-border-radius-3);
-  overflow: hidden;
-  transition: all 0.2s;
-  position: relative;
-
-  &:hover {
-    cursor: pointer;
-    transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-  }
-
-  .thumbnail {
-    width: 100%;
-    height: 100%;
-  }
-
-  .title {
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    height: 40px;
-    font-size: 15px;
-    line-height: 40px;
-    padding: 0 16px;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-    color: var(--ui-color-grey-100);
-    background: rgb(from var(--ui-color-grey-1000) r g b / 0.3);
-  }
-}
-</style>
diff --git a/spx-gui/src/components/tutorials/TutorialCourseSuccessModal.vue b/spx-gui/src/components/tutorials/TutorialCourseSuccessModal.vue
index 64bda73d3b..6ec2c18327 100644
--- a/spx-gui/src/components/tutorials/TutorialCourseSuccessModal.vue
+++ b/spx-gui/src/components/tutorials/TutorialCourseSuccessModal.vue
@@ -85,19 +85,19 @@ const { fn: handleStartNextCourse } = useMessageHandle(
     mask-closable
     @update:visible="handleCancel"
   >
-    <div class="tutorial-course-success-modal">
-      <div class="header">
+    <div class="px-5 pt-4 pb-6">
+      <div class="flex justify-end">
         <UIModalClose class="close" @click="handleCancel" />
       </div>
 
-      <div class="content">
+      <div class="flex flex-col items-center justify-center text-center">
         <!-- eslint-disable vue/no-v-html -->
-        <div class="success" v-html="success"></div>
+        <div class="h-fit w-fit" v-html="success"></div>
 
         <div>{{ $t({ zh: '太棒了!', en: 'Great!' }) }}</div>
         <div>{{ courseCompleteMessage }}</div>
 
-        <div class="actions">
+        <div class="mt-6 flex w-full flex-col gap-5">
           <UIButton color="boring" size="large" @click="handleBrowseTutorials">
             {{ $t({ zh: '浏览所有课程', en: 'Browse all courses' }) }}
           </UIButton>
@@ -110,35 +110,3 @@ const { fn: handleStartNextCourse } = useMessageHandle(
     </div>
   </UIModal>
 </template>
-
-<style lang="scss" scoped>
-.tutorial-course-success-modal {
-  padding: 16px 20px 24px 20px;
-
-  .header {
-    display: flex;
-    justify-content: flex-end;
-  }
-
-  .content {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-
-    .success {
-      width: fit-content;
-      height: fit-content;
-    }
-
-    .actions {
-      display: flex;
-      flex-direction: column;
-      gap: 20px;
-      margin-top: 24px;
-      width: 100%;
-    }
-  }
-}
-</style>
diff --git a/spx-gui/src/components/tutorials/TutorialStateIndicator.vue b/spx-gui/src/components/tutorials/TutorialStateIndicator.vue
index 9341a02632..8a11e9a603 100644
--- a/spx-gui/src/components/tutorials/TutorialStateIndicator.vue
+++ b/spx-gui/src/components/tutorials/TutorialStateIndicator.vue
@@ -26,9 +26,11 @@ const { fn: handleExitTutorial } = useMessageHandle(
 <template>
   <UIDropdownWithTooltip placement="top">
     <template #trigger>
-      <div class="tutorial-state-indicator">
-        <UIIcon class="icon-tutorial" type="tutorial" />
-        <UIIcon class="icon-arrow" type="arrowAlt" />
+      <div
+        class="flex h-7 w-13 cursor-pointer items-center justify-center gap-1 rounded-full bg-primary-200 hover:bg-primary-300"
+      >
+        <UIIcon class="text-primary-main" style="width: 16px; height: 16px" type="tutorial" />
+        <UIIcon class="rotate-180 text-primary-main" style="width: 10px; height: 10px" type="arrowAlt" />
       </div>
     </template>
 
@@ -50,33 +52,3 @@ const { fn: handleExitTutorial } = useMessageHandle(
     </template>
   </UIDropdownWithTooltip>
 </template>
-
-<style lang="scss" scoped>
-.tutorial-state-indicator {
-  display: flex;
-  gap: 4px;
-  width: 52px;
-  height: 28px;
-  border-radius: 100px;
-  background: var(--ui-color-primary-200);
-  align-items: center;
-  justify-content: center;
-
-  .icon-tutorial {
-    width: 16px;
-    height: 16px;
-    color: var(--ui-color-primary-main);
-  }
-  .icon-arrow {
-    width: 10px;
-    height: 10px;
-    transform: rotate(180deg);
-    color: var(--ui-color-primary-main);
-  }
-
-  &:hover {
-    cursor: pointer;
-    background: var(--ui-color-primary-300);
-  }
-}
-</style>
diff --git a/spx-gui/src/pages/community/search.vue b/spx-gui/src/pages/community/search.vue
index 92948d4302..c54923b814 100644
--- a/spx-gui/src/pages/community/search.vue
+++ b/spx-gui/src/pages/community/search.vue
@@ -2,11 +2,11 @@
   <CommunityHeader>
     <I18nT v-if="queryRet.data.value != null">
       <template #en>
-        Found {{ queryRet.data.value?.total }} projects for "<span class="keyword">{{ keyword }}</span
+        Found {{ queryRet.data.value?.total }} projects for "<span class="text-primary-main">{{ keyword }}</span
         >"
       </template>
       <template #zh>
-        找到 {{ queryRet.data.value?.total }} 个关于“<span class="keyword">{{ keyword }}</span
+        找到 {{ queryRet.data.value?.total }} 个关于“<span class="text-primary-main">{{ keyword }}</span
         >”的项目
       </template>
     </I18nT>
@@ -44,13 +44,16 @@
       </label>
     </template>
   </CommunityHeader>
-  <CenteredWrapper class="main" :style="{ '--project-num-in-row': numInRow }">
+  <CenteredWrapper class="flex flex-col gap-5 py-5" :style="{ '--project-num-in-row': numInRow }">
     <ListResultWrapper v-slot="slotProps" content-type="project" :query-ret="queryRet" :height="528">
-      <ul class="projects">
+      <ul class="grid grid-cols-[repeat(var(--project-num-in-row),minmax(0,1fr))] gap-5">
         <ProjectItem v-for="project in slotProps.data.data" :key="project.id" :project="project" />
       </ul>
     </ListResultWrapper>
-    <footer v-show="pageTotal > 1" class="pagination-wrapper">
+    <footer
+      v-show="pageTotal > 1"
+      class="flex h-14 w-full shrink-0 items-center justify-center rounded-2 border border-grey-400 bg-grey-100"
+    >
       <UIPagination v-model:current="page" :total="pageTotal" />
     </footer>
   </CenteredWrapper>
@@ -127,34 +130,3 @@ const queryRet = useQuery(() => listProject(listParams.value), {
   zh: '搜索项目失败'
 })
 </script>
-
-<style lang="scss" scoped>
-.keyword {
-  color: var(--ui-color-primary-main);
-}
-
-.main {
-  padding: 20px 0;
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-.projects {
-  display: grid;
-  grid-template-columns: repeat(var(--project-num-in-row), 1fr);
-  gap: 20px;
-}
-
-.pagination-wrapper {
-  flex: 0 0 56px;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  border-radius: var(--ui-border-radius-2);
-  border: 1px solid var(--ui-color-grey-400);
-  background: var(--ui-color-grey-100);
-}
-</style>
diff --git a/spx-gui/src/pages/community/user/followers.vue b/spx-gui/src/pages/community/user/followers.vue
index 653c03f19b..23ce409a9e 100644
--- a/spx-gui/src/pages/community/user/followers.vue
+++ b/spx-gui/src/pages/community/user/followers.vue
@@ -53,13 +53,6 @@ const queryRet = useQuery(
         <UserItem v-for="u in slotProps.data.data" :key="u.id" :user="u" />
       </ul>
     </ListResultWrapper>
-    <UIPagination v-show="pageTotal > 1" v-model:current="page" class="pagination" :total="pageTotal" />
+    <UIPagination v-show="pageTotal > 1" v-model:current="page" class="mt-9 mb-5 justify-center" :total="pageTotal" />
   </UserContent>
 </template>
-
-<style lang="scss" scoped>
-.pagination {
-  margin: 36px 0 20px;
-  justify-content: center;
-}
-</style>
diff --git a/spx-gui/src/pages/community/user/following.vue b/spx-gui/src/pages/community/user/following.vue
index ea405a8e38..2cd640e829 100644
--- a/spx-gui/src/pages/community/user/following.vue
+++ b/spx-gui/src/pages/community/user/following.vue
@@ -53,13 +53,6 @@ const queryRet = useQuery(
         <UserItem v-for="u in slotProps.data.data" :key="u.id" :user="u" />
       </ul>
     </ListResultWrapper>
-    <UIPagination v-show="pageTotal > 1" v-model:current="page" class="pagination" :total="pageTotal" />
+    <UIPagination v-show="pageTotal > 1" v-model:current="page" class="mt-9 mb-5 justify-center" :total="pageTotal" />
   </UserContent>
 </template>
-
-<style lang="scss" scoped>
-.pagination {
-  margin: 36px 0 20px;
-  justify-content: center;
-}
-</style>
diff --git a/spx-gui/src/pages/community/user/index.vue b/spx-gui/src/pages/community/user/index.vue
index e22d609e12..78ce218eec 100644
--- a/spx-gui/src/pages/community/user/index.vue
+++ b/spx-gui/src/pages/community/user/index.vue
@@ -13,50 +13,18 @@ const { data: user, error, refetch } = useUser(() => props.nameInput)
 </script>
 
 <template>
-  <CenteredWrapper class="user-page" size="large">
-    <UIError v-if="error != null" class="error" :retry="refetch">
+  <CenteredWrapper class="flex flex-[1_0_auto] flex-col gap-5 pt-6 pb-10" size="large">
+    <UIError v-if="error != null" class="flex flex-1 rounded-2 bg-grey-100" :retry="refetch">
       {{ $t(error.userMessage) }}
     </UIError>
     <template v-else-if="user != null">
       <UserHeader :user="user" />
-      <div class="main">
-        <UserSidebar class="sidebar" :username="user.username" />
-        <div class="content">
+      <div class="flex items-start gap-5">
+        <UserSidebar class="shrink-0" :username="user.username" />
+        <div class="min-w-0 flex-1">
           <router-view />
         </div>
       </div>
     </template>
   </CenteredWrapper>
 </template>
-
-<style lang="scss" scoped>
-.user-page {
-  flex: 1 0 auto;
-  padding: 24px 0 40px;
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-.error {
-  flex: 1 1 0;
-  display: flex;
-
-  border-radius: var(--ui-border-radius-2);
-  background: var(--ui-color-grey-100);
-}
-
-.main {
-  display: flex;
-  align-items: flex-start;
-  gap: 20px;
-
-  .sidebar {
-    flex: 0 0 auto;
-  }
-  .content {
-    flex: 1 1 0;
-    min-width: 0;
-  }
-}
-</style>
diff --git a/spx-gui/src/pages/community/user/likes.vue b/spx-gui/src/pages/community/user/likes.vue
index 82876a5cb2..99971d2abc 100644
--- a/spx-gui/src/pages/community/user/likes.vue
+++ b/spx-gui/src/pages/community/user/likes.vue
@@ -52,30 +52,13 @@ const queryRet = useQuery(
     <template #title>
       {{ $t({ en: 'Projects I like', zh: '我喜欢的项目' }) }}
     </template>
-    <div class="projects-wrapper">
+    <div class="mt-2">
       <ListResultWrapper v-slot="slotProps" content-type="project" :query-ret="queryRet" :height="524">
-        <ul class="projects">
+        <ul class="grid grid-cols-[repeat(var(--project-num-in-row),minmax(0,1fr))] gap-middle">
           <ProjectItem v-for="project in slotProps.data.data" :key="project.id" :project="project" />
         </ul>
       </ListResultWrapper>
-      <UIPagination v-show="pageTotal > 1" v-model:current="page" class="pagination" :total="pageTotal" />
+      <UIPagination v-show="pageTotal > 1" v-model:current="page" class="mt-9 mb-5 justify-center" :total="pageTotal" />
     </div>
   </UserContent>
 </template>
-
-<style lang="scss" scoped>
-.projects-wrapper {
-  margin-top: 8px;
-}
-
-.projects {
-  display: grid;
-  grid-template-columns: repeat(var(--project-num-in-row), 1fr);
-  gap: var(--ui-gap-middle);
-}
-
-.pagination {
-  margin: 36px 0 20px;
-  justify-content: center;
-}
-</style>
diff --git a/spx-gui/src/pages/community/user/overview.vue b/spx-gui/src/pages/community/user/overview.vue
index c09c8cfd19..775db6593d 100644
--- a/spx-gui/src/pages/community/user/overview.vue
+++ b/spx-gui/src/pages/community/user/overview.vue
@@ -71,8 +71,8 @@ const likesRet = useQuery(
 </script>
 
 <template>
-  <div class="user-overview">
-    <CommunityCard class="card">
+  <div class="flex flex-col gap-5">
+    <CommunityCard class="px-middle">
       <ProjectsSection
         v-radar="{ name: 'User projects', desc: 'Section showing user\'s projects' }"
         context="user"
@@ -108,7 +108,7 @@ const likesRet = useQuery(
         />
       </ProjectsSection>
     </CommunityCard>
-    <CommunityCard class="card">
+    <CommunityCard class="px-middle">
       <ProjectsSection
         v-radar="{ name: 'User liked projects', desc: 'Section showing projects liked by this user' }"
         context="user"
@@ -137,15 +137,3 @@ const likesRet = useQuery(
     </CommunityCard>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.user-overview {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-.card {
-  padding: 0 var(--ui-gap-middle);
-}
-</style>
diff --git a/spx-gui/src/pages/community/user/projects.vue b/spx-gui/src/pages/community/user/projects.vue
index 4a6cb5494e..e7c474a891 100644
--- a/spx-gui/src/pages/community/user/projects.vue
+++ b/spx-gui/src/pages/community/user/projects.vue
@@ -90,7 +90,7 @@ const handleNewProject = useMessageHandle(
       {{ $t({ en: 'My projects', zh: '我的项目' }) }}
     </template>
     <template #extra>
-      <label class="sort">
+      <label class="flex items-center gap-2">
         {{
           $t({
             en: 'Sort by',
@@ -122,9 +122,9 @@ const handleNewProject = useMessageHandle(
         {{ $t({ en: 'New project', zh: '新建项目' }) }}
       </UIButton>
     </template>
-    <div class="projects-wrapper">
+    <div class="mt-2">
       <ListResultWrapper v-slot="slotProps" content-type="project" :query-ret="queryRet" :height="524">
-        <ul class="projects">
+        <ul class="grid grid-cols-[repeat(var(--project-num-in-row),minmax(0,1fr))] gap-middle">
           <ProjectItem
             v-for="project in slotProps.data.data"
             :key="project.id"
@@ -135,30 +135,7 @@ const handleNewProject = useMessageHandle(
           />
         </ul>
       </ListResultWrapper>
-      <UIPagination v-show="pageTotal > 1" v-model:current="page" class="pagination" :total="pageTotal" />
+      <UIPagination v-show="pageTotal > 1" v-model:current="page" class="mt-9 mb-5 justify-center" :total="pageTotal" />
     </div>
   </UserContent>
 </template>
-
-<style lang="scss" scoped>
-.sort {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.projects-wrapper {
-  margin-top: 8px;
-}
-
-.projects {
-  display: grid;
-  grid-template-columns: repeat(var(--project-num-in-row), 1fr);
-  gap: var(--ui-gap-middle);
-}
-
-.pagination {
-  margin: 36px 0 20px;
-  justify-content: center;
-}
-</style>
diff --git a/spx-gui/src/pages/tutorials/course-series.vue b/spx-gui/src/pages/tutorials/course-series.vue
index acf217d980..0775d26a75 100644
--- a/spx-gui/src/pages/tutorials/course-series.vue
+++ b/spx-gui/src/pages/tutorials/course-series.vue
@@ -18,6 +18,8 @@ import { useRouteQueryParamInt } from '@/utils/route'
 import { useAsyncComputed, usePageTitle } from '@/utils/utils'
 import { useMessageHandle } from '@/utils/exception'
 import CommunityFooter from '@/components/community/footer/CommunityFooter.vue'
+// TODO: Temporary background, replace with the latest assets
+import stageBg from '@/assets/images/stage-bg.svg'
 
 const coursePadding = 20
 const numInColumn = 2
@@ -96,29 +98,34 @@ const { fn: handleCourseClick } = useMessageHandle(
 </script>
 
 <template>
-  <div class="course-series-page">
+  <div class="flex h-full w-full flex-col overflow-y-auto bg-grey-300">
     <!-- TODO: Temporarily import the community component -->
     <CommunityNavbar />
 
-    <CenteredWrapper size="medium" class="content-wrapper">
-      <CommunityCard class="header">
+    <CenteredWrapper size="medium" class="my-6">
+      <CommunityCard class="relative flex gap-10 bg-grey-100 p-5">
         <UILoading v-if="courseSeriesIsLoading" cover mask="solid" />
         <UIError v-else-if="courseSeriesError != null" :retry="courseSeriesRefetch">
           {{ $t(courseSeriesError.userMessage) }}
         </UIError>
-        <div class="left">
-          <UIImg class="thumbnail" :src="thumbnailUrl" size="cover" />
+        <div
+          class="aspect-[1.08] flex-[1_1_200px] overflow-hidden rounded-3 bg-center bg-cover"
+          :style="{ backgroundImage: `url(${stageBg})` }"
+        >
+          <UIImg class="h-full w-full" :src="thumbnailUrl" size="cover" />
         </div>
-        <div class="right">
+        <div class="mr-5 flex flex-[1_1_1000px] flex-col gap-5 overflow-hidden">
           <template v-if="courseSeries != null">
-            <h2 class="title">{{ courseSeries.title }}</h2>
+            <h2 class="overflow-hidden text-20/7 whitespace-nowrap text-ellipsis text-grey-1000">
+              {{ courseSeries.title }}
+            </h2>
 
             <div
               v-radar="{
                 name: 'Course series details',
                 desc: 'Course series description'
               }"
-              class="description"
+              class="flex-1 overflow-auto"
             >
               <TextView
                 :text="courseSeries.description"
@@ -129,7 +136,7 @@ const { fn: handleCourseClick } = useMessageHandle(
         </div>
       </CommunityCard>
 
-      <div class="courses-wrapper">
+      <div class="mt-7 flex flex-col">
         <div v-if="courseSeries" :style="{ '--num-in-row': numInRow }">
           <ListResultWrapper :query-ret="courseQuery" :height="height">
             <template #empty="{ style }">
@@ -143,7 +150,7 @@ const { fn: handleCourseClick } = useMessageHandle(
               </UIEmpty>
             </template>
             <template #default="{ data }">
-              <ul class="course-list">
+              <ul class="grid grid-cols-[repeat(var(--num-in-row),minmax(0,1fr))] gap-5">
                 <!-- a tag are used for: link preview on hover, context menu support, and better accessibility -->
                 <a
                   v-for="course in data.data"
@@ -157,87 +164,10 @@ const { fn: handleCourseClick } = useMessageHandle(
             </template>
           </ListResultWrapper>
         </div>
-        <UIPagination v-show="pageTotal > 1" v-model:current="page" class="pagination" :total="pageTotal" />
+        <UIPagination v-show="pageTotal > 1" v-model:current="page" class="mt-9 self-center" :total="pageTotal" />
       </div>
     </CenteredWrapper>
 
     <CommunityFooter />
   </div>
 </template>
-
-<style lang="scss" scoped>
-.course-series-page {
-  display: flex;
-  flex-direction: column;
-  overflow-y: auto;
-  width: 100%;
-  height: 100%;
-  background-color: var(--ui-color-grey-300);
-}
-
-.content-wrapper {
-  margin: 24px auto;
-}
-
-.header {
-  position: relative;
-  padding: 20px;
-  display: flex;
-  gap: 40px;
-  background: var(--ui-color-grey-100);
-
-  .left {
-    flex: 1 1 200px;
-    aspect-ratio: 1.08;
-    overflow: hidden;
-    border-radius: var(--ui-border-radius-3);
-    // TODO: Temporary background, replace with the latest assets
-    background-image: url(@/assets/images/stage-bg.svg);
-
-    .thumbnail {
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-  .right {
-    flex: 1 1 1000px;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    margin-right: 20px;
-    gap: 20px;
-
-    .title {
-      line-height: 28px;
-      font-size: 20px;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      overflow: hidden;
-      color: var(--ui-color-grey-1000);
-    }
-
-    .description {
-      flex: 1 1 0;
-      overflow: auto;
-    }
-  }
-}
-
-.courses-wrapper {
-  display: flex;
-  margin-top: 28px;
-  flex-direction: column;
-
-  .course-list {
-    display: grid;
-    grid-template-columns: repeat(var(--num-in-row), 1fr);
-    gap: 20px;
-  }
-
-  .pagination {
-    align-self: center;
-    margin-top: 36px;
-  }
-}
-</style>

From 45f1ccf4a09a1006cd8b386eb482e7be68ab4235 Mon Sep 17 00:00:00 2001
From: chennan <chennan@qiniu.com>
Date: Wed, 1 Apr 2026 08:28:21 +0800
Subject: [PATCH 05/10] batch migration task 2 - asset

---
 docs/develop/tailwind-css-migration.md        |   1 +
 spx-gui/AGENTS.md                             |   1 +
 spx-gui/src/app.css                           |   2 +
 spx-gui/src/components/asset/AssetName.vue    |  11 +-
 .../asset/animation/GroupCostumesModal.vue    |  60 +---
 .../gen/animation/AnimationGenPreview.vue     |  14 +-
 .../gen/animation/AnimationSettingsInput.vue  |   2 -
 .../gen/animation/AnimationVideoPreview.vue   |  90 +++---
 .../asset/gen/backdrop/BackdropGen.vue        |  35 +--
 .../asset/gen/backdrop/BackdropGenItem.vue    |   2 -
 .../asset/gen/backdrop/BackdropGenModal.vue   |  27 +-
 .../asset/gen/backdrop/BackdropImageItem.vue  |  71 +----
 .../gen/backdrop/BackdropSettingsInput.vue    |   2 -
 .../asset/gen/common/AssetSuggestions.vue     |  34 +--
 .../components/asset/gen/common/GenItem.vue   | 115 ++++----
 .../asset/gen/common/GenLoading.vue           | 110 ++++----
 .../components/asset/gen/common/GenPanel.vue  |  24 +-
 .../asset/gen/common/GenPreview.vue           |  61 +----
 .../asset/gen/common/ImagePreview.vue         |  29 +-
 .../asset/gen/common/ImageSelector.vue        |  33 +--
 .../asset/gen/common/LayoutWithPreview.vue    |  19 +-
 .../asset/gen/common/ListItemWrapper.vue      |  47 +---
 .../gen/common/PreviewWithCheckerboardBg.vue  |  34 +--
 .../asset/gen/common/SettingsInput.vue        | 258 +++++++++---------
 .../common/param-settings/ParamSelector.vue   |  87 +-----
 .../asset/gen/costume/CostumeGenPreview.vue   |  22 +-
 .../gen/costume/CostumeSettingsInput.vue      |   2 -
 .../asset/gen/sprite/SpriteGenModal.vue       |  27 +-
 .../gen/sprite/SpriteGenPhaseContent.vue      |  71 +----
 .../gen/sprite/SpriteGenPhaseSettings.vue     |  35 +--
 .../asset/gen/sprite/SpriteImageItem.vue      |  72 +----
 .../asset/library/AssetLibraryModal.vue       | 201 +++-----------
 .../asset/library/AssetSaveModal.vue          |  42 +--
 .../components/asset/library/SoundPreview.vue |  17 +-
 .../library/management/AssetEditModal.vue     |  50 +---
 .../AssetLibraryManagementModal.vue           |  64 +----
 .../library/management/VisibilityIcon.vue     |  25 +-
 .../asset/preprocessing/PreprocessModal.vue   |  52 +---
 .../asset/preprocessing/common/ImgPreview.vue |  21 +-
 .../preprocessing/common/ProcessDetail.vue    |  43 +--
 .../preprocessing/common/ProcessItem.vue      |  68 +----
 .../split-sprite-sheet/SplitSpriteSheet.vue   |  10 +-
 .../asset/scratch/LoadFromScratch.vue         |  27 +-
 .../src/components/common/CostumesPlayer.vue  |   2 +-
 .../common/ModificationWarningModal.vue       |  69 +----
 spx-gui/src/components/common/RenameModal.vue |  28 +-
 .../components/community/CommunityHeader.vue  |   4 +-
 .../community/footer/CommunityFooter.vue      |   2 +-
 .../components/community/user/UserHeader.vue  |   4 +-
 .../editor/map-editor/MapEditor.vue           |   8 +-
 spx-gui/src/components/ui/modal/UIModal.vue   |   4 +-
 spx-gui/src/pages/community/search.vue        |   2 +-
 spx-gui/src/pages/community/user/index.vue    |   6 +-
 spx-gui/src/pages/docs/ui-design.vue          |  77 ++----
 spx-gui/src/pages/editor/index.vue            |  29 +-
 55 files changed, 557 insertions(+), 1696 deletions(-)

diff --git a/docs/develop/tailwind-css-migration.md b/docs/develop/tailwind-css-migration.md
index 754fd38b3c..f5b4dc5566 100644
--- a/docs/develop/tailwind-css-migration.md
+++ b/docs/develop/tailwind-css-migration.md
@@ -421,6 +421,7 @@ Representative examples from the pilot:
 Preferred style in this category:
 
 - write the style directly in the template when the utilities remain readable
+- when original CSS uses `flex: <grow> <shrink> <basis>`, preserve that shorthand with `flex-[<grow>_<shrink>_<basis>]` instead of decomposing it into partial utilities such as `shrink-0`, so grow, shrink, and basis stay coupled during migration
 - remove the local style block after the result is verified
 
 Responsive styling preference:
diff --git a/spx-gui/AGENTS.md b/spx-gui/AGENTS.md
index 9834d8e226..3fb2a48229 100644
--- a/spx-gui/AGENTS.md
+++ b/spx-gui/AGENTS.md
@@ -99,6 +99,7 @@ When working with backend unique string identifiers such as `username`, project
 * For responsive styling, prefer Tailwind responsive variants over runtime `useResponsive()` checks.
 * Keep `useResponsive()` for non-style logic only, such as changing fetched counts or other runtime behavior that CSS cannot express.
 * Prefer Tailwind for straightforward layout and surface styling: flex, grid, spacing, sizing, alignment, overflow, simple typography, and simple hover states.
+* When original CSS uses `flex: <grow> <shrink> <basis>`, preserve it with `flex-[<grow>_<shrink>_<basis>]` instead of decomposing it into partial utilities such as `shrink-0`.
 * When Tailwind classes stay readable, write them directly in the template and remove the local style block after verification.
 * Keep local CSS or SCSS for deep selectors, generated content, third-party DOM overrides, and complex stateful widgets.
 * Preserve semantic hook classes that are consumed by parent selectors, slot content, or `:deep(...)` rules. Do not remove classes such as `.corner-menu` or `.course-item-mini` just because the element's own visual styles moved to Tailwind.
diff --git a/spx-gui/src/app.css b/spx-gui/src/app.css
index 402c6bbd70..77763fb95f 100644
--- a/spx-gui/src/app.css
+++ b/spx-gui/src/app.css
@@ -241,6 +241,8 @@
 
   --text-body: var(--ui-font-size-text, 14px);
   --text-body--line-height: 1.57143;
+  --text-10: 10px;
+  --text-10--line-height: 1.5;
   --text-12: 12px;
   --text-12--line-height: 1.5;
   --text-13: 13px;
diff --git a/spx-gui/src/components/asset/AssetName.vue b/spx-gui/src/components/asset/AssetName.vue
index f15b068ec3..71361e5d79 100644
--- a/spx-gui/src/components/asset/AssetName.vue
+++ b/spx-gui/src/components/asset/AssetName.vue
@@ -1,14 +1,5 @@
 <template>
-  <span class="asset-name">
+  <span class="max-w-[16em] overflow-x-hidden text-ellipsis whitespace-nowrap">
     <slot></slot>
   </span>
 </template>
-
-<style scoped lang="scss">
-.asset-name {
-  max-width: 16em;
-  overflow-x: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-</style>
diff --git a/spx-gui/src/components/asset/animation/GroupCostumesModal.vue b/spx-gui/src/components/asset/animation/GroupCostumesModal.vue
index e3258e6998..8bb8f12264 100644
--- a/spx-gui/src/components/asset/animation/GroupCostumesModal.vue
+++ b/spx-gui/src/components/asset/animation/GroupCostumesModal.vue
@@ -12,8 +12,8 @@
     :body-style="{ padding: '0' }"
     @update:visible="emit('cancelled')"
   >
-    <div class="container">
-      <ul class="costume-list">
+    <div class="flex min-h-119 max-h-150">
+      <ul class="flex flex-1 flex-wrap content-start gap-2 overflow-y-auto pt-5 pr-0 pb-5 pl-6">
         <CostumeItem
           v-for="costume in props.sprite.costumes"
           :key="costume.id"
@@ -22,16 +22,16 @@
           @click="handleCostumeClick(costume)"
         />
       </ul>
-      <div class="sep"></div>
-      <div class="preview">
+      <div class="my-5 w-px self-stretch bg-dividing-line-2"></div>
+      <div class="w-[402px] flex-none self-stretch px-6 py-5">
         <UIEmpty v-if="selectedCostumes.length === 0" size="medium">
           {{ $t({ en: 'Select costumes to continue', zh: '请选择造型' }) }}
         </UIEmpty>
-        <AnimationPlayer v-else class="player" :costumes="selectedCostumes" :duration="duration" :sound="null" />
+        <AnimationPlayer v-else class="h-full w-full" :costumes="selectedCostumes" :duration="duration" :sound="null" />
       </div>
     </div>
-    <div class="footer">
-      <div class="spacer" />
+    <div class="flex items-center gap-2 px-6 py-5">
+      <div class="flex-1" />
       <UICheckbox v-model:checked="removeCostumes">
         <span>
           {{
@@ -107,49 +107,3 @@ const handleConfirm = () => {
   })
 }
 </script>
-<style lang="scss" scoped>
-.container {
-  min-height: 476px;
-  max-height: 600px;
-  display: flex;
-}
-
-.costume-list {
-  padding: 20px 0 20px 24px;
-  flex: 1 1 0;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  align-content: flex-start;
-  overflow-y: auto;
-}
-
-.sep {
-  margin: 20px 0;
-  width: 1px;
-  align-self: stretch;
-  background-color: var(--ui-color-dividing-line-2);
-}
-
-.preview {
-  padding: 20px 24px;
-  flex: 0 0 402px;
-  align-self: stretch;
-
-  .player {
-    width: 100%;
-    height: 100%;
-  }
-}
-
-.footer {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  padding: 20px 24px;
-}
-
-.spacer {
-  flex: 1;
-}
-</style>
diff --git a/spx-gui/src/components/asset/gen/animation/AnimationGenPreview.vue b/spx-gui/src/components/asset/gen/animation/AnimationGenPreview.vue
index 423af2c827..d4d2aeac7f 100644
--- a/spx-gui/src/components/asset/gen/animation/AnimationGenPreview.vue
+++ b/spx-gui/src/components/asset/gen/animation/AnimationGenPreview.vue
@@ -51,7 +51,7 @@ const videoPreviewKey = computed(() => {
 </script>
 
 <template>
-  <GenPreview v-if="gen.result == null" class="animation-gen-preview" :name="gen.name" @rename="handleRenameAnimation">
+  <GenPreview v-if="gen.result == null" class="absolute inset-0" :name="gen.name" @rename="handleRenameAnimation">
     <template v-if="canSaveAnimation" #ops>
       <UIButton color="success" :loading="savingAnimation" @click="handleSaveAnimation">{{
         $t({ en: 'Save animation', zh: '保存动画' })
@@ -85,19 +85,9 @@ const videoPreviewKey = computed(() => {
   </GenPreview>
   <AnimationDetail
     v-else
-    class="animation-detail"
+    :style="{ background: 'transparent' }"
     :animation="gen.result"
     :sound-editable="false"
     @rename="handleRenameAnimation"
   />
 </template>
-
-<style lang="scss" scoped>
-.animation-gen-preview {
-  position: absolute;
-  inset: 0;
-}
-.animation-detail {
-  background: transparent;
-}
-</style>
diff --git a/spx-gui/src/components/asset/gen/animation/AnimationSettingsInput.vue b/spx-gui/src/components/asset/gen/animation/AnimationSettingsInput.vue
index d5717d731b..0b66b0e793 100644
--- a/spx-gui/src/components/asset/gen/animation/AnimationSettingsInput.vue
+++ b/spx-gui/src/components/asset/gen/animation/AnimationSettingsInput.vue
@@ -66,5 +66,3 @@ const submitText = computed(() => {
     </template>
   </SettingsInput>
 </template>
-
-<style lang="scss" scoped></style>
diff --git a/spx-gui/src/components/asset/gen/animation/AnimationVideoPreview.vue b/spx-gui/src/components/asset/gen/animation/AnimationVideoPreview.vue
index b297a2e073..f5cb54a45d 100644
--- a/spx-gui/src/components/asset/gen/animation/AnimationVideoPreview.vue
+++ b/spx-gui/src/components/asset/gen/animation/AnimationVideoPreview.vue
@@ -321,7 +321,7 @@ function formatTime(timeInMs: number) {
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 @keyframes leftMarker {
   0%,
   100% {
@@ -410,48 +410,45 @@ function formatTime(timeInMs: number) {
   width: 100%;
   height: 100%;
   isolation: isolate;
+}
 
-  &.nudge {
-    .segment-marker {
-      &::after {
-        content: '';
-        display: inline-block;
-        width: 16px;
-        height: 16px;
-        position: absolute;
-        background-color: var(--ui-color-turquoise-300);
-        mask-image: url('@/components/asset/gen/animation/marker-arrow.svg');
-        mask-size: contain;
-        mask-repeat: no-repeat;
-      }
+.track-inner.nudge .segment-marker::after {
+  content: '';
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  position: absolute;
+  background-color: var(--ui-color-turquoise-300);
+  mask-image: url('@/components/asset/gen/animation/marker-arrow.svg');
+  mask-size: contain;
+  mask-repeat: no-repeat;
+}
 
-      &.left {
-        animation: leftMarker 1.8s infinite ease-in-out;
+.track-inner.nudge .segment-marker.left {
+  animation: leftMarker 1.8s infinite ease-in-out;
+}
 
-        &::after {
-          right: -24px;
-          animation: markerArrow 1.8s infinite ease-in-out;
-        }
-      }
+.track-inner.nudge .segment-marker.left::after {
+  right: -24px;
+  animation: markerArrow 1.8s infinite ease-in-out;
+}
 
-      &.right {
-        animation: rightMarker 1.8s infinite ease-in-out;
-        &::after {
-          left: -24px;
-          transform: rotateY(180deg);
-          animation: markerArrow 1.8s infinite ease-in-out;
-        }
-      }
-    }
+.track-inner.nudge .segment-marker.right {
+  animation: rightMarker 1.8s infinite ease-in-out;
+}
 
-    .track-tips {
-      display: block;
-    }
+.track-inner.nudge .segment-marker.right::after {
+  left: -24px;
+  transform: rotateY(180deg);
+  animation: markerArrow 1.8s infinite ease-in-out;
+}
 
-    .current-time {
-      display: none;
-    }
-  }
+.track-inner.nudge .track-tips {
+  display: block;
+}
+
+.track-inner.nudge .current-time {
+  display: none;
 }
 
 .segment {
@@ -482,15 +479,16 @@ function formatTime(timeInMs: number) {
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: 1; // Ensure it stays above .current-time to prioritize .segment-marker as it is interactive
-
-  &::before {
-    content: '';
-    display: block;
-    width: 1px;
-    height: 12px;
-    background: var(--ui-color-grey-100);
-  }
+  /* Ensure it stays above .current-time to prioritize .segment-marker as it is interactive. */
+  z-index: 1;
+}
+
+.segment-marker::before {
+  content: '';
+  display: block;
+  width: 1px;
+  height: 12px;
+  background: var(--ui-color-grey-100);
 }
 
 .track-tips {
diff --git a/spx-gui/src/components/asset/gen/backdrop/BackdropGen.vue b/spx-gui/src/components/asset/gen/backdrop/BackdropGen.vue
index 545973c221..9d14e78ca1 100644
--- a/spx-gui/src/components/asset/gen/backdrop/BackdropGen.vue
+++ b/spx-gui/src/components/asset/gen/backdrop/BackdropGen.vue
@@ -84,17 +84,17 @@ const handleUseAsset = useMessageHandle(
 <template>
   <main
     v-radar="{ name: 'Backdrop generation', desc: 'Interface for generating and selecting backdrops' }"
-    class="backdrop-gen"
+    class="backdrop-gen flex h-full flex-col items-stretch"
   >
     <LayoutWithPreview :has-preview="hasPreview">
       <BackdropSettingInput
-        class="settings-input"
-        :class="{ 'has-preview': hasPreview }"
+        :class="{ 'h-75': hasPreview }"
         :gen="gen"
         :disabled="handleSubmit.isLoading.value"
         :description-placeholder="descriptionPlaceholder"
       />
-      <div class="select-area">
+      <!-- Fixed height to prevent layout shift when suggestions appear/disappear -->
+      <div class="h-42.5">
         <AssetSuggestions
           v-if="isLibrarySearchEnabled"
           :type="AssetType.Backdrop"
@@ -141,7 +141,7 @@ const handleUseAsset = useMessageHandle(
         <ImagePreview :file="gen.image" />
       </template>
     </LayoutWithPreview>
-    <footer class="footer">
+    <footer class="flex w-full flex-none justify-end gap-4 px-6 py-5">
       <UIButton
         v-if="selectedAsset != null"
         v-radar="{
@@ -172,13 +172,8 @@ const handleUseAsset = useMessageHandle(
   </main>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .backdrop-gen {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  height: 100%;
-
   background-image: url('../common/phase-settings-left-bottom-bg.png'), url('../common/phase-settings-right-top-bg.png');
   background-position:
     left bottom,
@@ -187,23 +182,5 @@ const handleUseAsset = useMessageHandle(
   background-size:
     520px auto,
     180px auto;
-
-  .settings-input {
-    &.has-preview {
-      height: 300px;
-    }
-  }
-  .select-area {
-    height: 170px; // Fixed height to prevent layout shift when suggestions appear/disappear
-  }
-}
-
-.footer {
-  width: 100%;
-  flex: 0 0 auto;
-  padding: 20px 24px;
-  display: flex;
-  justify-content: flex-end;
-  gap: 16px;
 }
 </style>
diff --git a/spx-gui/src/components/asset/gen/backdrop/BackdropGenItem.vue b/spx-gui/src/components/asset/gen/backdrop/BackdropGenItem.vue
index 88a0863ddf..e36e1eb2d5 100644
--- a/spx-gui/src/components/asset/gen/backdrop/BackdropGenItem.vue
+++ b/spx-gui/src/components/asset/gen/backdrop/BackdropGenItem.vue
@@ -36,5 +36,3 @@ const highlight = computed(() => props.gen.imagesGenState.status === 'finished')
     <UIBlockItemTitle size="medium">{{ gen.settings.name }}</UIBlockItemTitle>
   </GenItem>
 </template>
-
-<style lang="scss" scoped></style>
diff --git a/spx-gui/src/components/asset/gen/backdrop/BackdropGenModal.vue b/spx-gui/src/components/asset/gen/backdrop/BackdropGenModal.vue
index 8119e50b2f..d37ac99baf 100644
--- a/spx-gui/src/components/asset/gen/backdrop/BackdropGenModal.vue
+++ b/spx-gui/src/components/asset/gen/backdrop/BackdropGenModal.vue
@@ -61,38 +61,17 @@ const handleModalClose = useMessageHandle(
     mask-closable
     @update:visible="handleModalClose"
   >
-    <header class="header">
-      <h2 class="title">{{ $t({ zh: '生成背景', en: 'Backdrop Generator' }) }}</h2>
+    <header class="flex h-14 items-center justify-between border-b border-grey-400 px-6">
+      <h2 class="text-16 text-title">{{ $t({ zh: '生成背景', en: 'Backdrop Generator' }) }}</h2>
       <UIModalClose class="close" @click="handleModalClose" />
     </header>
 
     <BackdropGenComp
       v-if="activeGen != null"
-      class="backdrop-gen"
+      class="min-h-0 flex-[1_1_0]"
       :gen="activeGen"
       library-search-enabled
       @resolved="emit('resolved', $event)"
     />
   </UIModal>
 </template>
-
-<style lang="scss" scoped>
-.header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 24px;
-  height: 56px;
-  border-bottom: 1px solid var(--ui-color-grey-400);
-
-  .title {
-    font-size: 16px;
-    color: var(--ui-color-title);
-  }
-}
-
-.backdrop-gen {
-  flex: 1 1 0;
-  min-height: 0;
-}
-</style>
diff --git a/spx-gui/src/components/asset/gen/backdrop/BackdropImageItem.vue b/spx-gui/src/components/asset/gen/backdrop/BackdropImageItem.vue
index 8a8954cfbf..c5a3d9a52d 100644
--- a/spx-gui/src/components/asset/gen/backdrop/BackdropImageItem.vue
+++ b/spx-gui/src/components/asset/gen/backdrop/BackdropImageItem.vue
@@ -31,69 +31,16 @@ const loading = computed(() => props.loading || fileLoading.value)
       name: 'Backdrop image item',
       desc: 'Click to select this image as the backdrop'
     }"
-    class="backdrop-image-item"
-    :class="{ active, compact, loading, disabled }"
+    class="flex items-center justify-center overflow-hidden border-2 border-transparent bg-grey-300 p-1 transition-[width,height,border-radius] duration-200 ease-in-out"
+    :class="[
+      compact ? 'h-17 w-22 rounded-1' : 'h-27 w-35 rounded-2',
+      active ? 'border-turquoise-500 bg-turquoise-200 cursor-default' : '',
+      disabled ? 'cursor-not-allowed opacity-50' : '',
+      loading ? 'cursor-default pointer-events-none' : '',
+      !active && !disabled && !loading ? 'cursor-pointer' : ''
+    ]"
   >
     <GenLoading v-if="loading" animation-style="width: 60px; height: 60px;" />
-    <UIImg v-else class="img" :src="url" size="cover" />
+    <UIImg v-else :class="compact ? 'h-15 w-20 rounded-[4px]' : 'h-25 w-33 rounded-1'" :src="url" size="cover" />
   </div>
 </template>
-
-<style lang="scss" scoped>
-.backdrop-image-item {
-  display: flex;
-  width: 140px;
-  height: 108px;
-  padding: 4px;
-  align-items: center;
-  justify-content: center;
-  border-radius: 12px;
-  border: 2px solid transparent;
-  background-color: var(--ui-color-grey-300);
-  cursor: pointer;
-  overflow: hidden;
-
-  transition:
-    width 0.2s ease,
-    height 0.2s ease,
-    border-radius 0.2s ease;
-
-  &.active {
-    background-color: var(--ui-color-turquoise-200);
-    border-color: var(--ui-color-turquoise-500);
-    cursor: default;
-  }
-
-  &.disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-
-  &.loading {
-    cursor: default;
-    pointer-events: none;
-  }
-
-  &.compact {
-    width: 88px;
-    height: 68px;
-    border-radius: 8px;
-  }
-}
-
-.img {
-  width: 132px;
-  height: 100px;
-  border-radius: 8px;
-  transition:
-    width 0.2s ease,
-    height 0.2s ease,
-    border-radius 0.2s ease;
-}
-
-.backdrop-image-item.compact .img {
-  width: 80px;
-  height: 60px;
-  border-radius: 4px;
-}
-</style>
diff --git a/spx-gui/src/components/asset/gen/backdrop/BackdropSettingsInput.vue b/spx-gui/src/components/asset/gen/backdrop/BackdropSettingsInput.vue
index 611f474eb1..be9d54ff9d 100644
--- a/spx-gui/src/components/asset/gen/backdrop/BackdropSettingsInput.vue
+++ b/spx-gui/src/components/asset/gen/backdrop/BackdropSettingsInput.vue
@@ -80,5 +80,3 @@ const submitText = computed(() => {
     </template>
   </SettingsInput>
 </template>
-
-<style lang="scss" scoped></style>
diff --git a/spx-gui/src/components/asset/gen/common/AssetSuggestions.vue b/spx-gui/src/components/asset/gen/common/AssetSuggestions.vue
index c99bad064f..c551c678f3 100644
--- a/spx-gui/src/components/asset/gen/common/AssetSuggestions.vue
+++ b/spx-gui/src/components/asset/gen/common/AssetSuggestions.vue
@@ -29,14 +29,14 @@ const entityMessage = computed(() => entityMessages[props.type])
 
 <template>
   <UILoading v-if="loading" />
-  <div v-else class="asset-suggestions">
+  <div v-else class="flex flex-col items-center gap-3">
     <template v-if="suggestions.length > 0">
-      <ul class="list">
+      <ul class="m-0 flex list-none flex-nowrap items-center justify-center gap-2 p-0">
         <template v-for="asset in suggestions" :key="asset.id">
           <slot name="item" :asset="asset" :selected="isSelected(asset)" :on-click="() => emit('toggle', asset)"></slot>
         </template>
       </ul>
-      <p class="tip">
+      <p class="text-center text-12 text-hint-2">
         {{
           $t({
             en: `There are related ${entityMessage.en}s in the asset library. You can choose the one you like or continue generating.`,
@@ -45,7 +45,7 @@ const entityMessage = computed(() => entityMessages[props.type])
         }}
       </p>
     </template>
-    <p v-else-if="keyword.length > 0" class="tip" style="margin-top: 56px">
+    <p v-else-if="keyword.length > 0" class="mt-14 text-center text-12 text-hint-2">
       {{
         $t({
           en: `No matching ${entityMessage.en}s found in the asset library. You can continue generating.`,
@@ -55,29 +55,3 @@ const entityMessage = computed(() => entityMessages[props.type])
     </p>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.asset-suggestions {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 12px;
-}
-
-.list {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex-wrap: nowrap;
-  justify-content: center;
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.tip {
-  text-align: center;
-  font-size: 12px;
-  color: var(--ui-color-hint-2);
-}
-</style>
diff --git a/spx-gui/src/components/asset/gen/common/GenItem.vue b/spx-gui/src/components/asset/gen/common/GenItem.vue
index 804de5d80e..a3d10a9d4a 100644
--- a/spx-gui/src/components/asset/gen/common/GenItem.vue
+++ b/spx-gui/src/components/asset/gen/common/GenItem.vue
@@ -62,76 +62,71 @@ const style = computed(() => {
   </UIBlockItem>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 @property --angle {
   syntax: '<angle>';
   initial-value: 0deg;
   inherits: false;
 }
 
-.gen-item {
-  &.loading {
-    // Force override UIBlockItem's border-color when active
-    border-color: transparent !important;
+@keyframes rotate-gradient {
+  to {
+    --angle: 360deg;
+  }
+}
 
-    &.active {
-      &::before {
-        background: conic-gradient(
-          from var(--angle) at 50% 50%,
-          var(--loading-active-trace-color) 0deg,
-          var(--loading-head-color) 40deg,
-          var(--loading-tail-color) 110deg,
-          var(--loading-active-trace-color)
-        );
-      }
-    }
+.gen-item.loading {
+  /* Force override UIBlockItem's border-color when active */
+  border-color: transparent !important;
+}
 
-    &::before {
-      content: '';
-      position: absolute;
-      inset: -2px;
-      padding: 2px;
-      border-radius: inherit;
-      mask:
-        linear-gradient(#fff 0 0) content-box,
-        linear-gradient(#fff 0 0);
-      mask-composite: exclude;
-      pointer-events: none;
-      background: conic-gradient(
-        from var(--angle) at 50% 50%,
-        var(--loading-trace-color) 0deg,
-        var(--loading-head-color) 40deg,
-        var(--loading-tail-color) 110deg,
-        var(--loading-trace-color) 160deg
-      );
-      animation: rotate-gradient 3s linear infinite;
-    }
+.gen-item.loading.active::before {
+  background: conic-gradient(
+    from var(--angle) at 50% 50%,
+    var(--loading-active-trace-color) 0deg,
+    var(--loading-head-color) 40deg,
+    var(--loading-tail-color) 110deg,
+    var(--loading-active-trace-color)
+  );
+}
 
-    @keyframes rotate-gradient {
-      to {
-        --angle: 360deg;
-      }
-    }
-  }
+.gen-item.loading::before {
+  content: '';
+  position: absolute;
+  inset: -2px;
+  padding: 2px;
+  border-radius: inherit;
+  mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  mask-composite: exclude;
+  pointer-events: none;
+  background: conic-gradient(
+    from var(--angle) at 50% 50%,
+    var(--loading-trace-color) 0deg,
+    var(--loading-head-color) 40deg,
+    var(--loading-tail-color) 110deg,
+    var(--loading-trace-color) 160deg
+  );
+  animation: rotate-gradient 3s linear infinite;
+}
 
-  &.highlight {
-    .placeholder {
-      color: var(--highlight-color);
-    }
-  }
+.gen-item.highlight .placeholder {
+  color: var(--highlight-color);
+}
 
-  .preview-wrapper {
-    margin-bottom: 5px;
-    height: 60px;
-    width: 60px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  .placeholder {
-    width: 24px;
-    height: 24px;
-    color: var(--ui-color-grey-700);
-  }
+.gen-item .preview-wrapper {
+  margin-bottom: 5px;
+  height: 60px;
+  width: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.gen-item .placeholder {
+  width: 24px;
+  height: 24px;
+  color: var(--ui-color-grey-700);
 }
 </style>
diff --git a/spx-gui/src/components/asset/gen/common/GenLoading.vue b/spx-gui/src/components/asset/gen/common/GenLoading.vue
index a87b47dbf8..5a00bb8b56 100644
--- a/spx-gui/src/components/asset/gen/common/GenLoading.vue
+++ b/spx-gui/src/components/asset/gen/common/GenLoading.vue
@@ -41,7 +41,7 @@ const slots = useSlots()
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 @property --bg-angle {
   syntax: '<angle>';
   inherits: false;
@@ -59,65 +59,67 @@ const slots = useSlots()
   transition:
     visibility 0.2s,
     opacity 0.2s;
+}
 
-  &.cover {
-    position: absolute;
-    inset: 0;
-    border-radius: inherit;
-    overflow: hidden;
-    background-color: var(--ui-color-grey-100);
-  }
+.gen-loading.cover {
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  overflow: hidden;
+  background-color: var(--ui-color-grey-100);
+}
 
-  &.variant-bg-spin {
-    border-radius: 8px;
-    // CSS Progressive Enhancement: Browsers that do not support @property will skip its definition.
-    // We can ensure compatibility by setting an initial value here.
-    --bg-angle: 0deg;
-
-    // Use cos/sin to calculate the rotation position of each gradient center
-    // 100% is the rotation radius, 50% is the center offset
-    background-image: radial-gradient(
-        circle at calc(50% + cos(var(--bg-angle) + 0deg) * 100%) calc(50% + sin(var(--bg-angle) + 0deg) * 100%),
-        var(--ui-color-turquoise-200) 20%,
-        transparent 70%
-      ),
-      radial-gradient(
-        circle at calc(50% + cos(var(--bg-angle) + 90deg) * 100%) calc(50% + sin(var(--bg-angle) + 90deg) * 100%),
-        var(--ui-color-blue-200) 20%,
-        transparent 70%
-      ),
-      radial-gradient(
-        circle at calc(50% + cos(var(--bg-angle) + 180deg) * 100%) calc(50% + sin(var(--bg-angle) + 180deg) * 100%),
-        var(--ui-color-blue-100) 20%,
-        transparent 70%
-      ),
-      radial-gradient(
-        circle at calc(50% + cos(var(--bg-angle) + 270deg) * 100%) calc(50% + sin(var(--bg-angle) + 270deg) * 100%),
-        var(--ui-color-grey-100) 20%,
-        transparent 70%
-      );
-
-    animation: spin-gradient 4s linear infinite;
-    @keyframes spin-gradient {
-      to {
-        --bg-angle: 360deg;
-      }
-    }
-
-    .content {
-      z-index: 1;
-    }
-  }
+.gen-loading.variant-bg-spin {
+  border-radius: 8px;
+  /* CSS Progressive Enhancement: Browsers that do not support @property will skip its definition.
+     We can ensure compatibility by setting an initial value here. */
+  --bg-angle: 0deg;
+
+  /* Use cos/sin to calculate the rotation position of each gradient center.
+     100% is the rotation radius, 50% is the center offset. */
+  background-image: radial-gradient(
+      circle at calc(50% + cos(var(--bg-angle) + 0deg) * 100%) calc(50% + sin(var(--bg-angle) + 0deg) * 100%),
+      var(--ui-color-turquoise-200) 20%,
+      transparent 70%
+    ),
+    radial-gradient(
+      circle at calc(50% + cos(var(--bg-angle) + 90deg) * 100%) calc(50% + sin(var(--bg-angle) + 90deg) * 100%),
+      var(--ui-color-blue-200) 20%,
+      transparent 70%
+    ),
+    radial-gradient(
+      circle at calc(50% + cos(var(--bg-angle) + 180deg) * 100%) calc(50% + sin(var(--bg-angle) + 180deg) * 100%),
+      var(--ui-color-blue-100) 20%,
+      transparent 70%
+    ),
+    radial-gradient(
+      circle at calc(50% + cos(var(--bg-angle) + 270deg) * 100%) calc(50% + sin(var(--bg-angle) + 270deg) * 100%),
+      var(--ui-color-grey-100) 20%,
+      transparent 70%
+    );
+
+  animation: spin-gradient 4s linear infinite;
+}
 
-  &.visible {
-    visibility: visible;
-    opacity: 1;
-    &.cover {
-      opacity: 0.97;
-    }
+@keyframes spin-gradient {
+  to {
+    --bg-angle: 360deg;
   }
 }
 
+.gen-loading.variant-bg-spin .content {
+  z-index: 1;
+}
+
+.gen-loading.visible {
+  visibility: visible;
+  opacity: 1;
+}
+
+.gen-loading.visible.cover {
+  opacity: 0.97;
+}
+
 .content {
   display: flex;
   flex-direction: column;
diff --git a/spx-gui/src/components/asset/gen/common/GenPanel.vue b/spx-gui/src/components/asset/gen/common/GenPanel.vue
index e7af114735..d82fe9d4b5 100644
--- a/spx-gui/src/components/asset/gen/common/GenPanel.vue
+++ b/spx-gui/src/components/asset/gen/common/GenPanel.vue
@@ -1,30 +1,12 @@
 <script lang="ts" setup></script>
 
 <template>
-  <div class="gen-panel">
-    <div class="left">
+  <div class="flex">
+    <div class="flex-[1_0_44%] overflow-hidden border-r border-grey-400 p-4">
       <slot name="left"></slot>
     </div>
-    <div class="right">
+    <div class="flex-[1_0_56%] flex">
       <slot name="right"></slot>
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.gen-panel {
-  display: flex;
-
-  .left {
-    flex: 1 0 44%;
-    padding: 16px;
-    overflow: hidden;
-    border-right: 1px solid var(--ui-color-grey-400);
-  }
-
-  .right {
-    flex: 1 0 56%;
-    display: flex;
-  }
-}
-</style>
diff --git a/spx-gui/src/components/asset/gen/common/GenPreview.vue b/spx-gui/src/components/asset/gen/common/GenPreview.vue
index a4a5306d3b..633b55eb08 100644
--- a/spx-gui/src/components/asset/gen/common/GenPreview.vue
+++ b/spx-gui/src/components/asset/gen/common/GenPreview.vue
@@ -19,75 +19,26 @@ const emit = defineEmits<{
       name: `Preview for '${name}'`,
       desc: `Preview for the generation item '${name}'`
     }"
-    class="gen-preview"
+    class="flex flex-1 flex-col gap-5 px-5 py-6"
   >
-    <header class="header">
-      <div class="name">
+    <header class="relative flex flex-none items-center justify-center">
+      <div class="flex items-center justify-center gap-1">
         <!-- TODO: confirm style details with @qingqing-ux here -->
         <AssetName>{{ name }}</AssetName>
         <UIIcon
           v-radar="{ name: 'Rename', desc: 'Click to rename the generation item' }"
-          class="edit-icon"
+          class="cursor-pointer text-grey-900 hover:text-grey-800 active:text-grey-1000"
           :title="$t({ en: 'Rename', zh: '重命名' })"
           type="edit"
           @click="emit('rename')"
         />
       </div>
-      <div class="ops">
+      <div class="absolute top-0 right-0">
         <slot name="ops"></slot>
       </div>
     </header>
-    <main class="body">
+    <main class="relative flex flex-1 overflow-hidden">
       <slot></slot>
     </main>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.gen-preview {
-  flex: 1 1 0;
-  padding: 24px 20px;
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-.header {
-  position: relative;
-  flex: 0 0 auto;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.name {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-}
-
-.edit-icon {
-  cursor: pointer;
-  color: var(--ui-color-grey-900);
-  &:hover {
-    color: var(--ui-color-grey-800);
-  }
-  &:active {
-    color: var(--ui-color-grey-1000);
-  }
-}
-
-.ops {
-  position: absolute;
-  top: 0;
-  right: 0;
-}
-
-.body {
-  flex: 1 1 0;
-  display: flex;
-  position: relative;
-  overflow: hidden;
-}
-</style>
diff --git a/spx-gui/src/components/asset/gen/common/ImagePreview.vue b/spx-gui/src/components/asset/gen/common/ImagePreview.vue
index e9ef04aed0..91d373ecb7 100644
--- a/spx-gui/src/components/asset/gen/common/ImagePreview.vue
+++ b/spx-gui/src/components/asset/gen/common/ImagePreview.vue
@@ -12,28 +12,11 @@ const [fileUrl, fileUrlLoading] = useFileUrl(() => props.file)
 </script>
 
 <template>
-  <div v-radar="{ name: 'Image preview', desc: 'Preview of the selected generated image' }" class="preview">
-    <CheckerboardBackground class="background" />
-    <UIImg class="image" :src="fileUrl" :loading="fileUrlLoading" size="contain" />
+  <div
+    v-radar="{ name: 'Image preview', desc: 'Preview of the selected generated image' }"
+    class="relative h-full w-full overflow-hidden rounded-1"
+  >
+    <CheckerboardBackground class="absolute inset-0" />
+    <UIImg class="h-full w-full" :src="fileUrl" :loading="fileUrlLoading" size="contain" />
   </div>
 </template>
-
-<style lang="scss" scoped>
-.preview {
-  width: 100%;
-  height: 100%;
-  border-radius: 8px;
-  overflow: hidden;
-  position: relative;
-}
-
-.background {
-  position: absolute;
-  inset: 0;
-}
-
-.image {
-  width: 100%;
-  height: 100%;
-}
-</style>
diff --git a/spx-gui/src/components/asset/gen/common/ImageSelector.vue b/spx-gui/src/components/asset/gen/common/ImageSelector.vue
index 78b1c32ee9..71eeaf5cea 100644
--- a/spx-gui/src/components/asset/gen/common/ImageSelector.vue
+++ b/spx-gui/src/components/asset/gen/common/ImageSelector.vue
@@ -67,9 +67,9 @@ function handleSelect(index: number) {
     v-if="state.status !== 'initial'"
     ref="wrapperRef"
     v-radar="{ name: 'Image selector', desc: 'Selector for choosing from generated images' }"
-    class="image-selector"
+    class="flex flex-col items-center gap-3"
   >
-    <ul class="list">
+    <ul class="m-0 flex list-none flex-nowrap items-center content-center justify-center gap-2 p-0">
       <template v-if="state.status === 'running'">
         <template v-for="idx in 4" :key="idx">
           <slot name="loading-item" :index="idx"></slot>
@@ -83,35 +83,8 @@ function handleSelect(index: number) {
       </template>
     </ul>
 
-    <p class="tip">
+    <p class="text-center text-12 text-hint-2">
       <slot name="tip"></slot>
     </p>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.image-selector {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 12px;
-}
-
-.list {
-  display: flex;
-  align-items: center;
-  align-content: center;
-  gap: 8px;
-  flex-wrap: nowrap;
-  justify-content: center;
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.tip {
-  text-align: center;
-  font-size: 12px;
-  color: var(--ui-color-hint-2);
-}
-</style>
diff --git a/spx-gui/src/components/asset/gen/common/LayoutWithPreview.vue b/spx-gui/src/components/asset/gen/common/LayoutWithPreview.vue
index de6785f3b5..2e21eb5571 100644
--- a/spx-gui/src/components/asset/gen/common/LayoutWithPreview.vue
+++ b/spx-gui/src/components/asset/gen/common/LayoutWithPreview.vue
@@ -10,8 +10,11 @@ defineProps<{
 </script>
 
 <template>
-  <div class="layout-with-preview" :class="{ 'has-preview': hasPreview }">
-    <section class="main-panel">
+  <div
+    class="layout-with-preview flex min-w-0 flex-1 items-stretch justify-center"
+    :class="{ 'has-preview': hasPreview }"
+  >
+    <section class="main-panel flex min-w-0 flex-col gap-6">
       <slot></slot>
     </section>
 
@@ -21,24 +24,14 @@ defineProps<{
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .layout-with-preview {
-  flex: 1 1 0;
-  display: flex;
-  align-items: stretch;
-  justify-content: center;
-  gap: 0;
-  min-width: 0;
   transition: gap 0.2s ease;
 }
 
 .main-panel {
   width: 584px;
-  display: flex;
-  flex-direction: column;
   justify-content: center;
-  gap: 24px;
-  min-width: 0;
   transition-property: flex, width, padding;
   transition-duration: 0.2s;
   transition-timing-function: ease;
diff --git a/spx-gui/src/components/asset/gen/common/ListItemWrapper.vue b/spx-gui/src/components/asset/gen/common/ListItemWrapper.vue
index 4b5895e656..f4669df6d8 100644
--- a/spx-gui/src/components/asset/gen/common/ListItemWrapper.vue
+++ b/spx-gui/src/components/asset/gen/common/ListItemWrapper.vue
@@ -7,49 +7,20 @@ defineEmits<{
 </script>
 
 <template>
-  <div class="list-item-wrapper">
-    <header class="header">
+  <div class="flex w-full flex-col gap-3">
+    <header class="text-16/6.5 font-semibold text-grey-1000">
       <slot name="title"></slot>
     </header>
 
-    <div class="list">
+    <div class="flex w-94 flex-row flex-wrap gap-2">
       <slot></slot>
-      <UIBlockItem v-radar="{ name: 'Add', desc: 'Click to add a new item' }" class="add-item" @click="$emit('add')">
-        <UIIcon class="icon" type="plus" />
+      <UIBlockItem
+        v-radar="{ name: 'Add', desc: 'Click to add a new item' }"
+        class="justify-center text-primary-main"
+        @click="$emit('add')"
+      >
+        <UIIcon style="width: 24px; height: 24px" type="plus" />
       </UIBlockItem>
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.list-item-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  width: 100%;
-}
-
-.header {
-  font-size: 16px;
-  line-height: 26px;
-  font-weight: 600;
-  color: var(--ui-color-grey-1000);
-}
-
-.list {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  gap: 8px;
-  width: 376px;
-}
-
-.add-item {
-  justify-content: center;
-  color: var(--ui-color-primary-main);
-  .icon {
-    width: 24px;
-    height: 24px;
-  }
-}
-</style>
diff --git a/spx-gui/src/components/asset/gen/common/PreviewWithCheckerboardBg.vue b/spx-gui/src/components/asset/gen/common/PreviewWithCheckerboardBg.vue
index 9435a41e1e..aec96ed8ae 100644
--- a/spx-gui/src/components/asset/gen/common/PreviewWithCheckerboardBg.vue
+++ b/spx-gui/src/components/asset/gen/common/PreviewWithCheckerboardBg.vue
@@ -8,10 +8,10 @@ import CheckerboardBackground from '@/components/editor/sprite/CheckerboardBackg
 </script>
 
 <template>
-  <div class="preview-with-checkerboard-bg">
-    <CheckerboardBackground class="background" />
+  <div class="relative flex-1 overflow-hidden rounded-1 w-full">
+    <CheckerboardBackground class="absolute inset-0" />
     <slot>
-      <div class="placeholder">
+      <div class="relative flex h-full w-full items-center justify-center text-hint-2">
         {{
           $t({
             en: 'Enter details in the lower-left box and click "Generate".',
@@ -22,31 +22,3 @@ import CheckerboardBackground from '@/components/editor/sprite/CheckerboardBackg
     </slot>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.preview-with-checkerboard-bg {
-  width: 100%;
-  flex: 1 1 0;
-  border-radius: 8px;
-  position: relative;
-  overflow: hidden;
-}
-
-.background {
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-}
-
-.placeholder {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--ui-color-hint-2);
-}
-</style>
diff --git a/spx-gui/src/components/asset/gen/common/SettingsInput.vue b/spx-gui/src/components/asset/gen/common/SettingsInput.vue
index 71fef9c34f..bcfb2c1ad9 100644
--- a/spx-gui/src/components/asset/gen/common/SettingsInput.vue
+++ b/spx-gui/src/components/asset/gen/common/SettingsInput.vue
@@ -150,7 +150,7 @@ provide(settingsInputCtxKey, ctx)
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .description-input {
   width: 100%;
   min-height: 172px;
@@ -163,141 +163,137 @@ provide(settingsInputCtxKey, ctx)
   flex-direction: column;
   gap: 24px;
   transition: border-color 0.2s ease;
+}
 
-  &:has(.description:focus),
-  &.enriching {
-    border-color: var(--ui-color-turquoise-500);
-  }
+.description-input:has(.description:focus),
+.description-input.enriching {
+  border-color: var(--ui-color-turquoise-500);
+}
 
-  &.disabled,
-  &.readonly {
-    &:has(.description:focus) {
-      border-color: var(--ui-color-grey-400);
-    }
-  }
+.description-input.disabled:has(.description:focus),
+.description-input.readonly:has(.description:focus) {
+  border-color: var(--ui-color-grey-400);
+}
 
-  &.disabled {
-    .main {
-      overflow: hidden;
+.description-input.disabled .main {
+  overflow: hidden;
+}
 
-      .description {
-        cursor: not-allowed;
-        color: var(--ui-color-grey-600);
-      }
-    }
-  }
+.description-input.disabled .main .description {
+  cursor: not-allowed;
+  color: var(--ui-color-grey-600);
+}
 
-  .main {
-    position: relative;
-    flex: 1;
-    padding: 4px 0;
-    display: grid;
-    overflow-y: auto;
-
-    .description,
-    .mirror {
-      grid-area: 1 / 1 / 2 / 2;
-      padding: 0;
-      margin: 0;
-      font: inherit;
-      font-size: 14px;
-      line-height: 1.6;
-      width: 100%;
-      box-sizing: border-box;
-      white-space: pre-wrap;
-      word-break: break-all;
-      overflow-wrap: anywhere;
-    }
-
-    .description {
-      border: none;
-      resize: none;
-      background: transparent;
-      color: var(--ui-color-grey-900);
-      caret-color: var(--ui-color-turquoise-500);
-
-      &:read-only {
-        color: var(--ui-color-grey-1000);
-      }
-
-      &::placeholder {
-        color: var(--ui-color-grey-700);
-      }
-
-      &:focus {
-        outline: none;
-      }
-    }
-
-    .mirror-text {
-      visibility: hidden;
-      pointer-events: none;
-      display: inline;
-    }
-
-    .mirror-actions {
-      display: inline-flex;
-      margin-left: 12px;
-      pointer-events: auto;
-    }
-
-    .enriching {
-      display: flex;
-      align-items: center;
-      gap: 2px;
-      height: fit-content;
-      font-size: 12px;
-      color: var(--ui-color-turquoise-500);
-
-      .animation {
-        width: 16px;
-        height: 16px;
-      }
-    }
-
-    .enrich-btn {
-      border: 1px solid var(--ui-color-turquoise-300);
-      border-radius: 4px;
-      background-color: var(--ui-color-turquoise-200);
-      color: var(--ui-color-turquoise-500);
-      padding: 0 8px;
-      font-size: 12px;
-      display: flex;
-      align-items: center;
-      vertical-align: middle;
-      height: 22px;
-      cursor: pointer;
-      position: relative;
-
-      .icon {
-        width: 14px;
-        height: 14px;
-      }
-
-      &:hover {
-        background-color: var(--ui-color-turquoise-100);
-      }
-    }
-  }
+.description-input .main {
+  position: relative;
+  flex: 1;
+  padding: 4px 0;
+  display: grid;
+  overflow-y: auto;
+}
 
-  .footer {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 8px;
-
-    .extra {
-      display: flex;
-      padding: 4px;
-      gap: 8px;
-      flex: 1 1 0;
-      width: max-content;
-      overflow: hidden;
-
-      & > * {
-        flex-shrink: 0;
-      }
-    }
-  }
+.description-input .main .description,
+.description-input .main .mirror {
+  grid-area: 1 / 1 / 2 / 2;
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  font-size: 14px;
+  line-height: 1.6;
+  width: 100%;
+  box-sizing: border-box;
+  white-space: pre-wrap;
+  word-break: break-all;
+  overflow-wrap: anywhere;
+}
+
+.description-input .main .description {
+  border: none;
+  resize: none;
+  background: transparent;
+  color: var(--ui-color-grey-900);
+  caret-color: var(--ui-color-turquoise-500);
+}
+
+.description-input .main .description:read-only {
+  color: var(--ui-color-grey-1000);
+}
+
+.description-input .main .description::placeholder {
+  color: var(--ui-color-grey-700);
+}
+
+.description-input .main .description:focus {
+  outline: none;
+}
+
+.description-input .main .mirror-text {
+  visibility: hidden;
+  pointer-events: none;
+  display: inline;
+}
+
+.description-input .main .mirror-actions {
+  display: inline-flex;
+  margin-left: 12px;
+  pointer-events: auto;
+}
+
+.description-input .main .enriching {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  height: fit-content;
+  font-size: 12px;
+  color: var(--ui-color-turquoise-500);
+}
+
+.description-input .main .enriching .animation {
+  width: 16px;
+  height: 16px;
+}
+
+.description-input .main .enrich-btn {
+  border: 1px solid var(--ui-color-turquoise-300);
+  border-radius: 4px;
+  background-color: var(--ui-color-turquoise-200);
+  color: var(--ui-color-turquoise-500);
+  padding: 0 8px;
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+  vertical-align: middle;
+  height: 22px;
+  cursor: pointer;
+  position: relative;
+}
+
+.description-input .main .enrich-btn .icon {
+  width: 14px;
+  height: 14px;
+}
+
+.description-input .main .enrich-btn:hover {
+  background-color: var(--ui-color-turquoise-100);
+}
+
+.description-input .footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.description-input .footer .extra {
+  display: flex;
+  padding: 4px;
+  gap: 8px;
+  flex: 1 1 0;
+  width: max-content;
+  overflow: hidden;
+}
+
+.description-input .footer .extra > * {
+  flex-shrink: 0;
 }
 </style>
diff --git a/spx-gui/src/components/asset/gen/common/param-settings/ParamSelector.vue b/spx-gui/src/components/asset/gen/common/param-settings/ParamSelector.vue
index f4409848b7..249e8db84d 100644
--- a/spx-gui/src/components/asset/gen/common/param-settings/ParamSelector.vue
+++ b/spx-gui/src/components/asset/gen/common/param-settings/ParamSelector.vue
@@ -63,13 +63,13 @@ const iconOnly = computed(() => settingsInputCtx.iconOnly)
           name: $t(name),
           desc: `Click to select '${$t(name)}' (e.g., ${optionsText})`
         }"
-        class="param-button"
-        :class="[{ 'icon-only': iconOnly }]"
+        class="flex h-8 items-center justify-center gap-1 rounded-2 border border-grey-400 bg-grey-100 pr-2 pl-1 text-13/5 text-grey-900 cursor-pointer hover:bg-grey-300 disabled:cursor-not-allowed disabled:bg-grey-300 disabled:text-grey-600"
+        :class="[{ 'aspect-square px-0': iconOnly }]"
         :disabled="disabled"
       >
         <UIImg
           v-if="selectedItem.image != null"
-          :class="['button-image', { disabled, placeholder: showPlaceholder }]"
+          :class="['h-6 w-6 rounded-[10px]', { 'opacity-40': disabled, 'disabled-like': disabled && showPlaceholder }]"
           :src="selectedItem.image"
           size="cover"
         />
@@ -82,9 +82,9 @@ const iconOnly = computed(() => settingsInputCtx.iconOnly)
       {{ $t(tooltipText) }}
     </template>
     <template #dropdown-content>
-      <div class="dropdown-content">
+      <div class="flex max-w-102 flex-col gap-3 p-4">
         <div>{{ $t(tips) }}</div>
-        <ul class="options">
+        <ul class="flex flex-row flex-wrap gap-2">
           <UIBlockItem
             v-for="(item, index) in options"
             :key="index"
@@ -92,11 +92,10 @@ const iconOnly = computed(() => settingsInputCtx.iconOnly)
               name: `Option '${$t(item.label)}'`,
               desc: `Select '${$t(item.label)}' as the '${$t(name)}'`
             }"
-            class="option"
             :active="value === item.value"
             @click="$emit('update:value', clearable && value === item.value ? null : item.value)"
           >
-            <UIImg v-if="item.image != null" class="block-image" :src="item.image" />
+            <UIImg v-if="item.image != null" class="mt-0.5 mb-1 h-15 w-20 rounded-1" :src="item.image" />
             <UIBlockItemTitle size="medium">
               {{ $t(item.label) }}
             </UIBlockItemTitle>
@@ -112,74 +111,10 @@ const iconOnly = computed(() => settingsInputCtx.iconOnly)
   </UIDropdownWithTooltip>
 </template>
 
-<style lang="scss" scoped>
-.param-button {
-  height: 32px;
-  padding: 0 8px 0 4px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-  font-size: 13px;
-  line-height: 20px;
-
-  color: var(--ui-color-grey-900);
-  border-radius: var(--ui-border-radius-2);
-  border: 1px solid var(--ui-color-grey-400);
-  background: var(--ui-color-grey-100);
-
-  &.icon-only {
-    aspect-ratio: 1;
-    padding: 0;
-  }
-
-  &:hover:not(:active, :disabled) {
-    cursor: pointer;
-    background: var(--ui-color-grey-300);
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-    background: var(--ui-color-grey-300);
-    color: var(--ui-color-grey-600);
-  }
-}
-
-.button-image {
-  width: 24px;
-  height: 24px;
-  border-radius: 10px;
-
-  &.disabled {
-    opacity: 0.4;
-  }
-  &.placeholder.disabled {
-    // TODO: Temporarily simulate the color value of --ui-color-grey-600 via filter,
-    // because the placeholder's background-image is an SVG and its color cannot be set directly.
-    filter: invert(96%) sepia(11%) saturate(163%) hue-rotate(169deg) brightness(91%) contrast(88%);
-  }
-}
-
-.block-image {
-  width: 80px;
-  height: 60px;
-  border-radius: 8px;
-  margin-top: 2px;
-  margin-bottom: 4px;
-}
-
-.dropdown-content {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  padding: 16px;
-  max-width: 408px;
-
-  .options {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    gap: 8px;
-  }
+<style scoped>
+.disabled-like {
+  /* TODO: Temporarily simulate the color value of --ui-color-grey-600 via filter,
+     because the placeholder's background-image is an SVG and its color cannot be set directly. */
+  filter: invert(96%) sepia(11%) saturate(163%) hue-rotate(169deg) brightness(91%) contrast(88%);
 }
 </style>
diff --git a/spx-gui/src/components/asset/gen/costume/CostumeGenPreview.vue b/spx-gui/src/components/asset/gen/costume/CostumeGenPreview.vue
index ea1f698983..cbde86d0d4 100644
--- a/spx-gui/src/components/asset/gen/costume/CostumeGenPreview.vue
+++ b/spx-gui/src/components/asset/gen/costume/CostumeGenPreview.vue
@@ -43,7 +43,7 @@ const [imgSrc, imgLoading] = useFileUrl(() => props.gen.image)
 </script>
 
 <template>
-  <GenPreview v-if="gen.result == null" class="costume-gen-preview" :name="gen.name" @rename="handleRenameCostume">
+  <GenPreview v-if="gen.result == null" class="absolute inset-0" :name="gen.name" @rename="handleRenameCostume">
     <template v-if="canSaveCostume" #ops>
       <UIButton color="success" :loading="savingCostume" @click="handleSaveCostume">{{
         $t({ en: 'Save costume', zh: '保存造型' })
@@ -58,7 +58,7 @@ const [imgSrc, imgLoading] = useFileUrl(() => props.gen.image)
       {{ $t({ en: 'Loading image...', zh: '正在加载图片...' }) }}
     </GenLoading>
     <PreviewWithCheckerboardBg v-else>
-      <UIImg v-if="gen.image != null" class="img" :src="imgSrc" :loading="imgLoading" />
+      <UIImg v-if="gen.image != null" class="h-full w-full" :src="imgSrc" :loading="imgLoading" />
       <GenLoading v-if="gen.finishState.status === 'running'" variant="bg-spin" cover>
         {{ $t({ en: 'Saving costume...', zh: '正在保存造型...' }) }}
       </GenLoading>
@@ -72,21 +72,5 @@ const [imgSrc, imgLoading] = useFileUrl(() => props.gen.image)
       </UIError>
     </PreviewWithCheckerboardBg>
   </GenPreview>
-  <CostumeDetail v-else class="costume-detail" :costume="gen.result" @rename="handleRenameCostume" />
+  <CostumeDetail v-else :style="{ background: 'transparent' }" :costume="gen.result" @rename="handleRenameCostume" />
 </template>
-
-<style lang="scss" scoped>
-.costume-gen-preview {
-  position: absolute;
-  inset: 0;
-}
-
-.img {
-  width: 100%;
-  height: 100%;
-}
-
-.costume-detail {
-  background: transparent;
-}
-</style>
diff --git a/spx-gui/src/components/asset/gen/costume/CostumeSettingsInput.vue b/spx-gui/src/components/asset/gen/costume/CostumeSettingsInput.vue
index 8c97d50cc0..683f7a772c 100644
--- a/spx-gui/src/components/asset/gen/costume/CostumeSettingsInput.vue
+++ b/spx-gui/src/components/asset/gen/costume/CostumeSettingsInput.vue
@@ -66,5 +66,3 @@ const submitText = computed(() => {
     </template>
   </SettingsInput>
 </template>
-
-<style lang="scss" scoped></style>
diff --git a/spx-gui/src/components/asset/gen/sprite/SpriteGenModal.vue b/spx-gui/src/components/asset/gen/sprite/SpriteGenModal.vue
index bd743a8cd2..ed75d888dd 100644
--- a/spx-gui/src/components/asset/gen/sprite/SpriteGenModal.vue
+++ b/spx-gui/src/components/asset/gen/sprite/SpriteGenModal.vue
@@ -80,14 +80,14 @@ const handleModalClose = useMessageHandle(
     mask-closable
     @update:visible="handleModalClose"
   >
-    <header class="header">
-      <h2 class="title">{{ $t({ zh: '生成精灵', en: 'Sprite Generator' }) }}</h2>
+    <header class="flex h-14 items-center justify-between border-b border-grey-400 px-6">
+      <h2 class="text-16 text-title">{{ $t({ zh: '生成精灵', en: 'Sprite Generator' }) }}</h2>
       <UIModalClose class="close" @click="handleModalClose" />
     </header>
 
     <SpriteGenComp
       v-if="activeGen != null"
-      class="sprite-gen"
+      class="min-h-0 flex-[1_1_0]"
       :gen="activeGen"
       library-search-enabled
       @collapse="handleGenCollapse"
@@ -95,24 +95,3 @@ const handleModalClose = useMessageHandle(
     />
   </UIModal>
 </template>
-
-<style lang="scss" scoped>
-.header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 24px;
-  height: 56px;
-  border-bottom: 1px solid var(--ui-color-grey-400);
-
-  .title {
-    font-size: 16px;
-    color: var(--ui-color-title);
-  }
-}
-
-.sprite-gen {
-  flex: 1 1 0;
-  min-height: 0;
-}
-</style>
diff --git a/spx-gui/src/components/asset/gen/sprite/SpriteGenPhaseContent.vue b/spx-gui/src/components/asset/gen/sprite/SpriteGenPhaseContent.vue
index 77bba979ec..4cdd0bd8a2 100644
--- a/spx-gui/src/components/asset/gen/sprite/SpriteGenPhaseContent.vue
+++ b/spx-gui/src/components/asset/gen/sprite/SpriteGenPhaseContent.vue
@@ -191,11 +191,11 @@ const handleSubmit = useMessageHandle(
 <template>
   <main
     v-radar="{ name: 'Sprite generation content phase', desc: 'Sprite costume and animation generation' }"
-    class="phase-content"
+    class="flex h-full flex-col items-stretch"
   >
-    <div class="body">
-      <aside class="left">
-        <div class="gen-list">
+    <div class="flex-[1_1_0] flex flex-row items-stretch">
+      <aside class="w-102 flex-[0_0_auto] bg-grey-100 pt-4 border-r border-grey-400 flex flex-col justify-between">
+        <div class="flex-[1_1_0] overflow-y-auto px-4 flex flex-col gap-6">
           <ListItemWrapper v-radar="{ name: 'Costume list', desc: 'List of costumes' }" @add="handleAddCostume">
             <template #title>{{ $t({ zh: '造型', en: 'Costume' }) }}</template>
             <CostumeGenItem
@@ -225,17 +225,17 @@ const handleSubmit = useMessageHandle(
           </ListItemWrapper>
         </div>
 
-        <div class="gen-settings">
+        <div class="px-4 py-5 mt-0">
           <CostumeSettingInput v-if="selectedCostume != null" :gen="selectedCostume" />
           <AnimationSettingInput v-if="selectedAnimation != null" :gen="selectedAnimation" />
         </div>
       </aside>
-      <div class="preview">
+      <div class="relative flex-[1_1_0] overflow-hidden flex">
         <CostumeGenPreview v-if="selectedCostume != null" :gen="selectedCostume" />
         <AnimationGenPreview v-else-if="selectedAnimation != null" :gen="selectedAnimation" />
       </div>
     </div>
-    <footer class="footer">
+    <footer class="w-full flex-[0_0_auto] px-6 py-5 flex justify-end gap-4">
       <UITooltip>
         {{
           $t({
@@ -270,60 +270,3 @@ const handleSubmit = useMessageHandle(
     </footer>
   </main>
 </template>
-
-<style lang="scss" scoped>
-.phase-content {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  height: 100%;
-}
-
-.body {
-  flex: 1 1 0;
-  display: flex;
-  flex-direction: row;
-  align-items: stretch;
-}
-
-.left {
-  flex: 0 0 auto;
-  width: 408px;
-  padding-top: 16px;
-  background: var(--ui-color-grey-100);
-  border-right: 1px solid var(--ui-color-grey-400);
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-}
-
-.preview {
-  flex: 1 1 0;
-  display: flex;
-  position: relative;
-  overflow: hidden;
-}
-
-.footer {
-  width: 100%;
-  flex: 0 0 auto;
-  padding: 20px 24px;
-  display: flex;
-  justify-content: end;
-  gap: 16px;
-}
-
-.gen-list {
-  flex: 1 1 0;
-  padding: 0 16px;
-  overflow-y: auto;
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-}
-
-.gen-settings {
-  padding: 20px 16px;
-  margin-top: 0;
-}
-</style>
diff --git a/spx-gui/src/components/asset/gen/sprite/SpriteGenPhaseSettings.vue b/spx-gui/src/components/asset/gen/sprite/SpriteGenPhaseSettings.vue
index e9aa678d4c..c4a9e4117b 100644
--- a/spx-gui/src/components/asset/gen/sprite/SpriteGenPhaseSettings.vue
+++ b/spx-gui/src/components/asset/gen/sprite/SpriteGenPhaseSettings.vue
@@ -85,16 +85,16 @@ const handleUseAsset = useMessageHandle(
       name: 'Sprite generation settings phase',
       desc: 'Generate default costume for the sprite based on settings'
     }"
-    class="phase-settings"
+    class="phase-settings flex h-full flex-col items-stretch"
   >
     <LayoutWithPreview :has-preview="hasPreview">
       <SpriteSettingsInput
-        class="settings-input"
-        :class="{ 'has-preview': hasPreview }"
+        :class="{ 'h-75': hasPreview }"
         :gen="gen"
         :description-placeholder="descriptionPlaceholder"
       />
-      <div class="select-area">
+      <!-- Fixed height to prevent layout shift when suggestions appear/disappear -->
+      <div class="min-h-42.5">
         <AssetSuggestions
           v-if="isLibrarySearchEnabled"
           :type="AssetType.Sprite"
@@ -141,7 +141,7 @@ const handleUseAsset = useMessageHandle(
         <ImagePreview :file="gen.image" />
       </template>
     </LayoutWithPreview>
-    <footer class="footer">
+    <footer class="w-full flex-[0_0_auto] px-6 py-5 flex justify-end gap-4">
       <UIButton
         v-if="selectedAsset != null"
         v-radar="{
@@ -172,13 +172,8 @@ const handleUseAsset = useMessageHandle(
   </main>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .phase-settings {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  height: 100%;
-
   background-image: url('../common/phase-settings-left-bottom-bg.png'), url('../common/phase-settings-right-top-bg.png');
   background-position:
     left bottom,
@@ -187,23 +182,5 @@ const handleUseAsset = useMessageHandle(
   background-size:
     520px auto,
     180px auto;
-
-  .settings-input {
-    &.has-preview {
-      height: 300px;
-    }
-  }
-
-  .select-area {
-    min-height: 170px; // Fixed height to prevent layout shift when suggestions appear/disappear
-  }
-}
-.footer {
-  width: 100%;
-  flex: 0 0 auto;
-  padding: 20px 24px;
-  display: flex;
-  justify-content: end;
-  gap: 16px;
 }
 </style>
diff --git a/spx-gui/src/components/asset/gen/sprite/SpriteImageItem.vue b/spx-gui/src/components/asset/gen/sprite/SpriteImageItem.vue
index 579ee90c04..9714f5a598 100644
--- a/spx-gui/src/components/asset/gen/sprite/SpriteImageItem.vue
+++ b/spx-gui/src/components/asset/gen/sprite/SpriteImageItem.vue
@@ -31,70 +31,16 @@ const loading = computed(() => props.loading || fileLoading.value)
       name: 'Sprite image item',
       desc: 'Click to select this image as the default costume for the sprite'
     }"
-    class="sprite-image-item"
-    :class="{ active, compact, loading, disabled }"
+    class="flex items-center justify-center overflow-hidden border-2 border-transparent bg-grey-300 p-1 transition-[width,height,border-radius] duration-200 ease-in-out"
+    :class="[
+      compact ? 'h-22 w-22 rounded-1' : 'h-35 w-35 rounded-2',
+      active ? 'border-turquoise-500 bg-turquoise-200 cursor-default' : '',
+      disabled ? 'cursor-not-allowed opacity-50' : '',
+      loading ? 'cursor-default pointer-events-none' : '',
+      !active && !disabled && !loading ? 'cursor-pointer hover:bg-grey-400' : ''
+    ]"
   >
     <GenLoading v-if="loading" animation-style="width: 60px; height: 60px;" />
-    <UIImg v-else class="img" :src="url" :alt="file?.name" />
+    <UIImg v-else :class="compact ? 'h-15 w-15' : 'h-25 w-25'" :src="url" :alt="file?.name" />
   </div>
 </template>
-
-<style lang="scss" scoped>
-.sprite-image-item {
-  display: flex;
-  width: 140px;
-  height: 140px;
-  padding: 4px;
-  align-items: center;
-  justify-content: center;
-  border: 2px solid transparent;
-  border-radius: 12px;
-  background-color: var(--ui-color-grey-300);
-  cursor: pointer;
-  overflow: hidden;
-
-  transition:
-    width 0.2s ease,
-    height 0.2s ease,
-    border-radius 0.2s ease;
-
-  &:hover:not(.disabled, .active) {
-    background: var(--ui-color-grey-400);
-  }
-
-  &.active {
-    border: 2px solid var(--ui-color-turquoise-500);
-    background: var(--ui-color-turquoise-200);
-    cursor: default;
-  }
-
-  &.disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-
-  &.loading {
-    cursor: default;
-    pointer-events: none;
-  }
-
-  &.compact {
-    width: 88px;
-    height: 88px;
-    border-radius: 8px;
-  }
-}
-
-.img {
-  width: 100px;
-  height: 100px;
-  transition:
-    width 0.2s ease,
-    height 0.2s ease;
-}
-
-.sprite-image-item.compact .img {
-  width: 60px;
-  height: 60px;
-}
-</style>
diff --git a/spx-gui/src/components/asset/library/AssetLibraryModal.vue b/spx-gui/src/components/asset/library/AssetLibraryModal.vue
index de85e6339d..1a1def64c7 100644
--- a/spx-gui/src/components/asset/library/AssetLibraryModal.vue
+++ b/spx-gui/src/components/asset/library/AssetLibraryModal.vue
@@ -328,41 +328,45 @@ const title = computed(() => {
     mask-closable
     @update:visible="handleModalClose"
   >
-    <header class="header">
-      <div class="header-left">
+    <header class="flex h-14 items-center justify-between border-b border-grey-400 px-6">
+      <div class="flex items-center gap-middle">
         <UIButton
           v-if="isGenPhase && backButtonVisible"
-          class="back-asset"
+          class="-rotate-90"
           color="white"
           icon="arrowAlt"
           variant="stroke"
           @click="handleBackToAssetLibrary"
         ></UIButton>
-        <h2 class="title">{{ $t(title) }}</h2>
+        <h2 class="text-16 text-title">{{ $t(title) }}</h2>
       </div>
 
-      <UIModalClose class="close" @click="handleModalClose" />
+      <UIModalClose @click="handleModalClose" />
     </header>
 
     <template v-if="isGenPhase && AssetGenComp != null">
-      <AssetGenComp class="asset-gen" />
+      <AssetGenComp class="min-h-0 flex-[1_1_0]" />
     </template>
     <template v-else>
-      <div class="asset-library">
-        <div class="scroller-wrapper">
-          <header class="header" :style="headerStyle">
+      <div class="min-h-0 flex-[1_1_0] flex flex-col">
+        <div class="flex-1 overflow-y-auto">
+          <header
+            class="flex h-45 w-full flex-col items-center justify-center gap-5 bg-center bg-cover bg-no-repeat px-62.5"
+            :style="headerStyle"
+          >
             <UITextInput
               v-model:value="searchInput"
-              class="search-input"
+              class="w-full"
               color="white"
               size="large"
               clearable
               :placeholder="$t({ zh: '搜索', en: 'Search' })"
+              :style="{ boxShadow: '0 4px 12px 0 rgba(from var(--ui-color-turquoise-300) r g b / 65%)' }"
             >
               <template #prefix><UIIcon type="search" /></template>
             </UITextInput>
 
-            <div class="recommended-buttons">
+            <div class="flex gap-4">
               <UIButton
                 v-for="r in recommended"
                 :key="r.value"
@@ -376,15 +380,16 @@ const title = computed(() => {
             </div>
           </header>
 
-          <main class="main">
+          <main class="flex-[1_1_0] flex flex-col justify-stretch">
+            <!-- No right padding here to allow the optional scrollbar. -->
             <div
               v-radar="{
                 name: 'Asset list',
                 desc: `List of ${entityMessage.en}s containing keyword ${keyword}`
               }"
-              class="content"
+              class="flex-[1_1_0] flex flex-col gap-5 pt-5 pl-6"
             >
-              <div class="filter">
+              <div class="flex justify-between">
                 <UIChipRadioGroup v-model:value="owner">
                   <UIChipRadio value="all">{{ $t({ zh: '公开素材库', en: 'Public library' }) }}</UIChipRadio>
                   <UIChipRadio value="personal">{{ $t({ zh: '我的素材库', en: 'My library' }) }}</UIChipRadio>
@@ -392,10 +397,10 @@ const title = computed(() => {
               </div>
               <ListResultWrapper :query-ret="queryRet" :height="436">
                 <template v-if="SettingsInput != null && assetGen != null && owner === 'all'" #empty>
-                  <div class="empty">
-                    <div class="empty-tip">
+                  <div class="mx-auto flex h-109 flex-col items-center gap-6 pt-10">
+                    <div class="text-grey-700">
                       <span>{{ $t({ zh: `没找到`, en: `No assets found for ` }) }}</span>
-                      <span class="highlight">{{ $t({ zh: `“${keyword}”`, en: `"${keyword}"` }) }}</span>
+                      <span class="text-grey-1000">{{ $t({ zh: `“${keyword}”`, en: `"${keyword}"` }) }}</span>
                       <span>
                         {{
                           $t({
@@ -406,7 +411,7 @@ const title = computed(() => {
                       </span>
                     </div>
                     <SettingsInput
-                      class="settings-input"
+                      class="w-146"
                       :gen="assetGen"
                       :description-placeholder="keyword"
                       @submit="handleGenStart"
@@ -414,8 +419,8 @@ const title = computed(() => {
                   </div>
                 </template>
                 <template #default="slotProps">
-                  <div class="asset-list-container">
-                    <ul class="asset-list">
+                  <div class="h-109">
+                    <ul class="flex flex-wrap content-start gap-2">
                       <ItemComponent
                         v-for="asset in slotProps.data.data"
                         :key="asset.id"
@@ -424,15 +429,20 @@ const title = computed(() => {
                         @click="handleAssetClick(asset)"
                       />
                     </ul>
-                    <UIPagination v-show="pageTotal > 1" v-model:current="page" class="pagination" :total="pageTotal" />
-                    <div v-if="shouldShowGenSuggestion" class="gen-suggestion">
-                      <div class="message">
+                    <UIPagination
+                      v-show="pageTotal > 1"
+                      v-model:current="page"
+                      class="mt-9 mb-3 justify-center"
+                      :total="pageTotal"
+                    />
+                    <div v-if="shouldShowGenSuggestion" class="flex flex-col items-center gap-5 py-11">
+                      <div class="text-16 text-grey-700">
                         {{ $t(genSuggestionMessage) }}
                       </div>
                       <UIButton size="large" @click="handleGenStart">
                         <template #icon>
                           <!-- eslint-disable-next-line vue/no-v-html -->
-                          <div class="icon" v-html="genAssetIcon"></div>
+                          <div class="h-4.5 w-4.5" v-html="genAssetIcon"></div>
                         </template>
                         {{ $t({ en: 'Generate asset', zh: '生成素材' }) }}
                       </UIButton>
@@ -443,7 +453,7 @@ const title = computed(() => {
             </div>
           </main>
         </div>
-        <footer class="footer">
+        <footer class="flex items-center justify-end gap-middle px-6 py-5">
           <span v-show="selected.length > 0">
             {{
               $t({
@@ -466,144 +476,3 @@ const title = computed(() => {
     </template>
   </UIModal>
 </template>
-
-<style lang="scss" scoped>
-.header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 24px;
-  height: 56px;
-  border-bottom: 1px solid var(--ui-color-grey-400);
-
-  .header-left {
-    display: flex;
-    align-items: center;
-    gap: var(--ui-gap-middle);
-
-    .back-asset {
-      transform: rotate(-90deg);
-    }
-
-    .title {
-      font-size: 16px;
-      color: var(--ui-color-title);
-    }
-  }
-}
-
-.asset-gen,
-.asset-library {
-  flex: 1 1 0;
-  min-height: 0;
-}
-
-.asset-library {
-  display: flex;
-  flex-direction: column;
-  .scroller-wrapper {
-    flex: 1;
-    overflow-y: auto;
-  }
-
-  .header {
-    display: flex;
-    flex-direction: column;
-    height: 180px;
-    width: 100%;
-    padding: 0 250px;
-    align-items: center;
-    justify-content: center;
-    gap: 20px;
-    background-repeat: no-repeat;
-    background-position: center center;
-    background-size: cover;
-
-    .search-input {
-      width: 100%;
-      box-shadow: 0 4px 12px 0 rgba(from var(--ui-color-turquoise-300) r g b / 65%);
-    }
-
-    .recommended-buttons {
-      display: flex;
-      gap: 16px;
-    }
-  }
-  .main {
-    flex: 1 1 0;
-    display: flex;
-    flex-direction: column;
-    justify-content: stretch;
-  }
-  .content {
-    flex: 1 1 0;
-    display: flex;
-    flex-direction: column;
-    gap: 20px;
-    padding: 20px 0 0 24px; // no right padding to allow optional scrollbar
-  }
-  .filter {
-    display: flex;
-    justify-content: space-between;
-  }
-  .empty {
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-    padding-top: 40px;
-    margin: 0 auto;
-    gap: 24px;
-
-    .empty-tip {
-      color: var(--ui-color-grey-700);
-
-      .highlight {
-        color: var(--ui-color-grey-1000);
-      }
-    }
-
-    .settings-input {
-      width: 584px;
-    }
-  }
-  .empty,
-  .asset-list-container {
-    height: 436px;
-  }
-  .asset-list {
-    display: flex;
-    gap: 8px;
-    flex-wrap: wrap;
-    align-content: flex-start;
-  }
-  .pagination {
-    justify-content: center;
-    margin: 36px 0 12px;
-  }
-  .gen-suggestion {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 20px;
-    padding: 44px 0;
-
-    .message {
-      font-size: 16px;
-      color: var(--ui-color-grey-700);
-    }
-
-    .icon {
-      width: 18px;
-      height: 18px;
-    }
-  }
-
-  .footer {
-    padding: 20px 24px;
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    gap: var(--ui-gap-middle);
-  }
-}
-</style>
diff --git a/spx-gui/src/components/asset/library/AssetSaveModal.vue b/spx-gui/src/components/asset/library/AssetSaveModal.vue
index 7522f4dba5..961218e088 100644
--- a/spx-gui/src/components/asset/library/AssetSaveModal.vue
+++ b/spx-gui/src/components/asset/library/AssetSaveModal.vue
@@ -207,13 +207,13 @@ async function addAssetWithPartialData({
       {{ $t(error.userMessage) }}
     </UIError>
     <UIForm v-else :form="form" @submit="handleSubmit.fn">
-      <main class="main">
-        <div class="sider">
-          <BackdropPreview v-if="model instanceof Backdrop" class="preview" :backdrop="model" />
-          <SpritePreview v-if="model instanceof Sprite" class="preview" :sprite="model" />
-          <SoundPreview v-if="model instanceof Sound" class="preview" :sound="model" />
+      <main class="flex">
+        <div class="flex-none px-6 py-5">
+          <BackdropPreview v-if="model instanceof Backdrop" class="h-21 w-28 rounded-1 bg-grey-300" :backdrop="model" />
+          <SpritePreview v-if="model instanceof Sprite" class="h-21 w-28 rounded-1 bg-grey-300" :sprite="model" />
+          <SoundPreview v-if="model instanceof Sound" class="h-21 w-28 rounded-1 bg-grey-300" :sound="model" />
         </div>
-        <div class="inputs">
+        <div class="flex-1 px-6 pt-5 pb-10">
           <UIFormItem path="name">
             <UITextInput
               v-model:value="form.value.name"
@@ -246,7 +246,7 @@ async function addAssetWithPartialData({
           </UIFormItem>
         </div>
       </main>
-      <footer class="footer">
+      <footer class="flex justify-center">
         <UIButton
           v-radar="{ name: 'Save button', desc: 'Click to save asset to the library' }"
           color="primary"
@@ -260,31 +260,3 @@ async function addAssetWithPartialData({
     </UIForm>
   </UIFormModal>
 </template>
-
-<style scoped lang="scss">
-.main {
-  display: flex;
-}
-
-.sider {
-  flex: 0 0 auto;
-  padding: 20px 24px;
-
-  .preview {
-    width: 112px;
-    height: 84px;
-    border-radius: 8px;
-    background-color: var(--ui-color-grey-300);
-  }
-}
-
-.inputs {
-  flex: 1 1 0;
-  padding: 20px 24px 40px;
-}
-
-.footer {
-  display: flex;
-  justify-content: center;
-}
-</style>
diff --git a/spx-gui/src/components/asset/library/SoundPreview.vue b/spx-gui/src/components/asset/library/SoundPreview.vue
index fe340c5308..11f33759fc 100644
--- a/spx-gui/src/components/asset/library/SoundPreview.vue
+++ b/spx-gui/src/components/asset/library/SoundPreview.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="sound-preview">
-    <SoundPlayer class="player" :src="audioSrc" color="primary" />
+  <div class="flex items-center justify-center">
+    <SoundPlayer :src="audioSrc" color="primary" />
   </div>
 </template>
 
@@ -22,16 +22,3 @@ const sound = useAsyncComputedLegacy(async () => {
 })
 const [audioSrc] = useFileUrl(() => sound.value?.file)
 </script>
-
-<style scoped lang="scss">
-.sound-preview {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.player {
-  width: 36px;
-  height: 36px;
-}
-</style>
diff --git a/spx-gui/src/components/asset/library/management/AssetEditModal.vue b/spx-gui/src/components/asset/library/management/AssetEditModal.vue
index 77d4bf13b0..9f8183dc4c 100644
--- a/spx-gui/src/components/asset/library/management/AssetEditModal.vue
+++ b/spx-gui/src/components/asset/library/management/AssetEditModal.vue
@@ -53,13 +53,21 @@ const handleSubmit = useMessageHandle(
     @update:visible="emit('cancelled')"
   >
     <UIForm :form="form" @submit="handleSubmit.fn">
-      <main class="main">
-        <div class="sider">
-          <BackdropPreview v-if="assetType === AssetType.Backdrop" class="preview" :backdrop="asset" />
-          <SpritePreview v-if="assetType === AssetType.Sprite" class="preview" :sprite="asset" />
-          <SoundPreview v-if="assetType === AssetType.Sound" class="preview" :sound="asset" />
+      <main class="flex">
+        <div class="flex-none px-6 py-5">
+          <BackdropPreview
+            v-if="assetType === AssetType.Backdrop"
+            class="h-21 w-28 rounded-1 bg-grey-300"
+            :backdrop="asset"
+          />
+          <SpritePreview
+            v-if="assetType === AssetType.Sprite"
+            class="h-21 w-28 rounded-1 bg-grey-300"
+            :sprite="asset"
+          />
+          <SoundPreview v-if="assetType === AssetType.Sound" class="h-21 w-28 rounded-1 bg-grey-300" :sound="asset" />
         </div>
-        <div class="inputs">
+        <div class="flex-1 px-6 pt-5 pb-10">
           <UIFormItem path="name">
             <UITextInput
               v-model:value="form.value.name"
@@ -73,7 +81,7 @@ const handleSubmit = useMessageHandle(
           </UIFormItem>
         </div>
       </main>
-      <footer class="footer">
+      <footer class="flex justify-center">
         <UIButton
           v-radar="{ name: 'Save button', desc: 'Click to save asset changes' }"
           color="primary"
@@ -86,31 +94,3 @@ const handleSubmit = useMessageHandle(
     </UIForm>
   </UIFormModal>
 </template>
-
-<style scoped lang="scss">
-.main {
-  display: flex;
-}
-
-.sider {
-  flex: 0 0 auto;
-  padding: 20px 24px;
-
-  .preview {
-    width: 112px;
-    height: 84px;
-    border-radius: 8px;
-    background-color: var(--ui-color-grey-300);
-  }
-}
-
-.inputs {
-  flex: 1 1 0;
-  padding: 20px 24px 40px;
-}
-
-.footer {
-  display: flex;
-  justify-content: center;
-}
-</style>
diff --git a/spx-gui/src/components/asset/library/management/AssetLibraryManagementModal.vue b/spx-gui/src/components/asset/library/management/AssetLibraryManagementModal.vue
index 87e1175089..281d3966ea 100644
--- a/spx-gui/src/components/asset/library/management/AssetLibraryManagementModal.vue
+++ b/spx-gui/src/components/asset/library/management/AssetLibraryManagementModal.vue
@@ -186,16 +186,16 @@ const handleRemove = useMessageHandle(
       <UITextInput
         v-model:value="searchInput"
         v-radar="{ name: 'Search input', desc: 'Input to search library assets' }"
-        class="search-input"
+        class="w-80"
         clearable
         :placeholder="$t({ en: 'Search', zh: '搜索' })"
         @keypress.enter="handleSearch"
       >
-        <template #prefix><UIIcon class="search-icon" type="search" /></template>
+        <template #prefix><UIIcon class="text-grey-700" type="search" /></template>
       </UITextInput>
     </template>
-    <section class="body">
-      <div class="sider">
+    <section class="flex">
+      <div class="min-w-0 w-42 flex-none flex-col gap-3 border-r border-grey-400 p-middle flex">
         <UIChip
           v-for="c in categories"
           :key="c.value"
@@ -205,12 +205,12 @@ const handleRemove = useMessageHandle(
           {{ $t(c.message) }}
         </UIChip>
       </div>
-      <main class="main">
-        <h3 class="title">{{ $t(category.message) }}</h3>
-        <div class="content">
+      <main class="flex flex-1 flex-col">
+        <h3 class="px-6 pt-5 text-grey-900">{{ $t(category.message) }}</h3>
+        <div class="px-6 pt-2 pb-5">
           <ListResultWrapper v-slot="slotProps" :query-ret="queryRet" :height="584">
             <!-- fixed asset-list height to keep the layout stable -->
-            <ul class="asset-list" style="height: 584px">
+            <ul class="flex flex-wrap content-start gap-2" style="height: 584px">
               <ItemComponent
                 v-for="asset in slotProps.data.data"
                 :key="asset.id"
@@ -230,55 +230,9 @@ const handleRemove = useMessageHandle(
               </ItemComponent>
             </ul>
           </ListResultWrapper>
-          <UIPagination v-show="pageTotal > 1" v-model:current="page" class="pagination" :total="pageTotal" />
+          <UIPagination v-show="pageTotal > 1" v-model:current="page" class="mt-9 justify-center" :total="pageTotal" />
         </div>
       </main>
     </section>
   </UISearchableModal>
 </template>
-
-<style lang="scss" scoped>
-.search-input {
-  width: 320px;
-}
-.search-icon {
-  color: var(--ui-color-grey-700);
-}
-.body {
-  display: flex;
-  justify-content: stretch;
-}
-.sider {
-  flex: 0 0 168px;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  padding: var(--ui-gap-middle);
-  gap: 12px;
-
-  border-right: 1px solid var(--ui-color-grey-400);
-}
-.main {
-  flex: 1 1 0;
-  display: flex;
-  flex-direction: column;
-  justify-content: stretch;
-}
-.title {
-  padding: 20px 24px 0;
-  color: var(--ui-color-grey-900);
-}
-.content {
-  padding: 8px 24px 20px;
-}
-.asset-list {
-  display: flex;
-  gap: 8px;
-  flex-wrap: wrap;
-  align-content: flex-start;
-}
-.pagination {
-  justify-content: center;
-  margin: 36px 0 0;
-}
-</style>
diff --git a/spx-gui/src/components/asset/library/management/VisibilityIcon.vue b/spx-gui/src/components/asset/library/management/VisibilityIcon.vue
index 73c09f0355..ee1bf3b7ca 100644
--- a/spx-gui/src/components/asset/library/management/VisibilityIcon.vue
+++ b/spx-gui/src/components/asset/library/management/VisibilityIcon.vue
@@ -7,8 +7,8 @@ defineProps<{
 </script>
 
 <template>
-  <div class="visibility-icon">
-    <i v-if="visibility === Visibility.Public" class="icon" :title="$t({ en: 'Public', zh: '公开' })">
+  <div class="absolute top-1.5 left-1.5 flex h-6 w-6 items-center justify-center rounded-full bg-grey-100">
+    <i v-if="visibility === Visibility.Public" class="h-4 w-4" :title="$t({ en: 'Public', zh: '公开' })">
       <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path
           fill-rule="evenodd"
@@ -31,7 +31,7 @@ defineProps<{
         </defs>
       </svg>
     </i>
-    <i v-else class="icon" :title="$t({ en: 'Private', zh: '私有' })">
+    <i v-else class="h-4 w-4" :title="$t({ en: 'Private', zh: '私有' })">
       <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path
           fill-rule="evenodd"
@@ -47,22 +47,3 @@ defineProps<{
     </i>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.visibility-icon {
-  position: absolute;
-  width: 24px;
-  height: 24px;
-  left: 6px;
-  top: 6px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--ui-color-grey-100);
-  border-radius: 50%;
-}
-.icon {
-  width: 16px;
-  height: 16px;
-}
-</style>
diff --git a/spx-gui/src/components/asset/preprocessing/PreprocessModal.vue b/spx-gui/src/components/asset/preprocessing/PreprocessModal.vue
index 14716c37ee..a2120f0ea3 100644
--- a/spx-gui/src/components/asset/preprocessing/PreprocessModal.vue
+++ b/spx-gui/src/components/asset/preprocessing/PreprocessModal.vue
@@ -10,13 +10,13 @@
     :body-style="{ padding: '0' }"
     @update:visible="emit('cancelled')"
   >
-    <main class="main">
+    <main class="flex items-stretch" style="height: 475px">
       <div
         v-radar="{
           name: 'Preprocessing method entries',
           desc: 'Sidebar which contains entries for preprocessing methods'
         }"
-        class="sider"
+        class="flex flex-none flex-col gap-3 border-r border-dividing-line-2 px-4 py-3"
       >
         <ProcessItem
           v-radar="{
@@ -43,7 +43,7 @@
           @click="handleMethodClick(method.value)"
         />
       </div>
-      <div class="detail">
+      <div class="min-w-0 flex-1">
         <!-- Use `v-show` instead of `v-if` to avoid exception. See details in https://github.com/goplus/builder/issues/2022 -->
         <ProcessDetail
           v-show="activeMethod == null"
@@ -73,11 +73,14 @@
         />
       </div>
     </main>
-    <footer class="footer">
+    <footer
+      class="flex items-end gap-5 border-r border-dividing-line-2 p-4"
+      :style="{ boxShadow: '0px -2px 12px 0px rgba(51, 51, 51, 0.08)' }"
+    >
       <div class="footer-main">
-        <h4 class="footer-title">{{ $t({ en: 'Costumes', zh: '造型' }) }}</h4>
+        <h4 class="text-title">{{ $t({ en: 'Costumes', zh: '造型' }) }}</h4>
         <div class="costume-wrapper">
-          <ul class="costume-list">
+          <ul class="flex gap-2">
             <CostumeItem
               v-for="costume in costumes"
               :key="costume.id"
@@ -297,51 +300,20 @@ watch(
 )
 </script>
 
-<style lang="scss" scoped>
-.main {
-  height: 475px;
-  display: flex;
-  align-items: stretch;
-}
-.footer {
-  padding: 16px;
-  display: flex;
-  gap: 20px;
-  align-items: flex-end;
-  border-right: 1px solid var(--ui-color-dividing-line-2);
-  box-shadow: 0px -2px 12px 0px rgba(51, 51, 51, 0.08);
-}
+<style scoped>
 .footer-main {
   flex: 1 1 0;
   min-width: 0;
 
-  // negative margin & fixed height to allow optional scrollbar of .costume-wrapper
+  /* negative margin & fixed height to allow optional scrollbar of .costume-wrapper */
   height: 135px;
   margin-bottom: -16px;
 }
-.footer-title {
-  color: var(--ui-color-title);
-}
+
 .costume-wrapper {
   width: 100%;
   padding-top: 9px;
   overflow-x: auto;
   scrollbar-width: thin;
 }
-.costume-list {
-  display: flex;
-  gap: 8px;
-}
-.sider {
-  flex: 0 0 auto;
-  display: flex;
-  flex-direction: column;
-  padding: 12px 16px;
-  gap: 12px;
-  border-right: 1px solid var(--ui-color-dividing-line-2);
-}
-.detail {
-  flex: 1 1 0;
-  min-width: 0;
-}
 </style>
diff --git a/spx-gui/src/components/asset/preprocessing/common/ImgPreview.vue b/spx-gui/src/components/asset/preprocessing/common/ImgPreview.vue
index 834f1e8b08..f9d3464463 100644
--- a/spx-gui/src/components/asset/preprocessing/common/ImgPreview.vue
+++ b/spx-gui/src/components/asset/preprocessing/common/ImgPreview.vue
@@ -1,6 +1,6 @@
 <template>
-  <section ref="wrapperRef" class="img-preview" :style="wrapperStyle">
-    <canvas ref="canvasRef" class="canvas"></canvas>
+  <section ref="wrapperRef" class="img-preview flex w-full items-center justify-center" :style="wrapperStyle">
+    <canvas ref="canvasRef" class="bg-bottom-left bg-repeat bg-[url('./img-bg.svg')]"></canvas>
   </section>
 </template>
 
@@ -67,19 +67,8 @@ defineExpose({
 })
 </script>
 
-<style lang="scss" scoped>
-.img-preview {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  & + .img-preview {
-    margin-top: 20px;
-  }
-}
-
-.canvas {
-  background: left bottom repeat url('./img-bg.svg');
+<style scoped>
+.img-preview + .img-preview {
+  margin-top: 20px;
 }
 </style>
diff --git a/spx-gui/src/components/asset/preprocessing/common/ProcessDetail.vue b/spx-gui/src/components/asset/preprocessing/common/ProcessDetail.vue
index da2b3f0549..edae01f796 100644
--- a/spx-gui/src/components/asset/preprocessing/common/ProcessDetail.vue
+++ b/spx-gui/src/components/asset/preprocessing/common/ProcessDetail.vue
@@ -1,7 +1,7 @@
 <template>
-  <section class="process-detail">
-    <header>
-      <div class="title">
+  <section class="relative flex h-full flex-col gap-2.5 px-5 py-2.5">
+    <header class="flex">
+      <div class="flex h-8 flex-1 items-center gap-3">
         <slot name="header"></slot>
       </div>
       <UIButton
@@ -10,17 +10,19 @@
         color="success"
         :loading="handleApply.isLoading.value"
         @click="handleApply.fn"
-        >{{ $t({ en: 'Apply', zh: '应用' }) }}</UIButton
       >
+        {{ $t({ en: 'Apply', zh: '应用' }) }}
+      </UIButton>
       <UIButton
         v-show="cancelFn && applied"
         color="boring"
         :loading="handleCancel.isLoading.value"
         @click="handleCancel.fn"
-        >{{ $t({ en: 'Cancel', zh: '取消' }) }}</UIButton
       >
+        {{ $t({ en: 'Cancel', zh: '取消' }) }}
+      </UIButton>
     </header>
-    <main>
+    <main class="flex-1 overflow-y-auto rounded-1 bg-grey-300">
       <slot></slot>
     </main>
   </section>
@@ -46,32 +48,3 @@ const handleCancel = useMessageHandle(() => props.cancelFn!(), {
   zh: '取消失败'
 })
 </script>
-
-<style lang="scss" scoped>
-.process-detail {
-  position: relative;
-  padding: 10px 20px;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-header {
-  display: flex;
-
-  .title {
-    flex: 1 1 0;
-    height: var(--ui-line-height-2);
-    display: flex;
-    gap: 12px;
-    align-items: center;
-  }
-}
-main {
-  flex: 1 1 0;
-  overflow-y: auto;
-
-  border-radius: var(--ui-border-radius-1);
-  background-color: var(--ui-color-grey-300);
-}
-</style>
diff --git a/spx-gui/src/components/asset/preprocessing/common/ProcessItem.vue b/spx-gui/src/components/asset/preprocessing/common/ProcessItem.vue
index 17510a4392..a0037f6bb0 100644
--- a/spx-gui/src/components/asset/preprocessing/common/ProcessItem.vue
+++ b/spx-gui/src/components/asset/preprocessing/common/ProcessItem.vue
@@ -1,10 +1,17 @@
 <template>
-  <li class="process-item" :class="{ active, applied }">
-    <UIImg class="img" :src="imgSrc" />
-    <div class="applied-icon">
+  <li class="relative flex h-fit w-22 cursor-pointer flex-col items-center">
+    <UIImg
+      class="h-16.5 w-22 rounded-1"
+      :style="active ? { boxShadow: 'inset 0 0 0 2px var(--ui-color-primary-main)' } : null"
+      :src="imgSrc"
+    />
+    <div
+      class="absolute top-5.25 left-8 flex h-6 w-6 items-center justify-center rounded-full bg-green-main text-grey-100 transition-opacity duration-200"
+      :class="applied ? 'opacity-100' : 'opacity-0'"
+    >
       <UIIcon color="sprite" type="check" />
     </div>
-    <p class="name">{{ name }}</p>
+    <p class="w-full px-[1em] py-0.5 text-center text-10/[1.4] text-title">{{ name }}</p>
   </li>
 </template>
 
@@ -19,56 +26,3 @@ defineProps<{
   active: boolean
 }>()
 </script>
-
-<style lang="scss" scoped>
-.process-item {
-  display: flex;
-  flex-direction: column;
-  width: 88px;
-  height: fit-content;
-  position: relative;
-  align-items: center;
-  cursor: pointer;
-
-  &.active .img {
-    box-shadow: inset 0 0 0 2px var(--ui-color-primary-main);
-  }
-
-  &.applied .applied-icon {
-    opacity: 1;
-  }
-}
-
-.img {
-  border-radius: var(--ui-border-radius-1);
-  width: 88px;
-  height: 66px;
-}
-
-.applied-icon {
-  position: absolute;
-  top: 21px;
-  left: 32px;
-  width: 24px;
-  height: 24px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  transition: 0.2s;
-  opacity: 0;
-  color: var(--ui-color-grey-100);
-  border-radius: 50%;
-  background-color: var(--ui-color-green-main);
-}
-
-.name {
-  width: 100%;
-  padding: 2px 1em;
-  font-size: 10px;
-  line-height: 1.4;
-
-  text-align: center;
-  color: var(--ui-color-title);
-}
-</style>
diff --git a/spx-gui/src/components/asset/preprocessing/split-sprite-sheet/SplitSpriteSheet.vue b/spx-gui/src/components/asset/preprocessing/split-sprite-sheet/SplitSpriteSheet.vue
index be0ecbb46c..7c1fffb4aa 100644
--- a/spx-gui/src/components/asset/preprocessing/split-sprite-sheet/SplitSpriteSheet.vue
+++ b/spx-gui/src/components/asset/preprocessing/split-sprite-sheet/SplitSpriteSheet.vue
@@ -2,10 +2,10 @@
   <ProcessDetail v-show="active" :applied="applied && !dirty" :apply-fn="apply" :cancel-fn="cancel">
     <template #header>
       {{ $t({ en: 'Split sprite sheet', zh: '切分精灵表' }) }}
-      <UINumberInput v-model:value="rowNum" class="num-input" :min="1" :max="maxGridSize">
+      <UINumberInput v-model:value="rowNum" class="w-30" :min="1" :max="maxGridSize">
         <template #prefix>{{ $t({ en: 'Rows', zh: '行数' }) }}</template>
       </UINumberInput>
-      <UINumberInput v-model:value="colNum" class="num-input" :min="1" :max="maxGridSize">
+      <UINumberInput v-model:value="colNum" class="w-30" :min="1" :max="maxGridSize">
         <template #prefix>{{ $t({ en: 'Columns', zh: '列数' }) }}</template>
       </UINumberInput>
     </template>
@@ -137,9 +137,3 @@ async function cancel() {
   emit('cancel')
 }
 </script>
-
-<style lang="scss" scoped>
-.num-input {
-  width: 120px;
-}
-</style>
diff --git a/spx-gui/src/components/asset/scratch/LoadFromScratch.vue b/spx-gui/src/components/asset/scratch/LoadFromScratch.vue
index 4d824c4ffa..3afea16773 100644
--- a/spx-gui/src/components/asset/scratch/LoadFromScratch.vue
+++ b/spx-gui/src/components/asset/scratch/LoadFromScratch.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="container">
+  <div class="flex flex-col gap-5 text-grey-1000">
     <div v-if="scratchAssets.sprites.length">
-      <h4 class="title">{{ $t({ en: 'Sprites', zh: '精灵' }) }}</h4>
+      <h4 class="mb-2">{{ $t({ en: 'Sprites', zh: '精灵' }) }}</h4>
       <NGrid cols="6" x-gap="8" y-gap="8">
         <NGridItem v-for="asset in scratchAssets.sprites" :key="asset.name" @click="selectSprite(asset)">
           <SpriteItem :asset="asset" :selected="selected.sprites.has(asset)" />
@@ -9,7 +9,7 @@
       </NGrid>
     </div>
     <div v-if="scratchAssets.sounds.length">
-      <h4 class="title">{{ $t({ en: 'Sounds', zh: '声音' }) }}</h4>
+      <h4 class="mb-2">{{ $t({ en: 'Sounds', zh: '声音' }) }}</h4>
       <NGrid cols="6" x-gap="8" y-gap="8">
         <NGridItem v-for="asset in scratchAssets.sounds" :key="asset.name" @click="selectSound(asset)">
           <SoundItem :asset="asset" :selected="selected.sounds.has(asset)" />
@@ -18,7 +18,7 @@
     </div>
 
     <div v-if="scratchAssets.backdrops.length">
-      <h4 class="title">{{ $t({ en: 'Backdrops', zh: '背景' }) }}</h4>
+      <h4 class="mb-2">{{ $t({ en: 'Backdrops', zh: '背景' }) }}</h4>
       <NGrid cols="6" x-gap="8" y-gap="8">
         <NGridItem v-for="asset in scratchAssets.backdrops" :key="asset.name" @click="selectBackdrop(asset)">
           <BackdropItem :asset="asset" :selected="selected.backdrops.has(asset)" />
@@ -28,7 +28,7 @@
     <UIButton
       v-radar="{ name: 'Import button', desc: 'Click to import selected assets from Scratch' }"
       size="large"
-      class="import-button"
+      class="self-end"
       :loading="importSelected.isLoading.value"
       @click="importSelected.fn"
     >
@@ -169,20 +169,3 @@ const importSelected = useMessageHandle(
   { en: 'Assets imported', zh: '素材导入成功' }
 )
 </script>
-
-<style lang="scss" scoped>
-.container {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-  color: var(--ui-color-grey-1000);
-}
-
-.title {
-  margin-bottom: 8px;
-}
-
-.import-button {
-  align-self: flex-end;
-}
-</style>
diff --git a/spx-gui/src/components/common/CostumesPlayer.vue b/spx-gui/src/components/common/CostumesPlayer.vue
index 81351f87f5..1759e2a57b 100644
--- a/spx-gui/src/components/common/CostumesPlayer.vue
+++ b/spx-gui/src/components/common/CostumesPlayer.vue
@@ -129,7 +129,7 @@ defineExpose({ load, play })
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .frames-player {
   position: relative;
 }
diff --git a/spx-gui/src/components/common/ModificationWarningModal.vue b/spx-gui/src/components/common/ModificationWarningModal.vue
index 806e2d9e57..4612626514 100644
--- a/spx-gui/src/components/common/ModificationWarningModal.vue
+++ b/spx-gui/src/components/common/ModificationWarningModal.vue
@@ -39,76 +39,25 @@ function handleCancel() {
     :mask-closable="false"
     @update:visible="handleCancel"
   >
-    <div class="warn-content">
-      <div class="warn-tip">
-        <span class="warn-tip-icon">!</span>
+    <div class="flex flex-col gap-2 text-body/[1.6] text-grey-800">
+      <div class="flex items-center gap-2 font-semibold text-yellow-500">
+        <span
+          class="inline-flex h-5 w-5 flex-none items-center justify-center rounded-full bg-yellow-500 text-14 font-bold leading-none text-grey-100"
+        >
+          !
+        </span>
         <span>{{ $t(props.tip) }}</span>
       </div>
-      <ul class="warn-lines">
+      <ul class="m-0 flex list-none flex-col gap-0.5 pl-0 text-grey-800">
         <li v-for="(item, index) in props.items" :key="index">
           {{ $t(item) }}
         </li>
       </ul>
     </div>
-    <footer class="footer center">
+    <footer class="mt-large flex justify-center gap-middle pb-1">
       <UIButton v-radar="props.confirmRadar" color="danger" @click="emit('resolved')">
         {{ $t(props.confirmText) }}
       </UIButton>
     </footer>
   </UIFormModal>
 </template>
-
-<style scoped lang="scss">
-.warn-content {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  color: var(--ui-color-grey-800);
-  font-size: 14px;
-  line-height: 1.6;
-}
-
-.warn-tip {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  color: var(--ui-color-yellow-500);
-  font-weight: 600;
-}
-
-.warn-tip-icon {
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  background: var(--ui-color-yellow-500);
-  color: var(--ui-color-grey-100);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  line-height: 1;
-  font-size: 14px;
-  font-weight: 700;
-  flex: 0 0 auto;
-}
-
-.warn-lines {
-  margin: 0;
-  padding-left: 0;
-  list-style: none;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  color: var(--ui-color-grey-800);
-}
-
-.footer {
-  display: flex;
-  gap: var(--ui-gap-middle);
-  margin-top: var(--ui-gap-large);
-  padding-bottom: 4px;
-}
-
-.center {
-  justify-content: center;
-}
-</style>
diff --git a/spx-gui/src/components/common/RenameModal.vue b/spx-gui/src/components/common/RenameModal.vue
index 10a5466d56..eb080a17ae 100644
--- a/spx-gui/src/components/common/RenameModal.vue
+++ b/spx-gui/src/components/common/RenameModal.vue
@@ -70,11 +70,11 @@ function validateName(name: string) {
         />
         <template #tip>{{ $t(target.inputTip) }}</template>
       </UIFormItem>
-      <p v-if="target.warning != null" class="warning">
-        <UIIcon class="icon" type="warning" />
+      <p v-if="target.warning != null" class="mt-3 flex items-start gap-2 text-yellow-500">
+        <UIIcon style="height: 22px; flex: 0 0 auto" type="warning" />
         {{ $t(target.warning) }}
       </p>
-      <footer class="footer">
+      <footer class="mt-10 flex justify-end gap-middle">
         <UIButton
           v-radar="{ name: 'Cancel button', desc: 'Click to cancel renaming' }"
           color="boring"
@@ -94,25 +94,3 @@ function validateName(name: string) {
     </UIForm>
   </UIFormModal>
 </template>
-
-<style lang="scss" scoped>
-.warning {
-  display: flex;
-  gap: 8px;
-  margin-top: 12px;
-  color: var(--ui-color-yellow-500);
-  align-items: flex-start;
-
-  .icon {
-    flex: 0 0 auto;
-    height: 22px;
-  }
-}
-
-.footer {
-  margin-top: 40px;
-  display: flex;
-  gap: var(--ui-gap-middle);
-  justify-content: flex-end;
-}
-</style>
diff --git a/spx-gui/src/components/community/CommunityHeader.vue b/spx-gui/src/components/community/CommunityHeader.vue
index a27db5fa47..a760bbeb86 100644
--- a/spx-gui/src/components/community/CommunityHeader.vue
+++ b/spx-gui/src/components/community/CommunityHeader.vue
@@ -3,10 +3,10 @@
 <template>
   <section class="flex-none bg-grey-100">
     <CenteredWrapper class="flex h-16 items-center justify-between gap-5">
-      <h1 class="min-w-0 flex-1 truncate text-16/6.5 text-title">
+      <h1 class="min-w-0 flex-[1_1_0] truncate text-16/6.5 text-title">
         <slot></slot>
       </h1>
-      <label class="shrink-0">
+      <label class="flex-[0_0_auto]">
         <slot name="options"></slot>
       </label>
     </CenteredWrapper>
diff --git a/spx-gui/src/components/community/footer/CommunityFooter.vue b/spx-gui/src/components/community/footer/CommunityFooter.vue
index 8fd6ec2391..e44d65dc2e 100644
--- a/spx-gui/src/components/community/footer/CommunityFooter.vue
+++ b/spx-gui/src/components/community/footer/CommunityFooter.vue
@@ -6,7 +6,7 @@ import { UILink } from '@/components/ui'
 <template>
   <footer
     v-if="showLicense"
-    class="flex h-12.5 w-full shrink-0 items-center justify-center gap-6 text-12 text-grey-700"
+    class="flex h-12.5 w-full flex-[0_0_auto] items-center justify-center gap-6 text-12 text-grey-700"
   >
     <span class="flex items-center justify-center">{{ $t({ en: '© 2025 Qiniu Cloud.', zh: '© 2025 七牛云' }) }}</span>
     <UILink
diff --git a/spx-gui/src/components/community/user/UserHeader.vue b/spx-gui/src/components/community/user/UserHeader.vue
index ec56e5f742..ba9ef47655 100644
--- a/spx-gui/src/components/community/user/UserHeader.vue
+++ b/spx-gui/src/components/community/user/UserHeader.vue
@@ -79,7 +79,7 @@ const handleEditProfile = useMessageHandle(
       <UIImg class="h-full w-full rounded-full border-2 border-grey-100 bg-grey-100" :src="avatarUrl" />
     </div>
     <div class="flex items-end gap-25 px-5 pt-5 pb-5 pl-48">
-      <div class="flex flex-1 flex-col gap-3">
+      <div class="flex-[1_1_0] flex flex-col gap-3">
         <div class="flex flex-wrap items-center gap-middle">
           <h2 class="m-0 text-20/7 text-title">{{ user.displayName }}</h2>
           <UserUsernameInline :username="user.username" />
@@ -87,7 +87,7 @@ const handleEditProfile = useMessageHandle(
         </div>
         <TextView style="max-height: 66px" :text="user.description" />
       </div>
-      <div class="flex shrink-0 basis-27.5 justify-end">
+      <div class="flex-[0_0_110px] flex justify-end">
         <UIButton
           v-if="isSignedInUser"
           v-radar="{ name: 'Edit profile button', desc: 'Click to edit user profile' }"
diff --git a/spx-gui/src/components/editor/map-editor/MapEditor.vue b/spx-gui/src/components/editor/map-editor/MapEditor.vue
index 98f8fedfc4..c91c7ed51d 100644
--- a/spx-gui/src/components/editor/map-editor/MapEditor.vue
+++ b/spx-gui/src/components/editor/map-editor/MapEditor.vue
@@ -26,14 +26,14 @@ function handleSpriteSelect(sprite: Sprite | null) {
 </script>
 
 <template>
-  <div class="flex flex-1 flex-row gap-middle">
+  <div class="flex-[1_1_0] flex flex-row gap-middle">
     <div class="flex w-0 min-w-0 flex-1 items-center justify-center">
       <MapViewer :project="project" :selected-sprite="selectedSprite" @update:selected-sprite="handleSpriteSelect" />
     </div>
-    <div class="flex basis-100 grow-0 shrink-0 flex-col gap-middle desktop-large:basis-124">
+    <div class="flex-[0_0_400px] flex flex-col gap-middle desktop-large:basis-124">
       <UICard>
         <UICardHeader>
-          <div class="flex w-full items-center justify-between">
+          <div class="w-full flex items-center justify-between">
             {{
               $t({
                 en: 'Global Config',
@@ -56,7 +56,7 @@ function handleSpriteSelect(sprite: Sprite | null) {
         <MapBasicConfig v-if="!collapsed" class="p-4" :project="project" />
       </UICard>
       <SpritesPanel
-        class="min-h-0 flex-1 basis-0"
+        class="min-h-0 flex-[1_1_0]"
         :project="project"
         :selected-sprite="selectedSprite"
         @update:selected-sprite="handleSpriteSelect"
diff --git a/spx-gui/src/components/ui/modal/UIModal.vue b/spx-gui/src/components/ui/modal/UIModal.vue
index d215bf1fa6..e95b6c4e58 100644
--- a/spx-gui/src/components/ui/modal/UIModal.vue
+++ b/spx-gui/src/components/ui/modal/UIModal.vue
@@ -12,7 +12,7 @@
     <div
       ref="containerRef"
       v-radar="radar ?? { name: 'Modal', desc: 'A modal dialog for specific purpose' }"
-      :class="['container', `ui-modal-size-${size || 'medium'}`]"
+      :class="['ui-modal-container', `ui-modal-size-${size || 'medium'}`]"
     >
       <slot></slot>
     </div>
@@ -107,7 +107,7 @@ useModalEsc(
 </script>
 
 <style lang="scss" scoped>
-.container {
+.ui-modal-container {
   display: flex;
   flex-direction: column;
   box-shadow: var(--ui-box-shadow-big);
diff --git a/spx-gui/src/pages/community/search.vue b/spx-gui/src/pages/community/search.vue
index c54923b814..df656acad5 100644
--- a/spx-gui/src/pages/community/search.vue
+++ b/spx-gui/src/pages/community/search.vue
@@ -52,7 +52,7 @@
     </ListResultWrapper>
     <footer
       v-show="pageTotal > 1"
-      class="flex h-14 w-full shrink-0 items-center justify-center rounded-2 border border-grey-400 bg-grey-100"
+      class="flex flex-[0_0_56px] w-full items-center justify-center rounded-2 border border-grey-400 bg-grey-100"
     >
       <UIPagination v-model:current="page" :total="pageTotal" />
     </footer>
diff --git a/spx-gui/src/pages/community/user/index.vue b/spx-gui/src/pages/community/user/index.vue
index 78ce218eec..3a249514bd 100644
--- a/spx-gui/src/pages/community/user/index.vue
+++ b/spx-gui/src/pages/community/user/index.vue
@@ -14,14 +14,14 @@ const { data: user, error, refetch } = useUser(() => props.nameInput)
 
 <template>
   <CenteredWrapper class="flex flex-[1_0_auto] flex-col gap-5 pt-6 pb-10" size="large">
-    <UIError v-if="error != null" class="flex flex-1 rounded-2 bg-grey-100" :retry="refetch">
+    <UIError v-if="error != null" class="flex flex-[1_1_0] rounded-2 bg-grey-100" :retry="refetch">
       {{ $t(error.userMessage) }}
     </UIError>
     <template v-else-if="user != null">
       <UserHeader :user="user" />
       <div class="flex items-start gap-5">
-        <UserSidebar class="shrink-0" :username="user.username" />
-        <div class="min-w-0 flex-1">
+        <UserSidebar class="flex-[0_0_auto]" :username="user.username" />
+        <div class="min-w-0 flex-[1_1_0]">
           <router-view />
         </div>
       </div>
diff --git a/spx-gui/src/pages/docs/ui-design.vue b/spx-gui/src/pages/docs/ui-design.vue
index bcf7e076e6..de9923d7d6 100644
--- a/spx-gui/src/pages/docs/ui-design.vue
+++ b/spx-gui/src/pages/docs/ui-design.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="ui-design-wrapper">
+  <div class="flex h-full w-full flex-col overflow-y-auto bg-grey-500">
     <CommunityNavbar />
 
-    <CenteredWrapper class="wrapper">
-      <div class="component-wrapper">
+    <CenteredWrapper class="my-7.5 flex flex-col gap-8">
+      <div class="flex flex-col gap-middle">
         <h3>UIButton</h3>
-        <div class="setting-wrapper">
+        <div class="flex items-center gap-3">
           <div>
             variant:
             <UISelect v-model:value="buttonVariant">
@@ -30,8 +30,8 @@
             </UISelect>
           </div>
         </div>
-        <div class="content-wrapper">
-          <div class="item">
+        <div class="flex flex-col gap-3">
+          <div class="flex gap-2">
             <UIButton :variant="buttonVariant" :shape="buttonShape" :size="buttonSize" color="primary"
               >primary</UIButton
             >
@@ -47,7 +47,7 @@
             <UIButton :variant="buttonVariant" :shape="buttonShape" :size="buttonSize" color="blue">blue</UIButton>
             <UIButton :variant="buttonVariant" :shape="buttonShape" :size="buttonSize" color="purple">purple</UIButton>
           </div>
-          <div class="item">
+          <div class="flex gap-2">
             <UIButton :variant="buttonVariant" :shape="buttonShape" :size="buttonSize" color="primary" icon="play"
               >primary</UIButton
             >
@@ -74,7 +74,7 @@
             >
           </div>
 
-          <div class="item">
+          <div class="flex gap-2">
             <UIButton
               :variant="buttonVariant"
               :shape="buttonShape"
@@ -142,7 +142,7 @@
               >purple</UIButton
             >
           </div>
-          <div class="item">
+          <div class="flex gap-2">
             <UIButton
               :variant="buttonVariant"
               :shape="buttonShape"
@@ -204,7 +204,7 @@
               >purple</UIButton
             >
           </div>
-          <div class="item">
+          <div class="flex gap-2">
             <UIButton
               :variant="buttonVariant"
               :shape="buttonShape"
@@ -264,9 +264,9 @@
           </div>
         </div>
       </div>
-      <div class="component-wrapper">
+      <div class="flex flex-col gap-middle">
         <h3>UITag</h3>
-        <div class="setting-wrapper">
+        <div class="flex items-center gap-3">
           <div>
             variant:
             <UISelect v-model:value="tagVariant">
@@ -275,20 +275,20 @@
             </UISelect>
           </div>
         </div>
-        <div class="content-wrapper">
-          <div class="item">
+        <div class="flex flex-col gap-3">
+          <div class="flex gap-2">
             <UITag :variant="tagVariant" color="default">default</UITag>
             <UITag :variant="tagVariant" color="primary">primary</UITag>
             <UITag :variant="tagVariant" color="warning">warning</UITag>
             <UITag :variant="tagVariant" color="error">error</UITag>
           </div>
-          <div class="item">
+          <div class="flex gap-2">
             <UITag :variant="tagVariant" color="default" closable @close="message.success('default')">default</UITag>
             <UITag :variant="tagVariant" color="primary" closable @close="message.info('primary')">primary</UITag>
             <UITag :variant="tagVariant" color="warning" closable @close="message.warning('warning')">warning</UITag>
             <UITag :variant="tagVariant" color="error" closable @close="message.error('error')">error</UITag>
           </div>
-          <div class="item">
+          <div class="flex gap-2">
             <UITag
               v-for="value in ['up', 'right', 'down', 'left']"
               :key="value"
@@ -299,7 +299,7 @@
               >{{ value }}</UITag
             >
           </div>
-          <div class="item">
+          <div class="flex gap-2">
             <UITag
               v-for="value in ['up', 'right', 'down', 'left']"
               :key="value"
@@ -312,7 +312,7 @@
               >{{ value }}</UITag
             >
           </div>
-          <div class="item">
+          <div class="flex gap-2">
             <UITag :variant="tagVariant" color="default" disabled>default</UITag>
             <UITag :variant="tagVariant" color="primary" disabled>primary</UITag>
             <UITag :variant="tagVariant" color="warning" disabled>warning</UITag>
@@ -348,44 +348,3 @@ const message = useMessage()
 const tagValue = ref('up')
 const tagsValue = ref(new Set())
 </script>
-
-<style lang="scss" scoped>
-.ui-design-wrapper {
-  display: flex;
-  flex-direction: column;
-  overflow-y: auto;
-  width: 100%;
-  height: 100%;
-  background-color: var(--ui-color-grey-500);
-}
-
-.wrapper {
-  display: flex;
-  flex-direction: column;
-  margin: 30px auto;
-  gap: 32px;
-}
-
-.component-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.setting-wrapper {
-  display: flex;
-  gap: 12px;
-  align-items: center;
-}
-
-.content-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-
-  .item {
-    display: flex;
-    gap: 8px;
-  }
-}
-</style>
diff --git a/spx-gui/src/pages/editor/index.vue b/spx-gui/src/pages/editor/index.vue
index 7a3ea6859d..10fb6617f0 100644
--- a/spx-gui/src/pages/editor/index.vue
+++ b/spx-gui/src/pages/editor/index.vue
@@ -1,9 +1,10 @@
 <template>
-  <section class="editor-home">
-    <header class="editor-header">
+  <!-- TODO: review this background color and promote it to a shared UI token if it becomes reused. -->
+  <section class="flex min-h-full w-full flex-col bg-[#e9fcff]">
+    <header class="flex-[0_0_auto]">
       <EditorNavbar :project="state?.project ?? null" :state="state" />
     </header>
-    <main class="editor-main">
+    <main class="flex-[1_1_0] flex gap-middle p-middle">
       <UIDetailedLoading v-if="allQueryRet.isLoading.value" :percentage="allQueryRet.progress.value.percentage">
         <span>{{ $t(allQueryRet.progress.value.desc ?? { en: 'Loading...', zh: '加载中...' }) }}</span>
       </UIDetailedLoading>
@@ -244,25 +245,3 @@ function openProject(owner: string, name: string) {
   router.push(getProjectEditorRoute(owner, name))
 }
 </script>
-
-<style scoped lang="scss">
-.editor-home {
-  width: 100%;
-  min-height: 100%;
-  display: flex;
-  flex-direction: column;
-
-  background-color: #e9fcff; // TODO: define as UI vars
-}
-
-.editor-header {
-  flex: 0 0 auto;
-}
-
-.editor-main {
-  flex: 1 1 0;
-  display: flex;
-  gap: var(--ui-gap-middle);
-  padding: 16px;
-}
-</style>

From dd3090fd66d8b3fc9fbdaa6070466296a7d26c61 Mon Sep 17 00:00:00 2001
From: chennan <chennan@qiniu.com>
Date: Wed, 1 Apr 2026 15:58:46 +0800
Subject: [PATCH 06/10] copilot

---
 .../src/components/copilot/CopilotInput.vue   | 212 ++++-----
 .../src/components/copilot/CopilotRound.vue   |  13 +-
 spx-gui/src/components/copilot/CopilotUI.vue  | 445 +++++++++---------
 .../src/components/copilot/MarkdownView.vue   | 163 ++++---
 .../src/components/copilot/UserMessage.vue    |  53 +--
 .../copilot/custom-elements/CodeBlock.vue     |  17 +-
 .../copilot/custom-elements/CodeChange.vue    |  36 +-
 .../copilot/custom-elements/HighlightLink.vue |  29 +-
 .../custom-elements/common/BlockActionBtn.vue |  31 +-
 .../custom-elements/common/BlockFooter.vue    |  14 +-
 .../custom-elements/common/BlockWrapper.vue   |  15 +-
 .../copilot/feedback/BaseCancelled.vue        |   8 +-
 .../copilot/feedback/BaseFailed.vue           |   8 +-
 .../copilot/feedback/RetryableWrapper.vue     |  50 +-
 .../feedback/api-exception/QuotaExceeded.vue  |   8 +-
 .../feedback/api-exception/SignInTip.vue      |  17 +-
 spx-gui/src/components/ui/dialog/UIDialog.vue |   4 +-
 .../src/components/ui/modal/UIFormModal.vue   |   4 +-
 .../components/ui/modal/UIFullScreenModal.vue |   4 +-
 .../components/ui/modal/UISearchableModal.vue |   4 +-
 20 files changed, 444 insertions(+), 691 deletions(-)

diff --git a/spx-gui/src/components/copilot/CopilotInput.vue b/spx-gui/src/components/copilot/CopilotInput.vue
index 9a9afc9759..ce0575259c 100644
--- a/spx-gui/src/components/copilot/CopilotInput.vue
+++ b/spx-gui/src/components/copilot/CopilotInput.vue
@@ -40,23 +40,27 @@ defineExpose({ focus })
 </script>
 
 <template>
-  <div class="copilot-input" :class="{ loading }" @click="focus">
-    <div class="content">
-      <div v-if="loading" class="dot-loading">
+  <div class="group" :class="{ loading }" @click="focus">
+    <div class="content flex h-full items-center gap-2.5 bg-grey-100 px-3.5 py-3">
+      <div v-if="loading" class="dot-loading flex items-center justify-between gap-0.5">
         <div class="dot"></div>
       </div>
-      <div class="input-wrapper" :data-value="inputStr">
+      <div class="input-wrapper relative min-h-5 min-w-0 flex-[1_1_0] text-13/5" :data-value="inputStr">
         <textarea
           ref="textareaRef"
           v-model="inputStr"
-          class="textarea"
+          class="absolute h-full w-full resize-none border-none bg-transparent p-0 text-title outline-none placeholder:text-hint-2"
           rows="1"
           :disabled="loading"
           :placeholder="$t(placeholder)"
           @keypress.enter.prevent="handleSubmit"
         ></textarea>
       </div>
-      <button class="submit-btn" :class="{ disabled: inputStr.length === 0 }" @click="handleSubmit">
+      <button
+        class="submit-btn flex h-8 w-8 flex-none cursor-pointer items-center justify-center rounded-full border-none p-1.5 outline-none group-[.loading]:hidden"
+        :class="{ disabled: inputStr.length === 0 }"
+        @click="handleSubmit"
+      >
         <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
           <path
             d="M10 16.6665L10 3.33317M10 3.33317L5 8.33317M10 3.33317L15 8.33317"
@@ -66,8 +70,18 @@ defineExpose({ focus })
           />
         </svg>
       </button>
-      <button class="cancel-btn" @click="handleAbort">
-        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
+      <button
+        class="hidden h-8 w-8 flex-none cursor-pointer rounded-full border-none bg-transparent p-0 outline-none group-[.loading]:flex"
+        @click="handleAbort"
+      >
+        <svg
+          class="h-full w-full"
+          xmlns="http://www.w3.org/2000/svg"
+          width="32"
+          height="32"
+          viewBox="0 0 32 32"
+          fill="none"
+        >
           <rect x="1" y="1" width="30" height="30" rx="15" stroke="#E2D4FF" stroke-width="2" />
           <rect x="11" y="11" width="10" height="10" rx="2" fill="#A074FF" />
         </svg>
@@ -76,148 +90,80 @@ defineExpose({ focus })
   </div>
 </template>
 
-<style lang="scss" scoped>
-.content {
-  display: flex;
-  padding: 12px 14px;
-  align-items: center;
-  gap: 10px;
-  height: 100%;
-  background: var(--ui-color-grey-100);
-
-  .dot-loading {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 2px;
-    --speed: 1.3s;
-
-    &::after,
-    &::before,
-    .dot {
-      background-color: var(--ui-color-grey-700);
-      border-radius: 50%;
-      content: '';
-      display: block;
-      height: 6px;
-      width: 6px;
-      transform: scale(0);
-      transition: background-color 0.3s ease;
-    }
-
-    &::after {
-      animation: pulse var(--speed) ease-in-out calc(var(--speed) * -0.125) infinite;
-    }
-    &::before {
-      animation: pulse var(--speed) ease-in-out calc(var(--speed) * -0.375) infinite;
-    }
-    .dot {
-      animation: pulse var(--speed) ease-in-out calc(var(--speed) * -0.25) infinite both;
-    }
-
-    @keyframes pulse {
-      0%,
-      100% {
-        transform: scale(0);
-      }
-      50% {
-        transform: scale(1);
-      }
-    }
-  }
+<style scoped>
+.dot-loading {
+  --speed: 1.3s;
+}
+
+.dot-loading::after,
+.dot-loading::before,
+.dot-loading .dot {
+  background-color: var(--ui-color-grey-700);
+  border-radius: 50%;
+  content: '';
+  display: block;
+  height: 6px;
+  width: 6px;
+  transform: scale(0);
+  transition: background-color 0.3s ease;
+}
+
+.dot-loading::after {
+  animation: pulse var(--speed) ease-in-out calc(var(--speed) * -0.125) infinite;
 }
 
-.input-wrapper {
-  flex: 1 1 0;
-  position: relative;
-  min-width: 0;
-  min-height: 20px;
-
-  font-size: 13px;
-  line-height: 20px;
-
-  // auto resize based on content height
-  &::after {
-    display: block;
-    content: attr(data-value) ' ';
-    pointer-events: none;
-    max-height: 40px; // 2 rows
-    overflow: hidden;
-    visibility: hidden;
-    position: static;
-    white-space: pre-wrap;
-    overflow-wrap: break-word;
+.dot-loading::before {
+  animation: pulse var(--speed) ease-in-out calc(var(--speed) * -0.375) infinite;
+}
+
+.dot-loading .dot {
+  animation: pulse var(--speed) ease-in-out calc(var(--speed) * -0.25) infinite both;
+}
+
+@keyframes pulse {
+  0%,
+  100% {
+    transform: scale(0);
   }
 
-  .textarea {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    padding: 0;
-    scrollbar-width: thin;
-    font-size: inherit;
-    line-height: inherit;
+  50% {
+    transform: scale(1);
   }
 }
 
-.textarea {
-  font-family: inherit;
-  border: none;
-  resize: none;
-  outline: none;
-  color: var(--ui-color-title);
-  background: none;
-
-  &::placeholder {
-    color: var(--ui-color-hint-2);
-  }
+.input-wrapper::after {
+  /* auto resize based on content height */
+  display: block;
+  content: attr(data-value) ' ';
+  pointer-events: none;
+  max-height: 40px;
+  overflow: hidden;
+  visibility: hidden;
+  position: static;
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
 }
 
-.submit-btn,
-.cancel-btn {
-  outline: none;
-  width: 32px;
-  height: 32px;
-  flex: 0 0 auto;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border: none;
-  cursor: pointer;
-  border-radius: 32px;
+.input-wrapper > textarea {
+  font-family: inherit;
+  scrollbar-width: thin;
+  font-size: inherit;
+  line-height: inherit;
 }
 
 .submit-btn {
-  padding: 6px;
   background: var(--Gradient, linear-gradient(180deg, #9a77ff 0%, #735ffa 100%));
-  stroke: var(--ui-color-grey-100);
-  display: flex;
-
-  &.disabled {
-    background: var(--ui-color-grey-400);
-    & > svg {
-      stroke: var(--ui-color-grey-800);
-    }
-  }
 }
 
-.cancel-btn {
-  padding: 0;
-  display: none;
-  background: transparent;
+.submit-btn.disabled {
+  background: var(--ui-color-grey-400);
+}
 
-  & > svg {
-    width: 100%;
-    height: 100%;
-  }
+.submit-btn > svg {
+  stroke: var(--ui-color-grey-100);
 }
 
-.copilot-input.loading {
-  .submit-btn {
-    display: none;
-  }
-  .cancel-btn {
-    display: flex;
-  }
+.submit-btn.disabled > svg {
+  stroke: var(--ui-color-grey-800);
 }
 </style>
diff --git a/spx-gui/src/components/copilot/CopilotRound.vue b/spx-gui/src/components/copilot/CopilotRound.vue
index e434682191..58133e2f19 100644
--- a/spx-gui/src/components/copilot/CopilotRound.vue
+++ b/spx-gui/src/components/copilot/CopilotRound.vue
@@ -33,8 +33,8 @@ const resultContent = computed<string | null>(() => {
 </script>
 
 <template>
-  <section class="copilot-round">
-    <MarkdownView v-if="resultContent != null" class="answer" :value="resultContent" />
+  <section>
+    <MarkdownView v-if="resultContent != null" class="self-stretch" :value="resultContent" />
     <div v-if="round.state !== RoundState.Initialized">
       <template v-if="round.state === RoundState.Failed">
         <SignInTip v-if="round.apiExceptionCode === ApiExceptionCode.errorUnauthorized" :round="round" />
@@ -48,12 +48,3 @@ const resultContent = computed<string | null>(() => {
     </div>
   </section>
 </template>
-
-<style lang="scss" scoped>
-.copilot-round {
-}
-
-.answer {
-  align-self: stretch;
-}
-</style>
diff --git a/spx-gui/src/components/copilot/CopilotUI.vue b/spx-gui/src/components/copilot/CopilotUI.vue
index b9c4e0653f..3b830ee9a8 100644
--- a/spx-gui/src/components/copilot/CopilotUI.vue
+++ b/spx-gui/src/components/copilot/CopilotUI.vue
@@ -562,14 +562,7 @@ onMounted(async () => {
   </div>
 </template>
 
-<style lang="scss" scoped>
-$fromColor: #72bbff;
-$toColor: #c390ff;
-
-@mixin copilotBaseLinearBackground($from: $fromColor, $to: $toColor) {
-  background: linear-gradient(90deg, $from 0%, $to 100%);
-}
-
+<style scoped>
 .copilot-trigger {
   position: absolute;
   width: fit-content;
@@ -585,71 +578,76 @@ $toColor: #c390ff;
   transition:
     transform ease 0.4s,
     opacity ease 0.4s;
+}
 
-  .stop-start {
-    stop-color: #9a77ff;
-  }
-  .stop-end {
-    stop-color: #735ffa;
-  }
+.copilot-trigger .stop-start {
+  stop-color: #9a77ff;
+}
 
-  &:hover {
-    .stop-start {
-      stop-color: #ae92ff;
-    }
-    .stop-end {
-      stop-color: #9181fb;
-    }
-  }
+.copilot-trigger .stop-end {
+  stop-color: #735ffa;
+}
 
-  &.visible {
-    pointer-events: all;
-    opacity: 1;
-  }
+.copilot-trigger:hover .stop-start {
+  stop-color: #ae92ff;
+}
 
-  &.left {
-    @include copilotBaseLinearBackground($toColor, $fromColor);
-    padding-left: 0px;
-    right: 1px;
-    border-top-left-radius: 0px;
-    border-bottom-left-radius: 0px;
-    &.visible {
-      transform: translate(100%, -50%);
-    }
-    .copilot-trigger-content {
-      padding: 0 5px 0 10px;
-      border-top-left-radius: 0px;
-      border-bottom-left-radius: 0px;
-    }
-  }
-  &.right {
-    @include copilotBaseLinearBackground($toColor, $fromColor);
-    padding-right: 0px;
-    left: 1px;
-    border-top-right-radius: 0px;
-    border-bottom-right-radius: 0px;
-    &.visible {
-      transform: translate(-100%, -50%);
-    }
-    .copilot-trigger-content {
-      padding: 0 10px 0 5px;
-      border-top-right-radius: 0px;
-      border-bottom-right-radius: 0px;
-    }
-  }
+.copilot-trigger:hover .stop-end {
+  stop-color: #9181fb;
+}
 
-  .copilot-trigger-content {
-    display: flex;
-    border-radius: 16px;
-    height: 100%;
-    align-items: center;
-    background: var(--ui-color-grey-100);
-  }
+.copilot-trigger.visible {
+  pointer-events: all;
+  opacity: 1;
+}
+
+.copilot-trigger.left {
+  background: linear-gradient(90deg, #c390ff 0%, #72bbff 100%);
+  padding-left: 0;
+  right: 1px;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.copilot-trigger.left.visible {
+  transform: translate(100%, -50%);
+}
+
+.copilot-trigger.left .copilot-trigger-content {
+  padding: 0 5px 0 10px;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.copilot-trigger.right {
+  background: linear-gradient(90deg, #c390ff 0%, #72bbff 100%);
+  padding-right: 0;
+  left: 1px;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.copilot-trigger.right.visible {
+  transform: translate(-100%, -50%);
+}
+
+.copilot-trigger.right .copilot-trigger-content {
+  padding: 0 10px 0 5px;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.copilot-trigger .copilot-trigger-content {
+  display: flex;
+  border-radius: 16px;
+  height: 100%;
+  align-items: center;
+  background: var(--ui-color-grey-100);
 }
 
 .copilot-panel {
   position: fixed;
-  z-index: 9999; // TODO
+  z-index: 9999;
   right: 10px;
   bottom: 20px;
   width: 340px;
@@ -658,31 +656,30 @@ $toColor: #c390ff;
   justify-content: center;
   align-items: stretch;
   gap: 8px;
+}
 
-  &.animated {
-    transition:
-      right ease 0.4s,
-      bottom ease 0.4s;
-  }
+.copilot-panel.animated {
+  transition:
+    right ease 0.4s,
+    bottom ease 0.4s;
 }
 
 .body {
   position: relative;
   border-radius: 16px;
-  box-shadow: 0px 16px 32px 0px rgba(36, 41, 47, 0.1);
+  box-shadow: 0 16px 32px 0 rgba(36, 41, 47, 0.1);
   padding: 1px;
-  @include copilotBaseLinearBackground();
+  background: linear-gradient(90deg, #72bbff 0%, #c390ff 100%);
+}
 
-  &:has(.only-input):has(.visible) {
-    &.left,
-    &.left .body-wrapper {
-      border-radius: 16px 0 0 16px;
-    }
-    &.right,
-    &.right .body-wrapper {
-      border-radius: 0 16px 16px 0;
-    }
-  }
+.body:has(.only-input):has(.visible).left,
+.body:has(.only-input):has(.visible).left .body-wrapper {
+  border-radius: 16px 0 0 16px;
+}
+
+.body:has(.only-input):has(.visible).right,
+.body:has(.only-input):has(.visible).right .body-wrapper {
+  border-radius: 0 16px 16px 0;
 }
 
 .body-wrapper {
@@ -691,165 +688,171 @@ $toColor: #c390ff;
   transition: opacity ease 0.4s;
   border-radius: 16px;
   z-index: 2;
+}
 
-  &.out-of-bounds::after {
-    content: '';
-    position: absolute;
-    top: 14px;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    backdrop-filter: blur(1px);
-  }
+.body-wrapper.out-of-bounds::after {
+  content: '';
+  position: absolute;
+  top: 14px;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  backdrop-filter: blur(1px);
+}
 
-  .dragger {
-    position: absolute;
-    height: 14px;
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    cursor: move;
-    background-color: var(--ui-color-grey-100);
-    transition: background-color ease-in-out 0.3s;
-    z-index: 1;
-
-    &:hover {
-      background-color: var(--ui-color-grey-300);
-    }
-  }
+.body-wrapper .dragger {
+  position: absolute;
+  height: 14px;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: move;
+  background-color: var(--ui-color-grey-100);
+  transition: background-color ease-in-out 0.3s;
+  z-index: 1;
+}
 
-  .output {
-    background: var(--ui-color-grey-100);
-    max-height: 300px;
-    font-size: 13px;
-    overflow-y: auto;
-    scrollbar-width: thin;
+.body-wrapper .dragger:hover {
+  background-color: var(--ui-color-grey-300);
+}
 
-    &:not(:empty) {
-      margin-top: 14px;
-      padding: 12px 16px 24px 16px;
-    }
+.body-wrapper .output {
+  background: var(--ui-color-grey-100);
+  max-height: 300px;
+  font-size: 13px;
+  overflow-y: auto;
+  scrollbar-width: thin;
+}
 
-    .hi {
-      font-size: 20px;
-      color: var(--ui-color-grey-1000);
-    }
-    .tips {
-      margin-top: 4px;
-      color: var(--ui-color-grey-700);
-    }
-    .suggested-questions-wrapper {
-      width: 100%;
-      margin-top: 24px;
-      display: flex;
-      flex-direction: column;
-      gap: 8px;
-
-      .suggested-question {
-        width: 100%;
-        padding: 9px 12px;
-      }
-    }
+.body-wrapper .output:not(:empty) {
+  margin-top: 14px;
+  padding: 12px 16px 24px 16px;
+}
 
-    .quick-inputs {
-      padding-top: 20px;
-      display: flex;
-      flex-direction: row;
-      gap: 8px;
-      background: var(--ui-color-grey-100);
-    }
+.body-wrapper .output .hi {
+  font-size: 20px;
+  color: var(--ui-color-grey-1000);
+}
 
-    .flat-button {
-      --bg-color: var(--ui-color-grey-300);
-      border-radius: var(--ui-border-radius-2);
-      background: var(--bg-color);
-      border: 1px solid var(--bg-color);
-      color: var(--ui-color-grey-900);
-      font-size: 13px;
-      line-height: inherit;
-      white-space: normal;
-      text-align: left;
-      transition: 0.3s;
-      cursor: pointer;
-
-      &:hover {
-        --bg-color: var(--ui-color-grey-200);
-      }
-      &:active {
-        --bg-color: var(--ui-color-grey-400);
-      }
-      &:focus {
-        --bg-color: var(--ui-color-grey-500);
-      }
-    }
-  }
+.body-wrapper .output .tips {
+  margin-top: 4px;
+  color: var(--ui-color-grey-700);
+}
 
-  .divider {
-    @include copilotBaseLinearBackground();
-    height: 1px;
-  }
+.body-wrapper .output .suggested-questions-wrapper {
+  width: 100%;
+  margin-top: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
 
-  .input {
-    height: 62px;
-    overflow: hidden;
-  }
+.body-wrapper .output .suggested-questions-wrapper .suggested-question {
+  width: 100%;
+  padding: 9px 12px;
+}
+
+.body-wrapper .output .quick-inputs {
+  padding-top: 20px;
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  background: var(--ui-color-grey-100);
+}
+
+.body-wrapper .output .flat-button {
+  --bg-color: var(--ui-color-grey-300);
+  border-radius: var(--ui-border-radius-2);
+  background: var(--bg-color);
+  border: 1px solid var(--bg-color);
+  color: var(--ui-color-grey-900);
+  font-size: 13px;
+  line-height: inherit;
+  white-space: normal;
+  text-align: left;
+  transition: 0.3s;
+  cursor: pointer;
+}
+
+.body-wrapper .output .flat-button:hover {
+  --bg-color: var(--ui-color-grey-200);
+}
+
+.body-wrapper .output .flat-button:active {
+  --bg-color: var(--ui-color-grey-400);
+}
+
+.body-wrapper .output .flat-button:focus {
+  --bg-color: var(--ui-color-grey-500);
+}
+
+.body-wrapper .divider {
+  background: linear-gradient(90deg, #72bbff 0%, #c390ff 100%);
+  height: 1px;
+}
+
+.body-wrapper .input {
+  height: 62px;
+  overflow: hidden;
 }
 
 .footer {
   display: flex;
   justify-content: center;
-  .footer-wrapper {
-    z-index: 1;
-    display: flex;
-    gap: 4px;
-    align-items: center;
-    height: 36px;
-    padding: 0 3px;
-    border-radius: 100px;
-    border: 1px solid var(--ui-color-grey-400);
-    background: var(--ui-color-grey-100);
-    box-shadow: 0px 1px 8px 0px rgba(10, 13, 20, 0.05);
-  }
+}
 
-  .v-line {
-    border-right: 1px solid var(--ui-color-grey-400);
-    height: 12px;
-  }
+.footer .footer-wrapper {
+  z-index: 1;
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  height: 36px;
+  padding: 0 3px;
+  border-radius: 100px;
+  border: 1px solid var(--ui-color-grey-400);
+  background: var(--ui-color-grey-100);
+  box-shadow: 0 1px 8px 0 rgba(10, 13, 20, 0.05);
+}
 
-  .fold {
-    width: 28px;
-    height: 28px;
-    border-radius: 28px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    transition: transform 0.3s ease-in;
-    stroke: var(--ui-color-grey-800);
-    cursor: pointer;
-
-    @keyframes nudge {
-      from {
-        transform: translateX(-3px);
-      }
-      to {
-        transform: translateX(1px);
-      }
-    }
+.footer .v-line {
+  border-right: 1px solid var(--ui-color-grey-400);
+  height: 12px;
+}
 
-    .animating {
-      animation: nudge 0.5s ease-in-out infinite alternate;
-    }
+.footer .fold {
+  width: 28px;
+  height: 28px;
+  border-radius: 28px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: transform 0.3s ease-in;
+  stroke: var(--ui-color-grey-800);
+  cursor: pointer;
+}
 
-    &.left {
-      transform: rotate(180deg);
-    }
+@keyframes nudge {
+  from {
+    transform: translateX(-3px);
+  }
 
-    &:hover {
-      cursor: pointer;
-      stroke: var(--ui-color-primary-500);
-      background: var(--ui-color-primary-200);
-    }
+  to {
+    transform: translateX(1px);
   }
 }
+
+.footer .fold .animating {
+  animation: nudge 0.5s ease-in-out infinite alternate;
+}
+
+.footer .fold.left {
+  transform: rotate(180deg);
+}
+
+.footer .fold:hover {
+  cursor: pointer;
+  stroke: var(--ui-color-primary-500);
+  background: var(--ui-color-primary-200);
+}
 </style>
diff --git a/spx-gui/src/components/copilot/MarkdownView.vue b/spx-gui/src/components/copilot/MarkdownView.vue
index 982c57ae4b..38252ad4b6 100644
--- a/spx-gui/src/components/copilot/MarkdownView.vue
+++ b/spx-gui/src/components/copilot/MarkdownView.vue
@@ -47,7 +47,7 @@ const components = computed(() => getComponents(copilot))
   <MarkdownView class="markdown-view" :value="value" :components="components" />
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .markdown-view {
   display: flex;
   flex-direction: column;
@@ -56,92 +56,99 @@ const components = computed(() => getComponents(copilot))
   font-size: 13px;
   line-height: 1.7;
   color: inherit;
+}
 
-  :deep(h1, h2, h3, h4, h5, h6) {
-    margin: 1em 0;
-    color: var(--ui-color-title);
-  }
+.markdown-view :deep(h1, h2, h3, h4, h5, h6) {
+  margin: 1em 0;
+  color: var(--ui-color-title);
+}
 
-  :deep(h1) {
-    font-size: 20px;
-    line-height: 1.4;
-  }
+.markdown-view :deep(h1) {
+  font-size: 20px;
+  line-height: 1.4;
+}
 
-  :deep(h2) {
-    font-size: 16px;
-    line-height: 1.625;
-  }
+.markdown-view :deep(h2) {
+  font-size: 16px;
+  line-height: 1.625;
+}
 
-  :deep(h3) {
-    font-size: 14px;
-    line-height: 1.57143;
-  }
+.markdown-view :deep(h3) {
+  font-size: 14px;
+  line-height: 1.57143;
+}
 
-  :deep(h4, h5, h6) {
-    font-size: 13px;
-    line-height: 1.53846;
-  }
+.markdown-view :deep(h4, h5, h6) {
+  font-size: 13px;
+  line-height: 1.53846;
+}
 
-  :deep(ul),
-  :deep(ol) {
-    display: flex;
-    flex-direction: column;
-    padding-left: 1.5em;
-    gap: 8px;
-  }
-  :deep(ul) {
-    list-style: square;
-  }
-  :deep(ol) {
-    list-style: decimal;
-  }
-  :deep(li > *:not(:last-child)) {
-    margin-bottom: 8px;
-  }
+.markdown-view :deep(ul),
+.markdown-view :deep(ol) {
+  display: flex;
+  flex-direction: column;
+  padding-left: 1.5em;
+  gap: 8px;
+}
 
-  :deep(a) {
-    color: var(--ui-color-turquoise-500);
-    text-decoration: underline;
-    &:hover {
-      color: var(--ui-color-turquoise-400);
-    }
-    &:active {
-      color: var(--ui-color-turquoise-600);
-    }
-  }
+.markdown-view :deep(ul) {
+  list-style: square;
+}
 
-  :deep(blockquote) {
-    position: relative;
-    padding-left: 20px;
-    &:before {
-      content: '';
-      position: absolute;
-      left: 9px;
-      top: 0;
-      width: 2px;
-      height: 100%;
-      border-radius: 1px;
-      background-color: var(--ui-color-grey-800);
-    }
-  }
+.markdown-view :deep(ol) {
+  list-style: decimal;
+}
 
-  :deep(code) {
-    font-family: var(--ui-font-family-code);
-  }
-  :deep(:not(pre) > code) {
-    // TODO: keep consistent with component `UICode`
-    font-size: 0.92em;
-    line-height: 2;
-    padding: 2px 4px;
-    border-radius: 4px;
-    border: 1px solid var(--ui-color-grey-500);
-    background: var(--ui-color-grey-300);
-    word-break: break-word;
-    overflow-wrap: break-word;
-  }
+.markdown-view :deep(li > *:not(:last-child)) {
+  margin-bottom: 8px;
+}
 
-  :deep(strong) {
-    font-weight: bold;
-  }
+.markdown-view :deep(a) {
+  color: var(--ui-color-turquoise-500);
+  text-decoration: underline;
+}
+
+.markdown-view :deep(a:hover) {
+  color: var(--ui-color-turquoise-400);
+}
+
+.markdown-view :deep(a:active) {
+  color: var(--ui-color-turquoise-600);
+}
+
+.markdown-view :deep(blockquote) {
+  position: relative;
+  padding-left: 20px;
+}
+
+.markdown-view :deep(blockquote::before) {
+  content: '';
+  position: absolute;
+  left: 9px;
+  top: 0;
+  width: 2px;
+  height: 100%;
+  border-radius: 1px;
+  background-color: var(--ui-color-grey-800);
+}
+
+.markdown-view :deep(code) {
+  font-family: var(--ui-font-family-code);
+}
+
+.markdown-view :deep(:not(pre) > code) {
+  /* TODO: keep consistent with component `UICode` */
+  font-size: 0.92em;
+  line-height: 2;
+  padding: 2px 4px;
+  border-radius: 4px;
+  border: 1px solid var(--ui-color-grey-500);
+  background: var(--ui-color-grey-300);
+  word-break: break-word;
+  overflow-wrap: break-word;
+}
+
+.markdown-view :deep(strong) {
+  font-weight: bold;
 }
 </style>
diff --git a/spx-gui/src/components/copilot/UserMessage.vue b/spx-gui/src/components/copilot/UserMessage.vue
index 26fe90514f..e09a595a59 100644
--- a/spx-gui/src/components/copilot/UserMessage.vue
+++ b/spx-gui/src/components/copilot/UserMessage.vue
@@ -13,49 +13,18 @@ const avatarUrl = useAvatarUrl(() => signedInUser.value?.avatar)
 </script>
 
 <template>
-  <section class="user-message" :class="`type-${message.type}`">
-    <img class="avatar" :src="avatarUrl ?? undefined" />
-    <MarkdownView v-if="message.type === 'text'" class="content" :value="message.content" />
-    <div v-else-if="message.type === 'event'" class="content">
+  <section
+    class="self-stretch px-4 py-5"
+    :class="message.type === 'text' ? 'flex flex-col items-start gap-2' : 'flex flex-row items-center gap-2'"
+  >
+    <img class="h-8 w-8 rounded-full" :src="avatarUrl ?? undefined" />
+    <MarkdownView
+      v-if="message.type === 'text'"
+      class="self-stretch rounded-r-1 rounded-b-1 rounded-tl-none bg-[#e9ecf7] p-2"
+      :value="message.content"
+    />
+    <div v-else-if="message.type === 'event'" class="flex-[1_1_0]">
       {{ $t(message.name) }}
     </div>
   </section>
 </template>
-
-<style lang="scss" scoped>
-.user-message {
-  padding: 20px 16px;
-  display: flex;
-  align-self: stretch;
-}
-
-.avatar {
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-}
-
-.type-text {
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 8px;
-
-  .content {
-    padding: 8px;
-    align-self: stretch;
-
-    border-radius: 0px var(--ui-border-radius-1) var(--ui-border-radius-1) var(--ui-border-radius-1);
-    background: #e9ecf7;
-  }
-}
-
-.type-event {
-  flex-direction: row;
-  gap: 8px;
-  align-items: center;
-
-  .content {
-    flex: 1 1 0;
-  }
-}
-</style>
diff --git a/spx-gui/src/components/copilot/custom-elements/CodeBlock.vue b/spx-gui/src/components/copilot/custom-elements/CodeBlock.vue
index a8ba3fcd26..6978ae922c 100644
--- a/spx-gui/src/components/copilot/custom-elements/CodeBlock.vue
+++ b/spx-gui/src/components/copilot/custom-elements/CodeBlock.vue
@@ -38,8 +38,10 @@ const handleCopy = useMessageHandle(
 
 <template>
   <BlockWrapper>
-    <div class="body">
-      <CodeView class="code" :language="language" mode="block" line-numbers>{{ code }}</CodeView>
+    <div class="py-3 pl-3">
+      <CodeView class="min-w-0 overflow-x-auto pr-3" :language="language" mode="block" line-numbers>
+        {{ code }}
+      </CodeView>
     </div>
     <BlockFooter>
       <BlockActionBtn icon="insert" @click="handleInsert">
@@ -51,14 +53,3 @@ const handleCopy = useMessageHandle(
     </BlockFooter>
   </BlockWrapper>
 </template>
-
-<style lang="scss" scoped>
-.body {
-  padding: 12px 0 12px 12px;
-}
-.code {
-  padding-right: 12px;
-  min-width: 0;
-  overflow-x: auto;
-}
-</style>
diff --git a/spx-gui/src/components/copilot/custom-elements/CodeChange.vue b/spx-gui/src/components/copilot/custom-elements/CodeChange.vue
index 5ee6ece724..c7ad557d66 100644
--- a/spx-gui/src/components/copilot/custom-elements/CodeChange.vue
+++ b/spx-gui/src/components/copilot/custom-elements/CodeChange.vue
@@ -108,14 +108,14 @@ const handleApply = useMessageHandle(
 <template>
   <BlockWrapper>
     <template v-if="target != null">
-      <div class="header">
-        <CodeLink class="link" :file="target.textDocument.id" :range="target.range" />
+      <div class="p-2">
+        <CodeLink :file="target.textDocument.id" :range="target.range" />
       </div>
-      <div class="body">
-        <div class="code-wrapper">
+      <div class="min-w-0 overflow-x-auto pb-2 pl-2">
+        <div class="min-w-fit">
           <!-- TODO: Consider using [transformerNotationDiff](https://shiki.style/packages/transformers#transformernotationdiff) instead -->
-          <CodeView class="code" mode="block" deletion>{{ codeToDelete }}</CodeView>
-          <CodeView class="code" mode="block" addition>{{ codeToAdd }}</CodeView>
+          <CodeView class="pr-2" mode="block" deletion>{{ codeToDelete }}</CodeView>
+          <CodeView class="pr-2" mode="block" addition>{{ codeToAdd }}</CodeView>
         </div>
       </div>
       <BlockFooter>
@@ -124,30 +124,8 @@ const handleApply = useMessageHandle(
         </BlockActionBtn>
       </BlockFooter>
     </template>
-    <div v-else class="invalid">
+    <div v-else class="p-2 text-center text-hint-2">
       <p>{{ $t({ en: 'Invalid code change', zh: '无效的代码变更' }) }}</p>
     </div>
   </BlockWrapper>
 </template>
-
-<style lang="scss" scoped>
-.header {
-  padding: 8px;
-}
-.body {
-  padding: 0 0 8px 8px;
-  min-width: 0;
-  overflow-x: auto;
-}
-.code-wrapper {
-  min-width: fit-content;
-}
-.code {
-  padding-right: 8px;
-}
-.invalid {
-  padding: 8px;
-  text-align: center;
-  color: var(--ui-color-hint-2);
-}
-</style>
diff --git a/spx-gui/src/components/copilot/custom-elements/HighlightLink.vue b/spx-gui/src/components/copilot/custom-elements/HighlightLink.vue
index 7c857c2cb0..f1c6fa9cf4 100644
--- a/spx-gui/src/components/copilot/custom-elements/HighlightLink.vue
+++ b/spx-gui/src/components/copilot/custom-elements/HighlightLink.vue
@@ -59,30 +59,11 @@ const { fn: handleClick } = useMessageHandle(
 </script>
 
 <template>
-  <button type="button" class="highlight-link" @click="handleClick">
+  <button
+    type="button"
+    class="inline-block w-fit cursor-pointer rounded-[4px] border-none bg-turquoise-main px-1.25 py-0.5 text-13 font-semibold text-grey-100 outline-none hover:bg-turquoise-400 active:bg-turquoise-600"
+    @click="handleClick"
+  >
     <slot></slot>
   </button>
 </template>
-
-<style lang="scss" scoped>
-.highlight-link {
-  border-radius: 4px;
-  border: none;
-  width: fit-content;
-  display: inline-block;
-  padding: 2px 5px;
-  color: var(--ui-color-grey-100);
-  font-size: 13px;
-  font-weight: 600;
-  outline: none;
-  background-color: var(--ui-color-turquoise-main);
-  cursor: pointer;
-
-  &:hover {
-    background-color: var(--ui-color-turquoise-400);
-  }
-  &:active {
-    background-color: var(--ui-color-turquoise-600);
-  }
-}
-</style>
diff --git a/spx-gui/src/components/copilot/custom-elements/common/BlockActionBtn.vue b/spx-gui/src/components/copilot/custom-elements/common/BlockActionBtn.vue
index 5e92d0d144..44eb993e06 100644
--- a/spx-gui/src/components/copilot/custom-elements/common/BlockActionBtn.vue
+++ b/spx-gui/src/components/copilot/custom-elements/common/BlockActionBtn.vue
@@ -7,33 +7,10 @@ defineProps<{
 </script>
 
 <template>
-  <button class="block-action-btn">
-    <UIIcon class="icon" :type="icon" />
+  <button
+    class="flex h-4.5 cursor-pointer items-center gap-1 rounded border-none bg-transparent p-0 text-12 text-text hover:text-grey-700"
+  >
+    <UIIcon :type="icon" />
     <slot></slot>
   </button>
 </template>
-
-<style lang="scss" scoped>
-.block-action-btn {
-  display: flex;
-  gap: 4px;
-  align-items: center;
-  border: none;
-  background: none;
-  padding: 0;
-  height: 18px;
-  border-radius: 4px;
-  font-size: 12px;
-  color: var(--ui-color-text);
-  cursor: pointer;
-
-  &:hover {
-    color: var(--ui-color-grey-700);
-  }
-
-  .icon {
-    width: 16px;
-    height: 16px;
-  }
-}
-</style>
diff --git a/spx-gui/src/components/copilot/custom-elements/common/BlockFooter.vue b/spx-gui/src/components/copilot/custom-elements/common/BlockFooter.vue
index 7b28ce06c7..56a84ec256 100644
--- a/spx-gui/src/components/copilot/custom-elements/common/BlockFooter.vue
+++ b/spx-gui/src/components/copilot/custom-elements/common/BlockFooter.vue
@@ -1,19 +1,7 @@
 <script setup lang="ts"></script>
 
 <template>
-  <footer class="block-footer">
+  <footer class="flex items-center gap-5 rounded-b-2 border-t border-dividing-line-2 bg-grey-200 px-3 py-1.5">
     <slot></slot>
   </footer>
 </template>
-
-<style lang="scss" scoped>
-.block-footer {
-  padding: 6px 12px;
-  display: flex;
-  gap: 20px;
-  align-items: center;
-  border-top: 1px solid var(--ui-color-dividing-line-2);
-  border-radius: 0 0 var(--ui-border-radius-2) var(--ui-border-radius-2);
-  background: var(--ui-color-grey-200);
-}
-</style>
diff --git a/spx-gui/src/components/copilot/custom-elements/common/BlockWrapper.vue b/spx-gui/src/components/copilot/custom-elements/common/BlockWrapper.vue
index 51a6b621af..d267a42447 100644
--- a/spx-gui/src/components/copilot/custom-elements/common/BlockWrapper.vue
+++ b/spx-gui/src/components/copilot/custom-elements/common/BlockWrapper.vue
@@ -1,20 +1,7 @@
 <script setup lang="ts"></script>
 
 <template>
-  <div class="block-wrapper">
+  <div class="self-stretch flex flex-col items-stretch rounded-2 border border-dividing-line-1 bg-grey-100">
     <slot></slot>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.block-wrapper {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  align-self: stretch;
-
-  border-radius: var(--ui-border-radius-2);
-  border: 1px solid var(--ui-color-dividing-line-1);
-  background: var(--ui-color-grey-100);
-}
-</style>
diff --git a/spx-gui/src/components/copilot/feedback/BaseCancelled.vue b/spx-gui/src/components/copilot/feedback/BaseCancelled.vue
index 52e5a417f5..d7b2bdfa07 100644
--- a/spx-gui/src/components/copilot/feedback/BaseCancelled.vue
+++ b/spx-gui/src/components/copilot/feedback/BaseCancelled.vue
@@ -10,14 +10,8 @@ defineProps<{
 </script>
 
 <template>
-  <RetryableWrapper class="cancelled" :round="round" :is-last-round="isLastRound">
+  <RetryableWrapper class="text-yellow-main" :round="round" :is-last-round="isLastRound">
     <UIIcon type="warning" />
     {{ $t({ en: 'Cancelled', zh: '已取消' }) }}
   </RetryableWrapper>
 </template>
-
-<style lang="scss" scoped>
-.cancelled {
-  color: var(--ui-color-yellow-main);
-}
-</style>
diff --git a/spx-gui/src/components/copilot/feedback/BaseFailed.vue b/spx-gui/src/components/copilot/feedback/BaseFailed.vue
index 198f3fd9c5..387549a6ae 100644
--- a/spx-gui/src/components/copilot/feedback/BaseFailed.vue
+++ b/spx-gui/src/components/copilot/feedback/BaseFailed.vue
@@ -10,14 +10,8 @@ defineProps<{
 </script>
 
 <template>
-  <RetryableWrapper class="failed" :round="round" :is-last-round="isLastRound">
+  <RetryableWrapper class="text-red-main" :round="round" :is-last-round="isLastRound">
     <UIIcon type="errorTriangle" />
     {{ $t(round.error!) }}
   </RetryableWrapper>
 </template>
-
-<style lang="scss" scoped>
-.failed {
-  color: var(--ui-color-red-main);
-}
-</style>
diff --git a/spx-gui/src/components/copilot/feedback/RetryableWrapper.vue b/spx-gui/src/components/copilot/feedback/RetryableWrapper.vue
index 1ab75d4b32..c8ee149bea 100644
--- a/spx-gui/src/components/copilot/feedback/RetryableWrapper.vue
+++ b/spx-gui/src/components/copilot/feedback/RetryableWrapper.vue
@@ -18,11 +18,15 @@ function handleRetry() {
 </script>
 
 <template>
-  <div class="retryable-wrapper">
-    <div class="tip">
+  <div class="flex flex-col gap-2 text-12/4.5">
+    <div class="flex items-center gap-2">
       <slot />
     </div>
-    <button v-if="retryable" class="retry" @click="handleRetry">
+    <button
+      v-if="retryable"
+      class="ml-6 flex w-fit items-center gap-1 rounded border-none bg-transparent px-0 py-0.75 text-grey-800 transition-colors duration-200 hover:text-grey-700 active:text-grey-900"
+      @click="handleRetry"
+    >
       <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
         <path
           d="M11.6107 3.44482C11.8473 3.44482 12.0304 3.44304 12.1928 3.46436C13.2398 3.6022 14.0646 4.42616 14.2025 5.47314C14.2239 5.63566 14.2221 5.8194 14.2221 6.05615V9.22217C14.2221 9.67751 14.2221 10.0594 14.1967 10.3706C14.1706 10.6897 14.1148 10.9939 13.9682 11.2817C13.7445 11.7206 13.3875 12.0776 12.9486 12.3013C12.6607 12.448 12.3566 12.5047 12.0375 12.5308C11.7263 12.5562 11.3445 12.5562 10.8891 12.5562H8.49844L9.02676 13.0845C9.28688 13.3448 9.28703 13.7666 9.02676 14.0269C8.76649 14.2871 8.34473 14.2869 8.08438 14.0269L6.41739 12.3608C6.15706 12.1005 6.1571 11.6778 6.41739 11.4175L8.08438 9.75146C8.34473 9.49112 8.76641 9.49112 9.02676 9.75146C9.28686 10.0118 9.28703 10.4336 9.02676 10.6938L8.49844 11.2222H10.8891C11.3664 11.2222 11.6847 11.2216 11.9291 11.2017C12.1656 11.1823 12.2746 11.1477 12.3432 11.1128C12.5311 11.0169 12.6839 10.8642 12.7797 10.6763C12.8146 10.6077 12.8492 10.4995 12.8686 10.2632C12.8885 10.0188 12.8891 9.69973 12.8891 9.22217V6.05615C12.8891 5.7782 12.8873 5.70196 12.8803 5.64795C12.8212 5.19922 12.4677 4.8457 12.019 4.78662C11.9649 4.77955 11.8893 4.77783 11.6107 4.77783C11.2427 4.77764 10.9448 4.47889 10.9447 4.11084C10.9449 3.74289 11.2428 3.44501 11.6107 3.44482ZM6.97305 1.97314C7.23335 1.71284 7.65507 1.71294 7.91544 1.97314L9.58243 3.64014C9.84258 3.9005 9.84271 4.32224 9.58243 4.58252L7.91544 6.24951C7.65512 6.50941 7.23329 6.50953 6.97305 6.24951C6.71271 5.98917 6.71273 5.5665 6.97305 5.30615L7.50137 4.77783H5.11075C4.63325 4.77783 4.31512 4.77837 4.07071 4.79834C3.83479 4.81762 3.72627 4.85139 3.65762 4.88623C3.46959 4.98205 3.316 5.13574 3.22012 5.32373C3.18522 5.39236 3.15056 5.50147 3.13126 5.73779C3.11132 5.98221 3.11075 6.30042 3.11075 6.77783V9.94482C3.11075 10.2235 3.11244 10.299 3.11954 10.353C3.17878 10.8016 3.53227 11.1553 3.98087 11.2144C4.0349 11.2214 4.11056 11.2222 4.38907 11.2222C4.75716 11.2223 5.05606 11.521 5.05606 11.8892C5.05589 12.2571 4.75705 12.556 4.38907 12.5562C4.15226 12.5562 3.9686 12.557 3.80606 12.5356C2.75938 12.3976 1.93625 11.5735 1.79825 10.5269C1.7769 10.3645 1.77774 10.1813 1.77774 9.94482V6.77783C1.77774 6.32215 1.77672 5.93977 1.80215 5.62842C1.82824 5.30942 1.886 5.00604 2.03262 4.71826C2.25633 4.27942 2.61327 3.92237 3.05215 3.69873C3.33991 3.55219 3.64335 3.49531 3.96231 3.46924C4.27354 3.44383 4.65534 3.44482 5.11075 3.44482H7.50137L6.97305 2.91553C6.71287 2.65519 6.71281 2.23345 6.97305 1.97314Z"
@@ -33,43 +37,3 @@ function handleRetry() {
     </button>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.retryable-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  font-size: 12px;
-  line-height: 18px;
-}
-
-.tip {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.retry {
-  margin-left: 24px;
-  padding: 3px 0px;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  font-size: inherit;
-  line-height: 18px;
-  width: fit-content;
-  border: none;
-  background: none;
-  cursor: pointer;
-  color: var(--ui-color-grey-800);
-  border-radius: 4px;
-  transition: 0.2s;
-
-  &:hover {
-    color: var(--ui-color-grey-700);
-  }
-  &:active {
-    color: var(--ui-color-grey-900);
-  }
-}
-</style>
diff --git a/spx-gui/src/components/copilot/feedback/api-exception/QuotaExceeded.vue b/spx-gui/src/components/copilot/feedback/api-exception/QuotaExceeded.vue
index 720dbab546..d3afd01681 100644
--- a/spx-gui/src/components/copilot/feedback/api-exception/QuotaExceeded.vue
+++ b/spx-gui/src/components/copilot/feedback/api-exception/QuotaExceeded.vue
@@ -72,7 +72,7 @@ onMounted(updateRetryAfterTime)
 </script>
 
 <template>
-  <RetryableWrapper class="quota-exceeded" :round="round" :is-last-round="isLastRound">
+  <RetryableWrapper class="text-yellow-main" :round="round" :is-last-round="isLastRound">
     <UIIcon type="warning" />
     {{
       $t({
@@ -87,9 +87,3 @@ onMounted(updateRetryAfterTime)
     </template>
   </RetryableWrapper>
 </template>
-
-<style lang="scss" scoped>
-.quota-exceeded {
-  color: var(--ui-color-yellow-main);
-}
-</style>
diff --git a/spx-gui/src/components/copilot/feedback/api-exception/SignInTip.vue b/spx-gui/src/components/copilot/feedback/api-exception/SignInTip.vue
index 11181305dc..b0e8dd1d36 100644
--- a/spx-gui/src/components/copilot/feedback/api-exception/SignInTip.vue
+++ b/spx-gui/src/components/copilot/feedback/api-exception/SignInTip.vue
@@ -17,21 +17,10 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="sign-in-container">
-    <div class="message">{{ $t({ en: 'Please sign in to continue.', zh: '请先登录并继续' }) }}</div>
-    <UIButton variant="flat" class="sign-in-btn" @click="initiateSignIn()">
+  <div class="text-13/[1.7]">
+    <div>{{ $t({ en: 'Please sign in to continue.', zh: '请先登录并继续' }) }}</div>
+    <UIButton variant="flat" class="mt-4" @click="initiateSignIn()">
       {{ $t({ en: 'Sign in', zh: '登录' }) }}
     </UIButton>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.sign-in-container {
-  font-size: 13px;
-  line-height: 1.7;
-
-  .sign-in-btn {
-    margin-top: 16px;
-  }
-}
-</style>
diff --git a/spx-gui/src/components/ui/dialog/UIDialog.vue b/spx-gui/src/components/ui/dialog/UIDialog.vue
index 7447d572d5..5d38e1ba8b 100644
--- a/spx-gui/src/components/ui/dialog/UIDialog.vue
+++ b/spx-gui/src/components/ui/dialog/UIDialog.vue
@@ -1,6 +1,6 @@
 <template>
   <UIModal>
-    <div class="container">
+    <div class="ui-dialog-container">
       <UIIcon class="icon" :type="type" />
       <div class="main">
         <div class="title">
@@ -43,7 +43,7 @@ defineProps<{
   flex-direction: column;
 }
 
-.container {
+.ui-dialog-container {
   padding: 20px 24px 24px;
   display: flex;
   gap: 12px;
diff --git a/spx-gui/src/components/ui/modal/UIFormModal.vue b/spx-gui/src/components/ui/modal/UIFormModal.vue
index 646b60c1d5..f8bac348e3 100644
--- a/spx-gui/src/components/ui/modal/UIFormModal.vue
+++ b/spx-gui/src/components/ui/modal/UIFormModal.vue
@@ -6,7 +6,7 @@
     :mask-closable="maskClosable"
     @update:visible="handleUpdateShow"
   >
-    <div class="container">
+    <div class="ui-form-modal-container">
       <div class="header">
         <div :class="['title', { center: centerTitle }]">
           {{ title }}
@@ -64,7 +64,7 @@ const handleCloseButton = () => {
 </script>
 
 <style scoped lang="scss">
-.container {
+.ui-form-modal-container {
   flex: 1 1 0;
   display: flex;
   flex-direction: column;
diff --git a/spx-gui/src/components/ui/modal/UIFullScreenModal.vue b/spx-gui/src/components/ui/modal/UIFullScreenModal.vue
index 53fd26e703..0cc5554a96 100644
--- a/spx-gui/src/components/ui/modal/UIFullScreenModal.vue
+++ b/spx-gui/src/components/ui/modal/UIFullScreenModal.vue
@@ -50,7 +50,7 @@ useModalEsc(
       <div v-if="visible" class="ui-full-screen-modal" :style="modalTransformStyle">
         <div
           v-radar="{ name: 'Full screen modal', desc: 'A full screen modal dialog for specific purpose' }"
-          class="container"
+          class="ui-full-screen-modal-container"
         >
           <slot></slot>
         </div>
@@ -82,7 +82,7 @@ useModalEsc(
   }
 }
 
-.container {
+.ui-full-screen-modal-container {
   display: flex;
   flex-direction: column;
   height: 100vh;
diff --git a/spx-gui/src/components/ui/modal/UISearchableModal.vue b/spx-gui/src/components/ui/modal/UISearchableModal.vue
index ce789f6149..6e92e95df7 100644
--- a/spx-gui/src/components/ui/modal/UISearchableModal.vue
+++ b/spx-gui/src/components/ui/modal/UISearchableModal.vue
@@ -4,7 +4,7 @@
 
 <template>
   <UIModal :radar="radar" :visible="visible" :auto-focus="false" mask-closable @update:visible="handleUpdateShow">
-    <div class="container">
+    <div class="ui-searchable-modal-container">
       <div class="header">
         <h4 class="title">
           {{ title }}
@@ -43,7 +43,7 @@ const handleCloseButton = () => {
 </script>
 
 <style scoped lang="scss">
-.container {
+.ui-searchable-modal-container {
   display: flex;
   flex-direction: column;
 }

From f1d2554a8f3d63e1199009fada1025de9f933b21 Mon Sep 17 00:00:00 2001
From: chennan <chennan@qiniu.com>
Date: Wed, 1 Apr 2026 22:43:18 +0800
Subject: [PATCH 07/10] editor - wip

---
 docs/develop/tailwind-css-migration.md        |  25 +++
 spx-gui/AGENTS.md                             |   2 +
 spx-gui/src/app.css                           |   3 +
 .../course/management/CourseItemMini.vue      |   2 +-
 .../course/management/CourseSelector.vue      |   8 +-
 .../src/components/editor/ProjectEditor.vue   |  23 +--
 .../definition/DefinitionOverviewWrapper.vue  |  34 ++--
 .../components/editor/common/AnglePicker.vue  |  54 +------
 .../components/editor/common/EditorHeader.vue |  13 +-
 .../editor/common/EditorItemDetail.vue        |  36 +----
 .../components/editor/common/EditorList.vue   |  84 +++-------
 .../components/editor/common/PlayControl.vue  | 117 +++++++-------
 .../common/config/sprite/SpriteDirection.vue  |  20 +--
 .../common/config/sprite/SpritePhysics.vue    |   8 +-
 .../config/sprite/SpritePositionSize.vue      |  10 +-
 .../common/config/sprite/SpriteVisible.vue    |   2 -
 .../common/viewer/PositionIndicator.vue       |  28 +---
 .../quick-config/QuickConfigWrapper.vue       |   9 +-
 .../viewer/quick-config/SpriteQuickConfig.vue |   2 -
 .../viewer/quick-config/WidgetQuickConfig.vue |   2 -
 .../viewer/quick-config/common/ConfigItem.vue |  36 +----
 .../quick-config/common/ConfigPanel.vue       |  13 +-
 .../common/PositionConfigPanel.vue            |  18 +--
 .../quick-config/common/SizeConfigPanel.vue   |  16 +-
 .../common/ZorderConfigDropdown.vue           |  15 +-
 .../sprite/DefaultConfigPanel.vue             |  10 +-
 .../sprite/RotationConfigPanel.vue            |  23 +--
 .../widget/DefaultConfigPanel.vue             |  10 +-
 .../editor/map-editor/MapBasicConfig.vue      |  32 +---
 .../editor/map-editor/MapLayerSortInput.vue   |   2 -
 .../editor/map-editor/MapPhysicsInput.vue     |   2 -
 .../editor/map-editor/MapSizeInput.vue        |  10 +-
 .../editor/map-editor/SpriteBasicConfig.vue   |  66 ++------
 .../editor/map-editor/SpritesPanel.vue        |  44 +----
 .../map-editor/map-viewer/MapViewer.vue       |  36 +----
 .../components/editor/panels/ConsolePanel.vue |  93 +++++------
 .../components/editor/panels/EditorPanels.vue |  34 +---
 .../editor/panels/common/PanelFooter.vue      |  21 +--
 .../editor/panels/common/PanelHeader.vue      |  70 ++------
 .../editor/panels/sprite/SpritesPanel.vue     |  22 +--
 .../editor/panels/stage/StagePanel.vue        | 152 +++---------------
 .../preview/stage-viewer/StageViewer.vue      |  53 +++---
 .../editor/sprite/AnimationDetail.vue         |  16 +-
 .../editor/sprite/AnimationEditor.vue         |   6 -
 .../editor/sprite/AnimationRemoveModal.vue    |  15 +-
 .../editor/sprite/SpriteCollisionEditor.vue   |  32 +---
 .../sprite/SpriteCollisionEditorModal.vue     |  11 +-
 .../components/editor/sprite/SpriteList.vue   |  35 ++--
 .../sprite/animation/AnimationPlayer.vue      |  35 +---
 .../sprite/animation/AnimationSettings.vue    |  87 +++-------
 .../editor/sprite/animation/MuteSwitch.vue    |  22 +--
 .../editor/sprite/animation/SoundEditor.vue   |  41 ++---
 .../animation/state/BoundStateEditor.vue      |  59 +++----
 .../stage/backdrop/BackdropModeSelector.vue   |  18 +--
 .../editor/stage/sound/SoundDetail.vue        | 106 +++---------
 .../editor/stage/sound/SoundRecorder.vue      |  87 ++--------
 .../editor/stage/sound/VolumeSlider.vue       |  20 +--
 .../sound/waveform/WaveformRangeControl.vue   |  33 ++--
 .../sound/waveform/WaveformWithControls.vue   |  48 ++----
 .../stage/widget/detail/MonitorDetail.vue     |  98 +++--------
 60 files changed, 510 insertions(+), 1519 deletions(-)

diff --git a/docs/develop/tailwind-css-migration.md b/docs/develop/tailwind-css-migration.md
index f5b4dc5566..92d48d0e66 100644
--- a/docs/develop/tailwind-css-migration.md
+++ b/docs/develop/tailwind-css-migration.md
@@ -396,6 +396,7 @@ Token usage preference:
 
 - in Tailwind utility classes, prefer the bridged semantic tokens such as `text-text`, `text-title`, and `bg-primary-100`
 - in local CSS or SCSS rules, prefer using the original `--ui-*` variables directly, because `--ui-*` remains the source of truth and the Tailwind bridge exists primarily for utility-class authoring
+- when a Tailwind utility needs to reference a CSS custom property directly, prefer the Tailwind v4 shorthand such as `text-(--token)`, `bg-(--token)`, `border-(--token)`, or `shadow-(--token)` over older forms like `text-[var(--token)]` or `bg-[var(--token)]`
 
 Bridge naming and text-token preference:
 
@@ -529,6 +530,30 @@ Preferred style:
 - if the wrapper already owns the root layout semantics, use an outer wrapper for positioning concerns such as `absolute`, `top`, `left`, and `z-index`
 - for one-off width/height overrides on wrapper roots such as `UIIcon`, prefer inline `style` when that is the shortest and clearest way to win the cascade
 
+### 10.5. Keep Scrollbar-Reserve Padding And Its Comments In Local CSS
+
+Some scroll containers use asymmetric padding together with `scrollbar-width: thin` so optional scrollbars do not overlap content.
+
+Preferred style:
+
+- when the original local CSS includes a comment that explains scrollbar-reserve padding, keep that padding in local CSS instead of moving it fully into Tailwind utilities
+- preserve comments such as "no right padding to allow optional scrollbar" when they still describe a real layout constraint
+- this applies especially to scroll wrappers like list panels or sidebars where `padding-right: 0` is intentional rather than a generic spacing choice
+
+Rule of thumb:
+
+- if `scrollbar-width: thin` and asymmetric padding belong to the same layout constraint, keep them together in the local CSS block
+
+### 10.6. Flatten `:deep(...)` Selectors In Plain Scoped CSS
+
+When a file is migrated from SCSS to plain scoped CSS, nested `:deep(...)` forms should not be carried over mechanically.
+
+Preferred style:
+
+- in plain `<style scoped>`, write explicit flat selectors such as `.preview :deep(svg)` instead of nested forms like `.preview { :deep(svg) { ... } }`
+- be especially careful in `v-html` or raw-SVG cases, where the descendant content does not receive the component's scoped attribute and depends on the `:deep(...)` selector being compiled correctly
+- keep SCSS-style nesting only in files that still explicitly use SCSS
+
 ### 11. Keep Exact Local Values Local, With A Visible TODO
 
 Some migrated components still need exact local visual values that are not part of the current token system.
diff --git a/spx-gui/AGENTS.md b/spx-gui/AGENTS.md
index 3fb2a48229..f968cabdb6 100644
--- a/spx-gui/AGENTS.md
+++ b/spx-gui/AGENTS.md
@@ -108,6 +108,8 @@ When working with backend unique string identifiers such as `username`, project
 * Use `:style` for one-off values that are clearer inline than as Tailwind arbitrary values or custom utilities.
 * For important or non-obvious background assets, prefer TypeScript imports plus inline `backgroundImage` binding over Tailwind `bg-[url(...)]` classes.
 * Before styling `UIImg`, `UIIcon`, or similar wrappers with root-level positioning or sizing utilities, check whether the component already styles its own root element. If those internal root styles conflict, prefer an outer wrapper for layout and inline `style` for one-off width/height overrides.
+* If a scroll container keeps `scrollbar-width: thin` together with asymmetric padding to reserve optional scrollbar space, keep that padding in local CSS and preserve any existing explanatory comment instead of forcing the padding into template utilities.
+* In plain `<style scoped>`, flatten `:deep(...)` selectors such as `.preview :deep(svg)` instead of carrying over nested SCSS-style forms like `.preview { :deep(svg) { ... } }`, especially for `v-html` or injected SVG content.
 * Do not introduce setup variables for single-use style values unless they are reused, computed, or materially improve readability.
 * When a non-token visual value needs to remain exact and local, keep it local instead of forcing it into the global token bridge. Add a nearby comment such as `TODO: review this ... value` so it is visible in later design cleanup or tokenization work.
 * When extending the Tailwind theme bridge in `src/app.css`, choose token names that do not collide with Tailwind defaults or existing UI-library class names. Define text-size tokens before using named utilities like `text-24`, and use `--text-*-line-height` when a named text utility should carry a default line-height.
diff --git a/spx-gui/src/app.css b/spx-gui/src/app.css
index 77763fb95f..16b5bf6f05 100644
--- a/spx-gui/src/app.css
+++ b/spx-gui/src/app.css
@@ -195,6 +195,9 @@
   --color-dividing-line-2: var(--ui-color-dividing-line-2, #eaeff3);
   --color-border: var(--ui-color-border, #cbd2d8);
 
+  --color-black: #000;
+  --color-white: #fff;
+
   /* Typography tokens bridged from the UI token layer. */
   --font-sans: var(
     --ui-font-family-main,
diff --git a/spx-gui/src/components/course/management/CourseItemMini.vue b/spx-gui/src/components/course/management/CourseItemMini.vue
index c8952cc942..1c1e67f873 100644
--- a/spx-gui/src/components/course/management/CourseItemMini.vue
+++ b/spx-gui/src/components/course/management/CourseItemMini.vue
@@ -20,7 +20,7 @@ const thumbnailUrl = useAsyncComputedLegacy(async (onCleanup) => {
 
 <template>
   <div
-    class="course-item-mini flex items-center rounded-1 border-2 border-transparent bg-grey-50 p-2 transition-all duration-200"
+    class="flex items-center rounded-1 border-2 border-transparent bg-grey-50 p-2 transition-all duration-200"
     :class="{
       'cursor-pointer hover:bg-primary-100': interactive,
       'border-grey-400 bg-grey-100': highlighted,
diff --git a/spx-gui/src/components/course/management/CourseSelector.vue b/spx-gui/src/components/course/management/CourseSelector.vue
index 937d92436c..275c5839f3 100644
--- a/spx-gui/src/components/course/management/CourseSelector.vue
+++ b/spx-gui/src/components/course/management/CourseSelector.vue
@@ -51,16 +51,20 @@ const availableCourses = computed(() => {
             : $t({ en: 'All courses have been selected', zh: '所有课程都已选择' })
         "
       />
-      <div v-else class="flex flex-col gap-2 [&_.course-item-mini:hover_.action-icon]:text-primary-600">
+      <div v-else class="flex flex-col gap-2">
         <CourseItemMini
           v-for="course in availableCourses"
           :key="course.id"
           :course="course"
           interactive
+          class="group"
           @click="emit('select', course.id)"
         >
           <template #suffix>
-            <UIIcon class="action-icon shrink-0 text-grey-400 transition-colors duration-200" type="plus" />
+            <UIIcon
+              class="shrink-0 text-grey-400 transition-colors duration-200 group-hover:text-primary-600"
+              type="plus"
+            />
           </template>
         </CourseItemMini>
       </div>
diff --git a/spx-gui/src/components/editor/ProjectEditor.vue b/spx-gui/src/components/editor/ProjectEditor.vue
index 5e13274e93..c487d7310c 100644
--- a/spx-gui/src/components/editor/ProjectEditor.vue
+++ b/spx-gui/src/components/editor/ProjectEditor.vue
@@ -1,9 +1,10 @@
 <template>
   <!-- Using v-show preserves some page states, e.g. code editor scroll pos -->
+  <!-- overflow-visible: avoid cutting dropdown menu of CodeTextEditor (monaco) -->
   <UICard
     v-show="isPreviewMode"
     v-radar="{ name: `Editor for ${selected.type}`, desc: `Main editor panel for editing ${selected.type}` }"
-    class="main"
+    class="relative flex min-w-0 flex-[1_1_0] flex-col overflow-visible!"
   >
     <!--
       TODO: optimize performance for switching between editors, which corresponds to selection change.
@@ -21,7 +22,7 @@
     <StageEditor v-else-if="selected.type === 'stage'" :stage="project.stage" :state="editorCtx.state.stageState" />
     <EditorPlaceholder v-else />
   </UICard>
-  <div v-show="isPreviewMode" class="sider">
+  <div v-show="isPreviewMode" class="flex min-w-0 shrink-0 grow-0 basis-[496px] flex-col gap-middle">
     <EditorPreview />
     <EditorPanels />
   </div>
@@ -55,21 +56,3 @@ function handleSpriteSelect(spriteId: string | null) {
   editorCtx.state.selectSprite(spriteId)
 }
 </script>
-
-<style scoped lang="scss">
-.main {
-  position: relative;
-  flex: 1 1 0;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  overflow: visible; // avoid cutting dropdown menu of CodeTextEditor (monaco)
-}
-.sider {
-  flex: 0 0 496px;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  gap: var(--ui-gap-middle);
-}
-</style>
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/definition/DefinitionOverviewWrapper.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/definition/DefinitionOverviewWrapper.vue
index 3b88d749be..53ae32f469 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/definition/DefinitionOverviewWrapper.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/definition/DefinitionOverviewWrapper.vue
@@ -9,30 +9,22 @@ defineProps<{
 </script>
 
 <template>
-  <div class="definition-overview-wrapper">
-    <CodeView class="code" mode="inline" :inlay-hints="inlayHints"><slot></slot></CodeView>
+  <div class="flex text-12/[1.75] text-title">
+    <CodeView class="def-overview-code" mode="inline" :inlay-hints="inlayHints"><slot></slot></CodeView>
   </div>
 </template>
 
-<style lang="scss" scoped>
-.definition-overview-wrapper {
-  display: flex;
-  color: var(--ui-color-title);
+<style scoped>
+.def-overview-code {
+  flex: 1 1 0;
+  word-break: break-word;
 
-  font-size: 12px;
-  line-height: 1.75;
-
-  .code {
-    flex: 1 1 0;
-    word-break: break-word;
-
-    // Clear style from `code` in `MarkdownView`
-    font-size: inherit;
-    line-height: inherit;
-    padding: 0;
-    border-radius: 0;
-    border: none;
-    background: none;
-  }
+  /* Clear style from `code` in `MarkdownView`. */
+  font-size: inherit;
+  line-height: inherit;
+  padding: 0;
+  border-radius: 0;
+  border: none;
+  background: none;
 }
 </style>
diff --git a/spx-gui/src/components/editor/common/AnglePicker.vue b/spx-gui/src/components/editor/common/AnglePicker.vue
index 620f0721bc..0d200c3987 100644
--- a/spx-gui/src/components/editor/common/AnglePicker.vue
+++ b/spx-gui/src/components/editor/common/AnglePicker.vue
@@ -30,11 +30,16 @@ watch(angle, (v) => (modelValue.value = normalizeDegree(v)))
 </script>
 
 <template>
-  <div class="angle-picker">
+  <div class="grid grid-cols-[1fr_max-content_1fr] content-center justify-center text-center">
     <UITag
       v-for="direction in specialDirections"
       :key="direction.name"
-      :class="[direction.name.toLowerCase()]"
+      :class="{
+        'col-start-2 row-start-1 justify-self-center': direction.name.toLowerCase() === 'up',
+        'col-start-2 row-start-3 justify-self-center': direction.name.toLowerCase() === 'down',
+        'col-start-1 row-start-2 self-center justify-self-end': direction.name.toLowerCase() === 'left',
+        'col-start-3 row-start-2 self-center': direction.name.toLowerCase() === 'right'
+      }"
       :checkable="{ checked: modelValue === direction.value }"
       variant="none"
       @click="modelValue = direction.value"
@@ -42,7 +47,7 @@ watch(angle, (v) => (modelValue.value = normalizeDegree(v)))
     >
     <svg
       ref="svgEl"
-      class="picker"
+      class="col-start-2 row-start-2 m-1 self-center justify-self-center"
       width="140"
       height="140"
       viewBox="0 0 140 140"
@@ -122,46 +127,3 @@ watch(angle, (v) => (modelValue.value = normalizeDegree(v)))
     </svg>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.angle-picker {
-  display: grid;
-  grid-template-columns: 1fr max-content 1fr;
-  justify-content: center;
-  align-content: center;
-  text-align: center;
-}
-
-.picker {
-  grid-column: 2;
-  grid-row: 2;
-  margin: 4px;
-  justify-self: center;
-  align-self: center;
-}
-
-.up {
-  grid-column: 2;
-  grid-row: 1;
-  justify-self: center;
-}
-
-.down {
-  grid-column: 2;
-  grid-row: 3;
-  justify-self: center;
-}
-
-.left {
-  grid-column: 1;
-  grid-row: 2;
-  align-self: center;
-  justify-self: right;
-}
-
-.right {
-  grid-column: 3;
-  grid-row: 2;
-  align-self: center;
-}
-</style>
diff --git a/spx-gui/src/components/editor/common/EditorHeader.vue b/spx-gui/src/components/editor/common/EditorHeader.vue
index f0632a70b2..32ed86df0c 100644
--- a/spx-gui/src/components/editor/common/EditorHeader.vue
+++ b/spx-gui/src/components/editor/common/EditorHeader.vue
@@ -1,21 +1,10 @@
 <!-- Header for Sprite/Sound/Stage Editor -->
 
 <template>
-  <div class="editor-header">
+  <div class="flex h-11 items-center justify-between border-b border-grey-400 pr-middle">
     <slot></slot>
     <div class="extra">
       <slot name="extra"></slot>
     </div>
   </div>
 </template>
-
-<style scoped lang="scss">
-.editor-header {
-  height: 44px;
-  display: flex;
-  padding-right: var(--ui-gap-middle);
-  justify-content: space-between;
-  align-items: center;
-  border-bottom: 1px solid var(--ui-color-grey-400);
-}
-</style>
diff --git a/spx-gui/src/components/editor/common/EditorItemDetail.vue b/spx-gui/src/components/editor/common/EditorItemDetail.vue
index ac5a598fe9..55723c9d03 100644
--- a/spx-gui/src/components/editor/common/EditorItemDetail.vue
+++ b/spx-gui/src/components/editor/common/EditorItemDetail.vue
@@ -1,13 +1,13 @@
 <template>
   <main
     v-radar="{ name: `Detail for \u0022${name}\u0022`, desc: `Detail view of the selected item \u0022${name}\u0022` }"
-    class="editor-item-detail"
+    class="flex-[1_1_0] flex flex-col gap-5 rounded-br-3 bg-grey-200 px-5 py-6"
   >
-    <h4 class="name">
+    <h4 class="flex items-center justify-center gap-1">
       <AssetName>{{ name }}</AssetName>
       <UIIcon
         v-radar="{ name: 'Rename button', desc: 'Click to rename the selected item' }"
-        class="edit-icon"
+        class="cursor-pointer text-grey-900 transition-colors hover:text-grey-800 active:text-grey-1000"
         :title="$t({ en: 'Rename', zh: '重命名' })"
         type="edit"
         @click="emit('rename')"
@@ -29,33 +29,3 @@ const emit = defineEmits<{
   rename: []
 }>()
 </script>
-
-<style lang="scss" scoped>
-.editor-item-detail {
-  flex: 1 1 0;
-  padding: 24px 20px;
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-  background-color: var(--ui-color-grey-200);
-  border-bottom-right-radius: var(--ui-border-radius-3);
-}
-
-.name {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-}
-
-.edit-icon {
-  cursor: pointer;
-  color: var(--ui-color-grey-900);
-  &:hover {
-    color: var(--ui-color-grey-800);
-  }
-  &:active {
-    color: var(--ui-color-grey-1000);
-  }
-}
-</style>
diff --git a/spx-gui/src/components/editor/common/EditorList.vue b/spx-gui/src/components/editor/common/EditorList.vue
index c6aa21e0f3..b0d3d408ce 100644
--- a/spx-gui/src/components/editor/common/EditorList.vue
+++ b/spx-gui/src/components/editor/common/EditorList.vue
@@ -1,7 +1,11 @@
 <template>
-  <div class="editor-list" :style="cssVars">
-    <div class="sider">
-      <div ref="itemsWrapper" v-radar="listRadarInfo" class="items">
+  <div class="flex-[1_1_0] flex" :style="cssVars">
+    <div class="flex-[0_0_auto] flex flex-col border-r border-dividing-line-2">
+      <div
+        ref="itemsWrapper"
+        v-radar="listRadarInfo"
+        class="items mx-1.5 flex-[1_1_0] flex flex-col gap-2 overflow-y-auto"
+      >
         <slot></slot>
       </div>
       <UIDropdownWithTooltip>
@@ -12,7 +16,10 @@
           {{ $t(addText) }}
         </template>
         <template #trigger>
-          <button v-radar="addButtonRadarInfo" class="add">
+          <button
+            v-radar="addButtonRadarInfo"
+            class="relative z-1 h-11 flex-[0_0_auto] cursor-pointer flex items-center justify-center rounded-bl-3 border-none bg-(--editor-list-color-main) text-grey-100 hover:bg-(--editor-list-color-400) active:bg-(--editor-list-color-600)"
+          >
             <UIIcon type="plus" />
           </button>
         </template>
@@ -78,66 +85,23 @@ useDragSortable(sortableList, itemsWrapper, {
 })
 </script>
 
-<style scoped lang="scss">
-.editor-list {
-  flex: 1 1 0;
-  display: flex;
-  justify-content: stretch;
-}
-
-.sider {
-  flex: 0 0 auto;
-  display: flex;
-  flex-direction: column;
-  border-right: 1px solid var(--ui-color-dividing-line-2);
-}
-
+<style scoped>
 .items {
-  flex: 1 1 0;
-  overflow-y: auto;
-  margin: 0 6px;
-  // Here we keep the horizontal padding no more than `10px`,
-  // as SortableJS uses `10` as `spacer` when deciding whether to put dragging item to the end of the list.
-  // Padding no more than `10px` disables the `_ghostIsLast` check.
-  // See details in https://github.com/SortableJS/Sortable/blob/ddd059717333d07b5b1125b7e1dc89514734bcf0/src/Sortable.js#L1822
+  /* Here we keep the horizontal padding no more than `10px`, */
+  /* as SortableJS uses `10` as `spacer` when deciding whether to put dragging item to the end of the list. */
+  /* Padding no more than `10px` disables the `_ghostIsLast` check. */
+  /* See details in https://github.com/SortableJS/Sortable/blob/ddd059717333d07b5b1125b7e1dc89514734bcf0/src/Sortable.js#L1822 */
   padding: 12px 10px;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-
-  :deep(.sortable-ghost-item) {
-    // Shadow-like effect
-    // TODO: Use other tools like svg-filter to achieve shadow-like effect, to avoid coupling here with `UIBlockItem`
-    border-color: var(--ui-color-grey-400) !important;
-    background-color: var(--ui-color-grey-400) !important;
-    * {
-      visibility: hidden;
-    }
-  }
 }
 
-.add {
-  flex: 0 0 auto;
-  justify-self: stretch;
-  height: 44px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: none;
-  border-bottom-left-radius: var(--ui-border-radius-3);
-  cursor: pointer;
-  color: var(--ui-color-grey-100);
-  background: var(--editor-list-color-main);
-
-  // ensure the button's outline not covered by detail content on the right side
-  position: relative;
-  z-index: 1;
+.items:deep(.sortable-ghost-item) {
+  /* Shadow-like effect */
+  /* TODO: Use other tools like svg-filter to achieve shadow-like effect, to avoid coupling here with `UIBlockItem` */
+  border-color: var(--ui-color-grey-400) !important;
+  background-color: var(--ui-color-grey-400) !important;
+}
 
-  &:hover {
-    background: var(--editor-list-color-400);
-  }
-  &:active {
-    background: var(--editor-list-color-600);
-  }
+.items:deep(.sortable-ghost-item *) {
+  visibility: hidden;
 }
 </style>
diff --git a/spx-gui/src/components/editor/common/PlayControl.vue b/spx-gui/src/components/editor/common/PlayControl.vue
index dc2a76e89e..f1e44c6483 100644
--- a/spx-gui/src/components/editor/common/PlayControl.vue
+++ b/spx-gui/src/components/editor/common/PlayControl.vue
@@ -1,19 +1,19 @@
 <!-- Sound / video play control (only UI) -->
 
 <template>
-  <div class="play-control" :class="[`container-size-${props.size}`]" :style="colorCssVars">
-    <div v-show="!playing" class="play" @click.stop="handlePlay.fn">
-      <UIIcon class="icon" type="play" />
+  <div class="play-control" :class="[`play-control--${props.size}`]" :style="colorCssVars">
+    <div v-show="!playing" class="play-control-play" @click.stop="handlePlay.fn">
+      <UIIcon type="play" class="play-control-icon" />
     </div>
-    <div v-show="playing" class="stop" @click.stop="emit('stop')">
+    <div v-show="playing" class="play-control-stop" @click.stop="emit('stop')">
       <svg viewBox="0 0 36 36" class="progress" :style="playCssVars">
         <circle class="bg"></circle>
         <circle class="fg"></circle>
       </svg>
-      <UIIcon class="icon" type="stop" />
+      <UIIcon type="stop" class="play-control-icon" />
     </div>
     <!-- TODO: style optimization for play control -->
-    <UILoading :visible="loading" cover class="loading" />
+    <UILoading :visible="loading" cover class="play-control-loading" />
   </div>
 </template>
 
@@ -75,58 +75,65 @@ const colorCssVars = computed(() => {
 })
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 .play-control {
   position: relative;
+}
 
-  &.container-size-medium {
-    width: 36px;
-    height: 36px;
-  }
+.play-control--medium {
+  width: 36px;
+  height: 36px;
+}
 
-  &.container-size-large {
-    width: 48px;
-    height: 48px;
-    .icon {
-      width: 20px;
-      height: 20px;
-    }
-  }
+.play-control--large {
+  width: 48px;
+  height: 48px;
 }
 
-.play,
-.stop {
+.play-control-play,
+.play-control-stop {
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
-
   border-radius: 50%;
   cursor: pointer;
-
   transition: transform 0.2s;
   --color: var(--color-main);
-  &:hover {
-    transform: scale(1.15);
-    --color: var(--color-400);
-  }
-  &:active {
-    transform: scale(1.15);
-    --color: var(--color-600);
-  }
 }
 
-.play {
+.play-control-play:hover,
+.play-control-stop:hover {
+  transform: scale(1.15);
+  --color: var(--color-400);
+}
+
+.play-control-play:active,
+.play-control-stop:active {
+  transform: scale(1.15);
+  --color: var(--color-600);
+}
+
+.play-control-play {
   color: var(--ui-color-grey-100);
   background-color: var(--color);
 }
 
-.stop {
-  position: relative;
+.play-control-stop {
   color: var(--color);
 }
 
+.play-control-icon {
+  width: 16px;
+  height: 16px;
+}
+
+.play-control--large .play-control-icon {
+  width: 20px;
+  height: 20px;
+}
+
 .progress {
   position: absolute;
   width: 100%;
@@ -137,30 +144,30 @@ const colorCssVars = computed(() => {
   --radius: calc((var(--size) - var(--stroke-width)) / 2);
   --circumference: calc(var(--radius) * pi * 2);
   --dash: calc((var(--progress) * var(--circumference)));
+}
 
-  circle {
-    cx: var(--half-size);
-    cy: var(--half-size);
-    r: var(--radius);
-    stroke-width: var(--stroke-width);
-    fill: none;
-    stroke-linecap: round;
-
-    &.bg {
-      stroke: var(--color-300);
-    }
-
-    &.fg {
-      transform: rotate(-90deg);
-      transform-origin: var(--half-size) var(--half-size);
-      stroke-dasharray: var(--dash) calc(var(--circumference) - var(--dash));
-      transition: stroke-dasharray var(--progress-interval) linear 0s;
-      stroke: var(--color);
-    }
-  }
+.progress circle {
+  cx: var(--half-size);
+  cy: var(--half-size);
+  r: var(--radius);
+  stroke-width: var(--stroke-width);
+  fill: none;
+  stroke-linecap: round;
+}
+
+.progress circle.bg {
+  stroke: var(--color-300);
+}
+
+.progress circle.fg {
+  transform: rotate(-90deg);
+  transform-origin: var(--half-size) var(--half-size);
+  stroke-dasharray: var(--dash) calc(var(--circumference) - var(--dash));
+  transition: stroke-dasharray var(--progress-interval) linear 0s;
+  stroke: var(--color);
 }
 
-.loading {
+.play-control-loading {
   border-radius: 50%;
 }
 </style>
diff --git a/spx-gui/src/components/editor/common/config/sprite/SpriteDirection.vue b/spx-gui/src/components/editor/common/config/sprite/SpriteDirection.vue
index 5be4eba7e4..c75b5fb4c4 100644
--- a/spx-gui/src/components/editor/common/config/sprite/SpriteDirection.vue
+++ b/spx-gui/src/components/editor/common/config/sprite/SpriteDirection.vue
@@ -61,7 +61,7 @@ const handleHeadingUpdate = wrapUpdateHandler(
 
 <!-- eslint-disable vue/no-v-html -->
 <template>
-  <div class="content">
+  <div class="flex items-center gap-3">
     <UIButtonGroup
       v-radar="{ name: 'Rotation style control', desc: 'Control to set sprite rotation style' }"
       :value="sprite.rotationStyle"
@@ -113,7 +113,7 @@ const handleHeadingUpdate = wrapUpdateHandler(
           <template #prefix>{{ $t({ en: 'Heading', zh: '朝向' }) }}</template>
         </UINumberInput>
       </template>
-      <div class="rotation-heading-container">
+      <div class="flex flex-col items-center gap-3 p-3">
         <AnglePicker :model-value="sprite.heading" @update:model-value="handleHeadingUpdate" />
       </div>
     </UIDropdown>
@@ -133,19 +133,3 @@ const handleHeadingUpdate = wrapUpdateHandler(
     </UIButtonGroup>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.content {
-  display: flex;
-  gap: 12px;
-  align-items: center;
-}
-
-.rotation-heading-container {
-  padding: 12px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 12px;
-}
-</style>
diff --git a/spx-gui/src/components/editor/common/config/sprite/SpritePhysics.vue b/spx-gui/src/components/editor/common/config/sprite/SpritePhysics.vue
index 466b92ed3d..aba9e0a580 100644
--- a/spx-gui/src/components/editor/common/config/sprite/SpritePhysics.vue
+++ b/spx-gui/src/components/editor/common/config/sprite/SpritePhysics.vue
@@ -90,7 +90,7 @@ function getCheckedPhysicsFlags(physicsMode: PhysicsMode): PhysicsFlag[] {
 </script>
 
 <template>
-  <UICheckboxGroup class="check-group" :value="checkedPhysicsFlags" @update:value="handlePhysicsFlagsChange">
+  <UICheckboxGroup class="whitespace-nowrap" :value="checkedPhysicsFlags" @update:value="handlePhysicsFlagsChange">
     <UITooltip>
       <template #trigger>
         <UICheckbox
@@ -139,9 +139,3 @@ function getCheckedPhysicsFlags(physicsMode: PhysicsMode): PhysicsFlag[] {
     </UITooltip>
   </UICheckboxGroup>
 </template>
-
-<style lang="scss" scoped>
-.check-group {
-  white-space: nowrap;
-}
-</style>
diff --git a/spx-gui/src/components/editor/common/config/sprite/SpritePositionSize.vue b/spx-gui/src/components/editor/common/config/sprite/SpritePositionSize.vue
index b5c766eee0..43bed64dc3 100644
--- a/spx-gui/src/components/editor/common/config/sprite/SpritePositionSize.vue
+++ b/spx-gui/src/components/editor/common/config/sprite/SpritePositionSize.vue
@@ -35,7 +35,7 @@ const handleSizePercentUpdate = wrapUpdateHandler((sizeInPercent: number | null)
 </script>
 
 <template>
-  <div class="content">
+  <div class="flex items-center gap-3">
     <UINumberInput
       v-radar="{ name: 'X position input', desc: 'Input to set sprite X position' }"
       :value="sprite.x"
@@ -61,11 +61,3 @@ const handleSizePercentUpdate = wrapUpdateHandler((sizeInPercent: number | null)
     </UINumberInput>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.content {
-  display: flex;
-  gap: 12px;
-  align-items: center;
-}
-</style>
diff --git a/spx-gui/src/components/editor/common/config/sprite/SpriteVisible.vue b/spx-gui/src/components/editor/common/config/sprite/SpriteVisible.vue
index bb3c585f79..728a2e075e 100644
--- a/spx-gui/src/components/editor/common/config/sprite/SpriteVisible.vue
+++ b/spx-gui/src/components/editor/common/config/sprite/SpriteVisible.vue
@@ -39,5 +39,3 @@ const handleVisibleUpdate = wrapUpdateHandler(
     </UIButtonGroupItem>
   </UIButtonGroup>
 </template>
-
-<style lang="scss" scoped></style>
diff --git a/spx-gui/src/components/editor/common/viewer/PositionIndicator.vue b/spx-gui/src/components/editor/common/viewer/PositionIndicator.vue
index 95c83b6e9a..3cdc74594d 100644
--- a/spx-gui/src/components/editor/common/viewer/PositionIndicator.vue
+++ b/spx-gui/src/components/editor/common/viewer/PositionIndicator.vue
@@ -26,26 +26,10 @@ watch(
 </script>
 
 <template>
-  <div class="position-indicator" :class="{ visible }">{{ position?.x ?? 0 }}, {{ position?.y ?? 0 }}</div>
+  <div
+    class="pointer-events-none absolute top-2 left-1/2 rounded-[4px] bg-black/30 px-1.5 py-0.5 text-12 text-white transition-opacity -translate-x-1/2"
+    :class="visible ? 'opacity-100' : 'opacity-0'"
+  >
+    {{ position?.x ?? 0 }}, {{ position?.y ?? 0 }}
+  </div>
 </template>
-
-<style lang="scss" scoped>
-.position-indicator {
-  position: absolute;
-  top: 8px;
-  left: 50%;
-  transform: translateX(-50%);
-  padding: 2px 6px;
-  background: rgba(0, 0, 0, 0.3);
-  color: white;
-  font-size: 12px;
-  border-radius: 4px;
-  pointer-events: none;
-
-  transition: opacity 0.2s;
-  opacity: 0;
-  &.visible {
-    opacity: 1;
-  }
-}
-</style>
diff --git a/spx-gui/src/components/editor/common/viewer/quick-config/QuickConfigWrapper.vue b/spx-gui/src/components/editor/common/viewer/quick-config/QuickConfigWrapper.vue
index 1c89ab77f8..03aae2e9f9 100644
--- a/spx-gui/src/components/editor/common/viewer/quick-config/QuickConfigWrapper.vue
+++ b/spx-gui/src/components/editor/common/viewer/quick-config/QuickConfigWrapper.vue
@@ -97,7 +97,7 @@ onBeforeUnmount(() => clearTimeout(timer))
 <template>
   <div
     ref="quickConfigRef"
-    class="quick-config"
+    class="p-1"
     @focusin="handleInteractionStart"
     @focusout="handleInteractionEnd"
     @mouseenter="handleInteractionStart"
@@ -106,10 +106,3 @@ onBeforeUnmount(() => clearTimeout(timer))
     <slot></slot>
   </div>
 </template>
-
-<style lang="scss">
-.quick-config {
-  position: absolute;
-  padding: 4px;
-}
-</style>
diff --git a/spx-gui/src/components/editor/common/viewer/quick-config/SpriteQuickConfig.vue b/spx-gui/src/components/editor/common/viewer/quick-config/SpriteQuickConfig.vue
index cb1229d5cc..76a43ba67c 100644
--- a/spx-gui/src/components/editor/common/viewer/quick-config/SpriteQuickConfig.vue
+++ b/spx-gui/src/components/editor/common/viewer/quick-config/SpriteQuickConfig.vue
@@ -37,5 +37,3 @@ function backToDefault() {
   />
   <DefaultConfigPanel v-else-if="configType === 'default'" :local-config="localConfig" :project="project" />
 </template>
-
-<style lang="scss" scoped></style>
diff --git a/spx-gui/src/components/editor/common/viewer/quick-config/WidgetQuickConfig.vue b/spx-gui/src/components/editor/common/viewer/quick-config/WidgetQuickConfig.vue
index 89206f7cd6..98879e017a 100644
--- a/spx-gui/src/components/editor/common/viewer/quick-config/WidgetQuickConfig.vue
+++ b/spx-gui/src/components/editor/common/viewer/quick-config/WidgetQuickConfig.vue
@@ -35,5 +35,3 @@ function backToDefault() {
   />
   <DefaultConfigPanel v-else-if="configType === 'default'" :local-config="localConfig" :project="project" />
 </template>
-
-<style lang="scss" scoped></style>
diff --git a/spx-gui/src/components/editor/common/viewer/quick-config/common/ConfigItem.vue b/spx-gui/src/components/editor/common/viewer/quick-config/common/ConfigItem.vue
index b4bb3e22f3..7fa9487da6 100644
--- a/spx-gui/src/components/editor/common/viewer/quick-config/common/ConfigItem.vue
+++ b/spx-gui/src/components/editor/common/viewer/quick-config/common/ConfigItem.vue
@@ -8,34 +8,14 @@ const slots = useSlots()
 </script>
 
 <template>
-  <div class="config-item">
-    <UIIcon v-if="slots.default == null && icon != null" class="icon" :type="icon" />
+  <div
+    class="group flex h-8 w-8 cursor-pointer items-center justify-center rounded-[10px] text-center hover:bg-turquoise-200 [&.active]:bg-turquoise-200"
+  >
+    <UIIcon
+      v-if="slots.default == null && icon != null"
+      class="text-grey-1000 group-hover:text-turquoise-500 group-[.active]:text-turquoise-500"
+      :type="icon"
+    />
     <slot v-else></slot>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.config-item {
-  width: 32px;
-  height: 32px;
-  text-align: center;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 10px;
-  cursor: pointer;
-
-  .icon {
-    color: var(--ui-color-grey-1000);
-  }
-
-  &:hover,
-  &.active {
-    background: var(--ui-color-turquoise-200);
-
-    .icon {
-      color: var(--ui-color-turquoise-500);
-    }
-  }
-}
-</style>
diff --git a/spx-gui/src/components/editor/common/viewer/quick-config/common/ConfigPanel.vue b/spx-gui/src/components/editor/common/viewer/quick-config/common/ConfigPanel.vue
index 6280dd3842..1d0d65939b 100644
--- a/spx-gui/src/components/editor/common/viewer/quick-config/common/ConfigPanel.vue
+++ b/spx-gui/src/components/editor/common/viewer/quick-config/common/ConfigPanel.vue
@@ -1,18 +1,7 @@
 <script lang="ts" setup></script>
 
 <template>
-  <div class="config-panel">
+  <div class="h-9 w-fit rounded-2 border-2 border-grey-100 bg-grey-100 shadow-big">
     <slot></slot>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.config-panel {
-  width: fit-content;
-  height: 36px;
-  border: 2px solid var(--ui-color-grey-100);
-  border-radius: var(--ui-border-radius-2);
-  background: var(--ui-color-grey-100);
-  box-shadow: var(--ui-box-shadow-big);
-}
-</style>
diff --git a/spx-gui/src/components/editor/common/viewer/quick-config/common/PositionConfigPanel.vue b/spx-gui/src/components/editor/common/viewer/quick-config/common/PositionConfigPanel.vue
index a4b96f14d3..fd2fd76c3f 100644
--- a/spx-gui/src/components/editor/common/viewer/quick-config/common/PositionConfigPanel.vue
+++ b/spx-gui/src/components/editor/common/viewer/quick-config/common/PositionConfigPanel.vue
@@ -32,10 +32,10 @@ onBeforeUnmount(() => {
 
 <template>
   <ConfigPanel>
-    <div class="position-config-wrapper">
+    <div class="flex items-center gap-1">
       <UINumberInput
         v-radar="{ name: 'X position input', desc: `Input to set ${name} X position` }"
-        class="position-input"
+        class="w-18"
         :value="localConfig.x"
         @update:value="handleUpdateX($event ?? 0)"
       >
@@ -43,7 +43,7 @@ onBeforeUnmount(() => {
       </UINumberInput>
       <UINumberInput
         v-radar="{ name: 'Y position input', desc: `Input to set ${name} Y position` }"
-        class="position-input"
+        class="w-18"
         :value="localConfig.y"
         @update:value="handleUpdateY($event ?? 0)"
       >
@@ -59,15 +59,3 @@ onBeforeUnmount(() => {
     </div>
   </ConfigPanel>
 </template>
-
-<style lang="scss" scoped>
-.position-config-wrapper {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.position-input {
-  width: 72px;
-}
-</style>
diff --git a/spx-gui/src/components/editor/common/viewer/quick-config/common/SizeConfigPanel.vue b/spx-gui/src/components/editor/common/viewer/quick-config/common/SizeConfigPanel.vue
index 954eee00ba..8e841872ea 100644
--- a/spx-gui/src/components/editor/common/viewer/quick-config/common/SizeConfigPanel.vue
+++ b/spx-gui/src/components/editor/common/viewer/quick-config/common/SizeConfigPanel.vue
@@ -27,10 +27,10 @@ onBeforeUnmount(() => handleSizePercentUpdate.cancel())
 
 <template>
   <ConfigPanel>
-    <div class="size-config-wrapper">
+    <div class="flex items-center gap-1">
       <UINumberInput
         v-radar="{ name: 'Size input', desc: `Input to set ${name} size percentage` }"
-        class="size-input"
+        class="w-25.5"
         :min="0"
         :value="round(localConfig.size * 100)"
         @update:value="handleSizePercentUpdate"
@@ -48,15 +48,3 @@ onBeforeUnmount(() => handleSizePercentUpdate.cancel())
     </div>
   </ConfigPanel>
 </template>
-
-<style lang="scss" scoped>
-.size-config-wrapper {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.size-input {
-  width: 102px;
-}
-</style>
diff --git a/spx-gui/src/components/editor/common/viewer/quick-config/common/ZorderConfigDropdown.vue b/spx-gui/src/components/editor/common/viewer/quick-config/common/ZorderConfigDropdown.vue
index adba8a8aa9..4496cdb2ba 100644
--- a/spx-gui/src/components/editor/common/viewer/quick-config/common/ZorderConfigDropdown.vue
+++ b/spx-gui/src/components/editor/common/viewer/quick-config/common/ZorderConfigDropdown.vue
@@ -30,35 +30,28 @@ function moveZorder(action: MoveAction) {
     <UIMenu>
       <UIMenuItem
         v-radar="{ name: 'Move up', desc: `Click to move ${type} up in z-order` }"
-        class="item"
+        class="w-full whitespace-nowrap"
         @click="moveZorder('up')"
         >{{ $t(moveActionNames.up) }}</UIMenuItem
       >
       <UIMenuItem
         v-radar="{ name: 'Move to top', desc: `Click to move ${type} to top in z-order` }"
-        class="item"
+        class="w-full whitespace-nowrap"
         @click="moveZorder('top')"
         >{{ $t(moveActionNames.top) }}</UIMenuItem
       >
       <UIMenuItem
         v-radar="{ name: 'Move down', desc: `Click to move ${type} down in z-order` }"
-        class="item"
+        class="w-full whitespace-nowrap"
         @click="moveZorder('down')"
         >{{ $t(moveActionNames.down) }}</UIMenuItem
       >
       <UIMenuItem
         v-radar="{ name: 'Move to bottom', desc: `Click to move ${type} to bottom in z-order` }"
-        class="item"
+        class="w-full whitespace-nowrap"
         @click="moveZorder('bottom')"
         >{{ $t(moveActionNames.bottom) }}</UIMenuItem
       >
     </UIMenu>
   </UIDropdown>
 </template>
-
-<style lang="scss" scoped>
-.item {
-  width: 100%;
-  white-space: nowrap;
-}
-</style>
diff --git a/spx-gui/src/components/editor/common/viewer/quick-config/sprite/DefaultConfigPanel.vue b/spx-gui/src/components/editor/common/viewer/quick-config/sprite/DefaultConfigPanel.vue
index d7b9f0aede..c7c6e25d97 100644
--- a/spx-gui/src/components/editor/common/viewer/quick-config/sprite/DefaultConfigPanel.vue
+++ b/spx-gui/src/components/editor/common/viewer/quick-config/sprite/DefaultConfigPanel.vue
@@ -43,7 +43,7 @@ async function moveZorder(direction: MoveAction) {
       desc: 'Quick config for sprite position, rotation, size and layer order'
     }"
   >
-    <div class="default-config-wrapper">
+    <div class="flex items-center gap-1">
       <UITooltip>
         {{ $t({ en: 'Position', zh: '位置' }) }}
         <template #trigger>
@@ -73,11 +73,3 @@ async function moveZorder(direction: MoveAction) {
     </div>
   </ConfigPanel>
 </template>
-
-<style lang="scss" scoped>
-.default-config-wrapper {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-</style>
diff --git a/spx-gui/src/components/editor/common/viewer/quick-config/sprite/RotationConfigPanel.vue b/spx-gui/src/components/editor/common/viewer/quick-config/sprite/RotationConfigPanel.vue
index 1382796504..6335b84e1d 100644
--- a/spx-gui/src/components/editor/common/viewer/quick-config/sprite/RotationConfigPanel.vue
+++ b/spx-gui/src/components/editor/common/viewer/quick-config/sprite/RotationConfigPanel.vue
@@ -86,7 +86,7 @@ onBeforeUnmount(() => handleUpdateHeadingDebounced.cancel())
       desc: 'Quick config for sprite rotation style and values'
     }"
   >
-    <div class="rotation-config-wrapper">
+    <div class="flex items-center gap-1">
       <UIButtonGroup
         v-radar="{ name: 'Rotation style control', desc: 'Control to set sprite rotation style' }"
         :value="localConfig.rotationStyle"
@@ -111,7 +111,7 @@ onBeforeUnmount(() => handleUpdateHeadingDebounced.cancel())
         <template #trigger>
           <UINumberInput
             v-radar="{ name: 'Heading input', desc: 'Input to set sprite heading angle' }"
-            class="heading-input"
+            class="w-30"
             :min="-180"
             :max="180"
             :value="localConfig.heading"
@@ -121,7 +121,7 @@ onBeforeUnmount(() => handleUpdateHeadingDebounced.cancel())
             <template #prefix>{{ $t({ en: 'Heading', zh: '朝向' }) }}</template>
           </UINumberInput>
         </template>
-        <div class="heading-picker-container">
+        <div class="w-max p-3">
           <AnglePicker
             :model-value="localConfig.heading"
             @update:model-value="handleUpdateHeadingDebounced($event ?? 0)"
@@ -152,20 +152,3 @@ onBeforeUnmount(() => handleUpdateHeadingDebounced.cancel())
     </div>
   </ConfigPanel>
 </template>
-
-<style lang="scss" scoped>
-.rotation-config-wrapper {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.heading-input {
-  width: 120px;
-}
-
-.heading-picker-container {
-  padding: 12px;
-  width: max-content;
-}
-</style>
diff --git a/spx-gui/src/components/editor/common/viewer/quick-config/widget/DefaultConfigPanel.vue b/spx-gui/src/components/editor/common/viewer/quick-config/widget/DefaultConfigPanel.vue
index 8616885cda..fcdb0dd297 100644
--- a/spx-gui/src/components/editor/common/viewer/quick-config/widget/DefaultConfigPanel.vue
+++ b/spx-gui/src/components/editor/common/viewer/quick-config/widget/DefaultConfigPanel.vue
@@ -40,7 +40,7 @@ async function moveZorder(direction: MoveAction) {
   <ConfigPanel
     v-radar="{ name: 'Widget Quick Config Panel', desc: 'Quick config for widget position, size and layer order' }"
   >
-    <div class="default-config-wrapper">
+    <div class="flex items-center gap-1">
       <UITooltip>
         {{ $t({ en: 'Position', zh: '位置' }) }}
         <template #trigger>
@@ -64,11 +64,3 @@ async function moveZorder(direction: MoveAction) {
     </div>
   </ConfigPanel>
 </template>
-
-<style lang="scss" scoped>
-.default-config-wrapper {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-</style>
diff --git a/spx-gui/src/components/editor/map-editor/MapBasicConfig.vue b/spx-gui/src/components/editor/map-editor/MapBasicConfig.vue
index 29ae24f044..ab67c82565 100644
--- a/spx-gui/src/components/editor/map-editor/MapBasicConfig.vue
+++ b/spx-gui/src/components/editor/map-editor/MapBasicConfig.vue
@@ -11,36 +11,18 @@ defineProps<{
 </script>
 
 <template>
-  <div class="map-basic-config">
-    <div class="config-item">
-      <div class="label">{{ $t({ en: 'Map size', zh: '地图尺寸' }) }}</div>
+  <div class="flex flex-col gap-middle">
+    <div class="flex items-center">
+      <div class="mr-middle whitespace-nowrap">{{ $t({ en: 'Map size', zh: '地图尺寸' }) }}</div>
       <MapSizeInput :project="project" />
     </div>
-    <div class="config-item">
-      <div class="label">{{ $t({ en: 'Physics', zh: '物理特性' }) }}</div>
+    <div class="flex items-center">
+      <div class="mr-middle whitespace-nowrap">{{ $t({ en: 'Physics', zh: '物理特性' }) }}</div>
       <MapPhysicsInput :project="project" />
     </div>
-    <div v-if="project.stage.physics.enabled" class="config-item">
-      <div class="label">{{ $t({ en: 'Layer Sorting', zh: '层级排序' }) }}</div>
+    <div v-if="project.stage.physics.enabled" class="flex items-center">
+      <div class="mr-middle whitespace-nowrap">{{ $t({ en: 'Layer Sorting', zh: '层级排序' }) }}</div>
       <MapLayerSortInput :project="project" />
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.map-basic-config {
-  display: flex;
-  flex-direction: column;
-  gap: var(--ui-gap-middle);
-}
-
-.config-item {
-  display: flex;
-  align-items: center;
-
-  .label {
-    white-space: nowrap;
-    margin-right: 16px;
-  }
-}
-</style>
diff --git a/spx-gui/src/components/editor/map-editor/MapLayerSortInput.vue b/spx-gui/src/components/editor/map-editor/MapLayerSortInput.vue
index 124d6772a2..6d00f56fd6 100644
--- a/spx-gui/src/components/editor/map-editor/MapLayerSortInput.vue
+++ b/spx-gui/src/components/editor/map-editor/MapLayerSortInput.vue
@@ -45,5 +45,3 @@ const handleLayerSortModeChange = (v: string | null) => {
     </UITooltip>
   </UIRadioGroup>
 </template>
-
-<style lang="scss" scoped></style>
diff --git a/spx-gui/src/components/editor/map-editor/MapPhysicsInput.vue b/spx-gui/src/components/editor/map-editor/MapPhysicsInput.vue
index 4a7064c1d5..b82eb961e9 100644
--- a/spx-gui/src/components/editor/map-editor/MapPhysicsInput.vue
+++ b/spx-gui/src/components/editor/map-editor/MapPhysicsInput.vue
@@ -31,5 +31,3 @@ const handlePhysicsEnabledChange = (v: boolean) => {
     @update:value="handlePhysicsEnabledChange"
   />
 </template>
-
-<style lang="scss" scoped></style>
diff --git a/spx-gui/src/components/editor/map-editor/MapSizeInput.vue b/spx-gui/src/components/editor/map-editor/MapSizeInput.vue
index c847a49fbf..20ca5686bf 100644
--- a/spx-gui/src/components/editor/map-editor/MapSizeInput.vue
+++ b/spx-gui/src/components/editor/map-editor/MapSizeInput.vue
@@ -26,7 +26,7 @@ const handleHeightChange = debounce((v: number | null) => {
 </script>
 
 <template>
-  <div class="inputs">
+  <div class="flex gap-2">
     <UINumberInput
       v-radar="{ name: 'width input', desc: 'Input to set map width' }"
       :value="project.stage.mapWidth"
@@ -43,11 +43,3 @@ const handleHeightChange = debounce((v: number | null) => {
     </UINumberInput>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.inputs {
-  display: flex;
-  flex-direction: row;
-  gap: 8px;
-}
-</style>
diff --git a/spx-gui/src/components/editor/map-editor/SpriteBasicConfig.vue b/spx-gui/src/components/editor/map-editor/SpriteBasicConfig.vue
index 56762a7048..892f48cef9 100644
--- a/spx-gui/src/components/editor/map-editor/SpriteBasicConfig.vue
+++ b/spx-gui/src/components/editor/map-editor/SpriteBasicConfig.vue
@@ -46,21 +46,21 @@ const handleEditCollision = useMessageHandle(
 </script>
 
 <template>
-  <div class="header">
+  <div class="flex h-7 items-center text-title">
     <AssetName>{{ sprite.name }}</AssetName>
     <UIIcon
       v-radar="{ name: 'Rename button', desc: 'Button to rename the sprite' }"
-      class="icon"
+      class="cursor-pointer text-grey-900 transition-colors hover:text-grey-800 active:text-grey-1000"
       :title="$t({ en: 'Rename', zh: '重命名' })"
       type="edit"
       @click="handleNameEdit"
     />
-    <div class="spacer" />
+    <div class="flex-1" />
     <UITooltip>
       <template #trigger>
         <UIIcon
           v-radar="{ name: 'Collapse button', desc: 'Button to collapse the sprite basic configuration panel' }"
-          class="icon"
+          class="cursor-pointer text-grey-900 transition-colors hover:text-grey-800 active:text-grey-1000"
           type="doubleArrowDown"
           @click="emit('collapse')"
         />
@@ -73,63 +73,23 @@ const handleEditCollision = useMessageHandle(
       }}
     </UITooltip>
   </div>
-  <div class="config-wrapper">
+  <div class="flex flex-col gap-middle">
     <SpritePositionSize :sprite="sprite" :project="project" />
-    <div class="config-item">
-      <div class="label">{{ $t({ en: 'Rotation', zh: '旋转' }) }}</div>
+    <div class="flex items-center">
+      <div class="mr-middle whitespace-nowrap">{{ $t({ en: 'Rotation', zh: '旋转' }) }}</div>
       <SpriteDirection :sprite="sprite" :project="project" />
     </div>
-    <div class="config-item">
-      <div class="label">{{ $t({ en: 'Show', zh: '显示' }) }}</div>
+    <div class="flex items-center">
+      <div class="mr-middle whitespace-nowrap">{{ $t({ en: 'Show', zh: '显示' }) }}</div>
       <SpriteVisible :sprite="sprite" :project="project" />
     </div>
-    <div v-if="project.stage.physics.enabled" class="config-item">
-      <div class="label">{{ $t({ en: 'Physics', zh: '物理特性' }) }}</div>
+    <div v-if="project.stage.physics.enabled" class="flex items-center">
+      <div class="mr-middle whitespace-nowrap">{{ $t({ en: 'Physics', zh: '物理特性' }) }}</div>
       <SpritePhysics :sprite="sprite" :project="project" />
     </div>
-    <div v-if="isCollisionSettingsEnabled" class="config-item">
-      <div class="label">{{ $t({ en: 'Collision settings', zh: '碰撞设置' }) }}</div>
+    <div v-if="isCollisionSettingsEnabled" class="flex items-center">
+      <div class="mr-middle whitespace-nowrap">{{ $t({ en: 'Collision settings', zh: '碰撞设置' }) }}</div>
       <UIButton icon="setting" color="secondary" variant="flat" @click="handleEditCollision"></UIButton>
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.header {
-  height: 28px;
-  color: var(--ui-color-title);
-  display: flex;
-  align-items: center;
-}
-
-.icon {
-  cursor: pointer;
-  color: var(--ui-color-grey-900);
-  &:hover {
-    color: var(--ui-color-grey-800);
-  }
-  &:active {
-    color: var(--ui-color-grey-1000);
-  }
-}
-
-.spacer {
-  flex: 1;
-}
-
-.config-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: var(--ui-gap-middle);
-
-  .config-item {
-    display: flex;
-    align-items: center;
-
-    .label {
-      white-space: nowrap;
-      margin-right: 16px;
-    }
-  }
-}
-</style>
diff --git a/spx-gui/src/components/editor/map-editor/SpritesPanel.vue b/spx-gui/src/components/editor/map-editor/SpritesPanel.vue
index 252b0f7e71..af72d7169f 100644
--- a/spx-gui/src/components/editor/map-editor/SpritesPanel.vue
+++ b/spx-gui/src/components/editor/map-editor/SpritesPanel.vue
@@ -83,7 +83,7 @@ const handleGenerate = useMessageHandle(
 <template>
   <UICard
     v-radar="{ name: 'Map Editor\'s Sprite List', desc: 'List of all sprites in the Map Editor' }"
-    class="sprite-list-card"
+    class="relative flex flex-col"
     :style="cssVars"
   >
     <PanelHeader :active="selectedSprite != null">
@@ -112,7 +112,7 @@ const handleGenerate = useMessageHandle(
       </template>
     </PanelHeader>
 
-    <SpriteList class="list-wrapper" />
+    <SpriteList class="flex-1" />
 
     <PanelFooter
       v-if="footerExpanded && selectedSprite != null"
@@ -120,7 +120,7 @@ const handleGenerate = useMessageHandle(
         name: `Basic configuration for selected sprite`,
         desc: 'Panel for configuring sprite basic settings'
       }"
-      class="footer"
+      class="p-middle"
     >
       <SpriteBasicConfig :sprite="selectedSprite" :project="project" @collapse="footerExpanded = false" />
     </PanelFooter>
@@ -132,47 +132,13 @@ const handleGenerate = useMessageHandle(
             name: 'Expand button',
             desc: 'Button to expand the basic configuration panel for selected sprite'
           }"
-          class="footer-expand-button"
+          class="absolute right-3 bottom-0 flex h-6 w-6 cursor-pointer items-center justify-center bg-grey-300 shadow-small"
           @click="footerExpanded = true"
         >
-          <UIIcon class="footer-expand-icon" type="doubleArrowDown" />
+          <UIIcon class="rotate-180" type="doubleArrowDown" />
         </div>
       </template>
       {{ $t({ en: 'Expand', zh: '展开' }) }}
     </UITooltip>
   </UICard>
 </template>
-
-<style lang="scss" scoped>
-.sprite-list-card {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-
-  .list-wrapper {
-    flex: 1;
-  }
-}
-
-.footer {
-  padding: 16px;
-}
-
-.footer-expand-button {
-  position: absolute;
-  width: 24px;
-  height: 24px;
-  right: 12px;
-  bottom: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-shadow: 0px -2px 8px 0px rgba(51, 51, 51, 0.08);
-  background-color: var(--ui-color-grey-300);
-  cursor: pointer;
-}
-
-.footer-expand-icon {
-  transform: rotate(180deg);
-}
-</style>
diff --git a/spx-gui/src/components/editor/map-editor/map-viewer/MapViewer.vue b/spx-gui/src/components/editor/map-editor/map-viewer/MapViewer.vue
index 47cd9d08af..90977a546e 100644
--- a/spx-gui/src/components/editor/map-editor/map-viewer/MapViewer.vue
+++ b/spx-gui/src/components/editor/map-editor/map-viewer/MapViewer.vue
@@ -5,6 +5,7 @@ import Konva from 'konva'
 import type { KonvaEventObject } from 'konva/lib/Node'
 import type { LayerConfig } from 'konva/lib/Layer'
 
+import stageBgUrl from '@/assets/images/stage-bg.svg'
 import { UILoading } from '@/components/ui'
 import { useContentSize } from '@/utils/dom'
 import { useFileUrl } from '@/utils/file'
@@ -525,7 +526,8 @@ const handleWheel = (e: KonvaEventObject<WheelEvent>) => {
       name: 'Map viewer',
       desc: 'View and manipulate the map and sprites on the map. Click on sprite to select it.'
     }"
-    class="map-viewer"
+    class="relative flex h-full w-full items-center justify-center overflow-hidden rounded-3 bg-center bg-repeat bg-contain"
+    :style="{ backgroundImage: `url(${stageBgUrl})` }"
     @mousemove="updateMousePos"
   >
     <v-stage v-if="stageConfig != null" ref="stageRef" :config="stageConfig" @wheel="handleWheel">
@@ -563,36 +565,14 @@ const handleWheel = (e: KonvaEventObject<WheelEvent>) => {
         />
       </v-layer>
     </v-stage>
-    <QuickConfigWrapper v-if="!loading && localConfigRef != null" ref="quickConfigRef" class="quick-config">
-      <SpriteQuickConfig v-if="localConfigRef != null" :local-config="localConfigRef" :project="project" />
-    </QuickConfigWrapper>
+    <div v-if="!loading && localConfigRef != null" class="absolute left-0 top-0">
+      <QuickConfigWrapper ref="quickConfigRef">
+        <SpriteQuickConfig v-if="localConfigRef != null" :local-config="localConfigRef" :project="project" />
+      </QuickConfigWrapper>
+    </div>
 
     <PositionIndicator :position="mousePos" />
 
     <UILoading :visible="loading" cover />
   </div>
 </template>
-
-<style scoped>
-.map-viewer {
-  height: 100%;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  border-radius: var(--ui-border-radius-3);
-  overflow: hidden;
-  background-image: url(@/assets/images/stage-bg.svg);
-  background-position: center;
-  background-repeat: repeat;
-  background-size: contain;
-  position: relative;
-}
-
-.quick-config {
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-</style>
diff --git a/spx-gui/src/components/editor/panels/ConsolePanel.vue b/spx-gui/src/components/editor/panels/ConsolePanel.vue
index 84a1c324dc..f455b8b6e3 100644
--- a/spx-gui/src/components/editor/panels/ConsolePanel.vue
+++ b/spx-gui/src/components/editor/panels/ConsolePanel.vue
@@ -48,79 +48,60 @@ const initializingError = computed(() => {
 </script>
 
 <template>
-  <UICard class="console-panel">
+  <UICard
+    class="flex flex-col"
+    style="--console-panel-text-color: var(--ui-color-grey-1000); --console-panel-tip-color: var(--ui-color-grey-700)"
+  >
     <UICardHeader>
       {{ $t({ en: 'Console', zh: '控制台' }) }}
     </UICardHeader>
-    <ul ref="outputContainerRef" class="output-container">
+    <ul ref="outputContainerRef" class="flex flex-[1_1_0] flex-col gap-1 overflow-y-auto p-3">
       <UIEmpty v-if="runtime.running.mode !== 'debug'" size="small">
         {{ $t({ en: 'Not running in debug mode', zh: '未处于调试模式' }) }}
       </UIEmpty>
       <UIEmpty v-else-if="runtime.running.initializing" size="small">
         {{ $t({ en: 'Initializing...', zh: '初始化中...' }) }}
       </UIEmpty>
-      <li v-else-if="initializingError != null" class="output kind-error">
+      <li
+        v-else-if="initializingError != null"
+        class="relative font-code text-12"
+        style="--console-panel-text-color: var(--ui-color-red-500); --console-panel-tip-color: var(--ui-color-red-300)"
+      >
         <!-- TODO: Optimize initializing-error displaying here -->
-        <span class="time">{{ humanizeTime(initializingError.time) }}</span>
-        <span class="message">{{ initializingError.message }}</span>
+        <span class="float-left mr-2 text-(--console-panel-tip-color)">
+          {{ humanizeTime(initializingError.time) }}
+        </span>
+        <span class="whitespace-pre-line break-all text-(--console-panel-text-color)">
+          {{ initializingError.message }}
+        </span>
       </li>
       <UIEmpty v-else-if="outputs.length === 0" size="small">
         {{ $t({ en: 'No output', zh: '无输出' }) }}
       </UIEmpty>
-      <li v-for="output in outputs" v-else :key="output.id" class="output" :class="`kind-${output.kind}`">
-        <span class="time">{{ humanizeTime(output.time) }}</span>
-        <CodeLink v-if="getOutputSourceLocation(output) != null" class="link" v-bind="getOutputSourceLocation(output)!">
+      <li
+        v-for="output in outputs"
+        v-else
+        :key="output.id"
+        class="relative font-code text-12"
+        :style="
+          output.kind === 'error'
+            ? {
+                '--console-panel-text-color': 'var(--ui-color-red-500)',
+                '--console-panel-tip-color': 'var(--ui-color-red-300)'
+              }
+            : null
+        "
+      >
+        <span class="float-left mr-2 text-(--console-panel-tip-color)">{{ humanizeTime(output.time) }}</span>
+        <CodeLink
+          v-if="getOutputSourceLocation(output) != null"
+          class="float-right ml-2 text-(--console-panel-tip-color)"
+          v-bind="getOutputSourceLocation(output)!"
+        >
           {{ getOutputSourceLocationText(output) }}
         </CodeLink>
-        <span class="message">{{ output.message }}</span>
+        <span class="whitespace-pre-line break-all text-(--console-panel-text-color)">{{ output.message }}</span>
       </li>
     </ul>
   </UICard>
 </template>
-
-<style lang="scss" scoped>
-.console-panel {
-  display: flex;
-  flex-direction: column;
-}
-
-.output-container {
-  padding: 12px;
-  flex: 1 1 0;
-  overflow-y: auto;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.output {
-  position: relative;
-  font-size: 12px;
-  font-family: var(--ui-font-family-code);
-
-  --console-panel-text-color: var(--ui-color-grey-1000);
-  --console-panel-tip-color: var(--ui-color-grey-700);
-  &.kind-error {
-    --console-panel-text-color: var(--ui-color-red-500);
-    --console-panel-tip-color: var(--ui-color-red-300);
-  }
-}
-
-.message {
-  white-space: pre-line;
-  word-break: break-all;
-  color: var(--console-panel-text-color);
-}
-
-.time {
-  float: left;
-  margin-right: 8px;
-  color: var(--console-panel-tip-color);
-}
-
-.link {
-  float: right;
-  margin-left: 8px;
-  color: var(--console-panel-tip-color);
-}
-</style>
diff --git a/spx-gui/src/components/editor/panels/EditorPanels.vue b/spx-gui/src/components/editor/panels/EditorPanels.vue
index 114eef2996..6ca57aec14 100644
--- a/spx-gui/src/components/editor/panels/EditorPanels.vue
+++ b/spx-gui/src/components/editor/panels/EditorPanels.vue
@@ -1,6 +1,9 @@
 <template>
-  <div v-show="running.mode !== 'debug'" class="editor-panels">
-    <UICard v-radar="{ name: 'Sprites panel', desc: 'Panel containing sprites for the project' }" class="main">
+  <div v-show="running.mode !== 'debug'" class="flex flex-[1_1_0] gap-middle">
+    <UICard
+      v-radar="{ name: 'Sprites panel', desc: 'Panel containing sprites for the project' }"
+      class="flex min-w-0 flex-[1_1_0]"
+    >
       <SpritesPanel />
     </UICard>
     <UICard
@@ -8,7 +11,7 @@
         name: 'Stage panel',
         desc: 'Panel for stage of the project, with quick entries to widgets, sounds and backdrops tabs'
       }"
-      class="sider"
+      class="flex-[0_0_auto]"
     >
       <StagePanel />
     </UICard>
@@ -20,7 +23,7 @@
       desc: 'Console panel showing runtime output and errors',
       visible: running.mode === 'debug'
     }"
-    class="console-panel"
+    class="flex-[1_1_0]"
   />
 </template>
 
@@ -35,26 +38,3 @@ import ConsolePanel from './ConsolePanel.vue'
 const editorCtx = useEditorCtx()
 const running = computed(() => editorCtx.state.runtime.running)
 </script>
-
-<style scoped lang="scss">
-.editor-panels {
-  flex: 1 1 0;
-  display: flex;
-  flex-direction: row;
-  gap: var(--ui-gap-middle);
-}
-
-.console-panel {
-  flex: 1 1 0;
-}
-
-.main {
-  flex: 1 1 0;
-  min-width: 0;
-  display: flex;
-}
-
-.sider {
-  flex: 0 0 auto;
-}
-</style>
diff --git a/spx-gui/src/components/editor/panels/common/PanelFooter.vue b/spx-gui/src/components/editor/panels/common/PanelFooter.vue
index 375aa76f20..5e67e46409 100644
--- a/spx-gui/src/components/editor/panels/common/PanelFooter.vue
+++ b/spx-gui/src/components/editor/panels/common/PanelFooter.vue
@@ -1,22 +1,15 @@
 <!-- (floating) Footer for Sprite/Sound Panel -->
 
 <template>
-  <div class="panel-footer">
+  <div
+    class="flex flex-none flex-col gap-3 bg-grey-100 p-3"
+    :style="{
+      // slightly different with --ui-box-shadow-small
+      boxShadow: '0px -2px 8px 0px rgba(51, 51, 51, 0.08)'
+    }"
+  >
     <slot></slot>
   </div>
 </template>
 
 <script setup lang="ts"></script>
-
-<style scoped lang="scss">
-.panel-footer {
-  flex: 0 0 auto;
-  display: flex;
-  padding: 12px;
-  flex-direction: column;
-  gap: 12px;
-
-  background: var(--ui-color-grey-100);
-  box-shadow: 0px -2px 8px 0px rgba(51, 51, 51, 0.08); // slightly different with --ui-box-shadow-small
-}
-</style>
diff --git a/spx-gui/src/components/editor/panels/common/PanelHeader.vue b/spx-gui/src/components/editor/panels/common/PanelHeader.vue
index 558b9fc11e..efd339e4ac 100644
--- a/spx-gui/src/components/editor/panels/common/PanelHeader.vue
+++ b/spx-gui/src/components/editor/panels/common/PanelHeader.vue
@@ -1,16 +1,24 @@
-<!-- Header for Sprite/Sound Panel -->
+<!-- Header for Sprite Panel -->
 
 <template>
   <!-- TODO: use UICardHeader? -->
-  <div class="panel-header" :class="{ active }">
-    <div class="main">
+  <div
+    class="flex h-11 items-center justify-between border-b border-grey-400 pr-2.5"
+    :class="active ? 'border-(--panel-color-main) bg-(--panel-color-main) text-grey-100' : 'text-title'"
+  >
+    <div class="flex h-full items-center px-middle text-16">
       <slot></slot>
     </div>
     <UIDropdown trigger="click" placement="bottom-end" :offset="{ x: 0, y: 16 }">
       <template #trigger>
         <div
           v-radar="{ name: 'Add', desc: 'Button to add a new item for current panel, click to view more options' }"
-          class="add"
+          class="flex h-7 w-7 cursor-pointer items-center justify-center rounded-full text-inherit transition-colors"
+          :class="
+            active
+              ? 'hover:bg-(--panel-color-400) active:bg-(--panel-color-600)'
+              : 'hover:bg-grey-400 active:bg-grey-500'
+          "
         >
           <UIIcon type="plus" />
         </div>
@@ -27,57 +35,3 @@ defineProps<{
   active: boolean
 }>()
 </script>
-
-<style scoped lang="scss">
-.panel-header {
-  height: 44px;
-  display: flex;
-  padding-right: 10px;
-  justify-content: space-between;
-  align-items: center;
-  color: var(--ui-color-title);
-  border-bottom: 1px solid var(--ui-color-grey-400);
-
-  &.active {
-    color: var(--ui-color-grey-100);
-    border-color: var(--panel-color-main);
-    background-color: var(--panel-color-main);
-  }
-}
-
-.main {
-  height: 100%;
-  padding: 0 var(--ui-gap-middle);
-  display: flex;
-  align-items: center;
-  font-size: 16px;
-}
-
-.add {
-  width: 28px;
-  height: 28px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: inherit;
-  border-radius: 14px;
-  cursor: pointer;
-  transition: background-color 0.2s;
-
-  &:hover {
-    background-color: var(--ui-color-grey-400);
-  }
-  &:active {
-    background-color: var(--ui-color-grey-500);
-  }
-}
-
-.panel-header.active .add {
-  &:hover {
-    background-color: var(--panel-color-400);
-  }
-  &:active {
-    background-color: var(--panel-color-600);
-  }
-}
-</style>
diff --git a/spx-gui/src/components/editor/panels/sprite/SpritesPanel.vue b/spx-gui/src/components/editor/panels/sprite/SpritesPanel.vue
index b67c833eee..f97ec75ed5 100644
--- a/spx-gui/src/components/editor/panels/sprite/SpritesPanel.vue
+++ b/spx-gui/src/components/editor/panels/sprite/SpritesPanel.vue
@@ -1,6 +1,9 @@
 <template>
-  <div class="sprites-panel" :style="cssVars">
-    <section v-radar="{ name: 'Sprites panel', desc: 'Panel for managing project sprites' }" class="details">
+  <div class="h-full w-full overflow-hidden" :style="cssVars">
+    <section
+      v-radar="{ name: 'Sprites panel', desc: 'Panel for managing project sprites' }"
+      class="flex h-full flex-col overflow-hidden"
+    >
       <PanelHeader :active="selectedSprite != null">
         {{ $t({ en: 'Sprites', zh: '精灵' }) }}
         <template #add-options>
@@ -89,18 +92,3 @@ const handleGenerate = useMessageHandle(
   }
 ).fn
 </script>
-
-<style scoped lang="scss">
-.sprites-panel {
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-}
-
-.details {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-</style>
diff --git a/spx-gui/src/components/editor/panels/stage/StagePanel.vue b/spx-gui/src/components/editor/panels/stage/StagePanel.vue
index 73d5ea4383..3680141897 100644
--- a/spx-gui/src/components/editor/panels/stage/StagePanel.vue
+++ b/spx-gui/src/components/editor/panels/stage/StagePanel.vue
@@ -1,42 +1,47 @@
 <template>
-  <section class="stage-panel" :class="{ active }" :style="cssVars">
+  <section class="flex h-full flex-col overflow-hidden" :style="cssVars">
     <!-- TODO: use UICardHeader? -->
-    <h4 class="header">{{ $t({ en: 'Stage', zh: '舞台' }) }}</h4>
-    <main class="main">
-      <div class="stage">
+    <h4
+      class="flex h-11 w-20 items-center justify-center border-b border-grey-400 text-16"
+      :class="active ? 'border-stage-main bg-stage-main text-grey-100' : 'text-title'"
+    >
+      {{ $t({ en: 'Stage', zh: '舞台' }) }}
+    </h4>
+    <main class="flex flex-[1_1_0] flex-col items-center">
+      <div class="flex-[0_0_auto] p-3">
         <div
           v-radar="{ name: 'Stage overview', desc: 'Overview of the stage, click to view stage details' }"
-          class="overview"
-          :class="{ active }"
+          class="relative flex h-14 w-14 cursor-pointer items-center justify-center rounded-1 bg-grey-300"
+          :class="active ? 'border-2 border-stage-main bg-blue-200 p-0' : 'p-0.5 hover:bg-grey-400'"
           @click="activate"
         >
-          <UIImg class="img" :src="imgSrc" size="cover" :loading="imgLoading" />
+          <UIImg class="h-11 w-11 rounded-[4px] object-cover" :src="imgSrc" size="cover" :loading="imgLoading" />
         </div>
       </div>
-      <UIDivider class="divider" />
-      <div class="scroll-container">
-        <div class="quick-actions">
+      <UIDivider class="w-10" />
+      <div class="scroll-container w-full flex-[1_0_72px] overflow-y-auto">
+        <div class="flex flex-col items-start gap-2">
           <button
             v-radar="{
               name: 'Backdrops quick entry',
               desc: 'Quick entry to open backdrops management tab in stage editor'
             }"
-            class="quick-btn"
+            class="flex h-14 w-14 cursor-pointer flex-col items-center justify-center rounded-1 border-none bg-grey-300 p-2 text-10/4 font-semibold text-grey-1000 outline-none hover:bg-grey-400"
             type="button"
             @click="openTab('backdrops')"
           >
             <!-- eslint-disable-next-line vue/no-v-html -->
-            <span class="icon" v-html="backdropSvg"></span>
+            <span class="h-6 w-6" v-html="backdropSvg"></span>
             <span>{{ $t({ en: 'Backdrops', zh: '背景' }) }}</span>
           </button>
           <button
             v-radar="{ name: 'Sounds quick entry', desc: 'Quick entry to open sounds management tab in stage editor' }"
-            class="quick-btn"
+            class="flex h-14 w-14 cursor-pointer flex-col items-center justify-center rounded-1 border-none bg-grey-300 p-2 text-10/4 font-semibold text-grey-1000 outline-none hover:bg-grey-400"
             type="button"
             @click="openTab('sounds')"
           >
             <!-- eslint-disable-next-line vue/no-v-html -->
-            <span class="icon" v-html="soundSvg"></span>
+            <span class="h-6 w-6" v-html="soundSvg"></span>
             <span>{{ $t({ en: 'Sounds', zh: '声音' }) }}</span>
           </button>
           <button
@@ -44,12 +49,12 @@
               name: 'Widgets quick entry',
               desc: 'Quick entry to open widgets management tab in stage editor'
             }"
-            class="quick-btn"
+            class="flex h-14 w-14 cursor-pointer flex-col items-center justify-center rounded-1 border-none bg-grey-300 p-2 text-10/4 font-semibold text-grey-1000 outline-none hover:bg-grey-400"
             type="button"
             @click="openTab('widgets')"
           >
             <!-- eslint-disable-next-line vue/no-v-html -->
-            <span class="icon" v-html="widgetSvg"></span>
+            <span class="h-6 w-6" v-html="widgetSvg"></span>
             <span>{{ $t({ en: 'Widgets', zh: '控件' }) }}</span>
           </button>
         </div>
@@ -88,120 +93,9 @@ const uiVariables = useUIVariables()
 const cssVars = getCssVars('--panel-color-', uiVariables.color.stage)
 </script>
 
-<style scoped lang="scss">
-.stage-panel {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-
-  .header {
-    flex: 0 0 44px;
-    width: 80px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    font-size: 16px;
-    color: var(--ui-color-title);
-    border-bottom: 1px solid var(--ui-color-grey-400);
-  }
-
-  &.active {
-    .header {
-      color: var(--ui-color-grey-100);
-      background-color: var(--ui-color-stage-main);
-      border-color: var(--ui-color-stage-main);
-    }
-  }
-
-  .main {
-    flex: 1 1 0;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-}
-
-.stage {
-  flex: 0 0 auto;
-  padding: 12px;
-
-  .overview {
-    width: 56px;
-    height: 56px;
-    padding: 2px;
-    position: relative;
-    border-radius: var(--ui-border-radius-1);
-    background-color: var(--ui-color-grey-300);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-
-    &:not(.active):hover {
-      background-color: var(--ui-color-grey-400);
-    }
-
-    &.active {
-      padding: 0;
-      background-color: var(--ui-color-blue-200);
-      border: 2px solid var(--ui-color-stage-main);
-    }
-
-    .img {
-      width: 44px;
-      height: 44px;
-      border-radius: 4px;
-      object-fit: cover;
-    }
-  }
-}
-
-.divider {
-  width: 40px;
-}
-
+<style scoped>
 .scroll-container {
-  flex: 1 0 72px;
-  overflow-y: auto;
-  width: 100%;
-  padding: 12px 0 12px 12px; // no right padding to allow optional scrollbar
+  padding: 12px 0 12px 12px; /* no right padding to allow optional scrollbar */
   scrollbar-width: thin;
 }
-
-.quick-actions {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 8px;
-
-  .quick-btn {
-    width: 56px;
-    height: 56px;
-    border-radius: var(--ui-border-radius-1);
-    background-color: var(--ui-color-grey-300);
-    border: none;
-    outline: none;
-    padding: 8px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    color: var(--ui-color-grey-1000);
-    font-size: 10px;
-    font-weight: 600;
-    line-height: 16px;
-    cursor: pointer;
-
-    &:hover {
-      background-color: var(--ui-color-grey-400);
-    }
-
-    .icon {
-      width: 24px;
-      height: 24px;
-    }
-  }
-}
 </style>
diff --git a/spx-gui/src/components/editor/preview/stage-viewer/StageViewer.vue b/spx-gui/src/components/editor/preview/stage-viewer/StageViewer.vue
index a23e6f7763..4ff5f06400 100644
--- a/spx-gui/src/components/editor/preview/stage-viewer/StageViewer.vue
+++ b/spx-gui/src/components/editor/preview/stage-viewer/StageViewer.vue
@@ -5,7 +5,8 @@
       name: 'Stage viewer',
       desc: 'View and manipulate the stage and objects (sprites, widgets, etc.) on the stage. Click on object to select it.'
     }"
-    class="stage-viewer"
+    class="stage-viewer relative flex h-full w-full items-center justify-center bg-center bg-repeat bg-contain"
+    :style="{ backgroundImage: `url(${stageBgUrl})` }"
     @mousemove="updateMousePos"
   >
     <v-stage v-if="stageConfig != null" ref="stageRef" :config="stageConfig" @wheel="handleWheel">
@@ -61,18 +62,21 @@
         />
       </v-layer>
     </v-stage>
-    <QuickConfigWrapper v-if="localConfigRef != null" ref="quickConfigRef" class="quick-config">
-      <SpriteQuickConfig
-        v-if="localConfigRef instanceof SpriteLocalConfig"
-        :local-config="localConfigRef"
-        :project="editorCtx.project"
-      />
-      <WidgetQuickConfig
-        v-else-if="localConfigRef instanceof WidgetLocalConfig"
-        :local-config="localConfigRef"
-        :project="editorCtx.project"
-      />
-    </QuickConfigWrapper>
+    <div v-if="localConfigRef != null" class="absolute bottom-3 left-1/2 -translate-x-1/2">
+      <QuickConfigWrapper ref="quickConfigRef">
+        <SpriteQuickConfig
+          v-if="localConfigRef instanceof SpriteLocalConfig"
+          :local-config="localConfigRef"
+          :project="editorCtx.project"
+        />
+        <WidgetQuickConfig
+          v-else-if="localConfigRef instanceof WidgetLocalConfig"
+          :local-config="localConfigRef"
+          :project="editorCtx.project"
+        />
+      </QuickConfigWrapper>
+    </div>
+
     <PositionIndicator :position="mousePos" />
     <UILoading :visible="loading" cover />
   </div>
@@ -85,6 +89,8 @@ import Konva from 'konva'
 import type { KonvaEventObject } from 'konva/lib/Node'
 import type { StageConfig } from 'konva/lib/Stage'
 import type { LayerConfig } from 'konva/lib/Layer'
+
+import stageBgUrl from '@/assets/images/stage-bg.svg'
 import { UILoading } from '@/components/ui'
 import { useContentSize } from '@/utils/dom'
 import { useFileUrl } from '@/utils/file'
@@ -501,24 +507,3 @@ watchEffect((onCleanup) => {
   onCleanup(unbind)
 })
 </script>
-<style scoped>
-.stage-viewer {
-  height: 100%;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  background-image: url(@/assets/images/stage-bg.svg);
-  background-position: center;
-  background-repeat: repeat;
-  background-size: contain;
-  position: relative;
-}
-
-.quick-config {
-  bottom: 12px;
-  left: 50%;
-  transform: translateX(-50%);
-}
-</style>
diff --git a/spx-gui/src/components/editor/sprite/AnimationDetail.vue b/spx-gui/src/components/editor/sprite/AnimationDetail.vue
index ce9809e83f..628d5cd3e8 100644
--- a/spx-gui/src/components/editor/sprite/AnimationDetail.vue
+++ b/spx-gui/src/components/editor/sprite/AnimationDetail.vue
@@ -4,7 +4,7 @@
       :costumes="animation.costumes"
       :sound="sound"
       :duration="animation.duration"
-      class="animation-player"
+      class="w-full flex-[1_1_0]"
     />
     <AnimationSettings :animation="animation" :sound-editable="soundEditable" />
   </EditorItemDetail>
@@ -36,17 +36,3 @@ const emit = defineEmits<{
 const editorCtx = useEditorCtx()
 const sound = computed(() => editorCtx.project.sounds.find((sound) => sound.id === props.animation.sound) ?? null)
 </script>
-
-<style lang="scss" scoped>
-.animation-player {
-  width: 100%;
-  flex: 1 1 0;
-}
-
-.mute-switch {
-  position: absolute;
-  z-index: 20;
-  top: 12px;
-  right: 12px;
-}
-</style>
diff --git a/spx-gui/src/components/editor/sprite/AnimationEditor.vue b/spx-gui/src/components/editor/sprite/AnimationEditor.vue
index e6efbce018..4d817901c9 100644
--- a/spx-gui/src/components/editor/sprite/AnimationEditor.vue
+++ b/spx-gui/src/components/editor/sprite/AnimationEditor.vue
@@ -157,9 +157,3 @@ const handleRename = useMessageHandle(renameAnimation, {
   zh: '重命名动画失败'
 }).fn
 </script>
-<style scoped lang="scss">
-.background {
-  width: 100%;
-  height: 100%;
-}
-</style>
diff --git a/spx-gui/src/components/editor/sprite/AnimationRemoveModal.vue b/spx-gui/src/components/editor/sprite/AnimationRemoveModal.vue
index 0094060c83..a699ff7cf2 100644
--- a/spx-gui/src/components/editor/sprite/AnimationRemoveModal.vue
+++ b/spx-gui/src/components/editor/sprite/AnimationRemoveModal.vue
@@ -15,7 +15,7 @@
           })
         }}
       </div>
-      <UICheckbox v-model:checked="preserveCostumes" class="checkbox">
+      <UICheckbox v-model:checked="preserveCostumes" class="mt-5">
         {{
           $t({
             en: "Preserve (the costumes will be moved to the sprite's costume list)",
@@ -24,7 +24,7 @@
         }}
       </UICheckbox>
     </div>
-    <div class="action">
+    <div class="mt-10 flex justify-end gap-middle">
       <UIButton
         v-radar="{ name: 'Cancel button', desc: 'Click to cancel removing animation' }"
         color="boring"
@@ -87,14 +87,3 @@ const handleConfirm = async () => {
   emit('resolved')
 }
 </script>
-<style scoped lang="scss">
-.checkbox {
-  margin-top: 20px;
-}
-.action {
-  margin-top: 40px;
-  display: flex;
-  gap: var(--ui-gap-middle);
-  justify-content: flex-end;
-}
-</style>
diff --git a/spx-gui/src/components/editor/sprite/SpriteCollisionEditor.vue b/spx-gui/src/components/editor/sprite/SpriteCollisionEditor.vue
index 3f6a74cce1..6e7611dedc 100644
--- a/spx-gui/src/components/editor/sprite/SpriteCollisionEditor.vue
+++ b/spx-gui/src/components/editor/sprite/SpriteCollisionEditor.vue
@@ -291,9 +291,9 @@ const { fn: handleConfirm } = useMessageHandle(
 </script>
 
 <template>
-  <div class="sprite-collision-editor">
-    <div ref="wrapper" class="wrapper">
-      <CheckerboardBackground class="background" />
+  <div class="flex h-full w-full flex-col items-center gap-middle">
+    <div ref="wrapper" class="relative h-full w-full flex-1 overflow-hidden rounded-2">
+      <CheckerboardBackground class="absolute inset-0" />
       <v-stage v-if="stageConfig != null" :config="stageConfig">
         <v-layer v-if="layerConfig != null" :config="layerConfig">
           <v-image v-if="imgConfig != null" :config="imgConfig" />
@@ -324,29 +324,3 @@ const { fn: handleConfirm } = useMessageHandle(
     </UIButton>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.sprite-collision-editor {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 16px;
-  width: 100%;
-  height: 100%;
-}
-.wrapper {
-  flex: 1;
-  width: 100%;
-  height: 100%;
-  border-radius: var(--ui-border-radius-2);
-  position: relative;
-  overflow: hidden;
-}
-.background {
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-}
-</style>
diff --git a/spx-gui/src/components/editor/sprite/SpriteCollisionEditorModal.vue b/spx-gui/src/components/editor/sprite/SpriteCollisionEditorModal.vue
index 573b31ce43..e3b4d99606 100644
--- a/spx-gui/src/components/editor/sprite/SpriteCollisionEditorModal.vue
+++ b/spx-gui/src/components/editor/sprite/SpriteCollisionEditorModal.vue
@@ -29,15 +29,6 @@ const emit = defineEmits<{
     :visible="visible"
     @update:visible="emit('cancelled')"
   >
-    <SpriteCollisionEditor class="editor" :sprite="sprite" :project="project" @update-success="emit('resolved')" />
+    <SpriteCollisionEditor class="h-114" :sprite="sprite" :project="project" @update-success="emit('resolved')" />
   </UIFormModal>
 </template>
-
-<style scoped lang="scss">
-.checkbox {
-  margin-top: 20px;
-}
-.editor {
-  height: 456px;
-}
-</style>
diff --git a/spx-gui/src/components/editor/sprite/SpriteList.vue b/spx-gui/src/components/editor/sprite/SpriteList.vue
index 93f97b6ad0..aa10fcd0b3 100644
--- a/spx-gui/src/components/editor/sprite/SpriteList.vue
+++ b/spx-gui/src/components/editor/sprite/SpriteList.vue
@@ -105,7 +105,7 @@ const handleSpriteGenClick = useMessageHandle(
 </script>
 
 <template>
-  <div ref="listWrapper" class="sprite-list">
+  <div ref="listWrapper" class="sprite-list overflow-y-auto m-0 flex flex-wrap content-start gap-2">
     <UIEmpty v-if="list.length === 0" size="medium">
       {{ $t({ en: 'Click + to add sprite', zh: '点击 + 号添加精灵' }) }}
     </UIEmpty>
@@ -128,26 +128,21 @@ const handleSpriteGenClick = useMessageHandle(
   </div>
 </template>
 
-<style scoped lang="scss">
+<style scoped>
 .sprite-list {
-  flex: 1 0 112px; // 112px: 1 row of sprite items height
-  overflow-y: auto;
-  margin: 0;
-  padding: 12px 0 12px 12px; // no right padding to allow optional scrollbar
+  flex: 1 0 112px; /* 112px: 1 row of sprite items height */
+  padding: 12px 0 12px 12px; /* no right padding to allow optional scrollbar */
   scrollbar-width: thin;
-  display: flex;
-  flex-wrap: wrap;
-  align-content: flex-start;
-  gap: 8px;
-
-  :deep(.sortable-ghost-item) {
-    // Shadow-like effect
-    // TODO: Use other tools like svg-filter to achieve shadow-like effect, to avoid coupling here with `UIBlockItem`
-    border-color: var(--ui-color-grey-400) !important;
-    background-color: var(--ui-color-grey-400) !important;
-    * {
-      visibility: hidden;
-    }
-  }
+}
+
+:deep(.sortable-ghost-item) {
+  /* Shadow-like effect */
+  /* TODO: Use other tools like svg-filter to achieve shadow-like effect, to avoid coupling here with `UIBlockItem` */
+  border-color: var(--ui-color-grey-400) !important;
+  background-color: var(--ui-color-grey-400) !important;
+}
+
+:deep(.sortable-ghost-item *) {
+  visibility: hidden;
 }
 </style>
diff --git a/spx-gui/src/components/editor/sprite/animation/AnimationPlayer.vue b/spx-gui/src/components/editor/sprite/animation/AnimationPlayer.vue
index af5e33671d..9044a88ae3 100644
--- a/spx-gui/src/components/editor/sprite/animation/AnimationPlayer.vue
+++ b/spx-gui/src/components/editor/sprite/animation/AnimationPlayer.vue
@@ -1,8 +1,11 @@
 <template>
-  <div v-radar="{ name: 'Animation player', desc: 'Provides preview for animation' }" class="animation-player">
-    <CheckerboardBackground class="background" />
-    <CostumesPlayer ref="costumesPlayerRef" class="costumes-player" />
-    <MuteSwitch v-if="sound != null" class="mute-switch" :muted="mutedRef" @click="setMuted(!mutedRef)" />
+  <div
+    v-radar="{ name: 'Animation player', desc: 'Provides preview for animation' }"
+    class="relative overflow-hidden rounded-1"
+  >
+    <CheckerboardBackground class="absolute inset-0" />
+    <CostumesPlayer ref="costumesPlayerRef" class="absolute h-full w-full" />
+    <MuteSwitch v-if="sound != null" class="absolute top-3 right-3" :muted="mutedRef" @click="setMuted(!mutedRef)" />
     <UILoading :visible="loading" cover />
   </div>
 </template>
@@ -107,27 +110,3 @@ watchEffect(async () => {
   }
 })
 </script>
-<style scoped lang="scss">
-.animation-player {
-  position: relative;
-  border-radius: 8px;
-  overflow: hidden;
-}
-.background {
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-}
-.costumes-player {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-}
-.mute-switch {
-  position: absolute;
-  top: 12px;
-  right: 12px;
-}
-</style>
diff --git a/spx-gui/src/components/editor/sprite/animation/AnimationSettings.vue b/spx-gui/src/components/editor/sprite/animation/AnimationSettings.vue
index 1f6e49189f..6b28d47154 100644
--- a/spx-gui/src/components/editor/sprite/animation/AnimationSettings.vue
+++ b/spx-gui/src/components/editor/sprite/animation/AnimationSettings.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="wrapper">
+  <section class="flex justify-center">
     <UIDropdown
       trigger="manual"
       :visible="activeSetting != null"
@@ -8,37 +8,50 @@
       @update:visible="handleDropdownVisibleUpdate"
     >
       <template #trigger>
-        <ul class="settings">
+        <ul class="flex items-center gap-1 rounded-1 bg-grey-100 p-1 shadow-small">
           <li
             v-radar="{ name: 'Edit duration', desc: 'Click to edit animation duraion' }"
-            class="setting"
-            :class="{ active: activeSetting === 'duration' }"
+            class="flex h-8 cursor-pointer items-center gap-1 rounded-1 px-3 text-12 text-text transition-all"
+            :class="activeSetting === 'duration' ? 'bg-primary-200 text-primary-main' : ''"
             @click="handleSummaryClick('duration')"
           >
             <UIIcon type="timer" />
             {{ $t({ en: 'Duration', zh: '时长' }) }}
-            <span class="value">{{ formatDuration(animation.duration, 2) }}</span>
+            <span
+              class="max-w-[5em] overflow-x-hidden rounded-full bg-grey-400 px-1.25 text-10/[1.6] whitespace-nowrap text-ellipsis text-grey-800"
+            >
+              {{ formatDuration(animation.duration, 2) }}
+            </span>
           </li>
           <li
             v-radar="{ name: 'Edit bound state', desc: 'Click to edit animation bound state' }"
-            class="setting"
-            :class="{ active: activeSetting === 'bound-state' }"
+            class="flex h-8 cursor-pointer items-center gap-1 rounded-1 px-3 text-12 text-text transition-all"
+            :class="activeSetting === 'bound-state' ? 'bg-primary-200 text-primary-main' : ''"
             @click="handleSummaryClick('bound-state')"
           >
             <UIIcon type="status" />
             {{ $t({ en: 'Binding', zh: '绑定' }) }}
-            <span v-if="boundStateNum > 0" class="value">{{ boundStateNum }}</span>
+            <span
+              v-if="boundStateNum > 0"
+              class="max-w-[5em] overflow-x-hidden rounded-full bg-grey-400 px-1.25 text-10/[1.6] whitespace-nowrap text-ellipsis text-grey-800"
+            >
+              {{ boundStateNum }}
+            </span>
           </li>
           <li
             v-if="soundEditable"
             v-radar="{ name: 'Edit sound', desc: 'Click to edit animation sound' }"
-            class="setting"
-            :class="{ active: activeSetting === 'sound' }"
+            class="flex h-8 cursor-pointer items-center gap-1 rounded-1 px-3 text-12 text-text transition-all"
+            :class="activeSetting === 'sound' ? 'bg-primary-200 text-primary-main' : ''"
             @click="handleSummaryClick('sound')"
           >
             <UIIcon type="sound" />
             {{ $t({ en: 'Sound', zh: '声音' }) }}
-            <span class="value">{{ soundName }}</span>
+            <span
+              class="max-w-[5em] overflow-x-hidden rounded-full bg-grey-400 px-1.25 text-10/[1.6] whitespace-nowrap text-ellipsis text-grey-800"
+            >
+              {{ soundName }}
+            </span>
           </li>
         </ul>
       </template>
@@ -97,55 +110,3 @@ function handleDropdownVisibleUpdate(visible: boolean) {
   if (!visible) activeSetting.value = null
 }
 </script>
-
-<style lang="scss" scoped>
-.wrapper {
-  display: flex;
-  justify-content: center;
-}
-
-.settings {
-  display: flex;
-  align-items: center;
-
-  padding: 4px;
-  gap: 4px;
-  border-radius: var(--ui-border-radius-1);
-  box-shadow: var(--ui-box-shadow-small);
-  background-color: var(--ui-color-grey-100);
-}
-
-.setting {
-  display: flex;
-  height: 32px;
-  padding: 4px 12px;
-  align-items: center;
-  gap: 4px;
-
-  border-radius: var(--ui-border-radius-1);
-  font-size: 12px;
-  line-height: 1.5;
-  color: var(--ui-color-text-main);
-  cursor: pointer;
-  transition: 0.2s;
-
-  &.active {
-    color: var(--ui-color-primary-main);
-    background: var(--ui-color-primary-200);
-  }
-}
-
-.value {
-  padding: 0px 5px;
-  border-radius: 8px;
-  max-width: 5em;
-  overflow-x: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-
-  font-size: 10px;
-  line-height: 1.6;
-  color: var(--ui-color-grey-800);
-  background-color: var(--ui-color-grey-400);
-}
-</style>
diff --git a/spx-gui/src/components/editor/sprite/animation/MuteSwitch.vue b/spx-gui/src/components/editor/sprite/animation/MuteSwitch.vue
index fe3d26de3c..4f685d29f1 100644
--- a/spx-gui/src/components/editor/sprite/animation/MuteSwitch.vue
+++ b/spx-gui/src/components/editor/sprite/animation/MuteSwitch.vue
@@ -2,7 +2,9 @@
   <div>
     <UITooltip>
       <template #trigger>
-        <div class="mute-switch-button">
+        <div
+          class="cursor-pointer flex h-8 w-8 items-center justify-center rounded-full border border-grey-500 bg-white transition-colors hover:bg-grey-300"
+        >
           <UIIcon :type="muted ? 'volumeOff' : 'volumeUp'" />
         </div>
       </template>
@@ -21,21 +23,3 @@ defineProps<{
   muted: boolean
 }>()
 </script>
-<style scoped lang="scss">
-.mute-switch-button {
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  cursor: pointer;
-  transition: background-color 0.2s;
-  border: 1px solid var(--ui-color-grey-500);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: #fff;
-
-  &:hover {
-    background-color: var(--ui-color-grey-300);
-  }
-}
-</style>
diff --git a/spx-gui/src/components/editor/sprite/animation/SoundEditor.vue b/spx-gui/src/components/editor/sprite/animation/SoundEditor.vue
index ede49890f0..6f6c7af86e 100644
--- a/spx-gui/src/components/editor/sprite/animation/SoundEditor.vue
+++ b/spx-gui/src/components/editor/sprite/animation/SoundEditor.vue
@@ -6,7 +6,7 @@
     @cancel="emit('close')"
     @confirm="handleConfirm"
   >
-    <ul class="sound-items">
+    <ul class="flex-[1_1_0] flex flex-wrap content-start gap-3">
       <SoundItem
         v-for="sound in editorCtx.project.sounds"
         :key="sound.id"
@@ -17,24 +17,30 @@
       />
       <UIDropdown trigger="click" placement="top">
         <template #trigger>
-          <UIBlockItem v-radar="{ name: 'Add sound button', desc: 'Click to add a new sound' }" class="add-sound">
-            <UIIcon class="icon" type="plus" />
+          <UIBlockItem
+            v-radar="{ name: 'Add sound button', desc: 'Click to add a new sound' }"
+            class="text-primary-main"
+            style="justify-content: center"
+          >
+            <UIIcon type="plus" style="width: 24px; height: 24px" />
           </UIBlockItem>
         </template>
         <UIMenu>
           <UIMenuItem
             v-radar="{ name: 'Add from local file', desc: 'Click to add sound from local file' }"
             @click="handleAddFromLocalFile"
-            >{{ $t({ en: 'Select local file', zh: '选择本地文件' }) }}</UIMenuItem
           >
+            {{ $t({ en: 'Select local file', zh: '选择本地文件' }) }}
+          </UIMenuItem>
           <UIMenuItem
             v-radar="{ name: 'Add from asset library', desc: 'Click to add sound from asset library' }"
             @click="handleAddFromAssetLibrary"
-            >{{ $t({ en: 'Choose from asset library', zh: '从素材库选择' }) }}</UIMenuItem
           >
-          <UIMenuItem v-radar="{ name: 'Record sound', desc: 'Click to record a new sound' }" @click="handleRecord">{{
-            $t({ en: 'Record', zh: '录音' })
-          }}</UIMenuItem>
+            {{ $t({ en: 'Choose from asset library', zh: '从素材库选择' }) }}
+          </UIMenuItem>
+          <UIMenuItem v-radar="{ name: 'Record sound', desc: 'Click to record a new sound' }" @click="handleRecord">
+            {{ $t({ en: 'Record', zh: '录音' }) }}
+          </UIMenuItem>
         </UIMenu>
       </UIDropdown>
     </ul>
@@ -102,22 +108,3 @@ async function handleConfirm() {
   emit('close')
 }
 </script>
-
-<style lang="scss" scoped>
-.sound-items {
-  flex: 1 1 0;
-  display: flex;
-  flex-wrap: wrap;
-  align-content: flex-start;
-  gap: 12px;
-}
-
-.add-sound {
-  justify-content: center;
-  color: var(--ui-color-primary-main);
-  .icon {
-    width: 24px;
-    height: 24px;
-  }
-}
-</style>
diff --git a/spx-gui/src/components/editor/sprite/animation/state/BoundStateEditor.vue b/spx-gui/src/components/editor/sprite/animation/state/BoundStateEditor.vue
index 3b4ef8d0cf..d114618986 100644
--- a/spx-gui/src/components/editor/sprite/animation/state/BoundStateEditor.vue
+++ b/spx-gui/src/components/editor/sprite/animation/state/BoundStateEditor.vue
@@ -8,35 +8,44 @@
     @cancel="emit('close')"
     @confirm="handleConfirm"
   >
-    <ul class="state-items">
+    <ul class="flex-[1_1_0] flex flex-wrap content-start gap-3">
       <UIBlockItem
         v-radar="{ name: 'State default', desc: 'Click to select state \u0022default\u0022' }"
-        class="state-item"
         :active="isBound(State.Default)"
         @click="handleStateItemClick(State.Default)"
       >
-        <div class="icon" v-html="iconStateDefault"></div>
-        <p class="name">{{ $t({ en: 'Default', zh: '默认' }) }}</p>
+        <div class="mt-1 h-14 w-14" v-html="iconStateDefault"></div>
+        <p
+          class="mt-0.5 w-full overflow-hidden px-2 py-0.75 text-center text-10/[1.6] whitespace-nowrap text-ellipsis text-title"
+        >
+          {{ $t({ en: 'Default', zh: '默认' }) }}
+        </p>
         <UICornerIcon v-show="isBound(State.Default)" type="check" />
       </UIBlockItem>
       <UIBlockItem
         v-radar="{ name: 'State step', desc: 'Click to select state \u0022step\u0022' }"
-        class="state-item"
         :active="isBound(State.Step)"
         @click="handleStateItemClick(State.Step)"
       >
-        <div class="icon" v-html="iconStateStep"></div>
-        <p class="name">{{ $t({ en: 'Step', zh: '行走' }) }}</p>
+        <div class="mt-1 h-14 w-14" v-html="iconStateStep"></div>
+        <p
+          class="mt-0.5 w-full overflow-hidden px-2 py-0.75 text-center text-10/[1.6] whitespace-nowrap text-ellipsis text-title"
+        >
+          {{ $t({ en: 'Step', zh: '行走' }) }}
+        </p>
         <UICornerIcon v-show="isBound(State.Step)" type="check" />
       </UIBlockItem>
       <UIBlockItem
         v-radar="{ name: 'State die', desc: 'Click to select state \u0022die\u0022' }"
-        class="state-item"
         :active="isBound(State.Die)"
         @click="handleStateItemClick(State.Die)"
       >
-        <div class="icon" v-html="iconStateDie"></div>
-        <p class="name">{{ $t({ en: 'Die', zh: '死亡' }) }}</p>
+        <div class="mt-1 h-14 w-14" v-html="iconStateDie"></div>
+        <p
+          class="mt-0.5 w-full overflow-hidden px-2 py-0.75 text-center text-10/[1.6] whitespace-nowrap text-ellipsis text-title"
+        >
+          {{ $t({ en: 'Die', zh: '死亡' }) }}
+        </p>
         <UICornerIcon v-show="isBound(State.Die)" type="check" />
       </UIBlockItem>
     </ul>
@@ -84,33 +93,3 @@ async function handleConfirm() {
   emit('close')
 }
 </script>
-
-<style lang="scss" scoped>
-.state-items {
-  flex: 1 1 0;
-  display: flex;
-  flex-wrap: wrap;
-  align-content: flex-start;
-  gap: 12px;
-}
-
-.icon {
-  margin-top: 4px;
-  width: 56px;
-  height: 56px;
-}
-
-.name {
-  margin-top: 2px;
-  font-size: 10px;
-  line-height: 1.6;
-  padding: 3px 8px 3px;
-
-  width: 100%;
-  overflow: hidden;
-  white-space: nowrap;
-  text-align: center;
-  text-overflow: ellipsis;
-  color: var(--ui-color-title);
-}
-</style>
diff --git a/spx-gui/src/components/editor/stage/backdrop/BackdropModeSelector.vue b/spx-gui/src/components/editor/stage/backdrop/BackdropModeSelector.vue
index cb35696e58..ba2e555299 100644
--- a/spx-gui/src/components/editor/stage/backdrop/BackdropModeSelector.vue
+++ b/spx-gui/src/components/editor/stage/backdrop/BackdropModeSelector.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="container">
-    <div class="gap-4">
+  <div class="flex items-center gap-middle text-grey-800">
+    <div class="flex items-center gap-1">
       <div>
         {{ $t({ en: 'Backdrop Mode', zh: '背景模式' }) }}
       </div>
@@ -50,17 +50,3 @@ const handleUpdateMapMode = (mode: MapMode) => {
 
 const editorCtx = useEditorCtx()
 </script>
-<style scoped lang="scss">
-.container {
-  display: flex;
-  align-items: center;
-  color: var(--ui-color-grey-800);
-  gap: 16px;
-}
-
-.gap-4 {
-  display: flex;
-  gap: 4px;
-  align-items: center;
-}
-</style>
diff --git a/spx-gui/src/components/editor/stage/sound/SoundDetail.vue b/spx-gui/src/components/editor/stage/sound/SoundDetail.vue
index 0430fb8580..ebc91d184d 100644
--- a/spx-gui/src/components/editor/stage/sound/SoundDetail.vue
+++ b/spx-gui/src/components/editor/stage/sound/SoundDetail.vue
@@ -1,44 +1,43 @@
 <template>
-  <div class="main">
-    <div class="header">
-      <div class="name">
+  <div class="flex w-full flex-col gap-large px-5 py-6">
+    <div class="flex flex-col items-center">
+      <div class="flex items-center gap-2 text-title">
         <AssetName>{{ sound.name }}</AssetName>
         <UIIcon
           v-radar="{ name: 'Rename sound', desc: 'Click to rename the sound' }"
-          class="edit-icon"
+          class="cursor-pointer text-grey-900 hover:text-grey-800 active:text-grey-1000"
           :title="$t({ en: 'Rename', zh: '重命名' })"
           type="edit"
           @click="handleNameEdit"
         />
       </div>
-      <div class="duration">
+      <div class="text-grey-700 leading-4.5">
         {{ formattedTrimmedDuration || '&nbsp;' }}
       </div>
     </div>
     <WaveformPlayer
       ref="waveformPlayerRef"
       v-model:range="audioRange"
-      class="waveform-player"
+      style="height: 222px"
       :audio-src="audioUrl || undefined"
       :gain="gain"
       @progress="handleProgress"
       @stop="handleStop"
       @play="handlePlay"
     />
-    <div class="operations">
-      <div class="play-btn">
-        <PlayControl
-          color="sound"
-          :playing="playing != null"
-          :progress="playing?.progress ?? 0"
-          :play-handler="handlePlayClick"
-          :loading="audioLoading"
-          @stop="handleStopClick"
-        />
-      </div>
-      <VolumeSlider class="volume-slider" :value="gain" @update:value="handleGainUpdate" />
-      <div class="spacer" />
-      <div v-if="editing" class="editing-buttons">
+    <div class="flex">
+      <PlayControl
+        class="flex-[0_0_auto]"
+        color="sound"
+        :playing="playing != null"
+        :progress="playing?.progress ?? 0"
+        :play-handler="handlePlayClick"
+        :loading="audioLoading"
+        @stop="handleStopClick"
+      />
+      <VolumeSlider class="mx-6 flex-[0_1_438px]" :value="gain" @update:value="handleGainUpdate" />
+      <div class="flex-[1_1_0]" />
+      <div v-if="editing" class="flex flex-[0_0_auto] items-center gap-2">
         <UIButton
           v-radar="{ name: 'Cancel button', desc: 'Click to cancel sound editing' }"
           color="boring"
@@ -167,70 +166,3 @@ const handleSave = useMessageHandle(
   }
 )
 </script>
-
-<style scoped lang="scss">
-.main {
-  width: 100%;
-  padding: 24px 20px;
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-}
-
-.header {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.duration {
-  color: var(--ui-color-grey-700);
-  line-height: 18px;
-}
-
-.name {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  color: var(--ui-color-title);
-
-  .edit-icon {
-    cursor: pointer;
-    color: var(--ui-color-grey-900);
-    &:hover {
-      color: var(--ui-color-grey-800);
-    }
-    &:active {
-      color: var(--ui-color-grey-1000);
-    }
-  }
-}
-
-.operations {
-  display: flex;
-
-  .play-btn {
-    flex: 0 0 auto;
-  }
-
-  .volume-slider {
-    flex: 0 1 438px;
-    margin: 0 24px;
-  }
-
-  .spacer {
-    flex: 1 1 0;
-  }
-
-  .editing-buttons {
-    flex: 0 0 auto;
-    display: flex;
-    gap: 8px;
-    align-items: center;
-  }
-}
-
-.waveform-player {
-  height: 222px;
-}
-</style>
diff --git a/spx-gui/src/components/editor/stage/sound/SoundRecorder.vue b/spx-gui/src/components/editor/stage/sound/SoundRecorder.vue
index a2014368f9..791fe9738e 100644
--- a/spx-gui/src/components/editor/stage/sound/SoundRecorder.vue
+++ b/spx-gui/src/components/editor/stage/sound/SoundRecorder.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="container">
-    <div class="recorder-waveform-container">
+  <div class="flex flex-col">
+    <div class="relative h-40 overflow-hidden rounded-2 bg-grey-300">
       <WaveformRecorder
         v-if="recordingState === 'recording' || recordingState === 'recorded'"
         ref="waveformRecorderRef"
@@ -10,7 +10,10 @@
         @record-started="handleRecordStarted"
         @record-stopped="recordingState = 'recorded'"
       />
-      <div v-if="recordingState === 'yetStarted'" class="recorder-waveform-overlay">
+      <div
+        v-if="recordingState === 'yetStarted'"
+        class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 whitespace-nowrap text-grey-800"
+      >
         {{
           $t({
             en: 'Begin recording by clicking the button below',
@@ -19,11 +22,11 @@
         }}
       </div>
     </div>
-    <div v-if="recordingState === 'recorded'" class="volume-slider-container">
+    <div v-if="recordingState === 'recorded'" class="-mb-2 pt-6">
       <VolumeSlider :value="gain" @update:value="handleGainUpdate" />
     </div>
-    <div class="button-container">
-      <div v-if="recordingState === 'yetStarted'" class="icon-button">
+    <div class="mb-2 mt-8 flex justify-center gap-10">
+      <div v-if="recordingState === 'yetStarted'" class="flex flex-col items-center gap-2 text-body">
         <UIButton shape="circle" size="large" icon="microphone" color="danger" @click="recordingState = 'recording'" />
         <span>
           {{
@@ -34,7 +37,7 @@
           }}
         </span>
       </div>
-      <div v-else-if="recordingState === 'recording'" class="icon-button">
+      <div v-else-if="recordingState === 'recording'" class="flex flex-col items-center gap-2 text-body">
         <UIButton shape="circle" size="large" icon="stop" color="danger" @click="stopRecording" />
         <span>
           {{
@@ -46,8 +49,8 @@
         </span>
       </div>
       <template v-else>
-        <div class="icon-button">
-          <div class="icon-button-wrapper">
+        <div class="flex flex-col items-center gap-2 text-body">
+          <div class="flex h-14 items-center">
             <UIButton shape="circle" size="large" icon="reload" color="boring" @click="resetRecording" />
           </div>
           <span>
@@ -59,7 +62,7 @@
             }}
           </span>
         </div>
-        <div class="icon-button">
+        <div class="flex flex-col items-center gap-2 text-body">
           <UIButton
             style="width: 56px; height: 56px"
             shape="circle"
@@ -80,8 +83,8 @@
             }}
           </span>
         </div>
-        <div class="icon-button">
-          <div class="icon-button-wrapper">
+        <div class="flex flex-col items-center gap-2 text-body">
+          <div class="flex h-14 items-center">
             <UIButton shape="circle" size="large" icon="check" color="success" @click="saveRecording" />
           </div>
           <span>
@@ -158,63 +161,3 @@ const resetRecording = () => {
   audioRange.value = { left: 0, right: 1 }
 }
 </script>
-
-<style lang="scss" scoped>
-.container {
-  display: flex;
-  flex-direction: column;
-}
-
-.recorder-waveform-container {
-  background-color: var(--ui-color-grey-300);
-  border-radius: var(--ui-border-radius-2);
-  height: 160px;
-  position: relative;
-  overflow: hidden;
-}
-
-.recorder-waveform-overlay {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  color: var(--ui-color-grey-800);
-  white-space: nowrap;
-}
-
-.recorder-waveform {
-  height: 160px;
-  padding: 0 16px;
-}
-
-.hidden {
-  opacity: 0;
-}
-
-.icon-button-wrapper {
-  display: flex;
-  align-items: center;
-  height: 56px;
-}
-
-.button-container {
-  display: flex;
-  margin-top: 32px;
-  margin-bottom: 8px;
-  gap: 40px;
-  justify-content: center;
-}
-
-.icon-button {
-  display: flex;
-  gap: 8px;
-  flex-direction: column;
-  font-size: 14px;
-  align-items: center;
-}
-
-.volume-slider-container {
-  padding-top: 24px;
-  margin-bottom: -8px;
-}
-</style>
diff --git a/spx-gui/src/components/editor/stage/sound/VolumeSlider.vue b/spx-gui/src/components/editor/stage/sound/VolumeSlider.vue
index 07b37801cf..b2c6a1a087 100644
--- a/spx-gui/src/components/editor/stage/sound/VolumeSlider.vue
+++ b/spx-gui/src/components/editor/stage/sound/VolumeSlider.vue
@@ -1,8 +1,7 @@
 <template>
-  <div class="volume-slider">
-    <UIIcon type="volumeOff" class="volume-icon" />
+  <div class="volume-slider flex items-center gap-2">
+    <UIIcon type="volumeOff" class="text-grey-800" style="width: 24px; height: 24px" />
     <UISlider
-      class="slider"
       color="sound"
       :min="0"
       :max="2"
@@ -11,7 +10,7 @@
       :tooltip="false"
       @update:value="(v) => emit('update:value', v)"
     />
-    <UIIcon type="volumeUp" class="volume-icon" />
+    <UIIcon type="volumeUp" class="text-grey-800" style="width: 24px; height: 24px" />
   </div>
 </template>
 <script setup lang="ts">
@@ -25,16 +24,3 @@ const emit = defineEmits<{
   'update:value': [number]
 }>()
 </script>
-<style scoped lang="scss">
-.volume-slider {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-}
-
-.volume-icon {
-  width: 24px;
-  height: 24px;
-  color: var(--ui-color-grey-800);
-}
-</style>
diff --git a/spx-gui/src/components/editor/stage/sound/waveform/WaveformRangeControl.vue b/spx-gui/src/components/editor/stage/sound/waveform/WaveformRangeControl.vue
index b624eb9786..db4af5273d 100644
--- a/spx-gui/src/components/editor/stage/sound/waveform/WaveformRangeControl.vue
+++ b/spx-gui/src/components/editor/stage/sound/waveform/WaveformRangeControl.vue
@@ -66,7 +66,7 @@ const onMouseMove = (event: MouseEvent) => {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped>
 .record-control-container {
   position: absolute;
   top: 0;
@@ -83,21 +83,24 @@ const onMouseMove = (event: MouseEvent) => {
   background-color: var(--ui-color-yellow-400);
   height: 100%;
   position: absolute;
+}
 
-  &.left {
-    left: 0;
-  }
-  &.right {
-    right: 0;
-  }
-  &.left-fixed {
-    width: 16px;
-    left: -16px;
-  }
-  &.right-fixed {
-    width: 16px;
-    right: -16px;
-  }
+.shaded-area.left {
+  left: 0;
+}
+
+.shaded-area.right {
+  right: 0;
+}
+
+.shaded-area.left-fixed {
+  width: 16px;
+  left: -16px;
+}
+
+.shaded-area.right-fixed {
+  width: 16px;
+  right: -16px;
 }
 
 .selection-area {
diff --git a/spx-gui/src/components/editor/stage/sound/waveform/WaveformWithControls.vue b/spx-gui/src/components/editor/stage/sound/waveform/WaveformWithControls.vue
index 4ff854b8b3..a4d09ee90d 100644
--- a/spx-gui/src/components/editor/stage/sound/waveform/WaveformWithControls.vue
+++ b/spx-gui/src/components/editor/stage/sound/waveform/WaveformWithControls.vue
@@ -1,13 +1,18 @@
 <template>
-  <div class="container">
-    <WaveformDisplay class="waveform" :points="waveformData" :scale="gain" :draw-padding-right="drawPaddingRight" />
+  <div class="relative h-full w-full overflow-hidden rounded-2 bg-grey-300">
+    <WaveformDisplay
+      class="h-full w-full"
+      :points="waveformData"
+      :scale="gain"
+      :draw-padding-right="drawPaddingRight"
+    />
     <WaveformRangeControl
       :value="range"
       @update:value="emit('update:range', $event)"
       @stop-drag="emit('requestPlay')"
     />
-    <div class="cursor-container">
-      <div v-if="progress" class="cursor" :style="progressStyle" />
+    <div class="absolute top-0 right-4 bottom-0 left-4">
+      <div v-if="progress" class="absolute top-0 bottom-0 left-0 w-px bg-grey-800" :style="progressStyle" />
     </div>
   </div>
 </template>
@@ -36,38 +41,3 @@ const progressStyle = computed(() => {
   }
 })
 </script>
-<style lang="scss" scoped>
-.container {
-  position: relative;
-  .waveform {
-    width: 100%;
-    height: 100%;
-  }
-  .waveform-container {
-    padding: 0 16px;
-  }
-  border-radius: 12px;
-  background-color: var(--ui-color-grey-300);
-  overflow: hidden;
-
-  width: 100%;
-  height: 100%;
-}
-
-.cursor {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  width: 1px;
-  background-color: var(--ui-color-grey-800);
-}
-
-.cursor-container {
-  position: absolute;
-  top: 0;
-  left: 16px;
-  bottom: 0;
-  right: 16px;
-}
-</style>
diff --git a/spx-gui/src/components/editor/stage/widget/detail/MonitorDetail.vue b/spx-gui/src/components/editor/stage/widget/detail/MonitorDetail.vue
index b323373d4a..617f9ffdc5 100644
--- a/spx-gui/src/components/editor/stage/widget/detail/MonitorDetail.vue
+++ b/spx-gui/src/components/editor/stage/widget/detail/MonitorDetail.vue
@@ -1,26 +1,26 @@
 <template>
-  <EditorItemDetail class="wrapper" :name="monitor.name" @rename="handleRename">
-    <div class="content">
+  <EditorItemDetail style="background-color: var(--ui-color-grey-100)" :name="monitor.name" @rename="handleRename">
+    <div class="flex justify-center gap-8 py-5">
       <!-- eslint-disable-next-line vue/no-v-html -->
-      <div class="preview" v-html="monitorIcon"></div>
-      <div class="controls">
-        <div class="line">
-          <p class="with-label">
+      <div class="monitor-icon flex h-24 w-24 items-center justify-center rounded-1 bg-grey-300" v-html="mntIcon"></div>
+      <div class="flex flex-col gap-middle">
+        <div class="flex items-center gap-middle">
+          <p class="flex items-center gap-2 break-keep">
             {{ $t({ en: 'Label', zh: '标签' }) }}
             <UITextInput
               v-radar="{ name: 'Label input', desc: 'Input field for monitor label' }"
-              class="input"
+              style="width: 180px"
               :value="monitor.label"
               @update:value="handleLabelUpdate"
             />
           </p>
         </div>
-        <div class="line">
-          <p class="with-label">
+        <div class="flex items-center gap-middle">
+          <p class="flex items-center gap-2 break-keep">
             {{ $t({ en: 'Target', zh: '对象' }) }}
             <UISelect
               v-radar="{ name: 'Target select', desc: 'Select target for monitor value' }"
-              class="input"
+              style="width: 180px"
               :value="monitor.target"
               @update:value="handleTargetUpdate"
             >
@@ -30,11 +30,11 @@
               </UISelectOption>
             </UISelect>
           </p>
-          <p class="with-label">
+          <p class="flex items-center gap-2 break-keep">
             {{ $t({ en: 'Value', zh: '值' }) }}
             <UISelect
               v-radar="{ name: 'Property select', desc: 'Select property for monitor value' }"
-              class="input"
+              style="width: 180px"
               :value="monitor.variableName || null"
               :placeholder="$t({ en: 'Select property', zh: '选择属性' })"
               @update:value="handlePropertyUpdate"
@@ -47,12 +47,12 @@
           </p>
         </div>
         <div class="divider"></div>
-        <div class="line">
-          <p class="with-label">
+        <div class="flex items-center gap-middle">
+          <p class="flex items-center gap-2 break-keep">
             {{ $t({ en: 'Position', zh: '位置' }) }}
             <UINumberInput
               v-radar="{ name: 'X position input', desc: 'Input field for monitor X position' }"
-              class="input"
+              style="width: 180px"
               :value="monitor.x"
               @update:value="handleXUpdate"
             >
@@ -60,7 +60,7 @@
             </UINumberInput>
             <UINumberInput
               v-radar="{ name: 'Y position input', desc: 'Input field for monitor Y position' }"
-              class="input"
+              style="width: 180px"
               :value="monitor.y"
               @update:value="handleYUpdate"
             >
@@ -68,12 +68,12 @@
             </UINumberInput>
           </p>
         </div>
-        <div class="line">
-          <p class="with-label">
+        <div class="flex items-center gap-middle">
+          <p class="flex items-center gap-2 break-keep">
             {{ $t({ en: 'Size', zh: '大小' }) }}
             <UINumberInput
               v-radar="{ name: 'Size input', desc: 'Input field for monitor size' }"
-              class="input"
+              style="width: 180px"
               :min="0"
               :value="sizePercent"
               @update:value="handleSizePercentUpdate"
@@ -82,8 +82,8 @@
             </UINumberInput>
           </p>
         </div>
-        <div class="line">
-          <p class="with-label">
+        <div class="flex items-center gap-middle">
+          <p class="flex items-center gap-2 break-keep">
             {{ $t({ en: 'Show', zh: '显示' }) }}
             <UIButtonGroup
               v-radar="{ name: 'Visibility control', desc: 'Control to set monitor visibility' }"
@@ -124,7 +124,7 @@ import { useRenameWidget } from '@/components/asset'
 import { useEditorCtx } from '@/components/editor/EditorContextProvider.vue'
 import { filterOwnProperties, useCodeEditor } from '@/components/editor/code-editor/spx-code-editor'
 import EditorItemDetail from '../../../common/EditorItemDetail.vue'
-import monitorIcon from '../monitor.svg?raw'
+import mntIcon from '../monitor.svg?raw'
 
 const props = defineProps<{
   monitor: Monitor
@@ -200,39 +200,10 @@ function wrapUpdateHandler<Args extends any[]>(
 }
 </script>
 
-<style lang="scss" scoped>
-.wrapper {
-  background-color: var(--ui-color-grey-100);
-}
-
-.content {
-  padding: 20px 0;
-  display: flex;
-  gap: 32px;
-  justify-content: center;
-}
-
-.preview {
-  flex: 0 0 auto;
-  width: 96px;
-  height: 96px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  border-radius: 8px;
-  background: var(--ui-color-grey-300);
-
-  :deep(svg) {
-    width: 44px;
-    height: 44px;
-  }
-}
-
-.controls {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
+<style scoped>
+.monitor-icon :deep(svg) {
+  width: 44px;
+  height: 44px;
 }
 
 .divider {
@@ -241,21 +212,4 @@ function wrapUpdateHandler<Args extends any[]>(
   height: 1px;
   background: repeating-linear-gradient(90deg, var(--ui-color-grey-500) 0 4px, #0000 0 7px);
 }
-
-.line {
-  display: flex;
-  gap: 16px;
-  align-items: center;
-}
-
-.input {
-  width: 180px;
-}
-
-.with-label {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  word-break: keep-all;
-}
 </style>

From fc300d91721bdc7bb4551c2c8ecffb4d6a2d25ea Mon Sep 17 00:00:00 2001
From: chennan <chennan@qiniu.com>
Date: Thu, 2 Apr 2026 10:55:45 +0800
Subject: [PATCH 08/10] almost done

---
 docs/develop/tailwind-css-migration.md        |  24 +-
 spx-gui/AGENTS.md                             |  74 +++--
 .../asset/preprocessing/common/ImgPreview.vue |  11 +-
 spx-gui/src/components/common/CodeView.vue    | 108 +++---
 .../copilot/custom-elements/HighlightLink.vue |   2 +-
 .../src/components/editor/ProjectEditor.vue   |   2 +-
 .../ui/input-helper/SpxDirectionInput.vue     |  26 +-
 .../ui/input-helper/SpxKeyInput.vue           |  24 +-
 .../spx-color-input/ColorSlider.vue           |   4 +-
 .../spx-color-input/SpxColorInput.vue         |  69 ++--
 .../spx-effect-input/SpxEffectKindInput.vue   |  15 +-
 .../ui/resource/SpxResourceItem.vue           |   2 -
 .../xgo-code-editor/ui/CodeEditorCard.vue     |  10 +-
 .../xgo-code-editor/ui/CodeEditorUI.vue       |  35 +-
 .../xgo-code-editor/ui/MonacoEditor.vue       |   4 +-
 .../xgo-code-editor/ui/ZoomControl.vue        |  31 +-
 .../ui/api-reference/APIReferenceItem.vue     |  67 ++--
 .../ui/api-reference/APIReferenceUI.vue       |  84 ++---
 .../ui/command/CommandIcon.vue                |  14 +-
 .../ui/completion/CompletionCard.vue          |  37 +--
 .../ui/context-menu/ContextMenuTrigger.vue    |  27 +-
 .../ui/definition/DefinitionDetailWrapper.vue |   8 +-
 .../ui/definition/DefinitionIcon.vue          |  14 +-
 .../ui/definition/DefinitionItem.vue          |  13 +-
 .../definition/DefinitionOverviewWrapper.vue  |   2 +-
 .../ui/diagnostics/DiagnosticsUI.vue          |   2 +-
 .../ui/document-tab/DocumentTab.vue           |  38 +--
 .../ui/document-tab/DocumentTabs.vue          |  60 +---
 .../ui/drop-indicator/DropIndicatorUI.vue     |  23 +-
 .../xgo-code-editor/ui/hover/ActionButton.vue |  14 +-
 .../xgo-code-editor/ui/hover/HoverCard.vue    |  34 +-
 .../ui/hover/HoverCardContent.vue             |   8 +-
 .../xgo-code-editor/ui/hover/HoverUI.vue      |   4 +-
 .../ui/inlay-hint/InlayHintUI.vue             |   2 +-
 .../ui/input-helper/BooleanInput.vue          |  37 +--
 .../ui/input-helper/DecimalInput.vue          |   2 +-
 .../ui/input-helper/InputHelper.vue           |  33 +-
 .../ui/input-helper/InputHelperUI.vue         |  26 +-
 .../ui/input-helper/IntegerInput.vue          |   2 +-
 .../ui/input-helper/ResourceInput.vue         |  31 +-
 .../xgo-code-editor/ui/markdown/CodeBlock.vue |  11 +-
 .../ui/markdown/DiagnosticItem.vue            |  38 +--
 .../ui/markdown/InputValuePreview.vue         |  60 +---
 .../ui/markdown/MarkdownView.vue              | 157 ++++-----
 .../components/editor/navbar/EditorNavbar.vue |  86 ++---
 .../navbar/EditorProjectDisplayName.vue       |  48 +--
 .../editor/preview/EditorPreview.vue          | 111 ++-----
 .../sprite/SpriteCollisionEditorModal.vue     |   7 +-
 .../src/components/navbar/NavbarWrapper.vue   |   2 +-
 .../project/runner/ProjectRunner.vue          |  58 +---
 .../project/runner/ProjectRunnerSurface.vue   | 258 ++++++---------
 spx-gui/src/components/ui/UIDivider.vue       |   4 +-
 spx-gui/src/pages/community/project.vue       | 312 +++++-------------
 spx-gui/src/utils/spotlight/SpotlightUI.vue   |  80 ++---
 54 files changed, 784 insertions(+), 1471 deletions(-)

diff --git a/docs/develop/tailwind-css-migration.md b/docs/develop/tailwind-css-migration.md
index 92d48d0e66..1c745d0c0e 100644
--- a/docs/develop/tailwind-css-migration.md
+++ b/docs/develop/tailwind-css-migration.md
@@ -530,21 +530,16 @@ Preferred style:
 - if the wrapper already owns the root layout semantics, use an outer wrapper for positioning concerns such as `absolute`, `top`, `left`, and `z-index`
 - for one-off width/height overrides on wrapper roots such as `UIIcon`, prefer inline `style` when that is the shortest and clearest way to win the cascade
 
-### 10.5. Keep Scrollbar-Reserve Padding And Its Comments In Local CSS
+### 11. Keep Exact Local Values Local, With A Visible TODO
 
-Some scroll containers use asymmetric padding together with `scrollbar-width: thin` so optional scrollbars do not overlap content.
+Some migrated components still need exact local visual values that are not part of the current token system.
 
 Preferred style:
 
-- when the original local CSS includes a comment that explains scrollbar-reserve padding, keep that padding in local CSS instead of moving it fully into Tailwind utilities
-- preserve comments such as "no right padding to allow optional scrollbar" when they still describe a real layout constraint
-- this applies especially to scroll wrappers like list panels or sidebars where `padding-right: 0` is intentional rather than a generic spacing choice
-
-Rule of thumb:
-
-- if `scrollbar-width: thin` and asymmetric padding belong to the same layout constraint, keep them together in the local CSS block
+- keep those values local instead of forcing them into the global theme bridge
+- add a nearby comment such as `TODO: review this ... value` so later cleanup can decide whether the value should remain local or become a token
 
-### 10.6. Flatten `:deep(...)` Selectors In Plain Scoped CSS
+### 12. Flatten `:deep(...)` Selectors In Plain Scoped CSS
 
 When a file is migrated from SCSS to plain scoped CSS, nested `:deep(...)` forms should not be carried over mechanically.
 
@@ -554,15 +549,6 @@ Preferred style:
 - be especially careful in `v-html` or raw-SVG cases, where the descendant content does not receive the component's scoped attribute and depends on the `:deep(...)` selector being compiled correctly
 - keep SCSS-style nesting only in files that still explicitly use SCSS
 
-### 11. Keep Exact Local Values Local, With A Visible TODO
-
-Some migrated components still need exact local visual values that are not part of the current token system.
-
-Preferred style:
-
-- keep those values local instead of forcing them into the global theme bridge
-- add a nearby comment such as `TODO: review this ... value` so later cleanup can decide whether the value should remain local or become a token
-
 ## Recommendation
 
 Tailwind CSS is worth evaluating in `spx-gui`, but only as a constrained utility layer.
diff --git a/spx-gui/AGENTS.md b/spx-gui/AGENTS.md
index f968cabdb6..d87421191b 100644
--- a/spx-gui/AGENTS.md
+++ b/spx-gui/AGENTS.md
@@ -82,38 +82,50 @@ When working with backend unique string identifiers such as `username`, project
 
 ## Styling Preferences
 
-* For business code outside `src/components/ui/`, prefer Tailwind as the default way to implement local layout and surface styling.
-* If business code still needs local authored styles, prefer plain CSS over SCSS.
+### Defaults
+
+* Outside `src/components/ui/`, use Tailwind as the default for local layout and surface styling.
+* Keep styles local to the page/feature/component. Do not move local styles into `src/app.css`.
+* Prefer readable template utilities and remove redundant local style blocks after migration.
+* If local authored styles are still needed, prefer plain CSS over SCSS.
+
+### Boundaries and Source of Truth
+
+* Keep `src/app.css` limited to Tailwind entry setup, theme bridge, and rare project-wide utilities.
+* Keep `src/components/ui/global.css` and `src/components/ui/reset.css` as the base reset/foundation layer (Tailwind preflight stays disabled).
+* Keep `--ui-*` tokens as the source of truth.
+* In Tailwind classes, prefer bridged semantic tokens (for example `text-text`, `text-title`, `bg-primary-100`).
+* In local CSS/SCSS, prefer direct `--ui-*` variables instead of bridged Tailwind variables.
+
+### Responsive and Theme Rules
+
+* Keep breakpoints in `src/app.css` aligned with `src/components/ui/responsive.ts`.
+* Use only `tablet`, `desktop`, and `desktop-large` responsive names.
+* Prefer responsive CSS/Tailwind variants over `useResponsive()`; keep `useResponsive()` for non-style runtime logic.
+* Keep Tailwind theme namespaces reset to project tokens only (color, shadow, font, text, radius, etc.).
+
+### When Local CSS/SCSS Is Better
+
+* Keep local CSS/SCSS for `:deep(...)`, generated content, third-party DOM overrides, and complex stateful widgets.
+* Prefer plain local CSS over complex Tailwind descendant/arbitrary selectors for cross-component or slot-content styling.
+* Preserve semantic hook classes used by parent selectors or slots (for example `.corner-menu`, `.course-item-mini`).
+* For newly added components, avoid introducing `:deep(...)` selectors and cross-file hook classes when possible, since they increase maintenance cost.
+* Do not force full Tailwind conversion when a small local style block is clearer.
+
+### Practical Migration Notes
+
+* Preserve exact `flex: <grow> <shrink> <basis>` semantics with `flex-[<grow>_<shrink>_<basis>]`.
+* Prefer `:style` for one-off values when clearer than Tailwind arbitrary utilities.
+* For important/non-obvious background assets, prefer TS imports and inline `backgroundImage` binding.
+* For `UIImg`, `UIIcon`, and similar wrappers, verify root-style conflicts; use an outer layout wrapper if needed.
+* In plain `<style scoped>`, flatten `:deep(...)` selectors (for example `.preview :deep(svg)`).
+* Keep single-use values local; only add setup variables when reused/computed or clearly improving readability.
+* Preserve meaningful existing comments/TODOs. For exact local non-token values, keep them local and add a nearby `TODO` for later tokenization review.
+
+### UI Package Transitional Rule
+
+* In `src/components/ui/`, the long-term direction is still Tailwind/plain CSS, but local SCSS is allowed temporarily when it is clearly the most readable option.
 * Do not add or keep business-code imports of SCSS helpers from `src/components/ui/`.
-* For `src/components/ui/`, the long-term direction is the same, but this phase still allows local SCSS where it remains the clearest implementation.
-* Keep [src/app.css](src/app.css) limited to Tailwind entry setup, the theme bridge, and rare project-wide utilities.
-* Tailwind preflight is intentionally disabled in `src/app.css`. Keep [src/components/ui/global.css](src/components/ui/global.css) and [src/components/ui/reset.css](src/components/ui/reset.css) as the project's base layer for reset and foundation styles.
-* Do not move page-local or feature-local styles into `src/app.css` just because they are written with Tailwind.
-* Keep page-specific dimensions, transforms, colors, and card/banner styling local to the relevant page or component.
-* Keep the existing `--ui-*` design token system as the source of truth.
-* In Tailwind utility classes, prefer the bridged semantic tokens such as `text-text`, `text-title`, and `bg-primary-100`.
-* In local CSS or SCSS rules, prefer using the original `--ui-*` variables directly instead of routing those rules back through Tailwind bridge variables.
-* For theme namespaces already covered by the design system, such as color, shadow, font, font-size, radius, and line-height, reset Tailwind's default values in `src/app.css` and expose only the project-specific values intended for use in this repo.
-* Keep the project breakpoint mapping in `src/app.css` aligned with `src/components/ui/responsive.ts`.
-* Reset Tailwind's default breakpoint names in `src/app.css` and use only the project-specific names `tablet`, `desktop`, and `desktop-large` in responsive classes.
-* For responsive styling, prefer Tailwind responsive variants over runtime `useResponsive()` checks.
-* Keep `useResponsive()` for non-style logic only, such as changing fetched counts or other runtime behavior that CSS cannot express.
-* Prefer Tailwind for straightforward layout and surface styling: flex, grid, spacing, sizing, alignment, overflow, simple typography, and simple hover states.
-* When original CSS uses `flex: <grow> <shrink> <basis>`, preserve it with `flex-[<grow>_<shrink>_<basis>]` instead of decomposing it into partial utilities such as `shrink-0`.
-* When Tailwind classes stay readable, write them directly in the template and remove the local style block after verification.
-* Keep local CSS or SCSS for deep selectors, generated content, third-party DOM overrides, and complex stateful widgets.
-* Preserve semantic hook classes that are consumed by parent selectors, slot content, or `:deep(...)` rules. Do not remove classes such as `.corner-menu` or `.course-item-mini` just because the element's own visual styles moved to Tailwind.
-* Prefer plain local CSS over Tailwind arbitrary descendant selectors for cross-component styling, slot-content targeting, and `:deep(...)` behavior. Keep Tailwind for the authored layout, but keep these cross-component hooks easy to read and audit.
-* Do not force a file to become fully Tailwind if a small amount of local CSS or SCSS remains the clearest expression.
-* Use `:style` for one-off values that are clearer inline than as Tailwind arbitrary values or custom utilities.
-* For important or non-obvious background assets, prefer TypeScript imports plus inline `backgroundImage` binding over Tailwind `bg-[url(...)]` classes.
-* Before styling `UIImg`, `UIIcon`, or similar wrappers with root-level positioning or sizing utilities, check whether the component already styles its own root element. If those internal root styles conflict, prefer an outer wrapper for layout and inline `style` for one-off width/height overrides.
-* If a scroll container keeps `scrollbar-width: thin` together with asymmetric padding to reserve optional scrollbar space, keep that padding in local CSS and preserve any existing explanatory comment instead of forcing the padding into template utilities.
-* In plain `<style scoped>`, flatten `:deep(...)` selectors such as `.preview :deep(svg)` instead of carrying over nested SCSS-style forms like `.preview { :deep(svg) { ... } }`, especially for `v-html` or injected SVG content.
-* Do not introduce setup variables for single-use style values unless they are reused, computed, or materially improve readability.
-* When a non-token visual value needs to remain exact and local, keep it local instead of forcing it into the global token bridge. Add a nearby comment such as `TODO: review this ... value` so it is visible in later design cleanup or tokenization work.
-* When extending the Tailwind theme bridge in `src/app.css`, choose token names that do not collide with Tailwind defaults or existing UI-library class names. Define text-size tokens before using named utilities like `text-24`, and use `--text-*-line-height` when a named text utility should carry a default line-height.
-* Preserve existing comments and TODOs during style migration when they still explain a real styling constraint or follow-up.
 
 ### Menu Item Text Guidelines
 
diff --git a/spx-gui/src/components/asset/preprocessing/common/ImgPreview.vue b/spx-gui/src/components/asset/preprocessing/common/ImgPreview.vue
index f9d3464463..9e02106f9d 100644
--- a/spx-gui/src/components/asset/preprocessing/common/ImgPreview.vue
+++ b/spx-gui/src/components/asset/preprocessing/common/ImgPreview.vue
@@ -1,6 +1,6 @@
 <template>
-  <section ref="wrapperRef" class="img-preview flex w-full items-center justify-center" :style="wrapperStyle">
-    <canvas ref="canvasRef" class="bg-bottom-left bg-repeat bg-[url('./img-bg.svg')]"></canvas>
+  <section ref="wrapperRef" class="flex w-full items-center justify-center [&+&]:mt-5" :style="wrapperStyle">
+    <canvas ref="canvasRef" class="bg-bottom-left bg-repeat" :style="{ backgroundImage: `url(${imgBgUrl})` }"></canvas>
   </section>
 </template>
 
@@ -10,6 +10,7 @@ import { useFileImg } from '@/utils/file'
 import { useContentSize } from '@/utils/dom'
 import { getImgDrawingCtx } from '@/utils/canvas'
 import type { File } from '@/models/common/file'
+import imgBgUrl from './img-bg.svg'
 
 const props = defineProps<{
   file: File
@@ -66,9 +67,3 @@ defineExpose({
   }
 })
 </script>
-
-<style scoped>
-.img-preview + .img-preview {
-  margin-top: 20px;
-}
-</style>
diff --git a/spx-gui/src/components/common/CodeView.vue b/spx-gui/src/components/common/CodeView.vue
index 22b79243e7..21a4f12483 100644
--- a/spx-gui/src/components/common/CodeView.vue
+++ b/spx-gui/src/components/common/CodeView.vue
@@ -132,89 +132,97 @@ function stringifyElCnt(el: ElementContent): string {
   <code v-if="mode === 'inline'" class="code-view" :style="{ tabSize }" v-html="codeHtml"></code>
   <div
     v-else
-    class="code-view block"
+    class="code-view is-block"
     :class="{ 'has-line-numbers': hasLineNumbers, addition, deletion }"
     :style="{ tabSize }"
     v-html="codeHtml"
   ></div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .code-view {
   font-family: var(--ui-font-family-code);
   font-size: 1em;
+}
 
-  :deep(.param-inlay-hint) {
-    color: var(--ui-color-hint-2) !important;
-    &::after {
-      content: ':';
-    }
-  }
+.code-view :deep(.param-inlay-hint) {
+  color: var(--ui-color-hint-2) !important;
 }
 
-.block :deep(pre) {
+.code-view :deep(.param-inlay-hint)::after {
+  content: ':';
+}
+
+.is-block :deep(pre) {
   min-width: fit-content;
 }
 
 .has-line-numbers {
   container-type: inline-size;
+}
 
-  :deep(pre) {
-    position: relative;
-    padding-left: 26px;
-    counter-reset: step;
-    counter-increment: step 0;
-  }
+.has-line-numbers :deep(pre) {
+  position: relative;
+  padding-left: 26px;
+  counter-reset: step;
+  counter-increment: step 0;
+}
+
+.has-line-numbers :deep(.line::before) {
+  content: counter(step);
+  counter-increment: step;
+  position: absolute;
+  left: 0;
+  width: 18px;
+  display: inline-block;
+  text-align: right;
+  color: #34819b;
+}
 
-  :deep(.line::before) {
-    content: counter(step);
-    counter-increment: step;
-    position: absolute;
-    left: 0;
-    width: 18px;
-    display: inline-block;
-    text-align: right;
-    color: #34819b;
+/* If the container is too narrow, hide line numbers. */
+@container (width < 15em) {
+  .has-line-numbers :deep(pre) {
+    padding-left: 0;
   }
 
-  // If the container is too narrow, hide line numbers
-  @container (width < 15em) {
-    :deep(pre) {
-      padding-left: 0;
-    }
-    :deep(.line::before) {
-      content: none;
-    }
+  .has-line-numbers :deep(.line::before) {
+    content: none;
   }
 }
 
 .addition,
 .deletion {
-  :deep(> pre) {
-    position: relative;
-    padding-left: 24px;
-    // Disable default background and show background from parent (addition/deletion)
-    background-color: transparent !important;
-  }
-  :deep(.line::before) {
-    position: absolute;
-    left: 8px;
-    width: 1em;
-    display: inline-block;
-  }
+}
+
+.addition :deep(> pre),
+.deletion :deep(> pre) {
+  position: relative;
+  padding-left: 24px;
+  /* Disable default background and show background from parent (addition/deletion). */
+  background-color: transparent !important;
+}
+
+.addition :deep(.line::before),
+.deletion :deep(.line::before) {
+  position: absolute;
+  left: 8px;
+  width: 1em;
+  display: inline-block;
 }
 
 .addition {
   background: var(--ui-color-green-100);
-  :deep(code .line::before) {
-    content: '+';
-  }
+}
+
+.addition :deep(code .line::before) {
+  content: '+';
 }
 
 .deletion {
   background: var(--ui-color-red-100);
-  :deep(code .line::before) {
-    content: '-';
-  }
+}
+
+.deletion :deep(code .line::before) {
+  content: '-';
 }
 </style>
diff --git a/spx-gui/src/components/copilot/custom-elements/HighlightLink.vue b/spx-gui/src/components/copilot/custom-elements/HighlightLink.vue
index f1c6fa9cf4..4fe05da38e 100644
--- a/spx-gui/src/components/copilot/custom-elements/HighlightLink.vue
+++ b/spx-gui/src/components/copilot/custom-elements/HighlightLink.vue
@@ -61,7 +61,7 @@ const { fn: handleClick } = useMessageHandle(
 <template>
   <button
     type="button"
-    class="inline-block w-fit cursor-pointer rounded-[4px] border-none bg-turquoise-main px-1.25 py-0.5 text-13 font-semibold text-grey-100 outline-none hover:bg-turquoise-400 active:bg-turquoise-600"
+    class="inline-block w-fit cursor-pointer rounded-[4px] border-none bg-turquoise-main px-1.25 py-0.5 text-13/[normal] font-semibold text-grey-100 outline-none hover:bg-turquoise-400 active:bg-turquoise-600"
     @click="handleClick"
   >
     <slot></slot>
diff --git a/spx-gui/src/components/editor/ProjectEditor.vue b/spx-gui/src/components/editor/ProjectEditor.vue
index c487d7310c..1504410212 100644
--- a/spx-gui/src/components/editor/ProjectEditor.vue
+++ b/spx-gui/src/components/editor/ProjectEditor.vue
@@ -1,6 +1,6 @@
 <template>
   <!-- Using v-show preserves some page states, e.g. code editor scroll pos -->
-  <!-- overflow-visible: avoid cutting dropdown menu of CodeTextEditor (monaco) -->
+  <!-- Using overflow-visible class to avoid cutting dropdown menu of CodeTextEditor (monaco) -->
   <UICard
     v-show="isPreviewMode"
     v-radar="{ name: `Editor for ${selected.type}`, desc: `Main editor panel for editing ${selected.type}` }"
diff --git a/spx-gui/src/components/editor/code-editor/spx-code-editor/ui/input-helper/SpxDirectionInput.vue b/spx-gui/src/components/editor/code-editor/spx-code-editor/ui/input-helper/SpxDirectionInput.vue
index d1cc91e806..3895b419b5 100644
--- a/spx-gui/src/components/editor/code-editor/spx-code-editor/ui/input-helper/SpxDirectionInput.vue
+++ b/spx-gui/src/components/editor/code-editor/spx-code-editor/ui/input-helper/SpxDirectionInput.vue
@@ -30,13 +30,12 @@ function handleSubmit() {
   <div class="circle-container">
     <AnglePicker :model-value="value" @update:model-value="handleValueUpdate" />
   </div>
-  <div class="input-container">
+  <div class="flex items-center">
     <UINumberInput
       :value="value"
-      class="input"
+      class="input w-15.5 self-stretch text-center"
       :min="-180"
       :max="180"
-      :style="{ alignSelf: 'stretch' }"
       autofocus
       @update:value="handleValueUpdate"
       @keyup.enter="handleSubmit"
@@ -44,20 +43,11 @@ function handleSubmit() {
   </div>
 </template>
 
-<style lang="scss" scoped>
-.input-container {
-  display: flex;
-  align-items: center;
-}
-.input {
-  width: 62px;
-  text-align: center;
-
-  :deep(.n-input .n-input-wrapper) {
-    // Correcting uneven left/right padding in UINumberInput
-    // TODO: Dig and fix padding inconsistency in UINumberInput component
-    padding-left: 8px;
-    padding-right: 8px;
-  }
+<style scoped>
+.input :deep(.n-input .n-input-wrapper) {
+  /* Correcting uneven left/right padding in UINumberInput. */
+  /* TODO: Dig and fix padding inconsistency in UINumberInput component. */
+  padding-left: 8px;
+  padding-right: 8px;
 }
 </style>
diff --git a/spx-gui/src/components/editor/code-editor/spx-code-editor/ui/input-helper/SpxKeyInput.vue b/spx-gui/src/components/editor/code-editor/spx-code-editor/ui/input-helper/SpxKeyInput.vue
index f7612aefe6..37e12a01f0 100644
--- a/spx-gui/src/components/editor/code-editor/spx-code-editor/ui/input-helper/SpxKeyInput.vue
+++ b/spx-gui/src/components/editor/code-editor/spx-code-editor/ui/input-helper/SpxKeyInput.vue
@@ -49,34 +49,16 @@ function handleKeyDown(e: KeyboardEvent) {
 </script>
 
 <template>
-  <div class="spx-key-input">
+  <div class="flex self-stretch flex-col gap-1">
     <UITextInput
       v-radar="{ name: 'Key input', desc: 'Input field for detecting key press' }"
-      class="input"
+      class="text-center"
       :value="text"
       autofocus
       @keydown="handleKeyDown"
     />
-    <p class="tip">
+    <p class="text-center text-hint-1">
       {{ $t({ en: 'Press desired key', zh: '按下你想输入的按键' }) }}
     </p>
   </div>
 </template>
-
-<style scoped lang="scss">
-.spx-key-input {
-  align-self: stretch;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.tip {
-  text-align: center;
-  color: var(--ui-color-hint-1);
-}
-
-.input {
-  text-align: center;
-}
-</style>
diff --git a/spx-gui/src/components/editor/code-editor/spx-code-editor/ui/input-helper/spx-color-input/ColorSlider.vue b/spx-gui/src/components/editor/code-editor/spx-code-editor/ui/input-helper/spx-color-input/ColorSlider.vue
index 7ef4bac6a3..9270dc239e 100644
--- a/spx-gui/src/components/editor/code-editor/spx-code-editor/ui/input-helper/spx-color-input/ColorSlider.vue
+++ b/spx-gui/src/components/editor/code-editor/spx-code-editor/ui/input-helper/spx-color-input/ColorSlider.vue
@@ -100,7 +100,7 @@ function handleBarClick(e: MouseEvent) {
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .color-slider {
   position: relative;
   width: 100%;
@@ -126,7 +126,7 @@ function handleBarClick(e: MouseEvent) {
   height: 30px;
   border-radius: 50%;
   border: 5px solid #fff;
-  box-shadow: 0px 12px 20px rgba(14, 18, 27, 0.12);
+  box-shadow: 0 12px 20px rgba(14, 18, 27, 0.12);
   transition: background-color 0.3s ease;
 }
 </style>
diff --git a/spx-gui/src/components/editor/code-editor/spx-code-editor/ui/input-helper/spx-color-input/SpxColorInput.vue b/spx-gui/src/components/editor/code-editor/spx-code-editor/ui/input-helper/spx-color-input/SpxColorInput.vue
index e7657770c6..59eb37428e 100644
--- a/spx-gui/src/components/editor/code-editor/spx-code-editor/ui/input-helper/spx-color-input/SpxColorInput.vue
+++ b/spx-gui/src/components/editor/code-editor/spx-code-editor/ui/input-helper/spx-color-input/SpxColorInput.vue
@@ -98,11 +98,11 @@ function handleSubmit() {
 </script>
 
 <template>
-  <div class="spx-color-input">
-    <section class="sliders">
+  <div class="flex w-78 flex-col gap-3">
+    <section class="flex flex-col gap-2">
       <div class="slider-wrapper">
-        <h5 class="slider-title">
-          {{ $t({ en: 'Hue: ', zh: '色相：' }) }}<span class="slider-value">{{ hue }}</span>
+        <h5 class="text-12">
+          {{ $t({ en: 'Hue: ', zh: '色相：' }) }}<span class="text-title">{{ hue }}</span>
         </h5>
         <ColorSlider
           v-model:value="hue"
@@ -110,8 +110,8 @@ function handleSubmit() {
         />
       </div>
       <div class="slider-wrapper">
-        <h5 class="slider-title">
-          {{ $t({ en: 'Saturation: ', zh: '饱和度：' }) }}<span class="slider-value">{{ saturation }}</span>
+        <h5 class="text-12">
+          {{ $t({ en: 'Saturation: ', zh: '饱和度：' }) }}<span class="text-title">{{ saturation }}</span>
         </h5>
         <ColorSlider
           v-model:value="saturation"
@@ -119,8 +119,8 @@ function handleSubmit() {
         />
       </div>
       <div class="slider-wrapper">
-        <h5 class="slider-title">
-          {{ $t({ en: 'Brightness: ', zh: '亮度：' }) }}<span class="slider-value">{{ brightness }}</span>
+        <h5 class="text-12">
+          {{ $t({ en: 'Brightness: ', zh: '亮度：' }) }}<span class="text-title">{{ brightness }}</span>
         </h5>
         <ColorSlider
           v-model:value="brightness"
@@ -129,52 +129,35 @@ function handleSubmit() {
       </div>
     </section>
     <UIDivider />
-    <section class="inputs">
+    <section class="flex gap-2">
       <UIButton v-if="isEyeDropperSupported" variant="stroke" color="boring" @click="handleOpenEyeDropper">
         <template #icon>
           <UIIcon type="eyedrop" />
         </template>
       </UIButton>
-      <UINumberInput v-model:value="hue" class="input" :min="0" :max="100" :step="1" @keyup.enter="handleSubmit">
+      <UINumberInput v-model:value="hue" class="flex-[1_1_0]" :min="0" :max="100" :step="1" @keyup.enter="handleSubmit">
         <template #prefix>H</template>
       </UINumberInput>
-      <UINumberInput v-model:value="saturation" class="input" :min="0" :max="100" :step="1" @keyup.enter="handleSubmit">
+      <UINumberInput
+        v-model:value="saturation"
+        class="flex-[1_1_0]"
+        :min="0"
+        :max="100"
+        :step="1"
+        @keyup.enter="handleSubmit"
+      >
         <template #prefix>S</template>
       </UINumberInput>
-      <UINumberInput v-model:value="brightness" class="input" :min="0" :max="100" :step="1" @keyup.enter="handleSubmit">
+      <UINumberInput
+        v-model:value="brightness"
+        class="flex-[1_1_0]"
+        :min="0"
+        :max="100"
+        :step="1"
+        @keyup.enter="handleSubmit"
+      >
         <template #prefix>B</template>
       </UINumberInput>
     </section>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.spx-color-input {
-  width: 312px;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.sliders {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.slider-title {
-  font-size: 12px;
-  .slider-value {
-    color: var(--ui-color-title);
-  }
-}
-
-.inputs {
-  display: flex;
-  gap: 8px;
-}
-
-.input {
-  flex: 1 1 0;
-}
-</style>
diff --git a/spx-gui/src/components/editor/code-editor/spx-code-editor/ui/input-helper/spx-effect-input/SpxEffectKindInput.vue b/spx-gui/src/components/editor/code-editor/spx-code-editor/ui/input-helper/spx-effect-input/SpxEffectKindInput.vue
index 5c8949c044..2a0fdd6a36 100644
--- a/spx-gui/src/components/editor/code-editor/spx-code-editor/ui/input-helper/spx-effect-input/SpxEffectKindInput.vue
+++ b/spx-gui/src/components/editor/code-editor/spx-code-editor/ui/input-helper/spx-effect-input/SpxEffectKindInput.vue
@@ -21,7 +21,7 @@ const modelValue = defineModel<string>('value')
 </script>
 
 <template>
-  <ul class="items">
+  <ul class="w-94 max-h-70 overflow-y-auto flex-none flex flex-wrap content-start gap-2">
     <SpxEffectKindItem
       v-for="item in effectKinds"
       :key="item.name"
@@ -32,16 +32,3 @@ const modelValue = defineModel<string>('value')
     />
   </ul>
 </template>
-
-<style lang="scss" scoped>
-.items {
-  width: 376px;
-  max-height: 280px;
-  overflow-y: auto;
-  flex: 0 0 auto;
-  display: flex;
-  flex-wrap: wrap;
-  align-content: flex-start;
-  gap: 8px;
-}
-</style>
diff --git a/spx-gui/src/components/editor/code-editor/spx-code-editor/ui/resource/SpxResourceItem.vue b/spx-gui/src/components/editor/code-editor/spx-code-editor/ui/resource/SpxResourceItem.vue
index 58e29a9407..cab4139f24 100644
--- a/spx-gui/src/components/editor/code-editor/spx-code-editor/ui/resource/SpxResourceItem.vue
+++ b/spx-gui/src/components/editor/code-editor/spx-code-editor/ui/resource/SpxResourceItem.vue
@@ -62,5 +62,3 @@ const name = computed(() => {
   <WidgetItem v-else-if="model != null && isWidget(model)" :widget="model" :selectable="selectable" color="primary" />
   <div v-else>{{ $t({ zh: `未知资源（${name}）`, en: `Unknown resource (${name})` }) }}</div>
 </template>
-
-<style lang="scss" scoped></style>
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/CodeEditorCard.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/CodeEditorCard.vue
index 78566b865d..29009b957f 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/CodeEditorCard.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/CodeEditorCard.vue
@@ -1,13 +1,5 @@
 <template>
-  <div class="code-editor-card">
+  <div class="rounded-1 bg-grey-100" style="box-shadow: 0 8px 28px 8px rgba(36, 41, 47, 0.08)">
     <slot></slot>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.code-editor-card {
-  border-radius: var(--ui-border-radius-1);
-  background: var(--ui-color-grey-100);
-  box-shadow: 0px 8px 28px 8px rgba(36, 41, 47, 0.08);
-}
-</style>
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/CodeEditorUI.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/CodeEditorUI.vue
index 2659a8aafc..df59ade01c 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/CodeEditorUI.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/CodeEditorUI.vue
@@ -309,7 +309,7 @@ providePopupContainer(codeEditorEl)
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .code-editor {
   position: relative;
   flex: 1 1 0;
@@ -326,10 +326,10 @@ providePopupContainer(codeEditorEl)
   display: flex;
   flex-direction: column;
   border-right: 1px solid var(--ui-color-dividing-line-2);
+}
 
-  .api-reference {
-    flex: 1 1 0;
-  }
+.sidebar .api-reference {
+  flex: 1 1 0;
 }
 
 .resize-handle {
@@ -340,13 +340,14 @@ providePopupContainer(codeEditorEl)
   z-index: 10;
   cursor: col-resize;
   transition: background-color 0.2s;
+}
 
-  &:hover {
-    background-color: rgba(36, 41, 47, 0.05);
-  }
-  &.active {
-    background-color: rgba(36, 41, 47, 0.1);
-  }
+.resize-handle:hover {
+  background-color: rgba(36, 41, 47, 0.05);
+}
+
+.resize-handle.active {
+  background-color: rgba(36, 41, 47, 0.1);
 }
 
 .monaco-editor-conflict-free {
@@ -364,14 +365,14 @@ providePopupContainer(codeEditorEl)
   flex-direction: column;
   justify-content: space-between;
   gap: 40px;
+}
 
-  .document-tabs {
-    flex: 0 1 auto;
-    min-height: 0;
-  }
+.right-sidebar .document-tabs {
+  flex: 0 1 auto;
+  min-height: 0;
+}
 
-  .zoom-control {
-    flex: 0 0 auto;
-  }
+.right-sidebar .zoom-control {
+  flex: 0 0 auto;
 }
 </style>
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/MonacoEditor.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/MonacoEditor.vue
index 7a660f63c4..532a46c598 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/MonacoEditor.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/MonacoEditor.vue
@@ -98,9 +98,9 @@ watchEffect(async (onClenaup) => {
   <div ref="editorElRef" class="monaco-editor-conflict-free"></div>
 </template>
 
-<style lang="scss">
+<style>
 .monaco-editor-conflict-free > .monaco-editor {
-  // remove the default outline of monaco editor
+  /* Remove the default outline of Monaco editor. */
   outline: none;
 }
 </style>
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/ZoomControl.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/ZoomControl.vue
index 73ad6f0172..c66d8a2f60 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/ZoomControl.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/ZoomControl.vue
@@ -11,7 +11,7 @@ const emit = defineEmits<{
 </script>
 
 <template>
-  <div class="zoomer">
+  <div class="flex flex-col items-center gap-1">
     <!-- eslint-disable vue/no-v-html -->
     <button
       v-radar="{ name: 'Zoom in', desc: 'Zoom in the code editor' }"
@@ -37,33 +37,10 @@ const emit = defineEmits<{
   </div>
 </template>
 
-<style lang="scss" scoped>
-.zoomer {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 4px;
-}
+<style scoped>
+@reference "../../../../../app.css";
 
 .zoom-btn {
-  width: 40px;
-  height: 40px;
-  padding: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: none;
-  cursor: pointer;
-  border-radius: 12px;
-  color: var(--ui-color-text);
-  background: none;
-  transition: background-color 0.2s;
-
-  &:hover {
-    background-color: var(--ui-color-grey-300);
-  }
-  &:active {
-    background-color: var(--ui-color-grey-400);
-  }
+  @apply flex h-10 w-10 cursor-pointer items-center justify-center rounded-2 border-0 bg-transparent p-0 text-text transition-colors hover:bg-grey-300 active:bg-grey-400;
 }
 </style>
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/api-reference/APIReferenceItem.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/api-reference/APIReferenceItem.vue
index 98ff658874..84e648e672 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/api-reference/APIReferenceItem.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/api-reference/APIReferenceItem.vue
@@ -113,16 +113,16 @@ function handleMouseUp(e: MouseEvent) {
         @mouseup.passive="handleMouseUp"
         @click="handleInsert"
       >
-        <DefinitionOverviewWrapper class="overview" :kind="item.kind" :inlay-hints="parsed.inlayHints">{{
-          parsed.overview
-        }}</DefinitionOverviewWrapper>
+        <DefinitionOverviewWrapper class="overview" :kind="item.kind" :inlay-hints="parsed.inlayHints">
+          {{ parsed.overview }}
+        </DefinitionOverviewWrapper>
       </li>
     </template>
     <HoverCard :actions="hoverCardActions" @action="hideDropdown">
       <HoverCardContent>
-        <DefinitionOverviewWrapper :kind="item.kind" :inlay-hints="parsed.inlayHints">{{
-          parsed.overview
-        }}</DefinitionOverviewWrapper>
+        <DefinitionOverviewWrapper :kind="item.kind" :inlay-hints="parsed.inlayHints">
+          {{ parsed.overview }}
+        </DefinitionOverviewWrapper>
         <DefinitionDetailWrapper>
           <MarkdownView v-bind="item.detail" />
         </DefinitionDetailWrapper>
@@ -131,46 +131,49 @@ function handleMouseUp(e: MouseEvent) {
   </UIDropdown>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .api-reference-item {
-  padding: 1px 7px;
   align-self: flex-start;
   max-width: 100%;
+  padding: 1px 7px;
   border-radius: var(--ui-border-radius-1);
   border: 1px solid var(--ui-color-grey-400);
   background: var(--ui-color-grey-100);
-  box-shadow: 0px 1px 8px 0px rgba(10, 13, 20, 0.05);
-  transition: 0.2s;
+  box-shadow: 0 1px 8px 0 rgba(10, 13, 20, 0.05);
+  transition: all 0.2s;
   cursor: pointer;
-  scroll-margin-top: 42px; // 42px for sticky title, to ensure the item correctly scrolled-into-view
-  scroll-margin-bottom: 16px; // with 16px offset it is easier to be found when scrolled into view
-
-  // Preserve `border-radius` when dragging, see details: https://github.com/react-dnd/react-dnd/issues/788
+  /* 42px for sticky title, to ensure the item correctly scrolled into view. */
+  scroll-margin-top: 42px;
+  /* With 16px offset it is easier to find when scrolled into view. */
+  scroll-margin-bottom: 16px;
+  /* Preserve `border-radius` when dragging, see details: https://github.com/react-dnd/react-dnd/issues/788 */
   transform: translate(0, 0);
+}
 
-  &:hover {
-    background: var(--ui-color-grey-300);
-    box-shadow: 0px 1px 2px 0px rgba(10, 13, 20, 0.03);
-  }
+.api-reference-item:hover {
+  background: var(--ui-color-grey-300);
+  box-shadow: 0 1px 2px 0 rgba(10, 13, 20, 0.03);
+}
 
-  &.before-dragging {
-    // Adjust transparency for dragging to avoid visual obstruction
-    background-color: rgba(from var(--ui-color-grey-300) r g b / 0.6);
-    .overview {
-      opacity: 0.6;
-    }
-  }
+.api-reference-item.before-dragging {
+  /* Adjust transparency for dragging to avoid visual obstruction */
+  background-color: rgba(from var(--ui-color-grey-300) r g b / 0.6);
+}
+
+.api-reference-item.before-dragging .overview {
+  opacity: 0.6;
 }
 
 .overview {
+  padding-top: 2px;
+  padding-bottom: 1px;
   word-break: break-all;
-  padding: 2px 0 1px;
+}
 
-  :deep(> code) {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    color: var(--ui-color-hint-2);
-  }
+.overview :deep(> code) {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--ui-color-hint-2);
 }
 </style>
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/api-reference/APIReferenceUI.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/api-reference/APIReferenceUI.vue
index 024fca7f6e..41845662ec 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/api-reference/APIReferenceUI.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/api-reference/APIReferenceUI.vue
@@ -1,4 +1,7 @@
 <script lang="ts">
+import { type LocaleMessage } from '@/utils/i18n'
+import type { APIReferenceItem } from '.'
+
 type SubCategory = {
   id: string
   label: LocaleMessage
@@ -21,13 +24,12 @@ function belongs(item: APIReferenceItem, mcid: string, scid: string) {
 <script setup lang="ts">
 import { throttle } from 'lodash'
 import { computed, ref, shallowRef, watch, watchEffect } from 'vue'
-import { type LocaleMessage } from '@/utils/i18n'
 import { ActionException, Cancelled } from '@/utils/exception'
 import { getCleanupSignal } from '@/utils/disposable'
 import { untilTaskScheduled } from '@/utils/utils'
 import { UIError } from '@/components/ui'
 import { stringifyDefinitionId, type DefinitionDocumentationItem } from '../../common'
-import type { APIReferenceController, APIReferenceItem } from '.'
+import type { APIReferenceController } from '.'
 import APIReferenceItemComp from './APIReferenceItem.vue'
 import { useRegisterUpdateRouteLoaded } from '@/utils/route-loading'
 
@@ -162,7 +164,7 @@ function handleCategoryClick(id: string) {
           v-for="c in categoriesComputed"
           :key="c.id"
           class="category"
-          :class="{ active: c.id === activeCategoryIdRef }"
+          :data-active="c.id === activeCategoryIdRef || null"
           :style="{ '--category-color': c.color }"
           @click="handleCategoryClick(c.id)"
         >
@@ -190,7 +192,7 @@ function handleCategoryClick(id: string) {
   </section>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .api-reference-ui {
   display: flex;
   justify-content: stretch;
@@ -217,23 +219,23 @@ function handleCategoryClick(id: string) {
   color: var(--category-color);
   cursor: pointer;
   transition: 0.1s;
+}
 
-  &.active {
-    color: var(--ui-color-grey-100);
-    background-color: var(--category-color);
-  }
+.category[data-active='true'] {
+  color: var(--ui-color-grey-100);
+  background-color: var(--category-color);
+}
 
-  .icon {
-    width: 24px;
-    height: 24px;
-  }
+.category .icon {
+  width: 24px;
+  height: 24px;
+}
 
-  .label {
-    margin-top: 2px;
-    text-align: center;
-    font-size: 10px;
-    line-height: 1.6;
-  }
+.category .label {
+  margin-top: 2px;
+  text-align: center;
+  font-size: 10px;
+  line-height: 1.6;
 }
 
 .items-wrapper {
@@ -241,32 +243,32 @@ function handleCategoryClick(id: string) {
   padding: 0 16px 12px;
   overflow-y: auto;
   scrollbar-width: thin;
+}
 
-  .subcategory-wrapper {
-    border-bottom: 1px dashed var(--ui-color-grey-500);
-  }
+.items-wrapper .subcategory-wrapper {
+  border-bottom: 1px dashed var(--ui-color-grey-500);
+}
 
-  .category-wrapper:last-child .subcategory-wrapper:last-child {
-    padding-bottom: 0;
-    border-bottom: none;
-  }
+.items-wrapper .category-wrapper:last-child .subcategory-wrapper:last-child {
+  padding-bottom: 0;
+  border-bottom: none;
+}
 
-  .title {
-    position: sticky;
-    z-index: 10;
-    top: 0;
-    padding: 12px 0;
-    font-size: 12px;
-    line-height: 1.5;
-    color: var(--ui-color-hint-2);
-    background-color: var(--ui-color-grey-100);
-  }
+.items-wrapper .title {
+  position: sticky;
+  z-index: 10;
+  top: 0;
+  padding: 12px 0;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--ui-color-hint-2);
+  background-color: var(--ui-color-grey-100);
+}
 
-  .items {
-    padding-bottom: 20px;
-    display: flex;
-    flex-direction: column;
-    gap: var(--ui-gap-middle);
-  }
+.items-wrapper .items {
+  padding-bottom: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: var(--ui-gap-middle);
 }
 </style>
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/command/CommandIcon.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/command/CommandIcon.vue
index 0dee3edd57..903ff03829 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/command/CommandIcon.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/command/CommandIcon.vue
@@ -25,17 +25,5 @@ const typeIconMap = {
 
 <template>
   <!-- eslint-disable-next-line vue/no-v-html -->
-  <div class="command-icon" v-html="typeIconMap[type]"></div>
+  <div class="h-4 w-4 [&_svg]:h-full [&_svg]:w-full" v-html="typeIconMap[type]"></div>
 </template>
-
-<style lang="scss" scoped>
-.command-icon {
-  width: 16px;
-  height: 16px;
-
-  &:deep(svg) {
-    width: 100%;
-    height: 100%;
-  }
-}
-</style>
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/completion/CompletionCard.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/completion/CompletionCard.vue
index 90d38d0bdd..c590e6bbc4 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/completion/CompletionCard.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/completion/CompletionCard.vue
@@ -68,8 +68,8 @@ function applyItem(item: InternalCompletionItem) {
 </script>
 
 <template>
-  <CodeEditorCard class="completion-card">
-    <ul class="list">
+  <CodeEditorCard class="flex max-h-56.75 w-111.75 items-stretch py-3 pr-0 pl-3 text-12">
+    <ul class="flex min-h-0 flex-none flex-col gap-2 overflow-y-auto pr-3 [scrollbar-width:thin]">
       <CompletionItemComp
         v-for="(item, i) in items"
         :key="i"
@@ -78,39 +78,8 @@ function applyItem(item: InternalCompletionItem) {
         @click="applyItem(item)"
       />
     </ul>
-    <div class="completion-item-detail">
+    <div class="flex-[1_1_0] overflow-y-auto border-l border-dividing-line-2 px-3 py-1.5 [scrollbar-width:thin]">
       <MarkdownView v-if="activeItem?.documentation != null" v-bind="activeItem.documentation" />
     </div>
   </CodeEditorCard>
 </template>
-
-<style lang="scss" scoped>
-.completion-card {
-  width: 447px;
-  max-height: 227px;
-  padding: 12px 0 12px 12px;
-  display: flex;
-  align-items: stretch;
-  font-size: 12px;
-  line-height: 1.5;
-}
-
-.list {
-  padding-right: 12px;
-  flex: 0 0 auto;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  min-height: 0;
-  overflow-y: auto;
-  scrollbar-width: thin;
-}
-
-.completion-item-detail {
-  flex: 1 1 0;
-  padding: 6px 12px;
-  overflow-y: auto;
-  scrollbar-width: thin;
-  border-left: 1px solid var(--ui-color-dividing-line-2);
-}
-</style>
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/context-menu/ContextMenuTrigger.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/context-menu/ContextMenuTrigger.vue
index e20f25972f..b915300684 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/context-menu/ContextMenuTrigger.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/context-menu/ContextMenuTrigger.vue
@@ -18,7 +18,11 @@ function handleClick(e: MouseEvent) {
 </script>
 
 <template>
-  <button class="context-menu-trigger" type="button" @click="handleClick">
+  <button
+    class="fixed -ml-5 flex cursor-pointer border-0 bg-grey-100 p-0 text-yellow-main opacity-80 outline-none transition-all hover:text-yellow-600 hover:opacity-100"
+    type="button"
+    @click="handleClick"
+  >
     <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
         d="M13.5 7.07985C13.5225 8.54986 12.8026 9.68994 11.9026 10.7324C11.5471 11.1487 11.2298 11.5469 11.0453 12.0389C11.0123 12.1266 10.9327 12.1874 10.8397 12.1874H9.41254C9.28804 12.1874 9.1875 12.0869 9.1875 11.9624V9.98244L10.5225 8.64742C10.74 8.42992 10.74 8.06988 10.5225 7.85238C10.305 7.63488 9.94498 7.63488 9.72748 7.85238L8.625 8.95485L7.52252 7.85238C7.30502 7.63488 6.94498 7.63488 6.72748 7.85238C6.50998 8.06988 6.50998 8.42992 6.72748 8.64742L8.0625 9.98244V11.9624C8.0625 12.0869 7.96196 12.1874 7.83746 12.1874H6.40118C6.30818 12.1874 6.22947 12.1274 6.19647 12.0404C6.00522 11.5394 5.68057 11.1337 5.31757 10.7099C4.50007 9.74992 3.75 8.5424 3.75 7.1249C3.75 4.3874 6.00746 2.1749 8.76746 2.2499C11.34 2.3249 13.455 4.51485 13.5 7.07985ZM10.65 13.3124C10.5615 13.3124 6.68854 13.3124 6.60004 13.3124C6.37504 13.3124 6.375 13.4999 6.375 13.4999C6.375 14.2499 6.62991 14.8124 7.03491 15.1874C7.43991 15.5624 8.0025 15.7499 8.625 15.7499C9.2475 15.7499 9.81009 15.5624 10.2151 15.1874C10.6201 14.8124 10.875 14.2499 10.875 13.4999C10.875 13.4999 10.875 13.3124 10.65 13.3124Z"
@@ -27,24 +31,3 @@ function handleClick(e: MouseEvent) {
     </svg>
   </button>
 </template>
-
-<style lang="scss" scoped>
-.context-menu-trigger {
-  position: fixed;
-  margin-left: -20px;
-  display: flex;
-  padding: 0;
-  border: none;
-  outline: none;
-  background: var(--ui-color-grey-100);
-  cursor: pointer;
-  color: var(--ui-color-yellow-main);
-  opacity: 0.8;
-  transition: 0.2s;
-
-  &:hover {
-    opacity: 1;
-    color: var(--ui-color-yellow-600);
-  }
-}
-</style>
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/definition/DefinitionDetailWrapper.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/definition/DefinitionDetailWrapper.vue
index c4308437e9..8368bc9503 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/definition/DefinitionDetailWrapper.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/definition/DefinitionDetailWrapper.vue
@@ -1,13 +1,7 @@
 <script setup lang="ts"></script>
 
 <template>
-  <div class="definition-detail-wrapper">
+  <div class="mt-0.5">
     <slot></slot>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.definition-detail-wrapper {
-  margin-top: 2px;
-}
-</style>
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/definition/DefinitionIcon.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/definition/DefinitionIcon.vue
index d5ca52b05d..d07bd9b885 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/definition/DefinitionIcon.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/definition/DefinitionIcon.vue
@@ -19,17 +19,5 @@ function getIcon(kind: DefinitionKind) {
 
 <template>
   <!-- eslint-disable-next-line vue/no-v-html -->
-  <div class="definition-icon" v-html="getIcon(kind)"></div>
+  <div class="h-4 w-4 [&_svg]:h-full [&_svg]:w-full" v-html="getIcon(kind)"></div>
 </template>
-
-<style lang="scss" scoped>
-.definition-icon {
-  width: 16px;
-  height: 16px;
-
-  &:deep(svg) {
-    width: 100%;
-    height: 100%;
-  }
-}
-</style>
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/definition/DefinitionItem.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/definition/DefinitionItem.vue
index 75b548bbaf..da1b22b6e5 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/definition/DefinitionItem.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/definition/DefinitionItem.vue
@@ -9,19 +9,8 @@ const props = defineProps<{
 </script>
 
 <template>
-  <div class="definition-item">
+  <div class="flex flex-col [&+&]:mt-2">
     <DefinitionOverviewWrapper>{{ props.overview }}</DefinitionOverviewWrapper>
     <DefinitionDetail :def-id="props.defId"><slot></slot></DefinitionDetail>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.definition-item {
-  display: flex;
-  flex-direction: column;
-}
-
-.definition-item + .definition-item {
-  margin-top: 8px;
-}
-</style>
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/definition/DefinitionOverviewWrapper.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/definition/DefinitionOverviewWrapper.vue
index 53ae32f469..a1ce42d901 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/definition/DefinitionOverviewWrapper.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/definition/DefinitionOverviewWrapper.vue
@@ -15,7 +15,7 @@ defineProps<{
 </template>
 
 <style scoped>
-.def-overview-code {
+.def-overview-code.code-view {
   flex: 1 1 0;
   word-break: break-word;
 
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/diagnostics/DiagnosticsUI.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/diagnostics/DiagnosticsUI.vue
index 26f88acdbe..6442102b73 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/diagnostics/DiagnosticsUI.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/diagnostics/DiagnosticsUI.vue
@@ -68,7 +68,7 @@ useDecorations(() => {
   <div></div>
 </template>
 
-<style lang="scss">
+<style>
 .code-editor-diagnostic-error-line-header,
 .code-editor-diagnostic-warning-line-header {
   width: 100% !important;
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/document-tab/DocumentTab.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/document-tab/DocumentTab.vue
index 84c78f23a3..26368a153c 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/document-tab/DocumentTab.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/document-tab/DocumentTab.vue
@@ -25,44 +25,12 @@ const [thumbnailUrl] = useFileUrl(() => props.textDocument.thumbnailFile)
     <template #trigger>
       <div
         v-radar="{ name: 'Code document tab', desc: `Click to open code of ${textDocument.id.uri}` }"
-        class="document-tab"
-        :class="{ active: isActive }"
+        class="document-tab flex h-10 w-10 flex-none items-center rounded-1 border-2 transition-all"
+        :class="isActive ? 'border-yellow-500 bg-yellow-200' : 'border-transparent bg-grey-300 cursor-pointer'"
         @click="emit('click')"
       >
-        <UIImg v-if="thumbnailUrl != null" class="thumbnail-img" :src="thumbnailUrl" />
+        <UIImg v-if="thumbnailUrl != null" class="h-full w-full rounded-[4px]" :src="thumbnailUrl" />
       </div>
     </template>
   </UITooltip>
 </template>
-
-<style lang="scss" scoped>
-.document-tab {
-  flex: 0 0 auto;
-  width: 40px;
-  height: 40px;
-  display: flex;
-  align-items: center;
-  border-radius: var(--ui-border-radius-1);
-  border: 2px solid transparent;
-  transition: 0.2s;
-  background-color: var(--ui-color-grey-300);
-
-  &.active {
-    border: 2px solid var(--ui-color-yellow-500);
-    background-color: var(--ui-color-yellow-200);
-  }
-
-  &:not(.active) {
-    cursor: pointer;
-    &:hover {
-      background-color: var(--ui-color-grey-300);
-    }
-  }
-}
-
-.thumbnail-img {
-  border-radius: 4px;
-  width: 100%;
-  height: 100%;
-}
-</style>
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/document-tab/DocumentTabs.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/document-tab/DocumentTabs.vue
index 977de752dc..b8311e92e4 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/document-tab/DocumentTabs.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/document-tab/DocumentTabs.vue
@@ -24,7 +24,7 @@ function handleClose() {
 </script>
 
 <template>
-  <div class="document-tabs">
+  <div class="flex flex-col items-center">
     <DocumentTab
       v-if="mainTextDocument != null"
       :text-document="mainTextDocument"
@@ -32,8 +32,8 @@ function handleClose() {
       @click="handleTabClick(mainTextDocument)"
     />
     <template v-if="tempTextDocuments.length > 0">
-      <UIDivider class="divider" />
-      <div class="temp-tabs">
+      <UIDivider class="my-3 w-8" />
+      <div class="flex min-h-0 flex-[0_1_auto] flex-col gap-2 overflow-y-auto [scrollbar-width:none]">
         <DocumentTab
           v-for="textDocument in tempTextDocuments"
           :key="textDocument.id.uri"
@@ -45,58 +45,14 @@ function handleClose() {
       <UITooltip placement="right">
         {{ $t({ en: 'Close all', zh: '全部关闭' }) }}
         <template #trigger>
-          <button class="close-btn" @click="handleClose">
-            <UIIcon class="icon" type="closeCircle" />
+          <button
+            class="mt-2 flex h-10 w-10 flex-none cursor-pointer items-center justify-center rounded-1 border-0 bg-transparent text-inherit hover:bg-grey-300"
+            @click="handleClose"
+          >
+            <UIIcon type="closeCircle" style="width: 20px; height: 20px" />
           </button>
         </template>
       </UITooltip>
     </template>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.document-tabs {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.divider {
-  width: 32px;
-  margin: 12px 0;
-}
-
-.temp-tabs {
-  flex: 0 1 auto;
-  min-height: 0;
-  overflow-y: auto;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  scrollbar-width: none;
-}
-
-.close-btn {
-  margin-top: 8px;
-  width: 40px;
-  height: 40px;
-  flex: 0 0 auto;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background: none;
-  border: none;
-  cursor: pointer;
-  color: inherit;
-  border-radius: var(--ui-border-radius-1);
-
-  &:hover {
-    background-color: var(--ui-color-grey-300);
-  }
-
-  .icon {
-    width: 20px;
-    height: 20px;
-  }
-}
-</style>
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/drop-indicator/DropIndicatorUI.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/drop-indicator/DropIndicatorUI.vue
index d6ea31d61b..abd0f0046b 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/drop-indicator/DropIndicatorUI.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/drop-indicator/DropIndicatorUI.vue
@@ -45,14 +45,15 @@ useDecorations(() => {
   <div></div>
 </template>
 
-<style lang="scss">
+<style>
 .code-editor-drop-indicator-line,
 .code-editor-drop-indicator-line-header {
   background-color: var(--ui-color-grey-300);
 }
 
 .code-editor-drop-indicator-line {
-  z-index: -1; // Keep it under the indent line
+  /* Keep it under the indent line. */
+  z-index: -1;
 }
 
 .code-editor-drop-indicator-line-header {
@@ -62,15 +63,15 @@ useDecorations(() => {
 
 .code-editor-drop-indicator-insertion-point {
   position: relative;
+}
 
-  &::before {
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 2px;
-    height: 100%;
-    background-color: #000;
-  }
+.code-editor-drop-indicator-insertion-point::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 2px;
+  height: 100%;
+  background-color: #000;
 }
 </style>
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/hover/ActionButton.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/hover/ActionButton.vue
index 9a11f5e4fe..71285b5df9 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/hover/ActionButton.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/hover/ActionButton.vue
@@ -1,7 +1,7 @@
 <template>
   <UIButton variant="stroke" color="white">
-    <div class="action-content">
-      <CommandIcon class="icon" :type="icon" />
+    <div class="-mx-2 flex items-center justify-center gap-1">
+      <CommandIcon :type="icon" />
       <slot></slot>
     </div>
   </UIButton>
@@ -16,13 +16,3 @@ defineProps<{
   icon: CommandIconType
 }>()
 </script>
-
-<style lang="scss" scoped>
-.action-content {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 4px;
-  margin: 0 -8px;
-}
-</style>
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/hover/HoverCard.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/hover/HoverCard.vue
index 78e796cf23..40fd4fcbcb 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/hover/HoverCard.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/hover/HoverCard.vue
@@ -31,11 +31,11 @@ const handleAction = useMessageHandle(
 </script>
 
 <template>
-  <CodeEditorCard class="hover-card">
-    <ul class="body">
+  <CodeEditorCard class="flex flex-col items-stretch p-2">
+    <ul class="flex min-h-0 min-w-62.5 max-w-82 flex-col overflow-y-auto [scrollbar-width:thin]">
       <slot></slot>
     </ul>
-    <footer v-if="actions.length > 0" class="footer">
+    <footer v-if="actions.length > 0" class="mt-1.5 flex gap-3 border-t border-dividing-line-2 px-2 pt-3.5 pb-2">
       <ActionButton
         v-for="(action, i) in actions"
         :key="i"
@@ -47,31 +47,3 @@ const handleAction = useMessageHandle(
     </footer>
   </CodeEditorCard>
 </template>
-
-<style lang="scss" scoped>
-.hover-card {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  padding: 8px;
-}
-
-.body {
-  display: flex;
-  flex-direction: column;
-  min-width: 250px;
-  max-width: 328px;
-  min-height: 0;
-  max-height: 300px;
-  overflow-y: auto;
-  scrollbar-width: thin;
-}
-
-.footer {
-  margin-top: 6px;
-  padding: 14px 8px 8px;
-  display: flex;
-  gap: 12px;
-  border-top: 1px solid var(--ui-color-dividing-line-2);
-}
-</style>
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/hover/HoverCardContent.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/hover/HoverCardContent.vue
index 089f811c93..81913e8618 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/hover/HoverCardContent.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/hover/HoverCardContent.vue
@@ -1,13 +1,7 @@
 <script setup lang="ts"></script>
 
 <template>
-  <li class="hover-card-content">
+  <li class="px-2 py-1.5">
     <slot></slot>
   </li>
 </template>
-
-<style lang="scss" scoped>
-.hover-card-content {
-  padding: 6px 8px;
-}
-</style>
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/hover/HoverUI.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/hover/HoverUI.vue
index 0a2692daba..139a23f670 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/hover/HoverUI.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/hover/HoverUI.vue
@@ -82,8 +82,8 @@ useDecorations(() => {
   </UIDropdown>
 </template>
 
-<style lang="scss">
-// TODO: special style for hovered text?
+<style>
+/* TODO: special style for hovered text? */
 .code-editor-hovered-text {
   border-radius: 2px;
   background-color: var(--ui-color-grey-600);
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/inlay-hint/InlayHintUI.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/inlay-hint/InlayHintUI.vue
index 1672ccd804..19e69c935d 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/inlay-hint/InlayHintUI.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/inlay-hint/InlayHintUI.vue
@@ -44,7 +44,7 @@ useDecorations(() => {
   <div></div>
 </template>
 
-<style lang="scss">
+<style>
 .code-editor-inlay-hint-label {
   color: var(--ui-color-hint-2) !important;
 }
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/input-helper/BooleanInput.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/input-helper/BooleanInput.vue
index fea0db4c56..02b28cfe3f 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/input-helper/BooleanInput.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/input-helper/BooleanInput.vue
@@ -28,37 +28,24 @@ const modelValue = computed({
 </script>
 
 <template>
-  <UIRadioGroup v-model:value="modelValue" class="boolean-input" :style="{ alignSelf: 'stretch' }">
-    <UIRadio class="option" value="true">
+  <UIRadioGroup v-model:value="modelValue" class="flex self-stretch items-center gap-3 py-1.25">
+    <UIRadio
+      class="option flex h-8 flex-[1_1_0] items-center justify-center gap-0.5 rounded-2 border border-grey-400 transition-all"
+      value="true"
+    >
       <code>true</code>
     </UIRadio>
-    <UIRadio class="option" value="false">
+    <UIRadio
+      class="option flex h-8 flex-[1_1_0] items-center justify-center gap-0.5 rounded-2 border border-grey-400 transition-all"
+      value="false"
+    >
       <code>false</code>
     </UIRadio>
   </UIRadioGroup>
 </template>
 
-<style lang="scss" scoped>
-.boolean-input {
-  display: flex;
-  padding: 5px 0px;
-  align-items: center;
-  gap: 12px;
-}
-
-.option {
-  flex: 1 1 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 2px;
-  height: 32px;
-  border-radius: 12px;
-  transition: 0.2s;
-  border: 1px solid var(--ui-color-grey-400);
-
-  &.n-radio--checked {
-    border: 1px solid var(--ui-color-primary-500);
-  }
+<style scoped>
+.option.n-radio--checked {
+  border: 1px solid var(--ui-color-primary-500);
 }
 </style>
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/input-helper/DecimalInput.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/input-helper/DecimalInput.vue
index a6c085b52f..8964c063b4 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/input-helper/DecimalInput.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/input-helper/DecimalInput.vue
@@ -29,5 +29,5 @@ function handleSubmit() {
 </script>
 
 <template>
-  <UINumberInput v-model:value="modelValue" :style="{ alignSelf: 'stretch' }" autofocus @keyup.enter="handleSubmit" />
+  <UINumberInput v-model:value="modelValue" class="self-stretch" autofocus @keyup.enter="handleSubmit" />
 </template>
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/input-helper/InputHelper.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/input-helper/InputHelper.vue
index 4c91322209..a2963720cc 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/input-helper/InputHelper.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/input-helper/InputHelper.vue
@@ -99,8 +99,8 @@ function handlePredefinedNameUpdate(name: string | null) {
 </script>
 
 <template>
-  <div class="input-helper">
-    <UITabRadioGroup class="kind-select" :value="kind" @update:value="(v) => handleKindUpdate(v as InputKind)">
+  <div class="flex min-w-86 flex-col items-center gap-5 px-4 pt-5 pb-6">
+    <UITabRadioGroup class="w-78" :value="kind" @update:value="(v) => handleKindUpdate(v as InputKind)">
       <UITabRadio :value="InputKind.InPlace">
         {{ $t(inPlaceValueTitle) }}
       </UITabRadio>
@@ -117,13 +117,13 @@ function handlePredefinedNameUpdate(name: string | null) {
         @update:value="handleInPlaceValueUpdate"
         @submit="emit('submit')"
       />
-      <div v-else class="unknown-type">
+      <div v-else class="text-center leading-8 text-hint-2">
         {{ $t({ en: 'Value not supported', zh: '不支持输入值' }) }}
       </div>
     </template>
     <UISelect
       v-if="kind === InputKind.Predefined"
-      class="predefined-select"
+      class="self-stretch"
       :placeholder="$t({ en: 'Choose a variable', zh: '选择变量' })"
       :value="predefinedName"
       @update:value="handlePredefinedNameUpdate"
@@ -134,28 +134,3 @@ function handlePredefinedNameUpdate(name: string | null) {
     </UISelect>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.input-helper {
-  min-width: 344px;
-  padding: 20px 16px 24px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 20px;
-}
-
-.kind-select {
-  width: 312px;
-}
-
-.predefined-select {
-  align-self: stretch;
-}
-
-.unknown-type {
-  line-height: 32px;
-  text-align: center;
-  color: var(--ui-color-hint-2);
-}
-</style>
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/input-helper/InputHelperUI.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/input-helper/InputHelperUI.vue
index e931abea17..faf5a7a5a7 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/input-helper/InputHelperUI.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/input-helper/InputHelperUI.vue
@@ -154,7 +154,7 @@ const handleInputUpdate = useMessageHandle(
   </UIDropdown>
 </template>
 
-<style lang="scss">
+<style>
 .code-editor-input-helper-icon {
   position: relative;
   display: inline-block;
@@ -164,17 +164,19 @@ const handleInputUpdate = useMessageHandle(
   cursor: pointer;
   background-color: var(--ui-color-grey-400);
   transition: background-color 0.2s;
-  &:hover {
-    background-color: var(--ui-color-grey-500);
-  }
-  &::after {
-    content: '';
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    background: url(./pen.svg) no-repeat center center;
-    background-size: 80% 80%;
-  }
+}
+
+.code-editor-input-helper-icon:hover {
+  background-color: var(--ui-color-grey-500);
+}
+
+.code-editor-input-helper-icon::after {
+  content: '';
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: url(./pen.svg) no-repeat center center;
+  background-size: 80% 80%;
 }
 
 .code-editor-input-helper-inputing-bg {
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/input-helper/IntegerInput.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/input-helper/IntegerInput.vue
index dac54c6d9f..9b9152ad60 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/input-helper/IntegerInput.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/input-helper/IntegerInput.vue
@@ -29,5 +29,5 @@ function handleSubmit() {
 </script>
 
 <template>
-  <UINumberInput v-model:value="modelValue" :style="{ alignSelf: 'stretch' }" autofocus @keyup.enter="handleSubmit" />
+  <UINumberInput v-model:value="modelValue" class="self-stretch" autofocus @keyup.enter="handleSubmit" />
 </template>
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/input-helper/ResourceInput.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/input-helper/ResourceInput.vue
index d7c7aff0a9..04932dd506 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/input-helper/ResourceInput.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/input-helper/ResourceInput.vue
@@ -54,7 +54,10 @@ onMounted(() => {
 </script>
 
 <template>
-  <ul v-if="provider != null && selector != null" class="items">
+  <ul
+    v-if="provider != null && selector != null"
+    class="flex w-94 max-h-70 flex-none flex-wrap content-start gap-2 overflow-y-auto"
+  >
     <component
       :is="provider.provideResourceItemRenderer()"
       v-for="item in selector.items"
@@ -65,8 +68,8 @@ onMounted(() => {
     />
     <UIDropdown trigger="click" placement="top">
       <template #trigger>
-        <UIBlockItem class="add">
-          <UIIcon class="icon" type="plus" />
+        <UIBlockItem class="justify-center text-primary-main">
+          <UIIcon type="plus" style="width: 24px; height: 24px" />
         </UIBlockItem>
       </template>
       <UIMenu>
@@ -77,25 +80,3 @@ onMounted(() => {
     </UIDropdown>
   </ul>
 </template>
-
-<style lang="scss" scoped>
-.items {
-  width: 376px;
-  max-height: 280px;
-  overflow-y: auto;
-  flex: 0 0 auto;
-  display: flex;
-  flex-wrap: wrap;
-  align-content: flex-start;
-  gap: 8px;
-}
-
-.add {
-  justify-content: center;
-  color: var(--ui-color-primary-main);
-  .icon {
-    width: 24px;
-    height: 24px;
-  }
-}
-</style>
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/markdown/CodeBlock.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/markdown/CodeBlock.vue
index 9fa5f0f2f0..42f4dca449 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/markdown/CodeBlock.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/markdown/CodeBlock.vue
@@ -10,16 +10,13 @@ const code = useSlotText()
 </script>
 
 <template>
-  <div class="code-block">
-    <CodeView class="code" :language="language" mode="block">{{ code }}</CodeView>
+  <div class="py-3 pl-3">
+    <CodeView class="code-view-root" :language="language" mode="block">{{ code }}</CodeView>
   </div>
 </template>
 
-<style lang="scss" scoped>
-.code-block {
-  padding: 12px 0 12px 12px;
-}
-.code {
+<style scoped>
+.code-view-root {
   padding-right: 12px;
   min-width: 0;
   overflow-x: auto;
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/markdown/DiagnosticItem.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/markdown/DiagnosticItem.vue
index 0eccaab1e8..a9643413a6 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/markdown/DiagnosticItem.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/markdown/DiagnosticItem.vue
@@ -8,36 +8,16 @@ defineProps<{
 </script>
 
 <template>
-  <div class="diagnostic-item" :class="`severity-${severity}`">
-    <UIIcon class="icon" :type="severity" />
-    <div class="body">
+  <div
+    class="flex items-start gap-2 self-stretch px-2 py-1.5 rounded-1"
+    :class="{
+      'bg-yellow-200': severity === 'warning',
+      'bg-red-100': severity === 'error'
+    }"
+  >
+    <UIIcon :type="severity" style="margin-top: 3px" />
+    <div class="flex-1">
       <slot></slot>
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.diagnostic-item {
-  padding: 6px 8px;
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  align-self: stretch;
-  border-radius: 8px;
-
-  &.severity-warning {
-    background-color: var(--ui-color-yellow-200);
-  }
-  &.severity-error {
-    background-color: var(--ui-color-red-100);
-  }
-}
-
-.icon {
-  margin-top: 3px;
-}
-
-.body {
-  flex: 1;
-}
-</style>
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/markdown/InputValuePreview.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/markdown/InputValuePreview.vue
index 2ba1a648fb..80e40993da 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/markdown/InputValuePreview.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/markdown/InputValuePreview.vue
@@ -58,54 +58,20 @@ const expr = computed(() => {
       autoplay
     />
     <component :is="() => inputPreview?.vnode" v-else-if="inputPreview?.vnode != null" />
-    <div v-else-if="inputPreview?.key != null" class="key">{{ $t(inputPreview.key) }}</div>
-    <div v-else-if="inputPreview?.color != null" class="color">
-      <i class="color-preview" :style="{ backgroundColor: inputPreview.color }"></i>
-      <span class="expr">{{ expr }}</span>
+    <div
+      v-else-if="inputPreview?.key != null"
+      class="inline-flex h-12.5 min-w-12.5 flex-col items-center justify-center rounded-[4px] border border-grey-500 bg-grey-200 px-2 py-1.25"
+      style="box-shadow: 0 1px 0 0 var(--ui-color-grey-500)"
+    >
+      {{ $t(inputPreview.key) }}
+    </div>
+    <div v-else-if="inputPreview?.color != null" class="flex items-center gap-2 py-2.75">
+      <i class="block h-5 w-5 rounded-[4px]" :style="{ backgroundColor: inputPreview.color }"></i>
+      <span class="font-code text-12 text-title">{{ expr }}</span>
     </div>
     <div v-else-if="inputPreview?.text != null" class="text">{{ $t(inputPreview.text) }}</div>
-    <span v-else class="expr">{{ expr }}</span>
+    <!-- We are not using inline `CodeView` here because it does not properly highlight short expressions. -->
+    <!-- TODO: optimize `CodeView` to support short expressions. -->
+    <span v-else class="font-code">{{ expr }}</span>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.key {
-  display: inline-flex;
-  height: 50px;
-  min-width: 50px;
-  padding: 5px 8px;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  border-radius: 4px;
-  border: 1px solid var(--ui-color-grey-500);
-  background: var(--ui-color-grey-200);
-  box-shadow: 0px 1px 0px 0px var(--ui-color-grey-500);
-}
-
-.color {
-  display: flex;
-  padding: 11px 0px;
-  align-items: center;
-  gap: 8px;
-
-  .color-preview {
-    display: block;
-    width: 20px;
-    height: 20px;
-    border-radius: 4px;
-  }
-
-  .expr {
-    font-size: 12px;
-    line-height: 1.5;
-    color: var(--ui-color-title);
-  }
-}
-
-.expr {
-  // we are not using inline `CodeView` here because it does not properly highlight short expressions
-  // TODO: optimize `CodeView` to support short expressions
-  font-family: var(--ui-font-family-code);
-}
-</style>
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/markdown/MarkdownView.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/markdown/MarkdownView.vue
index ec2adff7c0..25c089f4ee 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/markdown/MarkdownView.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/markdown/MarkdownView.vue
@@ -70,7 +70,7 @@ const markdownValue = computed(() => (typeof props.value === 'string' ? props.va
   <MarkdownView class="markdown-view" :value="markdownValue" :components="components" />
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .markdown-view {
   display: flex;
   flex-direction: column;
@@ -79,88 +79,95 @@ const markdownValue = computed(() => (typeof props.value === 'string' ? props.va
   font-size: 13px;
   line-height: 1.7;
   color: inherit;
+}
 
-  :deep(h1, h2, h3, h4, h5, h6) {
-    margin: 1em 0;
-    color: var(--ui-color-title);
-  }
+.markdown-view :deep(h1, h2, h3, h4, h5, h6) {
+  margin: 1em 0;
+  color: var(--ui-color-title);
+}
 
-  :deep(h1) {
-    font-size: 20px;
-    line-height: 1.4;
-  }
+.markdown-view :deep(h1) {
+  font-size: 20px;
+  line-height: 1.4;
+}
 
-  :deep(h2) {
-    font-size: 16px;
-    line-height: 1.625;
-  }
+.markdown-view :deep(h2) {
+  font-size: 16px;
+  line-height: 1.625;
+}
 
-  :deep(h3) {
-    font-size: 14px;
-    line-height: 1.57143;
-  }
+.markdown-view :deep(h3) {
+  font-size: 14px;
+  line-height: 1.57143;
+}
 
-  :deep(h4, h5, h6) {
-    font-size: 13px;
-    line-height: 1.53846;
-  }
+.markdown-view :deep(h4, h5, h6) {
+  font-size: 13px;
+  line-height: 1.53846;
+}
 
-  :deep(ul),
-  :deep(ol) {
-    display: flex;
-    flex-direction: column;
-    padding-left: 1.5em;
-    gap: 8px;
-  }
-  :deep(ul) {
-    list-style: square;
-  }
-  :deep(ol) {
-    list-style: decimal;
-  }
-  :deep(li > *:not(:last-child)) {
-    margin-bottom: 8px;
-  }
+.markdown-view :deep(ul),
+.markdown-view :deep(ol) {
+  display: flex;
+  flex-direction: column;
+  padding-left: 1.5em;
+  gap: 8px;
+}
 
-  :deep(a) {
-    color: var(--ui-color-turquoise-500);
-    text-decoration: underline;
-    &:hover {
-      color: var(--ui-color-turquoise-400);
-    }
-    &:active {
-      color: var(--ui-color-turquoise-600);
-    }
-  }
+.markdown-view :deep(ul) {
+  list-style: square;
+}
 
-  :deep(blockquote) {
-    position: relative;
-    padding-left: 20px;
-    &:before {
-      content: '';
-      position: absolute;
-      left: 9px;
-      top: 0;
-      width: 2px;
-      height: 100%;
-      border-radius: 1px;
-      background-color: var(--ui-color-grey-800);
-    }
-  }
+.markdown-view :deep(ol) {
+  list-style: decimal;
+}
 
-  :deep(code) {
-    font-family: var(--ui-font-family-code);
-  }
-  :deep(:not(pre) > code) {
-    // TODO: keep consistent with component `UICode`
-    font-size: 0.92em;
-    line-height: 2;
-    padding: 2px 4px;
-    border-radius: 4px;
-    border: 1px solid var(--ui-color-grey-500);
-    background: var(--ui-color-grey-300);
-    word-break: break-word;
-    overflow-wrap: break-word;
-  }
+.markdown-view :deep(li > *:not(:last-child)) {
+  margin-bottom: 8px;
+}
+
+.markdown-view :deep(a) {
+  color: var(--ui-color-turquoise-500);
+  text-decoration: underline;
+}
+
+.markdown-view :deep(a:hover) {
+  color: var(--ui-color-turquoise-400);
+}
+
+.markdown-view :deep(a:active) {
+  color: var(--ui-color-turquoise-600);
+}
+
+.markdown-view :deep(blockquote) {
+  position: relative;
+  padding-left: 20px;
+}
+
+.markdown-view :deep(blockquote::before) {
+  content: '';
+  position: absolute;
+  left: 9px;
+  top: 0;
+  width: 2px;
+  height: 100%;
+  border-radius: 1px;
+  background-color: var(--ui-color-grey-800);
+}
+
+.markdown-view :deep(code) {
+  font-family: var(--ui-font-family-code);
+}
+
+.markdown-view :deep(:not(pre) > code) {
+  /* TODO: keep consistent with component `UICode` */
+  font-size: 0.92em;
+  line-height: 2;
+  padding: 2px 4px;
+  border-radius: 4px;
+  border: 1px solid var(--ui-color-grey-500);
+  background: var(--ui-color-grey-300);
+  word-break: break-word;
+  overflow-wrap: break-word;
 }
 </style>
diff --git a/spx-gui/src/components/editor/navbar/EditorNavbar.vue b/spx-gui/src/components/editor/navbar/EditorNavbar.vue
index 8defe909f0..892f705a3a 100644
--- a/spx-gui/src/components/editor/navbar/EditorNavbar.vue
+++ b/spx-gui/src/components/editor/navbar/EditorNavbar.vue
@@ -21,9 +21,9 @@
               <template #icon><img :src="importProjectSvg" /></template>
               {{ $t({ en: 'Import project file...', zh: '导入项目文件...' }) }}
             </UIMenuItem>
-            <UIMenuItem class="import-scratch" @click="handleImportFromScratch">
+            <UIMenuItem class="p-2" @click="handleImportFromScratch">
               <template #icon><img :src="importScratchSvg" /></template>
-              <span class="item-text">
+              <span class="mr-2 flex-1">
                 {{ $t({ en: 'Import Scratch project file...', zh: '导入 Scratch 项目文件...' }) }}
               </span>
               <UITag>Beta</UITag>
@@ -55,7 +55,7 @@
               <template #icon><img :src="projectPageSvg" /></template>
               {{ $t({ en: 'Open project page', zh: '打开项目主页' }) }}
             </UIMenuItem>
-            <UIMenuItem v-if="canManageProject" class="modify-project-name-item" @click="handleModifyProjectName">
+            <UIMenuItem v-if="canManageProject" class="w-full" @click="handleModifyProjectName">
               <template #icon><img :src="modifyProjectNameSvg" /></template>
               {{ $t({ en: 'Modify project name', zh: '修改项目名' }) }}
             </UIMenuItem>
@@ -71,22 +71,22 @@
 
       <NavbarTutorials v-if="showTutorialsEntry" />
 
-      <div class="history-button-wrapper">
+      <div class="flex">
         <UITooltip :disabled="undoAction == null">
           <template #trigger>
             <button class="history-button" :disabled="undoAction == null" @click="handleUndo.fn">
-              <UIIcon class="icon" type="undo" />
+              <UIIcon type="undo" style="width: 24px; height: 24px" />
             </button>
           </template>
-          <span class="history-menu-text">{{ $t(undoText) }}</span>
+          <span>{{ $t(undoText) }}</span>
         </UITooltip>
         <UITooltip :disabled="redoAction == null">
           <template #trigger>
             <button class="history-button" :disabled="redoAction == null" @click="handleRedo.fn">
-              <UIIcon class="icon" type="redo" />
+              <UIIcon type="redo" style="width: 24px; height: 24px" />
             </button>
           </template>
-          <span class="history-menu-text">{{ $t(redoText) }}</span>
+          <span>{{ $t(redoText) }}</span>
         </UITooltip>
       </div>
     </template>
@@ -103,7 +103,7 @@
     <template #right>
       <UIButtonGroup
         v-radar="{ name: 'Editor mode menu', desc: 'Hover to see editor mode options (default, map)' }"
-        class="editor-mode-wrapper"
+        class="mx-3 items-center"
         type="text"
         variant="secondary"
         :value="selectedEditMode"
@@ -118,7 +118,7 @@
               }"
               :value="EditMode.Default"
             >
-              <div class="icon" v-html="defaultModeSvg"></div>
+              <div class="w-4.5 flex [&_svg]:block [&_svg]:h-auto [&_svg]:w-full" v-html="defaultModeSvg"></div>
             </UIButtonGroupItem>
           </template>
           {{ $t({ en: 'Default mode', zh: '默认模式' }) }}
@@ -132,7 +132,7 @@
               }"
               :value="EditMode.Map"
             >
-              <div class="icon" v-html="mapEditModeSvg"></div>
+              <div class="w-4.5 flex [&_svg]:block [&_svg]:h-auto [&_svg]:w-full" v-html="mapEditModeSvg"></div>
             </UIButtonGroupItem>
           </template>
           {{ $t({ en: 'Map edit mode', zh: '地图编辑模式' }) }}
@@ -435,66 +435,18 @@ const autoSaveStateIcon = computed<AutoSaveStateIcon | null>(() => {
 })
 </script>
 
-<style lang="scss" scoped>
-.import-scratch {
-  padding: 8px;
+<style scoped>
+@reference "../../../app.css";
 
-  .item-text {
-    flex: 1;
-    margin-right: 8px;
-  }
-}
-
-.modify-project-name-item {
-  width: 100%;
+.history-button {
+  @apply flex h-full items-center justify-center border-none bg-transparent px-5 text-white outline-none;
 }
 
-.icon {
-  display: flex;
-
-  :deep(svg) {
-    width: 100%;
-    height: 100%;
-  }
+.history-button:disabled {
+  @apply cursor-not-allowed text-[#9de6ec];
 }
 
-.history-button-wrapper {
-  display: flex;
-
-  .history-button {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-    background: none;
-    outline: none;
-    border: none;
-    padding: 0 20px;
-    color: white;
-
-    .icon {
-      width: 24px;
-      height: 24px;
-    }
-
-    &:disabled {
-      color: #9de6ec;
-      cursor: not-allowed;
-    }
-
-    &:hover:not(:disabled) {
-      background-color: var(--ui-color-primary-600);
-      cursor: pointer;
-    }
-  }
-}
-
-.editor-mode-wrapper {
-  margin: 0 12px;
-  align-items: center;
-
-  .icon {
-    width: 18px;
-  }
+.history-button:enabled:hover {
+  @apply cursor-pointer bg-primary-600;
 }
 </style>
diff --git a/spx-gui/src/components/editor/navbar/EditorProjectDisplayName.vue b/spx-gui/src/components/editor/navbar/EditorProjectDisplayName.vue
index f86f20961d..c5e0dc17df 100644
--- a/spx-gui/src/components/editor/navbar/EditorProjectDisplayName.vue
+++ b/spx-gui/src/components/editor/navbar/EditorProjectDisplayName.vue
@@ -170,7 +170,7 @@ function handleSubmitProjectDisplayName() {
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .project-wrap {
   width: 370px;
   min-width: 320px;
@@ -250,11 +250,11 @@ function handleSubmitProjectDisplayName() {
   background: transparent;
   cursor: pointer;
   border-radius: 6px;
+}
 
-  &:hover,
-  &:focus-visible {
-    background: var(--ui-color-primary-400);
-  }
+.edit-icon:hover,
+.edit-icon:focus-visible {
+  background: var(--ui-color-primary-400);
 }
 
 .edit-display-name-icon {
@@ -293,34 +293,34 @@ function handleSubmitProjectDisplayName() {
 
 .icon {
   display: flex;
+}
 
-  :deep(svg) {
-    width: 100%;
-    height: 100%;
-  }
+.icon :deep(svg) {
+  width: 100%;
+  height: 100%;
 }
 
 .auto-save-state {
   cursor: default;
+}
 
-  .icon {
-    width: 24px;
-    height: 24px;
+.auto-save-state .icon {
+  width: 24px;
+  height: 24px;
+}
 
-    &.pending :deep(svg) path,
-    &.saving :deep(svg) path {
-      stroke-dasharray: 2;
-    }
+.auto-save-state .icon.pending :deep(svg) path,
+.auto-save-state .icon.saving :deep(svg) path {
+  stroke-dasharray: 2;
+}
 
-    &.saving :deep(svg) path {
-      animation: dash 1s linear infinite;
+.auto-save-state .icon.saving :deep(svg) path {
+  animation: dash 1s linear infinite;
+}
 
-      @keyframes dash {
-        to {
-          stroke-dashoffset: 24;
-        }
-      }
-    }
+@keyframes dash {
+  to {
+    stroke-dashoffset: 24;
   }
 }
 
diff --git a/spx-gui/src/components/editor/preview/EditorPreview.vue b/spx-gui/src/components/editor/preview/EditorPreview.vue
index 5f4000c148..b1302bf2f8 100644
--- a/spx-gui/src/components/editor/preview/EditorPreview.vue
+++ b/spx-gui/src/components/editor/preview/EditorPreview.vue
@@ -1,16 +1,18 @@
 <template>
+  <!-- TODO: The fixed height here should be removed. Instead, set the StageViewer size (maintaining 4:3 aspect ratio) and let this container adapt its height accordingly. -->
   <UICard
     v-radar="{ name: 'Editor preview', desc: 'Preview panel for stage preview and project running' }"
-    class="editor-preview"
+    class="editor-preview relative flex flex-col overflow-hidden"
+    style="height: 422px"
   >
     <UICardHeader>
-      <div class="header">
+      <div class="flex-1 text-title">
         {{ $t(headerTitle) }}
       </div>
       <template v-if="runnerState === 'initial'">
         <UIButton
           v-radar="{ name: 'Run button', desc: 'Click to run the project in debug mode' }"
-          class="button"
+          class="mx-2"
           color="primary"
           icon="playHollow"
           :loading="handleRun.isLoading.value"
@@ -33,7 +35,7 @@
       <template v-else>
         <UIButton
           v-radar="{ name: 'Rerun button', desc: 'Click to rerun the project' }"
-          class="button"
+          class="mx-2"
           color="primary"
           icon="rotate"
           :disabled="runnerState !== 'running' || handleStop.isLoading.value"
@@ -44,7 +46,7 @@
         </UIButton>
         <UIButton
           v-radar="{ name: 'Stop button', desc: 'Click to stop the running project' }"
-          class="button"
+          class="mx-2"
           color="boring"
           icon="end"
           :loading="handleStop.isLoading.value"
@@ -56,7 +58,7 @@
           <template #trigger>
             <UIButton
               v-radar="{ name: 'Enter full screen button', desc: 'Click to enter full screen for the running project' }"
-              class="button"
+              class="mx-2"
               color="boring"
               icon="enterFullScreen"
               :disabled="handleStop.isLoading.value"
@@ -68,14 +70,17 @@
       </template>
     </UICardHeader>
 
-    <div class="main">
+    <div class="flex h-full justify-center overflow-hidden p-3">
       <div
         ref="stageContainerRef"
-        class="stage-viewer-container"
+        class="stage-viewer-container relative h-full w-full overflow-hidden rounded-1 bg-grey-200"
         :class="{ 'stage-viewer-container--running': runnerState !== 'initial' }"
       >
         <StageViewer />
-        <div v-show="fullscreen || runnerState !== 'initial' || runnerHostSticky" class="runner-host">
+        <div
+          v-show="fullscreen || runnerState !== 'initial' || runnerHostSticky"
+          class="runner-host absolute inset-0 flex items-center justify-center bg-grey-300"
+        >
           <ProjectRunnerSurface
             ref="projectRunnerSurfaceRef"
             v-model:fullscreen="fullscreen"
@@ -439,75 +444,29 @@ function getStageInlineAnchor() {
 }
 </script>
 
-<style scoped lang="scss">
-.editor-preview {
-  // TODO: The fixed height here should be removed. Instead, set the StageViewer size (maintaining 4:3 aspect ratio) and let this container adapt its height accordingly.
-  height: 422px;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  overflow: hidden;
-
-  .header {
-    flex: 1;
-    color: var(--ui-color-title);
-  }
-
-  .button {
-    margin: 0 8px;
-  }
-
-  .main {
-    display: flex;
-    overflow: hidden;
-    justify-content: center;
-    padding: 12px;
-    height: 100%;
-  }
-
-  .stage-viewer-container {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    border-radius: var(--ui-border-radius-1);
-    overflow: hidden;
-    background-color: var(--ui-color-grey-200);
-
-    &--running {
-      :deep(.stage-viewer) {
-        filter: blur(4px);
-        pointer-events: none;
-        user-select: none;
-      }
-    }
+<style scoped>
+.stage-viewer-container--running :deep(.stage-viewer) {
+  filter: blur(4px);
+  pointer-events: none;
+  user-select: none;
+}
 
-    .runner-host {
-      position: absolute;
-      inset: 0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      background-color: var(--ui-color-grey-300);
-
-      :deep(.project-runner-surface) {
-        width: 100%;
-        height: 100%;
-        display: flex;
-      }
+.runner-host :deep(.project-runner-surface) {
+  width: 100%;
+  height: 100%;
+  display: flex;
+}
 
-      :deep(.project-runner-surface:not(.fullscreen)) {
-        align-items: center;
-        justify-content: center;
-      }
+.runner-host :deep(.project-runner-surface:not(.fullscreen)) {
+  align-items: center;
+  justify-content: center;
+}
 
-      :deep(.project-runner-surface:not(.fullscreen) .runner) {
-        width: 100%;
-        max-width: 100%;
-        max-height: 100%;
-        aspect-ratio: 4 / 3;
-        height: auto;
-      }
-    }
-  }
+.runner-host :deep(.project-runner-surface:not(.fullscreen) .runner) {
+  width: 100%;
+  max-width: 100%;
+  max-height: 100%;
+  aspect-ratio: 4 / 3;
+  height: auto;
 }
 </style>
diff --git a/spx-gui/src/components/editor/sprite/SpriteCollisionEditorModal.vue b/spx-gui/src/components/editor/sprite/SpriteCollisionEditorModal.vue
index e3b4d99606..a6178289aa 100644
--- a/spx-gui/src/components/editor/sprite/SpriteCollisionEditorModal.vue
+++ b/spx-gui/src/components/editor/sprite/SpriteCollisionEditorModal.vue
@@ -29,6 +29,11 @@ const emit = defineEmits<{
     :visible="visible"
     @update:visible="emit('cancelled')"
   >
-    <SpriteCollisionEditor class="h-114" :sprite="sprite" :project="project" @update-success="emit('resolved')" />
+    <SpriteCollisionEditor
+      style="height: 456px"
+      :sprite="sprite"
+      :project="project"
+      @update-success="emit('resolved')"
+    />
   </UIFormModal>
 </template>
diff --git a/spx-gui/src/components/navbar/NavbarWrapper.vue b/spx-gui/src/components/navbar/NavbarWrapper.vue
index 8b53de72e6..13cdc495cd 100644
--- a/spx-gui/src/components/navbar/NavbarWrapper.vue
+++ b/spx-gui/src/components/navbar/NavbarWrapper.vue
@@ -5,7 +5,7 @@
     :style="{ backgroundImage: `url(${bgUrl})` }"
   >
     <div
-      class="flex h-12.5 w-full items-stretch justify-between gap-3"
+      class="flex h-12.5 items-stretch justify-between gap-3"
       :class="centered ? 'w-305 desktop-large:w-370' : 'w-full'"
     >
       <div class="flex basis-[30%]">
diff --git a/spx-gui/src/components/project/runner/ProjectRunner.vue b/spx-gui/src/components/project/runner/ProjectRunner.vue
index 55cc2e8951..8d0c0c5714 100644
--- a/spx-gui/src/components/project/runner/ProjectRunner.vue
+++ b/spx-gui/src/components/project/runner/ProjectRunner.vue
@@ -147,6 +147,7 @@ import { apiBaseUrl } from '@/utils/env'
 import { ensureAccessToken } from '@/stores/user'
 import { isProjectUsingAIInteraction } from '@/utils/project'
 import { capture, Cancelled } from '@/utils/exception'
+import errorBgUrl from './error-bg.svg'
 
 const props = defineProps<{ project: SpxProject }>()
 
@@ -373,14 +374,19 @@ defineExpose({
 </script>
 
 <template>
-  <div class="iframe-container">
-    <iframe ref="runnerIframeRef" class="iframe" frameborder="0" :src="runnerUrl" />
-    <UIImg v-show="state.type !== 'running'" class="thumbnail" :src="thumbnailUrl" :loading="thumbnailUrlLoading" />
+  <div class="relative h-full w-full flex items-center justify-center">
+    <iframe ref="runnerIframeRef" class="h-full w-full" frameborder="0" :src="runnerUrl" />
+    <UIImg
+      v-show="state.type !== 'running'"
+      class="absolute! inset-0"
+      :src="thumbnailUrl"
+      :loading="thumbnailUrlLoading"
+    />
     <UIDetailedLoading :visible="startingProgress != null" cover :percentage="startingProgress?.percentage ?? 0">
       <span>{{ $t(startingProgress?.desc ?? { en: 'Loading...', zh: '加载中...' }) }}</span>
     </UIDetailedLoading>
-    <div v-show="state.type === 'failed'" class="error-wrapper">
-      <div class="error">
+    <div v-show="state.type === 'failed'" class="absolute inset-0" :style="{ backgroundImage: `url(${errorBgUrl})` }">
+      <div class="flex h-full w-full flex-col items-center justify-center gap-1 bg-black/65 text-grey-100">
         <svg width="81" height="80" viewBox="0 0 81 80" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path
             d="M10.3422 18.9098C10.3422 19.3332 10.5103 19.7392 10.8097 20.0386C11.1091 20.3379 11.5151 20.5061 11.9385 20.5061C12.3619 20.5061 12.7679 20.3379 13.0673 20.0386C13.3666 19.7392 13.5348 19.3332 13.5348 18.9098C13.5348 18.4864 13.3666 18.0804 13.0673 17.781C12.7679 17.4817 12.3619 17.3135 11.9385 17.3135C11.5151 17.3135 11.1091 17.4817 10.8097 17.781C10.5103 18.0804 10.3422 18.4864 10.3422 18.9098Z"
@@ -418,45 +424,3 @@ defineExpose({
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.iframe-container {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.iframe {
-  width: 100%;
-  height: 100%;
-}
-.thumbnail {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-}
-.error-wrapper {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  background: url(./error-bg.svg);
-
-  .error {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 4px;
-    color: var(--ui-color-grey-100);
-    background-color: rgba(0, 0, 0, 0.65);
-  }
-}
-</style>
diff --git a/spx-gui/src/components/project/runner/ProjectRunnerSurface.vue b/spx-gui/src/components/project/runner/ProjectRunnerSurface.vue
index 148eea4687..af9edac089 100644
--- a/spx-gui/src/components/project/runner/ProjectRunnerSurface.vue
+++ b/spx-gui/src/components/project/runner/ProjectRunnerSurface.vue
@@ -398,7 +398,7 @@ defineExpose({
 
 <template>
   <div ref="rootRef" class="project-runner-surface" :class="{ fullscreen: overlayActive }">
-    <div v-if="overlayActive" class="placeholder"></div>
+    <div v-if="overlayActive" class="h-full w-full"></div>
     <div
       ref="wrapperRef"
       v-radar="{ name: 'Project runner surface', desc: 'Container hosting project runner' }"
@@ -419,15 +419,14 @@ defineExpose({
       }"
     >
       <div v-if="overlayActive && (overlayVisible || overlayClosing || overlayOpening)" class="header">
-        <div class="header-left"></div>
-        <div class="display-name">
+        <div class="flex-[1_1_30%]"></div>
+        <div class="flex-[1_1_40%] truncate text-center">
           {{ project.displayName }}
         </div>
-        <div class="header-right">
+        <div class="flex-[1_1_30%] grid grid-flow-col items-center justify-end justify-items-end gap-5">
           <UIButton
             v-if="runnerState === 'initial'"
             v-radar="{ name: 'Run button', desc: 'Click to run the project in overlay' }"
-            class="button"
             color="primary"
             icon="playHollow"
             :loading="runButtonLoading"
@@ -438,7 +437,6 @@ defineExpose({
           <UIButton
             v-else
             v-radar="{ name: 'Rerun button', desc: 'Click to rerun the project in overlay' }"
-            class="button"
             icon="rotate"
             :disabled="runnerState !== 'running' || stopButtonLoading"
             :loading="rerunButtonLoading && !stopButtonLoading"
@@ -449,7 +447,6 @@ defineExpose({
           <UIButton
             v-if="runnerState !== 'initial'"
             v-radar="{ name: 'Stop button', desc: 'Click to stop the project' }"
-            class="button"
             color="boring"
             icon="end"
             :loading="stopButtonLoading"
@@ -464,7 +461,6 @@ defineExpose({
                   name: 'Exit full screen button',
                   desc: 'Click to exit full screen for the running project'
                 }"
-                class="button"
                 color="boring"
                 icon="exitFullScreen"
                 @click="closeFullscreen"
@@ -489,18 +485,13 @@ defineExpose({
   </div>
 </template>
 
-<style scoped lang="scss">
+<style scoped>
 .project-runner-surface {
   position: relative;
   width: 100%;
   height: 100%;
 }
 
-.placeholder {
-  width: 100%;
-  height: 100%;
-}
-
 .runner-wrapper {
   position: relative;
   width: 100%;
@@ -510,111 +501,104 @@ defineExpose({
   transform: translate3d(var(--overlay-translate-x, 0px), var(--overlay-translate-y, 0px), 0)
     scale(var(--overlay-scale-x, 1), var(--overlay-scale-y, 1));
   opacity: 1;
+}
 
-  &.no-transition {
-    transition: none !important;
-  }
+.runner-wrapper.no-transition {
+  transition: none !important;
+}
 
-  &.fullscreen {
-    position: fixed;
-    z-index: 100;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    display: flex;
-    flex-direction: column;
-    background-color: #fff;
-    opacity: 1;
-    pointer-events: none;
-    transition:
-      transform 0.4s ease-in-out,
-      background-color 0.2s ease;
-
-    .header {
-      opacity: 1;
-      pointer-events: auto;
-      transition:
-        opacity 0.2s ease,
-        height 0.2s ease,
-        padding 0.2s ease,
-        border-bottom-color 0.2s ease;
-      transition-delay: 0s;
-    }
+.runner-wrapper.fullscreen {
+  position: fixed;
+  z-index: 100;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  background-color: #fff;
+  opacity: 1;
+  pointer-events: none;
+  transition:
+    transform 0.4s ease-in-out,
+    background-color 0.2s ease;
+}
 
-    .runner-area {
-      padding: 20px;
-      background-color: var(--ui-color-grey-300);
-      transition:
-        padding 0.2s ease,
-        background-color 0.2s ease;
-    }
+.runner-wrapper.fullscreen .header {
+  opacity: 1;
+  pointer-events: auto;
+  transition:
+    opacity 0.2s ease,
+    height 0.2s ease,
+    padding 0.2s ease,
+    border-bottom-color 0.2s ease;
+  transition-delay: 0s;
+}
 
-    &.visible {
-      pointer-events: auto;
-    }
+.runner-wrapper.fullscreen .runner-area {
+  padding: 20px;
+  background-color: var(--ui-color-grey-300);
+  transition:
+    padding 0.2s ease,
+    background-color 0.2s ease;
+}
 
-    &.opening {
-      background-color: transparent;
-
-      .header {
-        opacity: 0;
-        visibility: hidden;
-        height: 56px;
-        padding: 0 20px;
-        border-bottom-color: transparent;
-      }
-
-      .runner-area {
-        padding: 20px;
-        background-color: transparent;
-      }
-    }
+.runner-wrapper.fullscreen.visible {
+  pointer-events: auto;
+}
 
-    &.opening.visible {
-      background-color: #fff;
-
-      .header {
-        opacity: 1;
-        visibility: visible;
-        height: 56px;
-        padding: 0 20px;
-        border-bottom-color: var(--ui-color-grey-400);
-        transition-delay: 0.15s;
-      }
-
-      .runner-area {
-        padding: 20px;
-        background-color: var(--ui-color-grey-300);
-        transition-delay: 0.15s;
-      }
-    }
+.runner-wrapper.fullscreen.opening {
+  background-color: transparent;
+}
 
-    &.closing {
-      background-color: transparent;
-    }
+.runner-wrapper.fullscreen.opening .header {
+  opacity: 0;
+  visibility: hidden;
+  height: 56px;
+  padding: 0 20px;
+  border-bottom-color: transparent;
+}
 
-    &.closing:not(.visible) {
-      .header {
-        opacity: 0;
-      }
+.runner-wrapper.fullscreen.opening .runner-area {
+  padding: 20px;
+  background-color: transparent;
+}
 
-      .runner-area {
-        background-color: transparent;
-      }
-    }
+.runner-wrapper.fullscreen.opening.visible {
+  background-color: #fff;
+}
 
-    &:not(.visible):not(.closing):not(.opening) {
-      .header {
-        display: none;
-      }
+.runner-wrapper.fullscreen.opening.visible .header {
+  opacity: 1;
+  visibility: visible;
+  height: 56px;
+  padding: 0 20px;
+  border-bottom-color: var(--ui-color-grey-400);
+  transition-delay: 0.15s;
+}
 
-      .runner-area {
-        padding: 0;
-        background-color: transparent;
-      }
-    }
-  }
+.runner-wrapper.fullscreen.opening.visible .runner-area {
+  padding: 20px;
+  background-color: var(--ui-color-grey-300);
+  transition-delay: 0.15s;
+}
+
+.runner-wrapper.fullscreen.closing {
+  background-color: transparent;
+}
+
+.runner-wrapper.fullscreen.closing:not(.visible) .header {
+  opacity: 0;
+}
+
+.runner-wrapper.fullscreen.closing:not(.visible) .runner-area {
+  background-color: transparent;
+}
+
+.runner-wrapper.fullscreen:not(.visible):not(.closing):not(.opening) .header {
+  display: none;
+}
+
+.runner-wrapper.fullscreen:not(.visible):not(.closing):not(.opening) .runner-area {
+  padding: 0;
+  background-color: transparent;
 }
 
 .header {
@@ -631,42 +615,17 @@ defineExpose({
   overflow: hidden;
 }
 
-.header-left {
-  flex: 1;
-  flex-basis: 30%;
-}
-
-.display-name {
-  flex: 1;
-  flex-basis: 40%;
-  text-align: center;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.header-right {
-  flex: 1;
-  flex-basis: 30%;
-  justify-content: flex-end;
-  align-items: center;
-  display: grid;
-  grid-auto-flow: column;
-  gap: 20px;
-  justify-items: end;
-}
-
 .runner-area {
   position: relative;
   width: 100%;
   height: 100%;
+}
 
-  .runner {
-    width: 100%;
-    height: 100%;
-    border-radius: var(--ui-border-radius-2);
-    overflow: hidden;
-  }
+.runner-area .runner {
+  width: 100%;
+  height: 100%;
+  border-radius: var(--ui-border-radius-2);
+  overflow: hidden;
 }
 
 .project-runner-surface.fullscreen .runner-area {
@@ -677,23 +636,20 @@ defineExpose({
   min-height: 0;
   padding: 20px;
   background-color: var(--ui-color-grey-300);
+}
 
-  .runner {
-    width: auto;
-    height: 100%;
-    max-width: 100%;
-    max-height: 100%;
-    aspect-ratio: 4 / 3;
-    overflow: hidden;
-  }
+.project-runner-surface.fullscreen .runner-area .runner {
+  width: auto;
+  height: 100%;
+  max-width: 100%;
+  max-height: 100%;
+  aspect-ratio: 4 / 3;
+  overflow: hidden;
 }
 
 .overlay-loading {
   position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
+  inset: 0;
   background: rgba(0, 0, 0, 0.1);
 }
 </style>
diff --git a/spx-gui/src/components/ui/UIDivider.vue b/spx-gui/src/components/ui/UIDivider.vue
index d6d33e3881..788c7a0181 100644
--- a/spx-gui/src/components/ui/UIDivider.vue
+++ b/spx-gui/src/components/ui/UIDivider.vue
@@ -1,5 +1,5 @@
 <template>
-  <NDivider class="divider" :vertical="vertical" />
+  <NDivider class="ui-divider" :vertical="vertical" />
 </template>
 
 <script lang="ts" setup>
@@ -16,7 +16,7 @@ withDefaults(
 </script>
 
 <style lang="scss" scoped>
-.divider {
+.ui-divider {
   margin: 0;
 }
 </style>
diff --git a/spx-gui/src/pages/community/project.vue b/spx-gui/src/pages/community/project.vue
index b8168748dd..603a1865b3 100644
--- a/spx-gui/src/pages/community/project.vue
+++ b/spx-gui/src/pages/community/project.vue
@@ -326,13 +326,13 @@ const remixesRet = useQuery(
   <CenteredWrapper size="large">
     <CommunityCard
       v-radar="{ name: 'Project content', desc: 'Main content area for project details and runner' }"
-      class="main"
+      class="relative mt-6 flex flex-[0_0_auto] gap-10 bg-grey-100 p-5"
     >
       <UILoading v-if="isLoading" cover mask="solid" />
       <UIError v-else-if="error != null" class="error" :retry="reloadProject">
         {{ $t(error.userMessage) }}
       </UIError>
-      <div class="left">
+      <div class="left flex-[1_1_744px]">
         <div class="project-wrapper">
           <template v-if="project != null">
             <ProjectRunnerSurface
@@ -352,14 +352,18 @@ const remixesRet = useQuery(
                 <Transition name="runner-mask-fade" appear>
                   <div
                     v-if="runnerState !== 'running'"
-                    :class="['runner-mask', { initial: runnerState === 'initial' }]"
+                    :class="runnerState === 'initial' ? 'pointer-events-auto' : 'pointer-events-none'"
+                    class="absolute inset-0 z-2 flex items-center justify-center rounded-2 bg-[rgba(36,41,47,0.6)] backdrop-blur-[5px]"
                   >
                     <template v-if="runnerState === 'initial'">
-                      <div v-if="needsSignInToRun" class="sign-in-prompt">
-                        <div class="sign-in-card">
+                      <div v-if="needsSignInToRun" class="flex h-full w-full items-center justify-center p-6">
+                        <div
+                          class="relative flex w-85 flex-col items-center overflow-visible rounded-[16px] bg-white px-6 pt-17 pb-6 text-center"
+                          style="box-shadow: 0 24px 32px -16px rgba(0, 0, 0, 0.1)"
+                        >
                           <!-- eslint-disable-next-line vue/no-v-html -->
                           <div class="kiko-wave" aria-hidden="true" v-html="kikoWaveSvg"></div>
-                          <p class="message">
+                          <p class="mb-11 leading-6 text-grey-800">
                             {{
                               $t({
                                 en: 'This game requires sign-in before playing',
@@ -369,7 +373,7 @@ const remixesRet = useQuery(
                           </p>
                           <UIButton
                             v-radar="{ name: 'Sign-in button', desc: 'Click to sign in' }"
-                            class="sign-in-button"
+                            class="w-full"
                             size="large"
                             color="primary"
                             @click="handleSignIn"
@@ -396,7 +400,7 @@ const remixesRet = useQuery(
             </ProjectRunnerSurface>
           </template>
         </div>
-        <div class="ops">
+        <div class="mt-3 flex justify-end gap-middle">
           <UIButton
             v-if="runnerState !== 'initial'"
             v-radar="{ name: 'Rerun button', desc: 'Click to rerun the project' }"
@@ -446,61 +450,67 @@ const remixesRet = useQuery(
           </UITooltip>
         </div>
       </div>
-      <div class="right">
+      <div class="right flex min-w-0 flex-[1_1_456px] flex-col pr-5">
         <template v-if="project != null">
-          <h2 class="title">{{ project.displayName }}</h2>
-          <RemixedFrom v-if="project.remixedFrom != null" class="remixed-from" :remixed-from="project.remixedFrom" />
-          <div class="info">
+          <h2 class="text-20/[1.4] text-title break-all">{{ project.displayName }}</h2>
+          <RemixedFrom v-if="project.remixedFrom != null" class="mt-2" :remixed-from="project.remixedFrom" />
+          <div class="mt-4 flex items-center justify-between">
             <OwnerInfo :owner="project.owner!" />
-            <p class="extra">
-              <span class="part" :title="$t(viewCount!.title)">
-                <UIIcon class="icon" type="eye" />
+            <p class="flex items-center gap-2">
+              <span class="flex items-center gap-1 text-hint-2" :title="$t(viewCount!.title)">
+                <UIIcon type="eye" style="width: 14px; height: 14px" />
                 {{ $t(viewCount!.text) }}
               </span>
               <template v-if="isOwner">
-                <i class="sep"></i>
-                <span class="part" :title="$t(likeCount!.title)">
-                  <UIIcon class="icon" type="heart" />
+                <i class="h-3 w-px bg-dividing-line-1"></i>
+                <span class="flex items-center gap-1 text-hint-2" :title="$t(likeCount!.title)">
+                  <UIIcon type="heart" style="width: 14px; height: 14px" />
                   {{ $t(likeCount!.text) }}
                 </span>
               </template>
-              <i class="sep"></i>
-              <span class="part" :title="$t(remixCount!.title)">
-                <UIIcon class="icon" type="remix" />
+              <i class="h-3 w-px bg-dividing-line-1"></i>
+              <span class="flex items-center gap-1 text-hint-2" :title="$t(remixCount!.title)">
+                <UIIcon type="remix" style="width: 14px; height: 14px" />
                 {{ $t(remixCount!.text) }}
               </span>
             </p>
           </div>
-          <div class="ops">
+          <div class="ops mt-4 flex gap-3">
             <template v-if="isOwner">
               <UIButton
                 v-radar="{ name: 'Edit button', desc: 'Click to edit the project' }"
+                style="flex: 1 1 0"
                 color="primary"
                 size="large"
                 icon="edit"
                 :loading="handleEdit.isLoading.value"
                 @click="handleEdit.fn"
-                >{{ $t({ en: 'Edit', zh: '编辑' }) }}</UIButton
               >
+                {{ $t({ en: 'Edit', zh: '编辑' }) }}
+              </UIButton>
               <UIButton
                 v-if="project.visibility === Visibility.Public"
                 v-radar="{ name: 'Share button', desc: 'Click to share the project' }"
+                style="flex: 1 1 0"
                 color="boring"
                 size="large"
                 icon="share"
                 @click="handleShare.fn"
-                >{{ $t({ en: 'Share', zh: '分享' }) }}</UIButton
               >
+                {{ $t({ en: 'Share', zh: '分享' }) }}
+              </UIButton>
               <UIButton
                 v-else
                 v-radar="{ name: 'Publish button', desc: 'Click to publish the project' }"
+                style="flex: 1 1 0"
                 color="boring"
                 size="large"
                 icon="share"
                 :loading="handlePublish.isLoading.value"
                 @click="handlePublish.fn"
-                >{{ $t({ en: 'Publish', zh: '发布' }) }}</UIButton
               >
+                {{ $t({ en: 'Publish', zh: '发布' }) }}
+              </UIButton>
               <UIDropdown placement="bottom-end" trigger="click">
                 <template #trigger>
                   <UIButton
@@ -516,13 +526,15 @@ const remixesRet = useQuery(
                     v-if="project.visibility === Visibility.Public"
                     v-radar="{ name: 'Unpublish option', desc: 'Click to unpublish the project' }"
                     @click="handleUnpublish.fn"
-                    >{{ $t({ en: 'Unpublish', zh: '取消发布' }) }}</UIMenuItem
                   >
+                    {{ $t({ en: 'Unpublish', zh: '取消发布' }) }}
+                  </UIMenuItem>
                   <UIMenuItem
                     v-radar="{ name: 'Remove option', desc: 'Click to remove the project' }"
                     @click="handleRemove.fn"
-                    >{{ $t({ en: 'Remove', zh: '删除' }) }}</UIMenuItem
                   >
+                    {{ $t({ en: 'Remove', zh: '删除' }) }}
+                  </UIMenuItem>
                 </UIMenu>
               </UIDropdown>
             </template>
@@ -530,16 +542,18 @@ const remixesRet = useQuery(
               <UIButton
                 v-if="hasRelease"
                 v-radar="{ name: 'Remix button', desc: 'Click to remix this project' }"
+                class="flex-[1_1_0]"
                 color="primary"
                 size="large"
                 icon="remix"
                 :loading="handleRemix.isLoading.value"
                 @click="handleRemix.fn"
-                >{{ $t({ en: 'Remix', zh: '改编' }) }}</UIButton
               >
+                {{ $t({ en: 'Remix', zh: '改编' }) }}
+              </UIButton>
               <UIButton
                 v-radar="{ name: 'Like button', desc: 'Click to like or unlike the project' }"
-                :class="{ liking }"
+                :class="['flex-[1_1_0]', { liking }]"
                 color="boring"
                 size="large"
                 :title="$t(likeCount!.title)"
@@ -551,21 +565,23 @@ const remixesRet = useQuery(
               </UIButton>
               <UIButton
                 v-radar="{ name: 'Share button', desc: 'Click to share the project' }"
+                class="flex-[1_1_0]"
                 color="boring"
                 size="large"
                 icon="share"
                 @click="handleShare.fn"
-                >{{ $t({ en: 'Share', zh: '分享' }) }}</UIButton
               >
+                {{ $t({ en: 'Share', zh: '分享' }) }}
+              </UIButton>
             </template>
           </div>
-          <UIDivider class="divider" />
+          <UIDivider style="margin: 24px 0 16px" />
           <UICollapse
             v-radar="{
               name: 'Project details',
               desc: 'Collapsible sections showing project description, instructions and release history'
             }"
-            class="collapse-container"
+            class="mb-2 flex-[1_1_0] overflow-y-auto"
             :default-expanded-names="['description', 'instructions', 'releases']"
           >
             <UICollapseItem :title="$t({ en: 'Description', zh: '描述' })" name="description">
@@ -586,7 +602,7 @@ const remixesRet = useQuery(
     </CommunityCard>
     <ProjectsSection
       v-radar="{ name: 'Popular remixes section', desc: 'Section showing popular remixes of this project' }"
-      class="remixes"
+      class="mt-5"
       context="project"
       :num-in-row="remixNumInRow"
       :query-ret="remixesRet"
@@ -604,7 +620,7 @@ const remixesRet = useQuery(
   </CenteredWrapper>
 </template>
 
-<style scoped lang="scss">
+<style scoped>
 .error {
   position: absolute;
   width: 100%;
@@ -613,205 +629,57 @@ const remixesRet = useQuery(
   background: var(--ui-color-grey-100);
 }
 
-.main {
-  position: relative;
-  flex: 0 0 auto;
-  margin-top: 24px;
-  padding: 20px;
-  display: flex;
-  gap: 40px;
-  background: var(--ui-color-grey-100);
+.runner-mask-fade-enter-from,
+.runner-mask-fade-leave-to {
+  opacity: 0;
 }
 
-.left {
-  flex: 1 1 744px;
-
-  .runner-mask-fade-enter-from,
-  .runner-mask-fade-leave-to {
-    opacity: 0;
-  }
-
-  .runner-mask-fade-enter-active,
-  .runner-mask-fade-leave-active {
-    transition: opacity 0.2s ease;
-  }
-
-  .project-wrapper {
-    position: relative;
-    width: 100%;
-    aspect-ratio: 4 / 3;
-    overflow: hidden;
-
-    .runner-mask {
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      border-radius: var(--ui-border-radius-2);
-      background: rgba(36, 41, 47, 0.6);
-      backdrop-filter: blur(5px);
-      -webkit-backdrop-filter: blur(5px);
-      z-index: 2;
-      pointer-events: none;
-    }
-
-    .runner-mask.initial {
-      pointer-events: auto;
-    }
-
-    .sign-in-prompt {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      width: 100%;
-      height: 100%;
-      padding: 24px;
-
-      .sign-in-card {
-        position: relative;
-        width: 340px;
-        padding: 68px 24px 24px;
-        background: #fff;
-        border-radius: 16px;
-        box-shadow: 0 24px 32px -16px rgba(0, 0, 0, 0.1);
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        text-align: center;
-        overflow: visible;
-      }
-
-      .kiko-wave {
-        position: absolute;
-        top: -56px;
-        width: 340px;
-        line-height: 0;
-
-        :deep(svg) {
-          display: block;
-          width: 100%;
-          height: auto;
-        }
-      }
-
-      .message {
-        margin-bottom: 44px;
-        line-height: 24px;
-        color: var(--ui-color-grey-800);
-      }
-
-      .sign-in-button {
-        width: 100%;
-      }
-    }
-
-    :deep(.ui-detailed-loading.cover.mask-semi-transparent .text) {
-      color: var(--ui-color-grey-100);
-    }
-
-    :deep(.project-runner-surface:not(.fullscreen) .ui-detailed-loading.cover) {
-      background: transparent;
-      backdrop-filter: none;
-      -webkit-backdrop-filter: none;
-      z-index: 3;
-    }
-  }
-
-  .ops {
-    margin-top: 12px;
-    display: flex;
-    gap: var(--ui-gap-middle);
-    justify-content: flex-end;
-  }
+.runner-mask-fade-enter-active,
+.runner-mask-fade-leave-active {
+  transition: opacity 0.2s ease;
 }
 
-.right {
-  flex: 1 1 456px;
-  min-width: 0;
-  padding-right: 20px;
-  display: flex;
-  flex-direction: column;
-
-  .title {
-    font-size: 20px;
-    line-height: 1.4;
-    color: var(--ui-color-title);
-    word-break: break-all;
-  }
+.project-wrapper {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 4 / 3;
+  overflow: hidden;
+}
 
-  .remixed-from {
-    margin-top: 8px;
-  }
+.project-wrapper :deep(.ui-detailed-loading.cover.mask-semi-transparent .text) {
+  color: var(--ui-color-grey-100);
+}
 
-  .info {
-    margin-top: 16px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    .extra {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-
-      .part {
-        display: flex;
-        gap: 4px;
-        align-items: center;
-        color: var(--ui-color-hint-2);
-      }
-
-      .icon {
-        width: 14px;
-        height: 14px;
-      }
-
-      .sep {
-        width: 1px;
-        height: 12px;
-        background-color: var(--ui-color-dividing-line-1);
-      }
-    }
-  }
+.project-wrapper :deep(.project-runner-surface:not(.fullscreen) .ui-detailed-loading.cover) {
+  background: transparent;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+  z-index: 3;
+}
 
-  .ops {
-    margin-top: 16px;
-    display: flex;
-    gap: 12px;
-
-    & > * {
-      flex: 1 1 0;
-
-      &.more {
-        flex: 0 0 auto;
-        width: 40px;
-        :deep(.content) {
-          padding: 0;
-        }
-      }
-    }
+.kiko-wave {
+  position: absolute;
+  top: -56px;
+  width: 340px;
+  line-height: 0;
+}
 
-    .liking :deep(.content) {
-      color: var(--ui-color-red-main);
-    }
-  }
+.kiko-wave > svg {
+  display: block;
+  width: 100%;
+  height: auto;
+}
 
-  .divider {
-    margin: 24px 0 16px;
-  }
+.ops > *.more {
+  flex: 0 0 auto;
+  width: 40px;
+}
 
-  .collapse-container {
-    margin-bottom: 8px;
-    flex: 1 1 0;
-    overflow-y: auto;
-  }
+.ops > *.more :deep(.content) {
+  padding: 0;
 }
 
-.remixes {
-  margin-top: 20px;
+.ops .liking :deep(.content) {
+  color: var(--ui-color-red-main);
 }
 </style>
diff --git a/spx-gui/src/utils/spotlight/SpotlightUI.vue b/spx-gui/src/utils/spotlight/SpotlightUI.vue
index 1dd33e6e11..0e8cf5120a 100644
--- a/spx-gui/src/utils/spotlight/SpotlightUI.vue
+++ b/spx-gui/src/utils/spotlight/SpotlightUI.vue
@@ -277,26 +277,20 @@ watch(
   </div>
 </template>
 
-<style lang="scss" scoped>
-$anchor-size: 26px;
-$anchor-offset-x: 6px;
-$anchor-offset-y: 4px;
-$transform-transition-property: transform 0.4s cubic-bezier(0.8, -0.3, 0.265, 1.2);
-$z-index: 10000; // TODO: Adjust as needed
-
+<style scoped>
 :global(.spotlight-attach-element-highlight) {
-  box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.17);
+  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.17);
 }
 
 .v-enter-active {
   transition:
     opacity 0.4s ease-in,
-    $transform-transition-property;
+    var(--spotlight-transform-transition);
 }
 .v-leave-active {
   transition:
     opacity 0.4s ease-out,
-    $transform-transition-property;
+    var(--spotlight-transform-transition);
 }
 .v-enter-from,
 .v-leave-to {
@@ -304,81 +298,93 @@ $z-index: 10000; // TODO: Adjust as needed
 }
 
 .spotlight-ui {
+  --spotlight-anchor-size: 26px;
+  --spotlight-anchor-offset-x: 6px;
+  --spotlight-anchor-offset-y: 4px;
+  --spotlight-transform-transition: transform 0.4s cubic-bezier(0.8, -0.3, 0.265, 1.2);
+  --spotlight-z-index: 10000; /* TODO: Adjust as needed */
+
   position: absolute;
   overflow: hidden;
   inset: 0;
   pointer-events: none;
-  z-index: $z-index;
+  z-index: var(--spotlight-z-index);
 
-  .spotlight-item {
+  & .spotlight-item {
     position: absolute;
 
     &.animated {
-      transition: $transform-transition-property;
+      transition: var(--spotlight-transform-transition);
     }
 
     &.bottom-right {
-      .anchor {
+      & .anchor {
         transform: rotate(0deg);
       }
-      .tips {
-        transform: translate(calc($anchor-size - $anchor-offset-x), -$anchor-offset-y);
+      & .tips {
+        transform: translate(
+          calc(var(--spotlight-anchor-size) - var(--spotlight-anchor-offset-x)),
+          calc(-1 * var(--spotlight-anchor-offset-y))
+        );
         border-top-left-radius: 2px;
-        .content {
+        & .content {
           border-top-left-radius: 2px;
         }
       }
     }
     &.bottom-left {
-      .anchor {
+      & .anchor {
         transform: rotate(90deg);
       }
-      .tips {
-        transform: translate(calc(-100% - $anchor-size + $anchor-offset-x), -$anchor-offset-y);
+      & .tips {
+        transform: translate(
+          calc(-100% - var(--spotlight-anchor-size) + var(--spotlight-anchor-offset-x)),
+          calc(-1 * var(--spotlight-anchor-offset-y))
+        );
         border-top-right-radius: 2px;
-        .content {
+        & .content {
           border-top-right-radius: 2px;
         }
       }
     }
     &.top-right {
-      .anchor {
+      & .anchor {
         transform: rotate(270deg);
       }
-      .tips {
+      & .tips {
         transform: translate(
-          calc($anchor-size - $anchor-offset-x / 2),
-          calc(-100% - 2 * $anchor-size + $anchor-offset-y / 2)
+          calc(var(--spotlight-anchor-size) - var(--spotlight-anchor-offset-x) / 2),
+          calc(-100% - 2 * var(--spotlight-anchor-size) + var(--spotlight-anchor-offset-y) / 2)
         );
         border-bottom-left-radius: 2px;
-        .content {
+        & .content {
           border-bottom-left-radius: 2px;
         }
       }
     }
     &.top-left {
-      .anchor {
+      & .anchor {
         transform: rotate(180deg);
       }
-      .tips {
+      & .tips {
         transform: translate(
-          calc(-100% - $anchor-size + $anchor-offset-x / 2),
-          calc(-100% - 2 * $anchor-size + $anchor-offset-y / 2)
+          calc(-100% - var(--spotlight-anchor-size) + var(--spotlight-anchor-offset-x) / 2),
+          calc(-100% - 2 * var(--spotlight-anchor-size) + var(--spotlight-anchor-offset-y) / 2)
         );
         border-bottom-right-radius: 2px;
-        .content {
+        & .content {
           border-bottom-right-radius: 2px;
         }
       }
     }
 
-    .anchor {
-      width: $anchor-size;
-      height: $anchor-size;
+    & .anchor {
+      width: var(--spotlight-anchor-size);
+      height: var(--spotlight-anchor-size);
       transform-origin: left top;
     }
 
-    .tips {
+    & .tips {
       border-radius: 14px;
       padding: 2px;
       font-size: 12px;
@@ -386,9 +392,9 @@ $z-index: 10000; // TODO: Adjust as needed
       background: var(--ui-color-grey-100);
       word-wrap: break-word;
       max-width: 300px;
-      box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.17);
+      box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.17);
 
-      .content {
+      & .content {
         border-radius: 12px;
         padding: 5px 8px;
         background: #7e66fc;

From 1dfc543efbf50da6eb70b02217ec065c44b60f75 Mon Sep 17 00:00:00 2001
From: chennan <chennan@qiniu.com>
Date: Thu, 2 Apr 2026 13:41:05 +0800
Subject: [PATCH 09/10] details

---
 docs/develop/tailwind-css-migration.md        | 578 ------------------
 spx-gui/src/app.css                           |   8 +-
 .../asset/gen/backdrop/BackdropImageItem.vue  |   2 +-
 .../asset/gen/sprite/SpriteImageItem.vue      |   2 +-
 .../community/project/OwnerInfo.vue           |   4 +-
 .../src/components/copilot/CopilotInput.vue   |   6 +-
 .../course/management/CourseItemMini.vue      |   1 +
 .../management/CourseSeriesEditModal.vue      |   2 +
 .../course/management/CourseSeriesItem.vue    |   1 +
 .../src/components/editor/ProjectEditor.vue   |   4 +-
 .../editor/sprite/animation/MuteSwitch.vue    |   2 +-
 .../src/components/ui/UIConfigProvider.vue    |  48 +-
 spx-gui/src/components/ui/UILink.vue          |  39 +-
 spx-gui/src/components/ui/global.css          |  35 ++
 spx-gui/src/pages/community/project.vue       |   2 +-
 15 files changed, 64 insertions(+), 670 deletions(-)
 delete mode 100644 docs/develop/tailwind-css-migration.md

diff --git a/docs/develop/tailwind-css-migration.md b/docs/develop/tailwind-css-migration.md
deleted file mode 100644
index 1c745d0c0e..0000000000
--- a/docs/develop/tailwind-css-migration.md
+++ /dev/null
@@ -1,578 +0,0 @@
-# Tailwind CSS Migration Assessment for spx-gui
-
-This document investigates whether XBuilder frontend styling in `spx-gui` should migrate to Tailwind CSS.
-
-Issue: `goplus/builder#2981`
-
-## Conclusion
-
-Tailwind CSS is technically feasible in `spx-gui`, but a full migration is not a good near-term tradeoff.
-
-The current frontend already has a working design-token layer, a custom UI component library, and deep integration with Naive UI theme overrides. Because of that, Tailwind would mainly change the authoring model for layout and simple component styling. It would not replace major parts of the existing styling system unless the project also commits to a broader UI-layer refactor.
-
-The recommended direction is an incremental hybrid approach:
-
-- keep the existing `--ui-*` design tokens and Naive UI theme layer
-- add Tailwind only as an optional utility layer
-- validate it on a small set of low-risk pages or self-contained components first
-- only expand usage if the pilot materially improves development speed and code review quality
-
-## Current Target
-
-The current target is not "remove all SCSS from the repo".
-
-The near-term goal is more specific:
-
-- in business code outside `src/components/ui/`, use Tailwind as the default styling tool for local layout and surface styling
-- if business code still needs local authored styles, prefer plain CSS over SCSS
-- remove business-code imports of SCSS helpers from `src/components/ui/`
-- remove remaining SCSS files outside `src/components/ui/` as part of this phase
-- keep the existing design-system layer in `src/components/ui/` as the source of truth for tokens and Naive UI integration
-- allow `src/components/ui/` to keep local SCSS for now when that remains the clearest implementation
-
-This means the project is pursuing two related but different directions:
-
-- business code should move toward Tailwind-first plus plain CSS fallback, with SCSS being removed from that layer in this phase
-- the component-library layer should move more cautiously, with looser short-term requirements on SCSS removal
-
-## Current Styling Architecture
-
-The current frontend styling model is centered around Vue SFC local styles plus shared CSS variables, with Tailwind now added as an optional utility layer.
-
-- `spx-gui` uses Vite + Vue 3, includes both Tailwind and Sass tooling in [spx-gui/package.json](../../spx-gui/package.json)
-- the app loads global styling through [spx-gui/src/main.ts](../../spx-gui/src/main.ts) and [spx-gui/src/app.css](../../spx-gui/src/app.css), which keeps [spx-gui/src/components/ui/global.css](../../spx-gui/src/components/ui/global.css) as the base layer; Tailwind preflight is intentionally disabled, and the app imports only Tailwind theme and utilities layers
-- design tokens are defined in TypeScript under [spx-gui/src/components/ui/tokens/index.ts](../../spx-gui/src/components/ui/tokens/index.ts) and related files
-- the token objects are converted into `--ui-*` CSS variables and injected globally by [spx-gui/src/components/ui/UIConfigProvider.vue](../../spx-gui/src/components/ui/UIConfigProvider.vue)
-- Naive UI theme overrides are also defined in [spx-gui/src/components/ui/UIConfigProvider.vue](../../spx-gui/src/components/ui/UIConfigProvider.vue), so the token system serves both custom CSS and third-party components
-- most component styles live inside local `<style scoped lang="scss">` blocks, for example [spx-gui/src/components/ui/UIButton.vue](../../spx-gui/src/components/ui/UIButton.vue) and [spx-gui/src/components/editor/navbar/EditorNavbar.vue](../../spx-gui/src/components/editor/navbar/EditorNavbar.vue)
-
-Measured footprint in `spx-gui/src`:
-
-- 411 Vue files total
-- 325 Vue files contain a `<style>` block
-- 322 Vue files use SCSS in the SFC
-- 115 `:deep(...)` usages override descendants or third-party internals
-- 22 direct imports from `naive-ui`
-- 5 standalone stylesheet files under `src`, with most styling still embedded in Vue SFCs
-
-Representative styling patterns:
-
-- token-driven custom components: [spx-gui/src/components/ui/UIButton.vue](../../spx-gui/src/components/ui/UIButton.vue)
-- app-wide token and theme bridge: [spx-gui/src/components/ui/UIConfigProvider.vue](../../spx-gui/src/components/ui/UIConfigProvider.vue)
-- responsive breakpoint logic: [spx-gui/src/components/ui/responsive.ts](../../spx-gui/src/components/ui/responsive.ts) and [spx-gui/src/components/community/CenteredWrapper.vue](../../spx-gui/src/components/community/CenteredWrapper.vue)
-- complex page-level nested styling: [spx-gui/src/pages/community/project.vue](../../spx-gui/src/pages/community/project.vue)
-- content-renderer deep selectors: [spx-gui/src/components/copilot/MarkdownView.vue](../../spx-gui/src/components/copilot/MarkdownView.vue)
-
-## Tailwind Fit Assessment
-
-Tailwind fits part of the project well, but not all of it.
-
-Good fit:
-
-- layout-heavy pages using flex, grid, spacing, width, and alignment utilities
-- simple presentational components with limited state combinations
-- new pages or isolated features where templates are already the main source of UI structure
-- responsive layout rules, because the current breakpoint usage is limited and can be mapped into a custom Tailwind config
-
-Weak fit:
-
-- components with many styling states encoded through local CSS variables and nested selectors
-- custom wrappers around Naive UI that rely on theme overrides plus `:deep(...)` selectors
-- content renderers and editor surfaces that style generated DOM, not just authored template nodes
-- components with runtime geometry or inline styles, such as sliders, image previews, waveform editors, or draggable/resizable panes
-
-Poor or no fit:
-
-- Monaco editor integration and other third-party DOM that already depends on custom CSS
-- Konva or canvas-rendered surfaces where styling is not driven by CSS utility classes
-
-## Migration Cost Estimate
-
-Estimated cost if the goal is only to introduce Tailwind as an optional utility layer:
-
-- setup and token mapping: 1 to 2 engineer-days
-- pilot migration for 1 small feature area: 2 to 5 engineer-days
-- documentation and team conventions: 1 engineer-day
-
-Estimated cost for a meaningful incremental rollout across layout-heavy areas:
-
-- 2 to 4 engineer-weeks
-- includes Tailwind setup, token mapping, conventions, 10 to 20 component/page migrations, and cleanup of duplicated styling patterns
-
-Estimated cost for a broad migration that tries to make Tailwind the dominant styling approach in `spx-gui`:
-
-- 6 to 10 engineer-weeks at minimum
-- likely more if the scope includes reworking Naive UI wrappers, complex editor surfaces, and duplicated `:deep(...)` customizations
-
-Estimated cost for a true full migration away from the current SCSS-plus-token approach:
-
-- high risk and not currently justified
-- would effectively become a UI architecture refactor, not just a styling migration
-
-## Major Risks And Constraints
-
-### 1. Existing token system already solves part of the problem
-
-The project already has a centralized token system and shared CSS variables. Tailwind would not replace that cleanly unless the team rewrites token consumption across both custom components and Naive UI overrides.
-
-### 2. Tailwind does not remove the Naive UI dependency
-
-Naive UI is embedded in the app theme model via [spx-gui/src/components/ui/UIConfigProvider.vue](../../spx-gui/src/components/ui/UIConfigProvider.vue). Even after adding Tailwind, the project would still need to maintain Naive UI theming and style overrides.
-
-### 3. Scoped SCSS is currently aligned with component boundaries
-
-A large share of the codebase keeps style logic close to each Vue component. Tailwind can improve speed for simple cases, but moving every component to class-heavy templates would be noisy and produce uneven code style if done inconsistently.
-
-### 4. `:deep(...)` usage is a real migration brake
-
-There are 115 `:deep(...)` usages. These target generated content, child internals, or third-party component markup. Tailwind utilities do not eliminate that category of styling work.
-
-### 5. Complex editor UI gets limited value from utility classes
-
-Several editor surfaces rely on runtime positions, inline CSS variables, drag behavior, SVG, or canvas-like rendering. Those areas already need custom CSS or programmatic styling, so Tailwind adds little leverage there.
-
-### 6. Design consistency can regress during mixed migration
-
-If the team starts using raw Tailwind classes without a token bridge and a small set of conventions, the result will drift away from the existing `--ui-*` design language.
-
-### 7. Maintenance cost can increase before it decreases
-
-During the transition, the project would have to maintain:
-
-- scoped SCSS
-- CSS variables
-- Naive UI theme overrides
-- Tailwind config and utilities
-
-That is acceptable only if the migration remains intentionally narrow at first.
-
-## Strategy Comparison
-
-### Full Migration
-
-Pros:
-
-- one dominant styling model after the migration finishes
-- potentially faster AI-assisted markup styling in the long run
-
-Cons:
-
-- high rewrite cost
-- high risk of regressions in editor surfaces and custom UI components
-- still does not remove the need for custom CSS in several critical areas
-- poor short-term return on effort
-
-Assessment: not recommended.
-
-### Incremental Migration
-
-Pros:
-
-- low risk
-- easy to stop if the benefits are smaller than expected
-- preserves current design tokens and Naive UI integration
-- lets the team learn where Tailwind actually helps
-
-Cons:
-
-- mixed styling models for some time
-- requires discipline to avoid ad hoc utility usage
-
-Assessment: viable.
-
-### Hybrid Approach With Guardrails
-
-This means Tailwind is introduced first where it improves business-code authoring, while the design-system layer keeps its current implementation patterns unless there is a clear payoff in changing them.
-
-Recommended usage boundaries:
-
-- use Tailwind for business-code page layout, spacing, simple cards, and simple wrappers
-- in business code, prefer plain CSS over SCSS when Tailwind is not the right expression
-- remove business-code dependencies on shared SCSS helper files from `src/components/ui/`
-- remove remaining SCSS files outside `src/components/ui/` instead of carrying them forward as a second-tier target
-- keep the existing token system as the source of truth
-- allow `src/components/ui/` to keep local SCSS in the short term, especially where it wraps Naive UI, exposes component variants, or relies on local stateful styling
-- keep CSS or SCSS for complex stateful widgets, `:deep(...)` overrides, editor internals, animation-heavy UI, and third-party DOM styling
-
-Assessment: best option.
-
-## Recommended Plan
-
-### Phase 1: Proof Of Fit
-
-- add Tailwind to `spx-gui` without changing existing styling
-- map Tailwind theme values to the current `--ui-*` tokens where practical
-- define custom breakpoints that match current responsive behavior
-- document when Tailwind is allowed and when local SCSS should remain the default
-
-Success criteria:
-
-- build works cleanly with Vite
-- no conflicts with current global styles or Naive UI theme overrides
-- a pilot page can use Tailwind without introducing duplicated design values
-
-### Phase 2: Pilot Migration
-
-Choose one small, layout-oriented area first. Good candidates are community or tutorial pages, not the editor core.
-
-Suggested pilot targets:
-
-- [spx-gui/src/components/community/CenteredWrapper.vue](../../spx-gui/src/components/community/CenteredWrapper.vue)
-- community listing or detail sections with mostly layout styling
-- simple UI wrappers that do not depend heavily on `:deep(...)`
-
-Avoid as first pilots:
-
-- editor navbar and editor panels
-- Monaco-related UI
-- waveform, drag-and-drop, or resize-heavy components
-- components that mainly customize Naive UI internals
-
-Success criteria:
-
-- the converted code is shorter or clearer than the current SCSS
-- design stays visually identical
-- AI-assisted edits become easier in practice, not just in theory
-
-### Phase 3: Decide Whether To Expand
-
-After the pilot, compare:
-
-- implementation speed
-- readability in code review
-- consistency with existing design tokens
-- regression rate
-- amount of residual SCSS still required
-
-If the pilot does not show a clear gain, stop and keep the current styling model.
-
-If the pilot is successful, expand only into other layout-heavy areas.
-
-## SCSS Migration Backlog
-
-The current SCSS usage in `spx-gui` should not be treated as a single migration bucket.
-
-The practical migration unit is not "all SCSS files" but "SCSS by responsibility":
-
-- layout-heavy page and card styling is a good Tailwind candidate
-- global foundation styling should remain, even if it later moves from SCSS to plain CSS
-- deep overrides, generated content styling, and editor surfaces should remain in CSS or SCSS
-- small SCSS helper layers should be phased out only after their consumers are migrated
-
-### Priority 1: Good Tailwind Candidates
-
-These files are strong candidates for early migration because they are business-code surfaces whose styling is mostly local layout, spacing, sizing, and simple visual presentation on authored template nodes.
-
-Recommended first batch:
-
-- [spx-gui/src/pages/community/explore.vue](../../spx-gui/src/pages/community/explore.vue)
-- [spx-gui/src/pages/community/home.vue](../../spx-gui/src/pages/community/home.vue)
-- [spx-gui/src/components/community/user/sidebar/UserSidebar.vue](../../spx-gui/src/components/community/user/sidebar/UserSidebar.vue)
-- [spx-gui/src/pages/tutorials/course-series.vue](../../spx-gui/src/pages/tutorials/course-series.vue)
-
-Recommended second batch:
-
-- [spx-gui/src/components/navbar/NavbarWrapper.vue](../../spx-gui/src/components/navbar/NavbarWrapper.vue)
-- [spx-gui/src/components/project/ProjectItem.vue](../../spx-gui/src/components/project/ProjectItem.vue)
-- user-page wrappers and list pages under `src/pages/community/user/` where the styling is primarily page shell and list layout
-
-Migration rule for this category:
-
-- move layout, spacing, sizing, typography, and simple hover states into Tailwind classes or small project utilities in `src/app.css`
-- if local authored styles still remain, prefer plain CSS over SCSS
-- remove the local `<style scoped lang="scss">` block after the migrated component is visually verified
-
-### Priority 2: Keep CSS Or SCSS Explicitly
-
-These files should remain outside the primary Tailwind migration target because their value comes from deep selectors, third-party DOM overrides, generated content styling, complex runtime layout, or highly stateful design-system behavior.
-
-Representative keep-as-CSS-or-SCSS areas:
-
-- design-system wrappers such as [spx-gui/src/components/ui/UIButton.vue](../../spx-gui/src/components/ui/UIButton.vue) and [spx-gui/src/components/ui/UITextInput.vue](../../spx-gui/src/components/ui/UITextInput.vue)
-- content renderers such as [spx-gui/src/components/copilot/MarkdownView.vue](../../spx-gui/src/components/copilot/MarkdownView.vue) and [spx-gui/src/components/common/CodeView.vue](../../spx-gui/src/components/common/CodeView.vue)
-- editor and runner surfaces such as [spx-gui/src/components/editor/preview/EditorPreview.vue](../../spx-gui/src/components/editor/preview/EditorPreview.vue), [spx-gui/src/pages/community/project.vue](../../spx-gui/src/pages/community/project.vue), and components under `src/components/project/runner/` and `src/components/editor/`
-
-Migration rule for this category:
-
-- do not migrate these files just to reduce SCSS usage
-- keep local CSS or SCSS where it is the clearest way to express stateful styling, `:deep(...)` overrides, pseudo-elements, counters, container queries, or generated DOM styling
-
-### Priority 2.5: Remove Business-Code Dependencies On Shared SCSS Helpers
-
-Business code should stop depending on shared SCSS helper files even if those helper files still temporarily exist for `src/components/ui/`.
-
-Current remaining helper dependencies include:
-
-- 2 direct imports of `src/components/ui/link.scss`
-
-Migration rule for this category:
-
-- replace `link.scss` usage with local CSS or template classes at the call site
-- do not keep business-code SCSS imports just because the helper file still exists for another area
-
-### Priority 2.6: Remove SCSS Files Outside `src/components/ui/`
-
-This phase should not leave a second bucket of non-UI-library SCSS behind.
-
-Migration rule for this category:
-
-- for files outside `src/components/ui/`, convert remaining `<style lang="scss">` blocks to Tailwind or plain CSS in the same pass
-- if a non-UI-library file still needs authored local styles after migration, keep them as plain CSS rather than SCSS
-- reserve SCSS carryover for `src/components/ui/` only in this phase
-
-### Priority 3: Phase Out Small SCSS Helper Layers
-
-These files are not long-term migration targets themselves. They should be removed only after the remaining consumers are migrated or absorbed into component-local styles.
-
-- [spx-gui/src/components/ui/link.scss](../../spx-gui/src/components/ui/link.scss)
-	This should be folded into link components or replaced by a small Tailwind utility convention before deleting the mixin file.
-- [spx-gui/src/utils/utils.scss](../../spx-gui/src/utils/utils.scss)
-	This should be replaced by direct Tailwind utilities such as truncation helpers or by local component CSS where needed.
-
-### Global Foundation Styling
-
-Global foundation styling should remain even in a Tailwind-based hybrid model.
-
-- [spx-gui/src/components/ui/global.css](../../spx-gui/src/components/ui/global.css) and its imported [spx-gui/src/components/ui/reset.css](../../spx-gui/src/components/ui/reset.css) should not be deleted as part of Tailwind adoption
-- Tailwind preflight is intentionally disabled, so these files remain the project base layer for reset rules, `box-sizing`, button font inheritance, `@font-face`, and other shared foundation styles
-- this base layer may evolve over time, but it should continue to live in project-owned CSS rather than being replaced implicitly by Tailwind preflight
-
-### Recommended Execution Order
-
-1. Finish low-risk page-shell and list-layout migrations in community and tutorials areas.
-2. Migrate simple card components such as project and course list items.
-3. Replace the remaining `link.scss` and `utils.scss` consumers.
-4. Delete helper SCSS files only after they have no remaining imports or mixin usages.
-5. Keep editor, runner, markdown, and Naive UI wrapper styling outside the migration scope unless there is a separate reason to refactor them.
-
-## Pilot Conventions And Preferences
-
-The community and tutorials pilot clarified a few practical conventions that should guide follow-up migrations.
-
-These are not abstract preferences. They reflect patterns that were already implemented and verified in the pilot components and pages.
-
-### 1. Keep Tailwind As A Local Authoring Tool, Not A New Global Dumping Ground
-
-The global entry file [spx-gui/src/app.css](../../spx-gui/src/app.css) should stay narrowly scoped.
-
-It is the right place for:
-
-- Tailwind entry setup such as importing `tailwindcss/theme.css`, `tailwindcss/utilities.css`, and `@source`
-- the theme bridge from existing `--ui-*` variables to Tailwind tokens
-- rare project-wide utilities that are truly cross-feature and not page-specific
-
-It is not the right place for:
-
-- tutorials-only utilities
-- page-local dimensions, transforms, or background colors
-- feature-specific card or banner styles
-
-Rule of thumb:
-
-- if a class name would only make sense inside one page or one small feature area, keep it local to that component instead of promoting it into `app.css`
-
-### 2. Bridge Global Tokens, Not Page-Specific Business Styling
-
-The Tailwind theme bridge should cover stable design-system tokens from [spx-gui/src/components/ui/tokens/index.ts](../../spx-gui/src/components/ui/tokens/index.ts).
-
-That includes:
-
-- shared palette tokens
-- semantic tokens such as `primary`, `danger`, `success`, `sprite`, `sound`, and `stage`
-- typography, spacing, radius, and shadow tokens
-
-It should not absorb page-specific visual decisions such as a tutorials-only banner color or one-off sizing tokens.
-
-Rule of thumb:
-
-- bridge values that belong to the whole product design language
-- keep values that exist only for one feature in the feature itself
-
-Theme-reset preference:
-
-- for theme namespaces already covered by the design system, such as color, shadow, font, font-size, radius, and line-height, reset Tailwind's default values and expose only the project-specific values intended for use in this repo
-
-Token usage preference:
-
-- in Tailwind utility classes, prefer the bridged semantic tokens such as `text-text`, `text-title`, and `bg-primary-100`
-- in local CSS or SCSS rules, prefer using the original `--ui-*` variables directly, because `--ui-*` remains the source of truth and the Tailwind bridge exists primarily for utility-class authoring
-- when a Tailwind utility needs to reference a CSS custom property directly, prefer the Tailwind v4 shorthand such as `text-(--token)`, `bg-(--token)`, `border-(--token)`, or `shadow-(--token)` over older forms like `text-[var(--token)]` or `bg-[var(--token)]`
-
-Bridge naming and text-token preference:
-
-- choose bridge names that do not collide with Tailwind defaults or existing UI-library class names; avoid introducing helpers such as `leading-1` that look like built-in Tailwind utilities but mean something project-specific
-- define text-size tokens in `@theme` before using named utilities such as `text-12`, `text-13`, `text-24`, or `text-36`
-- when a named text utility should carry a default line-height, define it through the paired `--text-*-line-height` token instead of introducing a parallel custom leading scale
-
-### 3. Prefer Tailwind For Straightforward Layout And Surface Styling
-
-The pilot confirmed that Tailwind works well for the following kinds of changes:
-
-- flex and grid layout
-- spacing, width, height, alignment, and overflow
-- simple typography application through bridged tokens
-- simple hover transitions on authored template nodes
-
-Representative examples from the pilot:
-
-- [spx-gui/src/pages/tutorials/index.vue](../../spx-gui/src/pages/tutorials/index.vue)
-- [spx-gui/src/components/tutorials/TutorialsBanner.vue](../../spx-gui/src/components/tutorials/TutorialsBanner.vue)
-- [spx-gui/src/components/tutorials/CourseSeriesItem.vue](../../spx-gui/src/components/tutorials/CourseSeriesItem.vue)
-
-Preferred style in this category:
-
-- write the style directly in the template when the utilities remain readable
-- when original CSS uses `flex: <grow> <shrink> <basis>`, preserve that shorthand with `flex-[<grow>_<shrink>_<basis>]` instead of decomposing it into partial utilities such as `shrink-0`, so grow, shrink, and basis stay coupled during migration
-- remove the local style block after the result is verified
-
-Responsive styling preference:
-
-- reset Tailwind's default breakpoint names and use only the project-specific names `tablet`, `desktop`, and `desktop-large`
-- map the project breakpoints into Tailwind once in [spx-gui/src/app.css](../../spx-gui/src/app.css)
-- prefer Tailwind responsive variants for style changes instead of runtime `useResponsive()` checks
-- keep runtime responsive helpers only for non-style logic such as changing counts, queries, or other behavior that CSS cannot express
-
-### 4. Do Not Force Tailwind Where A Small Inline Style Is Clearer
-
-Some values are technically expressible in Tailwind but are not a good fit for utility classes.
-
-Examples from the pilot:
-
-- special color expressions such as `rgb(from var(--ui-color-grey-1000) r g b / 0.2)`
-- asset URLs that are clearer when imported through TypeScript
-- one-off values that would otherwise require long arbitrary-value classes
-
-Preferred style in this category:
-
-- import the asset or compute the value in script when that makes the dependency explicit
-- bind it through `:style` when the inline form is shorter and clearer than a custom utility or arbitrary class
-
-This is the current preferred pattern for one-off backgrounds in migrated components such as [spx-gui/src/components/tutorials/CourseSeriesItem.vue](../../spx-gui/src/components/tutorials/CourseSeriesItem.vue).
-
-### 5. Do Not Introduce Setup Variables For Single-Use Style Values Without A Payoff
-
-During the pilot, a temporary setup variable was introduced for a single background image style and then removed.
-
-Preferred style:
-
-- if a style value is used only once and is still readable inline, bind it directly in the template
-- only lift it into script when it is reused, computed, or meaningfully improves readability
-
-### 6. Prefer Explicit Asset Imports Over Tailwind `url(...)` Classes When Readability Matters
-
-Tailwind arbitrary `url(...)` classes do work correctly through Vite build and asset hashing.
-
-However, the pilot showed that this form can still create review friction because the dependency path is less explicit in the template.
-
-Preferred style:
-
-- for important or non-obvious asset references, prefer `import stageBgUrl from '...'` plus `:style="{ backgroundImage: \`url(${stageBgUrl})\` }"`
-- reserve Tailwind `bg-[url(...)]` for cases where the shorthand is clearly readable and unlikely to cause doubt
-
-### 7. Keep Migration Decisions At The Responsibility Level, Not The File-Extension Level
-
-The pilot reinforced the original migration strategy:
-
-- Tailwind is a good fit for local page-shell and card layout concerns
-- local CSS or SCSS should remain for deep selectors, generated content, third-party DOM overrides, and complex stateful widgets
-- a file does not need to become "100% Tailwind" to count as successfully migrated
-
-The goal is clearer and more maintainable code, not maximizing utility-class usage.
-
-### 8. Preserve Styling Hook Classes Across Component Boundaries
-
-Recent migrations exposed a failure mode that is easy to miss in review: some business components rely on semantic classes exported by child components as part of a styling contract.
-
-Examples from the pilot:
-
-- `CourseItem.vue` and `CourseSeriesItem.vue` reveal slotted menus through parent `:deep(.corner-menu)` rules
-- `CourseSelector.vue` adjusts a child action icon through selectors that depend on `.course-item-mini` and `.action-icon`
-
-Preferred style:
-
-- treat these semantic classes as styling API surfaces, not incidental markup
-- do not remove them just because the element's own spacing, color, or border styles moved into Tailwind utilities
-- when a parent or sibling component still depends on one of these classes, preserve it and migrate only the visual declarations around it
-
-Rule of thumb:
-
-- if a class name is referenced outside the current component file, keep it unless the dependent selector is removed in the same change
-
-### 9. Keep Cross-Component Descendant Styling In Local CSS
-
-The pilot also showed that Tailwind arbitrary descendant selectors become hard to read once they cross component boundaries, target slot content, or mix with `:deep(...)`.
-
-Examples:
-
-- hover-reveal logic for slotted corner menus
-- parent selectors that style child internals through `:deep(...)`
-- slot-content targeting where the child controls the rendered class names
-
-Preferred style:
-
-- keep authored layout, spacing, and simple surfaces in Tailwind
-- keep cross-component descendant styling in a small local CSS block, preferably plain CSS when SCSS features are not needed
-
-This split is usually clearer than packing selectors such as `[&:hover_.corner-menu]...` into the template.
-
-### 10. Respect Internal Root Styles Of Wrapper Components
-
-Wrapper components in `src/components/ui/` sometimes style their own root elements in ways that external utilities cannot safely replace.
-
-Two concrete cases from the pilot:
-
-- `UIImg` keeps `position: relative` on its root so loading overlays and background-image behavior work correctly
-- `UIIcon` fixes its root width and height, so `h-*` / `w-*` classes on the component instance may not win
-
-Preferred style:
-
-- before applying root-level positioning or sizing utilities to a wrapped UI component, inspect the component implementation
-- if the wrapper already owns the root layout semantics, use an outer wrapper for positioning concerns such as `absolute`, `top`, `left`, and `z-index`
-- for one-off width/height overrides on wrapper roots such as `UIIcon`, prefer inline `style` when that is the shortest and clearest way to win the cascade
-
-### 11. Keep Exact Local Values Local, With A Visible TODO
-
-Some migrated components still need exact local visual values that are not part of the current token system.
-
-Preferred style:
-
-- keep those values local instead of forcing them into the global theme bridge
-- add a nearby comment such as `TODO: review this ... value` so later cleanup can decide whether the value should remain local or become a token
-
-### 12. Flatten `:deep(...)` Selectors In Plain Scoped CSS
-
-When a file is migrated from SCSS to plain scoped CSS, nested `:deep(...)` forms should not be carried over mechanically.
-
-Preferred style:
-
-- in plain `<style scoped>`, write explicit flat selectors such as `.preview :deep(svg)` instead of nested forms like `.preview { :deep(svg) { ... } }`
-- be especially careful in `v-html` or raw-SVG cases, where the descendant content does not receive the component's scoped attribute and depends on the `:deep(...)` selector being compiled correctly
-- keep SCSS-style nesting only in files that still explicitly use SCSS
-
-## Recommendation
-
-Tailwind CSS is worth evaluating in `spx-gui`, but only as a constrained utility layer.
-
-It is not worth pursuing as a near-term full migration target because the project already has:
-
-- a functioning token system
-- a custom UI component layer
-- Naive UI theme integration
-- many component-local scoped SCSS blocks
-- a meaningful number of deep selectors and complex editor surfaces
-
-The practical recommendation for issue `#2981` is:
-
-- conclude that Tailwind is feasible
-- reject full migration for now
-- recommend a hybrid incremental pilot
-- make the pilot target a simple community or tutorial area before touching editor internals
-
-## Suggested Next Step
-
-If the team wants to continue after this assessment, the next task should be a small proof-of-concept PR that:
-
-- installs Tailwind in `spx-gui`
-- defines the minimal theme bridge to current tokens
-- converts one low-risk page or wrapper component
-- records what became simpler and what still required SCSS
diff --git a/spx-gui/src/app.css b/spx-gui/src/app.css
index 16b5bf6f05..6046822208 100644
--- a/spx-gui/src/app.css
+++ b/spx-gui/src/app.css
@@ -4,7 +4,7 @@
 @import 'tailwindcss/theme.css' layer(theme);
 @import 'tailwindcss/utilities.css' layer(utilities);
 
-@source "./**/*.{vue,ts,tsx,js,jsx,html}";
+/* @tailwindcss/vite performs automatic source detection; re-add @source if specific files are missed */
 
 /*
  * Shared UILink component variants.
@@ -199,7 +199,7 @@
   --color-white: #fff;
 
   /* Typography tokens bridged from the UI token layer. */
-  --font-sans: var(
+  --font-main: var(
     --ui-font-family-main,
     AlibabaHealthB,
     -apple-system,
@@ -215,9 +215,7 @@
     'Segoe UI Symbol',
     'Noto Color Emoji'
   );
-  --font-mono: var(--ui-font-family-code, Menlo, Monaco, 'Courier New', monospace);
-  --font-main: var(--font-sans);
-  --font-code: var(--font-mono);
+  --font-code: var(--ui-font-family-code, Menlo, Monaco, 'Courier New', monospace);
 
   /* Radius and shadow tokens bridged from the UI token layer. */
   --radius-none: 0px;
diff --git a/spx-gui/src/components/asset/gen/backdrop/BackdropImageItem.vue b/spx-gui/src/components/asset/gen/backdrop/BackdropImageItem.vue
index c5a3d9a52d..46dcb0b013 100644
--- a/spx-gui/src/components/asset/gen/backdrop/BackdropImageItem.vue
+++ b/spx-gui/src/components/asset/gen/backdrop/BackdropImageItem.vue
@@ -31,7 +31,7 @@ const loading = computed(() => props.loading || fileLoading.value)
       name: 'Backdrop image item',
       desc: 'Click to select this image as the backdrop'
     }"
-    class="flex items-center justify-center overflow-hidden border-2 border-transparent bg-grey-300 p-1 transition-[width,height,border-radius] duration-200 ease-in-out"
+    class="flex items-center justify-center overflow-hidden border-2 border-transparent bg-grey-300 p-1 transition-[transform,border-radius] duration-200 ease-in-out"
     :class="[
       compact ? 'h-17 w-22 rounded-1' : 'h-27 w-35 rounded-2',
       active ? 'border-turquoise-500 bg-turquoise-200 cursor-default' : '',
diff --git a/spx-gui/src/components/asset/gen/sprite/SpriteImageItem.vue b/spx-gui/src/components/asset/gen/sprite/SpriteImageItem.vue
index 9714f5a598..3eab450f62 100644
--- a/spx-gui/src/components/asset/gen/sprite/SpriteImageItem.vue
+++ b/spx-gui/src/components/asset/gen/sprite/SpriteImageItem.vue
@@ -31,7 +31,7 @@ const loading = computed(() => props.loading || fileLoading.value)
       name: 'Sprite image item',
       desc: 'Click to select this image as the default costume for the sprite'
     }"
-    class="flex items-center justify-center overflow-hidden border-2 border-transparent bg-grey-300 p-1 transition-[width,height,border-radius] duration-200 ease-in-out"
+    class="flex items-center justify-center overflow-hidden border-2 border-transparent bg-grey-300 p-1 transition-[transform,border-radius] duration-200 ease-in-out"
     :class="[
       compact ? 'h-22 w-22 rounded-1' : 'h-35 w-35 rounded-2',
       active ? 'border-turquoise-500 bg-turquoise-200 cursor-default' : '',
diff --git a/spx-gui/src/components/community/project/OwnerInfo.vue b/spx-gui/src/components/community/project/OwnerInfo.vue
index 9e724e3e06..418e0af95a 100644
--- a/spx-gui/src/components/community/project/OwnerInfo.vue
+++ b/spx-gui/src/components/community/project/OwnerInfo.vue
@@ -14,11 +14,11 @@ const avatarUrl = useAvatarUrl(() => user.value?.avatar)
 <template>
   <!-- TODO: extract to `@/components/ui/`? -->
   <UserLink
-    class="link-boring group inline-flex items-center gap-1 text-title underline"
+    class="group flex items-center gap-1 text-title underline transition-colors duration-100 hover:text-primary-main active:text-primary-600"
     :user="user?.username ?? null"
   >
     <i
-      class="block h-6 w-6 rounded-full border-2 border-grey-100 bg-grey-100 bg-center bg-contain transition-[border-color] duration-100 group-hover:border-primary-400 group-active:border-primary-600"
+      class="block h-6 w-6 rounded-full border-2 border-grey-100 bg-grey-100 bg-center bg-contain transition-colors duration-100 group-hover:border-primary-400 group-active:border-primary-600"
       :style="user != null ? { backgroundImage: `url(${avatarUrl})` } : null"
     ></i>
     {{ user?.displayName }}
diff --git a/spx-gui/src/components/copilot/CopilotInput.vue b/spx-gui/src/components/copilot/CopilotInput.vue
index ce0575259c..458de97a7e 100644
--- a/spx-gui/src/components/copilot/CopilotInput.vue
+++ b/spx-gui/src/components/copilot/CopilotInput.vue
@@ -40,7 +40,7 @@ defineExpose({ focus })
 </script>
 
 <template>
-  <div class="group" :class="{ loading }" @click="focus">
+  <div class="group/loading" :class="{ loading }" @click="focus">
     <div class="content flex h-full items-center gap-2.5 bg-grey-100 px-3.5 py-3">
       <div v-if="loading" class="dot-loading flex items-center justify-between gap-0.5">
         <div class="dot"></div>
@@ -57,7 +57,7 @@ defineExpose({ focus })
         ></textarea>
       </div>
       <button
-        class="submit-btn flex h-8 w-8 flex-none cursor-pointer items-center justify-center rounded-full border-none p-1.5 outline-none group-[.loading]:hidden"
+        class="submit-btn flex h-8 w-8 flex-none cursor-pointer items-center justify-center rounded-full border-none p-1.5 outline-none group-[.loading]/loading:hidden"
         :class="{ disabled: inputStr.length === 0 }"
         @click="handleSubmit"
       >
@@ -71,7 +71,7 @@ defineExpose({ focus })
         </svg>
       </button>
       <button
-        class="hidden h-8 w-8 flex-none cursor-pointer rounded-full border-none bg-transparent p-0 outline-none group-[.loading]:flex"
+        class="hidden h-8 w-8 flex-none cursor-pointer rounded-full border-none bg-transparent p-0 outline-none group-[.loading]/loading:flex"
         @click="handleAbort"
       >
         <svg
diff --git a/spx-gui/src/components/course/management/CourseItemMini.vue b/spx-gui/src/components/course/management/CourseItemMini.vue
index 1c1e67f873..98b8f8c883 100644
--- a/spx-gui/src/components/course/management/CourseItemMini.vue
+++ b/spx-gui/src/components/course/management/CourseItemMini.vue
@@ -19,6 +19,7 @@ const thumbnailUrl = useAsyncComputedLegacy(async (onCleanup) => {
 </script>
 
 <template>
+  <!-- FIXME: `bg-grey-50` is not taking effect -->
   <div
     class="flex items-center rounded-1 border-2 border-transparent bg-grey-50 p-2 transition-all duration-200"
     :class="{
diff --git a/spx-gui/src/components/course/management/CourseSeriesEditModal.vue b/spx-gui/src/components/course/management/CourseSeriesEditModal.vue
index 5ed4c0d905..8876450320 100644
--- a/spx-gui/src/components/course/management/CourseSeriesEditModal.vue
+++ b/spx-gui/src/components/course/management/CourseSeriesEditModal.vue
@@ -219,6 +219,7 @@ const handleSubmit = useMessageHandle(
         </label>
         <div class="grid h-100 grid-cols-2 gap-6">
           <div class="flex flex-col overflow-hidden rounded-2 border border-dividing-line-2">
+            <!-- FIXME: `bg-grey-50` is not taking effect -->
             <label class="border-b border-dividing-line-2 bg-grey-50 px-4 py-3 text-grey-800">
               {{ $t({ en: 'Available courses', zh: '可选课程' }) }}
             </label>
@@ -231,6 +232,7 @@ const handleSubmit = useMessageHandle(
             />
           </div>
           <div class="flex flex-col overflow-hidden rounded-2 border border-dividing-line-2">
+            <!-- FIXME: `bg-grey-50` is not taking effect -->
             <label class="border-b border-dividing-line-2 bg-grey-50 px-4 py-3 text-grey-800">
               {{ $t({ en: 'Selected courses', zh: '已选课程' }) }}
             </label>
diff --git a/spx-gui/src/components/course/management/CourseSeriesItem.vue b/spx-gui/src/components/course/management/CourseSeriesItem.vue
index 4462251995..5445a129f1 100644
--- a/spx-gui/src/components/course/management/CourseSeriesItem.vue
+++ b/spx-gui/src/components/course/management/CourseSeriesItem.vue
@@ -16,6 +16,7 @@ const thumbnailUrl = useAsyncComputed(async (onCleanup) => {
 </script>
 
 <template>
+  <!-- FIXME: `bg-grey-50` is not taking effect (migrated from legacy code `background: var(--ui-color-grey-50)`) -->
   <li
     class="course-series-item relative h-40 w-58 cursor-pointer overflow-hidden rounded-3 border-2 border-grey-300 bg-grey-50 transition-all duration-200 hover:-translate-y-0.5 hover:border-grey-400 hover:shadow-[0_4px_12px_rgba(0,0,0,0.08)]"
   >
diff --git a/spx-gui/src/components/editor/ProjectEditor.vue b/spx-gui/src/components/editor/ProjectEditor.vue
index 1504410212..0c7d19e2e0 100644
--- a/spx-gui/src/components/editor/ProjectEditor.vue
+++ b/spx-gui/src/components/editor/ProjectEditor.vue
@@ -4,7 +4,7 @@
   <UICard
     v-show="isPreviewMode"
     v-radar="{ name: `Editor for ${selected.type}`, desc: `Main editor panel for editing ${selected.type}` }"
-    class="relative flex min-w-0 flex-[1_1_0] flex-col overflow-visible!"
+    class="relative min-w-0 flex-[1_1_0] flex flex-col overflow-visible!"
   >
     <!--
       TODO: optimize performance for switching between editors, which corresponds to selection change.
@@ -22,7 +22,7 @@
     <StageEditor v-else-if="selected.type === 'stage'" :stage="project.stage" :state="editorCtx.state.stageState" />
     <EditorPlaceholder v-else />
   </UICard>
-  <div v-show="isPreviewMode" class="flex min-w-0 shrink-0 grow-0 basis-[496px] flex-col gap-middle">
+  <div v-show="isPreviewMode" class="min-w-0 flex-[0_0_496px] flex flex-col gap-middle">
     <EditorPreview />
     <EditorPanels />
   </div>
diff --git a/spx-gui/src/components/editor/sprite/animation/MuteSwitch.vue b/spx-gui/src/components/editor/sprite/animation/MuteSwitch.vue
index 4f685d29f1..604aec0bee 100644
--- a/spx-gui/src/components/editor/sprite/animation/MuteSwitch.vue
+++ b/spx-gui/src/components/editor/sprite/animation/MuteSwitch.vue
@@ -3,7 +3,7 @@
     <UITooltip>
       <template #trigger>
         <div
-          class="cursor-pointer flex h-8 w-8 items-center justify-center rounded-full border border-grey-500 bg-white transition-colors hover:bg-grey-300"
+          class="cursor-pointer flex h-8 w-8 items-center justify-center rounded-full border border-grey-500 bg-grey-100 transition-colors hover:bg-grey-300"
         >
           <UIIcon :type="muted ? 'volumeOff' : 'volumeUp'" />
         </div>
diff --git a/spx-gui/src/components/ui/UIConfigProvider.vue b/spx-gui/src/components/ui/UIConfigProvider.vue
index 4e5e2c328d..a97ec8ca1d 100644
--- a/spx-gui/src/components/ui/UIConfigProvider.vue
+++ b/spx-gui/src/components/ui/UIConfigProvider.vue
@@ -166,7 +166,7 @@ useProvideLastClickEvent()
 const cssVariables = getCssVars('--ui-', uiVariables)
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 .ui-config-provider {
   height: 100%;
 
@@ -177,48 +177,10 @@ const cssVariables = getCssVars('--ui-', uiVariables)
 }
 </style>
 
-<style lang="scss">
-// TODO: should move these styles to global.css ?
-@layer base {
-  /* Special title */
-  h1 {
-    font-size: 20px;
-    line-height: 1.4;
-  }
-
-  /* Standard title */
-  h2 {
-    font-size: 16px;
-    line-height: 1.5;
-  }
-
-  /* Text in navigation bar */
-  h3,
-  /* Text */
-  h4 {
-    font-size: 14px;
-    line-height: 1.57143;
-  }
-
-  /* More information */
-  h5 {
-    font-size: 12px;
-    line-height: 1.5;
-  }
-
-  h6 {
-    font-size: 10px;
-    line-height: 1.6;
-  }
-
-  button:focus {
-    outline: 2px solid var(--ui-color-primary-700);
-  }
-}
-
-// vueuc (dep of naive-ui) uses `pointer-events: all` on children of `v-binder-follower-content`, which wraps `Popover` content in naive-ui.
-// It causes pointer behavior issues in popup content. For example, a svg in a `visibility: hidden` element will still be clickable.
-// So we override it here to fix the issue. See details in https://github.com/07akioni/vueuc/issues/314
+<style>
+/* vueuc (dep of naive-ui) uses `pointer-events: all` on children of `v-binder-follower-content`, which wraps `Popover` content in naive-ui. */
+/* It causes pointer behavior issues in popup content. For example, a svg in a `visibility: hidden` element will still be clickable. */
+/* So we override it here to fix the issue. See details in https://github.com/07akioni/vueuc/issues/314 */
 .v-binder-follower-content > * {
   pointer-events: initial;
 }
diff --git a/spx-gui/src/components/ui/UILink.vue b/spx-gui/src/components/ui/UILink.vue
index 7cd229300a..b7327a4962 100644
--- a/spx-gui/src/components/ui/UILink.vue
+++ b/spx-gui/src/components/ui/UILink.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
-withDefaults(
+import { computed } from 'vue'
+
+const props = withDefaults(
   defineProps<{
     href?: string
     type?: 'primary' | 'boring'
@@ -9,41 +11,12 @@ withDefaults(
     type: 'primary'
   }
 )
+
+const linkClass = computed(() => (props.type === 'primary' ? 'link-primary' : 'link-boring'))
 </script>
 
 <template>
-  <a class="ui-link" :class="`type-${type}`" :href="href">
+  <a :class="linkClass" :href="href">
     <slot></slot>
   </a>
 </template>
-
-<style lang="scss" scoped>
-.ui-link {
-  transition: color 0.1s;
-
-  &.type-primary {
-    color: var(--ui-color-primary-main);
-    text-decoration: none;
-
-    &:hover {
-      color: var(--ui-color-primary-400);
-    }
-
-    &:active {
-      color: var(--ui-color-primary-600);
-    }
-  }
-
-  &.type-boring {
-    color: inherit;
-
-    &:hover {
-      color: var(--ui-color-primary-main);
-    }
-
-    &:active {
-      color: var(--ui-color-primary-600);
-    }
-  }
-}
-</style>
diff --git a/spx-gui/src/components/ui/global.css b/spx-gui/src/components/ui/global.css
index fe84e19472..acdd516910 100644
--- a/spx-gui/src/components/ui/global.css
+++ b/spx-gui/src/components/ui/global.css
@@ -7,9 +7,44 @@
     box-sizing: border-box;
   }
 
+  /* Special title */
+  h1 {
+    font-size: 20px;
+    line-height: 1.4;
+  }
+
+  /* Standard title */
+  h2 {
+    font-size: 16px;
+    line-height: 1.5;
+  }
+
+  /* Text in navigation bar */
+  h3,
+  /* Text */
+  h4 {
+    font-size: 14px;
+    line-height: 1.57143;
+  }
+
+  /* More information */
+  h5 {
+    font-size: 12px;
+    line-height: 1.5;
+  }
+
+  h6 {
+    font-size: 10px;
+    line-height: 1.6;
+  }
+
   button {
     font-family: inherit;
   }
+
+  button:focus {
+    outline: 2px solid var(--ui-color-primary-700);
+  }
 }
 
 @font-face {
diff --git a/spx-gui/src/pages/community/project.vue b/spx-gui/src/pages/community/project.vue
index 603a1865b3..bd37ee2498 100644
--- a/spx-gui/src/pages/community/project.vue
+++ b/spx-gui/src/pages/community/project.vue
@@ -358,7 +358,7 @@ const remixesRet = useQuery(
                     <template v-if="runnerState === 'initial'">
                       <div v-if="needsSignInToRun" class="flex h-full w-full items-center justify-center p-6">
                         <div
-                          class="relative flex w-85 flex-col items-center overflow-visible rounded-[16px] bg-white px-6 pt-17 pb-6 text-center"
+                          class="relative flex w-85 flex-col items-center overflow-visible rounded-[16px] bg-grey-100 px-6 pt-17 pb-6 text-center"
                           style="box-shadow: 0 24px 32px -16px rgba(0, 0, 0, 0.1)"
                         >
                           <!-- eslint-disable-next-line vue/no-v-html -->

From ecdf0755f7244eca759a64ca0fe4d702d1708097 Mon Sep 17 00:00:00 2001
From: nighca <nighca@live.cn>
Date: Fri, 3 Apr 2026 16:56:46 +0800
Subject: [PATCH 10/10] sv

---
 .../api-reference/icons/control.svg           |  2 +-
 .../api-reference/icons/event.svg             |  2 +-
 .../api-reference/icons/game.svg              |  2 +-
 .../api-reference/icons/look.svg              |  2 +-
 .../api-reference/icons/motion.svg            |  2 +-
 .../api-reference/icons/sensing.svg           |  2 +-
 .../api-reference/icons/sound.svg             |  2 +-
 .../ui/api-reference/APIReferenceItem.vue     |  4 +--
 .../ui/api-reference/APIReferenceUI.vue       |  8 ++---
 .../ui/document-tab/DocumentTab.vue           |  2 +-
 .../components/editor/common/EditorList.vue   |  3 +-
 .../components/editor/navbar/EditorNavbar.vue | 12 +++----
 .../navbar/EditorProjectDisplayName.vue       | 13 ++++----
 .../editor/navbar/icons/cloud-check.svg       |  2 +-
 .../components/editor/navbar/icons/saving.svg |  2 +-
 .../editor/panels/common/PanelHeader.vue      | 10 ++----
 .../editor/panels/stage/StagePanel.vue        |  5 ++-
 .../editor/panels/stage/backdrop.svg          |  4 +--
 .../components/editor/panels/stage/sound.svg  |  7 +----
 .../components/editor/panels/stage/widget.svg |  3 +-
 .../src/components/navbar/NavbarDropdown.vue  |  2 +-
 .../src/components/navbar/NavbarProfile.vue   |  4 +--
 .../src/components/navbar/NavbarTutorials.vue |  4 +--
 .../src/components/navbar/NavbarWrapper.vue   |  6 ++--
 spx-gui/src/components/navbar/logo.svg        | 26 ++++++++--------
 spx-gui/src/components/ui/UIButton.vue        | 26 ++++++++--------
 spx-gui/src/components/ui/UIButtonGroup.vue   |  4 +++
 .../src/components/ui/UIButtonGroupItem.vue   | 31 ++++++++++---------
 .../components/ui/block-items/UIBlockItem.vue |  8 +++--
 .../src/components/ui/icons/arrow-down.svg    |  6 ++--
 spx-gui/src/components/ui/icons/file.svg      |  6 ++--
 spx-gui/src/components/ui/icons/redo.svg      |  6 ++--
 spx-gui/src/components/ui/icons/tutorial.svg  |  6 ++--
 spx-gui/src/components/ui/icons/undo.svg      |  6 ++--
 spx-gui/src/components/ui/tab/UITab.vue       | 18 +++--------
 spx-gui/src/components/ui/tab/UITabs.vue      |  2 ++
 spx-gui/src/components/ui/tokens/colors.ts    | 12 +++----
 spx-gui/src/components/ui/tokens/index.ts     |  9 +++---
 spx-gui/src/pages/editor/index.vue            |  4 +--
 39 files changed, 129 insertions(+), 146 deletions(-)

diff --git a/spx-gui/src/components/editor/code-editor/spx-code-editor/api-reference/icons/control.svg b/spx-gui/src/components/editor/code-editor/spx-code-editor/api-reference/icons/control.svg
index a7462a4b46..456413b501 100644
--- a/spx-gui/src/components/editor/code-editor/spx-code-editor/api-reference/icons/control.svg
+++ b/spx-gui/src/components/editor/code-editor/spx-code-editor/api-reference/icons/control.svg
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M6 3C4.34315 3 3 4.34315 3 6V18C3 19.6569 4.34315 21 6 21H18C19.6569 21 21 19.6569 21 18V6C21 4.34315 19.6569 3 18 3H6ZM7.86201 11.392L7.86195 11.3824V6.768C7.86195 6.34385 8.2058 6 8.62995 6C9.05411 6 9.39795 6.34385 9.39795 6.768V11.3824L9.39789 11.392C10.3468 11.7172 11.03 12.6285 11.03 13.7018C11.03 14.7752 10.3468 15.6865 9.39795 16.0117V17.2321C9.39795 17.6562 9.05411 18.0001 8.62995 18.0001C8.2058 18.0001 7.86195 17.6562 7.86195 17.2321V16.0117C6.91313 15.6864 6.22998 14.7752 6.22998 13.7018C6.22998 12.6285 6.91316 11.7172 7.86201 11.392ZM8.62998 14.5793C9.10715 14.5793 9.49398 14.1864 9.49398 13.7018C9.49398 13.2172 9.10715 12.8244 8.62998 12.8244C8.15281 12.8244 7.76598 13.2172 7.76598 13.7018C7.76598 14.1864 8.15281 14.5793 8.62998 14.5793ZM16.1374 12.5899C17.0866 12.2648 17.77 11.3534 17.77 10.2798C17.77 9.20649 17.0868 8.2952 16.1379 7.96996V6.768C16.1379 6.34385 15.7941 6 15.3699 6C14.9458 6 14.6019 6.34385 14.6019 6.768V7.96998C13.6531 8.29523 12.97 9.20651 12.97 10.2798C12.97 11.3533 13.6534 12.2647 14.6024 12.5899C14.6021 12.5991 14.6019 12.6083 14.6019 12.6176V17.232C14.6019 17.6562 14.9458 18 15.3699 18C15.7941 18 16.1379 17.6562 16.1379 17.232V12.6176C16.1379 12.6083 16.1378 12.5991 16.1374 12.5899ZM15.37 11.1573C15.8471 11.1573 16.234 10.7644 16.234 10.2798C16.234 9.79524 15.8471 9.4024 15.37 9.4024C14.8928 9.4024 14.506 9.79524 14.506 10.2798C14.506 10.7644 14.8928 11.1573 15.37 11.1573Z" fill="currentColor"/>
+<path d="M19 2C20.6569 2 22 3.34315 22 5V19C22 20.6051 20.7394 21.9158 19.1543 21.9961L19 22H5L4.8457 21.9961C3.31166 21.9184 2.08163 20.6883 2.00391 19.1543L2 19V5C2 3.34315 3.34315 2 5 2H19ZM5 3.75C4.30964 3.75 3.75 4.30964 3.75 5V19C3.75 19.6904 4.30964 20.25 5 20.25H19C19.6904 20.25 20.25 19.6904 20.25 19V5C20.25 4.30964 19.6904 3.75 19 3.75H5ZM8.5 6.125C8.98325 6.125 9.375 6.51675 9.375 7V11.293C10.2534 11.6415 10.875 12.4975 10.875 13.5C10.875 14.5023 10.2532 15.3574 9.375 15.7061V17C9.375 17.4832 8.98325 17.875 8.5 17.875C8.01675 17.875 7.625 17.4832 7.625 17V15.7061C6.74681 15.3574 6.125 14.5023 6.125 13.5C6.125 12.4975 6.74663 11.6415 7.625 11.293V7C7.625 6.51675 8.01675 6.125 8.5 6.125ZM15.5 6.125C15.9832 6.125 16.375 6.51675 16.375 7V8.29297C17.2534 8.6415 17.875 9.49753 17.875 10.5C17.875 11.5023 17.2532 12.3574 16.375 12.7061V17C16.375 17.4832 15.9832 17.875 15.5 17.875C15.0168 17.875 14.625 17.4832 14.625 17V12.7061C13.7468 12.3574 13.125 11.5023 13.125 10.5C13.125 9.49753 13.7466 8.6415 14.625 8.29297V7C14.625 6.51675 15.0168 6.125 15.5 6.125ZM8.5 12.875C8.15482 12.875 7.875 13.1548 7.875 13.5C7.875 13.8452 8.15482 14.125 8.5 14.125C8.84518 14.125 9.125 13.8452 9.125 13.5C9.125 13.1548 8.84518 12.875 8.5 12.875ZM15.5 9.875C15.1548 9.875 14.875 10.1548 14.875 10.5C14.875 10.8452 15.1548 11.125 15.5 11.125C15.8452 11.125 16.125 10.8452 16.125 10.5C16.125 10.1548 15.8452 9.875 15.5 9.875Z" fill="currentColor"/>
 </svg>
diff --git a/spx-gui/src/components/editor/code-editor/spx-code-editor/api-reference/icons/event.svg b/spx-gui/src/components/editor/code-editor/spx-code-editor/api-reference/icons/event.svg
index 7aff95704b..633ccc3e17 100644
--- a/spx-gui/src/components/editor/code-editor/spx-code-editor/api-reference/icons/event.svg
+++ b/spx-gui/src/components/editor/code-editor/spx-code-editor/api-reference/icons/event.svg
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M8 6C4.68629 6 2 8.68629 2 12C2 15.3137 4.68629 18 8 18H16C19.3137 18 22 15.3137 22 12C22 8.68629 19.3137 6 16 6H8ZM8 15.5C9.933 15.5 11.5 13.933 11.5 12C11.5 10.067 9.933 8.5 8 8.5C6.067 8.5 4.5 10.067 4.5 12C4.5 13.933 6.067 15.5 8 15.5Z" fill="currentColor"/>
+<path d="M16.3086 6.00781C19.4789 6.16843 22 8.78979 22 12C22 15.2102 19.4789 17.8316 16.3086 17.9922L16 18H8C4.68629 18 2 15.3137 2 12C2 8.68629 4.68629 6 8 6H16L16.3086 6.00781ZM8 7.75C5.65279 7.75 3.75 9.65279 3.75 12C3.75 14.3472 5.65279 16.25 8 16.25H16C18.3472 16.25 20.25 14.3472 20.25 12C20.25 9.65279 18.3472 7.75 16 7.75H8ZM8 9C9.65685 9 11 10.3431 11 12C11 13.6569 9.65685 15 8 15C6.34315 15 5 13.6569 5 12C5 10.3431 6.34315 9 8 9ZM8 10.75C7.30964 10.75 6.75 11.3096 6.75 12C6.75 12.6904 7.30964 13.25 8 13.25C8.69036 13.25 9.25 12.6904 9.25 12C9.25 11.3096 8.69036 10.75 8 10.75Z" fill="currentColor"/>
 </svg>
diff --git a/spx-gui/src/components/editor/code-editor/spx-code-editor/api-reference/icons/game.svg b/spx-gui/src/components/editor/code-editor/spx-code-editor/api-reference/icons/game.svg
index 216f0b0d98..6f16a95599 100644
--- a/spx-gui/src/components/editor/code-editor/spx-code-editor/api-reference/icons/game.svg
+++ b/spx-gui/src/components/editor/code-editor/spx-code-editor/api-reference/icons/game.svg
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M17.1442 3C21.0014 3 23.5728 5.57143 23.5728 10.7143V15.8571C23.5728 18.4286 22.2871 21 19.7156 21H19.3813C17.9838 21 16.6774 20.3019 15.9021 19.1383C15.9021 19.1383 14.6088 17.1429 12.0014 17.1429C9.39393 17.1429 8.09933 19.1267 8.09933 19.1267C7.32533 20.2967 6.01498 21 4.61227 21H4.28707C1.71565 21 0.429932 18.4286 0.429932 15.8571V10.7143C0.429932 5.57143 3.00136 3 6.8585 3H17.1442ZM7.82263 11.6785H9.42977C9.96206 11.6785 10.3941 11.2465 10.3941 10.7142C10.3941 10.1819 9.96206 9.74992 9.42977 9.74992H7.82263V8.14278C7.82263 7.61049 7.39063 7.17849 6.85835 7.17849C6.32606 7.17849 5.89406 7.61049 5.89406 8.14278V9.74992H4.28692C3.75463 9.74992 3.32263 10.1819 3.32263 10.7142C3.32263 11.2465 3.75463 11.6785 4.28692 11.6785H5.89406V13.2856C5.89406 13.8179 6.32606 14.2499 6.85835 14.2499C7.39063 14.2499 7.82263 13.8179 7.82263 13.2856V11.6785ZM14.2512 12.3213C14.2512 13.0311 14.8272 13.6071 15.5369 13.6071C16.2466 13.6071 16.8226 13.0311 16.8226 12.3213C16.8226 11.6116 16.2466 11.0356 15.5369 11.0356C14.8272 11.0356 14.2512 11.6116 14.2512 12.3213ZM17.4655 9.10832C17.4655 9.81803 18.0415 10.394 18.7512 10.394C19.4609 10.394 20.0369 9.81803 20.0369 9.10832C20.0369 8.39861 19.4609 7.82261 18.7512 7.82261C18.0415 7.82261 17.4655 8.39861 17.4655 9.10832Z" fill="currentColor"/>
+<path d="M20 4.625C21.6524 4.625 22.875 6.05439 22.875 7.66699V16.333C22.875 17.9456 21.6524 19.375 20 19.375H4C2.34756 19.375 1.125 17.9456 1.125 16.333V7.66699C1.125 6.05439 2.34756 4.625 4 4.625H20ZM4 6.375C3.44331 6.375 2.875 6.88636 2.875 7.66699V16.333C2.875 17.1136 3.44331 17.625 4 17.625H20C20.5567 17.625 21.125 17.1136 21.125 16.333V7.66699C21.125 6.88636 20.5567 6.375 20 6.375H4ZM8 9.125C8.48325 9.125 8.875 9.51675 8.875 10V11.125H10C10.4832 11.125 10.875 11.5168 10.875 12C10.875 12.4832 10.4832 12.875 10 12.875H8.875V14C8.875 14.4832 8.48325 14.875 8 14.875C7.51675 14.875 7.125 14.4832 7.125 14V12.875H6C5.51675 12.875 5.125 12.4832 5.125 12C5.125 11.5168 5.51675 11.125 6 11.125H7.125V10C7.125 9.51675 7.51675 9.125 8 9.125ZM15.0098 12C15.5621 12 16.0098 12.4477 16.0098 13C16.0098 13.5523 15.5621 14 15.0098 14H15C14.4477 14 14 13.5523 14 13C14 12.4477 14.4477 12 15 12H15.0098ZM18.0098 10C18.562 10 19.0098 10.4477 19.0098 11C19.0098 11.5523 18.562 12 18.0098 12H18C17.4477 12 17 11.5523 17 11C17 10.4477 17.4477 10 18 10H18.0098Z" fill="currentColor"/>
 </svg>
diff --git a/spx-gui/src/components/editor/code-editor/spx-code-editor/api-reference/icons/look.svg b/spx-gui/src/components/editor/code-editor/spx-code-editor/api-reference/icons/look.svg
index de35ed2341..56c42d1a34 100644
--- a/spx-gui/src/components/editor/code-editor/spx-code-editor/api-reference/icons/look.svg
+++ b/spx-gui/src/components/editor/code-editor/spx-code-editor/api-reference/icons/look.svg
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M22.0591 7.30078L18.1698 3.4115C17.8794 3.12112 17.48 2.97331 17.0686 3.005C17.0298 3.00165 16.9923 3 16.9555 3H14.8834L14.7381 3.08084C13.9705 3.50782 12.991 3.74294 11.9802 3.74294C10.9693 3.74294 9.98986 3.50782 9.22224 3.08084L9.07688 3H7.00475C6.47641 3 6.00151 3.28822 5.75599 3.746L1.91155 7.59047C1.64616 7.85583 1.5 8.20865 1.5 8.58394C1.5 8.95924 1.64616 9.31205 1.91152 9.57743L4.72042 12.3864C4.95547 12.6214 5.25915 12.7628 5.58628 12.7918V19.5803C5.58628 20.3624 6.2226 20.9988 7.00472 20.9988H16.9555C17.7377 20.9988 18.374 20.3624 18.374 19.5803L18.374 12.5031C18.705 12.4761 19.0126 12.3341 19.2501 12.0967L22.0591 9.28774C22.607 8.73993 22.607 7.84858 22.0591 7.30078Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.93935 2.69824C10.1295 3.21636 10.4387 3.63825 10.8095 3.92383C11.1781 4.20759 11.5936 4.34668 12.0038 4.34668C12.414 4.3466 12.8296 4.20766 13.1981 3.92383C13.5689 3.63824 13.8772 3.21632 14.0673 2.69824L14.2782 2.125H16.1239L16.3739 2.13281C16.9538 2.16871 17.5201 2.32845 18.0429 2.60059C18.6396 2.91133 19.1633 3.35974 19.5849 3.90723L22.5468 7.75293C22.6402 7.87016 22.7132 7.99878 22.7665 8.13379L22.8163 8.28223L22.8515 8.43262C22.8783 8.58455 22.8824 8.73993 22.8641 8.89258C22.8398 9.09614 22.7748 9.29754 22.6688 9.48047C22.5691 9.65246 22.4309 9.80689 22.2597 9.92871L22.2606 9.93066L20.2313 11.4238L20.2157 11.4355C19.8825 11.6693 19.4667 11.7682 19.0526 11.6865C18.9116 11.6586 18.7797 11.6095 18.6571 11.5469V20.2676C18.6564 20.6534 18.526 21.0457 18.2626 21.3535C17.9955 21.6655 17.6015 21.8738 17.1561 21.875H6.85145C6.40608 21.8739 6.01213 21.6654 5.74501 21.3535C5.48143 21.0457 5.35117 20.6535 5.35048 20.2676V11.542C5.22558 11.6069 5.09052 11.6569 4.94618 11.6855C4.53291 11.7673 4.1181 11.6694 3.78505 11.4365L3.76747 11.4248L1.73817 9.93066L1.74013 9.92871C1.56792 9.80623 1.42879 9.65163 1.32899 9.47852C1.22347 9.29542 1.15949 9.09416 1.13563 8.89062C1.11181 8.68708 1.128 8.47895 1.18446 8.28027L1.23427 8.13281C1.28767 7.99848 1.36172 7.87052 1.45497 7.75391L4.42274 3.90527L4.58485 3.70508C4.97554 3.24847 5.44165 2.87129 5.96376 2.59961C6.5611 2.28883 7.21528 2.12504 7.88173 2.125H9.72938L9.93935 2.69824ZM7.88173 3.875C7.505 3.87504 7.12695 3.96735 6.77138 4.15234C6.45956 4.31463 6.16804 4.54698 5.91493 4.84277L5.80849 4.97363L2.96474 8.66016L4.60438 9.86719L5.13661 9.08887C5.73274 8.21529 7.10048 8.63769 7.10048 9.69531V20.125H16.9071V9.70801C16.9071 8.6831 18.1905 8.25517 18.8124 9.02441L18.871 9.10254L19.3925 9.86816L21.035 8.6582L18.1981 4.97461C17.9218 4.61577 17.5917 4.33901 17.2352 4.15332C16.9239 3.99123 16.5953 3.89928 16.2655 3.87891L16.1239 3.875H15.4559C15.1615 4.43708 14.7587 4.92973 14.2655 5.30957C13.6085 5.81556 12.822 6.0966 12.0038 6.09668C11.1856 6.09668 10.3991 5.81552 9.74208 5.30957C9.2489 4.92975 8.84616 4.43708 8.55165 3.875H7.88173Z" fill="currentColor"/>
 </svg>
diff --git a/spx-gui/src/components/editor/code-editor/spx-code-editor/api-reference/icons/motion.svg b/spx-gui/src/components/editor/code-editor/spx-code-editor/api-reference/icons/motion.svg
index 1dd0ded635..b9f1358565 100644
--- a/spx-gui/src/components/editor/code-editor/spx-code-editor/api-reference/icons/motion.svg
+++ b/spx-gui/src/components/editor/code-editor/spx-code-editor/api-reference/icons/motion.svg
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M20.862 19.5086C20.7093 19.947 20.4239 20.327 20.0454 20.5959C19.667 20.8648 19.2143 21.0093 18.75 21.0093C18.2857 21.0093 17.833 20.8648 17.4546 20.5959C17.0761 20.327 16.7907 19.947 16.638 19.5086H16.362C16.2093 19.947 15.9239 20.327 15.5454 20.5959C15.167 20.8648 14.7143 21.0093 14.25 21.0093C13.7857 21.0093 13.333 20.8648 12.9546 20.5959C12.5761 20.327 12.2907 19.947 12.138 19.5086H11.862C11.7093 19.947 11.4239 20.327 11.0454 20.5959C10.667 20.8648 10.2143 21.0093 9.75 21.0093C9.28575 21.0093 8.833 20.8648 8.45456 20.5959C8.07612 20.327 7.79074 19.947 7.638 19.5086H7.5C7.31583 19.9534 7.00362 20.3335 6.60301 20.6006C6.2024 20.8677 5.73147 21.0097 5.25 21.0086C4.7861 21.0075 4.33392 20.8627 3.9557 20.5941C3.57748 20.3255 3.29181 19.9462 3.138 19.5086H3V11.2586H3.0375C3.22178 9.0082 4.24589 6.90949 5.90635 5.37945C7.56681 3.8494 9.74209 3 12 3C14.2579 3 16.4332 3.8494 18.0937 5.37945C19.7541 6.90949 20.7782 9.0082 20.9625 11.2586H21V19.5086H20.862ZM8.25 8.25857C7.95333 8.25857 7.66332 8.34655 7.41664 8.51137C7.16997 8.67619 6.97771 8.91046 6.86418 9.18455C6.75065 9.45864 6.72094 9.76024 6.77882 10.0512C6.8367 10.3422 6.97956 10.6095 7.18934 10.8192C7.39912 11.029 7.66639 11.1719 7.95736 11.2298C8.24834 11.2876 8.54994 11.2579 8.82403 11.1444C9.09811 11.0309 9.33238 10.8386 9.4972 10.5919C9.66203 10.3453 9.75 10.0552 9.75 9.75857C9.75 9.56159 9.7112 9.36654 9.63582 9.18455C9.56044 9.00256 9.44995 8.8372 9.31066 8.69791C9.17137 8.55862 9.00601 8.44814 8.82403 8.37275C8.64204 8.29737 8.44698 8.25857 8.25 8.25857ZM11.25 12.0086C10.4212 12.0086 9.75 12.3446 9.75 12.7586C9.75 13.1726 10.4212 13.5086 11.25 13.5086C12.0787 13.5086 12.75 13.1726 12.75 12.7586C12.75 12.3446 12.075 12.0086 11.25 12.0086ZM14.25 8.25857C13.9533 8.25857 13.6633 8.34655 13.4166 8.51137C13.17 8.67619 12.9777 8.91046 12.8642 9.18455C12.7507 9.45864 12.7209 9.76024 12.7788 10.0512C12.8367 10.3422 12.9796 10.6095 13.1893 10.8192C13.3991 11.029 13.6664 11.1719 13.9574 11.2298C14.2483 11.2876 14.5499 11.2579 14.824 11.1444C15.0981 11.0309 15.3324 10.8386 15.4972 10.5919C15.662 10.3453 15.75 10.0552 15.75 9.75857C15.75 9.56159 15.7112 9.36654 15.6358 9.18455C15.5604 9.00256 15.4499 8.8372 15.3107 8.69791C15.1714 8.55862 15.006 8.44814 14.824 8.37275C14.642 8.29737 14.447 8.25857 14.25 8.25857Z" fill="currentColor"/>
+<path d="M12.4688 2.01538C14.8069 2.12524 17.0379 3.05433 18.7666 4.64722C20.6106 6.34639 21.7953 8.67738 22 11.1765H21.9941V20.1843C21.9941 20.2688 21.9262 20.3374 21.8418 20.3376C21.6722 20.8245 21.3548 21.247 20.9346 21.5457L20.7734 21.6511C20.3886 21.8819 19.9472 22.0046 19.4961 22.0046L19.3037 21.9968C18.8563 21.9621 18.4254 21.8069 18.0576 21.5457C17.6373 21.247 17.32 20.8245 17.1504 20.3376H16.8438C16.6742 20.8244 16.3577 21.247 15.9375 21.5457C15.5172 21.8443 15.0136 22.0046 14.498 22.0046C13.9826 22.0046 13.4797 21.8442 13.0596 21.5457C12.6394 21.247 12.3229 20.8245 12.1533 20.3376H11.8467C11.6771 20.8245 11.3597 21.247 10.9395 21.5457C10.5192 21.8442 10.0165 22.0046 9.50098 22.0046C8.98547 22.0046 8.48274 21.8442 8.0625 21.5457C7.64222 21.247 7.32489 20.8245 7.15527 20.3376H7.00195C6.79742 20.8317 6.45075 21.2539 6.00586 21.5505C5.56108 21.847 5.03844 22.0048 4.50391 22.0037L4.31152 21.9958C3.92832 21.9654 3.55721 21.8469 3.22754 21.6492L3.06641 21.5437C2.64638 21.2454 2.32901 20.8237 2.1582 20.3376C2.07356 20.3376 2.00488 20.269 2.00488 20.1843V11.1765H2.00977L2.05957 10.7097C2.34365 8.54308 3.35543 6.52763 4.89453 4.97339L5.23242 4.64722C7.07643 2.94804 9.4925 2.00464 12 2.00464L12.4688 2.01538ZM12 3.75464C9.93191 3.75464 7.93884 4.53291 6.41797 5.93433C4.88721 7.34501 3.92453 9.26852 3.75488 11.3093V19.6013L3.80957 19.7576C3.8604 19.9022 3.95414 20.0281 4.0791 20.1169C4.20417 20.2058 4.35441 20.2533 4.50781 20.2537C4.69553 20.254 4.87895 20.1986 5.03516 20.0945C5.19146 19.9903 5.31389 19.8423 5.38574 19.6687L5.83301 18.5876H8.39941L8.80859 19.7625C8.85872 19.9062 8.9521 20.0307 9.07617 20.1189C9.20031 20.2071 9.3487 20.2546 9.50098 20.2546C9.65325 20.2546 9.80165 20.2071 9.92578 20.1189C10.0499 20.0307 10.1442 19.9063 10.1943 19.7625L10.6025 18.5876H13.3965L13.8057 19.7625C13.8558 19.9061 13.9492 20.0307 14.0732 20.1189C14.1973 20.207 14.3459 20.2546 14.498 20.2546C14.6504 20.2546 14.7997 20.2071 14.9238 20.1189C15.0478 20.0307 15.1413 19.9061 15.1914 19.7625L15.6006 18.5876H18.3936L18.8027 19.7625C18.8528 19.9063 18.9472 20.0307 19.0713 20.1189C19.1954 20.207 19.3439 20.2546 19.4961 20.2546C19.6483 20.2546 19.7968 20.2071 19.9209 20.1189C20.0449 20.0307 20.1384 19.9062 20.1885 19.7625L20.2441 19.6023V11.2166C20.0534 9.21432 19.0918 7.32649 17.5811 5.93433C16.0603 4.53297 14.068 3.75471 12 3.75464ZM11.2217 11.9998C12.1417 11.9998 12.8877 12.3728 12.8877 12.8328C12.8873 13.2926 12.1414 13.6658 11.2217 13.6658C10.302 13.6657 9.55702 13.2926 9.55664 12.8328C9.55664 12.3728 10.3018 11.9998 11.2217 11.9998ZM7.89062 7.77905C8.81042 7.77923 9.55558 8.52525 9.55566 9.44507C9.55566 10.365 8.81047 11.1109 7.89062 11.1111C6.97062 11.1111 6.22461 10.3651 6.22461 9.44507C6.22469 8.52514 6.97068 7.77905 7.89062 7.77905ZM14.5537 7.77905C15.4736 7.77917 16.2196 8.52521 16.2197 9.44507C16.2197 10.365 15.4736 11.111 14.5537 11.1111C13.6337 11.1111 12.8877 10.3651 12.8877 9.44507C12.8878 8.52514 13.6338 7.77905 14.5537 7.77905Z" fill="currentColor"/>
 </svg>
diff --git a/spx-gui/src/components/editor/code-editor/spx-code-editor/api-reference/icons/sensing.svg b/spx-gui/src/components/editor/code-editor/spx-code-editor/api-reference/icons/sensing.svg
index 26342b97b3..ad9e327aa8 100644
--- a/spx-gui/src/components/editor/code-editor/spx-code-editor/api-reference/icons/sensing.svg
+++ b/spx-gui/src/components/editor/code-editor/spx-code-editor/api-reference/icons/sensing.svg
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M15.54 16.5398C15.286 16.5398 15.031 16.4438 14.837 16.2508C14.444 15.8618 14.441 15.2297 14.829 14.8367C15.584 14.0737 16 13.0658 16 11.9998C16 10.9338 15.584 9.92588 14.829 9.16288C14.44 8.76988 14.444 8.13782 14.837 7.74882C15.229 7.35982 15.863 7.36488 16.251 7.75688C17.379 8.89688 18 10.4038 18 11.9998C18 13.5958 17.379 15.1027 16.251 16.2427C16.056 16.4407 15.798 16.5398 15.54 16.5398ZM9.16296 16.2508C9.55596 15.8618 9.55902 15.2297 9.17102 14.8367C8.41602 14.0737 8 13.0658 8 11.9998C8 10.9338 8.41602 9.92588 9.17102 9.16288C9.56002 8.76988 9.55596 8.13782 9.16296 7.74882C8.77096 7.35982 8.13702 7.36488 7.74902 7.75688C6.62102 8.89688 6 10.4038 6 11.9998C6 13.5958 6.62102 15.1027 7.74902 16.2427C7.94402 16.4407 8.20196 16.5398 8.45996 16.5398C8.71396 16.5398 8.96896 16.4438 9.16296 16.2508ZM19.432 18.6707C21.088 16.8407 22 14.4718 22 11.9998C22 9.5278 21.088 7.1579 19.432 5.3289C19.062 4.9199 18.429 4.88783 18.02 5.25883C17.61 5.62983 17.579 6.26191 17.95 6.67191C19.272 8.13191 20.001 10.0248 20.001 12.0008C20.001 13.9768 19.272 15.8689 17.95 17.3299C17.579 17.7399 17.61 18.3717 18.02 18.7427C18.211 18.9157 18.452 19.0017 18.691 19.0017C18.963 18.9997 19.234 18.8887 19.432 18.6707ZM5.97998 18.7408C6.38998 18.3698 6.42105 17.7377 6.05005 17.3277C4.72805 15.8677 3.99902 13.9748 3.99902 11.9988C3.99902 10.0228 4.72805 8.13072 6.05005 6.66972C6.42105 6.25972 6.38998 5.62788 5.97998 5.25688C5.57098 4.88588 4.93799 4.9177 4.56799 5.3267C2.91199 7.1567 2 9.52584 2 11.9978C2 14.4698 2.91199 16.8397 4.56799 18.6687C4.76499 18.8867 5.03696 18.9978 5.30896 18.9978C5.54896 18.9998 5.78898 18.9148 5.97998 18.7408ZM12 10.4998C11.173 10.4998 10.5 11.1728 10.5 11.9998C10.5 12.8268 11.173 13.4998 12 13.4998C12.827 13.4998 13.5 12.8268 13.5 11.9998C13.5 11.1728 12.827 10.4998 12 10.4998Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.0166 5.01427C4.35831 4.67311 4.91333 4.67285 5.25488 5.01427C5.59642 5.35581 5.59609 5.9108 5.25488 6.25255C4.50055 7.00687 3.90149 7.90276 3.49316 8.88829C3.08495 9.87385 2.87508 10.9309 2.875 11.9977C2.87502 13.0645 3.08496 14.1214 3.49316 15.107C3.90147 16.0927 4.50048 16.9884 5.25488 17.7428C5.59615 18.0842 5.59571 18.6384 5.25488 18.9801C4.91318 19.3218 4.35831 19.3218 4.0166 18.9801C3.09986 18.0632 2.37217 16.9748 1.87598 15.777C1.37983 14.579 1.12502 13.2943 1.125 11.9977C1.12508 10.7011 1.3798 9.41627 1.87598 8.21837C2.37225 7.02052 3.09977 5.93109 4.0166 5.01427ZM18.7441 5.01427C19.0857 4.67294 19.6408 4.67302 19.9824 5.01427C20.8993 5.93111 21.6268 7.02048 22.123 8.21837C22.6192 9.41627 22.8739 10.7011 22.874 11.9977C22.874 13.2943 22.6192 14.579 22.123 15.777C21.6269 16.9747 20.8991 18.0633 19.9824 18.9801C19.6407 19.3218 19.0858 19.3218 18.7441 18.9801C18.4032 18.6384 18.4028 18.0843 18.7441 17.7428C19.4985 16.9884 20.0976 16.0927 20.5059 15.107C20.914 14.1214 21.124 13.0644 21.124 11.9977C21.1239 10.9309 20.9141 9.87385 20.5059 8.88829C20.0975 7.90273 19.4985 7.00689 18.7441 6.25255C18.4028 5.91081 18.4026 5.35585 18.7441 5.01427ZM7.29883 8.47227C7.58879 8.08607 8.13795 8.00782 8.52441 8.29747C8.91081 8.5874 8.98895 9.13652 8.69922 9.52306C8.16385 10.2369 7.87412 11.1053 7.87402 11.9977C7.87402 12.89 8.16393 13.7583 8.69922 14.4723C8.98909 14.8588 8.91073 15.4078 8.52441 15.6979C8.13785 15.9878 7.5888 15.9096 7.29883 15.5231C6.53625 14.5062 6.12402 13.2687 6.12402 11.9977C6.12412 10.7266 6.5362 9.48911 7.29883 8.47227ZM15.4746 8.29747C15.8611 8.00794 16.4103 8.08606 16.7002 8.47227C17.4628 9.4891 17.8749 10.7266 17.875 11.9977C17.875 13.2687 17.4627 14.5062 16.7002 15.5231C16.4103 15.9095 15.8612 15.9877 15.4746 15.6979C15.0883 15.4079 15.0099 14.8588 15.2998 14.4723C15.835 13.7584 16.125 12.8899 16.125 11.9977C16.1249 11.1054 15.8351 10.2369 15.2998 9.52306C15.01 9.13652 15.0882 8.58742 15.4746 8.29747ZM11.999 10.8004C12.8273 10.8004 13.4988 11.4721 13.499 12.3004V12.3111C13.499 13.1396 12.8275 13.8111 11.999 13.8111C11.1708 13.8109 10.499 13.1394 10.499 12.3111V12.3004C10.4992 11.4722 11.1709 10.8006 11.999 10.8004Z" fill="currentColor"/>
 </svg>
diff --git a/spx-gui/src/components/editor/code-editor/spx-code-editor/api-reference/icons/sound.svg b/spx-gui/src/components/editor/code-editor/spx-code-editor/api-reference/icons/sound.svg
index 6fe18bfc60..78ced4f5d2 100644
--- a/spx-gui/src/components/editor/code-editor/spx-code-editor/api-reference/icons/sound.svg
+++ b/spx-gui/src/components/editor/code-editor/spx-code-editor/api-reference/icons/sound.svg
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M13.9378 4.05856C14.2976 4.40827 14.4976 4.8904 14.4976 5.3935V18.8289C14.4976 19.8755 13.6488 20.7236 12.6029 20.7236C12.0985 20.7236 11.616 20.5238 11.2679 20.1638L7.82425 16.7201C7.72828 16.6241 7.61435 16.548 7.48896 16.4961C7.36357 16.4441 7.22918 16.4174 7.09346 16.4174H5.75597C4.23466 16.4238 3 15.1901 3 13.6614V10.561C3 9.04649 4.23466 7.81282 5.75599 7.80496H7.07365C7.34673 7.80497 7.6087 7.6969 7.80235 7.50436L11.2679 4.05856C12.0005 3.31412 13.2009 3.31351 13.9378 4.05856ZM18.6564 6.92195C20.1308 8.22078 21 10.1565 21 12.2404C21 14.3242 20.1308 16.26 18.6564 17.5588C18.3709 17.8103 17.9355 17.7828 17.6839 17.4972C17.4324 17.2117 17.46 16.7763 17.7455 16.5248C18.9221 15.4883 19.622 13.9296 19.622 12.2404C19.622 10.5512 18.9221 8.99241 17.7455 7.95595C17.46 7.70442 17.4324 7.26904 17.684 6.98352C17.9355 6.69798 18.3709 6.6704 18.6564 6.92195ZM16.6 8.93274C17.4876 9.74379 18.0072 10.9376 18.0072 12.2183C18.0072 13.4996 17.487 14.6941 16.5985 15.5052C16.3175 15.7617 15.8817 15.7419 15.6251 15.4609C15.3711 15.1826 15.388 14.7528 15.6611 14.4952L15.6694 14.4875L15.6874 14.4709C16.2773 13.9226 16.6292 13.1058 16.6292 12.2183C16.6292 11.3223 16.2706 10.4984 15.6704 9.94994C15.3895 9.69325 15.3699 9.25744 15.6266 8.97654C15.8833 8.69564 16.3191 8.67602 16.6 8.93274Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.2822 3.93341C10.503 3.90641 10.7273 3.92917 10.9385 3.99884L11.043 4.0379L11.1445 4.0838C11.3763 4.20049 11.5746 4.37597 11.7197 4.59259C11.8854 4.84013 11.974 5.13163 11.9746 5.4295V18.5662C11.975 18.8648 11.8872 19.1576 11.7217 19.4061C11.556 19.6545 11.3197 19.8482 11.0439 19.9627C10.768 20.0771 10.4639 20.107 10.1709 20.0486C9.87785 19.9902 9.60855 19.8461 9.39746 19.6346L6.35254 16.5897L6.35156 16.5877C6.31572 16.5517 6.2725 16.5232 6.22559 16.5037C6.17862 16.4843 6.12796 16.4743 6.07715 16.4744H3.90039C3.42963 16.4744 2.97741 16.2878 2.64453 15.9549C2.31198 15.6222 2.12513 15.1704 2.125 14.7V9.29962C2.12515 8.82923 2.31201 8.37745 2.64453 8.04473C2.97738 7.71203 3.42976 7.52423 3.90039 7.52423H6.07715C6.12804 7.52435 6.17857 7.51441 6.22559 7.49493C6.2725 7.47544 6.31575 7.44697 6.35156 7.41094L9.39844 4.36407C9.60949 4.15356 9.87948 4.01 10.1719 3.95196L10.2822 3.93341ZM18.0088 5.65313C18.3505 5.31175 18.9054 5.31164 19.2471 5.65313C20.0803 6.48642 20.7414 7.47656 21.1924 8.56524C21.6433 9.65395 21.875 10.8214 21.875 11.9998C21.875 13.1782 21.6433 14.3456 21.1924 15.4344C20.7414 16.5231 20.0803 17.5132 19.2471 18.3465C18.9055 18.6881 18.3505 18.6879 18.0088 18.3465C17.6674 18.0049 17.6675 17.4509 18.0088 17.1092C18.6796 16.4383 19.2121 15.6409 19.5752 14.7645C19.9381 13.8881 20.125 12.9484 20.125 11.9998C20.125 11.0513 19.9381 10.1115 19.5752 9.23516C19.2122 8.3588 18.6795 7.5622 18.0088 6.89141C17.6672 6.5497 17.6671 5.9948 18.0088 5.65313ZM7.59082 8.6463C7.39209 8.84581 7.15566 9.00429 6.89551 9.11212C6.63524 9.21993 6.35592 9.27376 6.07422 9.27325L3.90039 9.27423C3.89395 9.27423 3.88746 9.27757 3.88281 9.28204C3.87826 9.2866 3.87517 9.29319 3.875 9.29962V14.7C3.87512 14.7063 3.87839 14.713 3.88281 14.7176C3.88746 14.722 3.89396 14.7244 3.90039 14.7244H6.07422C6.35584 14.7239 6.6353 14.7797 6.89551 14.8875C7.15545 14.9953 7.39218 15.1531 7.59082 15.3524L10.2246 17.9861V6.01251L7.59082 8.6463ZM15.0752 8.59942C15.4617 8.30996 16.0109 8.38805 16.3008 8.77423C16.9984 9.7045 17.3759 10.837 17.376 11.9998C17.3759 13.1625 16.9982 14.2942 16.3008 15.2244C16.0109 15.6109 15.4618 15.6889 15.0752 15.3992C14.6891 15.1092 14.6106 14.561 14.9004 14.1746C15.3708 13.5473 15.6259 12.7839 15.626 11.9998C15.6259 11.2157 15.3708 10.4523 14.9004 9.82501C14.6106 9.43847 14.6888 8.88936 15.0752 8.59942Z" fill="currentColor"/>
 </svg>
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/api-reference/APIReferenceItem.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/api-reference/APIReferenceItem.vue
index 84e648e672..cb4212e213 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/api-reference/APIReferenceItem.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/api-reference/APIReferenceItem.vue
@@ -139,7 +139,7 @@ function handleMouseUp(e: MouseEvent) {
   border-radius: var(--ui-border-radius-1);
   border: 1px solid var(--ui-color-grey-400);
   background: var(--ui-color-grey-100);
-  box-shadow: 0 1px 8px 0 rgba(10, 13, 20, 0.05);
+  /* box-shadow: 0 1px 8px 0 rgba(10, 13, 20, 0.05); */
   transition: all 0.2s;
   cursor: pointer;
   /* 42px for sticky title, to ensure the item correctly scrolled into view. */
@@ -152,7 +152,7 @@ function handleMouseUp(e: MouseEvent) {
 
 .api-reference-item:hover {
   background: var(--ui-color-grey-300);
-  box-shadow: 0 1px 2px 0 rgba(10, 13, 20, 0.03);
+  /* box-shadow: 0 1px 2px 0 rgba(10, 13, 20, 0.03); */
 }
 
 .api-reference-item.before-dragging {
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/api-reference/APIReferenceUI.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/api-reference/APIReferenceUI.vue
index 41845662ec..09bc53cc2c 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/api-reference/APIReferenceUI.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/api-reference/APIReferenceUI.vue
@@ -215,15 +215,15 @@ function handleCategoryClick(id: string) {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  border-radius: var(--ui-border-radius-1);
-  color: var(--category-color);
+  border-radius: 8px;
+  color: var(--ui-color-grey-800);
   cursor: pointer;
   transition: 0.1s;
 }
 
 .category[data-active='true'] {
-  color: var(--ui-color-grey-100);
-  background-color: var(--category-color);
+  color: var(--ui-color-grey-1000);
+  background-color: var(--ui-color-grey-400);
 }
 
 .category .icon {
diff --git a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/document-tab/DocumentTab.vue b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/document-tab/DocumentTab.vue
index 26368a153c..8f176416e6 100644
--- a/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/document-tab/DocumentTab.vue
+++ b/spx-gui/src/components/editor/code-editor/xgo-code-editor/ui/document-tab/DocumentTab.vue
@@ -26,7 +26,7 @@ const [thumbnailUrl] = useFileUrl(() => props.textDocument.thumbnailFile)
       <div
         v-radar="{ name: 'Code document tab', desc: `Click to open code of ${textDocument.id.uri}` }"
         class="document-tab flex h-10 w-10 flex-none items-center rounded-1 border-2 transition-all"
-        :class="isActive ? 'border-yellow-500 bg-yellow-200' : 'border-transparent bg-grey-300 cursor-pointer'"
+        :class="isActive ? 'border-primary-500 bg-primary-200' : 'border-transparent bg-grey-300 cursor-pointer'"
         @click="emit('click')"
       >
         <UIImg v-if="thumbnailUrl != null" class="h-full w-full rounded-[4px]" :src="thumbnailUrl" />
diff --git a/spx-gui/src/components/editor/common/EditorList.vue b/spx-gui/src/components/editor/common/EditorList.vue
index b0d3d408ce..6ab4b68ecf 100644
--- a/spx-gui/src/components/editor/common/EditorList.vue
+++ b/spx-gui/src/components/editor/common/EditorList.vue
@@ -18,7 +18,8 @@
         <template #trigger>
           <button
             v-radar="addButtonRadarInfo"
-            class="relative z-1 h-11 flex-[0_0_auto] cursor-pointer flex items-center justify-center rounded-bl-3 border-none bg-(--editor-list-color-main) text-grey-100 hover:bg-(--editor-list-color-400) active:bg-(--editor-list-color-600)"
+            class="relative z-1 h-11 flex-[0_0_auto] cursor-pointer flex items-center justify-center rounded-bl-1 bg-grey-100 border-none border-grey-400 text-grey-700 hover:text-grey-900 active:text-grey-1000"
+            style="border-top: 1px solid var(--ui-color-grey-400);"
           >
             <UIIcon type="plus" />
           </button>
diff --git a/spx-gui/src/components/editor/navbar/EditorNavbar.vue b/spx-gui/src/components/editor/navbar/EditorNavbar.vue
index 892f705a3a..9e877b7972 100644
--- a/spx-gui/src/components/editor/navbar/EditorNavbar.vue
+++ b/spx-gui/src/components/editor/navbar/EditorNavbar.vue
@@ -9,7 +9,7 @@
         }"
       >
         <template #trigger>
-          <UIIcon type="file" style="width: 24px; height: 24px" />
+          <UIIcon type="file" style="width: 20px; height: 20px" />
         </template>
         <UIMenu>
           <UIMenuGroup :disabled="!isOnline">
@@ -75,7 +75,7 @@
         <UITooltip :disabled="undoAction == null">
           <template #trigger>
             <button class="history-button" :disabled="undoAction == null" @click="handleUndo.fn">
-              <UIIcon type="undo" style="width: 24px; height: 24px" />
+              <UIIcon type="undo" style="width: 20px; height: 20px" />
             </button>
           </template>
           <span>{{ $t(undoText) }}</span>
@@ -83,7 +83,7 @@
         <UITooltip :disabled="redoAction == null">
           <template #trigger>
             <button class="history-button" :disabled="redoAction == null" @click="handleRedo.fn">
-              <UIIcon type="redo" style="width: 24px; height: 24px" />
+              <UIIcon type="redo" style="width: 20px; height: 20px" />
             </button>
           </template>
           <span>{{ $t(redoText) }}</span>
@@ -439,14 +439,14 @@ const autoSaveStateIcon = computed<AutoSaveStateIcon | null>(() => {
 @reference "../../../app.css";
 
 .history-button {
-  @apply flex h-full items-center justify-center border-none bg-transparent px-5 text-white outline-none;
+  @apply flex h-full items-center justify-center border-none bg-transparent px-5 outline-none;
 }
 
 .history-button:disabled {
-  @apply cursor-not-allowed text-[#9de6ec];
+  @apply cursor-not-allowed;
 }
 
 .history-button:enabled:hover {
-  @apply cursor-pointer bg-primary-600;
+  @apply cursor-pointer;
 }
 </style>
diff --git a/spx-gui/src/components/editor/navbar/EditorProjectDisplayName.vue b/spx-gui/src/components/editor/navbar/EditorProjectDisplayName.vue
index c5e0dc17df..db1684d815 100644
--- a/spx-gui/src/components/editor/navbar/EditorProjectDisplayName.vue
+++ b/spx-gui/src/components/editor/navbar/EditorProjectDisplayName.vue
@@ -208,8 +208,7 @@ function handleSubmitProjectDisplayName() {
 
 .name-text {
   max-width: 220px;
-  color: var(--ui-color-grey-100);
-  font-weight: 600;
+  color: var(--ui-color-grey-1000);
 }
 
 .name-input {
@@ -240,7 +239,7 @@ function handleSubmitProjectDisplayName() {
   justify-content: center;
   flex: 0 0 auto;
   line-height: 0;
-  color: var(--ui-color-grey-100);
+  color: var(--ui-color-grey-1000);
 }
 
 .edit-icon {
@@ -254,17 +253,17 @@ function handleSubmitProjectDisplayName() {
 
 .edit-icon:hover,
 .edit-icon:focus-visible {
-  background: var(--ui-color-primary-400);
+  background: var(--ui-color-grey-200);
 }
 
 .edit-display-name-icon {
   width: 16px;
   height: 16px;
-  color: var(--ui-color-grey-100);
+  color: var(--ui-color-grey-1000);
 }
 
 .project-pill.editable:hover {
-  background: var(--ui-color-primary-400);
+  background: var(--ui-color-grey-200);
   cursor: pointer;
 }
 
@@ -277,7 +276,7 @@ function handleSubmitProjectDisplayName() {
 }
 
 .project-wrap.editing .project-pill {
-  background: var(--ui-color-grey-100);
+  background: var(--ui-color-grey-200);
   cursor: text;
   border-color: var(--ui-color-grey-400);
   gap: 1px;
diff --git a/spx-gui/src/components/editor/navbar/icons/cloud-check.svg b/spx-gui/src/components/editor/navbar/icons/cloud-check.svg
index 8bc311584d..9cbf015531 100644
--- a/spx-gui/src/components/editor/navbar/icons/cloud-check.svg
+++ b/spx-gui/src/components/editor/navbar/icons/cloud-check.svg
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M16 19.75H9.5C5.502 19.75 2.25 16.498 2.25 12.5C2.25 8.502 5.502 5.25 9.5 5.25C11.264 5.25 12.9641 5.89198 14.2881 7.05798C14.7021 7.42298 15.0711 7.83303 15.3921 8.28003C15.5931 8.25903 15.794 8.24902 16 8.24902C19.171 8.24902 21.75 10.828 21.75 13.999C21.75 17.17 19.171 19.75 16 19.75ZM9.5 6.75C6.329 6.75 3.75 9.329 3.75 12.5C3.75 15.671 6.329 18.25 9.5 18.25H16C18.344 18.25 20.25 16.344 20.25 14C20.25 11.656 18.344 9.75 16 9.75C15.717 9.75 15.4449 9.77503 15.1689 9.82703C14.8669 9.88503 14.5551 9.74801 14.3931 9.48401C14.0931 8.99901 13.7239 8.56102 13.2959 8.18402C12.2469 7.25902 10.898 6.75 9.5 6.75ZM11.863 15.364L14.53 12.697C14.823 12.404 14.823 11.929 14.53 11.636C14.237 11.343 13.762 11.343 13.469 11.636L11.332 13.772L10.5291 12.969C10.2361 12.676 9.76102 12.676 9.46802 12.969C9.17502 13.262 9.17502 13.737 9.46802 14.03L10.801 15.363C10.942 15.504 11.1321 15.583 11.3311 15.583C11.5321 15.583 11.723 15.504 11.863 15.364Z" fill="white"/>
+<path d="M16 19.75H9.5C5.502 19.75 2.25 16.498 2.25 12.5C2.25 8.502 5.502 5.25 9.5 5.25C11.264 5.25 12.9641 5.89198 14.2881 7.05798C14.7021 7.42298 15.0711 7.83303 15.3921 8.28003C15.5931 8.25903 15.794 8.24902 16 8.24902C19.171 8.24902 21.75 10.828 21.75 13.999C21.75 17.17 19.171 19.75 16 19.75ZM9.5 6.75C6.329 6.75 3.75 9.329 3.75 12.5C3.75 15.671 6.329 18.25 9.5 18.25H16C18.344 18.25 20.25 16.344 20.25 14C20.25 11.656 18.344 9.75 16 9.75C15.717 9.75 15.4449 9.77503 15.1689 9.82703C14.8669 9.88503 14.5551 9.74801 14.3931 9.48401C14.0931 8.99901 13.7239 8.56102 13.2959 8.18402C12.2469 7.25902 10.898 6.75 9.5 6.75ZM11.863 15.364L14.53 12.697C14.823 12.404 14.823 11.929 14.53 11.636C14.237 11.343 13.762 11.343 13.469 11.636L11.332 13.772L10.5291 12.969C10.2361 12.676 9.76102 12.676 9.46802 12.969C9.17502 13.262 9.17502 13.737 9.46802 14.03L10.801 15.363C10.942 15.504 11.1321 15.583 11.3311 15.583C11.5321 15.583 11.723 15.504 11.863 15.364Z" fill="#000"/>
 </svg>
diff --git a/spx-gui/src/components/editor/navbar/icons/saving.svg b/spx-gui/src/components/editor/navbar/icons/saving.svg
index 5b27626014..40ef2a3ac9 100644
--- a/spx-gui/src/components/editor/navbar/icons/saving.svg
+++ b/spx-gui/src/components/editor/navbar/icons/saving.svg
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M9.69345 19.02H15.7035C18.6354 19.02 21.02 16.7034 21.02 13.856C21.02 11.0087 18.6354 8.69292 15.7035 8.69292C15.5517 8.69292 15.403 8.69862 15.2548 8.71047C15.1844 8.7161 15.1158 8.68582 15.0729 8.62977C14.7924 8.26362 14.4743 7.92627 14.1206 7.62344C12.8964 6.57646 11.3245 6 9.69345 6C5.99684 6 2.98999 8.92007 2.98999 12.51C2.98999 16.0999 5.99684 19.02 9.69345 19.02Z" stroke="white" stroke-width="1.5"/>
+<path d="M9.69345 19.02H15.7035C18.6354 19.02 21.02 16.7034 21.02 13.856C21.02 11.0087 18.6354 8.69292 15.7035 8.69292C15.5517 8.69292 15.403 8.69862 15.2548 8.71047C15.1844 8.7161 15.1158 8.68582 15.0729 8.62977C14.7924 8.26362 14.4743 7.92627 14.1206 7.62344C12.8964 6.57646 11.3245 6 9.69345 6C5.99684 6 2.98999 8.92007 2.98999 12.51C2.98999 16.0999 5.99684 19.02 9.69345 19.02Z" stroke="black" stroke-width="1.5"/>
 </svg>
diff --git a/spx-gui/src/components/editor/panels/common/PanelHeader.vue b/spx-gui/src/components/editor/panels/common/PanelHeader.vue
index efd339e4ac..813b3dcf46 100644
--- a/spx-gui/src/components/editor/panels/common/PanelHeader.vue
+++ b/spx-gui/src/components/editor/panels/common/PanelHeader.vue
@@ -3,8 +3,7 @@
 <template>
   <!-- TODO: use UICardHeader? -->
   <div
-    class="flex h-11 items-center justify-between border-b border-grey-400 pr-2.5"
-    :class="active ? 'border-(--panel-color-main) bg-(--panel-color-main) text-grey-100' : 'text-title'"
+    class="flex h-11 items-center justify-between border-b border-grey-400 pr-2.5 text-title"
   >
     <div class="flex h-full items-center px-middle text-16">
       <slot></slot>
@@ -13,12 +12,7 @@
       <template #trigger>
         <div
           v-radar="{ name: 'Add', desc: 'Button to add a new item for current panel, click to view more options' }"
-          class="flex h-7 w-7 cursor-pointer items-center justify-center rounded-full text-inherit transition-colors"
-          :class="
-            active
-              ? 'hover:bg-(--panel-color-400) active:bg-(--panel-color-600)'
-              : 'hover:bg-grey-400 active:bg-grey-500'
-          "
+          class="flex h-7 w-7 cursor-pointer items-center justify-center rounded-full text-grey-700 transition-colors hover:text-grey-900 active:text-grey-1000"
         >
           <UIIcon type="plus" />
         </div>
diff --git a/spx-gui/src/components/editor/panels/stage/StagePanel.vue b/spx-gui/src/components/editor/panels/stage/StagePanel.vue
index 3680141897..a39e940347 100644
--- a/spx-gui/src/components/editor/panels/stage/StagePanel.vue
+++ b/spx-gui/src/components/editor/panels/stage/StagePanel.vue
@@ -2,8 +2,7 @@
   <section class="flex h-full flex-col overflow-hidden" :style="cssVars">
     <!-- TODO: use UICardHeader? -->
     <h4
-      class="flex h-11 w-20 items-center justify-center border-b border-grey-400 text-16"
-      :class="active ? 'border-stage-main bg-stage-main text-grey-100' : 'text-title'"
+      class="flex h-11 w-20 items-center justify-center border-b border-grey-400 text-16 text-title"
     >
       {{ $t({ en: 'Stage', zh: '舞台' }) }}
     </h4>
@@ -12,7 +11,7 @@
         <div
           v-radar="{ name: 'Stage overview', desc: 'Overview of the stage, click to view stage details' }"
           class="relative flex h-14 w-14 cursor-pointer items-center justify-center rounded-1 bg-grey-300"
-          :class="active ? 'border-2 border-stage-main bg-blue-200 p-0' : 'p-0.5 hover:bg-grey-400'"
+          :class="active ? 'border-2 border-primary-main bg-blue-200 p-0' : 'p-0.5 hover:bg-grey-400'"
           @click="activate"
         >
           <UIImg class="h-11 w-11 rounded-[4px] object-cover" :src="imgSrc" size="cover" :loading="imgLoading" />
diff --git a/spx-gui/src/components/editor/panels/stage/backdrop.svg b/spx-gui/src/components/editor/panels/stage/backdrop.svg
index 5ac675018c..306f2be8b4 100644
--- a/spx-gui/src/components/editor/panels/stage/backdrop.svg
+++ b/spx-gui/src/components/editor/panels/stage/backdrop.svg
@@ -1,5 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M18 20.75H6C3.582 20.75 2.25 19.418 2.25 17V7C2.25 4.582 3.582 3.25 6 3.25H18C20.418 3.25 21.75 4.582 21.75 7V17C21.75 19.418 20.418 20.75 18 20.75Z" fill="#6E7781"/>
-    <path d="M19.9147 14.068L15.5975 9.75068C15.2194 9.37152 14.5998 9.37152 14.2206 9.75068L9.43028 14.541C9.24313 14.7272 8.93772 14.7272 8.75154 14.541L7.83996 13.6295C7.46178 13.2504 6.84222 13.2504 6.46307 13.6295L4.08535 16.0074C4.03104 16.0617 4 16.1363 4 16.2129V16.82C4 18.3521 4.6497 19.0018 6.18182 19.0018H17.8182C19.3503 19.0018 20 18.3521 20 16.82V14.2735C20 14.1969 19.969 14.1223 19.9147 14.068Z" fill="white"/>
-    <path d="M8.12222 10.2744C7.45507 10.2744 6.9082 9.73135 6.9082 9.06224C6.9082 8.39314 7.44546 7.8501 8.11358 7.8501H8.12328C8.7914 7.8501 9.33339 8.39314 9.33339 9.06224C9.33339 9.73135 8.79131 10.2744 8.12222 10.2744Z" fill="white"/>
+<path d="M19 2.12451C20.5877 2.12451 21.8748 3.41188 21.875 4.99951V18.9995C21.875 20.5873 20.5878 21.8745 19 21.8745H5C3.41236 21.8743 2.125 20.5872 2.125 18.9995V4.99951C2.12522 3.41201 3.4125 2.12473 5 2.12451H19ZM5 3.87451C4.379 3.87473 3.87522 4.37851 3.875 4.99951V18.9995C3.875 19.6207 4.37886 20.1243 5 20.1245H5.63672L14.4668 11.2944C15.0058 10.7557 15.7379 10.4527 16.5 10.4526C17.262 10.4526 17.9932 10.7559 18.5322 11.2944L20.125 12.8862V4.99951C20.1248 4.37837 19.6212 3.87451 19 3.87451H5ZM16.5 12.2026C16.2021 12.2027 15.9159 12.3212 15.7051 12.5317L8.1123 20.1245H19C19.6213 20.1245 20.125 19.6208 20.125 18.9995V15.3618L17.2949 12.5317C17.084 12.3214 16.7979 12.2026 16.5 12.2026ZM9.00098 6.12451C10.5886 6.12464 11.8758 7.41196 11.876 8.99951C11.8759 10.5872 10.5886 11.8744 9.00098 11.8745C7.41338 11.8743 6.12604 10.5871 6.12598 8.99951C6.12619 7.41201 7.41347 6.12473 9.00098 6.12451ZM9.00098 7.87451C8.37997 7.87473 7.87619 8.37851 7.87598 8.99951C7.87604 9.62064 8.37988 10.1243 9.00098 10.1245C9.62214 10.1244 10.1259 9.62069 10.126 8.99951C10.1258 8.37846 9.62205 7.87464 9.00098 7.87451Z" fill="#6E7781"/>
 </svg>
diff --git a/spx-gui/src/components/editor/panels/stage/sound.svg b/spx-gui/src/components/editor/panels/stage/sound.svg
index 1ce37eba8d..459ff6f4b3 100644
--- a/spx-gui/src/components/editor/panels/stage/sound.svg
+++ b/spx-gui/src/components/editor/panels/stage/sound.svg
@@ -1,8 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M12 22C17.5229 22 22 17.5229 22 12C22 6.47715 17.5229 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5229 6.47715 22 12 22Z" fill="#6E7781" stroke="#6E7781" stroke-width="1.6"/>
-    <path d="M15 9V15" stroke="white" stroke-width="1.6" stroke-linecap="round"/>
-    <path d="M18 11V13" stroke="white" stroke-width="1.6" stroke-linecap="round"/>
-    <path d="M9 9V15" stroke="white" stroke-width="1.6" stroke-linecap="round"/>
-    <path d="M6 11V13" stroke="white" stroke-width="1.6" stroke-linecap="round"/>
-    <path d="M12 7V17" stroke="white" stroke-width="1.6" stroke-linecap="round"/>
+<path d="M19.5 2.12451C20.8115 2.12451 21.8748 3.18802 21.875 4.49951V19.4995C21.875 20.8112 20.8117 21.8745 19.5 21.8745H4.5C3.18851 21.8743 2.125 20.8111 2.125 19.4995V4.49951C2.12522 3.18815 3.18864 2.12473 4.5 2.12451H19.5ZM4.5 3.87451C4.15514 3.87473 3.87522 4.15465 3.875 4.49951V19.4995C3.875 19.8446 4.15501 20.1243 4.5 20.1245H19.5C19.8452 20.1245 20.125 19.8447 20.125 19.4995V4.49951C20.1248 4.15452 19.845 3.87451 19.5 3.87451H4.5ZM9.59277 6.12939C9.99277 6.17221 10.3126 6.48282 10.3672 6.88135L11.4062 14.5044L12.6836 11.1851L12.7344 11.0757C12.8705 10.8297 13.1191 10.6611 13.4033 10.6294C13.7282 10.5934 14.0471 10.7423 14.2285 11.0142L15.542 12.9839L16.2998 11.9741C16.465 11.754 16.7248 11.6246 17 11.6245H18.5C18.9831 11.6245 19.3748 12.0164 19.375 12.4995C19.375 12.9828 18.9832 13.3745 18.5 13.3745H17.4385L16.2002 15.0249C16.0298 15.252 15.7594 15.3824 15.4756 15.3745C15.1919 15.3665 14.9289 15.221 14.7715 14.9849L13.709 13.3911L11.8164 18.314C11.6729 18.6865 11.2951 18.9148 10.8984 18.8687C10.5021 18.8221 10.1867 18.5132 10.1328 18.1177L9.11133 10.6274L8.32227 12.7983C8.19652 13.1441 7.86794 13.3745 7.5 13.3745H6C5.51693 13.3743 5.125 12.9826 5.125 12.4995C5.12522 12.0166 5.51707 11.6247 6 11.6245H6.8877L8.67773 6.70068L8.74023 6.56592C8.91001 6.26823 9.24292 6.09227 9.59277 6.12939Z" fill="#6E7781"/>
 </svg>
diff --git a/spx-gui/src/components/editor/panels/stage/widget.svg b/spx-gui/src/components/editor/panels/stage/widget.svg
index 82c88548a9..c0d5ebbb5f 100644
--- a/spx-gui/src/components/editor/panels/stage/widget.svg
+++ b/spx-gui/src/components/editor/panels/stage/widget.svg
@@ -1,4 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <rect x="2" y="5" width="20" height="14" rx="3.6" fill="#6E7781"/>
-    <path d="M13.9172 6.61523H17.8827C19.1822 6.61523 20.2356 7.66868 20.2356 8.96818V15.0315C20.2356 16.331 19.1822 17.3845 17.8827 17.3845H10.4121L13.9172 6.61523Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.7002 12.6255C20.3238 12.6256 22.375 14.851 22.375 17.5005C22.375 20.15 20.3238 22.3754 17.7002 22.3755H6.2998C3.67622 22.3754 1.625 20.15 1.625 17.5005C1.625 14.851 3.67622 12.6256 6.2998 12.6255H17.7002ZM6.2998 14.3755C4.7262 14.3756 3.375 15.7318 3.375 17.5005C3.375 19.2691 4.7262 20.6254 6.2998 20.6255H17.7002C19.2738 20.6254 20.625 19.2691 20.625 17.5005C20.625 15.7318 19.2738 14.3756 17.7002 14.3755H6.2998ZM6.5 15.1255C7.8117 15.1255 8.875 16.1888 8.875 17.5005C8.875 18.8122 7.8117 19.8755 6.5 19.8755C5.1883 19.8755 4.125 18.8122 4.125 17.5005C4.125 16.1888 5.1883 15.1255 6.5 15.1255ZM6.5 16.8755C6.1548 16.8755 5.875 17.1553 5.875 17.5005C5.875 17.8457 6.1548 18.1255 6.5 18.1255C6.8452 18.1255 7.125 17.8457 7.125 17.5005C7.125 17.1553 6.8452 16.8755 6.5 16.8755ZM17.7002 1.62549C20.3238 1.6256 22.375 3.851 22.375 6.50049C22.375 9.14999 20.3238 11.3754 17.7002 11.3755H6.2998C3.67622 11.3754 1.625 9.14999 1.625 6.50049C1.625 3.851 3.67622 1.6256 6.2998 1.62549H17.7002ZM6.2998 3.37549C4.7262 3.3756 3.375 4.73184 3.375 6.50049C3.375 8.26915 4.7262 9.62538 6.2998 9.62549H17.7002C19.2738 9.62538 20.625 8.26915 20.625 6.50049C20.625 4.73184 19.2738 3.3756 17.7002 3.37549H6.2998ZM17.5 4.12549C18.8117 4.12549 19.875 5.18879 19.875 6.50049C19.875 7.81219 18.8117 8.87549 17.5 8.87549C16.1883 8.87549 15.125 7.81219 15.125 6.50049C15.125 5.18879 16.1883 4.12549 17.5 4.12549ZM17.5 5.87549C17.1548 5.87549 16.875 6.15529 16.875 6.50049C16.875 6.84569 17.1548 7.12549 17.5 7.12549C17.8452 7.12549 18.125 6.84569 18.125 6.50049C18.125 6.15529 17.8452 5.87549 17.5 5.87549Z" fill="#6E7781"/>
 </svg>
diff --git a/spx-gui/src/components/navbar/NavbarDropdown.vue b/spx-gui/src/components/navbar/NavbarDropdown.vue
index 8521292715..f532fe7f6d 100644
--- a/spx-gui/src/components/navbar/NavbarDropdown.vue
+++ b/spx-gui/src/components/navbar/NavbarDropdown.vue
@@ -1,7 +1,7 @@
 <template>
   <UIDropdown placement="bottom-start">
     <template #trigger>
-      <div v-radar="triggerRadar" class="flex h-full cursor-pointer items-center px-5 hover:bg-primary-600">
+      <div v-radar="triggerRadar" class="flex h-full cursor-pointer items-center px-5">
         <slot name="trigger"></slot>
         <UIIcon style="width: 16px; height: 16px" type="arrowDown" />
       </div>
diff --git a/spx-gui/src/components/navbar/NavbarProfile.vue b/spx-gui/src/components/navbar/NavbarProfile.vue
index da4e958104..28cbb0badf 100644
--- a/spx-gui/src/components/navbar/NavbarProfile.vue
+++ b/spx-gui/src/components/navbar/NavbarProfile.vue
@@ -11,8 +11,8 @@
   </div>
   <UIDropdown v-else placement="bottom-end" :offset="{ x: 0, y: 8 }">
     <template #trigger>
-      <div class="mr-2 flex h-full items-center justify-center px-5 hover:bg-primary-600">
-        <img class="h-8 w-8 rounded-full" :src="avatarUrl ?? undefined" />
+      <div class="mr-2 flex h-full items-center justify-center px-5">
+        <img class="h-8 w-8 rounded-full border-2 border-grey-100" :src="avatarUrl ?? undefined" />
       </div>
     </template>
     <UIMenu class="min-w-30">
diff --git a/spx-gui/src/components/navbar/NavbarTutorials.vue b/spx-gui/src/components/navbar/NavbarTutorials.vue
index d73126337b..3137472653 100644
--- a/spx-gui/src/components/navbar/NavbarTutorials.vue
+++ b/spx-gui/src/components/navbar/NavbarTutorials.vue
@@ -3,10 +3,10 @@
     <template #trigger>
       <router-link
         v-radar="{ name: 'Navbar tutorials link', desc: 'Click to open the tutorials page' }"
-        class="flex h-full cursor-pointer items-center px-5 hover:bg-primary-600"
+        class="flex h-full cursor-pointer items-center px-5"
         to="/tutorials"
       >
-        <UIIcon type="tutorial" class="text-grey-100" style="width: 24px; height: 24px" />
+        <UIIcon type="tutorial" class="text-grey-1000" style="width: 20px; height: 20px" />
       </router-link>
     </template>
     <div class="text">{{ $t({ en: 'Tutorials', zh: '教程' }) }}</div>
diff --git a/spx-gui/src/components/navbar/NavbarWrapper.vue b/spx-gui/src/components/navbar/NavbarWrapper.vue
index 13cdc495cd..5ce70ffe0b 100644
--- a/spx-gui/src/components/navbar/NavbarWrapper.vue
+++ b/spx-gui/src/components/navbar/NavbarWrapper.vue
@@ -1,8 +1,7 @@
 <template>
   <nav
     v-radar="{ name: 'Navbar', desc: 'Top navigation bar' }"
-    class="flex w-full justify-center bg-primary-main bg-center bg-repeat text-grey-100 shadow-diffusion"
-    :style="{ backgroundImage: `url(${bgUrl})` }"
+    class="flex w-full justify-center text-grey-1000"
   >
     <div
       class="flex h-12.5 items-stretch justify-between gap-3"
@@ -15,7 +14,7 @@
       <div class="flex basis-[40%] items-center justify-center overflow-hidden">
         <slot name="center"></slot>
       </div>
-      <div class="flex basis-[30%] justify-end">
+      <div class="flex basis-[30%] justify-end items-center">
         <slot name="right"></slot>
         <NavbarProfile />
       </div>
@@ -24,7 +23,6 @@
 </template>
 
 <script setup lang="ts">
-import bgUrl from './bg.svg'
 import NavbarLogo from './NavbarLogo.vue'
 import NavbarProfile from './NavbarProfile.vue'
 
diff --git a/spx-gui/src/components/navbar/logo.svg b/spx-gui/src/components/navbar/logo.svg
index 759acd1865..e8118e40c2 100644
--- a/spx-gui/src/components/navbar/logo.svg
+++ b/spx-gui/src/components/navbar/logo.svg
@@ -1,15 +1,15 @@
 <svg width="102" height="30" viewBox="0 0 102 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M96.2342 13.9078V23.4001C96.2342 23.9524 95.7865 24.4001 95.2342 24.4001H93.6624C93.1101 24.4001 92.6624 23.9524 92.6624 23.4001V11.9808C92.6624 11.4285 93.1101 10.9808 93.6624 10.9808H95.0928C95.6172 10.9808 96.0526 11.3859 96.0902 11.909L96.2342 13.9078ZM100.005 10.8193C100.171 10.8523 100.275 11.0073 100.272 11.1767L100.224 13.7529C100.219 13.9933 100.005 14.1764 99.7655 14.1569C99.707 14.1521 99.6462 14.1476 99.5829 14.1434C99.3431 14.1186 99.124 14.1062 98.9255 14.1062C98.4212 14.1062 97.983 14.1723 97.6109 14.3046C97.2471 14.4287 96.9412 14.6147 96.6931 14.8627C96.4533 15.1108 96.2714 15.4126 96.1474 15.7681C96.0317 16.1236 95.9655 16.5288 95.949 16.9835L95.2296 16.7603C95.2296 15.8921 95.3165 15.0942 95.4901 14.3666C95.6637 13.6308 95.9159 12.99 96.2466 12.4443C96.5856 11.8986 96.999 11.4769 97.4869 11.1792C97.9747 10.8816 98.5328 10.7328 99.1612 10.7328C99.3596 10.7328 99.5622 10.7493 99.7689 10.7824C99.8539 10.7926 99.9326 10.8049 100.005 10.8193Z" fill="white"/>
-  <path d="M85.6297 24.6482C84.5879 24.6482 83.6536 24.4828 82.8268 24.1521C82 23.8131 81.2972 23.3459 80.7184 22.7506C80.1479 22.1553 79.7097 21.4649 79.4038 20.6794C79.0978 19.8857 78.9449 19.0423 78.9449 18.1494V17.6533C78.9449 16.6363 79.0896 15.7061 79.3789 14.8627C79.6683 14.0194 80.0817 13.2876 80.6192 12.6675C81.1649 12.0474 81.8263 11.572 82.6036 11.2413C83.3808 10.9023 84.2572 10.7328 85.2329 10.7328C86.1837 10.7328 87.0271 10.8899 87.7629 11.204C88.4988 11.5182 89.1148 11.9647 89.6109 12.5435C90.1152 13.1223 90.4956 13.8168 90.7519 14.6271C91.0082 15.4291 91.1364 16.3221 91.1364 17.306V18.7943H80.4704V16.413H87.6265V16.1402C87.6265 15.6441 87.5356 15.2017 87.3537 14.8131C87.18 14.4163 86.9154 14.1021 86.5599 13.8706C86.2044 13.639 85.7496 13.5233 85.1956 13.5233C84.7244 13.5233 84.3192 13.6266 83.9802 13.8333C83.6412 14.04 83.3642 14.3294 83.1493 14.7015C82.9426 15.0736 82.7855 15.5118 82.678 16.0162C82.5787 16.5122 82.5291 17.058 82.5291 17.6533V18.1494C82.5291 18.6868 82.6036 19.1829 82.7524 19.6376C82.9095 20.0924 83.1286 20.4851 83.4097 20.8159C83.6991 21.1466 84.0464 21.4029 84.4515 21.5848C84.8649 21.7667 85.3321 21.8577 85.853 21.8577C86.4979 21.8577 87.0973 21.7336 87.6513 21.4856C88.0767 21.2916 88.4572 21.0243 88.7927 20.6836C88.9653 20.5083 89.2532 20.4959 89.4199 20.6769L90.6216 21.9816C90.7485 22.1194 90.7642 22.328 90.6457 22.4731C90.3897 22.7867 90.0696 23.09 89.6853 23.3831C89.2057 23.7552 88.627 24.0611 87.949 24.3009C87.271 24.5324 86.4979 24.6482 85.6297 24.6482Z" fill="white"/>
-  <path d="M73.5741 21.4732V6.35014C73.5741 5.79786 74.0219 5.35014 74.5741 5.35014H76.1708C76.7231 5.35014 77.1708 5.79786 77.1708 6.35014V23.4001C77.1708 23.9524 76.7231 24.4001 76.1708 24.4001H74.8185C74.3133 24.4001 73.8875 24.0235 73.8259 23.5221L73.5741 21.4732ZM65.0909 17.8517V17.5913C65.0909 16.566 65.2067 15.6358 65.4382 14.8007C65.6697 13.9574 66.0087 13.2339 66.4552 12.6303C66.9017 12.0267 67.4515 11.5596 68.1047 11.2289C68.7579 10.8981 69.502 10.7328 70.3371 10.7328C71.1226 10.7328 71.8089 10.8981 72.3959 11.2289C72.9912 11.5596 73.4956 12.0309 73.909 12.6427C74.3307 13.2463 74.6697 13.9615 74.926 14.7883C75.1823 15.6069 75.3684 16.504 75.4841 17.4796V18.0501C75.3684 18.9845 75.1823 19.8526 74.926 20.6546C74.6697 21.4567 74.3307 22.1595 73.909 22.763C73.4956 23.3583 72.9912 23.8214 72.3959 24.1521C71.8006 24.4828 71.1061 24.6482 70.3123 24.6482C69.4772 24.6482 68.7331 24.4787 68.0799 24.1397C67.435 23.8007 66.8893 23.3253 66.4428 22.7134C66.0046 22.1016 65.6697 21.3822 65.4382 20.5554C65.2067 19.7286 65.0909 18.8274 65.0909 17.8517ZM68.6628 17.5913V17.8517C68.6628 18.4057 68.7042 18.9224 68.7868 19.402C68.8778 19.8816 69.0225 20.3074 69.2209 20.6794C69.4276 21.0432 69.6922 21.3285 70.0147 21.5352C70.3454 21.7336 70.7464 21.8329 71.2177 21.8329C71.8295 21.8329 72.3339 21.6964 72.7308 21.4236C73.1277 21.1425 73.4295 20.758 73.6362 20.2702C73.8511 19.7823 73.9752 19.2201 74.0082 18.5834V16.9587C73.9834 16.4378 73.909 15.9707 73.785 15.5573C73.6692 15.1356 73.4956 14.7759 73.2641 14.4783C73.0408 14.1806 72.7597 13.9491 72.4207 13.7837C72.09 13.6184 71.6973 13.5357 71.2425 13.5357C70.7795 13.5357 70.3826 13.6432 70.0519 13.8582C69.7212 14.0649 69.4524 14.3501 69.2457 14.7139C69.0473 15.0777 68.8985 15.5077 68.7992 16.0038C68.7083 16.4916 68.6628 17.0207 68.6628 17.5913Z" fill="white"/>
-  <path d="M62.2053 5.35014C62.7576 5.35014 63.2053 5.79786 63.2053 6.35014V23.4001C63.2053 23.9524 62.7576 24.4001 62.2053 24.4001H60.621C60.0687 24.4001 59.621 23.9524 59.621 23.4001V6.35014C59.621 5.79786 60.0687 5.35014 60.621 5.35014H62.2053Z" fill="white"/>
-  <path d="M55.9912 10.9808C56.5435 10.9808 56.9912 11.4285 56.9912 11.9808V23.4002C56.9912 23.9524 56.5435 24.4002 55.9912 24.4002H54.407C53.8547 24.4002 53.4069 23.9524 53.4069 23.4002V11.9808C53.4069 11.4285 53.8547 10.9808 54.4069 10.9808H55.9912ZM53.1837 7.48335C53.1837 6.96245 53.3656 6.53251 53.7294 6.19351C54.0932 5.85451 54.581 5.68501 55.1929 5.68501C55.7965 5.68501 56.2802 5.85451 56.644 6.19351C57.016 6.53251 57.2021 6.96245 57.2021 7.48335C57.2021 8.00425 57.016 8.4342 56.644 8.7732C56.2802 9.11219 55.7965 9.28169 55.1929 9.28169C54.581 9.28169 54.0932 9.11219 53.7294 8.7732C53.3656 8.4342 53.1837 8.00425 53.1837 7.48335Z" fill="white"/>
-  <path d="M47.4285 21.1879V11.9808C47.4285 11.4285 47.8762 10.9808 48.4285 10.9808H50.0004C50.5527 10.9808 51.0004 11.4285 51.0004 11.9808V23.4001C51.0004 23.9524 50.5527 24.4001 50.0004 24.4001H48.5759C48.049 24.4001 47.6125 23.9914 47.578 23.4656L47.4285 21.1879ZM47.8254 18.4346L48.8796 18.4098C48.8796 19.3028 48.7762 20.1337 48.5695 20.9027C48.3628 21.6634 48.0528 22.3248 47.6394 22.8871C47.2259 23.441 46.705 23.8751 46.0767 24.1893C45.4483 24.4952 44.7083 24.6482 43.8566 24.6482C43.2035 24.6482 42.5999 24.5572 42.0459 24.3753C41.5002 24.1852 41.0289 23.8916 40.632 23.4948C40.2434 23.0896 39.9375 22.5729 39.7143 21.9445C39.4993 21.3078 39.3918 20.543 39.3918 19.65V11.9808C39.3918 11.4285 39.8395 10.9808 40.3918 10.9808H41.9637C42.516 10.9808 42.9637 11.4285 42.9637 11.9808V19.6748C42.9637 20.0717 43.0092 20.4066 43.1001 20.6794C43.1993 20.9523 43.3357 21.1755 43.5094 21.3492C43.683 21.5228 43.8856 21.6468 44.1171 21.7212C44.3569 21.7956 44.6215 21.8329 44.9108 21.8329C45.6467 21.8329 46.2255 21.684 46.6472 21.3864C47.0771 21.0887 47.3789 20.6836 47.5525 20.1709C47.7344 19.65 47.8254 19.0713 47.8254 18.4346Z" fill="white"/>
-  <path d="M31.0693 16.475H26.4309L26.4061 13.9202H30.3004C30.9867 13.9202 31.5489 13.8333 31.9871 13.6597C32.4253 13.4778 32.7519 13.2174 32.9669 12.8784C33.1901 12.5311 33.3018 12.1094 33.3018 11.6133C33.3018 11.0511 33.1943 10.5963 32.9793 10.2491C32.7726 9.9018 32.446 9.64962 31.9995 9.49253C31.5613 9.33543 30.9949 9.25688 30.3004 9.25688H27.7207V24.4001H25.6C24.7163 24.4001 24 23.6838 24 22.8001V7.94233C24 7.05868 24.7163 6.34233 25.6 6.34233H30.3004C31.3505 6.34233 32.2889 6.44155 33.1157 6.63999C33.9508 6.83842 34.6577 7.14021 35.2365 7.54536C35.8153 7.9505 36.2576 8.46313 36.5636 9.08325C36.8695 9.6951 37.0225 10.4227 37.0225 11.2661C37.0225 12.0102 36.853 12.6965 36.514 13.3249C36.1832 13.9532 35.6582 14.4659 34.9389 14.8627C34.2278 15.2596 33.2976 15.4787 32.1483 15.5201L31.0693 16.475ZM30.9081 24.4001H25.4139L26.8649 21.498H30.9081C31.5613 21.498 32.0946 21.3946 32.508 21.1879C32.9214 20.973 33.2273 20.6836 33.4258 20.3198C33.6242 19.956 33.7234 19.5384 33.7234 19.0671C33.7234 18.538 33.6325 18.0791 33.4506 17.6905C33.277 17.3019 32.9958 17.0042 32.6072 16.7975C32.2186 16.5825 31.706 16.475 31.0693 16.475H27.4851L27.5099 13.9202H31.9747L32.8305 14.9248C33.9301 14.9082 34.8148 15.1025 35.4846 15.5077C36.1626 15.9045 36.6545 16.4213 36.9604 17.058C37.2746 17.6946 37.4317 18.3767 37.4317 19.1043C37.4317 20.2619 37.1796 21.2375 36.6752 22.0313C36.1708 22.8168 35.4308 23.408 34.4552 23.8048C33.4878 24.2017 32.3054 24.4001 30.9081 24.4001Z" fill="white"/>
-  <path d="M19.6347 6.68961C18.7176 5.86504 17.8901 5.96828 17.2246 6.68961L16.7772 7.17436L19.2579 9.649L19.6338 9.30177C20.2994 8.58044 20.6994 7.70725 19.6338 6.68961H19.6347Z" fill="white"/>
-  <path d="M4.20431 20.0879L3.06538 22.05L2.20955 23.8797C2.09955 24.1149 2.34368 24.3594 2.57898 24.2492L4.4076 23.3931L6.3643 22.2491L6.36245 22.2473L6.36755 22.2459L4.20431 20.0879Z" fill="white"/>
-  <path d="M6.6502 21.4986L7.01731 21.8667L7.14309 21.7931C7.14634 21.7912 7.14959 21.7884 7.15237 21.7857L18.778 10.1601L18.3969 9.78049L6.6502 21.4986Z" fill="white"/>
-  <path d="M4.66564 19.2967C4.66286 19.2994 4.66054 19.3027 4.65822 19.3059L4.58442 19.4332L6.15638 21.006L17.9036 9.28741L16.2889 7.67206L4.66518 19.2967H4.66564Z" fill="white"/>
-  <path d="M6.38396 12.4271L17.7056 23.7684C18.3906 24.4545 19.5012 24.4545 20.1863 23.7684C20.8713 23.0823 20.8713 21.9697 20.1863 21.2836L8.86605 9.9437L6.38396 12.4271Z" fill="white"/>
-  <path d="M9.46336 5.46387C8.87765 5.98102 8.10861 6.29492 7.26671 6.29492C6.91537 6.29492 6.57657 6.24029 6.25865 6.1389C6.22523 6.12825 6.18857 6.13658 6.16351 6.16158L1.43511 10.8979C1.25503 11.0785 1.25503 11.3711 1.43511 11.5516L3.52409 13.6443C3.70416 13.8249 3.99656 13.8249 4.1771 13.6443L8.37037 9.44692L8.36852 9.44507L10.6399 7.16996C10.82 6.9894 10.82 6.69679 10.6399 6.51623L9.59192 5.46711C9.55665 5.43192 9.50049 5.431 9.4629 5.46387H9.46336Z" fill="white"/>
+  <path d="M96.2342 13.9078V23.4001C96.2342 23.9524 95.7865 24.4001 95.2342 24.4001H93.6624C93.1101 24.4001 92.6624 23.9524 92.6624 23.4001V11.9808C92.6624 11.4285 93.1101 10.9808 93.6624 10.9808H95.0928C95.6172 10.9808 96.0526 11.3859 96.0902 11.909L96.2342 13.9078ZM100.005 10.8193C100.171 10.8523 100.275 11.0073 100.272 11.1767L100.224 13.7529C100.219 13.9933 100.005 14.1764 99.7655 14.1569C99.707 14.1521 99.6462 14.1476 99.5829 14.1434C99.3431 14.1186 99.124 14.1062 98.9255 14.1062C98.4212 14.1062 97.983 14.1723 97.6109 14.3046C97.2471 14.4287 96.9412 14.6147 96.6931 14.8627C96.4533 15.1108 96.2714 15.4126 96.1474 15.7681C96.0317 16.1236 95.9655 16.5288 95.949 16.9835L95.2296 16.7603C95.2296 15.8921 95.3165 15.0942 95.4901 14.3666C95.6637 13.6308 95.9159 12.99 96.2466 12.4443C96.5856 11.8986 96.999 11.4769 97.4869 11.1792C97.9747 10.8816 98.5328 10.7328 99.1612 10.7328C99.3596 10.7328 99.5622 10.7493 99.7689 10.7824C99.8539 10.7926 99.9326 10.8049 100.005 10.8193Z" fill="#24292f"/>
+  <path d="M85.6297 24.6482C84.5879 24.6482 83.6536 24.4828 82.8268 24.1521C82 23.8131 81.2972 23.3459 80.7184 22.7506C80.1479 22.1553 79.7097 21.4649 79.4038 20.6794C79.0978 19.8857 78.9449 19.0423 78.9449 18.1494V17.6533C78.9449 16.6363 79.0896 15.7061 79.3789 14.8627C79.6683 14.0194 80.0817 13.2876 80.6192 12.6675C81.1649 12.0474 81.8263 11.572 82.6036 11.2413C83.3808 10.9023 84.2572 10.7328 85.2329 10.7328C86.1837 10.7328 87.0271 10.8899 87.7629 11.204C88.4988 11.5182 89.1148 11.9647 89.6109 12.5435C90.1152 13.1223 90.4956 13.8168 90.7519 14.6271C91.0082 15.4291 91.1364 16.3221 91.1364 17.306V18.7943H80.4704V16.413H87.6265V16.1402C87.6265 15.6441 87.5356 15.2017 87.3537 14.8131C87.18 14.4163 86.9154 14.1021 86.5599 13.8706C86.2044 13.639 85.7496 13.5233 85.1956 13.5233C84.7244 13.5233 84.3192 13.6266 83.9802 13.8333C83.6412 14.04 83.3642 14.3294 83.1493 14.7015C82.9426 15.0736 82.7855 15.5118 82.678 16.0162C82.5787 16.5122 82.5291 17.058 82.5291 17.6533V18.1494C82.5291 18.6868 82.6036 19.1829 82.7524 19.6376C82.9095 20.0924 83.1286 20.4851 83.4097 20.8159C83.6991 21.1466 84.0464 21.4029 84.4515 21.5848C84.8649 21.7667 85.3321 21.8577 85.853 21.8577C86.4979 21.8577 87.0973 21.7336 87.6513 21.4856C88.0767 21.2916 88.4572 21.0243 88.7927 20.6836C88.9653 20.5083 89.2532 20.4959 89.4199 20.6769L90.6216 21.9816C90.7485 22.1194 90.7642 22.328 90.6457 22.4731C90.3897 22.7867 90.0696 23.09 89.6853 23.3831C89.2057 23.7552 88.627 24.0611 87.949 24.3009C87.271 24.5324 86.4979 24.6482 85.6297 24.6482Z" fill="#24292f"/>
+  <path d="M73.5741 21.4732V6.35014C73.5741 5.79786 74.0219 5.35014 74.5741 5.35014H76.1708C76.7231 5.35014 77.1708 5.79786 77.1708 6.35014V23.4001C77.1708 23.9524 76.7231 24.4001 76.1708 24.4001H74.8185C74.3133 24.4001 73.8875 24.0235 73.8259 23.5221L73.5741 21.4732ZM65.0909 17.8517V17.5913C65.0909 16.566 65.2067 15.6358 65.4382 14.8007C65.6697 13.9574 66.0087 13.2339 66.4552 12.6303C66.9017 12.0267 67.4515 11.5596 68.1047 11.2289C68.7579 10.8981 69.502 10.7328 70.3371 10.7328C71.1226 10.7328 71.8089 10.8981 72.3959 11.2289C72.9912 11.5596 73.4956 12.0309 73.909 12.6427C74.3307 13.2463 74.6697 13.9615 74.926 14.7883C75.1823 15.6069 75.3684 16.504 75.4841 17.4796V18.0501C75.3684 18.9845 75.1823 19.8526 74.926 20.6546C74.6697 21.4567 74.3307 22.1595 73.909 22.763C73.4956 23.3583 72.9912 23.8214 72.3959 24.1521C71.8006 24.4828 71.1061 24.6482 70.3123 24.6482C69.4772 24.6482 68.7331 24.4787 68.0799 24.1397C67.435 23.8007 66.8893 23.3253 66.4428 22.7134C66.0046 22.1016 65.6697 21.3822 65.4382 20.5554C65.2067 19.7286 65.0909 18.8274 65.0909 17.8517ZM68.6628 17.5913V17.8517C68.6628 18.4057 68.7042 18.9224 68.7868 19.402C68.8778 19.8816 69.0225 20.3074 69.2209 20.6794C69.4276 21.0432 69.6922 21.3285 70.0147 21.5352C70.3454 21.7336 70.7464 21.8329 71.2177 21.8329C71.8295 21.8329 72.3339 21.6964 72.7308 21.4236C73.1277 21.1425 73.4295 20.758 73.6362 20.2702C73.8511 19.7823 73.9752 19.2201 74.0082 18.5834V16.9587C73.9834 16.4378 73.909 15.9707 73.785 15.5573C73.6692 15.1356 73.4956 14.7759 73.2641 14.4783C73.0408 14.1806 72.7597 13.9491 72.4207 13.7837C72.09 13.6184 71.6973 13.5357 71.2425 13.5357C70.7795 13.5357 70.3826 13.6432 70.0519 13.8582C69.7212 14.0649 69.4524 14.3501 69.2457 14.7139C69.0473 15.0777 68.8985 15.5077 68.7992 16.0038C68.7083 16.4916 68.6628 17.0207 68.6628 17.5913Z" fill="#24292f"/>
+  <path d="M62.2053 5.35014C62.7576 5.35014 63.2053 5.79786 63.2053 6.35014V23.4001C63.2053 23.9524 62.7576 24.4001 62.2053 24.4001H60.621C60.0687 24.4001 59.621 23.9524 59.621 23.4001V6.35014C59.621 5.79786 60.0687 5.35014 60.621 5.35014H62.2053Z" fill="#24292f"/>
+  <path d="M55.9912 10.9808C56.5435 10.9808 56.9912 11.4285 56.9912 11.9808V23.4002C56.9912 23.9524 56.5435 24.4002 55.9912 24.4002H54.407C53.8547 24.4002 53.4069 23.9524 53.4069 23.4002V11.9808C53.4069 11.4285 53.8547 10.9808 54.4069 10.9808H55.9912ZM53.1837 7.48335C53.1837 6.96245 53.3656 6.53251 53.7294 6.19351C54.0932 5.85451 54.581 5.68501 55.1929 5.68501C55.7965 5.68501 56.2802 5.85451 56.644 6.19351C57.016 6.53251 57.2021 6.96245 57.2021 7.48335C57.2021 8.00425 57.016 8.4342 56.644 8.7732C56.2802 9.11219 55.7965 9.28169 55.1929 9.28169C54.581 9.28169 54.0932 9.11219 53.7294 8.7732C53.3656 8.4342 53.1837 8.00425 53.1837 7.48335Z" fill="#24292f"/>
+  <path d="M47.4285 21.1879V11.9808C47.4285 11.4285 47.8762 10.9808 48.4285 10.9808H50.0004C50.5527 10.9808 51.0004 11.4285 51.0004 11.9808V23.4001C51.0004 23.9524 50.5527 24.4001 50.0004 24.4001H48.5759C48.049 24.4001 47.6125 23.9914 47.578 23.4656L47.4285 21.1879ZM47.8254 18.4346L48.8796 18.4098C48.8796 19.3028 48.7762 20.1337 48.5695 20.9027C48.3628 21.6634 48.0528 22.3248 47.6394 22.8871C47.2259 23.441 46.705 23.8751 46.0767 24.1893C45.4483 24.4952 44.7083 24.6482 43.8566 24.6482C43.2035 24.6482 42.5999 24.5572 42.0459 24.3753C41.5002 24.1852 41.0289 23.8916 40.632 23.4948C40.2434 23.0896 39.9375 22.5729 39.7143 21.9445C39.4993 21.3078 39.3918 20.543 39.3918 19.65V11.9808C39.3918 11.4285 39.8395 10.9808 40.3918 10.9808H41.9637C42.516 10.9808 42.9637 11.4285 42.9637 11.9808V19.6748C42.9637 20.0717 43.0092 20.4066 43.1001 20.6794C43.1993 20.9523 43.3357 21.1755 43.5094 21.3492C43.683 21.5228 43.8856 21.6468 44.1171 21.7212C44.3569 21.7956 44.6215 21.8329 44.9108 21.8329C45.6467 21.8329 46.2255 21.684 46.6472 21.3864C47.0771 21.0887 47.3789 20.6836 47.5525 20.1709C47.7344 19.65 47.8254 19.0713 47.8254 18.4346Z" fill="#24292f"/>
+  <path d="M31.0693 16.475H26.4309L26.4061 13.9202H30.3004C30.9867 13.9202 31.5489 13.8333 31.9871 13.6597C32.4253 13.4778 32.7519 13.2174 32.9669 12.8784C33.1901 12.5311 33.3018 12.1094 33.3018 11.6133C33.3018 11.0511 33.1943 10.5963 32.9793 10.2491C32.7726 9.9018 32.446 9.64962 31.9995 9.49253C31.5613 9.33543 30.9949 9.25688 30.3004 9.25688H27.7207V24.4001H25.6C24.7163 24.4001 24 23.6838 24 22.8001V7.94233C24 7.05868 24.7163 6.34233 25.6 6.34233H30.3004C31.3505 6.34233 32.2889 6.44155 33.1157 6.63999C33.9508 6.83842 34.6577 7.14021 35.2365 7.54536C35.8153 7.9505 36.2576 8.46313 36.5636 9.08325C36.8695 9.6951 37.0225 10.4227 37.0225 11.2661C37.0225 12.0102 36.853 12.6965 36.514 13.3249C36.1832 13.9532 35.6582 14.4659 34.9389 14.8627C34.2278 15.2596 33.2976 15.4787 32.1483 15.5201L31.0693 16.475ZM30.9081 24.4001H25.4139L26.8649 21.498H30.9081C31.5613 21.498 32.0946 21.3946 32.508 21.1879C32.9214 20.973 33.2273 20.6836 33.4258 20.3198C33.6242 19.956 33.7234 19.5384 33.7234 19.0671C33.7234 18.538 33.6325 18.0791 33.4506 17.6905C33.277 17.3019 32.9958 17.0042 32.6072 16.7975C32.2186 16.5825 31.706 16.475 31.0693 16.475H27.4851L27.5099 13.9202H31.9747L32.8305 14.9248C33.9301 14.9082 34.8148 15.1025 35.4846 15.5077C36.1626 15.9045 36.6545 16.4213 36.9604 17.058C37.2746 17.6946 37.4317 18.3767 37.4317 19.1043C37.4317 20.2619 37.1796 21.2375 36.6752 22.0313C36.1708 22.8168 35.4308 23.408 34.4552 23.8048C33.4878 24.2017 32.3054 24.4001 30.9081 24.4001Z" fill="#24292f"/>
+  <path d="M19.6347 6.68961C18.7176 5.86504 17.8901 5.96828 17.2246 6.68961L16.7772 7.17436L19.2579 9.649L19.6338 9.30177C20.2994 8.58044 20.6994 7.70725 19.6338 6.68961H19.6347Z" fill="#24292f"/>
+  <path d="M4.20431 20.0879L3.06538 22.05L2.20955 23.8797C2.09955 24.1149 2.34368 24.3594 2.57898 24.2492L4.4076 23.3931L6.3643 22.2491L6.36245 22.2473L6.36755 22.2459L4.20431 20.0879Z" fill="#24292f"/>
+  <path d="M6.6502 21.4986L7.01731 21.8667L7.14309 21.7931C7.14634 21.7912 7.14959 21.7884 7.15237 21.7857L18.778 10.1601L18.3969 9.78049L6.6502 21.4986Z" fill="#24292f"/>
+  <path d="M4.66564 19.2967C4.66286 19.2994 4.66054 19.3027 4.65822 19.3059L4.58442 19.4332L6.15638 21.006L17.9036 9.28741L16.2889 7.67206L4.66518 19.2967H4.66564Z" fill="#24292f"/>
+  <path d="M6.38396 12.4271L17.7056 23.7684C18.3906 24.4545 19.5012 24.4545 20.1863 23.7684C20.8713 23.0823 20.8713 21.9697 20.1863 21.2836L8.86605 9.9437L6.38396 12.4271Z" fill="#24292f"/>
+  <path d="M9.46336 5.46387C8.87765 5.98102 8.10861 6.29492 7.26671 6.29492C6.91537 6.29492 6.57657 6.24029 6.25865 6.1389C6.22523 6.12825 6.18857 6.13658 6.16351 6.16158L1.43511 10.8979C1.25503 11.0785 1.25503 11.3711 1.43511 11.5516L3.52409 13.6443C3.70416 13.8249 3.99656 13.8249 4.1771 13.6443L8.37037 9.44692L8.36852 9.44507L10.6399 7.16996C10.82 6.9894 10.82 6.69679 10.6399 6.51623L9.59192 5.46711C9.55665 5.43192 9.50049 5.431 9.4629 5.46387H9.46336Z" fill="#24292f"/>
 </svg>
diff --git a/spx-gui/src/components/ui/UIButton.vue b/spx-gui/src/components/ui/UIButton.vue
index 01fc311673..17405677d9 100644
--- a/spx-gui/src/components/ui/UIButton.vue
+++ b/spx-gui/src/components/ui/UIButton.vue
@@ -132,19 +132,19 @@ defineExpose({
 
 // variant
 .variant-shadow {
-  padding: 0 0 4px 0;
-
-  .content {
-    box-shadow: 0 4px var(--ui-button-shadow-color);
-  }
+  padding: 0;
 
-  &:not(:disabled):active,
-  &.loading {
-    padding-bottom: 0;
-    .content {
-      box-shadow: none;
-    }
-  }
+  // .content {
+  //   box-shadow: 0 4px var(--ui-button-shadow-color);
+  // }
+
+  // &:not(:disabled):active,
+  // &.loading {
+  //   padding-bottom: 0;
+  //   .content {
+  //     box-shadow: none;
+  //   }
+  // }
 }
 
 .variant-flat {
@@ -190,7 +190,7 @@ defineExpose({
 
 .color-boring {
   --ui-button-color: var(--ui-color-text);
-  --ui-button-bg-color: var(--ui-color-grey-300);
+  --ui-button-bg-color: var(--ui-color-grey-100);
   --ui-button-shadow-color: var(--ui-color-grey-600);
 
   &:hover:not(:active, :disabled) {
diff --git a/spx-gui/src/components/ui/UIButtonGroup.vue b/spx-gui/src/components/ui/UIButtonGroup.vue
index 46723d412e..ac4678a1ed 100644
--- a/spx-gui/src/components/ui/UIButtonGroup.vue
+++ b/spx-gui/src/components/ui/UIButtonGroup.vue
@@ -46,5 +46,9 @@ provide(variantInjectionKey, () => props.variant)
 <style scoped lang="scss">
 .ui-button-group-container {
   display: flex;
+  padding: 2px;
+  height: 32px;
+  border-radius: 6px;
+  background-color: var(--ui-color-grey-400);
 }
 </style>
diff --git a/spx-gui/src/components/ui/UIButtonGroupItem.vue b/spx-gui/src/components/ui/UIButtonGroupItem.vue
index d9e717e3c7..e8c84a3e46 100644
--- a/spx-gui/src/components/ui/UIButtonGroupItem.vue
+++ b/spx-gui/src/components/ui/UIButtonGroupItem.vue
@@ -36,7 +36,7 @@ const handleClick = () => {
 
 <style scoped lang="scss">
 .ui-button-group-item {
-  height: var(--ui-line-height-2);
+  height: 28px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -44,20 +44,20 @@ const handleClick = () => {
 
   &.variant {
     &-primary {
-      background: var(--ui-color-grey-300);
+      background-color: var(--ui-color-grey-400);
       color: var(--ui-color-grey-1000);
       &.active {
-        background: var(--ui-color-primary-200);
-        color: var(--ui-color-primary-400);
+        background-color: var(--ui-color-grey-100);
+        color: var(--ui-color-grey-1000);
       }
     }
 
     &-secondary {
-      background-color: #47d8e4;
-      color: var(--ui-color-grey-200);
+      background-color: var(--ui-color-grey-400);
+      color: var(--ui-color-grey-1000);
       &.active {
-        background-color: var(--ui-color-grey-200);
-        color: var(--ui-color-turquoise-600);
+        background-color: var(--ui-color-grey-100);
+        color: var(--ui-color-grey-1000);
       }
     }
   }
@@ -66,19 +66,20 @@ const handleClick = () => {
     min-width: 32px;
   }
   &.type-text {
-    padding: 0 12px;
+    padding: 0 5px;
   }
 
   &.active {
     cursor: default;
+    border-radius: 4px;
   }
 
-  &:first-child {
-    border-radius: 12px 0px 0px 12px;
-  }
+  // &:first-child {
+  //   border-radius: 12px 0px 0px 12px;
+  // }
 
-  &:last-child {
-    border-radius: 0px 12px 12px 0px;
-  }
+  // &:last-child {
+  //   border-radius: 0px 12px 12px 0px;
+  // }
 }
 </style>
diff --git a/spx-gui/src/components/ui/block-items/UIBlockItem.vue b/spx-gui/src/components/ui/block-items/UIBlockItem.vue
index ce7adafa47..9c531530f6 100644
--- a/spx-gui/src/components/ui/block-items/UIBlockItem.vue
+++ b/spx-gui/src/components/ui/block-items/UIBlockItem.vue
@@ -94,16 +94,18 @@ const style = computed(() => ({
   }
 
   &.block-item-standard {
-    border-color: var(--ui-color-grey-300);
-    background-color: var(--ui-color-grey-300);
+    border-width: 1px;
+    border-color: var(--ui-color-grey-400);
+    background-color: var(--ui-color-grey-100);
 
     // About `.drag-and-drop-disable-hover`: see `src/utils/drag-and-drop.ts`
     &.block-item-interactive:hover:not(.drag-and-drop-disable-hover):not(.block-item-active) {
       border-color: var(--ui-color-grey-400);
-      background-color: var(--ui-color-grey-400);
+      background-color: var(--ui-color-grey-200);
     }
 
     &.block-item-active {
+      border-width: 2px;
       border-color: var(--color-outline);
       background-color: var(--color-background);
     }
diff --git a/spx-gui/src/components/ui/icons/arrow-down.svg b/spx-gui/src/components/ui/icons/arrow-down.svg
index 5c4f364329..169396328d 100644
--- a/spx-gui/src/components/ui/icons/arrow-down.svg
+++ b/spx-gui/src/components/ui/icons/arrow-down.svg
@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
-  <path d="M7.13182 10.2639L4.2119 6.80119C3.72124 6.21919 4.13719 5.33325 4.90119 5.33325H11.0985C11.8625 5.33325 12.2784 6.21985 11.7877 6.80119L8.86783 10.2639C8.41516 10.8006 7.58449 10.8006 7.13182 10.2639Z" fill="currentColor"/>
-</svg>
\ No newline at end of file
+<svg width="6" height="16" viewBox="0 0 6 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.99838 10.0002L0.169922 7.17184L1.11274 6.229L2.99838 8.11464L4.88398 6.229L5.82677 7.17184L2.99838 10.0002Z" fill="#24292F"/>
+</svg>
diff --git a/spx-gui/src/components/ui/icons/file.svg b/spx-gui/src/components/ui/icons/file.svg
index 24d91fd6ea..04f2a04595 100644
--- a/spx-gui/src/components/ui/icons/file.svg
+++ b/spx-gui/src/components/ui/icons/file.svg
@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
-  <path d="M20.5996 16C20.8205 16 21 16.1795 21 16.4004V18C21 19.1046 20.1046 20 19 20H5C3.89543 20 3 19.1046 3 18V16.4004C3 16.1795 3.17948 16 3.40039 16H20.5996ZM9.58594 4C9.8511 4.00004 10.1055 4.10547 10.293 4.29297L12.707 6.70703C12.8945 6.89453 13.1489 6.99996 13.4141 7H19C20.1046 7 21 7.89543 21 9V14.5996C21 14.8205 20.8205 15 20.5996 15H3.40039C3.17948 15 3 14.8205 3 14.5996V6C3 4.89543 3.89543 4 5 4H9.58594Z" fill="currentColor"/>
-</svg>
\ No newline at end of file
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.6084 1.77051C7.00493 1.77063 7.39605 1.8695 7.74512 2.05762C8.09163 2.24443 8.38686 2.51387 8.60449 2.8418L9.2793 3.8418L9.28418 3.84961C9.37032 3.98023 9.4879 4.08753 9.62598 4.16113C9.76424 4.23474 9.91955 4.27199 10.0762 4.27051H16.667C17.3023 4.27059 17.9121 4.52343 18.3613 4.97266C18.8104 5.42193 19.0625 6.03173 19.0625 6.66699V15C19.0625 15.6353 18.8105 16.245 18.3613 16.6943C17.9121 17.1436 17.3023 17.3954 16.667 17.3955H3.33301C2.69771 17.3954 2.0879 17.1436 1.63867 16.6943C1.18947 16.245 0.9375 15.6353 0.9375 15V4.16699C0.9375 3.53173 1.18957 2.92193 1.63867 2.47266C2.0879 2.02343 2.69771 1.77059 3.33301 1.77051H6.6084ZM2.39551 15C2.39551 15.2486 2.49421 15.4873 2.66992 15.6631C2.84566 15.8388 3.08448 15.9374 3.33301 15.9375H16.667C16.9155 15.9374 17.1543 15.8388 17.3301 15.6631C17.5058 15.4873 17.6045 15.2486 17.6045 15V9.0625H2.39551V15ZM3.33301 3.22949C3.08456 3.22958 2.84565 3.32729 2.66992 3.50293C2.49411 3.67875 2.39551 3.91835 2.39551 4.16699V7.60449H17.6045V6.66699C17.6045 6.41835 17.5059 6.17875 17.3301 6.00293C17.1544 5.82729 16.9154 5.72958 16.667 5.72949H10.083C9.68507 5.73215 9.29276 5.63524 8.94141 5.44824C8.59002 5.26111 8.29029 4.98894 8.07031 4.65723L7.39551 3.6582L7.39062 3.65039C7.30537 3.52117 7.18899 3.4153 7.05273 3.3418C6.91626 3.2683 6.7634 3.22957 6.6084 3.22949H3.33301Z" fill="#24292F"/>
+</svg>
diff --git a/spx-gui/src/components/ui/icons/redo.svg b/spx-gui/src/components/ui/icons/redo.svg
index 2ab09642de..02e8765c95 100644
--- a/spx-gui/src/components/ui/icons/redo.svg
+++ b/spx-gui/src/components/ui/icons/redo.svg
@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
-  <path d="M13 4.99092C13 4.09592 14.094 3.66096 14.709 4.31196L20.637 10.582C21.121 11.094 21.121 11.894 20.637 12.406L14.709 18.676C14.094 19.326 13 18.891 13 17.997V14.4919C5.437 14.4919 4.93602 16.962 4.96802 19.529C4.97402 20.019 4.32501 20.1811 4.08301 19.7561C3.46701 18.6751 3 17.1999 3 15.4909C3 8.99592 10 8.49702 13 8.49702V4.99092Z" fill="currentColor"/>
-</svg>
\ No newline at end of file
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.9844 2.81676C12.269 2.53276 12.731 2.53276 13.0156 2.81676L17.1826 6.98375C17.4673 7.26845 17.4672 7.7312 17.1826 8.01598L13.0156 12.182C12.7309 12.4668 12.2691 12.4668 11.9844 12.182C11.6999 11.8972 11.6997 11.4354 11.9844 11.1507L14.9053 8.22887H7.91699C6.89492 8.22887 5.91418 8.63513 5.19141 9.35777C4.46869 10.0805 4.06259 11.0613 4.0625 12.0834C4.06252 12.5893 4.1629 13.0905 4.35645 13.558C4.5501 14.0254 4.83365 14.4511 5.19141 14.8089C5.91418 15.5316 6.89492 15.9369 7.91699 15.9369H10.833C11.2356 15.9369 11.5622 16.2639 11.5625 16.6664C11.5625 17.0691 11.2357 17.3959 10.833 17.3959H7.91699C6.50803 17.3959 5.15644 16.8355 4.16016 15.8392C3.66704 15.346 3.27569 14.76 3.00879 14.1156C2.74203 13.4713 2.60452 12.7807 2.60449 12.0834C2.60459 10.6745 3.16395 9.32273 4.16016 8.32652C5.15642 7.33039 6.50815 6.77086 7.91699 6.77086H14.9053L11.9844 3.84898C11.6998 3.56421 11.6997 3.10146 11.9844 2.81676Z" fill="currentColor" />
+</svg>
diff --git a/spx-gui/src/components/ui/icons/tutorial.svg b/spx-gui/src/components/ui/icons/tutorial.svg
index 5e3732b77f..5d9423ab5a 100644
--- a/spx-gui/src/components/ui/icons/tutorial.svg
+++ b/spx-gui/src/components/ui/icons/tutorial.svg
@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
-  <path d="M19 3C19.5523 3 20 3.44772 20 4V20C20 20.5523 19.5523 21 19 21H6C4.89543 21 4 20.1046 4 19V6C4 4.34315 5.34315 3 7 3H19ZM7 16C6.44772 16 6 16.4477 6 17V18C6 18.5523 6.44772 19 7 19H17.5996C17.8205 19 18 18.8205 18 18.5996V16.4004C18 16.1795 17.8205 16 17.5996 16H7ZM15.7148 4.70996C15.592 4.33441 15.0643 4.33439 14.9414 4.70996L14.4951 6.08789C14.3739 6.45956 14.0824 6.75106 13.7139 6.87305L12.3506 7.3252C11.9783 7.44915 11.9783 7.97957 12.3506 8.10352L13.7139 8.55566C14.0825 8.6777 14.374 8.96898 14.4951 9.34082L14.9414 10.7178C15.0641 11.0938 15.5922 11.0938 15.7148 10.7178L16.1611 9.34082C16.2822 8.96912 16.573 8.67779 16.9414 8.55566L18.3047 8.10352C18.6777 7.97987 18.6777 7.44889 18.3047 7.3252L16.9414 6.87305C16.5731 6.75096 16.2823 6.45943 16.1611 6.08789L15.7148 4.70996Z" fill="currentColor"/>
-</svg>
\ No newline at end of file
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.9033 2.19043C11.306 2.19043 11.6328 2.51721 11.6328 2.91992C11.6328 3.32262 11.306 3.64941 10.9033 3.64941H4.88477C4.39466 3.64948 3.95621 3.78617 3.66309 3.98926C3.37269 4.19061 3.29903 4.39568 3.29883 4.52344V13.1416C3.78865 12.895 4.35044 12.7676 4.91406 12.7676H16.8408V12.2041C16.8408 11.8014 17.1676 11.4746 17.5703 11.4746C17.9729 11.4748 18.2988 11.8015 18.2988 12.2041V16.3711C18.2988 16.827 18.0619 17.2106 17.7393 17.458C17.4208 17.7021 17.0211 17.8193 16.6328 17.8193H4.91406C4.15274 17.8193 3.39481 17.5889 2.8125 17.1426C2.33328 16.7752 1.98902 16.2681 1.87891 15.6904C1.85498 15.6183 1.84085 15.5411 1.84082 15.4609V4.52344C1.84102 3.8006 2.25601 3.18987 2.83301 2.79004C3.40788 2.39182 4.14751 2.1905 4.88477 2.19043H10.9033ZM4.91406 14.2256C4.43235 14.2256 3.99696 14.3742 3.7002 14.6016C3.40763 14.8258 3.29883 15.083 3.29883 15.2939L3.30371 15.374C3.32835 15.5675 3.44425 15.7881 3.7002 15.9844C3.99696 16.2118 4.4322 16.3604 4.91406 16.3604H16.6328C16.7315 16.3603 16.8035 16.3308 16.8408 16.3066V14.2256H4.91406ZM15.9102 3.125C16.0403 3.12508 16.1664 3.17084 16.2666 3.25391C16.3668 3.33711 16.4349 3.45308 16.459 3.58105L16.8281 5.5293C16.8466 5.62657 16.8939 5.7171 16.9639 5.78711C17.0338 5.85691 17.1236 5.90348 17.2207 5.92188L19.1689 6.29102L19.2627 6.31641C19.353 6.35028 19.4337 6.40747 19.4961 6.48242C19.5794 6.58267 19.6259 6.70953 19.626 6.83984C19.626 6.97025 19.5794 7.09694 19.4961 7.19727C19.4337 7.27235 19.3531 7.32935 19.2627 7.36328L19.1689 7.38965L17.2207 7.75781C17.1235 7.77622 17.0339 7.82367 16.9639 7.89355C16.8938 7.96362 16.8465 8.05402 16.8281 8.15137L16.459 10.0996C16.4349 10.2276 16.3668 10.3436 16.2666 10.4268C16.1664 10.5097 16.0402 10.5556 15.9102 10.5557C15.7799 10.5556 15.653 10.5099 15.5527 10.4268C15.4777 10.3643 15.4206 10.2828 15.3867 10.1924L15.3604 10.0996L14.9922 8.15137C14.9738 8.05408 14.9264 7.9636 14.8564 7.89355C14.7865 7.82372 14.6967 7.77621 14.5996 7.75781L12.6504 7.38965C12.5226 7.36554 12.4064 7.29736 12.3232 7.19727C12.2401 7.09699 12.1943 6.97013 12.1943 6.83984C12.1944 6.70957 12.24 6.58266 12.3232 6.48242C12.4064 6.38238 12.5226 6.3151 12.6504 6.29102L14.5996 5.92188C14.6967 5.90347 14.7865 5.85693 14.8564 5.78711C14.9264 5.71712 14.9737 5.62654 14.9922 5.5293L15.3604 3.58105C15.3844 3.45313 15.4526 3.33711 15.5527 3.25391C15.653 3.17064 15.7798 3.12507 15.9102 3.125Z" fill="#24292F"/>
+</svg>
diff --git a/spx-gui/src/components/ui/icons/undo.svg b/spx-gui/src/components/ui/icons/undo.svg
index 42cfa6dfd9..13b84aab66 100644
--- a/spx-gui/src/components/ui/icons/undo.svg
+++ b/spx-gui/src/components/ui/icons/undo.svg
@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
-  <path d="M11 8.49611C14 8.49611 21 8.99601 21 15.49C21 17.198 20.532 18.6729 19.917 19.7549C19.675 20.1799 19.0259 20.0181 19.0319 19.5281C19.0649 16.9611 18.563 14.491 11 14.491V17.9961C11 18.8911 9.90598 19.3261 9.29098 18.6751L3.363 12.405C2.879 11.893 2.879 11.0931 3.363 10.5811L9.29098 4.31105C9.90598 3.66105 11 4.09601 11 4.99001V8.49611Z" fill="currentColor"/>
-</svg>
\ No newline at end of file
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.98383 2.81684C7.26851 2.53237 7.73134 2.53244 8.01606 2.81684C8.30069 3.10154 8.3006 3.56432 8.01606 3.84907L5.09418 6.77094H12.0834C12.7808 6.77099 13.4714 6.90846 14.1157 7.17524C14.76 7.44215 15.3461 7.83348 15.8393 8.32661C16.3325 8.8198 16.7237 9.40588 16.9907 10.0502C17.2576 10.6947 17.3959 11.3859 17.3959 12.0834C17.3959 12.7808 17.2575 13.4714 16.9907 14.1157C16.7237 14.7602 16.3326 15.346 15.8393 15.8393C15.346 16.3326 14.7602 16.7237 14.1157 16.9907C13.4713 17.2575 12.7809 17.3959 12.0834 17.3959H9.16645C8.76388 17.3958 8.43701 17.069 8.43696 16.6665C8.43715 16.264 8.76396 15.9371 9.16645 15.937H12.0834C12.5894 15.9369 13.0906 15.8366 13.5581 15.643C14.0255 15.4493 14.4503 15.1658 14.8081 14.8081C15.1658 14.4503 15.4493 14.0254 15.643 13.5581C15.8366 13.0907 15.9369 12.5893 15.937 12.0834C15.9369 11.5775 15.8366 11.0762 15.643 10.6088C15.4493 10.1414 15.1658 9.71565 14.8081 9.35786C14.4503 9.00025 14.0253 8.71651 13.5581 8.5229C13.0907 8.32937 12.5893 8.229 12.0834 8.22895H5.09418L8.01606 11.1508C8.30031 11.4355 8.30033 11.8974 8.01606 12.1821C7.7313 12.4668 7.26859 12.4668 6.98383 12.1821L2.81684 8.01606C2.53244 7.73135 2.53238 7.26851 2.81684 6.98384L6.98383 2.81684Z" fill="currentColor"/>
+</svg>
diff --git a/spx-gui/src/components/ui/tab/UITab.vue b/spx-gui/src/components/ui/tab/UITab.vue
index a67bed6895..622b9e48ba 100644
--- a/spx-gui/src/components/ui/tab/UITab.vue
+++ b/spx-gui/src/components/ui/tab/UITab.vue
@@ -30,25 +30,17 @@ function handleClick() {
 
 <style lang="scss" scoped>
 .ui-tab {
-  padding: 9px var(--ui-gap-middle);
+  padding: 9px 0;
   display: flex;
   align-items: center;
   font-size: 16px;
-  color: var(--ui-color-grey-100);
-  opacity: 0.7;
-  background-color: var(--ui-tab-color-main);
+  color: var(--ui-color-grey-800);
   cursor: pointer;
-  transition: opacity 0.2s;
+  transition: color 0.2s;
 
   &.active {
-    opacity: 1;
-  }
-
-  &:first-child {
-    border-top-left-radius: var(--ui-border-radius-3);
-  }
-  &:last-child {
-    border-top-right-radius: var(--ui-border-radius-3);
+    color: var(--ui-color-grey-1000);
+    border-bottom: 2px solid var(--ui-color-grey-1000);
   }
 }
 </style>
diff --git a/spx-gui/src/components/ui/tab/UITabs.vue b/spx-gui/src/components/ui/tab/UITabs.vue
index 361ef65b88..3e571ad053 100644
--- a/spx-gui/src/components/ui/tab/UITabs.vue
+++ b/spx-gui/src/components/ui/tab/UITabs.vue
@@ -51,6 +51,8 @@ provide(
 
 <style lang="scss" scoped>
 .ui-tabs {
+  padding: 0 8px;
   display: flex;
+  gap: 24px;
 }
 </style>
diff --git a/spx-gui/src/components/ui/tokens/colors.ts b/spx-gui/src/components/ui/tokens/colors.ts
index 5272bdb514..6ebd829cb5 100644
--- a/spx-gui/src/components/ui/tokens/colors.ts
+++ b/spx-gui/src/components/ui/tokens/colors.ts
@@ -82,16 +82,16 @@ export const grey = {
 export const primary = turquoise
 
 export const sprite = {
-  ...yellow,
-  bgSelected: yellow[200]
+  ...turquoise,
+  bgSelected: turquoise[200]
 }
 export const sound = {
-  ...blue,
-  bgSelected: blue[200]
+  ...turquoise,
+  bgSelected: turquoise[200]
 }
 export const stage = {
-  ...blue,
-  bgSelected: blue[200]
+  ...turquoise,
+  bgSelected: turquoise[200]
 }
 
 export const danger = red
diff --git a/spx-gui/src/components/ui/tokens/index.ts b/spx-gui/src/components/ui/tokens/index.ts
index 522c3d69f9..730743b53d 100644
--- a/spx-gui/src/components/ui/tokens/index.ts
+++ b/spx-gui/src/components/ui/tokens/index.ts
@@ -9,8 +9,7 @@ export const fontSize = {
 
 export const fontFamily = {
   // see definition for `AlibabaHealthB` in global.scss
-  main: `AlibabaHealthB,
-  -apple-system,
+  main: `-apple-system,
   BlinkMacSystemFont,
   'Segoe UI',
   Roboto,
@@ -27,14 +26,14 @@ export const fontFamily = {
 
 export const borderRadius = {
   1: '8px',
-  2: '12px',
-  3: '20px'
+  2: '8px',
+  3: '8px'
 } as const
 
 export const boxShadow = {
   small: '0px 2px 8px 0px rgba(51, 51, 51, 0.08)',
   big: '0px 4px 24px 0px rgba(36, 41, 47, 0.08)',
-  diffusion: '0px 4px 12px 0px #D0F2F8'
+  diffusion: '0 2px 12px 0 rgba(36, 41, 47, 0.05)'
 } as const
 
 export const lineHeight = {
diff --git a/spx-gui/src/pages/editor/index.vue b/spx-gui/src/pages/editor/index.vue
index 10fb6617f0..c5ff99fa67 100644
--- a/spx-gui/src/pages/editor/index.vue
+++ b/spx-gui/src/pages/editor/index.vue
@@ -1,10 +1,10 @@
 <template>
   <!-- TODO: review this background color and promote it to a shared UI token if it becomes reused. -->
-  <section class="flex min-h-full w-full flex-col bg-[#e9fcff]">
+  <section class="flex min-h-full w-full flex-col bg-[#f1f5f7]">
     <header class="flex-[0_0_auto]">
       <EditorNavbar :project="state?.project ?? null" :state="state" />
     </header>
-    <main class="flex-[1_1_0] flex gap-middle p-middle">
+    <main class="flex-[1_1_0] flex gap-middle p-middle pt-2">
       <UIDetailedLoading v-if="allQueryRet.isLoading.value" :percentage="allQueryRet.progress.value.percentage">
         <span>{{ $t(allQueryRet.progress.value.desc ?? { en: 'Loading...', zh: '加载中...' }) }}</span>
       </UIDetailedLoading>