feat(app): v2 desktop UI improvements (#29689)

Co-authored-by: Brendan Allan <git@brendonovich.dev> Co-authored-by: Brendan Allan <14191578+Brendonovich@users.noreply.github.com>
2026-06-02 00:39:09 +05:30 · 2026-06-02 00:39:09 +05:30 · 363d6d1a26
commit 363d6d1a26
parent 2bf85b8479
80 changed files with 3575 additions and 575 deletions
--- a/packages/ui/src/components/select-v2.css
+++ b/packages/ui/src/components/select-v2.css
@ -0,0 +1,87 @@
+[data-component="select"][data-trigger-style="settings-v2"] [data-slot="select-select-trigger"] {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 4px;
+  width: fit-content;
+  height: 24px;
+  padding: 4px 4px 4px 8px;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--v2-text-text-base);
+  cursor: pointer;
+}
+
+[data-component="select"][data-trigger-style="settings-v2"] [data-slot="select-select-trigger-value"] {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: fit-content;
+  height: 13px;
+  padding: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-style: normal;
+  font-weight: 530;
+  font-size: 13px;
+  line-height: 1;
+  letter-spacing: -0.04px;
+  font-variant-numeric: tabular-nums;
+  font-variation-settings: "slnt" 0;
+}
+
+[data-component="select"][data-trigger-style="settings-v2"] [data-slot="select-select-trigger"]:focus-visible {
+  outline: 2px solid var(--v2-border-border-focus);
+  outline-offset: 2.5px;
+}
+
+[data-component="select"][data-trigger-style="settings-v2"]
+  [data-slot="select-select-trigger"]:is(:hover, [data-state="hover"]):not(:disabled) {
+  background-color: var(--v2-overlay-simple-overlay-hover);
+}
+
+[data-component="select"][data-trigger-style="settings-v2"]
+  [data-slot="select-select-trigger"]:is(:active, [data-state="pressed"]):not(:disabled) {
+  background-color: var(--v2-overlay-simple-overlay-pressed);
+}
+
+[data-component="select"][data-trigger-style="settings-v2"] [data-slot="select-select-trigger"]:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+[data-component="select"][data-trigger-style="settings-v2"] [data-slot="select-select-trigger-icon"] {
+  display: flex;
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+}
+
+[data-component="select"][data-trigger-style="settings-v2"]
+  [data-slot="select-select-trigger-icon"]
+  [data-slot="icon-svg"] {
+  margin-inline: -5px;
+  color: #3a3a3a;
+}
+
+[data-component="select-content"][data-trigger-style="settings-v2"] {
+  min-width: 160px;
+  border-radius: 8px;
+  padding: 0;
+
+  [data-slot="select-select-content-list"] {
+    padding: 4px;
+  }
+
+  [data-slot="select-select-item"] {
+    font-size: var(--font-size-base);
+    font-style: normal;
+    font-weight: var(--font-weight-regular);
+    line-height: var(--line-height-large);
+    letter-spacing: var(--letter-spacing-normal);
+  }
+}
--- a/packages/ui/src/components/select-v2.stories.tsx
+++ b/packages/ui/src/components/select-v2.stories.tsx
@ -0,0 +1,22 @@
+// @ts-nocheck
+import * as mod from "./select-v2"
+import { create } from "../storybook/scaffold"
+
+const story = create({
+  title: "UI/SelectV2",
+  mod,
+  args: {
+    options: ["One", "Two", "Three"],
+    current: "One",
+    placeholder: "Choose...",
+  },
+})
+
+export default {
+  title: "UI/SelectV2",
+  id: "components-select-v2",
+  component: story.meta.component,
+  tags: ["autodocs"],
+}
+
+export const Basic = story.Basic
--- a/packages/ui/src/components/select-v2.tsx
+++ b/packages/ui/src/components/select-v2.tsx
@ -0,0 +1,171 @@
+import { Select as Kobalte } from "@kobalte/core/select"
+import { createMemo, onCleanup, splitProps, type ComponentProps, type JSX } from "solid-js"
+import { pipe, groupBy, entries, map } from "remeda"
+import { Icon as IconV2 } from "../v2/components/icon"
+import { Icon } from "./icon"
+import "./select-v2.css"
+
+export type SelectV2Props<T> = Omit<ComponentProps<typeof Kobalte<T>>, "value" | "onSelect" | "children"> & {
+  placeholder?: string
+  options: T[]
+  current?: T
+  value?: (x: T) => string
+  label?: (x: T) => string
+  groupBy?: (x: T) => string
+  valueClass?: ComponentProps<"div">["class"]
+  onSelect?: (value: T | undefined) => void
+  onHighlight?: (value: T | undefined) => (() => void) | void
+  class?: ComponentProps<"div">["class"]
+  classList?: ComponentProps<"div">["classList"]
+  children?: (item: T | undefined) => JSX.Element
+  triggerStyle?: JSX.CSSProperties
+  triggerProps?: Record<string, string | number | boolean | undefined>
+}
+
+export function SelectV2<T>(props: SelectV2Props<T> & { disabled?: boolean }) {
+  const [local, others] = splitProps(props, [
+    "class",
+    "classList",
+    "placeholder",
+    "options",
+    "current",
+    "value",
+    "label",
+    "groupBy",
+    "valueClass",
+    "onSelect",
+    "onHighlight",
+    "onOpenChange",
+    "children",
+    "triggerStyle",
+    "triggerProps",
+  ])
+
+  const state = {
+    key: undefined as string | undefined,
+    cleanup: undefined as (() => void) | void,
+  }
+
+  const stop = () => {
+    state.cleanup?.()
+    state.cleanup = undefined
+    state.key = undefined
+  }
+
+  const keyFor = (item: T) => (local.value ? local.value(item) : (item as string))
+
+  const move = (item: T | undefined) => {
+    if (!local.onHighlight) return
+    if (!item) {
+      stop()
+      return
+    }
+
+    const key = keyFor(item)
+    if (state.key === key) return
+    state.cleanup?.()
+    state.cleanup = local.onHighlight(item)
+    state.key = key
+  }
+
+  onCleanup(stop)
+
+  const grouped = createMemo(() => {
+    const result = pipe(
+      local.options,
+      groupBy((x) => (local.groupBy ? local.groupBy(x) : "")),
+      entries(),
+      map(([k, v]) => ({ category: k, options: v })),
+    )
+    return result
+  })
+
+  return (
+    // @ts-ignore
+    <Kobalte<T, { category: string; options: T[] }>
+      {...others}
+      data-component="select"
+      data-trigger-style="settings-v2"
+      placement="bottom-end"
+      gutter={4}
+      value={local.current}
+      options={grouped()}
+      optionValue={(x) => (local.value ? local.value(x) : (x as string))}
+      optionTextValue={(x) => (local.label ? local.label(x) : (x as string))}
+      optionGroupChildren="options"
+      placeholder={local.placeholder}
+      sectionComponent={(local) => (
+        <Kobalte.Section data-slot="select-section">{local.section.rawValue.category}</Kobalte.Section>
+      )}
+      itemComponent={(itemProps) => (
+        <Kobalte.Item
+          {...itemProps}
+          data-slot="select-select-item"
+          classList={{
+            ...local.classList,
+            [local.class ?? ""]: !!local.class,
+          }}
+          onPointerEnter={() => move(itemProps.item.rawValue)}
+          onPointerMove={() => move(itemProps.item.rawValue)}
+          onFocus={() => move(itemProps.item.rawValue)}
+        >
+          <Kobalte.ItemLabel data-slot="select-select-item-label">
+            {local.children
+              ? local.children(itemProps.item.rawValue)
+              : local.label
+                ? local.label(itemProps.item.rawValue)
+                : (itemProps.item.rawValue as string)}
+          </Kobalte.ItemLabel>
+          <Kobalte.ItemIndicator data-slot="select-select-item-indicator">
+            <Icon name="check-small" size="small" />
+          </Kobalte.ItemIndicator>
+        </Kobalte.Item>
+      )}
+      onChange={(v) => {
+        local.onSelect?.(v ?? undefined)
+        stop()
+      }}
+      onOpenChange={(open) => {
+        local.onOpenChange?.(open)
+        if (!open) stop()
+      }}
+    >
+      <Kobalte.Trigger
+        {...local.triggerProps}
+        type="button"
+        disabled={props.disabled}
+        data-slot="select-select-trigger"
+        as="button"
+        style={local.triggerStyle}
+        classList={{
+          ...local.classList,
+          [local.class ?? ""]: !!local.class,
+        }}
+      >
+        <Kobalte.Value<T> data-slot="select-select-trigger-value" class={local.valueClass}>
+          {(state) => {
+            const selected = state.selectedOption() ?? local.current
+            if (!selected) return local.placeholder || ""
+            if (local.label) return local.label(selected)
+            return selected as string
+          }}
+        </Kobalte.Value>
+        <Kobalte.Icon data-slot="select-select-trigger-icon">
+          <IconV2 name="chevron-down" class="-mx-[5px]" />
+        </Kobalte.Icon>
+      </Kobalte.Trigger>
+      <Kobalte.Portal>
+        <Kobalte.Content
+          classList={{
+            ...local.classList,
+            [local.class ?? ""]: !!local.class,
+          }}
+          data-component="select-content"
+          data-trigger-style="settings-v2"
+        >
+          <Kobalte.Listbox data-slot="select-select-content-list" />
+        </Kobalte.Content>
+      </Kobalte.Portal>
+    </Kobalte>
+  )
+}
--- a/packages/ui/src/v2/components/accordion-v2.css
+++ b/packages/ui/src/v2/components/accordion-v2.css
@ -15,7 +15,6 @@
  box-shadow: 0 0 0 0.5px var(--accordion-v2-border);
  overflow: hidden;

