1 Color Palette

#005fa8 .primary / primary (buttons, links)
#b6202e .red / (headings, text, overlays)
#0c0f15 .black / backgrounds
#151924 .dark / backgrounds
#464954 .gray / body text
#dadde2 .light-gray / body text
#f3f5f7 .off-white / backgrounds
#ffffff .white / backgrounds
<div class="primary">Text Color</div>
<div class="bg-primary">Background Color</div>
<div class="red">Text Color</div>
<div class="bg-red">Background Color</div>
<div class="black">Text Color</div>
<div class="bg-black">Background Color</div>
<div class="dark">Text Color</div>
<div class="bg-dark">Background Color</div>
<div class="gray">Text Color</div>
<div class="bg-light-gray">Background Color</div>
<div class="off-white">Text Color</div>
<div class="bg-off-white">Background Color</div>
<div class="white">Text Color</div>
<div class="bg-white">Background Color</div>

2 Typography

Fonts

Aa Michroma
regular
Aa Public Sans
regular regular italic medium semi-bold bold
Aa Orbitron
regular medium bold
<p class="michroma">Example copy lorem ipsum dolor sit amet.</p>
<p class="public-sans">Example copy lorem ipsum dolor sit amet.</p>
<p class="public-sans italic">Example copy lorem ipsum dolor sit amet.</p>
<p class="public-sans medium">Example copy lorem ipsum dolor sit amet.</p>
<p class="public-sans semi-bold">Example copy lorem ipsum dolor sit amet.</p>
<p class="public-sans bold">Example copy lorem ipsum dolor sit amet.</p>
<p class="orbitron">Example copy lorem ipsum dolor sit amet.</p>
<p class="orbitron medium">Example copy lorem ipsum dolor sit amet.</p>
<p class="orbitron bold">Example copy lorem ipsum dolor sit amet.</p>

Helpers

Italic Font

Uppercase Font

Regular Case Font

Bold Font Weight

Normal Font Weight

Font Size t1

Font Size t2

Font Size t3

Font Size t4

Font Size t5

Font Size t6

Font Size t7

Font Size t8

Font Size t9

Font Size t10

<p class="italic">Italic Font</p>
<p class="caps">Uppercase Font</p>
<p class="regular-case">Regular Case Font</p>
<p class="bold">Bold Font Weight</p>
<p class="regular">Normal Font Weight</p>
<p class="t1">Font Size t1</p>
<p class="t2">Font Size t2</p>
<p class="t3">Font Size t3</p>
<p class="t4">Font Size t4</p>
<p class="t5">Font Size t5</p>
<p class="t6">Font Size t6</p>
<p class="t7">Font Size t7</p>
<p class="t8">Font Size t8</p>
<p class="t9">Font Size t9</p>
<p class="t10">Font Size t10</p>

Headings

Title - Giant

h1 - Heading

h2 - Heading

h3 - Heading

h4 - Heading

h5 - Heading
h6 - Heading

Heading Sizer h1

Heading Sizer h2

Heading Sizer h3

Heading Sizer h4

Heading Sizer h5

Heading Sizer h6

<h1 class="small caps">Headings</h1>
<h1>h1 - Heading</h1>
<h1 class="subheader">h1 - Sub Heading</h1>
<h2>h2 - Heading</h2>
<h2 class="subheader">h2 - Sub Heading</h2>
<h3>h3 - Heading</h3>
<h3 class="subheader">h3 - Sub Heading</h3>
<h4>h4 - Heading</h4>
<h4 class="subheader">h4 - Sub Heading</h4>
<h5>h5 - Heading</h5>
<h5 class="subheader">h5 - Sub Heading</h5>
<h6>h6 - Heading</h6>
<h6 class="subheader">h6.Sub Heading</h6>
<h3 class="h1">Heading Sizer h1</h3>
<h3 class="h2">Heading Sizer h2</h3>
<h3 class="h3">Heading Sizer h3</h3>
<h3 class="h4">Heading Sizer h4</h3>
<h3 class="h5">Heading Sizer h5</h3>
<h3 class="h6">Heading Sizer h6</h3>

Font Icons

View All Font Icons

<span class="icon-phone"></span>
<span class="icon-chat"></span>
<span class="icon-dollar"></span>
<span class="icon-grid"></span>
<span class="icon-arrow-down"></span>
<span class="icon-arrow-left"></span>
<span class="icon-arrow-right"></span>
<span class="icon-arrow-up"></span>

Section Headings

Section Headings

<h4 class="headings">Section Headings</h4>

Body Copy

Heading

Lead paragraph donec venenatis vulputate lorem. Nam at tortor in tellus interdum sagittis. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Praesent egestas neque eu enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus.

Body Paragraph enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Paragraph link. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.

Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.

enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.

Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.

enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.

Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.

enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.

Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.

enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.

