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

Photography-first интерфейс — маркетинг как музейная галерея.

Photography-first интерфейс — маркетинг как музейная галерея. Edge-to-edge продуктовые тайлы, чередование светлых и тёмных холстов, SF Pro Display headlines, единый Action Blue (#0066cc) как кликабельный цвет.

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

const palette = {
  primary: "#0066cc",
  primary-focus: "#0071e3",
  primary-on-dark: "#2997ff",
  ink: "#1d1d1f",
  body: "#1d1d1f",
}

01 — COLOR PALETTE

Color palette

primary
#0066cc
primary-focus
#0071e3
primary-on-dark
#2997ff
ink
#1d1d1f
body
#1d1d1f
body-on-dark
#ffffff
body-muted
#cccccc
ink-muted-80
#333333
ink-muted-48
#7a7a7a
divider-soft
#f0f0f0
hairline
#e0e0e0
canvas
#ffffff
canvas-parchment
#f5f5f7
surface-pearl
#fafafc
surface-tile-1
#272729
surface-tile-2
#2a2a2c
surface-tile-3
#252527
surface-black
#000000
surface-chip-translucent
#d2d2d7
on-primary
#ffffff
on-dark
#ffffff

02 — TYPOGRAPHY

Typography

hero-display

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

SF Pro Display · 56px · 600 · lh 1.07

display-lg

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

SF Pro Display · 40px · 600 · lh 1.1

display-md

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

SF Pro Text · 34px · 600 · lh 1.47

body-strong

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

SF Pro Text · 17px · 600 · lh 1.24

body

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

SF Pro Text · 17px · 400 · lh 1.47

caption

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

SF Pro Text · 14px · 400 · lh 1.43

03 — COMPONENTS

Components

BUTTONS

INPUT

CARD

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

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

990 ₽в месяц

04 — DESIGNED FOR

Designed for

landingportfolio