Attune Styleguide

Colors

$robinsegg-80

#009191

$robinsegg-70

#00A6A6

$robinsegg-60

#00baba

$robinsegg-50

#00d2d0

$robinsegg-40

#4bedeb

$robinsegg-20

#daf7f4

$purpleheart-80

#070384

$purpleheart-60

#2e29ad

$purpleheart-50

#3f32d3

$purpleheart-40

#6d57ff

$purpleheart-20

#f0ebff

$springwood-80

#8c8982

$springwood-60

#e8e2da

$springwood-50

#f4f0e9

$springwood-40

#faf8f5

$catskill-60

#d9ecec

$catskill-50

#e9f4f4

$catskill-40

#f2fcfc

$dandelion-80

#884900

$dandelion-60

#edba53

$dandelion-50

#ffd664

$dandelion-40

#ffe88c

$dandelion-20

#fff7d9

$geraldine-80

#af2761

$geraldine-60

#c9597c

$geraldine-50

#dd728e

$geraldine-40

#ff94a8

$geraldine-20

#ffe2e4

$genoa-60

#005c54

$genoa-50

#007567

$genoa-40

#00947e

$daintree aka $black

#002737

$white

#ffffff

$gray-80

#1a3d4b

$gray-70

#33525f

$gray-60

#667d87

$gray-55 aka $gray

#80939b

$gray-50

#99a9af

$gray-40

#bfc9cd

$gray-30

#d9dfe1

$gray-20

#e6e9eb

$gray-10

#f2f4f5

$gray-5

#f7f9fa

Components

Heading 1

Insurance as easy as it should be

<h1>Insurance as easy as it should be</h1>
Heading 2

Insurance as easy as it should be

<h2>Insurance as easy as it should be</h2>
Heading 3

Insurance as easy as it should be

<h3>Insurance as easy as it should be</h3>
Heading 4

Insurance as easy as it should be

<h4>Insurance as easy as it should be</h4>
Paragraph variants

Example paragraph text

Example paragraph - graytext

Example paragraph - small text

Example paragraph text w/o bottom margin

Example paragraph - bold

Gray text in a paragraph

<p>Example paragraph text</p>
<p class="p__gray">Example paragraph - graytext</p>
<p class="p__small-text">Example paragraph - small text</p>
<p class="p__no-margin">Example paragraph text w/o bottom margin</p>
<p class="p__bold">Example paragraph - bold</p>
<p><span class="gray-text">Gray text</span> in a paragraph</p>
Default Link (A tag)
Best video on the internet
<a href="https://www.youtube.com/watch?v=hUhisi2FBuw" target="_blank">Best video on the internet</a>
Code / Mono-space text

Example monospace text in a paragraph

<p>Example <code>monospace text</code> in a paragraph</p>
Horizontal rule
<hr />
Small text / Fine print
Please check out the semantics of this element before using a small tag. 
<small>
  Please check out the semantics of this
  element before using a small tag.
</small>
Bulleted list examples
  • Pancakes
  • Waffles
  • Pancakes
  • Waffles
  • Pancakes
  • Waffles
<ul class="bulleted-list">
  <li>Pancakes</li>
  <li>Waffles</li>
</ul>
<ul class="bulleted-list bulleted-list__circle">
  <li>Pancakes</li>
  <li>Waffles</li>
</ul>
<ul class="bulleted-list bulleted-list__tight">
  <li>Pancakes</li>
  <li>Waffles</li>
</ul>
Definition list
Effective date
Jan 1, 2032
Underwriter
JoAnne Artesani
<dl>
  <dt>Effective date</dt>
  <dd>Jan 1, 2032</dd>
</dl>
<dl>
  <dt>Underwriter</dt>
  <dd>JoAnne Artesani</dd>
</dl>
Tags / Pill tags
Blank
MAIN
SUCCESS
Success (+margin)
WARNING
Danger
NEUTRAL
Main (I)
Success (I)
Warning (I)
Danger (I)
Neutral (I)
Warning (I)
Danger (I)
Netural (I) 
<div>
  <span class="pill-tag">Blank</span>
