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

Цвета, шрифты, кнопки и кот. Переключи тему вверху: всё должно читаться в обеих.

Цвета

  • Фон --bg
  • Карточки --surface
  • Текст --text
  • Приглушённый текст --muted
  • Рамки --border
  • Фирменный фиолетовый --brand
  • Главная кнопка --cta
  • Верно --success
  • Ошибка --error

Тоны

Цвета тонов — только для произношения, и рядом с цветом всегда стоит метка тона.

  • 1-й mā 妈 мама
  • 2-й má 麻 конопля
  • 3-й mǎ 马 лошадь
  • 4-й mà 骂 ругать
  • лёгкий ma 吗 вопрос

Шрифты

Nunito — заголовки и кнопки

Напиши иероглиф

Noto Sans — текст, 16/24

Иероглиф учим как сборку из знакомых частей: черта, компонент, иероглиф, слово.

Noto Sans — пиньинь, 22/32

nǐ hǎo · lǜ · nǚ · Zhōngguó · xièxie

Noto Sans SC — иероглифы, 88 и 64

猫 你好

Пиньинь над иероглифами, цветом тона

我wǒ们men学xué中Zhōng文wén。

Кнопки

Плоские, с более тёмной нижней кромкой в 3 пикселя: нажми — кромка пропадёт. Не ниже 48 пикселей.

Плашки и карточки

Карточка

Скругление 20, рамка в 1 пиксель и мягкая редкая тень. У кнопок и полей скругление 12, метки круглые.

HSK 1 новое письмо

Кот Танъюань

  • Танъюань машет лапой машет
  • Танъюань радуется радуется
  • Танъюань задумался думает
  • Танъюань пишет кистью пишет
  • Танъюань слушает слушает
  • Танъюань спит спит

Служебное

Сервер: проверяю…. Страница: версия 361bdb2.