Vitreo
Foundations

Colours

Every colour in Vitreo, as tokens

Accent

The theme colour. It changes with the colour theme.

Accent
50#F4F6FF
100#E8ECFE
200#CFD7FF
300#B1BCFE
400#8E9AFF
500#7179FB
600#5657DD
700#4645BB
800#373896
900#2B2D74
950#1A1B4D
Code 
<div class="ramp">
  <b class="ramp-name">Accent</b><div class="ramp-step" style="--c: #F4F6FF"><span class="ramp-chip"></span><small>50</small><code>#F4F6FF</code></div><div class="ramp-step" style="--c: #E8ECFE"><span class="ramp-chip"></span><small>100</small><code>#E8ECFE</code></div><div class="ramp-step" style="--c: #CFD7FF"><span class="ramp-chip"></span><small>200</small><code>#CFD7FF</code></div><div class="ramp-step" style="--c: #B1BCFE"><span class="ramp-chip"></span><small>300</small><code>#B1BCFE</code></div><div class="ramp-step" style="--c: #8E9AFF"><span class="ramp-chip"></span><small>400</small><code>#8E9AFF</code></div><div class="ramp-step" style="--c: #7179FB"><span class="ramp-chip"></span><small>500</small><code>#7179FB</code></div><div class="ramp-step" style="--c: #5657DD"><span class="ramp-chip"></span><small>600</small><code>#5657DD</code></div><div class="ramp-step" style="--c: #4645BB"><span class="ramp-chip"></span><small>700</small><code>#4645BB</code></div><div class="ramp-step" style="--c: #373896"><span class="ramp-chip"></span><small>800</small><code>#373896</code></div><div class="ramp-step" style="--c: #2B2D74"><span class="ramp-chip"></span><small>900</small><code>#2B2D74</code></div><div class="ramp-step" style="--c: #1A1B4D"><span class="ramp-chip"></span><small>950</small><code>#1A1B4D</code></div>
</div>

Neutral

Greys with a hint of blue.

Neutral
50#F6F7F8
100#ECEDEE
200#D7D9DC
300#BEC1C6
400#A1A5AC
500#868B93
600#696D76
700#565A61
800#45484E
900#36383C
950#212326
Code 
<div class="ramp">
  <b class="ramp-name">Neutral</b><div class="ramp-step" style="--c: #F6F7F8"><span class="ramp-chip"></span><small>50</small><code>#F6F7F8</code></div><div class="ramp-step" style="--c: #ECEDEE"><span class="ramp-chip"></span><small>100</small><code>#ECEDEE</code></div><div class="ramp-step" style="--c: #D7D9DC"><span class="ramp-chip"></span><small>200</small><code>#D7D9DC</code></div><div class="ramp-step" style="--c: #BEC1C6"><span class="ramp-chip"></span><small>300</small><code>#BEC1C6</code></div><div class="ramp-step" style="--c: #A1A5AC"><span class="ramp-chip"></span><small>400</small><code>#A1A5AC</code></div><div class="ramp-step" style="--c: #868B93"><span class="ramp-chip"></span><small>500</small><code>#868B93</code></div><div class="ramp-step" style="--c: #696D76"><span class="ramp-chip"></span><small>600</small><code>#696D76</code></div><div class="ramp-step" style="--c: #565A61"><span class="ramp-chip"></span><small>700</small><code>#565A61</code></div><div class="ramp-step" style="--c: #45484E"><span class="ramp-chip"></span><small>800</small><code>#45484E</code></div><div class="ramp-step" style="--c: #36383C"><span class="ramp-chip"></span><small>900</small><code>#36383C</code></div><div class="ramp-step" style="--c: #212326"><span class="ramp-chip"></span><small>950</small><code>#212326</code></div>
</div>

Meaning

Success, warning, danger and info.

