Created application layout skeleton.

src/App.module.css

@@ -1,9 +1,20 @@
 .appContainer {
   height: 100vh;
   width: 100%;
+  overflow: hidden;
 }
 
-.mainContent {
+.mobileMenu {
+  height: 100vh;
+  width: 0;
+  position: fixed;
+  z-index: 20;
+  top: 0;
+  right: 0;
+  background: white;
+  overflow-x: hidden;
+  transition: 0.15s ease-out;
+  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
 }
 
 /* Large - Landscape Tablets / Desktops */
@@ -14,7 +25,34 @@
   .appContainer {
     max-width: 1200px;
     margin: 0 auto;
-    background-color: blue;
+  }
+
+  .mobileContent {
+    display: none;
+  }
+
+  .mainContent {
+    display: flex;
+  }
+
+  .alphaZone {
+    flex: 1;
+  }
+
+  .betaZone {
+    flex: 1;
+  }
+
+  .colorPickerContainer {
+  }
+
+  .colorValuesContainer {
+  }
+
+  .paletteEditorContainer {
+  }
+
+  .paletteLibraryContainer {
   }
 }
 
@@ -22,7 +60,63 @@
 /* Horizontal layout, side menu, vertical tabbed picker */
 @media (min-width: 568px) and (max-width: 991px) and (orientation: landscape) {
   .appContainer {
-    background-color: yellow;
+  }
+
+  .mainContent,
+  .mobileTopNav {
+    display: none;
+  }
+
+  .mobileContent {
+    display: flex;
+  }
+
+  .mobileLeftNav {
+  }
+
+  .mobileRightNav {
+  }
+
+  .mobileAlphaZone {
+    flex: 1;
+  }
+
+  .mobileBetaZone {
+    flex: 1;
+  }
+
+  .mobileMenu {
+  }
+
+  .mobileMenu.open {
+    width: 80vh;
+  }
+
+  .mobileMenu .closeButton {
+    margin: 10px;
+  }
+
+  .tabbedContainer {
+    max-height: 100vh;
+    overflow-y: scroll;
+    scroll-snap-type: y mandatory;
+  }
+
+  .tabbedContainer .tab {
+    height: 100vh;
+    scroll-snap-align: start;
+  }
+
+  .colorPickerContainer {
+  }
+
+  .colorValuesContainer {
+  }
+
+  .paletteEditorContainer {
+  }
+
+  .paletteLibraryContainer {
   }
 }
 
@@ -30,6 +124,62 @@
 /* Vertical layout, side menu, horizontal tabbed picker */
 @media (max-width: 567px) {
   .appContainer {
-    background-color: red;
+  }
+
+  .mainContent,
+  .mobileRightNav,
+  .mobileLeftNav {
+    display: none;
+  }
+
+  .mobileContent {
+  }
+
+  .mobileTopNav {
+    display: flex;
+  }
+
+  .menuButton {
+    margin-left: auto;
+  }
+
+  .mobileAlphaZone {
+  }
+
+  .mobileBetaZone {
+  }
+
+  .mobileMenu {
+  }
+
+  .mobileMenu.open {
+    width: 80%;
+  }
+
+  .mobileMenu .closeButton {
+    margin: 10px;
+  }
+
+  .tabbedContainer {
+    display: flex;
+    overflow-x: scroll;
+    scroll-snap-type: x mandatory;
+  }
+
+  .tabbedContainer .tab {
+    min-width: 100vw;
+    scroll-snap-align: start;
+  }
+
+  .colorPickerContainer {
+  }
+
+  .colorValuesContainer {
+  }
+
+  .paletteEditorContainer {
+  }
+
+  .paletteLibraryContainer {
   }
 }

src/App.tsx

@@ -1,7 +1,67 @@
+import { useState } from "react";
 import styles from "./App.module.css";
+import ColorPicker from "./components/ColorPicker/ColorPicker";
+import ColorValues from "./components/ColorValues/ColorValues";
+import clsx from "clsx";
 
 function App() {
-  return <div className={styles.appContainer}></div>;
+  const [menuOpen, setMenuOpen] = useState(false);
+
+  const toggleMenu = () => setMenuOpen(!menuOpen);
+  const MenuButton = () => (
+    <button className={styles.menuButton} onClick={toggleMenu}>
+      ☰
+    </button>
+  );
+
+  return (
+    <div className={styles.appContainer}>
+      <div className={styles.mobileContent}>
+        <div className={styles.mobileTopNav}>
+          <MenuButton />
+        </div>
+        <div className={styles.mobileLeftNav}></div>
+        <div className={styles.mobileAlphaZone}>
+          <div className={styles.tabbedContainer}>
+            <div className={clsx(styles.tab, styles.colorPickerContainer)}>
+              <ColorPicker />
+            </div>
+            <div className={clsx(styles.tab, styles.colorValuesContainer)}>
+              <ColorValues />
+            </div>
+          </div>
+        </div>
+        <div className={styles.mobileBetaZone}>
+          <div className={styles.paletteEditorContainer}></div>
+        </div>
+        <div className={styles.mobileRightNav}>
+          <MenuButton />
+        </div>
+      </div>
+
+      <div className={clsx(styles.mobileMenu, { [styles.open]: menuOpen })}>
+        <button className={styles.closeButton} onClick={toggleMenu}>
+          ×
+        </button>
+        <div className={styles.paletteLibraryContainer}>Palette Library</div>
+      </div>
+
+      <div className={styles.mainContent}>
+        <div className={styles.alphaZone}>
+          <div className={styles.colorPickerContainer}>
+            <ColorPicker />
+          </div>
+          <div className={styles.colorValuesContainer}>
+            <ColorValues />
+          </div>
+        </div>
+        <div className={styles.betaZone}>
+          <div className={styles.paletteEditorContainer}></div>
+          <div className={styles.paletteLibraryContainer}></div>
+        </div>
+      </div>
+    </div>
+  );
 }
 
 export default App;

