blob: e5a085d761058168e21f09782656edac79602cb4 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
|
+++
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
+++
{{< rawhtml >}}
<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>
{{< /rawhtml >}}
|
