From c2d224520a104c34b2681a92478004c69b44b7e3 Mon Sep 17 00:00:00 2001
From: Koldo Picaza <1093654+kpicaza@users.noreply.github.com>
Date: Tue, 24 Oct 2023 20:32:28 +0200
Subject: [PATCH] Store drawing palette and brush

---
 README.md                                     |   2 +-
 app/Listeners/OpenDocumentWindow.php          |  13 +-
 infection.log                                 | 174 ++++++++++++------
 .../js/src/components/canvas/SketchCanvas.ts  |  29 ++-
 .../components/drawing-tools/BrushOptions.ts  |  70 +++++--
 .../components/sketch-book/SketchNavigator.ts |   2 +-
 resources/js/src/domain/model/Brush.ts        |   3 +-
 resources/js/src/domain/model/DrawingTool.ts  |  15 +-
 resources/js/src/domain/model/Palette.ts      |   7 +
 resources/js/src/domain/model/SketchBook.ts   |  26 ++-
 resources/js/src/pages/OpenSketch.ts          |  74 ++++----
 .../drawing-tools/BrushOptions.test.ts        |  20 +-
 .../sketch-book/SketchNavigator.test.ts       |  39 ++--
 resources/js/test/pages/OpenSketch.test.ts    |   7 +-
 .../Domain/Command/SaveSketchBookCommand.php  |  47 ++++-
 .../Domain/Handler/CreateNewSketchBook.php    |   5 +-
 .../Domain/Handler/SaveSketchBook.php         |   3 +-
 src/SketchBook/Domain/Model/Brush.php         |  34 ++++
 src/SketchBook/Domain/Model/Palette.php       |  55 ++++++
 src/SketchBook/Domain/Model/Sketch.php        |   8 +-
 src/SketchBook/Domain/Model/SketchBook.php    |  83 ++++++---
 .../Infrastructure/Http/PutSketchBook.php     |   3 +-
 .../FileSystemSketchBookRepository.php        |  20 +-
 tests/Feature/ExportSketchTest.php            |  12 +-
 tests/Feature/GetSketchBookTest.php           |  24 ++-
 tests/Feature/OpenExistingSketchBookTest.php  |  24 ++-
 tests/Feature/SaveSketchBookTest.php          |  24 ++-
 .../Domain/Handler/DownloadSketchTest.php     |   5 +-
 .../Handler/ResetSketchBookLocationTest.php   |  10 +-
 .../Domain/Handler/SaveSketchBookTest.php     |  11 +-
 .../Domain/Model/SketchBookTest.php           |  15 +-
 31 files changed, 608 insertions(+), 256 deletions(-)
 create mode 100644 resources/js/src/domain/model/Palette.ts
 create mode 100644 src/SketchBook/Domain/Model/Brush.php
 create mode 100644 src/SketchBook/Domain/Model/Palette.php

diff --git a/README.md b/README.md
index 37b2bc6..02f52e9 100644
--- a/README.md
+++ b/README.md
@@ -53,7 +53,7 @@ provides the tools you need.
 * [x] Brush Color
 * [x] Recent used brush color palette
 * [x] Brush Size
-* [ ] Store Drawing settings
+* [x] Store Drawing settings
 
 ### Sketch Book
 
diff --git a/app/Listeners/OpenDocumentWindow.php b/app/Listeners/OpenDocumentWindow.php
index c284763..e6aebcc 100644
--- a/app/Listeners/OpenDocumentWindow.php
+++ b/app/Listeners/OpenDocumentWindow.php
@@ -13,11 +13,15 @@
 use OpenSketch\SketchBook\Domain\Handler\CreateNewSketchBook;
 use OpenSketch\SketchBook\Domain\Handler\ResetSketchBookLocation;
 use OpenSketch\SketchBook\Domain\Handler\SaveSketchBook;
+use OpenSketch\SketchBook\Domain\Model\SketchBook;
 use OpenSketch\Window\Domain\Command\OpenWindowCommand;
 use OpenSketch\Window\Domain\Handler\OpenFileDialog;
 use OpenSketch\Window\Domain\Handler\OpenWindow;
 use Ramsey\Uuid\Uuid;
 
+/**
+ * @phpstan-import-type SketchBookNormalized from SketchBook
+ */
 final class OpenDocumentWindow
 {
     private const JSON_DEPTH = 512;
@@ -42,11 +46,7 @@ public function handle(DocumentOpened $event): void
         }
 
         /**
-         * @var array{
-         *   id: string,
-         *   sketches: array<array{id: string, image: string}>,
-         *   background: string|null
-         * } $sketchBookData
+         * @var SketchBookNormalized $sketchBookData
          */
         $sketchBookData = json_decode(
             $fileContents,
@@ -73,7 +73,8 @@ public function handle(DocumentOpened $event): void
                 SaveSketchBookCommand::from(
                     $sketchBookId,
                     $sketchBookData['sketches'],
-                    $sketchBookData['background'] ?? '#ffffff',
+                    $sketchBookData['brush'],
+                    $sketchBookData['palette'],
                 )
             );
         }
diff --git a/infection.log b/infection.log
index af6bbf9..02024fe 100644
--- a/infection.log
+++ b/infection.log
@@ -9,7 +9,7 @@ Escaped mutants:
          } catch (MissedSketchBookReference) {
              $sketchBookId = Uuid::uuid4()->toString();
              $this->createNewSketchBook->handle(CreateNewSketchBookCommand::withIdAndPath($sketchBookId, $path));
--            $this->saveSketchBook->handle(SaveSketchBookCommand::from($sketchBookId, $sketchBookData['sketches'], $sketchBookData['background'] ?? '#ffffff'));
+-            $this->saveSketchBook->handle(SaveSketchBookCommand::from($sketchBookId, $sketchBookData['sketches'], $sketchBookData['brush'], $sketchBookData['palette']));
 +            
          }
          $this->openWindow->handle(new OpenWindowCommand($sketchBookId, 'sketch-book', $path, 'sketch-book'));
@@ -17,66 +17,98 @@ Escaped mutants:
  }
 
 
-2) /home/kpicaza/server/open.sketch/dev/app/Listeners/OpenDocumentWindow.php:76    [M] Coalesce
+2) /home/kpicaza/server/open.sketch/dev/app/Listeners/OpenDocumentWindow.php:82    [M] MethodCallRemoval
 
 --- Original
 +++ New
 @@ @@
-         } catch (MissedSketchBookReference) {
-             $sketchBookId = Uuid::uuid4()->toString();
              $this->createNewSketchBook->handle(CreateNewSketchBookCommand::withIdAndPath($sketchBookId, $path));
--            $this->saveSketchBook->handle(SaveSketchBookCommand::from($sketchBookId, $sketchBookData['sketches'], $sketchBookData['background'] ?? '#ffffff'));
-+            $this->saveSketchBook->handle(SaveSketchBookCommand::from($sketchBookId, $sketchBookData['sketches'], '#ffffff' ?? $sketchBookData['background']));
+             $this->saveSketchBook->handle(SaveSketchBookCommand::from($sketchBookId, $sketchBookData['sketches'], $sketchBookData['brush'], $sketchBookData['palette']));
          }
-         $this->openWindow->handle(new OpenWindowCommand($sketchBookId, 'sketch-book', $path, 'sketch-book'));
+-        $this->openWindow->handle(new OpenWindowCommand($sketchBookId, 'sketch-book', $path, 'sketch-book'));
++        
      }
  }
 
 
-3) /home/kpicaza/server/open.sketch/dev/app/Listeners/OpenDocumentWindow.php:81    [M] MethodCallRemoval
+3) /home/kpicaza/server/open.sketch/dev/app/Listeners/StoreDocument.php:37    [M] MethodCallRemoval
 
 --- Original
 +++ New
 @@ @@
-             $this->createNewSketchBook->handle(CreateNewSketchBookCommand::withIdAndPath($sketchBookId, $path));
-             $this->saveSketchBook->handle(SaveSketchBookCommand::from($sketchBookId, $sketchBookData['sketches'], $sketchBookData['background'] ?? '#ffffff'));
+             return;
          }
--        $this->openWindow->handle(new OpenWindowCommand($sketchBookId, 'sketch-book', $path, 'sketch-book'));
+         $command = CreateNewSketchBookCommand::withIdAndPath(Uuid::uuid4()->toString(), $path);
+-        $this->createNewSketchBook->handle($command);
 +        
+         $this->windowManager->handle(new OpenWindowCommand($command->sketchBookId, 'sketch-book', $path, 'sketch-book'));
      }
  }
 
 
-4) /home/kpicaza/server/open.sketch/dev/app/Listeners/StoreDocument.php:37    [M] MethodCallRemoval
+4) /home/kpicaza/server/open.sketch/dev/app/Listeners/StoreDocument.php:39    [M] MethodCallRemoval
 
 --- Original
 +++ New
 @@ @@
-             return;
          }
          $command = CreateNewSketchBookCommand::withIdAndPath(Uuid::uuid4()->toString(), $path);
--        $this->createNewSketchBook->handle($command);
+         $this->createNewSketchBook->handle($command);
+-        $this->windowManager->handle(new OpenWindowCommand($command->sketchBookId, 'sketch-book', $path, 'sketch-book'));
 +        
-         $this->windowManager->handle(new OpenWindowCommand($command->sketchBookId, 'sketch-book', $path, 'sketch-book'));
      }
  }
 
 
-5) /home/kpicaza/server/open.sketch/dev/app/Listeners/StoreDocument.php:39    [M] MethodCallRemoval
+5) /home/kpicaza/server/open.sketch/dev/src/SketchBook/Domain/Handler/SaveSketchBook.php:22    [M] MethodCallRemoval
 
 --- Original
 +++ New
 @@ @@
-         }
-         $command = CreateNewSketchBookCommand::withIdAndPath(Uuid::uuid4()->toString(), $path);
-         $this->createNewSketchBook->handle($command);
--        $this->windowManager->handle(new OpenWindowCommand($command->sketchBookId, 'sketch-book', $path, 'sketch-book'));
+     public function handle(SaveSketchBookCommand $command) : void
+     {
+         $sketchBook = $this->repository->get($command->sketchBookId);
+-        $sketchBook->setBrush($command->brush());
++        
+         $sketchBook->setPalette($command->palette());
+         $sketchBook->updateSketches(Sketch::fromNormalizedSketches($command->sketches));
+         $this->repository->save($sketchBook);
+     }
+ }
+
+
+6) /home/kpicaza/server/open.sketch/dev/src/SketchBook/Domain/Handler/SaveSketchBook.php:23    [M] MethodCallRemoval
+
+--- Original
++++ New
+@@ @@
+     {
+         $sketchBook = $this->repository->get($command->sketchBookId);
+         $sketchBook->setBrush($command->brush());
+-        $sketchBook->setPalette($command->palette());
 +        
+         $sketchBook->updateSketches(Sketch::fromNormalizedSketches($command->sketches));
+         $this->repository->save($sketchBook);
      }
  }
 
 
