5 files changed, 97 insertions, 0 deletions
diff --git a/packages/dev-tools-pages/ts/context/compiler.tsx b/packages/dev-tools-pages/ts/context/compiler.tsx
new file mode 100644
index 000000000..177e265e5
--- /dev/null
+++ b/packages/dev-tools-pages/ts/context/compiler.tsx
@@ -0,0 +1,19 @@
+import Icon from 'ts/icons/logos/compiler.svg';
+
+import { ContextInterface } from './index';
+
+export const context: ContextInterface = {
+    title: 'sol-compiler',
+    name: 'compiler',
+    subtitle: 'Solidity compilation that just works',
+    tagline: 'Seamlessly compile an entire solidity project and generate customisable artifacts',
+    icon: Icon,
+    colors: {
+        main: '#1EADCD',
+        secondary: '#D1F4FC',
+        secondary_alt: '#C4F2FC',
+        type: '#30C3E3',
+        type_alt: '#16A9C9',
+        dark: '#4B818D',
+    },
+};
diff --git a/packages/dev-tools-pages/ts/context/cov.tsx b/packages/dev-tools-pages/ts/context/cov.tsx
new file mode 100644
index 000000000..1ade45e9d
--- /dev/null
+++ b/packages/dev-tools-pages/ts/context/cov.tsx
@@ -0,0 +1,19 @@
+import Icon from 'ts/icons/logos/cov.svg';
+
+import { ContextInterface } from './index';
+
+export const context: ContextInterface = {
+    title: 'sol-cov',
+    name: 'cov',
+    subtitle: 'Solidity code coverage',
+    tagline: 'Measure Solidity code coverage',
+    icon: Icon,
+    colors: {
+        main: '#BB9200',
+        secondary: '#F1DB8D',
+        secondary_alt: '#F1D882',
+        type: '#D7AE1B',
+        type_alt: '#BD9406',
+        dark: '#817033',
+    },
+};
diff --git a/packages/dev-tools-pages/ts/context/index.tsx b/packages/dev-tools-pages/ts/context/index.tsx
new file mode 100644
index 000000000..35c647ad6
--- /dev/null
+++ b/packages/dev-tools-pages/ts/context/index.tsx
@@ -0,0 +1,21 @@
+import { createContext } from 'react';
+
+interface ContextInterface {
+    title?: string;
+    name?: string;
+    subtitle?: string;
+    tagline?: string;
+    icon?: React.ReactNode;
+    colors?: {
+        main: string;
+        secondary: string;
+        secondary_alt: string;
+        type: string;
+        type_alt: string;
+        dark: string;
+    };
+}
+
+const ThemeContext = createContext({});
+
+export { ThemeContext, ContextInterface };
diff --git a/packages/dev-tools-pages/ts/context/profiler.tsx b/packages/dev-tools-pages/ts/context/profiler.tsx
new file mode 100644
index 000000000..5ccfa5b4c
--- /dev/null
+++ b/packages/dev-tools-pages/ts/context/profiler.tsx
@@ -0,0 +1,19 @@
+import Icon from 'ts/icons/logos/profiler.svg';
+
+import { ContextInterface } from './index';
+
+export const context: ContextInterface = {
+    title: 'sol-profiler',
+    name: 'profiler',
+    subtitle: 'Gas profiling for Solidity',
+    tagline: "Implement data-guided optimizations by profiling your contract's gas usage",
+    icon: Icon,
+    colors: {
+        main: '#FF7144',
+        secondary: '#FED7CB',
+        secondary_alt: '#FECEBE',
+        type: '#EB8666',
+        type_alt: '#D16745',
+        dark: '#985C49',
+    },
+};
diff --git a/packages/dev-tools-pages/ts/context/trace.tsx b/packages/dev-tools-pages/ts/context/trace.tsx
new file mode 100644
index 000000000..9627cc0a4
--- /dev/null
+++ b/packages/dev-tools-pages/ts/context/trace.tsx
@@ -0,0 +1,19 @@
+import Icon from 'ts/icons/logos/trace.svg';
+
+import { ContextInterface } from './index';
+
+export const context: ContextInterface = {
+    title: 'sol-trace',
+    name: 'trace',
+    subtitle: 'Human-readable stack traces',
+    tagline: 'Immediately locate Solidity errors and rapidly debug failed transactions',
+    icon: Icon,
+    colors: {
+        main: '#4F76FF',
+        secondary: '#CDD8FF',
+        secondary_alt: '#BFCDFF',
+        type: '#7090FF',
+        type_alt: '#355CE5',
+        dark: '#2A4ABC',
+    },
+};