<<<<<<< HEAD
---
title: "Styleguide"
description: Sakura Dori
date: 2018-07-08T11:39:59+10:00
weight: 100
draft: false
bref: Living Styleguide of Base, Elements, Components
toc: true
type: styleguide
layout: styleguide
---

<p class="lead">
    Starting with a short paragraph to <em>lead</em> into your content? This is lead text. The max character width within an article context is shorter and only 60 characters wide.
</p>

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Esse eaque consectetur minus accusantium! Alias ullam ipsa quidem magnam tenetur ex iusto quisquam libero molestiae eveniet veritatis error unde suscipit asperiores corporis veniam, fugit doloremque. Consectetur dolor laborum necessitatibus quis dolorum ad error porro, harum et atque excepturi qui iure ratione animi unde iusto fugiat facere consequatur dignissimos debitis eaque.

## Brand Logos

<div class="flex" style="font-size: 50px;">
    <div>
    



<svg class="">
    <use xlink:href="https://tokaido.io/images/brands/ironstar/logo/_sprite.svg#full"></use>
</svg>



    



<svg class="">
    <use xlink:href="https://tokaido.io/images/brands/ironstar/logo/_sprite.svg#brandmark"></use>
</svg>



    



<svg class="">
    <use xlink:href="https://tokaido.io/images/brands/ironstar/logo/_sprite.svg#title"></use>
</svg>



    </div>
    <div>
    



<svg class="">
    <use xlink:href="https://tokaido.io/images/brands/tokaido/logo/_sprite.svg#full"></use>
</svg>



    



<svg class="">
    <use xlink:href="https://tokaido.io/images/brands/tokaido/logo/_sprite.svg#brandmark"></use>
</svg>



    



<svg class="">
    <use xlink:href="https://tokaido.io/images/brands/tokaido/logo/_sprite.svg#title"></use>
</svg>



    </div>
</div>

Ipsa esse exercitationem dolorum unde enim! Adipisci consequuntur mollitia animi sed molestiae suscipit quod nostrum non, obcaecati aperiam inventore, minima provident excepturi. Possimus doloribus aperiam non qui repellat, quae exercitationem nesciunt? 

## Headings & Text Styles
            
The heading above is level 2. Consectetur dolor laborum necessitatibus quis dolorum ad error porro, harum et atque excepturi qui iure ratione animi unde iusto fugiat facere consequatur dignissimos debitis eaque. Distinctio minus similique cum deserunt qui facilis dolorum fugiat placeat? Ipsa esse exercitationem dolorum unde enim!

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Esse eaque consectetur minus accusantium! Alias ullam ipsa quidem magnam tenetur ex iusto quisquam libero molestiae eveniet veritatis error unde suscipit asperiores corporis veniam, fugit doloremque. Consectetur dolor laborum necessitatibus quis dolorum ad error porro, harum et atque excepturi qui iure ratione animi unde iusto fugiat facere consequatur dignissimos debitis eaque. Distinctio minus similique cum deserunt qui facilis dolorum fugiat placeat? Ipsa esse exercitationem dolorum unde enim! Adipisci consequuntur mollitia animi sed molestiae suscipit quod nostrum non, obcaecati aperiam inventore, minima provident excepturi. Possimus doloribus aperiam non qui repellat, quae exercitationem nesciunt?

### Primary Heading 3
            
Alias ullam ipsa quidem magnam tenetur ex iusto quisquam libero molestiae eveniet veritatis error unde suscipit asperiores corporis veniam, fugit doloremque. Consectetur dolor laborum necessitatibus quis dolorum ad error porro, harum et atque excepturi qui iure ratione animi unde iusto fugiat facere consequatur dignissimos debitis eaque.

#### Primary Heading 4 (Unused)
            
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Esse eaque consectetur minus accusantium! Alias ullam ipsa quidem magnam tenetur ex iusto quisquam libero molestiae eveniet veritatis error unde suscipit asperiores corporis veniam, fugit doloremque. Consectetur dolor laborum necessitatibus quis dolorum ad error porro, harum et atque excepturi qui iure ratione animi unde iusto fugiat facere consequatur dignissimos debitis eaque. Distinctio minus similique cum deserunt qui facilis dolorum fugiat placeat? Ipsa esse exercitationem dolorum unde enim! Adipisci consequuntur mollitia animi sed molestiae suscipit quod nostrum non, obcaecati aperiam inventore, minima provident excepturi. Possimus doloribus aperiam non qui repellat, quae exercitationem nesciunt?

