diff --git a/.storybook/preview.js b/.storybook/preview.js
index 5670c716b..87cd3ab9a 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -3,10 +3,9 @@ import '@storybook/addon-console';
 import { addParameters, setCustomElements } from '@storybook/web-components';
 import customElements from '../custom-elements.json';
 import vvdCore from '@vonage/vvd-core';
-import '@vonage/vvd-context';
 
 vvdCore.settled
-	.then(() => console.info('init Vivid context done (preview frame)'))
+	.then(() => console.info('init Vivid core done (preview frame)'))
 	.catch(e => console.error(e));
 
 async function run() {
diff --git a/.storybook/vivid-theme.js b/.storybook/vivid-theme.js
index 11cb3f353..72ad9d8e4 100644
--- a/.storybook/vivid-theme.js
+++ b/.storybook/vivid-theme.js
@@ -1,9 +1,12 @@
 import { create } from '@storybook/theming/create';
-import '@vonage/vvd-context';
+import vvdContext from '@vonage/vvd-context';
 import vvdCore from '@vonage/vvd-core';
 
 vvdCore.settled
-	.then(() => console.info('init Vivid context done (main page)'));
+	.then(() => console.info('init Vivid core done (main page)'));
+
+vvdContext.install()
+	.then(() => console.log('init Vivid context into main document done'));
 
 export default create({
 	base: 'light',
@@ -11,10 +14,6 @@ export default create({
 
 	appBorderRadius: 6,
 
-	fontBase: 'var(--vvd-font-family-spezia), sans-serif',
-	fontCode: 'monospace',
-
-	textColor: '#131415',
 	barSelectedColor: 'black',
 
 	brandTitle: 'Vivid, the Vonage Design System',
diff --git a/common/context/package.json b/common/context/package.json
index 7262509eb..92bc8b12d 100644
--- a/common/context/package.json
+++ b/common/context/package.json
@@ -30,6 +30,7 @@
 	},
 	"devDependencies": {
 		"@vonage/vvd-design-tokens": "^0.16.2",
+		"@vonage/vvd-foundation": "^0.16.2",
 		"@vonage/vvd-typography": "^0.16.2"
 	}
-}
+}
\ No newline at end of file
diff --git a/common/context/src/partials/_layout.scss b/common/context/src/partials/_layout.scss
index 573c8907d..4a2b9a56c 100644
--- a/common/context/src/partials/_layout.scss
+++ b/common/context/src/partials/_layout.scss
@@ -2,5 +2,10 @@
   body {
     margin: 0;
     padding: 0;
-  }
+	}
+
+	code {
+		padding: 3px 4px;
+		border-radius: 6px;
+	}
 }
diff --git a/common/context/src/partials/_theme.scss b/common/context/src/partials/_theme.scss
index f341fc251..73a745731 100644
--- a/common/context/src/partials/_theme.scss
+++ b/common/context/src/partials/_theme.scss
@@ -1,8 +1,18 @@
 @use '@vonage/vvd-design-tokens/build/scss/semantic-variables/scheme-variables';
+@use '@vonage/vvd-foundation/scss/variable-names/color-base-variable-names' as color-base;
 
 @mixin scheme-variables-coupling {
   body {
     background-color: var(#{scheme-variables.$vvd-color-base});
     color: var(#{scheme-variables.$vvd-color-on-base});
-  }
+	}
+
+	code {
+		background-color:var(#{scheme-variables.$vvd-color-surface});
+		color: color-base.$orange-600;
+	}
+
+	a {
+		color: color-base.$purple-600;
+	}
 }
diff --git a/common/context/src/partials/_typography.scss b/common/context/src/partials/_typography.scss
index 8f0ce057a..8fa41d6a0 100644
--- a/common/context/src/partials/_typography.scss
+++ b/common/context/src/partials/_typography.scss
@@ -32,10 +32,22 @@
   p {
     width: 60ch;
     max-width: 100%;
-  }
+	}
+
+	code {
+		@include typography.typography-cat-shorthand('body-1-code');
+	}
+
+	b,
+	strong {
+		@include typography.typography-cat-shorthand('body-1-bold');
+	}
+
+	a {
+		@include typography.typography-cat-shorthand('body-1-link');
+	}
 
-  code,
-  samp,
+	samp,
   kbd,
   var {
 		@include typography.typography-cat-shorthand('body-1-code');
diff --git a/common/context/src/vvd-context.ts b/common/context/src/vvd-context.ts
index c500f2dee..ddbf44648 100644
--- a/common/context/src/vvd-context.ts
+++ b/common/context/src/vvd-context.ts
@@ -1,14 +1,30 @@
 import '@vonage/vvd-core';
-import { style } from './vvd-context.css';
 
-init();
+export default {
+	install,
+};
 
-function init(): void {
-	injectGlobalStyle();
-}
+const CONTEXT_STYLE_IDENTIFIER = 'vivid-context-style';
+
+/**
+ * installs Vivid context (styles) into the target scope
+ */
+async function install(target = document): Promise<void> {
+	if (
+		!target ||
+		(target.nodeType !== Node.DOCUMENT_NODE &&
+			target.nodeType !== Node.DOCUMENT_FRAGMENT_NODE)
+	) {
+		throw new Error(`target document expected; got ${target}`);
+	}
+
+	const { style } = await import('./vvd-context.css');
+
+	let styleElement = target.querySelector(`.${CONTEXT_STYLE_IDENTIFIER}`);
+	if (!styleElement) {
+		styleElement = (target.ownerDocument ?? target).createElement('style');
+	}
 
-function injectGlobalStyle() {
-	const globalStyleSheet = document.createElement('style');
-	globalStyleSheet.innerHTML = style.cssText;
-	document.head.appendChild(globalStyleSheet);
+	styleElement.innerHTML = style.cssText;
+	(target.head || target).appendChild(styleElement);
 }
diff --git a/common/context/stories/context-basic.stories.js b/common/context/stories/context-basic.stories.js
index 6b4e54369..b1a4220cc 100644
--- a/common/context/stories/context-basic.stories.js
+++ b/common/context/stories/context-basic.stories.js
@@ -1,5 +1,4 @@
-import vvdCore from '@vonage/vvd-core';
-import '@vonage/vvd-context';
+import vvdContext from '@vonage/vvd-context';
 import '@vonage/vwc-theme-switch';
 import '@vonage/vwc-top-app-bar';
 import { html } from 'lit-element';
@@ -21,6 +20,10 @@ export const basic = () => html`
 
     <h2>Overview (H2)</h2>
 
+		<p>
+			The contents of this page are an excerps from <a href="https://developer.nexmo.com/voice/voice-api/guides/call-flow">this API docs</a>.
+		</p>
+
     <p>
       The Nexmo Voice API handles two types of phone call:
       <b>inbound</b> and <b>outbound</b>.
@@ -43,6 +46,6 @@ export const basic = () => html`
   </main>
 `;
 
-vvdCore.settled
+vvdContext.install()
 	.then(() => console.log('Vivid context initialised for the context demo story'))
 	.catch(e => console.error(e));
diff --git a/common/foundation/scss/variable-names/_color-base-variable-names.scss b/common/foundation/scss/variable-names/_color-base-variable-names.scss
index 78447034a..278ee4416 100644
--- a/common/foundation/scss/variable-names/_color-base-variable-names.scss
+++ b/common/foundation/scss/variable-names/_color-base-variable-names.scss
@@ -2,3 +2,4 @@ $purple-600: #871EFF;
 $red-100: #fdecec;
 $red-600: #CD0D0D;
 $green-600: #167629;
+$orange-600: rgb(187,55,0);
\ No newline at end of file