A typographic scale builder with CSS token export. Built for UI engineers and design system authors.
Features: PWA with offline support, i18n, URL-synced state, keyboard shortcuts.
Live on Render: https://typometer.lotva.ru/
Start the dev server:
pnpm install
pnpm devBuild and preview a static production bundle:
pnpm generate
pnpm previewUpdate dependencies:
pnpx npm-check-updates
pnpm installInstall skills:
pnpx skills add addyosmani/web-quality-skills
pnpx skills add vuejs-ai/skills| Category | Technologies |
|---|---|
| Framework | TypeScript, Vue 3, Nuxt 4, Pinia |
| UI | PostCSS, Ark UI |
| Linting | Prettier, Stylelint, Oxlint, Commitlint |
| Tooling | Rolldown, Lefthook, pnpm |
Architecture: FEOD.
The codebase is organized into core, pages, views, modules, and common directories.
Each directory is divided into config, lib, model, and ui segments.
The Typographic Scale — Spencer Mortensen
Fluid Heading Styles — Carbon Design System
How to Name Design Tokens — The Design System Guide
Modular Grid — Kontur Guides
Typemetric — Profi.Travel Design Guide
Font Size Ratios — Sergey Steblina
Конструктор типографической шкалы с экспортом в CSS-токены. Адресован разработчикам интерфейсов и авторам дизайн-систем.
Фичи: PWA и работа в офлайне, i18n, синхронизация состояния и URL, хоткеи.
Задеплоен на Render: https://typometer.lotva.ru/
Запустить дев-сервер:
pnpm install
pnpm devСобрать и развернуть локально статический билд:
pnpm generate
pnpm previewОбновить зависимости:
pnpx npm-check-updates
pnpm installПодключить скиллы:
pnpx skills add addyosmani/web-quality-skills
pnpx skills add vuejs-ai/skills| Категория | Технологии |
|---|---|
| Фреймворк | TypeScript, Vue 3, Nuxt 4, Pinia |
| Интерфейс | PostCSS, Ark UI |
| Линтеры | Prettier, Stylelint, Oxlint, Commitlint |
| Тулинг | Rolldown, Lefthook, pnpm |
Архитектурная методология — FEOD. Код поделён на директории core, pages, views, modules и common; директории поделены на сегменты config, lib, model, ui.
The typographic scale. Spencer Mortensen
Fluid heading styles. Carbon Design System
How to name design tokens. The Design System Guide
Модуль. Гайды «Контура»
Типометрия. Гайды «Профи-трэвел»
Соотношение кеглей. Сергей Стеблина