</div>
<div>
  <span class="pill-tag pill-tag__main">MAIN</span>
</div>
<div>
  <span class="pill-tag pill-tag__success">SUCCESS</span>
</div>
<div>
  <span class="pill-tag pill-tag__success pill-tag__margin-bottom">Success (+margin)</span>
</div>
<div>
  <span class="pill-tag pill-tag__warning">WARNING</span>
</div>
<div>
  <span class="pill-tag pill-tag__danger">Danger</span>
</div>
<div>
  <span class="pill-tag pill-tag__neutral">NEUTRAL</span>
</div>
<div>
  <span class="pill-tag pill-tag__main-inverted">Main (I)</span>
</div>
<div>
  <span class="pill-tag pill-tag__success-inverted">Success (I)</span>
</div>
<div>
  <span class="pill-tag pill-tag__warning-inverted">Warning (I)</span>
</div>
<div>
  <span class="pill-tag pill-tag__danger-inverted">Danger (I)</span>
</div>
<div>
  <span class="pill-tag pill-tag__neutral-inverted">Neutral (I)</span>
</div>
<div>
  <span class="pill-tag pill-tag__small pill-tag__success-inverted">Warning (I)</span>
</div>
<div>
  <span class="pill-tag pill-tag__small pill-tag__danger">Danger (I)</span>
</div>
<div>
  <span class="pill-tag pill-tag__small pill-tag__neutral-inverted">Netural (I)</span>
</div>
Button with New Tag
<button class="button button__small button__secondary button__relative">
  <span>Apply credit</span>
  <span class="pill-tag pill-tag__new pill-tag__new-corner">NEW</span>
</button>
Dialog text

Dialog text - blank

Dialog text - neutral, full width

Dialog-text - primary

Dialog text - main / attention

Dialog text - success

Dialog text - warning

Dialog text - danger

Dialog text - success, full width

Dialog text - warning with icon

<p class="dialog-text">Dialog text - blank</p>
<p class="dialog-text dialog-text__neutral dialog-text__full-width">Dialog text - neutral, full width</p>
<p class="dialog-text dialog-text__primary dialog-text__full-width">Dialog-text - primary</p>
<p class="dialog-text dialog-text__main dialog-text__full-width">Dialog text - main / attention</p>
<p class="dialog-text dialog-text__success">Dialog text - success</p>
<p class="dialog-text dialog-text__warning">Dialog text - warning</p>
<p class="dialog-text dialog-text__danger">Dialog text - danger</p>
<p class="dialog-text dialog-text__success dialog-text__full-width">Dialog text - success, full width</p>
<p class="dialog-text dialog-text__warning dialog-text__warning-icon dialog-text__full-width">Dialog text - warning with icon</p>
Text input form field
<div class="form-field">
  <label for="styleguide-input-1">Text input</label>
  <input type="text" id="styleguide-input-1" placeholder="Stuff...">
</div>
'Radio' group button input w/ note

Refer to the Super Duper Safe Building Guidelines™️

<div class="form-field">
  <label>Building safety</label>
  <div class="radio-question">
    <div class="radio-question-option">
      <input type="radio" id="styleguide-input-2-safe" name="styleguide-input-2">
      <label for="styleguide-input-2-safe" class="radio-question-label">Safe</label>
    </div>
    <div class="radio-question-option">
      <input type="radio" id="styleguide-input-2-sorta" name="styleguide-input-2">
      <label for="styleguide-input-2-sorta" class="radio-question-label">Sorta</label>
    </div>
    <div class="radio-question-option">
      <input type="radio" id="styleguide-input-2-danger-zone" name="styleguide-input-2">
      <label for="styleguide-input-2-danger-zone" class="radio-question-label">Danger Zone</label>
    </div>
  </div>
  <p class="form-field-note">Refer to the Super Duper Safe Building Guidelines™️</p>
