Fondazione americana del fegato

Guida di stile

Questa pagina delinea gli stili e gli standard correnti per il file Fondazione americana del fegato di LPI.

Colori

Una panoramica dei colori del marchio di questo sito.

Colori e sfumature

Lucidi

primario

Primario

Ultra leggero

Light

Medio

Scuro

Ultra scuro

Comp

secondario

Secondario

Ultra leggero

Light

Medio

Scuro

Ultra scuro

Comp

accento

Accent

Ultra leggero

Light

Medio

Scuro

Ultra scuro

Comp

base

Tavola XY

Ultra leggero

Light

Medio

Scuro

Ultra scuro

Comp

ombra

Ombra

Ultra leggero

Light

Medio

Scuro

Ultra scuro

primario

Transazione 10

Transazione 20

Transazione 40

Transazione 60

Transazione 80

Transazione 90

secondario

Transazione 10

Transazione 20

Transazione 40

Transazione 60

Transazione 80

Transazione 90

accento

Transazione 10

Transazione 20

Transazione 40

Transazione 60

Transazione 80

Transazione 90

base

Transazione 10

Transazione 20

Transazione 40

Transazione 60

Transazione 80

Transazione 90

ombra

Transazione 10

Transazione 20

Transazione 40

Transazione 60

Transazione 80

Transazione 90

Tipografia

Di seguito è riportata una panoramica delle dimensioni e dei pesi della tipografia reattiva per questo sito. Questi sono calcolati da una dimensione di base e una scala matematica.

Titoli

H1 (--xxl)

Titolo 1 Regolare

Titolo 1 Medio

Titolo 1 Grassetto

H2 (--xl)

Titolo 2 Regolare

Titolo 2 Medio

Titolo 2 Grassetto

H3 (--l)

Titolo 3 Regolare

Intestazione media

Titolo 3 Grassetto

H4 (--m)

Titolo 4 Regolare

Titolo 4 Medio

Titolo 4 Grassetto

H5 (--s)

Titolo 5 Regolare

Intestazione media

Titolo 5 Grassetto

H6 (--xs)

Titolo 6 Regolare

Titolo 6 Medio

Titolo 6 Grassetto

Corpo del testo

CORPO TESTO (--m)

Testo m Regolare

Testo m Medio

Testo m Grassetto

TESTO PICCOLO (--s)

Il testo è regolare

Testo s Medio

Il testo è in grassetto

TESTO XTRA PICCOLO (--xs)

Testo xs Regolare

Testo xs Medio

Testo xs Grassetto

Esempi

Titolo 1 (H1)

Questo è un testo di grandi dimensioni. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Titolo 2 (H2)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod Tempor ut labore et dolore incididunt magna aliqua. Ut enim ad minim veniam, quis nostrud esercitazioni ullamco laboris nisi ut aliquip ex EA Commodo consequat.

Titolo 3 (H3)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod Tempor ut labore et dolore incididunt magna aliqua. Ut enim ad minim veniam, quis nostrud esercitazioni ullamco laboris nisi ut aliquip ex EA Commodo consequat.

Titolo 4 (H4)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod Tempor ut labore et dolore incididunt magna aliqua. Ut enim ad minim veniam, quis nostrud esercitazioni ullamco laboris nisi ut aliquip ex EA Commodo consequat.

Titolo 5 (H5)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod Tempor ut labore et dolore incididunt magna aliqua. Ut enim ad minim veniam, quis nostrud esercitazioni ullamco laboris nisi ut aliquip ex EA Commodo consequat.

Titolo 6 (H6)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod Tempor ut labore et dolore incididunt magna aliqua. Ut enim ad minim veniam, quis nostrud esercitazioni ullamco laboris nisi ut aliquip ex EA Commodo consequat.

Bottoni

I pulsanti a tinta unita e con contorno sono disponibili in tutti i set di colori, incluso il bianco e nero.

TASTI SU PRIORITÀ BASSA CHIARA

Primario
Schema primario
Secondario Schema secondario
Accent
Contorno di accento Tavola XY
Contorno di base

TASTI SU PRIORITÀ BASSA SCURA

Primario
Schema primario
Secondario Schema secondario
Accent
Contorno di accento White
Contorno bianco

SCALA DEL PULSANTE

btn--primario / btn--xs

btn--primario / btn--xs

btn--primario / btn--m

btn--primario / btn--l

btn--primario / btn--xl

btn--primario / btn--xxl

larghezze

Ci sono sei valori che puoi usare per controllare la larghezza dell'elemento. Rispondono automaticamente.

--larghezza-xs

--larghezza-s

--larghezza-m

--larghezza-l

--larghezza-xl

--larghezza-xxl

Imbottitura sezione

L'imbottitura per le sezioni è reattiva e basata su un moltiplicatore del sistema di spaziatura del nucleo.

Nessuna

XS

S

M

L

XL

XXL

Spaziatura

Esistono sei livelli di spaziatura reattiva calcolati da una dimensione di base e una scala matematica. Ciò garantisce che margine, riempimento e spazi vuoti corrispondano perfettamente.

--spazio-xs

--spazio-s

--spazio-m

--spazio-l

--spazio-xl

--spazio-xxl

Imbottitura degli elementi

Ecco i sei livelli di spaziatura visualizzati come padding.

Carta

Questa è una carta con imbottitura XS. Il suo contenuto è piuttosto vicino ai bordi.

Carta

Questa è una carta con imbottitura S. Ha un'imbottitura un po' più stretta.

Carta

Questa è una carta con imbottitura M. Ha un respiro standard.

Carta

Questa è una carta con imbottitura a L. Ha spazio per respirare in più.

Carta

Questa è una carta con imbottitura XL. Ha un respiro significativo.

Carta

Questa è una carta con imbottitura XXL. Evitare di utilizzarlo in uno spazio ristretto.

Shadows

Ci sono tre ombre box multistrato tra cui scegliere.

Scatola ombra M

Scatola ombra L

Scatola ombra XL

Raggio del bordo

Esistono sei valori del raggio del bordo calcolati da una dimensione di base e una scala matematica.

XS arrotondate

tondo S

M arrotondato

L arrotondato

XL arrotondato

XXL arrotondato