Components — Luxury Resale Marketplace

Button

Four variants in three sizes. The main action of a view is the only filled green button; everything else steps back.

Variants

The fill says how much a button asks for. Brass is never an action; the main action is the green (ivory in dark).

Primary — the one main action of a view

Secondary — an alternative next to it

Ghost — quiet, in toolbars and rows

Danger — destructive, asks to confirm

Sizes

One height for buttons and fields, so a row of both lines up.

Small, 32 px — tables and toolbars

Medium, 40 px — the default

Large, 48 px — buy, checkout, a phone

States

Every variant in every state. Hover and focus are forced on here with a class; in the product they follow the pointer and the keyboard.

Variant	Default	Hover	Focus	Disabled	Loading
Primary
Secondary
Ghost
Danger

Pressed moves the button down by one pixel. A loading button keeps its width, shows a spinner in place of its label and sets aria-busy; it ignores a second click.

With an icon

A 16 px icon, drawn in the label’s color. An icon-only button is a square of the same height.

Icon before the label

Icon after the label — moving on

Icon only — always has an accessible name

Live and full width

Try it: a click shows the loading state for two seconds

Full width on a phone: the large size, the main action on top

Properties

Property	Values	Default	Use
`variant`	`primary` `secondary` `ghost` `danger`	`primary`	One primary per view; danger only where the action cannot be undone.
`size`	`sm` `md` `lg`	`md`	Heights 32, 40 and 48 px; the large one on a phone and at checkout.
`icon`	`start` `end` `only`	—	The icon-only button needs an aria-label.
`loading`	`true` `false`	`false`	Shows the spinner, sets aria-busy and ignores clicks; the width does not change.
`disabled`	`true` `false`	`false`	Half-strength, no pointer events. Say why next to it when the reason is not obvious.
`fullWidth`	`true` `false`	`false`	Fills its container; used in forms on a phone.
`type`	`button` `submit`	`button`	A button inside a form that submits it is type submit; a link that looks like a button is an anchor.

Text field

Label, hint and error; disabled and read-only; password; the text area. A price field keeps its currency in view.

States

A label above, always visible — a placeholder is an example, never the label. The border is the emphasis color, 3:1 against its ground.

Model

Printed on the warranty card or the case back.

Default

Model

Printed on the warranty card or the case back.

Hover

Model

Printed on the warranty card or the case back.

Focus

Email

Enter a full address, for example name@mail.example.

Error — says what to do, not what went wrong

Listing title

Locked while the item is in authentication.

Disabled

Order number

Read-only — selectable, not editable

Price and affixes

An amount keeps its currency in a fixed affix, in tabular figures. A price in another currency is shown as approximate.

Asking price

EUR

Buyers browsing in USD see about USD 9,180 — approximate, at the daily rate.

Your offer

EUR

The asking price is EUR 3,900.

Optional fields

What is required is the rule; only the exception is marked.

Serial number Optional

Year of production

Search and sizes

Small, 32 px — filters and toolbars

Medium, 40 px — the default

Large, 48 px — the search of the home page

Password and text area

The password field has a Show / Hide action inside the border. The text area grows downward by the reader’s hand.

Password

Use a passphrase you do not use anywhere else.

Message to the seller

Messages with phone numbers or email addresses are blocked.

Properties

Property	Values	Default	Use
`label`	`text`	—	Always visible; the field is never named by its placeholder alone.
`hint`	`text`	—	Below the field, linked with aria-describedby.
`error`	`text`	—	Replaces the hint, red with an icon, aria-invalid on the input.
`size`	`sm` `md` `lg`	`md`	Heights 32, 40 and 48 px, as the button.
`type`	`text` `email` `password` `search` `tel` `number`	`text`	Sets the keyboard on a phone; a price is text with inputmode decimal.
`start / end`	`affix` `icon` `action`	—	A currency, a search icon, a Show button; inside the border.
`optional`	`true` `false`	`false`	Adds “Optional” after the label.
`disabled`	`true` `false`	`false`	Not focusable, not submitted; say why in the hint.
`readOnly`	`true` `false`	`false`	Focusable and selectable, submitted; shows a lock.
`rows`	`number`	`3`	Text area only.

Select

A labeled field and a compact filter; placeholder, chosen value, disabled; the list that opens.

Labeled field

A button that shows the value and opens our own list; the system’s menu is never used. Every sample on this page is live: click, or use the keyboard.

Condition

Closed, nothing chosen

Condition

Chosen value

Compact filter

A 32 px select that names itself in an affix; for filters above a list.

The list that opens

A card of the overlay level. The chosen option has a check; the one under the pointer or the arrow keys is soft green.

Condition

Key	Action
`↑` `↓`	Moves between options; opens the list from the closed field.
`Enter` `Space`	Chooses the highlighted option and closes the list.
`Esc`	Closes the list and returns focus to the field, keeping the previous value.
`A–Z`	Jumps to the first option that starts with the letters typed.
`Home` `End`	First and last option.
`Tab`	Closes the list and moves on; nothing is chosen.

Long lists and groups

A group has a label and a divider sets it apart; an option can be unavailable. Past six rows the list scrolls inside itself. Near the edge of the screen it opens above.

Brand

Condition

No room below: the list opens above

Properties

Property	Values	Default	Use
`label`	`text`	—	Always visible; the compact filter names itself in the affix.
`options`	`list`	—	Options, group labels and dividers. Condition: Unworn, Excellent, Very good, Good. Categories: up to three per item (open question).
`name`	`text`	—	A hidden input of this name carries the chosen value into a form.
`placeholder`	`text`	—	The unchosen state, in the subtle color; not an option you can choose back.
`size`	`sm` `md` `lg`	`md`	As the text field; the compact filter is sm.
`placement`	`auto` `below` `above`	`auto`	Below the field; above when there is no room below.
`maxHeight`	`rows`	`6`	The list scrolls inside itself past this many rows.
`error`	`text`	—	Replaces the hint; aria-invalid on the trigger; choosing clears it.
`disabled`	`true` `false`	`false`	Shows the value; say why in the hint.
`searchable`	`true` `false`	`false`	Above about twelve options (brands) the list gets a search field.

Checkbox, radio, switch

One or many of a list, one of a few, on or off — in every state, with the product’s own choices.

States

Every control in every state. Unselected borders use the emphasis color (3:1); a selected control is the green fill (ivory in dark).

Checkbox

Zero, one or many of a list. Mixed shows that a parent covers some of its children. The label is part of the target.

At checkoutAdd hub inspectionA specialist at Certa Inspection, Frankfurt hub checks the watch before it reaches you. EUR 120.Save this address for next time

Your listingsSelect all listings

Corvane Mariner 41 ChronographHalden Reserve Automatic 38Valmont & Fils Diver 300

Before you publish

I confirm the watch is mine to sell

Confirm this to continue.

Radio

One of a few, all visible. A group has a legend; an option that needs a price or an explanation becomes a card.

I am selling asAn individualA businessCompany details are asked for next.

DeliveryDirect deliveryShipped by the seller with Northline Express.Via the inspection hubChecked at Certa Inspection, Frankfurt hub, then delivered.

Switch

On or off, taking effect at once — no Save button. Use a checkbox when the choice is sent with a form.

Email me when the price dropsFor the watches you saved.

On

Push notifications for offers

Off

Security emailsAlways on. They protect your account.

On

Properties

Property	Values	Default	Use
`checked`	`true` `false` `mixed`	`false`	Mixed is shown only by a parent checkbox; a click selects all.
`label`	`text`	—	Clicking it toggles the control. A switch is labeled by aria-labelledby.
`description`	`text`	—	A second line in the muted color: a fee, a consequence.
`card`	`true` `false`	`false`	Radio only: a bordered option with an aside (a price).
`disabled`	`true` `false`	`false`	Keeps its position; say why in the description.
`error`	`text`	—	Red border on the box and a message below the group.
`role`	`checkbox` `radio` `switch`	—	A switch is a button with role switch and aria-checked; the checkbox and radio are native inputs.

