diff --git a/packages/ui-toolkit/src/header/brand.js b/packages/ui-toolkit/src/header/brand.js
new file mode 100644
index 00000000..57ab09d5
--- /dev/null
+++ b/packages/ui-toolkit/src/header/brand.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import styled from 'styled-components';
+import remcalc from 'remcalc';
+
+import { H2 } from '../text/headings';
+
+const Brand = H2.extend`
+ text-transform: uppercase;
+ color: ${props => props.theme.white};
+ font-size: ${remcalc(29)};
+ margin: 0;
+`;
+
+const Box = styled.div`
+ flex: 1 1 auto;
+ align-self: stretch;
+ order: 0;
+
+ padding: ${remcalc(15)} 0;
+`;
+
+export default ({ children, ...rest }) => (
+
+
+ {children}
+
+
+);
diff --git a/packages/ui-toolkit/src/header/index.js b/packages/ui-toolkit/src/header/index.js
new file mode 100644
index 00000000..878ab2a8
--- /dev/null
+++ b/packages/ui-toolkit/src/header/index.js
@@ -0,0 +1,30 @@
+import React from 'react';
+import styled from 'styled-components';
+import remcalc from 'remcalc';
+
+const Header = styled.div`
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ justify-content: space-between;
+ align-content: stretch;
+ align-items: stretch;
+
+ background-color: ${props => props.theme.primaryDarkBrand};
+ max-height: ${remcalc(53)};
+ min-height: ${remcalc(53)};
+ padding: 0 ${remcalc(18)};
+ line-height: ${remcalc(25)};
+`;
+
+/**
+ * @example ./usage.md
+ */
+export default ({ children, ...rest }) => (
+
+);
+
+export { default as Brand } from './brand';
+export { default as Item } from './item';
diff --git a/packages/ui-toolkit/src/header/item.js b/packages/ui-toolkit/src/header/item.js
new file mode 100644
index 00000000..b7a6cd14
--- /dev/null
+++ b/packages/ui-toolkit/src/header/item.js
@@ -0,0 +1,32 @@
+import React from 'react';
+import styled from 'styled-components';
+import remcalc from 'remcalc';
+
+import P from '../text/p';
+import typography from '../typography';
+
+const Text = P.extend`
+ ${typography.semibold};
+
+ text-align: center;
+ color: ${props => props.theme.white};
+ margin: 0;
+`;
+
+const Box = styled.div`
+ flex: 0 1 auto;
+ align-self: auto;
+ order: 0;
+
+ padding: ${remcalc(15)} 0;
+ width: ${remcalc(100)};
+ max-width: ${remcalc(100)};
+`;
+
+export default ({ children, ...rest }) => (
+
+
+ {children}
+
+
+);
diff --git a/packages/ui-toolkit/src/header/usage.md b/packages/ui-toolkit/src/header/usage.md
new file mode 100644
index 00000000..3180b007
--- /dev/null
+++ b/packages/ui-toolkit/src/header/usage.md
@@ -0,0 +1,10 @@
+```
+const Brand = require('./brand.js').default;
+const Item = require('./item.js').default;
+
+
+ Triton
+ - eu-east-1
+ - Nicola
+
+```
diff --git a/packages/ui-toolkit/src/index.js b/packages/ui-toolkit/src/index.js
index 362277a1..0d4e83c1 100644
--- a/packages/ui-toolkit/src/index.js
+++ b/packages/ui-toolkit/src/index.js
@@ -65,3 +65,9 @@ export {
Toggle,
ToggleList
} from './form';
+
+export {
+ default as Header,
+ Brand as HeaderBrand,
+ Item as HeaderItem
+} from './header';
diff --git a/packages/ui-toolkit/styleguide.config.js b/packages/ui-toolkit/styleguide.config.js
index 1d6b10c0..d773c5a0 100644
--- a/packages/ui-toolkit/styleguide.config.js
+++ b/packages/ui-toolkit/styleguide.config.js
@@ -60,6 +60,7 @@ module.exports = {
'src/form/radio.js',
'src/form/select.js',
'src/form/toggle.js',
+ 'src/header/index.js',
'src/list/ul.js',
'src/list/li.js',
'src/topology/index.js',