diff --git a/docs/userstyles.md b/docs/userstyles.md
index c01c6cf22..cc08bcc0a 100644
--- a/docs/userstyles.md
+++ b/docs/userstyles.md
@@ -1,64 +1,151 @@
-# Userstyle selectors
+# Browser userstyles
 
-Witchsky exposes stable `wsky-` CSS classes on the web app for browser
-userstyles. These names are an additive compatibility API: generated
-React Native Web classes such as `css-*` and `r-*` are implementation details
-and should not be targeted.
+The Witchsky web app exposes relatively stable `wsky-` CSS classes for browser
+userstyle and userscript use. These names are an additive compatibility API.
+Generated React Native Web classes such as `css-*` and `r-*`, exact inline styles,
+DOM position, and `data-testid` values are implementation details and probably
+shouldn't be targeted.
 
-## Stable classes
+## Selector reference
+
+Every selector below is part of the stable userstyle API.
+
+### App layout and navigation
 
 | Selector | Element |
 | --- | --- |
 | `.wsky-main` | Main application content |
-| `.wsky-screen` | Any screen root |
-| `.wsky-screen--home` | Home screen |
-| `.wsky-screen--profile` | Profile screen |
-| `.wsky-screen--post-thread` | Post thread screen |
+| `.wsky-center` | Shared centered-column container |
+| `.wsky-center-borders` | Desktop vertical border rails around the center column |
+| `.wsky-header` | Shared screen header |
+| `.wsky-screen` | Root of any screen |
 | `.wsky-nav` | Any primary navigation container |
 | `.wsky-nav--desktop` | Desktop left navigation |
 | `.wsky-nav--mobile` | Mobile web bottom navigation |
+| `.wsky-nav--compact` | Desktop navigation in compact rail mode |
 | `.wsky-nav__item` | Primary navigation item |
+| `.wsky-nav__compose` | Desktop compose action wrapper |
 | `.wsky-sidebar` | Any secondary sidebar |
 | `.wsky-sidebar--right` | Desktop right sidebar |
 | `.wsky-tabs` | Tab list |
-| `.wsky-feed-page` | Feed page container |
+| `.wsky-fab` | Shared floating action button root |
+| `.wsky-fab--compose` | Floating compose button |
+| `.wsky-fab--load-latest` | Floating load/scroll-to-latest button |
+
+### Screens and major regions
+
+All named screen roots also have `.wsky-screen`.
+
+| Selector | Element |
+| --- | --- |
+| `.wsky-screen--home` | Home screen |
+| `.wsky-screen--profile` | Profile screen |
+| `.wsky-screen--post-thread` | Post thread screen |
+| `.wsky-screen--search` | Search screen |
+| `.wsky-screen--notifications` | Notifications screen |
+| `.wsky-screen--settings` | Settings screen |
+| `.wsky-screen--bookmarks` | Saved Posts screen |
+| `.wsky-screen--saved-feeds` | Saved Feeds editor screen |
+| `.wsky-screen--feeds` | Feeds discovery screen |
+| `.wsky-screen--lists` | Lists screen |
+| `.wsky-screen--messages` | Chat list screen |
+| `.wsky-profile` | Profile content |
+| `.wsky-profile__header` | Profile header |
+| `.wsky-search` | Search content |
+| `.wsky-notifications` | Notifications content |
+| `.wsky-settings` | Settings content |
+| `.wsky-bookmarks` | Saved Posts list |
+| `.wsky-saved-feeds` | Saved Feeds editor content |
+| `.wsky-saved-feeds__item` | Saved feed row |
+| `.wsky-saved-feeds__item--pinned` | Pinned saved-feed row |
+| `.wsky-saved-feeds__item--unpinned` | Unpinned saved-feed row |
+| `.wsky-feeds` | Feeds discovery content |
+| `.wsky-lists` | Lists content |
+| `.wsky-messages` | Chat list content |
+| `.wsky-home__topbar` | Desktop/tablet home logo and feeds-shortcut row |
+| `.wsky-home__tabs-region` | Desktop/tablet sticky home tabs region |
+| `.wsky-also-liked` | Also Liked section in a post thread |
+| `.wsky-also-liked__header` | Also Liked expand/collapse header |
+
+### Feeds, cards, and empty states
+
+| Selector | Element |
+| --- | --- |
+| `.wsky-feed-page` | One feed page inside a pager |
 | `.wsky-feed` | Feed list |
 | `.wsky-feed-item` | Feed item |
-| `.wsky-post` | Post feed item |
+| `.wsky-feed-card` | Feed or list source card |
+| `.wsky-empty-state` | Shared empty-state container |
+
+### Posts
+
+The post hooks are shared by home and custom feeds, search results, hashtag and
+topic results, Saved Posts, Also Liked cards, and non-focused posts in thread
+views.
+
+| Selector | Element |
+| --- | --- |
+| `.wsky-post` | Post item in a feed, result list, saved list, or thread |
+| `.wsky-post__surface` | Visible post surface; use for card background, padding, border, and radius |
+| `.wsky-post__hover` | Post hover/pressed overlay |
 | `.wsky-post__meta` | Post author and timestamp area |
 | `.wsky-post__content` | Post content area |
 | `.wsky-post__text` | Post text container |
-| `.wsky-post__embed` | Post embed container |
+| `.wsky-post__embed` | Entire post embed, including media, link, quote, poll, or record cards |
+| `.wsky-post__media` | Image, gallery, or video surface inside an embed |
+| `.wsky-post__gallery-scroll` | Horizontal scrolling container inside an expanded gallery |
 | `.wsky-post__actions` | Reply, repost, like, and share controls |
-| `.wsky-profile` | Profile content |
-| `.wsky-profile__header` | Profile header |
+
+### Composer, dialogs, and menus
+
+| Selector | Element |
+| --- | --- |
 | `.wsky-composer` | Post composer |
 | `.wsky-composer__topbar` | Composer top bar |
+| `.wsky-dialog` | Shared dialog content layer |
+| `.wsky-dialog__backdrop` | Shared dialog backdrop |
+| `.wsky-menu` | Shared dropdown menu surface |
+| `.wsky-menu__item` | Shared dropdown menu item |
+
+## State attributes
+
+Classes describe what an element is. `data-wsky-*` attributes expose stable
+state and subtype values.
+
+| Attribute | Element | Values |
+| --- | --- | --- |
+| `data-wsky-nav-item` | `.wsky-nav__item` | `home`, `search`, `notifications`, `chat`, `feeds`, `lists`, `saved`, `profile`, or `settings` |
+| `data-wsky-active` | `.wsky-nav__item` | `true` or `false` |
+| `data-wsky-embed` | `.wsky-post` | `true` or `false` |
+| `data-wsky-reply` | `.wsky-post` | `true` or `false` |
+| `data-wsky-repost` | `.wsky-post` | `true` or `false` |
+| `data-feed-context` | Feed posts when supplied by the feed | Opaque feed context |
 
