Skip to content

DESIGN.md

Latest commit

 

History

History
172 lines (132 loc) · 8.93 KB

DESIGN.md

File metadata and controls

172 lines (132 loc) · 8.93 KB
Raw

DailyDo — Дизайн-система

Цветовая палитра

Светлая тема

Роль HEX Описание
Primary #7033FF Акцентный цвет: кнопки, активные элементы, иконки
Background #FDFDFD Фон экранов и карточек
Surface #F4F0FF Фон вторичных поверхностей (светло-фиолетовый оттенок)
Text Primary #1A1A2E Основной текст
Text Secondary #6B6B8A Подписи, плейсхолдеры, вторичный текст
Text Done #B0AACC Зачёркнутый текст выполненной задачи (светлее основного)
Checkbox Done #34C759 Зелёный — чекбокс выполненной задачи
Divider #E8E2F5 Разделители секций

Тёмная тема

Роль HEX Описание
Primary #8C5CFF Акцентный цвет: кнопки, активные элементы, иконки
Background #1A1B1E Фон экранов и карточек
Surface #25262B Фон вторичных поверхностей
Text Primary #F1F1F5 Основной текст
Text Secondary #8A8AAA Подписи, плейсхолдеры, вторичный текст
Text Done #4A4A60 Зачёркнутый текст выполненной задачи (темнее основного)
Checkbox Done #30D158 Зелёный — чекбокс выполненной задачи
Divider #2E2F36 Разделители секций

Платформы и макеты

Платформа Ширина Источник дизайна
Mobile (iOS/Android) 390px pencil-design.pen — фреймы M-S*
Web 1280px pencil-design.pen — фреймы S*

Оба варианта реализованы в светлой и тёмной теме.

Экраны

Навбар (шапка)

Присутствует на всех экранах:

  • Лого: «DailyDo» — цвет Primary, слева
  • Аватар пользователя: круглый, справа (инициал, фон Primary)
  • Фон навбара: Background (без тени, без разделителя)

1. My Lists (главный экран)

  • Заголовок: «My Lists» (Title Large) + дата ниже (Body Medium, Text Secondary)
  • Кнопка «+ New List» (веб) / «+ New» (мобайл) — Primary, справа от заголовка
  • Виджет Progress Overview — сворачиваемый блок под заголовком:
    • Бар-чарт за последние N дней (подписи: Mon, Tue, Wed…)
    • Каждый столбик: серый фон (всего задач) + зелёная заливка (выполнено)
    • Метка «X/Y tasks done» справа, кнопка свернуть/развернуть
    • Фон виджета: Surface; скругление 12 dp
  • Список карточек — отсортирован по дате, новые сверху
  • Empty state (если списков нет): иконка диаграммы, текст «No data yet», кнопка «+ Create First List» (Primary)
  • Фон экрана: Background

2. Create New List

  • Заголовок карточки: «Create New List» + подзаголовок «Add a name and tasks for today»
  • Поле List Name — текстовый ввод
  • Блок Tasks — список задач с чекбоксами, ссылка «+ Add task» снизу
  • Кнопка «Save List» — Primary, полная ширина карточки
  • Веб: экран центрирован, форма — в карточке (Surface, скругление 12 dp, лёгкая тень)
  • Мобайл: полноэкранный вид, фон Background

3. Progress View (просмотр / редактирование прогресса)

  • Шапка: кнопка «← Back» слева; счётчик «X/Y done» + иконка карандаша справа
  • Заголовок: название списка (Title Large) + дата (Body Medium, Text Secondary)
  • Экран разделён на две секции:

Секция «Pending» (невыполненные)

  • Метка секции: «Pending X» (число задач)
  • Чекбокс: контурный, цвет Primary
  • Текст задачи: Text Primary
  • Справа: иконка редактирования (карандаш, Text Secondary)

Секция «Completed» (выполненные)

  • Метка секции: «Completed X»
  • Чекбокс: заполненный, цвет Checkbox Done (#34C759 / #30D158)
  • Текст задачи: зачёркнутый, цвет Text Done
  • Справа: иконка редактирования (карандаш, Text Secondary)
  • При нажатии на чекбокс задача анимированно перемещается между секциями

Типографика

Уровень Размер Насыщенность Применение
Title Large 22 sp Bold Заголовки экранов
Title Medium 18 sp SemiBold Название списка в карточке
Body Large 16 sp Regular Текст задачи
Body Medium 14 sp Regular Вторичный текст, дата
Label Small 12 sp Medium Прогресс-метка (3 / 5)

Шрифт: системный (Roboto на Android, SF Pro на iOS).

Компоненты

Чекбокс задачи

Невыполненная:  [ ]  Текст задачи          ← контур Primary
Выполненная:   [✓]  ~~Текст задачи~~       ← заливка зелёная, текст Text Done

Карточка дня

┌──────────────────────────────────────────┐
│  Пн, 27 марта                      3/5  ✏ │  ← Text Secondary / Label Small / иконка
│  Название списка                          │  ← Title Medium / Text Primary
│  ████████████░░░░░░░░░░░░░░░░░░░░░░░░░░  │  ← прогресс-бар (зелёный / Surface)
└──────────────────────────────────────────┘
  • Фон карточки: Background (без Surface). Скругление: 12 dp. Тень: лёгкая (elevation 2).
  • Прогресс-бар: высота 3 dp, цвет заполненной части — Checkbox Done, фон — Divider
  • Иконка редактирования (карандаш): правый край строки, цвет Primary

Виджет Progress Overview

┌───────────────────────────────────────────┐
│ 📊 Progress Overview  Last N days   14/18 ↑│
│                                            │
│  ▐█░░░░░░▌  ▐███████▌  ▐██░░░░░▌  ▐████▌ │  ← бар-чарт по дням
│    Mon         Tue         Wed        Thu  │
└───────────────────────────────────────────┘
  • Фон: Surface. Скругление: 12 dp.
  • Столбик: серый фон (всего) + зелёная заливка (выполнено), скругление сверху
  • Метка дня: Body Medium, Text Secondary

Кнопка (Primary)

  • Фон: Primary
  • Текст: белый (#FFFFFF)
  • Скругление: 8 dp
  • Состояние Disabled: opacity 40%

Empty State

         [иконка диаграммы — Primary]
         No data yet
         Start tracking activities to see your progress chart
         [  + Create First List  ]
  • Иконка: Material Symbols outlined, цвет Primary, размер 48 dp
  • Текст: Body Large / Text Secondary
  • Кнопка: Primary, стандартная

Прочее

  • Иконки: Material Symbols (outlined)
  • Скругления: карточки — 12 dp, кнопки — 8 dp, чекбоксы — 4 dp
  • Отступы: базовая сетка 8 dp
  • Анимации: перемещение задачи между секциями — animateItemPlacement (300 ms, EaseInOut)