<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Type</th>
      <th>Grade</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Gizmo</td>
      <td>Robot</td>
      <td>A+</td>
    </tr>
    <tr>
      <td>Sherlock Holmes</td>
      <td>Human</td>
      <td>B-</td>
    </tr>
    <tr>
      <td>Merlin</td>
      <td>Wizard</td>
      <td>C</td>
    </tr>
    <tr>
      <td>Richard Nixon</td>
      <td>Cyborg</td>
      <td>B-</td>
    </tr>
  </tbody>
</table>

/*----------Table Element----------*/

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td, th { padding: 0; }

<div class="o-Flex o-Flex--wrap">
  <div class="o-col--12/12 o-col--4/12@md u-p2">
    <h6 class="u-mb2">Unordered List</h6>
    <ul>
      <li>Listed Item #1</li>
      <li>Listed Item #2</li>
      <li>Listed Item #3</li>
      <li>Listed Item #4</li>
    </ul>
  </div>
  <div class="o-col--12/12 o-col--4/12@md u-p2">
    <h6 class="u-mb2">Ordered List</h6>
    <ol>
      <li>Numbered Item #1</li>
      <li>Numbered Item #2</li>
      <li>Numbered Item #3</li>
      <li>Numbered Item #4</li>
    </ol>
  </div>
</div>

/*----------List & List Item Elements---------*/

li > ul,
li > ol { margin-bottom: 0; }

ul,
ol { list-style-position: inside; }

<h1>Headline Level 1</h1>
<h2>Headline Level 2</h2>
<h3>Headline Level 3</h3>
<h4>Headline Level 4</h4>
<h5>Headline Level 5</h5>
<h6>Headline Level 6</h6>
<small>Small</small>

/*----------Headline Elements----------*/
/*
  NOTE: Originally based off the Golden Ratio and 1rem being modified at each break point
*/

/* Sizes */

:root {
  /* Line Heights */
  --lh-1: 1.125;
  --lh-2: 1.25;
  --lh-3: 1.5;

  /* Multipliers */
  --sm-multiplier: 0.875;
  --md-multiplier: 1;
  --lg-multiplier: 1.125;

  /* Headline Sizes */
  --headline-1: 3.125rem;
  --headline-2: 2.5rem;
  --headline-3: 2.125rem;
  --headline-4: 1.75rem;
  --headline-5: 1.5rem;
  --headline-6: 1.25rem;

  /* Headline Small Sizes */
  --headline-1-sm: calc(var(--headline-1) * var(--sm-multiplier));
  --headline-2-sm: calc(var(--headline-2) * var(--sm-multiplier));
  --headline-3-sm: calc(var(--headline-3) * var(--sm-multiplier));
  --headline-4-sm: calc(var(--headline-4) * var(--sm-multiplier));
  --headline-5-sm: calc(var(--headline-5) * var(--sm-multiplier));
  --headline-6-sm: calc(var(--headline-6) * var(--sm-multiplier));

  /* Headline Medium Sizes */
  --headline-1-md: calc(var(--headline-1) * var(--md-multiplier));
  --headline-2-md: calc(var(--headline-2) * var(--md-multiplier));
  --headline-3-md: calc(var(--headline-3) * var(--md-multiplier));
  --headline-4-md: calc(var(--headline-4) * var(--md-multiplier));
  --headline-5-md: calc(var(--headline-5) * var(--md-multiplier));
  --headline-6-md: calc(var(--headline-6) * var(--md-multiplier));

  /* Headline Large Sizes */
  --headline-1-lg: calc(var(--headline-1) * var(--lg-multiplier));
  --headline-2-lg: calc(var(--headline-2) * var(--lg-multiplier));
  --headline-3-lg: calc(var(--headline-3) * var(--lg-multiplier));
  --headline-4-lg: calc(var(--headline-4) * var(--lg-multiplier));
  --headline-5-lg: calc(var(--headline-5) * var(--lg-multiplier));
  --headline-6-lg: calc(var(--headline-6) * var(--lg-multiplier));
}

h1,
.h1 {
  font-size: var(--headline-1-sm);
}

h2,
.h2 {
  font-size: var(--headline-2-sm);
}

h3,
.h3 {
  font-size: var(--headline-3-sm);
}

h4,
.h4 {
  font-size: var(--headline-4-sm);
}

