diff --git a/assets/css/common/post-single.css b/assets/css/common/post-single.css
index 7095192..644eaed 100644
--- a/assets/css/common/post-single.css
+++ b/assets/css/common/post-single.css
@@ -12,7 +12,7 @@
     color: var(--secondary);
     opacity: .8;
     padding-left: .5em;
-    border-left: 3px solid var(--tertiary);
+    border-left: 8px solid var(--signature);
 }
 
 .post-meta,
@@ -141,7 +141,7 @@ h6:hover .anchor {
 }
 
 .post-content li {
-    margin-top: 10px;
+    margin-top: .5em;
 }
 
 .post-content li p {
diff --git a/assets/css/core/theme-vars.css b/assets/css/core/theme-vars.css
index d67a361..5b2c7f8 100644
--- a/assets/css/core/theme-vars.css
+++ b/assets/css/core/theme-vars.css
@@ -26,6 +26,10 @@
     --link-hover-underline-shadow: 0 2px 0 var(--link-hover-underline-color);
     --link-transition: all 0.3s ease;
     --line-yellow: url("data:image/svg+xml;charset=utf-8,%3Csvg preserveAspectRatio='none' width='120' height='6' viewBox='0 0 120 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M119 0.8C60 4 50-0.5 1 1.5' stroke='%23fc0' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
+
+    /* for type pages theming */
+    --signature: var(--primary);
+    --signature-bg: var(--secondary);
 }
 @media screen and (max-width: 500px) {
     :root {
diff --git a/assets/css/extended/essays.scss b/assets/css/extended/essays.scss
new file mode 100644
index 0000000..0881a4a
--- /dev/null
+++ b/assets/css/extended/essays.scss
@@ -0,0 +1,35 @@
+/*
+color candidates:
+#48C0A3 青碧
+#519A73 蒼黃
+#1BD1A5 碧色
+#7BCFA6 玉色
+*/
+body.type-essays {
+  --signature: #48C0A3;
+  --signature-bg: rgba(72, 192, 164, 0.427);
+  // override theme-vars
+  --link-hover-color: var(--signature);
+  --link-hover-underline-color: var(--signature);
+  --link-hover-underline-shadow: 0 2px 0 var(--link-hover-underline-color);
+
+  .post-entry {
+    /* same as .post-header h2 */
+    .entry-title {
+      font-size: 24px;
+      line-height: 1.3;
+      margin-bottom: calc(var(--content-gap) / 2);
+      a {
+        color: var(--primary);
+        transition: var(--link-transition);
+        &:hover {
+          color: var(--link-hover-color);
+          box-shadow: var(--link-hover-underline-shadow);
+        }
+      }
+    }
+    .post-meta {
+      margin-bottom: var(--content-gap);
+    }
+  }
+}
diff --git a/layouts/essays/section.html b/layouts/essays/section.html
new file mode 100644
index 0000000..95b06e5
--- /dev/null
+++ b/layouts/essays/section.html
@@ -0,0 +1,70 @@
+{{- define "main" }}
+
+<header class="page-header">
+  <h1>
+    {{- .Title -}}
+  </h1>
+  {{- if .Description }}
+  <div class="post-description">
+    {{ .Description | markdownify }}
+  </div>
+  {{- end }}
+  {{- partial "inline_links.html" . -}}
+</header>
+
+{{- if .Content }}
+<div class="post-content">
+  {{- if not (.Param "disableAnchoredHeadings") }}
+  {{- partial "anchored_headings.html" .Content -}}
+  {{- else }}{{ .Content }}{{ end }}
+</div>
+{{- end }}
+
+
+{{- $pages := .Pages }}
+{{- $pages = where $pages "Params.hidden" "!=" true }}
+
+{{/* related issue: https://github.com/gohugoio/hugo/issues/9003 */}}
+{{ $paginator := "" }}
+{{ if (.Param "paginate") }}
+  {{- $paginator = .Paginate $pages (.Param "paginate") }}
+{{ else }}
+  {{- $paginator = .Paginate $pages }}
+{{ end }}
+
+{{- $term := .Data.Term }}
+{{- range $index, $page := $paginator.Pages }}
+
+<article class="post-entry">
+  <h2 class="entry-title">
+    <a aria-label="post link to {{ .Title | plainify }}" href="{{ .Permalink }}">
+    {{- .Title }}
+    {{- if .Draft }}<sup><span class="entry-isdraft">&nbsp;&nbsp;[Draft]</span></sup>{{- end }}
+    {{- if .Weight }}<sup><span class="entry-isdraft">&nbsp;&nbsp;[Pinned]</span></sup>{{- end }}
+    </a>
+  </h2>
+  <div class="post-meta">
+    {{- if not (.Param "hideMeta") }}
+      {{- partial "post_meta.html" . -}}
+    {{- end }}
+  </div>
+  <section class="post-content">
+    {{ .Content }}
+  </section>
+</article>
+{{- end }}
+
+{{- if gt $paginator.TotalPages 1 }}
+<footer class="page-footer">
+  <nav class="pagination">
+    {{- if $paginator.HasPrev }}
+    <a class="prev" href="{{ $paginator.Prev.URL | absURL }}">« {{ i18n "prev_page" }}</a>
+    {{- end }}
+    {{- if $paginator.HasNext }}
+    <a class="next" href="{{ $paginator.Next.URL | absURL }}">{{ i18n "next_page" }} »</a>
+    {{- end }}
+  </nav>
+</footer>
+{{- end }}
+
+{{- end }}{{- /* end main */ -}}