diff --git a/src/patterns/02-base/aspects/aspects.twig b/src/patterns/02-base/aspects/aspects.twig
new file mode 100644
index 0000000000000000000000000000000000000000..ee2c6d00684f560543c1171bfd97c609d23190fd
--- /dev/null
+++ b/src/patterns/02-base/aspects/aspects.twig
@@ -0,0 +1,13 @@
+<section class="pl-aspect-ratio">
+ <div class="just-for-gap">
+ <h3>Aspect Ratios</h3>
+ <article class="aspect-demo">
+ <div style="aspect-ratio: var(--ratio-square)">box</div>
+ <div style="aspect-ratio: var(--ratio-landscape)">landscape</div>
+ <div style="aspect-ratio: var(--ratio-portrait)">portrait</div>
+ <div style="aspect-ratio: var(--ratio-widescreen)">widescreen</div>
+ <div style="aspect-ratio: 1.6180/1">golden ratio</div>
+ <div style="aspect-ratio: 18/5">ultrawide</div>
+ </article>
+ </div>
+</section>
diff --git a/src/patterns/02-base/borders/borders.twig b/src/patterns/02-base/borders/borders.twig
new file mode 100644
index 0000000000000000000000000000000000000000..2ceea2083c27bb3fe7edd96b9e0a1b11a5ab1c8d
--- /dev/null
+++ b/src/patterns/02-base/borders/borders.twig
@@ -0,0 +1,24 @@
+<section class="pl-borders">
+ <div class="just-for-gap">
+ <h3>Border Size</h3>
+ <article class="border-demo">
+ <div style="border-width: var(--border-size-1);">1</div>
+ <div style="border-width: var(--border-size-2);">2</div>
+ <div style="border-width: var(--border-size-3);">3</div>
+ <div style="border-width: var(--border-size-4);">4</div>
+ <div style="border-width: var(--border-size-5);">5</div>
+ </article>
+ </div>
+
+ <div class="just-for-gap">
+ <h3>Border Radius</h3>
+ <article class="border-demo">
+ <div style="border-radius: var(--radius-1);">1</div>
+ <div style="border-radius: var(--radius-2);">2</div>
+ <div style="border-radius: var(--radius-3);">3</div>
+ <div style="border-radius: var(--radius-4);">4</div>
+ <div style="border-radius: var(--radius-5);">5</div>
+ <div style="border-radius: var(--radius-round);">round</div>
+ </article>
+ </div>
+</section>
diff --git a/src/patterns/02-base/colors/colors.js b/src/patterns/02-base/colors/colors.js
deleted file mode 100644
index 0b2431b2e2d33c33f545cae581aee538e3c7dae9..0000000000000000000000000000000000000000
--- a/src/patterns/02-base/colors/colors.js
+++ /dev/null
@@ -1,14 +0,0 @@
-// var p = $("body");
-//
-// p.blinker();
-//
-// p.bind({
-// // pause blinking on mouseenter
-// mouseenter: function(){
-// $(this).data("blinker").pause();
-// },
-// // resume blinking on mouseleave
-// mouseleave: function(){
-// $(this).data("blinker").blinkagain();
-// }
-// });
diff --git a/src/patterns/01-core/font-face/fonts.twig b/src/patterns/02-base/fonts/fonts.twig
similarity index 100%
rename from src/patterns/01-core/font-face/fonts.twig
rename to src/patterns/02-base/fonts/fonts.twig
diff --git a/src/patterns/01-core/font-face/fonts.yml b/src/patterns/02-base/fonts/fonts.yml
similarity index 100%
rename from src/patterns/01-core/font-face/fonts.yml
rename to src/patterns/02-base/fonts/fonts.yml
diff --git a/src/patterns/02-base/headings/headings.twig b/src/patterns/02-base/headings/headings.twig
deleted file mode 100644
index 56e2b387a1efe81c2d73ee892753add2eb616245..0000000000000000000000000000000000000000
--- a/src/patterns/02-base/headings/headings.twig
+++ /dev/null
@@ -1,12 +0,0 @@
-<h1>h1. Heading Level 1</h1>
-<h2>h2. Heading Level 2</h2>
-<h3>h3. Heading Level 3</h3>
-<h4>h4. Heading Level 4</h4>
-<h5>h5. Heading Level 5</h5>
-<h6>h6. Heading Level 6</h6>
-<h1><a href="{{ url }}">h1. Heading Level 1 Link</a></h1>
-<h2><a href="{{ url }}">h2. Heading Level 2 Link</a></h2>
-<h3><a href="{{ url }}">h3. Heading Level 3 Link</a></h3>
-<h4><a href="{{ url }}">h4. Heading Level 4 Link</a></h4>
-<h5><a href="{{ url }}">h5. Heading Level 5 Link</a></h5>
-<h6><a href="{{ url }}">h6. Heading Level 6 Link</a></h6>
diff --git a/src/patterns/02-base/macros/uw.macro.twig b/src/patterns/02-base/macros/_uw.macro.twig
similarity index 100%
rename from src/patterns/02-base/macros/uw.macro.twig
rename to src/patterns/02-base/macros/_uw.macro.twig
diff --git a/src/patterns/02-base/media/media.twig b/src/patterns/02-base/media/media.twig
new file mode 100644
index 0000000000000000000000000000000000000000..d768096298c1a259d0f32572c34097a80b06a04b
--- /dev/null
+++ b/src/patterns/02-base/media/media.twig
@@ -0,0 +1,14 @@
+<section class="pl-media">
+ <div class="just-for-gap">
+ <h3>Audio</h3>
+ <article class="media-demo">
+ <audio controls="">audio</audio>
+ </article>
+ </div>
+ <div class="just-for-gap">
+ <h3>Video</h3>
+ <article class="media-demo">
+ <video controls="">video</video>
+ </article>
+ </div>
+</section>
diff --git a/src/patterns/02-base/shadows/shadows.twig b/src/patterns/02-base/shadows/shadows.twig
new file mode 100644
index 0000000000000000000000000000000000000000..b02fecd0b64ab713e4b54d9df3d61b09353d6103
--- /dev/null
+++ b/src/patterns/02-base/shadows/shadows.twig
@@ -0,0 +1,24 @@
+<section class="pl-shadows">
+ <div class="just-for-gap">
+ <h3>Box Shadow</h3>
+ <article class="shadow-demo">
+ <div style="box-shadow: var(--shadow-1);">Shadow 1</div>
+ <div style="box-shadow: var(--shadow-2);">Shadow 2</div>
+ <div style="box-shadow: var(--shadow-3);">Shadow 3</div>
+ <div style="box-shadow: var(--shadow-4);">Shadow 4</div>
+ <div style="box-shadow: var(--shadow-5);">Shadow 5</div>
+ <div style="box-shadow: var(--shadow-6);">Shadow 6</div>
+ </article>
+ </div>
+
+ <div class="just-for-gap">
+ <h3>Inner Shadow</h3>
+ <article class="shadow-demo">
+ <div style="box-shadow: var(--inner-shadow-0);">Inner Shadow 1</div>
+ <div style="box-shadow: var(--inner-shadow-1);">Inner Shadow 2</div>
+ <div style="box-shadow: var(--inner-shadow-2);">Inner Shadow 3</div>
+ <div style="box-shadow: var(--inner-shadow-3);">Inner Shadow 4</div>
+ <div style="box-shadow: var(--inner-shadow-4);">Inner Shadow 5</div>
+ </article>
+ </div>
+</section>
diff --git a/src/patterns/02-base/sizes/sizes.twig b/src/patterns/02-base/sizes/sizes.twig
new file mode 100644
index 0000000000000000000000000000000000000000..902ae258032cf28c38801508b07b622e8e9cca09
--- /dev/null
+++ b/src/patterns/02-base/sizes/sizes.twig
@@ -0,0 +1,22 @@
+<section class="pl-sizes">
+ <table class="sizes-demo">
+ <thead>
+ <tr>
+ <th>Size</th>
+ <th>REM</th>
+ <th>PX</th>
+ <th>Example</th>
+ </tr>
+ </thead>
+ <tbody>
+ {% for item in spacing %}
+ <tr>
+ <td>{{ item.size }}</td>
+ <td>{{ item.rem }}</td>
+ <td>{{ item.px }}</td>
+ <td><div style="block-size:{{ item.rem }}; background-color: gray;"></div></td>
+ </tr>
+ {% endfor %}
+ </tbody>
+ </table>
+</section>
diff --git a/src/patterns/02-base/sizes/sizes.yml b/src/patterns/02-base/sizes/sizes.yml
new file mode 100644
index 0000000000000000000000000000000000000000..9f449f0810cb4e945c2f5a01cfea52db6896fd3c
--- /dev/null
+++ b/src/patterns/02-base/sizes/sizes.yml
@@ -0,0 +1,47 @@
+---
+spacing:
+ - size: --size-xs
+ px: 1px
+ rem: 0.063rem
+ - size: --size-sm
+ px: 2px
+ rem: 0.125rem
+ - size: --size-05
+ px: 4px
+ rem: 0.25rem
+ - size: --size-1
+ px: 8px
+ rem: 0.5rem
+ - size: --size-105
+ px: 12px
+ rem: 0.75rem
+ - size: --size-2
+ px: 16px
+ rem: 1rem
+ - size: --size-205
+ px: 20px
+ rem: 1.25rem
+ - size: --size-3
+ px: 24px
+ rem: 1.5rem
+ - size: --size-4
+ px: 32px
+ rem: 2rem
+ - size: --size-5
+ px: 40px
+ rem: 2.5rem
+ - size: --size-6
+ px: 48px
+ rem: 3rem
+ - size: --size-7
+ px: 56px
+ rem: 3.5rem
+ - size: --size-8
+ px: 64px
+ rem: 4rem
+ - size: --size-9
+ px: 72px
+ rem: 4.5rem
+ - size: --size-10
+ px: 80px
+ rem: 5rem
diff --git a/src/patterns/02-base/typography/typography.twig b/src/patterns/02-base/typography/typography.twig
new file mode 100644
index 0000000000000000000000000000000000000000..7a2472c0353a2ab28f7cec323ad1a8b986fe48dd
--- /dev/null
+++ b/src/patterns/02-base/typography/typography.twig
@@ -0,0 +1,184 @@
+<section class="pl-typography">
+ <div class="gap">
+ <h3>Headings</h3>
+ <article class="typography-demo">
+ <h1>Heading Level 1</h1>
+ <h2>Heading Level 2</h2>
+ <h3>Heading Level 3</h3>
+ <h4>Heading Level 4</h4>
+ <h5>Heading Level 5</h5>
+ <h6>Heading Level 6</h6>
+ <h1><a href="{{ url }}">Heading Level 1 Link</a></h1>
+ <h2><a href="{{ url }}">Heading Level 2 Link</a></h2>
+ <h3><a href="{{ url }}">Heading Level 3 Link</a></h3>
+ <h4><a href="{{ url }}">Heading Level 4 Link</a></h4>
+ <h5><a href="{{ url }}">Heading Level 5 Link</a></h5>
+ <h6><a href="{{ url }}">Heading Level 6 Link</a></h6>
+ </article>
+ </div>
+
+ <div class="gap">
+ <h3>Paragraphs</h3>
+ <article class="typography-demo">
+ <p>A paragraph (from the Greek paragraphos, “to write beside†or “written besideâ€) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.</p>
+ <p>This is what a successive paragraph looks like. Some people prefer a space between paragraphs, while others prefer sucessive paragraphs indented with no margins between them.</p>
+ </article>
+ </div>
+
+ <div class="gap">
+ <h3>Blockquotes</h3>
+ <article class="typography-demo">
+ {% block blockquote %}
+ {% include "@components/blockquote/blockquote.twig" with {
+ 'text': blockquote.text,
+ 'attribution': blockquote.attribution
+ }%}
+ {% endblock %}
+ </article>
+ </div>
+
+ <div class="gap">
+ <h3>Lists</h3>
+ <article class="typography-demo">
+ <h4>Definition List</h4>
+ <dl>
+ <dt>Definition List Title</dt>
+ <dd>A number of connected items or names written or printed consecutively, typically one below the other.</dd>
+ <dt>This is a term.</dt>
+ <dd>This is the definition of that term, which both live in a dl.</dd>
+ </dl>
+
+ <h4>Ordered List</h4>
+ <ol>
+ <li>This is a list item in an ordered list</li>
+ <li>An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.</li>
+ <li>
+ Lists can be nested inside of each other
+ <ol>
+ <li>This is a nested list item</li>
+ <li>This is another nested list item in an ordered list
+ <ol>
+ <li>This is a nested list item</li>
+ <li>This is another nested list item in an ordered list
+ <ol>
+ <li>This is a nested list item</li>
+ <li>This is another nested list item in an ordered list</li>
+ </ol>
+ </li>
+ </ol>
+ </li>
+ </ol>
+ </li>
+ <li>This is the last list item</li>
+ </ol>
+ <ol>
+ <li>
+ <p>This is a paragraph within a list item in a different ordered list.</p>
+ <p>This is another paragraph in this list item.</p>
+ </li>
+ <li><p>This is a new paragraph within a different list item in the same ordered list.</p></li>
+ </ol>
+
+ <h4>Unordered List</h4>
+ <ul>
+ <li>This is a list item in an unordered list</li>
+ <li>An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line. </li>
+ <li>
+ Lists can be nested inside of each other
+ <ul>
+ <li>This is a nested list item</li>
+ <li>
+ This is another nested list item in an unordered list
+ <ul>
+ <li>This is a nested list item</li>
+ <li>
+ This is another nested list item in an unordered list
+ <ul>
+ <li>This is a nested list item</li>
+ <li>This is another nested list item in an unordered list</li>
+ </ul>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ </li>
+ <li>This is the last list item</li>
+ </ul>
+ <ul>
+ <li>
+ <p>This is a paragraph within a list item in a different unordered list.</p>
+ <p>This is another paragraph in this list item.</p>
+ </li>
+ <li><p>This is a new paragraph within a different list item in the same unordered list.</p></li>
+ </ul>
+ </article>
+ </div>
+ <div class="gap">
+ <h3>Details</h3>
+ <article class="typography-demo">
+ {% block details%}
+ {% include "@components/details/details.twig" with {
+ 'is_open' : details.is_open,
+ 'details_classes': details.details.classes,
+ 'details_content': details.details_content,
+ 'details_description': details.details_description,
+ 'details_summary': details.details_summary,
+ }%}
+ {% endblock %}
+ </article>
+ </div>
+
+ <div class="gap">
+ <h3>Horizontal rules</h3>
+ <article class="typography-demo">
+ <hr>
+ </article>
+ </div>
+
+ <div class="gap">
+ <h3>Code</h3>
+ <article class="typography-demo">
+ <p>Keybord input: <kbd>Cmd</kbd></p>
+ <p>Inline code:<code><div>code</div></code></p>
+ <p>Sample output: <samp>This is sample output from a computer program</samp></p>
+ </article>
+ </div>
+
+ <div class="gap">
+ <h3>Pre-formatted text</h3>
+ <article class="typography-demo">
+ <pre>
+ P R E F O R M A T T E D T E X T
+ ! " # $ % & ' ( ) * + , - . /
+ 0 1 2 3 4 5 6 7 8 9 : ; < = > ?
+ @ A B C D E F G H I J K L M N O
+ P Q R S T U V W X Y Z [ \ ] ^ _
+ ` a b c d e f g h i j k l m n o
+ p q r s t u v w x y z { | } ~
+ </pre>
+ </article>
+ </div>
+
+ <div class="gap">
+ <h3>Inline elements</h3>
+ <article class="typography-demo">
+ <p><a href="{{ url }}">This is a text link</a></p>
+ <p><strong>Strong is used to indicate strong importance</strong></p>
+ <p><em>This text has added emphasis</em></p>
+ <p>The <b>b element</b> is stylistically different text from normal text, without any special importance</p>
+ <p>The <i>i element</i> is text that is set off from the normal text</p>
+ <p>The <u>u element</u> is text with an unarticulated, though explicitly rendered, non-textual annotation</p>
+ <p><del>This text is deleted</del> and <ins>This text is inserted</ins></p>
+ <p><s>This text has a strikethrough</s></p>
+ <p>Superscript<sup>®</sup></p>
+ <p>Subscript for things like H<sub>2</sub>O</p>
+ <p><small>This small text is small for for fine print, etc.</small></p>
+ <p>Abbreviation: <abbr title="HyperText Markup Language">HTML</abbr></p>
+ <p><q cite="https://developer.mozilla.org/en-US/docs/HTML/Element/q">This text is a short inline quotation</q></p>
+ <p><cite>This is a citation</cite></p>
+ <p>The <dfn>dfn element</dfn> indicates a definition.</p>
+ <p>The <mark>mark element</mark> indicates a highlight</p>
+ <p>The <var>variable element</var>, such as <var>x</var> = <var>y</var></p>
+ <p>The <time>time element</time>, such as <time>10:00pm</time></p>
+ </article>
+ </div>
diff --git a/src/patterns/02-base/typography/typography.yml b/src/patterns/02-base/typography/typography.yml
new file mode 100644
index 0000000000000000000000000000000000000000..452877204e7f8e138bfdc23c15ae225e71d5259a
--- /dev/null
+++ b/src/patterns/02-base/typography/typography.yml
@@ -0,0 +1,10 @@
+blockquote:
+ text: '<p>This is some text from the yml file</p><p>This is some text from the yml file2. This is some text from the yml file. This is some text from the yml file. This is some text from the yml file</p><p>This is some text from the yml file3</p><p>This is some text from the yml file4. This is some text from the yml file. This is some text from the yml file. This is some text from the yml file. This is some text from the yml file. This is some text from the yml file</p><p>This is some text from the yml file5</p>'
+ attribution: 'This is the attribution'
+details:
+ is_open: true
+ details_classes: 'uw-pattern-lab'
+ details_summary: 'Details summary title here'
+ details_description: 'Details description'
+ details_content: |-
+ <p>Details content can be anything you want it to be</p>
diff --git a/src/patterns/04-components/details/details.twig b/src/patterns/04-components/details/details.twig
index cba4bcd7ade58788a2afc3dbf1cf8d1d37188827..5dabdab5a3257e499f67fdee2cd2cb6845714d3d 100644
--- a/src/patterns/04-components/details/details.twig
+++ b/src/patterns/04-components/details/details.twig
@@ -1,12 +1,16 @@
-<details class="uw-details" {% if is_open %} open{% endif %}>
+<details class="uw-details {{ details_classes }}" {% if details.is_open %} open{% endif %}>
<summary class="details__summary">
{% block details_summary %}
- Summary
+
+ {{ details_summary }}
+
{% endblock %}
</summary>
<div class="details__content">
{% block details_content %}
- Content
+
+ {{ details_content }}
+
{% endblock %}
</div>
</details>
diff --git a/src/patterns/04-components/tag-list/tag-list.twig b/src/patterns/04-components/tag-list/tag-list.twig
index 9c10d0e0ce648086e1592e77f4217bd52b2f60c7..9f42d7bb7b062f44ee4240b258c3fc04b9f0e040 100644
--- a/src/patterns/04-components/tag-list/tag-list.twig
+++ b/src/patterns/04-components/tag-list/tag-list.twig
@@ -1,4 +1,4 @@
-{% import '@base/macros/uw.macro.twig' as macros %}
+{% import '@base/macros/_uw.macro.twig' as macros %}
<ul class="tag-list {{ modifier_classes }}">
{% for item in items %}
<li class="tag-list__item {% if item.faculty %}{{ item.faculty }}{% endif %}">