Design tokens | Web components of La Silla Vacía

Design tokens are named entities that store visual design information. These are used in place of hard-coded values (such as hex values for color or pixels for spacing) in order to maintain a scalable, consistent system for UI development.

Colour Palettes

Primary palette values. Accessed via map(colors, primary, <key>)

#444848 dark

#44a5db base

#2d3132 xdark

Secondary palette values. Accessed via map(colors, secondary, <key>)

#dddddd light

#b2babe base

#898d90 dark

Productos palette values. Accessed via map(colors, productos, <key>)

#cd2843 caribe

#f6b217 santander

#376b97 opinion

#00537f siONo

#a6d164 conversaciones

#675fb5 quienEsQuien

#f06f38 hagameElCruce

#5b3485 elIq

#904091 laboratorio

#033a5a laSillaLlena

Red palette values. Accessed via map(colors, red, <key>)

#f6b217 santander

#cd2843 caribe

#009a67 deLaPaz

#b2406e deLaMujer

#566275 rural

#b5805d deLaMineria

#723158 cachaca

#1c7b8d deEducacion

#414184 lider

#296653 ambiental

#537185 deInnovacion

#D06032 social

#623F6B cultural

Partidos palette values. Accessed via map(colors, partidos, <key>)

#03a855 alianzaVerde

#7f0101 afros

#a8a8a8 asi

#7e00ff cambioRadical

#4ad4ed centroDemocratico

#a6d164 coalicionColombia

#012bb3 conservador

#723158 farc

#1c7b8d indígenas

#f08800 laU

#cf2a24 liberal

#d40096 listaDeLaDecencia

#d40096 mais

#001865 mira

#bb9c3c opcionCiudadana

#a8a8a8 otros

#f0dc00 polo

#c00d0d wietse

Espaciales palette values. Accessed via map(colors, espaciales, <key>)

#009a67 procesoDePaz

#00b16b elecciones2015

Neutral palette values. Accessed via map(colors, neutral, <key>)

#efeff0 lightest

#b9b9c0 lighter

#8c8c9c light

#778 base

#636373 dark

#3f3f46 darker

#1f1f20 darkest

Borders

Width and radii tokens are used to style element borders. Accessed via map(borders, <key>).

Key	Value
`width-thin`	1px
`width-thick`	2px
`width-thicker`	4px
`width-thickest`	8px
`radius-small`	0.125rem
`radius-default`	0.25rem
`radius-circle`	50%

Breakpoints

Breakpoint tokens are used within @media queries. Accessed via map(breakpoints, <key>).

Key	Value
`min`	280px
`xsmall`	360px
`small`	480px
`medium`	504px
`large`	800px
`xlarge`	960px
`max`	1280px

Font families

Font family tokens are used for typographic styling. Accessed via map(fonts, <key>).

Key	Value
`family-sans`	‘Roboto’, sans-serif
`family-sans-especial`	‘Lato’, Helvetica, sans-serif
`family-serif`	‘Roboto Slab’,serif
`family-serif-especial`	‘Georgia’, serif
`family-monospace`	‘Source Code Pro’, monospace
`family-system`	-apple-system, BlinkMacSystemFont, ‘Segoe UI’, Roboto, Oxygen, Ubuntu, Cantarell, ‘Open Sans’, ‘Helvetica Neue’, sans-serif

Layers

Layering tokens set the z-index layer value for elements. Accessed via map(layers, <key>).

Key	Value
`modal`	9000
`backdrop`	8000
`overlay`	1000
`default`	1
`underlay`	-1

Sizes

Sizing tokens describe the dimensions of elements. Accessed via map(sizes, <key>).

Key	Value
`xsmall`	0.25rem
`small`	0.75rem
`medium`	1.5rem
`large`	3rem
`xlarge`	4.5rem

Spacing

Spacing tokens describe the distance between elements. Accessed via map(spaces, <key>).

Key	Value
`xsmall`	0.25rem
`small`	0.5rem
`medium`	1rem
`large`	1.5rem
`xlarge`	3rem
`xxlarge`	4.5rem