Date picker

A date and a range; the calendar and its keyboard.

A date

The field accepts typing in the format shown; the calendar is the alternative, not the only way. Dates are shown in the reader’s language.

Date of purchase

As on the warranty card. Day, month, year.

Date of purchase

As on the warranty card. Day, month, year.

Default

Date of purchase

The date cannot be later than today, 27 Oct 2026.

Error

Date of purchase

Locked: the item has been authenticated.

Disabled

A range

Orders from – to

Choose the first day, then the last.

Today has a ring. The chosen days are the filled green (ivory in dark); the days between are the soft tint. Days after today are not available, so they are dimmed and skipped by the keyboard.

Keyboard

The calendar is a grid; one day is in the tab order, the arrow keys move inside.

Key	Action
`←` `→`	One day back or forward.
`↑` `↓`	One week back or forward.
`Home` `End`	First and last day of the week (the week starts on Monday).
`PgUp` `PgDn`	Previous and next month; with Shift, the year.
`Enter` `Space`	Chooses the day. In a range, the first press sets the start, the second the end.
`Esc`	Closes the calendar and returns to the field.

Properties

Property	Values	Default	Use
`value`	`date`	—	Typed or picked; stored as an ISO date, shown as “14 Mar 2022”.
`mode`	`single` `range`	`single`	A range needs two choices; the field shows both.
`min / max`	`date`	—	Days outside are dimmed and skipped; a purchase cannot be in the future.
`weekStart`	`monday` `sunday`	`monday`	Follows the language; the EU market starts on Monday.
`error`	`text`	—	Says which limit was broken.
`disabled`	`true` `false`	`false`	The field and its button; say why in the hint.

Badge and status

The state of a thing, in a pill: an icon or a dot with a short word. Green-teal only for passed, published and paid; amber for waiting; red for failed. The authentication badge is the provider’s finding, never a platform guarantee.

Status by family

Every state family of the domain, as the screens show it. The words are the states’ own names; the tone follows the meaning.

Listing

DraftIn reviewIn authenticationPublishedReserved · 14 minSoldRejected

Authentication

SubmittedPassedFailedInconclusiveCertificate revoked

Inspection

Awaiting itemAt hubPassedInspection failed

Order

PaidIn transitCompletedCancelledIn dispute

Offer

PendingAcceptedDeclinedExpired

Payout

Payout on holdPaid outBlocked

Case

OpenedCase under reviewResolvedClosed

Tones

Six tones. A tone never stands alone: the icon or the dot repeats it for those who do not see color.

Neutral · at restDraft

Brand · chosen, acceptedAccepted

Success · passed, published, paidPassed

Warning · waitingIn authentication

Danger · failedInspection failed

Info · under wayAt hub

Forms

With an icon (default)Published

With a dotPublished

Text onlyPublished

OutlinePublished

Solid, one at a timeInspection failed

Sizes and counts

Medium · 24 pxReserved · 14 min

Small · 20 px, on a card or in a dense tableReserved · 14 min

Count7

Count, quiet24

Properties

Property	Values	Notes
`.badge`	`.badge--brand` · `.badge--success` · `.badge--warning` · `.badge--danger` · `.badge--info`	The tone; without one the badge is neutral.
`.badge__dot / .icon`	`dot` · `icon 14 px`	The mark before the word. One of the two, always: color is never the only signal.
`.badge--outline`	`border`	Quiet, on a busy surface.
`.badge--solid`	`fill`	For what needs the eye first; one per view.
`.badge--sm`	`20 px`	On a listing card or in a dense row.
`.badge--count`	`number`	A number on a tab or a menu item.
`radius`	`--radius-full`	The pill; text never wraps, so a long state is shortened, not broken over two lines.

Avatar

Who is behind a listing, a message or an action. A person is a circle, a business a rounded square, and a small marker repeats it so the shape is not the only clue.

Sellers

Maison Arden sells as a business, Daniel Weber as an individual. The marker and the line under the name say which.

Maison ArdenBusiness sellerDaniel WeberIndividual seller

Sizes

Five sizes on the 4 px grid. The marker is left out at 24 px; the name beside the avatar carries the meaning there.

24

32

40

56

72

24

32

40

56

72

Kinds

Initials (default)

Picture (placeholder shown)

No name yet, a visitor

A stack

Properties

Property	Values	Notes
`.avatar`	`--xs 24` · `--sm 32` · `40` · `--lg 56` · `--xl 72`	Initials scale with the size: two letters at most, from the display name.
`.avatar--business`	`rounded square` · `brass edge`	A company or a shop. Default is the person: a circle in the soft brand tint.
`.avatar__mark`	`user` · `building-2`	Individual or business, in a small disc on the corner. Hidden at 24 px.
`.avatar--photo / .avatar__img`	`picture`	A picture fills the shape; without one, the initials stay.
`.avatar--empty`	`visitor`	A guest or a deleted account: a neutral figure.
`.avatar-stack`	`overlap 4 px` · `+n`	A few people at once; the rest as “+n”.
`.person`	`avatar` · `name` · `meta`	The avatar beside a name and a line; the whole is decorative for a screen reader, the name is read.

Card

A bordered surface that groups one thing: a title, its content, and the actions on it. Borders separate; the shadow is only a whisper.

Title, actions, footer

The head holds the title and the actions on the card; the foot, the decision. Each part is optional.

Payout account

Payments are collected and paid out by the payment provider, after the order is complete.

Seller details

Name: Daniel Weber
Seller type: Individual seller
Location: Munich, Germany

Listing draft

Saved 2026-10-27 09:14

Draft

3 of 10 photos added. Add the rest to send the listing to authentication.

With an edge-to-edge table

The table takes the card’s width and the card is its frame; the head is ruled off from the rows.

Open cases

3 of 11 shown

Case	Kind	Status
C-1042	Dispute	Under review
C-1039	Failed inspection	Opened
C-1031	Return	Under review

States

Default

StandardBorder and a soft shadow.

Hover (a card that opens)

InteractiveLifts; the border darkens.

Selected

SelectedA brand border, one pixel more.

Muted · disabled

MutedNo shadow; a quiet surface.

Properties

Property	Values	Notes
`.card`	`--compact` · `--muted` · `--outlined` · `--selected` · `--interactive`	Padding and surface. Compact is 16 px, the default 20.
`.card__head`	`--ruled`	Title (and subtitle) left, actions right; a rule under it when the body is a table or a list.
`.card__body`	`--flush`	Padding from the card; flush for a table that runs to the edges.
`.card__foot`	`right-aligned actions`	One primary action at most, last.
`radius · shadow`	`--radius-card` · `--shadow-card`	On hover a card that opens takes --shadow-raised.
`a.card`	`hover` · `focus`	The whole card is the link; the title is its name for assistive tech.

Stat tile

One figure the admin watches, with its label and the change against the previous period. Money is shown per currency and never added across them.

Admin overview

Listings in review, authentication exceptions, held payouts and open cases. A rule on the edge, together with its label, marks what needs a person.

Listings in review

42

+6 vs previous 7 days

Authentication exceptions

7

+3 vs previous 7 days

Held payouts

EUR18,420.00

USD6,310.00

GBP2,850.00

Open cases

11

−2 vs previous 7 days

States and sizes

A change is told in words and an arrow; a figure that grows is not “good” or “bad” by itself, so only a worsening one is toned.

Loading

A tile that opens a list (hover)

Listings in review

42

With a unit

Median wait in authentication

3.4hours

Compact

Open cases

11

Properties

Property	Values	Notes
`.tile`	`--attention` · `--compact`	Attention adds a 3 px amber rule inside the left edge.
`.tile__label`	`11 px` · `uppercase`	What is counted, in the label style; it may end in an icon.
`.tile__figure`	`28 / 36` · `tabular`	The sans face with tabular figures, never the display face.
`.tile__unit`	`hours` · `EUR`	A unit beside the figure, muted.
`.tile__delta`	`--worse`	Arrow and words against the previous period; amber only when it is a worsening.
`.tile__lines`	`code + amount`	One line per currency for money: the code on the left, the amount on the right.
`a.tile`	`hover` · `focus`	A tile that opens its list is a link; the label names it.
`.tile--loading`	`.skeleton` · `aria-busy`	Skeleton lines of the figure’s shape, with a hidden “Loading” for screen readers.

