Plain semiBold text, FIXED thresholds: <2h green-01 · 2–4h orange-01 · >4h red-01. The frozen variant keeps the color it ended on — the timer stops at checkout.
Road-to-sale chips — .sb-rts
GreetTest DriveAppraisalManager T.O.Credit App
Stateful boolean pill, r3 (never round). DONE = transparent bg + 1px green-01 border + green mediumTiny label + 10px check · UNDONE = gray-06 bg, gray-02 label, no icon. Configurable per dealership at launch (2–10 labels) — these five are the defaults; booleans live on the appointment.
Deal sub-row — .sb-dealrow
2025 Land Rover Defender#1324567$26,000CashWorking
2023 BMW 530i#1042881$38,500LeaseFinance
One line: 14px car glyph gray-04 · vehicle title (mediumAction gray-00) + 10px ext-link · stock + ext-link · spring · price gray-00 · payment gray-03 · deal STATUS as colored text — code truth (deal_status_extensions.dart): Fresh orange-01 · Working (desking) INDIGO-01 · Finance blue-01 · Close green-01 · Lost red-01 (plain text, no chips — locked convention).
Big metrics — .sb-bigmetric
Appointments 115%
Showing 35%
Avg Visit 2h 32m5%
Sold 115%
gray-07 surface · r7 · 1px gray-06 · 16px pad. Label = t-tiny gray-03 + 12px info glyph; value = heading5 gray-00; delta = 10px arrow + mediumTiny %. Delta color is SEMANTIC — good = green-01, bad = red-01, regardless of direction (shorter Avg Visit ↓5% is GOOD). Deltas compare vs the rolling 30-day average.
Avatar group — .sb-avgroup
JMTB+2
Overlapping 24px atomic avatars (2 visible, −4px overlap, page-bg separation ring — takes precedence over the RR ring at group scale) + '+N' mediumTiny gray-03 overflow. For multi-assignee showroom rows.
Assignment row — .sb-assignrow (R3a)
Round RobinIntelligently assign
KSKarla SellersSales Rep
gray-07 r5 row: leading 16px round-robin glyph (default) or 16px ATOMIC avatar (named assignee) · title semiBoldParagraph over sub mediumTiny gray-03 · trailing blue-01 Change + angle-down · ×. Used for Sales Person / BDC Agent / Manager assignment on Add-to-Showroom.
Subscriber chips — .sb-subchip (R3a)
TBTaylor B.JMJim M.KSKarla S.
Blue-01 OUTLINE pill: 16px atomic avatar + name (mediumTiny) + blue ×; wraps. Fills the Subscribers field on Add-to-Showroom (trailing angle-down on the field box).
Linked-customer card — .sb-linkedcust (R3a)
Clementine Bartholomew
Updated 50 weeks agoCreated 51 weeks ago
KSKarla Sellers
Emailclem.b@email.com
Phone(555) 281-0934
The attached-customer summary on Add-to-Showroom (State C): name semiBold + red-01 'Detach' top-right · Updated/Created meta stack · assigned-salesperson 16px atomic avatar + name · Email/Phone two-col block. Shares its anatomy (.sb-custrow-top/-meta/-who/-mini) with the rebuilt duplicate rows — there 'Use' (blue-01) ATTACHES in place; the navigate-away rule is retired.