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

Тёплый editorial-интерфейс Anthropic Claude.

Тёплый editorial-интерфейс Anthropic Claude. Tinted-cream холст, slab-serif display (Copernicus), коралловые CTA, dark navy product-mockup карточки. Литературная эстетика для AI-продукта.

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

const palette = {
  primary: "#cc785c",
  primary-active: "#a9583e",
  primary-disabled: "#e6dfd8",
  ink: "#141413",
  body: "#3d3d3a",
}

01 — COLOR PALETTE

Color palette

primary
#cc785c
primary-active
#a9583e
primary-disabled
#e6dfd8
ink
#141413
body
#3d3d3a
body-strong
#252523
muted
#6c6a64
muted-soft
#8e8b82
hairline
#e6dfd8
hairline-soft
#ebe6df
canvas
#faf9f5
surface-soft
#f5f0e8
surface-card
#efe9de
surface-cream-strong
#e8e0d2
surface-dark
#181715
surface-dark-elevated
#252320
surface-dark-soft
#1f1e1b
on-primary
#ffffff
on-dark
#faf9f5
on-dark-soft
#a09d96
accent-teal
#5db8a6
accent-amber
#e8a55a
success
#5db872
warning
#d4a017

02 — TYPOGRAPHY

Typography

display-xl

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

Copernicus · 64px · 400 · lh 1.05

display-lg

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

Copernicus · 48px · 400 · lh 1.1

display-md

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

Copernicus · 36px · 400 · lh 1.15

display-sm

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

Copernicus · 28px · 400 · lh 1.2

title-lg

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

StyreneB · 22px · 500 · lh 1.3

title-md

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

StyreneB · 18px · 500 · lh 1.4

03 — COMPONENTS

Components

BUTTONS

INPUT

CARD

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

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

990 ₽в месяц

04 — DESIGNED FOR

Designed for

saaslanding