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

Motorsport-engineering на near-black холсте с белыми BMW Type Next UPPERCASE заголовками.

Motorsport-engineering на near-black холсте с белыми BMW Type Next UPPERCASE заголовками. Без излишеств — только инженерная плотность, контраст и фирменная синяя/красная/фиолетовая полоса M-Sport.

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

const palette = {
  primary: "#ffffff",
  ink: "#ffffff",
  body: "#bbbbbb",
  body-strong: "#e6e6e6",
  muted: "#7e7e7e",
}

01 — COLOR PALETTE

Color palette

primary
#ffffff
ink
#ffffff
body
#bbbbbb
body-strong
#e6e6e6
muted
#7e7e7e
hairline
#3c3c3c
hairline-strong
#262626
canvas
#000000
surface-card
#1a1a1a
surface-elevated
#262626
surface-soft
#0d0d0d
on-primary
#000000
on-dark
#ffffff
m-blue-light
#0066b1
m-blue-dark
#1c69d4
m-red
#e22718
bmw-blue
#1c69d4
electric-blue
#0653b6
carbon-gray
#2b2b2b
warning
#f4b400
success
#0fa336

02 — TYPOGRAPHY

Typography

display-xl

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

BMWTypeNextLatin · 80px · 700 · lh 1

display-lg

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

BMWTypeNextLatin · 56px · 700 · lh 1.05

display-md

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

BMWTypeNextLatin · 40px · 700 · lh 1.1

display-sm

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

BMWTypeNextLatin · 32px · 700 · lh 1.15

title-lg

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

BMWTypeNextLatin · 24px · 700 · lh 1.3

title-md

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

BMWTypeNextLatin · 20px · 400 · lh 1.4

03 — COMPONENTS

Components

BUTTONS

INPUT

CARD

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

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

990 ₽в месяц

04 — DESIGNED FOR

Designed for

landingportfolio