diff --git a/contents/_includes/patterns/tree-diagram.njk b/contents/_includes/patterns/tree-diagram.njk
new file mode 100644
index 0000000..e52d7fe
--- /dev/null
+++ b/contents/_includes/patterns/tree-diagram.njk
@@ -0,0 +1,28 @@
+<div class="tree-diagram">
+    <ul>
+        <li class="tree-diagram__root">
+            {% square %}
+            <ul>
+                <li>
+                    {% square %}
+                    <ul>
+                        <li>
+                            {% square %}
+                        </li>
+                    </ul>
+                </li>
+                <li>
+                    {% square %}
+                    <ul>
+                        <li>
+                            {% square %}
+                        </li>
+                        <li>
+                            {% square %}
+                        </li>
+                    </ul>
+                </li>
+            </ul>
+        </li>
+    </ul>
+</div>
\ No newline at end of file
diff --git a/contents/index.njk b/contents/index.njk
index 71f7b41..cf2bf3e 100644
--- a/contents/index.njk
+++ b/contents/index.njk
@@ -277,6 +277,12 @@ eleventyExcludeFromCollections: true
                     <div class="pattern__title">Timeline</div>
                 </a>
             </div>
+            <div class="pattern__item">
+                <a class="pattern__link" href="/tree-diagram/">
+                    <div class="pattern__cover">{% include "patterns/tree-diagram.njk" %}</div>
+                    <div class="pattern__title">Tree diagram</div>
+                </a>
+            </div>
             <div class="pattern__item">
                 <a class="pattern__link" href="/video-background/">
                     <div class="pattern__cover">{% include "patterns/video-background.njk" %}</div>