-Some elements also expose state as `data-wsky-*` attributes. For example:
+For example:
 
 ```css
-/* Hide embeds in reposts. */
+/* Hide embeds only on reposts. */
 .wsky-post[data-wsky-repost='true'] .wsky-post__embed {
   display: none !important;
 }
 
-/* Make post text a little larger. */
-.wsky-post__text {
-  font-size: 17px !important;
+/* Emphasize the active desktop navigation item. */
+.wsky-nav--desktop
+  .wsky-nav__item[data-wsky-active='true'] {
+  background: color-mix(in srgb, AccentColor 15%, transparent) !important;
 }
 ```
 
-Navigation items expose `data-wsky-nav-item` (`home`, `search`, `chat`,
-`notifications`, or `profile`) and `data-wsky-active`. Posts expose
-`data-wsky-embed`, `data-wsky-reply`, `data-wsky-repost`, and the existing
-`data-feed-context`.
+## Notes
 
-React Native Web may apply inline styles, so userstyles will sometimes need
-`!important`. Existing `data-testid` values remain available, but they are test
-hooks rather than part of this compatibility API.
+- React Native Web often emits inline styles, so userstyles will sometimes need
+`!important`.
+- Existing `data-testid` values remain available for tests, but are not part of
+  this compatibility API.
+- Prefer semantic hooks over element names or DOM relationships. React Native
+  Web may add or remove wrapper elements between releases.
+- Removing or changing a published selector or attribute is a breaking change
+  for userstyle authors. Adding selectors is backward compatible.
 
-When adding a new selector, use `userStyle()` from `#/lib/userstyles`, keep the
-name semantic rather than visual, and update this list. Removing or changing a
-published selector should be treated as a breaking change for userstyle
-authors.
+When adding a hook in Witchsky, use `userStyle()` from `#/lib/userstyles`, keep
+the name semantic rather than visual, and update this guide.
diff --git a/src/components/Dialog/index.web.tsx b/src/components/Dialog/index.web.tsx
index fb2143f70..3e67e32a9 100644
--- a/src/components/Dialog/index.web.tsx
+++ b/src/components/Dialog/index.web.tsx
@@ -22,6 +22,7 @@ import {useLingui} from '@lingui/react'
 import {DismissableLayer, FocusGuards, FocusScope} from 'radix-ui/internal'
 import {RemoveScrollBar} from 'react-remove-scroll-bar'
 
+import {userStyle} from '#/lib/userstyles'
 import {logger} from '#/logger'
 import {useA11y} from '#/state/a11y'
 import {useDialogStateControlContext} from '#/state/dialogs'
@@ -217,6 +218,7 @@ export function Inner({
           style,
         ])}>
         <DismissableLayer.DismissableLayer
+          className="wsky-dialog"
           onInteractOutside={preventDefault}
           onFocusOutside={preventDefault}
           onDismiss={close}