Data table

The list table of the back office, shown as the listing-moderation queue: sortable columns, a selected row, and the four states a list passes through.

Filled

Header in the label style, one row per listing, figures right-aligned and tabular. The sorted column is named in the header, and the selected row takes the soft brand tint.

Listings waiting for moderation
Listing	Seller	Price	Authentication
Valmont & Fils Diver 300Valmont & Fils · 2022	Maison Arden	EUR 6,200.00	In authentication	2026-10-27 09:14
Severin Genève Perpetual CalendarSeverin Genève · 2015	Maison Arden	EUR 24,600.00	Inconclusive	2026-10-27 08:52
Corvane Mariner 41 ChronographCorvane · 2019	Daniel Weber	EUR 8,450.00	Passed	2026-10-26 17:30
Orvelle Pavé Tennis BraceletOrvelle · 2018	Daniel Weber	EUR 5,100.00	Failed	2026-10-26 15:08
Halden Reserve Automatic 38Halden · 2021	Maison Arden	EUR 3,900.00	In authentication	2026-10-26 11:41

Showing 1–5 of 386

Loading

The header stays; the rows are skeletons of their own shape. The table is marked busy.

Listings waiting for moderation
Listing	Seller	Price	Authentication		Actions

Error

One message across the table, what happened and one way out. Nothing is hidden or guessed.

Listings waiting for moderation
Listing	Seller	Price	Authentication		Actions
The queue could not be loaded Check the connection and try again. Nothing was changed.

Empty

Listings waiting for moderation
Listing	Seller	Price	Authentication		Actions
Nothing is waiting for review New listings appear here as soon as sellers submit them.

Density

The compact table for a card or a side panel; the default has more air.

Listings waiting for moderation
Listing	Price	Authentication
Valmont & Fils Diver 300	EUR 6,200.00	In authentication
Severin Genève Perpetual Calendar	EUR 24,600.00	Inconclusive
Corvane Mariner 41 Chronograph	EUR 8,450.00	Passed

Properties

Property	Values	Notes
`.table-wrap`	`overflow auto` · `--radius-card`	Scrolls on its own on a narrow screen, so the page never widens.
`.table`	`--compact` · `--sticky` · `--fixed`	Density, a header that stays while rows scroll, equal columns.
`th`	`scope="col"` · `aria-sort`	Label style. A sortable head holds a button; the arrow shows the order in use.
`td.num`	`right` · `tabular`	Money and counts: right-aligned, with the currency code beside every amount.
`tr`	`hover` · `.is-selected`	Hover is the page color; selected is the soft brand tint.
`.table__state`	`colspan` · `icon` · `title` · `text` · `button`	Error and empty take the place of the rows; the header stays.
`.table-foot`	`range` · `.pagination`	The range shown and the pages, below the rows.
`<caption>`	`.sr-only`	Every table is named for screen readers.

Pagination

Moves through a long list, a page at a time. Always shows where you are, the neighbours and both ends; the range says how much is left.

First, middle and last

First page · Previous is disabled

A middle page · the neighbours and the ends

Last page · Next is disabled

Compact · for a phone

With the range

Below a table the range sits on the left and the pages on the right.

Showing 81–100 of 386

States of a page button

Page

Hover

Focus

Current

Disabled

Properties

Property	Values	Notes
`nav.pagination`	`aria-label`	A navigation landmark with its own name.
`.pagination__item`	`32 px` · `44 px under 640 px`	A page button; the target grows to a finger’s size on a phone.
`[aria-current="page"]`	`brand fill`	The page shown; it is not a button to press.
`.pagination__item--step`	`Previous` · `Next`	Bordered, with an arrow; disabled at the ends instead of hidden, so the layout holds.
`.pagination__gap`	`…`	Stands for the pages left out; at most two in a row.
`.pagination--compact`	`Page n of N`	Previous, the place in words, Next.

Tabs

Switches between the parts of one thing without leaving it: the listing page’s Details, Authentication and Seller. The tab in use is underlined in the brand color and read as current.

On a listing page

Three parts, one of them current. Click to switch; arrow keys move between the tabs.

With counts

In the back office a tab may carry the number waiting. The counts are quiet, amber only for what needs a person.

On a phone

The tabs share the width equally; a longer set scrolls sideways.

States

Active

Inactive

Hover

Focus

Disabled

Properties

Property	Values	Notes
`nav.tabs`	`data-tabs` · `aria-label`	The group; one tab at a time carries aria-current.
`.tab`	`44 px high` · `underline 2 px`	Muted text; the current tab is full strength with a brand underline.
`[aria-current="page"]`	`current`	Set on the tab shown, removed from the others.
`.tab:hover`	`emphasis underline`	A neutral underline previews the target; it fades in over 240 ms.
`.tab:disabled`	`subtle` · `60%`	A part that is not available yet; not removed, so the set stays the same.
`.tabs--stretch`	`equal widths`	For a phone, where the set fits the width.
`.badge--count`	`in a tab`	A number after the label.

Breadcrumbs

Where the user is in the catalogue and the way back up. The last step is the page itself and is not a link.

The path to a listing

Watches › Corvane › Mariner 41. Categories and brands are open (Q-010), so the names here are placeholders.

A long path that folds

The middle levels fold into one button once the path outgrows its line; the first and the last two always stay.

On a phone

Only one step up: the parent, with an arrow back.

States

Link

Hover

Focus

Properties

Property	Values	Notes
`nav.crumbs > ol`	`aria-label`	An ordered list in a navigation landmark.
`li + li::before`	`chevron`	The separator is drawn in CSS, so a screen reader reads the list, not the arrows.
`a`	`muted` · `hover` · `focus`	Muted text; hover darkens it on a soft background.
`[aria-current="page"]`	`foreground` · `medium`	The page itself: full strength, not a link, cut with an ellipsis when it is long.
`.crumbs__fold`	`ellipsis`	Opens the folded levels; named for assistive tech.
`.crumbs--back`	`phone`	The parent alone, under 640 px.

Dropdown menu

Actions on a thing; a destructive one set apart.

Variants

The listing’s actions change with its state; “Withdraw listing” is always last, after a rule, in the danger color. The third sample is live: click it, Escape or a click outside closes it.

Listing actions — published

Listing actions — withdrawn

Try it

Account menu

Choice — currency

Seven items at most; more than that, the actions belong on the page itself.
A destructive action comes last, after a rule, and asks to confirm in a modal.
Arrow keys move through the items, Enter chooses, Escape closes and returns focus to the button.

Properties

Property	Values	Notes
`.menu`	—	The panel: surface, hairline border, overlay radius, raised shadow; never narrower than 240.
`.menu-wrap`	`--end`	Positions the panel under its button; --end aligns it to the button’s right edge.
`.menu__trigger`	—	The icon button that opens it; carries aria-label, aria-haspopup and aria-expanded.
`.menu__item`	`--danger`	One action at control height; hover and focus use the same tokens as every control.
`.menu__item`	`.is-hover` `.is-focus` `aria-disabled`	The states a sample cannot trigger by itself; disabled stays visible, muted, not focusable.
`.menu__sep`	—	A hairline that sets the destructive action apart.
`.menu__label`	—	A group heading in the label style, for a choice menu.
`.menu__check`	—	The mark of the chosen item in a menu of role menuitemradio.
`.menu__head`	—	The account header: avatar, name, role.

Tooltip and popover

A hint on hover; a small panel on click.

Properties