diff --git a/contents/tree-diagram.md b/contents/tree-diagram.md
new file mode 100644
index 0000000..ec99f30
--- /dev/null
+++ b/contents/tree-diagram.md
@@ -0,0 +1,132 @@
+---
+layout: layouts/post.njk
+title: Tree diagram
+description: Create a tree diagram with CSS
+keywords: css sitemap, css tree diagram
+---
+
+## HTML
+
+```html
+<div class="tree-diagram">
+    <ul>
+        <li>
+            <!-- Content -->
+            ...
+
+            <!-- Sub items -->
+            <ul>
+                <li>
+                    <!-- Content -->
+                    ...
+
+                    <!-- Sub items -->
+                    <ul>
+                        <li>...</li>
+                        <li>...</li>
+                        ...
+                    </ul>
+                </li>
+                <li>...</li>
+                ...
+            </ul>
+        </li>
+        
+        <!-- Repeat other items -->
+        ...
+    </ul>
+</div>
+```
+
+## CSS
+
+```css
+.tree-diagram ul {
+    display: flex;
+    position: relative;
+
+    /* Reset */
+    list-style-type: none;
+    margin: 0;
+    padding: 1rem 0.5rem 0rem 0.5rem;
+}
+
+.tree-diagram ul ul::before {
+    border-right: 1px solid #d1d5db;
+    content: '';
+
+    /* Position */
+    position: absolute;
+    top: 0;
+    right: 50%;
+
+    /* Size */
+    height: 1rem;
+    width: 50%;
+}
+
+.tree-diagram li {
+    padding: 1rem 0.5rem 0rem 0.5rem;
+    position: relative;
+
+    /* Center the content */
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+}
+
+.tree-diagram li::before {
+    border-right: 1px solid #d1d5db;
+    border-top: 1px solid #d1d5db;
+    content: '';
+
+    /* Position */
+    position: absolute;
+    top: 0;
+    right: 50%;
+
+    /* Size */
+    height: 1rem;
+    width: 50%;
+}
+
+.tree-diagram li::after {
+    border-top: 1px solid #d1d5db;
+    content: '';
+
+    /* Position */
+    position: absolute;
+    top: 0;
+    right: 0;
+
+    /* Size */
+    width: 50%;
+}
+
+.tree-diagram li:first-child::before,
+.tree-diagram li:last-child::after {
+    /* Remove the top of border from the first and last items */
+    border-top: none;
+}
+
+/* Add a root item if you want */
+li.tree-diagram__root::before {
+    border-right: none;
+}
+```
+
+You can add a root item to the tree:
+
+```html
+<div class="tree-diagram">
+    <ul>
+        <li class="tree-diagram__root">
+            ...
+        </li>
+    </ul>
+</div>
+```
+
+{% demo %}
+{% include "patterns/tree-diagram.njk" %}
+{% enddemo %}
diff --git a/pages/tree-diagram/index.tsx b/pages/tree-diagram/index.tsx
deleted file mode 100644
index b4a549e..0000000
--- a/pages/tree-diagram/index.tsx
+++ /dev/null
@@ -1,197 +0,0 @@
-import * as React from 'react';
-import Head from 'next/head';
-import { Spacer } from '@1milligram/design';
-
-import { RelatedPatterns } from '../../components/RelatedPatterns';
-import { Pattern } from '../../constants/Pattern';
-import { PatternLayout } from '../../layouts/PatternLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Square from '../../placeholders/Square';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <PatternLayout pattern={Pattern.TreeDiagram}>
-            <Head>
-                <meta name="description" content="Create a tree diagram with CSS" />
-                <meta name="og:description" content="Create a tree diagram with CSS" />
-                <meta name="twitter:description" content="Create a tree diagram with CSS" />
-                <meta name="keywords" content="css sitemap, css tree diagram" />
-            </Head>
-            <BrowserFrame
-                html={`
-<div class="tree-diagram">
-    <ul>
-        <li>
-            <!-- Content -->
-            ...
-
-            <!-- Sub items -->
-            <ul>
-                <li>
-                    <!-- Content -->
-                    ...
-
-                    <!-- Sub items -->
-                    <ul>
-                        <li>...</li>
-                        <li>...</li>
-                        ...
-                    </ul>
-                </li>
-                <li>...</li>
-                ...
-            </ul>
-        </li>
-        
-        <!-- Repeat other items -->
-        ...
-    </ul>
-</div>
-`}
-                css={`
-                    .tree-diagram ul {
-                        display: flex;
-                        position: relative;
-
-                        /* Reset */
-                        list-style-type: none;
-                        margin: 0;
-                        padding: 1rem 0.5rem 0rem 0.5rem;
-                    }
-
-                    .tree-diagram ul ul::before {
-                        border-right: 1px solid rgba(0, 0, 0, 0.3);
-                        content: '';
-
-                        /* Position */
-                        position: absolute;
-                        top: 0;
-                        right: 50%;
-
-                        /* Size */
-                        height: 1rem;
-                        width: 50%;
-                    }
-
-                    .tree-diagram li {
-                        padding: 1rem 0.5rem 0rem 0.5rem;
-                        position: relative;
-
-                        /* Center the content */
-                        align-items: center;
-                        display: flex;
-                        flex-direction: column;
-                    }
-
-                    .tree-diagram li::before {
-                        border-right: 1px solid rgba(0, 0, 0, 0.3);
-                        border-top: 1px solid rgba(0, 0, 0, 0.3);
-                        content: '';
-
-                        /* Position */
-                        position: absolute;
-                        top: 0;
-                        right: 50%;
-
-                        /* Size */
-                        height: 1rem;
-                        width: 50%;
-                    }
-
-                    .tree-diagram li::after {
-                        border-top: 1px solid rgba(0, 0, 0, 0.3);
-                        content: '';
-
-                        /* Position */
-                        position: absolute;
-                        top: 0;
-                        right: 0;
-
-                        /* Size */
-                        width: 50%;
-                    }
-
-                    .tree-diagram li:first-child::before,
-                    .tree-diagram li:last-child::after {
-                        /* Remove the top of border from the first and last items */
-                        border-top: none;
-                    }
-
-                    /* Add a root item if you want */
-                    li.tree-diagram__root::before {
-                        border-right: none;
-                    }
-                `}
-            >
-                <div
-                    style={{
-                        alignItems: 'center',
-                        display: 'flex',
-                        height: '100%',
-                        justifyContent: 'center',
-                        padding: '0.5rem',
-                    }}
-                >
-                    <div className="tree-diagram">
-                        <ul>
-                            <li className="tree-diagram__root">
-                                <Square size="2.5rem" />
-                                <ul>
-                                    <li>
-                                        <Square size="2rem" />
-                                        <ul>
-                                            <li>
-                                                <Square size="1.5rem" />
-                                            </li>
-                                        </ul>
-                                    </li>
-                                    <li>
-                                        <Square size="2rem" />
-                                        <ul>
-                                            <li>
-                                                <Square size="1.5rem" />
-                                                <ul>
-                                                    <li>
-                                                        <Square size="1rem" />
-                                                    </li>
-                                                    <li>
-                                                        <Square size="1rem" />
-                                                    </li>
-                                                    <li>
-                                                        <Square size="1rem" />
-                                                    </li>
-                                                </ul>
-                                            </li>
-                                            <li>
-                                                <Square size="1.5rem" />
-                                            </li>
-                                            <li>
-                                                <Square size="1.5rem" />
-                                                <ul>
-                                                    <li>
-                                                        <Square size="1rem" />
-                                                    </li>
-                                                    <li>
-                                                        <Square size="1rem" />
-                                                    </li>
-                                                </ul>
-                                            </li>
-                                        </ul>
-                                    </li>
-                                    <li>
-                                        <Square size="2rem" />
-                                    </li>
-                                </ul>
-                            </li>
-                        </ul>
-                    </div>
-                </div>
-            </BrowserFrame>
-
-            <Spacer size="extraLarge" />
-            <RelatedPatterns patterns={[Pattern.FolderStructure]} />
-        </PatternLayout>
-    );
-};
-
-export default Details;
diff --git a/patterns/tree-diagram/Cover.tsx b/patterns/tree-diagram/Cover.tsx
deleted file mode 100644
index b1e8725..0000000
--- a/patterns/tree-diagram/Cover.tsx
+++ /dev/null
@@ -1,129 +0,0 @@
-import * as React from 'react';
-
-import Frame from '../../placeholders/Frame';
-import Square from '../../placeholders/Square';
-
-const Cover: React.FC<{}> = () => {
-    return (
-        <Frame>
-            <div
-                style={{
-                    alignItems: 'center',
-                    display: 'flex',
-                    height: '100%',
-                    justifyContent: 'center',
-                    padding: '0.5rem',
-                }}
-            >
-                <div style={{}}>
-                    <div
-                        style={{
-                            display: 'flex',
-                            justifyContent: 'center',
-                            padding: '0rem 0.5rem 1rem 0.5rem',
-                            position: 'relative',
-                        }}
-                    >
-                        <div
-                            style={{
-                                borderRight: '1px solid rgba(0, 0, 0, 0.3)',
-                                height: '1rem',
-                                position: 'absolute',
-                                right: '50%',
-                                bottom: 0,
-                                width: '50%',
-                            }}
-                        />
-                        <div
-                            style={{
-                                backgroundColor: 'rgba(0, 0, 0, 0.3)',
-                                borderRadius: '0.25rem',
-                                height: '1rem',
-                                width: '1rem',
-                            }}
-                        />
-                    </div>
-                    <div
-                        style={{
-                            display: 'flex',
-                            flexWrap: 'nowrap',
-                        }}
-                    >
-                        <div
-                            style={{
-                                padding: '1rem 0.5rem 0 0.5rem',
-                                position: 'relative',
-                            }}
-                        >
-                            <div
-                                style={{
-                                    borderRight: '1px solid rgba(0, 0, 0, 0.3)',
-                                    height: '1rem',
-                                    position: 'absolute',
-                                    right: '50%',
-                                    top: 0,
-                                    width: '50%',
-                                }}
-                            />
-                            <div
-                                style={{
-                                    backgroundColor: 'rgba(0, 0, 0, 0.3)',
-                                    borderRadius: '0.25rem',
-                                    height: '1rem',
-                                    width: '1rem',
-                                }}
-                            />
-                            <div
-                                style={{
-                                    borderTop: '1px solid rgba(0, 0, 0, 0.3)',
-                                    height: '1rem',
-                                    left: '50%',
-                                    position: 'absolute',
-                                    top: 0,
-                                    width: '50%',
-                                }}
-                            />
-                        </div>
-                        <div
-                            style={{
-                                padding: '1rem 0.5rem 0 0.5rem',
-                                position: 'relative',
-                            }}
-                        >
-                            <div
-                                style={{
-                                    borderRight: '1px solid rgba(0, 0, 0, 0.3)',
-                                    height: '1rem',
-                                    position: 'absolute',
-                                    right: '50%',
-                                    top: 0,
-                                    width: '50%',
-                                }}
-                            />
-                            <div
-                                style={{
-                                    backgroundColor: 'rgba(0, 0, 0, 0.3)',
-                                    borderRadius: '0.25rem',
-                                    height: '1rem',
-                                    width: '1rem',
-                                }}
-                            />
-                            <div
-                                style={{
-                                    borderTop: '1px solid rgba(0, 0, 0, 0.3)',
-                                    height: '1rem',
-                                    position: 'absolute',
-                                    right: '50%',
-                                    top: 0,
-                                    width: '50%',
-                                }}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </Frame>
-    );
-};
-
-export default Cover;
diff --git a/styles/index.scss b/styles/index.scss
index d540dc6..5508f8d 100644
--- a/styles/index.scss
+++ b/styles/index.scss
@@ -55,6 +55,7 @@
 @import './patterns/teardrop';
 @import './patterns/three-dimensions-card';
 @import './patterns/timeline';
