config.design-tokens.yml 11.4 KB
Newer Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# Design Tokens
# Define basic design variables here.
gesso:
  palette:
    brand:
      blue:
        base: '#0071BC'
        light: '#4773aa'
        light-1: '#8ba6ca'
        light-2: '#dce4ef'
        dark: '#205493'
        dark-1: '#112E51'
      ocean-blue:
        base: '#02bfe7'
        light: '#9bdaf1'
        light-1: '#e1f3f8'
        dark: '#00a6d2'
        dark-1: '#046b99'
Eric Bremner's avatar
Eric Bremner committed
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
      org-default:
        uw-black:
          lvl1: '#dfdfdf'
          lvl2: '#a2a2a2'
          lvl3: '#787878'
          lvl4: '#000'
          primary: '#000'
        uw-gold:
          lvl1: '#fffaaa'
          lvl2: '#ffea30'
          lvl3: '#fdd54f'
          lvl4: '#e4b429'
          primary: '#fdd54f'
        uw-white:
          lvl1: '#fff'
          primary: '#fff'
      org-ahs:
        lvl1: '#97dfef'
        lvl2: '#00bed0'
        lvl3: '#0098a5'
        lvl4: '#005963'
        primary: '#005963'
      org-art:
        lvl1: '#ffd5a5'
        lvl2: '#fbaf00'
        lvl3: '#e78100'
        lvl4: '#d93f00'
46
        primary: '#d93f00'
Eric Bremner's avatar
Eric Bremner committed
47
48
49
50
51
      org-eng:
        lvl1: '#d0b4ef'
        lvl2: '#be33da'
        lvl3: '#8100b4'
        lvl4: '#57058b'
52
        primary: '#57058b'
Eric Bremner's avatar
Eric Bremner committed
53
54
55
56
57
      org-env:
        lvl1: '#daf582'
        lvl2: '#bed500'
        lvl3: '#b4be00'
        lvl4: '#607000'
58
        primary: '#607000'
Eric Bremner's avatar
Eric Bremner committed
59
60
61
62
63
      org-mat:
        lvl1: '#ffbeef'
        lvl2: '#ff63aa'
        lvl3: '#df2498'
        lvl4: '#c60078'
64
        primary: '#c60078'
Eric Bremner's avatar
Eric Bremner committed
65
66
67
68
69
      org-sci:
        lvl1: '#b4d5ff'
        lvl2: '#63a0ff'
        lvl3: '#0073ce'
        lvl4: '#0033be'
70
        primary: '#0033be'
Eric Bremner's avatar
Eric Bremner committed
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
      org-ren:
        green: '#00693c'
        red: '#de3831'
        gold: '#d2c295'
      org-stj:
        green: '#01573e'
        gold: '#c88a11'
      org-stp:
        green: '#879637'
        brown: '#584528'
      org-cgc:
        red: '#c4262e'
      org-school:
        lvl1: '#ffa5aa'
        lvl2: '#e41740'
        lvl3: '#b71233'
        lvl4: '#80001f'
        primary: '#b71233'
89
90
    grayscale:
      white: '#fff'
91
92
      gray-1: '#fafafa'
      gray-2: '#eee'
m26lebla's avatar
m26lebla committed
93
      gray-3: '#ccc'
94
      gray-4: '#A2A2A2'
m26lebla's avatar
m26lebla committed
95
      gray-5: '#757575'
96
      gray-6: '#4e4e4e'
m26lebla's avatar
m26lebla committed
97
      gray-7: '#333'
98
      black: '#000'
99
100
101
102
103
104
105
    other:
      yellow:
        base: '#fad980'
        light: '#fff1d2'
      yellow-neon:
        base: '#ff0'
      green:
106
107
        base: '#4d8f46'
        dark: '#0a6700'
108
109
110
111
112
113
114
        light: '#e7f4e4'
      red:
        base: '#e31c3d'
        light: '#e59393'
        light-1: '#f9dede'
        dark: '#cd2026'
        dark-1: '#981b1e'
115
116
        orange-light: '#f69231'
        orange-dark: '#ef6114'
117
118
119
120
121
122
123
  box-shadow:
    0: none
    1: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)
    2: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)
    3: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23)
    4: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22)
    5: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22)
124
    6: 0 0 10px rgba(0, 0, 0, 0.3) ,0 0 0 rgba(0, 0, 0, 0.3)
125
126
127
128
129
130
  constrains:
    sm: 800px
    md: 1440px
    lg: 2200px
  breakpoints:
    xs: 480px
131
132
133
    sm: 641px
    md: 769px
    lg: 1011px
134
    xl: 1200px
