diff --git a/App/App.js b/App/App.js
index bee3033b3..017eb645f 100644
--- a/App/App.js
+++ b/App/App.js
@@ -1,8 +1,8 @@
 import React, { Component } from 'react'
-import HomeScreen from 'App/Containers/HomeScreen'
 import { Provider } from 'react-redux'
 import { PersistGate } from 'redux-persist/lib/integration/react'
 import createStore from 'App/Stores'
+import ExampleScreen from './Containers/Example/ExampleScreen'
 
 const { store, persistor } = createStore()
 
@@ -21,7 +21,7 @@ export default class App extends Component {
          * @see https://github.com/rt2zz/redux-persist/blob/master/docs/PersistGate.md
          */}
         <PersistGate loading={null} persistor={persistor}>
-          <HomeScreen />
+          <ExampleScreen />
         </PersistGate>
       </Provider>
     )
diff --git a/App/Containers/Example/ExampleScreen.js b/App/Containers/Example/ExampleScreen.js
new file mode 100644
index 000000000..19c300bc8
--- /dev/null
+++ b/App/Containers/Example/ExampleScreen.js
@@ -0,0 +1,58 @@
+import React from 'react'
+import { Platform, Text, View, Button } from 'react-native'
+import { connect } from 'react-redux'
+import { PropTypes } from 'prop-types'
+import ExampleActions from 'App/Stores/Example/Actions'
+import { isHot } from 'App/Stores/Example/Selectors'
+import Style from './ExampleScreenStyle'
+
+const instructions = Platform.select({
+  ios: 'Press Cmd+R to reload,\nCmd+D or shake for dev menu.',
+  android: 'Double tap R on your keyboard to reload,\nShake or press menu button for dev menu.',
+})
+
+class ExampleScreen extends React.Component {
+  componentDidMount() {
+    this.props.fetchTemperature()
+  }
+
+  render() {
+    let temperature = this.props.temperatureIsLoading ? '...' : this.props.temperature
+    if (temperature === null) {
+      temperature = '??'
+    }
+
+    return (
+      <View style={Style.container}>
+        <Text style={Style.title}>Welcome to React Native!</Text>
+        <Text style={Style.text}>To get started, edit App.js</Text>
+        <Text style={Style.text}>{instructions}</Text>
+        <Text style={Style.text}>The weather temperature is: {temperature}</Text>
+        <Text style={Style.text}>{this.props.isHot ? "It's pretty hot!" : ''}</Text>
+        <Text style={Style.text}>{this.props.temperatureErrorMessage}</Text>
+        <Button onPress={this.props.fetchTemperature} title="Refresh" />
+      </View>
+    )
+  }
+}
+
+ExampleScreen.propsTypes = {
+  temperature: PropTypes.number,
+  temperatureErrorMessage: PropTypes.string,
+}
+
+const mapStateToProps = (state) => ({
+  temperature: state.example.get('temperature'),
+  temperatureErrorMessage: state.example.get('temperatureErrorMessage'),
+  temperatureIsLoading: state.example.get('temperatureIsLoading'),
+  isHot: isHot(state),
+})
+
+const mapDispatchToProps = (dispatch) => ({
+  fetchTemperature: () => dispatch(ExampleActions.fetchTemperature()),
+})
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ExampleScreen)
diff --git a/App/Containers/Example/ExampleScreenStyle.js b/App/Containers/Example/ExampleScreenStyle.js
new file mode 100644
index 000000000..cdc690be6
--- /dev/null
+++ b/App/Containers/Example/ExampleScreenStyle.js
@@ -0,0 +1,19 @@
+import { StyleSheet } from 'react-native'
+import Fonts from 'App/Theme/Fonts'
+import ApplicationStyles from 'App/Theme/ApplicationStyles'
+
+export default StyleSheet.create({
+  container: {
+    ...ApplicationStyles.screen.container,
+  },
+  title: {
+    ...Fonts.style.h1,
+    textAlign: 'center',
+    margin: 10,
+  },
+  text: {
+    ...Fonts.style.normal,
+    textAlign: 'center',
+    marginBottom: 5,
+  },
+})
diff --git a/App/Containers/HomeScreen.js b/App/Containers/HomeScreen.js
deleted file mode 100644
index 8ce6303dc..000000000
--- a/App/Containers/HomeScreen.js
+++ /dev/null
@@ -1,74 +0,0 @@
-import React from 'react'
-import { Platform, StyleSheet, Text, View, Button } from 'react-native'
-import { connect } from 'react-redux'
-import { PropTypes } from 'prop-types'
-import ExampleActions from 'App/Stores/Example/Actions'
-import { isHot } from 'App/Stores/Example/Selectors'
-
-const instructions = Platform.select({
-  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
-  android: 'Double tap R on your keyboard to reload,\n' + 'Shake or press menu button for dev menu',
-})
-
-class HomeScreen extends React.Component {
-  componentDidMount() {
-    this.props.fetchTemperature()
-  }
-
-  render() {
-    let temperature = this.props.temperatureIsLoading ? '...' : this.props.temperature
-    if (temperature === null) {
-      temperature = '??'
-    }
-
-    return (
-      <View style={styles.container}>
-        <Text style={styles.welcome}>Welcome to React Native!</Text>
-        <Text style={styles.instructions}>To get started, edit App.js</Text>
-        <Text style={styles.instructions}>{instructions}</Text>
-        <Text style={styles.instructions}>The weather temperature is: {temperature}</Text>
-        <Text style={styles.instructions}>{this.props.isHot ? "It's pretty hot!" : ''}</Text>
-        <Text style={styles.instructions}>{this.props.temperatureErrorMessage}</Text>
-        <Button onPress={this.props.fetchTemperature} title="Refresh" />
-      </View>
-    )
-  }
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  welcome: {
-    fontSize: 20,
-    textAlign: 'center',
-    margin: 10,
-  },
-  instructions: {
-    textAlign: 'center',
-    marginBottom: 5,
-  },
-})
-
-HomeScreen.propsTypes = {
-  temperature: PropTypes.number,
-  temperatureErrorMessage: PropTypes.string,
-}
-
-const mapStateToProps = (state) => ({
-  temperature: state.example.get('temperature'),
-  temperatureErrorMessage: state.example.get('temperatureErrorMessage'),
-  temperatureIsLoading: state.example.get('temperatureIsLoading'),
-  isHot: isHot(state),
-})
-
-const mapDispatchToProps = (dispatch) => ({
-  fetchTemperature: () => dispatch(ExampleActions.fetchTemperature()),
-})
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(HomeScreen)
diff --git a/App/Images/README.md b/App/Images/README.md
new file mode 100644
index 000000000..0601664ae
--- /dev/null
+++ b/App/Images/README.md
@@ -0,0 +1 @@
+This directory contains the application's images.
diff --git a/App/Theme/ApplicationStyles.js b/App/Theme/ApplicationStyles.js
new file mode 100644
index 000000000..df9851a1e
--- /dev/null
+++ b/App/Theme/ApplicationStyles.js
@@ -0,0 +1,13 @@
+/**
+ * This file defines the base application styles.
+ *
+ * Use it to define generic component styles (e.g. the default text styles, default button styles...).
+ */
+
+export default {
+  screen: {
+    container: {
+      flex: 1,
+    },
+  },
+}
diff --git a/App/Theme/Colors.js b/App/Theme/Colors.js
new file mode 100644
index 000000000..d7e6d899a
--- /dev/null
+++ b/App/Theme/Colors.js
@@ -0,0 +1,15 @@
+/**
+ * This file contains the application's colors.
+ *
+ * Define color here instead of duplicating them throughout the components.
+ * That allows to change them more easily later on.
+ */
+
+export default {
+  transparent: 'rgba(0,0,0,0)',
+  // Example colors:
+  text: '#212529',
+  primary: '#007bff',
+  success: '#28a745',
+  error: '#dc3545',
+}
diff --git a/App/Theme/Fonts.js b/App/Theme/Fonts.js
new file mode 100644
index 000000000..e4b9d8bf0
--- /dev/null
+++ b/App/Theme/Fonts.js
@@ -0,0 +1,38 @@
+const type = {
+  base: 'inherit',
+}
+
+const size = {
+  h1: 38,
+  h2: 34,
+  h3: 30,
+  input: 18,
+  regular: 17,
+  medium: 14,
+  small: 12,
+}
+
+const style = {
+  h1: {
+    fontFamily: type.base,
+    fontSize: size.h1,
+  },
+  h2: {
+    fontFamily: type.base,
+    fontSize: size.h2,
+  },
+  h3: {
+    fontFamily: type.base,
+    fontSize: size.h3,
+  },
+  normal: {
+    fontFamily: type.base,
+    fontSize: size.regular,
+  },
+}
+
+export default {
+  type,
+  size,
+  style,
+}
diff --git a/App/Theme/Images.js b/App/Theme/Images.js
new file mode 100644
index 000000000..f70cd2f0b
--- /dev/null
+++ b/App/Theme/Images.js
@@ -0,0 +1,7 @@
+/**
+ * Images should be stored in the `App/Images` directory and referenced using variables defined here.
+ */
+
+export default {
+  // logo: require('../Images/logo.png'),
+}
diff --git a/App/Theme/Metrics.js b/App/Theme/Metrics.js
new file mode 100644
index 000000000..64664f91f
--- /dev/null
+++ b/App/Theme/Metrics.js
@@ -0,0 +1,10 @@
+/**
+ * This file contains metric values that are global to the application.
+ */
+
+export default {
+  // Examples of metrics you can define:
+  // baseMargin: 10,
+  // largeMargin: 20,
+  // smallMargin: 5,
+}
diff --git a/App/Theme/README.md b/App/Theme/README.md
new file mode 100644
index 000000000..01c71210f
--- /dev/null
+++ b/App/Theme/README.md
@@ -0,0 +1 @@
+This directory contains the base for the application styles.
diff --git a/App/Theme/index.js b/App/Theme/index.js
new file mode 100644
index 000000000..e29e52794
--- /dev/null
+++ b/App/Theme/index.js
@@ -0,0 +1,7 @@
+import Colors from './Colors'
+import Fonts from './Fonts'
+import Metrics from './Metrics'
+import Images from './Images'
+import ApplicationStyles from './ApplicationStyles'
+
+export { Colors, Fonts, Images, Metrics, ApplicationStyles }
diff --git a/README.md b/README.md
index 2d405ce1e..bde50f3bd 100644
--- a/README.md
+++ b/README.md
@@ -12,8 +12,10 @@ This boilerplate contains:
 
 - [`App/Components`](App/Components): presentational components
 - [`App/Containers`](App/Containers): container components
+- [`App/Images`](App/Images): images used by the application
 - [`App/Stores`](App/Stores): redux [actions, reducers and stores](https://redux.js.org/basics)
 - [`App/Sagas`](App/Sagas): redux sagas
+- [`App/Theme`](App/Theme): base styles for the application
 
 For more information on each directory, click the link and read the directory's README.