diff --git a/src/components/MarginUsageRing.tsx b/src/components/MarginUsageRing.tsx
index 1a63e6c..60c1e6b 100644
--- a/src/components/MarginUsageRing.tsx
+++ b/src/components/MarginUsageRing.tsx
@@ -2,11 +2,10 @@ import styled, { type AnyStyledComponent } from 'styled-components';
 
 import { RiskLevels } from '@/constants/abacus';
 
-import { UsageColorFromRiskLevel } from '@/styles/globalStyle';
-
 import { Ring } from '@/components/Ring';
 
 import { abacusHelper } from '@/lib/abacus';
+import { UsageColorFromRiskLevel } from '@/lib/styles';
 
 type ElementProps = {
   value: number;
diff --git a/src/components/UsageBars.tsx b/src/components/UsageBars.tsx
index 7f6014e..3b77a17 100644
--- a/src/components/UsageBars.tsx
+++ b/src/components/UsageBars.tsx
@@ -2,9 +2,9 @@ import styled, { type AnyStyledComponent } from 'styled-components';
 
 import { type RiskLevels } from '@/constants/abacus';
 
-import { UsageColorFromRiskLevel } from '@/styles/globalStyle';
-
 import { abacusHelper } from '@/lib/abacus';
+import { UsageColorFromRiskLevel } from '@/lib/styles';
+
 type ElementProps = {
   value: number;
 };
diff --git a/src/lib/styles.ts b/src/lib/styles.ts
new file mode 100644
index 0000000..b306627
--- /dev/null
+++ b/src/lib/styles.ts
@@ -0,0 +1,16 @@
+import { css } from 'styled-components';
+
+import { type RiskLevels } from '@/constants/abacus';
+
+export const UsageColorFromRiskLevel = (riskLevel: RiskLevels) =>
+  ({
+    low: css`
+      color: var(--color-risk-low);
+    `,
+    medium: css`
+      color: var(--color-risk-medium);
+    `,
+    high: css`
+      color: var(--color-risk-high);
+    `,
+  }[riskLevel.name]);
diff --git a/src/styles/globalStyle.ts b/src/styles/globalStyle.ts
index 050af49..065c495 100644
--- a/src/styles/globalStyle.ts
+++ b/src/styles/globalStyle.ts
@@ -1,10 +1,7 @@
-import { createGlobalStyle, css } from 'styled-components';
-
-import { type RiskLevels } from '@/constants/abacus';
+import { createGlobalStyle } from 'styled-components';
 
 export const GlobalStyle = createGlobalStyle`
   :root {
-    /* Computed: Layers */
     --color-layer-0: ${({ theme }) => theme.layer0};
     --color-layer-1: ${({ theme }) => theme.layer1};
     --color-layer-2: ${({ theme }) => theme.layer2};
@@ -14,45 +11,26 @@ export const GlobalStyle = createGlobalStyle`
     --color-layer-6: ${({ theme }) => theme.layer6};
     --color-layer-7: ${({ theme }) => theme.layer7};
 
-    /* Computed: Borders */
     --color-border: ${({ theme }) => theme.borderDefault};
     --color-border-white: ${({ theme }) => theme.borderButton}; //xcxc
     --color-border-red: ${({ theme }) => theme.borderDestructive}; //xcxc
 
-    /* Computed: Text */
     --color-text-0: ${({ theme }) => theme.textPrimary}; //xcxc
     --color-text-1: ${({ theme }) => theme.textSecondary}; //xcxc
     --color-text-2: ${({ theme }) => theme.textTertiary}; //xcxc
 
-    /* Computed: Accent */
     --color-accent: ${({ theme }) => theme.accent};
     --color-favorite: ${({ theme }) => theme.favorite};
 
-    /* Computed: Status */
     --color-success: ${({ theme }) => theme.success};
     --color-warning: ${({ theme }) => theme.warning};
     --color-error: ${({ theme }) => theme.error};
 
-    /* Computed: Directional */
     --color-positive: ${({ theme }) => theme.positive};
     --color-negative: ${({ theme }) => theme.negative};
 
-    /* Computed: Risk */
     --color-risk-low: ${({ theme }) => theme.riskLow};
     --color-risk-medium: ${({ theme }) => theme.riskMedium};
     --color-risk-high: ${({ theme }) => theme.riskHigh};
   }
 `;
-
-export const UsageColorFromRiskLevel = (riskLevel: RiskLevels) =>
-  ({
-    low: css`
-      color: var(--color-risk-low);
-    `,
-    medium: css`
-      color: var(--color-risk-medium);
-    `,
-    high: css`
-      color: var(--color-risk-high);
-    `,
-  }[riskLevel.name]);