Property	Values	Notes
`.tip`	`.is-open`	Wraps a target and its tooltip; hover or focus inside shows the tooltip after a short pause. is-open pins it for a sample.
`.tip__target`	—	A text target: dotted underline, a help cursor, focusable.
`.tooltip`	`--bottom` `--end`	Inverted surface, overlay radius, small text, at most 256 wide; above the target unless told otherwise.
`role="tooltip"`	—	The target points to it with aria-describedby.
`.pop`	—	Wraps a button and its popover; the product opens it from a button with aria-expanded.
`.popover`	—	Surface, hairline border, overlay radius, raised shadow, 320 wide at most.
`.popover__title`	—	One short heading.
`.popover__text`	—	A few words, muted.
`.popover__link`	—	At most one link or button, never a form.

Progress and meter

Progress says how far along something is; a meter says how full or how much is left. A number in words always goes with the bar.

Progress

Photo upload for a listing: 3 of 10. As a bar when it is a quantity, as slots when each unit is a thing the seller can see.

Photos uploaded, as a bar

Photos3 of 10

Photos uploaded, as slots

Photos3 of 10

Up to 10 photos. The first one is the cover.

One file on its way

cover.jpg64%

Length unknown

Preparing the photos

Failed · red, with the reason and a way on

cover.jpgUpload failed

The connection dropped. Add the photo again.

Finished

Photos10 of 10

Sizes

Small · 4 px

Photos3 of 10

Medium · 8 px

Photos3 of 10

Large · 12 px

Photos3 of 10

Meter

Time left on an offer or a reservation. The bar drains, and turns amber as it runs low.

A meter with room left

Offer time left2 h 05 min

Running low · amber

Reservation time left14 min

Properties

Property	Values	Notes
`.progress`	`--sm 4` · `8` · `--lg 12`	The track’s height.
`.progress__bar`	`--value 0–100`	Width is set from one custom property; it eases in 400 ms.
`.progress__segments`	`n of N`	Slots for countable things such as photos; filled ones take the bar color.
`.progress--warning / --danger`	`amber` · `red`	Running low; failed. The word beside the bar says it too.
`.progress--indeterminate`	`moving bar`	For work of unknown length; still when motion is reduced.
`[role="progressbar"] / [role="meter"]`	`aria-valuenow` · `aria-labelledby`	A progress bar moves toward done; a meter is a measure.

Alert and toast

Inline alerts in four tones; toasts that confirm or report.

Alerts

A message that stays in the page until its cause is gone. Four tones, each with its own icon and a title, so color is never the only signal.

Information

Your listing is in authentication

You will be told as soon as the provider has a result.

Success

Authentication passed

Your listing is published with the provider’s certificate.

Warning — with an action

Your payment account is pending

You can keep listing. Payouts start once the payment provider has verified your details.

Continue setup

Danger — with an action

Inspection failed — a refund is on its way

The hub’s result is final. You can follow the refund in your order.

View order

Dismissible

Prices are shown in USD

They are approximate, converted at today’s rate.

Compact — one line

Your payment account is pending

Banner — across the top of a page

Toasts

A short confirmation or report that appears at the bottom right and leaves by itself after five seconds, longer while the pointer is on it. The buttons make real ones.

Tones

Offer sentThe seller will see it in their offers.

Listing saved as draftFinish it any time from My listings.

Offer not sentCheck your connection and try again.

You are offlineWe will try again in a moment.

With an undo

Listing withdrawn

Try it — each button adds a real toast

A toast confirms what the user just did; an error that needs action is an alert in the page, never only a toast.
Three at a time at most; a new one pushes the oldest out.
Announced politely to screen readers (role status); an alert with an urgent cause uses role alert.

States

The action of an alert under the pointer and under keyboard focus; the dismiss button the same; a toast while the pointer holds it.

Action — hover

Your payment account is pending

Continue setup

Action — keyboard focus

Your payment account is pending

Continue setup

Dismiss — hover

Prices are shown in USD

Toast — held by the pointer

Offer sentThe timer is paused while the pointer is on it.

Properties

Property	Values	Notes
`.alert`	`--info` `--success` `--warning` `--danger`	Tone set by a modifier; a soft tint, a stripe at the start, an icon and a title. Default tone: info.
`.alert`	`--compact` `--banner`	Compact is one line; banner runs edge to edge under the top bar, without corners.
`.alert__title`	—	In the tone’s text color; the first thing read.
`.alert__action`	—	One link, underlined; more than one action means a modal is needed.
`.alert__close`	—	Only where the message can be set aside; carries aria-label.
`.toaster`	—	The fixed stack at the bottom right, above everything (z-toast); built by the page’s script.
`.toast`	`--info` `--success` `--warning` `--danger`	Surface, overlay radius and shadow; rises in once, no bounce.
`.toast__action`	—	An optional undo; the toast waits while it is focused.

Modal

A dialog with a title, a body and two actions; the confirm-before-leaving case.

Properties

Property	Values	Notes
`.scrim`	`hidden`	The covering layer (z-modal) in the overlay color; it centers the dialog and closes it on a click.
`.modal`	`--sheet`	Surface, overlay radius and shadow, dialog width; the sheet is full width, flat at the bottom, for a phone.
`.modal__head`	—	Title and close button; omit the close button when the question must be answered.
`.modal__title`	—	The question, in the display face at section-title size.
`.modal__mark`	`--info`	A round icon for a destructive or an informing dialog; optional.
`.modal__body`	—	Muted text; the item concerned is named in strong.
`.modal__foot`	—	Actions aligned to the end; at most two, the primary last.
`role="dialog"`	`aria-modal` `aria-labelledby`	Set on .modal; html.modal-open stops the page behind from scrolling.

Drawer

A panel from the side for details and forms.

Variants

A panel from the end of the screen for details and forms that belong to the page behind it: the buyer’s filters, an order opened from a list in the back office. The buttons open real ones.

Filters — buyer

Order details — admin

The page behind stays where it is; closing the drawer returns to it exactly as it was.
A form in a drawer keeps its actions in the foot, so they stay in sight while the body scrolls.
On a phone the drawer fills the screen and slides up from the bottom, with the same head and foot.

States

While the content is fetched the head is already there; if it fails the body says so and offers one retry.

Loading

Failed to load

Properties

Property	Values	Notes
`.drawer`	—	Dialog-width panel (drawer size), full height of its container, overlay shadow; slides in from the end.
`.drawer__head`	—	Title and close button; a badge may sit under the title.
`.drawer__body`	—	The only part that scrolls.
`.drawer__foot`	—	Actions: the secondary or a reset at the start, the primary at the end.
`.drawer__chip`	`aria-pressed`	A toggle for a filter value; selected takes the brand soft tint.
`.drawer__list`	—	Term and value rows for details; the total row is stronger.
`.scrim`	`--end`	The same covering layer as the modal, with the drawer pinned to the end.
`role="dialog"`	`aria-modal` `aria-labelledby`	Set on the drawer when it covers the page; a drawer beside the page is a complementary region.

Empty state

A picture, a sentence and the one thing to do next.

Variants

Nothing to show, said once: a picture from the product’s set, one sentence, and the one thing to do next. The cause decides the picture and the action.

Nothing yet — saved items

You have not saved any items yet.

Nothing matches — filtered

No listings match these filters.

Could not load

We could not load your saved items.

One sentence, in plain words that never blame the user; one action, never two.
A filtered list offers to clear the filters; a first-time list offers the first thing to do; a failure offers to try again.
The picture is decorative (aria-hidden); the sentence carries the meaning.

Settings

The same parts at three sizes: alone on a page with a title, inside a card or panel, and as a single row inside a table or a section.

On a page — larger picture and a title

No offers yet

Offers you send and receive will appear here.

Compact — inside a table or a section

No orders match this filter.

Properties

Property	Values	Notes
`.empty`	—	A centered column: picture, text, action; at most a form width, so a sentence never runs long.
`.empty`	`--card` `--page` `--compact`	Card has a dashed edge for a panel; page is roomy; compact is one row.
`.ill`	`--spot` `--welcome`	The illustration from the sprite: spot for panels, welcome for a page. Never hero.
`.empty__title`	—	Only on a page-level state; display face at section-title size.
`.empty__text`	`--lead`	The sentence; lead is the only text when there is no title.
`.btn`	`--primary` `--secondary` `--ghost`	The one action; a retry or a clear is secondary or ghost.

