diff --git a/gui/box.xml b/gui/box.xml
new file mode 100644
index 000000000..91a13435a
--- /dev/null
+++ b/gui/box.xml
@@ -0,0 +1,3 @@
+<box content="INNER_XML" :fill="FILL = none" :round="ROUND = 0px" :border-thickness="BORDER_THICKNESS = 0px" :border-color="BORDER_COLOR = none">
+	{{INNER_XML}}
+</box>
\ No newline at end of file
diff --git a/gui/col.xml b/gui/col.xml
new file mode 100644
index 000000000..f99c4e8bc
--- /dev/null
+++ b/gui/col.xml
@@ -0,0 +1,3 @@
+<col content="INNER_XML">
+	{{INNER_XML}}
+</col>
\ No newline at end of file
diff --git a/gui/header/file-menu.xml b/gui/header/file-menu.xml
new file mode 100644
index 000000000..722142f2f
--- /dev/null
+++ b/gui/header/file-menu.xml
@@ -0,0 +1,20 @@
+<header.file-menu>
+	<box height="100%" x-padding="10px">
+		<text height="100%" y-align="0.5" :color="mildwhite">፨</text>
+	</box>
+	<box height="100%" x-padding="10px">
+		<text height="100%" y-align="0.5" :color="mildwhite">File</text>
+	</box>
+	<box height="100%" x-padding="10px">
+		<text height="100%" y-align="0.5" :color="mildwhite">Edit</text>
+	</box>
+	<box height="100%" x-padding="10px">
+		<text height="100%" y-align="0.5" :color="mildwhite">Comp</text>
+	</box>
+	<box height="100%" x-padding="10px">
+		<text height="100%" y-align="0.5" :color="mildwhite">View</text>
+	</box>
+	<box height="100%" x-padding="10px">
+		<text height="100%" y-align="0.5" :color="mildwhite">Help</text>
+	</box>
+</header.file-menu>
diff --git a/gui/header/window-buttons.xml b/gui/header/window-buttons.xml
new file mode 100644
index 000000000..50c91929a
--- /dev/null
+++ b/gui/header/window-buttons.xml
@@ -0,0 +1,16 @@
+<header.window-buttons :maximized="IS_MAXIMIZED">
+	<box height="100%" y-align="0.5" x-padding="18px">
+		<icon :src="window_minimize.svg" />
+	</box>
+	<box height="100%" y-align="0.5" x-padding="18px">
+		<if :a="{{IS_MAXIMIZED}}">
+			<icon :src="window_restore_down.svg" />
+		</if>
+		<if :a="{{IS_MAXIMIZED}}" b="false">
+			<icon :src="maximize.svg" />
+		</if>
+	</box>
+	<box height="100%" y-align="0.5" x-padding="18px">
+		<icon :src="window_close.svg" />
+	</box>
+</header.window-buttons>
\ No newline at end of file
diff --git a/gui/icon.xml b/gui/icon.xml
new file mode 100644
index 000000000..77ec8b6f6
--- /dev/null
+++ b/gui/icon.xml
@@ -0,0 +1,3 @@
+<icon content="SVG_DATA" :src="SVG_SOURCE = none">
+
+</icon>
\ No newline at end of file
diff --git a/gui/input/checkbox-with-dropdown.xml b/gui/input/checkbox-with-dropdown.xml
new file mode 100644
index 000000000..03e811bd3
--- /dev/null
+++ b/gui/input/checkbox-with-dropdown.xml
@@ -0,0 +1,12 @@
+<input.checkbox-with-dropdown content="OPTION_LIST" :disabled="DISABLED = false" :checked="CHECKED = false" :default="DEFAULT = 0">
+	<!-- Checkbox -->
+	<col width="height" height="100%">
+		<box width="100%" height="100%" x-align="0.5" y-align="0.5" :fill="[accent]">
+			<input.checkbox :checked="{{CHECKED}}" :disabled="{{DISABLED}}" :inverted="true" />
+		</box>
+	</col>
+	<!-- Dropdown -->
+	<col width="100%">
+		<input.dropdown width="100%" :default="{{DEFAULT}}" :disabled="{{DISABLED}}">{{OPTION_LIST}}</input.dropdown>
+	</col>
+</input.checkbox-with-dropdown>
diff --git a/gui/input/checkbox.xml b/gui/input/checkbox.xml
new file mode 100644
index 000000000..5033548ce
--- /dev/null
+++ b/gui/input/checkbox.xml
@@ -0,0 +1,20 @@
+<input.checkbox :checked="CHECKED = false" :disabled="DISABLED = false" :inverted="INVERTED = false">
+	<box width="14px" height="14px" :fill="{{BOX_COLOR}}" :round="2px">
+		<if :a="{{CHECKED}}">
+			<if :a="{{INVERTED}}" :b="false">
+				<icon>
+					<svg width="12.84px" height="11.59px" viewBox="0 0 12.84 11.59">
+						<polygon points="5.53,11.59 0,6.67 1.66,4.8 5.13,7.88 10.82,0 12.84,1.46" fill="#ffffff" />
+					</svg>
+				</icon>
+			</if>
+			<if :a="{{INVERTED}}">
+				<icon>
+					<svg width="12.84px" height="11.59px" viewBox="0 0 12.84 11.59">
+						<polygon points="5.53,11.59 0,6.67 1.66,4.8 5.13,7.88 10.82,0 12.84,1.46" fill="#4b79a7" />
+					</svg>
+				</icon>
+			</if>
+		</if>
+	</box>
+</input.checkbox>
diff --git a/gui/input/dropdown.xml b/gui/input/dropdown.xml
new file mode 100644
index 000000000..a95913f82
--- /dev/null
+++ b/gui/input/dropdown.xml
@@ -0,0 +1,16 @@
+<input.dropdown content="OPTION_LIST" :default="DEFAULT = 0" :disabled="DISABLED = false">
+	<box width="100%" :round="4px">
+		<!-- Current selection text -->
+		<col width="100%" height="24px">
+			<text width="100%" height="100%" x-align="0.5" y-align="0.5" :color="mildwhite">{{CURRENT_TEXT}}</text>
+		</col>
+		<!-- Dropdown arrow icon -->
+		<col width="8px" height="100%">
+			<icon width="8px" height="100%" x-align="0.5" y-align="0.5">
+				<svg width="7" height="5" viewBox="0 0 7 5">
+					<path d="M0,.5l3.5,3L7,.5v2l-3.5,3L0,2.5Z" transform="translate(0 -0.5)" fill="#ddd" />
+				</svg>
+			</icon>
+		</col>
+	</box>
+</input.dropdown>
diff --git a/gui/row.xml b/gui/row.xml
new file mode 100644
index 000000000..f88a6a8f6
--- /dev/null
+++ b/gui/row.xml
@@ -0,0 +1,3 @@
+<row content="INNER_XML">
+	{{INNER_XML}}
+</row>
\ No newline at end of file
diff --git a/gui/text.xml b/gui/text.xml
new file mode 100644
index 000000000..92b459f4f
--- /dev/null
+++ b/gui/text.xml
@@ -0,0 +1,3 @@
+<text content="TEXT_STRING" :color="COLOR = [middlegray]" :size="SIZE = 12px">
+
+</text>
\ No newline at end of file
diff --git a/gui/viewport/panels.xml b/gui/viewport/panels.xml
new file mode 100644
index 000000000..7934780b5
--- /dev/null
+++ b/gui/viewport/panels.xml
@@ -0,0 +1,7 @@
+<viewport.panels>
+	<checkbox-with-dropdown :checked="true" :default="2">
+		<dropdown-option>Option A</dropdown-option>
+		<dropdown-option>Option B</dropdown-option>
+		<dropdown-option>Option C</dropdown-option>
+	</checkbox-with-dropdown>
+</viewport.panels>
\ No newline at end of file
diff --git a/gui/window/main.xml b/gui/window/main.xml
new file mode 100644
index 000000000..21e45378f
--- /dev/null
+++ b/gui/window/main.xml
@@ -0,0 +1,18 @@
+<!-- Called as <window.main width="1920px" height="1080px" /> -->
+<window.main>
+	<!-- Header -->
+	<row width="100%" height="28px">
+		<header.file-menu height="100%" x-align="0" />
+		<text height="100%" y-align="0.5" x-align="0.5" :color="mildwhite">Document 1* - Graphite</text>
+		<header.window-buttons height="100%" x-align="1" />
+	</row>
+	<!-- Viewport -->
+	<row width="100%" height="100@">
+		<viewport.panels />
+	</row>
+	<!-- Footer -->
+	<row width="100%" height="24px">
+		<text height="100%" y-align="0.5" x-align="0" x-padding="10px" :color="mildwhite" :size="14px">File: 1.8 MB | Memory: 137 MB | Scratch: 0.7/12.3 GB</text>
+		<text height="100%" y-align="0.5" x-align="1" x-padding="10px" :color="mildwhite" :size="14px">🖰 Box Select Objects | [⇧G] Move Selection | [⇧R] Rotate Selection | [⇧S] Scale Selection</text>
+	</row>
+</window.main>