-  font-family: var(--v2-font-family-sans), "Inter", system-ui, sans-serif;
  color: var(--accordion-v2-fg);

  -webkit-font-smoothing: antialiased;
@ -59,7 +58,6 @@
  cursor: default;
  user-select: none;

-  font-family: inherit;
  font-size: 13px;
  font-weight: 440;
  line-height: 100%;
--- a/packages/ui/src/v2/components/avatar-v2.css
+++ b/packages/ui/src/v2/components/avatar-v2.css
@ -14,7 +14,6 @@
  height: 28px;
  border-radius: var(--avatar-radius);
  border: 0.5px solid var(--v2-border-border-base);
-  font-family: var(--v2-font-family-sans);
  font-weight: 530;
  font-size: var(--avatar-font-size);
  line-height: 1;
--- a/packages/ui/src/v2/components/badge-v2.css
+++ b/packages/ui/src/v2/components/badge-v2.css
@ -10,19 +10,18 @@
  user-select: none;

  border-radius: 2px;
-  border: 0.5px solid var(--border-border-base);
-  background: var(--background-bg-layer-02);
+  border: 0.5px solid var(--v2-border-border-base);
+  background: var(--v2-background-bg-layer-02);

-  font-family: var(--v2-font-family-sans);
  font-style: normal;
  font-weight: 530;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.05px;
-  color: var(--text-text-muted);
+  color: var(--v2-text-text-muted);
  font-variant-numeric: tabular-nums;
 }

 [data-component="tag"][data-high-contrast] {
-  border-color: var(--border-border-strong);
+  border-color: var(--v2-border-border-strong);
 }
--- a/packages/ui/src/v2/components/basic-tool-v2.css
+++ b/packages/ui/src/v2/components/basic-tool-v2.css
@ -21,7 +21,6 @@
  gap: 8px;
  min-width: 0;
  width: 100%;
-  font-family: var(--v2-font-family-sans), var(--sans), system-ui, sans-serif;
  font-variant-numeric: tabular-nums;

  [data-slot="basic-tool-v2-trigger"] {
--- a/packages/ui/src/v2/components/button-v2.css
+++ b/packages/ui/src/v2/components/button-v2.css
@ -11,7 +11,6 @@
  justify-content: center;
  gap: 6px;
  border-radius: 6px;
-  font-family: var(--v2-font-family-sans);
  font-style: normal;
  font-weight: 530;
  font-size: 13px;
@ -145,3 +144,26 @@
  opacity: 0.5;
  cursor: not-allowed;
 }
