diff --git a/src/components/adopters.module.css b/src/components/adopters.module.css
index 49f4035c96..9b023b7d87 100644
--- a/src/components/adopters.module.css
+++ b/src/components/adopters.module.css
@@ -5,7 +5,7 @@
 
   & h3,
   & p {
-    color: var(--colors-ory-dark);
+    color: var(--colors-base-dark);
   }
 
   & a img {
diff --git a/src/components/adopters.module.css.d.ts b/src/components/adopters.module.css.d.ts
index 4765bb6a53..47e2526c95 100644
--- a/src/components/adopters.module.css.d.ts
+++ b/src/components/adopters.module.css.d.ts
@@ -1,8 +1,7 @@
 declare const styles: {
-  readonly "adopters": string;
-  readonly "list": string;
-  readonly "logos": string;
-  readonly "logosInner": string;
-};
-export = styles;
-
+  readonly adopters: string
+  readonly list: string
+  readonly logos: string
+  readonly logosInner: string
+}
+export = styles
diff --git a/src/components/announcement.module.css b/src/components/announcement.module.css
index 347312dc39..d4ce23e1a3 100644
--- a/src/components/announcement.module.css
+++ b/src/components/announcement.module.css
@@ -12,7 +12,7 @@
     text-decoration: underline;
     &:hover,
     &:active {
-      color: var(--colors-ory-default);
+      color: var(--colors-themed-default);
     }
   }
 }
diff --git a/src/components/announcement.module.css.d.ts b/src/components/announcement.module.css.d.ts
index b003d1dcfe..80b07a61db 100644
--- a/src/components/announcement.module.css.d.ts
+++ b/src/components/announcement.module.css.d.ts
@@ -1,5 +1,4 @@
 declare const styles: {
-  readonly "announcement": string;
-};
-export = styles;
-
+  readonly announcement: string
+}
+export = styles
diff --git a/src/components/blog-hero.module.css b/src/components/blog-hero.module.css
index ba9b31dca8..b94ab1deba 100644
--- a/src/components/blog-hero.module.css
+++ b/src/components/blog-hero.module.css
@@ -1,7 +1,7 @@
 @import '../styles/properties.css';
 
 .title {
-  background: var(--colors-ory-dark);
+  background: var(--colors-base-dark);
 
   color: var(--colors-base-white);
 
@@ -25,13 +25,13 @@
     color: var(--colors-base-white);
 
     & .author {
-      color: var(--colors-ory-default);
+      color: var(--colors-themed-default);
     }
   }
 }
 
 .subtitle {
-  color: var(--colors-ory-default);
+  color: var(--colors-themed-default);
   font-size: 12px;
   line-height: 126%;
   letter-spacing: 0.03em;
@@ -56,12 +56,12 @@
 }
 
 .teaser {
-  background: var(--colors-ory-dark);
+  background: var(--colors-base-dark);
 
   color: var(--colors-base-white);
 
   & a:any-link {
-    color: var(--colors-ory-default);
+    color: var(--colors-themed-default);
 
     &:hover,
     &:active,
diff --git a/src/components/blog-hero.module.css.d.ts b/src/components/blog-hero.module.css.d.ts
index bc3575e675..f42afebabe 100644
--- a/src/components/blog-hero.module.css.d.ts
+++ b/src/components/blog-hero.module.css.d.ts
@@ -1,9 +1,8 @@
 declare const styles: {
-  readonly "title": string;
-  readonly "meta": string;
-  readonly "author": string;
-  readonly "subtitle": string;
-  readonly "teaser": string;
-};
-export = styles;
-
+  readonly title: string
+  readonly meta: string
+  readonly author: string
+  readonly subtitle: string
+  readonly teaser: string
+}
+export = styles
diff --git a/src/components/blog-section.module.css b/src/components/blog-section.module.css
index df201b0c67..759f73a154 100644
--- a/src/components/blog-section.module.css
+++ b/src/components/blog-section.module.css
@@ -17,7 +17,7 @@
   & dt,
   & p {
     margin-top: 0;
-    color: var(--colors-ory-dark);
+    color: var(--colors-base-dark);
   }
 
   & p,
@@ -89,12 +89,12 @@
   }
 
   & a:any-link {
-    color: var(--colors-ory-default);
+    color: var(--colors-themed-default);
   }
 
   & p a:hover,
   & p a:active {
-    color: var(--colors-ory-dark);
+    color: var(--colors-base-dark);
     text-decoration: underline;
   }
 
@@ -109,7 +109,7 @@
     font-weight: 500;
     font-size: 14px;
     line-height: 168%;
-    color: var(--colors-ory-dark);
+    color: var(--colors-base-dark);
     font-family: 'IBM Plex Mono', monospace;
   }
 
@@ -123,7 +123,7 @@
     line-height: 168%;
     padding-left: 34px;
     margin-bottom: 32px;