135
136
137
    xxl: 1640px
    onek: 1920px
    twok: 2559px
138
139
140
  colors:
    text:
      primary: grayscale.black
m26lebla's avatar
m26lebla committed
141
      secondary: grayscale.gray-6
142
143
      on-light: grayscale.black
      on-dark: grayscale.white
144
145
146
      link: grayscale.gray-6
      link-hover: grayscale.black
      link-active: grayscale.gray-6
147
      link-visited: grayscale.gray-6
148
149
150
    background:
      site: grayscale.white
    button:
151
      default:
m26lebla's avatar
m26lebla committed
152
153
154
        background: grayscale.gray-5
        background-hover: grayscale.gray-2
        background-active: grayscale.gray-5
155
        text: grayscale.white
m26lebla's avatar
m26lebla committed
156
        text-hover: grayscale.gray-6
157
        text-active: grayscale.white
158
159
160
161
162
163
164
      primary:
        background: other.green.base
        background-hover:  other.green.dark
        background-active: other.green.dark
        text: grayscale.white
        text-hover: grayscale.white
        text-active: grayscale.white
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
      secondary:
        background: brand.ocean-blue.base
        background-hover: brand.ocean-blue.dark
        background-active: brand.ocean-blue.dark-1
        text: grayscale.white
        text-hover: grayscale.white
        text-active: grayscale.white
      disabled:
        background: grayscale.gray-2
        text: grayscale.gray-4
      danger:
        background: other.red.base
        background-hover: other.red.dark
        background-active: other.red.dark-1
        text: grayscale.white
        text-hover: grayscale.white
        text-active: grayscale.white
182
183
184
185
186
187
188
      cancel:
        background: other.red.orange-light
        background-hover: other.red.orange-dark
        background-active: other.red.orange-dark
        text: grayscale.white
        text-hover: grayscale.white
        text-active: grayscale.white
189
190
191
192
193
194
195
196
    form:
      background: grayscale.gray-1
      background-active: grayscale.white
      background-checked: brand.blue.base
      background-unchecked: grayscale.white
      border: grayscale.gray-3
      border-dark: grayscale.gray-5
      border-light: grayscale.gray-1
m26lebla's avatar
m26lebla committed
197
198
199
200
201
202
203
      input:
        input-background: grayscale.white
        input-border: grayscale.gray-3
        input-border-focus: grayscale.gray-5
        input-color: grayscale.gray-6
        input-outline: grayscale.gray-2
        input-focus: grayscale.gray-5
204
205
      fieldset:
          fieldset-background: grayscale.gray-1
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
      thumb: grayscale.gray-5
      track: grayscale.gray-4
    mark:
      background: other.yellow-neon.base
      text: grayscale.black
    selection:
      background: brand.blue.base
      text: grayscale.white
    table:
      border: grayscale.gray-5
      background: grayscale.white
      background-head: grayscale.gray-2
      background-foot: grayscale.gray-2
    ui:
      generic:
        background: grayscale.gray-4
        background-darker: grayscale.black
223
        background-dark: grayscale.gray-5
224
225
226
227
228
229
230
231
232
        background-light: grayscale.gray-2
        background-lighter: grayscale.gray-1
        border: grayscale.gray-4
        border-dark: grayscale.gray-6
        border-light: grayscale.gray-2
        text-lighter: grayscale.white
        text-light: grayscale.gray-4
        text-dark: grayscale.gray-5
        text-darker: grayscale.black
wodby's avatar
wodby committed
233
234
235
236
        accent: brand.org-default.uw-black.primary
        accent-dark: brand.org-default.uw-gold.lvl4
        accent-light: brand.org-default.uw-gold.lvl2
        focus: brand.org-default.uw-black.primary
237
238
239
240
241
242
243
244
245
246
247
248
249
      error:
        background: other.red.light-1
        border: other.red.light
      success:
        background: other.green.light
        border: other.green.base
      warning:
        background: other.yellow.light
        border: other.yellow.base
  typography:
    font-family:
      primary:
        name: Primary
250
251
252
        stack: 'georgia, "droid serif", "Times New Roman", Times, serif'
      secondary:
        name: Secondary
253
        stack: 'BureauGrot, impact, "avenir next condensed heavy", "Droid Sans", sans-serif;'
254
255
256
      book:
        name: Book
        stack: '"BureauGrot Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif'
257
258
259
260
261
262
      condensed:
        name: Condensed
        stack: 'BureauGrotCond, impact, "avenir next condensed heavy", "Droid Sans", sans-serif'
      condensedbook:
        name: Condensed-Book
        stack: '"BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif'
263
      system:
264
        name: System  Typ1451-Regular