-6) /home/kpicaza/server/open.sketch/dev/src/SketchBook/Domain/Model/SketchBook.php:90    [M] UnwrapStrReplace
+7) /home/kpicaza/server/open.sketch/dev/src/SketchBook/Domain/Model/SketchBook.php:36    [M] LogicalNot
+
+--- Original
++++ New
+@@ @@
+     }
+     public static function new(string $sketchBookId, string $storagePath) : self
+     {
+-        if (!str_ends_with($storagePath, '.json')) {
++        if (str_ends_with($storagePath, '.json')) {
+             $storagePath = sprintf('%s.json', $storagePath);
+         }
+         return new self($sketchBookId, $storagePath, [new Sketch(1, 'data:,')], Brush::default(), Palette::default());
+
+
+8) /home/kpicaza/server/open.sketch/dev/src/SketchBook/Domain/Model/SketchBook.php:85    [M] UnwrapStrReplace
 
 --- Original
 +++ New
@@ -91,7 +123,7 @@ Escaped mutants:
      {
 
 
-7) /home/kpicaza/server/open.sketch/dev/src/SketchBook/Infrastructure/Persistence/FileSystemSketchBookRepository.php:29    [M] ArrayItemRemoval
+9) /home/kpicaza/server/open.sketch/dev/src/SketchBook/Infrastructure/Persistence/FileSystemSketchBookRepository.php:34    [M] ArrayItemRemoval
 
 --- Original
 +++ New
@@ -106,51 +138,79 @@ Escaped mutants:
          }
 
 
-8) /home/kpicaza/server/open.sketch/dev/src/SketchBook/Infrastructure/Persistence/FileSystemSketchBookRepository.php:45    [M] DecrementInteger
+10) /home/kpicaza/server/open.sketch/dev/src/SketchBook/Infrastructure/Persistence/FileSystemSketchBookRepository.php:44    [M] DecrementInteger
 
 --- Original
 +++ New
 @@ @@
-          *   background: string
-          * }|null $sketchBookSerialized
-          */
--        $sketchBookSerialized = json_decode($content, true, 512, JSON_THROW_ON_ERROR);
-+        $sketchBookSerialized = json_decode($content, true, 511, JSON_THROW_ON_ERROR);
-         return new SketchBook($sketchBookReference->id, $sketchBookReference->storage_path, Sketch::fromNormalizedSketches($sketchBookSerialized['sketches'] ?? []), $sketchBookSerialized['background'] ?? '#ffffff');
+         }
+         $content = Storage::get($sketchBookReference->storage_path) ?? '[]';
+         /** @var SketchBookNormalized|null $sketchBookNormalized */
+-        $sketchBookNormalized = json_decode($content, true, 512, JSON_THROW_ON_ERROR);
++        $sketchBookNormalized = json_decode($content, true, 511, JSON_THROW_ON_ERROR);
+         return new SketchBook($sketchBookReference->id, $sketchBookReference->storage_path, Sketch::fromNormalizedSketches($sketchBookNormalized['sketches'] ?? []), Brush::fromNormalized($sketchBookNormalized['brush'] ?? (array) Brush::default()), Palette::fromNormalized($sketchBookNormalized['palette'] ?? (array) Palette::default()));
      }
  }
 
 
-9) /home/kpicaza/server/open.sketch/dev/src/SketchBook/Infrastructure/Persistence/FileSystemSketchBookRepository.php:45    [M] IncrementInteger
+11) /home/kpicaza/server/open.sketch/dev/src/SketchBook/Infrastructure/Persistence/FileSystemSketchBookRepository.php:44    [M] IncrementInteger
 
 --- Original
 +++ New
 @@ @@
-          *   background: string
-          * }|null $sketchBookSerialized
-          */
--        $sketchBookSerialized = json_decode($content, true, 512, JSON_THROW_ON_ERROR);
-+        $sketchBookSerialized = json_decode($content, true, 513, JSON_THROW_ON_ERROR);
-         return new SketchBook($sketchBookReference->id, $sketchBookReference->storage_path, Sketch::fromNormalizedSketches($sketchBookSerialized['sketches'] ?? []), $sketchBookSerialized['background'] ?? '#ffffff');
+         }
+         $content = Storage::get($sketchBookReference->storage_path) ?? '[]';
+         /** @var SketchBookNormalized|null $sketchBookNormalized */
+-        $sketchBookNormalized = json_decode($content, true, 512, JSON_THROW_ON_ERROR);
++        $sketchBookNormalized = json_decode($content, true, 513, JSON_THROW_ON_ERROR);
+         return new SketchBook($sketchBookReference->id, $sketchBookReference->storage_path, Sketch::fromNormalizedSketches($sketchBookNormalized['sketches'] ?? []), Brush::fromNormalized($sketchBookNormalized['brush'] ?? (array) Brush::default()), Palette::fromNormalized($sketchBookNormalized['palette'] ?? (array) Palette::default()));
      }
  }
 
 
-10) /home/kpicaza/server/open.sketch/dev/src/SketchBook/Infrastructure/Persistence/FileSystemSketchBookRepository.php:52    [M] Coalesce
+12) /home/kpicaza/server/open.sketch/dev/src/SketchBook/Infrastructure/Persistence/FileSystemSketchBookRepository.php:51    [M] CastArray
 
 --- Original
 +++ New
 @@ @@
-          * }|null $sketchBookSerialized
-          */
-         $sketchBookSerialized = json_decode($content, true, 512, JSON_THROW_ON_ERROR);
--        return new SketchBook($sketchBookReference->id, $sketchBookReference->storage_path, Sketch::fromNormalizedSketches($sketchBookSerialized['sketches'] ?? []), $sketchBookSerialized['background'] ?? '#ffffff');
-+        return new SketchBook($sketchBookReference->id, $sketchBookReference->storage_path, Sketch::fromNormalizedSketches($sketchBookSerialized['sketches'] ?? []), '#ffffff' ?? $sketchBookSerialized['background']);
+         $content = Storage::get($sketchBookReference->storage_path) ?? '[]';
+         /** @var SketchBookNormalized|null $sketchBookNormalized */
+         $sketchBookNormalized = json_decode($content, true, 512, JSON_THROW_ON_ERROR);
+-        return new SketchBook($sketchBookReference->id, $sketchBookReference->storage_path, Sketch::fromNormalizedSketches($sketchBookNormalized['sketches'] ?? []), Brush::fromNormalized($sketchBookNormalized['brush'] ?? (array) Brush::default()), Palette::fromNormalized($sketchBookNormalized['palette'] ?? (array) Palette::default()));
++        return new SketchBook($sketchBookReference->id, $sketchBookReference->storage_path, Sketch::fromNormalizedSketches($sketchBookNormalized['sketches'] ?? []), Brush::fromNormalized($sketchBookNormalized['brush'] ?? Brush::default()), Palette::fromNormalized($sketchBookNormalized['palette'] ?? (array) Palette::default()));
      }
  }
 
 
-11) /home/kpicaza/server/open.sketch/dev/src/Window/Infrastructure/Electron/LaravelDialogProvider.php:24    [M] Coalesce
+13) /home/kpicaza/server/open.sketch/dev/src/SketchBook/Infrastructure/Persistence/FileSystemSketchBookRepository.php:52    [M] CastArray
+
+--- Original
++++ New
+@@ @@
+         $content = Storage::get($sketchBookReference->storage_path) ?? '[]';
+         /** @var SketchBookNormalized|null $sketchBookNormalized */
+         $sketchBookNormalized = json_decode($content, true, 512, JSON_THROW_ON_ERROR);
+-        return new SketchBook($sketchBookReference->id, $sketchBookReference->storage_path, Sketch::fromNormalizedSketches($sketchBookNormalized['sketches'] ?? []), Brush::fromNormalized($sketchBookNormalized['brush'] ?? (array) Brush::default()), Palette::fromNormalized($sketchBookNormalized['palette'] ?? (array) Palette::default()));
++        return new SketchBook($sketchBookReference->id, $sketchBookReference->storage_path, Sketch::fromNormalizedSketches($sketchBookNormalized['sketches'] ?? []), Brush::fromNormalized($sketchBookNormalized['brush'] ?? (array) Brush::default()), Palette::fromNormalized($sketchBookNormalized['palette'] ?? Palette::default()));
+     }
+ }
+
+
+14) /home/kpicaza/server/open.sketch/dev/src/SketchBook/Infrastructure/Persistence/FileSystemSketchBookRepository.php:52    [M] Coalesce
+
+--- Original
++++ New
+@@ @@
+         $content = Storage::get($sketchBookReference->storage_path) ?? '[]';
+         /** @var SketchBookNormalized|null $sketchBookNormalized */
+         $sketchBookNormalized = json_decode($content, true, 512, JSON_THROW_ON_ERROR);
+-        return new SketchBook($sketchBookReference->id, $sketchBookReference->storage_path, Sketch::fromNormalizedSketches($sketchBookNormalized['sketches'] ?? []), Brush::fromNormalized($sketchBookNormalized['brush'] ?? (array) Brush::default()), Palette::fromNormalized($sketchBookNormalized['palette'] ?? (array) Palette::default()));
++        return new SketchBook($sketchBookReference->id, $sketchBookReference->storage_path, Sketch::fromNormalizedSketches($sketchBookNormalized['sketches'] ?? []), Brush::fromNormalized($sketchBookNormalized['brush'] ?? (array) Brush::default()), Palette::fromNormalized((array) Palette::default() ?? $sketchBookNormalized['palette']));
+     }
+ }
+
+
+15) /home/kpicaza/server/open.sketch/dev/src/Window/Infrastructure/Electron/LaravelDialogProvider.php:24    [M] Coalesce
 
 --- Original
 +++ New
@@ -165,7 +225,7 @@ Escaped mutants:
      public function save(string $title, string $path) : ?string
 
 