-    border-left: 2px solid var(--colors-ory-default);
+    border-left: 2px solid var(--colors-themed-default);
   }
 
   & figure {
diff --git a/src/components/blog-section.module.css.d.ts b/src/components/blog-section.module.css.d.ts
index a09ec68fc5..b0222e05fb 100644
--- a/src/components/blog-section.module.css.d.ts
+++ b/src/components/blog-section.module.css.d.ts
@@ -1,5 +1,4 @@
 declare const styles: {
-  readonly "section": string;
-};
-export = styles;
-
+  readonly section: string
+}
+export = styles
diff --git a/src/components/codebox.module.css b/src/components/codebox.module.css
index bd010ce54c..8f11443036 100644
--- a/src/components/codebox.module.css
+++ b/src/components/codebox.module.css
@@ -7,7 +7,7 @@
 
 .editor-header {
   display: flex;
-  align-items: bottom;
+  align-items: baseline;
   color: var(--colors-base-white);
   & .tabs {
     overflow: auto;
@@ -21,18 +21,10 @@
     margin-right: 16px;
     cursor: pointer;
     display: inline;
-  }
-}
-
-:global .theme-hydra :local .tab {
-  &.selected {
-    border-bottom: 1px solid var(--colors-hydra-default);
-  }
-}
 
-:global .theme-kratos :local .tab {
-  &.selected {
-    border-bottom: 1px solid var(--colors-kratos-default);
+    &.selected {
+      border-bottom: 1px solid var(--colors-themed-default);
+    }
   }
 }
 
@@ -45,20 +37,12 @@
     width: 8px;
     height: 8px;
     border-radius: 4px;
-    background-color: var(--colors-ory-default);
+    background-color: var(--colors-themed-weak);
     margin-right: 5px;
-  }
-}
-
-:global .theme-hydra :local .window-action {
-  &.primary {
-    background-color: var(--colors-hydra-default);
-  }
-}
 
-:global .theme-kratos :local .window-action {
-  &.primary {
-    background-color: var(--colors-kratos-default);
+    &.primary {
+      background-color: var(--colors-themed-default);
+    }
   }
 }
 
diff --git a/src/components/codebox.module.css.d.ts b/src/components/codebox.module.css.d.ts
index f0a00b54cd..d334dcceda 100644
--- a/src/components/codebox.module.css.d.ts
+++ b/src/components/codebox.module.css.d.ts
@@ -1,14 +1,13 @@
 declare const styles: {
-  readonly "box": string;
-  readonly "editorHeader": string;
-  readonly "tabs": string;
-  readonly "tab": string;
-  readonly "selected": string;
-  readonly "windowActions": string;
-  readonly "windowAction": string;
-  readonly "primary": string;
-  readonly "content": string;
-  readonly "active": string;
-};
-export = styles;
-
+  readonly box: string
+  readonly editorHeader: string
+  readonly tabs: string
+  readonly tab: string
+  readonly selected: string
+  readonly windowActions: string
+  readonly windowAction: string
+  readonly primary: string
+  readonly content: string
+  readonly active: string
+}
+export = styles
diff --git a/src/components/collaborator.module.css b/src/components/collaborator.module.css
index 61d51758a7..f2446e2398 100644
--- a/src/components/collaborator.module.css
+++ b/src/components/collaborator.module.css
@@ -5,7 +5,7 @@
 
   & h3,
   & p {
-    color: var(--colors-ory-dark);
+    color: var(--colors-base-dark);
   }
 }
 
