Design System Inspired by PlayStation

Category: Mídia e Consumidor Varejo de console de games. Layout de canal com três superfícies, tipografia de exibição com autoridade discreta, escala cyan no hover.

1. Visual Theme & Atmosphere

PlayStation.com se porta como o braço de marketing de uma marca premium de eletrônicos de consumo que, por acaso, também vende entretenimento. A página é organizada como um canal vertical de superfícies alternadas: um masthead e hero quase pretos, uma sequência de painéis editoriais branco-papel no meio e um rodapé azul-cobalto profundo que ancora toda a experiência. Entre esses modos de superfície, o site aposta pesado em fotografia e renders 3D de produtos — o console PS5, capas de jogos, controles DualSense — deixando o hardware fazer o trabalho emocional enquanto o restante da interface permanece contido.

O movimento tipográfico característico é o SST Light (peso 300) em tamanhos grandes. A família SST personalizada da Sony é usada de 22px até 54px no peso 300, conferindo aos títulos de exibição uma qualidade sussurrada e elegante que se aproxima mais de um anúncio de relógio de luxo do que de uma loja de games. Essa “autoridade discreta” é o oposto exato do grito Manuka da The Verge ou da densidade de banca da Wired — PlayStation quer que a tipografia recue e o produto lidere. Corpo e interface apoiam-se nos pesos 500–700, mas a voz de exibição é consistentemente fina e calma.

O único lugar onde a contenção se rompe é na interação. Todo botão primário tem o mesmo movimento de hover: o preenchimento muda para um cyan elétrico #1eaedb, uma borda branca de 2px aparece, um anel externo azul-PlayStation de 2px floresce atrás dele e o botão inteiro escala 1,2×. Essa combinação de pop de cor, borda, anel e escala é um movimento característico único da Sony entre as grandes marcas — uma animação miniatura de “ligar” que o site repete centenas de vezes em uma única página.

Características Principais:

• Layout de canal com três superfícies: hero quase preto, conteúdo branco-papel, rodapé azul-cobalto — alternando, nunca mesclando
• SST peso 300 de 22–54px para exibição — títulos de “autoridade discreta” que deixam a fotografia do produto liderar
• PlayStation Blue #0070cc como âncora da marca; cyan #1eaedb reservado exclusivamente para estados de hover/focus
• Todo elemento interativo escala 1,2× no hover — um “power-on” característico exclusivo do PlayStation
• Botões pill com raio total de 999px; artes de cards em retângulos arredondados de 12–24px
• Commerce-orange #d53b00 usado exclusivamente para CTAs de PlayStation Store / estados de compra
• Cobertura ampla de breakpoints até 2120px — o site escala até contextos de navegação em TVs 4K

2. Color Palette & Roles

Primary (Brand Anchor)