-12) /home/kpicaza/server/open.sketch/dev/src/Window/Infrastructure/Electron/LaravelDialogProvider.php:28    [M] UnwrapStrReplace
+16) /home/kpicaza/server/open.sketch/dev/src/Window/Infrastructure/Electron/LaravelDialogProvider.php:28    [M] UnwrapStrReplace
 
 --- Original
 +++ New
@@ -180,7 +240,7 @@ Escaped mutants:
      {
 
 
-13) /home/kpicaza/server/open.sketch/dev/src/Window/Infrastructure/Electron/LaravelDialogProvider.php:31    [M] Coalesce
+17) /home/kpicaza/server/open.sketch/dev/src/Window/Infrastructure/Electron/LaravelDialogProvider.php:31    [M] Coalesce
 
 --- Original
 +++ New
@@ -195,7 +255,7 @@ Escaped mutants:
      {
 
 
-14) /home/kpicaza/server/open.sketch/dev/src/Window/Infrastructure/Electron/LaravelDialogProvider.php:42    [M] Coalesce
+18) /home/kpicaza/server/open.sketch/dev/src/Window/Infrastructure/Electron/LaravelDialogProvider.php:42    [M] Coalesce
 
 --- Original
 +++ New
@@ -209,7 +269,7 @@ Escaped mutants:
  }
 
 
-15) /home/kpicaza/server/open.sketch/dev/src/Window/Infrastructure/Electron/LaravelWindowProvider.php:17    [M] MethodCallRemoval
+19) /home/kpicaza/server/open.sketch/dev/src/Window/Infrastructure/Electron/LaravelWindowProvider.php:17    [M] MethodCallRemoval
 
 --- Original
 +++ New
@@ -224,7 +284,7 @@ Escaped mutants:
          Window::open($command->openingWindowName)->title(sprintf('%s: %s', __('sketch_book'), $command->fileName()))->route($command->routeName, ['id' => $command->sketchBookId]);
 
 
-16) /home/kpicaza/server/open.sketch/dev/src/Window/Infrastructure/Electron/LaravelWindowProvider.php:19    [M] Ternary
+20) /home/kpicaza/server/open.sketch/dev/src/Window/Infrastructure/Electron/LaravelWindowProvider.php:19    [M] Identical
 
 --- Original
 +++ New
@@ -233,7 +293,7 @@ Escaped mutants:
          Window::open('welcome');
          /** @phpstan-ignore-next-line */
 -        Window::close(Window::current()->id === 'welcome' ? 'sketch-book' : Window::current()->id);
-+        Window::close(Window::current()->id === 'welcome' ? Window::current()->id : 'sketch-book');
++        Window::close(Window::current()->id !== 'welcome' ? 'sketch-book' : Window::current()->id);
          Window::open($command->openingWindowName)->title(sprintf('%s: %s', __('sketch_book'), $command->fileName()))->route($command->routeName, ['id' => $command->sketchBookId]);
          $window->maximize($command->openingWindowName);
          Window::close('welcome');
@@ -241,7 +301,7 @@ Escaped mutants:
  }
 
 
-17) /home/kpicaza/server/open.sketch/dev/src/Window/Infrastructure/Electron/LaravelWindowProvider.php:19    [M] MethodCallRemoval
+21) /home/kpicaza/server/open.sketch/dev/src/Window/Infrastructure/Electron/LaravelWindowProvider.php:19    [M] MethodCallRemoval
 
 --- Original
 +++ New
@@ -259,7 +319,7 @@ Escaped mutants:
  }
 
 
-18) /home/kpicaza/server/open.sketch/dev/src/Window/Infrastructure/Electron/LaravelWindowProvider.php:19    [M] Identical
+22) /home/kpicaza/server/open.sketch/dev/src/Window/Infrastructure/Electron/LaravelWindowProvider.php:19    [M] Ternary
 
 --- Original
 +++ New
@@ -268,7 +328,7 @@ Escaped mutants:
          Window::open('welcome');
          /** @phpstan-ignore-next-line */
 -        Window::close(Window::current()->id === 'welcome' ? 'sketch-book' : Window::current()->id);
-+        Window::close(Window::current()->id !== 'welcome' ? 'sketch-book' : Window::current()->id);
++        Window::close(Window::current()->id === 'welcome' ? Window::current()->id : 'sketch-book');
          Window::open($command->openingWindowName)->title(sprintf('%s: %s', __('sketch_book'), $command->fileName()))->route($command->routeName, ['id' => $command->sketchBookId]);
          $window->maximize($command->openingWindowName);
          Window::close('welcome');
@@ -276,7 +336,7 @@ Escaped mutants:
  }
 
 
-19) /home/kpicaza/server/open.sketch/dev/src/Window/Infrastructure/Electron/LaravelWindowProvider.php:22    [M] MethodCallRemoval
+23) /home/kpicaza/server/open.sketch/dev/src/Window/Infrastructure/Electron/LaravelWindowProvider.php:22    [M] MethodCallRemoval
 
 --- Original
 +++ New
@@ -292,7 +352,7 @@ Escaped mutants:
  }
 
 
-20) /home/kpicaza/server/open.sketch/dev/src/Window/Infrastructure/Electron/LaravelWindowProvider.php:24    [M] ArrayItemRemoval
+24) /home/kpicaza/server/open.sketch/dev/src/Window/Infrastructure/Electron/LaravelWindowProvider.php:24    [M] ArrayItemRemoval
 
 --- Original
 +++ New
@@ -308,7 +368,7 @@ Escaped mutants:
  }
 
 
-21) /home/kpicaza/server/open.sketch/dev/src/Window/Infrastructure/Electron/LaravelWindowProvider.php:25    [M] ArrayItem
+25) /home/kpicaza/server/open.sketch/dev/src/Window/Infrastructure/Electron/LaravelWindowProvider.php:25    [M] ArrayItem
 
 --- Original
 +++ New
@@ -324,7 +384,7 @@ Escaped mutants:
  }
 
 
-22) /home/kpicaza/server/open.sketch/dev/src/Window/Infrastructure/Electron/LaravelWindowProvider.php:28    [M] MethodCallRemoval
+26) /home/kpicaza/server/open.sketch/dev/src/Window/Infrastructure/Electron/LaravelWindowProvider.php:28    [M] MethodCallRemoval
 
 --- Original
 +++ New
@@ -339,7 +399,7 @@ Escaped mutants:
  }
 
 
-23) /home/kpicaza/server/open.sketch/dev/src/Window/Infrastructure/Electron/LaravelWindowProvider.php:30    [M] MethodCallRemoval
+27) /home/kpicaza/server/open.sketch/dev/src/Window/Infrastructure/Electron/LaravelWindowProvider.php:30    [M] MethodCallRemoval
 
 --- Original
 +++ New
diff --git a/resources/js/src/components/canvas/SketchCanvas.ts b/resources/js/src/components/canvas/SketchCanvas.ts
index 9efb4da..0620b78 100644
--- a/resources/js/src/components/canvas/SketchCanvas.ts
+++ b/resources/js/src/components/canvas/SketchCanvas.ts
@@ -1,8 +1,7 @@
 import {LitElement, css, html} from "lit";
 import {customElement, property, query} from "lit/decorators.js";
 import {consume} from "@lit/context";
-import {brushContext, featuresContext, sketchBookContext} from "../../store/AppContext.js";
-import {Brush} from "../../domain/model/Brush.js";
+import {featuresContext, sketchBookContext} from "../../store/AppContext.js";
 import {DrawingTool} from "../../domain/model/DrawingTool.js";
 import {ToggleRouter} from "../../services/ToggleRouter.js";
 import {SketchBook} from "../../domain/model/SketchBook.js";
