Maternidade
R$ 18.400,00
Galeria Expoarte · Brasília
Design System
Extraído do site em produção — HTML, CSS compilado do tema e estilos computados no navegador. Esta página é renderizada com os tokens reais e a tipografia Delecta licenciada pela galeria, então o que você vê aqui é o que o site é.
| Fundamento | Decisão | Consequência |
|---|---|---|
| Paleta | Preto editorial + dourado envelhecido + creme | A obra de arte é a única fonte de cor saturada da página |
| Tipografia | Delecta — sans geométrica humanista, 7 pesos | Pesos são famílias separadas, não eixos de font-weight |
| Geometria | border-radius: 0 como padrão absoluto | Moldura reta é a assinatura; círculo só em avatar e ícone |
| Profundidade | Quase plana — hierarquia por cor e ornamento | Sombra imitaria moldura e competiria com a peça |
| Escala | Raiz 18px, razão modular ≈ 1.222 | Sete degraus, de 14px a 32px |
| Ritmo | Seções brancas alternadas com pretas full-bleed | Cadência editorial de catálogo de exposição |
| Base técnica | WordPress 5.9.16 + WooCommerce 4.0.4, tema próprio | Arquitetura ITCSS/BEM (o-, c-, u-, s-) |
01 — Fundamento
Cores
Três famílias: o dourado da marca, os neutros de superfície e as cores semânticas herdadas do WooCommerce. O dourado é a única cor com carga simbólica — use-o como acento, nunca como área.
Acento — Dourado
on: #1d1d1b
primary#b59971Cor de marca. Títulos sobre escuro, ícones, fundo do rodapé,
::selection.on: #ffffff
primary-deep#9b7d27A aba sólida de 8px à direita do botão primário.
on: #000000
cream-100#f4eddeCampos de formulário, seções claras, dropdowns.
on: #000000
cream-200#ece4d3Faixas alternadas, hover de lista.
on: #000000
cream-300#eae3d2Borda interna de blocos creme, estado selecionado.
Superfície & Neutros
on: #ffffff
surface-inverse#000000Header fixo, botões, seções escuras full-bleed.
on: #ffffff
ink#1d1d1bPreto tinta. Caixa do slider, menu mobile, preços.
on: #1d1d1b
surface#ffffffSuperfície base do site.
on: #1d1d1b
surface-alt#faf9f8Superfície secundária, blocos alternados.
on: #ffffff
ink-muted#7a7a7aTexto secundário, metadados e legendas. Sobre fundo branco, reserve para textos a partir de 24px.
on: #1d1d1b
border#e3e0dcBordas e divisores padrão.
Semânticas
on: #ffffff
error#aa0000Validação de formulário e falhas de checkout.
on: #ffffff
sale#d61f30Selo de promoção WooCommerce.
on: #1d1d1b
info#71afb5Avisos neutros.
on: #1d1d1b
warning#ffc733Alerta; fundo em
#ffe399.02 — Fundamento
Tipografia
Delecta é uma sans geométrica humanista licenciada via MyFonts. A armadilha estrutural: os pesos são carregados como famílias separadas, não como eixos. Para mudar peso você troca font-family, não font-weight — usar font-weight: bold faz o navegador sintetizar um falso-negrito sujo.
Pesos disponíveis
Delecta-Light · padrão de corpoAcervo permanente
Delecta-Medium · labels, h4Acervo permanente
Delecta-Bold · títulos de cardAcervo permanente
Delecta-Black · displayAcervo permanente
Escala — raiz 18px, razão 1.222
A mulher como inspiração.
Diferenciais
Curadoria e procedência
Sônia Ebling, bronze polido
R$ 18.400,00
São mais de 600 obras seletas que contemplam diferentes perfis de clientes.
A arte é uma fonte inesgotável de valores. É apreciada pela estética e expressão cultural, mas, quando adquirida sob um olhar experiente, se torna um investimento valioso.
Técnica e dimensões
Óleo sobre tela · 92 × 73 cm · 2018
Certificado de autenticidade emitido pelo instituto do artista.
Regra de fallback: a Delecta é licenciada e pode falhar em carregar. O stack de segurança é
"Helvetica Neue", Helvetica, Arial, "Nimbus Sans L", "Liberation Sans", Arimo, sans-serif — teste o layout com ele antes de publicar mudanças de tipografia.03 — Fundamento
Forma & Elevação
O sistema é ortogonal por princípio: molduras, obras e superfícies são retas. O arredondamento aparece apenas onde a forma é literalmente circular. No lugar da curva, a marca usa ornamentos de borda.
Raios
0
shape-nonePadrão. Botões, cards, inputs, modais3px
shape-xsDropdown selectize, notices Woo4px
shape-smBarras do hamburger1em
shape-pillChips de filtro, tags50%
shape-circleAvatar, ícone social, botão homeOrnamentos — o substituto da curva
8px
Aba do botãoborder-right: 8px solid #9b7d277px
Caixa do sliderborder-left: 7px2px
Título de filtroborder-bottom: 2px solid #b599717px
Aba selecionadaborder-bottom: 7px solid #000Elevação
elev-0 · none
elev-1 · 0 1px 3px /.1
elev-2 · 0 1px 1em /.2
inset · 0 1px 2px /.15
offset · 2px 2px 0 #fff
focus · 0 0 3px 4px
O offset sólido imita o passe-partout de uma moldura — é o único recurso de profundidade permitido em cards de obra. Blur nunca.
04 — Fundamento
Espaçamento & Layout
Unidade base de 5px, com quatro múltiplos que fazem quase todo o trabalho. O container trava em 75rem — 1350px na raiz de 18px.
Escala
space-15px · ajuste fino
space-210px · padding de texto em card
space-315px · unidade dominante — padding de caixa, gutter de botão
space-420px · grid-gap, margem entre campos
space-530px · padding de seção, margem sob h1
space-650px · altura dos controles do slider
space-760px · margem sob título de seção na home
Breakpoints
| Classe | Largura | Colunas | Navegação |
|---|---|---|---|
| Compact | < 700px | 1 | Hamburger + menu vertical full-screen; botão home circular |
| Medium | 700–970px | 2–3 | Menu inline reduzido |
| Expanded | 971–1350px | até 12 | Menu inline completo no header preto |
| Max | > 1350px | 12 | Container travado, gutters laterais |
Armadilha do header fixo: ele tem 120px e cobre o topo da viewport. Aplique
scroll-margin-top: 130px em todos os alvos de âncora — sem isso, links internos jogam o conteúdo (e o foco do teclado) para trás da barra preta.05 — Fundamento
Motion
Padrão de 300ms ease-in-out. Só a troca de slide do hero justifica passar de 600ms. Anime transform e opacity — nunca width, height ou top.
motion-fast
200ms ease-in-out
motion-base — padrão
300ms ease-in-out
motion-slow
600ms ease-in-out
motion-slider
800ms ease
curva expressiva
cubic-bezier(.7,0,.3,1)
curva com antecipação
cubic-bezier(.795,-.035,0,1)
Obrigatório: respeitar
prefers-reduced-motion. Desative a transição de 800ms do slider, o encolhimento do header e o morph do hamburger. Esta página já faz isso — role de volta ao topo para ver o header encolher, se o seu sistema permitir animação.06 — Biblioteca
Componentes
28 componentes catalogados. Abaixo, os que carregam a identidade — renderizados ao vivo, com hover e foco funcionais. Navegue por Tab para ver os estados de teclado.
Botões
.c-btn · .c-btn--primary · .c-btn--contrastradius 0 · padding 9px 15px · min-height 44px
Um único botão primário por bloco — a aba dourada marca a ação principal. Para o secundário, use a variante contorno sobre fundo claro ou
.c-btn--contrast sobre fundo escuro. Altura mínima de 44px garante o alvo de toque.Campos & Filtros
.c-form · .gfield · chips de filtrofundo #f4edde · sem borda · sem radius
✕ Informe o telefone completo com DDD.
O campo não tem borda nem cantos arredondados: a superfície creme
#f4edde é o único delimitador. Mantenha o rótulo visível acima do campo — o placeholder serve como exemplo do formato esperado, não como rótulo.Card de obra
.o-card · .c-card-title · .c-card-pricehover: overlay rgba(29,29,27,.7) · 300ms
Hero slider
.c-slider__box · overlay rgba(29,29,27,.95)transform 0.8s · CTA em bottom -35px
Info card — diferenciais
.c-info-card--diferencialSVG 68px · título Delecta-Bold 22px
Confiança
Todas as peças são adquiridas diretamente do artista ou têm autenticidade comprovada por instituto ou familiares.
Acervo
Mais de 600 obras seletas, de artistas consagrados como Burle Marx e Volpi a nomes em ascensão.
Feedback
notices WooCommercepadding 1em · borda de 8px como ornamento
Não foi possível concluir o pedido. Verifique os dados do cartão.
Sua obra será embalada em caixa-madeira e transportada com seguro.
Últimas 2 peças desta série disponíveis.
Promoção de inauguração — 15% em gravuras.