Samsung SDS internal guide

Samsung Design System Tokens

Manual visual para consumir tokens, primitives, patterns e icones do samsungbr.design-system em projetos VTEX.

Overview

Manual oficial para consumir o samsungbr.design-system

O design-system e a API publica para manter storefronts VTEX consistentes, acessiveis e faceis de evoluir. Esta pagina organiza o que usar, quando usar e como compor sem duplicar estilo no samsungbr.store-front.

Tokens

Fonte unica para color, typography, spacing, grid, effects e alias semanticos.

Primitives

Box, Stack, Inline, Grid, PageContainer, Typography e Section para layout consistente.

Patterns

Receitas oficiais para montar telas VTEX sem duplicar decisoes visuais.

Icons

Catalogo Samsung por peso, consumido pelo componente Icon do design-system.

VTEX Usage

Regras praticas para import, builder, TypeScript simples e baixa dependencia de CSS.

Regra de ouro

Se existir primitive, token, pattern ou Icon no design-system, o storefront deve consumir essa API antes de criar CSS ou componente local.

Import base
import {
	Box,
	Stack,
	Inline,
	Grid,
	PageContainer,
	Typography,
	Section,
	Icon,
} from 'samsungbr.design-system'
Tokens

Color, typography, spacing, grid, effects e alias

Tokens sao a fundacao visual. Eles aparecem aqui uma unica vez, agrupados por categoria, com preview e uso pratico para evitar repeticao e valores soltos no storefront.

Color

Use color tokens para marca, neutros, feedback e tokens semanticos de text, background e border.

Primary

Base de contraste, preto e branco Samsung.

primary.black#000000

color.primary.black

#000000
background='color.primary.black'
primary.white#ffffff

color.primary.white

#ffffff
background='color.primary.white'

Brand / Skyblue

Cores proprietarias para marca, links e estados ativos.

skyblue.base#2189ff

color.brand.skyblue.base

#2189ff
background='color.brand.skyblue.base'
skyblue.dark#006bea

color.brand.skyblue.dark

#006bea
background='color.brand.skyblue.dark'
skyblue.light#68aeff

color.brand.skyblue.light

#68aeff
background='color.brand.skyblue.light'

Secondary

Apoio cromatico para campanhas, editoriais e feedback visual.

coral.base#ef3434

color.secondary.coral.base

#ef3434
background='color.secondary.coral.base'
coral.dark#d62e2e

color.secondary.coral.dark

#d62e2e
background='color.secondary.coral.dark'
coral.light#f36e6e

color.secondary.coral.light

#f36e6e
background='color.secondary.coral.light'
orange.base#f66700

color.secondary.orange.base

#f66700
background='color.secondary.orange.base'
orange.dark#c74700

color.secondary.orange.dark

#c74700
background='color.secondary.orange.dark'
secondary.seaBlue#00b3e3

color.secondary.seaBlue

#00b3e3
background='color.secondary.seaBlue'
teal.base#00838f

color.secondary.teal.base

#00838f
background='color.secondary.teal.base'
teal.dark#007d89

color.secondary.teal.dark

#007d89
background='color.secondary.teal.dark'

Gray Scale

Escala neutra para fundos, divisores, texto secundario e superficies.

grayScale.0#f7f7f7

color.grayScale.0

#f7f7f7
background='color.grayScale.0'
grayScale.1#eeeeee

color.grayScale.1

#eeeeee
background='color.grayScale.1'
grayScale.2#dddddd

color.grayScale.2

#dddddd
background='color.grayScale.2'
grayScale.3#bbbbbb

color.grayScale.3

#bbbbbb
background='color.grayScale.3'
grayScale.4#aaaaaa

color.grayScale.4

#aaaaaa
background='color.grayScale.4'
grayScale.5#8f8f8f

color.grayScale.5

#8f8f8f
background='color.grayScale.5'
grayScale.6#757575

color.grayScale.6

#757575
background='color.grayScale.6'
grayScale.7#555555

color.grayScale.7

#555555
background='color.grayScale.7'
grayScale.8#313131

color.grayScale.8

#313131
background='color.grayScale.8'
grayScale.9#1c1c1c

color.grayScale.9

#1c1c1c
background='color.grayScale.9'

Neutral

Neutros de interface para areas editoriais e modulos.

neutral.blue#f5f7fe

color.neutral.blue

#f5f7fe
background='color.neutral.blue'
neutral.beige#f7f5f2

color.neutral.beige

#f7f5f2
background='color.neutral.beige'
neutral.orange#fef6f3

color.neutral.orange

#fef6f3
background='color.neutral.orange'
neutral.pink#f6f0f5

color.neutral.pink

#f6f0f5
background='color.neutral.pink'

Theme

Tokens oficiais do samsungbr.design-system.

theme.white#ffffff

color.theme.white

#ffffff
background='color.theme.white'
theme.black#000000

color.theme.black

#000000
background='color.theme.black'
theme.lightGray#f7f7f7

color.theme.lightGray

#f7f7f7
background='color.theme.lightGray'
theme.darkGray#313131

color.theme.darkGray

#313131
background='color.theme.darkGray'

Shadows

Tokens oficiais do samsungbr.design-system.

shadows.dimmed01#636363

color.shadows.dimmed01

#636363
background='color.shadows.dimmed01'
shadows.dimmed02#191919

color.shadows.dimmed02

#191919
background='color.shadows.dimmed02'

Text

Tokens oficiais do samsungbr.design-system.

text.primaryBlack#000000

color.text.primaryBlack

#000000
background='color.text.primaryBlack'
text.primaryWhite#ffffff

color.text.primaryWhite

#ffffff
background='color.text.primaryWhite'
text.secondary#8f8f8f

color.text.secondary

#8f8f8f
background='color.text.secondary'
text.tertiary#bbbbbb

color.text.tertiary

#bbbbbb
background='color.text.tertiary'
text.skyblue#006bea

color.text.skyblue

#006bea
background='color.text.skyblue'

Background

Tokens oficiais do samsungbr.design-system.

background.black#000000

color.background.black

#000000
background='color.background.black'
background.white#ffffff

color.background.white

#ffffff
background='color.background.white'

State

Tokens oficiais do samsungbr.design-system.

button.defaultBlack#000000

color.state.button.defaultBlack

#000000
background='color.state.button.defaultBlack'
button.hoverBlack#ffffff

color.state.button.hoverBlack

#ffffff
background='color.state.button.hoverBlack'
button.disabledBlack#00000033

color.state.button.disabledBlack

#00000033
background='color.state.button.disabledBlack'
button.defaultSkyblue#006bea

color.state.button.defaultSkyblue

#006bea
background='color.state.button.defaultSkyblue'
button.disabledSkyblue#006bea33

color.state.button.disabledSkyblue

#006bea33
background='color.state.button.disabledSkyblue'

Border

Tokens oficiais do samsungbr.design-system.

border.black#000000

color.border.black

#000000
background='color.border.black'
border.gray#bbbbbb

color.border.gray

#bbbbbb
background='color.border.gray'
border.selection#006bea

color.border.selection

#006bea
background='color.border.selection'

Semantic

Tokens semanticos para background, text e border.

text.primary#000000