<p class="lead">This is a lead paragraph donec venenatis vulputate lorem. Nam at tortor in tellus interdum sagittis. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Praesent egestas neque eu enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus.</p>
<p>enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. <a href="#">Paragraph link</a>. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<p>Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<img src="https://via.placeholder.com/350x250" class="alignright border">
<p>enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<p>Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<img src="https://via.placeholder.com/350x250" class="alignleft border">
<p>enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<p>Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<p>enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<p>Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<img src="https://via.placeholder.com/1200x400" class="aligntop border">
<p>enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>

Article Copy

Article copy that decreases container width and increases font size

Article copy that decreases container width and increases font size for easier reading experience. enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.

Article Headline Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt mollitia, ipsam cupiditate.

Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.

Lorem ipsum enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.

Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.

<div class="row">
  <div class="small-11 medium-10 large-9 xlarge-8 small-centered column article">
    <h1>Article copy that decreases container width and increases font size</h1>
    <p>Article copy that decreases container width and increases font size for easier reading experience. enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
    <h2>Article Headline Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt mollitia, ipsam cupiditate.</h2>
    <p>Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
    <p>Lorem ipsum enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
    <p>Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
  </div>
</div>

Tiny

Enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.

<div class="row">
  <div class="small-11 medium-10 large-9 xlarge-8 small-centered column">
    <p class="small">Enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
  </div>
</div>

Body Copy Alignment

Left Align Lorem ipsum Ut a nisl id ante tempus hendrerit.

Right Align Lorem ipsum Ut a nisl id ante tempus hendrerit.

Center Lorem ipsum Ut a nisl id ante tempus hendrerit.

<p class="left-align"><strong>Left Align</strong> Lorem ipsum Ut a nisl id ante tempus hendrerit.</p>
<p class="right-align"><strong>Right Align</strong> Lorem ipsum Ut a nisl id ante tempus hendrerit.</p>
<p class="center"><strong>Center</strong> Lorem ipsum Ut a nisl id ante tempus hendrerit.</p>

Blockquotes

Blockquote Text donec venenatis vulputate lorem. Nam at tortor in tellus interdum sagittis. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Praesent egestas neque eu enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus. posuere cubilia Curae; Fusce id purus. Fusce id purus. posuere

Optional Authors Name Optional Second Field

<blockquote>
 <div class="quote">
    <p>Blockquote Text donec venenatis vulputate lorem. Nam at tortor in tellus interdum sagittis. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Praesent egestas neque eu enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus. posuere cubilia Curae; Fusce id purus. Fusce id purus. posuere </p>
  </div>
  <p class="cite">Optional Authors Name <span> Optional Second Field</span> </p>
</blockquote>

Unordered List

  • List Item 1
  • List Item 2
  • List Item 3
  • List Item 4
    • Sub List Item 1
    • Sub List Item 2
    • Sub List Item 3
    • Sub List Item 4
    • Sub List Item 5
  • List Item 6

Unordered List

  • List Item 1
  • List Item 2
  • List Item 3
  • List Item 4
    • Sub List Item 1
    • Sub List Item 2
    • Sub List Item 3
    • Sub List Item 4
    • Sub List Item 5
  • List Item 6

Ordered List

  1. List Item 1
  2. List Item 2
  3. List Item 3
  4. List Item 4
    1. Sub List Item 1
    2. Sub List Item 2
    3. Sub List Item 3
    4. Sub List Item 4
    5. Sub List Item 5
  5. List Item 6
<ul class="bullets">
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
  <li>List Item 4
    <ul>
      <li>Sub List Item 1</li>
      <li>Sub List Item 2</li>
      <li>Sub List Item 3</li>
      <li>Sub List Item 4</li>
      <li>Sub List Item 5</li>
    </ul>
  </li>
  <li>List Item 6</li>
</ul>
<ul class="checkmarks">
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
  <li>List Item 4
    <ul>
      <li>Sub List Item 1</li>
      <li>Sub List Item 2</li>
      <li>Sub List Item 3</li>
      <li>Sub List Item 4</li>
      <li>Sub List Item 5</li>
    </ul>
  </li>
  <li>List Item 6</li>
</ul>
<ol>
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
  <li>List Item 4
    <ol>
      <li>Sub List Item 1</li>
      <li>Sub List Item 2</li>
      <li>Sub List Item 3</li>
      <li>Sub List Item 4</li>
      <li>Sub List Item 5</li>
    </ol>
  </li>
  <li>List Item 6</li>
</ol>

Number Section

Headline

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo quos porro quisquam nesciunt quia a, quae libero. Tempore delectus at animi facere! Voluptatem, delectus cumque nisi error distinctio. Excepturi temporibus aspernatur quam itaque fugiat recusandae omnis cupiditate illo assumenda architecto saepe, laudantium expedita quas, ipsa ut suscipit non quibusdam magnam.

Headline

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo quos porro quisquam nesciunt quia a, quae libero. Tempore delectus at animi facere! Voluptatem, delectus cumque nisi error distinctio. Excepturi temporibus aspernatur quam itaque fugiat recusandae omnis cupiditate illo assumenda architecto saepe, laudantium expedita quas, ipsa ut suscipit non quibusdam magnam.