@@ -52,10 +51,6 @@ export class SketchCanvas extends LitElement {
 
   @query(".cursor") cursor!: HTMLDivElement;
 
-  @consume({context: brushContext, subscribe: true})
-  @property({attribute: false})
-  brush: Brush
-
   @consume({context: sketchBookContext, subscribe: true})
   @property({attribute: false})
   sketchBook: SketchBook
@@ -83,7 +78,7 @@ export class SketchCanvas extends LitElement {
     this.canvasHeight = this.parentElement!.offsetHeight - 50;
     this.drawingTool = new DrawingTool(this.canvas.getContext("2d"))
     this.drawingTool.clearCanvas(this.canvasWidth, this.canvasHeight, this.image);
-    this.drawingTool.setBrush(this.brush);
+    this.drawingTool.setBrushAndPalette(this.sketchBook.brush, this.sketchBook.palette);
     this.canvasBackgroundColor = this.features!.isEnabled('canvas-background-color')
     if (this.canvasBackgroundColor) {
       this.canvas.classList.remove('white-background')
@@ -94,12 +89,12 @@ export class SketchCanvas extends LitElement {
 
   protected async updated(_changedProperties) {
     super.updated(_changedProperties);
-    this.drawingTool.setBrush(this.brush);
+    this.drawingTool.setBrushAndPalette(this.sketchBook.brush, this.sketchBook.palette);
     const image = _changedProperties.get('image');
     if (typeof image === 'string') {
       this.image = new URL(this.image);
     }
-    if (this.resetCanvas === true) {
+    if (this.resetCanvas) {
       this.canvasWidth = this.offsetWidth;
       this.canvasHeight = this.parentElement!.offsetHeight - 50;
       this.drawingTool.clearCanvas(this.canvasWidth, this.canvasHeight, this.image);
@@ -112,12 +107,12 @@ export class SketchCanvas extends LitElement {
   }
 
   protected moveCursor(event: MouseEvent) {
-    const cursorWidth =  this.brush.lineWidth > 3 ? this.brush.lineWidth : 3;
+    const cursorWidth =  this.sketchBook.brush.width > 3 ? this.sketchBook.brush.width : 3;
     this.cursor.style.width = `${cursorWidth}px`;
     this.cursor.style.height = `${cursorWidth}px`;
-    this.cursor.style.background = this.brush.color;
-    const mouseY = event.offsetY - (this.brush.lineWidth / 2);
-    const mouseX = event.offsetX - (this.brush.lineWidth / 2);
+    this.cursor.style.background = this.sketchBook.palette.primaryColor;
+    const mouseY = event.offsetY - (this.sketchBook.brush.width / 2);
+    const mouseX = event.offsetX - (this.sketchBook.brush.width / 2);
     this.cursor.style.transform = `translate3d(${mouseX}px, ${mouseY}px, 0)`;
   }
 
@@ -127,8 +122,8 @@ export class SketchCanvas extends LitElement {
   }
 
   protected startDrawing(event: MouseEvent) {
-    if (!this.drawingTool.hasCurrentBrush(this.brush)) {
-      this.drawingTool.setBrush(this.brush);
+    if (!this.drawingTool.hasCurrentBrushAndPalette(this.sketchBook.brush, this.sketchBook.palette)) {
+      this.drawingTool.setBrushAndPalette(this.sketchBook.brush, this.sketchBook.palette);
     }
 
     this.drawingTool.startDrawing(event.offsetX, event.offsetY);
@@ -147,7 +142,7 @@ export class SketchCanvas extends LitElement {
         detail: {
           id: this.sketchId,
           image: new URL(this.canvas.toDataURL("image/png")),
-          background: this.sketchBook.background,
+          background: this.sketchBook.palette.backgroundColor,
         }
       }
     ))
@@ -157,7 +152,7 @@ export class SketchCanvas extends LitElement {
     if (this.canvasBackgroundColor) {
       return html`
         <canvas
-          .style="background:${this.sketchBook.background};"
+          .style="background:${this.sketchBook.palette.backgroundColor};"
           class="background"
           width=${this.canvasWidth}
           height=${this.canvasHeight}
diff --git a/resources/js/src/components/drawing-tools/BrushOptions.ts b/resources/js/src/components/drawing-tools/BrushOptions.ts
index c832108..60ae38d 100644
--- a/resources/js/src/components/drawing-tools/BrushOptions.ts
+++ b/resources/js/src/components/drawing-tools/BrushOptions.ts
@@ -1,9 +1,10 @@
 import {LitElement, css, html} from "lit";
 import {customElement, property, query} from "lit/decorators.js";
 import {consume} from "@lit/context";
-import {featuresContext, sketchBookContext} from "../../store/AppContext.js";
+import {featuresContext} from "../../store/AppContext.js";
 import {ToggleRouter} from "../../services/ToggleRouter.js";
-import {SketchBook} from "../../domain/model/SketchBook.js";
+import {Brush} from "../../domain/model/Brush.js";
+import {Palette} from "../../domain/model/Palette.js";
 import '@material/web/icon/icon.js'
 import '@material/web/slider/slider.js'
 import "./Eraser.js"
@@ -113,23 +114,20 @@ export class BrushOptions extends LitElement {
       height: 50px;
       background: transparent;
     }
-
   `;
 
   @consume({context: featuresContext, subscribe: true})
   @property({attribute: false})
   declare features: ToggleRouter
 
-  @consume({context: sketchBookContext, subscribe: true})
-  @property({attribute: false})
-  declare sketchBook: SketchBook
-
   @query('.background-color-input-button') backgroundInputButton: HTMLDivElement;
 
   @query('.background-color-input') backgroundInput: HTMLInputElement;
 
   @property() declare color: string;
 
+  @property() declare backgroundColor: string;
+
   @property() declare selectedBrush: string;
 
   @property() declare lineWidth: number;
@@ -144,15 +142,20 @@ export class BrushOptions extends LitElement {
 
   constructor() {
     super();
-    this.color = "#000000";
     this.selectedBrush = 'pen';
     this.lineWidth = 3;
     this.lineWidthInput = 9;
+    this.color = "#000000";
+    this.backgroundColor = "#ffffff";
     this.previousColor1 = '#527474';
     this.previousColor2 = '#844ab2';
     this.previousColor3 = '#e89cb9';
   }
 
+  protected firstUpdated() {
+    this.lineWidthInput = this.lineWidth * Math.PI;
+  }
+
   protected changeLineWidth(event: InputEvent) {
     const input: HTMLInputElement = event.target as HTMLInputElement;
     this.lineWidthInput = input.value as unknown as number;
@@ -160,7 +163,10 @@ export class BrushOptions extends LitElement {
     this.dispatchEvent(new CustomEvent(
       'linewidthchanged',
       {
-        detail: this.lineWidth,
+        detail: {
+          type: this.selectedBrush,
+          width: this.lineWidth,
+        } as Brush,
       }
     ));
   }
@@ -174,7 +180,13 @@ export class BrushOptions extends LitElement {
     this.dispatchEvent(new CustomEvent(
       'colorchanged',
       {
-        detail: this.color,
+        detail: {
+          primaryColor: this.color,
+          backgroundColor: this.backgroundColor,
+          secondaryColor1: this.previousColor1,
+          secondaryColor2: this.previousColor2,
+          secondaryColor3: this.previousColor3,
+        } as Palette,
       }
     ));
   }
@@ -188,17 +200,30 @@ export class BrushOptions extends LitElement {
     this.dispatchEvent(new CustomEvent(
       'colorchanged',
       {
-        detail: this.color,
+        detail: {
+          primaryColor: this.color,
+          backgroundColor: this.backgroundColor,
+          secondaryColor1: this.previousColor1,
+          secondaryColor2: this.previousColor2,
+          secondaryColor3: this.previousColor3,
+        } as Palette,
       }
     ));
   }
 
   protected changeBackgroundColor(event: InputEvent) {
     const input: HTMLInputElement = event.target as HTMLInputElement;
+    this.backgroundColor = input.value;
     this.dispatchEvent(new CustomEvent(
       'backgroundcolorchanged',
       {
-        detail: input.value,
+        detail: {
+          primaryColor: this.color,
+          backgroundColor: input.value,
+          secondaryColor1: this.previousColor1,
+          secondaryColor2: this.previousColor2,
+          secondaryColor3: this.previousColor3,
+        } as Palette,
       }
     ));
   }
@@ -218,7 +243,10 @@ export class BrushOptions extends LitElement {
     this.dispatchEvent(new CustomEvent(
       'brushselected',
       {
-        detail: this.selectedBrush,
+        detail: {
+          type: this.selectedBrush,
+          width: this.lineWidth,
+        } as Brush,
       }
     ));
 
@@ -257,9 +285,15 @@ export class BrushOptions extends LitElement {
           class="background-color rounded"
           type="color"
           @change=${this.changeBackgroundColor}
-          .value=${this.sketchBook.background}
+          .value=${this.backgroundColor}
+        />
+        <input
+          class="rounded"
+          type="color"
+          @change=${this.changeColor}
+          autocomplete
+          .value=${this.color}
         />
-        <input class="rounded" type="color" @change=${this.changeColor} .value=${this.color} />
         ${this.renderSecondaryColorPickers()}
       `
     }
@@ -283,19 +317,19 @@ export class BrushOptions extends LitElement {
           .value=${this.lineWidthInput}
         ></md-slider>
         <brush-pen
-          class="brush pen selected"
+          class="brush pen ${this.selectedBrush === 'pen' ? 'selected' : ''}"
           data-value="pen"
           @click=${this.selectBrush}
           .selection=${this.selectedBrush}
         ></brush-pen>
         <brush-pencil
-          class="brush pencil"
+          class="brush pencil ${this.selectedBrush === 'pencil' ? 'selected' : ''}"
           data-value="pencil"
           @click=${this.selectBrush}
           .selection=${this.selectedBrush}
         ></brush-pencil>
         <brush-eraser
-          class="brush eraser"
+          class="brush eraser ${this.selectedBrush === 'eraser' ? 'selected' : ''}"
           data-value="eraser"
           @click=${this.selectBrush}
           .selection=${this.selectedBrush}
diff --git a/resources/js/src/components/sketch-book/SketchNavigator.ts b/resources/js/src/components/sketch-book/SketchNavigator.ts
index 643f8ef..67be0cf 100644
--- a/resources/js/src/components/sketch-book/SketchNavigator.ts
+++ b/resources/js/src/components/sketch-book/SketchNavigator.ts
@@ -182,7 +182,7 @@ export class SketchNavigator extends LitElement {
             <sketch-preview
               .sketchId=${sketch.id}
               .image=${sketch.image}
-              .background=${this.sketchBook.background}
+              .background=${this.sketchBook.palette.backgroundColor}
               @sketchselected=${this.goToSelectedSketch}
               @sketchdeleted=${this.deleteSketch}
               @sketchdownloaded=${this.downloadSketch}
diff --git a/resources/js/src/domain/model/Brush.ts b/resources/js/src/domain/model/Brush.ts
index d8e89b2..35be4b8 100644
--- a/resources/js/src/domain/model/Brush.ts
+++ b/resources/js/src/domain/model/Brush.ts
@@ -1,5 +1,4 @@
 export interface Brush {
-  lineWidth: number,
-  color: string,
+  width: number,
   type: string,
 }
diff --git a/resources/js/src/domain/model/DrawingTool.ts b/resources/js/src/domain/model/DrawingTool.ts
index dc8c40c..6f3d98a 100644
--- a/resources/js/src/domain/model/DrawingTool.ts
+++ b/resources/js/src/domain/model/DrawingTool.ts
@@ -3,6 +3,7 @@ import {Pen} from "./Pen.js";
 import {Tool} from "./Tool.js";
 import {Pencil} from "./Pencil.js";
 import {Eraser} from "./Eraser.js";
+import {Palette} from "./Palette.js";
 
 export class DrawingTool {
   context: CanvasRenderingContext2D;
@@ -17,11 +18,11 @@ export class DrawingTool {
 
   }
 
-  public hasCurrentBrush(brush: Brush): boolean {
+  public hasCurrentBrushAndPalette(brush: Brush, palette: Palette): boolean {
     if (
       this.tool.name() === brush.type
-      && this.context.lineWidth === brush.lineWidth
-      && this.context.fillStyle === brush.color
+      && this.context.lineWidth === brush.width
+      && this.context.fillStyle === palette.primaryColor
     ) {
       return true;
     }
@@ -39,7 +40,7 @@ export class DrawingTool {
     }, 0);
   }
 
-  public setBrush(brush: Brush)
+  public setBrushAndPalette(brush: Brush, palette: Palette)
   {
     if(brush.type === "pencil") {
       this.tool = new Pencil(this.context);
@@ -49,9 +50,9 @@ export class DrawingTool {
       this.tool = new Pen(this.context);
     }
 
-    this.context.lineWidth = brush.lineWidth;
-    this.context.fillStyle = brush.color;
-    this.context.strokeStyle = brush.color;
+    this.context.lineWidth = brush.width;
+    this.context.fillStyle = palette.primaryColor;
+    this.context.strokeStyle = palette.primaryColor;
   }
 
   public clearCanvas(canvasWidth: number, canvasHeight: number, image: URL) {
diff --git a/resources/js/src/domain/model/Palette.ts b/resources/js/src/domain/model/Palette.ts
new file mode 100644
index 0000000..a6354a4
--- /dev/null
+++ b/resources/js/src/domain/model/Palette.ts
@@ -0,0 +1,7 @@
+export interface Palette {
+  primaryColor: string,
+  backgroundColor: string,
+  secondaryColor1: string,
+  secondaryColor2: string,
+  secondaryColor3: string,
+}
diff --git a/resources/js/src/domain/model/SketchBook.ts b/resources/js/src/domain/model/SketchBook.ts
index 12839aa..fec99bd 100644
--- a/resources/js/src/domain/model/SketchBook.ts
+++ b/resources/js/src/domain/model/SketchBook.ts
@@ -1,7 +1,31 @@
 import {Sketch} from "./Sketch.js";
+import {Brush} from "./Brush.js";
+import {Palette} from "./Palette.js";
 
 export interface SketchBook {
   id: string,
   sketches: Array<Sketch>,
-  background: string,
+  brush: Brush,
+  palette: Palette,
 }
+
+export const defaultSketchBook = (): SketchBook => ({
+    id: "",
+    sketches: [
+      {
+        id: 1,
+        image: new URL("data:,"),
+      }
+    ],
+    brush: {
+      width: 3,
+      type: 'pen'
+    },
+    palette: {
+      primaryColor: '#484545',
+      backgroundColor: '#ffffff',
+      secondaryColor1: '#527474',
+      secondaryColor2: '#844ab2',
+      secondaryColor3: '#e89cb9',
+    },
+  } as SketchBook)
diff --git a/resources/js/src/pages/OpenSketch.ts b/resources/js/src/pages/OpenSketch.ts
index b601f8c..8f7ed47 100644
--- a/resources/js/src/pages/OpenSketch.ts
+++ b/resources/js/src/pages/OpenSketch.ts
@@ -6,11 +6,10 @@ import {MdIconButton} from "@material/web/iconbutton/icon-button.js";
 import "@material/web/iconbutton/filled-icon-button.js";
 import {loadSketchBook, saveSketchBook, downloadSketch} from "../store/SketchBookState.js";
 import {featuresAvailable} from "../store/FeatureFlags.js";
-import {brushContext, featuresContext, sketchBookContext} from "../store/AppContext.js";
+import {featuresContext, sketchBookContext} from "../store/AppContext.js";
 import {ToggleRouter} from "../services/ToggleRouter.js";
-import {SketchBook} from "../domain/model/SketchBook.js";
+import {defaultSketchBook, SketchBook} from "../domain/model/SketchBook.js";
 import {Sketch} from "../domain/model/Sketch.js";
-import {Brush} from "../domain/model/Brush.js";
 import "../components/canvas/SketchCanvas.js";
 import "../components/settings/SettingsMenu.js";
 import "../components/sketch-book/AddSketch.js";
@@ -95,24 +94,11 @@ export class OpenSketch extends LitElement {
     }
   `;
 
-  @provide({context: brushContext}) brush: Brush = {
-    lineWidth: 3,
-    color: '#484545',
-    type: 'pen'
-  }
-
-  @provide({context: sketchBookContext}) sketchBook: SketchBook = {
-    id: "",
-    sketches: [
-      {
-        id: 1,
-        image: new URL("data:,"),
-      }
-    ],
-    background: '#e8f6f1'
-  }
+  @provide({context: sketchBookContext})
+  sketchBook: SketchBook = defaultSketchBook();
 
-  @provide({context: featuresContext}) features!: ToggleRouter = new ToggleRouter([]);
+  @provide({context: featuresContext})
+  features!: ToggleRouter = new ToggleRouter([]);
 
   @query("painting-board") sketchWrapper: HTMLDivElement;
 
@@ -174,7 +160,8 @@ export class OpenSketch extends LitElement {
     this.sketchBook = {
       id: this.sketchBook.id,
       sketches,
-      background: this.sketchBook.background
+      brush: this.sketchBook.brush,
+      palette: this.sketchBook.palette,
     };
 
     const body = this.parentElement.parentElement;
@@ -195,7 +182,8 @@ export class OpenSketch extends LitElement {
     this.sketchBook = {
       id: this.sketchBook.id,
       sketches,
-      background: event.detail.background
+      brush: this.sketchBook.brush,
+      palette: this.sketchBook.palette,
     };
 
     await saveSketchBook(this.sketchBook);
@@ -213,7 +201,8 @@ export class OpenSketch extends LitElement {
     this.sketchBook = {
       id: this.sketchBook.id,
       sketches: newSketches,
-      background: this.sketchBook.background
+      brush: this.sketchBook.brush,
+      palette: this.sketchBook.palette,
     };
 
     this.resetCanvas = true;
@@ -224,26 +213,24 @@ export class OpenSketch extends LitElement {
     downloadSketch(this.sketchBookId, event.detail)
   }
 
-  protected changeBrushLineWidth(event: CustomEvent) {
-    this.brush.lineWidth = event.detail
-  }
-
-  protected changeBrushColor(event: CustomEvent) {
-    this.brush.color = event.detail;
-  }
-
-  protected async changeBackgroundColor(event: CustomEvent) {
+  private async changeBrush(event: CustomEvent) {
     this.sketchBook = {
       id: this.sketchBook.id,
       sketches: this.sketchBook.sketches,
-      background: event.detail
+      brush: event.detail,
+      palette: this.sketchBook.palette,
     };
-
     await saveSketchBook(this.sketchBook);
   }
 
-  private changeBrush(event: CustomEvent) {
-    this.brush.type = event.detail;
+  protected async changePalette(event: CustomEvent) {
+    this.sketchBook = {
+      id: this.sketchBook.id,
+      sketches: this.sketchBook.sketches,
+      brush: this.sketchBook.brush,
+      palette: event.detail,
+    };
+    await saveSketchBook(this.sketchBook);
   }
 
   private canvasReset() {
@@ -283,12 +270,17 @@ export class OpenSketch extends LitElement {
     return html`
       <menu class="brush-tools">
         <brush-options
-          @linewidthchanged=${this.changeBrushLineWidth}
-          @colorchanged=${this.changeBrushColor}
-          @backgroundcolorchanged=${this.changeBackgroundColor}
+          @linewidthchanged=${this.changeBrush}
           @brushselected=${this.changeBrush}
-          .brushType=${this.brush.type}
-          .backgroundColor=${this.sketchBook.background}
+          @colorchanged=${this.changePalette}
+          @backgroundcolorchanged=${this.changePalette}
+          .brushType=${this.sketchBook.brush.type}
+          .lineWidth=${this.sketchBook.brush.width}
+          .color=${this.sketchBook.palette.primaryColor}
+          .backgroundColor=${this.sketchBook.palette.backgroundColor}
+          .previousColor1=${this.sketchBook.palette.secondaryColor1}
+          .previousColor2=${this.sketchBook.palette.secondaryColor2}
+          .previousColor3=${this.sketchBook.palette.secondaryColor3}
         ></brush-options>
       </menu>
       <aside class="sketch-book-controls">
diff --git a/resources/js/test/components/drawing-tools/BrushOptions.test.ts b/resources/js/test/components/drawing-tools/BrushOptions.test.ts
index 373cf5d..77b4c5e 100644
--- a/resources/js/test/components/drawing-tools/BrushOptions.test.ts
+++ b/resources/js/test/components/drawing-tools/BrushOptions.test.ts
@@ -3,15 +3,16 @@ import {expect} from "@esm-bundle/chai";
 import {html} from "lit";
 import {ToggleRouter} from "../../../src/services/ToggleRouter.js";
 import {Feature} from "../../../src/types/Feature.js";
-import {SketchBook} from "../../../src/domain/model/SketchBook.js";
+import {defaultSketchBook} from "../../../src/domain/model/SketchBook.js";
 import {BrushOptions} from "../../../src/components/drawing-tools/BrushOptions.js";
 import "../../../src/components/drawing-tools/BrushOptions.js";
 
 describe('<brush-options> components.', () => {
 
   it('should have different brush types', async () => {
+    const sketchBook = defaultSketchBook();
     const el: BrushOptions = await fixture(
-      html` <brush-options .features=${new ToggleRouter([])}></brush-options> `
+      html` <brush-options .features=${new ToggleRouter([])} .sketchBook=${sketchBook}></brush-options> `
     );
 
     const brushes: Array<HTMLDivElement> = el.shadowRoot.querySelectorAll('.brush') as Array<HTMLDivElement>;
@@ -36,8 +37,9 @@ describe('<brush-options> components.', () => {
   });
 
   it('should have a color picker', async () => {
+    const sketchBook = defaultSketchBook();
     const el: BrushOptions = await fixture(
-      html` <brush-options .features=${new ToggleRouter([])}></brush-options> `
+      html` <brush-options .features=${new ToggleRouter([])} .sketchBook=${sketchBook}></brush-options> `
     );
 
     const colorPicker: HTMLDivElement = el.shadowRoot.querySelector('.color');
@@ -46,13 +48,14 @@ describe('<brush-options> components.', () => {
   });
 
   it('should have a brush line width slider', async () => {
+    const sketchBook = defaultSketchBook();
     const el: BrushOptions = await fixture(
-      html` <brush-options .features=${new ToggleRouter([])}></brush-options> `
+      html` <brush-options .features=${new ToggleRouter([])} .sketchBook=${sketchBook}></brush-options> `
     );
     await elementUpdated(el);
 
     const lineWidthSlider: HTMLInputElement = el.shadowRoot.querySelector('.brush-width-slider');
-    expect(lineWidthSlider.value).to.be.equal(9);
+    expect(lineWidthSlider.value).to.be.equal(9.42477796076938);
     expect(el.lineWidth).to.be.equal(3);
   });
 
@@ -64,9 +67,7 @@ describe('<brush-options> components.', () => {
         enabled: true
       } as Feature
     ]);
-    const sketchBook = {
-      background: '#ffffff'
-    } as SketchBook
+    const sketchBook = defaultSketchBook();
     const el: BrushOptions = await fixture(
       html` <brush-options .features=${toggleRouter} .sketchBook=${sketchBook}></brush-options> `
     );
@@ -83,8 +84,9 @@ describe('<brush-options> components.', () => {
   });
 
   it('should have three secondary color pickers', async () => {
+    const sketchBook = defaultSketchBook();
     const el: BrushOptions = await fixture(
-      html` <brush-options .features=${new ToggleRouter([])}></brush-options> `
+      html` <brush-options .features=${new ToggleRouter([])} .sketchBook=${sketchBook}></brush-options> `
     );
     const pickers: Array<HTMLInputElement> = await el.shadowRoot.querySelectorAll('.rounded') as Array<HTMLInputElement>;
     expect(el.color).to.be.equal('#000000');
diff --git a/resources/js/test/components/sketch-book/SketchNavigator.test.ts b/resources/js/test/components/sketch-book/SketchNavigator.test.ts
index fdb02e8..b2e5aaf 100644
--- a/resources/js/test/components/sketch-book/SketchNavigator.test.ts
+++ b/resources/js/test/components/sketch-book/SketchNavigator.test.ts
@@ -2,26 +2,25 @@ import {elementUpdated, fixture, waitUntil} from "@open-wc/testing";
 import {html} from "lit";
 import {expect} from "@esm-bundle/chai";
 import {SketchNavigator} from "../../../src/components/sketch-book/SketchNavigator.js";
-import {SketchBook} from "../../../src/domain/model/SketchBook.js";
+import {defaultSketchBook} from "../../../src/domain/model/SketchBook.js";
 import "../../../src/components/sketch-book/SketchNavigator.js";
 import {Sketch} from "../../../src/domain/model/Sketch.js";
 
 describe('<sketch-nav> component.', () => {
 
   it('should show all available sketches in the sketch book', async () => {
-    const sketchBook = {
-      sketches: [
-        {
-          id: 1,
-          image: 'data:,'
-        },
-        {
-          id: 2,
-          image: 'data:,'
-        },
-      ],
-      background: '#00ffff'
-    } as SketchBook;
+    const sketches: Array<Sketch> = [
+      {
+        id: 1,
+        image: 'data:,'
+      },
+      {
+        id: 2,
+        image: 'data:,'
+      },
+    ] as Array<Sketch>;
+    const sketchBook = defaultSketchBook();
+    sketchBook.sketches = sketches;
 
     const scrollWrapper:HTMLDivElement = document.createElement('div') as HTMLDivElement;
     const el: SketchNavigator = await fixture(html`
@@ -44,10 +43,8 @@ describe('<sketch-nav> component.', () => {
         id: key + 1,
         image: 'data:,'
       } as Sketch));
-    const sketchBook: SketchBook = {
-      sketches,
-      background: '#ffff00'
-    } as SketchBook
+    const sketchBook = defaultSketchBook();
+    sketchBook.sketches = sketches;
 
     const scrollWrapper: HTMLDivElement = document.createElement('div') as HTMLDivElement;
     const el: SketchNavigator = await fixture(html`
@@ -73,10 +70,8 @@ describe('<sketch-nav> component.', () => {
         id: key + 1,
         image: 'data:,'
       } as Sketch));
-    const sketchBook: SketchBook = {
-      sketches,
-      background: '#ffff00'
-    } as SketchBook
+    const sketchBook = defaultSketchBook();
+    sketchBook.sketches = sketches;
 
     const scrollWrapper: HTMLDivElement = document.createElement('div') as HTMLDivElement;
     const el: SketchNavigator = await fixture(html`
diff --git a/resources/js/test/pages/OpenSketch.test.ts b/resources/js/test/pages/OpenSketch.test.ts
index 1385ff9..855cb46 100644
--- a/resources/js/test/pages/OpenSketch.test.ts
+++ b/resources/js/test/pages/OpenSketch.test.ts
@@ -8,6 +8,7 @@ import {FeatureFlagsRepository} from "../../src/domain/FeatureFlagsRepository.js
 import {SketchBookRepository} from "../../src/domain/SketchBookRepository.js";
 import {OpenSketch} from "../../src/pages/OpenSketch.js";
 import "../../src/pages/open-sketch.js";
+import {defaultSketchBook} from "../../src/domain/model/SketchBook.js";
 
 
 registerTranslateConfig({
@@ -21,11 +22,7 @@ registerTranslateConfig({
 
 serviceContainer.init({
   'sketchbook.repository': {
-    get: async (sketchBookId) => ({
-        id: sketchBookId,
-        sketches: [],
-        background: '#ffffff',
-      })
+    get: async () => (defaultSketchBook())
   } as SketchBookRepository,
   'feature.flags.repository': {
     all: async () => []
diff --git a/src/SketchBook/Domain/Command/SaveSketchBookCommand.php b/src/SketchBook/Domain/Command/SaveSketchBookCommand.php
index b59fdba..042f371 100644
--- a/src/SketchBook/Domain/Command/SaveSketchBookCommand.php
+++ b/src/SketchBook/Domain/Command/SaveSketchBookCommand.php
@@ -1,20 +1,55 @@
 <?php
 
+declare(strict_types=1);
+
 namespace OpenSketch\SketchBook\Domain\Command;
 
-class SaveSketchBookCommand
+use OpenSketch\SketchBook\Domain\Model\Brush;
+use OpenSketch\SketchBook\Domain\Model\Palette;
+use OpenSketch\SketchBook\Domain\Model\Sketch;
+
+/**
+ * @phpstan-import-type SketchNormalized from Sketch
+ * @phpstan-import-type BrushNormalized from Brush
+ * @phpstan-import-type PaletteNormalized from Palette
+ */
+final class SaveSketchBookCommand
 {
-    /** @param array<array{id: string, image: string}> $sketches */
+    /**
+     * @param array<SketchNormalized> $sketches
+     * @param BrushNormalized $brush
+     * @param PaletteNormalized $palette
+     */
     private function __construct(
         public string $sketchBookId,
         public array $sketches,
-        public string $background,
+        public array $brush,
+        public array $palette,
     ) {
     }
 
-    /** @param array<array{id: string, image: string}> $sketches */
-    public static function from(string $sketchBookId, array $sketches, string $background): self
+    /**
+     * @param array<SketchNormalized> $sketches
+     * @param BrushNormalized $brush
+     * @param PaletteNormalized $palette
+     */
+    public static function from(string $sketchBookId, array $sketches, array $brush, array $palette): self
+    {
+        return new self(
+            $sketchBookId,
+            $sketches,
+            $brush,
+            $palette
+        );
+    }
+
+    public function brush(): Brush
+    {
+        return Brush::fromNormalized($this->brush);
+    }
+
+    public function palette(): Palette
     {
-        return new self($sketchBookId, $sketches, $background);
+        return Palette::fromNormalized($this->palette);
     }
 }
diff --git a/src/SketchBook/Domain/Handler/CreateNewSketchBook.php b/src/SketchBook/Domain/Handler/CreateNewSketchBook.php
index 6c52c6c..7f5fa88 100644
--- a/src/SketchBook/Domain/Handler/CreateNewSketchBook.php
+++ b/src/SketchBook/Domain/Handler/CreateNewSketchBook.php
@@ -17,10 +17,9 @@ public function __construct(
 
     public function handle(CreateNewSketchBookCommand $command): void
     {
-        $sketchBook = new SketchBook(
+        $sketchBook = SketchBook::new(
             $command->sketchBookId,
-            $command->storagePath,
-            []
+            $command->storagePath
         );
 
         $this->repository->save($sketchBook);
diff --git a/src/SketchBook/Domain/Handler/SaveSketchBook.php b/src/SketchBook/Domain/Handler/SaveSketchBook.php
index 4f69e40..e56955a 100644
--- a/src/SketchBook/Domain/Handler/SaveSketchBook.php
+++ b/src/SketchBook/Domain/Handler/SaveSketchBook.php
@@ -19,7 +19,8 @@ public function handle(SaveSketchBookCommand $command): void
     {
         $sketchBook = $this->repository->get($command->sketchBookId);
 
-        $sketchBook->addBackground($command->background);
+        $sketchBook->setBrush($command->brush());
+        $sketchBook->setPalette($command->palette());
         $sketchBook->updateSketches(Sketch::fromNormalizedSketches(
             $command->sketches
         ));
diff --git a/src/SketchBook/Domain/Model/Brush.php b/src/SketchBook/Domain/Model/Brush.php
new file mode 100644
index 0000000..242e83c
--- /dev/null
+++ b/src/SketchBook/Domain/Model/Brush.php
@@ -0,0 +1,34 @@
+<?php
+
+declare(strict_types=1);
+
+namespace OpenSketch\SketchBook\Domain\Model;
+
+/**
+ * @phpstan-type BrushNormalized array{type: string, width: float|int}
+ */
+final class Brush
+{
+    private const DEFAULT_TYPE = 'pen';
+    private const DEFAULT_WIDTH = 3;
+
+    public function __construct(
+        public readonly string $type,
+        public readonly float|int $width
+    ) {
+    }
+
+    public static function default(): self
+    {
+        return new self(self::DEFAULT_TYPE, self::DEFAULT_WIDTH);
+    }
+
+    /** @param BrushNormalized $brush */
+    public static function fromNormalized(array $brush): self
+    {
+        return new self(
+            $brush['type'],
+            $brush['width']
+        );
+    }
+}
diff --git a/src/SketchBook/Domain/Model/Palette.php b/src/SketchBook/Domain/Model/Palette.php
new file mode 100644
index 0000000..ec0d497
--- /dev/null
+++ b/src/SketchBook/Domain/Model/Palette.php
@@ -0,0 +1,55 @@
+<?php
+
+declare(strict_types=1);
+
+namespace OpenSketch\SketchBook\Domain\Model;
+
+/**
+ * @phpstan-type PaletteNormalized array{
+ *   primaryColor: string,
+ *   backgroundColor: string,
+ *   secondaryColor1: string,
+ *   secondaryColor2: string,
+ *   secondaryColor3: string,
+ * }
+ */
+final class Palette
+{
+    private const DEFAULT_COLOR = '#000000';
+    private const DEFAULT_BACKGROUND = '#ffffff';
+    private const DEFAULT_SECONDARY_1 = '#00ffff';
+    private const DEFAULT_SECONDARY_2 = '#ff00ff';
+    private const DEFAULT_SECONDARY_3 = '#ffff00';
+
+    public function __construct(
+        public readonly string $primaryColor,
+        public readonly string $backgroundColor,
+        public readonly string $secondaryColor1,
+        public readonly string $secondaryColor2,
+        public readonly string $secondaryColor3,
+    ) {
+    }
+
+    public static function default(): self
+    {
+        return new self(
+            self::DEFAULT_COLOR,
+            self::DEFAULT_BACKGROUND,
+            self::DEFAULT_SECONDARY_1,
+            self::DEFAULT_SECONDARY_2,
+            self::DEFAULT_SECONDARY_3,
+        );
+    }
+
+    /** @param PaletteNormalized $palette */
+    public static function fromNormalized(array $palette): self
+    {
+        return new self(
+            $palette['primaryColor'],
+            $palette['backgroundColor'],
+            $palette['secondaryColor1'],
+            $palette['secondaryColor2'],
+            $palette['secondaryColor3'],
+        );
+    }
+}
diff --git a/src/SketchBook/Domain/Model/Sketch.php b/src/SketchBook/Domain/Model/Sketch.php
index b6fbd0c..8ca8f40 100644
--- a/src/SketchBook/Domain/Model/Sketch.php
+++ b/src/SketchBook/Domain/Model/Sketch.php
@@ -4,6 +4,12 @@
 
 namespace OpenSketch\SketchBook\Domain\Model;
 
+/**
+ * @phpstan-type SketchNormalized array{
+ *   id: string,
+ *   image: string
+ * }
+ */
 final class Sketch
 {
     public function __construct(
@@ -13,7 +19,7 @@ public function __construct(
     }
 
     /**
-     * @param array<array{"id": string, "image": string}> $sketches
+     * @param array<SketchNormalized> $sketches
      * @return array<self>
      */
     public static function fromNormalizedSketches(array $sketches): array
diff --git a/src/SketchBook/Domain/Model/SketchBook.php b/src/SketchBook/Domain/Model/SketchBook.php
index 358a16d..a29730c 100644
--- a/src/SketchBook/Domain/Model/SketchBook.php
+++ b/src/SketchBook/Domain/Model/SketchBook.php
@@ -5,31 +5,47 @@
 namespace OpenSketch\SketchBook\Domain\Model;
 
 use JsonSerializable;
-use OpenSketch\SketchBook\Domain\Exception\StoragePathChanged;
 use Ramsey\Uuid\Uuid;
 
+/**
+ * @phpstan-import-type SketchNormalized from Sketch
+ * @phpstan-import-type BrushNormalized from Brush
+ * @phpstan-import-type PaletteNormalized from Palette
+ * @phpstan-type SketchBookNormalized array{
+ *   id: string,
+ *   storage_path: string,
+ *   sketches: array<SketchNormalized>,
+ *   brush: BrushNormalized,
+ *   palette: PaletteNormalized,
+ * }
+ */
 final class SketchBook implements JsonSerializable
 {
-    public readonly string $storagePath;
-
     /** @param Sketch[] $sketches */
     public function __construct(
         public readonly string $id,
-        string $storagePath,
+        public readonly string $storagePath,
         private array $sketches,
-        private string $background = '#ffffff',
+        private Brush $brush,
+        private Palette $palette
     ) {
-        if ([] === $this->sketches) {
-            $this->sketches = [
-                new Sketch(1, 'data:,')
-            ];
-        }
+    }
 
+    public static function new(string $sketchBookId, string $storagePath): self
+    {
         if (!str_ends_with($storagePath, '.json')) {
-            $this->storagePath = sprintf('%s.json', $storagePath);
-        } else {
-            $this->storagePath = $storagePath;
+            $storagePath = sprintf('%s.json', $storagePath);
         }
+
+        return new self(
+            $sketchBookId,
+            $storagePath,
+            [
+                new Sketch(1, 'data:,')
+            ],
+            Brush::default(),
+            Palette::default()
+        );
     }
 
     private function openedInNewLocation(string $id, string $storagePath): self
@@ -37,7 +53,9 @@ private function openedInNewLocation(string $id, string $storagePath): self
         return new self(
             $id,
             $storagePath,
-            $this->sketches
+            $this->sketches,
+            $this->brush,
+            $this->palette
         );
     }
 
@@ -62,17 +80,33 @@ public function updateStoragePath(string $storagePath): self
         return $this->openedInNewLocation(Uuid::uuid4()->toString(), $storagePath);
     }
 
-    public function addBackground(string $background): void
+    public function name(): string
+    {
+        return basename(str_replace('.json', '', $this->storagePath));
+    }
+
+    public function background(): string
     {
-        $this->background = $background;
+        return $this->palette->backgroundColor;
+    }
+
+    public function setBrush(Brush $brush): void
+    {
+        $this->brush = $brush;
+    }
+
+    public function setPalette(Palette $palette): void
+    {
+        $this->palette = $palette;
     }
 
     /**
      * @return  array{
      *   id: string,
-     *   sketches: array<Sketch>,
      *   storage_path: string,
-     *   background: string
+     *   sketches: array<Sketch>,
+     *   brush: Brush,
+     *   palette: Palette,
      * }
      */
     public function jsonSerialize(): array
@@ -81,17 +115,8 @@ public function jsonSerialize(): array
             'id' => $this->id,
             'storage_path' => $this->storagePath,
             'sketches' => $this->sketches,
-            'background' => $this->background,
+            'brush' => $this->brush,
+            'palette' => $this->palette,
         ];
     }
-
-    public function name(): string
-    {
-        return basename(str_replace('.json', '', $this->storagePath));
-    }
-
-    public function background(): string
-    {
-        return $this->background;
-    }
 }
diff --git a/src/SketchBook/Infrastructure/Http/PutSketchBook.php b/src/SketchBook/Infrastructure/Http/PutSketchBook.php
index bc26663..7caab3a 100644
--- a/src/SketchBook/Infrastructure/Http/PutSketchBook.php
+++ b/src/SketchBook/Infrastructure/Http/PutSketchBook.php
@@ -29,7 +29,8 @@ public function handle(Request $request): Response
         $this->saveSketchBook->handle(SaveSketchBookCommand::from(
             $sketchBookData['id'],
             $sketchBookData['sketches'],
-            $sketchBookData['background'],
+            $sketchBookData['brush'],
+            $sketchBookData['palette'],
         ));
 
         return new Response(null, 200);
diff --git a/src/SketchBook/Infrastructure/Persistence/FileSystemSketchBookRepository.php b/src/SketchBook/Infrastructure/Persistence/FileSystemSketchBookRepository.php
index f7be336..6cc9542 100644
--- a/src/SketchBook/Infrastructure/Persistence/FileSystemSketchBookRepository.php
+++ b/src/SketchBook/Infrastructure/Persistence/FileSystemSketchBookRepository.php
@@ -7,10 +7,15 @@
 use App\Models\SketchBookReference;
 use Illuminate\Support\Facades\Storage;
 use OpenSketch\SketchBook\Domain\Exception\MissedSketchBookReference;
+use OpenSketch\SketchBook\Domain\Model\Brush;
+use OpenSketch\SketchBook\Domain\Model\Palette;
 use OpenSketch\SketchBook\Domain\Model\Sketch;
 use OpenSketch\SketchBook\Domain\Model\SketchBook;
 use OpenSketch\SketchBook\Domain\SketchBookRepository;
 
+/**
+ * @phpstan-import-type SketchBookNormalized from SketchBook
+ */
 final class FileSystemSketchBookRepository implements SketchBookRepository
 {
     public function save(SketchBook $sketchBook): void
@@ -35,21 +40,16 @@ public function get(string $sketchBookId): SketchBook
         }
 
         $content = Storage::get($sketchBookReference->storage_path) ?? '[]';
-        /**
-         * @var array{
-         *   id: string,
-         *   sketches: array<array{id: string, image: string}>,
-         *   background: string
-         * }|null $sketchBookSerialized
-         */
-        $sketchBookSerialized = json_decode($content, true, 512, JSON_THROW_ON_ERROR);
+        /** @var SketchBookNormalized|null $sketchBookNormalized */
+        $sketchBookNormalized = json_decode($content, true, 512, JSON_THROW_ON_ERROR);
 
 
         return new SketchBook(
             $sketchBookReference->id,
             $sketchBookReference->storage_path,
-            Sketch::fromNormalizedSketches($sketchBookSerialized['sketches'] ?? []),
-            $sketchBookSerialized['background'] ?? '#ffffff'
+            Sketch::fromNormalizedSketches($sketchBookNormalized['sketches'] ?? []),
+            Brush::fromNormalized($sketchBookNormalized['brush'] ?? (array)Brush::default()),
+            Palette::fromNormalized($sketchBookNormalized['palette'] ?? (array)Palette::default())
         );
     }
 }
diff --git a/tests/Feature/ExportSketchTest.php b/tests/Feature/ExportSketchTest.php
index 182056f..2e11d85 100644
--- a/tests/Feature/ExportSketchTest.php
+++ b/tests/Feature/ExportSketchTest.php
@@ -27,7 +27,17 @@ public function testTheApplicationReturnsASuccessfulResponse(): void
                     'image' => 'data:,'
                 ]
             ],
-            'background' => '#ffffff'
+            'brush' => [
+                'type' => 'pencil',
+                'width' => 6,
+            ],
+            'palette' => [
+                'primaryColor' => '#000000',
+                'backgroundColor' => '#ffffff',
+                'secondaryColor1' => '#00ffff',
+                'secondaryColor2' => '#ff00ff',
+                'secondaryColor3' => '#ffff00',
+            ]
         ], JSON_THROW_ON_ERROR));
         SketchBookReference::firstOrNew([
             'id' => $sketchBookId,
diff --git a/tests/Feature/GetSketchBookTest.php b/tests/Feature/GetSketchBookTest.php
index 284dedf..ba07938 100644
--- a/tests/Feature/GetSketchBookTest.php
+++ b/tests/Feature/GetSketchBookTest.php
@@ -33,7 +33,17 @@ public function testTheApplicationReturnsASuccessfulResponse(): void
             'id' => $sketchBookId,
             'storage_path' => '/home/fake/sketch-book.json',
             'sketches' => $sketches,
-            'background' => '#ffffff'
+            'brush' => [
+                'type' => 'pencil',
+                'width' => 6,
+            ],
+            'palette' => [
+                'primaryColor' => '#000000',
+                'backgroundColor' => '#ffffff',
+                'secondaryColor1' => '#00ffff',
+                'secondaryColor2' => '#ff00ff',
+                'secondaryColor3' => '#ffff00',
+            ]
         ], JSON_THROW_ON_ERROR));
 
         SketchBookReference::firstOrNew([
@@ -53,7 +63,17 @@ public function testTheApplicationReturnsASuccessfulResponse(): void
                     "image" => "data:,"
                 ]
             ],
-            'background' => '#ffffff'
+            'brush' => [
+                'type' => 'pencil',
+                'width' => 6,
+            ],
+            'palette' => [
+                'primaryColor' => '#000000',
+                'backgroundColor' => '#ffffff',
+                'secondaryColor1' => '#00ffff',
+                'secondaryColor2' => '#ff00ff',
+                'secondaryColor3' => '#ffff00',
+            ]
         ]);
     }
 }
diff --git a/tests/Feature/OpenExistingSketchBookTest.php b/tests/Feature/OpenExistingSketchBookTest.php
index 06c6c77..b99d489 100644
--- a/tests/Feature/OpenExistingSketchBookTest.php
+++ b/tests/Feature/OpenExistingSketchBookTest.php
@@ -36,7 +36,17 @@ public function testTheApplicationReturnsASuccessfulResponse(): void
                     'image' => 'data:,'
                 ]
             ],
-            'background' => '#ffffff'
+            'brush' => [
+                'type' => 'pencil',
+                'width' => 6,
+            ],
+            'palette' => [
+                'primaryColor' => '#000000',
+                'backgroundColor' => '#ffffff',
+                'secondaryColor1' => '#00ffff',
+                'secondaryColor2' => '#ff00ff',
+                'secondaryColor3' => '#ffff00',
+            ]
         ], JSON_THROW_ON_ERROR));
         SketchBookReference::firstOrNew([
             'id' => $sketchBookId,
@@ -67,7 +77,17 @@ public function testTheApplicationReturnsASuccessfulResponseWithMissingReference
                     'image' => 'data:,'
                 ]
             ],
-            'background' => '#ffffff'
+            'brush' => [
+                'type' => 'pencil',
+                'width' => 6,
+            ],
+            'palette' => [
+                'primaryColor' => '#000000',
+                'backgroundColor' => '#ffffff',
+                'secondaryColor1' => '#00ffff',
+                'secondaryColor2' => '#ff00ff',
+                'secondaryColor3' => '#ffff00',
+            ]
         ], JSON_THROW_ON_ERROR));
 
         $dialog = $this->getFakeDialog();
diff --git a/tests/Feature/SaveSketchBookTest.php b/tests/Feature/SaveSketchBookTest.php
index ef40186..3a29519 100644
--- a/tests/Feature/SaveSketchBookTest.php
+++ b/tests/Feature/SaveSketchBookTest.php
@@ -37,7 +37,17 @@ public function testTheApplicationReturnsASuccessfulResponse(): void
             'id' => $sketchBookId,
             'storage_path' => '/home/fake/sketch-book.json',
             'sketches' => $sketches,
-            'background' => '#ffffff',
+            'brush' => [
+                'type' => 'pencil',
+                'width' => 6,
+            ],
+            'palette' => [
+                'primaryColor' => '#000000',
+                'backgroundColor' => '#ffffff',
+                'secondaryColor1' => '#00ffff',
+                'secondaryColor2' => '#ff00ff',
+                'secondaryColor3' => '#ffff00',
+            ]
         ], JSON_THROW_ON_ERROR));
 
         SketchBookReference::firstOrNew([
@@ -55,7 +65,17 @@ public function testTheApplicationReturnsASuccessfulResponse(): void
                     'image' => 'data:1'
                 ]
             ],
-            'background' => '#ffffff'
+            'brush' => [
+                'type' => 'pencil',
+                'width' => 6,
+            ],
+            'palette' => [
+                'primaryColor' => '#000000',
+                'backgroundColor' => '#ffffff',
+                'secondaryColor1' => '#00ffff',
+                'secondaryColor2' => '#ff00ff',
+                'secondaryColor3' => '#ffff00',
+            ]
         ]);
 
         $response->assertStatus(200);
diff --git a/tests/Unit/SketchBook/Domain/Handler/DownloadSketchTest.php b/tests/Unit/SketchBook/Domain/Handler/DownloadSketchTest.php
index 9610ebd..8d8b04e 100644
--- a/tests/Unit/SketchBook/Domain/Handler/DownloadSketchTest.php
+++ b/tests/Unit/SketchBook/Domain/Handler/DownloadSketchTest.php
@@ -5,6 +5,8 @@
 use OpenSketch\SketchBook\Domain\Command\DownloadSketchCommand;
 use OpenSketch\SketchBook\Domain\Handler\DownloadSketch;
 use OpenSketch\SketchBook\Domain\ImageManipulation;
+use OpenSketch\SketchBook\Domain\Model\Brush;
+use OpenSketch\SketchBook\Domain\Model\Palette;
 use OpenSketch\SketchBook\Domain\Model\Sketch;
 use OpenSketch\SketchBook\Domain\Model\SketchBook;
 use OpenSketch\SketchBook\Domain\SketchBookRepository;
@@ -27,7 +29,8 @@ public function testDownloadsASketch(): void
                 [
                     new Sketch(1, 'data:,')
                 ],
-                '#000000'
+                Brush::default(),
+                Palette::default()
             ))
         ;
 
diff --git a/tests/Unit/SketchBook/Domain/Handler/ResetSketchBookLocationTest.php b/tests/Unit/SketchBook/Domain/Handler/ResetSketchBookLocationTest.php
index 5347217..5dfdb50 100644
--- a/tests/Unit/SketchBook/Domain/Handler/ResetSketchBookLocationTest.php
+++ b/tests/Unit/SketchBook/Domain/Handler/ResetSketchBookLocationTest.php
@@ -4,6 +4,8 @@
 
 use OpenSketch\SketchBook\Domain\Command\ResetSketchBookLocationCommand;
 use OpenSketch\SketchBook\Domain\Handler\ResetSketchBookLocation;
+use OpenSketch\SketchBook\Domain\Model\Brush;
+use OpenSketch\SketchBook\Domain\Model\Palette;
 use OpenSketch\SketchBook\Domain\Model\Sketch;
 use OpenSketch\SketchBook\Domain\Model\SketchBook;
 use OpenSketch\SketchBook\Domain\SketchBookRepository;
@@ -24,7 +26,9 @@ public function testUpdateSketchBookLocationBeforeOpen(): void
                 '/home/fake/old-location.json',
                 [
                     new Sketch(1, 'data:,')
-                ]
+                ],
+                Brush::default(),
+                Palette::default()
             ))
         ;
         $repository->expects($this->once())