• PlayStation Blue (#0070cc): A cor âncora da marca. Usada no rodapé principal, links inline, preenchimentos de botão primário em superfícies escuras e em todo marcador “oficial”. Trate-a como imutável — é a cor que a marca mais associa na memória do consumidor.
• Console Black (#000000): Preto puro para o masthead, fundos do hero e zonas de apresentação de produtos. O PlayStation usa o preto para enquadrar o hardware da mesma forma que um museu usa o preto para enquadrar uma escultura.

Secondary & Accent

• PlayStation Cyan (#1eaedb): A cor de interação. Aplicada SOMENTE nos estados de hover, focus e active de botões e links. Nunca aparece como fundo padrão ou cor de texto em repouso. Combine com uma borda #ffffff de 2px e um anel externo #0070cc de 2px no hover para o tratamento característico completo.
• Link Hover Blue (#1883fd): A variante mais brilhante usada nos hovers de links de texto inline. Distinto do Cyan — esta é a cor de link, Cyan é a cor de botão.
• Dark Link Blue (#0068bd): A cor do link em repouso em superfícies claras — um primo levemente mais saturado do azul da marca.

Surface & Background

• Paper White (#ffffff): Tela de conteúdo principal para painéis editoriais entre o masthead e o rodapé.
• Ice Mist (#f5f7fa): O ponto de parada atmosférico do gradiente de seção clara. Usado sutilmente atrás de certos painéis para elevá-los do branco puro.
• Divider Tint (#f3f3f3): A cor discreta de régua horizontal entre linhas de conteúdo.
• Masthead Black (#000000): Tela da navegação superior e do hero — reservada para zonas centradas no produto.
• Shadow Black (#121314): A âncora inicial do gradiente de seção escura quando um painel precisa de profundidade atmosférica.
• Filter Mist (rgba(245, 247, 250, 0.3)): Fundo translúcido usado atrás de barras de filtro fixas — o único momento de “glassmorphism” no site.

Neutrals & Text

• Display Ink (#000000): Títulos de exibição principais em superfícies brancas.
• Deep Charcoal (#1f1f1f): Títulos de corpo e cor de link em repouso — levemente mais suave que o preto puro para reduzir o anel visual em blocos grandes.
• Body Gray (#6b6b6b): Texto de corpo secundário e metadados.
• Mute Gray (#cccccc): Rótulos terciários, estados desabilitados.
• Placeholder Ink (rgba(0, 0, 0, 0.6)): Texto de placeholder de formulário — 60% preto, não um valor de cinza separado.
• Inverse White (#ffffff): Texto principal em superfícies escuras e azuis.
• Dark-Link Blue (#53b1ff): A cor do link em repouso em superfícies escuras/pretas — uma variante mais clara e aérea do PlayStation Blue para legibilidade no preto.

Semantic & Commerce

• Commerce Orange (#d53b00): Reservado para CTAs de estado de compra da PlayStation Store, chamadas de preço e badges de “em promoção”. A única cor quente no site — use com moderação e nunca fora de um contexto de comércio.
• Commerce Orange Active (#aa2f00): O estado pressionado/ativo dos botões de comércio.
• Warning Red (#c81b3a): Erros de formulário e avisos de ações destrutivas.
• Shadow Wash 80 (rgba(0, 0, 0, 0.8)): O scrim dramático usado atrás de texto de hero sobre fotografia de produto.
• Shadow Wash 16 (rgba(0, 0, 0, 0.16)): Anel de elevação de baixo peso em cards.
• Shadow Wash 08 (rgba(0, 0, 0, 0.08)): Elevação de card extremamente leve — quase invisível, mas separa painéis brancos do fundo branco.
• Shadow Wash 06 (rgba(0, 0, 0, 0.06)): A sombra mais leve do sistema.

Gradient System

O PlayStation usa dois gradientes de seção e nada mais:

• Light Section Gradient: de #ffffff → #f5f7fa — uma lavagem quase imperceptível que eleva suavemente um painel da tela.
• Dark Section Gradient: de #121314 → #000000 — uma lavagem vertical curta que dá aos painéis de hero um vinhete sutil sem introduzir qualquer mudança de matiz.

Ambos os gradientes são usados somente como fundos de seção, nunca dentro de componentes. Não há botões com gradiente, não há texto com gradiente, não há halos brilhantes. A marca é azul — não azul-para-roxo, não azul-para-cyan.

3. Typography Rules

Font Family

• SST / Playstation SST (Sony, proprietária) — fallback: Arial, Helvetica. A tipografia global personalizada da Sony, projetada por Toshi Omagari e Akira Kobayashi. Cobre os pesos 300 / 500 / 600 / 700 na página inicial. O peso 300 de 22–54px é a assinatura tipográfica do PlayStation.
• SST (condensed / alternate) — fallback: helvetica, arial. Uma variante comprimida usada em alguns módulos de interface onde a largura importa.
• Arial — fallback utilitário para a rara variante de botão que renderiza em sans-serif do sistema.

Hierarchy

Principles

• Peso 300 em tamanhos grandes é a voz. O PlayStation é a única grande marca de console que usa um display de peso leve para seus títulos de hero. Resista à tentação de “atualizar” a tipografia de exibição para 500 ou 700 — a discrição é a personalidade.
• O peso salta na camada de interface. Abaixo de 18px, o sistema muda para 500–700 para legibilidade. O gradiente de peso de 300 (exibição) → 400 (corpo) → 500 (legendas) → 700 (botões) é a hierarquia.
• O espaçamento entre letras é quase imperceptível. A maioria dos valores está entre 0,1–0,45px, positivos ou levemente negativos. O -0.1px no hero de 54px aperta a tipografia de exibição o suficiente para parecer “projetada” sem se tornar uma declaração tipográfica.
• Duas caixas SST. “SST” e “Playstation SST” são funcionalmente a mesma família com conjuntos de métricas levemente diferentes (Playstation SST é mais compacta em tamanhos pequenos). Trate-as como intercambiáveis para fins externos ao licenciamento interno da Sony.
• Sem caixa alta. Ao contrário da The Verge ou da Wired, o PlayStation raramente usa rótulos em MAIÚSCULAS. Kickers e tags permanecem em title case ou sentence case — outro movimento de “autoridade discreta”.
• Sem serifa em lugar algum. O sistema inteiro é sans-serif. Não há contraponto de voz impressa.

4. Component Stylings

Buttons

Primary — PlayStation Blue Pill

• Background: #0070cc (PlayStation Blue)
• Text: #ffffff, SST 18px / 500 / 0.4px tracking
• Border: nenhuma em repouso
• Border radius: 999px — pill completo
• Padding: ~12px 24px (variável conforme a classe de tamanho)
• Outline: rgb(255, 255, 255) none 0px em repouso
• Hover (movimento característico):
  • Background preenchido com #1eaedb (PlayStation Cyan)
  • Text permanece #ffffff
  • Borda #ffffff de 2px aparece
  • Anel externo #0070cc de 2px floresce (0 0 0 2px #0070cc)
  • transform: scale(1.2) — o botão cresce 20% de fato
• Active: opacity: 0.6 — um escurecimento rápido para sinalizar o pressionamento
• Focus: igual ao hover, mas o anel torna-se rgb(0, 114, 206) 0px 0px 0px 2px de focus shadow
• Transition: ~180ms ease em background, transform e shadow

Secondary — White Outline on Dark

• Background: #ffffff
• Text: #0172ce (variante do PlayStation Blue)
• Border: 2px outset #000000 — uma borda outset genuína, extremamente rara no CSS moderno
• Radius: variável (frequentemente 999px ou 36px)
• Padding: 16px 20px
• Hover: mesmo preenchimento cyan característico + scale(1.2) + tratamento de anel
• Focus: mesmo tratamento de anel

Commerce Orange

• Background: #d53b00 (Commerce Orange)
• Text: #ffffff, SST 18px / 700 / 0.45px tracking
• Border radius: 999px — pill
• Usado apenas em CTAs de PS Store / Comprar / Subscribe Plus
• Active: background escurece para #aa2f00
• Hover: segue a regra de inversão-cyan como todos os outros botões (NÃO um hover específico para laranja)

Transparent Ghost

• Background: transparente
• Text: #1f1f1f (Deep Charcoal)
• Border: 1px solid #dedede
• Padding: 0 10px (compacto, otimizado para navegação)
• Hover: preenchimento cyan, texto branco, borda branca de 2px, scale(1.2)
• Active: texto muda para #0072ce, opacity 0.6

Icon Circle

• Background: rgba(0, 0, 0, 0.2) sobre fotografia; #ffffff em superfícies claras
• Border radius: 100% — círculo perfeito
• Usado para setas prev/next de carrossel e botões de compartilhamento
• Hover: clareia para var(--color-role-backgrounds-primary-link-hover) (aproximadamente #e5e5e5 em superfície clara)

Mini CTA (In-card)

• SST 14px / 700 / 0.324px tracking
• Padding ~8px 16px
• Radius: 999px
• Usado dentro de cards de jogos para mini CTAs de “Comprar Agora” / “Adicionar ao Carrinho”

Cards & Containers

Hero Card (Game Feature)

• Background: fotografia/render — geralmente ancorado no preto
• Border radius: 24px ou 19px para cards de destaque
• Padding: 32–48px interior
• Shadow: rgba(0, 0, 0, 0.8) 0px 5px 9px 0px — uma sombra dramática usada apenas quando um card se sobrepõe à fotografia do hero
• Hover: transformação de escala sutil, contorno cyan aparece no CTA primário

Game Cover Tile

• Background: arte da capa do jogo, sem padding
• Border radius: 12px ou 13px (imagens) / 19px (moldura do card)
• Shadow: rgba(0, 0, 0, 0.08) 0px 5px 9px 0px — elevação extremamente leve
• Hover: o CTA primário do card acende em cyan, o card em si pode escalar 1,02×
• Transition: 200ms ease em transform

Content Panel (White)

• Background: #ffffff ou o gradiente de seção clara #ffffff → #f5f7fa
• Border: normalmente nenhuma; separado dos vizinhos por espaçamento e sombras sutis
• Radius: 12px–24px conforme a hierarquia do painel
• Shadow: rgba(0, 0, 0, 0.06) 0px 5px 9px 0px — a mais leve do sistema

Dark Card on Dark

• Background: rgba(0, 0, 0, 0.2) sobre fotografia
• Border radius: 6px (compacto) ou 24px (destaque)
• Usado para inserções de “kit de imprensa” ou “bloco de estatísticas” sobre vídeo de hero

Inputs & Forms

• Default: background #ffffff, borda 1px solid #cccccc, border radius 3px (mais compacto que o restante do sistema — os inputs são o único lugar onde o PlayStation é genuinamente compacto), texto SST 16px em #1f1f1f, placeholder rgba(0, 0, 0, 0.6).
• Focus: anel de focus #0070cc de 2px via box-shadow: 0 0 0 2px #0070cc. Sem mudança de border-color — o anel faz o trabalho.
• Error: borda e texto mudam para #c81b3a (Warning Red), texto de erro inline abaixo no mesmo vermelho.
• Transition: ~180ms ease em border e shadow.

Navigation

• Top nav: faixa full-bleed preta (#000000) com o logo do PlayStation (branco) alinhado à esquerda, links de categoria centralizados em SST 14–16px / 500 e um pequeno CTA “Entrar” alinhado à direita.
• Hover em link de nav: cor transiciona de #ffffff para #1883fd (Link Hover Blue), sem sublinhado.
• Seção ativa: marcada por um sublinhado sutil de 2px em #0070cc.
• Mobile: a nav colapsa para um drawer hamburguer. Dentro do drawer, os links se empilham verticalmente com gaps de 16px e padding horizontal de 20px.
• Comportamento sticky: a nav permanece fixada no topo durante a rolagem; quando entra em uma zona de superfície clara, ela não inverte — permanece com fundo preto em todos os momentos.

Image Treatment

• Aspect ratios: 16:9 vídeo/fotografia de hero, 1:1 renders de console, 3:4 artes de capa de jogo, 4:3 imagens de lifestyle.
• Corners: arredondados para 12px, 13px ou 24px conforme o contexto do card. Capas de jogos recebem 6–12px, imagens de hero recebem 24px.
• Full-bleed: somente no hero do masthead e banners promocionais do rodapé. Todo o restante fica dentro de uma coluna de conteúdo com padding.
• Shadow: drop dramático rgba(0, 0, 0, 0.8) 0 5px 9px 0 nos heroes, pena rgba(0, 0, 0, 0.06) 0 5px 9px 0 nas tiles de grade.
• Hover: a imagem permanece estática, a moldura do card e o CTA primário respondem.
• Lazy loading: loading="lazy" em tudo abaixo da dobra, eager no hero do masthead.

Game Store Pill (Distinctive)

• Background: #ffffff
• Text: #000000, SST 14px / 500
• Padding: 14px 18px
• Radius: 9999px — pill completo
• Uma tag pill neutra que fica ao lado das capas de jogos para identificar a plataforma (“PS5”, “PS4”, “PSVR2”). Contraste branco-sobre-escuro.

5. Layout Principles

Spacing System

• Unidade base: 8px.
• Escala: 1, 2, 3, 4,5, 5, 8, 9, 10, 12, 14, 15, 16, 18, 20, 21px.
• Padding de seção: 48–96px vertical entre painéis principais. Transições de hero para conteúdo usam o limite superior.
• Padding de card: 20–32px interior. Cards de hero de destaque podem expandir para 48px.
• Espaçamento inline: 8–12px entre título e deck, 12–16px entre deck e CTA.
• Micro-escala: Os valores 1/2/3/4,5/5/9/10/12 são usados para padding de pill, espaçamento de legenda e deslocamentos de borda — não para ritmo editorial.

Grid & Container

• Largura máxima: ~1920px (breakpoints detectados pelo dembrandt até 2120px). Limites de container normalmente em torno de 1280–1920px conforme o painel.
• Padrões de colunas: grade responsiva de 12 colunas que se resolve em linhas de tiles de jogos de 3/4/6 colunas conforme a hierarquia. Zonas de hero frequentemente ocupam 12 colunas; tiles em destaque ficam em configurações 6+3+3 ou 4+4+4.
• Padding externo: 16px mobile → 48px tablet → 64–96px desktop.
• Gutters: 16–24px entre colunas, mais compactos (8–12px) dentro de clusters de tiles.

Whitespace Philosophy

O PlayStation trata o espaço em branco como uma marca de luxo trata a iluminação da loja — como um sinal premium. Há visivelmente mais espaço de respiro vertical entre módulos do que em qualquer outro grande site de varejo, e os painéis editoriais brancos frequentemente contêm apenas um título + uma imagem + um CTA com padding em escala de hero. O efeito é um “ritmo de galeria” onde cada produto tem seu próprio espaço em vez de competir em uma grade de miniaturas.

Border Radius Scale

• 2px — botões de banner de cookies e interface administrativa pequena
• 3px — inputs de formulário, painéis de tab (mais compactos que tudo o mais — uma indicação deliberada de “interface funcional”)
• 6px — botões compactos e imagens inline
• 12px — imagens padrão de capa de jogo e imagens de conteúdo
• 13px — certos wrappers de figura (um deslocamento de 1px em relação a 12px para aninhamento)
• 19px — cards de destaque
• 20px — spans de tag inline
• 24px — cards de hero, molduras de destaque principal
• 36px — nav pill completo e variantes de botão secundário
• 48px — botões de destaque grandes
• 999px / 100% — botões primários pill completo e botões de ícone circulares

Onze valores discretos de raio — um dos sistemas de raio mais ricos entre todos os sites deste catálogo. O intervalo existe porque o PlayStation usa deliberadamente raios diferentes para hierarquias diferentes: 3px para utilitário, 12px para mídia, 24px para destaques, 999px para CTAs.

6. Depth & Elevation

A filosofia de profundidade do PlayStation é em camadas, mas contida. A escala de sombra vai de 0,06 a 0,16 para estados normais, depois salta para 0,8 nos drops de hero — não há meio-termo de 0,2, 0,3, 0,4. O efeito é que a maior parte da página fica quase plana, mas quando um card de hero precisa flutuar sobre a fotografia, ele genuinamente flutua. A elevação é ou sussurrada ou gritada, nunca murmurada.

Decorative Depth

• Gradientes de seção (escuro e claro, ambos descritos acima) — usados apenas como fundos de seção
• Anéis de focus/hover em 2px, sempre azul ou cyan conforme o estado
• Sem brilhos, desfocagens ou efeitos atmosféricos além dos dois gradientes de seção
• Sem botões ou texto com gradiente — o sistema visual é de blocos de cor sólida em todos os lugares, exceto nas transições de seção

7. Do’s and Don’ts

Do

• Use o PlayStation Blue (#0070cc) como preenchimento primário de CTA e âncora do rodapé. É a cor âncora da marca.
• Use SST peso 300 para todo título de exibição de 22px ou maior. O título de peso discreto é a voz.
• Aplique a assinatura completa de hover em todo botão primário: preenchimento cyan + borda branca de 2px + anel azul externo de 2px + scale(1.2).
• Use raio pill completo (999px) em botões primários e de comércio.
• Reserve o PlayStation Cyan (#1eaedb) exclusivamente para estados de hover, focus e active — nunca como fundo em repouso.
• Use o Commerce Orange (#d53b00) apenas em CTAs de PlayStation Store / compra e chamadas de preço.
• Alterne painéis de hero escuros com painéis de conteúdo brancos e ancore com um rodapé azul profundo — o layout de canal com três superfícies é o ritmo da página.
• Use sombras de drop dramáticas rgba(0, 0, 0, 0.8) no hero quando um card se sobrepõe à fotografia do produto.
• Mantenha a navegação superior preta em todas as posições de rolagem — ela não inverte para branco sobre painéis claros.

Don’t

• Não coloque os títulos de exibição em negrito. Peso 300 de 22–54px é a voz do PlayStation. Tipografia de exibição no peso 700 lê como “mais um varejista de games”.
• Não use rótulos ou kickers em CAIXA ALTA. O PlayStation raramente usa maiúsculas — é uma marca de autoridade discreta, não uma fita de sinalização de risco.
• Não use botões, texto ou fundos com gradiente fora dos dois gradientes de seção declarados.
• Não introduza cores quentes além do Commerce Orange. Sem CTAs vermelhos, sem destaques amarelos, sem pills de sucesso verdes.
• Não use cantos quadrados em botões ou mídia. O sistema tem onze raios — escolha um, mas nunca 0.
• Não omita o movimento de hover scale(1.2) nos botões primários. A escala de elevação é uma assinatura de interação da marca.
• Não use tipografia serifada. O sistema é 100% SST sans-serif.
• Não deixe o cyan #1eaedb aparecer como cor de texto ou fundo em repouso. Ele só existe em movimento.
• Não projete painéis que disputem atenção. O ritmo de espaço em branco do PlayStation dá a cada módulo sua própria “sala de galeria”.

8. Responsive Behavior

Breakpoints

O varredura dembrandt detectou 30 breakpoints entre 320px e 2120px — um intervalo responsivo excepcionalmente amplo. O PlayStation sintoniza especificamente para contextos de tela grande (1920–2120px) porque os donos de PS5 frequentemente navegam no site em TVs pelo navegador do console ou via cast-to-TV a partir de um celular. A maioria dos sites de varejo para de sintonizar em 1440px; o PlayStation continua sintonizando até 4K.

Touch Targets

• Os botões pill primários têm ~48–56px de altura (texto SST 18px + ~12–16px de padding vertical) — confortavelmente WCAG AAA.
• Os links de nav são menores (~32–40px de altura) no desktop; no mobile expandem para 48px+ dentro do drawer.
• Os botões de ícone circular têm 40–48px — adequados para toque.

Collapsing Strategy

• Nav: nav completa → condensada → drawer hamburguer à medida que o viewport estreita. O logo permanece fixado à esquerda; o CTA permanece fixado à direita.
• Grid: 6 col → 4 col → 3 col → 2 col → 1 col. Os cards de tiles de jogos refluem sem cortar a arte da capa.
• Spacing: o padding de seção aperta de 96px → 64px → 48px → 32px → 24px à medida que o viewport estreita.
• Type: o hero SST escala de 54px → 44px → 35px → 28px → 22px. O peso leve 300 é preservado em todos os tamanhos.
• Hero photography: troca de art-direction — o desktop usa cortes largos 16:9, o mobile usa cortes 4:3 ou 1:1 com o produto centralizado.

Image Behavior

• Raster responsivo (srcset + <picture> com art-direction), aspect ratios preservados por breakpoint.
• Pronto para 4K: o site serve imagens de alta densidade a 1920px+ para evitar upscaling na navegação em TV.
• loading="lazy" em tudo abaixo da dobra; o hero é eager com uma dica de preload.

9. Agent Prompt Guide

Quick Color Reference

• Primary CTA: “PlayStation Blue (#0070cc)”
• Hover / Focus Accent: “PlayStation Cyan (#1eaedb)”
• Background (White Surface): “Paper White (#ffffff)”
• Background (Dark Surface): “Console Black (#000000)”
• Heading Text on White: “Display Ink (#000000)”
• Body Text on White: “Deep Charcoal (#1f1f1f)”
• Body Text on Black: “Inverse White (#ffffff)”
• Commerce / Buy Accent: “Commerce Orange (#d53b00)”
• Footer Anchor: “PlayStation Blue (#0070cc)“

Example Component Prompts

1. “Crie um botão de CTA primário com preenchimento PlayStation Blue #0070cc, texto branco em SST 18px / 500 / 0,4px de tracking, border radius de 999px, padding de 12px × 24px. No hover, o fundo transiciona para #1eaedb PlayStation Cyan, uma borda #ffffff de 2px aparece, um anel externo #0070cc de 2px floresce via box-shadow e o botão inteiro escala 1,2× — tudo em uma transição ease de 180ms.”
2. “Projete um painel de hero em uma tela Console Black #000000 com um título SST peso 300 de 54px em #ffffff com letter-spacing de -0,1px e line-height de 1,25. Posicione um único CTA primário abaixo com o tratamento de hover padrão do PlayStation. Sem rótulos em MAIÚSCULAS em nenhum lugar.”
3. “Monte um tile de capa de jogo: imagem em aspect ratio 3:4 com border radius de 12px, sombra de pena rgba(0, 0, 0, 0.08) 0 5px 9px 0, um título SST 700 de 14px abaixo, uma tag de plataforma SST 500 de 12px e um mini CTA primário de 14px / 700 / 0,324px de tracking em PlayStation Blue.”
4. “Crie um botão pill de comércio para uma compra na PlayStation Store: preenchimento Commerce Orange #d53b00, texto #ffffff em SST 18px / 700 / 0,45px de tracking, raio de 999px, padding de 12px × 28px. O estado active escurece para #aa2f00. O hover segue a inversão cyan padrão com escala de 1,2×.”
5. “Projete um painel de conteúdo branco entre seções de hero escuras: fundo #ffffff com o gradiente de seção clara sutil #ffffff → #f5f7fa, border radius de 24px, padding interior de 48px, elevação de pena rgba(0, 0, 0, 0.06) 0 5px 9px 0, um título SST 300 de 35px, um parágrafo de corpo de 18px e um único CTA primário.”

Iteration Guide

Ao refinar telas existentes geradas com este design system:

1. Audite o peso de exibição. Todo título de 22px ou maior deve ser SST peso 300. Se você vir peso 500 ou 700 na escala de hero, você perdeu a voz do PlayStation.
2. Audite o tratamento de hover. Todo botão primário deve escalar 1,2× no hover com a combinação de preenchimento cyan + borda branca + anel azul. Perder qualquer um dos quatro quebra a assinatura de interação.
3. Audite os cantos. Todo container e botão deve ter 2, 3, 6, 12, 13, 19, 20, 24, 36, 48 ou 999px / 100%. Cantos quadrados quebram a voz.
4. Audite a dispersão de cores. Somente PlayStation Blue (#0070cc), Cyan (#1eaedb), Commerce Orange (#d53b00) e os cinzas/pretos/brancos declarados devem aparecer no chrome. Se você vir qualquer outra matiz, corrija-a.
5. Audite a alternância de superfície. A página deve alternar hero escuro → conteúdo branco → hero escuro → conteúdo branco → rodapé azul. Se dois painéis de mesma superfície estiverem adjacentes, insira uma transição.
6. Audite a caixa. Somente sentence case e title case. Sem rótulos, botões ou kickers em MAIÚSCULAS. Se você vir maiúsculas, converta.
7. Audite o peso da sombra. A opacidade da sombra deve ser 0,06 / 0,08 / 0,16 / 0,8 — nada entre esses valores. Se você vir sombras de drop com 0,1, 0,2, 0,3, 0,5, corrija para o nível declarado mais próximo.
8. Audite o espaço em branco. Se dois módulos parecerem “competitivos” (disputando atenção), adicione 48–96px de espaço de respiro vertical. O ritmo de galeria do PlayStation é inegociável.