CSS helper classes

<p gray text>Gray text</p>
<p red text>Red text</p>
<p orange text>Orange text</p>
<p yellow text>Yellow text</p>
<p olive text>Olive text</p>
<p green text>Green text</p>
<p teal text>Teal text</p>
<p blue text>Blue text</p>
<p violet text>Violet text</p>
<p purple text>Purple text</p>
<p pink text>Pink text</p>
<p brown text>Brown text</p>
<p muted text>Muted text</p>
<p black text>Black text</p>
<segment inverted compact>
  <p white text>White text</p>
</segment>

<p normal text>Bolding removed</p>
<p bold text>Bolding added</p>
<p italic text>Italic added</p>
<p bold italic text>Bolding and italic added</p>
<p red bold italic text>Color, bolding and italic added</p>

<segment>Segment</segment>
<segment borderless>Segment</segment>

<segment>Segment</segment>
<segment paddingless>Segment</segment>

<button>Button</button>
Text
Text after

<button marginless>Button</button>
Text
Text after

<segment>Segment</segment>
<segment shadowless>Segment</segment>

<div invisible>Hidden text</div>
<div amp-invisible>Hidden on AMP pages only</div>
<div amp-only>Shown only on AMP pages</div>
<div mobile-invisible>Hidden on mobile breakpoint</div>
<div mobile-only>Shown on mobile breakpoint</div>

<segment>
  <header>Mobile invisible</header>
  <button mobile-invisible>Button</button>
</segment>
<segment>
  <header>Mobile only</header>
  <button lg-invisible sm-invisible tablet-invisible>Button</button>
</segment>

<segment>
  <header>Tablet invisible</header>
  <button tablet-invisible>Button</button>
</segment>
<segment>
  <header>Tablet only</header>
  <button lg-invisible sm-invisible mobile-invisible>Button</button>
</segment>

<segment>
  <header>Small screen invisible</header>
  <button sm-invisible>Button</button>
</segment>
<segment>
  <header>Small screen only</header>
  <button lg-invisible tablet-invisible mobile-invisible>Button</button>
</segment>

<segment>
  <header>Large screen invisible</header>
  <button lg-invisible>Button</button>
</segment>
<segment>
  <header>Large screen only</header>
  <button sm-invisible tablet-invisible mobile-invisible>Button</button>
</segment>