Headline

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo quos porro quisquam nesciunt quia a, quae libero. Tempore delectus at animi facere! Voluptatem, delectus cumque nisi error distinctio. Excepturi temporibus aspernatur quam itaque fugiat recusandae omnis cupiditate illo assumenda architecto saepe, laudantium expedita quas, ipsa ut suscipit non quibusdam magnam.

<div class="number-section">
  <h3>Headline</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo quos porro quisquam nesciunt quia a, quae libero. Tempore delectus at animi facere! Voluptatem, delectus cumque nisi error distinctio. Excepturi temporibus aspernatur quam itaque fugiat recusandae omnis cupiditate illo assumenda architecto saepe, laudantium expedita quas, ipsa ut suscipit non quibusdam magnam.</p>
  <h3>Headline</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo quos porro quisquam nesciunt quia a, quae libero. Tempore delectus at animi facere! Voluptatem, delectus cumque nisi error distinctio. Excepturi temporibus aspernatur quam itaque fugiat recusandae omnis cupiditate illo assumenda architecto saepe, laudantium expedita quas, ipsa ut suscipit non quibusdam magnam.</p>
  <h3>Headline</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo quos porro quisquam nesciunt quia a, quae libero. Tempore delectus at animi facere! Voluptatem, delectus cumque nisi error distinctio. Excepturi temporibus aspernatur quam itaque fugiat recusandae omnis cupiditate illo assumenda architecto saepe, laudantium expedita quas, ipsa ut suscipit non quibusdam magnam.</p>
</div>

3 Spacing

Top Margin Spacing

Margin Top 0
Margin Top 1
Margin Top 2
Margin Top 3
Margin Top 4
Margin Top 5
Margin Top 6
Margin Top 7
Margin Top 8
Margin Top 9
Margin Top 10
Margin Top 11
Margin Top 12

Bottom Margin Spacing

Margin Bottom 0
Margin Bottom 1
Margin Bottom 2
Margin Bottom 3
Margin Bottom 4
Margin Bottom 5
Margin Bottom 6
Margin Bottom 7
Margin Bottom 8
Margin Bottom 9
Margin Bottom 10
Margin Bottom 11
Margin Bottom 12
<div class="mt0">Margin Top 0</div>
<div class="mt1">Margin Top 1</div>
<div class="mt2">Margin Top 2</div>
<div class="mt3">Margin Top 3</div>
<div class="mt4">Margin Top 4</div>
<div class="mt5">Margin Top 5</div>
<div class="mt6">Margin Top 6</div>
<div class="mt7">Margin Top 7</div>
<div class="mt8">Margin Top 8</div>
<div class="mt9">Margin Top 9</div>
<div class="mt10">Margin Top 10</div>
<div class="mt11">Margin Top 11</div>
<div class="mt12">Margin Top 12</div>
<div class="mb0">Margin Bottom 0</div>
<div class="mb1">Margin Bottom 1</div>
<div class="mb2">Margin Bottom 2</div>
<div class="mb3">Margin Bottom 3</div>
<div class="mb4">Margin Bottom 4</div>
<div class="mb5">Margin Bottom 5</div>
<div class="mb6">Margin Bottom 6</div>
<div class="mb7">Margin Bottom 7</div>
<div class="mb8">Margin Bottom 8</div>
<div class="mb9">Margin Bottom 9</div>
<div class="mb10">Margin Bottom 10</div>
<div class="mb11">Margin Bottom 11</div>
<div class="mb12">Margin Bottom 12</div>

Top Padding Spacing

Padding Top 0
Padding Top 1
Padding Top 2
Padding Top 3
Padding Top 4
Padding Top 5
Padding Top 6
Padding Top 7
Padding Top 8
Padding Top 9
Padding Top 10
Padding Top 11
Padding Top 12

Bottom Padding Spacing

Padding Bottom 0
Padding Bottom 1
Padding Bottom 2
Padding Bottom 3
Padding Bottom 4
Padding Bottom 5
Padding Bottom 6
Padding Bottom 7
Padding Bottom 8
Padding Bottom 9
Padding Bottom 10
Padding Bottom 11
Padding Bottom 12
<div class="pt0">Padding Top 0</div>
<div class="pt1">Padding Top 1</div>
<div class="pt2">Padding Top 2</div>
<div class="pt3">Padding Top 3</div>
<div class="pt4">Padding Top 4</div>
<div class="pt5">Padding Top 5</div>
<div class="pt6">Padding Top 6</div>
<div class="pt7">Padding Top 7</div>
<div class="pt8">Padding Top 8</div>
<div class="pt9">Padding Top 9</div>
<div class="pt10">Padding Top 10</div>
<div class="pt11">Padding Top 11</div>
<div class="pt12">Padding Top 12</div>
<div class="pb0">Padding Bottom 0</div>
<div class="pb1">Padding Bottom 1</div>
<div class="pb2">Padding Bottom 2</div>
<div class="pb3">Padding Bottom 3</div>
<div class="pb4">Padding Bottom 4</div>
<div class="pb5">Padding Bottom 5</div>
<div class="pb6">Padding Bottom 6</div>
<div class="pb7">Padding Bottom 7</div>
<div class="pb8">Padding Bottom 8</div>
<div class="pb9">Padding Bottom 9</div>
<div class="pb10">Padding Bottom 10</div>
<div class="pb11">Padding Bottom 11</div>
<div class="pb12">Padding Bottom 12</div>

