-
Notifications
You must be signed in to change notification settings - Fork 0
/
_variables.scss
120 lines (87 loc) · 3.01 KB
/
_variables.scss
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
// = GREYS
// ---------------------------------------------------------------------------
$black: #000;
$white: #fff;
$grey25: #F8F7F5;
$grey50: #F2F0EB;
$grey100: #ECE9E2;
$grey200: #CEC4BB;
$grey300: #A89E95;
$grey400: #867976;
$black50: #3d3636;
$black100: #222222;
// = ACCENT COLORS
// ---------------------------------------------------------------------------
$red100: #D52B1E;
$red200: #C12317;
$successColor: #3E520B;
$successBackground: #E4ECB9;
$successBorder: #DCDB7D;
$alertColor: $black100;
$alertBackground: #FFEFB0;
$alertBorder: #FFD387;
$alertErrorColor: #7F1400;
$alertErrorBackground: #FAD6D0;
$alertErrorBorder: #F8B9BA;
$infoColor: #045371;
$infoBackground: #D1E2F0;
$infoBorder: #ABD3E3;
// = SCAFFOLDING
// ---------------------------------------------------------------------------
$bodyBackground: $grey100;
$contentBackground: $white;
$textColor: $black100;
// = TYPOGRAPHY
// ---------------------------------------------------------------------------
$sansFontFamily: "OTTOSans", "Helvetica", "Arial", sans-serif;
$serifFontFamily: "Georgia", "Geneva", "Times New Roman", serif;
$monoFontFamily: "Menlo", "Monaco", "Consolas", "Courier New", monospace;
$fontIconFamily: "OttoIcons";
$htmlFontSize: 62.5%;
$mobileFontSize: 1.1;
$htmlLineHeight: 1;
$mobileLineHeight: 1.1;
$baseLineHeight: .9;
$bodyFontSize: 1.3;
$bodyLineHeight: $baseLineHeight * 2;
$baseFontFamily: $sansFontFamily;
$fontSize100: 1.0;
$fontSize150: 1.4;
$lineHeight150: 1.9;
$fontSize75: 1.2;
$lineHeight75: 1.7;
$fontSize50: 1.1;
$lineHeight50: 1.6;
$thinFontWeight: 200;
$normalFontWeight: 400;
$boldFontWeight: 700;
// = HEADLINES
// ---------------------------------------------------------------------------
$headFontSize200: 2.6;
$headLineHeight200: 3.0;
$headFontSize100: 2.2;
$headLineHeight100: 2.6;
$headFontSize75: 2.0;
$headLineHeight75: 2.4;
$headFontSize50: 1.8;
$headLineHeight50: 2.2;
$headFontSize25: 1.6;
$headLineHeight25: 2.0;
$headFontSize10: 1.3;
$headLineHeight10: 1.7;
// = TOUCH
// ---------------------------------------------------------------------------
$touchFontSize: $bodyFontSize * 1.5;
$touchLineHeight: $baseLineHeight * 4;
$touchHeadFontSize10: $headFontSize10 * 1.5;
$touchHeadFontSize25: $headFontSize25 * 1.5;
$touchHeadFontSize50: $headFontSize50 * 1.5;
$touchHeadFontSize75: $headFontSize75 * 1.5;
$touchHeadFontSize100: $headFontSize100 * 1.5;
$touchHeadFontSize200: $headFontSize200 * 1.5;
$touchHeadlineHeight10: $headLineHeight10 * 3;
$touchHeadlineHeight25: $headLineHeight25 * 3;
$touchHeadlineHeight50: $headLineHeight50 * 2;
$touchHeadlineHeight75: $headLineHeight75 * 2;
$touchHeadlineHeight100: $headLineHeight100 * 1.5;
$touchHeadlineHeight200: $headLineHeight200 * 1.5;