diff --git a/FIGHTRATE_DESIGN_SYSTEM.md b/FIGHTRATE_DESIGN_SYSTEM.md index 51a4015..42e3a1a 100644 --- a/FIGHTRATE_DESIGN_SYSTEM.md +++ b/FIGHTRATE_DESIGN_SYSTEM.md @@ -511,3 +511,43 @@ HTML aprovado como base de exploração: ```text docs/design-directions/react-native-redesign-2026-06-10/v2/01-corner-instrument-v2.html ``` + +--- + +## Tipografia numérica tabular (v2) + +Para todos os valores numéricos do app (BPM, métricas, zone, timestamps, IDs, UUIDs), o app usa **JetBrains Mono** com `fontVariant: ['tabular-nums']` para alinhamento perfeito de dígitos. Esta fonte está bundled em `assets/fonts/JetBrainsMono-{Regular,Medium,Bold,ExtraBold}.ttf` e linkada via `react-native.config.js` + `react-native-asset`. + +Tokens em `src/theme/typography.ts`: + +- `displayNumeric`: 110px JetBrains Mono ExtraBold, lineHeight 100, letterSpacing -7 +- `displaySmallNumeric`: 56px JetBrains Mono ExtraBold, lineHeight 54, letterSpacing -3 +- `metricNumeric`: 28px JetBrains Mono Bold, lineHeight 30, letterSpacing -1.2 +- `detailNumeric`: 18px JetBrains Mono Bold, lineHeight 22, letterSpacing -0.8 + +`display`, `displaySmall`, `body`, `label`, `button` permanecem em Inter (fallback do sistema). Apenas os tokens numéricos exigem JetBrains Mono. + +## Motion presets (v2) + +`src/theme/motion.ts` define easing e durações canônicas: + +- `easeOutQuart: 'cubic-bezier(0.25, 1, 0.5, 1)'` (entradas) +- `easeOutExpo: 'cubic-bezier(0.16, 1, 0.3, 1)'` (transições longas) +- `easeOutBack: 'cubic-bezier(0.34, 1.56, 0.64, 1)'` (pin, overshoot sutil) +- `easeInOutQuart: 'cubic-bezier(0.76, 0, 0.24, 1)'` (pulse loops) + +Durations: `instant: 80`, `fast: 160`, `normal: 240`, `slow: 380`, `pulse: 800`, `pulseSlow: 1600` ms. + +Staggers: `row: 50`, `item: 80` ms. + +Animações registradas: + +- `bpmPulse` (loop, 800ms) — BPM quando `receiving` +- `liveDotPulse` (loop, 1600ms) — LiveDot quando `live = true` +- `stopAlertRing` (loop, 1600ms) — anel de aviso em volta do botão Parar quando `isCapturing` +- `tabFade` (200ms cross-fade) — entre tabs +- `rowEnter` (240ms fade+translateY 8→0, stagger 50ms) — listas de Histórico e Insights +- `pinEnter` (500ms easeOutBack 1.4→1) — pin do TrainingChart +- `pressDown/Up` (80/160ms scale 1→0.96→1, opacity 1→0.82→1) — feedback físico de todos os botões + +Todas respeitam `AccessibilityInfo.isReduceMotionEnabled()` (instantâneas quando `true`).