Vitreo
Foundations
NotificationsView all
TOTheo Okafor approved the Q4 release plan2 min agoNew order #11330 for $204.12 from Nora Svensson28 min agoHSHana Sato mentioned you in ticket #20931 hour agoPayout of $12,989.62 sent to Riverstone Bank •• 74662 hours agoMCMei Chen shared Roadmap 2.0 with youYesterday
MLMaya Lindqvistmaya.lindqvist@northwind.test
ProfileSettingsBillingHelp center
Sign out

Colours

Every colour in Vitreo, as tokens

Accent

The theme colour. It changes with the colour theme.

Accent
50#EEF0FF
100#E0E3FF
200#C5CAFF
300#A2A8FE
400#7F83FA
500#6461F2
600#5446E6
700#4637C9
800#3A2FA2
900#312C80
950#1E1A4B
Code 
<div class="ramp">
  <b class="ramp-name">Accent</b><div class="ramp-step" style="--c: #EEF0FF"><span class="ramp-chip"></span><small>50</small><code>#EEF0FF</code></div><div class="ramp-step" style="--c: #E0E3FF"><span class="ramp-chip"></span><small>100</small><code>#E0E3FF</code></div><div class="ramp-step" style="--c: #C5CAFF"><span class="ramp-chip"></span><small>200</small><code>#C5CAFF</code></div><div class="ramp-step" style="--c: #A2A8FE"><span class="ramp-chip"></span><small>300</small><code>#A2A8FE</code></div><div class="ramp-step" style="--c: #7F83FA"><span class="ramp-chip"></span><small>400</small><code>#7F83FA</code></div><div class="ramp-step" style="--c: #6461F2"><span class="ramp-chip"></span><small>500</small><code>#6461F2</code></div><div class="ramp-step" style="--c: #5446E6"><span class="ramp-chip"></span><small>600</small><code>#5446E6</code></div><div class="ramp-step" style="--c: #4637C9"><span class="ramp-chip"></span><small>700</small><code>#4637C9</code></div><div class="ramp-step" style="--c: #3A2FA2"><span class="ramp-chip"></span><small>800</small><code>#3A2FA2</code></div><div class="ramp-step" style="--c: #312C80"><span class="ramp-chip"></span><small>900</small><code>#312C80</code></div><div class="ramp-step" style="--c: #1E1A4B"><span class="ramp-chip"></span><small>950</small><code>#1E1A4B</code></div>
</div>

Neutral

Greys with a hint of blue.

Neutral
50#F3F4F4
100#E7E8EA
200#D1D3D6
300#B5B8BD
400#969AA2
500#7F838B
600#6A6F77
700#585C63
800#474A50
900#3B3E42
950#232528
Code 
<div class="ramp">
  <b class="ramp-name">Neutral</b><div class="ramp-step" style="--c: #F3F4F4"><span class="ramp-chip"></span><small>50</small><code>#F3F4F4</code></div><div class="ramp-step" style="--c: #E7E8EA"><span class="ramp-chip"></span><small>100</small><code>#E7E8EA</code></div><div class="ramp-step" style="--c: #D1D3D6"><span class="ramp-chip"></span><small>200</small><code>#D1D3D6</code></div><div class="ramp-step" style="--c: #B5B8BD"><span class="ramp-chip"></span><small>300</small><code>#B5B8BD</code></div><div class="ramp-step" style="--c: #969AA2"><span class="ramp-chip"></span><small>400</small><code>#969AA2</code></div><div class="ramp-step" style="--c: #7F838B"><span class="ramp-chip"></span><small>500</small><code>#7F838B</code></div><div class="ramp-step" style="--c: #6A6F77"><span class="ramp-chip"></span><small>600</small><code>#6A6F77</code></div><div class="ramp-step" style="--c: #585C63"><span class="ramp-chip"></span><small>700</small><code>#585C63</code></div><div class="ramp-step" style="--c: #474A50"><span class="ramp-chip"></span><small>800</small><code>#474A50</code></div><div class="ramp-step" style="--c: #3B3E42"><span class="ramp-chip"></span><small>900</small><code>#3B3E42</code></div><div class="ramp-step" style="--c: #232528"><span class="ramp-chip"></span><small>950</small><code>#232528</code></div>
</div>

Meaning

Success, warning, danger and info.

Success
50#ECF7EE
100#D8EFDC
200#B3E0BB
300#83CC92
400#48B366
500#049D48
600#04853C
700#016F30
800#025A26
900#004B1F
950#012E11
Warning
50#FCF2E7
100#F9E4CD
200#F2CB9F
300#E7AA61
400#D38706
500#B47306
600#986106
700#7F5004
800#684000
900#573501
950#361F00
Danger
50#FEF0EE
100#FEE0DD
200#FEC2BC
300#FC9890
400#EF6A64
500#DF4443
600#C6282E
700#A81A22
800#88191D
900#6F191A
950#460E0E
Info
50#EAF5FF
100#D5EBFF
200#ADD9FF
300#73BFFE
400#1BA1F9
500#0689D7
600#0374B7
700#046098
800#024E7D
900#024169
950#012742
Code 
<div class="ramp">
  <b class="ramp-name">Success</b><div class="ramp-step" style="--c: #ECF7EE"><span class="ramp-chip"></span><small>50</small><code>#ECF7EE</code></div><div class="ramp-step" style="--c: #D8EFDC"><span class="ramp-chip"></span><small>100</small><code>#D8EFDC</code></div><div class="ramp-step" style="--c: #B3E0BB"><span class="ramp-chip"></span><small>200</small><code>#B3E0BB</code></div><div class="ramp-step" style="--c: #83CC92"><span class="ramp-chip"></span><small>300</small><code>#83CC92</code></div><div class="ramp-step" style="--c: #48B366"><span class="ramp-chip"></span><small>400</small><code>#48B366</code></div><div class="ramp-step" style="--c: #049D48"><span class="ramp-chip"></span><small>500</small><code>#049D48</code></div><div class="ramp-step" style="--c: #04853C"><span class="ramp-chip"></span><small>600</small><code>#04853C</code></div><div class="ramp-step" style="--c: #016F30"><span class="ramp-chip"></span><small>700</small><code>#016F30</code></div><div class="ramp-step" style="--c: #025A26"><span class="ramp-chip"></span><small>800</small><code>#025A26</code></div><div class="ramp-step" style="--c: #004B1F"><span class="ramp-chip"></span><small>900</small><code>#004B1F</code></div><div class="ramp-step" style="--c: #012E11"><span class="ramp-chip"></span><small>950</small><code>#012E11</code></div>