h5,
.h5 {
  font-size: var(--headline-5-sm);
}

h6,
.h6 {
  font-size: var(--headline-6-sm);
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  margin: 0;
  line-height: var(--lh-3);
  font-family: var(--headlines);
}

@media only screen and (min-width: 48rem) {
  h1,
  .h1 {
    font-size: var(--headline-1-md);
  }

  h2,
  .h2 {
    font-size: var(--headline-2-md);
  }

  h3,
  .h3 {
    font-size: var(--headline-3-md);
  }

  h4,
  .h4 {
    font-size: var(--headline-4-md);
  }

  h5,
  .h5 {
    font-size: var(--headline-5-md);
  }

  h6,
  .h6 {
    font-size: var(--headline-6-md);
  }
}

@media only screen and (min-width: 57.75rem) {
  h1,
  .h1 {
    font-size: var(--headline-1-lg);
  }

  h2,
  .h2 {
    font-size: var(--headline-2-lg);
  }

  h3,
  .h3 {
    font-size: var(--headline-3-lg);
  }

  h4,
  .h4 {
    font-size: var(--headline-4-lg);
  }

  h5,
  .h5 {
    font-size: var(--headline-5-lg);
  }

  h6,
  .h6 {
    font-size: var(--headline-6-lg);
  }
}

.small {
  font-size: 87.5%;
}

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

/*----------Body Text Default Elements----------*/

p {
  font-family: var(--body-text);
}

p:not(:last-of-type) {
  margin-bottom: var(--base-spacing);
}

<a href="#">Normal Anchor tag</a>
<br/>
<span class="link">Not an Anchor Tag</span>

/*---------Link Defaults / Anchor Element----------*/

:root {
  --link: var(--color-1);
  --link-hover: var(--blue-light);
}

a {
  background-color: transparent;
  text-decoration: none;
  color: var(--link);
}

a:active,
a:hover {
  color: var(--link-hover);
  outline: 0;
}

<form>
  <div class="u-py2">
    <div class="u-inbl u-py1 u-mr3">
      <label for="label1">Text Input </label>
      <input type="text" id="label1" name="name" placeholder="Text Input"/>
    </div>
    <div class="u-inbl u-py1">
      <label for="label2">Email Input</label>
      <input type="email" id="label2" name="name" placeholder="Text Input"/>
    </div>
  </div>
  <div class="u-py2">
    <label for="label3">Select one</label>
    <select name="select" id="label3">
      <option value="value1">Value 1</option>
      <option value="value2" selected>Value 2</option>
      <option value="value3">Value 3</option>
    </select>
  </div>
  <div class="u-py2">
    <label for="label4">Textarea</label>
    <br/>
    <textarea id="label4" name="name" rows="8" cols="40">
    </textarea>
  </div>
  <div class="u-py2">
    <button type="button" name="button">Button</button>
  </div>
</form>

/*----------Form Reset & Form Default Elements----------*/

/* All Defaults */

button,
input,
optgroup,
select,
textarea {
  background: inherit;
  color: inherit;
  box-sizing: inherit;
  line-height: inherit;
  font-family: inherit;
  font-size: 100%;
  margin: 0;
}

button[disabled],
input[disabled] {
  cursor: default;
}

/* Input Fields */

input[type='search'],
input[type='text'],
input[type='number'],
input[type='email'],
input[type='password'] {
  appearance: none;
}

/* Textareas */

textarea {
  overflow: auto;
}

/* Selects */

select { appearance: menulist; }
optgroup { font-weight: bold; }

/* Buttons & Submissions */

button { overflow: visible; }

button,
input[type='button'],
input[type='reset'],
input[type='submit'] {
  cursor: pointer;
  appearance: none;
}

/* Other */

fieldset {
  border: 1px solid;
  margin: 0;
  padding: calc(var(--base-spacing) / 4);
}

legend {
  border: 0;
  padding: 0;
}

<img src="/layr/static/assets/filler-image.svg" alt="Placeholder Image"/>

/*----------Image Element----------*/

img {
  max-width: 100%;
  font-style: italic;
  vertical-align: middle;
  border: 0;
}

svg:not(:root) { overflow: hidden; }

svg {
  fill: currentColor;
  pointer-events: none;
  max-height: 100%;
}