Success
50#F0FAF1
100#DFF3E2
200#BCE5C4
300#8FD49D
400#58BD73
500#10A64E
600#04833B
700#006C2F
800#025725
900#02441C
950#012C0F
Warning
50#FFF5EB
100#FCEAD5
200#F6D2AA
300#EEB470
400#E09113
500#BE7905
600#975F06
700#7C4E04
800#653E00
900#4F3002
950#331D01
Danger
50#FFF4F3
100#FFE6E4
200#FFCBC5
300#FFA69E
400#F97770
500#E74E4C
600#C71F2A
700#A7101E
800#861118
900#691214
950#45080A
Info
50#F0F8FF
100#DFEFFE
200#B9DEFF
300#88C8FE
400#3CACFF
500#0891E3
600#0272B5
700#025E95
800#014B79
900#023B60
950#00253F
Code 
<div class="ramp">
  <b class="ramp-name">Success</b><div class="ramp-step" style="--c: #F0FAF1"><span class="ramp-chip"></span><small>50</small><code>#F0FAF1</code></div><div class="ramp-step" style="--c: #DFF3E2"><span class="ramp-chip"></span><small>100</small><code>#DFF3E2</code></div><div class="ramp-step" style="--c: #BCE5C4"><span class="ramp-chip"></span><small>200</small><code>#BCE5C4</code></div><div class="ramp-step" style="--c: #8FD49D"><span class="ramp-chip"></span><small>300</small><code>#8FD49D</code></div><div class="ramp-step" style="--c: #58BD73"><span class="ramp-chip"></span><small>400</small><code>#58BD73</code></div><div class="ramp-step" style="--c: #10A64E"><span class="ramp-chip"></span><small>500</small><code>#10A64E</code></div><div class="ramp-step" style="--c: #04833B"><span class="ramp-chip"></span><small>600</small><code>#04833B</code></div><div class="ramp-step" style="--c: #006C2F"><span class="ramp-chip"></span><small>700</small><code>#006C2F</code></div><div class="ramp-step" style="--c: #025725"><span class="ramp-chip"></span><small>800</small><code>#025725</code></div><div class="ramp-step" style="--c: #02441C"><span class="ramp-chip"></span><small>900</small><code>#02441C</code></div><div class="ramp-step" style="--c: #012C0F"><span class="ramp-chip"></span><small>950</small><code>#012C0F</code></div>
</div>
<div class="ramp">
  <b class="ramp-name">Warning</b><div class="ramp-step" style="--c: #FFF5EB"><span class="ramp-chip"></span><small>50</small><code>#FFF5EB</code></div><div class="ramp-step" style="--c: #FCEAD5"><span class="ramp-chip"></span><small>100</small><code>#FCEAD5</code></div><div class="ramp-step" style="--c: #F6D2AA"><span class="ramp-chip"></span><small>200</small><code>#F6D2AA</code></div><div class="ramp-step" style="--c: #EEB470"><span class="ramp-chip"></span><small>300</small><code>#EEB470</code></div><div class="ramp-step" style="--c: #E09113"><span class="ramp-chip"></span><small>400</small><code>#E09113</code></div><div class="ramp-step" style="--c: #BE7905"><span class="ramp-chip"></span><small>500</small><code>#BE7905</code></div><div class="ramp-step" style="--c: #975F06"><span class="ramp-chip"></span><small>600</small><code>#975F06</code></div><div class="ramp-step" style="--c: #7C4E04"><span class="ramp-chip"></span><small>700</small><code>#7C4E04</code></div><div class="ramp-step" style="--c: #653E00"><span class="ramp-chip"></span><small>800</small><code>#653E00</code></div><div class="ramp-step" style="--c: #4F3002"><span class="ramp-chip"></span><small>900</small><code>#4F3002</code></div><div class="ramp-step" style="--c: #331D01"><span class="ramp-chip"></span><small>950</small><code>#331D01</code></div>