4 Buttons

Standard Buttons

Disabled Button

Expanded Button

<a class="button waves-effect large" href="#">Primary Large</a>
<a class="button waves-effect" href="#">Primary Default</a>
<a class="button waves-effect stroke" href="#">Primary Default</a>
<a class="button waves-effect tiny" href="#">Primary Tiny</a>
<a class="button waves-effect secondary large" href="#">Secondary Large</a>
<a class="button waves-effect secondary" href="#">Secondary Default</a>
<a class="button waves-effect secondary stroke" href="#">Secondary Default</a>
<a class="button waves-effect secondary tiny" href="#">Secondary Tiny</a>
<a class="button waves-effect tertiary large" href="#">Tertiary Large</a>
<a class="button waves-effect tertiary" href="#">Tertiary Default</a>
<a class="button waves-effect tertiary stroke" href="#">Tertiary Default</a>
<a class="button waves-effect tertiary tiny" href="#">Tertiary Tiny</a>
<a class="button disabled" href="#">Disabled Button</a>
<a class="button expand" href="#">Expanded Button</a>

Text Buttons

<a href="#" class="text-button">Text Button Primary</a>

5 Forms

<form>
  <div class="row column">
    <label>Input Label
      <input type="text" placeholder=".row.column">
    </label>
  </div>
  <div class="row">
    <div class="large-4 columns">
      <label>Input Label
        <input type="text" placeholder=".large-4.columns">
      </label>
    </div>
    <div class="large-4 columns">
      <label>Input Label
        <input type="text" placeholder=".large-4.columns">
      </label>
    </div>
    <div class="large-4 columns">
      <label>Input Label
        <input type="text" placeholder=".large-4.columns">
      </label>
    </div>
  </div>
  <div class="row column">
    <label>Select Box
      <select>
        <option value="husker">Husker</option>
        <option value="starbuck">Starbuck</option>
        <option value="hotdog">Hot Dog</option>
        <option value="apollo">Apollo</option>
      </select>
    </label>
  </div>
  <div class="row">
    <div class="large-6 columns mb3">
      <label>Choose Your Favorite</label>
      <label class="input-radio">
        <input type="radio" name="pokemon" value="Red" id="pokemonRed">
        Red </label>
      <label class="input-radio">
        <input type="radio" name="pokemon" value="Blue" id="pokemonBlue">
        Blue </label>
    </div>
    <div class="large-6 columns mb3">
      <label>Check these out</label>
      <label class="input-checkbox">
        <input id="checkbox1" type="checkbox">
        Checkbox 1</label>
      <label class="input-checkbox">
        <input id="checkbox2" type="checkbox">
        Checkbox 2</label>
    </div>
  </div>
  <div class="row column">
    <label>Textarea Label
      <textarea rows="8" placeholder=".row.column"></textarea>
    </label>
  </div>
  <div class="row column">
    <button type="submit" class="button">Submit</button>
  </div>
</form>

6 Grids

Standard Grid

Grid system is based on Foundations Grid please reference docs for more information.

Sites breakpoints:
xsmall (0 to 479px)
small (480px - 639px)
medium (640px - 800px)
large (801px - 959px)
xlarge (960px - 1199px)
xxlarge (1200px and up)

Two column desktop/tablet; Single column phone Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam odio adipisci distinctio porro accusamus dolores nam, dignissimos nesciunt accusantium pariatur incidunt omnis tempora excepturi optio architecto. Provident praesentium enim libero necessitatibus unde ea mollitia tempore atque adipisci ipsa velit dolorum accusantium, fugiat, rem ipsam, nesciunt eum excepturi. Maxime, enim, nobis.

Two column desktop/tablet; Single column phone Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam odio adipisci distinctio porro accusamus dolores nam, dignissimos nesciunt accusantium pariatur incidunt omnis tempora excepturi optio architecto. Provident praesentium enim libero necessitatibus unde ea mollitia tempore atque adipisci ipsa velit dolorum accusantium, fugiat, rem ipsam, nesciunt eum excepturi. Maxime, enim, nobis.

Four column desktop; Two column tablet; Single column phone Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam odio adipisci distinctio porro accusamus dolores nam, dignissimos nesciunt accusantium pariatur incidunt omnis tempora excepturi optio architecto. Provident praesentium enim libero necessitatibus unde ea mollitia tempore atque adipisci.

Four column desktop; Two column tablet; Single column phone Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam odio adipisci distinctio porro accusamus dolores nam, dignissimos nesciunt accusantium pariatur incidunt omnis tempora excepturi optio architecto. Provident praesentium enim libero necessitatibus unde ea mollitia tempore atque adipisci.

