Fase 0 · bewijspagina

De tokenlaag

Elke waarde hieronder komt uit de Figma-collectie evvect/core, via tokens.json naar CSS-variabelen en Tailwind-utilities. Handmatig bijwerken hoeft nooit.

Kleur

ink

#051735

wit 17.79:1 · ink 1.00:1

navy

#122966

wit 13.68:1 · ink 1.30:1

primary

#0675FE

wit 4.21:1 · ink 4.22:1

primary-hover

#0660D2

wit 5.81:1 · ink 3.06:1

accent

#11DEBE

wit 1.72:1 · ink 10.35:1

accent-deep

#0A6E5E

wit 6.17:1 · ink 2.88:1

neutral-50

#F5F6F7

wit 1.08:1 · ink 16.44:1

neutral-100

#EBECEF

wit 1.18:1 · ink 15.06:1

neutral-300

#C8CCD3

wit 1.61:1 · ink 11.04:1

neutral-500

#8F97A4

wit 2.95:1 · ink 6.04:1

neutral-700

#556176

wit 6.25:1 · ink 2.84:1

neutral-900

#1E2E49

wit 13.62:1 · ink 1.31:1

white

#FFFFFF

wit 1.00:1 · ink 17.79:1

success

#22C55E

wit 2.28:1 · ink 7.81:1

warning

#F5A623

wit 2.03:1 · ink 8.78:1

error

#EF4444

wit 3.76:1 · ink 4.73:1

surface

#F5F6F7

wit 1.08:1 · ink 16.44:1

border

#EBECEF

wit 1.18:1 · ink 15.06:1

text-body

#556176

wit 6.25:1 · ink 2.84:1

text-muted

#626B78

wit 5.39:1 · ink 3.30:1

primary-strong

#0A5FCC

wit 5.96:1 · ink 2.98:1

Contrast per ondergrond

Het enige React-eiland in fase 0, bewust op deze bewijspagina en niet op een marketingroute. Zo is aangetoond dat hydratie werkt zonder dat de publieke site 57 kB React meedraagt.

ink — software die evvect heeft17.79:1 · AA tekst
text-body — software die evvect heeft6.25:1 · AA tekst
text-muted — software die evvect heeft5.39:1 · AA tekst
primary-strong — software die evvect heeft5.96:1 · AA tekst
primary — software die evvect heeft4.21:1 · alleen groot / UI
accent — software die evvect heeft1.72:1 · niet gebruiken
white — software die evvect heeft1.00:1 · niet gebruiken

Typeschaal

display · 64px Software die evvect heeft

h1 · 44px Software die evvect heeft

h2 · 34px Software die evvect heeft

h3 · 26px Software die evvect heeft

h4 · 20px Software die evvect heeft

body-lg · 18px Software die evvect heeft

body · 16px Software die evvect heeft

body-sm · 14px Software die evvect heeft

caption · 12px Software die evvect heeft

Radius & besturing

button · 10

card · 16

pill · 999

input · 10

tile · 12

Een link in lopende tekst

Bron: #051735 · gegenereerd uit Figma-bestand tRuQMASwBi4zSxyEseDvUL