265
        stack: 'Typ1451-Regular,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif'
266
267
268
269
270
271
272
273
274
      systemlight:
        name: System light Typ1451-Light
        stack: 'Typ1451-light,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif'
      systemmedium:
        name: System Medium  Typ1451-Medium
        stack: 'Typ1451-Medium,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif'
      systembold:
        name: System Bold  Typ1451-Bold
        stack: 'Typ1451-Bold,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif'
275
276
277
      monospace:
        name: Monospace
        stack: 'Consolas, "Lucida Console", "Liberation Mono", "Courier New", monospace, sans-serif'
278
279
280
      iconfont:
        name: icon-font
        stack: 'fdsu-rwd'
281
282
    base-font-size: 16px
    font-size:
283
284
285
286
287
      -6: 7.888px
      -5: 8.88px
      -4: 9.984px
      -3: 11.232px
      -2: 12.64px
288
      -1: 14.22224px
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
      0: 16px
      1: 18px
      2: 20.256px
      3: 22.784px
      4: 25.632px
      5: 28.832px
      6: 32.432px
      7: 36.496px
      8: 41.056px
      9: 46.192px
      10: 51.952px
      11: 58.448px
      12: 65.76px
      13: 73.984px
      14: 83.232px
      15: 93.632px
      16: 105.328px
306
    font-weight:
307
      hairline: 200
308
309
      light: 300
      regular: 400
310
      bold: 600
311
      semibold: 600
312
313
      extrabold: 700
      black: 800
314
315
316
317
318
319
320
321
    line-height:
      tight: 1.1
      base: 1.45
      loose: 1.7
    display:
      display:
        font-family: primary.stack
        font-size: 8
322
        font-weight: regular
323
      h1:
324
        font-family: condensedbook.stack
325
326
        font-size: 8
        font-weight: regular
327
328
        line-height: tight
      h2:
329
        font-family: condensedbook.stack
330
        font-size: 5
331
        font-weight: regular
332
333
        line-height: tight
      h3:
334
        font-family: condensedbook.stack
335
336
        font-size: 3
        font-weight: regular
337
338
        line-height: tight
      h4:
339
        font-family: condensedbook.stack
340
341
        font-size: 2
        font-weight: regular
342
        line-height: tight
343
      h5:
344
        font-family: condensedbook.stack
345
        font-size: 1
346
        font-weight: regular
347
        line-height: tight
348
      h6:
349
        font-family: condensedbook.stack
350
        font-size: 0
351
        font-weight: regular
352
        line-height: tight
353
354
355
356
357
358
359
360
      blockquote:
        font-family: primary.stack
        font-size: 3
        font-weight: regular
        line-height: base
      body:
        color: text.primary
        font-family: primary.stack
361
        font-size: 0
362
363
364
365
366
367
368
369
370
371
372
373
374
375
        font-weight: regular
        line-height: base
      body-large:
        color: text.primary
        font-family: primary.stack
        font-size: 2
        font-weight: regular
        line-height: base
      cite:
        color: text.secondary
        font-family: primary.stack
        font-size: 0
        font-style: normal
        font-weight: semibold
376
        letter-spacing: .02rem
377
        line-height: tight
m26lebla's avatar
m26lebla committed
378
379
380
381
382
383
384
385
386
      input:
        color: text.secondary
        font-family: systemmedium.stack
        font-size: 0
        font-style: normal
        font-weight: semibold
        letter-spacing: .02rem
        line-height: tight

387
388
389
390
391
392
393
394
395
396
397
398
399
400
  transitions:
    ease:
      ease-in-out: 'cubic-bezier(0.4, 0, 0.2, 1)'
      ease-out: 'cubic-bezier(0.0, 0, 0.2, 1)'
      ease-in: 'cubic-bezier(0.4, 0, 1, 1)'
      sharp: 'cubic-bezier(0.4, 0, 0.6, 1)'
    duration:
      shortest: 150ms
      short: 200ms
      standard: 375ms
      long: 400ms
      intro: 270ms
      outro: 195ms
  z-index:
401
402
403
404
405
406
407
408
409
410
    modal: 10
    drawer: 9
    overlay: 9
    nav: 8
    logo: 8
    dropdown: 7
    mobilemenu: 6
    interact: 5
    header: 4
    content: 3
m26lebla's avatar
m26lebla committed
411
    footer: 2
412
413
414
    slides: 2
    wrapper: 2
    background: 1
415
416
  spacing:
    xxs: 4px
417
    xs:  8px
418
419
    sm: 16px
    md: 24px
420
    lg: 32px
421
422
423
    xl: 56px
    xxl: 96px
  gutter-width: 40px