Four column desktop; Two column tablet; Single column phone Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam odio adipisci distinctio porro accusamus dolores nam, dignissimos nesciunt accusantium pariatur incidunt omnis tempora excepturi optio architecto. Provident praesentium enim libero necessitatibus unde ea mollitia tempore atque adipisci.

Four column desktop; Two column tablet; Single column phone Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam odio adipisci distinctio porro accusamus dolores nam, dignissimos nesciunt accusantium pariatur incidunt omnis tempora excepturi optio architecto. Provident praesentium enim libero necessitatibus unde ea mollitia tempore atque adipisci.

<div class="row">
  <div class="medium-6 column">
    <p><strong>Two column desktop/tablet; Single column phone</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam odio adipisci distinctio porro accusamus dolores nam, dignissimos nesciunt accusantium pariatur incidunt omnis tempora excepturi optio architecto. Provident praesentium enim libero necessitatibus unde ea mollitia tempore atque adipisci ipsa velit dolorum accusantium, fugiat, rem ipsam, nesciunt eum excepturi. Maxime, enim, nobis.</p>
  </div>
  <div class="medium-6 column">
    <p><strong>Two column desktop/tablet; Single column phone</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam odio adipisci distinctio porro accusamus dolores nam, dignissimos nesciunt accusantium pariatur incidunt omnis tempora excepturi optio architecto. Provident praesentium enim libero necessitatibus unde ea mollitia tempore atque adipisci ipsa velit dolorum accusantium, fugiat, rem ipsam, nesciunt eum excepturi. Maxime, enim, nobis.</p>
  </div>
</div>
<div class="row">
  <div class="medium-6 large-3 column">
    <p><strong>Four column desktop; Two column tablet; Single column phone</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam odio adipisci distinctio porro accusamus dolores nam, dignissimos nesciunt accusantium pariatur incidunt omnis tempora excepturi optio architecto. Provident praesentium enim libero necessitatibus unde ea mollitia tempore atque adipisci.</p>
  </div>
  <div class="medium-6 large-3 column">
    <p><strong>Four column desktop; Two column tablet; Single column phone</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam odio adipisci distinctio porro accusamus dolores nam, dignissimos nesciunt accusantium pariatur incidunt omnis tempora excepturi optio architecto. Provident praesentium enim libero necessitatibus unde ea mollitia tempore atque adipisci.</p>
  </div>
  <div class="medium-6 large-3 column">
    <p><strong>Four column desktop; Two column tablet; Single column phone</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam odio adipisci distinctio porro accusamus dolores nam, dignissimos nesciunt accusantium pariatur incidunt omnis tempora excepturi optio architecto. Provident praesentium enim libero necessitatibus unde ea mollitia tempore atque adipisci.</p>
  </div>
   <div class="medium-6 large-3 column">
    <p><strong>Four column desktop; Two column tablet; Single column phone</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam odio adipisci distinctio porro accusamus dolores nam, dignissimos nesciunt accusantium pariatur incidunt omnis tempora excepturi optio architecto. Provident praesentium enim libero necessitatibus unde ea mollitia tempore atque adipisci.</p>
  </div>
</div>

Block Grid

<div class="row xsmall-up-1 small-up-2 medium-up-3 large-up-4 xlarge-up-5 xxlarge-up-6">
  <div class="column"> <img src="https://via.placeholder.com/350x300" class="mb3 border"> </div>
  <div class="column"> <img src="https://via.placeholder.com/350x300" class="mb3 border"> </div>
  <div class="column"> <img src="https://via.placeholder.com/350x300" class="mb3 border"> </div>
  <div class="column"> <img src="https://via.placeholder.com/350x300" class="mb3 border"> </div>
  <div class="column"> <img src="https://via.placeholder.com/350x300" class="mb3 border"> </div>
  <div class="column"> <img src="https://via.placeholder.com/350x300" class="mb3 border"> </div>
</div>

7 Page Body Components

Slide Content

Slide Toggle With Link

Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.

More Info

Lorem enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.

Lorem enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.

Slide Toggle With Button

Lorem enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.

More Info

Lorem enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.

Lorem enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.

<h3>Slide Toggle With Link</h3>
<p>Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus
laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula,
eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<div class="slide-toggle-container">
<p> <a class="slide-toggle" href="#">More Info</a> </p>
<div class="slide-content">
  <p>enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
  <p>enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
</div>
</div>
<h3>Slide Toggle With Button</h3>
<p>enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<div class="slide-toggle-container"> <a class="slide-toggle button" href="#"> More Info</a>
<div class="slide-content">
  <p>enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
  <p>enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
</div>
</div>

Accordion

Accordion

FAQ Question 1. Pellentesque dapibus hendrerit tortor. Donec vitae orci sed dolor?
Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.
FAQ Question 2. Pellentesque dapibus hendrerit tortor. Donec vitae orci sed dolor?
Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.
FAQ Question 3. Pellentesque dapibus hendrerit tortor. Donec vitae orci sed dolor?
Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.
<dl class="accordion">
<dt>FAQ Question 1. Pellentesque dapibus hendrerit tortor. Donec vitae orci sed dolor?</dt>
<dd>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</dd>
<dt>FAQ Question 2. Pellentesque dapibus hendrerit tortor. Donec vitae orci sed dolor?</dt>
<dd>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</dd>
<dt>FAQ Question 3. Pellentesque dapibus hendrerit tortor. Donec vitae orci sed dolor?</dt>
<dd>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</dd>
</dl>

