ED Design System v2.1 уже доступна! Что нового →

EDWARDSKY

Дизайн-система в стиле космического неон-панка

Цвета Типографика Компоненты

Цветовая система

Это четыре шкалы с градацией 25–1000

Primary (Fuchsia)

25
#F8E6FA
50
#F8E6FA
100
#F3CFF6
200
#E79EED
300
#DB6EE5
400
#CE3DDC
500
#C20DD3
600
#9B0AA9
700
#75087F
800
#4E0554
900
#27032A
950
#130115
1000
#130115

Compliment (Purple Heart)

25
#F8E6FA
50
#F8E6FA
100
#F3CFF6
200
#E79EED
300
#DB6EE5
400
#CE3DDC
500
#C20DD3
600
#9B0AA9
700
#75087F
800
#4E0554
900
#27032A
950
#130115
1000
#130115

Secondary (Sky Blue — Links)

25
#D0F1F7
50
#EAFFFF
100
#CBFAFF
200
#9EF3FF
300
#5BE9FF
400
#00D9FF
500
#00D9FF
600
#00C0E5
700
#03789B
800
#0D607D
900
#104F69
950
#033449
1000
#033449

Tertiary (Rose — Visited)

25
#FDF2F8
50
#FDF2F8
100
#FBE8F3
200
#FAD0E7
300
#F7AAD3
400
#F076B4
500
#E95B9F
600
#D62C75
700
#B91D5B
800
#991B4C
900
#801B42
950
#4E0923
1000
#4E0923

Quaternary (Yellow — Energy)

25
#FFFDE2
50
#FFFDE6
100
#FFFACC
200
#FFF599
300
#FFF066
400
#FFEA33
500
#FFE600
600
#E6CF00
700
#BFA900
800
#807300
900
#403900
950
#201D00
1000
#1C1503

Статусные цвета

Это 4 основных цвета статусов с градацией 25–1000

Information (Blue)

50
50
100
200
300
400
500
600
700
800
900
950
950

Success (Green)

50
50
100
200
300
400
500
600
700
800
900
950
950

Warning (Orange)

50
50
100
200
300
400
500
600
700
800
900
950
950

Error (Red)

25
50
100
200
300
400
500
600
700
800
900
950
950

📝 Типографика

Heading 1 — 48px

Heading 2 — 36px

Heading 3 — 28px

Heading 4 — 24px

Heading 5 — 20px
Heading 6 — 16px

Body text — это основной текст вашего интерфейса. Он должен быть читаемым на обоих темах (Light/Dark). Контраст соответствует WCAG AA/AAA.

Disabled text — используется для неактивных элементов.

Ссылки

Обычная ссылка
Посещенная ссылка — нажмите и посетите, затем проверьте цвет посещённой

🧩 Компоненты

Кнопки
Статусы
✓ Success ℹ Information ⚠ Warning ✕ Error
Уведомления
Success! Операция выполнена успешно.
Information: Полезная информация для пользователя.
Warning! Обратите внимание на это предупреждение.
Error! Произошла ошибка, проверьте данные.

Формы

Карточки

Card Title

Это пример карточки с использованием surface-default и border-default токенов.

Learn More