+
+/* Ghost muted */
+[data-component="button-v2"][data-variant="ghost-muted"] {
+  background-color: transparent;
+  color: var(--v2-text-text-muted);
+}
+
+[data-component="button-v2"][data-variant="ghost-muted"] [data-slot="icon-svg"] {
+  color: var(--v2-icon-icon-muted);
+}
+
+[data-component="button-v2"][data-variant="ghost-muted"]:is(:hover, [data-state="hover"]):not(:disabled) {
+  background-color: var(--v2-overlay-simple-overlay-hover);
+}
+
+[data-component="button-v2"][data-variant="ghost-muted"]:is(:active, [data-state="pressed"]):not(:disabled) {
+  background-color: var(--v2-overlay-simple-overlay-pressed);
+}
+
+[data-component="button-v2"][data-variant="ghost-muted"]:is(:disabled, [data-state="disabled"]) {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
--- a/packages/ui/src/v2/components/button-v2.stories.tsx
+++ b/packages/ui/src/v2/components/button-v2.stories.tsx
@ -4,7 +4,7 @@ const docs = `### Overview
 Button v2 with three visual variants and two sizes.

 ### API
- \`variant\`: "neutral" | "contrast" | "ghost".
+- \`variant\`: "neutral" | "contrast" | "ghost" | "ghost-muted".
 - \`size\`: "normal" | "large".
 - \`icon\`: Optional icon name.
 - Inherits Kobalte Button props and native button attributes.
@ -39,7 +39,7 @@ export default {
    },
    variant: {
      control: "select",
-      options: ["neutral", "contrast", "ghost"],
+      options: ["neutral", "contrast", "ghost", "ghost-muted"],
    },
    size: {
      control: "select",
@ -63,6 +63,9 @@ export const Variants = {
      <ButtonV2 variant="neutral">Neutral</ButtonV2>
      <ButtonV2 variant="contrast">Contrast</ButtonV2>
      <ButtonV2 variant="ghost">Ghost</ButtonV2>
+      <ButtonV2 variant="ghost-muted" icon="edit">
+        Ghost muted
+      </ButtonV2>
    </div>
  ),
 }
@ -112,7 +115,7 @@ export const Icon = {

 export const AllStates = {
  render: () => {
-    const variants = ["neutral", "contrast", "ghost"] as const
+    const variants = ["neutral", "contrast", "ghost", "ghost-muted"] as const
    const states = ["default", "hover", "pressed", "focus", "disabled"] as const
    const toTitleCase = (value: string) => value.charAt(0).toUpperCase() + value.slice(1)
    return (
--- a/packages/ui/src/v2/components/button-v2.tsx
+++ b/packages/ui/src/v2/components/button-v2.tsx
@ -7,7 +7,7 @@ export interface ButtonV2Props
  extends ComponentProps<typeof Kobalte>,
    Pick<ComponentProps<"button">, "class" | "classList" | "children"> {
  size?: "small" | "normal" | "large"
-  variant?: "neutral" | "contrast" | "ghost"
+  variant?: "neutral" | "contrast" | "ghost" | "ghost-muted"
  icon?: IconProps["name"]
 }

@ -27,7 +27,7 @@ export function ButtonV2(props: ButtonV2Props) {
      }}
    >
      <Show when={resolvedIcon()}>
-        <Icon name={resolvedIcon()!} size="small" />
+        <Icon name={resolvedIcon()!} />
      </Show>
      {props.children}
    </Kobalte>
--- a/packages/ui/src/v2/components/checkbox-v2.css
+++ b/packages/ui/src/v2/components/checkbox-v2.css
@ -10,7 +10,6 @@

  [data-slot="checkbox-v2-error"] {
    color: var(--state-fg-danger);
-    font-family: var(--v2-font-family-sans);
    font-size: 12px;
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-normal);
@ -90,7 +89,6 @@
    display: inline-flex;
    user-select: none;
    color: inherit;
-    font-family: var(--v2-font-family-sans);
    font-style: normal;
    font-weight: 440;
    font-variant-numeric: tabular-nums;
@ -109,7 +107,6 @@

  [data-slot="checkbox-v2-description"] {
    color: var(--text-text-muted);
-    font-family: var(--v2-font-family-sans);
    font-size: 11px;
    font-weight: 440;
    line-height: 1;
--- a/packages/ui/src/v2/components/dialog-v2.css
+++ b/packages/ui/src/v2/components/dialog-v2.css
@ -4,7 +4,7 @@
  position: fixed;
  inset: 0;
  z-index: 50;
-  background-color: var(--overlay-simple-overlay-scrim);
+  background-color: var(--v2-overlay-simple-overlay-scrim);
 }

 [data-component="dialog"] {
@ -22,8 +22,8 @@
    align-items: flex-start;
    width: 480px;
    height: 368px;
-    background: var(--background-bg-layer-01);
-    box-shadow: var(--elevation-overlay);
+    background: var(--v2-background-bg-layer-01);
+    box-shadow: var(--v2-elevation-overlay);
    border-radius: 6px;
    overflow: visible;
    pointer-events: auto;
@ -64,22 +64,20 @@

        [data-slot="dialog-title"] {
          margin: 0;
-          font-family: "Inter", var(--v2-font-family-sans);
          font-weight: 530;
          font-size: 15px;
          line-height: 100%;
          letter-spacing: -0.13px;
-          color: var(--text-text-base);
+          color: var(--v2-text-text-base);
          font-variation-settings: "slnt" 0;
        }

        [data-slot="dialog-description"] {
-          font-family: "Inter", var(--v2-font-family-sans);
          font-weight: 440;
          font-size: 13px;
          line-height: 100%;
          letter-spacing: -0.04px;
-          color: var(--text-text-muted);
+          color: var(--v2-text-text-muted);
          font-variation-settings: "slnt" 0;
        }

@ -94,7 +92,7 @@
          cursor: pointer;

          &:hover {
-            background: var(--overlay-simple-overlay-hover);
+            background: var(--v2-overlay-simple-overlay-hover);
          }
        }
      }
--- a/packages/ui/src/v2/components/diff-changes-v2.css
+++ b/packages/ui/src/v2/components/diff-changes-v2.css
@ -6,7 +6,6 @@

  [data-slot="diff-changes-additions"],
  [data-slot="diff-changes-deletions"] {
-    font-family: var(--v2-font-family-sans);
    font-size: 11px;
    font-style: normal;
    font-weight: 440;
--- a/packages/ui/src/v2/components/field-v2.css
+++ b/packages/ui/src/v2/components/field-v2.css
@ -17,7 +17,6 @@
  margin: 0;
  padding: 0;
  border: 0;
-  font-family: var(--v2-font-family-sans);
  font-style: normal;
  font-weight: 530;
  font-size: 13px;
@ -76,7 +75,6 @@
  align-self: stretch;
  width: 100%;
  min-height: 11px;
-  font-family: var(--v2-font-family-sans);
  font-style: normal;
  font-weight: 440;
  font-size: 11px;
--- a/packages/ui/src/v2/components/icon.tsx
+++ b/packages/ui/src/v2/components/icon.tsx
@ -2,20 +2,20 @@ import { onMount, type ComponentProps, splitProps } from "solid-js"

 const icons = {
  edit: {
-    viewBox: "0 0 20 20",
-    body: `<path d="M17.0832 17.0807V17.5807H17.5832V17.0807H17.0832ZM2.9165 17.0807H2.4165V17.5807H2.9165V17.0807ZM2.9165 2.91406V2.41406H2.4165V2.91406H2.9165ZM9.58317 3.41406H10.0832V2.41406H9.58317V2.91406V3.41406ZM17.5832 10.4141V9.91406H16.5832V10.4141H17.0832H17.5832ZM6.24984 11.2474L5.89628 10.8938L5.74984 11.0403V11.2474H6.24984ZM6.24984 13.7474H5.74984V14.2474H6.24984V13.7474ZM8.74984 13.7474V14.2474H8.95694L9.10339 14.101L8.74984 13.7474ZM15.2082 2.28906L15.5617 1.93551L15.2082 1.58196L14.8546 1.93551L15.2082 2.28906ZM17.7082 4.78906L18.0617 5.14262L18.4153 4.78906L18.0617 4.43551L17.7082 4.78906ZM17.0832 17.0807V16.5807H2.9165V17.0807V17.5807H17.0832V17.0807ZM2.9165 17.0807H3.4165V2.91406H2.9165H2.4165V17.0807H2.9165ZM2.9165 2.91406V3.41406H9.58317V2.91406V2.41406H2.9165V2.91406ZM17.0832 10.4141H16.5832V17.0807H17.0832H17.5832V10.4141H17.0832ZM6.24984 11.2474H5.74984V13.7474H6.24984H6.74984V11.2474H6.24984ZM6.24984 13.7474V14.2474H8.74984V13.7474V13.2474H6.24984V13.7474ZM6.24984 11.2474L6.60339 11.6009L15.5617 2.64262L15.2082 2.28906L14.8546 1.93551L5.89628 10.8938L6.24984 11.2474ZM15.2082 2.28906L14.8546 2.64262L17.3546 5.14262L17.7082 4.78906L18.0617 4.43551L15.5617 1.93551L15.2082 2.28906ZM17.7082 4.78906L17.3546 4.43551L8.39628 13.3938L8.74984 13.7474L9.10339 14.101L18.0617 5.14262L17.7082 4.78906Z" fill="currentColor"/>`,
+    viewBox: "0 0 16 16",
+    body: `<path d="M13.5555 8.21534V13.5556H2.44434L2.44434 2.4445H7.78462M6.88878 9.11119C6.88878 9.11119 8.96327 9.0367 9.69678 8.3032L14.0301 3.96986C14.5824 3.4176 14.5824 2.52213 14.0301 1.96986C13.4778 1.4176 12.5824 1.4176 12.0301 1.96986L7.69678 6.3032C7.00513 6.99484 6.88878 9.11119 6.88878 9.11119Z" stroke="currentColor"/>`,
  },
  "folder-add-left": {
-    viewBox: "0 0 20 20",
-    body: `<path d="M2.08333 9.58268V2.91602H8.33333L10 5.41602H17.9167V16.2493H8.75M3.75 12.0827V14.5827M3.75 14.5827V17.0827M3.75 14.5827H1.25M3.75 14.5827H6.25" stroke="currentColor" stroke-linecap="square"/>`,
+    viewBox: "0 0 16 16",
+    body: `<path d="M7.5 13.3333H1.5V2H6.83333L8.83333 4H14.8333V6M10.1667 11.3333H15.5M12.8333 8.66667V14" stroke="currentColor" stroke-miterlimit="10" stroke-linecap="square"/>`,
  },
  "grid-plus": {
    viewBox: "0 0 16 16",
    body: `<path d="M13.9948 11.668H9.32812M11.6641 9.33203V13.9987M6.66667 9.33203V13.9987H2V9.33203H6.66667ZM6.66667 2V6.66667H2V2H6.66667ZM13.9948 2V6.66667H9.32812V2H13.9948Z" stroke="currentColor" stroke-miterlimit="10" stroke-linecap="square"/>`,
  },
  help: {
-    viewBox: "0 0 20 20",
-    body: `<path d="M7.91683 7.91927V6.2526H12.0835V8.7526L10.0002 10.0026V12.0859M10.0002 13.7526V13.7609M17.9168 10.0026C17.9168 14.3749 14.3724 17.9193 10.0002 17.9193C5.62791 17.9193 2.0835 14.3749 2.0835 10.0026C2.0835 5.63035 5.62791 2.08594 10.0002 2.08594C14.3724 2.08594 17.9168 5.63035 17.9168 10.0026Z" stroke="currentColor" stroke-linecap="square"/>`,
+    viewBox: "0 0 16 16",
+    body: `<path d="M6.33345 6.33349V5.00015H9.66679V7.00015L8.00015 8.00015V9.66679M8.27485 11.6819H7.71897M14.4446 8.00011C14.4446 11.5593 11.5593 14.4446 8.00011 14.4446C4.44094 14.4446 1.55566 11.5593 1.55566 8.00011C1.55566 4.44094 4.44094 1.55566 8.00011 1.55566C11.5593 1.55566 14.4446 4.44094 14.4446 8.00011Z" stroke="currentColor" stroke-linecap="square"/>`,
  },
  "sidebar-right": {
    viewBox: "0 0 20 20",
@ -31,7 +31,7 @@ const icons = {
  },
  "magnifying-glass": {
    viewBox: "0 0 16 16",
-    body: `<path d="M13 13L10.6418 10.6418M11.9552 7.47761C11.9552 9.95053 9.95053 11.9552 7.47761 11.9552C5.0047 11.9552 3 9.95053 3 7.47761C3 5.0047 5.0047 3 7.47761 3C9.95053 3 11.9552 5.0047 11.9552 7.47761Z" stroke="currentColor" stroke-linecap="square" vector-effect="non-scaling-stroke"/>`,
+    body: `<path d="M14 14L10.3454 10.3454M6.88889 11.7778C9.58889 11.7778 11.7778 9.58889 11.7778 6.88889C11.7778 4.18889 9.58889 2 6.88889 2C4.18889 2 2 4.18889 2 6.88889C2 9.58889 4.18889 11.7778 6.88889 11.7778Z" stroke="currentColor"/>`,
  },
  menu: {
    viewBox: "0 0 16 16",
@ -42,8 +42,16 @@ const icons = {
    body: `<path d="M8 2.88867V13.1109" stroke="currentColor" stroke-linejoin="round"/><path d="M2.88867 8H13.1109" stroke="currentColor" stroke-linejoin="round"/>`,
  },
  "settings-gear": {
+    viewBox: "0 0 16 16",
+    body: `<path d="M7.99998 1.3335L14 4.66683V11.3335L7.99998 14.6668L2 11.3335V4.66683L7.99998 1.3335Z" stroke="currentColor"/><path d="M9.99998 8.00016C9.99998 9.10476 9.10458 10.0002 7.99998 10.0002C6.89538 10.0002 5.99998 9.10476 5.99998 8.00016C5.99998 6.89556 6.89538 6.00016 7.99998 6.00016C9.10458 6.00016 9.99998 6.89556 9.99998 8.00016Z" stroke="currentColor"/>`,
+  },
+  "chevron-down": {
+    viewBox: "0 0 16 16",
+    body: `<path d="M5 6.5L8 9.5L11 6.5" stroke="currentColor"/>`,
+  },
+  close: {
    viewBox: "0 0 20 20",
-    body: `<path d="M7.62516 4.46094L5.05225 3.86719L3.86475 5.05469L4.4585 7.6276L2.0835 9.21094V10.7943L4.4585 12.3776L3.86475 14.9505L5.05225 16.138L7.62516 15.5443L9.2085 17.9193H10.7918L12.3752 15.5443L14.9481 16.138L16.1356 14.9505L15.5418 12.3776L17.9168 10.7943V9.21094L15.5418 7.6276L16.1356 5.05469L14.9481 3.86719L12.3752 4.46094L10.7918 2.08594H9.2085L7.62516 4.46094Z" stroke="currentColor"/><path d="M12.5002 10.0026C12.5002 11.3833 11.3809 12.5026 10.0002 12.5026C8.61945 12.5026 7.50016 11.3833 7.50016 10.0026C7.50016 8.62189 8.61945 7.5026 10.0002 7.5026C11.3809 7.5026 12.5002 8.62189 12.5002 10.0026Z" stroke="currentColor"/>`,
+    body: `<path d="M14.4446 5.55566L5.55566 14.4446M5.55566 5.55566L14.4446 14.4446" stroke="currentColor" stroke-linejoin="round"/>`,
  },
  "xmark-small": {
    viewBox: "0 0 16 16",
--- a/packages/ui/src/v2/components/inline-input-v2.css
+++ b/packages/ui/src/v2/components/inline-input-v2.css
@ -81,7 +81,6 @@
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
-  font-family: var(--v2-font-family-sans);
  font-style: normal;
  font-weight: 440;
  font-size: 13px;
@ -138,7 +137,6 @@
  border: 0;
  background: transparent;
  outline: none;
-  font-family: var(--v2-font-family-sans);
  font-style: normal;
  font-weight: 440;
  font-size: 13px;
--- a/packages/ui/src/v2/components/keybind-v2.css
+++ b/packages/ui/src/v2/components/keybind-v2.css
@ -6,13 +6,13 @@

 [data-component="keybind-v2"] {
  box-sizing: border-box;
-  font-family: var(--v2-font-family-sans), var(--sans), system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
-  padding: 0px;
+  padding: 0;
  gap: 2px;
+  flex-shrink: 0;
 }

 [data-component="keybind-v2"] *,
@ -26,9 +26,9 @@
  flex-direction: row;
  justify-content: center;
  align-items: center;
-  padding: 0px;
+  padding: 0;
  gap: 4px;
-  width: 14px;
+  min-width: 14px;
  height: 14px;
  border-radius: 2px;
  flex: none;
@ -36,7 +36,7 @@
 }

 [data-component="keybind-v2"][data-variant="neutral"] [data-slot="keybind-v2-key"] {
-  background: var(--background-bg-layer-03);
+  background: var(--v2-background-bg-layer-03);
 }

 [data-component="keybind-v2"][data-variant="ghost"] [data-slot="keybind-v2-key"] {
@ -48,26 +48,27 @@
  flex-direction: row;
  justify-content: center;
  align-items: center;
-  width: 14px;
-  height: 14px;
-  padding: 0px;
-  flex: 1 1 auto;
-  align-self: stretch;
-  font-family: "Inter", var(--v2-font-family-sans), var(--sans), system-ui, sans-serif;
+  min-width: 14px;
+  height: 11px;
+  padding: 0;
+  flex: none;
  font-style: normal;
  font-weight: 530;
  font-size: 11px;
-  line-height: 100%;
+  line-height: 1;
  text-align: center;
  letter-spacing: 0.05px;
+  text-transform: uppercase;
+  font-variant-numeric: tabular-nums;
+  font-feature-settings: "tnum" on, "lnum" on;
  font-variation-settings: "slnt" 0;
  user-select: none;
 }

 [data-component="keybind-v2"][data-variant="neutral"] [data-slot="keybind-v2-label"] {
-  color: var(--text-text-muted);
+  color: var(--v2-text-text-muted);
 }

 [data-component="keybind-v2"][data-variant="ghost"] [data-slot="keybind-v2-label"] {
-  color: var(--text-text-faint);
+  color: var(--v2-text-text-faint);
 }
--- a/packages/ui/src/v2/components/line-comment-v2.css
+++ b/packages/ui/src/v2/components/line-comment-v2.css
@ -6,7 +6,6 @@

 [data-component="line-comment-v2"] {
  box-sizing: border-box;
-  font-family: var(--v2-font-family-sans), var(--sans), system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  min-width: 0;
  width: 100%;
@ -155,7 +154,6 @@
  border: 1px solid var(--border-border-base);
  border-radius: 6px;
  background: linear-gradient(180deg, var(--alpha-light-2) 0%, var(--alpha-light-0) 100%), var(--background-bg-base);
-  font-family: inherit;
  font-size: 13px;
  font-style: normal;
  font-weight: 440;
--- a/packages/ui/src/v2/components/menu-v2.css
+++ b/packages/ui/src/v2/components/menu-v2.css
@ -6,12 +6,11 @@
  padding: 2px;
  min-width: 160px;

-  background: var(--v2-background-bg-layer-01);
+  background: var(--background-bg-layer-01);
  border-radius: 6px;
-  box-shadow: var(--v2-elevation-floating);
+  box-shadow: var(--elevation-floating);

  outline: none;
-  font-family: var(--v2-font-family-sans), "Inter", system-ui, sans-serif;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
@ -31,9 +30,9 @@
  --menu-v2-fg-subtle: var(--text-text-muted);
  --menu-v2-icon: var(--icon-icon-base);
  --menu-v2-accent: var(--text-text-accent);
-  --menu-v2-badge-bg: var(--v2-background-bg-layer-02);
-  --menu-v2-badge-border: var(--v2-border-border-base);
-  --menu-v2-hover: var(--v2-overlay-simple-overlay-hover);
+  --menu-v2-badge-bg: var(--background-bg-layer-02);
+  --menu-v2-badge-border: var(--border-border-base);
+  --menu-v2-hover: var(--overlay-simple-overlay-hover);

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
@ -52,7 +51,6 @@
  cursor: default;
  user-select: none;

-  font-family: var(--v2-font-family-sans), "Inter", system-ui, sans-serif;
  font-variation-settings: "slnt" 0;
  font-variant-numeric: tabular-nums;
  color: var(--menu-v2-fg);
@ -153,7 +151,7 @@
  height: 1px;
  width: calc(100% + 4px);
  margin: 2px -2px;
-  background: var(--v2-border-border-muted);
+  background: var(--border-border-muted);
  border: none;
 }

@ -164,7 +162,6 @@
  height: 28px;
  padding: 0 12px;

-  font-family: var(--v2-font-family-sans), "Inter", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 530;
  line-height: 100%;
--- a/packages/ui/src/v2/components/project-avatar-v2.css
+++ b/packages/ui/src/v2/components/project-avatar-v2.css
@ -0,0 +1,128 @@
+[data-component="project-avatar-v2"] {
+  --project-avatar-bg: var(--v2-avatar-bg-gray);
+  --project-avatar-border: var(--v2-avatar-border-gray);
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  overflow: hidden;
+  border-radius: 4px;
+  background:
+    linear-gradient(180deg, var(--v2-alpha-light-16) 0%, var(--v2-alpha-light-0) 100%), var(--project-avatar-bg);
+  box-shadow: inset 0 0 0 0.5px var(--project-avatar-border);
+  font-weight: 530;
+  font-size: 11px;
+  line-height: 1;
+  letter-spacing: 0.05px;
+  font-variant-numeric: tabular-nums;
+  text-transform: uppercase;
+  color: var(--v2-grey-100);
+  text-shadow: 0 0 4px var(--v2-alpha-dark-20);
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+[data-component="project-avatar-v2"][data-variant="orange"] {
+  --project-avatar-bg: var(--v2-avatar-bg-orange);
+  --project-avatar-border: var(--v2-avatar-border-orange);
+}
+
+[data-component="project-avatar-v2"][data-variant="yellow"] {
+  --project-avatar-bg: var(--v2-avatar-bg-yellow);
+  --project-avatar-border: var(--v2-avatar-border-yellow);
+}
+
+[data-component="project-avatar-v2"][data-variant="cyan"] {
+  --project-avatar-bg: var(--v2-avatar-bg-cyan);
+  --project-avatar-border: var(--v2-avatar-border-cyan);
+}
+
+[data-component="project-avatar-v2"][data-variant="green"] {
+  --project-avatar-bg: var(--v2-avatar-bg-green);
+  --project-avatar-border: var(--v2-avatar-border-green);
+}
+
+[data-component="project-avatar-v2"][data-variant="red"] {
+  --project-avatar-bg: var(--v2-avatar-bg-red);
+  --project-avatar-border: var(--v2-avatar-border-red);
+}
+
+[data-component="project-avatar-v2"][data-variant="pink"] {
+  --project-avatar-bg: var(--v2-avatar-bg-pink);
+  --project-avatar-border: var(--v2-avatar-border-pink);
+}
+
+[data-component="project-avatar-v2"][data-variant="blue"] {
+  --project-avatar-bg: var(--v2-avatar-bg-blue);
+  --project-avatar-border: var(--v2-avatar-border-blue);
+}
+
+[data-component="project-avatar-v2"][data-variant="purple"] {
+  --project-avatar-bg: var(--v2-avatar-bg-purple);
+  --project-avatar-border: var(--v2-avatar-border-purple);
+}
+
+[data-component="project-avatar-v2"][data-variant="gray"] {
+  --project-avatar-bg: var(--v2-avatar-bg-gray);
+  --project-avatar-border: var(--v2-avatar-border-gray);
+}
+
+[data-component="project-avatar-v2"][data-has-image] {
+  background: var(--project-avatar-bg);
+}
+
+[data-component="project-avatar-v2"] [data-slot="project-avatar-image"] {
+  position: relative;
+  z-index: 1;
+  display: block;
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+  object-fit: cover;
+  user-select: none;
+  -webkit-user-select: none;
+  -webkit-user-drag: none;
+}
+
+[data-component="project-avatar-v2"] [data-slot="project-avatar-loader"] {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  border-radius: 4px;
+  background: conic-gradient(
+    from 180deg at 50% 50%,
+    var(--v2-grey-100) 0deg,
+    var(--v2-grey-1200) 0.04deg,
+    var(--v2-alpha-dark-50) 90deg,
+    var(--v2-grey-100) 360deg
+  );
+  mix-blend-mode: soft-light;
+  pointer-events: none;
+  animation: project-avatar-v2-loader-spin 1.2s linear infinite;
+}
+
+@keyframes project-avatar-v2-loader-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+[data-slot="project-avatar-slot"] {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  overflow: visible;
+}
+
+[data-component="project-avatar-v2"][data-unread] {
+  overflow: visible;
+  outline: 2px solid var(--v2-background-bg-accent);
+  outline-offset: 1px;
+}
--- a/packages/ui/src/v2/components/project-avatar-v2.stories.tsx
+++ b/packages/ui/src/v2/components/project-avatar-v2.stories.tsx
@ -0,0 +1,88 @@
+// @ts-nocheck
+import { For } from "solid-js"
+import { ProjectAvatar, PROJECT_AVATAR_VARIANTS } from "./project-avatar-v2"
+
+const docs = `### Overview
+Saturated 16px project avatar with color variants and optional unread ring.
+
+### API
+- Required: \`fallback\` string.
+- Optional: \`src\`, \`variant\`, \`unread\`.
+
+### Variants
+- Color: orange, yellow, cyan, green, red, pink, blue, purple, gray.
+- Image vs initial content state.
+- Unread ring when \`unread\` is set.
+
+### Theming
+- Uses \`--v2-avatar-bg-*\` and \`--v2-avatar-border-*\` tokens with inset box-shadow borders.
+`
+
+export default {
+  title: "UI V2/ProjectAvatar",
+  id: "components-project-avatar-v2",
+  component: ProjectAvatar,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: docs,
+      },
+    },
+  },
+  argTypes: {
+    variant: {
+      control: "select",
+      options: [...PROJECT_AVATAR_VARIANTS],
+    },
+  },
+  args: {
+    fallback: "O",
+    variant: "orange",
+  },
+}
+
+export const Basic = {}
+
+export const WithImage = {
+  args: {
+    src: "https://placehold.co/32x32/png",
+    fallback: "O",
+    variant: "blue",
+  },
+}
+
+export const AllVariants = {
+  render: () => (
+    <div style={{ display: "flex", gap: "16px", "align-items": "center" }}>
+      <For each={PROJECT_AVATAR_VARIANTS}>
+        {(variant) => <ProjectAvatar fallback={variant[0].toUpperCase()} variant={variant} />}
+      </For>
+    </div>
+  ),
+}
+
+export const Unread = {
+  args: {
+    fallback: "O",
+    variant: "orange",
+    unread: true,
+  },
+}
+
+export const Loading = {
+  args: {
+    fallback: "O",
+    variant: "orange",
+    loading: true,
+  },
+}
+
+export const LoadingAndUnread = {
+  args: {
+    fallback: "O",
+    variant: "blue",
+    loading: true,
+    unread: true,
+  },
+}
--- a/packages/ui/src/v2/components/project-avatar-v2.tsx
+++ b/packages/ui/src/v2/components/project-avatar-v2.tsx
@ -0,0 +1,71 @@
+import { type ComponentProps, splitProps, Show } from "solid-js"
+import "./project-avatar-v2.css"
+
+const segmenter =
+  typeof Intl !== "undefined" && "Segmenter" in Intl
+    ? new Intl.Segmenter(undefined, { granularity: "grapheme" })
+    : undefined
+
+function first(value: string) {
+  if (!value) return ""
+  if (!segmenter) return Array.from(value)[0] ?? ""
+  return segmenter.segment(value)[Symbol.iterator]().next().value?.segment ?? Array.from(value)[0] ?? ""
+}
+
+export const PROJECT_AVATAR_VARIANTS = [
+  "orange",
+  "yellow",
+  "cyan",
+  "green",
+  "red",
+  "pink",
+  "blue",
+  "purple",
+  "gray",
+] as const
+
+export type ProjectAvatarVariant = (typeof PROJECT_AVATAR_VARIANTS)[number]
+
+export interface ProjectAvatarProps extends ComponentProps<"div"> {
+  fallback: string
+  src?: string
+  variant?: ProjectAvatarVariant
+  unread?: boolean
+  loading?: boolean
+}
+
+export function ProjectAvatar(props: ProjectAvatarProps) {
+  const [split, rest] = splitProps(props, [
+    "fallback",
+    "src",
+    "variant",
+    "unread",
+    "loading",
+    "class",
+    "classList",
+    "style",
+  ])
+  const src = split.src
+  return (
+    <div
+      {...rest}
+      data-component="project-avatar-v2"
+      data-variant={split.variant ?? "gray"}
+      data-has-image={src ? "" : undefined}
+      data-unread={split.unread ? "" : undefined}
+      data-loading={split.loading ? "" : undefined}
+      classList={{
+        ...split.classList,
+        [split.class ?? ""]: !!split.class,
+      }}
+      style={typeof split.style === "object" ? split.style : undefined}
+    >
+      <Show when={src} fallback={first(split.fallback)}>
+        {(value) => <img src={value()} draggable={false} data-slot="project-avatar-image" />}
+      </Show>
+      <Show when={split.loading}>
+        <span data-slot="project-avatar-loader" aria-hidden="true" />
+      </Show>
+    </div>
+  )
+}
--- a/packages/ui/src/v2/components/radio-v2.css
+++ b/packages/ui/src/v2/components/radio-v2.css
@ -9,7 +9,6 @@
    align-items: center;
    user-select: none;
    color: var(--text-text-faint);