Vertical Tabs

  • Tab 1
  • Tab 2
  • Tab 3

Chicago has a number of successful incubators that help entrepreneurs get their start-ups off the ground, but incubation is only the beginning. We help entrepreneurs go beyond the basics, providing engagement and insight on how to execute a successful business plan, grow your team, and cultivate better products and services.

Accelerators provide instruction and create opportunities for investment. While The Cultivator creates similar opportunities, we do not “graduate” companies after a few months or weeks of instruction. The Cultivator partners with growing businesses that can benefit from the accountabilities, measurement, experience, guidance, and investment of our Members.

The Cultivator has an active investment fund which we use to accelerate the growth and potential of companies that partner with us, but our investment goes beyond capital. We help business owners make the most of their resources, including capital, talent, and tech. Our holistic approach to business development enables entrepreneurs to do more with the resources they already have while considering new, viable alternatives when needed.

<div class="resp-tabs resp-tabs--vertical">
  <ul class="resp-tabs-list resp-tabs-group">
    <li>Tab 1</li>
    <li>Tab 2</li>
    <li>Tab 3</li>
  </ul>
  <div class="resp-tabs-container resp-tabs-group">
    <div>
      <p>Chicago has a number of successful incubators that help entrepreneurs get their start-ups off the ground, but incubation is only the beginning. We help
        entrepreneurs go beyond the basics, providing engagement and insight on how to execute a successful business plan, grow your team, and cultivate better
        products and services.</p>
    </div>
    <div>
      <p>Accelerators provide instruction and create opportunities for investment. While The Cultivator creates similar opportunities, we do not “graduate” companies
        after a few months or weeks of instruction. The Cultivator partners with growing businesses that can benefit from the accountabilities, measurement,
        experience, guidance, and investment of our Members.</p>
    </div>
    <div>
      <p>The Cultivator has an active investment fund which we use to accelerate the growth and potential of companies that partner with us, but our investment
        goes beyond capital. We help business owners make the most of their resources, including capital, talent, and tech. Our holistic approach to business
        development enables entrepreneurs to do more with the resources they already have while considering new, viable alternatives when needed.</p>
    </div>
  </div>
</div>

Horizontal Tabs

  • Tab 1
  • Tab 2
  • Tab 3

Chicago has a number of successful incubators that help entrepreneurs get their start-ups off the ground, but incubation is only the beginning. We help entrepreneurs go beyond the basics, providing engagement and insight on how to execute a successful business plan, grow your team, and cultivate better products and services.

Accelerators provide instruction and create opportunities for investment. While The Cultivator creates similar opportunities, we do not “graduate” companies after a few months or weeks of instruction. The Cultivator partners with growing businesses that can benefit from the accountabilities, measurement, experience, guidance, and investment of our Members.

The Cultivator has an active investment fund which we use to accelerate the growth and potential of companies that partner with us, but our investment goes beyond capital. We help business owners make the most of their resources, including capital, talent, and tech. Our holistic approach to business development enables entrepreneurs to do more with the resources they already have while considering new, viable alternatives when needed.

<div class="resp-tabs resp-tabs--horizontal">
  <ul class="resp-tabs-list resp-tabs-group">
    <li>Tab 1</li>
    <li>Tab 2</li>
    <li>Tab 3</li>
  </ul>
  <div class="resp-tabs-container resp-tabs-group">
    <div>
      <p>Chicago has a number of successful incubators that help entrepreneurs get their start-ups off the ground, but incubation is only the beginning. We help entrepreneurs go beyond the basics, providing engagement and insight on how to execute a successful business plan, grow your team, and cultivate better products and services.</p>
    </div>
    <div>
      <p>Accelerators provide instruction and create opportunities for investment. While The Cultivator creates similar opportunities, we do not “graduate” companies after a few months or weeks of instruction. The Cultivator partners with growing businesses that can benefit from the accountabilities, measurement, experience, guidance, and investment of our Members.</p>
    </div>
    <div>
      <p>The Cultivator has an active investment fund which we use to accelerate the growth and potential of companies that partner with us, but our investment goes beyond capital. We help business owners make the most of their resources, including capital, talent, and tech. Our holistic approach to business development enables entrepreneurs to do more with the resources they already have while considering new, viable alternatives when needed.</p>
    </div>
  </div>
</div>

Tables

Table Header Table Header Table Header Table Header
Content Goes Here This is longer content Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Content Goes Here This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Content Goes Here This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
<table class="table">
<thead>
  <tr>
    <th>Table Header</th>
    <th>Table Header</th>
    <th>Table Header</th>
    <th>Table Header</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Content Goes Here</td>
    <td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
    <td>Content Goes Here</td>
    <td>Content Goes Here</td>
  </tr>
  <tr>
    <td>Content Goes Here</td>
    <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
    <td>Content Goes Here</td>
    <td>Content Goes Here</td>
  </tr>
  <tr>
    <td>Content Goes Here</td>
    <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
    <td>Content Goes Here</td>
    <td>Content Goes Here</td>
  </tr>
