diff --git a/README.md b/README.md
index e3df46c..4a01433 100644
--- a/README.md
+++ b/README.md
@@ -4,9 +4,10 @@ This starter project is build upon the (awesome) [Astro Static Site Builder](htt
 
 [Live demo](https://accessible-astro.markteekman.nl/)
 
-## Installation
+## Getting started
+Run the following commands in your project folder to get started:
 ```console
-npm init astro -- --template markteekman/accessible-astro-starter
+npm install && npm start
 ```
 
 ## Accessibility features
@@ -22,9 +23,11 @@ In this starter you'll find a couple of things:
 - Outline focus indicator which works on dark and light backgrounds
 - `.sr-only` token class for screen reader only text content
 
-## Other features
+## Utitilies
 
-This starter contains some extra Design System like utility classes to aid in the global layout of your project. All of this can be found in the `public/scss/base` directory, and compiles in the `globals.scss` file. Using these primitives is totally optional, use or remove at your own preference :) What it contains:
+👉🏻    _Note: Examples are included in the **index.astro** file_
+
+This starter contains some extra **Design System** like utility classes to aid in the global layout of your project. All of this can be found in the `public/scss/base` directory, and compiles in the `globals.scss` file. Using these primitives is totally optional, use or remove at your own preference :) What it contains:
 
 - Reset file to reset browser defaults and ensure everything looks good
 - Some basic font settings, such as responsive heading sizes
@@ -33,7 +36,52 @@ This starter contains some extra Design System like utility classes to aid in th
 - A bit more advanced grid settings using `display` grid to easily setup a 12-column layout
 - Utilities set in `_utility.scss` for things such as spacing, sizes, colors, and box-shadows
 
-### Using Auto Grid
+### 12 Column Grid
+
+12 Column Grid enables you to build custom column based layouts. Using `display: grid;` you can define the amount of columns that elements should take up in your `.grid`, and for which breakpoint they should do so. You can also use offset on a grid to create an extra column of offset. The grid offers different utilities for the individual grid items such `equal-height`, `x-start`, `x-center`, `x-end`, `y-start`, `y-center` and `y-end`. Grid comes with default gutters, to disable them you can use the utility class `no-gutters`.
+
+```html
+<div class="container">
+  <div class="grid">
+    <div class="small-12 medium-3">
+      <h3>Sidebar</h3>
+      <!-- ... -->
+    </div>
+    <div class="small-12 medium-8 offset-medium-4">
+      <h3>Main</h3>
+      <!-- ... -->
+    </div>
+  </div>
+</div>
+```
+
+### Alignment
+
+Alignment classes can be used to align elements in your HTML. There's `align-center`, `align-horizontal` and `align-vertical`.
+
+```html
+<div class="align-center w-screen h-screen">
+  <h1>Center me on the screen!</h1>
+</div>
+```
+
+### Animations
+
+There are a couple of basic animations which you can throw on your HTML elements like `blink`, `fade-in`, `pop-up` and `spin`. You can also use some animation delays to create different effects.
+
+```html
+<div data-animation="fade-in">
+  <p>I've got a fancy fade-in animation that starts right away.</p>
+</div>
+<div data-animation="fade-in" data-animation-delay="0.25s">
+  <p>I've got a fancy fade-in animation after 0.25s.</p>
+</div>
+<div data-animation="fade-in" data-animation-delay="0.5s">>
+  <p>I've got a fancy fade-in animation after 0.5s.</p>
+</div>
+```
+
+### Auto Grid
 
 Simply apply the `data-auto-grid` attribute on your parent `div` with a number from 2-6 (if you need more columns just tweak the for loop in `_auto-grid.scss`). The grid automatically creates new rows (this is how `display: grid` works by default).
 
@@ -53,32 +101,62 @@ You can also center the contents of the cell using the `data-grid-center` attrib
 </div>
 ```
 
-_Examples are included in the index.astro file_
+### Borders
+
+With two border radius utility classes (`radius-small` and `radius-large`) you can change the border radius of your HTML elements on the fly.
+
+```html
+<div class="bg-neutral-900 space-32 radius-large">
+  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
+</div>
+```
+
+## Colors
+
+You can setup your own color schemes in the `_colors.scss` file. You'll find a SCSS map, which gets printed inside `_root.scss` as custom properties. There are also several color utilities such as `text-primary-#` and `bg-neutral-#` based on all colors you've defined. `text-primary-#` should be used on a parent element to give the child's the respective color.
+
+```scss
+$colors: (
+  primary: (
+    100: hsl(262, 90%, 95%),
+    200: hsl(262, 100%, 88%),
+    300: hsl(262, 100%, 78%),
+    400: hsl(268, 82%, 60%),
+    500: hsl(273, 79%, 48%),
+  ),
+  // ...
+);
+```
+
+```html
+<div class="text-neutral-100 bg-neutral-900 space-32">
+  <p>Dark background with white text on it!</p>
+</div>
+```
 
-### Using Grid
+### Elevations
 
