diff --git a/apps/web/src/components/Layout/components/Header/styles.css.ts b/apps/web/src/components/Layout/components/Header/styles.css.ts
index b7b6344..69a6f80 100644
--- a/apps/web/src/components/Layout/components/Header/styles.css.ts
+++ b/apps/web/src/components/Layout/components/Header/styles.css.ts
@@ -1,4 +1,4 @@
-import { heading } from '@favolink-ui/react/heading.css';
+import { heading } from '@favolink-ui/react/utilities.css';
 import { vars } from '@favolink-ui/react/vars.css';
 import { style } from '@vanilla-extract/css';
 
diff --git a/packages/ui/react/package.json b/packages/ui/react/package.json
index 26b9839..4d530b6 100644
--- a/packages/ui/react/package.json
+++ b/packages/ui/react/package.json
@@ -7,8 +7,7 @@
     "./reset.css": "./src/styles/reset.css.ts",
     "./vars.css": "./src/styles/vars.css.ts",
     "./theme.css": "./src/styles/theme.css.ts",
-    "./body.css": "./src/styles/utilities/body.css.ts",
-    "./heading.css": "./src/styles/utilities/heading.css.ts"
+    "./utilities.css": "./src/styles/utilities/index.ts"
   },
   "scripts": {
     "lint": "eslint \"**/*.{js,jsx,cjs,mjs,ts,tsx,cts,mts}\""
diff --git a/packages/ui/react/src/components/typography/heading.styles.css.ts b/packages/ui/react/src/components/typography/heading.styles.css.ts
index 2c3206d..b37bbe4 100644
--- a/packages/ui/react/src/components/typography/heading.styles.css.ts
+++ b/packages/ui/react/src/components/typography/heading.styles.css.ts
@@ -3,8 +3,8 @@ import {
   color,
   heading,
   textAlign,
+  textWrap,
   truncate,
-  wrap,
 } from '../../styles/utilities';
 
 export const headingVariants = recipe({
@@ -15,7 +15,7 @@ export const headingVariants = recipe({
     truncate: {
       true: [truncate],
     },
-    wrap,
+    wrap: textWrap,
   },
 
   defaultVariants: {
diff --git a/packages/ui/react/src/components/typography/text.styles.css.ts b/packages/ui/react/src/components/typography/text.styles.css.ts
index 32ab609..fe1913f 100644
--- a/packages/ui/react/src/components/typography/text.styles.css.ts
+++ b/packages/ui/react/src/components/typography/text.styles.css.ts
@@ -1,5 +1,11 @@
 import { type RecipeVariants, recipe } from '@vanilla-extract/recipes';
-import { body, color, textAlign, truncate, wrap } from '../../styles/utilities';
+import {
+  body,
+  color,
+  textAlign,
+  textWrap,
+  truncate,
+} from '../../styles/utilities';
 
 export const textVariants = recipe({
   variants: {
@@ -9,7 +15,7 @@ export const textVariants = recipe({
     truncate: {
       true: [truncate],
     },
-    wrap,
+    wrap: textWrap,
   },
 
   defaultVariants: {
diff --git a/packages/ui/react/src/styles/utilities/body.css.ts b/packages/ui/react/src/styles/utilities/body.css.ts
deleted file mode 100644
index 4dfd395..0000000
--- a/packages/ui/react/src/styles/utilities/body.css.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { styleVariants } from '@vanilla-extract/css';
-import { letterSpacing } from './letter-spacing.css';
-
-const weight = styleVariants({
-  regular: { fontWeight: 400 },
-  medium: { fontWeight: 500 },
-});
-
-const rowBody = styleVariants({
-  body1: [letterSpacing, { fontSize: 18, lineHeight: '25px' }],
-  body2: [letterSpacing, { fontSize: 16, lineHeight: '22px' }],
-  body3: [letterSpacing, { fontSize: 14, lineHeight: '20px' }],
-  body4: [letterSpacing, { fontSize: 12, lineHeight: '17px' }],
-});
-
-export const body = styleVariants({
-  body1Regular: [rowBody.body1, weight.regular],
-  body1Medium: [rowBody.body1, weight.medium],
-  body2Regular: [rowBody.body2, weight.regular],
-  body2Medium: [rowBody.body2, weight.medium],
-  body3Regular: [rowBody.body3, weight.regular],
-  body3Medium: [rowBody.body3, weight.medium],
-  body4Regular: [rowBody.body4, weight.regular],
-  body4Medium: [rowBody.body4, weight.medium],
-});
diff --git a/packages/ui/react/src/styles/utilities/color.css.ts b/packages/ui/react/src/styles/utilities/color.css.ts
deleted file mode 100644
index 87dcbe8..0000000
--- a/packages/ui/react/src/styles/utilities/color.css.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import { styleVariants } from '@vanilla-extract/css';
-import { vars } from '../vars.css';
-
-export const color = styleVariants({
-  archiveBlack: { color: vars.color.archive.black },
-  archiveBlue: { color: vars.color.archive.blue },
-  archiveBrightGreen: { color: vars.color.archive.brightGreen },
-  archiveCoral: { color: vars.color.archive.coral },
-  archiveMint: { color: vars.color.archive.mint },
-  archivePink: { color: vars.color.archive.pink },
-  archivePurple: { color: vars.color.archive.purple },
-  archiveYellow: { color: vars.color.archive.yellow },
-  gray100: { color: vars.color.gray[100] },
-  gray200: { color: vars.color.gray[200] },
-  gray300: { color: vars.color.gray[300] },
-  gray400: { color: vars.color.gray[400] },
-  gray500: { color: vars.color.gray[500] },
-  gray600: { color: vars.color.gray[600] },
-  gray700: { color: vars.color.gray[700] },
-  gray800: { color: vars.color.gray[800] },
-  gray900: { color: vars.color.gray[900] },
-  gray1000: { color: vars.color.gray[1000] },
-  gray1100: { color: vars.color.gray[1100] },
-  system100: { color: vars.color.system[100] },
-  system200: { color: vars.color.system[200] },
-  system300: { color: vars.color.system[300] },
-  repoTextBlack: { color: vars.color.repo.text.black },
-  repoTextBlue: { color: vars.color.repo.text.blue },
-  repoTextBrightGreen: { color: vars.color.repo.text.brightGreen },
-  repoTextCoral: { color: vars.color.repo.text.coral },
-  repoTextMint: { color: vars.color.repo.text.mint },
-  repoTextPink: { color: vars.color.repo.text.pink },
-  repoTextPurple: { color: vars.color.repo.text.purple },
-  repoTextYellow: { color: vars.color.repo.text.yellow },
-  repoBgBlack: { color: vars.color.repo.bg.black },
-  repoBgBlue: { color: vars.color.repo.bg.blue },
-  repoBgBrightGreen: { color: vars.color.repo.bg.brightGreen },
-  repoBgCoral: { color: vars.color.repo.bg.coral },
-  repoBgMint: { color: vars.color.repo.bg.mint },
-  repoBgPink: { color: vars.color.repo.bg.pink },
-  repoBgPurple: { color: vars.color.repo.bg.purple },
-  repoBgYellow: { color: vars.color.repo.bg.yellow },
-});
diff --git a/packages/ui/react/src/styles/utilities/enum/index.ts b/packages/ui/react/src/styles/utilities/enum/index.ts
index 0c2cc14..ef0bda6 100644
--- a/packages/ui/react/src/styles/utilities/enum/index.ts
+++ b/packages/ui/react/src/styles/utilities/enum/index.ts
@@ -15,5 +15,5 @@ export * from './letter-spacing.css';
 export * from './overflow.css';
 export * from './position.css';
 export * from './text-align.css';
+export * from './text-wrap.css';
 export * from './truncate.css';
-export * from './wrap.css';
diff --git a/packages/ui/react/src/styles/utilities/enum/wrap.css.ts b/packages/ui/react/src/styles/utilities/enum/text-wrap.css.ts
similarity index 76%
rename from packages/ui/react/src/styles/utilities/enum/wrap.css.ts
rename to packages/ui/react/src/styles/utilities/enum/text-wrap.css.ts
index 6ef15f7..b8a6681 100644
--- a/packages/ui/react/src/styles/utilities/enum/wrap.css.ts
+++ b/packages/ui/react/src/styles/utilities/enum/text-wrap.css.ts
@@ -1,6 +1,6 @@
 import { styleVariants } from '@vanilla-extract/css';
 
-export const wrap = styleVariants({
+export const textWrap = styleVariants({
   wrap: { whiteSpace: 'normal' },
   nowrap: { whiteSpace: 'nowrap' },
 });
diff --git a/packages/ui/react/src/styles/utilities/enum/truncate.css.ts b/packages/ui/react/src/styles/utilities/enum/truncate.css.ts
index 424e5cf..27381e6 100644
--- a/packages/ui/react/src/styles/utilities/enum/truncate.css.ts
+++ b/packages/ui/react/src/styles/utilities/enum/truncate.css.ts
@@ -1,8 +1,8 @@
 import { style } from '@vanilla-extract/css';
-import { wrap } from './wrap.css';
+import { textWrap } from './text-wrap.css';
 
 export const truncate = style([
-  wrap.nowrap,
+  textWrap.nowrap,
   {
     overflow: 'hidden',
     textOverflow: 'ellipsis',
diff --git a/packages/ui/react/src/styles/utilities/heading.css.ts b/packages/ui/react/src/styles/utilities/heading.css.ts
deleted file mode 100644
index 18d221e..0000000
--- a/packages/ui/react/src/styles/utilities/heading.css.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { styleVariants } from '@vanilla-extract/css';
-import { letterSpacing } from './letter-spacing.css';
-
-const weight = styleVariants({
-  semibold: { fontWeight: 600 },
-  bold: { fontWeight: 700 },
-});
-
-const rowHeading = styleVariants({
-  h1: [letterSpacing, { fontSize: 28, lineHeight: '39px' }],
-  h2: [letterSpacing, { fontSize: 24, lineHeight: '34px' }],
-  h3: [letterSpacing, { fontSize: 20, lineHeight: '28px' }],
-  h4: [letterSpacing, { fontSize: 18, lineHeight: '25px' }],
-  h5: [letterSpacing, { fontSize: 16, lineHeight: '22px' }],
-  h6: [letterSpacing, { fontSize: 14, lineHeight: '20px' }],
-});
-
-export const heading = styleVariants({
-  h1Semibold: [rowHeading.h1, weight.semibold],
-  h1Bold: [rowHeading.h1, weight.bold],
-  h2Semibold: [rowHeading.h2, weight.semibold],
-  h2Bold: [rowHeading.h2, weight.bold],
-  h3Semibold: [rowHeading.h3, weight.semibold],
-  h3Bold: [rowHeading.h3, weight.bold],
-  h4Semibold: [rowHeading.h4, weight.semibold],
-  h4Bold: [rowHeading.h4, weight.bold],
-  h5Semibold: [rowHeading.h5, weight.semibold],
-  h5Bold: [rowHeading.h5, weight.bold],
-  h6Semibold: [rowHeading.h6, weight.semibold],
-  h6Bold: [rowHeading.h6, weight.bold],
-});
diff --git a/packages/ui/react/src/styles/utilities/letter-spacing.css.ts b/packages/ui/react/src/styles/utilities/letter-spacing.css.ts
deleted file mode 100644
index 9676d3e..0000000
--- a/packages/ui/react/src/styles/utilities/letter-spacing.css.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { style } from '@vanilla-extract/css';
-
-export const letterSpacing = style({
-  letterSpacing: 0,
-});
diff --git a/packages/ui/react/src/styles/utilities/text-align.css.ts b/packages/ui/react/src/styles/utilities/text-align.css.ts
deleted file mode 100644
index c7a8236..0000000
--- a/packages/ui/react/src/styles/utilities/text-align.css.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { styleVariants } from '@vanilla-extract/css';
-
-export const textAlign = styleVariants({
-  left: {
-    textAlign: 'left',
-  },
-  center: {
-    textAlign: 'center',
-  },
-  right: {
-    textAlign: 'right',
-  },
-});
diff --git a/packages/ui/react/src/styles/utilities/truncate.css.ts b/packages/ui/react/src/styles/utilities/truncate.css.ts
deleted file mode 100644
index 424e5cf..0000000
--- a/packages/ui/react/src/styles/utilities/truncate.css.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { style } from '@vanilla-extract/css';
-import { wrap } from './wrap.css';
-
-export const truncate = style([
-  wrap.nowrap,
-  {
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-  },
-]);
diff --git a/packages/ui/react/src/styles/utilities/wrap.css.ts b/packages/ui/react/src/styles/utilities/wrap.css.ts
deleted file mode 100644
index 68d735c..0000000
--- a/packages/ui/react/src/styles/utilities/wrap.css.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { styleVariants } from '@vanilla-extract/css';
-
-export const wrap = styleVariants({
-  wrap: {
-    whiteSpace: 'normal',
-  },
-  nowrap: {
-    whiteSpace: 'nowrap',
-  },
-});