</tbody>
</table>

8 System Components

Alerts

This is an example successful alert message that would be used for forms or login messages more info

This is an example info alert message that would be used for forms or login messages more info

This is an example warning alert message that would be used for forms or login messages more info

This is an example danger alert message that would be used for forms or login messages more info

<div class="alert alert-success">
<p>This is an example successful alert message that would be used for forms or login messages <a href="#">more info</a> </p>
</div>
<div class="alert alert-info">
<p>This is an example info alert message that would be used for forms or login messages <a href="#">more info</a> </p>
</div>
<div class="alert alert-warning">
<p>This is an example warning alert message that would be used for forms or login messages <a href="#">more info</a> </p>
</div>
<div class="alert alert-danger">
<p>This is an example danger alert message that would be used for forms or login messages <a href="#">more info</a> </p>
</div>

9 Page Components

Addressing the accelerating demand for next gen Li-ion batteries

Compatible with the existing lithium-ion manufacturing ecosystem to meet demand for high-performance batteries.

Sionic Energy’s market-ready, lithium-ion battery blends two unique technologies into its battery cell design: a breakthrough, high-capacity silicon anode and advanced electrolytes that optimize anode and cathode performance. Sionic’s technology delivers a revolutionary jump in performance while increasing safety and reducing costs.

Lower cost

By using abundant, pure silicon in the anode, with seamless manufacturing integration, we’re able to reduce the battery production costs by up to 30%.

Higher performance

Our high-capacity silicon anode enables a 50% jump in energy density compared to conventional lithium-ion batteries.

Greater safety

Produced with advanced electrolyte material, our battery delivers performance while increasing safety by mitigating the risks of thermal runaway.

About Sionic Energy

Sionic Energy is led by an executive team with over 45 years of cumulative experience in the battery industry: CEO Ed Williams; CTO Dr. Surya Moganty; and Senior VP of R&D Joon Bae Lee. Well-capitalized as NOHMs Technologies, the company developed its advanced electrolyte products for safety and silicon anode performance over the past four years, laying the foundation for this high capacity silicon battery design and establishing relationships with global automotive and battery companies.

Sionic Energy is making a silicon anode battery a reality

Cutaway of battery

Our breakthrough battery design enables the use of low-cost silicon material in high capacities (>50%) for drop-in manufacturing integration. The technology platform controls the battery cell’s expansion to less than 10% with simple chemical additives and advanced electrolytes, while delivering up to a 50% increase in energy density and up to a 30% reduction in cost. Compatible across all Li-ion cathode materials, our platform provides extensibility across current Li-ion batteries and sustains performance for next generation cathode designs as well.

Sionic Energy is making a silicon anode battery a reality

Cutaway of battery

Our breakthrough battery design enables the use of low-cost silicon material in high capacities (>50%) for drop-in manufacturing integration. The technology platform controls the battery cell’s expansion to less than 10% with simple chemical additives and advanced electrolytes, while delivering up to a 50% increase in energy density and up to a 30% reduction in cost. Compatible across all Li-ion cathode materials, our platform provides extensibility across current Li-ion batteries and sustains performance for next generation cathode designs as well.

How we solve the problem of cost

The cost to produce Sionic Energy’s battery technology is more competitive than the standard graphite anode and below the costs of leading complex silicon materials currently being explored by Li-ion battery markets.

Sionic Energy addresses the primary constraint on costs associated with silicon batteries and materials by using low-cost, micron-sized, pure silicon. There is no pre-processing or engineering required for use of this material, which can be inserted directly into the standard anode material mixing processes for Li-ion battery production.

Our breakthrough electrolyte products enable the resilience of high capacity silicon anodes and provides stability for the higher performing, cheaper cathode materials —significantly detering thermal runaway and eliminating cell-to-cell propagation due to faulty cells—further reducing overall battery costs when compared to leading Li-ion batteries.

How we solve the problem of cost

The cost to produce Sionic Energy’s battery technology is more competitive than the standard graphite anode and below the costs of leading complex silicon materials currently being explored by Li-ion battery markets.

Title 1

Sionic Energy addresses the primary constraint on costs associated with silicon batteries and materials by using low-cost, micron-sized, pure silicon. There is no pre-processing or engineering required for use of this material, which can be inserted directly into the standard anode material mixing processes for Li-ion battery production.

Title 2

Our breakthrough electrolyte products enable the resilience of high capacity silicon anodes and provides stability for the higher performing, cheaper cathode materials —significantly detering thermal runaway and eliminating cell-to-cell propagation due to faulty cells—further reducing overall battery costs when compared to leading Li-ion batteries.

Title 3