color.semantic.text.primary

#000000
background='color.semantic.text.primary'
text.inverse#ffffff

color.semantic.text.inverse

#ffffff
background='color.semantic.text.inverse'
text.subtle#8f8f8f

color.semantic.text.subtle

#8f8f8f
background='color.semantic.text.subtle'
text.disabled#bbbbbb

color.semantic.text.disabled

#bbbbbb
background='color.semantic.text.disabled'
text.brand#006bea

color.semantic.text.brand

#006bea
background='color.semantic.text.brand'
background.canvas#ffffff

color.semantic.background.canvas

#ffffff
background='color.semantic.background.canvas'
background.surface#f5f7fe

color.semantic.background.surface

#f5f7fe
background='color.semantic.background.surface'
background.inverted#000000

color.semantic.background.inverted

#000000
background='color.semantic.background.inverted'
background.brand#2189ff

color.semantic.background.brand

#2189ff
background='color.semantic.background.brand'
border.default#bbbbbb

color.semantic.border.default

#bbbbbb
background='color.semantic.border.default'
border.subtle#dddddd

color.semantic.border.subtle

#dddddd
background='color.semantic.border.subtle'
border.brand#006bea

color.semantic.border.brand

#006bea
background='color.semantic.border.brand'

Typography

Use Typography para aplicar variants. A tabela mostra a escala renderizavel sem repetir cada metrica como um card separado.

Preview
Metrics
Uso
heading

heading.desktop.headline

Inspire the World, Create the Future

SamsungSSHead, SamsungSharpSans, SamsungOne, sans-serif
font-size 60
line-height 72
weight 700

variant='heading.desktop.headline'
heading

heading.desktop.headlineException

Inspire the World, Create the Future

SamsungSSHead, SamsungSharpSans, SamsungOne, sans-serif
font-size 60
line-height 72
weight 300

variant='heading.desktop.headlineException'
heading

heading.desktop.subHeadline

Inspire the World, Create the Future

SamsungSSHead, SamsungSharpSans, SamsungOne, sans-serif
font-size 56
line-height 67
weight 500

variant='heading.desktop.subHeadline'
heading

heading.desktop.subHeadline2

Inspire the World, Create the Future

SamsungSSHead, SamsungSharpSans, SamsungOne, sans-serif
font-size 48
line-height 58
weight 500

variant='heading.desktop.subHeadline2'
heading

heading.desktop.headlineLight

Inspire the World, Create the Future

SamsungSSHead, SamsungSharpSans, SamsungOne, sans-serif
font-size 40
line-height 48
weight 300

variant='heading.desktop.headlineLight'
heading

heading.desktop.display5

Inspire the World, Create the Future

SamsungSSHead, SamsungSharpSans, SamsungOne, sans-serif
font-size 28
line-height 34
weight 400

variant='heading.desktop.display5'
heading

heading.desktop.display6

Inspire the World, Create the Future

SamsungSharpSans, SamsungSSHead, SamsungOne, sans-serif
font-size 24
line-height 29
weight 700

variant='heading.desktop.display6'
heading

heading.desktop.display7

Inspire the World, Create the Future

SamsungSharpSans, SamsungSSHead, SamsungOne, sans-serif
font-size 20
line-height 24
weight 700

variant='heading.desktop.display7'
heading

heading.mobile.display1

Inspire the World, Create the Future

SamsungSSHead, SamsungSharpSans, SamsungOne, sans-serif
font-size 32
line-height 44
weight 700

variant='heading.mobile.display1'
heading

heading.mobile.display2

Inspire the World, Create the Future

SamsungSSHead, SamsungSharpSans, SamsungOne, sans-serif
font-size 30
line-height 40
weight 700

variant='heading.mobile.display2'
heading

heading.mobile.display3

Inspire the World, Create the Future

SamsungSSHead, SamsungSharpSans, SamsungOne, sans-serif
font-size 26
line-height 34
weight 700

variant='heading.mobile.display3'
heading

heading.mobile.display4

Inspire the World, Create the Future

SamsungSSHead, SamsungSharpSans, SamsungOne, sans-serif
font-size 24
line-height 32
weight 700

variant='heading.mobile.display4'
heading

heading.mobile.display5

Inspire the World, Create the Future

SamsungSSHead, SamsungSharpSans, SamsungOne, sans-serif
font-size 22
line-height 30
weight 700

variant='heading.mobile.display5'
heading

heading.mobile.display6

Inspire the World, Create the Future

SamsungSSHead, SamsungSharpSans, SamsungOne, sans-serif
font-size 20
line-height 28
weight 700

variant='heading.mobile.display6'
title

title.desktop.title1

Inspire the World, Create the Future

SamsungSSHead, SamsungSharpSans, SamsungOne, sans-serif
font-size 36
line-height 44
weight 700

variant='title.desktop.title1'
title

title.desktop.title2

Inspire the World, Create the Future

SamsungSSHead, SamsungSharpSans, SamsungOne, sans-serif
font-size 32
line-height 40
weight 700

variant='title.desktop.title2'
title

title.desktop.title3

Inspire the World, Create the Future

SamsungSSHead, SamsungSharpSans, SamsungOne, sans-serif
font-size 28
line-height 36
weight 700

variant='title.desktop.title3'
title

title.desktop.title4

Inspire the World, Create the Future

SamsungSSHead, SamsungSharpSans, SamsungOne, sans-serif
font-size 24
line-height 28
weight 700

variant='title.desktop.title4'
title

title.desktop.title5

Inspire the World, Create the Future

SamsungSSHead, SamsungSharpSans, SamsungOne, sans-serif
font-size 22
line-height 24
weight 700

variant='title.desktop.title5'
title

title.mobile.title1

Inspire the World, Create the Future

SamsungOne, SamsungSSBody, Arial, sans-serif
font-size 24
line-height 32
weight 700

variant='title.mobile.title1'
title

title.mobile.title2

Inspire the World, Create the Future

SamsungOne, SamsungSSBody, Arial, sans-serif
font-size 22
line-height 30
weight 700

variant='title.mobile.title2'
title

title.mobile.title3

Inspire the World, Create the Future

SamsungOne, SamsungSSBody, Arial, sans-serif
font-size 20
line-height 27
weight 700

variant='title.mobile.title3'
title

title.mobile.title4

Inspire the World, Create the Future

SamsungOne, SamsungSSBody, Arial, sans-serif
font-size 18
line-height 24
weight 700

variant='title.mobile.title4'
body

body.desktop.body1

Inspire the World, Create the Future

SamsungSSBody, SamsungOne, Arial, sans-serif
font-size 18
line-height 24
weight 400

variant='body.desktop.body1'
body

body.desktop.body2

Inspire the World, Create the Future

SamsungSSBody, SamsungOne, Arial, sans-serif
font-size 16
line-height 22
weight 400

variant='body.desktop.body2'
body

body.desktop.body3

Inspire the World, Create the Future

SamsungSSBody, SamsungOne, Arial, sans-serif
font-size 14
line-height 20
weight 400

variant='body.desktop.body3'
body

body.desktop.body4

Inspire the World, Create the Future

SamsungSSBody, SamsungOne, Arial, sans-serif
font-size 12
line-height 16
weight 400