</div>
Image radio question
<div class="form-field">
  <label>Building safety</label>
  <div class="radio-question">
    <div class="radio-question-option radio-question-image-option">
      <input type="radio" id="styleguide-input-7-safe" name="styleguide-input-7">
      <label for="styleguide-input-7-safe" class="radio-question-label">
      <img alt="dummy image" src="http://placeimg.com/320/250/nature" />
      Safe</label>
    </div>
    <div class="radio-question-option radio-question-image-option">
      <input type="radio" id="styleguide-input-7-sorta" name="styleguide-input-7">
      <label for="styleguide-input-7-sorta" class="radio-question-label">
      <img alt="dummy image" src="http://placeimg.com/320/250/arch" />
      Sorta</label>
    </div>
    <div class="radio-question-option radio-question-image-option">
      <input type="radio" id="styleguide-input-7-danger-zone" name="styleguide-input-7">
      <label for="styleguide-input-7-danger-zone" class="radio-question-label">
      <img alt="dummy image" src="http://placeimg.com/320/250/arch" />
      Danger Zone</label>
    </div>
  </div>
</div>
Checkboxes
<div class="form-field">
  <label for="styleguide-input-3" class="checkbox">
    <input id="styleguide-input-3" type="checkbox">
    <span>
      Hired Non-Owned Automotive
      <div class="checkbox-sublabel">This covers your employees cars while they are using them for work</div>
    </span>
  </label>
</div class="form-field">
<div class="form-field">
  <label for="styleguide-input-4" class="checkbox">
    <input id="styleguide-input-4" type="checkbox">
    <span>Cool beans</span>
  </label>
</div class="form-field">
Select input
<div class="form-field">
  <label for="styleguide-input-5">Pick your poison</label>
  <div class="select-container">
    <select id="styleguide-input-5">
      <option selected value="5" disabled hidden>Select one...</option>
      <option value="beer">Beer</option>
      <option value="wine">Wine</option>
      <option value="liquor">Liquor</option>
      <option value="other">Something else</option>
    </select>
  </div>
</div>
Slider input (Requires JS)
$100
<div class="form-field">
  <label for="styleguide-input-6">Damage to premises rented to Olex</label>
  <div class="slider-container">
    <input
    style="background-image: linear-gradient(90deg, #00BABA 0%, #00BABA 50%, #F2F4F5 50%, #F2F4F5 100%);"
    class="slider" type="range" min="5" max="100" step="5" id="styleguide-input-6" />
    <div class="slider-output">$100</div>
  </div>
</div>
Button/Large/Primary
<button class="button button__primary">Submit</button>
Button/Small/Primary
<button class="button button__primary button__small">
  Edit Account
</button>
Button/Small/Secondary
<button class="button button__secondary button__small">
  Edit Account
</button>
Button/Secondary with note
You cannot undo this
<button class="button button__secondary">
  Submit
</button><span class="button-note">You cannot undo this</span>
Nav button group example
<nav class="nav-button-group">
  <button class="button button__small button__secondary">
    Edit
  </button>
  <button class="button button__small button__primary">
    Bind Quote
  </button>
</nav>
Nav button group example 2
<nav class="nav-button-group nav-button-group__space-between">
  <button class="button button__nav button__transparent button__small">
    <span class="button-icon icon-arrow-left"></span>
    Back
  </button>
  <div>
    <button class="button button__small button__secondary">
      Delete
    </button>
    <button class="button button__small button__secondary">
      Edit
    </button>
    <button class="button button__small button__primary">
      Bind Quote
    </button>
  </div>
</nav>
Ordered list <NOT IMPLEMENTED>
  1. Pizza
  2. Fried Chicken
  3. Sourdough Bread
<ol>
  <li>Pizza</li>
  <li>Fried Chicken</li>
  <li>Sourdough Bread</li>
</ol>