Color

Un sol verd de marca fa tota la feina d'accent. Tota la resta és una escala neutra que canvia entre clar i fosc. Els valors de sota es llegeixen del full d'estils en temps de compilació.

Verd de marca

El verd és l'únic accent. Omple els botons primaris, marca la pestanya activa, dibuixa la barra sota el títol d'una pàgina i envolta un control enfocat. Com que només significa aquestes coses, el lector aprèn a llegir el verd com a «això fa alguna cosa».

  • --color-green Clar Fosc L'únic accent: botons primaris, pestanya activa, la barra de títol, anells de focus.
  • --color-green-dark Clar Fosc Verd en passar-hi per sobre i en prémer als botons sòlids.
  • --color-green-light Clar Fosc Un to més clar, usat amb moderació.
  • --color-green-text Clar Fosc Verd per a text i enllaços: llegible en clar, verd llima de marca en fosc.
  • --color-green-text-hover Clar Fosc Verd en passar-hi per sobre per a text i enllaços.
  • --color-white Clar Fosc Blanc pur, principalment per a text sobre verd sòlid.

El verd llima és brillant i, a la mida del text del cos sobre fons blanc, no arriba al llindar de contrast. Per això existeix un verd de text separat: el mode clar rebaixa el verd per a text i enllaços, mentre que el mode fosc manté el verd llima de marca. El motiu pel qual existeix s'explica a la pàgina d'accessibilitat. Accessibilitat.

Neutres i superfícies

Els tokens neutres porten dos valors, un per tema, així que una superfície es dissenya en tots dos des del principi. El text es col·loca en tres nivells d'èmfasi; els fons passen de la pàgina, a les bandes tenyides, a les targetes elevades.

  • --bg-primary Clar Fosc El fons de la pàgina.
  • --bg-secondary Clar Fosc Bandes tenyides, escenaris de mostra, capçaleres de codi.
  • --bg-card Clar Fosc Superfícies de targetes i fulls.
  • --bg-nav Clar Fosc El fons difuminat de la navegació.
  • --text-primary Clar Fosc Títols i text d'èmfasi alt.
  • --text-secondary Clar Fosc Text del cos.
  • --text-muted Clar Fosc Metadades, llegendes, etiquetes desactivades.
  • --border-color Clar Fosc Línies fines i vores de targetes.
  • --badge-bg Clar Fosc Emplenat de distintius, etiquetes i capçaleres de taula.
  • --badge-text Clar Fosc Text de distintius i etiquetes.
  • --code-bg Clar Fosc Fons de codi en línia i en bloc.
  • --timeline-line Clar Fosc El carril de la cronologia d'experiència laboral.
  • --device-edge Clar Fosc L'anell exterior del marc del telèfon.
  • --device-button Clar Fosc Els botons laterals del marc del telèfon.

Els tokens d'elevació (les ombres segons el tema) es documenten a la pàgina de Forma i elevació.

Interacció

Els enllaços i els botons sòlids recorren els verds en passar-hi per sobre. Els estats són els mateixos a tot arreu, així que un control sempre et diu què farà.

Estat Enllaços Botons sòlids
Per defecte --color-green-text --color-green
En passar-hi per sobre --color-green-text-hover --color-green-dark
Desactivat Opacitat reduïda; el color no canvia.

Requadres destacats

Els articles llargs usen quatre colors de requadre per assenyalar un parany, un incís, una precaució o una nota neutra. Són l'únic lloc on un color diferent del verd té significat.

Requadre Vora Quan usar-lo
Alerta vermella Un error o parany prou important per aturar el lector.
Consell Un incís útil que no és essencial.
Advertiment Alguna cosa que cal fer amb cura.
Informació Context neutre o una referència a un altre lloc.

Àmbit: els colors dels requadres viuen només a la prosa dels articles. No apareixen mai a la interfície, on el verd i els neutres fan tota la feina.

Aquesta documentació fa una excepció deliberada a aquesta regla. Les targetes de «Fes» i «No facis» de més avall usen verd i vermell, perquè un sistema de disseny que es documenta a si mateix és l'únic lloc on aquests senyals tenen sentit fora de la prosa.

Color d’il·lustració

La interfície se sosté sobre un sol verd, però les capçaleres del blog porten una paleta pròpia. Funciona igual en miniatura: un repertori fix de deu, la llima de la marca sempre present, i un terra suau per sèrie. Com es dibuixen les capçaleres és a la pàgina de Mèdia.

La paleta compartida

Els deu, llegits dels posts reals en compilar. Cada il·lustració en fa servir només uns quants, i d’aquí ve la varietat entre capçaleres; el repertori no canvia mai.

  • Llima
  • Blau marí
  • Corall
  • Verd blavós
  • Pruna
  • Ambre
  • Rosa pàl·lid
  • Cel
  • Carbó
  • Sorra

Un fons per sèrie

Els fons queden deliberadament fora de la paleta: tints suaus, gairebé blancs, que es llegeixen com a terra i no com un dels deu. Cada sèrie publicada conserva el seu propi tint, així que una sèrie es llegeix com un conjunt al feed: la seva identitat viu en aquest fons. A sota, tot el repertori descansa sobre cada terra: la barreja canvia per imatge, la família mai.

  • State Management
  • RN Module Federation
  • RN Foundations
  • Hiring

Ús del color

Fes

Body copy stays neutral.
Deixa que el verd signifiqui una sola cosa: interacció o èmfasi. Si és verd, hauria de ser tocable o digne d'atenció.

No facis

Introduir un segon accent. Un color nou roba el significat que porta el verd.

Fes

A readable green link
Usa el verd de text per al text i els enllaços verds, perquè es mantingui llegible sobre un fons clar.

No facis

Small lime text on white fails the bar
Pintar el verd llima de marca sobre text petit en blanc. No passa el llindar de contrast; per a això és el verd de text.

Fes

Dissenya cada superfície en tots dos temes alhora. Les parelles de tokens fan que això sigui el comportament per defecte, no una idea tardana.

No facis

Recórrer a un color de requadre a la interfície. Aquests pertanyen a la prosa dels articles.
Has vist alguna cosa que no quadra en aquesta pàgina? Escriu-me