+@import './patterns/tree-diagram';
 @import './patterns/triangle-buttons';
 @import './patterns/video-background';
 @import './patterns/voting';
diff --git a/styles/patterns/_tree-diagram.scss b/styles/patterns/_tree-diagram.scss
new file mode 100644
index 0000000..02960f4
--- /dev/null
+++ b/styles/patterns/_tree-diagram.scss
@@ -0,0 +1,72 @@
+.tree-diagram ul {
+    display: flex;
+    position: relative;
+
+    /* Reset */
+    list-style-type: none;
+    margin: 0;
+    padding: 1rem 0.5rem 0rem 0.5rem;
+}
+
+.tree-diagram ul ul::before {
+    border-right: 1px solid #d1d5db;
+    content: '';
+
+    /* Position */
+    position: absolute;
+    top: 0;
+    right: 50%;
+
+    /* Size */
+    height: 1rem;
+    width: 50%;
+}
+
+.tree-diagram li {
+    padding: 1rem 0.5rem 0rem 0.5rem;
+    position: relative;
+
+    /* Center the content */
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+}
+
+.tree-diagram li::before {
+    border-right: 1px solid #d1d5db;
+    border-top: 1px solid #d1d5db;
+    content: '';
+
+    /* Position */
+    position: absolute;
+    top: 0;
+    right: 50%;
+
+    /* Size */
+    height: 1rem;
+    width: 50%;
+}
+
+.tree-diagram li::after {
+    border-top: 1px solid #d1d5db;
+    content: '';
+
+    /* Position */
+    position: absolute;
+    top: 0;
+    right: 0;
+
+    /* Size */
+    width: 50%;
+}
+
+.tree-diagram li:first-child::before,
+.tree-diagram li:last-child::after {
+    /* Remove the top of border from the first and last items */
+    border-top: none;
+}
+
+/* Add a root item if you want */
+li.tree-diagram__root::before {
+    border-right: none;
+}
\ No newline at end of file
diff --git a/styles/placeholders/_circle.scss b/styles/placeholders/_circle.scss
index e1c194b..fa4f3c0 100644
--- a/styles/placeholders/_circle.scss
+++ b/styles/placeholders/_circle.scss
@@ -1,5 +1,5 @@
 .circle {
-    background: rgba(0, 0, 0, .3);
+    background: #d1d5db;
     border-radius: 9999px;
     height: var(--circle-size);
     width: var(--circle-size);
diff --git a/styles/placeholders/_line.scss b/styles/placeholders/_line.scss
index b0e080b..5d5eefe 100644
--- a/styles/placeholders/_line.scss
+++ b/styles/placeholders/_line.scss
@@ -1,5 +1,5 @@
 .line {
-    background: rgba(0, 0, 0, 0.3);
+    background: #d1d5db;
 }
 .line--hor {
     height: 1px;
diff --git a/styles/placeholders/_rectangle.scss b/styles/placeholders/_rectangle.scss
index 8118a35..32b88ba 100644
--- a/styles/placeholders/_rectangle.scss
+++ b/styles/placeholders/_rectangle.scss
@@ -1,5 +1,5 @@
 .rectangle {
-    background: rgba(0, 0, 0, .3);
+    background: #d1d5db;
     border-radius: 0.25rem;
 }
 .rectangle--hor {
diff --git a/styles/placeholders/_square.scss b/styles/placeholders/_square.scss
index 6d8252b..b079d9e 100644
--- a/styles/placeholders/_square.scss
+++ b/styles/placeholders/_square.scss
@@ -1,6 +1,5 @@
 .square {
-    background: rgba(0, 0, 0, 0.3);
-    border-radius: 0.25rem;
+    background: #d1d5db;
     height: var(--square-size);
     width: var(--square-size);
 }
diff --git a/styles/placeholders/_triangle.scss b/styles/placeholders/_triangle.scss
index 24a7615..179a6b0 100644
--- a/styles/placeholders/_triangle.scss
+++ b/styles/placeholders/_triangle.scss
@@ -4,35 +4,35 @@
     width: 0;
 }
 .triangle--t {
-    border-color: transparent transparent rgba(0, 0, 0, .3) transparent;
+    border-color: transparent transparent #d1d5db transparent;
     border-width: 0 var(--triangle-size) var(--triangle-size) var(--triangle-size);
 }
 .triangle--r {
-    border-color: transparent transparent transparent rgba(0, 0, 0, .3);
+    border-color: transparent transparent transparent #d1d5db;
     border-width: var(--triangle-size) 0 var(--triangle-size) 1rem;
 }
 .triangle--b {
-    border-color: rgba(0, 0, 0, .3) transparent transparent transparent;
+    border-color: #d1d5db transparent transparent transparent;
     border-width: var(--triangle-size) var(--triangle-size) 0 var(--triangle-size);
 }
 .triangle--l {
-    border-color: transparent rgba(0, 0, 0, .3) transparent transparent;
+    border-color: transparent #d1d5db transparent transparent;
     border-width: var(--triangle-size) 1rem var(--triangle-size) 0;
 }
 .triangle--tr {
-    border-color: transparent rgba(0, 0, 0, .3) transparent transparent;
+    border-color: transparent #d1d5db transparent transparent;
     border-width: 0 var(--triangle-size) var(--triangle-size) 0;
 }
 .triangle--br {
-    border-color: transparent transparent rgba(0, 0, 0, .3) transparent;
+    border-color: transparent transparent #d1d5db transparent;
     border-width: 0 0 var(--triangle-size) var(--triangle-size);
 }
 .triangle--bl {            
-    border-color: transparent transparent transparent rgba(0, 0, 0, .3);
+    border-color: transparent transparent transparent #d1d5db;
     border-width: var(--triangle-size) 0 0 var(--triangle-size);
 }
 .triangle--tl {
-    border-color: rgba(0, 0, 0, .3) transparent transparent transparent;
+    border-color: #d1d5db transparent transparent transparent;
     border-width: var(--triangle-size) var(--triangle-size) 0 0;
 }
 .triangle--sm {