F

Design System

Токены, компоненты и паттерны FrontSkill

v0.1

Цвета

Primary: violet · Neutral: zinc

Primary — Violet

Neutral — Zinc

Типографика

Sans: Inter · Mono: JetBrains Mono

Заголовок страницы

4xl / bold / tracking-tight

Заголовок раздела

2xl / semibold

Подзаголовок

lg / medium

Основной текст для описания задач и пояснений. Должен хорошо читаться на любом экране и при любом уровне освещения.

base / leading-relaxed

Вспомогательный текст для метаданных, временных меток и второстепенной информации.

sm / muted

display: flex; align-items: center;

code / mono / sm

Уровни сложности

Четыре уровня: Легко · Средне · Сложно · Эксперт

ЛегкоСреднеСложноЭксперт

easy

50
200
400
500
700
900

medium

50
200
400
500
700
900

hard

50
200
400
500
700
900

expert

50
200
400
500
700
900

Теги технологий

Фирменные цвета с адаптацией для тёмной темы через CSS-переменные.

HTMLCSSJavaScriptTypeScriptVueReactAngularSassWebpackViteNuxtNext.jsSVGA11y

Использование:

:style="{ color: 'var(--tag-vue)', background: 'var(--tag-vue-bg)' }"

Статусы задач

Индикаторы прогресса пользователя.

Решенаeasy-500
Попыткаmedium-500
Не решенаsurface-500

Карточки задач

Основной элемент списка задач.

1. Центрирование элемента

Легко

Расположите div по центру родительского контейнера тремя разными способами.

CSSFlexbox
Принятых: 78% · 12 430 решений

2. Бесконечная прокрутка

Средне

Реализуйте компонент с подгрузкой данных при достижении конца списка.

JavaScriptVue
Принятых: 52% · 6 840 решений

3. Виртуальный DOM с нуля

Сложно

Напишите минималистичную реализацию виртуального DOM с поддержкой diff-алгоритма.

JavaScriptTypeScript
Принятых: 21% · 1 250 решений

Кнопки

Варианты Nuxt UI.

Основные действия

Размеры

Семантические

Редактор кода

Тёмный фон + синтаксическая типографика.

CSS
1  .container {
2    display: flex;
3    align-items: center;
4    justify-content: center;
5    min-height: 100vh;
6  }

--editor-bg

#0f1117

--editor-gutter

#1a1f2e

--editor-selection

#2d4263

--editor-cursor

#528bff