-    font-family: var(--v2-font-family-sans);
    font-size: 11px;
    font-style: normal;
    font-weight: 440;
@ -20,7 +19,6 @@

  [data-slot="radio-v2-description"] {
    color: var(--text-text-faint);
-    font-family: var(--v2-font-family-sans);
    font-size: 11px;
    font-weight: 440;
    line-height: 1.2;
@ -35,7 +33,6 @@

  [data-slot="radio-v2-error"] {
    color: var(--state-fg-danger);
-    font-family: var(--v2-font-family-sans);
    font-size: 12px;
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-normal);
@ -167,7 +164,6 @@
    display: inline-flex;
    user-select: none;
    color: inherit;
-    font-family: var(--v2-font-family-sans);
    font-style: normal;
    font-weight: 440;
    font-variant-numeric: tabular-nums;
@ -186,7 +182,6 @@

  [data-slot="radio-v2-item-description"] {
    color: var(--text-text-muted);
-    font-family: var(--v2-font-family-sans);
    font-size: 11px;
    font-weight: 440;
    line-height: 1;
--- a/packages/ui/src/v2/components/segmented-control-v2.css
+++ b/packages/ui/src/v2/components/segmented-control-v2.css
@ -34,7 +34,6 @@
  background: transparent;
  box-shadow: none;
  cursor: pointer;
-  font-family: var(--v2-font-family-sans), var(--sans);
  font-style: normal;
  font-weight: 440;
  font-size: 13px;
--- a/packages/ui/src/v2/components/select-v2.css
+++ b/packages/ui/src/v2/components/select-v2.css
@ -110,7 +110,6 @@
  background: transparent;
  outline: none;
  text-align: left;
-  font-family: var(--v2-font-family-sans);
  font-style: normal;
  font-weight: 440;
  font-size: 13px;
--- a/packages/ui/src/v2/components/switch-v2.css
+++ b/packages/ui/src/v2/components/switch-v2.css
@ -29,8 +29,8 @@
    border-radius: 4px;
    border: none;
    background:
-      linear-gradient(180deg, var(--alpha-light-0) 0%, var(--alpha-light-20) 100%), var(--background-bg-layer-03);
-    box-shadow: var(--elevation-switch-off);
+      linear-gradient(180deg, var(--v2-alpha-light-0) 0%, var(--v2-alpha-light-20) 100%), var(--v2-background-bg-layer-03);
+    box-shadow: var(--v2-elevation-switch-off);
    transition:
      background 90ms ease-out,
      opacity 90ms ease-out,
@ -43,15 +43,15 @@
    height: 12px;
    transform: translateX(0);
    border-radius: 2px;
-    border: 0.5px solid var(--overlay-gradient-depth-overlay-depth-top);
+    border: 0.5px solid var(--v2-overlay-gradient-depth-overlay-depth-top);
    background:
      linear-gradient(
        180deg,
-        var(--overlay-gradient-depth-overlay-depth-top) 0%,
-        var(--overlay-gradient-depth-overlay-depth-bot) 100%
+        var(--v2-overlay-gradient-depth-overlay-depth-top) 0%,
+        var(--v2-overlay-gradient-depth-overlay-depth-bot) 100%
      ),
-      var(--grey-200);
-    box-shadow: var(--elevation-elements);
+      var(--v2-grey-200);
+    box-shadow: var(--v2-elevation-elements);
    transition:
      transform 90ms ease-out,
      width 90ms ease-out,
@ -64,8 +64,7 @@
    align-items: center;
    height: 16px;
    user-select: none;
-    color: var(--text-text-faint);
-    font-family: var(--v2-font-family-sans);
+    color: var(--v2-text-text-faint);
    font-size: 11px;
    font-style: normal;
    font-weight: 440;
@ -75,8 +74,7 @@
  }

  [data-slot="switch-error"] {
-    color: var(--state-fg-danger);
-    font-family: var(--v2-font-family-sans);
+    color: var(--v2-state-fg-danger);
    font-size: 12px;
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-normal);
@ -89,8 +87,8 @@

  &:hover:not([data-disabled], [data-readonly]) [data-slot="switch-control"] {
    background:
-      linear-gradient(0deg, var(--overlay-simple-overlay-hover), var(--overlay-simple-overlay-hover)),
-      linear-gradient(180deg, var(--alpha-light-0) 0%, var(--alpha-light-20) 100%), var(--background-bg-layer-03);
+      linear-gradient(0deg, var(--v2-overlay-simple-overlay-hover), var(--v2-overlay-simple-overlay-hover)),
+      linear-gradient(180deg, var(--v2-alpha-light-0) 0%, var(--v2-alpha-light-20) 100%), var(--v2-background-bg-layer-03);
  }

  &:hover:not([data-disabled], [data-readonly]) [data-slot="switch-thumb"] {
@ -99,14 +97,14 @@
  }

  &:not([data-readonly]) [data-slot="switch-input"]:focus-visible ~ [data-slot="switch-control"] {
-    outline: 2px solid var(--border-border-focus);
+    outline: 2px solid var(--v2-border-border-focus);
    outline-offset: 1px;
  }

  &[data-checked] [data-slot="switch-control"] {
    background:
-      linear-gradient(180deg, var(--alpha-light-0) 0%, var(--alpha-light-10) 100%), var(--background-bg-accent);
-    box-shadow: var(--elevation-switch-on);
+      linear-gradient(180deg, var(--v2-alpha-light-0) 0%, var(--v2-alpha-light-10) 100%), var(--v2-background-bg-accent);
+    box-shadow: var(--v2-elevation-switch-on);
  }

  &[data-checked] [data-slot="switch-thumb"] {
@ -115,16 +113,16 @@
    background:
      linear-gradient(
        180deg,
-        var(--overlay-gradient-depth-overlay-depth-top) 0%,
-        var(--overlay-gradient-depth-overlay-depth-bot) 100%
+        var(--v2-overlay-gradient-depth-overlay-depth-top) 0%,
+        var(--v2-overlay-gradient-depth-overlay-depth-bot) 100%
      ),
-      var(--grey-300);
+      var(--v2-grey-300);
  }

  &[data-checked]:hover:not([data-disabled], [data-readonly]) [data-slot="switch-control"] {
    background:
-      linear-gradient(0deg, var(--overlay-simple-overlay-contrast-hover), var(--overlay-simple-overlay-contrast-hover)),
-      linear-gradient(180deg, var(--alpha-light-0) 0%, var(--alpha-light-10) 100%), var(--background-bg-accent);
+      linear-gradient(0deg, var(--v2-overlay-simple-overlay-contrast-hover), var(--v2-overlay-simple-overlay-contrast-hover)),
+      linear-gradient(180deg, var(--v2-alpha-light-0) 0%, var(--v2-alpha-light-10) 100%), var(--v2-background-bg-accent);
  }

  &[data-checked]:hover:not([data-disabled], [data-readonly]) [data-slot="switch-thumb"] {
@ -140,7 +138,7 @@
  }

  &[data-invalid] [data-slot="switch-control"] {
-    border-color: var(--state-border-danger);
+    border-color: var(--v2-state-border-danger);
  }

  &[data-readonly] {
--- a/packages/ui/src/v2/components/tab-state-indicator.tsx
+++ b/packages/ui/src/v2/components/tab-state-indicator.tsx
@ -0,0 +1,37 @@
+import { splitProps, type ComponentProps } from "solid-js"
+
+export function TabStateIndicator(props: ComponentProps<"svg">) {
+  const [local, rest] = splitProps(props, ["class", "classList", "width", "height"])
+  return (
+    <svg
+      {...rest}
+      class={local.class}
+      classList={local.classList}
+      width={local.width ?? 16}
+      height={local.height ?? 16}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden={rest["aria-hidden"] ?? "true"}
+    >
+      <g opacity="0.25" fill="#808080">
+        <rect x="13.5" y="2.5" width="2" height="2" transform="rotate(90 13.5 2.5)" />
+        <path d="M10.5 2.5L10.5 4.5L8.5 4.5L8.5 2.5L10.5 2.5Z" />
+        <path d="M4.5 2.5L4.5 4.5L2.5 4.5L2.5 2.5L4.5 2.5Z" />
+        <path d="M13.5 5.5L13.5 7.5L11.5 7.5L11.5 5.5L13.5 5.5Z" />
+        <path d="M4.5 5.5L4.5 7.5L2.5 7.5L2.5 5.5L4.5 5.5Z" />
+        <path d="M13.5 8.5L13.5 10.5L11.5 10.5L11.5 8.5L13.5 8.5Z" />
+        <path d="M4.5 8.5L4.5 10.5L2.5 10.5L2.5 8.5L4.5 8.5Z" />
+        <path d="M13.5 11.5L13.5 13.5L11.5 13.5L11.5 11.5L13.5 11.5Z" />
+        <path d="M7.5 11.5L7.5 13.5L5.5 13.5L5.5 11.5L7.5 11.5Z" />
+        <path d="M4.5 11.5L4.5 13.5L2.5 13.5L2.5 11.5L4.5 11.5Z" />
+        <path d="M7.5 2.5L7.5 4.5L5.5 4.5L5.5 2.5L7.5 2.5Z" />
+        <path d="M10.5 5.5L10.5 7.5L8.5 7.5L8.5 5.5L10.5 5.5Z" />
+        <path d="M7.5 5.5L7.5 7.5L5.5 7.5L5.5 5.5L7.5 5.5Z" />
+        <path d="M10.5 8.5L10.5 10.5L8.5 10.5L8.5 8.5L10.5 8.5Z" />
+        <path d="M7.5 8.5L7.5 10.5L5.5 10.5L5.5 8.5L7.5 8.5Z" />
+        <path d="M10.5 11.5L10.5 13.5L8.5 13.5L8.5 11.5L10.5 11.5Z" />
+      </g>
+    </svg>
+  )
+}
--- a/packages/ui/src/v2/components/tabs-v2.css
+++ b/packages/ui/src/v2/components/tabs-v2.css
@ -9,7 +9,6 @@
  height: 100%;
  display: flex;
  overflow: clip;
-  font-family: var(--v2-font-family-sans);
 }

 [data-component="tabs-v2"][data-orientation="horizontal"] {
@ -75,11 +74,11 @@
  display: flex;
  align-items: center;
  justify-content: center;
-  color: var(--text-text-faint);
+  color: var(--v2-text-text-faint);
 }

 [data-component="tabs-v2"] [data-slot="tabs-v2-close-button"]:hover {
-  color: var(--text-text-muted);
+  color: var(--v2-text-text-muted);
 }

 [data-component="tabs-v2"] [data-component="icon-button"] {
@ -88,7 +87,7 @@

 [data-component="tabs-v2"] [data-slot="tabs-v2-trigger-wrapper"]:disabled {
  pointer-events: none;
-  color: var(--text-text-faint);
+  color: var(--v2-text-text-faint);
 }

 [data-component="tabs-v2"][data-variant="normal"][data-orientation="horizontal"] [data-slot="tabs-v2-list"],
@ -105,7 +104,7 @@
  height: 1px;
  content: "";
  width: calc(100% + 16px);
-  background-color: var(--border-border-base);
+  background-color: var(--v2-border-border-base);
  position: absolute;
  bottom: 0px;
  left: -8px;
@ -119,7 +118,7 @@
 [data-component="tabs-v2"][data-variant="normal"][data-orientation="horizontal"] [data-slot="tabs-v2-trigger-wrapper"] {
  height: 100%;
  gap: 4px;
-  color: var(--text-text-muted);
+  color: var(--v2-text-text-muted);
  border-bottom: 1px solid transparent;
 }

@ -130,18 +129,18 @@

 [data-component="tabs-v2"][data-variant="normal"][data-orientation="horizontal"]
  [data-slot="tabs-v2-trigger-wrapper"]:hover:not(:disabled):not([data-selected]) {
-  color: var(--text-text-base);
+  color: var(--v2-text-text-base);
 }

 [data-component="tabs-v2"][data-variant="normal"][data-orientation="horizontal"]
  [data-slot="tabs-v2-trigger-wrapper"]:has([data-selected]) {
-  border-bottom-color: var(--text-text-faint);
-  color: var(--text-text-base);
+  border-bottom-color: var(--v2-text-text-faint);
+  color: var(--v2-text-text-base);
 }

 [data-component="tabs-v2"][data-variant="normal"][data-orientation="horizontal"]
  [data-slot="tabs-v2-trigger-wrapper"]:not(:has([data-selected])) {
-  color: var(--text-text-muted);
+  color: var(--v2-text-text-muted);
 }

 [data-component="tabs-v2"][data-variant="pill"][data-orientation="horizontal"] [data-slot="tabs-v2-trigger-wrapper"] {
@ -149,7 +148,7 @@
  border-radius: 4px;
  border: 0.5px solid transparent;
  box-sizing: border-box;
-  color: var(--text-text-muted);
+  color: var(--v2-text-text-muted);
 }

 [data-component="tabs-v2"][data-variant="pill"][data-orientation="horizontal"] [data-slot="tabs-v2-trigger"] {
@ -162,16 +161,16 @@

 [data-component="tabs-v2"][data-variant="pill"][data-orientation="horizontal"]
  [data-slot="tabs-v2-trigger-wrapper"]:hover:not(:disabled):not(:has([data-selected])) {
-  background-color: var(--background-bg-layer-01);
-  color: var(--text-text-base);
-  border: 0.5px solid var(--border-border-muted);
+  background-color: var(--v2-background-bg-layer-01);
+  color: var(--v2-text-text-base);
+  border: 0.5px solid var(--v2-border-border-muted);
 }

 [data-component="tabs-v2"][data-variant="pill"][data-orientation="horizontal"]
  [data-slot="tabs-v2-trigger-wrapper"]:has([data-selected]) {
-  background-color: var(--background-bg-layer-02);
-  color: var(--text-text-base);
-  border: 0.5px solid var(--border-border-muted);
+  background-color: var(--v2-background-bg-layer-02);
+  color: var(--v2-text-text-base);
+  border: 0.5px solid var(--v2-border-border-muted);
 }

 [data-component="tabs-v2"][data-variant="settings"][data-orientation="vertical"] [data-slot="tabs-v2-list"] {
@ -182,13 +181,13 @@
  padding: 12px;
  gap: 4px;
  overflow-y: auto;
-  border-right: 1px solid var(--border-border-base);
+  border-right: 1px solid var(--v2-border-border-base);
 }

 [data-component="tabs-v2"][data-variant="settings"][data-orientation="vertical"] [data-slot="tabs-v2-section-title"] {
  width: 100%;
  padding-left: 4px;
-  color: var(--text-text-muted);
+  color: var(--v2-text-text-muted);
  font-size: 12px;
  font-weight: 500;
 }
@ -199,7 +198,7 @@
  border-radius: 4px;
  border: 0.5px solid transparent;
  box-sizing: border-box;
-  color: var(--text-text-muted);
+  color: var(--v2-text-text-muted);
 }

 [data-component="tabs-v2"][data-variant="settings"][data-orientation="vertical"] [data-slot="tabs-v2-trigger"] {
@ -212,12 +211,12 @@

 [data-component="tabs-v2"][data-variant="settings"][data-orientation="vertical"]
  [data-slot="tabs-v2-trigger-wrapper"]:hover:not(:disabled):not(:has([data-selected])) {
-  color: var(--text-text-base);
+  color: var(--v2-text-text-base);
 }

 [data-component="tabs-v2"][data-variant="settings"][data-orientation="vertical"]
  [data-slot="tabs-v2-trigger-wrapper"]:has([data-selected]) {
-  background-color: var(--background-bg-layer-02);
-  color: var(--text-text-base);
-  border: 0.5px solid var(--border-border-muted);
+  background-color: var(--v2-background-bg-layer-02);
+  color: var(--v2-text-text-base);
+  border: 0.5px solid var(--v2-border-border-muted);
 }
--- a/packages/ui/src/v2/components/text-input-v2.css
+++ b/packages/ui/src/v2/components/text-input-v2.css
@ -11,8 +11,9 @@
  border-radius: 6px;
  outline: 1px solid transparent;
  outline-offset: 0;
-  background: linear-gradient(180deg, var(--alpha-light-2) 0%, var(--alpha-light-0) 100%), var(--background-bg-base);
-  box-shadow: var(--elevation-button-neutral);
+  background:
+    linear-gradient(180deg, var(--v2-alpha-light-2) 0%, var(--v2-alpha-light-0) 100%), var(--v2-background-bg-base);
+  box-shadow: var(--v2-elevation-button-neutral);
  flex: none;
  align-self: stretch;
  transition:
@ -27,17 +28,17 @@

 [data-component="text-input-v2"]:where(:hover):not([data-disabled], [data-invalid]):not(:focus-within) {
  background:
-    linear-gradient(0deg, var(--overlay-simple-overlay-hover), var(--overlay-simple-overlay-hover)),
-    linear-gradient(180deg, var(--alpha-light-2) 0%, var(--alpha-light-0) 100%), var(--background-bg-base);
+    linear-gradient(0deg, var(--v2-overlay-simple-overlay-hover), var(--v2-overlay-simple-overlay-hover)),
+    linear-gradient(180deg, var(--v2-alpha-light-2) 0%, var(--v2-alpha-light-0) 100%), var(--v2-background-bg-base);
 }

 [data-component="text-input-v2"]:where(:focus-within):not([data-disabled], [data-invalid]) {
-  outline-color: var(--border-border-focus);
+  outline-color: var(--v2-border-border-focus);
  box-shadow: none;
 }

 [data-component="text-input-v2"]:where([data-invalid]):not([data-disabled]) {
-  outline-color: var(--state-fg-danger);
+  outline-color: var(--v2-state-fg-danger);
  box-shadow: none;
 }

@ -67,18 +68,17 @@
  border: 0;
  background: transparent;
  outline: none;
-  font-family: var(--v2-font-family-sans);
  font-style: normal;
  font-weight: 440;
  font-size: 13px;
  line-height: 1;
  letter-spacing: -0.04px;
-  color: var(--text-text-base);
+  color: var(--v2-text-text-base);
  font-variation-settings: "slnt" 0;
 }

 [data-component="text-input-v2"] [data-slot="text-input-v2-input"]::placeholder {
-  color: var(--text-text-faint);
+  color: var(--v2-text-text-faint);
 }

 [data-component="text-input-v2"][data-numeric] [data-slot="text-input-v2-input"] {
@ -99,19 +99,19 @@
  border: 0;
  border-radius: 4px;
  background: transparent;
-  color: var(--icon-icon-muted);
+  color: var(--v2-icon-icon-muted);
  cursor: pointer;
  outline: none;
 }

 [data-component="text-input-v2"]
  [data-slot="text-input-v2-icon-button"]:is(:hover, [data-state="hover"]):not(:disabled) {
-  background-color: var(--overlay-simple-overlay-hover);
+  background-color: var(--v2-overlay-simple-overlay-hover);
 }

 [data-component="text-input-v2"]
  [data-slot="text-input-v2-icon-button"]:is(:active, [data-state="pressed"]):not(:disabled) {
-  background-color: var(--overlay-simple-overlay-pressed);
+  background-color: var(--v2-overlay-simple-overlay-pressed);
 }

 [data-component="text-input-v2"] [data-slot="text-input-v2-icon-button"]:focus {
@ -119,7 +119,7 @@
 }

 [data-component="text-input-v2"] [data-slot="text-input-v2-icon-button"]:focus-visible {
-  outline: 2px solid var(--border-border-focus);
+  outline: 2px solid var(--v2-border-border-focus);
  outline-offset: 1px;
 }

@ -135,11 +135,11 @@
 }

 [data-component="text-input-v2"][data-invalid]:not([data-disabled]) [data-slot="text-input-v2-input"] {
-  color: var(--state-fg-danger);
-  caret-color: var(--state-fg-danger);
+  color: var(--v2-state-fg-danger);
+  caret-color: var(--v2-state-fg-danger);
 }

 [data-component="text-input-v2"][data-invalid]:not([data-disabled]) [data-slot="text-input-v2-input"]::placeholder {
-  color: var(--state-fg-danger);
+  color: var(--v2-state-fg-danger);
  opacity: 1;
 }
--- a/packages/ui/src/v2/components/text-input-v2.stories.tsx
+++ b/packages/ui/src/v2/components/text-input-v2.stories.tsx
@ -19,7 +19,7 @@ Compact single-line text field with neutral elevation, optional trailing copy ac
 - **Focus** (\`:focus-within\`): focus border, elevation removed.
 - **Invalid**: danger border and text.
 - **Disabled**: 50% opacity.
- Uses \`data-component="text-input-v2"\` with \`--background-bg-base\`, \`--elevation-button-neutral\`, \`--text-text-faint\` (placeholder), and \`--icon-icon-muted\` (copy icon).
+- Uses \`data-component="text-input-v2"\` with \`--v2-background-bg-base\`, \`--v2-elevation-button-neutral\`, \`--v2-text-text-faint\` (placeholder), and \`--v2-icon-icon-muted\` (copy icon).

 ### Field
 Compose with \`Field\` for label, helper prefix/suffix, and tooltip — see the **Field** story.
--- a/packages/ui/src/v2/components/textarea-v2.css
+++ b/packages/ui/src/v2/components/textarea-v2.css
@ -53,7 +53,6 @@
  background: transparent;
  outline: none;
  resize: vertical;
-  font-family: var(--v2-font-family-sans);
  font-style: normal;
  font-weight: 440;
  font-size: 13px;
--- a/packages/ui/src/v2/components/toast-v2.css
+++ b/packages/ui/src/v2/components/toast-v2.css
@ -43,9 +43,9 @@
  transition: transform 140ms ease-out;

  border-radius: 8px;
-  color: var(--text-text-base);
-  background: var(--background-bg-layer-01);
-  box-shadow: var(--elevation-floating);
+  color: var(--v2-text-text-base);
+  background: var(--v2-background-bg-layer-01);
+  box-shadow: var(--v2-elevation-floating);

  &[data-opened] {
    animation: toastV2PopIn 140ms ease-out;
@ -71,9 +71,10 @@
    height: 20px;
    min-width: 16px;
    min-height: 20px;
+    color: var(--v2-icon-icon-base);

    [data-component="icon"] {
-      color: var(--text-text-base);
+      color: var(--v2-icon-icon-base);
      width: 16px;
      height: 16px;
      display: inline-flex;
@ -109,11 +110,10 @@
  }

  [data-slot="toast-v2-title"] {
-    color: var(--text-text-base);
+    color: var(--v2-text-text-base);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
-    font-family: "Inter Variable";
    font-size: 13px;
    font-style: normal;
    font-weight: 530;
@ -124,11 +124,10 @@
  }

  [data-slot="toast-v2-description"] {
-    color: var(--text-text-muted);
+    color: var(--v2-text-text-muted);
    text-wrap-style: pretty;
    overflow-wrap: anywhere;
    word-break: break-word;
-    font-family: "Inter Variable";
    font-size: 13px;
    font-style: normal;
    font-weight: 440;
@ -147,7 +146,6 @@

  [data-slot="toast-v2-actions"] [data-component="button-v2"] {
    min-height: 24px;
-    font-family: "Inter Variable";
    font-size: 13px;
    font-style: normal;
    font-weight: 530;
@ -166,10 +164,26 @@
    border: 0;
    border-radius: 4px;
    background: transparent;
+    color: var(--v2-icon-icon-muted);
+    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;

+    &:hover {
+      background: var(--v2-overlay-simple-overlay-hover);
+      color: var(--v2-icon-icon-base);
+    }
+
+    &:active {
+      background: var(--v2-overlay-simple-overlay-pressed);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--v2-border-border-focus);
+      outline-offset: 2px;
+    }
+
    svg {
      width: 16px;
      height: 16px;
--- a/packages/ui/src/v2/components/toast-v2.tsx
+++ b/packages/ui/src/v2/components/toast-v2.tsx
@ -61,8 +61,8 @@ function ToastV2CloseButton(props: ToastCloseButtonProps & ComponentProps<"butto
  return (
    <Kobalte.CloseButton data-slot="toast-v2-close-button" aria-label="Dismiss" {...props}>
      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
-        <path d="M4.25 11.75L11.75 4.25" stroke="#FAFAFA" />
-        <path d="M11.75 11.75L4.25 4.25" stroke="#FAFAFA" />
+        <path d="M4.25 11.75L11.75 4.25" stroke="currentColor" />
+        <path d="M11.75 11.75L4.25 4.25" stroke="currentColor" />
      </svg>
    </Kobalte.CloseButton>
  )
--- a/packages/ui/src/v2/components/tool-error-card-v2.css
+++ b/packages/ui/src/v2/components/tool-error-card-v2.css
@ -16,7 +16,6 @@
  padding: 0 0 0 10px;
  gap: 8px;
  border-left: 2px solid var(--tec-border);
-  font-family: var(--v2-font-family-sans), var(--sans), system-ui, sans-serif;
  font-variant-numeric: tabular-nums;

  [data-slot="tool-error-card-trigger"] {
--- a/packages/ui/src/v2/components/tooltip-v2.css
+++ b/packages/ui/src/v2/components/tooltip-v2.css
@ -10,7 +10,6 @@
  box-shadow: var(--elevation-floating);
  border-radius: 4px;

-  font-family: "Inter Variable";
  font-style: normal;
  font-weight: 530;
  font-size: 11px;
--- a/packages/ui/src/v2/styles/theme.css
+++ b/packages/ui/src/v2/styles/theme.css
@ -63,6 +63,26 @@
    --v2-state-fg-info: var(--v2-blue-800);
    --v2-state-border-info: var(--v2-blue-300);

+    /* ── Project avatar ── */
+    --v2-avatar-bg-orange: var(--v2-orange-700);
+    --v2-avatar-border-orange: var(--v2-orange-800);
+    --v2-avatar-bg-yellow: var(--v2-yellow-700);
+    --v2-avatar-border-yellow: var(--v2-yellow-800);
+    --v2-avatar-bg-cyan: var(--v2-cyan-700);
+    --v2-avatar-border-cyan: var(--v2-cyan-800);
+    --v2-avatar-bg-green: var(--v2-green-700);
+    --v2-avatar-border-green: var(--v2-green-800);
+    --v2-avatar-bg-red: var(--v2-red-700);
+    --v2-avatar-border-red: var(--v2-red-800);
+    --v2-avatar-bg-pink: var(--v2-pink-700);
+    --v2-avatar-border-pink: var(--v2-pink-800);
+    --v2-avatar-bg-blue: var(--v2-blue-700);
+    --v2-avatar-border-blue: var(--v2-blue-800);
+    --v2-avatar-bg-purple: var(--v2-purple-700);
+    --v2-avatar-border-purple: var(--v2-purple-800);
+    --v2-avatar-bg-gray: var(--v2-grey-700);
+    --v2-avatar-border-gray: var(--v2-grey-800);
+
    /* ── Elevation ── */
    --v2-elevation-raised:
      0px 2px 4px 0px var(--v2-alpha-dark-4), 0px 1px 2px -1px var(--v2-alpha-dark-8),
@ -285,6 +305,25 @@
    --v2-illustration-illustration-layer-01: var(--v2-grey-300);
    --v2-illustration-illustration-layer-02: var(--v2-grey-400);
    --v2-illustration-illustration-layer-03: var(--v2-grey-500);
+
+    --v2-avatar-bg-orange: var(--v2-orange-700);
+    --v2-avatar-border-orange: var(--v2-orange-800);
+    --v2-avatar-bg-yellow: var(--v2-yellow-700);
+    --v2-avatar-border-yellow: var(--v2-yellow-800);
+    --v2-avatar-bg-cyan: var(--v2-cyan-700);
+    --v2-avatar-border-cyan: var(--v2-cyan-800);
+    --v2-avatar-bg-green: var(--v2-green-700);
+    --v2-avatar-border-green: var(--v2-green-800);
+    --v2-avatar-bg-red: var(--v2-red-700);
+    --v2-avatar-border-red: var(--v2-red-800);
+    --v2-avatar-bg-pink: var(--v2-pink-700);
+    --v2-avatar-border-pink: var(--v2-pink-800);
+    --v2-avatar-bg-blue: var(--v2-blue-700);
+    --v2-avatar-border-blue: var(--v2-blue-800);
+    --v2-avatar-bg-purple: var(--v2-purple-700);
+    --v2-avatar-border-purple: var(--v2-purple-800);
+    --v2-avatar-bg-gray: var(--v2-grey-700);
+    --v2-avatar-border-gray: var(--v2-grey-800);
  }

  /* Explicit dark mode via data attribute (Storybook toggle, runtime JS) */
@ -346,6 +385,25 @@
    --v2-state-fg-info: var(--v2-blue-500);
    --v2-state-border-info: var(--v2-blue-900);

+    --v2-avatar-bg-orange: var(--v2-orange-1100);
+    --v2-avatar-border-orange: var(--v2-orange-600);
+    --v2-avatar-bg-yellow: var(--v2-yellow-1100);
+    --v2-avatar-border-yellow: var(--v2-yellow-700);
+    --v2-avatar-bg-cyan: var(--v2-cyan-1000);
+    --v2-avatar-border-cyan: var(--v2-cyan-700);
+    --v2-avatar-bg-green: var(--v2-green-1000);
+    --v2-avatar-border-green: var(--v2-green-600);
+    --v2-avatar-bg-red: var(--v2-red-1000);
+    --v2-avatar-border-red: var(--v2-red-700);
+    --v2-avatar-bg-pink: var(--v2-pink-1000);
+    --v2-avatar-border-pink: var(--v2-pink-700);
+    --v2-avatar-bg-blue: var(--v2-blue-900);
+    --v2-avatar-border-blue: var(--v2-blue-500);
+    --v2-avatar-bg-purple: var(--v2-purple-1000);
+    --v2-avatar-border-purple: var(--v2-purple-600);
+    --v2-avatar-bg-gray: var(--v2-grey-700);
+    --v2-avatar-border-gray: var(--v2-grey-500);
+
    --v2-elevation-raised:
      0px 2px 4px 0px var(--v2-alpha-dark-30), 0px 1px 2px 0px var(--v2-alpha-dark-30),
      0px 0px 0px 0.5px var(--v2-alpha-light-16), 0px -0.5px 0px 0px var(--v2-alpha-light-6);