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

Маркетинг как extended product screenshot — chrome это product-chrome в маркетинговом масштабе.

Маркетинг как extended product screenshot — chrome это product-chrome в маркетинговом масштабе. Pure-near-black холст, hairline-borders, monospace, single signature glow.

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

const palette = {
  primary: "#ffffff",
  primary-pressed: "#e8e8e8",
  on-primary: "#000000",
  ink: "#f4f4f6",
  body: "#cdcdcd",
}

01 — COLOR PALETTE

Color palette

primary
#ffffff
primary-pressed
#e8e8e8
on-primary
#000000
ink
#f4f4f6
body
#cdcdcd
charcoal
#d3d3d4
mute
#9c9c9d
ash
#6a6b6c
stone
#434345
on-dark
#ffffff
on-dark-mute
rgba(255,255,255,0.72)
canvas
#07080a
surface
#0d0d0d
surface-elevated
#101111
surface-card
#121212
button-fg
#18191a
hairline
#242728
hairline-soft
rgba(255,255,255,0.08)
hairline-strong
rgba(255,255,255,0.16)
accent-blue
#57c1ff
accent-blue-soft
rgba(87,193,255,0.15)
accent-red
#ff6161
accent-red-soft
rgba(255,97,97,0.15)
accent-green
#59d499

02 — TYPOGRAPHY

Typography

display-xl

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

Inter · 64px · 600 · lh 1.1

display-lg

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

Inter · 56px · 500 · lh 1.17

heading-xl

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

Inter · 24px · 500 · lh 1.6

heading-lg

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

Inter · 22px · 500 · lh 1.15

heading-md

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

Inter · 20px · 500 · lh 1.4

heading-sm

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

Inter · 18px · 500 · lh 1.4

03 — COMPONENTS

Components

BUTTONS

INPUT

CARD

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

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

990 ₽в месяц

04 — DESIGNED FOR

Designed for

saasportfolio