variant='body.desktop.body4'
body

body.mobile.body1

Inspire the World, Create the Future

SamsungSSBody, SamsungOne, Arial, sans-serif
font-size 16
line-height 22
weight 400

variant='body.mobile.body1'
body

body.mobile.body2

Inspire the World, Create the Future

SamsungSSBody, SamsungOne, Arial, sans-serif
font-size 14
line-height 19
weight 400

variant='body.mobile.body2'
body

body.mobile.body3

Inspire the World, Create the Future

SamsungSSBody, SamsungOne, Arial, sans-serif
font-size 12
line-height 16
weight 400

variant='body.mobile.body3'
body

body.mobile.body4

Inspire the World, Create the Future

SamsungSSBody, SamsungOne, Arial, sans-serif
font-size 10
line-height 14
weight 400

variant='body.mobile.body4'

Spacing

Use spacing tokens para gaps, paddings e ritmo de pagina. Evite valores magicos no storefront.

Scale

Escala numerica base para ritmo, barras e medidas internas.

0px

preview proporcional

spacing.scale.0

0px
gap='spacing.scale.0'

2px

preview proporcional

spacing.scale.2

2px
gap='spacing.scale.2'

4px

preview proporcional

spacing.scale.4

4px
gap='spacing.scale.4'

8px

preview proporcional

spacing.scale.8

8px
gap='spacing.scale.8'

12px

preview proporcional

spacing.scale.12

12px
gap='spacing.scale.12'

16px

preview proporcional

spacing.scale.16

16px
gap='spacing.scale.16'

24px

preview proporcional

spacing.scale.24

24px
gap='spacing.scale.24'

32px

preview proporcional

spacing.scale.32

32px
gap='spacing.scale.32'

36px

preview proporcional

spacing.scale.36

36px
gap='spacing.scale.36'

40px

preview proporcional

spacing.scale.40

40px
gap='spacing.scale.40'

48px

preview proporcional

spacing.scale.48

48px
gap='spacing.scale.48'

64px

preview proporcional

spacing.scale.64

64px
gap='spacing.scale.64'

80px

preview proporcional

spacing.scale.80

80px
gap='spacing.scale.80'

96px

preview proporcional

spacing.scale.96

96px
gap='spacing.scale.96'

128px

preview proporcional

spacing.scale.128

128px
gap='spacing.scale.128'

160px

preview proporcional

spacing.scale.160

160px
gap='spacing.scale.160'

Inset

Tokens oficiais do samsungbr.design-system.

8px

preview proporcional

spacing.inset.xs

8px
gap='spacing.inset.xs'

16px

preview proporcional

spacing.inset.sm

16px
gap='spacing.inset.sm'

24px

preview proporcional

spacing.inset.md

24px
gap='spacing.inset.md'

32px

preview proporcional

spacing.inset.lg

32px
gap='spacing.inset.lg'

48px

preview proporcional

spacing.inset.xl

48px
gap='spacing.inset.xl'

Stack

Gaps verticais entre blocos de conteudo.

4px

preview proporcional

spacing.stack.3xs

4px
gap='spacing.stack.3xs'

8px

preview proporcional

spacing.stack.2xs

8px
gap='spacing.stack.2xs'

12px

preview proporcional

spacing.stack.xs

12px
gap='spacing.stack.xs'

16px

preview proporcional

spacing.stack.sm

16px
gap='spacing.stack.sm'

24px

preview proporcional

spacing.stack.md

24px
gap='spacing.stack.md'

32px

preview proporcional

spacing.stack.lg

32px
gap='spacing.stack.lg'

48px

preview proporcional

spacing.stack.xl

48px
gap='spacing.stack.xl'

64px

preview proporcional

spacing.stack.2xl

64px
gap='spacing.stack.2xl'

96px

preview proporcional

spacing.stack.3xl

96px
gap='spacing.stack.3xl'

Inline

Gaps horizontais entre icones, labels, botoes e chips.

8px

preview proporcional

spacing.inline.xs

8px
gap='spacing.inline.xs'

16px

preview proporcional

spacing.inline.sm

16px
gap='spacing.inline.sm'

24px

preview proporcional

spacing.inline.md

24px
gap='spacing.inline.md'

32px

preview proporcional

spacing.inline.lg

32px
gap='spacing.inline.lg'

Container

Largura de container por breakpoint.

32px

preview proporcional

spacing.container.padding.desktop.default

32px
gap='spacing.container.padding.desktop.default'

48px

preview proporcional

spacing.container.padding.desktop.wide

48px
gap='spacing.container.padding.desktop.wide'

24px

preview proporcional

spacing.container.padding.tablet.default

24px
gap='spacing.container.padding.tablet.default'

16px

preview proporcional

spacing.container.padding.mobile.default

16px
gap='spacing.container.padding.mobile.default'

Section

Tokens oficiais do samsungbr.design-system.

64px

preview proporcional

spacing.section.padding.desktop.sm

64px
gap='spacing.section.padding.desktop.sm'

80px

preview proporcional

spacing.section.padding.desktop.md

80px
gap='spacing.section.padding.desktop.md'

96px

preview proporcional

spacing.section.padding.desktop.lg

96px
gap='spacing.section.padding.desktop.lg'

64px

preview proporcional

spacing.section.padding.tablet.default

64px
gap='spacing.section.padding.tablet.default'

40px

preview proporcional

spacing.section.padding.mobile.default

40px
gap='spacing.section.padding.mobile.default'

48px

preview proporcional

spacing.section.margin.desktop.default

48px
gap='spacing.section.margin.desktop.default'

64px

preview proporcional

spacing.section.margin.desktop.lg

64px
gap='spacing.section.margin.desktop.lg'

48px

preview proporcional

spacing.section.margin.tablet.default

48px
gap='spacing.section.margin.tablet.default'

32px

preview proporcional

spacing.section.margin.mobile.default

32px
gap='spacing.section.margin.mobile.default'

Component / Card

Espacamentos pensados para componentes recorrentes.

16px

preview proporcional

spacing.component.card.padding.sm

16px
gap='spacing.component.card.padding.sm'

24px

preview proporcional

spacing.component.card.padding.md

24px
gap='spacing.component.card.padding.md'

32px

preview proporcional

spacing.component.card.padding.lg

32px
gap='spacing.component.card.padding.lg'

12px

preview proporcional

spacing.component.card.gap.sm

12px
gap='spacing.component.card.gap.sm'

16px

preview proporcional

spacing.component.card.gap.md

16px
gap='spacing.component.card.gap.md'

Component / Button

Espacamentos pensados para componentes recorrentes.

16px

preview proporcional

spacing.component.button.paddingX.sm

16px
gap='spacing.component.button.paddingX.sm'

24px

preview proporcional

spacing.component.button.paddingX.md

24px
gap='spacing.component.button.paddingX.md'

8px

preview proporcional

spacing.component.button.paddingY.sm

8px
gap='spacing.component.button.paddingY.sm'

12px

preview proporcional

spacing.component.button.paddingY.md

12px
gap='spacing.component.button.paddingY.md'

Page

Alias para composicao de pagina e largura de conteudo.

32px

preview proporcional

