Sombras

As sombras não são apenas um elemento de decoração. As sombras são utilizadas para promover a comprensão dos utilizadores contudo requerem uma atenção acrescida na sua utilização.

Contraste

As sombras deve fornecer contraste suficiente para destacar elementos sem prejudicar a legibilidade, melhorando a percepção dos elementos.

As sombras devem ser utilizadas de forma moderada e harmoniosa. As sombras exageradas ou múltiplas sombras podem causar distração e reduzir a clareza visual. Ao longo do layout deve existir uma coerência na sua utilização proporcionando uma experiência visual harmoniosa em todas as páginas.

As sombras não podem ser utilizadas em texto visto que as mesmas prejudicam a legibilidade do texto.

Exemplos de utilização

Realçar componentes no interface;
Mensagens temporárias;
Destaques visuais;
Notificações.

	XS	S	M	L	XL	XXL
Posição X	0	0	0	0	0	0
Posição Y	1	2	4	6	8	4
Blur	2	4	6	8	10	40
Spread	0	0	0	0	0	0
Opacity	10%	10%	10%	10%	10%	10%
Cor	#1F5FAP	#1F5FAP	#1F5FAP	#1F5FAP	#1F5FAP	#1F5FAP

Escala de sombras e identificação.

box-shadow-XS

box-shadow-S

box-shadow-M

box-shadow-L

box-shadow-XL

box-shadow-XXL

                                        
<div class="gra-row-bs">
    <div class="gra-col-bs-xl-6 gra-col-bs-ld-3 gra-col-bs-md-2">
        <div class="columnRow gra-background-blue-200 gra-text-blue-900 gra-box-shadow-xs">box-shadow-XS</div>
    </div>
    <div class="gra-col-bs-xl-6 gra-col-bs-ld-3 gra-col-bs-md-2">
        <div class="columnRow gra-background-blue-200 gra-text-blue-900 gra-box-shadow-s">box-shadow-S</div>
    </div>
    <div class="gra-col-bs-xl-6 gra-col-bs-ld-3 gra-col-bs-md-2">
        <div class="columnRow gra-background-blue-200 gra-text-blue-900 gra-box-shadow-m">box-shadow-M</div>
    </div>
    <div class="gra-col-bs-xl-6 gra-col-bs-ld-3 gra-col-bs-md-2">
        <div class="columnRow gra-background-blue-200 gra-text-blue-900 gra-box-shadow-l">box-shadow-L</div>
    </div>
    <div class="gra-col-bs-xl-6 gra-col-bs-ld-3 gra-col-bs-md-2">
        <div class="columnRow gra-background-blue-200 gra-text-blue-900 gra-box-shadow-xl">box-shadow-XL</div>
    </div>
    <div class="gra-col-bs-xl-6 gra-col-bs-ld-3 gra-col-bs-md-2">
        <div class="columnRow gra-background-blue-200 gra-text-blue-900 gra-box-shadow-xxl">box-shadow-XXL</div>
    </div>
</div>

Escala de sombras e identificação.

text-shadow-XS

text-shadow-S

text-shadow-M

text-shadow-L

text-shadow-XL

text-shadow-XXL

                                        
<div class="gra-row-bs">
    <div class="gra-col-bs-xl-6 gra-col-bs-ld-3 gra-col-bs-md-2">
        <div class="columnRow gra-background-blue-200 gra-text-blue-300">
            <span class="gra-text-shadow-xs">text-shadow-XS</span>
        </div>
    </div>
    <div class="gra-col-bs-xl-6 gra-col-bs-ld-3 gra-col-bs-md-2">
        <div class="columnRow gra-background-blue-200 gra-text-blue-300">
            <span class="gra-text-shadow-s">text-shadow-S</span>
        </div>
    </div>
    <div class="gra-col-bs-xl-6 gra-col-bs-ld-3 gra-col-bs-md-2">
        <div class="columnRow gra-background-blue-200 gra-text-blue-300">
            <span class="gra-text-shadow-m">text-shadow-M</span>
        </div>
    </div>
    <div class="gra-col-bs-xl-6 gra-col-bs-ld-3 gra-col-bs-md-2">
        <div class="columnRow gra-background-blue-200 gra-text-blue-300">
            <span class="gra-text-shadow-l">text-shadow-L</span>
        </div>
    </div>
    <div class="gra-col-bs-xl-6 gra-col-bs-ld-3 gra-col-bs-md-2">
        <div class="columnRow gra-background-blue-200 gra-text-blue-300">
            <span class="gra-text-shadow-xl">text-shadow-XL</span>
        </div>
    </div>
    <div class="gra-col-bs-xl-6 gra-col-bs-ld-3 gra-col-bs-md-2">
        <div class="columnRow gra-background-blue-200 gra-text-blue-300">
            <span class="gra-text-shadow-xxl">text-shadow-XXL</span>
        </div>
    </div>
</div>