← Все дизайныПревью: Meta · только визуальный шаблон, реальный CSS генерируется при «Применить»
webrelay/redesignsmeta
Применить дизайн

Brand для VR/AR-коммерции (Quest, Ray-Ban Meta AI).

Brand для VR/AR-коммерции (Quest, Ray-Ban Meta AI). Confident product-merchandising: яркие категорийные блоки, fullbleed product-photography, Meta Blue + Quest Purple как brand voltage.

ПрименитьКаталог
// design: meta
import { tokens } from '@webrelay/redesign'

const palette = {
  primary: "#0064e0",
  primary-deep: "#0457cb",
  primary-soft: "#0091ff",
  on-primary: "#ffffff",
  ink-button: "#000000",
}

01 — COLOR PALETTE

Color palette

primary
#0064e0
primary-deep
#0457cb
primary-soft
#0091ff
on-primary
#ffffff
ink-button
#000000
on-ink-button
#ffffff
fb-blue
#1876f2
meta-link
#385898
oculus-purple
#a121ce
success
#31a24c
success-bg
#24e400
attention
#f2a918
warning
#f7b928
warning-bg
#ffe200
critical
#e41e3f
critical-strong
#f0284a
canvas
#ffffff
surface-soft
#f1f4f7
ink-deep
#0a1317
ink
#1c1e21
charcoal
#444950
slate
#4b4c4f
steel
#5d6c7b
stone
#8595a4

02 — TYPOGRAPHY

Typography

hero-display

Меняется визуал — формы и тексты остаются нетронутыми.

Optimistic VF · 64px · 500 · lh 1.16

display-lg

Меняется визуал — формы и тексты остаются нетронутыми.

Optimistic VF · 48px · 500 · lh 1.17

heading-lg

Меняется визуал — формы и тексты остаются нетронутыми.

Optimistic VF · 36px · 500 · lh 1.28

heading-md

Меняется визуал — формы и тексты остаются нетронутыми.

Optimistic VF · 28px · 300 · lh 1.21

heading-sm

Меняется визуал — формы и тексты остаются нетронутыми.

Optimistic VF · 24px · 500 · lh 1.25

subtitle-lg

Меняется визуал — формы и тексты остаются нетронутыми.

Optimistic VF · 18px · 700 · lh 1.44

03 — COMPONENTS

Components

BUTTONS

INPUT

CARD

Карточка тарифа

Цена, фичи, кнопка call-to-action. Лейаут — наш, стиль — из Meta.

990 ₽в месяц

04 — DESIGNED FOR

Designed for

landingportfolio