spacing.page.paddingX.desktop

32px
gap='spacing.page.paddingX.desktop'

16px

preview proporcional

spacing.page.paddingX.mobile

16px
gap='spacing.page.paddingX.mobile'

Grid

Use grid tokens para breakpoints, colunas, gutters, margens e container responsivo.

Container

Define a largura maxima e o alinhamento da pagina. Use PageContainer para respeitar a estrutura oficial.

Columns

Organizam conteudo por breakpoint. No Storefront, prefira Grid com base, md e lg numericos.

Gutter e margin

Controlam respiro entre colunas e bordas da pagina. Evite espaçamentos manuais quando o grid ja cobre o caso.

Anatomia do grid responsivo

Use uma grade fluida com 4 colunas no mobile, 8 em tablet e 12 em desktop. Essa progressao permite que o mesmo bloco escale sem recriar layout por pagina.

1

2

3

4

5

6

7

8

9

10

11

12

base: 4 columnsmd: 8 columnslg: 12 columns

Como usar cada token de grid

Exemplos objetivos para Breakpoints, Columns, Type, Column, Gutter e Margin. Use sdsTokens.grid quando precisar consultar specs ou integrar uma excecao tecnica; para layout React, prefira PageContainer e Grid.

Breakpoints

sdsTokens.grid.breakpoints

Breakpoints indicam onde a experiencia muda de mobile para tablet, desktop ou desktopHD.

Use para tomar decisoes condicionais de layout, documentar specs ou integrar com CSS customizado pontual.

import { sdsTokens } from 'samsungbr.design-system'

const mobile = sdsTokens.grid.breakpoints.mobile
const tablet = sdsTokens.grid.breakpoints.tablet
const desktop = sdsTokens.grid.breakpoints.desktop

Columns

sdsTokens.grid.columns

Columns representa a quantidade total de colunas do grid em cada breakpoint.

Use como referencia para definir quantas colunas existem em cada viewport.

import { Grid, sdsTokens } from 'samsungbr.design-system'

<Grid
	columns={{
		base: sdsTokens.grid.columns.mobile,
		md: sdsTokens.grid.columns.tablet,
		lg: sdsTokens.grid.columns.desktop,
	}}
	gap='spacing.stack.md'
/>

Type

sdsTokens.grid.type

Type descreve o comportamento estrutural do grid, como fixed, fluid ou outra definicao oficial.

Use para documentar a estrategia de grid aplicada em cada breakpoint.

import { sdsTokens } from 'samsungbr.design-system'

const mobileGridType = sdsTokens.grid.type.mobile
const desktopGridType = sdsTokens.grid.type.desktop

const gridSpec = desktopGridType + ' grid'

Column

sdsTokens.grid.column

Column representa a medida individual de cada coluna dentro do grid oficial.

Use para consultar a largura de uma coluna em specs, calculos ou documentacao tecnica.

import { sdsTokens } from 'samsungbr.design-system'

const desktopColumn = sdsTokens.grid.column.desktop
const desktopHDColumn = sdsTokens.grid.column.desktopHD

const columnLabel = String(desktopColumn) + 'px column'

Gutter

sdsTokens.grid.gutter

Gutter e o espaco entre colunas. Em composicao React, prefira o gap tokenizado do Grid.

Use para manter o espaco entre colunas consistente quando precisar integrar grid com CSS especifico.

import { Grid, sdsTokens } from 'samsungbr.design-system'

const desktopGutter = sdsTokens.grid.gutter.desktop

<Grid columns={{ base: 1, md: 2, lg: 3 }} gap="spacing.stack.md">
	<Card />
</Grid>

Margin

sdsTokens.grid.margin

Margin define o respiro lateral por breakpoint. Para paginas, prefira PageContainer.

Use para entender o respiro lateral da pagina e evitar padding horizontal manual fora do sistema.

import { PageContainer, sdsTokens } from 'samsungbr.design-system'

const mobileMargin = sdsTokens.grid.margin.mobile

<PageContainer maxWidth='wide'>
	<Section />
</PageContainer>

Breakpoints e medidas

Resumo gerado a partir de sdsTokens.grid para consulta rapida de container, colunas, gutter e margens.

Breakpoint
Columns
Container
Gutter
Margin
mobile

0

6

328

24

16

tablet

768rem

6

720

32

24

desktop

1024rem

12

976

24

24

desktopHD

1440rem

12

1318

24

24

Receitas de composicao

Use estes pontos de partida antes de criar CSS local para colunas, gaps ou containers.

Grid de cards

Beneficios, tiles de produto, links editoriais e documentacao.

Comece com uma coluna no mobile, duas no tablet e tres no desktop.

Card
Card
Card
<Grid columns={{ base: 1, md: 2, lg: 3 }} gap='spacing.stack.md'>
	<Box padding='spacing.component.card.padding.md'>Card</Box>
</Grid>

Conteudo + apoio visual

Secoes com texto de um lado e imagem, metricas ou preview do outro.

Use duas colunas a partir de md e mantenha uma coluna no mobile.

Conteudo

Texto principal

Preview

<Grid columns={{ base: 1, md: 2, lg: 2 }} gap='spacing.stack.lg'>
	<Content />
	<Preview />
</Grid>

Landing page modular

Paginas longas com hero, secoes e blocos de conversao.

Combine PageContainer, Stack e Grid para manter ritmo vertical e colunas previsiveis.

Hero
Section
Section
<PageContainer maxWidth='wide'>
	<Stack gap='spacing.stack.lg'>
		<Grid columns={{ base: 1, md: 2, lg: 2 }} gap='spacing.stack.lg' />
	</Stack>
</PageContainer>

Breakpoints

Pontos de resposta usados para adaptar layouts.

breakpoints.mobile

0

breakpoints.tablet

768rem

breakpoints.desktop

1024rem

breakpoints.desktopHD

1440rem

Columns

Quantidade de colunas por contexto responsivo.

columns.mobile

6

columns.tablet

6

columns.desktop

12

columns.desktopHD

12

Type

Tipo de grid e configuracao estrutural.

type.mobile

stretch

type.tablet

center

type.desktop

center

type.desktopHD

center

Container

Largura de container por breakpoint.

container.mobile

328

container.tablet

720

container.desktop

976

container.desktopHD

1318

Column

Largura de coluna por breakpoint.

column.mobile

32

column.tablet

76

column.desktop

50

column.desktopHD

80

Gutter

Espaco entre colunas do grid.

gutter.mobile

24

gutter.tablet

32

gutter.desktop

24

gutter.desktopHD

24

Margin

Margens laterais por breakpoint.

margin.mobile

16

margin.tablet

24

margin.desktop

24

margin.desktopHD

24

Effects

Use effects para radius, shadow e camadas de overlay. Bordas continuam usando color.semantic.border.*.

Shadow

Elevacao para surfaces, overlays e elementos interativos.

shadow

effects.shadow.sm

0px 1px 3px rgba(0, 0, 0, 0.2)
tokenToCssValue('effects.shadow.sm')

shadow

effects.shadow.md

0px 4px 10px rgba(0, 0, 0, 0.2)
tokenToCssValue('effects.shadow.md')

Border

Tokens oficiais do samsungbr.design-system.

