# Engineering standards

## Performance (web, 75th percentile)

- LCP under 2.5s, INP under 200ms, CLS under 0.1.
- First-load JavaScript under about 150 KB gzipped; split by route; lazy-load charts, editors and maps.
- Fonts: the active theme only, `woff2`, `font-display: swap`, latin subset, self-hosted. Preload the display face only when it is above the fold.
- Images: AVIF or WebP, explicit `width` and `height`, `loading="lazy"` below the fold, `srcset`.
- Animate only `transform` and `opacity`. Virtualize lists over about 100 rows (TanStack Virtual, FlashList).
- Show cached data first and revalidate; never block a screen on one slow request.
- React Native: Hermes, reanimated, `expo-image`, no heavy work during navigation transitions.
- Measure with Lighthouse CI or `web-vitals`, and on a mid-range Android phone with a release build.

## Keyboard

| Shortcut           | Action                                                |
| ------------------ | ----------------------------------------------------- |
| Cmd/Ctrl+K         | Command palette                                       |
| /                  | Focus search                                          |
| ?                  | Shortcut sheet                                        |
| Esc                | Close the top overlay, then clear search or selection |
| J / K              | Next / previous item                                  |
| Enter              | Open the selected item                                |
| C                  | Create (the screen's primary action)                  |
| G then H, G then S | Go to Home, go to Settings                            |
| Cmd/Ctrl+Enter     | Submit or send                                        |
| Cmd/Ctrl+S         | Save, only with an explicit save                      |

- Single-letter shortcuts never fire in text fields and can be turned off (WCAG 2.1.4).
- Never override browser and OS shortcuts (Cmd/Ctrl+W, T, L, R, Q, Tab).
- Show shortcuts where the action lives, as `<kbd>`. One registry per app (`tinykeys` or `react-hotkeys-hook`); the `?` sheet is generated from it.

## Responsive

- Mobile first. Breakpoints 640, 768, 1024, 1280. B2B gets a sidebar at 1024 and up.
- Decide layout by container width. Body copy at 60 to 75 characters.
- Safe areas and platform conventions on mobile (back swipe, back button, native sheets).
- Format numbers, currency and dates with `Intl` and the user's locale (`en-IN` gives "12,48,000").