File upload

Drop zone, progress, the file list, an error.

Drop zone

A dashed border says “drop here”. The button is the keyboard and touch way in, and works without drag and drop.

Drag photos here, or JPEG or PNG. Show the dial, the case back, the clasp, and the box and papers if you have them. Choose photos

Default

Drop to add the photos JPEG or PNG. Show the dial, the case back, the clasp, and the box and papers if you have them. Choose photos

A file is over the zone

Drag photos here, or JPEG or PNG. Show the dial, the case back, the clasp, and the box and papers if you have them. Choose photos

Focus on the button

Photos are locked They cannot be changed while the item is in authentication. Choose photos

Disabled

Progress, done and error

Each file is a row: what it is, how it went, and a way to take it away. An error stays in the list with the reason and a retry; the others carry on.

Drag photos here, or JPEG or PNG. Show the dial, the case back, the clasp, and the box and papers if you have them. Choose photos

corvane-dial.jpg2.4 MBUploaded
corvane-case-back.jpg3.1 MBUploading… 62%
warranty-card.pdf0.8 MBThis file type is not supported. Use JPEG or PNG.

A single file

For one document next to a form: a button and the name of the file.

Proof of purchase Optional

Choose fileNo file chosen

An invoice or a receipt, PDF or image.

One file, none chosen

Proof of purchase Optional

invoice-2022-03.pdf0.4 MBUploaded

One file, chosen

Properties

Property	Values	Default	Use
`accept`	`mime types`	`image/jpeg, image/png`	Wrong types are listed with a reason; they do not stop the others.
`multiple`	`true` `false`	`true`	A single-file upload replaces the file instead of adding.
`maxFiles / maxSize`	`number`	—	Open: the limits of photos per listing are not decided yet.
`disabled`	`true` `false`	`false`	Shows a lock and the reason, for example while the item is in authentication.
`onRemove`	`function`	—	The cross removes a file, or cancels one still uploading.
`onRetry`	`function`	—	Shown on a failed row only.

Stepper

The steps of one task in order, with what is done, where the user is, and what comes next. For seller onboarding: Seller type, Details, Payments, Done.

Seller onboarding

A finished step shows a check, the current one a ring, the rest a number. The line between them fills as steps are done.

Completed:Seller type
Current step:Details
Not started:Payments
Not started:Done

Where the user can be

The payment account is the step that can hold the seller back, so the error shows there: the provider’s own status, in words.

First step

Current step:Seller type
Not started:Details
Not started:Payments
Not started:Done

A step that needs attention

Completed:Seller type
Completed:Details
Needs attention:Payments
Not started:Done

Finished

Completed:Seller type
Completed:Details
Completed:Payments
Completed:Done

Vertical and compact

Vertical when each step has a line of help; compact on a phone, where the labels do not fit.

With a line of help under each step

Completed:Seller typeIndividual or business
Current step:DetailsYour details or your company’s
Not started:PaymentsWhere payouts are sent
Not started:DoneYou can start listing

Compact · for a phone

DetailsStep 2 of 4

Properties

Property	Values	Notes
`ol.stepper`	`aria-label` · `--vertical`	An ordered list; the current step carries aria-current="step".
`[data-state]`	`done` · `current` · `todo` · `error`	The state drives the marker and the line; hidden text names it for screen readers.
`.stepper__marker`	`28 px` · `check` · `number` · `x`	A check when done, the number otherwise, a cross on error.
`.stepper__step::after`	`connector`	Brand color up to the current step, neutral after; it eases in 400 ms.
`.stepper__hint`	`vertical only`	A short line of help under the label, in the vertical layout.
`.stepper-compact`	`Step n of N` · `segments`	The place in words and the path as segments, under 640 px.

App shell

The sidebar, the top bar and the page, as components.

This is the shell as a component, with placeholder navigation and a placeholder page. The real variants — for the buyer’s web, the seller, the admin and the hub — are drawn on the Layouts page.

Variants

Expanded, folded and compact. The first is live: the button folds the sidebar, the name opens the account menu.

Expanded — try it

LRM

Page title

Content

Page content

Folded — icons only, a tooltip names the link, the account menu open

LRM

Page title

Content

Page content

Compact (a phone) — the sidebar is out of the page

LRM

Page title

Content

Page content

Compact — the sidebar brought over the page

LRM

Page title

Content

Page content

States

The sidebar link, and the parts of the top bar.

Sidebar link

Top bar

Properties

Property	Values	Notes
`.shell`	`--folded` `--compact`	A sidebar column and a main column; folded narrows the sidebar to icons, compact takes it out of the page. The sidebar returns over the page with .is-open.
`.shell__side`	—	Surface, hairline at the end; holds the brand, the navigation, and settings at the foot.
`.navlink`	`aria-current` `.is-hover`	A link with an icon and a label; the page on show carries aria-current="page" and the brand soft tint.
`.shell__top`	—	Header height; the fold button, search, the account menu at the end.
`.shell__search`	—	A search field that grows to a form width; the label is its aria-label.
`.shell__account`	—	The avatar and name that open the account menu; the name goes on a phone.
`.shell__page`	—	The page area on the page color; its content is the screen’s own.
`--shell-side`	—	The sidebar’s width: the sidebar size, or the rail when folded.

Below the tablet width the sidebar leaves the page and opens over it from the menu button, with the scrim behind.
Folding is remembered per user; a folded link has a tooltip and the same aria-label.
The account menu holds the person, not the work: profile, settings, sign out.

Listing card

Photo, brand · year · condition, title, price with its approximate conversion, the availability chip and the save heart — as a grid, list and compact card.

Grid card

The default in search, category pages and featured selections. The photo leads; the price is in the listing’s currency with the buyer’s converted price marked approximate.

Available

Corvane · 2019 · Excellent

Corvane Mariner 41 Chronograph

€8,450 ≈ $9,168 approximate

Authenticated by Veritrace

Saved, hover

Halden · 2021 · Very good

Halden Reserve Automatic 38

€3,900 ≈ $4,232 approximate

Authenticated by Veritrace

Keyboard focus

Valmont & Fils · 2022 · Unworn

Valmont & Fils Diver 300

€6,200 ≈ $6,727 approximate

Loading

Availability

A card never hides its state. A reserved listing stays in the results with the time left; a sold listing leaves the results but its card keeps its link, marked sold; a withdrawn one says it is gone.

Reserved, time left

Reserved1 h 24 min left

Severin Genève · 2015 · Very good

Severin Genève Perpetual Calendar

€24,600 ≈ $26,691 approximate

Authenticated by Veritrace

Sold

Orvelle · 2018 · Good

Orvelle Pavé Tennis Bracelet

€5,100 ≈ $5,534 approximate

Authenticated by Veritrace

No longer available

Lisette Paris · 2020 · Excellent

Lisette Paris Quilted Flap Bag

€4,300 ≈ $4,666 approximate

Authenticated by Veritrace

List card

One row per listing: saved items, “my listings”, search with the list view.

Corvane · 2019 · Excellent

Corvane Mariner 41 Chronograph

€8,450 ≈ $9,168 approximate

Authenticated by Veritrace

Reserved1 h 24 min left

Severin Genève · 2015 · Very good

Severin Genève Perpetual Calendar

€24,600 ≈ $26,691 approximate

Authenticated by Veritrace

Compact card

A thumbnail row for a narrow place: a list of saved items on a phone, an order summary, “more from this seller”.

Halden · 2021 · Very good

Halden Reserve Automatic 38

€3,900 ≈ $4,232 approximate

Lisette Paris · 2020 · Excellent

Lisette Paris Quilted Flap Bag

€4,300 ≈ $4,666 approximate

Sold

Orvelle · 2018 · Good

