SOULSTORY

Design System 3.0 · aferição

O sistema 3.0 está no ar.

Se esta linha está em serifa itálica, as duas fontes carregaram.

01 · Hierarquia tipográfica

Display · 44px

Título 1 · 36px

Título 2 · 28px

Título 3 · 22px

Corpo grande · 18px. A Mr Eaves Sans carrega a estrutura.

Corpo · 16px. Entrelinha nunca abaixo de 1,50.

Editorial · 17px em Minion 3, entrelinha 1,70.

Micro · 12px, para datas e metadados.

02 · O tamanho real do texto de um artigo

Este parágrafo está em 19px, que é o tamanho da abertura de artigo aprovada na página de amostra.

E este está em 18px, dentro de uma coluna de 680px, que é exatamente como o texto dos 68 posts vai aparecer. Repare que a linha quebra antes de atravessar a tela inteira: uma linha longa demais faz o olho perder o começo da seguinte, e a medida de leitura existe para impedir isso. Os blocos acima, de aferição, usam tamanhos de rótulo e legenda. Eles são pequenos porque a função deles é ser pequena, não porque o texto do blog vá ser assim.

03 · Cor da marca

Indigo Authority

--ss-indigo

Lavender Insight

--ss-periwinkle

Sky Awakening

--ss-sky

04 · Superfícies

Parchment Canvas

--ss-cream

Warm Veil

--ss-warm-veil

Mist Lavender

--ss-lavender

Deep Indigo Void

--ss-ink

05 · Cantos e sombra

--r-sm

--r-md

--r-lg

--r-xl

--r-3xl

--r-4xl

A escala para em 32px. Nenhum canto totalmente arredondado, nenhuma pílula. A sombra das caixas acima é tingida de índigo, nunca cinza neutro.

06 · O outro capítulo

Parchment e Void se alternam como capítulos.

A profundidade vem da troca de superfície, nunca de degradê.

07 · Novo no 3.0 · liquid glass

Controle flutuante
Em destaque

Vidro só para controle que flutua sobre conteúdo. Nunca para cartão de conteúdo.