effect

effects.border.width.default

1px
tokenToCssValue('effects.border.width.default')

effect

effects.border.style.default

solid
tokenToCssValue('effects.border.style.default')

Radius

Arredondamento oficial para cards, controles e containers.

0px

effects.radius.scale.none

0px
tokenToCssValue('effects.radius.scale.none')

4px

effects.radius.scale.xs

4px
tokenToCssValue('effects.radius.scale.xs')

6px

effects.radius.scale.sm

6px
tokenToCssValue('effects.radius.scale.sm')

8px

effects.radius.scale.md

8px
tokenToCssValue('effects.radius.scale.md')

20px

effects.radius.scale.lg

20px
tokenToCssValue('effects.radius.scale.lg')

24px

effects.radius.scale.xl

24px
tokenToCssValue('effects.radius.scale.xl')

30px

effects.radius.scale.pill

30px
tokenToCssValue('effects.radius.scale.pill')

9999px

effects.radius.scale.full

9999px
tokenToCssValue('effects.radius.scale.full')

6px

effects.radius.semantic.button.sm

6px
tokenToCssValue('effects.radius.semantic.button.sm')

8px

effects.radius.semantic.button.md

8px
tokenToCssValue('effects.radius.semantic.button.md')

8px

effects.radius.semantic.card.default

8px
tokenToCssValue('effects.radius.semantic.card.default')

24px

effects.radius.semantic.card.lg

24px
tokenToCssValue('effects.radius.semantic.card.lg')

6px

effects.radius.semantic.input.default

6px
tokenToCssValue('effects.radius.semantic.input.default')

20px

effects.radius.semantic.container.default

20px
tokenToCssValue('effects.radius.semantic.container.default')

30px

effects.radius.semantic.chip.default

30px
tokenToCssValue('effects.radius.semantic.chip.default')

9999px

effects.radius.semantic.avatar.default

9999px
tokenToCssValue('effects.radius.semantic.avatar.default')

Scrim

Camadas de sobreposicao para modais, sheets e foco visual.

effect

effects.scrim.scale.light

#00000099
tokenToCssValue('effects.scrim.scale.light')

effect

effects.scrim.scale.heavy

#000000e6
tokenToCssValue('effects.scrim.scale.heavy')

effect

effects.scrim.semantic.modal.default

#000000e6
tokenToCssValue('effects.scrim.semantic.modal.default')

effect

effects.scrim.semantic.overlay.default

#00000099
tokenToCssValue('effects.scrim.semantic.overlay.default')

Borders

Bordas usam tokens semanticos de cor, como color.semantic.border.default e color.semantic.border.brand. Eles aparecem uma unica vez em Color para evitar duplicacao.

<Box
	style={{ border: "1px solid tokenToCssValue('color.semantic.border.default')" }}
 />

Alias semanticos

Alias sao tokens semanticos. Prefira alias ao montar paginas e componentes com intencao de UI clara.

Expressam intencao

Um alias descreve o papel do estilo na interface, como card, page ou modal, em vez de expor apenas a escala base.

Protegem contra refactor visual

Se o radius ou padding oficial de cards mudar no design-system, o storefront continua usando o mesmo alias.

Reduzem decisoes locais

Devs nao precisam escolher entre varios spacing, shadow ou radius quando o componente ja tem uma intencao conhecida.

O que sao alias semanticos?

Alias semantico e um token que representa uma decisao de produto ou composicao, nao apenas um valor visual isolado. Em vez de escolher manualmente padding, radius e shadow, o dev usa o alias que descreve a intencao: card, page, modal ou outro padrao oficial.

Na pratica, tokens base respondem a pergunta "qual valor?". Alias respondem "qual papel esse bloco cumpre na interface?".

Decisao recomendada
// Evite: decisao visual solta no storefront
const padding = '24px'
const radius = '8px'

// Prefira: intencao semantica vinda do design-system
const padding = tokenToCssValue('alias.card.padding')
const radius = tokenToCssValue('alias.card.radius')

Exemplos de uso

Use estes exemplos como referencia de composicao. O alias deve entrar quando a intencao do bloco for conhecida, mesmo que o valor final seja resolvido com tokenToCssValue.

Card editorial

alias.card

Superficie reutilizavel para vitrines, tiles e blocos de conteudo.

Use alias de card para padding, radius e shadow quando a superficie tiver comportamento de card.

<Box
	padding='alias.card.padding'
	style={{
		borderRadius: tokenToCssValue('alias.card.radius'),
		boxShadow: tokenToCssValue('alias.card.shadow'),
	}}
>
	<CardContent />
</Box>

Container de pagina

alias.page

Area principal de uma pagina VTEX com largura e respiro consistentes.

Use alias de page para evitar max-width e padding horizontal manual em cada template.

<Box
	maxWidth='alias.page.container'
	style={{ paddingInline: tokenToCssValue('alias.page.paddingX') }}
>
	<Section />
</Box>

Modal ou overlay

alias.modal

Superficie elevada para dialog, drawer ou bloco temporario acima da pagina.

Use alias de modal quando a decisao visual pertence ao comportamento de overlay, nao a um card comum.

<Box
	style={{
		borderRadius: tokenToCssValue('alias.modal.radius'),
		boxShadow: tokenToCssValue('alias.modal.shadow'),
	}}
>
	<DialogContent />
</Box>

Page

Alias para composicao de pagina e largura de conteudo.

page

alias.page.paddingX.desktop

32px

Use alias quando a intencao visual for semantica, como card, pagina ou modal.

tokenToCssValue('alias.page.paddingX.desktop')

page

alias.page.paddingX.tablet

24px

Use alias quando a intencao visual for semantica, como card, pagina ou modal.

tokenToCssValue('alias.page.paddingX.tablet')

page

alias.page.paddingX.mobile

16px

Use alias quando a intencao visual for semantica, como card, pagina ou modal.

tokenToCssValue('alias.page.paddingX.mobile')

page

alias.page.container.mobile

328px

Use alias quando a intencao visual for semantica, como card, pagina ou modal.

tokenToCssValue('alias.page.container.mobile')

page

alias.page.container.tablet

720px

Use alias quando a intencao visual for semantica, como card, pagina ou modal.

tokenToCssValue('alias.page.container.tablet')

page

alias.page.container.desktop

976px

Use alias quando a intencao visual for semantica, como card, pagina ou modal.

tokenToCssValue('alias.page.container.desktop')

page

alias.page.container.desktopHD

1318px

Use alias quando a intencao visual for semantica, como card, pagina ou modal.

tokenToCssValue('alias.page.container.desktopHD')

page

alias.page.gutter.mobile

24px

Use alias quando a intencao visual for semantica, como card, pagina ou modal.

tokenToCssValue('alias.page.gutter.mobile')

page

alias.page.gutter.tablet

32px

Use alias quando a intencao visual for semantica, como card, pagina ou modal.

tokenToCssValue('alias.page.gutter.tablet')

page

alias.page.gutter.desktop

24px

Use alias quando a intencao visual for semantica, como card, pagina ou modal.

tokenToCssValue('alias.page.gutter.desktop')

page

alias.page.gutter.desktopHD

24px