Orvelle Pavé Tennis Bracelet

€5,100 ≈ $5,534 approximate

Properties

Property	Values	What it does
`variant`	grid · list · compact	The layout. Grid stacks photo over text; list puts the photo at the start of a row; compact is a 72 px thumbnail row.
`state`	available · reserved · sold · gone	Sets the availability chip. Sold and gone fade the photo; the card still opens the listing page.
`saved`	true · false	The heart. A visitor who taps it is asked to sign in; saving never reserves the listing.
`price`	listing currency + ≈ converted	Tabular figures in the sans face, never the display face. The converted price carries ≈ and the word “approximate”.
`meta`	brand · year · condition	One tracked line over the title. The condition scale is a placeholder until Q-010 is answered.
`auth line`	passed only	Names the provider. A card never shows a pending, failed or inconclusive result as a mark of trust.

Authenticity seal and certificate

The authentication result as the provider’s finding — submitted, passed, failed, inconclusive, resolved — and the certificate card with its brass seal.

Seal

The result is always worded as the provider’s finding: “Authenticated by Veritrace”, never “guaranteed”. Pending, failed and inconclusive have no check mark and no brand color, so none of them can be read as a pass.

SubmittedSubmitted to Veritrace

PassedAuthenticated by Veritrace

InconclusiveInconclusive, in review

FailedFailed Veritrace’s check

Resolved by staffPublished after staff review

Certificate issuedCertificate issued by Veritrace

Certificate revokedCertificate revoked

Sizes

Small on a card or in a table row; medium on the listing page beside the price.

Authenticated by VeritraceSubmitted to VeritraceInconclusive, in reviewFailed Veritrace’s check

Result panel

The large form on the listing page and for the seller: who gave the finding, when, and — when it is not a pass — what happens next.

Authenticated by Veritrace

Finding of Veritrace, 2026-10-12. Not a guarantee by the marketplace.

Certificate VT-2026-0412-7731 is attached to this listing.

Authentication in progress

Submitted to Veritrace on 2026-10-26. No result yet.

The listing stays unpublished until the check is complete. No certificate is shown.

Veritrace could not decide

Inconclusive result, 2026-10-12. This is not a pass.

Our staff review it. You will be told the outcome; you do not need to resubmit.

Failed Veritrace’s check

Failed result, 2026-10-12. The listing is not published.

Check the photos and details, then resubmit the listing.

Certificate card

Behind a pass: the certificate number in mono, the provider, the date and what was checked, under the brass seal. The seal draws once when the card first appears; with reduced motion it simply appears.

Issued

Certificate of authenticity

Issued

Corvane Mariner 41 Chronograph

Certificate no.: VT-2026-0412-7731
Provider: Veritrace
Issued: 2026-10-12

What was checked

Photos of case, dial, caseback and movement
Reference and serial number against the maker’s records
Details given in the listing: year, condition, box and papers

This is Veritrace’s finding. It is not a guarantee by the marketplace.

Revoked

Certificate of authenticity

Revoked

Corvane Mariner 41 Chronograph

Certificate no.: VT-2026-0412-7731
Provider: Veritrace
Issued: 2026-10-12

What was checked

Photos of case, dial, caseback and movement
Reference and serial number against the maker’s records
Details given in the listing: year, condition, box and papers

Revoked on 2026-11-03 after a failed inspection. It no longer counts as a valid result for this item.

This is Veritrace’s finding. It is not a guarantee by the marketplace.

Properties

Property	Values	What it does
`kind`	submitted · passed · inconclusive · failed · resolved · issued · revoked	The provider’s answer, or the certificate’s state. Each has its own icon and tone, so color is never the only signal.
`size`	sm · md · lg	Small for cards and rows, medium beside the price, large as the result panel with the finding and the next step.
`provider`	text	Always named: the finding is the provider’s, so the seal says “by Veritrace”.
`certificate`	issued · revoked	Number in mono, provider, date and what was checked. A revoked certificate stays readable, struck through, with the reason.
`brass`	seal ring only	Brass is decoration: the ring and scallops of the seal. It never colors text and never marks an action.

Inspection stepper

Requested, awaiting item, received, passed or failed — with the hub and the dates, apart from the delivery timeline.

The steps

Requested → awaiting item → received → passed or failed. The stepper shows the hub, the dates and only what the hub has recorded; the parcel’s own journey is on the order timeline.

Requested

Hub inspection

by Certa Inspection, Frankfurt hub

Separate from delivery

Requested2026-10-20Paid with the order
Awaiting itemNot yetSeller sends the item to the hub
Received at hubNot yetLogged at intake by the hub
Passed or failedNot yetDecided by the hub specialist

Awaiting item

Hub inspection

by Certa Inspection, Frankfurt hub

Separate from delivery

Requested2026-10-20Paid with the order
Awaiting item2026-10-21Seller sends the item to the hub
Received at hubNot yetLogged at intake by the hub
Passed or failedNot yetDecided by the hub specialist

Received at the hub, no verdict yet

Hub inspection

by Certa Inspection, Frankfurt hub

Separate from delivery

Requested2026-10-20Paid with the order
Awaiting item2026-10-21Seller sends the item to the hub
Received at hub2026-10-24Logged at intake by the hub
Passed or failedNot yetDecided by the hub specialist

The verdict

A verdict is passed or failed and nothing in between: no “inconclusive”, no appeal. A failed one says what happens next.

Passed

Hub inspection

by Certa Inspection, Frankfurt hub

Separate from delivery

Requested2026-10-20Paid with the order
Awaiting item2026-10-21Seller sends the item to the hub
Received at hub2026-10-24Logged at intake by the hub
Passed2026-10-26Verdict is final

The hub passed the item.

It goes on to the buyer. Delivery has its own timeline, apart from this inspection.

Failed

Hub inspection

by Certa Inspection, Frankfurt hub

Separate from delivery

Requested2026-10-20Paid with the order
Awaiting item2026-10-21Seller sends the item to the hub
Received at hub2026-10-24Logged at intake by the hub
Failed2026-10-26Verdict is final

The hub did not pass the item.

The verdict is final. What happens next:

A return label is created and the item is sent back.
A case is opened. It records the decision and drives your refund.
The order is cancelled and the seller’s payout stays blocked.

Open the case

Exceptions

The two states outside the straight line. Neither is a verdict, and neither looks like one.

On hold (intake exception)

Hub inspection

by Certa Inspection, Frankfurt hub

Separate from delivery

Requested2026-10-20Paid with the order
Awaiting item2026-10-21Seller sends the item to the hub
Received at hub2026-10-24Logged at intake by the hub
Passed or failedNot yetDecided by the hub specialist

On hold at the hub.

The hub recorded a problem at intake instead of a verdict. A case decides whether the inspection goes on or the order is refunded.

Cancelled

Hub inspection

by Certa Inspection, Frankfurt hub

Separate from delivery

Requested2026-10-20Paid with the order
Awaiting item2026-10-21Seller sends the item to the hub
Received at hubNot yetLogged at intake by the hub
Passed or failedNot yetDecided by the hub specialist

Inspection cancelled.

The order was cancelled, or the parcel to the hub was lost.

Vertical and compact

The same steps stacked, for a narrow column or a phone; the stepper switches to this by itself when its container is narrow. The pill is the one-line form for a list row or an order header.

Vertical

Hub inspection

by Certa Inspection, Frankfurt hub

Separate from delivery

Requested2026-10-20Paid with the order
Awaiting item2026-10-21Seller sends the item to the hub
Received at hub2026-10-24Logged at intake by the hub
Passed or failedNot yetDecided by the hub specialist

Pill

Inspection requestedAwaiting itemReceived at hubInspection passedInspection failed

Properties

