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

Stark black холст + cobalt-violet (#494fdf) + wide accent-палитра из глубоких saturated цветов для product-категорий.

Stark black холст + cobalt-violet (#494fdf) + wide accent-палитра из глубоких saturated цветов для product-категорий. Fintech super-app, confident.

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

const palette = {
  primary: "#494fdf",
  primary-bright: "#4f55f1",
  primary-deep: "#3a40c4",
  on-primary: "#ffffff",
  ink: "#191c1f",
}

01 — COLOR PALETTE

Color palette

primary
#494fdf
primary-bright
#4f55f1
primary-deep
#3a40c4
on-primary
#ffffff
ink
#191c1f
body
#1f2226
charcoal
#3a3d40
mute
#505a63
ash
#5c5e60
stone
#8d969e
faint
#c9c9cd
on-dark
#ffffff
on-dark-mute
rgba(255,255,255,0.72)
canvas-light
#ffffff
canvas-dark
#000000
surface-soft
#f4f4f4
surface-card
#ffffff
surface-deep
#0a0a0a
surface-elevated
#16181a
hairline-light
#e2e2e7
hairline-dark
rgba(255,255,255,0.12)
hairline-strong
#191c1f
divider-soft
rgba(255,255,255,0.06)
accent-teal
#00a87e

02 — TYPOGRAPHY

Typography

display-xxl

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

Aeonik Pro · 136px · 500 · lh 1

display-xl

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

Aeonik Pro · 80px · 500 · lh 1

display-lg

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

Aeonik Pro · 48px · 500 · lh 1.21

display-md

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

Aeonik Pro · 40px · 500 · lh 1.2

heading-lg

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

Aeonik Pro · 32px · 500 · lh 1.19

heading-md

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

Aeonik Pro · 24px · 500 · lh 1.33

03 — COMPONENTS

Components

BUTTONS

INPUT

CARD

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

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

990 ₽в месяц

04 — DESIGNED FOR

Designed for

landingsaas