docs(design): update FIGHTRATE_DESIGN_SYSTEM.md with numeric typography + motion presets
This commit is contained in:
1 parent
1cb658f899
commit
8cce2e52db
1 file changed
+40
@@ -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`).
|
||||
Reference in new issue
Block a user