graciolli.com · interno

Case models

Catálogo vivo do kit cx-* — o que vê aqui é o que o spec JSON renderiza. SoT: case-blocks/README.md · refs: docs/case-refs/.

Shell do case

Hero + brief + chapter — estrutura fora do type (templates case/*).

Work / Client

Case title

Deck / excerpt do projeto.

Problem

…

Solution

…

Impact

…

My role

…

Context

Chapter title

Pull quote editorial.

`p`

Parágrafo body.

Parágrafo editorial do case — ritmo Adelle, largura do body.

`pull`

Pull quote.

Uma frase que carrega o capítulo — tipografia display, respiro generoso.

`list`

Lista cx-list.

Descoberta e briefing
Wireframes e UI
Handoff e QA visual

`film`

Faixa horizontal ≤8 frames.

`bleed`

Imagem full-bleed + caption.

`pair`

Duas imagens lado a lado.

`band`

Faixa sólida — tones yellow / ink / mist / green / blue.

Band yellow

Faixa cor + tipografia display.

Band ink

Contraste alto para break.

Band mist

Suave, superfície clara.

Band green

Accent secundário.

Band blue

Brand azul do portfólio.

`label-rule`

Badge no centro da hairline.

FLYERS

`device-fan`

Mocks em ângulo + sombra (≤5).

`phone-row`

Grade de phones · tone dark / light.

`phone-stage`

1 phone em split de cor.

`desktop-stack`

Screens com sombra soft.

`mood-grid`

Ads / flyers · cols 2–4.

`align-ext`

Bleed editorial alinhado.

`ui-spec`

Collage de UI.

`persona-board`

Documento “colado” + texto.

`quote-split`

Foto + bio 50/50.

O case deixou o catálogo legível para quem vende no balcão.

Product Designer · UX/UI · front leve.

Marcelo Graciolli

`video-grid`

Thumbs com play.

`locked-gate`

Case privado — formulário (demo estático; live: meta + senha).