Привычный редактор интерфейсов — без VPN и в рублях

// «Карточка» из «Morfa».
import {Avatar} from './Avatar';
import {Button} from './Button';
import {Tag} from './Tag';
import styles from './Card.module.css';

const cx = (...names: (string | false | null | undefined)[]) => names.filter(Boolean).join(' ');

export type CardProps = {
  /** «Заголовок» */
  heading?: string;
  /** «Описание» */
  description?: string;
  className?: string;
};

export function Card({heading = 'Редизайн личного кабинета', description = 'Собрали новые экраны оплаты и истории заказов. Нужны правки до пятницы.', className}: CardProps) {
  return (
    <div className={cx(styles.root, className)}>
      <div className={styles.header}>
        <div className={styles.avtor}>
          <Avatar size="40" initials="МО" className={styles.avatar} />
          <div className={styles.name}>
            <p className={styles.mariyaOrlova}>Мария Орлова</p>
            <p className={styles.artDirektor}>Арт-директор</p>
          </div>
        </div>
        <Tag color="yellow" text="На проверке" className={styles.tag} />
      </div>
      <div className={styles.text}>
        <p className={styles.heading}>{heading}</p>
        <p className={styles.description}>{description}</p>
      </div>
      <div className={styles.deystviya}>
        <Button text="Открыть" showIcon={false} className={styles.button} />
        <Button kind="outline" text="Позже" showIcon={false} className={styles.button2} />
      </div>
    </div>
  );
}

// «Тег» из «Morfa».
import styles from './Tag.module.css';

const cx = (...names: (string | false | null | undefined)[]) => names.filter(Boolean).join(' ');

export type TagProps = {
  /** «Цвет»: 'gray' — «Серый», 'blue' — «Синий», 'green' — «Зелёный», 'yellow' — «Жёлтый», 'red' — «Красный» */
  color?: 'gray' | 'blue' | 'green' | 'yellow' | 'red';
  /** «Текст» */
  text?: string;
  className?: string;
};

export function Tag({color = 'gray', text = 'Тег', className}: TagProps) {
  return (
    <div className={cx(styles.root, color === 'blue' && styles.rootColorBlue, color === 'green' && styles.rootColorGreen, color === 'yellow' && styles.rootColorYellow, color === 'red' && styles.rootColorRed, className)}>
      <div className={cx(styles.tochka, color === 'blue' && styles.tochkaColorBlue, color === 'green' && styles.tochkaColorGreen, color === 'yellow' && styles.tochkaColorYellow, color === 'red' && styles.tochkaColorRed)}></div>
      <p className={cx(styles.text, color === 'blue' && styles.textColorBlue, color === 'green' && styles.textColorGreen, color === 'yellow' && styles.textColorYellow, color === 'red' && styles.textColorRed)}>{text}</p>
    </div>
  );
}

/* Дизайн-токены: стили и переменные из «Morfa». */
:root {
  --color-brand-100: #D6DEFF; /* Бренд/100 */
  --color-brand-50: #EDF1FF; /* Бренд/50 */
  --color-brand-500: #3D63F5; /* Бренд/500 */
  --color-brand-600: #2C4FD8; /* Бренд/600 */
  --font-heading-h1: 700 32px/40px 'Inter', Arial, sans-serif; /* Заголовки/H1 */
  --font-heading-h1-tracking: -0.02em; /* Заголовки/H1 */
  --font-heading-h2: 600 24px/32px 'Inter', Arial, sans-serif; /* Заголовки/H2 */
  --font-heading-h2-tracking: -0.015em; /* Заголовки/H2 */
  --font-heading-h3: 600 18px/28px 'Inter', Arial, sans-serif; /* Заголовки/H3 */
  --font-heading-h3-tracking: -0.01em; /* Заголовки/H3 */
  --font-button-text: 600 14px/20px 'Inter', Arial, sans-serif; /* Кнопки/Текст */
  --color-neytralnye-0: #FFFFFF; /* Нейтральные/0 */
  --color-neytralnye-100: #F1F3F6; /* Нейтральные/100 */
  --color-neytralnye-200: #E2E5EA; /* Нейтральные/200 */
  --color-neytralnye-300: #C4C8D0; /* Нейтральные/300 */
  --color-neytralnye-500: #6B7180; /* Нейтральные/500 */
  --color-neytralnye-700: #3A3F4B; /* Нейтральные/700 */
  --color-neytralnye-900: #12141A; /* Нейтральные/900 */
  --color-statusy-vnimanie: #C77700; /* Статусы/Внимание */
  --color-statusy-vnimanie-background: #FFF4DE; /* Статусы/Внимание фон */
  --color-statusy-error: #E5484D; /* Статусы/Ошибка */
  --color-statusy-error-background: #FDECEC; /* Статусы/Ошибка фон */
  --color-statusy-success: #12A150; /* Статусы/Успех */
  --color-statusy-success-background: #E7F7EE; /* Статусы/Успех фон */
  --font-small: 400 14px/20px 'Inter', Arial, sans-serif; /* Текст/Мелкий */
  --font-label: 500 14px/20px 'Inter', Arial, sans-serif; /* Текст/Метка */
  --font-primary: 400 16px/24px 'Inter', Arial, sans-serif; /* Текст/Основной */
  --font-primary-tracking: -0.005em; /* Текст/Основной */
  --font-label2: 500 12px/16px 'Inter', Arial, sans-serif; /* Текст/Подпись */
  --shadow-large: 0 20px 48px rgba(15, 17, 21, 0.14), 0 4px 8px rgba(15, 17, 21, 0.04); /* Тени/Большая */
  --shadow-small: 0 1px 3px rgba(15, 17, 21, 0.08), 0 1px 2px rgba(15, 17, 21, 0.06); /* Тени/Малая */
  --shadow-medium: 0 8px 16px rgba(15, 17, 21, 0.08), 0 2px 4px rgba(15, 17, 21, 0.04); /* Тени/Средняя */
  --font-display: 700 48px/56px 'Inter', Arial, sans-serif; /* Display */
  --font-display-tracking: -0.025em; /* Display */
}