Sistema de disseny

El sistema amb què està construït aquest lloc, documentat a partir del full d'estils en viu en comptes d'escrit al seu costat. Els fonaments estableixen la matèria primera. La resta mostra com s'ajunta tot.

Principis

Discret

Un sol color d'accent, usat amb intenció. El verd significa interacció o èmfasi i res més, així que tot el que és verd a la pàgina o bé convida a tocar-lo o bé marca el que importa. Tota la resta és negre, blanc i gris.

Editorial

El contingut mana. L'espai va abans que els ornaments i la tipografia abans que la decoració. La disposició s'aparta perquè es puguin llegir el text i la feina.

Tècnic

Cada valor és una variable de CSS, i aquestes pàgines llegeixen d'aquesta mateixa font quan es compila el lloc. La documentació no es pot desviar del lloc perquè es genera a partir d'ell.

Fonaments

Color Un verd de marca, una escala neutra i el token que manté el verd llegible. Tipografia Un tipus de lletra, una escala basada en rols que baixa un graó segons la pantalla. Disposició Tres columnes, punts de ruptura honestos, una escala d'espaiat de quatre píxels. Forma i elevació L'escala de radis, les ombres segons el tema, la línia fina. Iconografia Icones de línia a l'estil Feather i símbols de marca sòlids. Moviment Transicions curtes i discretes, i l'interruptor de moviment reduït.

Components

Botons Dos nivells, estats reals i què escriure-hi. Etiquetes i xips Distintius que enuncien un fet, etiquetes que porten a algun lloc. Targetes De la targeta base a les targetes de post destacat i de sèrie del blog. Navegació Un sol conjunt de chrome que canvia de forma en tres viewports. Fulls i superposicions La primitiva de bottom sheet que hi ha darrere de cada selector. Patrons d'article Avisos, codi, taules, sumari: el kit dels textos llargs. Cronologia El rail de l'experiència laboral, amb punts de logo i tot. Mèdia Les capçaleres dels posts, el carrusel de fotos, el marc de mòbil i els placeholders.

Contingut

Redacció Anglès britànic, majúscula a l'inici de frase, dates, enllaços, noms de marca. Traducció Quatre idiomes; què es tradueix, què es queda en anglès i la veu que conserva cada llengua. Newsletter Un correu per idioma: el disseny del web a la safata d’entrada, amb el text del mateix post.

Accessibilitat

Accessibilitat Els estàndards que compleix el lloc, i l'honest compromís del contrast del verd.

Un document viu

Les taules de color, tipografia i espaiat d'aquestes pàgines es generen a partir del full d'estils del lloc en temps de compilació. Canvia un token al CSS i les taules d'aquí canvien amb ell. Si l'analitzador ja no pot llegir el full d'estils, la compilació falla en comptes de mostrar una taula buida.