src/components/ColorPicker/ColorPicker.module.css

@@ -0,0 +1,36 @@
+.container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.pickerSquare {
+  flex: 1;
+}
+
+.pickerBar {
+  flex: 1;
+}
+
+/* Large - Landscape Tablets / Desktops */
+/* Medium - Portrait Tablets */
+/* Horizontal layout, vertically scrolling picker and palette content */
+@media (min-width: 992px),
+  (min-width: 568px) and (max-width: 991px) and (orientation: portrait) {
+}
+
+/* Medium - Landscape Phones */
+/* Horizontal layout, side menu, vertical tabbed picker */
+@media (min-width: 568px) and (max-width: 991px) and (orientation: landscape) {
+  .container {
+    flex-direction: row;
+  }
+}
+
+/* Small - Portrait Phones*/
+/* Vertical layout, side menu, horizontal tabbed picker */
+@media (max-width: 567px) {
+}

src/components/ColorPicker/ColorPicker.tsx

@@ -0,0 +1,12 @@
+import styles from "./ColorPicker.module.css";
+
+function ColorPicker() {
+  return (
+    <div className={styles.container}>
+      <div className={styles.pickerSquare}>Square</div>
+      <div className={styles.pickerBar}>Bar</div>
+    </div>
+  );
+}
+
+export default ColorPicker;

src/components/ColorValues/ColorValues.module.css

@@ -0,0 +1,24 @@
+.container {
+  width: 100%;
+  height: 100%;
+}
+
+.valueItem {
+}
+
+/* Large - Landscape Tablets / Desktops */
+/* Medium - Portrait Tablets */
+/* Horizontal layout, vertically scrolling picker and palette content */
+@media (min-width: 992px),
+  (min-width: 568px) and (max-width: 991px) and (orientation: portrait) {
+}
+
+/* Medium - Landscape Phones */
+/* Horizontal layout, side menu, vertical tabbed picker */
+@media (min-width: 568px) and (max-width: 991px) and (orientation: landscape) {
+}
+
+/* Small - Portrait Phones*/
+/* Vertical layout, side menu, horizontal tabbed picker */
+@media (max-width: 567px) {
+}

src/components/ColorValues/ColorValues.tsx

@@ -0,0 +1,13 @@
+import styles from "./ColorValues.module.css";
+
+function ColorValues() {
+  return (
+    <div className={styles.container}>
+      <div className={styles.valueItem}>RGB: 255, 0, 0</div>
+      <div className={styles.valueItem}>HEX: #FF0000</div>
+      <div className={styles.valueItem}>HSL: 0, 100%, 50%</div>
+    </div>
+  );
+}
+
+export default ColorValues;

src/components/Footer/Footer.module.css

@@ -0,0 +1,16 @@
+/* Large - Landscape Tablets / Desktops */
+/* Medium - Portrait Tablets */
+/* Horizontal layout, vertically scrolling picker and palette content */
+@media (min-width: 992px),
+  (min-width: 568px) and (max-width: 991px) and (orientation: portrait) {
+}
+
+/* Medium - Landscape Phones */
+/* Horizontal layout, side menu, vertical tabbed picker */
+@media (min-width: 568px) and (max-width: 991px) and (orientation: landscape) {
+}
+
+/* Small - Portrait Phones*/
+/* Vertical layout, side menu, horizontal tabbed picker */
+@media (max-width: 567px) {
+}

src/components/PaletteEditor/PaletteEditor.module.css

@@ -0,0 +1,16 @@
+/* Large - Landscape Tablets / Desktops */
+/* Medium - Portrait Tablets */
+/* Horizontal layout, vertically scrolling picker and palette content */
+@media (min-width: 992px),
+  (min-width: 568px) and (max-width: 991px) and (orientation: portrait) {
+}
+
+/* Medium - Landscape Phones */
+/* Horizontal layout, side menu, vertical tabbed picker */
+@media (min-width: 568px) and (max-width: 991px) and (orientation: landscape) {
+}
+
+/* Small - Portrait Phones*/
+/* Vertical layout, side menu, horizontal tabbed picker */
+@media (max-width: 567px) {
+}

src/components/PaletteLibrary/PaletteLibrary.module.css

@@ -0,0 +1,16 @@
+/* Large - Landscape Tablets / Desktops */
+/* Medium - Portrait Tablets */
+/* Horizontal layout, vertically scrolling picker and palette content */
+@media (min-width: 992px),
+  (min-width: 568px) and (max-width: 991px) and (orientation: portrait) {
+}
+
+/* Medium - Landscape Phones */
+/* Horizontal layout, side menu, vertical tabbed picker */
+@media (min-width: 568px) and (max-width: 991px) and (orientation: landscape) {
+}
+
+/* Small - Portrait Phones*/
+/* Vertical layout, side menu, horizontal tabbed picker */
+@media (max-width: 567px) {
+}