From d3eb2886403e34266de19ad3fbeafbfd3bdc4d67 Mon Sep 17 00:00:00 2001
From: "Mauro E. Bender" <mauro@amalgama.co>
Date: Wed, 28 Sep 2022 13:55:54 +0200
Subject: [PATCH] Improve example apps examples

---
 example/src/App.tsx                           |  21 +++
 example/src/components/BoxExamples.tsx        |   8 +-
 example/src/components/ButtonExamples.tsx     |  13 +-
 example/src/components/CheckboxExamples.tsx   |  16 +-
 .../src/components/FormControlExamples.tsx    |  12 +-
 example/src/components/IconButtonExamples.tsx |   4 +-
 example/src/components/IconExamples.tsx       | 176 ++++++++---------
 example/src/components/PaletteColorGrid.tsx   |  67 +++++++
 example/src/components/RadioExamples.tsx      |  16 +-
 example/src/components/TextExamples.tsx       |  25 +--
 example/src/components/TextInputExamples.tsx  |   8 +-
 web_example/src/App.tsx                       |  39 +++-
 web_example/src/components/BoxExamples.tsx    |   8 +-
 web_example/src/components/ButtonExamples.tsx |  10 +-
 .../src/components/CheckboxExamples.tsx       |  18 +-
 .../src/components/FormControlExamples.tsx    |  16 +-
 .../src/components/IconButtonExamples.tsx     |  33 ++--
 web_example/src/components/IconExamples.tsx   | 178 +++++++++---------
 .../src/components/PaletteColorGrid.tsx       |  67 +++++++
 web_example/src/components/RadioExamples.tsx  |  16 +-
 web_example/src/components/TextExamples.tsx   |  23 ++-
 .../src/components/TextInputExamples.tsx      |   8 +-
 22 files changed, 477 insertions(+), 305 deletions(-)
 create mode 100644 example/src/components/PaletteColorGrid.tsx
 create mode 100644 web_example/src/components/PaletteColorGrid.tsx

diff --git a/example/src/App.tsx b/example/src/App.tsx
index 197b6ad..86c3360 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -14,6 +14,7 @@ import CheckboxExamples from './components/CheckboxExamples';
 import RadioExamples from './components/RadioExamples';
 import FormControlExamples from './components/FormControlExamples';
 import TextInputExamples from './components/TextInputExamples';
