<header>
  <h1>Design System</h1>
  <p>Documenting how to build a Design System.</p>
</header>
<main>
  <p>Elements to Style</p>
  <h1>Header 1</h1>
  <h2>Header 2</h2>
  <h3>Header 3</h3>
  <h4>Header 4</h4>
  <h5>Header 5</h5>
  <h6>Header 6</h6>
  <p>Paragraph Formatting.</p>
  <table class="center">
    <caption>Table Caption</caption>
    <tr>
      <th>Table</th>
      <th>Header</th>
    </tr>
    <th>Table</th>
    <th>Data</th>
    </tr>
  </table>
  <button class="center">Push 'da Button</button>
  <div id="Library-Resources">
    <h1>CSS Libraries</h1>
    <h1><a href="https://animate.style/">Animate.css</a></h1>
    <p>Animation CSS commands.
      <h1><a href="https://www.csswand.dev/">CSS Wand</a></h1>
      <p>Cut and Paste CSS library.
        <h1><a href="https://watercss.netlify.app/">Water.css</a></h1>
        <p>REsponsive web design adn embedded forms. Lightweight (2k). </p>
        <h1><a href="https://nicolas-cusan.github.io/destyle.css/">Destyle.css</a></h1>
        <p>Opinionated Css Licrarry to reset the HTML values. </p>
        <h1><a href="https://github.com/tretapey/raisincss">Raisin.css</a></h1>
        <p>CSS Utility Library with pre-build Flexbox and CSS Grid. Lightweight. </p>
        <h1><a href="https://fontawesome.com/?from=io">Font Awesome</a></h1>
        <p>Lightweight library with 1000+ fonts and icons. </p>

        <h1><a href="https://semantic-ui.com/">Semantic UI</a></h1>
        <p>Shared UI Components. Uses natural language. No need for additional JavaScript implementation. </p>
        <h1><a href="https://purecss.io/">Pure.css</a></h1>
        <p>Lighweight no-frills CSS lbrary for mobile developers. Can install only the components you need. </p>
        <h1><a href="http://voxelcss.com/">Voxel.css</a></h1>
        <p>CSS Library for 3D rendering. </p>
  </div>
  <hr>
  <p>9/19/20 - Our Design System List is ready. Each design element that is important to my brand has made the shortlist.</p>
</main>
<footer>
  <p>&copy; Gary Crossey</p>
</footer>
/*Irishguy Design Studio - Design System*/
/*CSS Libraries*/
@import "https://cdn.jsdelivr.net/gh/tretapey/raisincss@1.1.0/raisin.min.css";
/*PAGE DESIGN */
body {
  background-color: aliceblue;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
header {
  margin-bottom: auto;
  background-color: tomato;
  text-align: center;
  line-height: 80%;
  padding: 20px;
}
header p {
  color: lightgoldenrodyellow;
}
header h1 {
  color: lavender;
}
footer {
  margin-top: auto;
  background-color: tomato;
  text-align: center;
  color: LAVENDER;
  font-size: 80%;
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 0.1rem;
}
main {
  margin: 0 auto;
  max-width: 80ch;
  line-height: 120%;
}
#Library-Resources {
  width: 50%;
  background-color: darkkhaki;
  padding: 20px;
  border-radius: 25px;
}
#Library-Resources h1 {
  font-size: 50%;
  text-align: left;
}
#Library-Resources p {
  font-size: 80%;
  text-align: left;
  color: white;
}

/*SIZING*/

/*SPACING*/
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100px;
}
/*TYPOGRAPHY*/
p {
  color: yellowgreen;
  text-align: center;
  font-size: 1.125em;
}
h1 {
  color: coral;
  text-align: center;
}
h2 {
  color: indianred;
  text-align: center;
}

h3,
h4,
h5,
h6 {
  color: lightcoral;
  text-align: center;
  text-size: 0.9rem;
}
/*ICONS & ANIMATIONS*/

/*Button Style*/
button {
  color: hotpink;
  font-variant: small-caps;
}
/*GRID SYSTEM*/

/*Table Format*/
table th {
  font-size: 12px;
  font-weight: normal;
  background-color: white;
  padding: 10px;
}
/*IMAGES*/
/*Captions and Labels - Check class names for accuracy*/
caption {
  font-size: 14px;
  text-align: center;
  color: rgba(0, 0, 0, 0.7);
  background-color: tomato;
  padding: 5px;
  font-variant: small-caps;
}

/*BREAKPOINTS */
/*RESOURCES */

/*Forms - input 16px min*/

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.