-Grid enables you to build a little more complex layouts if need be. Using `display: flex;` you can define the amount of columns `.cells` should take up in your `.grid`, and for which breakpoint they should do so. You can also use offset on a grid to create an extra column of offset. For all examples check [my documentation website](https://markteekman.nl/project/flexbox-grid).
+Use elevations on your HTML elements to add a box shadow of different intensities. Use either `elevation-100`, `elevation-200`, `elevation-300`, `elevation-400` or `elevation-500`.
 
 ```html
-<div class="container">
-  <div class="grid gutters">
-    <div class="cell small-12 medium-3">
-      <h3>Sidebar</h3>
-      <!-- ... -->
-    </div>
-    <div class="cell small-12 medium-8 offset-medium-1">
-      <h3>Main</h3>
-      <!-- ... -->
-    </div>
-  </div>
+<div class="space-32 radius-large elevation-400">
+  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
 </div>
 ```
 
-_Examples are included in the index.astro file_
+### Height / Width
+
+You can set the height and width of your elements to either 100 view port units or percentages using `h-screen`, `h-full`, `w-screen` and `w-full` respectfully.
+
+```html
+<div class="h-screen w-screen align-center">
+  <p>I'm centered in the middle of the screen!</p>
+</div>
+```
 
-### Using Margin and Padding
+### Margins, Paddings and Spaces
 
-To prevent spacing each element in your website individually and to prevent inconsistencies, you can use the `.margin-#` and `.padding-#` utility classes. A good practice is to set in on your `<section>` elements, for starters. To space out content you can use a special `.space-content` class on your parent div (for example in a `.cell` of your `.grid`). By default, margin/padding top and bottom are set with these utilities. You can also set it explicitly using either `.top` of `.bottom` class tokens. Find or tweak all spacing options in `_space.scss`.
+To prevent spacing each element in your website individually and to prevent inconsistencies, you can use the `.margin-#` and `.padding-#` utility classes. A good practice is to set in on your `<section>` elements, for starters. To space out content you can use a special `.space-content` class on your parent div (for example an element of your `.grid`). By default, margin/padding top and bottom are set with these utilities. You can also set it explicitly using either `.top` of `.bottom` class tokens. Find or tweak all spacing options in `_space.scss`. `space-#` tokens however add padding all around an element, which is great of you need to make card like blocks on the fly by combining `space` with the other utilities.
 
 ```html
 <section class="padding-32">
@@ -88,9 +166,16 @@ To prevent spacing each element in your website individually and to prevent inco
 </section>
 ```
 
-_Examples are included in the index.astro file_
+```html
+<div class="box space-32 bg-primary-200 radius-small elevation-100">
+  <div class="space-content">
+    <h3>I look like a card!</h3>
+    <p>And space-content adds space between us for readability.</p>
+  </div>
+</div>
+```
 
-### Using Sizes
+### Sizes
 
 If you need an exception on your font-size for a specific reason you can use size utility classes to accomplish that. Using it is easy. Find or tweak all spacing options in `_size.scss`.
 
@@ -100,25 +185,6 @@ If you need an exception on your font-size for a specific reason you can use siz
 </div>
 ```
 
-_Examples are included in the index.astro file_
-
-## Using Colors
-
-You can setup your own color schemes in the `_colors.scss` file. You'll find a SCSS map, which gets printed inside `_root.scss` as custom properties.
-
-```scss
-$colors: (
-  primary-clr: (
-    100: hsl(262, 90%, 95%),
-    200: hsl(262, 100%, 88%),
-    300: hsl(262, 100%, 78%),
-    400: hsl(268, 82%, 60%),
-    500: hsl(273, 79%, 48%),
-  ),
-  // ...
-);
-```
-
 ## Helping out
 
 If you find that something isn't working right then I'm also happy to hear it to improve this starter! Let me know by either:
@@ -128,6 +194,6 @@ If you find that something isn't working right then I'm also happy to hear it to
 
 ## Thank you!
 
-A big thank you to the creators of this awesome Astro static site builder and to all using this starter to make the web a bit more accessible for all people around the world :)
+A big thank you to the creators of the awesome Astro static site generator and to all using this starter to make the web a bit more accessible for all people around the world :)
 
 [![buymeacoffee-button](https://user-images.githubusercontent.com/3909046/150683481-be070424-7bb0-4dd7-a3cb-43b5605163f5.png)](https://www.buymeacoffee.com/markteekman)
diff --git a/package.json b/package.json
index 1ad64f0..2685e42 100644
--- a/package.json
+++ b/package.json
@@ -1,14 +1,15 @@
 {
   "name": "accessible-astro-starter",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "private": true,
   "scripts": {
     "start": "astro dev",
     "build": "astro build"
   },
   "devDependencies": {
-    "astro": "^0.21.2",
+    "astro": "^0.23.1",
     "autoprefixer": "^10.4.0",
+    "sass": "^1.49.9",
     "stylelint": "^13.13.1",
     "stylelint-config-standard": "^22.0.0"
   }
diff --git a/src/components/DarkMode.astro b/src/components/DarkMode.astro
index f54d4bd..e3837ea 100644
--- a/src/components/DarkMode.astro
+++ b/src/components/DarkMode.astro
@@ -35,13 +35,13 @@
 
 <style lang="scss">
   .darkmode-toggle {
-    border: 2px solid var(--secondary-clr-500);
+    border: 2px solid var(--secondary-500);
     border-radius: var(--radius-small);
     transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
 
     &:hover {
-      color: var(--neutral-clr-0);
-      background-color: var(--secondary-clr-500);
+      color: var(--neutral-100);
+      background-color: var(--secondary-500);
     }
   }
 </style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 1b8cb6a..4f090c3 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -4,38 +4,41 @@ import DarkMode from '../components/DarkMode.astro'
 ---
 
 <DefaultLayout title="Home">
-  <section class="margin-32">
+  <section class="margin-48">
     <div class="container">
       <h1 tabindex="-1">Hello world!</h1><br>
       <DarkMode client:load />
     </div>
   </section>
-  <section class="padding-32 color-primary">
+  <section class="padding-48 color-primary">
     <div class="container">
-      <h2 class="margin-16 bottom">Grid example</h2>
+      <h2 class="margin-16 bottom">Auto Grid</h2>
     </div>
     <div class="container" data-auto-grid="3">
-      <div class="box">
+      <div class="box text-neutral-100 bg-neutral-900 space-32 radius-large elevation-500" data-animation="fade-in">
         <h3>Column 1</h3>
-        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem accusantium placeat eius officiis veniam totam. Earum eos et voluptate dolorem. <strong><a href="#">Tab to me!</a></strong></p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem accusantium placeat eius officiis veniam totam. Earum eos et voluptate dolorem. </p>
       </div>
-      <div class="box">
+      <div class="box text-neutral-100 bg-neutral-900 space-32 radius-large elevation-500" data-animation="fade-in" data-animation-delay="0.25s">
         <h3>Column 2</h3>
         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem accusantium placeat eius officiis veniam totam. Earum eos et voluptate dolorem.</p>
       </div>
-      <div class="box">
+      <div class="box text-neutral-100 bg-neutral-900 space-32 radius-large elevation-500" data-animation="fade-in" data-animation-delay="0.5s">
         <h3>Column 3</h3>
         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem accusantium placeat eius officiis veniam totam. Earum eos et voluptate dolorem.</p>
       </div>
     </div>
+    <div class="container margin-16 top">
+      <strong><a href="#">Tab to me!</a></strong>
+    </div>
   </section>
-  <section class="margin-32">
+  <section class="margin-64">
     <div class="container">
-      <div class="grid gutters">
-        <div class="cell">
-          <h2>Flexbox example</h2>
+      <div class="grid">
+        <div class="small-12">
+          <h2>12 Column Grid</h2>
         </div>
-        <div class="cell space-content small-12 medium-3">
+        <div class="small-12 medium-3 space-content">
           <h3>Sidebar</h3>
           <ul>
             <li>Lorem ipsum dolor sit amet.</li>
@@ -44,7 +47,7 @@ import DarkMode from '../components/DarkMode.astro'
             <li>Lorem ipsum dolor sit amet.</li>
           </ul>
         </div>
-        <div class="cell space-content small-12 medium-8 offset-medium-1">
+        <div class="small-12 medium-8 offset-medium-4 space-content">
           <h3>Main</h3>
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi mollitia alias sunt accusamus reiciendis fuga delectus, repellendus molestiae dolore illo iusto eligendi eaque qui hic facilis assumenda! Velit, minus, nobis. <strong><a href="#">Tab to me!</a></strong></p>
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi mollitia alias sunt accusamus reiciendis fuga delectus, repellendus molestiae dolore illo iusto eligendi eaque qui hic facilis assumenda! Velit, minus, nobis.</p>
diff --git a/src/styles/base/_auto-grid.scss b/src/styles/base/_auto-grid.scss
index fe190ae..a95d169 100644
--- a/src/styles/base/_auto-grid.scss
+++ b/src/styles/base/_auto-grid.scss
@@ -1,10 +1,7 @@
 // | -------------------------------------------------------------
-// | > Auto Grid
-// | -------------------------------------------------------------
-// |   Easy to implement column layouts with display grid.
+// | Auto Grid
 // | -------------------------------------------------------------
 
-// used variables and mixins
 @use "breakpoint" as *;
 @use "space" as *;
 
diff --git a/src/styles/base/_border.scss b/src/styles/base/_border.scss
new file mode 100644
index 0000000..1f3d749
--- /dev/null
+++ b/src/styles/base/_border.scss
@@ -0,0 +1,34 @@
+// | -------------------------------------------------------------
+// | Border
+// | -------------------------------------------------------------
+
+$border-style: solid !default;
+$border-small: 2px !default;
+$border-medium: 3px !default;
+$border-large: 6px !default;
+
+@mixin border-small($color) {
+  border-width: $border-small;
+  border-style: $border-style;
+  border-color: $color;
+}
+
+@mixin border-medium($color) {
+  border-width: $border-medium;
+  border-style: $border-style;
+  border-color: $color;
+}
+
+@mixin border-large($color) {
+  border-width: $border-large;
+  border-style: $border-style;
+  border-color: $color;
+}
+
+@mixin radius-small {
+  border-radius: var(--radius-small);
+}
+
+@mixin radius-large {
+  border-radius: var(--radius-large);
+}
diff --git a/src/styles/base/_breakpoint.scss b/src/styles/base/_breakpoint.scss
index 8e825b7..01c471a 100644
--- a/src/styles/base/_breakpoint.scss
+++ b/src/styles/base/_breakpoint.scss
@@ -1,34 +1,24 @@
 // | -------------------------------------------------------------
-// | > Breakpoint
-// | -------------------------------------------------------------
-// |   Breakpoint mixin used in the other base files or in a
-// |   project.
+// | Breakpoint
 // | -------------------------------------------------------------
 
-// breakpoints map
 $breakpoints: (
   "default": 0,
   "small": 24em,
   "medium": 48em,
-  "large": 75em,
-  "huge": 87.5em,
+  "large": 75em
 ) !default;
 
-// breakpoint mixin
 @mixin breakpoint($breakpoint) {
-  // if key is in map
   @if map-has-key($breakpoints, $breakpoint) {
-    // set media query
     @media (min-width: map-get($breakpoints, $breakpoint)) {
       @content;
     }
   } @else if (type_of($breakpoint) == number) {
-    // set media query
     @media (min-width: $breakpoint+"px") {
       @content;
     }
   }
-  // if key is not in map or not a valid input, throw error message
   @else {
     @error "Not a correct value, check _base-breakpoints for availible values.";
   }
diff --git a/src/styles/base/_color.scss b/src/styles/base/_color.scss
index 960fa87..ecdf7fb 100644
--- a/src/styles/base/_color.scss
+++ b/src/styles/base/_color.scss
@@ -1,35 +1,31 @@
 // | -------------------------------------------------------------
-// | > Color
-// | -------------------------------------------------------------
-// |   Color map with HSL values. Used to create Custom
-// |   Properties in _root.scss.
+// | Color
 // | -------------------------------------------------------------
 
 $colors: (
-  primary-clr: (
+  primary: (
     100: hsl(194, 100%, 96%),
     200: hsl(194, 100%, 80%),
     300: hsl(194, 100%, 70%),
     400: hsl(194, 70%, 47%),
     500: hsl(194, 100%, 21%),
   ),
-  secondary-clr: (
+  secondary: (
     100: hsl(25, 100%, 75%),
     200: hsl(25, 100%, 68%),
     300: hsl(25, 100%, 55%),
     400: hsl(25, 92%, 45%),
     500: hsl(25, 100%, 32%),
   ),
-  neutral-clr: (
-    000: hsl(0, 0%, 100%),
-    100: hsl(200, 23%, 97%),
-    200: hsl(200, 12%, 95%),
-    300: hsl(205, 12%, 88%),
-    400: hsl(209, 13%, 83%),
-    500: hsl(210, 10%, 70%),
-    600: hsl(208, 6%, 55%),
-    700: hsl(210, 8%, 31%),
-    800: hsl(212, 9%, 22%),
-    900: hsl(210, 10%, 14%),
+  neutral: (
+    100: hsl(0 0% 100%),
+    200: hsl(200 23% 97%),
+    300: hsl(200 12% 95%),
+    400: hsl(205 12% 88%),
+    500: hsl(209 13% 83%),
+    600: hsl(208 6% 55%),
+    700: hsl(210 8% 31%),
+    800: hsl(212 9% 22%),
+    900: hsl(210 10% 14%),
   ),
 );
diff --git a/src/styles/base/_elevation.scss b/src/styles/base/_elevation.scss
index 2681c01..9557d48 100644
--- a/src/styles/base/_elevation.scss
+++ b/src/styles/base/_elevation.scss
@@ -1,15 +1,11 @@
 // | -------------------------------------------------------------
-// | > Elevation
-// | -------------------------------------------------------------
-// |   Box-shadow mixins used as tokens in _utility.scss.
+// | Elevation
 // | -------------------------------------------------------------
 
-// use to override other elevations
 @mixin elevation-000 {
   box-shadow: none;
 }
 
-// levels
 @mixin elevation-100 {
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
 }
@@ -26,7 +22,6 @@
   box-shadow: 0 15px 25px rgba(0, 0, 0, 0.15);
 }
 
-// use for modals
 @mixin elevation-500 {
   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
 }
diff --git a/src/styles/base/_font.scss b/src/styles/base/_font.scss
index 2b5d68e..244ef4f 100644
--- a/src/styles/base/_font.scss
+++ b/src/styles/base/_font.scss
@@ -1,10 +1,7 @@
 // | -------------------------------------------------------------
-// | > Font
-// | -------------------------------------------------------------
-// |   Default font declarations and sizes.
+// | Font
 // | -------------------------------------------------------------
 
-// used variables and mixins
 @use "breakpoint" as *;
 @use "outline" as *;
 @use "size" as *;
@@ -19,7 +16,6 @@ body {
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
 
-  // anchor links
   a {
     color: var(--action-color);
 
@@ -34,13 +30,11 @@ body {
     }
   }
 
-  // break long urls to prevent horizontal scroll
   :where(main) a {
     word-wrap: break-word;
     word-break: break-word;
   }
 
-  // headings
   :where(h1, h2) {
     font-family: var(--font-family-special);
   }
diff --git a/src/styles/base/_grid.scss b/src/styles/base/_grid.scss
index 453aa7a..0602f2c 100644
--- a/src/styles/base/_grid.scss
+++ b/src/styles/base/_grid.scss
@@ -1,227 +1,111 @@
 // | -------------------------------------------------------------
-// | > Grid
-// | -------------------------------------------------------------
-// |   This file contains all the settings for making flexible
-// |   grids. Just apply a combination of these classes to build
-// |   your own grid in the front-end.
-// |
-// |   Docs: https://www.markteekman.nl/project/flexbox-grid
+// | Grid
 // | -------------------------------------------------------------
 
-// used variables and mixins
-@use "sass:math";
 @use "breakpoint" as *;
-$grid-columns: 12 !default;
-$container-width: 1200px !default;
-$calc: math.div(100%, $grid-columns) !default;
 
-// default container setting
 .container {
   margin: 0 auto;
-  padding: 0 calc(#{var(--gap-default) / 2});
+  padding: 0 calc(var(--gap-default)/2);
   max-width: 100%;
 
   @include breakpoint(medium) {
-    padding: 0 calc(#{var(--gap-default)});
+    padding: 0 var(--gap-default);
   }
 
   @include breakpoint(large) {
-    padding: 0 calc(#{var(--gap-default) / 2});
-    max-width: $container-width;
+    padding: 0 calc(var(--gap-default)/2);
+    max-width: 1200px;
   }
 
-  // expand container
   &.stretch {
-    padding: 0 calc(#{var(--gap-default) / 2});
     max-width: 100%;
-
-    @include breakpoint(medium) {
-      padding: 0 calc(#{var(--gap-default)});
-    }
-
-    @include breakpoint(large) {
-      padding: 0 calc(#{var(--gap-default) / 2});
-    }
   }
 }
 
-// the grid
 .grid {
-  display: flex;
-  flex-wrap: wrap;
-  margin-left: calc(#{var(--gap-default)} * -1);
-
-  // cell gutters for direct descendant
-  > .cell {
-    padding-top: var(--gap-default);
-    padding-left: var(--gap-default);
-  }
-
-  @include breakpoint(default) {
-    @for $i from 1 through $grid-columns {
-      &.small-grid-#{$i} {
-        > .cell {
-          width: calc(100% / #{$i} - 2rem);
-        }
-      }
-    }
-  }
-
-  @include breakpoint(medium) {
-    @for $i from 1 through $grid-columns {
-      &.medium-grid-#{$i} {
-        > .cell {
-          width: calc(100% / #{$i} - 2rem);
-        }
-      }
-    }
-  }
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  grid-gap: var(--gap-default);
+  align-items: start;
 
-  @include breakpoint(large) {
-    @for $i from 1 through $grid-columns {
-      &.large-grid-#{$i} {
-        > .cell {
-          width: calc(100% / #{$i} - 2rem);
-        }
-      }
-    }
+  &.no-gutters {
+    grid-gap: 0;
   }
 
-  @include breakpoint(huge) {
-    @for $i from 1 through $grid-columns {
-      &.huge-grid-#{$i} {
-        > .cell {
-          width: calc(100% / #{$i} - 2rem);
-        }
-      }
-    }
+  &.equal-height {
+    align-items: stretch;
   }
 
-  &.vertical-align-top {
-    align-items: flex-start;
+  > .x-start {
+    justify-self: start;
   }
 
-  &.vertical-align-center {
-    align-items: center;
+  > .x-center {
+    justify-self: center;
   }
 
-  &.vertical-align-bottom {
-    align-items: flex-end;
+  > .x-end {
+    justify-self: end;
   }
 
-  &.horizontal-align-left {
-    justify-content: flex-start;
+  > .y-start {
+    align-self: start;
   }
 
-  &.horizontal-align-center {
-    justify-content: center;
+  > .y-center {
+    align-self: center;
   }
 
-  &.horizontal-align-right {
-    justify-content: flex-end;
+  > .y-end {
+    align-self: end;
   }
 
-  // cell and columns
-  .cell {
-    flex: 0 0 100%;
-    max-width: 100%;
-
-    // grid & flex item modifiers
-    &.align-top {
-      align-self: flex-start;
-    }
-
-    &.align-center {
-      align-self: center;
-    }
-
-    &.align-bottom {
-      align-self: flex-end;
-    }
-
-    @include breakpoint(default) {
-      @for $i from 1 through $grid-columns {
-        &.small-#{$i} {
-          flex: 0 0 ($calc * $i);
-        }
-        &.offset-small-#{$i} {
-          margin-left: ($calc * $i);
-        }
+  @include breakpoint(small) {
+    @for $i from 1 through 12 {
+      > .small-#{$i} {
+        grid-column-end: span $i;
       }
-    }
 
-    @include breakpoint(medium) {
-      @for $i from 1 through $grid-columns {
-        &.medium-#{$i} {
-          flex: 0 0 ($calc * $i);
-        }
-        &.offset-medium-#{$i} {
-          margin-left: ($calc * $i);
-        }
+      > .offset-small-#{$i} {
+        grid-column-start: calc(#{$i} + 1);
       }
-    }
 
-    @include breakpoint(large) {
-      @for $i from 1 through $grid-columns {
-        &.large-#{$i} {
-          flex: 0 0 ($calc * $i);
-        }
-        &.offset-large-#{$i} {
-          margin-left: ($calc * $i);
-        }
+      &.small-grid-#{$i} {
+        grid-template-columns: repeat(#{$i}, 1fr);
       }
     }
+  }
 
-    @include breakpoint(huge) {
-      @for $i from 1 through $grid-columns {
-        &.huge-#{$i} {
-          flex: 0 0 ($calc * $i);
-        }
-        &.offset-huge-#{$i} {
-          margin-left: ($calc * $i);
-        }
+  @include breakpoint(medium) {
+    @for $i from 1 through 12 {
+      > .medium-#{$i} {
+        grid-column-end: span $i;
       }
-    }
-  }
 
-  // grid gutters
-  &.no-gutters {
-    margin-left: 0;
+      > .offset-medium-#{$i} {
+        grid-column-start: calc(#{$i} + 1);
+      }
 
-    // cell gutters for direct descendant
-    > .cell {
-      padding-top: 0;
-      padding-left: 0;
+      &.medium-grid-#{$i} {
+        grid-template-columns: repeat(#{$i}, 1fr);
+      }
     }
   }
 
-  // nested flex grid
-  .grid {
-    margin-bottom: var(--gap-default);
-  }
-
-  // create edge to edge offsets
-  &.separate {
-    justify-content: space-between;
-  }
+  @include breakpoint(large) {
+    @for $i from 1 through 12 {
+      > .large-#{$i} {
+        grid-column-end: span $i;
+      }
 
-  // cell behaviour in block grid
-  &[class*="-grid-"] {
-    margin-right: calc(#{var(--gap-default)} / -2);
-    margin-bottom: calc(#{var(--gap-default)} * -1);
-    margin-left: calc(#{var(--gap-default)} / -2);
-
-    .cell {
-      flex: 0 0 auto;
-      margin-right: calc(#{var(--gap-default)} / 2);
-      margin-bottom: var(--gap-default);
-      margin-left: calc(#{var(--gap-default)} / 2);
-      padding-left: 0;
-      padding-top: 0;
-    }
+      > .offset-large-#{$i} {
+        grid-column-start: calc(#{$i} + 1);
+      }
 
-    &.equal-height > .cell > * {
-      height: 100%;
+      &.large-grid-#{$i} {
+        grid-template-columns: repeat(#{$i}, 1fr);
+      }
     }
   }
 }
diff --git a/src/styles/base/_list.scss b/src/styles/base/_list.scss
index 6af2dbb..e1618ac 100644
--- a/src/styles/base/_list.scss
+++ b/src/styles/base/_list.scss
@@ -1,15 +1,10 @@
 // | -------------------------------------------------------------
-// | > Lists
-// | -------------------------------------------------------------
-// |   A set of default styles for standard ordered and
-// |   unordered lists.
+// | Lists
 // | -------------------------------------------------------------
 
-// used variables and mixins
 @use "breakpoint" as *;
 @use "space" as *;
 
-// unordered list
 :where(main) ul:not([class]) {
   padding: 0 0 0 $space-24;
   list-style-type: none;
@@ -36,13 +31,11 @@
     }
   }
 
-  // nested unordered list
   ul {
     padding: $space-16 0 0 $space-16;
   }
 }
 
-// ordered list increments
 :where(main) ol:not([class]) {
   counter-reset: item;
 
@@ -64,13 +57,11 @@
     }
   }
 
-  // nested ordered and unordered lists
   ol,
   ul {
     margin: $space-12 0 0 $space-16;
   }
 
-  // prevent ul li's from taking over ol li content
   ul {
     li::before {
       content: "";
diff --git a/src/styles/base/_outline.scss b/src/styles/base/_outline.scss
index 6960079..44b5e67 100644
--- a/src/styles/base/_outline.scss
+++ b/src/styles/base/_outline.scss
@@ -1,8 +1,5 @@
 // | -------------------------------------------------------------
-// | > Outline
-// | -------------------------------------------------------------
-// |   Outline mixin to help with (tab)focus of different
-// |   elements on the page.
+// | Outline
 // | -------------------------------------------------------------
 
 @mixin outline {
diff --git a/src/styles/base/_reset.scss b/src/styles/base/_reset.scss
index 175cfb8..9767768 100644
--- a/src/styles/base/_reset.scss
+++ b/src/styles/base/_reset.scss
@@ -1,16 +1,11 @@
 // | -------------------------------------------------------------
 // | > Reset
 // | -------------------------------------------------------------
-// |   A set of reset declarations to prevent inconsistencies
-// |   between browser vendors.
-// | -------------------------------------------------------------
 
-// set box sizing and scroll behaviour
 html {
   box-sizing: border-box;
   scroll-behavior: smooth;
 
-  // disable smooth scroll if user has this system preference turned on
   @media (prefers-reduced-motion: reduce) {
     scroll-behavior: auto;
   }
@@ -22,7 +17,6 @@ html {
   box-sizing: inherit;
 }
 
-// reset margins and paddings
 blockquote,
 body,
 figure,
@@ -42,12 +36,10 @@ ul {
   padding: 0;
 }
 
-// lists
 ul {
   list-style: none;
 }
 
-// forms and buttons
 button,
 input,
 select,
@@ -93,7 +85,6 @@ button:hover {
   cursor: pointer;
 }
 
-// responsive media elements
 embed,
 iframe,
 img,
@@ -104,25 +95,21 @@ video {
   max-width: 100%;
 }
 
-// default table styling
 table {
   width: 100%;
   table-layout: fixed;
 }
 
-// hidden atribute
 [hidden] {
   display: none !important;
 }
 
-// noscript
 noscript {
   display: block;
   margin-top: 1em;
   margin-bottom: 1em;
 }
 
-// remove outline from negative tab indexes
 [tabindex="-1"] {
   outline: none !important;
   box-shadow: none !important;
diff --git a/src/styles/base/_root.scss b/src/styles/base/_root.scss
index de4252c..b32c8ad 100644
--- a/src/styles/base/_root.scss
+++ b/src/styles/base/_root.scss
@@ -1,42 +1,32 @@
 // | -------------------------------------------------------------
-// | > Root
-// | -------------------------------------------------------------
-// |   Sets all custom properties (variables) to the root
-// |   element.
+// | Root
 // | -------------------------------------------------------------
 
 @use "color" as *;
 
 :root {
-  // colors
   @each $color, $shades in $colors {
     @each $shade, $value in $shades {
       --#{$color}-#{$shade}: #{$value};
     }
   }
-  // border radius
   --radius-small: 3px;
   --radius-large: 6px;
-  // grid gap
   --gap-default: 2rem;
-  // font measure
   --font-measure: 70ch;
-  // font family
   --font-family-default: "Open Sans", sans-serif;
   --font-family-special: "Open Sans", sans-serif;
-  // default color scheme
-  --font-color: var(--neutral-clr-900);
-  --action-color: var(--secondary-clr-500);
-  --background: var(--neutral-clr-0);
-  --primary-background: var(--primary-clr-100);
-  --neutral-background: var(--neutral-clr-200);
+  --font-color: var(--neutral-900);
+  --action-color: var(--secondary-500);
+  --background: var(--neutral-100);
+  --primary-background: var(--primary-100);
+  --neutral-background: var(--neutral-200);
 }
 
-// dark color scheme
 .darkmode {
-  --font-color: var(--neutral-clr-0);
-  --action-color: var(--secondary-clr-100);
-  --background: var(--neutral-clr-800);
-  --primary-background: var(--primary-clr-500);
-  --neutral-background: var(--neutral-clr-900);
+  --font-color: var(--neutral-100);
+  --action-color: var(--secondary-100);
+  --background: var(--neutral-800);
+  --primary-background: var(--primary-500);
+  --neutral-background: var(--neutral-900);
 }
diff --git a/src/styles/base/_size.scss b/src/styles/base/_size.scss
index ff93c99..3bf1314 100644
--- a/src/styles/base/_size.scss
+++ b/src/styles/base/_size.scss
@@ -1,10 +1,7 @@
 // | -------------------------------------------------------------
-// | > Size
-// | -------------------------------------------------------------
-// |   Size mixins used in _utility.scss and other base files.
+// | Size
 // | -------------------------------------------------------------
 
-// size mixins
 @mixin size-10 {
   font-size: 0.625rem;
   line-height: 0.9375rem;
diff --git a/src/styles/base/_space.scss b/src/styles/base/_space.scss
index f9414ac..276e090 100644
--- a/src/styles/base/_space.scss
+++ b/src/styles/base/_space.scss
@@ -1,11 +1,7 @@
 // | -------------------------------------------------------------
-// | > Space
-// | -------------------------------------------------------------
-// |   Space variables used in _utility.scss and other base
-// |   files.
+// | Space
 // | -------------------------------------------------------------
 
-// space variables
 $space-2: 0.125rem;
 $space-4: 0.25rem;
 $space-8: 0.5rem;
@@ -24,7 +20,6 @@ $space-512: 32rem;
 $space-640: 40rem;
 $space-768: 48rem;
 
-// space scales for utilities
 $space-scale:
   (2 #{$space-2} #{$space-4})
   (4 #{$space-4} #{$space-8})
diff --git a/src/styles/base/_utility.scss b/src/styles/base/_utility.scss
index f07d3d9..8ac0345 100644
--- a/src/styles/base/_utility.scss
+++ b/src/styles/base/_utility.scss
@@ -1,18 +1,22 @@
 // | -------------------------------------------------------------
-// | > Utility
-// | -------------------------------------------------------------
-// |   This file contains all the utility tokens.
+// | Utility
 // | -------------------------------------------------------------
 
+@use 'utilities/align-center';
 @use 'utilities/align-horizontal';
 @use 'utilities/align-vertical';
+@use 'utilities/animations';
+@use 'utilities/border-radius';
 @use 'utilities/colors';
 @use 'utilities/contents';
 @use 'utilities/elevations';
 @use 'utilities/gutter-gap';
+@use 'utilities/height-width';
 @use 'utilities/margins';
 @use 'utilities/paddings';
 @use 'utilities/size-content';
 @use 'utilities/sizing';
 @use 'utilities/space-content';
+@use 'utilities/spacings';
 @use 'utilities/sr-only';
+@use 'utilities/top-bottom';
diff --git a/src/styles/base/keyframes/_blink.scss b/src/styles/base/keyframes/_blink.scss
new file mode 100644
index 0000000..356b10e
--- /dev/null
+++ b/src/styles/base/keyframes/_blink.scss
@@ -0,0 +1,20 @@
+// | -------------------------------------------------------------
+// | Blink
+// | -------------------------------------------------------------
+
+@keyframes blink {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  50% {
+    opacity: 0.5;
+    transform: scale(1.1);
+  }
+
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
diff --git a/src/styles/base/keyframes/_fade-in.scss b/src/styles/base/keyframes/_fade-in.scss
new file mode 100644
index 0000000..4a95e4a
--- /dev/null
+++ b/src/styles/base/keyframes/_fade-in.scss
@@ -0,0 +1,12 @@
+// | -------------------------------------------------------------
+// | Fade In
+// | -------------------------------------------------------------
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
diff --git a/src/styles/base/keyframes/_pop-up.scss b/src/styles/base/keyframes/_pop-up.scss
new file mode 100644
index 0000000..27cb8ea
--- /dev/null
+++ b/src/styles/base/keyframes/_pop-up.scss
@@ -0,0 +1,17 @@
+// | -------------------------------------------------------------
+// | Pop Up
+// | -------------------------------------------------------------
+
+@keyframes pop-up {
+  0% {
+    transform: scale(0.1);
+  }
+
+  50% {
+    transform: scale(1.2);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
diff --git a/src/styles/base/keyframes/_spin.scss b/src/styles/base/keyframes/_spin.scss
new file mode 100644
index 0000000..964a1d0
--- /dev/null
+++ b/src/styles/base/keyframes/_spin.scss
@@ -0,0 +1,15 @@
+// | -------------------------------------------------------------
+// | Spin
+// | -------------------------------------------------------------
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  50% {
+    transform: rotate(180deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/styles/base/utilities/_align-center.scss b/src/styles/base/utilities/_align-center.scss
new file mode 100644
index 0000000..fa197b9
--- /dev/null
+++ b/src/styles/base/utilities/_align-center.scss
@@ -0,0 +1,8 @@
+// | -------------------------------------------------------------
+// | Align Center
+// | -------------------------------------------------------------
+
+.align-center {
+  display: grid;
+  place-items: center;
+}
diff --git a/src/styles/base/utilities/_align-horizontal.scss b/src/styles/base/utilities/_align-horizontal.scss
index 1518378..a177f6a 100644
--- a/src/styles/base/utilities/_align-horizontal.scss
+++ b/src/styles/base/utilities/_align-horizontal.scss
@@ -1,7 +1,5 @@
 // | -------------------------------------------------------------
-// | > Align Horizontal
-// | -------------------------------------------------------------
-// |   Align Horizontal utility token.
+// | Align Horizontal
 // | -------------------------------------------------------------
 
 .align-horizontal {
diff --git a/src/styles/base/utilities/_align-vertical.scss b/src/styles/base/utilities/_align-vertical.scss
index a2040a1..5da8c4d 100644
--- a/src/styles/base/utilities/_align-vertical.scss
+++ b/src/styles/base/utilities/_align-vertical.scss
@@ -1,7 +1,5 @@
 // | -------------------------------------------------------------
-// | > Align Vertical
-// | -------------------------------------------------------------
-// |   Align Vertical utility token.
+// | Align Vertical
 // | -------------------------------------------------------------
 
 .align-vertical {
diff --git a/src/styles/base/utilities/_animations.scss b/src/styles/base/utilities/_animations.scss
new file mode 100644
index 0000000..54ed8e7
--- /dev/null
+++ b/src/styles/base/utilities/_animations.scss
@@ -0,0 +1,41 @@
+// | -------------------------------------------------------------
+// | Animation
+// | -------------------------------------------------------------
+
+@use '../keyframes/blink' as *;
+@use '../keyframes/fade-in' as *;
+@use '../keyframes/pop-up' as *;
+@use '../keyframes/spin' as *;
+
+[data-animation="blink"] {
+  animation: blink 0.25s ease-in-out 2;
+}
+
+[data-animation="fade-in"] {
+  opacity: 0;
+  animation: fade-in 0.5s ease-in-out forwards;
+}
+
+[data-animation="pop-up"] {
+  animation: pop-up 1.5s ease-in-out forwards;
+}
+
+[data-animation="spin"] {
+  animation: spin 5 0.15s linear;
+}
+
+[data-animation-delay="0.25s"] {
+  animation-delay: 0.25s;
+}
+
+[data-animation-delay="0.5s"] {
+  animation-delay: 0.5s;
+}
+
+[data-animation-delay="0.75s"] {
+  animation-delay: 0.75s;
+}
+
+[data-animation-delay="1s"] {
+  animation-delay: 1s;
+}
diff --git a/src/styles/base/utilities/_border-radius.scss b/src/styles/base/utilities/_border-radius.scss
new file mode 100644
index 0000000..63a51ad
--- /dev/null
+++ b/src/styles/base/utilities/_border-radius.scss
@@ -0,0 +1,13 @@
+// | -------------------------------------------------------------
+// | Border Radius
+// | -------------------------------------------------------------
+
+@use '../border' as *;
+
+.radius-small {
+  @include radius-small;
+}
+
+.radius-large {
+  @include radius-large;
+}
diff --git a/src/styles/base/utilities/_colors.scss b/src/styles/base/utilities/_colors.scss
index ebc1330..edc31e7 100644
--- a/src/styles/base/utilities/_colors.scss
+++ b/src/styles/base/utilities/_colors.scss
@@ -1,9 +1,9 @@
 // | -------------------------------------------------------------
-// | > Colors
-// | -------------------------------------------------------------
-// |   Colors utility token.
+// | Colors
 // | -------------------------------------------------------------
 
+@use '../color' as *;
+
 .color-neutral {
   background-color: var(--neutral-background);
 }
@@ -11,3 +11,14 @@
 .color-primary {
   background-color: var(--primary-background);
 }
+
+@each $color, $shades in $colors {
+  @each $shade, $value in $shades {
+    .text-#{$color}-#{$shade} *:not(button) {
+      color: var(--#{$color}-#{$shade});
+    }
+    .bg-#{$color}-#{$shade} {
+      background-color: var(--#{$color}-#{$shade});
+    }
+  }
+}
diff --git a/src/styles/base/utilities/_contents.scss b/src/styles/base/utilities/_contents.scss
index 447dfd5..af59a63 100644
--- a/src/styles/base/utilities/_contents.scss
+++ b/src/styles/base/utilities/_contents.scss
@@ -1,7 +1,5 @@
 // | -------------------------------------------------------------
-// | > Contents
-// | -------------------------------------------------------------
-// |   Contents utility token.
+// | Contents
 // | -------------------------------------------------------------
 
 .contents {
diff --git a/src/styles/base/utilities/_elevations.scss b/src/styles/base/utilities/_elevations.scss
index 05b7667..e11cfa7 100644
--- a/src/styles/base/utilities/_elevations.scss
+++ b/src/styles/base/utilities/_elevations.scss
@@ -1,7 +1,5 @@
 // | -------------------------------------------------------------
-// | > Elevations
-// | -------------------------------------------------------------
-// |   Elevations utility token.
+// | Elevations
 // | -------------------------------------------------------------
 
 @use '../elevation' as *;
diff --git a/src/styles/base/utilities/_gutter-gap.scss b/src/styles/base/utilities/_gutter-gap.scss
index ff4f92b..86d108f 100644
--- a/src/styles/base/utilities/_gutter-gap.scss
+++ b/src/styles/base/utilities/_gutter-gap.scss
@@ -1,7 +1,5 @@
 // | -------------------------------------------------------------
-// | > Gutter
-// | -------------------------------------------------------------
-// |   Gutter utility token.
+// | Gutter
 // | -------------------------------------------------------------
 
 .gap-small {
diff --git a/src/styles/base/utilities/_height-width.scss b/src/styles/base/utilities/_height-width.scss
new file mode 100644
index 0000000..085e0e4
--- /dev/null
+++ b/src/styles/base/utilities/_height-width.scss
@@ -0,0 +1,19 @@
+// | -------------------------------------------------------------
+// | Heights / Width
+// | -------------------------------------------------------------
+
+.h-full {
+  height: 100%;
+}
+
+.h-screen {
+  height: 100vh;
+}
+
+.w-full {
+  width: 100%;
+}
+
+.w-screen {
+  width: 100vw;
+}
diff --git a/src/styles/base/utilities/_margins.scss b/src/styles/base/utilities/_margins.scss
index 277be51..b89aa6a 100644
--- a/src/styles/base/utilities/_margins.scss
+++ b/src/styles/base/utilities/_margins.scss
@@ -1,7 +1,5 @@
 // | -------------------------------------------------------------
-// | > Margins
-// | -------------------------------------------------------------
-// |   Margins utility token.
+// | Margins
 // | -------------------------------------------------------------
 
 @use '../breakpoint' as *;
@@ -22,13 +20,3 @@
     }
   }
 }
-
-// exclude top
-.top {
-  margin-bottom: 0;
-}
-
-// exclude bottom
-.bottom {
-  margin-top: 0;
-}
diff --git a/src/styles/base/utilities/_paddings.scss b/src/styles/base/utilities/_paddings.scss
index d58f46c..30d9378 100644
--- a/src/styles/base/utilities/_paddings.scss
+++ b/src/styles/base/utilities/_paddings.scss
@@ -1,7 +1,5 @@
 // | -------------------------------------------------------------
-// | > Paddings
-// | -------------------------------------------------------------
-// |   Paddings utility token.
+// | Paddings
 // | -------------------------------------------------------------
 
 @use '../breakpoint' as *;
diff --git a/src/styles/base/utilities/_size-content.scss b/src/styles/base/utilities/_size-content.scss
index 1ca3fe6..6e2a6ac 100644
--- a/src/styles/base/utilities/_size-content.scss
+++ b/src/styles/base/utilities/_size-content.scss
@@ -1,7 +1,5 @@
 // | -------------------------------------------------------------
-// | > Size Content
-// | -------------------------------------------------------------
-// |   Size Content utility token.
+// | Size Content
 // | -------------------------------------------------------------
 
 @use '../breakpoint' as *;
@@ -18,8 +16,7 @@
   > ol li,
   > ul li *:not(span),
   > ol li *:not(span),
-  > a:not([class]),
-  > a[class*="vuedes__button type-tertiary"] {
+  > a:not([class]) {
     @include size-16;
     @include breakpoint(large) { @include size-18; }
   }
diff --git a/src/styles/base/utilities/_sizing.scss b/src/styles/base/utilities/_sizing.scss
index d3c2bc3..fe96ca6 100644
--- a/src/styles/base/utilities/_sizing.scss
+++ b/src/styles/base/utilities/_sizing.scss
@@ -1,7 +1,5 @@
 // | -------------------------------------------------------------
-// | > Sizing
-// | -------------------------------------------------------------
-// |   Sizing utility token.
+// | Sizing
 // | -------------------------------------------------------------
 
 @use '../breakpoint' as *;
diff --git a/src/styles/base/utilities/_space-content.scss b/src/styles/base/utilities/_space-content.scss
index 72d3d87..d948392 100644
--- a/src/styles/base/utilities/_space-content.scss
+++ b/src/styles/base/utilities/_space-content.scss
@@ -1,26 +1,17 @@
 // | -------------------------------------------------------------
-// | > Space Content
-// | -------------------------------------------------------------
-// |   Space Content utility token.
+// | Space Content
 // | -------------------------------------------------------------
 
 @use '../breakpoint' as *;
 @use '../space' as *;
 
 .space-content {
-  // general element flow
   > * + *,
   > dl > * + * {
     margin-top: $space-24;
     margin-bottom: 0;
   }
 
-  // component flow
-  > [class^="vuedes__"] {
-    margin-top: $space-32;
-  }
-
-  // headings flow
   > h2 {
     margin-top: $space-48;
 
@@ -51,7 +42,6 @@
     @include breakpoint(large) { margin-top: $space-24; }
   }
 
-  // exclude spacing on first child of content flows
   > *:first-child {
     margin-top: 0;
   }
diff --git a/src/styles/base/utilities/_spacings.scss b/src/styles/base/utilities/_spacings.scss
new file mode 100644
index 0000000..bd3a015
--- /dev/null
+++ b/src/styles/base/utilities/_spacings.scss
@@ -0,0 +1,14 @@
+// | -------------------------------------------------------------
+// | Spacings
+// | -------------------------------------------------------------
+
+@use '../space' as *;
+
+@each $space in $space-scale {
+  $nr: nth($space, 1);
+  $space-amount: nth($space, 2);
+
+  .space-#{$nr} {
+    padding: #{$space-amount};
+  }
+}
diff --git a/src/styles/base/utilities/_sr-only.scss b/src/styles/base/utilities/_sr-only.scss
index 96a8010..82a822e 100644
--- a/src/styles/base/utilities/_sr-only.scss
+++ b/src/styles/base/utilities/_sr-only.scss
@@ -1,7 +1,5 @@
 // | -------------------------------------------------------------
-// | > SR Only
-// | -------------------------------------------------------------
-// |   Screen Reader Only utility token.
+// | SR Only
 // | -------------------------------------------------------------
 
 .sr-only {
diff --git a/src/styles/base/utilities/_top-bottom.scss b/src/styles/base/utilities/_top-bottom.scss
new file mode 100644
index 0000000..8d47720
--- /dev/null
+++ b/src/styles/base/utilities/_top-bottom.scss
@@ -0,0 +1,11 @@
+// | -------------------------------------------------------------
+// | Top / Bottom
+// | -------------------------------------------------------------
+
+.top {
+  margin-bottom: 0;
+}
+
+.bottom {
+  margin-top: 0;
+}
diff --git a/src/styles/globals.scss b/src/styles/globals.scss
index f99e2a5..5033082 100644
--- a/src/styles/globals.scss
+++ b/src/styles/globals.scss
@@ -1,16 +1,12 @@
 // | -------------------------------------------------------------
-// | > Globals
-// | -------------------------------------------------------------
-// |   This file contains all the global styling.
+// | Globals
 // | -------------------------------------------------------------
 
-// global styles
 @use "base/reset";
 @use "base/root";
 @use "base/font";
 @use "base/list";
 
-// utilities
 @use "base/auto-grid";
 @use "base/grid";
 @use "base/utility";