diff --git a/src/components/collaborator.module.css.d.ts b/src/components/collaborator.module.css.d.ts
index ad6e7eb31e..79d260f365 100644
--- a/src/components/collaborator.module.css.d.ts
+++ b/src/components/collaborator.module.css.d.ts
@@ -1,6 +1,5 @@
 declare const styles: {
-  readonly "collaborator": string;
-  readonly "image": string;
-};
-export = styles;
-
+  readonly collaborator: string
+  readonly image: string
+}
+export = styles
diff --git a/src/components/collaborator.tsx b/src/components/collaborator.tsx
index e7c144b557..f7a1c48cce 100644
--- a/src/components/collaborator.tsx
+++ b/src/components/collaborator.tsx
@@ -4,9 +4,10 @@ import styles from './collaborator.module.css'
 const collaborator = [
   {
     title: 'OpenCollective',
-    image: 'https://opencollective.com/ory/contributors.svg?avatarHeight=24&width=540&button=false',
+    image:
+      'https://opencollective.com/ory/contributors.svg?avatarHeight=24&width=540&button=false',
     url: 'https://github.com/ory',
-  }
+  },
 ]
 
 const Collaborator = () => (
@@ -25,11 +26,16 @@ const Collaborator = () => (
         </div>
         <div className="col-lg-offset-2 col-lg-4  col-md-offset-1 col-md-10  col-sm-offset-1 col-sm-10">
           <div className={styles.image}>
-              {collaborator.map(({ title, image, url }) => (
-                <a href={url}>
-                  <img key={title} src={image} alt={title} className="responsive" />
-                </a>
-              ))}
+            {collaborator.map(({ title, image, url }) => (
+              <a href={url}>
+                <img
+                  key={title}
+                  src={image}
+                  alt={title}
+                  className="responsive"
+                />
+              </a>
+            ))}
           </div>
         </div>
         <div className="hidden-lg  col-lg-offset-1 col-lg-4  col-md-offset-1 col-md-10  col-sm-offset-1 col-sm-10">
diff --git a/src/components/footer.module.css b/src/components/footer.module.css
index 8635175eda..baa3505f65 100644
--- a/src/components/footer.module.css
+++ b/src/components/footer.module.css
@@ -1,36 +1,17 @@
 @import '../styles/properties.css';
 
 .footer {
-  background-color: var(--colors-ory-dark);
+  background-color: var(--colors-base-dark);
   padding: 36px 0;
-  color: var(--colors-ui-white);
+  color: var(--colors-base-white);
 }
 
 .footer a:any-link {
   color: var(--colors-base-white);
-}
-
-:global .theme-default :local .footer a:any-link {
-  &:hover,
-  &:active,
-  &:focus {
-    color: var(--colors-ory-default);
-  }
-}
-
-:global .theme-hydra :local .footer a:any-link {
-  &:hover,
-  &:active,
-  &:focus {
-    color: var(--colors-hydra-default);
-  }
-}
-
-:global .theme-kratos :local .footer a:any-link {
   &:hover,
   &:active,
   &:focus {
-    color: var(--colors-kratos-default);
+    color: var(--colors-themed-default);
   }
 }
 
diff --git a/src/components/footer.module.css.d.ts b/src/components/footer.module.css.d.ts
index 4543b2ef9e..c455c87397 100644
--- a/src/components/footer.module.css.d.ts
+++ b/src/components/footer.module.css.d.ts
@@ -1,12 +1,11 @@
 declare const styles: {
-  readonly "footer": string;
-  readonly "contact": string;
-  readonly "copyright": string;
-  readonly "listTitle": string;
-  readonly "list": string;
-  readonly "item": string;
-  readonly "menuRow": string;
-  readonly "menuItem": string;
-};
-export = styles;
-
+  readonly footer: string
+  readonly contact: string
+  readonly copyright: string
+  readonly listTitle: string
+  readonly list: string
+  readonly item: string
+  readonly menuRow: string
+  readonly menuItem: string
+}
+export = styles
diff --git a/src/components/header.module.css b/src/components/header.module.css
index 329717f0f8..e9f6b43e79 100644
--- a/src/components/header.module.css
+++ b/src/components/header.module.css
@@ -3,60 +3,25 @@
 .header {
   height: var(--nav-height);
   width: 100%;
-  background: var(--colors-ory-dark);
+  background: var(--colors-base-dark);
   color: var(--colors-base-white);
   display: flex;
   align-items: center;
 
-  & a,
-  & a:visited {
-    color: var(--colors-base-white);
-  }
-}
-
-:global .theme-default :local .header {
-  & a,
-  & a:visited {
-    &:hover,
-    &:focus,
-    &:active {
-      color: var(--colors-ory-default);
-    }
-  }
-
   & .logo {
-    color: var(--colors-ory-default);
+    color: var(--colors-themed-default);
   }
-}
 
-:global .theme-hydra :local .header {
   & a,
   & a:visited {
-    &:hover,
-    &:focus,
-    &:active {
-      color: var(--colors-hydra-default);
-    }
-  }
-
-  & .logo {
-    color: var(--colors-hydra-default);
-  }
-}
+    color: var(--colors-base-white);
 
-:global .theme-kratos :local .header {
-  & a,
-  & a:visited {
     &:hover,
     &:focus,
     &:active {
-      color: var(--colors-kratos-default);
+      color: var(--colors-themed-default);
     }
   }
-
-  & .logo {
-    color: var(--colors-kratos-default);
-  }
 }
 
 .project-name {
diff --git a/src/components/header.module.css.d.ts b/src/components/header.module.css.d.ts
index e6c6fd6877..39e5aeeda7 100644
--- a/src/components/header.module.css.d.ts
+++ b/src/components/header.module.css.d.ts
@@ -1,12 +1,11 @@
 declare const styles: {
-  readonly "header": string;
-  readonly "logo": string;
-  readonly "projectName": string;
-  readonly "projectNameTiny": string;
-  readonly "menu": string;
-  readonly "leftMenu": string;
-  readonly "rightMenu": string;
-  readonly "iconMenu": string;
-};
-export = styles;
-
+  readonly header: string
+  readonly logo: string
+  readonly projectName: string
+  readonly projectNameTiny: string
+  readonly menu: string
+  readonly leftMenu: string
+  readonly rightMenu: string
+  readonly iconMenu: string
+}
+export = styles
diff --git a/src/components/hero.module.css b/src/components/hero.module.css
index 030265fe45..2e0f73936e 100644
--- a/src/components/hero.module.css
+++ b/src/components/hero.module.css
@@ -1,101 +1,36 @@
 @import '../styles/properties.css';
 
 .hero {
-  background-color: var(--colors-ory-default);
+  background-color: var(--colors-themed-default);
   color: var(--colors-base-white);
 
   & :global a.cta.secondary:any-link {
-    color: var(--colors-ory-dark);
-    border-color: var(--colors-ory-dark);
-  }
-
-  & :global a.cta.primary:any-link {
-    color: var(--colors-base-white);
-  }
-
-  & :global .container-fluid {
-    position: relative;
-    padding: 112px 0;
-  }
-}
-
-:global .theme-default :local .hero {
-  background-color: var(--colors-ory-default);
-}
+    color: var(--colors-base-dark);
+    border-color: var(--colors-base-dark);
 
-:global .theme-default :local .hero :global a.cta {
-  &.primary:any-link {
-    background-color: var(--colors-ory-dark);
-    border-color: var(--colors-ory-dark);
-
-    &:hover,
-    &:focus,
-    &:active {
-      background-color: var(--colors-base-white);
-      border-color: var(--colors-base-white);
-      color: var(--colors-ory-dark);
-    }
-  }
-
-  &.secondary:any-link {
     &:hover {
       border-color: var(--colors-base-white);
       color: var(--colors-base-white);
     }
   }
-}
-
-:global .theme-hydra :local .hero {
-  background-color: var(--colors-hydra-default);
-}
-
-:global .theme-hydra :local .hero :global a.cta {
-  &.primary:any-link {
-    background-color: var(--colors-ory-dark);
-    border-color: var(--colors-ory-dark);
-
-    &:hover,
-    &:focus,
-    &:active {
-      background-color: var(--colors-base-white);
-      border-color: var(--colors-base-white);
-      color: var(--colors-hydra-default);
-    }
-  }
-
-  &.secondary:any-link {
-    &:hover,
-    &:focus {
-      border-color: var(--colors-base-white);
-      color: var(--colors-base-white);
-    }
-  }
-}
-
-:global .theme-kratos :local .hero {
-  background-color: var(--colors-kratos-default);
-}
 
-:global .theme-kratos :local .hero :global a.cta {
-  &.primary:any-link {
-    background-color: var(--colors-ory-dark);
-    border-color: var(--colors-ory-dark);
+  & :global a.cta.primary:any-link {
+    color: var(--colors-base-white);
+    background-color: var(--colors-base-dark);
+    border-color: var(--colors-base-dark);
 
     &:hover,
     &:focus,
     &:active {
       background-color: var(--colors-base-white);
       border-color: var(--colors-base-white);
-      color: var(--colors-kratos-default);
+      color: var(--colors-themed-default);
     }
   }
 
-  &.secondary:any-link {
-    &:hover,
-    &:focus {
-      border-color: var(--colors-base-white);
-      color: var(--colors-base-white);
-    }
+  & :global .container-fluid {
+    position: relative;
+    padding: 112px 0;
   }
 }
 
diff --git a/src/components/hero.module.css.d.ts b/src/components/hero.module.css.d.ts
index 99114522ef..e17687eeb5 100644
--- a/src/components/hero.module.css.d.ts
+++ b/src/components/hero.module.css.d.ts
@@ -1,8 +1,7 @@
 declare const styles: {
-  readonly "hero": string;
-  readonly "primary": string;
-  readonly "secondary": string;
-  readonly "logo": string;
-};
-export = styles;
-
+  readonly hero: string
+  readonly primary: string
+  readonly secondary: string
+  readonly logo: string
+}
+export = styles
diff --git a/src/components/mobile-menu.module.css b/src/components/mobile-menu.module.css
index 3440908ab8..2ecb3c5ab8 100644
--- a/src/components/mobile-menu.module.css
+++ b/src/components/mobile-menu.module.css
@@ -68,7 +68,7 @@
 
 .nav-items {
   transition: all ease-in 300ms;
-  background-color: var(--colors-ory-dark);
+  background-color: var(--colors-base-dark);
   position: absolute;
   z-index: 1;
   top: var(--nav-height);
diff --git a/src/components/mobile-menu.module.css.d.ts b/src/components/mobile-menu.module.css.d.ts
index b70bba7509..dac5bba3f6 100644
--- a/src/components/mobile-menu.module.css.d.ts
+++ b/src/components/mobile-menu.module.css.d.ts
@@ -1,10 +1,9 @@
 declare const styles: {
-  readonly "navIcon": string;
-  readonly "divider": string;
-  readonly "show": string;
-  readonly "navContainer": string;
-  readonly "isActive": string;
-  readonly "navItems": string;
-};
-export = styles;
-
+  readonly navIcon: string
+  readonly divider: string
+  readonly show: string
+  readonly navContainer: string
+  readonly isActive: string
+  readonly navItems: string
+}
+export = styles
diff --git a/src/components/newsletter.module.css b/src/components/newsletter.module.css
index cd5ae625f5..b0fc640613 100644
--- a/src/components/newsletter.module.css
+++ b/src/components/newsletter.module.css
@@ -4,7 +4,7 @@
 @import '../styles/typography.css';
 
 .newsletter {
-  background-color: var(--colors-ory-dark);
+  background-color: var(--colors-base-dark);
   padding: 96px 0;
   position: relative;
   color: var(--colors-base-white);
@@ -31,7 +31,7 @@
 }
 
 .light {
-  background-color: var(--colors-ory-dark);
+  background-color: var(--colors-base-dark);
 }
 
 .form {
@@ -53,41 +53,12 @@
     cursor: pointer;
     transition: color ease 200ms, background-color ease 200ms,
       border-color ease 200ms;
-  }
-
-  & input[type='email'] {
-    background-color: rgba(255, 255, 255, 0.3);
-    width: calc(60% - 32px);
-
-    &::placeholder {
-      color: var(--colors-base-white);
-    }
-  }
-}
-
-:global .theme-default {
-  & :local .form input[type='button'] {
-    background-color: var(--colors-ory-default);
-
-    &:hover,
-    &:focus {
-      color: var(--colors-ory-default);
-      background-color: var(--colors-base-white);
-    }
-
-    &:active {
-      background-color: var(--colors-base-white);
-    }
-  }
-}
 
-:global .theme-hydra {
-  & :local .form input[type='button'] {
-    background-color: var(--colors-hydra-default);
+    background-color: var(--colors-themed-default);
 
     &:hover,
     &:focus {
-      color: var(--colors-hydra-default);
+      color: var(--colors-themed-default);
       background-color: var(--colors-base-white);
     }
 
@@ -95,20 +66,13 @@
       background-color: var(--colors-base-white);
     }
   }
-}
-
-:global .theme-kratos {
-  & :local .form input[type='button'] {
-    background-color: var(--colors-kratos-default);
 
-    &:hover,
-    &:focus {
-      color: var(--colors-kratos-default);
-      background-color: var(--colors-base-white);
-    }
+  & input[type='email'] {
+    background-color: rgba(255, 255, 255, 0.3);
+    width: calc(60% - 32px);
 
-    &:active {
-      background-color: var(--colors-base-white);
+    &::placeholder {
+      color: var(--colors-base-white);
     }
   }
 }
diff --git a/src/components/newsletter.module.css.d.ts b/src/components/newsletter.module.css.d.ts
index bc9afaa88b..2b3e4265f7 100644
--- a/src/components/newsletter.module.css.d.ts
+++ b/src/components/newsletter.module.css.d.ts
@@ -1,8 +1,7 @@
 declare const styles: {
-  readonly "newsletter": string;
-  readonly "right": string;
-  readonly "light": string;
-  readonly "form": string;
-};
-export = styles;
-
+  readonly newsletter: string
+  readonly right: string
+  readonly light: string
+  readonly form: string
+}
+export = styles
diff --git a/src/components/profile.module.css b/src/components/profile.module.css
index f4eda6bb48..be6a4980d9 100644
--- a/src/components/profile.module.css
+++ b/src/components/profile.module.css
@@ -9,7 +9,7 @@
     font-size: 18px;
     line-height: 168%;
     padding-left: 20px;
-    color: var(--colors-ory-dark);
+    color: var(--colors-base-dark);
   }
 
   & p {
diff --git a/src/components/profile.module.css.d.ts b/src/components/profile.module.css.d.ts
index 97111b8dbc..959ad35b28 100644
--- a/src/components/profile.module.css.d.ts
+++ b/src/components/profile.module.css.d.ts
@@ -1,5 +1,4 @@
 declare const styles: {
-  readonly "profile": string;
-};
-export = styles;
-
+  readonly profile: string
+}
+export = styles
diff --git a/src/components/projects.module.css.d.ts b/src/components/projects.module.css.d.ts
index 34fb19e39d..bdd43a421c 100644
--- a/src/components/projects.module.css.d.ts
+++ b/src/components/projects.module.css.d.ts
@@ -1,11 +1,10 @@
 declare const styles: {
-  readonly "description": string;
-  readonly "project": string;
-  readonly "kratos": string;
-  readonly "hydra": string;
-  readonly "oathkeeper": string;
-  readonly "keto": string;
-  readonly "section": string;
-};
-export = styles;
-
+  readonly description: string
+  readonly project: string
+  readonly kratos: string
+  readonly hydra: string
+  readonly oathkeeper: string
+  readonly keto: string
+  readonly section: string
+}
+export = styles
diff --git a/src/components/responsive-section.module.css b/src/components/responsive-section.module.css
index 17f92540d6..90306269a1 100644
--- a/src/components/responsive-section.module.css
+++ b/src/components/responsive-section.module.css
@@ -16,23 +16,27 @@
 
     & h3,
     & p {
-      color: var(--colors-ory-dark);
+      color: var(--colors-base-dark);
     }
 
     & a:any-link {
+      color: var(--colors-themed-default);
+
       &:hover,
       &:active,
       &:focus {
-        color: var(--colors-ory-default);
+        color: var(--colors-base-dark);
       }
     }
   }
 
   &.dark {
     color: var(--colors-base-white);
-    background-color: var(--colors-ory-dark);
+    background-color: var(--colors-base-dark);
 
     & a:any-link {
+      color: var(--colors-themed-default);
+
       &:hover,
       &:active,
       &:focus {
@@ -42,39 +46,6 @@
   }
 }
 
-:global .theme-default :local .section.light a:any-link {
-  color: var(--colors-ory-default);
-
-  &:hover,
-  &:active,
-  &:focus {
-    color: var(--colors-ory-dark);
-  }
-}
-:global .theme-default :local .section a:any-link {
-  color: var(--colors-ory-default);
-}
-
-:global .theme-hydra :local .section a:any-link {
-  color: var(--colors-hydra-default);
-
-  &:hover,
-  &:active,
-  &:focus {
-    color: var(--colors-ory-dark);
-  }
-}
-
-:global .theme-kratos :local .section a:any-link {
-  color: var(--colors-kratos-default);
-
-  &:hover,
-  &:active,
-  &:focus {
-    color: var(--colors-ory-dark);
-  }
-}
-
 @media (--mobile-viewport) {
   .section :global .container-fluid .row {
     flex-direction: column-reverse;
diff --git a/src/components/responsive-section.module.css.d.ts b/src/components/responsive-section.module.css.d.ts
index 3fc00c6936..ac7973b4eb 100644
--- a/src/components/responsive-section.module.css.d.ts
+++ b/src/components/responsive-section.module.css.d.ts
@@ -1,7 +1,6 @@
 declare const styles: {
-  readonly "section": string;
-  readonly "light": string;
-  readonly "dark": string;
-};
-export = styles;
-
+  readonly section: string
+  readonly light: string
+  readonly dark: string
+}
+export = styles
diff --git a/src/components/section.module.css b/src/components/section.module.css
index 3405716cbd..c8fecea46a 100644
--- a/src/components/section.module.css
+++ b/src/components/section.module.css
@@ -16,23 +16,27 @@
 
     & h3,
     & p {
-      color: var(--colors-ory-dark);
+      color: var(--colors-base-dark);
     }
 
     & a:any-link {
+      color: var(--colors-themed-default);
+
       &:hover,
       &:active,
       &:focus {
-        color: var(--colors-ory-dark);
+        color: var(--colors-base-dark);
       }
     }
   }
 
   &.dark {
     color: var(--colors-base-white);
-    background-color: var(--colors-ory-dark);
+    background-color: var(--colors-base-dark);
 
     & a:any-link {
+      color: var(--colors-themed-default);
+
       &:hover,
       &:active,
       &:focus {
@@ -42,22 +46,6 @@
   }
 }
 
-:global .theme-default :local .section a:any-link {
-  color: var(--colors-ory-default);
-}
-
-:global .theme-default :local .section.light a:any-link {
-  color: var(--colors-ory-default);
-}
-
-:global .theme-hydra :local .section a:any-link {
-  color: var(--colors-hydra-default);
-}
-
-:global .theme-kratos :local .section a:any-link {
-  color: var(--colors-kratos-default);
-}
-
 @media (--sm-viewport) {
   .section {
     padding: 64px 0;
diff --git a/src/components/section.module.css.d.ts b/src/components/section.module.css.d.ts
index 3fc00c6936..ac7973b4eb 100644
--- a/src/components/section.module.css.d.ts
+++ b/src/components/section.module.css.d.ts
@@ -1,7 +1,6 @@
 declare const styles: {
-  readonly "section": string;
-  readonly "light": string;
-  readonly "dark": string;
-};
-export = styles;
-
+  readonly section: string
+  readonly light: string
+  readonly dark: string
+}
+export = styles
diff --git a/src/components/stats.module.css b/src/components/stats.module.css
index 10a7ec0812..c90d38aef8 100644
--- a/src/components/stats.module.css
+++ b/src/components/stats.module.css
@@ -10,30 +10,9 @@
   }
 }
 
-:global .theme-default {
-  background-color: var(--colors-ory-dark);
-  & :local .items .item {
-    & .amount * {
-      color: var(--colors-ory-default);
-    }
-  }
-}
-
-:global .theme-hydra {
-  background-color: var(--colors-ory-dark);
-  & :local .items .item {
-    & .amount * {
-      color: var(--colors-hydra-default);
-    }
-  }
-}
-
-:global .theme-kratos {
-  background-color: var(--colors-ory-dark);
-  & :local .items .item {
-    & .amount * {
-      color: var(--colors-kratos-default);
-    }
+.items .item {
+  & .amount * {
+    color: var(--colors-themed-default);
   }
 }
 
diff --git a/src/components/stats.module.css.d.ts b/src/components/stats.module.css.d.ts
index 0be05f38d1..1c89eefde6 100644
--- a/src/components/stats.module.css.d.ts
+++ b/src/components/stats.module.css.d.ts
@@ -1,10 +1,9 @@
 declare const styles: {
-  readonly "stats": string;
-  readonly "items": string;
-  readonly "item": string;
-  readonly "amount": string;
-  readonly "title": string;
-  readonly "description": string;
-};
-export = styles;
-
+  readonly stats: string
+  readonly items: string
+  readonly item: string
+  readonly amount: string
+  readonly title: string
+  readonly description: string
+}
+export = styles
diff --git a/src/components/vertical-divider.module.css b/src/components/vertical-divider.module.css
index 12ddc1a341..521a678ffd 100644
--- a/src/components/vertical-divider.module.css
+++ b/src/components/vertical-divider.module.css
@@ -2,24 +2,7 @@
   border-left: 1px solid;
   position: absolute;
   left: 50%;
-}
-
-:global .theme-default {
-  & :local .divider {
-    border-color: var(--colors-ory-default);
-  }
-}
-
-:global .theme-hydra {
-  & :local .divider {
-    border-color: var(--colors-hydra-default);
-  }
-}
-
-:global .theme-kratos {
-  & :local .divider {
-    border-color: var(--colors-kratos-default);
-  }
+  border-color: var(--colors-themed-default);
 }
 
 @media (--sm-viewport) {
diff --git a/src/components/vertical-divider.module.css.d.ts b/src/components/vertical-divider.module.css.d.ts
index f6dd603cfe..cbc8f51f1c 100644
--- a/src/components/vertical-divider.module.css.d.ts
+++ b/src/components/vertical-divider.module.css.d.ts
@@ -1,5 +1,4 @@
 declare const styles: {
-  readonly "divider": string;
-};
-export = styles;
-
+  readonly divider: string
+}
+export = styles
diff --git a/src/pages/blog.module.css b/src/pages/blog.module.css
index aaa5025dd6..02b7237012 100644
--- a/src/pages/blog.module.css
+++ b/src/pages/blog.module.css
@@ -2,7 +2,7 @@
   font-weight: 300;
   font-size: 36px;
   line-height: 126%;
-  color: var(--colors-ory-dark);
+  color: var(--colors-base-dark);
 }
 
 .post-list {
@@ -48,12 +48,12 @@ h3.post-title {
 
   & a:any-link {
     transition: all ease 200ms;
-    color: var(--colors-ory-default);
+    color: var(--colors-themed-default);
 
     &:hover,
     &:active,
     &:focus {
-      color: var(--colors-ory-dark);
+      color: var(--colors-base-dark);
     }
   }
 }
@@ -67,7 +67,7 @@ p.post-teaser {
 }
 
 p.post-link a:any-link {
-  color: var(--colors-ory-default);
+  color: var(--colors-themed-default);
   font-weight: 500;
   font-size: 14px;
   line-height: 140%;
@@ -76,6 +76,6 @@ p.post-link a:any-link {
   &:hover,
   &:active,
   &:focus {
-    color: var(--colors-ory-dark);
+    color: var(--colors-base-dark);
   }
 }
diff --git a/src/pages/blog.module.css.d.ts b/src/pages/blog.module.css.d.ts
index b1fbe28409..2345d0d3de 100644
--- a/src/pages/blog.module.css.d.ts
+++ b/src/pages/blog.module.css.d.ts
@@ -1,11 +1,10 @@
 declare const styles: {
-  readonly "pageTitle": string;
-  readonly "postList": string;
-  readonly "postItem": string;
-  readonly "postOverline": string;
-  readonly "postTitle": string;
-  readonly "postTeaser": string;
-  readonly "postLink": string;
-};
-export = styles;
-
+  readonly pageTitle: string
+  readonly postList: string
+  readonly postItem: string
+  readonly postOverline: string
+  readonly postTitle: string
+  readonly postTeaser: string
+  readonly postLink: string
+}
+export = styles
diff --git a/src/pages/hydra.tsx b/src/pages/hydra.tsx
index 442471b44d..a2a0b6b8a8 100644
--- a/src/pages/hydra.tsx
+++ b/src/pages/hydra.tsx
@@ -11,8 +11,6 @@ import Stats from '../components/stats'
 import CodeBox from '../components/codebox'
 import integrationProcess from '../images/hydra/hydra_process.svg'
 import { brandPrefix } from '../config'
-import cn from 'classnames'
-import ResponsiveSection from '../components/responsive-section'
 import Collaborator from '../components/collaborator'
 
 const IntegrationCodeBox = () => (
diff --git a/src/pages/index.module.css.d.ts b/src/pages/index.module.css.d.ts
index e57c06ee81..6e8bdb1b39 100644
--- a/src/pages/index.module.css.d.ts
+++ b/src/pages/index.module.css.d.ts
@@ -1,5 +1,4 @@
 declare const styles: {
-  readonly "avatar": string;
-};
-export = styles;
-
+  readonly avatar: string
+}
+export = styles
diff --git a/src/pages/kratos.tsx b/src/pages/kratos.tsx
index 3570473c0b..6edbe34b1d 100644
--- a/src/pages/kratos.tsx
+++ b/src/pages/kratos.tsx
@@ -11,8 +11,6 @@ import Stats from '../components/stats'
 import CodeBox from '../components/codebox'
 import kratosProcess from '../images/kratos_process.svg'
 import { brandPrefix } from '../config'
-import cn from 'classnames'
-import ResponsiveSection from '../components/responsive-section'
 import Collaborator from '../components/collaborator'
 
 const IntegrationCodeBox = () => (
@@ -197,4 +195,4 @@ const KratosPage = () => (
   </Layout>
 )
 
-export default KratosPage
\ No newline at end of file
+export default KratosPage
diff --git a/src/styles/global.css b/src/styles/global.css
index a119b3d827..6ce63ac599 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1,6 +1,6 @@
 html {
   font-size: 16px;
-  background-color: var(--colors-ory-dark);
+  background-color: var(--colors-base-dark);
 }
 
 img.responsive {
diff --git a/src/styles/global.css.d.ts b/src/styles/global.css.d.ts
index 31296e3e44..f4fda61c1f 100644
--- a/src/styles/global.css.d.ts
+++ b/src/styles/global.css.d.ts
@@ -1,5 +1,4 @@
 declare const styles: {
-  readonly "responsive": string;
-};
-export = styles;
-
+  readonly responsive: string
+}
+export = styles
diff --git a/src/styles/grid.css.d.ts b/src/styles/grid.css.d.ts
index 3af13607d2..f439449a8e 100644
--- a/src/styles/grid.css.d.ts
+++ b/src/styles/grid.css.d.ts
@@ -1,29 +1,28 @@
 declare const styles: {
-  readonly "containerFluid": string;
-  readonly "row": string;
-  readonly "topSm": string;
-  readonly "middleSm": string;
-  readonly "bottomSm": string;
-  readonly "mobileOffset64": string;
-  readonly "mobileOffset32": string;
-  readonly "mobileOffset16": string;
-  readonly "mobileOffset8": string;
-  readonly "centerMobile": string;
-  readonly "hiddenSm": string;
-  readonly "hiddenMd": string;
-  readonly "hiddenLg": string;
-  readonly "colSm": string;
-  readonly "colSmOffset": string;
-  readonly "topMd": string;
-  readonly "middleMd": string;
-  readonly "bottomMd": string;
-  readonly "colMd": string;
-  readonly "colMdOffset": string;
-  readonly "topLg": string;
-  readonly "middleLg": string;
-  readonly "bottomLg": string;
-  readonly "colLg": string;
-  readonly "colLgOffset": string;
-};
-export = styles;
-
+  readonly containerFluid: string
+  readonly row: string
+  readonly topSm: string
+  readonly middleSm: string
+  readonly bottomSm: string
+  readonly mobileOffset64: string
+  readonly mobileOffset32: string
+  readonly mobileOffset16: string
+  readonly mobileOffset8: string
+  readonly centerMobile: string
+  readonly hiddenSm: string
+  readonly hiddenMd: string
+  readonly hiddenLg: string
+  readonly colSm: string
+  readonly colSmOffset: string
+  readonly topMd: string
+  readonly middleMd: string
+  readonly bottomMd: string
+  readonly colMd: string
+  readonly colMdOffset: string
+  readonly topLg: string
+  readonly middleLg: string
+  readonly bottomLg: string
+  readonly colLg: string
+  readonly colLgOffset: string
+}
+export = styles
diff --git a/src/styles/themes/default.css b/src/styles/themes/default.css
index b005ac48e0..8876965c54 100644
--- a/src/styles/themes/default.css
+++ b/src/styles/themes/default.css
@@ -2,49 +2,60 @@
   --alpha-20: 20;
 
   --colors-base-black: #000000;
-  --colors-base-dark: #19191D;
+  --colors-base-dark: #15283B;
   --colors-base-grey: #5A5B6A;
   --colors-base-text: #99999E;
   --colors-base-light: #F0F0F1;
+  --colors-base-offblack: #19191D;
   --colors-base-white: #ffffff;
 
-  --colors-ory-dark: #15283B;
-  --colors-ory-default: #6274F3;
-  --colors-ory-weak: #C8CEFA;
-  --colors-ory-light: #EAECFE;
+  --colors-themed-default: #6274F3;
+  --colors-themed-weak: #C8CEFA;
+  --colors-themed-light: #EAECFE;
+
+  --colors-green-default: #43A047;
+  --colors-green-weak: #8BDC8E;
+  --colors-green-light: #EDF6EE;
+
+  --colors-yellow-default: #FFB41F;
+  --colors-yellow-weak: #FFDFA0;
+  --colors-yellow-light: #FFF8EA;
+
+  --colors-red-default: #F44336;
+  --colors-red-weak: #F99C95;
+  --colors-red-light: #FEEDEC;
 
-  --colors-kratos-dark: #452400;
   --colors-kratos-default: #FB8200;
   --colors-kratos-weak: #FFB86C;
   --colors-kratos-light: #FEF3E7;
 
-  --colors-hydra-dark: #470B25;
   --colors-hydra-default: #DB2B56;
   --colors-hydra-weak: #FFBDCD;
   --colors-hydra-light: #FDE5EA;
 
-  --colors-oathkeeper-dark: #0C2146;
   --colors-oathkeeper-default: #2979FF;
   --colors-oathkeeper-weak: #B3CFFF;
   --colors-oathkeeper-light: #EBF2FF;
 
-  --colors-keto-dark: #002E1D;
   --colors-keto-default: #00A571;
   --colors-keto-weak: #6BE2BD;
   --colors-keto-light: #E3F6EF;
+}
 