@@ -54,7 +58,9 @@ public function testDoNotUpdateSketchBookLocationBeforeOpenWhenExist(): void
                 '/home/fake/location.json',
                 [
                     new Sketch(1, 'data:,')
-                ]
+                ],
+                Brush::default(),
+                Palette::default()
             ))
         ;
         $repository->expects($this->once())
diff --git a/tests/Unit/SketchBook/Domain/Handler/SaveSketchBookTest.php b/tests/Unit/SketchBook/Domain/Handler/SaveSketchBookTest.php
index 1e8d80e..b473725 100644
--- a/tests/Unit/SketchBook/Domain/Handler/SaveSketchBookTest.php
+++ b/tests/Unit/SketchBook/Domain/Handler/SaveSketchBookTest.php
@@ -4,6 +4,8 @@
 
 use OpenSketch\SketchBook\Domain\Command\SaveSketchBookCommand;
 use OpenSketch\SketchBook\Domain\Handler\SaveSketchBook;
+use OpenSketch\SketchBook\Domain\Model\Brush;
+use OpenSketch\SketchBook\Domain\Model\Palette;
 use OpenSketch\SketchBook\Domain\Model\Sketch;
 use OpenSketch\SketchBook\Domain\Model\SketchBook;
 use OpenSketch\SketchBook\Domain\SketchBookRepository;
