diff --git a/Routes.js b/Routes.js
index 2431160..4c66e37 100644
--- a/Routes.js
+++ b/Routes.js
@@ -20,18 +20,11 @@ import SitesView from './containers/Sites/View';
 import SettingsList from './containers/Settings/List';
 import CommentsEdit from './containers/Comments/Edit';
 
+import { getBrandColor, getSemanticColor } from './theme';
+
 const defaultOptions = {
 	cardStyle: {
-		backgroundColor: 'white',
-		borderTopWidth: 0,
-		shadowRadius: 0,
-		shadowOffset: {
-			height: 0,
-		},
-		shadowColor: 'transparent',
-	},
-	headerStyle: {
-		shadowOpacity: 0,
+		backgroundColor: getSemanticColor( 'systemBackground' ),
 	},
 	headerStyleInterpolator: HeaderStyleInterpolators.forUIKit,
 };
@@ -144,12 +137,26 @@ const MainStack = () => {
 }
 
 export default function RootStack() {
+	const theme = {
+		dark: false,
+		colors: {
+			primary: getBrandColor( 'primary' ),
+			backgroundColor: getSemanticColor( 'systemBackground' ),
+			card: getSemanticColor( 'secondarySystemBackground' ),
+			text: getSemanticColor( 'label' ),
+			border: getSemanticColor( 'separator' ),
+		},
+	};
+
 	return (
-		<NavigationNativeContainer>
+		<NavigationNativeContainer
+			theme={ theme }
+		>
 			<Root.Navigator
 				headerMode="none"
 				mode="modal"
 				screenOptions={ {
+					...defaultOptions,
 					...TransitionPresets.ModalPresentationIOS,
 					cardOverlayEnabled: true,
 					gestureEnabled: true,
diff --git a/components/General/FormRow.js b/components/General/FormRow.js
index 005aecd..d845ef7 100644
--- a/components/General/FormRow.js
+++ b/components/General/FormRow.js
@@ -2,20 +2,23 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { View, Text, StyleSheet } from 'react-native';
 
+import { getSemanticColor } from '../../theme';
+
 const styles = StyleSheet.create( {
 	field: {
-		backgroundColor: '#FFFFFF',
+		backgroundColor: getSemanticColor( 'systemBackground' ),
 		height: 44,
 		flexDirection: 'row',
 		alignItems: 'center',
 		borderBottomWidth: 1,
-		borderBottomColor: '#f9f9f9',
+		borderBottomColor: getSemanticColor( 'separator' ),
 	},
 	label: {
 		width: 130,
 		marginLeft: 10,
 	},
 	labelText: {
+		color: getSemanticColor( 'label' ),
 		fontSize: 15,
 		lineHeight: 16,
 	},
@@ -25,12 +28,6 @@ const styles = StyleSheet.create( {
 		flexDirection: 'row',
 		marginRight: 10,
 	},
-	descriptionText: {
-		fontSize: 11,
-		color: '#999999',
-		margin: 8,
-		marginBottom: 15,
-	},
 } );
 
 export default class FormRow extends Component {
diff --git a/components/General/RichItem.js b/components/General/RichItem.js
index a5b113c..a1f0616 100644
--- a/components/General/RichItem.js
+++ b/components/General/RichItem.js
@@ -3,6 +3,8 @@ import React, { Component } from 'react';
 import { StyleSheet, View, Text, Image } from 'react-native';
 import { WebView } from 'react-native-webview';
 
+import { getSemanticColor } from '../../theme';
+
 const styles = StyleSheet.create( {
 	container: {
 		marginBottom: 0,
@@ -11,17 +13,17 @@ const styles = StyleSheet.create( {
 	},
 	authorName: {
 		lineHeight: 16,
+		color: getSemanticColor( 'label' ),
 	},
 	contentRight: {
 		flex: 1,
-		backgroundColor: 'white',
 	},
 	content: {
 		marginBottom: 15,
 	},
 	webView: {
 		height: 10,
-		backgroundColor: 'white',
+		backgroundColor: 'transparent',
 	},
 	authorImage: {
 		marginRight: 15,
@@ -45,7 +47,7 @@ export default class RichItem extends Component {
 	};
 
 	state = {
-		webViewHeight: 0,
+		webViewHeight: 150,
 	};
 
 	onMessage = event => {
@@ -59,9 +61,10 @@ export default class RichItem extends Component {
 			<meta name="viewport" content="width = device-width" />
 			<style>
 				body {
+					background: ${ getSemanticColor( 'systemBackground' ) };
 					font-size: 15px;
 					line-height: 20px;
-					color: #666;
+					color: ${ getSemanticColor( 'secondaryLabel' ) };
 					font-family: sans-serif;
 					margin: 0;
 					max-width: 100%;
diff --git a/components/Navigation/Button.js b/components/Navigation/Button.js
index 34fa8a4..7ba6ec3 100644
--- a/components/Navigation/Button.js
+++ b/components/Navigation/Button.js
@@ -2,6 +2,8 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { StyleSheet, TouchableOpacity, Text } from 'react-native';
 
+import { getSemanticColor } from '../../theme';
+
 const styles = StyleSheet.create( {
 	container: {
 		paddingRight: 10,
@@ -9,7 +11,7 @@ const styles = StyleSheet.create( {
 	text: {
 		lineHeight: 16,
 		fontSize: 16,
-		color: '#3578F6',
+		color: getSemanticColor( 'link' ),
 	},
 } );
 
diff --git a/components/Posts/List.js b/components/Posts/List.js
index 6c5231e..07b7b3f 100644
--- a/components/Posts/List.js
+++ b/components/Posts/List.js
@@ -4,10 +4,12 @@ import { ScrollView, View, StyleSheet } from 'react-native';
 import ViennaPropTypes from '../../PropTypes';
 import ListItem from './ListItem';
 
+import { getSemanticColor } from '../../theme';
+
 const styles = StyleSheet.create( {
 	listItem: {
 		padding: 15,
-		borderBottomColor: '#F7F7F7',
+		borderBottomColor: getSemanticColor( 'separator' ),
 		borderBottomWidth: 1,
 	},
 } );
diff --git a/components/Posts/ListItem.js b/components/Posts/ListItem.js
index 16aac04..c67b47e 100644
--- a/components/Posts/ListItem.js
+++ b/components/Posts/ListItem.js
@@ -6,6 +6,8 @@ import { FontAwesome as Icon } from '@expo/vector-icons';
 import ConfirmButton from '../ConfirmButton';
 import RichItem from '../General/RichItem';
 
+import { getSemanticColor } from '../../theme';
+
 const styles = StyleSheet.create( {
 	container: {},
 	title: {
@@ -35,7 +37,7 @@ const styles = StyleSheet.create( {
 		textAlign: 'center',
 		padding: 5,
 		fontSize: 14,
-		color: '#666666',
+		color: getSemanticColor( 'secondaryLabel' ),
 	},
 	featuredMedia: {
 		height: 180,
@@ -83,7 +85,7 @@ export default class ListItem extends Component {
 							onPress={ this.props.onEdit }
 						>
 							<View style={ styles.actionsButton }>
-								<Icon name="pencil" size={ 14 } color="#888888" />
+								<Icon name="pencil" size={ 14 } color={ getSemanticColor( 'secondaryLabel' ) } />
 								<Text style={ styles.actionsButtonText }>Edit</Text>
 							</View>
 						</TouchableOpacity>
@@ -94,7 +96,7 @@ export default class ListItem extends Component {
 							onPress={ this.props.onView }
 						>
 							<View style={ styles.actionsButton }>
-								<Icon name="external-link" size={ 14 } color="#888888" />
+								<Icon name="external-link" size={ 14 } color={ getSemanticColor( 'secondaryLabel' ) } />
 								<Text style={ styles.actionsButtonText }>View</Text>
 							</View>
 						</TouchableOpacity>
diff --git a/components/Sites/ListItem.js b/components/Sites/ListItem.js
index 8b00a3f..405a466 100644
--- a/components/Sites/ListItem.js
+++ b/components/Sites/ListItem.js
@@ -3,6 +3,8 @@ import React, { Component } from 'react';
 import { StyleSheet, View, Text, Image } from 'react-native';
 import { FontAwesome as Icon } from '@expo/vector-icons';
 
+import { getSemanticColor } from '../../theme';
+
 const styles = StyleSheet.create( {
 	container: {
 		flexDirection: 'row',
@@ -15,10 +17,11 @@ const styles = StyleSheet.create( {
 		marginLeft: 5,
 	},
 	title: {
+		color: getSemanticColor( 'label' ),
 		fontSize: 16,
 	},
 	url: {
-		color: '#999999',
+		color: getSemanticColor( 'secondaryLabel' ),
 		fontSize: 12,
 		lineHeight: 12,
 	},
diff --git a/containers/Posts/List.js b/containers/Posts/List.js
index 3e7ae06..3be4056 100644
--- a/containers/Posts/List.js
+++ b/containers/Posts/List.js
@@ -9,12 +9,14 @@ import {
 } from 'react-native';
 import { isEmpty } from 'lodash';
 import { connect } from 'react-redux';
+
 import { trashPost, fetchPosts, updatePostfilter } from '../../actions';
 import PostsList from '../../components/Posts/List';
 import MediaList from '../../components/Media/List';
 import Filter from '../../components/Posts/Filter';
 import ListError from '../../components/General/ListError';
 import NavigationButton from '../../components/Navigation/Button';
+import { getSemanticColor } from '../../theme';
 
 const styles = StyleSheet.create( {
 	creating: {
@@ -122,13 +124,13 @@ class List extends Component {
 							refreshing={ type.list.loading }
 							style={ { backgroundColor: 'transparent' } }
 							onRefresh={ this.onRefresh.bind( this ) }
-							tintColor="#666666"
+							tintColor={ getSemanticColor( 'secondaryLabel' ) }
 							title={
 								type.list.loading
 									? 'Loading ' + type.name + '...'
 									: 'Pull to Refresh...'
 							}
-							titleColor="#000000"
+							titleColor={ getSemanticColor( 'label' ) }
 						/>
 					}
 					posts={ Object.values( posts ).filter( this.filterPosts.bind( this ) ) }
diff --git a/containers/Sites/View.js b/containers/Sites/View.js
index bb7d720..8c9c542 100644
--- a/containers/Sites/View.js
+++ b/containers/Sites/View.js
@@ -18,17 +18,19 @@ import {
 	fetchSiteData,
 } from '../../actions';
 
+import { getBrandColor, getSemanticColor, getSystemColor } from '../../theme';
+
 const styles = StyleSheet.create( {
 	container: {
 		flex: 1,
 	},
 	divider: {
-		borderBottomColor: '#F0F4F7',
+		borderBottomColor: getSystemColor( 'gray6' ),
 		borderBottomWidth: 1,
 		margin: 20,
 	},
 	sectionTitle: {
-		color: '#999999',
+		color: getSemanticColor( 'secondaryLabel' ),
 		fontSize: 11,
 		marginTop: 15,
 		marginLeft: 60,
@@ -42,17 +44,18 @@ const styles = StyleSheet.create( {
 		paddingLeft: 0,
 	},
 	listItemDivider: {
-		borderBottomColor: '#f1f1f1',
+		borderBottomColor: getSemanticColor( 'separator' ),
 		marginLeft: 60,
 		marginRight: 30,
 	},
 	listItemName: {
+		color: getSemanticColor( 'label' ),
 		fontSize: 16,
 		flex: 1,
 	},
 	listItemNameCentered: {
 		textAlign: 'center',
-		color: 'red',
+		color: getBrandColor( 'primary' ),
 		flex: 1,
 	},
 	listItemIcon: {
@@ -124,7 +127,7 @@ class _View extends Component {
 		return trimmedString;
 	}
 	render() {
-		let chevron = <Icon name="chevron-right" size={ 20 } color="#BBBBBB" />;
+		let chevron = <Icon name="chevron-right" size={ 20 } color={ getSemanticColor( 'secondaryLabel' ) } />;
 
 		if ( ! this.props.types ) {
 			return null;
@@ -138,7 +141,7 @@ class _View extends Component {
 						refreshing={ false }
 						style={ { backgroundColor: 'transparent' } }
 						onRefresh={ this.onRefresh.bind( this ) }
-						tintColor="#666666"
+						tintColor={ getBrandColor( 'primary' ) }
 						title="Pull to Refresh..."
 						titleColor="#000000"
 					/>
@@ -164,7 +167,7 @@ class _View extends Component {
 										style={ styles.listItemIcon }
 										name={ iconName }
 										size={ 16 }
-										color="#999999"
+										color={ getSemanticColor( 'secondaryLabel' ) }
 									/>
 									<Text style={ styles.listItemName }>{ type.name }</Text>
 									<View style={ styles.listItemValue }>{ chevron }</View>
@@ -198,7 +201,7 @@ class _View extends Component {
 										style={ styles.listItemIcon }
 										name={ iconName }
 										size={ 16 }
-										color="#999999"
+										color={ getSemanticColor( 'secondaryLabel' ) }
 									/>
 									<Text style={ styles.listItemName }>{ taxonomy.name }</Text>
 									<View style={ styles.listItemValue }>{ chevron }</View>
@@ -220,7 +223,7 @@ class _View extends Component {
 							style={ styles.listItemIcon }
 							name="comments"
 							size={ 16 }
-							color="#999999"
+							color={ getSemanticColor( 'secondaryLabel' ) }
 						/>
 						<Text style={ styles.listItemName }>Comments</Text>
 						<View style={ styles.listItemValue }>{ chevron }</View>
@@ -234,7 +237,7 @@ class _View extends Component {
 							style={ styles.listItemIcon }
 							name="users"
 							size={ 16 }
-							color="#999999"
+							color={ getSemanticColor( 'secondaryLabel' ) }
 						/>
 						<Text style={ styles.listItemName }>Users</Text>
 						<View style={ styles.listItemValue }>{ chevron }</View>
@@ -248,7 +251,7 @@ class _View extends Component {
 								style={ styles.listItemIcon }
 								name="gear"
 								size={ 20 }
-								color="#999999"
+								color={ getSemanticColor( 'secondaryLabel' ) }
 							/>
 							<Text style={ styles.listItemName }>Settings</Text>
 							<View style={ styles.listItemValue }>{ chevron }</View>
diff --git a/theme.ts b/theme.ts
new file mode 100644
index 0000000..0abcebc
--- /dev/null
+++ b/theme.ts
@@ -0,0 +1,182 @@
+import { StyleSheet, processColor } from 'react-native';
+
+type HexColor = string;
+
+type SystemColor =
+	'blue' |
+	'brown' |
+	'gray' |
+	'gray2' |
+	'gray3' |
+	'gray4' |
+	'gray5' |
+	'gray6' |
+	'green' |
+	'indigo' |
+	'orange' |
+	'pink' |
+	'purple' |
+	'red' |
+	'teal' |
+	'yellow';
+
+type SystemColorSet = Record<SystemColor, HexColor>;
+
+type SemanticColor =
+	'label' |
+	'secondaryLabel' |
+	'tertiaryLabel' |
+	'quaternaryLabel' |
+	'systemFill' |
+	'secondarySystemFill' |
+	'tertiarySystemFill' |
+	'quaternarySystemFill' |
+	'placeholderText' |
+	'systemBackground' |
+	'secondarySystemBackground' |
+	'tertiarySystemBackground' |
+	'systemGroupedBackground' |
+	'secondarySystemGroupedBackground' |
+	'tertiarySystemGroupedBackground' |
+	'separator' |
+	'opaqueSeparator' |
+	'link';
+
+type SemanticColorSet = Record<SemanticColor, HexColor>;
+
+const systemColors: Record<string, SystemColorSet> = {
+	light: {
+		blue: '#007AFF',
+		brown: '#A2845E',
+		gray: '#8E8E93',
+		gray2: '#AEAEB2',
+		gray3: '#C7C7CC',
+		gray4: '#D1D1D6',
+		gray5: '#E5E5EA',
+		gray6: '#F2F2F7',
+		green: '#34C759',
+		indigo: '#5856D6',
+		orange: '#FF9500',
+		pink: '#FF2D55',
+		purple: '#AF52DE',
+		red: '#FF3B30',
+		teal: '#5AC8FA',
+		yellow: '#FFCC00',
+	},
+	dark: {
+		blue: '#0A84FF',
+		brown: '#AC8E68',
+		gray: '#8E8E93',
+		gray2: '#636366',
+		gray3: '#48484A',
+		gray4: '#3A3A3C',
+		gray5: '#2C2C2E',
+		gray6: '#1C1C1E',
+		green: '#30D158',
+		indigo: '#5E5CE6',
+		orange: '#FF9F0A',
+		pink: '#FF375F',
+		purple: '#BF5AF2',
+		red: '#FF453A',
+		teal: '#64D2FF',
+		yellow: '#FFD60A',
+	},
+	accessible: {
+		blue: '#0040DD',
+		brown: '#7F6545',
+		gray: '#6C6C70',
+		gray2: '#8E8E93',
+		gray3: '#AEAEB2',
+		gray4: '#BCBCC0',
+		gray5: '#D8D8DC',
+		gray6: '#EBEBF0',
+		green: '#248A3D',
+		indigo: '#3634A3',
+		orange: '#C93400',
+		pink: '#D30F45',
+		purple: '#8944AB',
+		red: '#D70015',
+		teal: '#0071A4',
+		yellow: '#A05A00',
+	},
+	accessibleDark: {
+		blue: '#409CFF',
+		brown: '#B59469',
+		gray: '#AEAEB2',
+		gray2: '#7C7C80',
+		gray3: '#545456',
+		gray4: '#444446',
+		gray5: '#363638',
+		gray6: '#242426',
+		green: '#30DB5B',
+		indigo: '#7D7AFF',
+		orange: '#FFB340',
+		pink: '#FF6482',
+		purple: '#DA8FFF',
+		red: '#FF6961',
+		teal: '#70D7FF',
+		yellow: '#FFD426',
+	},
+};
+
+const semanticColors = {
+	light: {
+		label: '#000000ff',
+		secondaryLabel: '#3c3c4399',
+		tertiaryLabel: '#3c3c434c',
+		quaternaryLabel: '#3c3c432d',
+		systemFill: '#78788033',
+		secondarySystemFill: '#78788028',
+		tertiarySystemFill: '#7676801e',
+		quaternarySystemFill: '#74748014',
+		placeholderText: '#3c3c434c',
+		systemBackground: '#ffffffff',
+		secondarySystemBackground: systemColors.light.gray6,
+		tertiarySystemBackground: '#ffffffff',
+		systemGroupedBackground: systemColors.light.gray6,
+		secondarySystemGroupedBackground: '#ffffffff',
+		tertiarySystemGroupedBackground: systemColors.light.gray6,
+		separator: '#3c3c4349',
+		opaqueSeparator: '#c6c6c8ff',
+		link: systemColors.light.blue,
+	},
+	dark: {
+		label: '#ffffffff',
+		secondaryLabel: '#ebebf599',
+		tertiaryLabel: '#ebebf54c',
+		quaternaryLabel: '#ebebf52d',
+		systemFill: '#7878805b',
+		secondarySystemFill: '#78788051',
+		tertiarySystemFill: '#7676803d',
+		quaternarySystemFill: '#7676802d',
+		placeholderText: '#ebebf54c',
+		systemBackground: '#000000ff',
+		secondarySystemBackground: systemColors.dark.gray6,
+		tertiarySystemBackground: '#2c2c2eff',
+		systemGroupedBackground: '#000000ff',
+		secondarySystemGroupedBackground: systemColors.dark.gray6,
+		tertiarySystemGroupedBackground: '#2c2c2eff',
+		separator: '#54545899',
+		opaqueSeparator: '#38383aff',
+		link: '#0984ffff',
+	},
+};
+
+const brandColors = {
+	primary: systemColors.light.red,
+};
+
+// const isDark = true;
+const isDark = false;
+
+export function getSystemColor( key: SystemColor ) {
+	return isDark ? systemColors.dark[ key ] : systemColors.light[ key ];
+}
+
+export function getBrandColor( key ) {
+	return brandColors[ key ];
+}
+
+export function getSemanticColor( key: SemanticColor ) {
+	return isDark ? semanticColors.dark[ key ] : semanticColors.light[ key ];
+}