Use alias quando a intencao visual for semantica, como card, pagina ou modal.

tokenToCssValue('alias.page.gutter.desktopHD')

page

alias.page.margin.mobile

16px

Use alias quando a intencao visual for semantica, como card, pagina ou modal.

tokenToCssValue('alias.page.margin.mobile')

page

alias.page.margin.tablet

24px

Use alias quando a intencao visual for semantica, como card, pagina ou modal.

tokenToCssValue('alias.page.margin.tablet')

page

alias.page.margin.desktop

24px

Use alias quando a intencao visual for semantica, como card, pagina ou modal.

tokenToCssValue('alias.page.margin.desktop')

page

alias.page.margin.desktopHD

24px

Use alias quando a intencao visual for semantica, como card, pagina ou modal.

tokenToCssValue('alias.page.margin.desktopHD')

Surface

Tokens oficiais do samsungbr.design-system.

page

alias.surface.page

#ffffff

Use alias quando a intencao visual for semantica, como card, pagina ou modal.

tokenToCssValue('alias.surface.page')

card

alias.surface.card

#ffffff

Use alias quando a intencao visual for semantica, como card, pagina ou modal.

tokenToCssValue('alias.surface.card')

card

alias.surface.preview

#f5f7fe

Use alias quando a intencao visual for semantica, como card, pagina ou modal.

tokenToCssValue('alias.surface.preview')

card

alias.surface.callout

#f5f7fe

Use alias quando a intencao visual for semantica, como card, pagina ou modal.

tokenToCssValue('alias.surface.callout')

card

alias.surface.modal

#ffffff

Use alias quando a intencao visual for semantica, como card, pagina ou modal.

tokenToCssValue('alias.surface.modal')

Card

Alias semanticos para cards e modulos reutilizaveis.

card

alias.card.padding

24px

Use alias quando a intencao visual for semantica, como card, pagina ou modal.

tokenToCssValue('alias.card.padding')

card

alias.card.radius

8px

Use alias quando a intencao visual for semantica, como card, pagina ou modal.

tokenToCssValue('alias.card.radius')

card

alias.card.shadow

0px 1px 3px rgba(0, 0, 0, 0.2)

Use alias quando a intencao visual for semantica, como card, pagina ou modal.

tokenToCssValue('alias.card.shadow')

card

alias.card.border

1px solid #dddddd

Use alias quando a intencao visual for semantica, como card, pagina ou modal.

tokenToCssValue('alias.card.border')

Button

Tokens oficiais do samsungbr.design-system.

card

alias.button.paddingX

16px

Use alias quando a intencao visual for semantica, como card, pagina ou modal.

tokenToCssValue('alias.button.paddingX')

card

alias.button.paddingY

8px

Use alias quando a intencao visual for semantica, como card, pagina ou modal.

tokenToCssValue('alias.button.paddingY')

card

alias.button.radius

6px

Use alias quando a intencao visual for semantica, como card, pagina ou modal.

tokenToCssValue('alias.button.radius')

card

alias.button.motionDuration

200ms

Use alias quando a intencao visual for semantica, como card, pagina ou modal.

tokenToCssValue('alias.button.motionDuration')

card

alias.button.motionEasing

cubic-bezier(0.35, 0, 0.36, 1)

Use alias quando a intencao visual for semantica, como card, pagina ou modal.

tokenToCssValue('alias.button.motionEasing')

Modal

Alias para overlays e dialogs.

card

alias.modal.overlay

#000000e6

Use alias quando a intencao visual for semantica, como card, pagina ou modal.

tokenToCssValue('alias.modal.overlay')

card

alias.modal.radius

20px

Use alias quando a intencao visual for semantica, como card, pagina ou modal.

tokenToCssValue('alias.modal.radius')

card

alias.modal.animationDuration

400ms

Use alias quando a intencao visual for semantica, como card, pagina ou modal.

tokenToCssValue('alias.modal.animationDuration')

card

alias.modal.animationEasing

cubic-bezier(0, 0.18, 0.07, 1)

Use alias quando a intencao visual for semantica, como card, pagina ou modal.

tokenToCssValue('alias.modal.animationEasing')
Primitives

Building blocks para Store Front

Primitives resolvem o layout antes do CSS customizado. Use exemplos pequenos e previsiveis para manter o storefront alinhado ao design-system.

Box

Container atomico para aplicar tokens de layout e superficie. Use como base de cards, banners, wrappers e areas com padding tokenizado.

padding / margin / background / maxWidth / style

Box com padding e surface

<Box padding='spacing.component.card.padding.md' background='color.semantic.background.surface'>
	Conteudo
</Box>

Stack

Fluxo vertical com gap oficial do design-system. Use para empilhar titulo, texto, controles e grupos de cards.

gap / align / justify / children
<Stack gap='spacing.stack.sm'>
	<Typography variant='title.desktop.title4'>Titulo</Typography>
	<Typography variant='body.desktop.body2'>Descricao</Typography>
</Stack>

Inline

Fluxo horizontal com gap e wrap para composicoes compactas. Use para icon + text, chips, actions e metadados.

gap / align / justify / wrap / children
LabelStatusAction
<Inline align='center' gap='spacing.inline.sm' wrap='wrap'>
	<Icon name='cart' />
	<Typography variant='body.desktop.body3'>Comprar</Typography>
</Inline>

Grid

Grid responsivo simples para cards e layouts editoriais. Use quando uma area precisar de colunas por breakpoint.

columns / gap / children
1
2
3
<Grid columns={{ base: 1, md: 2, lg: 3 }} gap='spacing.stack.md'>
	<Card />
</Grid>

PageContainer

Container de pagina com largura padronizada. Use para limitar conteudo principal e respeitar margens de pagina.

maxWidth / children / className / style

maxWidth="content"

<PageContainer maxWidth='wide'>
	<Section />
</PageContainer>

Typography

Componente oficial para hierarquia textual Samsung. Use antes de criar font-size, weight ou line-height manual.

as / variant / children / className / style

Samsung Head

Body text pela variant oficial.

<Typography as='h2' variant='title.desktop.title3'>
	Titulo da secao
</Typography>

Section

Wrapper semantico para areas de pagina. Use para separar conteudo com label acessivel e spacing tokenizado.

title / description / spacing / headingLevel / ariaLabel

Section semantica

<Section ariaLabel='Beneficios' spacing='spacing.stack.lg'>
	<Grid />
</Section>
Patterns

Receitas para telas consistentes

Patterns sao receitas oficiais de composicao. Eles reduzem decisao manual, repeticao de CSS e variacao visual entre paginas VTEX.

Hero institucional

Abertura de paginas editoriais, campanhas ou areas de documentacao.

PageContainer + Section + Stack + Typography + Grid

Samsung experience

Headline, descricao e area de suporte com ritmo oficial.

<Section ariaLabel='Hero'>
	<Stack gap='spacing.stack.md'>
		<Typography as='h1' variant='heading.desktop.display5'>Titulo</Typography>
		<Typography variant='body.desktop.body1'>Descricao curta.</Typography>
	</Stack>
</Section>

Card grid

Listas de beneficios, produtos, conteudos ou links de navegacao.