Sionic Energy addresses the primary constraint on costs associated with silicon batteries and materials by using low-cost, micron-sized, pure silicon. There is no pre-processing or engineering required for use of this material, which can be inserted directly into the standard anode material mixing processes for Li-ion battery production.

Battery Technology News and Perspectives

Sionic Energy

Sionic Energy awarded $200,000 SuperBoost Grant to advance high-energy, fast-charging batteries

Read More

E-Source provides a 2024 update on the need for silicon anode materials and compelling pathways to near-term commercialization

Read More
Green Car Congress

Green Car Congress: Sionic Energy, formerly NOHMs, launches to commercialize next-generation silicon-anode Li-ion battery cells

Read More
Canary media_logo

Canary Media: Startup Sionic Energy promises next-gen battery benefits without the wait

Read More

Sionic Energy Launches to Commercialize Next-Generation Lithium-Ion Battery Cells for Mobility and Consumer Electronic Applications

Read More

In the battery materials world, the anode’s time has come

Read More

American Chemical Society: NOHMs as a “Company to Watch” in the battery sector (Q2 2020)

Read More

This is a custom content section, where you can enter whatever content you need to show. Choose from a Dark Blue or Black-Blue background color to fit this content in with the surrounding components.

There will be over 500 different EV models available by 2022.

Electric Vehicle Report 2021

E-mobility is accelerating and requires high performance batteries that can be produced within existing manufacturing infrastructure. The need is urgent.

Sionic Energy

Sionic Energy awarded $200,000 SuperBoost Grant to advance high-energy, fast-charging batteries

Read More

E-Source provides a 2024 update on the need for silicon anode materials and compelling pathways to near-term commercialization

Read More
Green Car Congress

Green Car Congress: Sionic Energy, formerly NOHMs, launches to commercialize next-generation silicon-anode Li-ion battery cells

Read More
Canary media_logo

Canary Media: Startup Sionic Energy promises next-gen battery benefits without the wait

Read More

Sionic Energy Launches to Commercialize Next-Generation Lithium-Ion Battery Cells for Mobility and Consumer Electronic Applications

Read More

Global automotive and battery company partnerships

Sionic Energy’s lithium ion battery design has been evaluated through leading battery and product companies.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nibh ex, elementum blandit elit et, fermentum pharetra nunc.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nibh ex, elementum blandit elit et, fermentum pharetra nunc.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nibh ex, elementum blandit elit et, fermentum pharetra nunc.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nibh ex, elementum blandit elit et, fermentum pharetra nunc.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nibh ex, elementum blandit elit et, fermentum pharetra nunc.

Board Members

John Chen

John Chen

John is a Managing General Partner and Co-founder of Phoenix Venture Partners (PVP). He brings over 25 years of experience in venture capital, start-ups, industry, and R&D.
Robert Fenwick-Smith

Robert Fenwick-Smith

Robert is the Founder and Manager of Aravaipa Venture Fund I and Aravaipa Growth Equity Fund II, the world's first EDG pre-SPAC fund. He is the Co-Chairman of Lightning eMotors and is a distinguished businessman and venture capitalist.
Lynden Archer, Ph.D.

Lynden Archer, Ph.D.

Dr. Archer is a Co-Founder of Sionic and the James A. Friend Family Distinguished Professor at the School of Chemical & Biomolecular Engineering at Cornell University. Dr. Archer’s research interests include synthesis, transport properties, and electrochemical applications of polymers and nanoparticle-polymer hybrid materials.
Coppelia Marincovic

Coppelia Marincovic

Coppelia received her BS in Chemical Engineering & Chemistry at Chimie ParisTech and MS in Environmental Sciences at Harvard University. Prior to joining Solvay Ventures North America, Coppelia was Engagement Manager at McKinsey consulting with pharma and biotech companies.

2022

Aviation and Consumer Electronics

The new generation of drones and aviation products along with consumer electronics are constantly seeking smaller footprints and lower weight associated with their batteries. With the exceptional jump in specific energy—lower weight for high energy performance—Sionic’s battery technology addresses one of the primary design points in lithium ion drone batteries, as well as batteries for automotive and consumer electronic products.

2023

Automotive EVs

Critical to sustaining the growth of the electric vehicle (EV) markets is the cost and the safety of the energy storage batteries. Presently about one third (⅓) of the vehicle’s cost, it’s the primary component to lead cost reductions putting the EV’s at cost parity with internal combustion engines (ICE) vehicles to encourage accelerated EV adoption. Sionic’s technology has the potential to achieve up to a 30% cost reduction in lithium ion batteries for electric cars while dramatically increasing energy density performance and mitigating risks of thermal runaway.

Our Current Openings

Next-generation lithium battery technology designed for scaled commercialization

Start a conversation with Sionic Energy about becoming a partner company or investor.

Contact Us

Once in the century, we get the opportunity to shape the future of mobility

Are you ready?

Contact Us

Interested? Want to learn more?

Sionic Energy Launches to Commercialize Next-Generation Lithium-Ion Battery Cells for Mobility and Consumer Electronic Applications

Read Article About Sionic Energy Launch