-  --colors-green-dark: #132C14;
-  --colors-green-default: #43A047;
-  --colors-green-weak: #8BDC8E;
-  --colors-green-light: #EDF6EE;
+.theme-hydra {
+  --colors-themed-default: var(--colors-hydra-default);
+  --colors-themed-weak: var(--colors-hydra-weak);
+  --colors-themed-light: var(--colors-hydra-light);
+}
 
-  --colors-yellow-dark: #463209;
-  --colors-yellow-default: #FFB41F;
-  --colors-yellow-weak: #FFDFA0;
-  --colors-yellow-light: #FFF8EA;
+.theme-oathkeeper {
+  --colors-themed-default: var(--colors-oathkeeper-default);
+  --colors-themed-weak: var(--colors-oathkeeper-weak);
+  --colors-themed-light: var(--colors-oathkeeper-light);
+}
 
-  --colors-red-dark: #43130F;
-  --colors-red-default: #F44336;
-  --colors-red-weak: #F99C95;
-  --colors-red-light: #FEEDEC;
+.theme-kratos {
+  --colors-themed-default: var(--colors-kratos-default);
+  --colors-themed-weak: var(--colors-kratos-weak);
+  --colors-themed-light: var(--colors-kratos-light);
 }
diff --git a/src/styles/typography.css.d.ts b/src/styles/typography.css.d.ts
index 588fa8963b..b7bcc37205 100644
--- a/src/styles/typography.css.d.ts
+++ b/src/styles/typography.css.d.ts
@@ -1,10 +1,9 @@
 declare const styles: {
-  readonly "secondary": string;
-  readonly "cta": string;
-  readonly "primary": string;
-  readonly "visited": string;
-  readonly "tertiary": string;
-  readonly "remarkEmoji": string;
-};
-export = styles;
-
+  readonly secondary: string
+  readonly cta: string
+  readonly primary: string
+  readonly visited: string
+  readonly tertiary: string
+  readonly remarkEmoji: string
+}
+export = styles