diff --git a/colorful/README.md b/colorful/README.md
new file mode 100644
index 00000000..dd51a1e0
--- /dev/null
+++ b/colorful/README.md
@@ -0,0 +1,19 @@
+# Colorful
+
+Colorful is an experimental WordPress theme that uses the [Block Style System](https://github.com/WordPress/gutenberg/blob/master/docs/designers-developers/developers/themes/theme-json.md) and [Block Templates](https://github.com/WordPress/gutenberg/blob/master/docs/designers-developers/developers/themes/block-based-themes.md) to create a minimal theme demo.
+
+## What's here
+
+```
+colorful
+|__ block-templates 
+    |__ index.html
+|__ experimental-theme.json
+|__ functions.php
+|__ style.css
+```
+
+## Requirements
+
+- Gutenberg plugin as of [a271af4872](https://github.com/WordPress/gutenberg/tree/a271af487eb8e04945048cca856c211454b6e56c)
+- FSE experiment enabled
diff --git a/colorful/block-templates/index.html b/colorful/block-templates/index.html
new file mode 100644
index 00000000..9b2aace5
--- /dev/null
+++ b/colorful/block-templates/index.html
@@ -0,0 +1 @@
+<!-- wp:post-content /-->
\ No newline at end of file
diff --git a/colorful/experimental-theme.json b/colorful/experimental-theme.json
new file mode 100644
index 00000000..ca04a373
--- /dev/null
+++ b/colorful/experimental-theme.json
@@ -0,0 +1,99 @@
+{
+    "global": {
+        "presets": {
+            "color": [
+                {
+                    "slug": "foreground",
+                    "value": "#313131"
+                },
+                {
+                    "slug": "background",
+                    "value": "#FFDE69"
+                },
+                {
+                    "slug": "primary",
+                    "value": "#022384"
+                },
+                {
+                    "slug": "secondary",
+                    "value": "#DB403B"
+                }
+            ],
+            "font-size": [
+                {
+                    "slug": "small",
+                    "value": "12px"
+                },
+                {
+                    "slug": "medium",
+                    "value": "16px"
+                },
+                {
+                    "slug": "large",
+                    "value": "50px"
+                }
+            ],
+            "line-height": [
+                {
+                    "slug": "small",
+                    "value": "1.3"
+                },
+                {
+                    "slug": "medium",
+                    "value": "1.3"
+                },
+                {
+                    "slug": "large",
+                    "value": "1.4"
+                }
+            ],
+            "font-family": [
+                {
+                    "slug": "primary",
+                    "value": "'Jost', sans-serif"
+                },
+                {
+                    "slug": "secondary",
+                    "value": "'Lora', serif"
+                }
+            ],
+            "gradient": [
+            ]
+        },
+        "features": {
+            "typography": {
+                "dropCap": false
+            }
+        }
+    },
+    "core/paragraph": {
+        "styles": {
+            "color": {
+                "text": "var(--wp--preset--color--foreground )"
+            },
+            "typography": {
+                "fontSize": "var( --wp--preset--font-size--medium )"
+            }
+        }
+    },
+    "core/heading/h1": {
+        "styles": {
+            "color": {
+                "text": "var( --wp--preset--color--primary )"
+            },
+            "typography": {
+                "fontSize": "var( --wp--preset--font-size--large )"
+            }
+        }
+    },
+    "core/heading/h2": {
+        "styles": {
+            "color": {
+                "text": "var( --wp--preset--color--primary )"
+            },
+            "typography": {
+                "fontSize": "28px"
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/colorful/functions.php b/colorful/functions.php
new file mode 100644
index 00000000..72df0d8a
--- /dev/null
+++ b/colorful/functions.php
@@ -0,0 +1,89 @@
+<?php
+
+if ( ! function_exists( 'colorful_theme_setup' ) ) :
+	/**
+	 * Initialize the theme supports.
+	 */
+	function colorful_theme_setup() {
+		// Let WordPress manage the document title.
+		add_theme_support( 'title-tag' );
+
+		// Alignwide and alignfull classes in the block editor.
+		add_theme_support( 'align-wide' );
+
+		// Adding support for core block visual styles.
+		add_theme_support( 'wp-block-styles' );
+
+		// Adding support for responsive embedded content.
+		add_theme_support( 'responsive-embeds' );
+
+		// Adding support for editor styles.
+		add_theme_support( 'editor-styles' );
+
+		// Enqueue stylesheet for the editor.
+		add_editor_style( get_stylesheet_uri() );
+
+		// Editor color palette.
+		// All of these values will be overridden by the theme.json's global => preset => colors array.
+		add_theme_support(
+			'editor-color-palette',
+			array(
+				array(
+					'name'  => __( 'Foreground', 'colorful' ),
+					'slug'  => 'foreground',
+					'color' => '#313131',
+				),
+				array(
+					'name'  => __( 'Background', 'colorful' ),
+					'slug'  => 'background',
+					'color' => '#FFDE69',
+				),
+				array(
+					'name'  => __( 'Primary', 'colorful' ),
+					'slug'  => 'primary',
+					'color' => '#022384',
+				),
+				array(
+					'name'  => __( 'Secondary', 'colorful' ),
+					'slug'  => 'secondary',
+					'color' => '#DB403B',
+				)
+			)
+		);
+
+		// Editor font sizes.
+		add_theme_support(
+			'editor-font-sizes',
+			array(
+				array(
+					'name'      => __( 'Small', 'colorful' ),
+					'shortName' => __( 'S', 'colorful' ),
+					'size'      => 12,
+					'slug'      => 'small',
+				),
+				array(
+					'name'      => __( 'Normal', 'colorful' ),
+					'shortName' => __( 'M', 'colorful' ),
+					'size'      => 16,
+					'slug'      => 'normal',
+				),
+				array(
+					'name'      => __( 'Large', 'colorful' ),
+					'shortName' => __( 'L', 'colorful' ),
+					'size'      => 50,
+					'slug'      => 'large',
+				),
+			)
+		);
+	}
+endif;
+add_action( 'after_setup_theme', 'colorful_theme_setup' );
+
+/**
+ * Enqueue scripts and styles.
+ */
+function colorful_theme_blocks_scripts() {
+	$theme_version = wp_get_theme()->get( 'Version' );
+	wp_enqueue_style( 'colorful-theme-blocks-styles', get_stylesheet_uri(), array(), $theme_version );
+}
+add_action( 'wp_enqueue_scripts', 'colorful_theme_blocks_scripts' );
diff --git a/colorful/index.php b/colorful/index.php
new file mode 100644
index 00000000..06d1f226
--- /dev/null
+++ b/colorful/index.php
@@ -0,0 +1 @@
+// this can be empty
\ No newline at end of file
diff --git a/colorful/style.css b/colorful/style.css
new file mode 100644
index 00000000..84ee18fb
--- /dev/null
+++ b/colorful/style.css
@@ -0,0 +1,117 @@
+/*
+Theme Name: Colorful	
+Text Domain: colorful
+Version: 0.1 
+Requires at least: 5.3
+Description: A test theme using the experimental WordPress global styles system.
+Author: Jeff Ong 
+Author URI: https://jffng.com/
+License: GNU General Public License v2 or later
+License URI: http://www.gnu.org/licenses/gpl-2.0.html
+
+All files, unless otherwise stated, are released under the GNU General Public
+License version 2.0 (http://www.gnu.org/licenses/gpl-2.0.html)
+
+This theme, like WordPress, is licensed under the GPL.
+Use it to make something cool, have fun, and share what you've learned
+with others.
+*/
+
+@import url('https://fonts.googleapis.com/css2?family=Jost:wght@500&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Lora:wght@500&display=swap');
+
+html {
+    font-size: 16px;
+}
+
+body {
+    background-color: var( --wp--preset--color--background );
+    font-family: var(--wp--preset--font-family--primary);
+    margin: 0;
+    overflow-x: hidden;
+    padding: 0;
+}
+
+p {
+    font-family: var(--wp--preset--font-family--primary);
+    line-height: var(--wp--preset--line-height--medium);
+}
+
+p.has-small-font-size {
+    font-size: var(--wp--preset--font-size--small);
+    line-height: var(--wp--preset--line-height--small);
+}
+
+p.has-medium-font-size {
+    font-size: var(--wp--preset--font-size--medium);
+    line-height: var(--wp--preset--line-height--medium);
+}
+
+p.has-large-font-size {
+    font-size: var(--wp--preset--font-size--large);
+    line-height: var(--wp--preset--line-height--large);
+}
+
+/* Support editor custom colors */
+.has-primary-background-color {
+    background-color: var( --wp--preset--color--primary );
+}
+
+.has-secondary-background-color {
+    background-color: var( --wp--preset--color--secondary );
+}
+
+.has-foreground-background-color {
+    background-color: var(--wp--preset--color--foreground);
+}
+
+.has-background-background-color {
+    background-color: var( --wp--preset--color--background );
+}
+
+.has-background-color {
+    color: var( --wp--preset--color--primary );
+}
+
+.has-secondary-color {
+    color: var( --wp--preset--color--secondary );
+}
+
+.has-foreground-color {
+    color: var(--wp--preset--color--foreground);
+}
+
+.has-background-color {
+    color: var( --wp--preset--color--background );
+}
+
+.entry-content > * {
+    margin: 0 auto;
+    max-width: 580px; /* Match the block editor styles */
+}
+
+.alignwide {
+    margin: 0 auto;
+    max-width: 1070px;
+}
+
+.alignfull {
+    margin: 0;
+    max-width: 100%;
+}
+
+.alignwide, .alignfull {
+    padding: 0 12px;
+}
+
+.wp-block-navigation.is-style-light:not(.has-background) .wp-block-navigation__container, .wp-block-navigation:not(.has-background) .wp-block-navigation__container {
+    background-color: var( --wp--preset--color--background );
+}
+
+.wp-block-navigation-link__label {
+    color: var( --wp--preset--color--secondary );
+    font-family: var(--wp--preset--font-family--primary);
+    font-size: var(--wp--preset--font-size--medium);
+    line-height: var(--wp--preset--line-height--medium);
+    text-transform: uppercase;
+}
\ No newline at end of file