+import PaletteColorGrid from './components/PaletteColorGrid';
 
 const styles = StyleSheet.create( {
 	container: {
@@ -46,6 +47,25 @@ const customTheme = extendThemeConfig( {
 		}
 	},
 	components: {
+		Text: {
+			variants: {
+				'headline': {
+					font: 'Epilogue',
+					fontSize: '3xl',
+					fontWeight: 'bold',
+					lineHeight: '3xl',
+					letterSpacing: 'md',
+					bg: 'secondary.100'
+				},
+				'subtitle': {
+					font: 'Epilogue',
+					fontSize: 'md',
+					lineHeight: 'md',
+					letterSpacing: 'md',
+					color: 'primary.800'
+				}
+			}
+		},
 		Button: {
 			variants: {
 				custom: {
@@ -84,6 +104,7 @@ export default function App() {
 			<SafeAreaView style={styles.container}>
 				<ScrollView contentContainerStyle={styles.scroll}>
 					<VStack>
+						<PaletteColorGrid />
 						<TextExamples />
 						<BoxExamples />
 						<ButtonExamples />
diff --git a/example/src/components/BoxExamples.tsx b/example/src/components/BoxExamples.tsx
index 21d6515..b80b3a6 100644
--- a/example/src/components/BoxExamples.tsx
+++ b/example/src/components/BoxExamples.tsx
@@ -27,9 +27,9 @@ const styles = StyleSheet.create( {
 
 const BoxExamples = () => (
 	<VStack style={styles.container}>
-		<Text variant="h1" bgColor="primary.200">Box Component</Text>
+		<Text variant="headline">Box Component</Text>
 		<View style={styles.vspace} />
-		<Text variant="sh1" color="primary.800">Border radius</Text>
+		<Text variant="subtitle">Border radius</Text>
 		<View style={styles.separator} />
 		<VStack style={styles.vstack} space="3">
 			<Box rounded="3xl" backgroundColor="error.400" padding="2.5">
@@ -54,7 +54,7 @@ const BoxExamples = () => (
 			</HStack>
 		</VStack>
 		<View style={styles.vspace} />
-		<Text variant="sh1" color="primary.800">Padding</Text>
+		<Text variant="subtitle">Padding</Text>
 		<View style={styles.separator} />
 		<VStack style={styles.vstack} space="3">
 			<Box backgroundColor="error.400" padding="0.5">
@@ -68,7 +68,7 @@ const BoxExamples = () => (
 			</Box>
 		</VStack>
 		<View style={styles.vspace} />
-		<Text variant="sh1" color="primary.800">Margin</Text>
+		<Text variant="subtitle">Margin</Text>
 		<View style={styles.separator} />
 		<VStack style={styles.vstack} space="3">
 			<Box backgroundColor="error.400" margin="0.5">
diff --git a/example/src/components/ButtonExamples.tsx b/example/src/components/ButtonExamples.tsx
index f477aaf..88166da 100644
--- a/example/src/components/ButtonExamples.tsx
+++ b/example/src/components/ButtonExamples.tsx
@@ -26,15 +26,16 @@ const onButtonPressed = () => Alert.alert( 'Pressed!' );
 
 const ButtonExamples = () => (
 	<VStack style={styles.container} space="2">
-		<Text variant="h1" bgColor="primary.200">Button Component</Text>
+		<Text variant="headline">Button Component</Text>
 		<View style={styles.vspace} />
-		<Text variant="sh1" color="primary.800">Variants</Text>
+		<Text variant="subtitle">Variants</Text>
 		<View style={styles.separator} />
 		<Button variant="primary" onPress={onButtonPressed}>Primary</Button>
 		<Button variant="secondary" onPress={onButtonPressed}>Secondary</Button>
 		<Button variant="priority" onPress={onButtonPressed}>Priority</Button>
+		<Button variant="success" onPress={onButtonPressed}>Success</Button>
 		<Button variant="custom" onPress={onButtonPressed}>Custom</Button>
-		<Text variant="sh1" color="primary.800">Icons</Text>
+		<Text variant="subtitle">Icons</Text>
 		<View style={styles.separator} />
 		<Button
 			variant="primary"
@@ -67,10 +68,12 @@ const ButtonExamples = () => (
 		>
 			Custom
 		</Button>
-		<Text variant="sh1" color="primary.800">Disabled</Text>
+		<Text variant="subtitle">Disabled</Text>
 		<View style={styles.separator} />
 		<Button variant="primary" disabled onPress={onButtonPressed}>Primary Disabled</Button>
 		<Button variant="secondary" disabled onPress={onButtonPressed}>Secondary Disabled</Button>
+		<Button variant="priority" disabled onPress={onButtonPressed}>Priority Disabled</Button>
+		<Button variant="success" disabled onPress={onButtonPressed}>Success Disabled</Button>
 		<Button
 			variant="primary"
 			__disabled={{ bg: 'error.100', borderColor: 'error.100' }}
@@ -79,7 +82,7 @@ const ButtonExamples = () => (
 		>
 			Primary with custom disabled bg
 		</Button>
-		<Text variant="sh1" color="primary.800">Horizontal group</Text>
+		<Text variant="subtitle">Horizontal group</Text>
 		<View style={styles.separator} />
 		<HStack space="10">
 			<Button variant="secondary" onPress={onButtonPressed}>Cancel</Button>
diff --git a/example/src/components/CheckboxExamples.tsx b/example/src/components/CheckboxExamples.tsx
index cb617c1..6fffa44 100644
--- a/example/src/components/CheckboxExamples.tsx
+++ b/example/src/components/CheckboxExamples.tsx
@@ -43,9 +43,9 @@ const CheckboxExamples = () => {
 
 	return (
 		<VStack style={styles.container}>
-			<Text variant="h1" bgColor="primary.200">Checkbox Component</Text>
+			<Text variant="headline">Checkbox Component</Text>
 			<View style={styles.vspace} />
-			<Text variant="sh1" color="primary.800">Enabled</Text>
+			<Text variant="subtitle">Enabled</Text>
 			<View style={styles.separator} />
 
 			<HStack>
@@ -55,7 +55,7 @@ const CheckboxExamples = () => {
 			</HStack>
 
 			<View style={styles.vspace} />
-			<Text variant="sh1" color="primary.800">Disabled</Text>
+			<Text variant="subtitle">Disabled</Text>
 			<View style={styles.separator} />
 
 			<HStack>
@@ -65,7 +65,7 @@ const CheckboxExamples = () => {
 			</HStack>
 
 			<View style={styles.vspace} />
-			<Text variant="sh1" color="primary.800">On Change</Text>
+			<Text variant="subtitle">On Change</Text>
 			<View style={styles.separator} />
 
 			<HStack>
@@ -74,7 +74,7 @@ const CheckboxExamples = () => {
 
 			<View style={styles.vspace} />
 
-			<Text variant="sh1" color="primary.800">With Label</Text>
+			<Text variant="subtitle">With Label</Text>
 			<View style={styles.separator} />
 
 			<VStack alignItems="flex-start" justifyContent="flex-start" alignContent="flex-start" space="0">
@@ -87,10 +87,10 @@ const CheckboxExamples = () => {
 
 			<View style={styles.vspace} />
 
-			<Text variant="h1" bgColor="primary.200">Checkbox Group Component</Text>
+			<Text variant="headline">Checkbox Group Component</Text>
 			<View style={styles.vspace} />
 
-			<Text variant="sh1" color="primary.800">Select multiple options</Text>
+			<Text variant="subtitle">Select multiple options</Text>
 			<View style={styles.separator} />
 
 			<Checkbox.Group
@@ -103,7 +103,7 @@ const CheckboxExamples = () => {
 			</Checkbox.Group>
 
 			<View style={styles.vspace} />
-			<Text variant="sh1" color="primary.800">Disabled</Text>
+			<Text variant="subtitle">Disabled</Text>
 			<View style={styles.separator} />
 
 			<Checkbox.Group
diff --git a/example/src/components/FormControlExamples.tsx b/example/src/components/FormControlExamples.tsx
index 2d6b6c2..0e9b6f5 100644
--- a/example/src/components/FormControlExamples.tsx
+++ b/example/src/components/FormControlExamples.tsx
@@ -24,9 +24,9 @@ const styles = StyleSheet.create( {
 
 const FormControlExamples = () => (
 	<VStack style={styles.container} space="2">
-		<Text variant="h1" bgColor="primary.200">FormControl Component</Text>
+		<Text variant="headline">FormControl Component</Text>
 
-		<Text variant="sh1" color="primary.800">With label</Text>
+		<Text variant="subtitle">With label</Text>
 		<View style={styles.separator} />
 
 		<FormControl
@@ -39,7 +39,7 @@ const FormControlExamples = () => (
 
 		<View style={styles.vspace} />
 
-		<Text variant="sh1" color="primary.800">Not required</Text>
+		<Text variant="subtitle">Not required</Text>
 		<View style={styles.separator} />
 
 		<FormControl
@@ -50,7 +50,7 @@ const FormControlExamples = () => (
 
 		<View style={styles.vspace} />
 
-		<Text variant="sh1" color="primary.800">With hint</Text>
+		<Text variant="subtitle">With hint</Text>
 		<View style={styles.separator} />
 
 		<FormControl
@@ -64,7 +64,7 @@ const FormControlExamples = () => (
 
 		<View style={styles.vspace} />
 
-		<Text variant="sh1" color="primary.800">Without label</Text>
+		<Text variant="subtitle">Without label</Text>
 		<View style={styles.separator} />
 
 		<FormControl
@@ -75,7 +75,7 @@ const FormControlExamples = () => (
 
 		<View style={styles.vspace} />
 
-		<Text variant="sh1" color="primary.800">With error</Text>
+		<Text variant="subtitle">With error</Text>
 		<View style={styles.separator} />
 
 		<FormControl
diff --git a/example/src/components/IconButtonExamples.tsx b/example/src/components/IconButtonExamples.tsx
index 498f7a4..4a285b3 100644
--- a/example/src/components/IconButtonExamples.tsx
+++ b/example/src/components/IconButtonExamples.tsx
@@ -19,15 +19,15 @@ const onPressed = () => Alert.alert( 'Pressed!' );
 
 const IconButtonExamples = () => (
 	<VStack style={styles.container} space="2">
-		<Text variant="h1" bgColor="primary.200">IconButton Component</Text>
+		<Text variant="headline">IconButton Component</Text>
 		<HStack space={2}>
+			<IconButton name="heart" onPress={onPressed} color="error.700" size="2xs" />
 			<IconButton name="heart" onPress={onPressed} color="information.100" size="xs" />
 			<IconButton name="heart" onPress={onPressed} color="success.200" size="sm" />
 			<IconButton name="heart" onPress={onPressed} color="success.300" size="md" />
 			<IconButton name="heart" onPress={onPressed} color="accent.400" size="lg" />
 			<IconButton name="heart" onPress={onPressed} color="error.500" size="xl" />
 			<IconButton name="heart" onPress={onPressed} color="success.600" size="2xl" />
-			<IconButton name="heart" onPress={onPressed} color="error.700" size="3xl" />
 		</HStack>
 	</VStack>
 );
diff --git a/example/src/components/IconExamples.tsx b/example/src/components/IconExamples.tsx
index 81cd630..aa26052 100644
--- a/example/src/components/IconExamples.tsx
+++ b/example/src/components/IconExamples.tsx
@@ -37,140 +37,140 @@ const styles = StyleSheet.create( {
 
 const IconExamples = () => (
 	<VStack style={styles.container} space="2">
-		<Text variant="h1" bgColor="primary.200">Icon Component</Text>
+		<Text variant="headline">Icon Component</Text>
 		<View style={styles.vspace} />
-		<Text variant="sh1" color="primary.800">Icon sets</Text>
+		<Text variant="subtitle">Icon sets</Text>
 		<View style={styles.separator} />
 		<Text variant="sh2" color="primary.800">AntDesign</Text>
 		<HStack mb={5} justifyContent="space-between">
-			<Icon name="heart" size="md" as={AntDesign} />
-			<Icon name="check" size="md" as={AntDesign} />
-			<Icon name="close" size="md" as={AntDesign} />
-			<Icon name="plus" size="md" as={AntDesign} />
-			<Icon name="minus" size="md" as={AntDesign} />
-			<Icon name="calendar" size="md" as={AntDesign} />
-			<Icon name="wechat" size="md" as={AntDesign} />
+			<Icon name="heart" as={AntDesign} />
+			<Icon name="check" as={AntDesign} />
+			<Icon name="close" as={AntDesign} />
+			<Icon name="plus" as={AntDesign} />
+			<Icon name="minus" as={AntDesign} />
+			<Icon name="calendar" as={AntDesign} />
+			<Icon name="wechat" as={AntDesign} />
 		</HStack>
 		<Text variant="sh2" color="primary.800">Entypo</Text>
 		<HStack mb={5} justifyContent="space-between">
-			<Icon name="heart" size="md" as={Entypo} />
-			<Icon name="check" size="md" as={Entypo} />
-			<Icon name="cross" size="md" as={Entypo} />
-			<Icon name="plus" size="md" as={Entypo} />
-			<Icon name="minus" size="md" as={Entypo} />
-			<Icon name="calendar" size="md" as={Entypo} />
-			<Icon name="chat" size="md" as={Entypo} />
+			<Icon name="heart" as={Entypo} />
+			<Icon name="check" as={Entypo} />
+			<Icon name="cross" as={Entypo} />
+			<Icon name="plus" as={Entypo} />
+			<Icon name="minus" as={Entypo} />
+			<Icon name="calendar" as={Entypo} />
+			<Icon name="chat" as={Entypo} />
 		</HStack>
 		<Text variant="sh2" color="primary.800">EvilIcons</Text>
 		<HStack mb={5} justifyContent="space-between">
-			<Icon name="heart" size="md" as={EvilIcons} />
-			<Icon name="check" size="md" as={EvilIcons} />
-			<Icon name="close" size="md" as={EvilIcons} />
-			<Icon name="plus" size="md" as={EvilIcons} />
-			<Icon name="minus" size="md" as={EvilIcons} />
-			<Icon name="calendar" size="md" as={EvilIcons} />
-			<Icon name="comment" size="md" as={EvilIcons} />
+			<Icon name="heart" as={EvilIcons} />
+			<Icon name="check" as={EvilIcons} />
+			<Icon name="close" as={EvilIcons} />
+			<Icon name="plus" as={EvilIcons} />
+			<Icon name="minus" as={EvilIcons} />
+			<Icon name="calendar" as={EvilIcons} />
+			<Icon name="comment" as={EvilIcons} />
 		</HStack>
 		<Text variant="sh2" color="primary.800">Feather</Text>
 		<HStack mb={5} justifyContent="space-between">
-			<Icon name="heart" size="md" as={Feather} />
-			<Icon name="check" size="md" as={Feather} />
-			<Icon name="x" size="md" as={Feather} />
-			<Icon name="plus" size="md" as={Feather} />
-			<Icon name="minus" size="md" as={Feather} />
-			<Icon name="calendar" size="md" as={Feather} />
-			<Icon name="message-circle" size="md" as={Feather} />
+			<Icon name="heart" as={Feather} />
+			<Icon name="check" as={Feather} />
+			<Icon name="x" as={Feather} />
+			<Icon name="plus" as={Feather} />
+			<Icon name="minus" as={Feather} />
+			<Icon name="calendar" as={Feather} />
+			<Icon name="message-circle" as={Feather} />
 		</HStack>
 		<Text variant="sh2" color="primary.800">Fontawesome</Text>
 		<HStack mb={5} justifyContent="space-between">
-			<Icon name="heart" size="md" as={FontAwesome} />
-			<Icon name="check" size="md" as={FontAwesome} />
-			<Icon name="close" size="md" as={FontAwesome} />
-			<Icon name="plus" size="md" as={FontAwesome} />
-			<Icon name="minus" size="md" as={FontAwesome} />
-			<Icon name="calendar" size="md" as={FontAwesome} />
-			<Icon name="comment" size="md" as={FontAwesome} />
+			<Icon name="heart" as={FontAwesome} />
+			<Icon name="check" as={FontAwesome} />
+			<Icon name="close" as={FontAwesome} />
+			<Icon name="plus" as={FontAwesome} />
+			<Icon name="minus" as={FontAwesome} />
+			<Icon name="calendar" as={FontAwesome} />
+			<Icon name="comment" as={FontAwesome} />
 		</HStack>
 		<Text variant="sh2" color="primary.800">Fontisto</Text>
 		<HStack mb={5} justifyContent="space-between">
-			<Icon name="heart" size="md" as={Fontisto} />
-			<Icon name="check" size="md" as={Fontisto} />
-			<Icon name="close-a" size="md" as={Fontisto} />
-			<Icon name="plus-a" size="md" as={Fontisto} />
-			<Icon name="minus-a" size="md" as={Fontisto} />
-			<Icon name="calendar" size="md" as={Fontisto} />
-			<Icon name="comment" size="md" as={Fontisto} />
+			<Icon name="heart" as={Fontisto} />
+			<Icon name="check" as={Fontisto} />
+			<Icon name="close-a" as={Fontisto} />
+			<Icon name="plus-a" as={Fontisto} />
+			<Icon name="minus-a" as={Fontisto} />
+			<Icon name="calendar" as={Fontisto} />
+			<Icon name="comment" as={Fontisto} />
 		</HStack>
 		<Text variant="sh2" color="primary.800">Foundation</Text>
 		<HStack mb={5} justifyContent="space-between">
-			<Icon name="heart" size="md" as={Foundation} />
-			<Icon name="check" size="md" as={Foundation} />
-			<Icon name="x" size="md" as={Foundation} />
-			<Icon name="plus" size="md" as={Foundation} />
-			<Icon name="minus" size="md" as={Foundation} />
-			<Icon name="calendar" size="md" as={Foundation} />
-			<Icon name="comment" size="md" as={Foundation} />
+			<Icon name="heart" as={Foundation} />
+			<Icon name="check" as={Foundation} />
+			<Icon name="x" as={Foundation} />
+			<Icon name="plus" as={Foundation} />
+			<Icon name="minus" as={Foundation} />
+			<Icon name="calendar" as={Foundation} />
+			<Icon name="comment" as={Foundation} />
 		</HStack>
 		<Text variant="sh2" color="primary.800">Ionicons</Text>
 		<HStack mb={5} justifyContent="space-between">
-			<Icon name="heart" size="md" as={Ionicons} />
-			<Icon name="checkmark" size="md" as={Ionicons} />
-			<Icon name="close" size="md" as={Ionicons} />
-			<Icon name="md-add" size="md" as={Ionicons} />
-			<Icon name="md-remove" size="md" as={Ionicons} />
-			<Icon name="calendar" size="md" as={Ionicons} />
-			<Icon name="chatbubble-outline" size="md" as={Ionicons} />
+			<Icon name="heart" as={Ionicons} />
+			<Icon name="checkmark" as={Ionicons} />
+			<Icon name="close" as={Ionicons} />
+			<Icon name="md-add" as={Ionicons} />
+			<Icon name="md-remove" as={Ionicons} />
+			<Icon name="calendar" as={Ionicons} />
+			<Icon name="chatbubble-outline" as={Ionicons} />
 		</HStack>
 		<Text variant="sh2" color="primary.800">MaterialCommunityIcons</Text>
 		<HStack mb={5} justifyContent="space-between">
-			<Icon name="heart" size="md" as={MaterialCommunityIcons} />
-			<Icon name="check" size="md" as={MaterialCommunityIcons} />
-			<Icon name="close" size="md" as={MaterialCommunityIcons} />
-			<Icon name="plus" size="md" as={MaterialCommunityIcons} />
-			<Icon name="minus" size="md" as={MaterialCommunityIcons} />
-			<Icon name="calendar" size="md" as={MaterialCommunityIcons} />
-			<Icon name="comment" size="md" as={MaterialCommunityIcons} />
+			<Icon name="heart" as={MaterialCommunityIcons} />
+			<Icon name="check" as={MaterialCommunityIcons} />
+			<Icon name="close" as={MaterialCommunityIcons} />
+			<Icon name="plus" as={MaterialCommunityIcons} />
+			<Icon name="minus" as={MaterialCommunityIcons} />
+			<Icon name="calendar" as={MaterialCommunityIcons} />
+			<Icon name="comment" as={MaterialCommunityIcons} />
 		</HStack>
 		<Text variant="sh2" color="primary.800">Octicons</Text>
 		<HStack mb={5} justifyContent="space-between">
-			<Icon name="heart" size="md" as={Octicons} />
-			<Icon name="check" size="md" as={Octicons} />
-			<Icon name="x" size="md" as={Octicons} />
-			<Icon name="plus" size="md" as={Octicons} />
-			<Icon name="dash" size="md" as={Octicons} />
-			<Icon name="calendar" size="md" as={Octicons} />
-			<Icon name="comment" size="md" as={Octicons} />
+			<Icon name="heart" as={Octicons} />
+			<Icon name="check" as={Octicons} />
+			<Icon name="x" as={Octicons} />
+			<Icon name="plus" as={Octicons} />
+			<Icon name="dash" as={Octicons} />
+			<Icon name="calendar" as={Octicons} />
+			<Icon name="comment" as={Octicons} />
 		</HStack>
 		<Text variant="sh2" color="primary.800">SimpleLineIcons</Text>
 		<HStack mb={5} justifyContent="space-between">
-			<Icon name="heart" size="md" as={SimpleLineIcons} />
-			<Icon name="check" size="md" as={SimpleLineIcons} />
-			<Icon name="close" size="md" as={SimpleLineIcons} />
-			<Icon name="plus" size="md" as={SimpleLineIcons} />
-			<Icon name="minus" size="md" as={SimpleLineIcons} />
-			<Icon name="calendar" size="md" as={SimpleLineIcons} />
-			<Icon name="bubble" size="md" as={SimpleLineIcons} />
+			<Icon name="heart" as={SimpleLineIcons} />
+			<Icon name="check" as={SimpleLineIcons} />
+			<Icon name="close" as={SimpleLineIcons} />
+			<Icon name="plus" as={SimpleLineIcons} />
+			<Icon name="minus" as={SimpleLineIcons} />
+			<Icon name="calendar" as={SimpleLineIcons} />
+			<Icon name="bubble" as={SimpleLineIcons} />
 		</HStack>
 		<Text variant="sh2" color="primary.800">Zocial</Text>
 		<HStack mb={5} justifyContent="space-between">
-			<Icon name="amazon" size="md" as={Zocial} />
-			<Icon name="android" size="md" as={Zocial} />
-			<Icon name="appstore" size="md" as={Zocial} />
-			<Icon name="stackoverflow" size="md" as={Zocial} />
-			<Icon name="reddit" size="md" as={Zocial} />
-			<Icon name="wikipedia" size="md" as={Zocial} />
-			<Icon name="github" size="md" as={Zocial} />
+			<Icon name="amazon" as={Zocial} />
+			<Icon name="android" as={Zocial} />
+			<Icon name="appstore" as={Zocial} />
+			<Icon name="stackoverflow" as={Zocial} />
+			<Icon name="reddit" as={Zocial} />
+			<Icon name="wikipedia" as={Zocial} />
+			<Icon name="github" as={Zocial} />
 		</HStack>
-		<Text variant="sh1" color="primary.800">Sizes</Text>
+		<Text variant="subtitle">Sizes</Text>
 		<View style={styles.separator} />
 		<HStack space={2}>
+			<Icon name="heart" color="error.700" size="2xs" />
 			<Icon name="heart" color="information.100" size="xs" />
 			<Icon name="heart" color="success.200" size="sm" />
 			<Icon name="heart" color="success.300" size="md" />
 			<Icon name="heart" color="accent.400" size="lg" />
 			<Icon name="heart" color="error.500" size="xl" />
 			<Icon name="heart" color="success.600" size="2xl" />
-			<Icon name="heart" color="error.700" size="3xl" />
 		</HStack>
 	</VStack>
 );
diff --git a/example/src/components/PaletteColorGrid.tsx b/example/src/components/PaletteColorGrid.tsx
new file mode 100644
index 0000000..9bad376
--- /dev/null
+++ b/example/src/components/PaletteColorGrid.tsx
@@ -0,0 +1,67 @@
+import * as React from 'react';
+
+import { StyleSheet, View } from 'react-native';
+import {
+	Box, Text, VStack, HStack
+} from '@amalgama/react-native-ui-kit';
+
+const styles = StyleSheet.create( {
+	container: {
+		width: '100%',
+		marginBottom: 20
+	},
+	separator: {
+		height: 1,
+		minWidth: '100%',
+		marginTop: 2,
+		marginBottom: 6,
+		backgroundColor: 'black'
+	},
+	vspace: {
+		height: 10,
+		minWidth: '100%'
+	}
+} );
+
+const PaletteColorGrid = () => {
+	const colors = [
+		'primary', 'secondary', 'neutral', 'error', 'warning',
+		'success', 'information', 'accent'
+	];
+	const range = [ 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 ];
+
+	return (
+		<VStack style={styles.container}>
+			<Text variant="headline">Palette</Text>
+			<View style={styles.vspace} />
+			<VStack>
+				{colors.map( ( color => (
+					<VStack key={color}>
+						<Text variant="sh" bgColor="secondary.200">{color}</Text>
+						<HStack>
+							{range.map( tone => (
+								<Box
+									key={`${color}.${tone}`}
+									bg={`${color}.${tone}`}
+									height={50}
+									width="10%"
+									justifyContent="center"
+								>
+									<Text
+										color={tone > 400 ? 'white' : 'black'}
+										fontSize="xs"
+										textAlign='center'
+									>
+										{tone}
+									</Text>
+								</Box>
+							) )}
+						</HStack>
+					</VStack>
+				) ) )}
+			</VStack>
+		</VStack>
+	);
+};
+
+export default PaletteColorGrid;
diff --git a/example/src/components/RadioExamples.tsx b/example/src/components/RadioExamples.tsx
index 126181f..0a7b4f5 100644
--- a/example/src/components/RadioExamples.tsx
+++ b/example/src/components/RadioExamples.tsx
@@ -30,9 +30,9 @@ const RadioExamples = () => {
 
 	return (
 		<VStack style={styles.container}>
-			<Text variant="h1" bgColor="primary.200">Radio Component</Text>
+			<Text variant="headline">Radio Component</Text>
 			<View style={styles.vspace} />
-			<Text variant="sh1" color="primary.800">Enabled</Text>
+			<Text variant="subtitle">Enabled</Text>
 			<View style={styles.separator} />
 
 			<HStack>
@@ -41,7 +41,7 @@ const RadioExamples = () => {
 			</HStack>
 
 			<View style={styles.vspace} />
-			<Text variant="sh1" color="primary.800">Disabled</Text>
+			<Text variant="subtitle">Disabled</Text>
 			<View style={styles.separator} />
 
 			<HStack>
@@ -50,7 +50,7 @@ const RadioExamples = () => {
 			</HStack>
 
 			<View style={styles.vspace} />
-			<Text variant="sh1" color="primary.800">On press</Text>
+			<Text variant="subtitle">On press</Text>
 			<View style={styles.separator} />
 
 			<HStack>
@@ -59,7 +59,7 @@ const RadioExamples = () => {
 
 			<View style={styles.vspace} />
 
-			<Text variant="sh1" color="primary.800">With Label</Text>
+			<Text variant="subtitle">With Label</Text>
 			<View style={styles.separator} />
 
 			<VStack alignItems="flex-start" space="2">
@@ -76,10 +76,10 @@ const RadioExamples = () => {
 
 			<View style={styles.vspace} />
 
-			<Text variant="h1" bgColor="primary.200">Radio Group Component</Text>
+			<Text variant="headline">Radio Group Component</Text>
 			<View style={styles.vspace} />
 
-			<Text variant="sh1" color="primary.800">Select one option</Text>
+			<Text variant="subtitle">Select one option</Text>
 			<View style={styles.separator} />
 
 			<Radio.Group
@@ -92,7 +92,7 @@ const RadioExamples = () => {
 			</Radio.Group>
 
 			<View style={styles.vspace} />
-			<Text variant="sh1" color="primary.800">Disabled</Text>
+			<Text variant="subtitle">Disabled</Text>
 			<View style={styles.separator} />
 
 			<Radio.Group
diff --git a/example/src/components/TextExamples.tsx b/example/src/components/TextExamples.tsx
index 698412e..33cdac2 100644
--- a/example/src/components/TextExamples.tsx
+++ b/example/src/components/TextExamples.tsx
@@ -23,25 +23,26 @@ const styles = StyleSheet.create( {
 
 const TextExamples = () => (
 	<VStack style={styles.container}>
-		<Text variant="h1" bgColor="primary.200">Text Component</Text>
+		<Text variant="headline">Text Component</Text>
 		<View style={styles.vspace} />
-		<Text variant="sh1" color="primary.800">Variants</Text>
+		<Text variant="subtitle">Variants</Text>
 		<View style={styles.separator} />
 		<Text variant="h1">Headline 1</Text>
 		<Text variant="h2">Headline 2</Text>
 		<Text variant="h3">Headline 3</Text>
-		<Text variant="sh1">Subtitle 1</Text>
-		<Text variant="sh2">Subtitle 2</Text>
-		<Text variant="sh3">Subtitle 3</Text>
-		<Text variant="body">Body text</Text>
-		<Text variant="body-2">Body text 2</Text>
+		<Text variant="sh">Subtitle</Text>
+		<Text variant="body">Body</Text>
+		<Text variant="body-special">Body special</Text>
+		<Text variant="body-italic">Body italic</Text>
 		<Text variant="links">Links</Text>
-		<Text variant="small">Small text</Text>
-		<Text variant="small-bold">Small bold text</Text>
-		<Text variant="caption">Caption text</Text>
-		<Text variant="caption-bold">Caption bold text</Text>
+		<Text variant="small">Small</Text>
+		<Text variant="small-bold">Small bold</Text>
+		<Text variant="small-link">Small link</Text>
+		<Text variant="x-small">Extra small</Text>
+		<Text variant="x-small-bold">Extra small bold</Text>
+		<Text variant="x-small-link">Extra small link</Text>
 		<View style={styles.vspace} />
-		<Text variant="sh1" color="primary.800">Free props</Text>
+		<Text variant="subtitle">Free props</Text>
 		<View style={styles.separator} />
 		<Text fontSize="3xl" fontWeight="extrabold" textAlign="left" style={{ paddingBottom: 20 }}>Text</Text>
 		<Text fontSize="xs" fontStyle="italic" fontWeight="medium">Text!</Text>
diff --git a/example/src/components/TextInputExamples.tsx b/example/src/components/TextInputExamples.tsx
index 0030a08..cf6c78b 100644
--- a/example/src/components/TextInputExamples.tsx
+++ b/example/src/components/TextInputExamples.tsx
@@ -22,9 +22,9 @@ const styles = {
 
 const TextInputExamples = () => (
 	<VStack>
-		<Text variant="h1" bgColor="primary.200">Text Input Component</Text>
+		<Text variant="headline">Text Input Component</Text>
 		<View style={styles.vspace} />
-		<Text variant="sh1" color="primary.800">Enabled</Text>
+		<Text variant="subtitle">Enabled</Text>
 		<View style={styles.separator} />
 		<View style={styles.vspace} />
 		<TextInput placeholder='This is an enabled text input' type='password' />
@@ -33,7 +33,7 @@ const TextInputExamples = () => (
 
 		<View style={styles.vspace} />
 
-		<Text variant="sh1" color="primary.800">Disabled</Text>
+		<Text variant="subtitle">Disabled</Text>
 		<View style={styles.separator} />
 		<View style={styles.vspace} />
 		<TextInput placeholder='This is a disabled password input' disabled type='password' />
@@ -42,7 +42,7 @@ const TextInputExamples = () => (
 
 		<View style={styles.vspace} />
 
-		<Text variant="sh1" color="primary.800">Error</Text>
+		<Text variant="subtitle">Error</Text>
 		<View style={styles.separator} />
 		<View style={styles.vspace} />
 		<View>
diff --git a/web_example/src/App.tsx b/web_example/src/App.tsx
index 7f159de..46e8113 100644
--- a/web_example/src/App.tsx
+++ b/web_example/src/App.tsx
@@ -16,6 +16,7 @@ import CheckboxExamples from './components/CheckboxExamples';
 import RadioExamples from './components/RadioExamples';
 import FormControlExamples from './components/FormControlExamples';
 import TextInputExamples from './components/TextInputExamples';
+import PaletteColorGrid from './components/PaletteColorGrid';
 
 const customTheme = extendThemeConfig( {
 	palette: {
@@ -50,19 +51,38 @@ const customTheme = extendThemeConfig( {
 				900: { normal: 'Epilogue', italic: 'Epilogue' }
 			},
 			'Inter': {
-				100: { normal: 'Inter' },
-				200: { normal: 'Inter' },
-				300: { normal: 'Inter' },
-				400: { normal: 'Inter' },
-				500: { normal: 'Inter' },
-				600: { normal: 'Inter' },
-				700: { normal: 'Inter' },
-				800: { normal: 'Inter' },
-				900: { normal: 'Inter' }
+				100: { normal: 'Inter', italic: 'Inter' },
+				200: { normal: 'Inter', italic: 'Inter' },
+				300: { normal: 'Inter', italic: 'Inter' },
+				400: { normal: 'Inter', italic: 'Inter' },
+				500: { normal: 'Inter', italic: 'Inter' },
+				600: { normal: 'Inter', italic: 'Inter' },
+				700: { normal: 'Inter', italic: 'Inter' },
+				800: { normal: 'Inter', italic: 'Inter' },
+				900: { normal: 'Inter', italic: 'Inter' }
 			}
 		}
 	},
 	components: {
+		Text: {
+			variants: {
+				'headline': {
+					font: 'Epilogue',
+					fontSize: '3xl',
+					fontWeight: 'bold',
+					lineHeight: '3xl',
+					letterSpacing: 'md',
+					bg: 'secondary.100'
+				},
+				'subtitle': {
+					font: 'Epilogue',
+					fontSize: 'md',
+					lineHeight: 'md',
+					letterSpacing: 'md',
+					color: 'primary.800'
+				}
+			}
+		},
 		Button: {
 			variants: {
 				custom: {
@@ -93,6 +113,7 @@ export default function App() {
 		<ThemeProvider theme={customTheme}>
 			<Box flex={1} alignItems="center">
 				<VStack width="500px">
+					<PaletteColorGrid />
 					<TextExamples />
 					<BoxExamples />
 					<ButtonExamples />
diff --git a/web_example/src/components/BoxExamples.tsx b/web_example/src/components/BoxExamples.tsx
index 21d6515..b80b3a6 100644
--- a/web_example/src/components/BoxExamples.tsx
+++ b/web_example/src/components/BoxExamples.tsx
@@ -27,9 +27,9 @@ const styles = StyleSheet.create( {
 
 const BoxExamples = () => (
 	<VStack style={styles.container}>
-		<Text variant="h1" bgColor="primary.200">Box Component</Text>
+		<Text variant="headline">Box Component</Text>
 		<View style={styles.vspace} />
-		<Text variant="sh1" color="primary.800">Border radius</Text>
+		<Text variant="subtitle">Border radius</Text>
 		<View style={styles.separator} />
 		<VStack style={styles.vstack} space="3">
 			<Box rounded="3xl" backgroundColor="error.400" padding="2.5">
@@ -54,7 +54,7 @@ const BoxExamples = () => (
 			</HStack>
 		</VStack>
 		<View style={styles.vspace} />
-		<Text variant="sh1" color="primary.800">Padding</Text>
+		<Text variant="subtitle">Padding</Text>
 		<View style={styles.separator} />
 		<VStack style={styles.vstack} space="3">
 			<Box backgroundColor="error.400" padding="0.5">
@@ -68,7 +68,7 @@ const BoxExamples = () => (
 			</Box>
 		</VStack>
 		<View style={styles.vspace} />
-		<Text variant="sh1" color="primary.800">Margin</Text>
+		<Text variant="subtitle">Margin</Text>
 		<View style={styles.separator} />
 		<VStack style={styles.vstack} space="3">
 			<Box backgroundColor="error.400" margin="0.5">
diff --git a/web_example/src/components/ButtonExamples.tsx b/web_example/src/components/ButtonExamples.tsx
index aab9715..88cafa0 100644
--- a/web_example/src/components/ButtonExamples.tsx
+++ b/web_example/src/components/ButtonExamples.tsx
@@ -26,15 +26,15 @@ const onButtonPressed = () => window.alert( 'Pressed!' );
 
 const ButtonExamples = () => (
 	<VStack style={styles.container} space="2">
-		<Text variant="h1" bgColor="primary.200">Button Component</Text>
+		<Text variant="headline">Button Component</Text>
 		<View style={styles.vspace} />
-		<Text variant="sh1" color="primary.800">Variants</Text>
+		<Text variant="subtitle">Variants</Text>
 		<View style={styles.separator} />
 		<Button variant="primary" onPress={onButtonPressed}>Primary</Button>
 		<Button variant="secondary" onPress={onButtonPressed}>Secondary</Button>
 		<Button variant="priority" onPress={onButtonPressed}>Priority</Button>
 		<Button variant="custom" onPress={onButtonPressed}>Custom</Button>
-		<Text variant="sh1" color="primary.800">Icons</Text>
+		<Text variant="subtitle">Icons</Text>
 		<View style={styles.separator} />
 		<Button
 			variant="primary"
@@ -67,7 +67,7 @@ const ButtonExamples = () => (
 		>
 			Custom
 		</Button>
-		<Text variant="sh1" color="primary.800">Disabled</Text>
+		<Text variant="subtitle">Disabled</Text>
 		<View style={styles.separator} />
 		<Button variant="primary" disabled onPress={onButtonPressed}>Primary Disabled</Button>
 		<Button variant="secondary" disabled onPress={onButtonPressed}>Secondary Disabled</Button>
@@ -79,7 +79,7 @@ const ButtonExamples = () => (
 		>
 			Primary with custom disabled bg
 		</Button>
-		<Text variant="sh1" color="primary.800">Horizontal group</Text>
+		<Text variant="subtitle">Horizontal group</Text>
 		<View style={styles.separator} />
 		<HStack space="10">
 			<Button variant="secondary" onPress={onButtonPressed}>Cancel</Button>
diff --git a/web_example/src/components/CheckboxExamples.tsx b/web_example/src/components/CheckboxExamples.tsx
index 0c72e49..0436cd9 100644
--- a/web_example/src/components/CheckboxExamples.tsx
+++ b/web_example/src/components/CheckboxExamples.tsx
@@ -42,9 +42,9 @@ const CheckboxExamples = () => {
 
 	return (
 		<VStack style={styles.container}>
-			<Text variant="h1" bgColor="primary.200">Checkbox Component</Text>
+			<Text variant="headline">Checkbox Component</Text>
 			<View style={styles.vspace} />
-			<Text variant="sh1" color="primary.800">Enabled</Text>
+			<Text variant="subtitle">Enabled</Text>
 			<View style={styles.separator} />
 
 			<HStack>
@@ -54,7 +54,7 @@ const CheckboxExamples = () => {
 			</HStack>
 
 			<View style={styles.vspace} />
-			<Text variant="sh1" color="primary.800">Disabled</Text>
+			<Text variant="subtitle">Disabled</Text>
 			<View style={styles.separator} />
 
 			<HStack>
@@ -64,7 +64,7 @@ const CheckboxExamples = () => {
 			</HStack>
 
 			<View style={styles.vspace} />
-			<Text variant="sh1" color="primary.800">On Focus</Text>
+			<Text variant="subtitle">On Focus</Text>
 			<View style={styles.separator} />
 
 			<HStack>
@@ -76,7 +76,7 @@ const CheckboxExamples = () => {
 			</HStack>
 
 			<View style={styles.vspace} />
-			<Text variant="sh1" color="primary.800">On Change</Text>
+			<Text variant="subtitle">On Change</Text>
 			<View style={styles.separator} />
 
 			<HStack alignItems="center" space="3">
@@ -87,7 +87,7 @@ const CheckboxExamples = () => {
 
 			<View style={styles.vspace} />
 
-			<Text variant="sh1" color="primary.800">With Label</Text>
+			<Text variant="subtitle">With Label</Text>
 			<View style={styles.separator} />
 
 			<VStack alignItems="flex-start" space="2">
@@ -106,10 +106,10 @@ const CheckboxExamples = () => {
 
 			<View style={styles.vspace} />
 
-			<Text variant="h1" bgColor="primary.200">Checkbox Group Component</Text>
+			<Text variant="headline">Checkbox Group Component</Text>
 			<View style={styles.vspace} />
 
-			<Text variant="sh1" color="primary.800">Select multiple options</Text>
+			<Text variant="subtitle">Select multiple options</Text>
 			<View style={styles.separator} />
 
 			<Checkbox.Group
@@ -122,7 +122,7 @@ const CheckboxExamples = () => {
 			</Checkbox.Group>
 
 			<View style={styles.vspace} />
-			<Text variant="sh1" color="primary.800">Disabled</Text>
+			<Text variant="subtitle">Disabled</Text>
 			<View style={styles.separator} />
 
 			<Checkbox.Group
diff --git a/web_example/src/components/FormControlExamples.tsx b/web_example/src/components/FormControlExamples.tsx
index 63182f9..00dfe2c 100644
--- a/web_example/src/components/FormControlExamples.tsx
+++ b/web_example/src/components/FormControlExamples.tsx
@@ -25,9 +25,9 @@ const styles = StyleSheet.create( {
 
 const FormControlExamples = () => (
 	<VStack style={styles.container} space="2">
-		<Text variant="h1" bgColor="primary.200">FormControl Component</Text>
+		<Text variant="headline">FormControl Component</Text>
 
-		<Text variant="sh1" color="primary.800">With label</Text>
+		<Text variant="subtitle">With label</Text>
 		<View style={styles.separator} />
 
 		<FormControl
@@ -39,7 +39,7 @@ const FormControlExamples = () => (
 
 		<View style={styles.vspace} />
 
-		<Text variant="sh1" color="primary.800">Not required</Text>
+		<Text variant="subtitle">Not required</Text>
 		<View style={styles.separator} />
 
 		<FormControl
@@ -50,7 +50,7 @@ const FormControlExamples = () => (
 
 		<View style={styles.vspace} />
 
-		<Text variant="sh1" color="primary.800">With hint</Text>
+		<Text variant="subtitle">With hint</Text>
 		<View style={styles.separator} />
 
 		<FormControl
@@ -63,7 +63,7 @@ const FormControlExamples = () => (
 
 		<View style={styles.vspace} />
 
-		<Text variant="sh1" color="primary.800">Without label</Text>
+		<Text variant="subtitle">Without label</Text>
 		<View style={styles.separator} />
 
 		<FormControl
@@ -73,7 +73,7 @@ const FormControlExamples = () => (
 		</FormControl>
 
 		<View style={styles.vspace} />
-		<Text variant="sh1" color="primary.800">With error</Text>
+		<Text variant="subtitle">With error</Text>
 		<View style={styles.separator} />
 
 		<FormControl
@@ -85,7 +85,7 @@ const FormControlExamples = () => (
 		</FormControl>
 
 		<View style={styles.vspace} />
-		<Text variant="sh1" color="primary.800">With Checkboxes</Text>
+		<Text variant="subtitle">With Checkboxes</Text>
 		<View style={styles.separator} />
 
 		<FormControl
@@ -102,7 +102,7 @@ const FormControlExamples = () => (
 		</FormControl>
 
 		<View style={styles.vspace} />
-		<Text variant="sh1" color="primary.800">With Radios</Text>
+		<Text variant="subtitle">With Radios</Text>
 		<View style={styles.separator} />
 
 		<FormControl
diff --git a/web_example/src/components/IconButtonExamples.tsx b/web_example/src/components/IconButtonExamples.tsx
index 5bcb25d..4a285b3 100644
--- a/web_example/src/components/IconButtonExamples.tsx
+++ b/web_example/src/components/IconButtonExamples.tsx
@@ -1,10 +1,8 @@
-/* eslint-disable no-alert */
 import React from 'react';
-import { StyleSheet, View } from 'react-native';
-import Octicons from 'react-native-vector-icons/Octicons';
+import { Alert, StyleSheet } from 'react-native';
 
 import {
-	IconButton, VStack, Text
+	IconButton, VStack, HStack, Text
 } from '@amalgama/react-native-ui-kit';
 
 const styles = StyleSheet.create( {
@@ -17,25 +15,20 @@ const styles = StyleSheet.create( {
 	}
 } );
 
-const onPressRed = () => window.alert( 'You pressed the red heart' );
-const onPressBlack = () => window.alert( 'You pressed the black heart' );
+const onPressed = () => Alert.alert( 'Pressed!' );
 
 const IconButtonExamples = () => (
 	<VStack style={styles.container} space="2">
-		<Text variant="h1" bgColor="primary.200">IconButton Component</Text>
-		<View style={styles.vspace} />
-		<IconButton
-			name='heart'
-			onPress={onPressRed}
-			__icon={{ size: '3xl', color: 'error.900' }}
-			mx={1}
-		/>
-		<IconButton
-			name='heart'
-			onPress={onPressBlack}
-			as={Octicons}
-			__icon={{ size: 'xl' }}
-		/>
+		<Text variant="headline">IconButton Component</Text>
+		<HStack space={2}>
+			<IconButton name="heart" onPress={onPressed} color="error.700" size="2xs" />
+			<IconButton name="heart" onPress={onPressed} color="information.100" size="xs" />
+			<IconButton name="heart" onPress={onPressed} color="success.200" size="sm" />
+			<IconButton name="heart" onPress={onPressed} color="success.300" size="md" />
+			<IconButton name="heart" onPress={onPressed} color="accent.400" size="lg" />
+			<IconButton name="heart" onPress={onPressed} color="error.500" size="xl" />
+			<IconButton name="heart" onPress={onPressed} color="success.600" size="2xl" />
+		</HStack>
 	</VStack>
 );
 
diff --git a/web_example/src/components/IconExamples.tsx b/web_example/src/components/IconExamples.tsx
index 81cd630..84433f0 100644
--- a/web_example/src/components/IconExamples.tsx
+++ b/web_example/src/components/IconExamples.tsx
@@ -37,140 +37,140 @@ const styles = StyleSheet.create( {
 
 const IconExamples = () => (
 	<VStack style={styles.container} space="2">
-		<Text variant="h1" bgColor="primary.200">Icon Component</Text>
+		<Text variant="headline">Icon Component</Text>
 		<View style={styles.vspace} />
-		<Text variant="sh1" color="primary.800">Icon sets</Text>
+		<Text variant="subtitle">Icon sets</Text>
 		<View style={styles.separator} />
 		<Text variant="sh2" color="primary.800">AntDesign</Text>
 		<HStack mb={5} justifyContent="space-between">
-			<Icon name="heart" size="md" as={AntDesign} />
-			<Icon name="check" size="md" as={AntDesign} />
-			<Icon name="close" size="md" as={AntDesign} />
-			<Icon name="plus" size="md" as={AntDesign} />
-			<Icon name="minus" size="md" as={AntDesign} />
-			<Icon name="calendar" size="md" as={AntDesign} />
-			<Icon name="wechat" size="md" as={AntDesign} />
+			<Icon name="heart" as={AntDesign} />
+			<Icon name="check" as={AntDesign} />
+			<Icon name="close" as={AntDesign} />
+			<Icon name="plus" as={AntDesign} />
+			<Icon name="minus" as={AntDesign} />
+			<Icon name="calendar" as={AntDesign} />
+			<Icon name="wechat" as={AntDesign} />
 		</HStack>
 		<Text variant="sh2" color="primary.800">Entypo</Text>
 		<HStack mb={5} justifyContent="space-between">
-			<Icon name="heart" size="md" as={Entypo} />
-			<Icon name="check" size="md" as={Entypo} />
-			<Icon name="cross" size="md" as={Entypo} />
-			<Icon name="plus" size="md" as={Entypo} />
-			<Icon name="minus" size="md" as={Entypo} />
-			<Icon name="calendar" size="md" as={Entypo} />
-			<Icon name="chat" size="md" as={Entypo} />
+			<Icon name="heart" as={Entypo} />
+			<Icon name="check" as={Entypo} />
+			<Icon name="cross" as={Entypo} />
+			<Icon name="plus" as={Entypo} />
+			<Icon name="minus" as={Entypo} />
+			<Icon name="calendar" as={Entypo} />
+			<Icon name="chat" as={Entypo} />
 		</HStack>
 		<Text variant="sh2" color="primary.800">EvilIcons</Text>
 		<HStack mb={5} justifyContent="space-between">
-			<Icon name="heart" size="md" as={EvilIcons} />
-			<Icon name="check" size="md" as={EvilIcons} />
-			<Icon name="close" size="md" as={EvilIcons} />
-			<Icon name="plus" size="md" as={EvilIcons} />
-			<Icon name="minus" size="md" as={EvilIcons} />
-			<Icon name="calendar" size="md" as={EvilIcons} />
-			<Icon name="comment" size="md" as={EvilIcons} />
+			<Icon name="heart" as={EvilIcons} />
+			<Icon name="check" as={EvilIcons} />
+			<Icon name="close" as={EvilIcons} />
+			<Icon name="plus" as={EvilIcons} />
+			<Icon name="minus" as={EvilIcons} />
+			<Icon name="calendar" as={EvilIcons} />
+			<Icon name="comment" as={EvilIcons} />
 		</HStack>
 		<Text variant="sh2" color="primary.800">Feather</Text>
 		<HStack mb={5} justifyContent="space-between">
-			<Icon name="heart" size="md" as={Feather} />
-			<Icon name="check" size="md" as={Feather} />
-			<Icon name="x" size="md" as={Feather} />
-			<Icon name="plus" size="md" as={Feather} />
-			<Icon name="minus" size="md" as={Feather} />
-			<Icon name="calendar" size="md" as={Feather} />
-			<Icon name="message-circle" size="md" as={Feather} />
+			<Icon name="heart" as={Feather} />
+			<Icon name="check" as={Feather} />
+			<Icon name="x" as={Feather} />
+			<Icon name="plus" as={Feather} />
+			<Icon name="minus" as={Feather} />
+			<Icon name="calendar" as={Feather} />
+			<Icon name="message-circle" as={Feather} />
 		</HStack>
 		<Text variant="sh2" color="primary.800">Fontawesome</Text>
 		<HStack mb={5} justifyContent="space-between">
-			<Icon name="heart" size="md" as={FontAwesome} />
-			<Icon name="check" size="md" as={FontAwesome} />
-			<Icon name="close" size="md" as={FontAwesome} />
-			<Icon name="plus" size="md" as={FontAwesome} />
-			<Icon name="minus" size="md" as={FontAwesome} />
-			<Icon name="calendar" size="md" as={FontAwesome} />
-			<Icon name="comment" size="md" as={FontAwesome} />
+			<Icon name="heart" as={FontAwesome} />
+			<Icon name="check" as={FontAwesome} />
+			<Icon name="close" as={FontAwesome} />
+			<Icon name="plus" as={FontAwesome} />
+			<Icon name="minus" as={FontAwesome} />
+			<Icon name="calendar" as={FontAwesome} />
+			<Icon name="comment" as={FontAwesome} />
 		</HStack>
 		<Text variant="sh2" color="primary.800">Fontisto</Text>
 		<HStack mb={5} justifyContent="space-between">
-			<Icon name="heart" size="md" as={Fontisto} />
-			<Icon name="check" size="md" as={Fontisto} />
-			<Icon name="close-a" size="md" as={Fontisto} />
-			<Icon name="plus-a" size="md" as={Fontisto} />
-			<Icon name="minus-a" size="md" as={Fontisto} />
-			<Icon name="calendar" size="md" as={Fontisto} />
-			<Icon name="comment" size="md" as={Fontisto} />
+			<Icon name="heart" as={Fontisto} />
+			<Icon name="check" as={Fontisto} />
+			<Icon name="close-a" as={Fontisto} />
+			<Icon name="plus-a" as={Fontisto} />
+			<Icon name="minus-a" as={Fontisto} />
+			<Icon name="calendar" as={Fontisto} />
+			<Icon name="comment" as={Fontisto} />
 		</HStack>
 		<Text variant="sh2" color="primary.800">Foundation</Text>
 		<HStack mb={5} justifyContent="space-between">
-			<Icon name="heart" size="md" as={Foundation} />
-			<Icon name="check" size="md" as={Foundation} />
-			<Icon name="x" size="md" as={Foundation} />
-			<Icon name="plus" size="md" as={Foundation} />
-			<Icon name="minus" size="md" as={Foundation} />
-			<Icon name="calendar" size="md" as={Foundation} />
-			<Icon name="comment" size="md" as={Foundation} />
+			<Icon name="heart" as={Foundation} />
+			<Icon name="check" as={Foundation} />
+			<Icon name="x" as={Foundation} />
+			<Icon name="plus" as={Foundation} />
+			<Icon name="minus" as={Foundation} />
+			<Icon name="calendar" as={Foundation} />
+			<Icon name="comment" as={Foundation} />
 		</HStack>
 		<Text variant="sh2" color="primary.800">Ionicons</Text>
 		<HStack mb={5} justifyContent="space-between">
-			<Icon name="heart" size="md" as={Ionicons} />
-			<Icon name="checkmark" size="md" as={Ionicons} />
-			<Icon name="close" size="md" as={Ionicons} />
-			<Icon name="md-add" size="md" as={Ionicons} />
-			<Icon name="md-remove" size="md" as={Ionicons} />
-			<Icon name="calendar" size="md" as={Ionicons} />
-			<Icon name="chatbubble-outline" size="md" as={Ionicons} />
+			<Icon name="heart" as={Ionicons} />
+			<Icon name="checkmark" as={Ionicons} />
+			<Icon name="close" as={Ionicons} />
+			<Icon name="md-add" as={Ionicons} />
+			<Icon name="md-remove" as={Ionicons} />
+			<Icon name="calendar" as={Ionicons} />
+			<Icon name="chatbubble-outline" as={Ionicons} />
 		</HStack>
 		<Text variant="sh2" color="primary.800">MaterialCommunityIcons</Text>
 		<HStack mb={5} justifyContent="space-between">
-			<Icon name="heart" size="md" as={MaterialCommunityIcons} />
-			<Icon name="check" size="md" as={MaterialCommunityIcons} />
-			<Icon name="close" size="md" as={MaterialCommunityIcons} />
-			<Icon name="plus" size="md" as={MaterialCommunityIcons} />
-			<Icon name="minus" size="md" as={MaterialCommunityIcons} />
-			<Icon name="calendar" size="md" as={MaterialCommunityIcons} />
-			<Icon name="comment" size="md" as={MaterialCommunityIcons} />
+			<Icon name="heart" as={MaterialCommunityIcons} />
+			<Icon name="check" as={MaterialCommunityIcons} />
+			<Icon name="close" as={MaterialCommunityIcons} />
+			<Icon name="plus" as={MaterialCommunityIcons} />
+			<Icon name="minus" as={MaterialCommunityIcons} />
+			<Icon name="calendar" as={MaterialCommunityIcons} />
+			<Icon name="comment" as={MaterialCommunityIcons} />
 		</HStack>
 		<Text variant="sh2" color="primary.800">Octicons</Text>
 		<HStack mb={5} justifyContent="space-between">
-			<Icon name="heart" size="md" as={Octicons} />
-			<Icon name="check" size="md" as={Octicons} />
-			<Icon name="x" size="md" as={Octicons} />
-			<Icon name="plus" size="md" as={Octicons} />
-			<Icon name="dash" size="md" as={Octicons} />
-			<Icon name="calendar" size="md" as={Octicons} />
-			<Icon name="comment" size="md" as={Octicons} />
+			<Icon name="heart" as={Octicons} />
+			<Icon name="check" as={Octicons} />
+			<Icon name="x" as={Octicons} />
+			<Icon name="plus" as={Octicons} />
+			<Icon name="dash" as={Octicons} />
+			<Icon name="calendar" as={Octicons} />
+			<Icon name="comment" as={Octicons} />
 		</HStack>
 		<Text variant="sh2" color="primary.800">SimpleLineIcons</Text>
 		<HStack mb={5} justifyContent="space-between">
-			<Icon name="heart" size="md" as={SimpleLineIcons} />
-			<Icon name="check" size="md" as={SimpleLineIcons} />
-			<Icon name="close" size="md" as={SimpleLineIcons} />
-			<Icon name="plus" size="md" as={SimpleLineIcons} />
-			<Icon name="minus" size="md" as={SimpleLineIcons} />
-			<Icon name="calendar" size="md" as={SimpleLineIcons} />
-			<Icon name="bubble" size="md" as={SimpleLineIcons} />
+			<Icon name="heart" as={SimpleLineIcons} />
+			<Icon name="check" as={SimpleLineIcons} />
+			<Icon name="close" as={SimpleLineIcons} />
+			<Icon name="plus" as={SimpleLineIcons} />
+			<Icon name="minus" as={SimpleLineIcons} />
+			<Icon name="calendar" as={SimpleLineIcons} />
+			<Icon name="bubble" as={SimpleLineIcons} />
 		</HStack>
 		<Text variant="sh2" color="primary.800">Zocial</Text>
 		<HStack mb={5} justifyContent="space-between">
-			<Icon name="amazon" size="md" as={Zocial} />
-			<Icon name="android" size="md" as={Zocial} />
-			<Icon name="appstore" size="md" as={Zocial} />
-			<Icon name="stackoverflow" size="md" as={Zocial} />
-			<Icon name="reddit" size="md" as={Zocial} />
-			<Icon name="wikipedia" size="md" as={Zocial} />
-			<Icon name="github" size="md" as={Zocial} />
+			<Icon name="amazon" as={Zocial} />
+			<Icon name="android" as={Zocial} />
+			<Icon name="appstore" as={Zocial} />
+			<Icon name="stackoverflow" as={Zocial} />
+			<Icon name="reddit" as={Zocial} />
+			<Icon name="wikipedia" as={Zocial} />
+			<Icon name="github" as={Zocial} />
 		</HStack>
-		<Text variant="sh1" color="primary.800">Sizes</Text>
+		<Text variant="subtitle">Sizes</Text>
 		<View style={styles.separator} />
 		<HStack space={2}>
+			<Icon name="heart" color="error.700" size="2xs" />
 			<Icon name="heart" color="information.100" size="xs" />
 			<Icon name="heart" color="success.200" size="sm" />
-			<Icon name="heart" color="success.300" size="md" />
+			<Icon name="heart" color="success.300" />
 			<Icon name="heart" color="accent.400" size="lg" />
 			<Icon name="heart" color="error.500" size="xl" />
 			<Icon name="heart" color="success.600" size="2xl" />
-			<Icon name="heart" color="error.700" size="3xl" />
 		</HStack>
 	</VStack>
 );
diff --git a/web_example/src/components/PaletteColorGrid.tsx b/web_example/src/components/PaletteColorGrid.tsx
new file mode 100644
index 0000000..9bad376
--- /dev/null
+++ b/web_example/src/components/PaletteColorGrid.tsx
@@ -0,0 +1,67 @@
+import * as React from 'react';
+
+import { StyleSheet, View } from 'react-native';
+import {
+	Box, Text, VStack, HStack
+} from '@amalgama/react-native-ui-kit';
+
+const styles = StyleSheet.create( {
+	container: {
+		width: '100%',
+		marginBottom: 20
+	},
+	separator: {
+		height: 1,
+		minWidth: '100%',
+		marginTop: 2,
+		marginBottom: 6,
+		backgroundColor: 'black'
+	},
+	vspace: {
+		height: 10,
+		minWidth: '100%'
+	}
+} );
+
+const PaletteColorGrid = () => {
+	const colors = [
+		'primary', 'secondary', 'neutral', 'error', 'warning',
+		'success', 'information', 'accent'
+	];
+	const range = [ 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 ];
+
+	return (
+		<VStack style={styles.container}>
+			<Text variant="headline">Palette</Text>
+			<View style={styles.vspace} />
+			<VStack>
+				{colors.map( ( color => (
+					<VStack key={color}>
+						<Text variant="sh" bgColor="secondary.200">{color}</Text>
+						<HStack>
+							{range.map( tone => (
+								<Box
+									key={`${color}.${tone}`}
+									bg={`${color}.${tone}`}
+									height={50}
+									width="10%"
+									justifyContent="center"
+								>
+									<Text
+										color={tone > 400 ? 'white' : 'black'}
+										fontSize="xs"
+										textAlign='center'
+									>
+										{tone}
+									</Text>
+								</Box>
+							) )}
+						</HStack>
+					</VStack>
+				) ) )}
+			</VStack>
+		</VStack>
+	);
+};
+
+export default PaletteColorGrid;
diff --git a/web_example/src/components/RadioExamples.tsx b/web_example/src/components/RadioExamples.tsx
index 67d0bdc..3da6144 100644
--- a/web_example/src/components/RadioExamples.tsx
+++ b/web_example/src/components/RadioExamples.tsx
@@ -30,9 +30,9 @@ const RadioExamples = () => {
 
 	return (
 		<VStack style={styles.container}>
-			<Text variant="h1" bgColor="primary.200">Radio Component</Text>
+			<Text variant="headline">Radio Component</Text>
 			<View style={styles.vspace} />
-			<Text variant="sh1" color="primary.800">Enabled</Text>
+			<Text variant="subtitle">Enabled</Text>
 			<View style={styles.separator} />
 
 			<HStack>
@@ -41,7 +41,7 @@ const RadioExamples = () => {
 			</HStack>
 
 			<View style={styles.vspace} />
-			<Text variant="sh1" color="primary.800">Disabled</Text>
+			<Text variant="subtitle">Disabled</Text>
 			<View style={styles.separator} />
 
 			<HStack>
@@ -50,7 +50,7 @@ const RadioExamples = () => {
 			</HStack>
 
 			<View style={styles.vspace} />
-			<Text variant="sh1" color="primary.800">On press</Text>
+			<Text variant="subtitle">On press</Text>
 			<View style={styles.separator} />
 
 			<HStack>
@@ -59,7 +59,7 @@ const RadioExamples = () => {
 
 			<View style={styles.vspace} />
 
-			<Text variant="sh1" color="primary.800">With Label</Text>
+			<Text variant="subtitle">With Label</Text>
 			<View style={styles.separator} />
 
 			<VStack alignItems="flex-start" space="2">
@@ -76,10 +76,10 @@ const RadioExamples = () => {
 
 			<View style={styles.vspace} />
 
-			<Text variant="h1" bgColor="primary.200">Radio Group Component</Text>
+			<Text variant="headline">Radio Group Component</Text>
 			<View style={styles.vspace} />
 
-			<Text variant="sh1" color="primary.800">Select multiple options</Text>
+			<Text variant="subtitle">Select multiple options</Text>
 			<View style={styles.separator} />
 
 			<Radio.Group
@@ -92,7 +92,7 @@ const RadioExamples = () => {
 			</Radio.Group>
 
 			<View style={styles.vspace} />
-			<Text variant="sh1" color="primary.800">Disabled</Text>
+			<Text variant="subtitle">Disabled</Text>
 			<View style={styles.separator} />
 
 			<Radio.Group
diff --git a/web_example/src/components/TextExamples.tsx b/web_example/src/components/TextExamples.tsx
index 698412e..fcc9563 100644
--- a/web_example/src/components/TextExamples.tsx
+++ b/web_example/src/components/TextExamples.tsx
@@ -23,25 +23,24 @@ const styles = StyleSheet.create( {
 
 const TextExamples = () => (
 	<VStack style={styles.container}>
-		<Text variant="h1" bgColor="primary.200">Text Component</Text>
+		<Text variant="headline">Text Component</Text>
 		<View style={styles.vspace} />
-		<Text variant="sh1" color="primary.800">Variants</Text>
+		<Text variant="subtitle">Variants</Text>
 		<View style={styles.separator} />
 		<Text variant="h1">Headline 1</Text>
 		<Text variant="h2">Headline 2</Text>
 		<Text variant="h3">Headline 3</Text>
-		<Text variant="sh1">Subtitle 1</Text>
-		<Text variant="sh2">Subtitle 2</Text>
-		<Text variant="sh3">Subtitle 3</Text>
-		<Text variant="body">Body text</Text>
-		<Text variant="body-2">Body text 2</Text>
+		<Text variant="sh">Subtitle</Text>
+		<Text variant="body">Body</Text>
+		<Text variant="body-special">Body special</Text>
+		<Text variant="body-italic">Body italic</Text>
 		<Text variant="links">Links</Text>
-		<Text variant="small">Small text</Text>
-		<Text variant="small-bold">Small bold text</Text>
-		<Text variant="caption">Caption text</Text>
-		<Text variant="caption-bold">Caption bold text</Text>
+		<Text variant="small">Small</Text>
+		<Text variant="small-bold">Small bold</Text>
+		<Text variant="x-small">Extra small</Text>
+		<Text variant="x-small-bold">Extra small bold</Text>
 		<View style={styles.vspace} />
-		<Text variant="sh1" color="primary.800">Free props</Text>
+		<Text variant="subtitle">Free props</Text>
 		<View style={styles.separator} />
 		<Text fontSize="3xl" fontWeight="extrabold" textAlign="left" style={{ paddingBottom: 20 }}>Text</Text>
 		<Text fontSize="xs" fontStyle="italic" fontWeight="medium">Text!</Text>
diff --git a/web_example/src/components/TextInputExamples.tsx b/web_example/src/components/TextInputExamples.tsx
index ccfadc0..e726791 100644
--- a/web_example/src/components/TextInputExamples.tsx
+++ b/web_example/src/components/TextInputExamples.tsx
@@ -21,9 +21,9 @@ const styles = {
 
 const TextInputExamples = () => (
 	<VStack>
-		<Text variant="h1" bgColor="primary.200">Text Input Component</Text>
+		<Text variant="headline">Text Input Component</Text>
 		<View style={styles.vspace} />
-		<Text variant="sh1" color="primary.800">Enabled</Text>
+		<Text variant="subtitle">Enabled</Text>
 		<View style={styles.separator} />
 		<View style={styles.vspace} />
 		<View style={{ width: 327 }}>
@@ -33,7 +33,7 @@ const TextInputExamples = () => (
 		</View>
 		<View style={styles.vspace} />
 
-		<Text variant="sh1" color="primary.800">Disabled</Text>
+		<Text variant="subtitle">Disabled</Text>
 		<View style={styles.separator} />
 		<View style={styles.vspace} />
 		<View style={{ width: 327 }}>
@@ -43,7 +43,7 @@ const TextInputExamples = () => (
 		</View>
 		<View style={styles.vspace} />
 
-		<Text variant="sh1" color="primary.800">Error</Text>
+		<Text variant="subtitle">Error</Text>
 		<View style={styles.separator} />
 		<View style={styles.vspace} />
 		<View style={{ width: 327 }}>