Autonomy rule | Lime design system

Examples

A spending limit

Ask me before paying over

A settings screen

Ask me before paying over

Pay billsdays early

Send at mostpayments a day

When to use it

Use: A limit on what the assistant does without asking: an amount, a number of days, a count of payments.
Use: A settings screen of several such limits, one sentence each.
Not for: A setting that is only on or off, such as round-ups. Use Switch.
Not for: Picking an amount by feel along a range. Use Slider.
Not for: Asking once, before one payment. Use Approval request.

6 rules

Must: Write the rule so before, the value and after read as one plain sentence. Because before, the value and after join into the field label, so a screen reader hears only "Limit $50".
Must: Use kind="amount" for money and kind="number" for days or counts; never type the $ yourself. Because the amount field draws its own $ and strips typed ones, and a day count with $ reads "$3 days early".
Should: Keep the sentence under about 30 characters so it stays on one line on a phone.
Should: Give each limit its own rule, stacked with a 12px gap; never two fields in one sentence.
Must: Save on change or on leaving the field; do not add a Save button per sentence. Because a button inside each sentence breaks its one line on a phone, and an unsaved limit keeps the old one.
Never: Put the lime or a glow on a rule; it is a setting, not the main action. Because the lime marks the one main action, and a lit setting competes with it.

3 checks

: The whole sentence, with the current value, is the field's accessible name.
: The field opens the number keyboard on a phone through inputMode.
: The focus ring is the 2px olive ring of every Lime field.

5 edge cases

Narrow screen: The words before the field truncate first; the field and the words after keep their width.
Empty value: The field stays its width and the name reads the blank as an ellipsis.
Long number: At sm the field scrolls its text and never grows. Inline grows with its value, sized in ch, so it fits 16px touch text too.
Inside a row that clips: An inline field draws its focus ring inside its edge, so a truncating list line keeps it.
Right to left: The sentence and the dollar sign follow the direction.

7 props

9 tokens