Component foundations
Overpex shares design intent and foundation values across platforms while each
application keeps its native component implementation. Canonical sources live
under packages/brand/tokens, packages/brand/typography, and
packages/brand/components.
Spacing
Section titled “Spacing”The primitive spacing rhythm is 4 / 8 / 12 / 16 / 20 / 24 logical units.
One logical unit maps to CSS px, iOS pt, and Android dp.
Components normally consume semantic roles:
| Role | Value | Typical use |
|---|---|---|
spacing.component.inline.compact |
12 | Compact control padding |
spacing.component.inline.default |
16 | Default horizontal padding |
spacing.component.inline.spacious |
24 | Large actions and containers |
spacing.component.gap.icon |
4 | Tight icon relationship |
spacing.component.gap.related |
8 | Icon-to-label and related content |
spacing.component.stack.default |
12 | Default vertical rhythm |
spacing.component.stack.section |
24 | Section separation |
Radius
Section titled “Radius”The primitive scale is 0 / 8 / 12 / 16 / 20 / 24 / 28 / pill.
| Component role | Value |
|---|---|
radius.component.control |
12 |
radius.component.card |
16 |
radius.component.banner |
16 |
radius.component.sheet |
20 |
radius.component.dialog |
24 |
radius.component.shell |
28 |
radius.component.action |
Pill |
Local 10 and 14 values should normally migrate to 12 or 16 based on their role. Keep a local value only when visual review establishes a real exception.
Controls and hit targets
Section titled “Controls and hit targets”Visual control heights are 36, 40, and 44. Minimum interactive targets are 44 on web/iOS and 48 on Android. A smaller visual control must expand its hit area without overlapping adjacent actions.
Motion and elevation
Section titled “Motion and elevation”Motion durations are 150 ms for feedback, 250 ms for transitions, 400 ms for reveals, and 500 ms for deliberately slow sequences. Platform-native springs may replace a timed curve when they preserve the same intent. Reduced-motion mode removes nonessential motion.
Elevation uses four intents: flat, raised, overlay, and floating.
Rendering is platform-specific; do not copy CSS shadow numbers into SwiftUI or
Compose.
Typography
Section titled “Typography”Web and docs use generated Space Grotesk/Manrope roles. Native operational UI uses scalable SF Pro/Material typography mappings. Brand fonts are reserved for intentional editorial moments rather than fixed-size native controls.
Component contracts
Section titled “Component contracts”The first machine-readable recipes are button and field. They define
anatomy, variants, required states, semantic tokens, and accessibility rules.
React, SwiftUI, Compose, and Starlight implementations stay local to their
applications.
Generated adapters are available under packages/brand/generated/:
css/overpex-foundations.cssts/foundations.tsandts/componentRecipes.tsswift/OverpexFoundations.swiftkotlin/OverpexFoundations.ktjson/foundations.resolved.jsonandjson/component-recipes.json
Run npm run tokens:build after source changes and npm run tokens:check in
validation.