diff --git a/packages/code-studio/src/styleguide/Grids.tsx b/packages/code-studio/src/styleguide/Grids.tsx
index 960c7e1d80..56234c6f8f 100644
--- a/packages/code-studio/src/styleguide/Grids.tsx
+++ b/packages/code-studio/src/styleguide/Grids.tsx
@@ -27,7 +27,6 @@ function Grids(): ReactElement {
     autoSelectRow: true,
   });
   const [contextTheme] = useState<Partial<GridThemeType>>({
-    font: '12px Fira Sans, sans-serif',
     rowHeight: 40,
   });
   return (
diff --git a/packages/code-studio/src/styleguide/SpectrumComponents.tsx b/packages/code-studio/src/styleguide/SpectrumComponents.tsx
index 1ce5e0164d..fb6fb23c6f 100644
--- a/packages/code-studio/src/styleguide/SpectrumComponents.tsx
+++ b/packages/code-studio/src/styleguide/SpectrumComponents.tsx
@@ -33,7 +33,7 @@ import {
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { dh } from '@deephaven/icons';
 import { SPECTRUM_COMPONENT_SAMPLES_ID } from './constants';
-import { sampleSectionIdAndClasses } from './utils';
+import { sampleSectionIdAndClassesSpectrum } from './utils';
 
 export function SpectrumComponents(): JSX.Element {
   return (
@@ -42,27 +42,27 @@ export function SpectrumComponents(): JSX.Element {
         Spectrum Components
       </h2>
       <Grid gap={20} columns={minmax('0px', '1fr')}>
-        <View {...sampleSectionIdAndClasses('spectrum-buttons')}>
+        <View {...sampleSectionIdAndClassesSpectrum('spectrum-buttons')}>
           <h3>Buttons</h3>
           <ButtonsSample />
         </View>
-        <View {...sampleSectionIdAndClasses('spectrum-collections')}>
+        <View {...sampleSectionIdAndClassesSpectrum('spectrum-collections')}>
           <h3>Collections</h3>
           <TableViewSample />
         </View>
-        <View {...sampleSectionIdAndClasses('spectrum-content')}>
+        <View {...sampleSectionIdAndClassesSpectrum('spectrum-content')}>
           <h3>Content</h3>
           <IllustratedMessageSample />
         </View>
-        <View {...sampleSectionIdAndClasses('spectrum-forms')}>
+        <View {...sampleSectionIdAndClassesSpectrum('spectrum-forms')}>
           <h3>Forms</h3>
           <FormsSample />
         </View>
-        <View {...sampleSectionIdAndClasses('spectrum-overlays')}>
+        <View {...sampleSectionIdAndClassesSpectrum('spectrum-overlays')}>
           <h3>Overlays</h3>
           <ContextualHelpSample />
         </View>
-        <View {...sampleSectionIdAndClasses('spectrum-well')}>
+        <View {...sampleSectionIdAndClassesSpectrum('spectrum-well')}>
           <h3>Wells</h3>
           <Well>This is a well.</Well>
         </View>
diff --git a/packages/code-studio/src/styleguide/utils.test.ts b/packages/code-studio/src/styleguide/utils.test.ts
index 240b6ded6f..fdc3f3ad85 100644
--- a/packages/code-studio/src/styleguide/utils.test.ts
+++ b/packages/code-studio/src/styleguide/utils.test.ts
@@ -1,7 +1,10 @@
-import { sampleSectionIdAndClasses } from './utils';
+import {
+  sampleSectionIdAndClasses,
+  sampleSectionIdAndClassesSpectrum,
+} from './utils';
 
 describe('sampleSectionIdAndClasses', () => {
-  it('should return id, className, and UNSAFE_className', () => {
+  it('should return id and className', () => {
     const actual = sampleSectionIdAndClasses('some-id', [
       'some-class-a',
       'some-class-b',
@@ -10,6 +13,19 @@ describe('sampleSectionIdAndClasses', () => {
     expect(actual).toEqual({
       id: 'sample-section-some-id',
       className: 'sample-section some-class-a some-class-b',
+    });
+  });
+});
+
+describe('sampleSectionIdAndClassesSpectrum', () => {
+  it('should return id and UNSAFE_className', () => {
+    const actual = sampleSectionIdAndClassesSpectrum('some-id', [
+      'some-class-a',
+      'some-class-b',
+    ]);
+
+    expect(actual).toEqual({
+      id: 'sample-section-some-id',
       UNSAFE_className: 'sample-section some-class-a some-class-b',
     });
   });
diff --git a/packages/code-studio/src/styleguide/utils.ts b/packages/code-studio/src/styleguide/utils.ts
index 95935ed15b..d6f7d25caf 100644
--- a/packages/code-studio/src/styleguide/utils.ts
+++ b/packages/code-studio/src/styleguide/utils.ts
@@ -32,7 +32,7 @@ export function useSeededRandomNumberCallback(seed = 1): () => number {
 }
 
 /**
- * Return id, className, and UNSAFE_className props for a sample section. Class
+ * Return id and className props for a sample section. Class
  * names generated by this util are used by e2e tests to take snapshots of
  * styleguide sections.
  * @param name Name of the section
@@ -41,7 +41,7 @@ export function useSeededRandomNumberCallback(seed = 1): () => number {
 export function sampleSectionIdAndClasses(
   name: string,
   classNames: string[] = []
-): { id: string; className: string; UNSAFE_className: string } {
+): { id: string; className: string } {
   const id = `${SAMPLE_SECTION_CLASS}-${name
     .toLocaleLowerCase()
     .replaceAll(' ', '-')}`;
@@ -51,7 +51,24 @@ export function sampleSectionIdAndClasses(
   return {
     id,
     className,
-    // Used for Spectrum components
+  };
+}
+
+/**
+ * Return id and UNSAFE_className props for a sample section. Class
+ * names generated by this util are used by e2e tests to take snapshots of
+ * styleguide sections.
+ * @param name Name of the section
+ * @param classNames Optional list of class names to include
+ */
+export function sampleSectionIdAndClassesSpectrum(
+  name: string,
+  classNames: string[] = []
+): { id: string; UNSAFE_className: string } {
+  const { id, className } = sampleSectionIdAndClasses(name, classNames);
+
+  return {
+    id,
     UNSAFE_className: className,
   };
 }