Property	Values	What it does
`status`	requested · awaiting · received · passed · failed · held · cancelled	Where the inspection is. Done steps carry a check; the current step is ringed and marked aria-current; a failed or cancelled step carries a cross.
`hub`	text	The hub and its partner are named on every stepper.
`dates`	ISO date per step	Shown for each step that has happened; later steps say “Not yet”.
`orientation`	horizontal · vertical	Horizontal by default; vertical on request and whenever the container is narrower than about 520 px.
`failed → next`	return label · case · cancelled order	A failed verdict never ends on a bare cross: it lists the return label, the case that drives the refund and the blocked payout.

Price breakdown

The buyer’s item, shipping, inspection fee and total in the checkout currency; the seller’s sale price, commission, payment fee and net payout.

Buyer view

At checkout and on the order: item, shipping, the inspection fee when a hub inspection is chosen, and the total in the checkout currency — with the currency actually charged stated. Taxes and duties are not decided yet (Q-024), so the row says so instead of showing a figure.

Checkout in the listing’s currency

Order total

Charged in EUR

Item: €8,450.00
Shipping: €45.00
Inspection feeHub inspection, Frankfurt: €120.00
Taxes and duties: To be confirmed
Total: €8,615.00

Taxes and duties are not final yet and will be confirmed before you pay.

Checkout in another currency

Order total

Charged in USD

ItemConverted from €8,450: ≈ $9,168.25
ShippingConverted from €45: ≈ $48.83
Inspection feeHub inspection, Frankfurt: ≈ $130.20
Taxes and duties: To be confirmed
Total: ≈ $9,347.28

Converted amounts are approximate. The exact amount is shown before you pay.

Taxes and duties are not final yet and will be confirmed before you pay.

Direct delivery, no inspection

Order total

Charged in EUR

Item: €3,900.00
Shipping: €45.00
Taxes and duties: To be confirmed
Total: €3,945.00

Taxes and duties are not final yet and will be confirmed before you pay.

At an accepted offer

Order total

Charged in EUR

Item, at your accepted offerListing price struck through: ~~€3,900.00~~ €3,600.00
Shipping: €45.00
Taxes and duties: To be confirmed
Total: €3,645.00

Taxes and duties are not final yet and will be confirmed before you pay.

Seller view

What a sale pays out: the sale price, the commission and the payment fee taken from it, and the net payout. The payout is shown as held by the payment provider until it is released — never as “escrow”.

After a sale

What you receive

Placeholder rates

Sale price: €8,450.00
CommissionPlaceholder rate: 12 %: −€1,014.00
Payment feePlaceholder rate: 2.9 %: −€245.05
Net payout: €7,190.95

Payment hold: the payment provider holds the buyer’s payment until the payout is released.

Rates and who bears each fee are not decided yet (Q-001).

Compact

The one-line total of a phone checkout bar; the breakdown opens beneath it.

Total€8,615.00Details

Order total

Charged in EUR

Item: €8,450.00
Shipping: €45.00
Inspection feeHub inspection, Frankfurt: €120.00
Taxes and duties: To be confirmed
Total: €8,615.00

Taxes and duties are not final yet and will be confirmed before you pay.

Properties

Property	Values	What it does
`view`	buyer · seller	Which side is reading. The buyer sees item, shipping, inspection fee, taxes and total; the seller sees sale price, commission, payment fee and net.
`currency`	EUR · USD · GBP	The checkout currency, always stated beside the total. Converted lines carry ≈ and a note.
`taxes`	to be confirmed	A row of words, not a number, until Q-024 is answered.
`rates`	placeholder	Commission and payment fee rates are placeholders until Q-001 is answered; the view says so.
`total`	figure	The one large number: tabular figures in the sans face, with a brass rule above it.
`payment hold`	text	The seller view names the payment hold. The word “escrow” is never used.

Offer card

The amount against the listing price, the status with time left, and the actions each side has — accept or decline for the seller, withdraw for the buyer.

Statuses, buyer’s side

The amount always sits against the listing price. A pending offer shows the time left to answer; an accepted one shows the checkout window. The closed statuses say why, in a line, and offer nothing more than the way back to the listing.

Pending

Halden Reserve Automatic 38

To Maison Arden

Offer

€3,600.00

Listing price

€3,900.00

€300 below the listing price (8 %)

Expires in 23 h 14 min

Accepted, checkout window

Accepted

Halden Reserve Automatic 38

To Maison Arden

Offer

€3,600.00

Listing price

€3,900.00

€300 below the listing price (8 %)

Checkout window: 47 h 20 min left

Declined

Halden Reserve Automatic 38

To Maison Arden

Offer

€3,600.00

Listing price

€3,900.00

€300 below the listing price (8 %)

The seller declined this offer.

View listing

Expired

Halden Reserve Automatic 38

To Maison Arden

Offer

€3,600.00

Listing price

€3,900.00

€300 below the listing price (8 %)

No answer within the offer period.

View listing

Withdrawn

Halden Reserve Automatic 38

To Maison Arden

Offer

€3,600.00

Listing price

€3,900.00

€300 below the listing price (8 %)

The buyer withdrew this offer.

View listing

Ended by the system

Ended

Halden Reserve Automatic 38

To Maison Arden

Offer

€3,600.00

Listing price

€3,900.00

€300 below the listing price (8 %)

The listing’s price changed, so the offer ended.

View listing

Seller’s side

The seller can accept or decline a pending offer, and nothing else. There are no counteroffers in the MVP; once accepted, the seller waits for the buyer to check out.

Pending, to answer

Pending

Halden Reserve Automatic 38

From Sofia Marin · Lisbon, Portugal

Offer

€3,600.00

Listing price

€3,900.00

€300 below the listing price (8 %)

Expires in 23 h 14 min

Accepted, waiting

Accepted

Halden Reserve Automatic 38

From Sofia Marin · Lisbon, Portugal

Offer

€3,600.00

Listing price

€3,900.00

€300 below the listing price (8 %)

Checkout window: 47 h 20 min left

Waiting for the buyer to check out.

Declined

Halden Reserve Automatic 38

From Sofia Marin · Lisbon, Portugal

Offer

€3,600.00

Listing price

€3,900.00

€300 below the listing price (8 %)

The seller declined this offer.

View listing

No counteroffers in the MVP: a seller accepts or declines. A buyer has at most one pending offer on a listing.

Row

The one-line form for “my offers” and the seller’s offers list, where the status and the amount are scanned down a column.

Halden Reserve Automatic 38Expires in 23 h 14 min€3,600.00Pending
Halden Reserve Automatic 38Checkout window: 47 h 20 min left€3,600.00Accepted
Halden Reserve Automatic 38Declined by the seller€3,600.00Declined
Halden Reserve Automatic 38No answer in time€3,600.00Expired

Properties

Property	Values	What it does
`status`	pending · accepted · declined · expired · withdrawn · ended	Each status has its own icon and tone. Declined is the only closed status in the danger tone; expired, withdrawn and ended are neutral.
`side`	buyer · seller	Who is reading. Seller: accept and decline on a pending offer. Buyer: withdraw a pending offer, check out an accepted one.
`amount`	figure + listing price	Tabular figures in the sans face, with the gap to the listing price in words and as a bar.
`time`	time left	Pending: time to answer. Accepted: the checkout window. Closed statuses show the reason instead.
`counteroffer`	not in the MVP	There is no counter button; a buyer who wants another price makes a new offer.

Order timeline

Where an order is, from reservation to completion. A hub-inspection order shows two legs, each with its own tracking; cancelled and in dispute end the line.

Direct delivery

Six steps from reservation to completion. A step is done, current or upcoming; the current one carries the carrier’s tracking.

Full

Completed: Reserved 2026-10-24 09:12

Checkout started and the item is held for you.
Completed: Paid 2026-10-24 09:15

Payment received.
Completed: Awaiting shipment 2026-10-24 16:40

The seller sends the item with a prepaid label.
Now: In transit 2026-10-25 14:05

Northline ExpressNLX 4821 0937 55

Left the Munich sorting centre.
Next: Delivered

Shown when the carrier confirms delivery.
Next: Completed

The order closes. You can then rate the seller.

Compact, for an order row

