diff --git a/src/primitives/button/button.tsx b/src/primitives/button/button.tsx
index 4f3c33b91..05b940121 100644
--- a/src/primitives/button/button.tsx
+++ b/src/primitives/button/button.tsx
@@ -5,7 +5,7 @@ import {useArrayProp} from '../../hooks'
 import {ThemeProps} from '../../styles'
 import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
 import {useTheme} from '../../theme'
-import {ButtonMode, ButtonTextAlign, ButtonTone, FlexJustify} from '../../types'
+import {ButtonMode, ButtonTextAlign, ButtonTone, FlexJustify, ButtonTextStyle} from '../../types'
 import {Box} from '../box'
 import {Flex} from '../flex'
 import {Spinner} from '../spinner'
@@ -30,6 +30,10 @@ export interface ButtonProps extends ResponsivePaddingProps, ResponsiveRadiusPro
   selected?: boolean
   space?: number | number[]
   textAlign?: ButtonTextAlign
+  /**
+   * @default primary
+   */
+  textStyle?: ButtonTextStyle
   text?: React.ReactNode
   tone?: ButtonTone
   type?: 'button' | 'reset' | 'submit'
@@ -84,6 +88,7 @@ export const Button = forwardRef(function Button(
     textAlign,
     tone = 'default',
     type = 'button',
+    textStyle = 'primary',
     ...restProps
   } = props
 
@@ -137,7 +142,7 @@ export const Button = forwardRef(function Button(
         <Box as="span" {...boxProps}>
           <Flex as="span" justify={justify}>
             {icon && (
-              <Text size={fontSize}>
+              <Text size={fontSize} muted={textStyle === 'secondary'}>
                 {isValidElement(icon) && icon}
                 {isValidElementType(icon) && createElement(icon)}
               </Text>
@@ -150,6 +155,7 @@ export const Button = forwardRef(function Button(
                 marginRight={iconRight ? space : undefined}
               >
                 <Text
+                  muted={textStyle === 'secondary'}
                   align={textAlign}
                   size={fontSize}
                   textOverflow="ellipsis"
@@ -161,7 +167,7 @@ export const Button = forwardRef(function Button(
             )}
 
             {iconRight && (
-              <Text size={fontSize}>
+              <Text size={fontSize} muted={textStyle === 'secondary'}>
                 {isValidElement(iconRight) && iconRight}
                 {isValidElementType(iconRight) && createElement(iconRight)}
               </Text>
diff --git a/src/theme/studioTheme/color.ts b/src/theme/studioTheme/color.ts
index 4b569da2a..be4ad25d1 100644
--- a/src/theme/studioTheme/color.ts
+++ b/src/theme/studioTheme/color.ts
@@ -101,7 +101,7 @@ export const color = createColorTheme({
         bg,
         bg2: mix2(bg, tints[dark ? 50 : 950].hex),
         border: bg,
-        fg: mix(base.bg, dark ? black.hex : white.hex),
+        fg: getColor(tints, dark, 'default', 'bg_base'),
         muted: {
           fg: mix(base.bg, tints[dark ? 950 : 50].hex),
         },
@@ -259,19 +259,19 @@ export const color = createColorTheme({
         bg,
         bg2: mix(bg, tints[dark ? 950 : 50].hex),
         border: mix(bg, tints[dark ? 950 : 50].hex),
-        fg: mix(bg, tints[dark ? 800 : 200].hex),
+        fg: getColor(tints, dark, tone, 'text_primary'),
         muted: {
-          fg: mix(bg, tints[dark ? 900 : 100].hex),
+          fg: getColor(tints, dark, tone, 'text_secondary'),
         },
         accent: {
-          fg: mix(bg, tints[dark ? 900 : 100].hex),
+          fg: getColor(tints, dark, tone, 'text_secondary'),
         },
         link: {
-          fg: mix(bg, tints[dark ? 900 : 100].hex),
+          fg: getColor(tints, dark, tone, 'text_secondary'),
         },
         code: {
           bg,
-          fg: mix(bg, tints[dark ? 900 : 100].hex),
+          fg: getColor(tints, dark, tone, 'text_secondary'),
         },
         skeleton: {
           from: rgba(skeletonFrom, 0.5),
@@ -288,9 +288,12 @@ export const color = createColorTheme({
         bg,
         bg2: mix(bg, tints[dark ? 950 : 50].hex),
         border: mix(bg, tints[dark ? 900 : 100].hex),
-        fg: mix(base.bg, tints[dark ? 200 : 800].hex),
+        fg:
+          tone !== 'default' && tone !== 'primary'
+            ? getColor(tints, dark, tone, 'text_secondary')
+            : getColor(tints, dark, tone, 'text_primary'),
         muted: {
-          fg: mix(base.bg, tints[dark ? 400 : 600].hex),
+          fg: getColor(tints, dark, tone, 'text_secondary'),
         },
         accent: {
           fg: mix(base.bg, hues.red[dark ? 400 : 500].hex),
@@ -300,7 +303,7 @@ export const color = createColorTheme({
         },
         code: {
           bg: mix(bg, tints[dark ? 950 : 50].hex),
-          fg: mix(base.bg, tints[dark ? 400 : 600].hex),
+          fg: getColor(tints, dark, tone, 'text_secondary'),
         },
         skeleton: {
           from: skeletonFrom,
@@ -321,9 +324,12 @@ export const color = createColorTheme({
         bg,
         bg2: mix(bg, tints[dark ? 950 : 50].hex),
         border: mix(bg, getColor(tints, dark, name, 'bg_base_active')),
-        fg: mix(base.bg, tints[dark ? 200 : 800].hex),
+        fg:
+          tone !== 'default' && tone !== 'primary'
+            ? getColor(tints, dark, tone, 'text_secondary')
+            : getColor(tints, dark, tone, 'text_primary'),
         muted: {
-          fg: mix(base.bg, tints[dark ? 400 : 600].hex),
+          fg: getColor(tints, dark, tone, 'text_secondary'),
         },
         accent: {
           fg: mix(bg, hues.red[dark ? 400 : 500].hex),
@@ -333,7 +339,7 @@ export const color = createColorTheme({
         },
         code: {
           bg: mix(bg, tints[dark ? 950 : 50].hex),
-          fg: mix(base.bg, tints[dark ? 400 : 600].hex),
+          fg: getColor(tints, dark, tone, 'text_secondary'),
         },
         skeleton: {
           from: skeletonFrom,
@@ -354,9 +360,12 @@ export const color = createColorTheme({
         bg,
         bg2: mix(bg, tints[dark ? 950 : 50].hex),
         border: mix(bg, tints[dark ? 900 : 100].hex),
-        fg: mix(base.bg, tints[dark ? 200 : 800].hex),
+        fg:
+          tone !== 'default' && tone !== 'primary'
+            ? getColor(tints, dark, tone, 'text_secondary')
+            : getColor(tints, dark, tone, 'text_primary'),
         muted: {
-          fg: mix(base.bg, tints[dark ? 400 : 600].hex),
+          fg: getColor(tints, dark, tone, 'text_secondary'),
         },
         accent: {
           fg: mix(bg, hues.red[dark ? 400 : 500].hex),
@@ -366,7 +375,7 @@ export const color = createColorTheme({
         },
         code: {
           bg: mix(bg, tints[dark ? 950 : 50].hex),
-          fg: mix(base.bg, tints[dark ? 400 : 600].hex),
+          fg: getColor(tints, dark, tone, 'text_secondary'),
         },
         skeleton: {
           from: skeletonFrom,
@@ -382,9 +391,12 @@ export const color = createColorTheme({
       bg,
       bg2: mix(bg, tints[dark ? 950 : 50].hex),
       border: mix(bg, getColor(tints, dark, name, 'bg_base')),
-      fg: mix(base.bg, tints[dark ? 300 : 700].hex),
+      fg:
+        tone !== 'default' && tone !== 'primary'
+          ? getColor(tints, dark, tone, 'text_secondary')
+          : getColor(tints, dark, tone, 'text_primary'),
       muted: {
-        fg: mix(base.bg, tints[dark ? 400 : 600].hex),
+        fg: getColor(tints, dark, tone, 'text_secondary'),
       },
       accent: {
         fg: mix(base.bg, hues.red[dark ? 400 : 500].hex),
@@ -394,7 +406,7 @@ export const color = createColorTheme({
       },
       code: {
         bg: mix(base.bg, tints[dark ? 950 : 50].hex),
-        fg: mix(base.bg, tints[dark ? 400 : 600].hex),
+        fg: getColor(tints, dark, tone, 'text_secondary'),
       },
       skeleton: {
         from: skeletonFrom,
diff --git a/src/types/button.ts b/src/types/button.ts
index 1dca16fce..7f87c6c2e 100644
--- a/src/types/button.ts
+++ b/src/types/button.ts
@@ -12,3 +12,5 @@ export type ButtonTextAlign = 'left' | 'right' | 'center'
  * @public
  */
 export type ButtonTone = 'default' | 'primary' | 'positive' | 'caution' | 'critical'
+
+export type ButtonTextStyle = 'primary' | 'secondary'
diff --git a/stories/helpers/matrixBuilder.tsx b/stories/helpers/matrixBuilder.tsx
index 62620a7a1..d945e562a 100644
--- a/stories/helpers/matrixBuilder.tsx
+++ b/stories/helpers/matrixBuilder.tsx
@@ -5,6 +5,7 @@ interface MatrixBuilderProps<Rows extends string[], Cols extends string[]> {
   columns: Cols
   rows: Rows
   title: string
+  subHeader?: React.ReactNode
   renderItem: ({row, column}: {row: Rows[number]; column: Cols[number]}) => React.ReactNode
 }
 
@@ -49,7 +50,7 @@ const Row = ({row, children}: RowProps) => {
 
 type TableProps<Rows extends string[], Cols extends string[]> = Pick<
   MatrixBuilderProps<Rows, Cols>,
-  'scheme' | 'columns' | 'rows' | 'title'
+  'scheme' | 'columns' | 'rows' | 'title' | 'subHeader'
 > & {
   children: React.ReactNode
 }
@@ -60,12 +61,21 @@ const Table = <Rows extends string[], Cols extends string[]>({
   columns,
   rows,
   title,
+  subHeader,
 }: TableProps<Rows, Cols>) => {
   return (
     <Card scheme={scheme} padding={4} border radius={2}>
-      <Grid columns={columns.length + 1} rows={rows.length + 1} gap={2}>
+      <Grid
+        gapX={3}
+        gapY={2}
+        style={{
+          gridTemplateColumns: `repeat(${columns.length + 1}, auto)`,
+          gridTemplateRows: `repeat(${rows.length + 1}, auto)`,
+        }}
+      >
         {/* First row, columns titles */}
         <FirstRow title={title} columns={columns} />
+        {subHeader}
         {/* Rows titles and items */}
         {children}
       </Grid>
@@ -83,9 +93,10 @@ export function matrixBuilder<Rows extends string[], Cols extends string[]>({
   rows,
   title,
   renderItem,
+  subHeader,
 }: MatrixBuilderProps<Rows, Cols>): JSX.Element {
   return (
-    <Table scheme={scheme} columns={columns} rows={rows} title={title}>
+    <Table scheme={scheme} columns={columns} rows={rows} title={title} subHeader={subHeader}>
       {rows.map((row) => (
         <Row row={row} key={row}>
           {columns.map((column) => renderItem({row, column}))}
diff --git a/stories/primitives/Button.stories.tsx b/stories/primitives/Button.stories.tsx
index daf856c6c..9feeb6cbd 100644
--- a/stories/primitives/Button.stories.tsx
+++ b/stories/primitives/Button.stories.tsx
@@ -4,7 +4,7 @@ import {
   WORKSHOP_BUTTON_MODE_OPTIONS,
   WORKSHOP_BUTTON_TONE_OPTIONS,
 } from '../../src/__workshop__/constants'
-import {Button, Flex} from '../../src/primitives'
+import {Button, Flex, Grid, Stack, Text} from '../../src/primitives'
 import {FONT_SIZE_CONTROLS, ICON_CONTROLS, RADIUS_CONTROLS, SPACE_CONTROLS} from '../constants'
 import {matrixBuilder} from '../helpers/matrixBuilder'
 import {capitalize} from '../helpers/utils'
@@ -87,9 +87,12 @@ const buttonModes = Object.values(WORKSHOP_BUTTON_MODE_OPTIONS)
 const buttonTones = Object.values(WORKSHOP_BUTTON_TONE_OPTIONS)
 
 export const MultipleStyles: Story = {
+  args: {
+    text: '',
+  },
   parameters: {
     controls: {
-      include: ['fontSize', 'padding', 'radius', 'icon', 'iconRight'],
+      include: ['fontSize', 'padding', 'radius', 'icon', 'iconRight', 'text'],
     },
   },
   render: (props) => (
@@ -100,7 +103,7 @@ export const MultipleStyles: Story = {
         rows: buttonTones,
         title: 'Tone / Mode',
         renderItem: ({row, column}) => (
-          <Button {...props} tone={row} mode={column} text={capitalize(column)} />
+          <Button {...props} tone={row} mode={column} text={props.text || capitalize(column)} />
         ),
       })}
       {matrixBuilder({
@@ -109,9 +112,157 @@ export const MultipleStyles: Story = {
         rows: buttonTones,
         title: 'Tone / Mode',
         renderItem: ({row, column}) => (
-          <Button {...props} tone={row} mode={column} text={capitalize(column)} />
+          <Button {...props} tone={row} mode={column} text={props.text || capitalize(column)} />
         ),
       })}
     </Flex>
   ),
 }
+
+const SubHeader = () => (
+  <>
+    <div />
+    <Grid columns={2} marginY={2}>
+      <Text size={0} align={'center'}>
+        Default
+      </Text>
+      <Text size={0} align={'center'}>
+        Size small
+      </Text>
+    </Grid>
+    <Grid columns={3} marginY={2}>
+      <Text size={0} align={'center'}>
+        Default
+      </Text>
+      <Text size={0} align={'center'}>
+        Font secondary
+      </Text>
+      <Text size={0} align={'center'}>
+        {' '}
+        Size small
+      </Text>
+    </Grid>
+    <Grid columns={3} marginY={2}>
+      <Text size={0} align={'center'}>
+        Default
+      </Text>
+      <Text size={0} align={'center'}>
+        Font secondary
+      </Text>
+
+      <Text size={0} align={'center'}>
+        {' '}
+        Size small
+      </Text>
+    </Grid>
+  </>
+)
+
+const keys = ['primary', 'secondary', 'default']
+const modesConversion: {
+  [key in (typeof keys)[number]]: (typeof WORKSHOP_BUTTON_MODE_OPTIONS)[number]
+} = {
+  primary: 'default',
+  secondary: 'ghost',
+  default: 'bleed',
+} as const
+const rows: Array<(typeof buttonTones)[number]> = ['default', 'positive', 'caution', 'critical']
+export const StudioButtons: Story = {
+  args: {
+    text: 'Button',
+    padding: 3,
+    fontSize: 1,
+    radius: 2,
+    icon: 'square',
+    iconRight: 'square',
+    // For small buttons:
+    // space: 2,
+    // padding: 2,
+  },
+  parameters: {
+    controls: {
+      include: ['text', 'icon', 'iconRight', 'fontSize'],
+    },
+  },
+  render: (props) => (
+    <Stack space={3}>
+      <Flex direction={'row'} wrap={'wrap'} gap={4} align={'center'}>
+        {matrixBuilder({
+          scheme: 'light',
+          columns: keys,
+          rows: rows,
+          title: 'Tone / Mode',
+          subHeader: <SubHeader />,
+          renderItem: ({row, column}) => (
+            <Flex gap={1} justify={'center'} align={'center'}>
+              <Button
+                {...props}
+                tone={row}
+                mode={modesConversion[column]}
+                text={props.text}
+                textStyle="primary"
+              />
+
+              {column !== 'primary' && (
+                <Button
+                  {...props}
+                  tone={row}
+                  mode={modesConversion[column]}
+                  text={props.text}
+                  textStyle="secondary"
+                />
+              )}
+              {/* Small button */}
+              <Button
+                {...props}
+                space={2}
+                padding={2}
+                tone={row}
+                mode={modesConversion[column]}
+                text={props.text}
+              />
+            </Flex>
+          ),
+        })}
+        {matrixBuilder({
+          scheme: 'dark',
+          columns: keys,
+          rows: rows,
+          title: 'Tone / Mode',
+          subHeader: <SubHeader />,
+
+          renderItem: ({row, column}) => (
+            <Flex gap={1} justify={'center'} align={'center'}>
+              <Button
+                {...props}
+                tone={row}
+                mode={modesConversion[column]}
+                text={props.text}
+                textStyle="primary"
+              />
+
+              {column !== 'primary' && (
+                <Button
+                  {...props}
+                  tone={row}
+                  mode={modesConversion[column]}
+                  text={props.text}
+                  textStyle="secondary"
+                />
+              )}
+              {/* Small button */}
+              <Button
+                {...props}
+                space={2}
+                padding={2}
+                tone={row}
+                mode={modesConversion[column]}
+                text={props.text}
+              />
+            </Flex>
+          ),
+        })}
+      </Flex>
+    </Stack>
+  ),
+}