Skip to content
Rechaj Design

captured context

Captured Context

Section titled “Captured Context”

A green-tinted block inside a bottom sheet that lists what the system has already captured about the situation — driver, tricycle, timestamp, station, manager, balance, etc. — so the user can review it before adding their own input. Reduces typing and prevents data drift between systems.

When to use

Section titled “When to use”
  • A support / audit / authorization form is being submitted from inside a flow where the system already knows most of the data
  • The user’s job is to add the missing 10% (reason, free-text description, approval/reject), not to retype the 90% the system has
  • Trust is important — showing what’ll be sent makes the user comfortable submitting

Used inside [[bottom-sheet]] — never on a screen by itself.

Anatomy

Section titled “Anatomy”
┌──────────────────────────────────────┐
│ ╭───╮                                │
│ │ ✓ │  CONTEXT                       │   ← head (green disc + label)
│ ╰───╯                                │
│                                      │
│ ✓  Plate         ABC-1234-LA         │   ← captured items
│ ✓  Driver        Adekunle Musa       │
│ ✓  Station       Toll Gate Mega      │
│ ✓  Manager       Jamiu               │
│ ✓  Time          08:51 · 11 May 2026 │
└──────────────────────────────────────┘
  • Block: var(--g-3) background, no border, 14px radius, 14px padding, margin: 16px 0.
  • Head: 22px circle (var(--g-primary) bg, white check inside), 12px / 700 var(--g-dark) label, uppercase, letter-spacing: 0.06em. Gap 8px.
  • Items: rows of [✓ check-mini] [key] [value].
    • Check-mini: 16px circle, var(--g-dark) bg, white 9px check.
    • Key: var(--g-dark) at 0.7 opacity, 500 weight, min-width: 86px, flex-shrink: 0.
    • Value: var(--g-dark) 600 weight, flex: 1, can wrap on long content.
  • Stagger animation: each item fades + slides in from the left, 0.07s delay between siblings.

Behavior

Section titled “Behavior”
  • Read-only. If the user needs to change a captured field, surface an edit affordance OUTSIDE this block — captured-context is for confirmation, not editing.
  • Always appears above the user’s input fields (chips, textarea, picker). The sheet flow reads: title → context → input → footer CTA.

Companion: “Other context” sub-block

Section titled “Companion: “Other context” sub-block”

When there’s important context the user should know but isn’t a captured field (e.g. “the other battery sharing this ID is on TR-08812 at Honda Swap Station”) — render as a separate neutral block below the captured block:

  • var(--bg) background, 1px solid var(--grey4) border (this is a discrete sub-card, not the main captured one — border allowed), 12px radius, 12px padding.
  • Eyebrow label: 10.5px / 700 uppercase var(--grey10).
  • Body: 12.5px / 400 var(--grey12) with <b>-wrapped semibold key terms.

Forbidden

Section titled “Forbidden”
  • Editable inputs inside the captured block — separate the editable form region.
  • White background — the green tint is what signals “we know this”.
  • Mixed colors (some items green, some neutral) — all-or-nothing.

Reference implementation

Section titled “Reference implementation”

See .captured-block + .other-battery in products/rechaj-swap-app/prototypes/support-cases-v2.html, used inside sheet-station, sheet-battery, sheet-payment, sheet-support.