@@ -364,7 +366,7 @@ export function Backdrop() {
   const t = useTheme()
   const {reduceMotionEnabled} = useA11y()
   return (
-    <View style={{opacity: 0.8}}>
+    <View style={[userStyle('wsky-dialog__backdrop'), {opacity: 0.8}]}>
       <View
         style={[
           a.fixed,
diff --git a/src/components/Layout/Header/index.tsx b/src/components/Layout/Header/index.tsx
index a0bd45c8f..336b7cc2a 100644
--- a/src/components/Layout/Header/index.tsx
+++ b/src/components/Layout/Header/index.tsx
@@ -5,6 +5,7 @@ import {useLingui} from '@lingui/react'
 import {useNavigation} from '@react-navigation/native'
 
 import {type NavigationProp} from '#/lib/routes/types'
+import {userStyle} from '#/lib/userstyles'
 import {useSetDrawerOpen} from '#/state/shell'
 import {useIsWithinSplitView} from '#/screens/Messages/components/splitView/context'
 import {
@@ -56,6 +57,7 @@ export function Outer({
     <View
       ref={headerRef}
       style={[
+        userStyle('wsky-header'),
         a.w_full,
         !noBottomBorder && a.border_b,
         a.flex_row,
diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx
index 326e4fe01..a0246521b 100644
--- a/src/components/Layout/index.tsx
+++ b/src/components/Layout/index.tsx
@@ -110,6 +110,7 @@ export const Content = memo(function Content({
       automaticallyAdjustsScrollIndicatorInsets={false}
       indicatorStyle={t.scheme === 'dark' ? 'white' : 'black'}
       style={[
+        userStyle('wsky-center'),
         a.w_full,
         animatedStyle,
         isWithinSplitView &&
@@ -192,6 +193,7 @@ const WebCenterBorders = memo(function LayoutWebCenterBorders() {
   return gtMobile ? (
     <View
       style={[
+        userStyle('wsky-center-borders'),
         a.fixed,
         a.inset_0,
         a.border_l,
diff --git a/src/components/Menu/index.web.tsx b/src/components/Menu/index.web.tsx
index 20a3ff55b..2c145c2e6 100644
--- a/src/components/Menu/index.web.tsx
+++ b/src/components/Menu/index.web.tsx
@@ -10,6 +10,7 @@ import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
 import {DropdownMenu} from 'radix-ui'
 
+import {userStyle} from '#/lib/userstyles'
 import {useA11y} from '#/state/a11y'
 import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {atoms as a, flatten, useTheme, web} from '#/alf'
@@ -218,6 +219,7 @@ export function Outer({
         className="dropdown-menu-transform-origin dropdown-menu-constrain-size">
         <View
           style={[
+            userStyle('wsky-menu'),
             a.rounded_sm,
             a.p_xs,
             a.border,
@@ -266,6 +268,10 @@ export function Item({
     <DropdownMenu.Item asChild>
       <Pressable
         {...rest}
+        ref={node => {
+          const element = node as unknown as HTMLElement | null
+          element?.classList.add('wsky-menu__item')
+        }}
         className="radix-dropdown-item"
         accessibilityHint=""
         accessibilityLabel={label}
@@ -331,7 +337,11 @@ export function Submenu({children, label, trigger, style}: SubmenuProps) {
     <DropdownMenu.Sub open={open} onOpenChange={setOpen}>
       <DropdownMenu.SubTrigger asChild>
         <Pressable
-          ref={triggerRef}
+          ref={node => {
+            triggerRef.current = node
+            const element = node as unknown as HTMLElement | null
+            element?.classList.add('wsky-menu__item')
+          }}
           className="radix-dropdown-item"
           accessibilityHint=""
           accessibilityLabel={label}
@@ -407,6 +417,7 @@ export function Submenu({children, label, trigger, style}: SubmenuProps) {
           className="dropdown-menu-transform-origin dropdown-menu-constrain-size">
           <View
             style={[
+              userStyle('wsky-menu'),
               a.rounded_sm,
               a.p_xs,
               a.border,
diff --git a/src/components/Post/Embed/ImageEmbed.tsx b/src/components/Post/Embed/ImageEmbed.tsx
index 574269153..d633eed2a 100644
--- a/src/components/Post/Embed/ImageEmbed.tsx
+++ b/src/components/Post/Embed/ImageEmbed.tsx
@@ -5,6 +5,7 @@ import {Image} from 'expo-image'
 import {AppBskyEmbedGallery, type AppBskyEmbedImages} from '@atproto/api'
 
 import {resolveEmbedImageUris} from '#/lib/media/embed-image-formats'
+import {userStyle} from '#/lib/userstyles'
 import {useFullsizeFormat} from '#/state/preferences/fullsize-format'
 import {
   applyImageTransforms,
@@ -136,7 +137,7 @@ export function ImageEmbed({
       }
 
       return (
-        <View style={[a.mt_sm, rest.style]}>
+        <View style={[a.mt_sm, rest.style, userStyle('wsky-post__media')]}>
           <ImageContextMenu
             fullsizeUri={image.fullsize}
             thumbUri={image.thumb}
@@ -168,7 +169,7 @@ export function ImageEmbed({
 
     if (useExpandedLayout) {
       return (
-        <View style={[a.mt_sm, rest.style]}>
+        <View style={[a.mt_sm, rest.style, userStyle('wsky-post__media')]}>
           <Gallery
             images={images}
             onPress={onPress}
@@ -182,7 +183,7 @@ export function ImageEmbed({
     }
 
     return (
-      <View style={[a.mt_sm, rest.style]}>
+      <View style={[a.mt_sm, rest.style, userStyle('wsky-post__media')]}>
         <ImageLayoutGrid
           images={images}
           onPress={onPress}
diff --git a/src/components/Post/Embed/VideoEmbed/index.tsx b/src/components/Post/Embed/VideoEmbed/index.tsx
index 2220b6173..7ab8afc4a 100644
--- a/src/components/Post/Embed/VideoEmbed/index.tsx
+++ b/src/components/Post/Embed/VideoEmbed/index.tsx
@@ -10,6 +10,7 @@ import {
   createPlaybackTelemetry,
   type PlaybackTelemetry,
 } from '#/lib/media/video/playbackTelemetry'
+import {userStyle} from '#/lib/userstyles'
 import {ErrorBoundary} from '#/view/com/util/ErrorBoundary'
 import {atoms as a, platform} from '#/alf'
 import {Button} from '#/components/Button'
@@ -58,7 +59,7 @@ export function VideoEmbed({embed}: Props) {
   )
 
   return (
-    <View style={[a.pt_xs]}>
+    <View style={[a.pt_xs, userStyle('wsky-post__media')]}>
       <ConstrainedImage
         aspectRatio={constrained || 1}
         // slightly smaller max height than images
diff --git a/src/components/images/Gallery/index.tsx b/src/components/images/Gallery/index.tsx
index b3c2df995..dc2dee298 100644
--- a/src/components/images/Gallery/index.tsx
+++ b/src/components/images/Gallery/index.tsx
@@ -21,6 +21,7 @@ import debounce from 'lodash.debounce'
 
 import {type Dimensions} from '#/lib/media/types'
 import {mergeRefs} from '#/lib/merge-refs'
+import {userStyle} from '#/lib/userstyles'
 import {useA11y} from '#/state/a11y'
 import {
   applyImageTransforms,
@@ -352,6 +353,7 @@ export function Gallery({
             }
           }}
           style={[
+            userStyle('wsky-post__gallery-scroll'),
             {
               height: contentHeight,
               marginLeft: -insetLeft,
diff --git a/src/screens/Bookmarks.tsx b/src/screens/Bookmarks.tsx
index fdeb91777..1f1ea9e94 100644
--- a/src/screens/Bookmarks.tsx
+++ b/src/screens/Bookmarks.tsx
@@ -21,6 +21,7 @@ import {
   type NativeStackScreenProps,
 } from '#/lib/routes/types'
 import {cleanError} from '#/lib/strings/errors'
+import {userStyle} from '#/lib/userstyles'
 import {useBookmarkMutation} from '#/state/queries/bookmarks/useBookmarkMutation'
 import {useBookmarksQuery} from '#/state/queries/bookmarks/useBookmarksQuery'
 import {Post} from '#/view/com/post/Post'
@@ -51,7 +52,9 @@ export function BookmarksScreen({}: Props) {
   )
 
   return (
-    <Layout.Screen testID="bookmarksScreen">
+    <Layout.Screen
+      testID="bookmarksScreen"
+      style={userStyle('wsky-screen--bookmarks')}>
       <Layout.Header.Outer>
         <Layout.Header.BackButton />
         <Layout.Header.Content>
@@ -165,6 +168,7 @@ function BookmarksInner() {
 
   return (
     <List
+      style={userStyle('wsky-bookmarks')}
       data={items}
       renderItem={renderItem}
       keyExtractor={keyExtractor}
diff --git a/src/screens/CustomFeed/index.tsx b/src/screens/CustomFeed/index.tsx
index 4f2a6e090..698706982 100644
--- a/src/screens/CustomFeed/index.tsx
+++ b/src/screens/CustomFeed/index.tsx
@@ -212,6 +212,7 @@ export function CustomFeedScreenInner({
       {hasSession && (
         <FAB
           testID="composeFAB"
+          userStyleVariant="compose"
           onPress={() => openComposer({logContext: 'Fab'})}
           icon={<EditBigIcon size="lg" fill={t.palette.white} />}
           accessibilityRole="button"
diff --git a/src/screens/Messages/ChatList.tsx b/src/screens/Messages/ChatList.tsx
index 949ebf12b..cee6f0995 100644
--- a/src/screens/Messages/ChatList.tsx
+++ b/src/screens/Messages/ChatList.tsx
@@ -18,6 +18,7 @@ import {
   type NavigationProp,
 } from '#/lib/routes/types'
 import {cleanError} from '#/lib/strings/errors'
+import {userStyle} from '#/lib/userstyles'
 import {logger} from '#/logger'
 import {listenSoftReset} from '#/state/events'
 import {MESSAGE_SCREEN_POLL_INTERVAL} from '#/state/messages/convo/const'
@@ -250,7 +251,9 @@ export function MessagesScreenInner({navigation, route}: Props) {
   }
 
   return (
-    <Layout.Screen testID="messagesScreen">
+    <Layout.Screen
+      testID="messagesScreen"
+      style={userStyle('wsky-screen--messages')}>
       <Header newChatControl={newChatControl} chatStatus={chatStatus} />
       <ChatList newChatControl={newChatControl} chatStatus={chatStatus} />
       <NewChat
@@ -500,15 +503,16 @@ export function ChatList({
       desktopFixedHeight
       sideBorders={false}
       disableFullWindowScroll={isWithinSplitView}
-      style={
+      style={[
+        userStyle('wsky-messages'),
         isWithinSplitView && [
           a.w_full,
           web({
             scrollbarWidth: 'thin',
             scrollbarColor: `${t.palette.contrast_100} transparent`,
           }),
-        ]
-      }
+        ],
+      ]}
       contentContainerStyle={
         isWithinSplitView && !chatStatus?.chatDisabled && a.py_sm
       }
diff --git a/src/screens/PostThread/components/ThreadAlsoLiked.tsx b/src/screens/PostThread/components/ThreadAlsoLiked.tsx
index 8805df35a..af4015c18 100644
--- a/src/screens/PostThread/components/ThreadAlsoLiked.tsx
+++ b/src/screens/PostThread/components/ThreadAlsoLiked.tsx
@@ -5,6 +5,7 @@ import {Trans, useLingui} from '@lingui/react/macro'
 import {useQueryClient} from '@tanstack/react-query'
 
 import {cleanError} from '#/lib/strings/errors'
+import {userStyle} from '#/lib/userstyles'
 import {unstableCacheProfileView} from '#/state/queries/profile'
 import {
   buildPostSourceKey,
@@ -64,7 +65,12 @@ export function ThreadAlsoLiked({
   return (
     <View>
       {hasSection && (
-        <View style={[a.border_t, t.atoms.border_contrast_low]}>
+        <View
+          style={[
+            userStyle('wsky-also-liked'),
+            a.border_t,
+            t.atoms.border_contrast_low,
+          ]}>
           <Button.Button
             ref={headerRef}
             label={
@@ -77,6 +83,7 @@ export function ThreadAlsoLiked({
             {({hovered, pressed}) => (
               <View
                 style={[
+                  userStyle('wsky-also-liked__header'),
                   a.w_full,
                   a.flex_row,
                   a.align_center,
diff --git a/src/screens/PostThread/components/ThreadItemPost.tsx b/src/screens/PostThread/components/ThreadItemPost.tsx
index 304f17ac2..1f4425705 100644
--- a/src/screens/PostThread/components/ThreadItemPost.tsx
+++ b/src/screens/PostThread/components/ThreadItemPost.tsx
@@ -12,6 +12,7 @@ import {MAX_POST_LINES} from '#/lib/constants'
 import {useOpenComposer} from '#/lib/hooks/useOpenComposer'
 import {makeProfileLink} from '#/lib/routes/links'
 import {countLines} from '#/lib/strings/helpers'
+import {userStyle} from '#/lib/userstyles'
 import {
   POST_TOMBSTONE,
   type Shadow,
@@ -159,7 +160,14 @@ const ThreadItemPostOuterWrapper = memo(function ThreadItemPostOuterWrapper({
   return (
     <GalleryBleed>
       <View
+        // @ts-expect-error web only -wsky
+        dataSet={{
+          wskyEmbed: item.value.post.embed ? 'true' : 'false',
+          wskyReply: item.value.post.record.reply ? 'true' : 'false',
+          wskyRepost: 'false',
+        }}
         style={[
+          userStyle('wsky-post', 'wsky-post__surface'),
           showTopBorder && [a.border_t, t.atoms.border_contrast_low],
           {paddingHorizontal: compactPosts ? OUTER_SPACE - 2 : OUTER_SPACE},
           // If there's no next child, add a little padding to bottom
@@ -332,7 +340,7 @@ const ThreadItemPostInner = memo(function ThreadItemPostInner({
               )}
             </View>
 
-            <View style={[a.flex_1]}>
+            <View style={[a.flex_1, userStyle('wsky-post__content')]}>
               <PostMeta
                 author={post.author}
                 moderation={moderation}
@@ -358,7 +366,7 @@ const ThreadItemPostInner = memo(function ThreadItemPostInner({
                 additionalCauses={additionalPostAlerts}
               />
               {richText?.text ? (
-                <View style={[a.mb_2xs]}>
+                <View style={[a.mb_2xs, userStyle('wsky-post__text')]}>
                   <RichText
                     enableTags
                     value={richText}
@@ -393,6 +401,7 @@ const ThreadItemPostInner = memo(function ThreadItemPostInner({
               {post.embed && (
                 <View
                   style={[
+                    userStyle('wsky-post__embed'),
                     maybeApplyGalleryOffsetStyles('embed', {
                       post,
                       modui: moderation.ui('contentList'),
@@ -444,7 +453,10 @@ function SubtleHoverWrapper({
       onPointerEnter={onHoverIn}
       onPointerLeave={onHoverOut}
       style={a.pointer}>
-      <SubtleHover hover={hover} style={hoverStyle} />
+      <SubtleHover
+        hover={hover}
+        style={[hoverStyle, userStyle('wsky-post__hover')]}
+      />
       {children}
     </View>
   )
diff --git a/src/screens/PostThread/components/ThreadItemReaderSegment.tsx b/src/screens/PostThread/components/ThreadItemReaderSegment.tsx
index 99042876b..017a6704b 100644
--- a/src/screens/PostThread/components/ThreadItemReaderSegment.tsx
+++ b/src/screens/PostThread/components/ThreadItemReaderSegment.tsx
@@ -7,6 +7,7 @@ import {
 } from '@atproto/api'
 import {Trans} from '@lingui/react/macro'
 
+import {userStyle} from '#/lib/userstyles'
 import {
   POST_TOMBSTONE,
   type Shadow,
@@ -120,10 +121,17 @@ const ThreadItemReaderSegmentInner = memo(
       [record],
     )
     return (
-      <View>
+      <View
+        // @ts-expect-error web only -wsky
+        dataSet={{
+          wskyEmbed: post.embed ? 'true' : 'false',
+          wskyReply: record.reply ? 'true' : 'false',
+          wskyRepost: 'false',
+        }}
+        style={userStyle('wsky-post', 'wsky-post__surface')}>
         <GalleryBleed>
           <View style={[{paddingHorizontal: OUTER_SPACE}]}>
-            <View>
+            <View style={userStyle('wsky-post__content')}>
               {seam.expanded && (
                 <>
                   <LabelsOnMyPost post={post} style={[a.pb_xs]} />
@@ -134,7 +142,7 @@ const ThreadItemReaderSegmentInner = memo(
                 </>
               )}
               {richText?.text ? (
-                <View style={[a.mb_2xs]}>
+                <View style={[a.mb_2xs, userStyle('wsky-post__text')]}>
                   {/* Intentionally not line-limited: reader view is for
                       uninterrupted reading */}
                   <RichText
@@ -153,7 +161,7 @@ const ThreadItemReaderSegmentInner = memo(
                 postTextStyle={[a.text_lg]}
               />
               {post.embed && (
-                <View style={[a.pb_2xs]}>
+                <View style={[a.pb_2xs, userStyle('wsky-post__embed')]}>
                   <Embed
                     embed={post.embed}
                     moderation={moderation}
diff --git a/src/screens/PostThread/components/ThreadItemTreePost.tsx b/src/screens/PostThread/components/ThreadItemTreePost.tsx
index ec519a0f7..ba036fe0c 100644
--- a/src/screens/PostThread/components/ThreadItemTreePost.tsx
+++ b/src/screens/PostThread/components/ThreadItemTreePost.tsx
@@ -12,6 +12,7 @@ import {MAX_POST_LINES} from '#/lib/constants'
 import {useOpenComposer} from '#/lib/hooks/useOpenComposer'
 import {makeProfileLink} from '#/lib/routes/links'
 import {countLines} from '#/lib/strings/helpers'
+import {userStyle} from '#/lib/userstyles'
 import {
   POST_TOMBSTONE,
   type Shadow,
@@ -139,7 +140,14 @@ const ThreadItemTreePostOuterWrapper = memo(
     return (
       <GalleryBleed>
         <View
+          // @ts-expect-error web only -wsky
+          dataSet={{
+            wskyEmbed: item.value.post.embed ? 'true' : 'false',
+            wskyReply: item.value.post.record.reply ? 'true' : 'false',
+            wskyRepost: 'false',
+          }}
           style={[
+            userStyle('wsky-post', 'wsky-post__surface'),
             a.flex_row,
             item.ui.indent === 1 &&
               !item.ui.showParentReplyLine && [
@@ -336,7 +344,7 @@ const ThreadItemTreePostInner = memo(function ThreadItemTreePostInner({
           profile={post.author}
           interpretFilterAsBlur>
           <ThreadItemTreePostInnerWrapper item={item}>
-            <View style={[a.flex_1]}>
+            <View style={[a.flex_1, userStyle('wsky-post__content')]}>
               <PostMeta
                 author={post.author}
                 moderation={moderation}
@@ -356,7 +364,7 @@ const ThreadItemTreePostInner = memo(function ThreadItemTreePostInner({
                     additionalCauses={additionalPostAlerts}
                   />
                   {richText?.text ? (
-                    <View style={[a.mb_2xs]}>
+                    <View style={[a.mb_2xs, userStyle('wsky-post__text')]}>
                       <RichText
                         enableTags
                         value={richText}
@@ -392,7 +400,7 @@ const ThreadItemTreePostInner = memo(function ThreadItemTreePostInner({
                   )}
                   <TranslatedPost hideTranslateLink post={post} />
                   {post.embed && (
-                    <View style={[a.pb_xs]}>
+                    <View style={[a.pb_xs, userStyle('wsky-post__embed')]}>
                       <Embed
                         embed={post.embed}
                         moderation={moderation}
@@ -433,7 +441,7 @@ function SubtleHoverWrapper({children}: {children: React.ReactNode}) {
       onPointerEnter={onHoverIn}
       onPointerLeave={onHoverOut}
       style={[a.flex_1, a.pointer]}>
-      <SubtleHover hover={hover} />
+      <SubtleHover hover={hover} style={userStyle('wsky-post__hover')} />
       {children}
     </View>
   )
diff --git a/src/screens/ProfileList/index.tsx b/src/screens/ProfileList/index.tsx
index 77af470cd..7000da660 100644
--- a/src/screens/ProfileList/index.tsx
+++ b/src/screens/ProfileList/index.tsx
@@ -231,6 +231,7 @@ function ProfileListScreenLoaded({
             </PagerWithHeader>
             <FAB
               testID="composeFAB"
+              userStyleVariant="compose"
               onPress={() => openComposer({logContext: 'Fab'})}
               icon={<EditBigIcon size="lg" fill={t.palette.white} />}
               accessibilityRole="button"
@@ -274,6 +275,7 @@ function ProfileListScreenLoaded({
           )}
           <FAB
             testID="composeFAB"
+            userStyleVariant="compose"
             onPress={() => openComposer({logContext: 'Fab'})}
             icon={<EditBigIcon size="lg" fill={t.palette.white} />}
             accessibilityRole="button"
diff --git a/src/screens/SavedFeeds.tsx b/src/screens/SavedFeeds.tsx
index db574318f..1e76f8365 100644
--- a/src/screens/SavedFeeds.tsx
+++ b/src/screens/SavedFeeds.tsx
@@ -16,6 +16,7 @@ import {
   type CommonNavigatorParams,
   type NavigationProp,
 } from '#/lib/routes/types'
+import {userStyle} from '#/lib/userstyles'
 import {logger} from '#/logger'
 import {useA11y} from '#/state/a11y'
 import {
@@ -104,7 +105,7 @@ function SavedFeedsInner({
   }
 
   return (
-    <Layout.Screen>
+    <Layout.Screen style={userStyle('wsky-screen--saved-feeds')}>
       <Layout.Header.Outer>
         <Layout.Header.BackButton />
         <Layout.Header.Content align="left">
@@ -126,7 +127,10 @@ function SavedFeedsInner({
         </Button>
       </Layout.Header.Outer>
 
-      <Layout.Content ref={scrollRef} scrollEnabled={!isDragging}>
+      <Layout.Content
+        ref={scrollRef}
+        scrollEnabled={!isDragging}
+        style={userStyle('wsky-saved-feeds')}>
         {noSavedFeedsOfAnyType && (
           <View style={[t.atoms.border_contrast_low, a.border_b]}>
             <NoSavedFeedsOfAnyType
@@ -295,7 +299,7 @@ function SavedFeedsA11y({
   }
 
   return (
-    <Layout.Screen>
+    <Layout.Screen style={userStyle('wsky-screen--saved-feeds')}>
       <Layout.Header.Outer>
         <Layout.Header.BackButton />
         <Layout.Header.Content align="left">
@@ -317,7 +321,7 @@ function SavedFeedsA11y({
         </Button>
       </Layout.Header.Outer>
 
-      <Layout.Content>
+      <Layout.Content style={userStyle('wsky-saved-feeds')}>
         {noSavedFeedsOfAnyType && (
           <View style={[t.atoms.border_contrast_low, a.border_b]}>
             <NoSavedFeedsOfAnyType
@@ -450,7 +454,12 @@ function PinnedFeedItem({
   }
 
   return (
-    <View style={[a.flex_row, t.atoms.bg]}>
+    <View
+      style={[
+        userStyle('wsky-saved-feeds__item', 'wsky-saved-feeds__item--pinned'),
+        a.flex_row,
+        t.atoms.bg,
+      ]}>
       {feed.type === 'timeline' ? (
         <FollowingFeedCard />
       ) : (
@@ -533,7 +542,13 @@ function UnpinnedFeedItem({
   }
 
   return (
-    <View style={[a.flex_row, a.border_b, t.atoms.border_contrast_low]}>
+    <View
+      style={[
+        userStyle('wsky-saved-feeds__item', 'wsky-saved-feeds__item--unpinned'),
+        a.flex_row,
+        a.border_b,
+        t.atoms.border_contrast_low,
+      ]}>
       {feed.type === 'timeline' ? (
         <FollowingFeedCard />
       ) : (
diff --git a/src/screens/Search/Shell.tsx b/src/screens/Search/Shell.tsx
index b9eac11f5..0a1531423 100644
--- a/src/screens/Search/Shell.tsx
+++ b/src/screens/Search/Shell.tsx
@@ -27,6 +27,7 @@ import {HITSLOP_10, HITSLOP_20} from '#/lib/constants'
 import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
 import {MagnifyingGlassIcon} from '#/lib/icons'
 import {type NavigationProp, type SearchParams} from '#/lib/routes/types'
+import {userStyle} from '#/lib/userstyles'
 import {listenSoftReset} from '#/state/events'
 import {
   unstableCacheProfileView,
@@ -517,7 +518,9 @@ export function SearchScreenShell({
   const showHeader = !gtMobile || navButton !== 'menu'
 
   return (
-    <Layout.Screen testID={testID}>
+    <Layout.Screen
+      testID={testID}
+      style={userStyle('wsky-screen--search')}>
       <View
         ref={headerRef}
         onLayout={evt => {
@@ -643,7 +646,7 @@ export function SearchScreenShell({
         </Layout.Center>
       </View>
 
-      <View style={[a.flex_1, a.relative]}>
+      <View style={[a.flex_1, a.relative, userStyle('wsky-search')]}>
         <View style={[a.flex_1, web(showAutocomplete && a.hidden)]}>
           <SearchScreenInner
             key={filters.lang ?? ''}
diff --git a/src/screens/Settings/Settings.tsx b/src/screens/Settings/Settings.tsx
index af5e69827..37fb7495d 100644
--- a/src/screens/Settings/Settings.tsx
+++ b/src/screens/Settings/Settings.tsx
@@ -21,6 +21,7 @@ import {
 } from '#/lib/routes/types'
 import {getAuthorPrimaryName} from '#/lib/strings/display-names'
 import {sanitizeHandle} from '#/lib/strings/handles'
+import {userStyle} from '#/lib/userstyles'
 import {useProfileShadow} from '#/state/cache/profile-shadow'
 import * as persisted from '#/state/persisted'
 import {clearStorage} from '#/state/persisted'
@@ -180,7 +181,7 @@ export function SettingsScreen({}: Props) {
   }
 
   return (
-    <Layout.Screen>
+    <Layout.Screen style={userStyle('wsky-screen--settings')}>
       <Layout.Header.Outer>
         <Layout.Header.BackButton />
         <Layout.Header.Content>
@@ -190,7 +191,10 @@ export function SettingsScreen({}: Props) {
         </Layout.Header.Content>
         <AppServerHeaderControl />
       </Layout.Header.Outer>
-      <Layout.Content ref={scrollRef} scrollEnabled={!isDraggingAccounts}>
+      <Layout.Content
+        ref={scrollRef}
+        scrollEnabled={!isDraggingAccounts}
+        style={userStyle('wsky-settings')}>
         <SettingsList.Container>
           <AgeAssuranceDismissibleNotice style={[a.px_lg, a.pt_xs, a.pb_xl]} />
 
diff --git a/src/view/com/feeds/FeedPage.tsx b/src/view/com/feeds/FeedPage.tsx
index fea19cb88..07d090aa1 100644
--- a/src/view/com/feeds/FeedPage.tsx
+++ b/src/view/com/feeds/FeedPage.tsx
@@ -175,6 +175,7 @@ export function FeedPage({
       {hasSession && (
         <FAB
           testID="composeFAB"
+          userStyleVariant="compose"
           onPress={onPressCompose}
           icon={<EditBigIcon size="lg" fill={t.palette.white} />}
           accessibilityRole="button"
diff --git a/src/view/com/feeds/FeedSourceCard.tsx b/src/view/com/feeds/FeedSourceCard.tsx
index ee6239255..dd9bd22a7 100644
--- a/src/view/com/feeds/FeedSourceCard.tsx
+++ b/src/view/com/feeds/FeedSourceCard.tsx
@@ -10,6 +10,7 @@ import {useLingui} from '@lingui/react'
 import {Plural, Trans} from '@lingui/react/macro'
 
 import {sanitizeHandle} from '#/lib/strings/handles'
+import {userStyle} from '#/lib/userstyles'
 import {
   type FeedSourceInfo,
   hydrateFeedGenerator,
@@ -197,6 +198,7 @@ export function FeedSourceCardLoaded({
           params: {name: feed.creatorDid, rkey: new AtUri(feed.uri).rkey},
         }}
         style={[
+          userStyle('wsky-feed-card'),
           a.flex_1,
           a.p_lg,
           a.gap_md,
@@ -211,6 +213,7 @@ export function FeedSourceCardLoaded({
     return (
       <View
         style={[
+          userStyle('wsky-feed-card'),
           a.flex_1,
           a.p_lg,
           a.gap_md,
diff --git a/src/view/com/home/HomeHeaderLayout.web.tsx b/src/view/com/home/HomeHeaderLayout.web.tsx
index ffd09523f..39d55d235 100644
--- a/src/view/com/home/HomeHeaderLayout.web.tsx
+++ b/src/view/com/home/HomeHeaderLayout.web.tsx
@@ -4,6 +4,7 @@ import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
 
 import {HITSLOP_10} from '#/lib/constants'
+import {userStyle} from '#/lib/userstyles'
 import {useSession} from '#/state/session'
 import {useShellLayout} from '#/state/shell/shell-layout'
 import {HomeHeaderLayoutMobile} from '#/view/com/home/HomeHeaderLayoutMobile'
@@ -48,7 +49,14 @@ function HomeHeaderLayoutDesktopAndTablet({
       {hasSession && (
         <Layout.Center>
           <View
-            style={[a.flex_row, a.align_center, gutters, a.pt_md, t.atoms.bg]}>
+            style={[
+              userStyle('wsky-home__topbar'),
+              a.flex_row,
+              a.align_center,
+              gutters,
+              a.pt_md,
+              t.atoms.bg,
+            ]}>
             <View style={{width: 34}} />
             <View style={[a.flex_1, a.align_center, a.justify_center]}>
               <Logo
@@ -80,7 +88,14 @@ function HomeHeaderLayoutDesktopAndTablet({
       )}
       {tabBarAnchor}
       <Layout.Center
-        style={[a.sticky, a.z_10, a.align_center, t.atoms.bg, {top: 0}]}
+        style={[
+          userStyle('wsky-home__tabs-region'),
+          a.sticky,
+          a.z_10,
+          a.align_center,
+          t.atoms.bg,
+          {top: 0},
+        ]}
         onLayout={e => {
           headerHeight.set(e.nativeEvent.layout.height)
         }}>
diff --git a/src/view/com/post/Post.tsx b/src/view/com/post/Post.tsx
index 1027efa0f..b2910f7e9 100644
--- a/src/view/com/post/Post.tsx
+++ b/src/view/com/post/Post.tsx
@@ -14,6 +14,7 @@ import {MAX_POST_LINES} from '#/lib/constants'
 import {useOpenComposer} from '#/lib/hooks/useOpenComposer'
 import {makeProfileLink} from '#/lib/routes/links'
 import {countLines} from '#/lib/strings/helpers'
+import {userStyle} from '#/lib/userstyles'
 import {
   POST_TOMBSTONE,
   type Shadow,
@@ -171,7 +172,13 @@ function PostInner({
     <GalleryBleed>
       <Link
         href={itemHref}
+        dataSet={{
+          wskyEmbed: post.embed ? 'true' : 'false',
+          wskyReply: record.reply ? 'true' : 'false',
+          wskyRepost: 'false',
+        }}
         style={[
+          userStyle('wsky-post', 'wsky-post__surface'),
           styles.outer,
           t.atoms.border_contrast_low,
           !hideTopBorder && a.border_t,
@@ -185,7 +192,10 @@ function PostInner({
         onPointerLeave={() => {
           setHover(false)
         }}>
-        <SubtleHover hover={hover} />
+        <SubtleHover
+          hover={hover}
+          style={userStyle('wsky-post__hover')}
+        />
         {showReplyLine && (
           <View
             style={[
@@ -231,7 +241,10 @@ function PostInner({
             )}
             <ContentHider
               modui={moderation.ui('contentView')}
-              style={styles.contentHider}
+              style={[
+                styles.contentHider,
+                userStyle('wsky-post__content'),
+              ]}
               childContainerStyle={styles.contentHiderChild}>
               <PostAlerts
                 post={post}
@@ -239,7 +252,7 @@ function PostInner({
                 style={[a.pb_xs]}
               />
               {richText.text ? (
-                <View style={[a.mb_2xs]}>
+                <View style={[a.mb_2xs, userStyle('wsky-post__text')]}>
                   <RichText
                     enableTags
                     testID="postText"
@@ -260,11 +273,14 @@ function PostInner({
               <TranslatedPost hideTranslateLink post={post} />
               {post.embed ? (
                 <View
-                  style={maybeApplyGalleryOffsetStyles('embed', {
-                    post,
-                    modui: moderation.ui('contentList'),
-                    additionalCauses: [],
-                  })}>
+                  style={[
+                    userStyle('wsky-post__embed'),
+                    maybeApplyGalleryOffsetStyles('embed', {
+                      post,
+                      modui: moderation.ui('contentList'),
+                      additionalCauses: [],
+                    }),
+                  ]}>
                   <Embed
                     embed={post.embed}
                     moderation={moderation}
diff --git a/src/view/com/posts/PostFeedItem.tsx b/src/view/com/posts/PostFeedItem.tsx
index 38e4f5003..32bc33557 100644
--- a/src/view/com/posts/PostFeedItem.tsx
+++ b/src/view/com/posts/PostFeedItem.tsx
@@ -343,7 +343,7 @@ let FeedItemInner = ({
   const feedItem = (
     <Link
       testID={`feedItem-by-${post.author.handle}`}
-      style={outerStyles}
+      style={[outerStyles, userStyle('wsky-post__surface')]}
       outerStyle={userStyle('wsky-feed-item', 'wsky-post')}
       href={href}
       noFeedback
@@ -361,7 +361,10 @@ let FeedItemInner = ({
       onPointerLeave={() => {
         setHover(false)
       }}>
-      <SubtleHover hover={hover} />
+      <SubtleHover
+        hover={hover}
+        style={userStyle('wsky-post__hover')}
+      />
       <View
         style={{
           flexDirection: 'row',
diff --git a/src/view/com/util/EmptyState.tsx b/src/view/com/util/EmptyState.tsx
index 59799cf94..2d89c7be7 100644
--- a/src/view/com/util/EmptyState.tsx
+++ b/src/view/com/util/EmptyState.tsx
@@ -2,6 +2,7 @@ import {isValidElement} from 'react'
 import {type StyleProp, type TextStyle, type ViewStyle} from 'react-native'
 import {View} from 'react-native'
 
+import {userStyle} from '#/lib/userstyles'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
 import {
   Button,
@@ -74,7 +75,9 @@ export function EmptyState({
   }
 
   return (
-    <View testID={testID} style={[a.w_full, style]}>
+    <View
+      testID={testID}
+      style={[userStyle('wsky-empty-state'), a.w_full, style]}>
       <View
         style={[
           a.flex_row,
diff --git a/src/view/com/util/fab/FABInner.tsx b/src/view/com/util/fab/FABInner.tsx
index b4bc5f4dd..de35bcc64 100644
--- a/src/view/com/util/fab/FABInner.tsx
+++ b/src/view/com/util/fab/FABInner.tsx
@@ -13,6 +13,7 @@ import {PressableScale} from '#/lib/custom-animations/PressableScale'
 import {useHaptics} from '#/lib/haptics'
 import {useMinimalShellFabTransform} from '#/lib/hooks/useMinimalShellTransform'
 import {clamp} from '#/lib/numbers'
+import {userStyle} from '#/lib/userstyles'
 import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {atoms as a, ios, useBreakpoints, useTheme} from '#/alf'
 import {IS_WEB} from '#/env'
@@ -21,9 +22,17 @@ export interface FABProps extends ComponentProps<typeof Pressable> {
   testID?: string
   icon: JSX.Element
   style?: StyleProp<ViewStyle>
+  userStyleVariant?: 'compose'
 }
 
-export function FABInner({testID, icon, onPress, style, ...props}: FABProps) {
+export function FABInner({
+  testID,
+  icon,
+  onPress,
+  style,
+  userStyleVariant,
+  ...props
+}: FABProps) {
   const insets = useSafeAreaInsets()
   const {gtMobile} = useBreakpoints()
   const t = useTheme()
@@ -47,6 +56,10 @@ export function FABInner({testID, icon, onPress, style, ...props}: FABProps) {
   return (
     <Animated.View
       style={[
+        userStyle(
+          'wsky-fab',
+          userStyleVariant === 'compose' && 'wsky-fab--compose',
+        ),
         styles.outer,
         size,
         tabletSpacing,
diff --git a/src/view/com/util/load-latest/LoadLatestBtn.tsx b/src/view/com/util/load-latest/LoadLatestBtn.tsx
index a506dc140..96bbed137 100644
--- a/src/view/com/util/load-latest/LoadLatestBtn.tsx
+++ b/src/view/com/util/load-latest/LoadLatestBtn.tsx
@@ -8,6 +8,7 @@ import {PressableScale} from '#/lib/custom-animations/PressableScale'
 import {useMinimalShellFabTransform} from '#/lib/hooks/useMinimalShellTransform'
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 import {clamp} from '#/lib/numbers'
+import {userStyle} from '#/lib/userstyles'
 import {useDisableTopOfFeedButton} from '#/state/preferences/disable-top-of-feed-button'
 import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {useSession} from '#/state/session'
@@ -59,6 +60,7 @@ export function LoadLatestBtn({
     <Animated.View
       testID="loadLatestBtn"
       style={[
+        userStyle('wsky-fab', 'wsky-fab--load-latest'),
         a.fixed,
         a.z_20,
         {left: 18},
diff --git a/src/view/screens/Feeds.tsx b/src/view/screens/Feeds.tsx
index 1c0a93303..17edc0cb0 100644
--- a/src/view/screens/Feeds.tsx
+++ b/src/view/screens/Feeds.tsx
@@ -15,6 +15,7 @@ import {
 } from '#/lib/routes/types'
 import {cleanError} from '#/lib/strings/errors'
 import {s} from '#/lib/styles'
+import {userStyle} from '#/lib/userstyles'
 import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
 import {
   type SavedFeedItem,
@@ -499,8 +500,8 @@ export function FeedsScreen(_props: Props) {
   )
 
   return (
-    <Layout.Screen testID="FeedsScreen">
-      <Layout.Center>
+    <Layout.Screen testID="FeedsScreen" style={userStyle('wsky-screen--feeds')}>
+      <Layout.Center style={userStyle('wsky-feeds')}>
         <Layout.Header.Outer>
           <Layout.Header.BackButton />
           <Layout.Header.Content>
@@ -543,6 +544,7 @@ export function FeedsScreen(_props: Props) {
       {hasSession && (
         <FAB
           testID="composeFAB"
+          userStyleVariant="compose"
           onPress={onPressCompose}
           icon={<EditBigIcon size="lg" fill={t.palette.white} />}
           accessibilityRole="button"
diff --git a/src/view/screens/Lists.tsx b/src/view/screens/Lists.tsx
index 54f3568fc..90b3cdb06 100644
--- a/src/view/screens/Lists.tsx
+++ b/src/view/screens/Lists.tsx
@@ -11,6 +11,7 @@ import {
   type NativeStackScreenProps,
   type NavigationProp,
 } from '#/lib/routes/types'
+import {userStyle} from '#/lib/userstyles'
 import {MyLists} from '#/view/com/lists/MyLists'
 import {atoms as a} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
@@ -52,7 +53,7 @@ export function ListsScreen({}: Props) {
   )
 
   return (
-    <Layout.Screen testID="listsScreen">
+    <Layout.Screen testID="listsScreen" style={userStyle('wsky-screen--lists')}>
       <Layout.Header.Outer>
         <Layout.Header.BackButton />
         <Layout.Header.Content align="left">
@@ -73,7 +74,7 @@ export function ListsScreen({}: Props) {
         </Button>
       </Layout.Header.Outer>
 
-      <MyLists filter="curate" style={a.flex_grow} />
+      <MyLists filter="curate" style={[a.flex_grow, userStyle('wsky-lists')]} />
 
       <CreateOrEditListDialog
         purpose="app.bsky.graph.defs#curatelist"
diff --git a/src/view/screens/Notifications.tsx b/src/view/screens/Notifications.tsx
index eb30f5c44..f78907ce5 100644
--- a/src/view/screens/Notifications.tsx
+++ b/src/view/screens/Notifications.tsx
@@ -12,6 +12,7 @@ import {
   type NativeStackScreenProps,
   type NotificationsTabNavigatorParams,
 } from '#/lib/routes/types'
+import {userStyle} from '#/lib/userstyles'
 import {logger} from '#/logger'
 import {emitSoftReset, listenSoftReset} from '#/state/events'
 import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
@@ -123,7 +124,9 @@ export function NotificationsScreen({}: Props) {
   ])
 
   return (
-    <Layout.Screen testID="notificationsScreen">
+    <Layout.Screen
+      testID="notificationsScreen"
+      style={userStyle('wsky-screen--notifications')}>
       <Layout.Header.Outer noBottomBorder sticky={false}>
         <Layout.Header.MenuButton />
         <Layout.Header.Content>
@@ -157,11 +160,14 @@ export function NotificationsScreen({}: Props) {
         )}
         initialPage={initialActiveTab}>
         {sections.map((section, i) => (
-          <View key={i}>{section.component}</View>
+          <View key={i} style={userStyle('wsky-notifications')}>
+            {section.component}
+          </View>
         ))}
       </Pager>
       <FAB
         testID="composeFAB"
+        userStyleVariant="compose"
         onPress={() => openComposer({logContext: 'Fab'})}
         icon={<EditBigIcon size="lg" fill={t.palette.white} />}
         accessibilityRole="button"
diff --git a/src/view/screens/Profile.tsx b/src/view/screens/Profile.tsx
index 6456b1dd7..faeeee5dc 100644
--- a/src/view/screens/Profile.tsx
+++ b/src/view/screens/Profile.tsx
@@ -609,6 +609,7 @@ function ProfileScreenLoaded({
       {hasSession && (
         <FAB
           testID="composeFAB"
+          userStyleVariant="compose"
           onPress={onPressCompose}
           icon={<EditBigIcon size="lg" fill={t.palette.white} />}
           accessibilityRole="button"
diff --git a/src/view/shell/desktop/LeftNav.tsx b/src/view/shell/desktop/LeftNav.tsx
index 2c5ebb176..2965ab5cd 100644
--- a/src/view/shell/desktop/LeftNav.tsx
+++ b/src/view/shell/desktop/LeftNav.tsx
@@ -651,7 +651,11 @@ function ComposeBtn({minimal}: {minimal: boolean}) {
     openComposer({mention: await getProfileHandle(), logContext: 'Fab'})
 
   return (
-    <View style={minimal ? [a.px_sm, a.pt_lg] : [a.flex_row, a.pl_md, a.pt_lg]}>
+    <View
+      style={[
+        userStyle('wsky-nav__compose'),
+        minimal ? [a.px_sm, a.pt_lg] : [a.flex_row, a.pl_md, a.pt_lg],
+      ]}>
       <Button
         disabled={isFetchingHandle}
         label={l`Compose new post`}
@@ -708,7 +712,11 @@ export function DesktopLeftNav({routeName}: {routeName: string}) {
     <View
       role="navigation"
       style={[
-        userStyle('wsky-nav', 'wsky-nav--desktop'),
+        userStyle(
+          'wsky-nav',
+          'wsky-nav--desktop',
+          leftNavMinimal && 'wsky-nav--compact',
+        ),
         a.fixed,
         a.top_0,
         a.p_lg,