diff --git a/AGENTS.md b/AGENTS.md
index eadda2060f..a6da20ee38 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -452,6 +452,7 @@ When reviewing code (or writing code that will be reviewed):
 - **Floating actions over positioned siblings need both DOM order and z-index** - When stacking a control (e.g. a lightbox close button) over a sibling that uses `position: relative`/`absolute` (e.g. an `<img>` with `relative` for centering), do BOTH: render the floating control AFTER the content in the JSX, and give it an explicit `z-*` class (`z-1` matches the `ModalClose` default in `packages/shared/src/components/modals/common/ModalClose.tsx`). z-index alone is fragile in flex/stacking-context edge cases — pair it with DOM order so painting is unambiguous.
 - **Pick the overlay tier to match the surface, not the Modal default** - Overlay tokens come in tiers (`primary` ~64%, `secondary` ~40%, `tertiary` ~32%, `quaternary` ~24%). The standard `Modal` uses `bg-overlay-quaternary-onion`, but full-screen photo/media lightboxes need a darker tint so the image stands out — prefer a darker neutral like `bg-overlay-primary-pepper`. Don't default to `quaternary-onion` for every overlay; pick the tier and base color appropriate for the surface.
 - **CloseButton over images/media: use `ButtonVariant.Primary`, not `Float`** - `ButtonVariant.Float` paints with `--theme-surface-float` (~8% opacity surface), which is nearly invisible against a dark blurred backdrop or photo. For close buttons overlaid on image content (lightboxes, image-input previews, photo cards), use `ButtonVariant.Primary` for a solid background — this matches the existing `ImageInput.tsx` pattern (`packages/shared/src/components/fields/ImageInput.tsx`). Reserve `Float` for buttons floating over solid app backgrounds, not over content that bleeds through.
+- **"Match styling" requests target typography and spacing, not color** - When a UI task says "make X look like Y" or "copy the styling", change typography (font-weight, font-size via `typo-*`) and spacing (gap, padding, margin), but preserve each element's existing color unless color is explicitly named. Colors usually carry semantic meaning (e.g. the header streak counter uses `text-accent-bacon-default` to read as an active streak indicator). Verify before collapsing color differences.
 
 ## Node.js Version Upgrade Checklist
 
diff --git a/packages/shared/src/components/profile/ProfileButton.tsx b/packages/shared/src/components/profile/ProfileButton.tsx
index 08c4675e29..60a95aa807 100644
--- a/packages/shared/src/components/profile/ProfileButton.tsx
+++ b/packages/shared/src/components/profile/ProfileButton.tsx
@@ -212,7 +212,7 @@ export default function ProfileButton({
               streak={streak}
               isLoading={isLoading}
               compact
-              className="pl-4"
+              className="!gap-0 pl-4 !font-bold !typo-subhead"
             />
           )}
           {hasCoresAccess && (
@@ -236,6 +236,7 @@ export default function ProfileButton({
                     tag="a"
                     variant={ButtonVariant.Tertiary}
                     size={ButtonSize.Small}
+                    className="!gap-0 !font-bold !typo-subhead"
                   >
                     {largeNumberFormat(displayedBalance)}
                   </Button>