diff --git a/QandA/frontend/src/App.tsx b/QandA/frontend/src/App.tsx
index de7228e..1fb4cb7 100644
--- a/QandA/frontend/src/App.tsx
+++ b/QandA/frontend/src/App.tsx
@@ -4,14 +4,15 @@ import { css } from '@emotion/react';
 import React from 'react';
 import { Header } from './Header';
 import { HomePage } from './HomePage';
+import { fontFamily, fontSize, gray2 } from './Styles';
 
 function App() {
   return (
     <div
       css={css`
-        font-family: 'Segoe UI', 'Helvetica Neue', sans-serif;
-        font-size: 16px;
-        color: #5c5a5a;
+        font-family: ${fontFamily};
+        font-size: ${fontSize};
+        color: ${gray2};
       `}
     >
       <Header />
diff --git a/QandA/frontend/src/Styles.ts b/QandA/frontend/src/Styles.ts
new file mode 100644
index 0000000..6266ae9
--- /dev/null
+++ b/QandA/frontend/src/Styles.ts
@@ -0,0 +1,12 @@
+export const gray1 = '#383737';
+export const gray2 = '#5c5a5a';
+export const gray3 = '#857c81';
+export const gray4 = '#b9b9b9';
+export const gray5 = '#e3e2e2';
+export const gray6 = '#f7f8fa';
+export const primary1 = '#681c41';
+export const primary2 = '#824c67';
+export const accent1 = '#dbb365';
+export const accent2 = '#efd197';
+export const fontFamily = "'Segoe UI', 'Helvetica Neue',sans-serif";
+export const fontSize = '16px';