Consectetur dolor laborum necessitatibus quis dolorum ad error porro, harum et atque excepturi qui iure ratione animi unde iusto fugiat facere consequatur dignissimos debitis eaque. Distinctio minus similique cum deserunt qui facilis dolorum fugiat placeat? Ipsa esse exercitationem dolorum unde enim!
            
##### Primary Heading 5 (Unused)

Ipsa esse exercitationem dolorum unde enim! Adipisci consequuntur mollitia animi sed molestiae suscipit quod nostrum non, obcaecati aperiam inventore, minima provident excepturi. Possimus doloribus aperiam non qui repellat, quae exercitationem nesciunt?

###### Primary Heading 6
            
Ipsa esse exercitationem dolorum unde enim! Adipisci consequuntur mollitia animi sed molestiae suscipit quod nostrum non, obcaecati aperiam inventore, minima provident excepturi. Possimus doloribus aperiam non qui repellat, quae exercitationem nesciunt? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Esse eaque consectetur minus accusantium!


## Navigation

### Inline
This is a [inline link style](#) used for links within article content. Use a <a class="link-action" href="#">link action</a> for call to actions, or next to controller icons.

### Button

<div style="background: #efefef; padding: 10px">
    <a class="nav-button nav-button--primary" href="https://tokaido.io/docs/getting-started" data-hover-text="Primary"><span>Primary</span></a>
    <a class="nav-button nav-button--secondary" href="https://github.com/ironstar-io/tokaido" data-hover-text="Secondary"><span>Secondary</span></a>
    <a class="nav-button nav-button--tertiary" href="https://github.com/ironstar-io/tokaido"><span>Tertiary</span></a>
</div>
<div style="background: #333; padding: 10px">        
    <a class="nav-button nav-button--primary on-dark" href="https://tokaido.io/docs/getting-started" data-hover-text="on dark"><span>Primary</span></a>
    <a class="nav-button nav-button--secondary on-dark" href="https://github.com/ironstar-io/tokaido" data-hover-text="on dark"><span>Secondary</span></a>
    <a class="nav-button nav-button--tertiary on-dark" href="https://github.com/ironstar-io/tokaido"><span>Tertiary on dark</span></a>
</div>


<div class="message-info">
    TIP: Tertiary looks best with an indicator or icon.
</div>


```
<a class="nav-button nav-button--[[TYPE]]" href="#" data-hover-text="[[HOVER TEXT]]">
    <span>[[NORMAL TEXT]]</span>
</a>
```

#### More examples


<div class="message-warning">
    <strong>NOTE!</strong> There are limitations to the hover text. Please take note as described in the buttons below.
</div>


<div style="background: #efefef; padding: 10px">
    <a class="nav-button nav-button--primary" href="https://tokaido.io/docs/getting-started" data-hover-text="must be shorter to work"><span>Different hover text on Primary</span></a>
    <a class="nav-button nav-button--secondary" href="https://github.com/ironstar-io/tokaido" data-hover-text="it is left aligned"><span>And when it's on Secondary</span></a>
    <a class="nav-button nav-button--tertiary" href="https://github.com/ironstar-io/tokaido"><span class="nav--has-external">Tertiary with External indicator</span></a>
</div>


## Lists
- Lorem, ipsum dolor.
- Lorem ipsum dolor sit amet.
- Lorem, ipsum.

1. One
2. Two
3. Three
4. Four
5. Five

Cat
: Fluffy animal everyone likes
: Definition data Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam suscipit excepturi, officia voluptatem fuga ex! In tempore vitae magni alias facere distinctio, voluptatibus unde quod deleniti cupiditate, excepturi, pariatur nulla.

Internet
: Vector of transmission for pictures of cats

## Icons & Indicators

### SVG

<div class="flex" style="font-size: 50px">
    <div>
<svg class="svg-icon">
    <use xlink:href="https://tokaido.io/images/icons.svg#github"></use>
</svg>


</div>
    <div>
<svg class="svg-icon">
    <use xlink:href="https://tokaido.io/images/icons.svg#package"></use>
</svg>


</div>
    <div>
<svg class="svg-icon">
    <use xlink:href="https://tokaido.io/images/icons.svg#send"></use>
</svg>


</div>
    <div>
<svg class="svg-icon">
    <use xlink:href="https://tokaido.io/images/icons.svg#sliders"></use>
</svg>


</div>
    <div>
<svg class="svg-icon">
    <use xlink:href="https://tokaido.io/images/icons.svg#users"></use>
</svg>


</div>
    <div>
<svg class="svg-icon">
    <use xlink:href="https://tokaido.io/images/icons.svg#zap"></use>
</svg>


</div>
</div>
<div class="flex" style="font-size: 50px">
    <div>
<svg class="svg-icon">
    <use xlink:href="https://tokaido.io/images/icons.svg#social-github"></use>
</svg>


</div>
    <div>
<svg class="svg-icon">
    <use xlink:href="https://tokaido.io/images/icons.svg#social-youtube"></use>
</svg>


</div>
    <div>
<svg class="svg-icon">
    <use xlink:href="https://tokaido.io/images/icons.svg#social-twitter"></use>
</svg>


</div>
    <div></div>
    <div></div>
    <div>
<svg class="svg-icon">
    <use xlink:href="https://tokaido.io/images/icons.svg#controller-play"></use>
</svg>


</div>
</div>
<div class="flex" style="font-size: 50px">
    <div>
<svg class="svg-icon">
    <use xlink:href="https://tokaido.io/images/icons.svg#icon-life-buoy"></use>
</svg>


</div>
    <div>
<svg class="svg-icon">
    <use xlink:href="https://tokaido.io/images/icons.svg#icon-map"></use>
</svg>


</div>
    <div>
<svg class="svg-icon">
    <use xlink:href="https://tokaido.io/images/icons.svg#icon-message-circle"></use>
</svg>


</div>
    <div>
<svg class="svg-icon">
    <use xlink:href="https://tokaido.io/images/icons.svg#icon-refresh-cw"></use>
</svg>


</div>
    <div>
<svg class="svg-icon">
    <use xlink:href="https://tokaido.io/images/icons.svg#icon-settings"></use>
</svg>


</div>
    <div>
<svg class="svg-icon">
    <use xlink:href="https://tokaido.io/images/icons.svg#icon-box"></use>
</svg>


</div>
</div>

### Unicode

- ↗ External link indicator
- → Go Forward
- ← Go Back

## Colour Palette &amp; Accessibility Compliance

<div style="display: grid; grid-template-columns: 1fr 1fr;">
    <div style="background: #FFFFFF; display: inline-block; padding: 20px; color:#231F20">Background #FFFFFF 
        <br><small style="color: #fff; background: #231f20; padding: 5px;"> Contrast #231F20</small>
    </div>
    <div style="background: #231F20; display: inline-block; padding: 20px; color:#fff">Text #231F20 
        <br><small style="color: #231F20; background: #fff; padding: 5px;"> Contrast #fff</small>
    </div>
    <div style="background: #02cf7b; display: inline-block; padding: 20px; color:#231F20">Primary #02CF7B
        <br><small style="color: #02cf7b; background: #231F20; padding: 5px;"> Contrast #231F20</small>
    </div>
    <div style="background: #231F20; display: inline-block; padding: 20px; color:#02CF7B"><strong>Inverse</strong> Primary #231F20
        <br><small style="color: #231F20; background: #02CF7B; padding: 5px;"> Contrast #02CF7B</small>
    </div>
    <div style="background: #018851; display: inline-block; padding: 20px; color:#FFFFFF">Secondary #018851 
        <br><small style="color: #000; background: #FFFFFF; padding: 5px;"> Contrast #FFFFFF</small>
    </div>
    <div style="background: #FFFFFF; display: inline-block; padding: 20px; color:#018851"><strong>Inverse</strong> Secondary #FFFFFF 
        <br><small style="color: #FFFFFF; background: #018851; padding: 5px;"> Contrast #018851</small>
    </div>
    <div style="background: #F5F5F5; display: inline-block; padding: 20px; color:#79676B">Alternate Background #F5F5F5 
        <br><small style="color: #fff; background: #79676B; padding: 5px;"> Contrast #79676B</small>
        
    </div>
    <div style="background: #79676B; display: inline-block; padding: 20px; color:#FFFFFF">Alternate Text #79676B 
        <br><small style="color: #79676B; background: #FFFFFF; padding: 5px;"> Contrast #FFFFFF</small>
    </div>
    <div style="background: #904C77; display: inline-block; padding: 20px; color:#FFFFFF">Tertiary #904C77 
        <br><small style="color: #904C77; background: #FFFFFF; padding: 5px;"> Contrast #FFFFFF</small>
    </div>
    <div style="background: #FFFFFF; display: inline-block; padding: 20px; color:#904C77"><strong>Inverse</strong> Tertiary #FFFFFF 
        <br><small style="color: #FFFFFF; background: #904C77; padding: 5px;"> Contrast #904C77</small>
    </div>
    
    
</div>

## Code

#### Options

lang
: `bash`
: `go`
: `php`
: `git`

line
: `numbers`: start each line with a number

line-start
: integer: `1` (default) 




<pre><code class="language-css">p { color: red }
</code></pre>





<pre class="" ><code class="language-bash">UNISON_VERSION=2.48.4
curl -L https://github.com/bcpierce00/unison/archive/${UNISON_VERSION}.tar.gz | tar zxv -C /tmp
cd /tmp/unison-${UNISON_VERSION}
sed -i -e 's/GLIBC_SUPPORT_INOTIFY 0/GLIBC_SUPPORT_INOTIFY 1/' src/fsmonitor/linux/inotify_stubs.c
make UISTYLE=text NATIVE=true STATIC=true
sudo cp src/unison src/unison-fsmonitor /usr/local/bin
sudo chmod +x /usr/local/bin/unison-fsmonitor</code></pre>





<pre><code class="language-markup">&lt;svg xmlns="http://www.w3.org/2000/svg"&gt;
    &lt;symbol viewBox="0 0 100 100" id="square_icon"&gt;
        &lt;path d="M10 10H90V90H10Z"/&gt;
    &lt;/symbol&gt;
    &lt;symbol viewBox="0 0 100 100" id="circle_icon"&gt;
        &lt;circle cx="50" cy="50" r="40"/&gt;
    &lt;/symbol&gt;
&lt;/svg&gt;</code></pre>


## Messages


<div class="message-info">
    <p>This is just information. Totam suscipit excepturi, officia voluptatem fuga ex!</p>

<p>In tempore vitae magni alias facere distinctio, voluptatibus unde quod deleniti cupiditate, excepturi, pariatur nulla.</p>

</div>



<div class="message-error">
    <h6>This is an important message</h6>
    In tempore vitae magni alias facere distinctio!
</div>



<div class="message-success">
    <h6>Congrats!</h6>
    <p>This is just information. Totam suscipit excepturi, officia voluptatem fuga ex!</p>

<p>In tempore vitae magni alias facere distinctio, voluptatibus unde quod deleniti cupiditate, excepturi, pariatur nulla.</p>

</div>



## Panels

For areas that you want to focus attention. Use sparingly!


<div class="panel">
    <div class="in-container">
        <div class="panel_content">
            <p class="lead">Tokaido is currently in Beta.</p>
<p>Please <a href="#">let us know</a> if there are any problems</p>
=======
---
title: "Styleguide"
description: Sakura Dori
date: 2018-07-08T11:39:59+10:00
weight: 100
draft: false
bref: Living Styleguide of Base, Elements, Components
toc: true
type: styleguide
layout: styleguide
---

<p class="lead">
    Starting with a short paragraph to <em>lead</em> into your content? This is lead text. The max character width within an article context is shorter and only 60 characters wide.
</p>

<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Esse eaque consectetur minus accusantium! Alias ullam ipsa quidem magnam tenetur ex iusto quisquam libero molestiae eveniet veritatis error unde suscipit asperiores corporis veniam, fugit doloremque. Consectetur dolor laborum necessitatibus quis dolorum ad error porro, harum et atque excepturi qui iure ratione animi unde iusto fugiat facere consequatur dignissimos debitis eaque.</p>

<h2 id="brand-logos">Brand Logos</h2>

<div class="flex" style="font-size: 50px;">
    <div>
    



<svg class="">
    <use xlink:href="https://tokaido.io/images/brands/ironstar/logo/_sprite.svg#full"></use>
</svg>



    



<svg class="">
    <use xlink:href="https://tokaido.io/images/brands/ironstar/logo/_sprite.svg#brandmark"></use>
</svg>



    



<svg class="">
    <use xlink:href="https://tokaido.io/images/brands/ironstar/logo/_sprite.svg#title"></use>
</svg>



    </div>
    <div>
    



<svg class="">
    <use xlink:href="https://tokaido.io/images/brands/tokaido/logo/_sprite.svg#full"></use>
</svg>



    



<svg class="">
    <use xlink:href="https://tokaido.io/images/brands/tokaido/logo/_sprite.svg#brandmark"></use>
</svg>



    



<svg class="">
    <use xlink:href="https://tokaido.io/images/brands/tokaido/logo/_sprite.svg#title"></use>
</svg>



    </div>
</div>

<p>Ipsa esse exercitationem dolorum unde enim! Adipisci consequuntur mollitia animi sed molestiae suscipit quod nostrum non, obcaecati aperiam inventore, minima provident excepturi. Possimus doloribus aperiam non qui repellat, quae exercitationem nesciunt?</p>

<h2 id="headings-text-styles">Headings &amp; Text Styles</h2>

<p>The heading above is level 2. Consectetur dolor laborum necessitatibus quis dolorum ad error porro, harum et atque excepturi qui iure ratione animi unde iusto fugiat facere consequatur dignissimos debitis eaque. Distinctio minus similique cum deserunt qui facilis dolorum fugiat placeat? Ipsa esse exercitationem dolorum unde enim!</p>

<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Esse eaque consectetur minus accusantium! Alias ullam ipsa quidem magnam tenetur ex iusto quisquam libero molestiae eveniet veritatis error unde suscipit asperiores corporis veniam, fugit doloremque. Consectetur dolor laborum necessitatibus quis dolorum ad error porro, harum et atque excepturi qui iure ratione animi unde iusto fugiat facere consequatur dignissimos debitis eaque. Distinctio minus similique cum deserunt qui facilis dolorum fugiat placeat? Ipsa esse exercitationem dolorum unde enim! Adipisci consequuntur mollitia animi sed molestiae suscipit quod nostrum non, obcaecati aperiam inventore, minima provident excepturi. Possimus doloribus aperiam non qui repellat, quae exercitationem nesciunt?</p>

<h3 id="primary-heading-3">Primary Heading 3</h3>

<p>Alias ullam ipsa quidem magnam tenetur ex iusto quisquam libero molestiae eveniet veritatis error unde suscipit asperiores corporis veniam, fugit doloremque. Consectetur dolor laborum necessitatibus quis dolorum ad error porro, harum et atque excepturi qui iure ratione animi unde iusto fugiat facere consequatur dignissimos debitis eaque.</p>

<h4 id="primary-heading-4-unused">Primary Heading 4 (Unused)</h4>

<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Esse eaque consectetur minus accusantium! Alias ullam ipsa quidem magnam tenetur ex iusto quisquam libero molestiae eveniet veritatis error unde suscipit asperiores corporis veniam, fugit doloremque. Consectetur dolor laborum necessitatibus quis dolorum ad error porro, harum et atque excepturi qui iure ratione animi unde iusto fugiat facere consequatur dignissimos debitis eaque. Distinctio minus similique cum deserunt qui facilis dolorum fugiat placeat? Ipsa esse exercitationem dolorum unde enim! Adipisci consequuntur mollitia animi sed molestiae suscipit quod nostrum non, obcaecati aperiam inventore, minima provident excepturi. Possimus doloribus aperiam non qui repellat, quae exercitationem nesciunt?</p>

<p>Consectetur dolor laborum necessitatibus quis dolorum ad error porro, harum et atque excepturi qui iure ratione animi unde iusto fugiat facere consequatur dignissimos debitis eaque. Distinctio minus similique cum deserunt qui facilis dolorum fugiat placeat? Ipsa esse exercitationem dolorum unde enim!</p>

<h5 id="primary-heading-5-unused">Primary Heading 5 (Unused)</h5>

<p>Ipsa esse exercitationem dolorum unde enim! Adipisci consequuntur mollitia animi sed molestiae suscipit quod nostrum non, obcaecati aperiam inventore, minima provident excepturi. Possimus doloribus aperiam non qui repellat, quae exercitationem nesciunt?</p>

<h6 id="primary-heading-6">Primary Heading 6</h6>

<p>Ipsa esse exercitationem dolorum unde enim! Adipisci consequuntur mollitia animi sed molestiae suscipit quod nostrum non, obcaecati aperiam inventore, minima provident excepturi. Possimus doloribus aperiam non qui repellat, quae exercitationem nesciunt? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Esse eaque consectetur minus accusantium!</p>

<h2 id="navigation">Navigation</h2>

<h3 id="inline">Inline</h3>

<p>This is a <a href="#">inline link style</a> used for links within article content. Use a <a class="link-action" href="#">link action</a> for call to actions, or next to controller icons.</p>

<h3 id="button">Button</h3>

<div style="background: #efefef; padding: 10px">
    <a class="nav-button nav-button--primary" href="https://docs.tokaido.io/1.5.0/tokaido/get-tokaido" data-hover-text="Primary"><span>Primary</span></a>
    <a class="nav-button nav-button--secondary" href="https://github.com/ironstar-io/tokaido" data-hover-text="Secondary"><span>Secondary</span></a>
    <a class="nav-button nav-button--tertiary" href="https://github.com/ironstar-io/tokaido"><span>Tertiary</span></a>
</div>
<div style="background: #333; padding: 10px">        
    <a class="nav-button nav-button--primary on-dark" href="https://docs.tokaido.io/1.5.0/tokaido/get-tokaido" data-hover-text="on dark"><span>Primary</span></a>
    <a class="nav-button nav-button--secondary on-dark" href="https://github.com/ironstar-io/tokaido" data-hover-text="on dark"><span>Secondary</span></a>
    <a class="nav-button nav-button--tertiary on-dark" href="https://github.com/ironstar-io/tokaido"><span>Tertiary on dark</span></a>
</div>

<div class="message-info">
    TIP: Tertiary looks best with an indicator or icon.
</div>

<pre><code>&lt;a class=&quot;nav-button nav-button--[[TYPE]]&quot; href=&quot;#&quot; data-hover-text=&quot;[[HOVER TEXT]]&quot;&gt;
    &lt;span&gt;[[NORMAL TEXT]]&lt;/span&gt;
&lt;/a&gt;
</code></pre>

<h4 id="more-examples">More examples</h4>

<div class="message-warning">
    <strong>NOTE!</strong> There are limitations to the hover text. Please take note as described in the buttons below.
</div>

<div style="background: #efefef; padding: 10px">
    <a class="nav-button nav-button--primary" href="https://docs.tokaido.io/1.5.0/tokaido/get-tokaido" data-hover-text="must be shorter to work"><span>Different hover text on Primary</span></a>
    <a class="nav-button nav-button--secondary" href="https://github.com/ironstar-io/tokaido" data-hover-text="it is left aligned"><span>And when it's on Secondary</span></a>
    <a class="nav-button nav-button--tertiary" href="https://github.com/ironstar-io/tokaido"><span class="nav--has-external">Tertiary with External indicator</span></a>
</div>

<h2 id="lists">Lists</h2>

<ul>
<li>Lorem, ipsum dolor.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem, ipsum.</li>
</ul>

<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ol>

<dl>
<dt>Cat</dt>
<dd>Fluffy animal everyone likes</dd>
<dd>Definition data Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam suscipit excepturi, officia voluptatem fuga ex! In tempore vitae magni alias facere distinctio, voluptatibus unde quod deleniti cupiditate, excepturi, pariatur nulla.</dd>
<dt>Internet</dt>
<dd>Vector of transmission for pictures of cats</dd>
</dl>

<h2 id="icons-indicators">Icons &amp; Indicators</h2>

<h3 id="svg">SVG</h3>

<div class="flex" style="font-size: 50px">
    <div>
<svg class="svg-icon">
    <use xlink:href="https://tokaido.io/images/icons.svg#github"></use>
</svg>


</div>
    <div>
<svg class="svg-icon">
    <use xlink:href="https://tokaido.io/images/icons.svg#package"></use>
</svg>


</div>
    <div>
<svg class="svg-icon">
    <use xlink:href="https://tokaido.io/images/icons.svg#send"></use>
</svg>


</div>
    <div>
<svg class="svg-icon">
    <use xlink:href="https://tokaido.io/images/icons.svg#sliders"></use>
</svg>


</div>
    <div>
<svg class="svg-icon">
    <use xlink:href="https://tokaido.io/images/icons.svg#users"></use>
</svg>


</div>
    <div>
<svg class="svg-icon">
    <use xlink:href="https://tokaido.io/images/icons.svg#zap"></use>
</svg>


</div>
</div>
<div class="flex" style="font-size: 50px">
    <div>
<svg class="svg-icon">
    <use xlink:href="https://tokaido.io/images/icons.svg#social-github"></use>
</svg>


</div>
    <div>
<svg class="svg-icon">
    <use xlink:href="https://tokaido.io/images/icons.svg#social-youtube"></use>
</svg>


</div>
    <div>
<svg class="svg-icon">
    <use xlink:href="https://tokaido.io/images/icons.svg#social-twitter"></use>
</svg>


</div>
    <div></div>
    <div></div>
    <div>
<svg class="svg-icon">
    <use xlink:href="https://tokaido.io/images/icons.svg#controller-play"></use>
</svg>


</div>
</div>
<div class="flex" style="font-size: 50px">
    <div>
<svg class="svg-icon">
    <use xlink:href="https://tokaido.io/images/icons.svg#icon-life-buoy"></use>
</svg>


</div>
    <div>
<svg class="svg-icon">
    <use xlink:href="https://tokaido.io/images/icons.svg#icon-map"></use>
</svg>


</div>
    <div>
<svg class="svg-icon">
    <use xlink:href="https://tokaido.io/images/icons.svg#icon-message-circle"></use>
</svg>


</div>
    <div>
<svg class="svg-icon">
    <use xlink:href="https://tokaido.io/images/icons.svg#icon-refresh-cw"></use>
</svg>


</div>
    <div>
<svg class="svg-icon">
    <use xlink:href="https://tokaido.io/images/icons.svg#icon-settings"></use>
</svg>


</div>
    <div>
<svg class="svg-icon">
    <use xlink:href="https://tokaido.io/images/icons.svg#icon-box"></use>
</svg>


</div>
</div>

<h3 id="unicode">Unicode</h3>

<ul>
<li>↗ External link indicator</li>
<li>→ Go Forward</li>
<li>← Go Back</li>
</ul>

<h2 id="colour-palette-amp-accessibility-compliance">Colour Palette &amp; Accessibility Compliance</h2>

<div style="display: grid; grid-template-columns: 1fr 1fr;">
    <div style="background: #FFFFFF; display: inline-block; padding: 20px; color:#231F20">Background #FFFFFF 
        <br><small style="color: #fff; background: #231f20; padding: 5px;"> Contrast #231F20</small>
    </div>
    <div style="background: #231F20; display: inline-block; padding: 20px; color:#fff">Text #231F20 
        <br><small style="color: #231F20; background: #fff; padding: 5px;"> Contrast #fff</small>
    </div>
    <div style="background: #02cf7b; display: inline-block; padding: 20px; color:#231F20">Primary #02CF7B
        <br><small style="color: #02cf7b; background: #231F20; padding: 5px;"> Contrast #231F20</small>
    </div>
    <div style="background: #231F20; display: inline-block; padding: 20px; color:#02CF7B"><strong>Inverse</strong> Primary #231F20
        <br><small style="color: #231F20; background: #02CF7B; padding: 5px;"> Contrast #02CF7B</small>
    </div>
    <div style="background: #018851; display: inline-block; padding: 20px; color:#FFFFFF">Secondary #018851 
        <br><small style="color: #000; background: #FFFFFF; padding: 5px;"> Contrast #FFFFFF</small>
    </div>
    <div style="background: #FFFFFF; display: inline-block; padding: 20px; color:#018851"><strong>Inverse</strong> Secondary #FFFFFF 
        <br><small style="color: #FFFFFF; background: #018851; padding: 5px;"> Contrast #018851</small>
    </div>
    <div style="background: #F5F5F5; display: inline-block; padding: 20px; color:#79676B">Alternate Background #F5F5F5 
        <br><small style="color: #fff; background: #79676B; padding: 5px;"> Contrast #79676B</small>
        
    </div>
    <div style="background: #79676B; display: inline-block; padding: 20px; color:#FFFFFF">Alternate Text #79676B 
        <br><small style="color: #79676B; background: #FFFFFF; padding: 5px;"> Contrast #FFFFFF</small>
    </div>
    <div style="background: #904C77; display: inline-block; padding: 20px; color:#FFFFFF">Tertiary #904C77 
        <br><small style="color: #904C77; background: #FFFFFF; padding: 5px;"> Contrast #FFFFFF</small>
    </div>
    <div style="background: #FFFFFF; display: inline-block; padding: 20px; color:#904C77"><strong>Inverse</strong> Tertiary #FFFFFF 
        <br><small style="color: #FFFFFF; background: #904C77; padding: 5px;"> Contrast #904C77</small>
    </div>
    
    
</div>

<h2 id="code">Code</h2>

<h4 id="options">Options</h4>

<dl>
<dt>lang</dt>
<dd><code>bash</code></dd>
<dd><code>go</code></dd>
<dd><code>php</code></dd>
<dd><code>git</code></dd>
<dt>line</dt>
<dd><code>numbers</code>: start each line with a number</dd>
<dt>line-start</dt>
<dd>integer: <code>1</code> (default)</dd>
</dl>

<pre><code class="language-css">p { color: red }
</code></pre>

<pre class="" ><code class="language-bash">UNISON_VERSION=2.48.4
curl -L https://github.com/bcpierce00/unison/archive/${UNISON_VERSION}.tar.gz | tar zxv -C /tmp
cd /tmp/unison-${UNISON_VERSION}
sed -i -e 's/GLIBC_SUPPORT_INOTIFY 0/GLIBC_SUPPORT_INOTIFY 1/' src/fsmonitor/linux/inotify_stubs.c
make UISTYLE=text NATIVE=true STATIC=true
sudo cp src/unison src/unison-fsmonitor /usr/local/bin
sudo chmod +x /usr/local/bin/unison-fsmonitor</code></pre>

<pre><code class="language-markup">&lt;svg xmlns="http://www.w3.org/2000/svg"&gt;
    &lt;symbol viewBox="0 0 100 100" id="square_icon"&gt;
        &lt;path d="M10 10H90V90H10Z"/&gt;
    &lt;/symbol&gt;
    &lt;symbol viewBox="0 0 100 100" id="circle_icon"&gt;
        &lt;circle cx="50" cy="50" r="40"/&gt;
    &lt;/symbol&gt;
&lt;/svg&gt;</code></pre>

<h2 id="messages">Messages</h2>

<div class="message-info">
    <p>This is just information. Totam suscipit excepturi, officia voluptatem fuga ex!</p>

<p>In tempore vitae magni alias facere distinctio, voluptatibus unde quod deleniti cupiditate, excepturi, pariatur nulla.</p>

</div>

<div class="message-error">
    <h6>This is an important message</h6>
    In tempore vitae magni alias facere distinctio!
</div>

<div class="message-success">
    <h6>Congrats!</h6>
    <p>This is just information. Totam suscipit excepturi, officia voluptatem fuga ex!</p>

<p>In tempore vitae magni alias facere distinctio, voluptatibus unde quod deleniti cupiditate, excepturi, pariatur nulla.</p>

</div>

<h2 id="panels">Panels</h2>

<p>For areas that you want to focus attention. Use sparingly!</p>

<div class="panel">
    <div class="in-container">
        <div class="panel_content">
            <p><p class="lead">Tokaido is currently in Beta.</p>
<p>Please <a href="#">let us know</a> if there are any problems</p>
&gt;&gt;&gt;&gt;&gt;&gt;&gt; 50d71704ebd1fc111b594228f38cf101b1017fb1</p>

        </div>
    </div>
</div>

        </div>
    </div>
</div>