Design System — guia do tema
Guia único para editar o tema inteiro. As cores globais, fontes, tamanhos e espaçamentos são lidos ao vivo de
Configurações do tema — mudou lá, mudou no site todo. As cores por section e as classes são o mapa real do tema. Preset: custom.
Abre o editor do tema (admin) → clique na engrenagem Configurações do tema → Cores / Tipografia. Editar ali muda o site inteiro de uma vez. Requer estar logado no admin.
Cores globais
33 tokensDefinidas em Configurações do tema → Cores. Cada uma vira var(--...) no site inteiro.
Base & botões
Fundo
#fffdf3
layout_background_color
Texto
#333333
layout_text_color
Botão base
#fffdf3
base_button_color
Botão destaque
#CC3B53
accent_button_color
Botão hover
#b40000
hover_button_color
Fundo de popup
#fffdf3
popup_background_color
Blend
#f9f6eb
blend_color
Preço “de”
#DB2828
compare_at_price_color_custom
Overlay de drawers
#000000
drawers_overlay_color
Estados
Avaliação
#ffe71b
rating_color
Erro
#ff000e
error_color
Sucesso
#088b6f
success_color
Retirada na loja (pickup)
Disponível · texto
#5BA614
pickup_available_text
Disponível · ícone
#5BA614
pickup_available_icon
Esgotado · texto
#7C7C7C
pickup_out_of_stock_text
Esgotado · ícone
#7C7C7C
pickup_out_of_stock_icon
Badges de produto
Sale · texto
#db2828
sale_text_color
Esgotado · texto
#9b9b9b
sold_text_color
Pré-venda · texto
#363636
preorder_text_color
Badge 1
#000000
badge_background_1
Badge 2
#006751
badge_background_2
Badge 3
#830094
badge_background_3
Badge 4
#0076ac
badge_background_4
Carrinho · frete grátis
Barra de progresso
#ff5b00
free_shipping_progress_color
Meta atingida
#006751
free_shipping_complete_color
Cores por section (em uso)
15 coresCores aplicadas manualmente em sections com color_type: custom (via text_color/background_color).
Elas NÃO seguem as cores globais — é por isso que o mesmo botão muda de cor entre páginas. Para uniformizar o tema, alinhe estas ao global.
A cor do botão em section custom = o text_color dela (regra .no-default-color .solid-button).
Roxo · ×17
#5d4497
15 localis
- index › banner-grid/image · background
- index › scrolling-promotion · texto
- index › media-with-text · fundo
- index › icons-with-text · texto
- index › horizontal-scrolling-banners/media_with_text · background (×2)
- page.about › media-with-text · fundo
- page.about › horizontal-scrolling-banners/media_with_text · background (×2)
- page.about › horizontal-scrolling-banners/media_with_text · text
- product › rich-text · texto
- product › icons-with-text · texto
- product › featured-collection-grid · fundo
- product.preorder › rich-text · texto
- product.preorder › icons-with-text · texto
- product.preorder › featured-collection-grid · fundo
- footer-group › banner-grid/image · background
Lima · ×14
#e9fb8f
14 localis
- index › banner-grid/image · text
- index › scrolling-promotion · fundo
- index › media-with-text · texto
- index › icons-with-text · fundo
- index › horizontal-scrolling-banners/media_with_text · text
- page.about › media-with-text · texto
- page.about › horizontal-scrolling-banners/media_with_text · text
- product › rich-text · fundo
- product › icons-with-text · fundo
- product › featured-collection-grid · texto
- product.preorder › rich-text · fundo
- product.preorder › icons-with-text · fundo
- product.preorder › featured-collection-grid · texto
- footer-group › banner-grid/image · text
Vermelho · ×11
#db2828
11 localis
- collection › featured-collections · texto
- collection › breadcrumbs · texto
- index › horizontal-scrolling-banners/media_with_text · background
- index › collection-list · texto
- index › newsletter · fundo
- page.about › icons-with-text · texto
- page.about › scrolling-promotion · texto
- page.contact › contact-form · texto
- product › media-with-tabs · texto
- product.preorder › media-with-tabs · texto
- more-header-sections › news-drawer · fundo
Branco · ×11
#ffffff
8 localis
- index › banner-grid/image · text (×2)
- index › banner-grid/loop_video · text
- index › newsletter · texto
- page.about › split-banner/banner · background (×2)
- product › media-with-text · texto
- product.preorder › media-with-text · texto
- footer-group › banner-grid/image · background (×2)
- footer-group › banner-grid/loop_video · background
Creme · ×10
#fffdf3
10 localis
- collection › featured-collections · fundo
- collection › breadcrumbs · fundo
- index › banner-grid/image · text
- index › horizontal-scrolling-banners/media_with_text · text
- index › collection-list · fundo
- page.about › icons-with-text · fundo
- page.about › horizontal-scrolling-banners/media_with_text · text
- page.contact › contact-form · fundo
- footer-group › footer · texto
- more-header-sections › news-drawer · texto
Amarelo · ×5
#f9d05e
5 localis
- index › horizontal-scrolling-banners/text · text
- index › horizontal-scrolling-banners/media_with_text · text
- page.about › scrolling-promotion · fundo
- page.about › horizontal-scrolling-banners/text · text
- footer-group › flyout · fundo
Preto · ×5
#000000
3 localis
- page.about › split-banner/banner · text (×2)
- footer-group › banner-grid/image · text (×2)
- footer-group › banner-grid/loop_video · text
Rosa · ×4
#de87a9
2 localis
- index › banner-grid/image · background (×3)
- index › banner-grid/loop_video · background
Vermelho 2 · ×2
#d31f2e
2 localis
- index › horizontal-scrolling-banners/text · background
- page.about › horizontal-scrolling-banners/text · background
Framboesa · ×2
#cc3b53
2 localis
- index › icons-with-text · texto
- footer-group › footer · fundo
Creme claro · ×2
#fbf4cf
2 localis
- product › media-with-tabs · fundo
- product.preorder › media-with-tabs · fundo
Amarelo vivo · ×2
#ffe71b
2 localis
- product › media-with-text · fundo
- product.preorder › media-with-text · fundo
Rosa claro · ×1
#f5d1de
1 local
- index › icons-with-text · fundo
Verde claro · ×1
#e8eab8
1 local
- page.about › horizontal-scrolling-banners/media_with_text · background
Vermelho escuro · ×1
#b40000
1 local
- footer-group › flyout · texto
Obs.: #db2828 e #fffdf3 coincidem com o botão global e o fundo global — as demais são exceções manuais.
Snapshot atualizado após seus ajustes no admin (novos tons de rosa #de87a9 / #cc3b53 / #f5d1de).
Fontes
3 famíliasCorpo · base_font
Ag
"DM Sans"
--base-font-family
Títulos · accent_font
Ag
"Bricolage Grotesque"
--accent-font-family
Serifada · custom_font
Ag
"DM Serif Display"
--custom-font-family
Escala global: desktop 90% · mobile 80%.
Tamanhos (tipografia)
9 níveisClasses reais de tamanho. Valores desktop / mobile lidos das configurações.
.heading_xl
Wellness
136 / 46 px
.heading_l
Everyday life
80 / 32 px
.heading_m
Functional drinks
52 / 24 px
.heading_s
Where wellness meets
32 / 20 px
.heading_xs
Shop all products
20 / 18 px
.body_l
A refined take on functional drinks
16 / 15 px
.body_m
Clean ingredients and balanced formulas
16 / 14 px
.body_s
Antioxidant ingredients support wellness
14 / 12 px
.label_font
Add to cart
13 / 13 px
Espaçamentos, raios & estrutura
Botões
2000px
button_radius
Imagens / sections
48px
images_and_sections_radius
Card de produto
24px
product_card_radius
Campos / inputs
12px
field_radius
Swatch de imagem
12px
image_swatch_radius
Espessura de borda
2px
border_thickness
Linha / divisor
1px · 20%
line_width / line_opacity
Gap grade produto
D 4 · M 2
custom_product_column_gap_*
Largura da página: max_page_width = full_width. Margens entre sections: disable_margins = true. O padding de cada section é configurado por section (não global).
Classes & componentes
Componentes reais renderizados + referência de classes. Montagem: classe de função + preset --custom.
Botões — solid-button · outlined-button · link-button · big-button
Formulários — input · text-area · select · checkbox · radio
Badges
Promoção
Esgotado
Pré-venda
Novo
Vegano
Referência de classes (para editar no CSS / sections)
| Componente | Classes reais |
|---|---|
| Botão sólido / contorno / link | solid-button · outlined-button · link-button · big-button + button--{preset} |
| Botão — estados | :hover, [disabled], .buttons-zoom, .buttons-uppercase, .button-title, .price-inside-button |
| Presets de botão | button--minimal_uppercase|minimal_basic|minimal_heavy|classic|avant_garde|contrast|brutalist|duet|custom |
| Inputs / campos | input · input--{preset} · text-area · field · field--checkbox · field__input · form__label · select |
| Validação | .required · .invalid · .valid · .form__message |
| Badges | card__badges · card__badges-item · --sale · --sold · --preorder · --metafield |
| Títulos | content-heading · content-heading--accent · content-subheading · custom-heading · gradient-heading-text |
| Tamanhos de texto | heading_xl|l|m|s|xs · body_l|m|s · label_font (+ _uppercase) |
| Utilitárias de texto | .uppercase · .bolder-font · .dim |
| Card de produto | card · card__content · card__title · card__info · card__badges · card__price |
| Preço | price · price--{preset} · sale-price · regular-price · regular-price--dim · unit-price |
| Rating | rating · rating-star (usa --rating-color) |
| Tabs | component-tabs · component-tabs__tab (.active) · component-tabs__content |
| Accordion | accordion · accordion-toggle · accordion__panel · accordion__content |
| Cor por section | color_type (default/invert/custom) · .no-default-color · .scroll-color · .section-color |