Overview

PlateNumber shows the plate number of the car assigned to the ride — an outlined box around the registration, like the plate itself, so the passenger can match it to the car that pulls up. Two sizes: M for larger blocks, S for smaller ones.

1
M
2
S

1

2

States

Two states — Standard and Skeleton. PlateNumber is not interactive: no pressed, hover, focused or disabled look.

1

Standard

2

Skeleton

1
Standard --background-primary — the fill.--text-and-icon-primary — the text and the inside border.
2
Skeleton --skeleton-on-white — a fixed box, no border, no text.--pattern-shimmer — the DS sweep.Static — its size does not adapt to the value that replaces it.

Anatomy

A box that hugs one text. The box draws the plate; the text is the registration as issued. The Skeleton replaces both with a fixed shape — see States and Layout.

1

2

1
Container --background-primary — the fill.--text-and-icon-primary — the inside border.var(--sp-s2) — the border at M.1dp — the border at S; the SP scale has no s1 token.var(--sp-s8) — the corner radius at M.var(--sp-s4) — the corner radius at S.Required.
2
Text Body/Promo Body — M.Body/Compact Body — S.--text-and-icon-primary — the colour.Wraps to the next line, never truncated. Required.

Layout

PlateNumber is a horizontal auto-layout that hugs its text — no width of its own, no vertical padding. The text's line height sets the height.

M size

One line

A long value wraps in a narrow host

Box var(--sp-s4) — left and right padding.var(--sp-s0) — top and bottom padding.var(--sp-s28) — the min height, the text's line height.var(--sp-s2) — the inside border.var(--sp-s8) — the corner radius.
Text Body/Promo Body — the text style; it caps at 130 %.Figma keeps the paddings, radius and border at 100 % while the text scales; on the web every SP token follows the SP mode.No maximum width of its own — the host caps it; a long value wraps to the next line instead of being truncated.
Use Use M for larger blocks, such as the ride details.

S size

One line

A long value wraps in a narrow host

Box var(--sp-s4) — left and right padding.var(--sp-s0) — top and bottom padding.var(--sp-s16) — the min height, the text's line height.1dp — the inside border; the SP scale has no s1 token.var(--sp-s4) — the corner radius.
Text Body/Compact Body — the text style; it scales to 150 %.Figma keeps the paddings, radius and border at 100 % while the text scales; on the web every SP token follows the SP mode.No maximum width of its own — the host caps it; a long value wraps to the next line instead of being truncated.
Use Use S for smaller blocks, such as the activity widget or a small card detail.

Skeleton

M

S

Fixed Shape var(--sp-s140) × var(--sp-s28) — M.var(--sp-s96) × var(--sp-s16) — S.var(--sp-s0) — padding; the size's corner radius, no border.The skeleton layout is static and does not adapt to the final content. All about the shape and its shimmer: Skeleton.

RTL

1

2

1
LTR The lines align left.
2
RTL The lines align right; the box does not mirror. The plate keeps its own character order — the value is its own bidi paragraph (unicode-bidi: plaintext), so a Thai or Latin plate is not reordered. The web takes the direction from dir="rtl".

Animation

Live — the DS shimmer; it holds still under reduced motion

Skeleton Shimmer --pattern-shimmer — the DS sweep, the same as the Skeleton component.It runs in reverse in RTL.
No Motion Of Its Own The host swaps the skeleton for the content. A new value re-hugs the box in the same frame — no width tween, no transition.
Reduced Motion --pattern-shimmer — resolves to none at the token, so the skeleton holds still; no override of its own.

Usage

PlateNumber sits under the car's name, so the passenger can check the plate against the car that arrives. M for larger blocks, S for smaller ones; the value is shown whole.

1
Ride Details Body/Promo Body — M, under the car's name on the ride screen.
2
Activity Widget Body/Compact Body — S, in the widget's car line.
3
Long Plate Number Wraps to the next line inside the box — never truncated; the card's width caps it.
4
Short Plate Number The box hugs the value — no width of its own.

Driver is waiting for you

Silver Mercedes-Benz C-Class

✓ Ride details — M, under the car's name

✓ Activity widget — S, in the car line

Driver is waiting for you

Silver Mercedes-Benz C-Class

✓ Long plate number — wraps, never truncated

✓ Short plate number — the box hugs it

Accessibility

Static text with one job — the passenger checks the plate against the car. One element, single focus: a localized prefix, then the registration character by character.

1
Single Focus "Transport plate number: P H X 5 6 8 C Y" — never "phx five hundred sixty-eight cy". No role, no action; the box, its fill and its border are decorative, never announced.TalkBack: the root's clearAndSetSemantics sets the text — an AnnotatedString with the registration under a VerbatimTtsAnnotation. The trap: a bare Text("PHX568CY") is read as a word with no prefix — mergeDescendants still merges it, and contentDescription cannot carry the span.VoiceOver: one element (children: .ignore), .staticText, an accessibilityAttributedLabel with .accessibilitySpeechSpellOut on the registration run only.Web: a .visually-hidden span carries the phrase and the visible text is aria-hidden — no aria-label on the generic span (prohibited), no tabindex.Inside a host that merges its children into one label, the phrase joins the host's label, the registration still spelled.
2
Region As A Word "Transport plate number: ข ส 1 9 9 3, พระนครศรีอยุธยา" — the registration spelled, the province read as a word after it; spelled letter by letter it is unrecognisable.The plate's run carries its language — lang="th" in the spoken span, LocaleSpan on TalkBack, .accessibilitySpeechLanguage on VoiceOver — so the reader switches voice.
3
Skeleton Not announced, not focusable, not a target — aria-hidden="true", TalkBack importantForAccessibility="no", VoiceOver accessibilityHidden(true).The loading container announces once, politely, and is busy until the plate lands; then the skeleton leaves the DOM. The shipped DS skeletons do not hide themselves (flagged on Skeleton) — hide the box explicitly.
Text Scaling Body/Promo Body — M, caps at 130 %; below WCAG 1.4.4's 200 % — the DS-wide rule, flagged.Body/Compact Body — S, scales to 150 %, the DS maximum.The value wraps to the next line and is never truncated, so the whole plate stays visible.
Edge States RTL right-aligns the lines and keeps the plate's own character order; the announcement is unchanged. No disabled, dimmed or error state. A reassigned driver changes the plate — not a live region; the host announces the change of car.
Contrast --text-and-icon-primary on --background-primary — ≈ 17.8:1 Day / ≈ 17.0:1 Night, the text and the border.Forced colours: the border is an outline, so it takes the system text colour and the plate outline remains; the skeleton disappears and the container's status carries the loading state.