Live · synced on every design lock
The single source of truth for Space Retailing.
Every token, component and screen of the digital retailing widget, mirrored from space-retailing at dealership defaults. Anything a dealer can change is a named variable holding its default.
19Foundations
72Components
10Screens
200Tokens
Open
Foundations
Tokens mirrored from App.module.pcss — dealership defaults, host-overridable where the code allows.Colors5
Bluesblue-1 action, blue-2/3 tinted surfaces, blue-4 deep text
Brand accent--primary-accent is the widget's own blue; #210080 is its pressed/hover partner
Light / dark swapThe gray ramp inverts; blue-1 and red-1 hold. Scope with .dark or [data-theme=dark]
Neutral rampgray-0 is body text, gray-5 borders, gray-6/7 surfaces
Semantic pairsEach state is a foreground/background pair — COMPONENT_STATE_COLOR
Type4
Spacing3
Elevation2
Motion1
Iconography1
Host Contract3
Dealer button contractDealer-supplied: --primary-button-color/-hover/-text-color, --button-border-radius
Dealer input contract--form-input-border-radius 7px, --form-input-placeholder-text-color #c9c9c9
Font & CTA casing--font-family 'Inter' and --form-button-text-transform uppercase are dealer-set
Atoms
The smallest controls, with their full state matrices.Atoms9
Button48/64px, three variants, hover · disabled · loading · pulsing, plus a dealer override
Choice rowsCheckbox, CheckboxMinor, Radio row and the large icon tile
ContainersModule, ModuleCta, FormField, InfoBox, Divider, Disclaimer, Chip and ValueBox
IconButton24 and 32px hit areas; the gray-5 border appears on hover only
Input48px field, floating label over the border, adornments, error and disabled
PillFive COMPONENT_STATE_COLOR pairs, with and without a leading icon, plus shimmer
Progress & loadingFormProgress, Spinner, LinearLoader and Skeleton — every loading affordance in the widget
SelectNative select, floating label, 12px chevron, status icon, error and disabled
SelectorButtonThe workhorse row: default, hover, active, error, incomplete, disabled, image and adornments
Components
Every component family in the widget, grouped the way the code is.Components13
AccountCodeInput, UploadDocument, FileLabel, AppointmentSummary
AtomsButton, IconButton and Pill — see the Atoms group for full state matrices
ChoiceCheckbox, CheckboxMinor, Radio, RadioGroup, RadioLargeButton, SelectorButton
ContainersModule, ModuleCta, FormField, InfoBox, Divider, Disclaimer, Chip, ValueBox
EmbeddedEmbeddedForm, FilterRail, SrpVehicleCard — see the Embedded group for host-page views
FeedbackFormProgress, Spinner, Skeleton
FieldsInput and Select — see the Atoms group for full state matrices
FinancePaymentOptions, PaymentOption, PriceCounter, CreditScoreSlider, PaymentSummary, ProtectedSummary
LayoutContainer, StepContainer, Header — the step frame
ScreensSubmitResult and Menu — see the Screens group for full-tray views
ShellTrayHeader, FooterNavigation, TriggerButton, ChatTriggerPreview
StepsAddressFields and TimeSlotLabel — see the Screens group for full step screens
VDPVdpSection, VdpFulfillment, VdpGallery, VdpPricingBar — see the Embedded group for the full overlay
Shell & embedded
The tray, launcher and header, plus the surfaces that mount inside dealer pages.Shell4
Toast & overlayToast in three types plus dismissed, and the overlay panel stack
Tray headerAll four variants: common, sub-tab, vehicle and custom
LauncherTriggerButton default and unread, plus the chat preview with its dismiss timer
TrayDocked at 488px, the mobile full-width dock, and the large 80vw modal
Embedded3
Embedded formsA form on the dealer's own page: with header, headerless, the Finance case and the deposit CTA
Embedded searchDesktop 240px rail plus grid, the mobile filter sheet, and one card under a dealer override
VDP overlayThe full-screen vehicle detail overlay: desktop with its sticky sidebar, plus the mobile CSS reorder
Screens
Flow screens and templates composed only from the system.Screens9
Account panelsProfile, verification code entry, Documents with uploads, References part-filled
Finance calculatorThe payment matrix, price sticker, desking status and the credit-score slider
Request panelsTrade-in result, appointments upcoming and past, vehicle requests and its empty state
Result & menuSubmitResult in all three modes, plus the signed-in Menu
Payment summaryPaymentSummary with nested rows expanded, and the masked ProtectedSummary
Address stepsAddress US, Address CA, autocomplete and AddressVerification
Identity stepsFullName, EmailOrPhone, CustomerInfo and PersonalInformation at tray width
Scheduling stepsDealershipLocation, Schedule with its time grid, and SalespersonAndMessage
Vehicle pickerThe four modes — Make/Model, Search, VIN, Manual — plus the dealer override
Nothing matches that search.
For engineers
Build it the way it's drawn — every class maps to its file in space-retailing.Engineer handoff
Canonical · prescriptive · deviations · upstream bugs
Retailing code map
Every .rt- class → its .module.pcss source
Host contract
The variables a dealer site can override
Generated from retailing/design-system on every design lock. The spec of record is the tagged release, not this page.