</div>
<div class="ramp">
  <b class="ramp-name">Danger</b><div class="ramp-step" style="--c: #FFF4F3"><span class="ramp-chip"></span><small>50</small><code>#FFF4F3</code></div><div class="ramp-step" style="--c: #FFE6E4"><span class="ramp-chip"></span><small>100</small><code>#FFE6E4</code></div><div class="ramp-step" style="--c: #FFCBC5"><span class="ramp-chip"></span><small>200</small><code>#FFCBC5</code></div><div class="ramp-step" style="--c: #FFA69E"><span class="ramp-chip"></span><small>300</small><code>#FFA69E</code></div><div class="ramp-step" style="--c: #F97770"><span class="ramp-chip"></span><small>400</small><code>#F97770</code></div><div class="ramp-step" style="--c: #E74E4C"><span class="ramp-chip"></span><small>500</small><code>#E74E4C</code></div><div class="ramp-step" style="--c: #C71F2A"><span class="ramp-chip"></span><small>600</small><code>#C71F2A</code></div><div class="ramp-step" style="--c: #A7101E"><span class="ramp-chip"></span><small>700</small><code>#A7101E</code></div><div class="ramp-step" style="--c: #861118"><span class="ramp-chip"></span><small>800</small><code>#861118</code></div><div class="ramp-step" style="--c: #691214"><span class="ramp-chip"></span><small>900</small><code>#691214</code></div><div class="ramp-step" style="--c: #45080A"><span class="ramp-chip"></span><small>950</small><code>#45080A</code></div>
</div>
<div class="ramp">
  <b class="ramp-name">Info</b><div class="ramp-step" style="--c: #F0F8FF"><span class="ramp-chip"></span><small>50</small><code>#F0F8FF</code></div><div class="ramp-step" style="--c: #DFEFFE"><span class="ramp-chip"></span><small>100</small><code>#DFEFFE</code></div><div class="ramp-step" style="--c: #B9DEFF"><span class="ramp-chip"></span><small>200</small><code>#B9DEFF</code></div><div class="ramp-step" style="--c: #88C8FE"><span class="ramp-chip"></span><small>300</small><code>#88C8FE</code></div><div class="ramp-step" style="--c: #3CACFF"><span class="ramp-chip"></span><small>400</small><code>#3CACFF</code></div><div class="ramp-step" style="--c: #0891E3"><span class="ramp-chip"></span><small>500</small><code>#0891E3</code></div><div class="ramp-step" style="--c: #0272B5"><span class="ramp-chip"></span><small>600</small><code>#0272B5</code></div><div class="ramp-step" style="--c: #025E95"><span class="ramp-chip"></span><small>700</small><code>#025E95</code></div><div class="ramp-step" style="--c: #014B79"><span class="ramp-chip"></span><small>800</small><code>#014B79</code></div><div class="ramp-step" style="--c: #023B60"><span class="ramp-chip"></span><small>900</small><code>#023B60</code></div><div class="ramp-step" style="--c: #00253F"><span class="ramp-chip"></span><small>950</small><code>#00253F</code></div>
</div>

Surfaces and text

They swap in dark mode.

--bg
--surface
--surface-2
--surface-3
--raised
--fill
--line
--label
--label-2
--label-3
--label-4
--accent
--accent-soft
--accent-text
Code 
<div class="token-grid">
  <div class="token"><span class="token-chip" style="--c: var(--bg)"></span><code>--bg</code></div>
  <div class="token"><span class="token-chip" style="--c: var(--surface)"></span><code>--surface</code></div>
  <div class="token"><span class="token-chip" style="--c: var(--surface-2)"></span><code>--surface-2</code></div>
  <div class="token"><span class="token-chip" style="--c: var(--surface-3)"></span><code>--surface-3</code></div>
  <div class="token"><span class="token-chip" style="--c: var(--raised)"></span><code>--raised</code></div>
  <div class="token"><span class="token-chip" style="--c: var(--fill)"></span><code>--fill</code></div>
  <div class="token"><span class="token-chip" style="--c: var(--line)"></span><code>--line</code></div>
  <div class="token"><span class="token-chip" style="--c: var(--label)"></span><code>--label</code></div>
  <div class="token"><span class="token-chip" style="--c: var(--label-2)"></span><code>--label-2</code></div>
  <div class="token"><span class="token-chip" style="--c: var(--label-3)"></span><code>--label-3</code></div>
  <div class="token"><span class="token-chip" style="--c: var(--label-4)"></span><code>--label-4</code></div>
  <div class="token"><span class="token-chip" style="--c: var(--accent)"></span><code>--accent</code></div>
  <div class="token"><span class="token-chip" style="--c: var(--accent-soft)"></span><code>--accent-soft</code></div>
  <div class="token"><span class="token-chip" style="--c: var(--accent-text)"></span><code>--accent-text</code></div>
</div>
© Vitreo. All rights reserved.