🌓 Темы приложения

Полная поддержка светлой и темной темы

☀️ Light Theme

Светлая, чистая, дневная

🌙 Dark Theme

Тёмная, элегантная, ночная

💡 Нажмите на кнопку в правом нижнем углу, чтобы переключить тему сайта

☀️ / 🌙 Попробуйте прямо сейчас!

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

Полная система цветов с поддержкой светлой и темной тем

Brand Colors

Primary

#6788EC RGB

Soft

#94B7F4 RGB

Status Colors

Success

#27AE60

Error

#EB5757

Warning

#FFB22B

Violet

#7460EE

🧩 Компоненты

Готовые к использованию Flutter виджеты

Кнопки

Status Badges

✓ Успешно ✕ Ошибка ⚠ Внимание ℹ Информация

Карточки

Заголовок карточки

Это пример карточки с содержимым. Наведите курсор для интерактивности.

Поля ввода

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

Иерархия текстовых стилей

Display Large (48px)

Headline Large (32px)

Title Large (24px)

Body Large (16px) - Основной текст для чтения

Body Medium (14px) - Вторичный текст

💻 Примеры кода

Быстрый старт с Flutter

import 'package:flutter/material.dart';
import 'theme/planet_colors.dart';
import 'theme/planet_widgets.dart';

class MyScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final colors = context.colors;
    
    return Scaffold(
      backgroundColor: colors.surfacePrimary,
      body: PlanetCard(
        child: Column(
          children: [
            Text(
              'Привет, Planet!',
              style: TextStyle(color: colors.textPrimary),
            ),
            PlanetButton(
              text: 'Начать',
              onPressed: () {},
              variant: PlanetButtonVariant.accept,
            ),
          ],
        ),
      ),
    );
  }
}
            

📚 Ресурсы

Документация и файлы для интеграции

📄 Документация

Полное руководство по дизайн-системе

🚀 Интеграция

Пошаговое руководство по установке

🎨 Figma

Исходные дизайны

💾 Файлы

Dart файлы для Flutter