Brand
Attract your visitor's attention using brand colors. The main colors of Inkline used for branding are:
<div class="_background-primary"></div>
<div class="_background-secondary"></div>
<div class="_background-light"></div>
<div class="_background-dark"></div>
You can also add brand text colors using text-specific helper classes:
- Primary
- Secondary
- Light
- Dark
<p class="_text-primary"></p>
<p class="_text-secondary"></p>
<p class="_text-light"></p>
<p class="_text-dark"></p>
State
When displaying state information such as info, success, warning, or error messages, you will need to color your message accordingly. The state colors are:
<div class="_background-info"></div>
<div class="_background-success"></div>
<div class="_background-warning"></div>
<div class="_background-danger"></div>
You can also add state text colors using text-specific helper classes:
<p class="_text-info"></p>
<p class="_text-success"></p>
<p class="_text-warning"></p>
<p class="_text-danger"></p>
Basic
Basic colors are useful when working with multiple colors on the same page. The following basic colors are available when using the default variant.
You can use helper classes to add state color backgrounds:
<div class="_background-red"></div>
<div class="_background-orange"></div>
<div class="_background-yellow"></div>
<div class="_background-green"></div>
<div class="_background-teal"></div>
<div class="_background-blue"></div>
<div class="_background-purple"></div>
<div class="_background-pink"></div>
You can also add state text colors using text-specific helper classes:
- Red
- Orange
- Yellow
- Green
- Teal
- Blue
- Purple
- Pink
<p class="_text-red"></p>
<p class="_text-orange"></p>
<p class="_text-yellow"></p>
<p class="_text-green"></p>
<p class="_text-teal"></p>
<p class="_text-blue"></p>
<p class="_text-purple"></p>
<p class="_text-pink"></p>
Neutral
Neutral colors are used for text, background and border colors. You can use different neutral colors to display your content:
<div class="_background-white"></div>
<div class="_background-gray-10"></div>
<div class="_background-gray-20"></div>
<div class="_background-gray-30"></div>
<div class="_background-gray-40"></div>
<div class="_background-gray-50"></div>
<div class="_background-gray-60"></div>
<div class="_background-gray-70"></div>
<div class="_background-gray-80"></div>
<div class="_background-gray-90"></div>
<div class="_background-black"></div>
<div class="_background-transparent"></div>
You can also add neutral text colors using text-specific helper classes:
- White
- 10% Gray
- 20% Gray
- 30% Gray
- 40% Gray
- 50% Gray
- 60% Gray
- 70% Gray
- 80% Gray
- 90% Gray
- Black
<p class="_text-white"></p>
<p class="_text-gray-10"></p>
<p class="_text-gray-20"></p>
<p class="_text-gray-30"></p>
<p class="_text-gray-40"></p>
<p class="_text-gray-50"></p>
<p class="_text-gray-60"></p>
<p class="_text-gray-70"></p>
<p class="_text-gray-80"></p>
<p class="_text-gray-90"></p>
<p class="_text-black"></p>
Inkline provides social media colors from most of your favorite sites.
You can use helper classes to add social media color backgrounds:
<div class="_background-facebook"></div>
<div class="_background-twitter"></div>
<div class="_background-google-plus"></div>
<div class="_background-instagram"></div>
<div class="_background-dribbble"></div>
<div class="_background-flickr"></div>
<div class="_background-linkedin"></div>
<div class="_background-youtube"></div>
<div class="_background-pinterest"></div>
<div class="_background-github"></div>
<div class="_background-tumblr"></div>
<div class="_background-twitch"></div>
<div class="_background-envato"></div>
<div class="_background-vine"></div>
You can also add social media text colors using text-specific helper classes:
- Facebook
- Google Plus
- Instagram
- Dribbble
- Flickr
- LinkedIn
- YouTube
- Pinterest
- GitHub
- Tumblr
- Twitch
- Envato
- Vine
<p class="_text-facebook"></p>
<p class="_text-twitter"></p>
<p class="_text-google-plus"></p>
<p class="_text-instagram"></p>
<p class="_text-dribbble"></p>
<p class="_text-flickr"></p>
<p class="_text-linkedin"></p>
<p class="_text-youtube"></p>
<p class="_text-pinterest"></p>
<p class="_text-github"></p>
<p class="_text-tumblr"></p>
<p class="_text-twitch"></p>
<p class="_text-envato"></p>
<p class="_text-vine"></p>