diff options
Diffstat (limited to 'exampleSite/content/blog/content/blog/content/docs/colors.md')
| -rw-r--r-- | exampleSite/content/blog/content/blog/content/docs/colors.md | 141 |
1 files changed, 0 insertions, 141 deletions
diff --git a/exampleSite/content/blog/content/blog/content/docs/colors.md b/exampleSite/content/blog/content/blog/content/docs/colors.md deleted file mode 100644 index d59e0fc..0000000 --- a/exampleSite/content/blog/content/blog/content/docs/colors.md +++ /dev/null @@ -1,141 +0,0 @@ -+++ -date = "2017-04-10T16:43:14+01:00" -draft = false -weight = 210 -description = "The basic set of colors" -title = "Colors" -bref="Kube has a basic set of colors for text, links, buttons, states and gray palette. These colors help to create uniformity and harmony in the look of UI elements. All colors are carefully selected and combined with each other. Of course, you can change the color scheme to your choice in the framework settings." -toc = true -+++ - -<h3 class="section-head">Text</h3> -<p>Contrasting black color for headings and less intense dark gray for the text helps to improve readability.</p> -<div class="example"> - <div class="swatch-box"> - <div class="swatch-item"> - <span class="swatch swatch-bg-headings"></span> - <h5>Headings</h5> - <p>$color-headings</p> - </div> - <div class="swatch-item"> - <span class="swatch swatch-bg-text"></span> - <h5>Text</h5> - <p>$color-text</p> - </div> - </div> -</div> -<h3 class="section-head" id="h-links"><a href="#h-links">Links</a></h3> -<p>Classic blue links and soft red for the hover state makes links visible and predictable.</p> -<div class="example"> - <div class="swatch-box"> - <div class="swatch-item"> - <span class="swatch swatch-bg-link"></span> - <h5>Link</h5> - <p>$color-link</p> - </div> - <div class="swatch-item"> - <span class="swatch swatch-bg-link-hover"></span> - <h5>Hover</h5> - <p>$color-link-hover</p> - </div> - </div> -</div> -<h3 class="section-head" id="h-buttons"><a href="#h-buttons">Buttons</a></h3> -<p>Blue color for primary buttons for greater consistency with links. Black color for secondary buttons allows you build a variety of UI.</p> -<div class="example"> - <div class="swatch-box"> - <div class="swatch-item"> - <span class="swatch swatch-bg-button-primary"></span> - <h5>Primary</h5> - <p>$color-button-primary</p> - </div> - <div class="swatch-item"> - <span class="swatch swatch-bg-button-secondary"></span> - <h5>Secondary</h5> - <p>$color-button-secondary</p> - </div> - </div> -</div> -<h3 class="section-head" id="h-states"><a href="#h-states">States</a></h3> -<p>All possible states of the UI are in the simple and intuitive color scheme helps to focus the user's attention when creating an interactive UI.</p> -<div class="example"> - <div class="swatch-box"> - <div class="swatch-item"> - <span class="swatch bg-error"></span> - <h5>Error</h5> - <p>$color-error</p> - </div> - <div class="swatch-item"> - <span class="swatch bg-focus"></span> - <h5>Focus</h5> - <p>$color-focus</p> - </div> - <div class="swatch-item"> - <span class="swatch bg-success"></span> - <h5>Success</h5> - <p>$color-success</p> - </div> - <div class="swatch-item"> - <span class="swatch bg-warning"></span> - <h5>Warning</h5> - <p>$color-warning</p> - </div> - </div> -</div> -<h3 class="section-head" id="h-extra"><a href="#h-extra">Extra</a></h3> -<p>Special color to highlight areas of interaction with the interface. And the white color for all cases.</p> -<div class="example"> - <div class="swatch-box"> - <div class="swatch-item"> - <span class="swatch bg-highlight"></span> - <h5>Highlight</h5> - <p>$color-highlight</p> - </div> - <div class="swatch-item"> - <span class="swatch swatch-bg-inverted"></span> - <h5>Inverted</h5> - <p>$color-inverted</p> - </div> - </div> -</div> -<h3 class="section-head" id="h-grayscale"><a href="#h-grayscale">Grayscale</a></h3> -<p>Harmonious and well-thought-out scheme of gray for a broad range of tasks in the designing of the interface from controls to backgrounds.</p> -<div class="example"> - <div class="swatch-box"> - <div class="swatch-item"> - <span class="swatch bg-black"></span> - <h5>Black</h5> - <p>$color-black</p> - </div> - <div class="swatch-item"> - <span class="swatch bg-darkgray"></span> - <h5>Darkgray</h5> - <p>$color-darkgray</p> - </div> - <div class="swatch-item"> - <span class="swatch bg-midgray"></span> - <h5>Midgray</h5> - <p>$color-midgray</p> - </div> - <div class="swatch-item"> - <span class="swatch bg-gray"></span> - <h5>Gray</h5> - <p>$color-gray</p> - </div> - <div class="swatch-item"> - <span class="swatch bg-lightgray"></span> - <h5>Lightgray</h5> - <p>$color-lightgray</p> - </div> - <div class="swatch-item"> - <span class="swatch bg-silver"></span> - <h5>Silver</h5> - <p>$color-silver</p> - </div> - <div class="swatch-item"> - <span class="swatch bg-aluminum"></span> - <h5>Aluminum</h5> - <p>$color-aluminum</p> - </div> - </div> -</div>
\ No newline at end of file |