diff --git a/packages/cli/templates/react/igr-ts/projects/_base_with_home/files/src/app/home/style.module.css b/packages/cli/templates/react/igr-ts/projects/_base_with_home/files/src/app/home/style.module.css
index 7dfcab6f4..89f606189 100644
--- a/packages/cli/templates/react/igr-ts/projects/_base_with_home/files/src/app/home/style.module.css
+++ b/packages/cli/templates/react/igr-ts/projects/_base_with_home/files/src/app/home/style.module.css
@@ -6,12 +6,12 @@
   padding: 24px;
   box-sizing: border-box;
   text-align: center;
-  font-family: "Titillium Web", "Segoe UI", Arial, sans-serif;
-  color: #000;
+  font-family: var(--ig-font-family);
+  color: var(--ig-gray-900);
 }
 
 :local(.header) {
-  color: #09f;
+  color: var(--ig-primary-500);
   font-size: 80px;
   font-weight: 300;
   line-height: 1.2;
diff --git a/packages/cli/templates/react/igr-ts/projects/side-nav-auth/files/src/app/app.css b/packages/cli/templates/react/igr-ts/projects/side-nav-auth/files/src/app/app.css
index c43949107..a73e0eea9 100644
--- a/packages/cli/templates/react/igr-ts/projects/side-nav-auth/files/src/app/app.css
+++ b/packages/cli/templates/react/igr-ts/projects/side-nav-auth/files/src/app/app.css
@@ -11,8 +11,8 @@
   flex: 0 0 auto;
   height: 56px;
   padding: 0 16px;
-  background: #239ef0;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, .24);
+  background: var(--ig-primary-500);
+  box-shadow: var(--ig-elevation-4);
   box-sizing: border-box;
   position: relative;
   z-index: 10;
@@ -27,7 +27,7 @@
   font-size: 1.25rem;
   font-weight: 600;
   line-height: 1;
-  color: #000;
+  color: var(--ig-primary-500-contrast);
 }
 
 .app__menu-button {
@@ -37,7 +37,7 @@
   width: 40px;
   height: 40px;
   padding: 0;
-  color: #000;
+  color: var(--ig-primary-500-contrast);
   border: 0;
   background: transparent;
   cursor: pointer;
@@ -61,16 +61,16 @@
 
 igc-nav-drawer-item::part(base) {
   min-height: 48px;
-  color: #2d2d2d;
+  color: var(--ig-gray-900);
 }
 
 igc-nav-drawer-item[active]::part(base) {
-  background: #e0f2ff;
-  color: #0075d2;
+  background: var(--ig-primary-100);
+  color: var(--ig-primary-700);
 }
 
 igc-nav-drawer-item[active] igc-icon {
-  color: #0075d2;
+  color: var(--ig-primary-700);
 }
 
 .app__content {
diff --git a/packages/cli/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/components/Login.module.css b/packages/cli/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/components/Login.module.css
index ba87e6bae..c488c465c 100644
--- a/packages/cli/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/components/Login.module.css
+++ b/packages/cli/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/components/Login.module.css
@@ -5,22 +5,10 @@
   padding: 8px 0 0;
 }
 
-.form igc-input {
-  width: 100%;
-  --ig-input-group-focused-secondary-color: #239ef0;
-  --ig-input-group-focused-border-color: #239ef0;
-  --ig-input-group-filled-text-color: #2d2d2d;
-}
-
-.form igc-input igc-icon {
-  color: #0075d2;
-  --ig-icon-size: 1.50rem;
-}
-
 .error {
   margin: 0;
   font-size: .875rem;
-  color: #d32f2f;
+  color: var(--ig-error-500);
 }
 
 .actions {
@@ -30,64 +18,8 @@
   padding-top: 4px;
 }
 
-.submitBtn {
-  display: block;
-}
-
-.submitBtn::part(base) {
-  width: 100%;
-  min-height: 40px;
-  font-weight: 600;
-  text-transform: uppercase;
-}
-
-.submitBtn:not([disabled])::part(base) {
-  background: #239ef0;
-  color: #fff;
-}
-
-.submitBtn:not([disabled])::part(base):hover {
-  background: #1a8fd8;
-}
-
-.submitBtn[disabled]::part(base) {
-  background: #e0e0e0;
-  color: #767676;
-}
-
-.linkBtn {
-  align-self: center;
-  color: #0075d2;
-  font-size: .875rem;
-  cursor: pointer;
-  text-decoration: underline;
-  text-transform: none;
-}
-
-.linkBtn:hover,
-.linkBtn:focus-visible {
-  color: #005da8;
-}
-
 .socialLogin {
   display: grid;
   gap: 8px;
   padding-top: 16px;
-  border-top: 1px solid #d7d7d7;
-}
-
-.socialBtn {
-  display: block;
 }
-
-.socialBtn::part(base) {
-  width: 100%;
-  min-height: 40px;
-  color: #fff;
-  font-weight: 600;
-  text-transform: uppercase;
-}
-
-.google::part(base)   { background: rgb(255, 19, 74); }
-.facebook::part(base) { background: rgb(19, 119, 213); }
-.microsoft::part(base){ background: rgb(27, 158, 245); }
diff --git a/packages/cli/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/components/Login.tsx b/packages/cli/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/components/Login.tsx
index 45baa3c51..1ca7b2f7b 100644
--- a/packages/cli/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/components/Login.tsx
+++ b/packages/cli/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/components/Login.tsx
@@ -43,23 +43,23 @@ export function Login({ onRegister, onSuccess }: LoginProps) {
       </IgrInput>
       {error && <p className={styles.error}>{error}</p>}
       <div className={styles.actions}>
-        <IgrButton variant="contained" type="submit" className={styles.submitBtn} disabled={!canSubmit}>
+        <IgrButton variant="contained" type="submit" disabled={!canSubmit}>
           <span>Log In</span>
         </IgrButton>
-        <a className={styles.linkBtn} onClick={onRegister} role="button" tabIndex={0}>Create new account</a>
+        <a onClick={onRegister} role="button" tabIndex={0}>Create new account</a>
       </div>
       {ExternalAuth.hasProvider() && (
         <div className={styles.socialLogin}>
           {ExternalAuth.hasProvider('google') && (
-            <IgrButton variant="contained" type="button" className={`${styles.socialBtn} ${styles.google}`}
+            <IgrButton variant="contained" type="button"
               onClick={() => ExternalAuth.login('google')}><span>Sign in with Google</span></IgrButton>
           )}
           {ExternalAuth.hasProvider('facebook') && (
-            <IgrButton variant="contained" type="button" className={`${styles.socialBtn} ${styles.facebook}`}
+            <IgrButton variant="contained" type="button"
               onClick={() => ExternalAuth.login('facebook')}><span>Sign in with Facebook</span></IgrButton>
           )}
           {ExternalAuth.hasProvider('microsoft') && (
-            <IgrButton variant="contained" type="button" className={`${styles.socialBtn} ${styles.microsoft}`}
+            <IgrButton variant="contained" type="button"
               onClick={() => ExternalAuth.login('microsoft')}><span>Sign in with Microsoft</span></IgrButton>
           )}
         </div>
diff --git a/packages/cli/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/components/LoginBar.module.css b/packages/cli/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/components/LoginBar.module.css
index 234815126..129e737bd 100644
--- a/packages/cli/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/components/LoginBar.module.css
+++ b/packages/cli/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/components/LoginBar.module.css
@@ -1,42 +1,14 @@
 .loginBtn::part(base) {
-  color: #0075d2;
-  background: #fff;
-  border-color: rgba(0, 117, 210, 0.35);
   font-weight: 600;
   white-space: nowrap;
   transition: background .15s;
 }
 
-.loginBtn::part(base):hover {
-  background: #e8f3fc;
-}
-
 .profileAvatar {
   cursor: pointer;
-  color: #0075d2;
-  --ig-avatar-background: #fff;
-  --ig-avatar-color: #0075d2;
-}
-
-:global(igc-dropdown-item:hover),
-:global(igc-dropdown-item[active]:hover) {
-  background: #e8f3fc;
-  color: #0075d2;
-}
-
-:global(igc-dropdown-item[active]) {
-  background: #e8f3fc;
-  color: #0075d2;
-}
-
-:global(igc-dropdown-item[selected]),
-:global(igc-dropdown-item[selected]:hover),
-:global(igc-dropdown-item[selected][active]) {
-  background: #e8f3fc;
-  color: #0075d2;
 }
 
 .profileAvatar:focus-visible {
-  outline: 2px solid #fff;
+  outline: 2px solid var(--ig-primary-500);
   outline-offset: 2px;
 }
diff --git a/packages/cli/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/components/LoginDialog.module.css b/packages/cli/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/components/LoginDialog.module.css
index 7188a6c3f..bedc1b688 100644
--- a/packages/cli/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/components/LoginDialog.module.css
+++ b/packages/cli/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/components/LoginDialog.module.css
@@ -6,7 +6,6 @@
 .dialog::part(title) {
   font-size: 1.125rem;
   font-weight: 600;
-  color: #2d2d2d;
 }
 
 .body {
diff --git a/packages/cli/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/components/Register.module.css b/packages/cli/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/components/Register.module.css
index faeb05420..9b1bf4816 100644
--- a/packages/cli/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/components/Register.module.css
+++ b/packages/cli/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/components/Register.module.css
@@ -5,22 +5,10 @@
   padding: 8px 0 0;
 }
 
-.form igc-input {
-  width: 100%;
-  --ig-input-group-focused-secondary-color: #239ef0;
-  --ig-input-group-focused-border-color: #239ef0;
-  --ig-input-group-filled-text-color: #2d2d2d;
-}
-
-.form igc-input igc-icon {
-  color: #0075d2;
-  --ig-icon-size: 1.50rem;
-}
-
 .error {
   margin: 0;
   font-size: .875rem;
-  color: #d32f2f;
+  color: var(--ig-error-500);
 }
 
 .actions {
@@ -29,46 +17,3 @@
   gap: 8px;
   padding-top: 4px;
 }
-
-.submitBtn {
-  display: block;
-}
-
-.submitBtn::part(base) {
-  width: 100%;
-  min-height: 40px;
-  font-weight: 600;
-  text-transform: uppercase;
-}
-
-.submitBtn:not([disabled])::part(base) {
-  background: #239ef0;
-  color: #fff;
-}
-
-.submitBtn:not([disabled])::part(base):hover {
-  background: #1a8fd8;
-}
-
-.submitBtn[disabled]::part(base) {
-  background: #e0e0e0;
-  color: #767676;
-}
-
-.linkBtn {
-  align-self: center;
-  color: #0075d2;
-  font-size: .875rem;
-  cursor: pointer;
-  text-decoration: underline;
-  text-transform: none;
-}
-
-.linkBtn:hover,
-.linkBtn:focus-visible {
-  color: #005da8;
-}
-
-.linkBtn::part(base):hover {
-  color: #005da8;
-}
diff --git a/packages/cli/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/components/Register.tsx b/packages/cli/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/components/Register.tsx
index 9116fece1..57cca4554 100644
--- a/packages/cli/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/components/Register.tsx
+++ b/packages/cli/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/components/Register.tsx
@@ -57,10 +57,10 @@ export function Register({ onLogin, onSuccess }: RegisterProps) {
       </IgrInput>
       {error && <p className={styles.error}>{error}</p>}
       <div className={styles.actions}>
-        <IgrButton variant="contained" type="submit" className={styles.submitBtn} disabled={!canSubmit}>
+        <IgrButton variant="contained" type="submit" disabled={!canSubmit}>
           <span>Sign Up</span>
         </IgrButton>
-        <a className={styles.linkBtn} onClick={onLogin} role="button" tabIndex={0}>Have an account?</a>
+        <a onClick={onLogin} role="button" tabIndex={0}>Have an account?</a>
       </div>
     </form>
   );
diff --git a/packages/cli/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/pages/Profile.module.css b/packages/cli/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/pages/Profile.module.css
index ee713023a..0f1dd75e7 100644
--- a/packages/cli/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/pages/Profile.module.css
+++ b/packages/cli/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/pages/Profile.module.css
@@ -10,9 +10,9 @@
   align-self: flex-start;
   width: 100%;
   max-width: 640px;
-  background: #fff;
+  background: var(--ig-surface-500);
   border-radius: 8px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
+  box-shadow: var(--ig-elevation-2);
   padding: 32px;
   box-sizing: border-box;
 }
@@ -22,13 +22,13 @@
   align-items: center;
   gap: 20px;
   padding-bottom: 24px;
-  border-bottom: 1px solid #d7eaf8;
+  border-bottom: 1px solid var(--ig-gray-300);
 }
 
 .avatar {
   flex: 0 0 auto;
-  --ig-avatar-background: #e0f2ff;
-  --ig-avatar-color: #0075d2;
+  --ig-avatar-background: var(--ig-primary-500);
+  --ig-avatar-color: var(--ig-primary-500-contrast);
   --ig-avatar-size: 4rem;
 }
 
@@ -38,7 +38,7 @@
 
 .status {
   margin: 0 0 4px;
-  color: #000;
+  color: var(--ig-gray-700);
   font-size: .875rem;
   font-weight: 700;
   text-transform: uppercase;
@@ -47,7 +47,7 @@
 .name {
   margin: 0;
   overflow-wrap: anywhere;
-  color: #09f;
+  color: var(--ig-primary-500);
   font-size: 2rem;
   font-weight: 600;
   line-height: 1.2;
@@ -55,7 +55,7 @@
 
 .description {
   margin: 8px 0 0;
-  color: #000;
+  color: var(--ig-gray-900);
   font-size: 1rem;
   line-height: 1.5;
 }
@@ -70,11 +70,11 @@
   grid-template-columns: 140px minmax(0, 1fr);
   gap: 24px;
   padding: 14px 0;
-  border-bottom: 1px solid #eef3f7;
+  border-bottom: 1px solid var(--ig-gray-200);
 }
 
 .dt {
-  color: rgba(0, 0, 0, .62);
+  color: var(--ig-gray-600);
   font-size: .875rem;
   font-weight: 600;
   margin: 0;
@@ -83,5 +83,5 @@
 .dd {
   margin: 0;
   font-size: 1rem;
-  color: #2d2d2d;
+  color: var(--ig-gray-900);
 }
diff --git a/packages/cli/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/pages/RedirectFacebook.tsx b/packages/cli/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/pages/RedirectFacebook.tsx
index 6c47cb61d..8924baab2 100644
--- a/packages/cli/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/pages/RedirectFacebook.tsx
+++ b/packages/cli/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/pages/RedirectFacebook.tsx
@@ -33,7 +33,7 @@ export default function RedirectFacebook() {
 
   if (error) {
     return (
-      <div style={{ padding: '2rem', color: '#d32f2f' }}>
+      <div style={{ padding: '2rem', color: 'var(--ig-error-500)' }}>
         <p>{error}</p>
         <button onClick={() => navigate('/')}>Back to Home</button>
       </div>
diff --git a/packages/cli/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/pages/RedirectGoogle.tsx b/packages/cli/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/pages/RedirectGoogle.tsx
index c746ec51b..c2a021244 100644
--- a/packages/cli/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/pages/RedirectGoogle.tsx
+++ b/packages/cli/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/pages/RedirectGoogle.tsx
@@ -29,7 +29,7 @@ export default function RedirectGoogle() {
 
   if (error) {
     return (
-      <div style={{ padding: '2rem', color: '#d32f2f' }}>
+      <div style={{ padding: '2rem', color: 'var(--ig-error-500)' }}>
         <p>{error}</p>
         <button onClick={() => navigate('/')}>Back to Home</button>
       </div>
diff --git a/packages/cli/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/pages/RedirectMicrosoft.tsx b/packages/cli/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/pages/RedirectMicrosoft.tsx
index 96a8fd500..6460c393d 100644
--- a/packages/cli/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/pages/RedirectMicrosoft.tsx
+++ b/packages/cli/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/pages/RedirectMicrosoft.tsx
@@ -29,7 +29,7 @@ export default function RedirectMicrosoft() {
 
   if (error) {
     return (
-      <div style={{ padding: '2rem', color: '#d32f2f' }}>
+      <div style={{ padding: '2rem', color: 'var(--ig-error-500)' }}>
         <p>{error}</p>
         <button onClick={() => navigate('/')}>Back to Home</button>
       </div>
diff --git a/packages/cli/templates/react/igr-ts/projects/side-nav-mini-auth/files/src/app/app.css b/packages/cli/templates/react/igr-ts/projects/side-nav-mini-auth/files/src/app/app.css
index 2d5a8b72c..60bd81806 100644
--- a/packages/cli/templates/react/igr-ts/projects/side-nav-mini-auth/files/src/app/app.css
+++ b/packages/cli/templates/react/igr-ts/projects/side-nav-mini-auth/files/src/app/app.css
@@ -11,8 +11,8 @@
   flex: 0 0 auto;
   height: 56px;
   padding: 0 16px;
-  background: #239ef0;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, .24);
+  background: var(--ig-primary-500);
+  box-shadow: var(--ig-elevation-4);
   box-sizing: border-box;
   position: relative;
   z-index: 10;
@@ -29,7 +29,7 @@
   width: 40px;
   height: 40px;
   padding: 0;
-  color: #000;
+  color: var(--ig-primary-500-contrast);
   border: 0;
   background: transparent;
   cursor: pointer;
@@ -41,7 +41,7 @@
 
 .app__title {
   margin: 0 0 0 16px;
-  color: #000;
+  color: var(--ig-primary-500-contrast);
   font-size: 1.25rem;
   font-weight: 600;
   line-height: 1;
@@ -60,12 +60,12 @@
 }
 
 igc-nav-drawer-item[active]::part(base) {
-  background: #e0f2ff;
-  color: #0075d2;
+  background: var(--ig-primary-100);
+  color: var(--ig-primary-700);
 }
 
 igc-nav-drawer-item[active] igc-icon {
-  color: #0075d2;
+  color: var(--ig-primary-700);
 }
 
 .app--mini .app__drawer {
diff --git a/packages/cli/templates/react/igr-ts/projects/side-nav-mini/files/src/app/app.css b/packages/cli/templates/react/igr-ts/projects/side-nav-mini/files/src/app/app.css
index 5b01df4e1..993f62bcf 100644
--- a/packages/cli/templates/react/igr-ts/projects/side-nav-mini/files/src/app/app.css
+++ b/packages/cli/templates/react/igr-ts/projects/side-nav-mini/files/src/app/app.css
@@ -11,8 +11,8 @@
   flex: 0 0 auto;
   height: 56px;
   padding: 0 16px;
-  background: #239ef0;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, .24);
+  background: var(--ig-primary-500);
+  box-shadow: var(--ig-elevation-4);
   box-sizing: border-box;
 }
 
@@ -23,7 +23,7 @@
   width: 40px;
   height: 40px;
   padding: 0;
-  color: #000;
+  color: var(--ig-primary-500-contrast);
   border: 0;
   background: transparent;
   cursor: pointer;
@@ -35,7 +35,7 @@
 
 .app__title {
   margin: 0 0 0 16px;
-  color: #000;
+  color: var(--ig-primary-500-contrast);
   font-size: 1.25rem;
   font-weight: 600;
   line-height: 1;
@@ -55,20 +55,20 @@
 
 igc-nav-drawer-item::part(base) {
   min-height: 48px;
-  color: #2d2d2d;
+  color: var(--ig-gray-900);
 }
 
 igc-nav-drawer-item[active]::part(base) {
-  background: #e0f2ff;
-  color: #0075d2;
+  background: var(--ig-primary-100);
+  color: var(--ig-primary-700);
 }
 
 igc-nav-drawer-item[active] igc-icon {
-  color: #0075d2;
+  color: var(--ig-primary-700);
 }
 
 igc-nav-drawer-item:not([active]) igc-icon {
-  color: #2d2d2d;
+  color: var(--ig-gray-900);
 }
 
 .app--mini .app__drawer {
diff --git a/packages/cli/templates/react/igr-ts/projects/side-nav-mini/files/src/app/home/style.module.css b/packages/cli/templates/react/igr-ts/projects/side-nav-mini/files/src/app/home/style.module.css
index ca8b97595..040b35c98 100644
--- a/packages/cli/templates/react/igr-ts/projects/side-nav-mini/files/src/app/home/style.module.css
+++ b/packages/cli/templates/react/igr-ts/projects/side-nav-mini/files/src/app/home/style.module.css
@@ -4,7 +4,7 @@
   margin: auto;
   padding: 48px 24px;
   box-sizing: border-box;
-  font-family: "Titillium Web", "Segoe UI", Arial, sans-serif;
+  font-family: var(--ig-font-family);
 }
 
 :local(.intro) {
@@ -15,7 +15,7 @@
 
 :local(.header) {
   margin: 0 0 12px;
-  color: #09f;
+  color: var(--ig-primary-500);
   font-size: 3rem;
   font-weight: 600;
   line-height: 1.2;
@@ -23,7 +23,7 @@
 
 :local(.description) {
   margin: 0;
-  color: #000;
+  color: var(--ig-gray-900);
   font-size: 1.125rem;
   line-height: 1.5;
 }
@@ -50,7 +50,7 @@
   align-items: center;
   min-height: 64px;
   padding: 6px 0;
-  color: rgba(0, 0, 0, .74);
+  color: var(--ig-gray-700);
   text-align: left;
   text-decoration: none;
 }
@@ -62,7 +62,7 @@
 :local(.resourceIcon) {
   flex: 0 0 28px;
   margin-right: 16px;
-  color: #09f;
+  color: var(--ig-primary-500);
   font-size: 28px;
 }
 
@@ -73,12 +73,12 @@
 
 :local(.resource) strong {
   margin-bottom: 2px;
-  color: #731963;
+  color: var(--ig-secondary-500);
   font-size: 1rem;
 }
 
 :local(.resource) small {
-  color: #000;
+  color: var(--ig-gray-900);
   font-size: 0.875rem;
   line-height: 1.4;
 }
diff --git a/packages/cli/templates/react/igr-ts/projects/side-nav/files/src/app/app.css b/packages/cli/templates/react/igr-ts/projects/side-nav/files/src/app/app.css
index 93d0473a6..c75d2817b 100644
--- a/packages/cli/templates/react/igr-ts/projects/side-nav/files/src/app/app.css
+++ b/packages/cli/templates/react/igr-ts/projects/side-nav/files/src/app/app.css
@@ -11,8 +11,8 @@
   flex: 0 0 auto;
   height: 56px;
   padding: 0 16px;
-  background: #239ef0;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, .24);
+  background: var(--ig-primary-500);
+  box-shadow: var(--ig-elevation-4);
   box-sizing: border-box;
 }
 
@@ -21,7 +21,7 @@
   font-size: 1.25rem;
   font-weight: 600;
   line-height: 1;
-  color: #000;
+  color: var(--ig-primary-500-contrast);
 }
 
 .app__menu-button {
@@ -31,7 +31,7 @@
   width: 40px;
   height: 40px;
   padding: 0;
-  color: #000;
+  color: var(--ig-primary-500-contrast);
   border: 0;
   background: transparent;
   cursor: pointer;
@@ -55,20 +55,20 @@
 
 igc-nav-drawer-item::part(base) {
   min-height: 48px;
-  color: #2d2d2d;
+  color: var(--ig-gray-900);
 }
 
 igc-nav-drawer-item[active]::part(base) {
-  background: #e0f2ff;
-  color: #0075d2;
+  background: var(--ig-primary-100);
+  color: var(--ig-primary-700);
 }
 
 igc-nav-drawer-item[active] igc-icon {
-  color: #0075d2;
+  color: var(--ig-primary-700);
 }
 
 igc-nav-drawer-item:not([active]) igc-icon {
-  color: #2d2d2d;
+  color: var(--ig-gray-900);
 }
 
 .app__content {
diff --git a/packages/cli/templates/react/igr-ts/projects/side-nav/files/src/app/home/style.module.css b/packages/cli/templates/react/igr-ts/projects/side-nav/files/src/app/home/style.module.css
index ca8b97595..040b35c98 100644
--- a/packages/cli/templates/react/igr-ts/projects/side-nav/files/src/app/home/style.module.css
+++ b/packages/cli/templates/react/igr-ts/projects/side-nav/files/src/app/home/style.module.css
@@ -4,7 +4,7 @@
   margin: auto;
   padding: 48px 24px;
   box-sizing: border-box;
-  font-family: "Titillium Web", "Segoe UI", Arial, sans-serif;
+  font-family: var(--ig-font-family);
 }
 
 :local(.intro) {
@@ -15,7 +15,7 @@
 
 :local(.header) {
   margin: 0 0 12px;
-  color: #09f;
+  color: var(--ig-primary-500);
   font-size: 3rem;
   font-weight: 600;
   line-height: 1.2;
@@ -23,7 +23,7 @@
 
 :local(.description) {
   margin: 0;
-  color: #000;
+  color: var(--ig-gray-900);
   font-size: 1.125rem;
   line-height: 1.5;
 }
@@ -50,7 +50,7 @@
   align-items: center;
   min-height: 64px;
   padding: 6px 0;
-  color: rgba(0, 0, 0, .74);
+  color: var(--ig-gray-700);
   text-align: left;
   text-decoration: none;
 }
@@ -62,7 +62,7 @@
 :local(.resourceIcon) {
   flex: 0 0 28px;
   margin-right: 16px;
-  color: #09f;
+  color: var(--ig-primary-500);
   font-size: 28px;
 }
 
@@ -73,12 +73,12 @@
 
 :local(.resource) strong {
   margin-bottom: 2px;
-  color: #731963;
+  color: var(--ig-secondary-500);
   font-size: 1rem;
 }
 
 :local(.resource) small {
-  color: #000;
+  color: var(--ig-gray-900);
   font-size: 0.875rem;
   line-height: 1.4;
 }