Grid + Box + Stack + Typography
A
B
C
<Grid columns={{ base: 1, md: 2, lg: 3 }} gap='spacing.stack.md'>
	<Box padding='spacing.component.card.padding.md'>Card</Box>
</Grid>

Secao de conteudo

Blocos explicativos com titulo, texto e suporte visual.

Section + Grid + Stack + Typography

Texto

Visual

<Section ariaLabel='Conteudo' spacing='spacing.stack.lg'>
	<Grid columns={{ base: 1, md: 2 }} gap='spacing.stack.lg'>...</Grid>
</Section>

Banner de campanha

Chamadas comerciais com texto curto e acao principal.

Box + Inline + Stack + Typography

Oferta Samsung

Call to action
<Box padding='spacing.component.card.padding.lg' background='color.brand.skyblue.light'>
	<Stack gap='spacing.stack.sm'>Conteudo</Stack>
</Box>

Bloco de documentacao

Explicar uma API, regra de uso ou decisao tecnica.

Box + Stack + CodeBlock + Typography

API publica

<Box padding=... />
<Box padding='spacing.component.card.padding.md'>
	<Typography variant='title.desktop.title5'>API</Typography>
	<CodeBlock>...</CodeBlock>
</Box>

Lista de beneficios

Mostrar vantagens, boas praticas ou etapas de um fluxo.

Stack + Inline + Icon + Typography

Consistente

Responsivo

VTEX friendly

<Stack gap='spacing.stack.sm'>
	<Inline align='center' gap='spacing.inline.sm'>...</Inline>
</Stack>

Layout de landing page

Pagina de campanha ou produto com secoes escaneaveis.

PageContainer + Section + Stack + Grid
Hero
Section
Section
<PageContainer maxWidth='wide'>
	<Stack gap='spacing.stack.lg'>
		<Section />
	</Stack>
</PageContainer>
Icons

Iconografia Samsung por peso

Icones devem ser consumidos pelo componente Icon. A pagina mostra uma amostra organizada por peso e categoria para manter performance e evitar uma lista infinita no builder VTEX.

Bold

Alta enfase para estados ativos, acoes primarias e UI densa.

97 de 97 icons

navigation

backward
backward
close-up
close-up
down-lowest
down-lowest
forward
forward
list
list
menu
menu
next
next
open-down
open-down
previous
previous
sort-by
sort-by
up-highest
up-highest

action

bad
bad
bad-select
bad-select
bookmark-select
bookmark-select
calculator
calculator
cancel
cancel
compare
compare
confirmation-result
confirmation-result
delete
delete
done
done
download
download
edit
edit
enter
enter
filter
filter
filter-select
filter-select
good
good
good-select
good-select
home
home
link
link
location
location
minus
minus
new-window
new-window
online
online
plus
plus
remove
remove
search
search
share
share
star-rating01
star-rating01
star-rating02
star-rating02
upload
upload
view
view
voice
voice
wishlist-select
wishlist-select
wishlist-unselect
wishlist-unselect

industry

bank
bank

social

blogger
blogger
facebook
facebook
google
google
instargram
instargram
linked-in
linked-in
odnoklassniki
odnoklassniki
pinterest
pinterest
qq
qq
renren
renren
snapchat
snapchat
tictok
tictok
vk
vk
weibo
weibo
weixin
weixin
whatsapp
whatsapp
x
x
youtube
youtube

notification

calendar
calendar
calendar-outline
calendar-outline
notification
notification

communication

call
call
community
community
email
email
email-outline
email-outline
message
message

shopping

cart
cart
cashback
cashback
deal
deal
fast-shipping-guarantee
fast-shipping-guarantee
home-appliance-service
home-appliance-service
interest-free
interest-free
price-guarantee
price-guarantee
rewards
rewards
store
store

information

error
error
error-outline
error-outline
faq
faq
help
help
help-outline
help-outline
info
info
info-outline
info-outline

media

pause
pause
play
play
show
show
show-fill
show-fill

service

repair-support
repair-support
trade-in
trade-in
warranty
warranty

product

smart-things
smart-things
windfree
windfree

human

user
user
user-select
user-select

Regular

Uso padrao para navegacao, cards, listas e controles.

233 de 233 icons

product

2-in-1-formpactor
2-in-1-formpactor
air-conditioner
air-conditioner
buds3
buds3
buds3-pro
buds3-pro
camera
camera
clamshell-formpactor
clamshell-formpactor
clamshell180-formpactor
clamshell180-formpactor
devices
devices
galaxy-flip
galaxy-flip
galaxy-flip-flexcam
galaxy-flip-flexcam
galaxy-flip-flexmode
galaxy-flip-flexmode
galaxy-flip-folded
galaxy-flip-folded
galaxy-flip-formpactor
galaxy-flip-formpactor
galaxy-flip-unfolded
galaxy-flip-unfolded
galaxy-flip7-flexcam
galaxy-flip7-flexcam
galaxy-fold
galaxy-fold
galaxy-fold-flexmode
galaxy-fold-flexmode
galaxy-fold-folded
galaxy-fold-folded
galaxy-fold-unfolded
galaxy-fold-unfolded
general-display
general-display
general-phone
general-phone
iot
iot
laptop
laptop
microwave
microwave
oven
oven
phone
phone
refrigerator
refrigerator
ring
ring
robot-vacuum
robot-vacuum
smart-home
smart-home
smart-things
smart-things
sound-bar
sound-bar
storage
storage
tablet
tablet
the-sero-tv
the-sero-tv
tv
tv
washer
washer
wearable-band
wearable-band
wearable-watch
wearable-watch
wearable-watch-size
wearable-watch-size
wearable-watch-ultra
wearable-watch-ultra
wearable-watch-ultra-size
wearable-watch-ultra-size
windfree
windfree

action

3d
3d
360
360
add
add
adjustment
adjustment
ar
ar
bad
bad
bookmark-unselect
bookmark-unselect
brightness
brightness
cancel-close
cancel-close
compare
compare
compose
compose
confirmation-result
confirmation-result
copy
copy
current-location
current-location
delete
delete
done
done
download
download
edit
edit
edit-color
edit-color
enter
enter
expand
expand
filter
filter
good
good
home
home
location
location
manual-book
manual-book
minus
minus
more01
more01
more02
more02
multitasking
multitasking
new-tab
new-tab
online
online
outlink
outlink
paste
paste
plus
plus
printing
printing
refresh
refresh
remove
remove
scan
scan
screen-sharing
screen-sharing
search
search
select
select
send
send
setting
setting
share
share
subscription
subscription
tab
tab
upload
upload
view
view
voice
voice
wishlist-unselect
wishlist-unselect
zoom-in
zoom-in
zoom-out
zoom-out

human

accessibility
accessibility
group
group
nickname
nickname
user
user

service

account
account
early-upgrade-program
early-upgrade-program
emoticon-best
emoticon-best
emoticon-good
emoticon-good
emoticon-normal
emoticon-normal
emoticon-sorry
emoticon-sorry
emoticon-worst
emoticon-worst
extended-warranty
extended-warranty
galaxy-free-trial-program
galaxy-free-trial-program
highlight
highlight
kids
kids
lock
lock
measure
measure
mobile-care
mobile-care
repair
repair
repair-support
repair-support
samsung-care
samsung-care
senior01
senior01
senior02
senior02
software-update
software-update
support-download
support-download
support-laptop
support-laptop
switch
switch
trade-in
trade-in
unlock
unlock
upgrade
upgrade
warranty
warranty

