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

Open-source database платформа на clean white-and-near-black с единым signature green (#3ECF8E).

Open-source database платформа на clean white-and-near-black с единым signature green (#3ECF8E). Серьёзный без интимидации, dev-tool с personality.

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

const palette = {
  primary: "#3ecf8e",
  primary-deep: "#24b47e",
  primary-soft: "#4ade80",
  ink: "#171717",
  ink-secondary: "#212121",
}

01 — COLOR PALETTE

Color palette

primary
#3ecf8e
primary-deep
#24b47e
primary-soft
#4ade80
ink
#171717
ink-secondary
#212121
ink-mute
#707070
ink-mute-2
#9a9a9a
ink-faint
#b2b2b2
on-primary
#171717
on-dark
#ffffff
canvas
#ffffff
canvas-soft
#fafafa
canvas-night
#1c1c1c
canvas-night-soft
#202020
hairline
#dfdfdf
hairline-strong
#c7c7c7
hairline-cool
#ededed
hairline-cool-2
#efefef
hairline-cool-3
#d4d4d4
accent-purple
#6b01c2
accent-violet
#644fc1
accent-purple-soft
#eddbf9
accent-yellow
#ffdb13
accent-tomato
#ff2201

02 — TYPOGRAPHY

Typography

display-xxl

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

Circular · 64px · 500 · lh 1.1

display-xl

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

Circular · 48px · 500 · lh 1.1

display-lg

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

Circular · 36px · 500 · lh 1.15

display-md

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

Circular · 28px · 500 · lh 1.2

heading-lg

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

Circular · 22px · 500 · lh 1.2

heading-md

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

Circular · 18px · 500 · lh 1.4

03 — COMPONENTS

Components

BUTTONS

INPUT

CARD

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

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

990 ₽в месяц

04 — DESIGNED FOR

Designed for

saaslanding