@@ -25,7 +27,8 @@ public function testSaveSketchBook(): void
                 [
                     new Sketch(1, 'data:,')
                 ],
-                '#000000'
+                Brush::default(),
+                Palette::default()
             ))
         ;
         $repository->expects($this->once())
@@ -38,7 +41,8 @@ public function testSaveSketchBook(): void
                     new Sketch(2, 'data:2'),
                     new Sketch(3, 'data:3'),
                 ],
-                '#ffffff'
+                Brush::default(),
+                Palette::default()
             ));
 
         $createNeSketchBook = new SaveSketchBook(
@@ -52,7 +56,8 @@ public function testSaveSketchBook(): void
                 ['id' => '2', 'image' => 'data:2'],
                 ['id' => '3', 'image' => 'data:3'],
             ],
-            '#ffffff'
+            (array)Brush::default(),
+            (array)Palette::default()
         ));
     }
 }
diff --git a/tests/Unit/SketchBook/Domain/Model/SketchBookTest.php b/tests/Unit/SketchBook/Domain/Model/SketchBookTest.php
index e1b4816..a50d796 100644
--- a/tests/Unit/SketchBook/Domain/Model/SketchBookTest.php
+++ b/tests/Unit/SketchBook/Domain/Model/SketchBookTest.php
@@ -2,6 +2,8 @@
 
 namespace Tests\Unit\SketchBook\Domain\Model;
 
