Mapa — o que mexer

Arquivos canónicos. Abra o SoT antes de patchar estilo.

Zona	Arquivo	Notas
Tokens / base	`style.css` `:root`	`--mg-` SoT · `--wx-` aliases
Rail / header	`assets/css/header-rail.css`	Largura `--mgport-rail-w` · nav pills
Work list	`list-cases.css` + `card-case.php`	Card m3 · counter · find out more
Case landing	`case-landing.css` + `case-sections.css`	`cx-*` · sections kit · privado
Journal	`journal.css` + `home.php`	Lista featured + row cards
About / Contato	`page-about.php` · `page-contato.php`	Hero split · form + `.mg-btn`
Home	`front-page.php`	Hero grad · Selected work · testimonials

Não: Plus Jakarta / Syne / verde MGAF no DNA do portfólio
Não: cards genéricos no case single — usar cx-*
Dívida: style.css Version header vs MGPORT_VERSION
Dívida: CSS orphan (palette-brand-test, mocks) — não enfileirar em produção

Cores

Canónicos: azul #3B9DFF · violeta #7A3CFF · ink #1A1A1A · bg #ECECEC · surface #FFF. Grad default: --mg-grad.

Blue#3B9DFF

Violet#7A3CFF

Ink#1A1A1A

Bg#ECECEC

default--mg-grad

warm--mg-grad-warm

cool--mg-grad-cool

Blue

Accent · links · grad start · --mg-blue = #3B9DFF

100

200

300

400

500 500

600

700

800

900

Violet

Grad end · ênfase brand · --mg-violet = #7A3CFF

100

200

300

400

500 500

600

700

800

900

Ink

Texto · botão solid · --mg-ink = #1A1A1A

100

200

300

400

500 500

600

700

800

900

Mist / surface

Bg · rail · cards · --mg-bg = #D4D4D4

100

200

300

400

500 500

600

700

800

900

Aliases semânticos

--mg-* = fonte da verdade · --wx-* = aliases Haick/WAD
--wx-brand → --mg-blue
--wx-font-display → Plusnet Creighton Pro
--wx-font → Adelle
html[data-theme="dark"] inverte bg/surface/ink/muted/line

Tipografia

Display: Plusnet Creighton Pro 300 / 400 / 700. Corpo: Adelle 400 / 700. Escala completa h1–h6 = classes .mg-display-1…6.

Nível Token Size Tracking / LH

h1.mg-display-1clamp(3 → 5.5rem)−0.03em / 0.98

h2.mg-display-2clamp(2.2 → 3.6rem)−0.03em / 1.02

h3.mg-display-3clamp(1.7 → 2.55rem)−0.025em / 1.05

h4.mg-display-4clamp(1.35 → 2rem)−0.02em / 1.1

h5.mg-display-51.35rem0 / 1.2

h6.mg-display-60.95rem+0.08em / upper

h1 · display-1 · clamp 3–5.5rem

Marcelo Graciolli

h2 · display-2 · clamp 2.2–3.6rem

Habro Music Brazil

h3 · display-3 · clamp 1.7–2.55rem

Selected work

h4 · display-4 · clamp 1.35–2rem

Catalogue filters & navigation

h5 · display-5 · 1.35rem

Retailer space & product truth

h6 · display-6 / label · 0.95rem uppercase

Section label · Work / Habro Group

Lead · Adelle 400 · ~1.25rem

Thinking in connecting stores and users — a short deck under a display title.

p · body · Adelle 400 · 1.125rem / 1.65

Texto de corpo para cases, about e journal. Pull quotes e títulos de capítulo usam display. Line-height ~1.65. Preferir Adelle no parágrafo; Creighton só em headings.

caption / meta · 0.82–0.88rem

Category · year · figcaption · journal meta

kicker · 0.75rem · tracking 0.14em

Work / Habro Group

Creighton weights

300 Light 400 Book 700 Bold

Adelle weights

400 Regular 700 Bold

Espaço & forma

--mg-radius 1.15rem

--mg-radius-sm

--mg-radius-lg

.mg-btn min-height

--mgport-rail-w 268px

--wx-max 70rem

Grid

Shell = rail fixo + main. Conteúdo = coluna centrada no main (max-width: 1366px Journal/Work/About · --wx-max: 70rem genérico). Não inventar segunda coluna fora deste contrato.

--mgport-rail-w
268px

main · coluna centrada · gutters clamp(1.25rem, 3vw, 1.75rem)

Viewport ≥960px

Rail visível · grids 2–6 colunas

Tablet ≤900px

Rail colapsa · 2–3 colunas

Mobile ≤560px

1 coluna · stacks

Gutter 17px · 1.25–2.75rem

list-cases ±17px · page padding clamp

Layouts do produto

Metáforas reais — copiar proporções, não inventar “12 col genéricas”.

Home .mg-home-hero__body · .mg-folder-grid 2 col

Work .list-cases · flex 50% · gutter 17px

About .mg-about-spotlight__grid · logos 4→6

Journal 168px + 1fr · feature full · ≤700 → stack

Case landing cx-* · brief centrado · capítulos

Contato .mg-contact · place-items center

Regras

Conteúdo de página no main: margin-inline: auto + max-width (não colar no rail).
Work/About/Journal: 1366px · genérico: --wx-max.
Breaks canónicos: 959 · 900 · 720 · 700 · 560.
Cases list = flex: 0 0 50%, não CSS Grid 12 — manter paridade m3.

Botões

Solid Ghost

Ink Work

.mg-btn--solid · --ghost (sobre hero escuro/grad) · --ink (sobre fundo claro).

Cards — Work

Mesmo molde m3 list-cases. Não reinventar card de case.

01

Royal Music Catalog

Catálogo interno Royal Music: grade de SKU, ficha, mobile e mapa de revendas — ligado ao pipeline da vitrine.

find out more

02

WAD Industrial

Catálogo B2B com quiet industrial + warm strike: marcas e PDVs nítidos, do Local ao go-live sem atrito.

find out more

Case landing

Blocos cx-* — hero + brief + capítulos. CSS: case-landing.css + case-sections.css.

Work / Client

Case title

Deck / excerpt do projeto.

Problem

…

Solution

…

Impact

…

My role

…

01

Context

Chapter title

Pull quote editorial.

Sections kit

Types no spec JSON → mgport_cx_blocks. Piloto: Royal Music 25 anos.

Label rule

Band

Faixa cor + tipografia display.

type	Uso
`band`	Faixa sólida (yellow / ink / mist / green / blue)
`label-rule`	Badge no centro da hairline
`device-fan`	Mocks em ângulo + sombra
`phone-row` / `phone-stage`	Grade ou stage de phones
`mood-grid`	Ads / flyers 2–4 colunas
`desktop-stack`	Screens com sombra soft
`ui-spec` · `persona-board` · `quote-split` · `video-grid`	Collage / persona / bio / thumbs
`locked-gate`	Case privado (meta + senha)

Catálogo vivo: Case models · Live: Habro · Royal 25 anos · README case-blocks/

Journal

Lista tipo Vibra news-list · single editorial. CSS: journal.css.

Featured Título do post em destaque

Lead curto do journal.

Category Row card title

Navegação

Rail links

Theme toggle · language

Controles no rail: busca · PT/EN · light/dark (wx-theme).

Checklist rápido

Versão assets: MGPORT_VERSION = 0.9.61
Theme toggle: localStorage wx-theme
CPT case archive: /work/
Esta página: slug /design-system/ · template page-design-system.php