Skip to the collection
Trova
Browse Mobile Native / Haptic MinimalCompare with another family →

Style sheet · 4 references

Mobile Native / Haptic Minimal

Thumb-zone reachability, gesture-driven bottom sheets, springy pull-to-refresh, micro-haptics, persistent bottom tab navigation, and 48pt tactile hit targets engineered specifically for mobile touchscreens.

Copy CSS :root tokens

Synthesized CSS custom properties derived from this family's dominant surface polarity, highest-contrast WCAG pair, and open-source font stand-ins.

/* Synthesized from Trova family: Mobile Native / Haptic Minimal (mobile-minimal-haptic) */
/* Evidence base: 4 curated reference(s) · Primary contrast 17.7:1 */
:root {
  /* Surface & Polarity (Daylight-paper dominant) */
  --surface-ground: #ffffff;
  --surface-elevated: #5e6ad2;
  --text-primary: #18181b;
  --accent-primary: #000000;
  --border-hairline: color-mix(in srgb, #18181b 16%, transparent);

  /* Typography (Loadable open-source stack mapped from observed specimens) */
  --font-display: "Inter", system-ui, sans-serif;
  --font-body: "JetBrains Mono", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Structural Geometry */
  --radius-surface: 0px;
  --measure-body: 62ch;
}
Copy as DESIGN.md

The whole sheet as Markdown, every move cited to the reference it came from. Paste it into your DESIGN.md as a starting system.

# Mobile Native / Haptic Minimal — style sheet

> Thumb-zone reachability, gesture-driven bottom sheets, springy pull-to-refresh, micro-haptics, persistent bottom tab navigation, and 48pt tactile hit targets engineered specifically for mobile touchscreens.

Derived from 4 curated reference(s) in the `mobile-minimal-haptic` family. Counts are how many references use a value, so a value used once is a lead, not a rule. Paste this into DESIGN.md as a starting system, then verify against the images.

## Type

- Inter — 2/4
- Berkeley Mono — 1/4
- Georgia — 1/4
- JetBrains Mono — 1/4
- SF Pro — 1/4
- SF Pro Display — 1/4
- SF Pro Text — 1/4

## Color

- `#18181b` dark neutral — 4/4
- `#ffffff` light neutral — 4/4
- `#000000` dark neutral — 2/4
- `#5e6ad2` chromatic — 1/4
- `#2980b9` chromatic — 1/4
- `#eb5757` chromatic — 1/4
- `#ff5e7e` chromatic — 1/4
- `#95a5a6` mid neutral — 1/4
- `#ff9f0a` chromatic — 1/4
- `#30d158` chromatic — 1/4

Readable pairs from these swatches, most-used first (WCAG AA body text needs 4.5:1):
- `#18181b` / `#ffffff` — 17.7:1
- `#000000` / `#ffffff` — 21:1
- `#18181b` / `#30d158` — 8.8:1
- `#18181b` / `#ff9f0a` — 8.6:1

## Moves

### motion/interaction

- Numeric keypad entries scale individual digit glyphs from 48px down to 28px dynamically as the amount grows, paired with crisp stepped scale bounces on each digit tap. — 141-family-wallet-haptic-accordion-card-stack
- The bottom-right '+' button is draggable: pulling it upward parts existing list rows with a 44px blue insertion gap so you create a task or heading at the exact desired position in one gesture. — 142-things-3-ios-magic-plus-floating-action-insertion-slot
- Pulling past the bottom scroll boundary reveals a circular radial action scrubber where horizontal thumb drift selects between New Tab, Summarize, and Reader Mode. — 143-arc-search-bottom-anchored-keyboard-first-browser-bar
- Two-stage horizontal swipe threshold: dragging 0–64px reveals the 'Accept' icon in muted gray; crossing 64px snaps the background to #5e6ad2 and scales the icon 1.15× to confirm release commit. — 144-linear-mobile-progressive-swipe-to-triage-gesture-row

### component pattern

- Tapping any wallet card triggers a spring-driven accordion expansion while sibling cards tuck cleanly into a 44px bottom bezel tray, keeping every primary action inside the one-handed thumb arc. — 141-family-wallet-haptic-accordion-card-stack
- App launch auto-focuses the bottom search input with the software keyboard already raised, eliminating the redundant initial tap required by top-bar mobile browsers. — 143-arc-search-bottom-anchored-keyboard-first-browser-bar

### typography

- Zero card borders or row dividers: visual grouping relies entirely on 26px bold project headers, 15px body rows, and 24px vertical section breathing room. — 142-things-3-ios-magic-plus-floating-action-insertion-slot

### grid/layout

- Each mobile issue row compresses metadata into a 12px monospace prefix ('ENG-402') plus a two-line clamped title, preserving a full 56px touch target height without visual bloat. — 144-linear-mobile-progressive-swipe-to-triage-gesture-row

## References

- 141-family-wallet-haptic-accordion-card-stack — Family Wallet — Haptic Accordion Card Stack (exemplar)
- 142-things-3-ios-magic-plus-floating-action-insertion-slot — Things 3 iOS — Magic Plus Floating Action & Insertion Slot
- 143-arc-search-bottom-anchored-keyboard-first-browser-bar — Arc Search — Bottom-Anchored Keyboard-First Browser Bar
- 144-linear-mobile-progressive-swipe-to-triage-gesture-row — Linear Mobile — Progressive Swipe-to-Triage Gesture Row

Type

Loadable Open-Source Stand-Ins

  • Berkeley Mono (licensed) → JetBrains Mono
  • SF Pro (macOS only) → Inter
  • SF Pro Display (macOS only) → Inter Tight
  • SF Pro Text (macOS only) → Inter

Color

Pairs that read

  • Steal this.#18181b on #ffffff · 17.7:1
  • Steal this.#000000 on #ffffff · 21:1
  • Steal this.#18181b on #30d158 · 8.8:1
  • Steal this.#18181b on #ff9f0a · 8.6:1

Moves

motion/interaction

component pattern

typography

grid/layout

References