Completed: Reserved 2026-10-24 09:12
Completed: Paid 2026-10-24 09:15
Completed: Awaiting shipment 2026-10-24 16:40
Now: In transit 2026-10-25 14:05
Next: Delivered
Next: Completed

On a narrow screen the compact timeline stacks into the full one.

Hub inspection: two legs

The item goes seller → hub, is inspected, then goes hub → buyer. Each leg has its own tracking, and arrival at the hub is never shown as delivery to the buyer. An exception is flagged on the leg where it happens.

Hub inspection

Completed: Reserved 2026-10-24 09:12
Completed: Paid 2026-10-24 09:15
Completed: Awaiting shipment 2026-10-24 16:40

The seller sends the item with a prepaid label.
Leg 1 · Seller → hub
Completed: In transit 2026-10-25 14:05

Northline ExpressNLX 4821 0937 55

Delivered to the Frankfurt hub.
Completed: At hub 2026-10-26 10:20

Received at the Frankfurt hub.
Completed: Inspected 2026-10-26 15:48

Inspection passed. The onward label was created.
Leg 2 · Hub → buyer
Now: In transit 2026-10-27 08:30

Northline ExpressNLX 4821 1102 07

Picked up at the Frankfurt hub.
Next: Delivered

Shown when the carrier confirms delivery.
Next: Completed

Exception on a leg

Completed: Reserved 2026-10-24 09:12
Completed: Paid 2026-10-24 09:15
Completed: Awaiting shipment 2026-10-24 16:40
Needs attention: In transit 2026-10-26 11:10

Northline ExpressNLX 4821 0937 55

ExceptionDelivery attempt failed. The carrier will try again.
Next: Delivered
Next: Completed

Endings and the demonstration order

Cancelled and in dispute end the line in place of the next step. The pilot’s demonstration order carries the “Unpaid / demo” label wherever it is shown.

Cancelled

Completed: Reserved 2026-10-24 09:12
Completed: Paid 2026-10-24 09:15
Ended: Cancelled 2026-10-24 18:02

The order was cancelled. A paid order is refunded in the currency charged.

In dispute

Completed: Reserved 2026-10-24 09:12
Completed: Paid 2026-10-24 09:15
Completed: In transit 2026-10-25 14:05
Completed: Delivered 2026-10-27 11:30
Needs attention: In dispute 2026-10-27 18:44

A case is open for this order. Updates appear here.

Pilot: demonstration order

Now: ReservedUnpaid / demo 2026-10-27 09:12

Demonstration order: no payment is taken, and no shipping or inspection follows.

Reputation

A seller’s stars and the count behind them, the empty and hidden states, and the 1–5 star input a buyer uses after a completed purchase.

Photo uploader

Up to ten photos per listing. The first is the cover; photos can be reordered or removed, and the uploader shows progress, refused files and the limit.

Empty, and with photos

A drop area to begin. With photos the first is the cover and carries its mark; each photo can be moved earlier or later, or removed, and a photo being sent shows its progress.

Empty

Photos 0 of 10

Drag photos here

or choose them from your device. Up to 10 photos; the first becomes the cover.

Photos, one uploading

Photos 5 of 10

Cover Photo 1
Photo 2
Photo 3
Photo 4
Uploading 62%

The first photo is the cover. Move photos to change it.

Reordering, errors and the limit

A file that is too large or of the wrong type is refused on its own tile and says why, without stopping the others. At ten photos the add control is disabled and the reason is written beside it.

Reordering

Photos 4 of 10

Cover Photo 1
Photo 2
Photo 3

Drag a photo, or use the arrows. Whatever is first becomes the cover.

File refused

Photos 3 of 10

Cover Photo 1
Photo 2
Photo 3
Too large IMG_4471.heic
Wrong type receipt.pdf

2 files weren’t added. Use a JPEG or PNG photo that isn’t too large.

Limit reached

Photos 10 of 10

Cover Photo 1
Photo 2
Photo 3
Photo 4
Photo 5
Photo 6
Photo 7
Photo 8
Photo 9
Photo 10

You’ve reached the limit of 10 photos. Remove one to add another.

Chat notice

What the sender sees when a message with a phone number, email address or link is blocked, a message held under review, and the report and block actions.

Message blocked: what the sender sees

The message stays in the sender’s view, marked as not sent, with the reason and one way forward. The wording is the same whether it held a phone number, an email address or a link.

Phone number

Call me on +44 7700 900123

Not sent — contains a phone number

Message not sent

Contact details can’t be shared in chat — keep the conversation here so your purchase stays protected.

Email address

Write to me at sofia.marin@mail.example

Not sent — contains an email address

Message not sent

Contact details can’t be shared in chat — keep the conversation here so your purchase stays protected.

Link

Let’s talk here: https://chat.example/room/48213

Not sent — contains a link

Message not sent

Contact details can’t be shared in chat — keep the conversation here so your purchase stays protected.

Held, and the conversation’s notice

A message the check cannot decide on is held “under review” and delivered or blocked afterwards. A short notice at the start of a conversation tells both people about the check.

Under review

Could you meet me halfway on the price, say 8,000?

Under review

Your message is being checked

It will be delivered once the check is done. You don’t need to send it again.

Start of a conversation

Keep it in the chat

Messages are checked for phone numbers, email addresses and links before they are delivered.

Report and block

Both actions sit in the conversation’s header; a single message can also be reported. Blocking asks first and says what it does.

Header and a message

Daniel Weber

Corvane Mariner 41 Chronograph

Hello Sofia, yes, the chronograph is still available.

Confirm, and after reporting

Report sent

Thank you. Our team will review the conversation.

Countdown

The time left on a reservation (14:59 at checkout) or on an accepted offer (47 h), with urgent and expired states.

Reservation and offer, in three states

A reservation counts minutes and seconds; an offer counts hours, then minutes. Urgent (proposed: under 5 minutes, under 6 hours) swaps the icon, so the state never rests on color alone. Expired states say what happened.

Reservation (checkout)

Reserved for14:59Reserved for04:12Reservation ended

Offer

Offer ends in47 hOffer ends in42 minOffer expired

In place: checkout and an accepted offer

The same count with room to explain: what runs out and what happens then. The bar shows what is left.

Complete your payment

14:59

If time runs out, the item is released and the order is cancelled.

Less than 5 minutes left

04:12

If time runs out, the item is released and the order is cancelled.

Your offer was accepted

47 h

Check out at €3,600 before the offer expires.

This offer has expired

0 h

It can no longer be used as a price. You can make a new offer.

Currency selector

EUR, USD or GBP: converted prices are marked approximate while browsing, and checkout names the currency the buyer is charged in.

Choosing a currency

Three currencies. Segmented when there is room, a menu in the header or on a phone.

Segmented

Menu, closed

Menu, open

Prices: approximate, then exact

A price in another currency is converted for browsing and marked as approximate. At checkout the buyer picks the currency they are charged in, and sees the exact amount.

Browsing, shown in USD

≈ $9,146 Approximate

Listed at €8,450

Converted prices are approximate. The exact amount is confirmed at checkout.

Checkout

Pay in

EUR €8,450.00 USD $9,146.28 You’ll be charged in this GBP £7,301.65

Total charged $9,146.28

The exchange rate is confirmed now and kept on your order. A refund is made in the currency you were charged.

Seller type

Individual or business, as a tag wherever a seller is named, and the company details a business seller adds to the profile.

The two types

A small tag keeps an individual and a business seller distinguishable wherever a seller is named.

IndividualBusiness

On a seller’s profile

A business seller adds company details to the profile; an individual shows a first name and an initial. Contact and payment details are never on the public profile.

Daniel W.

Munich, Germany

Individual

An individual shows a first name and an initial. No company details are shown.

Maison Arden

Antwerp, Belgium

Business

Company: Maison Arden Horlogerie
Registered in: Antwerp, Belgium

Company details are shown on the public profile. Tax and payment details stay private.

In a line, beside the reputation

Daniel W.Individual4.8(37)

Maison ArdenBusiness4.8(37)