</div>
<div class="ramp">
  <b class="ramp-name">Warning</b><div class="ramp-step" style="--c: #FCF2E7"><span class="ramp-chip"></span><small>50</small><code>#FCF2E7</code></div><div class="ramp-step" style="--c: #F9E4CD"><span class="ramp-chip"></span><small>100</small><code>#F9E4CD</code></div><div class="ramp-step" style="--c: #F2CB9F"><span class="ramp-chip"></span><small>200</small><code>#F2CB9F</code></div><div class="ramp-step" style="--c: #E7AA61"><span class="ramp-chip"></span><small>300</small><code>#E7AA61</code></div><div class="ramp-step" style="--c: #D38706"><span class="ramp-chip"></span><small>400</small><code>#D38706</code></div><div class="ramp-step" style="--c: #B47306"><span class="ramp-chip"></span><small>500</small><code>#B47306</code></div><div class="ramp-step" style="--c: #986106"><span class="ramp-chip"></span><small>600</small><code>#986106</code></div><div class="ramp-step" style="--c: #7F5004"><span class="ramp-chip"></span><small>700</small><code>#7F5004</code></div><div class="ramp-step" style="--c: #684000"><span class="ramp-chip"></span><small>800</small><code>#684000</code></div><div class="ramp-step" style="--c: #573501"><span class="ramp-chip"></span><small>900</small><code>#573501</code></div><div class="ramp-step" style="--c: #361F00"><span class="ramp-chip"></span><small>950</small><code>#361F00</code></div>
</div>
<div class="ramp">
  <b class="ramp-name">Danger</b><div class="ramp-step" style="--c: #FEF0EE"><span class="ramp-chip"></span><small>50</small><code>#FEF0EE</code></div><div class="ramp-step" style="--c: #FEE0DD"><span class="ramp-chip"></span><small>100</small><code>#FEE0DD</code></div><div class="ramp-step" style="--c: #FEC2BC"><span class="ramp-chip"></span><small>200</small><code>#FEC2BC</code></div><div class="ramp-step" style="--c: #FC9890"><span class="ramp-chip"></span><small>300</small><code>#FC9890</code></div><div class="ramp-step" style="--c: #EF6A64"><span class="ramp-chip"></span><small>400</small><code>#EF6A64</code></div><div class="ramp-step" style="--c: #DF4443"><span class="ramp-chip"></span><small>500</small><code>#DF4443</code></div><div class="ramp-step" style="--c: #C6282E"><span class="ramp-chip"></span><small>600</small><code>#C6282E</code></div><div class="ramp-step" style="--c: #A81A22"><span class="ramp-chip"></span><small>700</small><code>#A81A22</code></div><div class="ramp-step" style="--c: #88191D"><span class="ramp-chip"></span><small>800</small><code>#88191D</code></div><div class="ramp-step" style="--c: #6F191A"><span class="ramp-chip"></span><small>900</small><code>#6F191A</code></div><div class="ramp-step" style="--c: #460E0E"><span class="ramp-chip"></span><small>950</small><code>#460E0E</code></div>
</div>
<div class="ramp">
  <b class="ramp-name">Info</b><div class="ramp-step" style="--c: #EAF5FF"><span class="ramp-chip"></span><small>50</small><code>#EAF5FF</code></div><div class="ramp-step" style="--c: #D5EBFF"><span class="ramp-chip"></span><small>100</small><code>#D5EBFF</code></div><div class="ramp-step" style="--c: #ADD9FF"><span class="ramp-chip"></span><small>200</small><code>#ADD9FF</code></div><div class="ramp-step" style="--c: #73BFFE"><span class="ramp-chip"></span><small>300</small><code>#73BFFE</code></div><div class="ramp-step" style="--c: #1BA1F9"><span class="ramp-chip"></span><small>400</small><code>#1BA1F9</code></div><div class="ramp-step" style="--c: #0689D7"><span class="ramp-chip"></span><small>500</small><code>#0689D7</code></div><div class="ramp-step" style="--c: #0374B7"><span class="ramp-chip"></span><small>600</small><code>#0374B7</code></div><div class="ramp-step" style="--c: #046098"><span class="ramp-chip"></span><small>700</small><code>#046098</code></div><div class="ramp-step" style="--c: #024E7D"><span class="ramp-chip"></span><small>800</small><code>#024E7D</code></div><div class="ramp-step" style="--c: #024169"><span class="ramp-chip"></span><small>900</small><code>#024169</code></div><div class="ramp-step" style="--c: #012742"><span class="ramp-chip"></span><small>950</small><code>#012742</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.