+use OpenSketch\SketchBook\Domain\Model\Brush;
+use OpenSketch\SketchBook\Domain\Model\Palette;
 use OpenSketch\SketchBook\Domain\Model\Sketch;
 use OpenSketch\SketchBook\Domain\Model\SketchBook;
 use PHPUnit\Framework\TestCase;
@@ -15,28 +17,31 @@ public function testCreateSketchBook(): void
         $sketches = [
             new Sketch(1, 'data:,')
         ];
+        $brush = Brush::default();
+        $palette = Palette::default();
         $sketchBook = new SketchBook(
             $id,
             '/test.json',
             $sketches,
-            '#ffff00'
+            $brush,
+            $palette
         );
 
         $this->assertSame([
             'id' => $id,
             'storage_path' => '/test.json',
             'sketches' => $sketches,
-            'background' => '#ffff00'
+            'brush' => $brush,
+            'palette' => $palette,
         ], $sketchBook->jsonSerialize());
     }
 
     public function testCreateSketchBookWithoutSketches(): void
     {
         $id = Uuid::uuid4()->toString();
-        $sketchBook = new SketchBook(
+        $sketchBook = SketchBook::new(
             $id,
-            '/test.json',
-            []
+            '/test.json'
         );
 
         $this->assertCount(1, $sketchBook->sketches());