#0070ccSign in, primary CTAs, carousel focus and active states.Premium hardware clarity meets cinematic game discovery: blue brand actions, orange commerce CTAs, light headings, white product surfaces and dark immersive entertainment modules.
Semantic palette from the live PlayStation surface: blue for brand actions, orange for commerce, white for product clarity and dark navy/black for game discovery.
#0070ccSign in, primary CTAs, carousel focus and active states.#0068bdProduct headings and inline action links.#00439cLarge PlayStation footer and deep brand surfaces.#d63d00Buy now, available now and deal actions.#1f1f1fDefault text and navigation.#6b6b6bBody copy and secondary explanations.#ffffffHardware/product sections.#121314Game catalog and entertainment sections.#d7d7dcPlayStation Plus service section background.#252653Editorial monthly programming and dark promos.The observed stack is SST with Arial fallback. Headlines stay light and spacious, while navigation and buttons use compact medium/bold weights.
light / herosection / 43pxproduct / bluecopy / mutednav / metaPill CTAs are the core interaction shape. Blue is brand/learn-more, orange is commerce, white is used on dark key art.
Surface rhythm follows the PlayStation page: clean product tiles, dark game cards, Plus membership panels, editorial/blog cards and blue brand blocks.
Clean hardware module with subtle shadow and low decoration.
Carousel tile with stronger shadow and white canvas.
Entertainment surface for cover art and cinematic modules.
Footer, login and brand-heavy information area.
Dark premium membership card with gold service accent.
High-contrast game promo gradient and atmospheric light.
Small UI module for store rows, lists and controls.
White article card with image area and blog copy.
PlayStation modules combine hardware staging, game discovery rails, subscription tiers, store promotions, editorial news and support flows.
Two-column product module with isolated console/controller visuals on a white stage.
Dark section, 3:4 artwork cards, active segmented control and compact game labels.
Muted gray section with dark premium cards and gold tier naming.
White store module with blue identity block and orange commerce CTA.
Editorial card: image top, headline, excerpt, author/date metadata.
Compact help surface for repairs, network status, account and device support.
Search and account forms use restrained borders, rounded fields and a PlayStation-blue focus ring.
Large vertical modules, compact nav spacing and medium card gutters create the premium marketing rhythm.
Small radius for game covers and blog cards, strong pill radius for all primary actions.
Product and blog cards use soft elevation. Dark game surfaces rely on contrast plus stronger shadow.
Copyable CSS custom properties and implementation notes for handoff to another AI or frontend agent.
--ps-blue: #0070cc; --ps-link-blue: #0068bd; --ps-footer-blue: #00439c; --ps-commerce: #d63d00; --ps-ink: #1f1f1f; --ps-muted: #6b6b6b; --ps-canvas: #ffffff; --ps-surface: #f3f6fa; --ps-plus-gray: #d7d7dc; --ps-game-dark: #121314; --ps-monthly-navy: #252653; --ps-font: sst, "Helvetica Neue", Arial, sans-serif; --ps-radius-card: 14px; --ps-radius-pill: 999px; --ps-button-padding: 12px 21px; --ps-section-gap: clamp(66px, 8vw, 112px); --ps-card-shadow: 0 18px 50px rgba(0,0,0,.18); --ps-dark-shadow: 0 24px 70px rgba(0,0,0,.42);