diff --git a/packages/@vivliostyle/theme-gutenberg/alice.css b/packages/@vivliostyle/theme-gutenberg/alice.css
new file mode 100644
index 0000000..95d16df
--- /dev/null
+++ b/packages/@vivliostyle/theme-gutenberg/alice.css
@@ -0,0 +1,262 @@
+@charset "UTF-8";
+/*
+  Original version:
+  https://github.com/vivliostyle/vivliostyle_doc/blob/gh-pages/samples/gutenberg/gutenberg.css
+*/
+@import url(https://fonts.googleapis.com/css?family=Source + Code + Pro:500);
+html {
+  max-width: 90ch;
+  margin: auto;
+  font-family: Georgia, serif;
+}
+
+body {
+  margin: 0 2em;
+}
+
+@media (max-width: 400px) {
+  body {
+    margin: 0 1em;
+  }
+}
+@page {
+  font-size: small;
+  font-family: Georgia, serif;
+  margin: 4rem 10%;
+  @top-center {
+    color: gray;
+    font-variant: small-caps;
+  }
+}
+@page :right {
+  @bottom-right {
+    content: counter(page);
+  }
+}
+@page :left {
+  @bottom-left {
+    content: counter(page);
+  }
+}
+@page :first {
+  @bottom-left {
+    content: normal;
+  }
+  @bottom-right {
+    content: normal;
+  }
+  @top-center {
+    content: normal;
+  }
+}
+@page :blank {
+  @bottom-left {
+    content: normal;
+  }
+  @bottom-right {
+    content: normal;
+  }
+  @top-center {
+    content: normal;
+  }
+}
+nav {
+  break-before: right;
+}
+nav ol {
+  list-style: none;
+  counter-reset: chap;
+  padding-left: 0em;
+  line-height: 1.45;
+}
+nav li {
+  break-inside: avoid;
+}
+nav li a {
+  display: inline-flex;
+  width: 100%;
+  text-decoration: none;
+  color: currentColor;
+  break-inside: avoid;
+  align-items: baseline;
+}
+nav li a::before {
+  margin-left: 1px;
+  margin-right: 1px;
+  border-bottom: solid 1px lightgray;
+  content: '';
+  order: 1;
+  flex: auto;
+}
+nav li a::after {
+  text-align: right;
+  content: target-counter(attr(href, url), page);
+  align-self: flex-end;
+  flex: none;
+  order: 2;
+}
+
+@media (min-width: 375px) {
+  nav ol {
+    padding-left: 3em;
+  }
+  nav li::before {
+    counter-increment: chap;
+    content: counter(chap, upper-roman) '.';
+    float: left;
+    width: 3em;
+    margin-left: -3em;
+  }
+}
+/** Titles **/
+h1,
+h2,
+h3,
+h4 {
+  margin: 2em 0;
+  hyphens: none;
+  break-after: avoid;
+}
+
+h1,
+h2 {
+  margin: 2em 0;
+}
+
+h3,
+h4 {
+  margin: 1em 0;
+}
+
+h2 {
+  break-before: right;
+}
+
+h3 {
+  break-before: page;
+}
+
+h2 + section h3 {
+  break-before: auto;
+}
+
+.author {
+  hyphens: none;
+}
+
+/** Body text **/
+p {
+  text-indent: 1.5em;
+  margin-top: 0em;
+  margin-bottom: 0em;
+  hyphens: auto;
+  line-height: 1.45;
+  orphans: 2;
+  widows: 2;
+}
+p:first-of-type {
+  text-indent: 0;
+}
+p:first-of-type::first-letter {
+  font-weight: bold;
+  font-size: 1.8em;
+  line-height: 1;
+  padding-right: 1px;
+}
+
+main > section:last-child::after {
+  break-before: avoid;
+  break-inside: avoid;
+  margin: 2em 0;
+  text-align: center;
+  font-size: 2em;
+  font-weight: bold;
+  font-variant: small-caps;
+  content: '\a✢';
+  white-space: pre;
+  display: block;
+}
+
+pre,
+.pre {
+  font-family: 'Source Code Pro', monaco, monospace;
+  font-size-adjust: none;
+  font-weight: 500;
+  font-size: 0.75em;
+  margin-left: 2em;
+  white-space: pre-line;
+  line-height: 1.45;
+  hyphens: none;
+}
+
+/** Legal Sections **/
+.pre.legal {
+  font-size: xx-small;
+  margin: 0 -1em;
+}
+
+.copyright {
+  break-before: right;
+  break-after: page;
+}
+
+.copyright .legal {
+  padding-top: 10rem;
+}
+
+body > footer {
+  break-before: left;
+}
+
+@font-face {
+  font-family: 'Crimson Text';
+  src: url('https://github.com/vivliostyle/vivliostyle_doc/blob/gh-pages/samples/gutenberg/fonts/Crimson-Roman.ttf?raw=true');
+}
+@font-face {
+  font-family: 'Crimson Text';
+  src: url('https://github.com/vivliostyle/vivliostyle_doc/blob/gh-pages/samples/gutenberg/fonts/Crimson-Semibold.ttf?raw=true');
+  font-weight: bold;
+}
+@font-face {
+  font-family: 'Crimson Text';
+  src: url('https://github.com/vivliostyle/vivliostyle_doc/blob/gh-pages/samples/gutenberg/fonts/Crimson-Italic.ttf?raw=true');
+  font-style: italic;
+}
+:root {
+  font-family: 'Crimson Text', Georgia, serif;
+  font-feature-settings: 'onum', 'swsh';
+}
+
+@page {
+  font-family: 'Crimson Text', Georgia, serif;
+  @top-center {
+    content: 'Alice’s Adventures in Wonderland';
+  }
+}
+.chap-num,
+h1,
+h2 {
+  font-feature-settings: 'smcp';
+  font-variant: small-caps;
+}
+
+header {
+  font-size: 1.3em;
+}
+
+h2 {
+  font-weight: normal;
+}
+
+.chap-num::after {
+  content: '\a';
+  white-space: pre-wrap;
+}
+
+.stars {
+  margin-left: 0;
+  text-align: center;
+  break-inside: avoid;
+}
+
+/*# sourceMappingURL=alice.css.map */
diff --git a/packages/@vivliostyle/theme-gutenberg/alice.css.map b/packages/@vivliostyle/theme-gutenberg/alice.css.map
new file mode 100644
index 0000000..edbff1b
--- /dev/null
+++ b/packages/@vivliostyle/theme-gutenberg/alice.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["scss/theme_common.scss","scss/_font.scss","scss/_page.scss","scss/_variables.scss","scss/_toc.scss","scss/_base.scss","scss/_legal_sections.scss","scss/alice.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;ACAQ;ACAR;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;IACE;;;AAIJ;EACE,WCjBe;EDkBf,aCjBiB;EDkBjB;EAEA;IACE;IACA;;;AAIJ;EACE;IACE;;;AAIJ;EACE;IACE;;;AAIJ;EACE;IACE;;EAEF;IACE;;EAEF;IACE;;;AAIJ;EACE;IACE;;EAEF;IACE;;EAEF;IACE;;;AE3DJ;EACE;;AAEA;EACE;EACA;EACA;EACA,aDFe;;ACKjB;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAMR;EAEI;IACE;;EAIA;IACE;IACA;IACA;IACA;IACA;;;ACrDR;AAEA;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;AAEA;EACE;EACA;EACA;EACA;EACA,aFnCiB;EEoCjB;EACA;;AAEA;EACE;;AAEA;EACE;EACA;EACA;EACA;;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE,aFpEgB;EEqEhB;EACA;EACA;EACA;EACA;EAEA,aFzEiB;EE0EjB;;;AC/EF;AAGA;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AChBF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;IAAc;;;AAGhB;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA","file":"alice.css"}
\ No newline at end of file
diff --git a/packages/@vivliostyle/theme-gutenberg/fang.css b/packages/@vivliostyle/theme-gutenberg/fang.css
new file mode 100644
index 0000000..b82a446
--- /dev/null
+++ b/packages/@vivliostyle/theme-gutenberg/fang.css
@@ -0,0 +1,251 @@
+@charset "UTF-8";
+/*
+  Original version:
+  https://github.com/vivliostyle/vivliostyle_doc/blob/gh-pages/samples/gutenberg/gutenberg.css
+*/
+@import url(https://fonts.googleapis.com/css?family=Source + Code + Pro:500);
+html {
+  max-width: 90ch;
+  margin: auto;
+  font-family: Georgia, serif;
+}
+
+body {
+  margin: 0 2em;
+}
+
+@media (max-width: 400px) {
+  body {
+    margin: 0 1em;
+  }
+}
+@page {
+  font-size: small;
+  font-family: Georgia, serif;
+  margin: 4rem 10%;
+  @top-center {
+    color: gray;
+    font-variant: small-caps;
+  }
+}
+@page :right {
+  @bottom-right {
+    content: counter(page);
+  }
+}
+@page :left {
+  @bottom-left {
+    content: counter(page);
+  }
+}
+@page :first {
+  @bottom-left {
+    content: normal;
+  }
+  @bottom-right {
+    content: normal;
+  }
+  @top-center {
+    content: normal;
+  }
+}
+@page :blank {
+  @bottom-left {
+    content: normal;
+  }
+  @bottom-right {
+    content: normal;
+  }
+  @top-center {
+    content: normal;
+  }
+}
+nav {
+  break-before: right;
+}
+nav ol {
+  list-style: none;
+  counter-reset: chap;
+  padding-left: 0em;
+  line-height: 1.45;
+}
+nav li {
+  break-inside: avoid;
+}
+nav li a {
+  display: inline-flex;
+  width: 100%;
+  text-decoration: none;
+  color: currentColor;
+  break-inside: avoid;
+  align-items: baseline;
+}
+nav li a::before {
+  margin-left: 1px;
+  margin-right: 1px;
+  border-bottom: solid 1px lightgray;
+  content: '';
+  order: 1;
+  flex: auto;
+}
+nav li a::after {
+  text-align: right;
+  content: target-counter(attr(href, url), page);
+  align-self: flex-end;
+  flex: none;
+  order: 2;
+}
+
+@media (min-width: 375px) {
+  nav ol {
+    padding-left: 3em;
+  }
+  nav li::before {
+    counter-increment: chap;
+    content: counter(chap, upper-roman) '.';
+    float: left;
+    width: 3em;
+    margin-left: -3em;
+  }
+}
+/** Titles **/
+h1,
+h2,
+h3,
+h4 {
+  margin: 2em 0;
+  hyphens: none;
+  break-after: avoid;
+}
+
+h1,
+h2 {
+  margin: 2em 0;
+}
+
+h3,
+h4 {
+  margin: 1em 0;
+}
+
+h2 {
+  break-before: right;
+}
+
+h3 {
+  break-before: page;
+}
+
+h2 + section h3 {
+  break-before: auto;
+}
+
+.author {
+  hyphens: none;
+}
+
+/** Body text **/
+p {
+  text-indent: 1.5em;
+  margin-top: 0em;
+  margin-bottom: 0em;
+  hyphens: auto;
+  line-height: 1.45;
+  orphans: 2;
+  widows: 2;
+}
+p:first-of-type {
+  text-indent: 0;
+}
+p:first-of-type::first-letter {
+  font-weight: bold;
+  font-size: 1.8em;
+  line-height: 1;
+  padding-right: 1px;
+}
+
+main > section:last-child::after {
+  break-before: avoid;
+  break-inside: avoid;
+  margin: 2em 0;
+  text-align: center;
+  font-size: 2em;
+  font-weight: bold;
+  font-variant: small-caps;
+  content: '\a✢';
+  white-space: pre;
+  display: block;
+}
+
+pre,
+.pre {
+  font-family: 'Source Code Pro', monaco, monospace;
+  font-size-adjust: none;
+  font-weight: 500;
+  font-size: 0.75em;
+  margin-left: 2em;
+  white-space: pre-line;
+  line-height: 1.45;
+  hyphens: none;
+}
+
+/** Legal Sections **/
+.pre.legal {
+  font-size: xx-small;
+  margin: 0 -1em;
+}
+
+.copyright {
+  break-before: right;
+  break-after: page;
+}
+
+.copyright .legal {
+  padding-top: 10rem;
+}
+
+body > footer {
+  break-before: left;
+}
+
+@font-face {
+  font-family: 'FPL Neu';
+  src: url('https://github.com/vivliostyle/vivliostyle_doc/blob/gh-pages/samples/gutenberg/fonts/fp9r8a.ttf?raw=true');
+}
+@font-face {
+  font-family: 'FPL Neu';
+  src: url('https://github.com/vivliostyle/vivliostyle_doc/blob/gh-pages/samples/gutenberg/fonts/fp9b8a.ttf?raw=true');
+  font-weight: bold;
+}
+@font-face {
+  font-family: 'FPL Neu';
+  src: url('https://github.com/vivliostyle/vivliostyle_doc/blob/gh-pages/samples/gutenberg/fonts/fp9ri8a.ttf?raw=true');
+  font-style: italic;
+}
+@font-face {
+  font-family: 'FPL Neu';
+  src: url('https://github.com/vivliostyle/vivliostyle_doc/blob/gh-pages/samples/gutenberg/fonts/fp9bi8a.ttf?raw=true');
+  font-weight: bold;
+  font-style: italic;
+}
+html {
+  font-family: 'Palatino Linotype', 'FPL Neu', Palatino, Georgia, serif;
+}
+
+@page {
+  font-family: 'Palatino Linotype', 'FPL Neu', Palatino, Georgia, serif;
+  @top-center {
+    content: 'White Fang';
+  }
+}
+h1,
+h2,
+h3 {
+  font-variant: small-caps;
+}
+
+h3 .chap-num::after {
+  content: '—';
+}
+
+/*# sourceMappingURL=fang.css.map */
diff --git a/packages/@vivliostyle/theme-gutenberg/fang.css.map b/packages/@vivliostyle/theme-gutenberg/fang.css.map
new file mode 100644
index 0000000..6fef716
--- /dev/null
+++ b/packages/@vivliostyle/theme-gutenberg/fang.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["scss/theme_common.scss","scss/_font.scss","scss/_page.scss","scss/_variables.scss","scss/_toc.scss","scss/_base.scss","scss/_legal_sections.scss","scss/fang.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;ACAQ;ACAR;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;IACE;;;AAIJ;EACE,WCjBe;EDkBf,aCjBiB;EDkBjB;EAEA;IACE;IACA;;;AAIJ;EACE;IACE;;;AAIJ;EACE;IACE;;;AAIJ;EACE;IACE;;EAEF;IACE;;EAEF;IACE;;;AAIJ;EACE;IACE;;EAEF;IACE;;EAEF;IACE;;;AE3DJ;EACE;;AAEA;EACE;EACA;EACA;EACA,aDFe;;ACKjB;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAMR;EAEI;IACE;;EAIA;IACE;IACA;IACA;IACA;IACA;;;ACrDR;AAEA;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;AAEA;EACE;EACA;EACA;EACA;EACA,aFnCiB;EEoCjB;EACA;;AAEA;EACE;;AAEA;EACE;EACA;EACA;EACA;;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE,aFpEgB;EEqEhB;EACA;EACA;EACA;EACA;EAEA,aFzEiB;EE0EjB;;;AC/EF;AAGA;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AChBF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;;;AAGF;EACE;EACA;IAAc;;;AAGhB;EACE;;;AAGF;EACE","file":"fang.css"}
\ No newline at end of file
diff --git a/packages/@vivliostyle/theme-gutenberg/scss/_base.scss b/packages/@vivliostyle/theme-gutenberg/scss/_base.scss
new file mode 100644
index 0000000..d047c2f
--- /dev/null
+++ b/packages/@vivliostyle/theme-gutenberg/scss/_base.scss
@@ -0,0 +1,86 @@
+/** Titles **/
+
+h1,
+h2,
+h3,
+h4 {
+  margin: 2em 0;
+  hyphens: none;
+  break-after: avoid;
+}
+
+h1,
+h2 {
+  margin: 2em 0;
+}
+
+h3,
+h4 {
+  margin: 1em 0;
+}
+
+h2 {
+  break-before: right;
+}
+
+h3 {
+  break-before: page;
+}
+
+h2 + section h3 {
+  break-before: auto;
+}
+
+.author {
+  hyphens: none;
+}
+
+/** Body text **/
+
+p {
+  text-indent: 1.5em;
+  margin-top: 0em;
+  margin-bottom: 0em;
+  hyphens: auto;
+  line-height: $body-line-height;
+  orphans: 2;
+  widows: 2;
+
+  &:first-of-type {
+    text-indent: 0;
+
+    &::first-letter {
+      font-weight: bold;
+      font-size: 1.8em;
+      line-height: 1;
+      padding-right: 1px;
+    }
+  }
+}
+
+main > section:last-child::after {
+  break-before: avoid;
+  break-inside: avoid;
+  margin: 2em 0;
+  text-align: center;
+  font-size: 2em;
+  font-weight: bold;
+  font-variant: small-caps;
+  content: '\a\002722';
+  white-space: pre;
+  display: block;
+}
+
+// TODO: https://github.com/vivliostyle/vfm/issues/77
+pre,
+.pre {
+  font-family: $pre-font-family;
+  font-size-adjust: none;
+  font-weight: 500;
+  font-size: 0.75em;
+  margin-left: 2em;
+  white-space: pre-line;
+  // white-space: pre-wrap;
+  line-height: $body-line-height;
+  hyphens: none;
+}
diff --git a/packages/@vivliostyle/theme-gutenberg/scss/_font.scss b/packages/@vivliostyle/theme-gutenberg/scss/_font.scss
new file mode 100644
index 0000000..8001f10
--- /dev/null
+++ b/packages/@vivliostyle/theme-gutenberg/scss/_font.scss
@@ -0,0 +1 @@
+@import url(https://fonts.googleapis.com/css?family=Source + Code + Pro:500);
diff --git a/packages/@vivliostyle/theme-gutenberg/scss/_legal_sections.scss b/packages/@vivliostyle/theme-gutenberg/scss/_legal_sections.scss
new file mode 100644
index 0000000..9930724
--- /dev/null
+++ b/packages/@vivliostyle/theme-gutenberg/scss/_legal_sections.scss
@@ -0,0 +1,20 @@
+/** Legal Sections **/
+
+// TODO: https://github.com/vivliostyle/vfm/issues/77
+.pre.legal {
+  font-size: xx-small;
+  margin: 0 -1em;
+}
+
+.copyright {
+  break-before: right;
+  break-after: page;
+}
+
+.copyright .legal {
+  padding-top: 10rem;
+}
+
+body > footer {
+  break-before: left;
+}
diff --git a/packages/@vivliostyle/theme-gutenberg/scss/_page.scss b/packages/@vivliostyle/theme-gutenberg/scss/_page.scss
new file mode 100644
index 0000000..ca21d14
--- /dev/null
+++ b/packages/@vivliostyle/theme-gutenberg/scss/_page.scss
@@ -0,0 +1,62 @@
+html {
+  max-width: 90ch;
+  margin: auto;
+  font-family: Georgia, serif;
+}
+
+body {
+  margin: 0 2em;
+}
+
+@media (max-width: 400px) {
+  body {
+    margin: 0 1em;
+  }
+}
+
+@page {
+  font-size: $body-font-size;
+  font-family: $body-font-family;
+  margin: 4rem 10%;
+
+  @top-center {
+    color: gray;
+    font-variant: small-caps;
+  }
+}
+
+@page :right {
+  @bottom-right {
+    content: counter(page);
+  }
+}
+
+@page :left {
+  @bottom-left {
+    content: counter(page);
+  }
+}
+
+@page :first {
+  @bottom-left {
+    content: normal;
+  }
+  @bottom-right {
+    content: normal;
+  }
+  @top-center {
+    content: normal;
+  }
+}
+
+@page :blank {
+  @bottom-left {
+    content: normal;
+  }
+  @bottom-right {
+    content: normal;
+  }
+  @top-center {
+    content: normal;
+  }
+}
diff --git a/packages/@vivliostyle/theme-gutenberg/scss/_toc.scss b/packages/@vivliostyle/theme-gutenberg/scss/_toc.scss
new file mode 100644
index 0000000..62174f4
--- /dev/null
+++ b/packages/@vivliostyle/theme-gutenberg/scss/_toc.scss
@@ -0,0 +1,58 @@
+nav {
+  break-before: right;
+
+  ol {
+    list-style: none;
+    counter-reset: chap;
+    padding-left: 0em;
+    line-height: $body-line-height;
+  }
+
+  li {
+    break-inside: avoid;
+
+    a {
+      display: inline-flex;
+      width: 100%;
+      text-decoration: none;
+      color: currentColor;
+      break-inside: avoid;
+      align-items: baseline;
+
+      &::before {
+        margin-left: 1px;
+        margin-right: 1px;
+        border-bottom: solid 1px lightgray;
+        content: '';
+        order: 1;
+        flex: auto;
+      }
+
+      &::after {
+        text-align: right;
+        content: target-counter(attr(href, url), page);
+        align-self: flex-end;
+        flex: none;
+        order: 2;
+      }
+    }
+  }
+}
+
+@media (min-width: 375px) {
+  nav {
+    ol {
+      padding-left: 3em;
+    }
+
+    li {
+      &::before {
+        counter-increment: chap;
+        content: counter(chap, upper-roman) '.';
+        float: left;
+        width: 3em;
+        margin-left: -3em;
+      }
+    }
+  }
+}
diff --git a/packages/@vivliostyle/theme-gutenberg/scss/_variables.scss b/packages/@vivliostyle/theme-gutenberg/scss/_variables.scss
new file mode 100644
index 0000000..476aed0
--- /dev/null
+++ b/packages/@vivliostyle/theme-gutenberg/scss/_variables.scss
@@ -0,0 +1,6 @@
+$body-font-size: small;
+$body-font-family: Georgia, serif;
+
+$pre-font-family: 'Source Code Pro', monaco, monospace;
+
+$body-line-height: 1.45;
diff --git a/packages/@vivliostyle/theme-gutenberg/scss/alice.scss b/packages/@vivliostyle/theme-gutenberg/scss/alice.scss
new file mode 100644
index 0000000..bb23fe3
--- /dev/null
+++ b/packages/@vivliostyle/theme-gutenberg/scss/alice.scss
@@ -0,0 +1,56 @@
+@import 'theme_common';
+
+@font-face {
+  font-family: 'Crimson Text';
+  src: url('https://github.com/vivliostyle/vivliostyle_doc/blob/gh-pages/samples/gutenberg/fonts/Crimson-Roman.ttf?raw=true');
+}
+
+@font-face {
+  font-family: 'Crimson Text';
+  src: url('https://github.com/vivliostyle/vivliostyle_doc/blob/gh-pages/samples/gutenberg/fonts/Crimson-Semibold.ttf?raw=true');
+  font-weight: bold;
+}
+
+@font-face {
+  font-family: 'Crimson Text';
+  src: url('https://github.com/vivliostyle/vivliostyle_doc/blob/gh-pages/samples/gutenberg/fonts/Crimson-Italic.ttf?raw=true');
+  font-style: italic;
+}
+
+:root {
+  font-family: 'Crimson Text', Georgia, serif;
+  font-feature-settings: 'onum', 'swsh';
+}
+
+@page {
+  font-family: 'Crimson Text', Georgia, serif;
+  @top-center {
+    content: 'Alice’s Adventures in Wonderland';
+  }
+}
+
+.chap-num,
+h1,
+h2 {
+  font-feature-settings: 'smcp';
+  font-variant: small-caps;
+}
+
+header {
+  font-size: 1.3em;
+}
+
+h2 {
+  font-weight: normal;
+}
+
+.chap-num::after {
+  content: '\a';
+  white-space: pre-wrap;
+}
+
+.stars {
+  margin-left: 0;
+  text-align: center;
+  break-inside: avoid;
+}
diff --git a/packages/@vivliostyle/theme-gutenberg/scss/fang.scss b/packages/@vivliostyle/theme-gutenberg/scss/fang.scss
new file mode 100644
index 0000000..431d420
--- /dev/null
+++ b/packages/@vivliostyle/theme-gutenberg/scss/fang.scss
@@ -0,0 +1,46 @@
+@import 'theme_common';
+
+@font-face {
+  font-family: 'FPL Neu';
+  src: url('https://github.com/vivliostyle/vivliostyle_doc/blob/gh-pages/samples/gutenberg/fonts/fp9r8a.ttf?raw=true');
+}
+
+@font-face {
+  font-family: 'FPL Neu';
+  src: url('https://github.com/vivliostyle/vivliostyle_doc/blob/gh-pages/samples/gutenberg/fonts/fp9b8a.ttf?raw=true');
+  font-weight: bold;
+}
+
+@font-face {
+  font-family: 'FPL Neu';
+  src: url('https://github.com/vivliostyle/vivliostyle_doc/blob/gh-pages/samples/gutenberg/fonts/fp9ri8a.ttf?raw=true');
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'FPL Neu';
+  src: url('https://github.com/vivliostyle/vivliostyle_doc/blob/gh-pages/samples/gutenberg/fonts/fp9bi8a.ttf?raw=true');
+  font-weight: bold;
+  font-style: italic;
+}
+
+html {
+  font-family: 'Palatino Linotype', 'FPL Neu', Palatino, Georgia, serif;
+}
+
+@page {
+  font-family: 'Palatino Linotype', 'FPL Neu', Palatino, Georgia, serif;
+  @top-center {
+    content: 'White Fang';
+  }
+}
+
+h1,
+h2,
+h3 {
+  font-variant: small-caps;
+}
+
+h3 .chap-num::after {
+  content: '—';
+}
diff --git a/packages/@vivliostyle/theme-gutenberg/scss/sherlock.scss b/packages/@vivliostyle/theme-gutenberg/scss/sherlock.scss
new file mode 100644
index 0000000..7696c7a
--- /dev/null
+++ b/packages/@vivliostyle/theme-gutenberg/scss/sherlock.scss
@@ -0,0 +1,172 @@
+@import 'theme_common';
+
+@font-face {
+  font-family: 'Quattrocento';
+  src: url('https://github.com/vivliostyle/vivliostyle_doc/blob/gh-pages/samples/gutenberg/fonts/Quattrocento-Regular.ttf?raw=true');
+}
+
+@font-face {
+  font-family: 'Libre Baskerville';
+  src: url('https://github.com/vivliostyle/vivliostyle_doc/blob/gh-pages/samples/gutenberg/fonts/LibreBaskerville-Regular.ttf?raw=true');
+}
+
+@font-face {
+  font-family: 'Libre Baskerville';
+  src: url('https://github.com/vivliostyle/vivliostyle_doc/blob/gh-pages/samples/gutenberg/fonts/LibreBaskerville-Bold.ttf?raw=true');
+  font-weight: bold;
+}
+
+@font-face {
+  font-family: 'Libre Baskerville';
+  src: url('https://github.com/vivliostyle/vivliostyle_doc/blob/gh-pages/samples/gutenberg/fonts/LibreBaskerville-Italic.ttf?raw=true');
+  font-style: italic;
+}
+
+:root {
+  font-family: baskerville, 'Libre Baskerville', Georgia, serif;
+  font-size-adjust: 0.42;
+}
+
+@page {
+  font-size: small;
+  font-family: 'Quattrocento', baskerville, 'Libre Baskerville', Georgia, serif;
+  letter-spacing: 0.1em;
+
+  @top-center {
+    content: 'The Adventures of Sherlock Holmes';
+  }
+}
+
+header {
+  font-family: 'Quattrocento', baskerville, 'Libre Baskerville', Georgia, serif;
+  font-size-adjust: none;
+  font-size: 1.2em;
+  letter-spacing: 0.3em;
+  text-transform: uppercase;
+  text-align: center;
+  color: #333;
+  margin: -1rem;
+
+  > * {
+    font-weight: normal;
+    margin: 1.7em 0;
+    break-inside: avoid;
+  }
+
+  h1 {
+    break-after: auto;
+    span {
+      display: inline-block;
+    }
+  }
+
+  div {
+    break-before: auto;
+    font-size: 1.2em;
+  }
+
+  .author {
+    break-before: avoid;
+    font-size: 1.5em;
+  }
+}
+
+@media (max-width: 400px) {
+  header {
+    font-size: 1.1em;
+    letter-spacing: 0.2em;
+
+    > * {
+      margin: 1.5em 0;
+    }
+
+    h1 {
+      font-size: 1.8em;
+    }
+  }
+}
+
+@media (max-width: 350px) {
+  header {
+    font-size: 1em;
+    letter-spacing: 0.1em;
+    > * {
+      margin: 1em 0;
+    }
+  }
+}
+
+h2,
+h3 {
+  font-family: 'Quattrocento', baskerville, 'Libre Baskerville', Georgia, serif;
+  letter-spacing: 0.05em;
+  font-size-adjust: none;
+  text-transform: uppercase;
+  text-align: center;
+  margin: 2em 0;
+  font-weight: normal;
+}
+
+h2 {
+  font-size: 1.2em;
+}
+
+h3 {
+  font-size: 1em;
+}
+
+.chap-num {
+  display: inline-block;
+  margin-right: 1ch;
+}
+
+p:first-of-type::first-letter {
+  font-weight: normal;
+}
+
+.sign {
+  break-before: avoid;
+  margin: 1em 1em 2em auto;
+}
+
+.to {
+  break-after: avoid;
+  margin: 2em 1em -1em auto;
+}
+
+.sign,
+.to {
+  display: table;
+  width: max-content;
+  text-align: center;
+  white-space: pre-wrap;
+  break-inside: avoid;
+  line-height: inherit;
+}
+
+blockquote {
+  margin: 2em 1em 1em 2em;
+
+  p:first-of-type {
+    &::first-letter {
+      font-size: 1em;
+      padding-right: 0;
+      font-weight: normal;
+    }
+
+    &:before {
+      content: '“';
+      font-weight: bold;
+      float: left;
+      font-size: 3em;
+      margin-left: -1.5ch;
+      line-height: 1;
+    }
+  }
+}
+
+@media (max-width: 27em) {
+  .adventure {
+    display: none;
+  }
+}
diff --git a/packages/@vivliostyle/theme-gutenberg/scss/theme_common.scss b/packages/@vivliostyle/theme-gutenberg/scss/theme_common.scss
new file mode 100644
index 0000000..70e7688
--- /dev/null
+++ b/packages/@vivliostyle/theme-gutenberg/scss/theme_common.scss
@@ -0,0 +1,11 @@
+/*
+  Original version:
+  https://github.com/vivliostyle/vivliostyle_doc/blob/gh-pages/samples/gutenberg/gutenberg.css
+*/
+
+@import '_variables';
+@import '_font';
+@import '_page';
+@import '_toc';
+@import '_base';
+@import '_legal_sections';
diff --git a/packages/@vivliostyle/theme-gutenberg/scss/theme_print.scss b/packages/@vivliostyle/theme-gutenberg/scss/theme_print.scss
new file mode 100644
index 0000000..4ef6602
--- /dev/null
+++ b/packages/@vivliostyle/theme-gutenberg/scss/theme_print.scss
@@ -0,0 +1,20 @@
+/*
+ * For PDF publications or Vivliostyle Viewer:
+ * load this style in PDF publicatoins (format: pdf)
+ */
+
+/* common styles */
+@import 'theme_common';
+
+@page {
+  /* show bleeds */
+  marks: crop cross;
+  bleed: 3mm;
+
+  /* if you open the publication on Vivliostyle Viewer, this message will be shown */
+  @top-left {
+    content: 'theme_print';
+  }
+}
+
+/* and more... 🖋 */
diff --git a/packages/@vivliostyle/theme-gutenberg/scss/theme_screen.scss b/packages/@vivliostyle/theme-gutenberg/scss/theme_screen.scss
new file mode 100644
index 0000000..03966c0
--- /dev/null
+++ b/packages/@vivliostyle/theme-gutenberg/scss/theme_screen.scss
@@ -0,0 +1,33 @@
+/*
+ * For browser viewing:
+ * load this style in Web publications (format: webpub)
+ */
+
+/* common styles */
+@import 'theme_common';
+
+@page {
+  /* if you open the publication on Vivliostyle Viewer, this message will be shown */
+  @top-left {
+    content: 'theme_screen';
+  }
+}
+
+/* for wide screen */
+body {
+  max-width: 800px;
+  margin: auto 2rem 2rem;
+}
+
+/* highlight footnote */
+.footnote {
+  vertical-align: super;
+  background-color: aliceblue;
+  color: gray;
+
+  a {
+    word-break: break-all;
+  }
+}
+
+/* and more... 🖋 */
diff --git a/packages/@vivliostyle/theme-gutenberg/sherlock.css b/packages/@vivliostyle/theme-gutenberg/sherlock.css
new file mode 100644
index 0000000..370e1aa
--- /dev/null
+++ b/packages/@vivliostyle/theme-gutenberg/sherlock.css
@@ -0,0 +1,364 @@
+@charset "UTF-8";
+/*
+  Original version:
+  https://github.com/vivliostyle/vivliostyle_doc/blob/gh-pages/samples/gutenberg/gutenberg.css
+*/
+@import url(https://fonts.googleapis.com/css?family=Source + Code + Pro:500);
+html {
+  max-width: 90ch;
+  margin: auto;
+  font-family: Georgia, serif;
+}
+
+body {
+  margin: 0 2em;
+}
+
+@media (max-width: 400px) {
+  body {
+    margin: 0 1em;
+  }
+}
+@page {
+  font-size: small;
+  font-family: Georgia, serif;
+  margin: 4rem 10%;
+  @top-center {
+    color: gray;
+    font-variant: small-caps;
+  }
+}
+@page :right {
+  @bottom-right {
+    content: counter(page);
+  }
+}
+@page :left {
+  @bottom-left {
+    content: counter(page);
+  }
+}
+@page :first {
+  @bottom-left {
+    content: normal;
+  }
+  @bottom-right {
+    content: normal;
+  }
+  @top-center {
+    content: normal;
+  }
+}
+@page :blank {
+  @bottom-left {
+    content: normal;
+  }
+  @bottom-right {
+    content: normal;
+  }
+  @top-center {
+    content: normal;
+  }
+}
+nav {
+  break-before: right;
+}
+nav ol {
+  list-style: none;
+  counter-reset: chap;
+  padding-left: 0em;
+  line-height: 1.45;
+}
+nav li {
+  break-inside: avoid;
+}
+nav li a {
+  display: inline-flex;
+  width: 100%;
+  text-decoration: none;
+  color: currentColor;
+  break-inside: avoid;
+  align-items: baseline;
+}
+nav li a::before {
+  margin-left: 1px;
+  margin-right: 1px;
+  border-bottom: solid 1px lightgray;
+  content: '';
+  order: 1;
+  flex: auto;
+}
+nav li a::after {
+  text-align: right;
+  content: target-counter(attr(href, url), page);
+  align-self: flex-end;
+  flex: none;
+  order: 2;
+}
+
+@media (min-width: 375px) {
+  nav ol {
+    padding-left: 3em;
+  }
+  nav li::before {
+    counter-increment: chap;
+    content: counter(chap, upper-roman) '.';
+    float: left;
+    width: 3em;
+    margin-left: -3em;
+  }
+}
+/** Titles **/
+h1,
+h2,
+h3,
+h4 {
+  margin: 2em 0;
+  hyphens: none;
+  break-after: avoid;
+}
+
+h1,
+h2 {
+  margin: 2em 0;
+}
+
+h3,
+h4 {
+  margin: 1em 0;
+}
+
+h2 {
+  break-before: right;
+}
+
+h3 {
+  break-before: page;
+}
+
+h2 + section h3 {
+  break-before: auto;
+}
+
+.author {
+  hyphens: none;
+}
+
+/** Body text **/
+p {
+  text-indent: 1.5em;
+  margin-top: 0em;
+  margin-bottom: 0em;
+  hyphens: auto;
+  line-height: 1.45;
+  orphans: 2;
+  widows: 2;
+}
+p:first-of-type {
+  text-indent: 0;
+}
+p:first-of-type::first-letter {
+  font-weight: bold;
+  font-size: 1.8em;
+  line-height: 1;
+  padding-right: 1px;
+}
+
+main > section:last-child::after {
+  break-before: avoid;
+  break-inside: avoid;
+  margin: 2em 0;
+  text-align: center;
+  font-size: 2em;
+  font-weight: bold;
+  font-variant: small-caps;
+  content: '\a✢';
+  white-space: pre;
+  display: block;
+}
+
+pre,
+.pre {
+  font-family: 'Source Code Pro', monaco, monospace;
+  font-size-adjust: none;
+  font-weight: 500;
+  font-size: 0.75em;
+  margin-left: 2em;
+  white-space: pre-line;
+  line-height: 1.45;
+  hyphens: none;
+}
+
+/** Legal Sections **/
+.pre.legal {
+  font-size: xx-small;
+  margin: 0 -1em;
+}
+
+.copyright {
+  break-before: right;
+  break-after: page;
+}
+
+.copyright .legal {
+  padding-top: 10rem;
+}
+
+body > footer {
+  break-before: left;
+}
+
+@font-face {
+  font-family: 'Quattrocento';
+  src: url('https://github.com/vivliostyle/vivliostyle_doc/blob/gh-pages/samples/gutenberg/fonts/Quattrocento-Regular.ttf?raw=true');
+}
+@font-face {
+  font-family: 'Libre Baskerville';
+  src: url('https://github.com/vivliostyle/vivliostyle_doc/blob/gh-pages/samples/gutenberg/fonts/LibreBaskerville-Regular.ttf?raw=true');
+}
+@font-face {
+  font-family: 'Libre Baskerville';
+  src: url('https://github.com/vivliostyle/vivliostyle_doc/blob/gh-pages/samples/gutenberg/fonts/LibreBaskerville-Bold.ttf?raw=true');
+  font-weight: bold;
+}
+@font-face {
+  font-family: 'Libre Baskerville';
+  src: url('https://github.com/vivliostyle/vivliostyle_doc/blob/gh-pages/samples/gutenberg/fonts/LibreBaskerville-Italic.ttf?raw=true');
+  font-style: italic;
+}
+:root {
+  font-family: baskerville, 'Libre Baskerville', Georgia, serif;
+  font-size-adjust: 0.42;
+}
+
+@page {
+  font-size: small;
+  font-family: 'Quattrocento', baskerville, 'Libre Baskerville', Georgia, serif;
+  letter-spacing: 0.1em;
+  @top-center {
+    content: 'The Adventures of Sherlock Holmes';
+  }
+}
+header {
+  font-family: 'Quattrocento', baskerville, 'Libre Baskerville', Georgia, serif;
+  font-size-adjust: none;
+  font-size: 1.2em;
+  letter-spacing: 0.3em;
+  text-transform: uppercase;
+  text-align: center;
+  color: #333;
+  margin: -1rem;
+}
+header > * {
+  font-weight: normal;
+  margin: 1.7em 0;
+  break-inside: avoid;
+}
+header h1 {
+  break-after: auto;
+}
+header h1 span {
+  display: inline-block;
+}
+header div {
+  break-before: auto;
+  font-size: 1.2em;
+}
+header .author {
+  break-before: avoid;
+  font-size: 1.5em;
+}
+
+@media (max-width: 400px) {
+  header {
+    font-size: 1.1em;
+    letter-spacing: 0.2em;
+  }
+  header > * {
+    margin: 1.5em 0;
+  }
+  header h1 {
+    font-size: 1.8em;
+  }
+}
+@media (max-width: 350px) {
+  header {
+    font-size: 1em;
+    letter-spacing: 0.1em;
+  }
+  header > * {
+    margin: 1em 0;
+  }
+}
+h2,
+h3 {
+  font-family: 'Quattrocento', baskerville, 'Libre Baskerville', Georgia, serif;
+  letter-spacing: 0.05em;
+  font-size-adjust: none;
+  text-transform: uppercase;
+  text-align: center;
+  margin: 2em 0;
+  font-weight: normal;
+}
+
+h2 {
+  font-size: 1.2em;
+}
+
+h3 {
+  font-size: 1em;
+}
+
+.chap-num {
+  display: inline-block;
+  margin-right: 1ch;
+}
+
+p:first-of-type::first-letter {
+  font-weight: normal;
+}
+
+.sign {
+  break-before: avoid;
+  margin: 1em 1em 2em auto;
+}
+
+.to {
+  break-after: avoid;
+  margin: 2em 1em -1em auto;
+}
+
+.sign,
+.to {
+  display: table;
+  width: max-content;
+  text-align: center;
+  white-space: pre-wrap;
+  break-inside: avoid;
+  line-height: inherit;
+}
+
+blockquote {
+  margin: 2em 1em 1em 2em;
+}
+blockquote p:first-of-type::first-letter {
+  font-size: 1em;
+  padding-right: 0;
+  font-weight: normal;
+}
+blockquote p:first-of-type:before {
+  content: '“';
+  font-weight: bold;
+  float: left;
+  font-size: 3em;
+  margin-left: -1.5ch;
+  line-height: 1;
+}
+
+@media (max-width: 27em) {
+  .adventure {
+    display: none;
+  }
+}
+
+/*# sourceMappingURL=sherlock.css.map */
diff --git a/packages/@vivliostyle/theme-gutenberg/sherlock.css.map b/packages/@vivliostyle/theme-gutenberg/sherlock.css.map
new file mode 100644
index 0000000..811f3de
--- /dev/null
+++ b/packages/@vivliostyle/theme-gutenberg/sherlock.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["scss/theme_common.scss","scss/_font.scss","scss/_page.scss","scss/_variables.scss","scss/_toc.scss","scss/_base.scss","scss/_legal_sections.scss","scss/sherlock.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;ACAQ;ACAR;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;IACE;;;AAIJ;EACE,WCjBe;EDkBf,aCjBiB;EDkBjB;EAEA;IACE;IACA;;;AAIJ;EACE;IACE;;;AAIJ;EACE;IACE;;;AAIJ;EACE;IACE;;EAEF;IACE;;EAEF;IACE;;;AAIJ;EACE;IACE;;EAEF;IACE;;EAEF;IACE;;;AE3DJ;EACE;;AAEA;EACE;EACA;EACA;EACA,aDFe;;ACKjB;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAMR;EAEI;IACE;;EAIA;IACE;IACA;IACA;IACA;IACA;;;ACrDR;AAEA;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;AAEA;EACE;EACA;EACA;EACA;EACA,aFnCiB;EEoCjB;EACA;;AAEA;EACE;;AAEA;EACE;EACA;EACA;EACA;;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE,aFpEgB;EEqEhB;EACA;EACA;EACA;EACA;EAEA,aFzEiB;EE0EjB;;;AC/EF;AAGA;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AChBF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EAEA;IAAc;;;AAGhB;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;;AACA;EACE;;AAIJ;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;IACE;IACA;;EAEA;IACE;;EAGF;IACE;;;AAKN;EACE;IACE;IACA;;EACA;IACE;;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;AAGE;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAKN;EACE;IACE","file":"sherlock.css"}
\ No newline at end of file
diff --git a/packages/@vivliostyle/theme-gutenberg/theme_common.css b/packages/@vivliostyle/theme-gutenberg/theme_common.css
new file mode 100644
index 0000000..91c307a
--- /dev/null
+++ b/packages/@vivliostyle/theme-gutenberg/theme_common.css
@@ -0,0 +1,211 @@
+@charset "UTF-8";
+/*
+  Original version:
+  https://github.com/vivliostyle/vivliostyle_doc/blob/gh-pages/samples/gutenberg/gutenberg.css
+*/
+@import url(https://fonts.googleapis.com/css?family=Source + Code + Pro:500);
+html {
+  max-width: 90ch;
+  margin: auto;
+  font-family: Georgia, serif;
+}
+
+body {
+  margin: 0 2em;
+}
+
+@media (max-width: 400px) {
+  body {
+    margin: 0 1em;
+  }
+}
+@page {
+  font-size: small;
+  font-family: Georgia, serif;
+  margin: 4rem 10%;
+  @top-center {
+    color: gray;
+    font-variant: small-caps;
+  }
+}
+@page :right {
+  @bottom-right {
+    content: counter(page);
+  }
+}
+@page :left {
+  @bottom-left {
+    content: counter(page);
+  }
+}
+@page :first {
+  @bottom-left {
+    content: normal;
+  }
+  @bottom-right {
+    content: normal;
+  }
+  @top-center {
+    content: normal;
+  }
+}
+@page :blank {
+  @bottom-left {
+    content: normal;
+  }
+  @bottom-right {
+    content: normal;
+  }
+  @top-center {
+    content: normal;
+  }
+}
+nav {
+  break-before: right;
+}
+nav ol {
+  list-style: none;
+  counter-reset: chap;
+  padding-left: 0em;
+  line-height: 1.45;
+}
+nav li {
+  break-inside: avoid;
+}
+nav li a {
+  display: inline-flex;
+  width: 100%;
+  text-decoration: none;
+  color: currentColor;
+  break-inside: avoid;
+  align-items: baseline;
+}
+nav li a::before {
+  margin-left: 1px;
+  margin-right: 1px;
+  border-bottom: solid 1px lightgray;
+  content: '';
+  order: 1;
+  flex: auto;
+}
+nav li a::after {
+  text-align: right;
+  content: target-counter(attr(href, url), page);
+  align-self: flex-end;
+  flex: none;
+  order: 2;
+}
+
+@media (min-width: 375px) {
+  nav ol {
+    padding-left: 3em;
+  }
+  nav li::before {
+    counter-increment: chap;
+    content: counter(chap, upper-roman) '.';
+    float: left;
+    width: 3em;
+    margin-left: -3em;
+  }
+}
+/** Titles **/
+h1,
+h2,
+h3,
+h4 {
+  margin: 2em 0;
+  hyphens: none;
+  break-after: avoid;
+}
+
+h1,
+h2 {
+  margin: 2em 0;
+}
+
+h3,
+h4 {
+  margin: 1em 0;
+}
+
+h2 {
+  break-before: right;
+}
+
+h3 {
+  break-before: page;
+}
+
+h2 + section h3 {
+  break-before: auto;
+}
+
+.author {
+  hyphens: none;
+}
+
+/** Body text **/
+p {
+  text-indent: 1.5em;
+  margin-top: 0em;
+  margin-bottom: 0em;
+  hyphens: auto;
+  line-height: 1.45;
+  orphans: 2;
+  widows: 2;
+}
+p:first-of-type {
+  text-indent: 0;
+}
+p:first-of-type::first-letter {
+  font-weight: bold;
+  font-size: 1.8em;
+  line-height: 1;
+  padding-right: 1px;
+}
+
+main > section:last-child::after {
+  break-before: avoid;
+  break-inside: avoid;
+  margin: 2em 0;
+  text-align: center;
+  font-size: 2em;
+  font-weight: bold;
+  font-variant: small-caps;
+  content: '\a✢';
+  white-space: pre;
+  display: block;
+}
+
+pre,
+.pre {
+  font-family: 'Source Code Pro', monaco, monospace;
+  font-size-adjust: none;
+  font-weight: 500;
+  font-size: 0.75em;
+  margin-left: 2em;
+  white-space: pre-line;
+  line-height: 1.45;
+  hyphens: none;
+}
+
+/** Legal Sections **/
+.pre.legal {
+  font-size: xx-small;
+  margin: 0 -1em;
+}
+
+.copyright {
+  break-before: right;
+  break-after: page;
+}
+
+.copyright .legal {
+  padding-top: 10rem;
+}
+
+body > footer {
+  break-before: left;
+}
+
+/*# sourceMappingURL=theme_common.css.map */
diff --git a/packages/@vivliostyle/theme-gutenberg/theme_common.css.map b/packages/@vivliostyle/theme-gutenberg/theme_common.css.map
new file mode 100644
index 0000000..3aa93c8
--- /dev/null
+++ b/packages/@vivliostyle/theme-gutenberg/theme_common.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["scss/theme_common.scss","scss/_font.scss","scss/_page.scss","scss/_variables.scss","scss/_toc.scss","scss/_base.scss","scss/_legal_sections.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;ACAQ;ACAR;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;IACE;;;AAIJ;EACE,WCjBe;EDkBf,aCjBiB;EDkBjB;EAEA;IACE;IACA;;;AAIJ;EACE;IACE;;;AAIJ;EACE;IACE;;;AAIJ;EACE;IACE;;EAEF;IACE;;EAEF;IACE;;;AAIJ;EACE;IACE;;EAEF;IACE;;EAEF;IACE;;;AE3DJ;EACE;;AAEA;EACE;EACA;EACA;EACA,aDFe;;ACKjB;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAMR;EAEI;IACE;;EAIA;IACE;IACA;IACA;IACA;IACA;;;ACrDR;AAEA;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;AAEA;EACE;EACA;EACA;EACA;EACA,aFnCiB;EEoCjB;EACA;;AAEA;EACE;;AAEA;EACE;EACA;EACA;EACA;;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE,aFpEgB;EEqEhB;EACA;EACA;EACA;EACA;EAEA,aFzEiB;EE0EjB;;;AC/EF;AAGA;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE","file":"theme_common.css"}
\ No newline at end of file
diff --git a/packages/@vivliostyle/theme-gutenberg/theme_print.css b/packages/@vivliostyle/theme-gutenberg/theme_print.css
new file mode 100644
index 0000000..6326a28
--- /dev/null
+++ b/packages/@vivliostyle/theme-gutenberg/theme_print.css
@@ -0,0 +1,227 @@
+@charset "UTF-8";
+/*
+ * For PDF publications or Vivliostyle Viewer:
+ * load this style in PDF publicatoins (format: pdf)
+ */
+/* common styles */
+/*
+  Original version:
+  https://github.com/vivliostyle/vivliostyle_doc/blob/gh-pages/samples/gutenberg/gutenberg.css
+*/
+@import url(https://fonts.googleapis.com/css?family=Source + Code + Pro:500);
+html {
+  max-width: 90ch;
+  margin: auto;
+  font-family: Georgia, serif;
+}
+
+body {
+  margin: 0 2em;
+}
+
+@media (max-width: 400px) {
+  body {
+    margin: 0 1em;
+  }
+}
+@page {
+  font-size: small;
+  font-family: Georgia, serif;
+  margin: 4rem 10%;
+  @top-center {
+    color: gray;
+    font-variant: small-caps;
+  }
+}
+@page :right {
+  @bottom-right {
+    content: counter(page);
+  }
+}
+@page :left {
+  @bottom-left {
+    content: counter(page);
+  }
+}
+@page :first {
+  @bottom-left {
+    content: normal;
+  }
+  @bottom-right {
+    content: normal;
+  }
+  @top-center {
+    content: normal;
+  }
+}
+@page :blank {
+  @bottom-left {
+    content: normal;
+  }
+  @bottom-right {
+    content: normal;
+  }
+  @top-center {
+    content: normal;
+  }
+}
+nav {
+  break-before: right;
+}
+nav ol {
+  list-style: none;
+  counter-reset: chap;
+  padding-left: 0em;
+  line-height: 1.45;
+}
+nav li {
+  break-inside: avoid;
+}
+nav li a {
+  display: inline-flex;
+  width: 100%;
+  text-decoration: none;
+  color: currentColor;
+  break-inside: avoid;
+  align-items: baseline;
+}
+nav li a::before {
+  margin-left: 1px;
+  margin-right: 1px;
+  border-bottom: solid 1px lightgray;
+  content: '';
+  order: 1;
+  flex: auto;
+}
+nav li a::after {
+  text-align: right;
+  content: target-counter(attr(href, url), page);
+  align-self: flex-end;
+  flex: none;
+  order: 2;
+}
+
+@media (min-width: 375px) {
+  nav ol {
+    padding-left: 3em;
+  }
+  nav li::before {
+    counter-increment: chap;
+    content: counter(chap, upper-roman) '.';
+    float: left;
+    width: 3em;
+    margin-left: -3em;
+  }
+}
+/** Titles **/
+h1,
+h2,
+h3,
+h4 {
+  margin: 2em 0;
+  hyphens: none;
+  break-after: avoid;
+}
+
+h1,
+h2 {
+  margin: 2em 0;
+}
+
+h3,
+h4 {
+  margin: 1em 0;
+}
+
+h2 {
+  break-before: right;
+}
+
+h3 {
+  break-before: page;
+}
+
+h2 + section h3 {
+  break-before: auto;
+}
+
+.author {
+  hyphens: none;
+}
+
+/** Body text **/
+p {
+  text-indent: 1.5em;
+  margin-top: 0em;
+  margin-bottom: 0em;
+  hyphens: auto;
+  line-height: 1.45;
+  orphans: 2;
+  widows: 2;
+}
+p:first-of-type {
+  text-indent: 0;
+}
+p:first-of-type::first-letter {
+  font-weight: bold;
+  font-size: 1.8em;
+  line-height: 1;
+  padding-right: 1px;
+}
+
+main > section:last-child::after {
+  break-before: avoid;
+  break-inside: avoid;
+  margin: 2em 0;
+  text-align: center;
+  font-size: 2em;
+  font-weight: bold;
+  font-variant: small-caps;
+  content: '\a✢';
+  white-space: pre;
+  display: block;
+}
+
+pre,
+.pre {
+  font-family: 'Source Code Pro', monaco, monospace;
+  font-size-adjust: none;
+  font-weight: 500;
+  font-size: 0.75em;
+  margin-left: 2em;
+  white-space: pre-line;
+  line-height: 1.45;
+  hyphens: none;
+}
+
+/** Legal Sections **/
+.pre.legal {
+  font-size: xx-small;
+  margin: 0 -1em;
+}
+
+.copyright {
+  break-before: right;
+  break-after: page;
+}
+
+.copyright .legal {
+  padding-top: 10rem;
+}
+
+body > footer {
+  break-before: left;
+}
+
+@page {
+  /* show bleeds */
+  marks: crop cross;
+  bleed: 3mm;
+  /* if you open the publication on Vivliostyle Viewer, this message will be shown */
+  @top-left {
+    content: 'theme_print';
+  }
+}
+/* and more... 🖋 */
+
+/*# sourceMappingURL=theme_print.css.map */
diff --git a/packages/@vivliostyle/theme-gutenberg/theme_print.css.map b/packages/@vivliostyle/theme-gutenberg/theme_print.css.map
new file mode 100644
index 0000000..3a5fce4
--- /dev/null
+++ b/packages/@vivliostyle/theme-gutenberg/theme_print.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["scss/theme_print.scss","scss/theme_common.scss","scss/_font.scss","scss/_page.scss","scss/_variables.scss","scss/_toc.scss","scss/_base.scss","scss/_legal_sections.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAKA;ACLA;AAAA;AAAA;AAAA;ACAQ;ACAR;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;IACE;;;AAIJ;EACE,WCjBe;EDkBf,aCjBiB;EDkBjB;EAEA;IACE;IACA;;;AAIJ;EACE;IACE;;;AAIJ;EACE;IACE;;;AAIJ;EACE;IACE;;EAEF;IACE;;EAEF;IACE;;;AAIJ;EACE;IACE;;EAEF;IACE;;EAEF;IACE;;;AE3DJ;EACE;;AAEA;EACE;EACA;EACA;EACA,aDFe;;ACKjB;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAMR;EAEI;IACE;;EAIA;IACE;IACA;IACA;IACA;IACA;;;ACrDR;AAEA;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;AAEA;EACE;EACA;EACA;EACA;EACA,aFnCiB;EEoCjB;EACA;;AAEA;EACE;;AAEA;EACE;EACA;EACA;EACA;;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE,aFpEgB;EEqEhB;EACA;EACA;EACA;EACA;EAEA,aFzEiB;EE0EjB;;;AC/EF;AAGA;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;APVF;AACE;EACA;EACA;AAEA;EACA;IACE;;;AAIJ","file":"theme_print.css"}
\ No newline at end of file
diff --git a/packages/@vivliostyle/theme-gutenberg/theme_screen.css b/packages/@vivliostyle/theme-gutenberg/theme_screen.css
new file mode 100644
index 0000000..c0e6e81
--- /dev/null
+++ b/packages/@vivliostyle/theme-gutenberg/theme_screen.css
@@ -0,0 +1,240 @@
+@charset "UTF-8";
+/*
+ * For browser viewing:
+ * load this style in Web publications (format: webpub)
+ */
+/* common styles */
+/*
+  Original version:
+  https://github.com/vivliostyle/vivliostyle_doc/blob/gh-pages/samples/gutenberg/gutenberg.css
+*/
+@import url(https://fonts.googleapis.com/css?family=Source + Code + Pro:500);
+html {
+  max-width: 90ch;
+  margin: auto;
+  font-family: Georgia, serif;
+}
+
+body {
+  margin: 0 2em;
+}
+
+@media (max-width: 400px) {
+  body {
+    margin: 0 1em;
+  }
+}
+@page {
+  font-size: small;
+  font-family: Georgia, serif;
+  margin: 4rem 10%;
+  @top-center {
+    color: gray;
+    font-variant: small-caps;
+  }
+}
+@page :right {
+  @bottom-right {
+    content: counter(page);
+  }
+}
+@page :left {
+  @bottom-left {
+    content: counter(page);
+  }
+}
+@page :first {
+  @bottom-left {
+    content: normal;
+  }
+  @bottom-right {
+    content: normal;
+  }
+  @top-center {
+    content: normal;
+  }
+}
+@page :blank {
+  @bottom-left {
+    content: normal;
+  }
+  @bottom-right {
+    content: normal;
+  }
+  @top-center {
+    content: normal;
+  }
+}
+nav {
+  break-before: right;
+}
+nav ol {
+  list-style: none;
+  counter-reset: chap;
+  padding-left: 0em;
+  line-height: 1.45;
+}
+nav li {
+  break-inside: avoid;
+}
+nav li a {
+  display: inline-flex;
+  width: 100%;
+  text-decoration: none;
+  color: currentColor;
+  break-inside: avoid;
+  align-items: baseline;
+}
+nav li a::before {
+  margin-left: 1px;
+  margin-right: 1px;
+  border-bottom: solid 1px lightgray;
+  content: '';
+  order: 1;
+  flex: auto;
+}
+nav li a::after {
+  text-align: right;
+  content: target-counter(attr(href, url), page);
+  align-self: flex-end;
+  flex: none;
+  order: 2;
+}
+
+@media (min-width: 375px) {
+  nav ol {
+    padding-left: 3em;
+  }
+  nav li::before {
+    counter-increment: chap;
+    content: counter(chap, upper-roman) '.';
+    float: left;
+    width: 3em;
+    margin-left: -3em;
+  }
+}
+/** Titles **/
+h1,
+h2,
+h3,
+h4 {
+  margin: 2em 0;
+  hyphens: none;
+  break-after: avoid;
+}
+
+h1,
+h2 {
+  margin: 2em 0;
+}
+
+h3,
+h4 {
+  margin: 1em 0;
+}
+
+h2 {
+  break-before: right;
+}
+
+h3 {
+  break-before: page;
+}
+
+h2 + section h3 {
+  break-before: auto;
+}
+
+.author {
+  hyphens: none;
+}
+
+/** Body text **/
+p {
+  text-indent: 1.5em;
+  margin-top: 0em;
+  margin-bottom: 0em;
+  hyphens: auto;
+  line-height: 1.45;
+  orphans: 2;
+  widows: 2;
+}
+p:first-of-type {
+  text-indent: 0;
+}
+p:first-of-type::first-letter {
+  font-weight: bold;
+  font-size: 1.8em;
+  line-height: 1;
+  padding-right: 1px;
+}
+
+main > section:last-child::after {
+  break-before: avoid;
+  break-inside: avoid;
+  margin: 2em 0;
+  text-align: center;
+  font-size: 2em;
+  font-weight: bold;
+  font-variant: small-caps;
+  content: '\a✢';
+  white-space: pre;
+  display: block;
+}
+
+pre,
+.pre {
+  font-family: 'Source Code Pro', monaco, monospace;
+  font-size-adjust: none;
+  font-weight: 500;
+  font-size: 0.75em;
+  margin-left: 2em;
+  white-space: pre-line;
+  line-height: 1.45;
+  hyphens: none;
+}
+
+/** Legal Sections **/
+.pre.legal {
+  font-size: xx-small;
+  margin: 0 -1em;
+}
+
+.copyright {
+  break-before: right;
+  break-after: page;
+}
+
+.copyright .legal {
+  padding-top: 10rem;
+}
+
+body > footer {
+  break-before: left;
+}
+
+@page {
+  /* if you open the publication on Vivliostyle Viewer, this message will be shown */
+  @top-left {
+    content: 'theme_screen';
+  }
+}
+/* for wide screen */
+body {
+  max-width: 800px;
+  margin: auto 2rem 2rem;
+}
+
+/* highlight footnote */
+.footnote {
+  vertical-align: super;
+  background-color: aliceblue;
+  color: gray;
+}
+.footnote a {
+  word-break: break-all;
+}
+
+/* and more... 🖋 */
+
+/*# sourceMappingURL=theme_screen.css.map */
diff --git a/packages/@vivliostyle/theme-gutenberg/theme_screen.css.map b/packages/@vivliostyle/theme-gutenberg/theme_screen.css.map
new file mode 100644
index 0000000..7f466d8
--- /dev/null
+++ b/packages/@vivliostyle/theme-gutenberg/theme_screen.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["scss/theme_screen.scss","scss/theme_common.scss","scss/_font.scss","scss/_page.scss","scss/_variables.scss","scss/_toc.scss","scss/_base.scss","scss/_legal_sections.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAKA;ACLA;AAAA;AAAA;AAAA;ACAQ;ACAR;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;IACE;;;AAIJ;EACE,WCjBe;EDkBf,aCjBiB;EDkBjB;EAEA;IACE;IACA;;;AAIJ;EACE;IACE;;;AAIJ;EACE;IACE;;;AAIJ;EACE;IACE;;EAEF;IACE;;EAEF;IACE;;;AAIJ;EACE;IACE;;EAEF;IACE;;EAEF;IACE;;;AE3DJ;EACE;;AAEA;EACE;EACA;EACA;EACA,aDFe;;ACKjB;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAMR;EAEI;IACE;;EAIA;IACE;IACA;IACA;IACA;IACA;;;ACrDR;AAEA;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;AAEA;EACE;EACA;EACA;EACA;EACA,aFnCiB;EEoCjB;EACA;;AAEA;EACE;;AAEA;EACE;EACA;EACA;EACA;;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE,aFpEgB;EEqEhB;EACA;EACA;EACA;EACA;EAEA,aFzEiB;EE0EjB;;;AC/EF;AAGA;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;APVF;AACE;EACA;IACE;;;AAIJ;AACA;EACE;EACA;;;AAGF;AACA;EACE;EACA;EACA;;AAEA;EACE;;;AAIJ","file":"theme_screen.css"}
\ No newline at end of file