industry

airport
airport
bank
bank
broadcasting
broadcasting
control-room
control-room
corporate
corporate
dooh
dooh
education
education
game
game
government
government
healthcare
healthcare
hospitality
hospitality
industry-finance
industry-finance
manufacturing
manufacturing
public-safety
public-safety
qsr
qsr
retail
retail
sports
sports
transport
transport

navigation

backward
backward
close-up
close-up
down-lowest
down-lowest
forward
forward
menu
menu
next
next
open-down
open-down
previous
previous
sort-by
sort-by
up-highest
up-highest

shopping

barcode
barcode
best
best
birthday
birthday
bundle
bundle
cancel-order
cancel-order
cart
cart
cashback
cashback
cookie
cookie
coupon
coupon
deal
deal
event
event
exclusive-color
exclusive-color
fast-shipping-guarantee
fast-shipping-guarantee
find-order
find-order
gift
gift
home-appliance-service
home-appliance-service
in-stock
in-stock
interest-free
interest-free
order-tracking
order-tracking
payment
payment
point
point
price-guarantee
price-guarantee
qr-code
qr-code
return-order
return-order
rewards
rewards
shipping
shipping
shipping-free
shipping-free
shipping-help
shipping-help
shipping-return
shipping-return
shipping-trade
shipping-trade
shopping-finance
shopping-finance
store
store

trade-in

battery-charging
battery-charging
bluetooth
bluetooth
charging
charging
crack
crack
cracked-screen
cracked-screen
missing-device
missing-device
no-sound
no-sound
power
power
sim-card
sim-card
unavailable-network
unavailable-network
warning
warning
wear-and-tear
wear-and-tear

notification

calendar
calendar
clock
clock
notification
notification

communication

call
call
community
community
email
email
message
message

information

customer-service
customer-service
help
help
info
info

file

document
document
no-image
no-image
storage-card
storage-card

media

fast-forward
fast-forward
go-to-beginning
go-to-beginning
go-to-end
go-to-end
go-to-next
go-to-next
go-to-previous
go-to-previous
pause
pause
pause-contained
pause-contained
play
play
repeat-all
repeat-all
repeat-one
repeat-one
reverse
reverse
rewind
rewind
show
show
shuffle
shuffle
start-pause
start-pause
stop
stop
video
video
volume-down
volume-down
volume-sound
volume-sound
volume-up
volume-up
wi-fi
wi-fi

Light

Suporte visual leve, informacao secundaria e contextos editoriais.

104 de 104 icons

product

accessories
accessories
air-conditioner
air-conditioner
air-dresser
air-dresser
air-purifier
air-purifier
app-and-service
app-and-service
audio
audio
bd
bd
camcorder
camcorder
camera
camera
car
car
cooktop
cooktop
dish-washer
dish-washer
dry
dry
dryer
dryer
dvd
dvd
ehs
ehs
etc
etc
galaxy-flip
galaxy-flip
galaxy-fold
galaxy-fold
general-display
general-display
headphone
headphone
home-sync
home-sync
home-theater
home-theater
hub
hub
iot
iot
ip-cam
ip-cam
kimchi-refrigerator
kimchi-refrigerator
laptop
laptop
light-bulb
light-bulb
microwave
microwave
moisture
moisture
odd
odd
oven
oven
pc
pc
phone
phone
projector
projector
radio
radio
range
range
refrigerator
refrigerator
ring
ring
robot-vacuum
robot-vacuum
room-ac
room-ac
server
server
smart-home
smart-home
smart-things
smart-things
sound-bar
sound-bar
speaker
speaker
ssd
ssd
stick-vacuum
stick-vacuum
storage
storage
system-ac
system-ac
tablet
tablet
the-frame-tv
the-frame-tv
tv
tv
washer
washer
wearable-watch
wearable-watch
windfree
windfree
wine-cellar
wine-cellar

industry

airport
airport
bank
bank
broadcasting
broadcasting
control-room
control-room
corporate
corporate
dooh
dooh
education
education
finance
finance
government
government
healthcare
healthcare
hospitality
hospitality
manufacturing
manufacturing
public-safety
public-safety
qsr
qsr
retrail
retrail
sports
sports
transport
transport

trade-in

battery-charging
battery-charging
bluetooth
bluetooth
missing-device
missing-device
no-sound
no-sound
power
power
sim-card
sim-card
unavailable-network
unavailable-network
wear-and-tear
wear-and-tear

communication

call
call
community
community

navigation

down
down
next
next
previous
previous
up
up

information

error
error
info
info

shopping

fast-shipping-guarantee
fast-shipping-guarantee
home-appliance-service
home-appliance-service
interest-free
interest-free
price-guarantee
price-guarantee

service

health-care
health-care
lock
lock
repair-support
repair-support
support-laptop
support-laptop
unlock
unlock
warranty
warranty

file

no-image
no-image

action

printing
printing
refresh
refresh
Uso recomendado
<Icon
	name='cart'
	variant='regular'
	size='md'
	title='Carrinho'
/>
VTEX Usage

Como usar no samsungbr.store-front

No VTEX IO, a pagina deve consumir exports diretos do samsungbr.design-system, manter TypeScript simples e usar CSS apenas como camada fina de acabamento.

Importacao
import {
	Box,
	Stack,
	Typography,
	tokenToCssValue,
	sdsTokens,
} from 'samsungbr.design-system'
sdsTokens e tokenToCssValue
import { sdsTokens, tokenToCssValue } from 'samsungbr.design-system'

const colorGroups = sdsTokens.color
const brand = tokenToCssValue('color.brand.skyblue.base')
const cardPadding = tokenToCssValue('spacing.component.card.padding.md')
Componente de storefront
import {
	Box,
	Stack,
	Typography,
} from 'samsungbr.design-system'

function ExampleCard() {
	return (
		<Box padding='spacing.component.card.padding.md' background='color.semantic.background.surface'>
			<Stack gap='spacing.stack.sm'>
				<Typography as='h3' variant='title.desktop.title4'>
					Titulo
				</Typography>

				<Typography variant='body.desktop.body2'>
					Descricao do card usando primitives e tokens oficiais.
				</Typography>
			</Stack>
		</Box>
	)
}
Faca

Use exports diretos

Importe primitives, tokens e Icon diretamente de samsungbr.design-system.

Faca

Prefira primitives

Comece com Box, Stack, Inline, Grid, PageContainer, Typography e Section antes de abrir CSS.

Faca

Use alias semanticos

Quando a intencao for card, pagina ou modal, prefira alias.* aos tokens brutos.

Evite

Evite hex direto

Valores visuais fixos quebram tema, consistencia e evolucao do design-system.

Evite

Evite tipos complexos

No builder VTEX, listas simples e interfaces pequenas reduzem risco de TS2590.

Cuidado

CSS como acabamento

Use CSS apenas para hover, foco, gradientes ou detalhes que ainda nao existem como primitive/token.