Vallejo Design System
1.1.1 — Interactive Demo
UX Writing
Foundations
Design Philosophy
Every decision in this system passes the Copart Design Vault's design filter: Does this build trust? Does this respect expertise? Does this read at multiple depths? If the answer to any is no, the design is wrong. The Vault defines the "why" — Vallejo defines the "how."
Core Principles
1

Precision

The warmth of competence. Obsessive alignment, spacing, typographic discipline. When members stake five figures on vehicles they may never have touched, visual sloppiness signals institutional carelessness.

Do: Monospace type for VIN, lot numbers, bid amounts. Tabular figures in all data contexts.
Don't: Proportional fonts for prices, causing columns to misalign as numbers change.
2

Institutional Confidence

The quiet authority of a platform that has moved millions of vehicles. We don't hedge, over-explain, or decorate. One primary action per view. Verb-first labels. No exclamation marks. No "Oops."

Do: One "Place Bid" button per view. Secondary actions use secondary variants.
Don't: Three blue buttons competing for attention on the same surface.
3

Vitality

Auctions are alive. Bidding is competitive, time-bound, consequential. The design channels that energy — motion confirms action, status is always visible, urgency is real. But vitality never becomes chaos.

Do: Bid price pulses when outbid. Counter ticks animate. Status is always visible.
Don't: Flashy animations on static content. Urgency where there is none.
Foundations
Color System
Built around #2662D9. No pure red — error states use rose/magenta. Full dark mode support with maintained contrast ratios.
Primary Blue Scale
#F6F9FD
Blue 50
Brand Tint
#EEF3FB
Blue 100
Lightest
#E1ECF9
Blue 200
Light
#B9D6F4
Blue 300
Soft • Sections
#83B3E2
Blue 400
Mid • Accent
#2662D9
Blue 600
Primary • AA Large
#063598
Blue 800
Dark • AAA
#0F2757
Blue 900
Darkest • AAA
Neutral Scale
#FFFFFF
Neutral 50
Page background
#F4F5F6
Neutral 100
Surface
#E2E5E9
Neutral 200
Muted
#C5CCD3
Neutral 300
Border
#7A8691
Neutral 500
Subtle
#46525D
Neutral 700
Body
#2F333C
Neutral 900
Ink • AAA
Semantic Colors
#D7E8D1
Success
Text: #1B6600
#FFF7D1
Warning
Text: #705700
#FCE5E9
Error (Rose)
Text: #8C1D35
#E0EBFF
Info
Text: #0F2757
Secondary Accent — Orange
#FDF7F2
Orange 50
Promo surfaces
#FAEEE5
Orange 100
Hover fills
#F8E2D3
Orange 200
Badge fills, featured
#D86518
Orange 600
Accent primary — CTAs, badges
#933C06
Orange 800
Hover/pressed
#50250B
Orange 900
Text on warm surfaces
Foundations
Logos
Official brand logos for Copart and Wholesale Auction. Each logo has light and dark mode variants. Use the correct variant for the background context.
Copart
Copart Logo
Primary • 126 × 48
Wholesale Auction — Full Logo
Wholesale Auction — Full Logo
Light mode • 200 × 46
Wholesale Auction — Bug (Compact)
Wholesale Auction Bug
Light mode • 96 × 14
Wholesale Auction Bug
Dark mode • 96 × 14
Wholesale Auction — Icon
WA Icon
Light mode • 18 × 18
WA Icon
Dark mode • 18 × 18
Foundations
Icon Library
All icons sourced exclusively from Iconic (iconic.app). Inline SVG format with currentColor inheritance. No emojis or alternative icon sets permitted.
Stroke: 1.5px
ViewBox: 0 0 24 24
Caps: round
currentColor
Navigation
home
search
menu
close
chevron-left
chevron-right
chevron-up
chevron-down
arrow-left
arrow-right
arrow-up
arrow-down
link
export
Actions
check
checkmark
plus
minus
edit
trash
copy
upload
download
share
send
refresh
star
heart
bookmark
new
Auction & Commerce
car
gavel
credit-card
dollar
tag
clock
calendar
location
pin
filter
sort-asc
sort-desc
grid
eye
eye-off
barcode
building-store
cart
add credit card
package
receipt
shipment
shopping-cart
wallet
Vehicles & Shipping
car-battery
car-dashboard
car-door
car-engine
speed-gauge
steering-wheel
trailer
truck
shipment-up
shipment-down
User & Account
user
user-edit
users
settings
wrench
sliders
bell
mail
phone
lock
lock-unlocked
shield
shield-tick
keys
flag-priority
voice-id
log-out
Media & Files
camera
photo
video
file
file-text
folder
paperclip
play
pause
speaker
speaker-high
speaker-mute
hd
Feedback & Status
information
warning
close-circle
check-circle
alert
target
activity
chart
AI & Intelligence
ai
sparkles
pen-sparkles
doc-sparkle
Device & System
smartphone
monitor
sun
moon
globe
message
annotation
wifi
battery
maximize
minimize
pin-tack
sidebar
cards
Foundations
Typography
Inter is the primary typeface. JetBrains Mono for VINs, lot numbers, and financial data. 9 weights from 100 to 900.
Font Families
Primary var(--font-primary)
Inter
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%&*()?.,:;
Regular, Medium, Semibold, Bold, Extrabold, Black
UI text, headings, body copy, buttons, labels, navigation
Monospace var(--font-mono)
JetBrains Mono
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%&*()?.,:;
Regular, Medium, Bold
VINs, lot numbers, currency, bid amounts, timestamps, code
Type Scale
Display LargeFind Your Vehicle64px / 900
Display SmallAuction Results48px / 800
Headline H1Vehicle Inventory40px / 800
Title 1 H2Current Bids28px / 700
Title 2 H3Damage Report22px / 700
Title 3 H4Seller Notes18px / 600
Body LargeBrowse thousands of vehicles available for auction every day.18px / 400
BodyThis 2019 Toyota Camry SE has minor front-end damage and runs.16px / 400
Body EmphasisCurrent bid: $4,50016px / 500
CalloutDeposit covers bids up to $2,00016px / 500
SubheadlineAUCTION SCHEDULE14px / 600
FootnoteLast updated 2 hours ago13px / 400
Caption 137,482 miles • Clean title12px / 500
Caption 2Ends in 2h 14m11px / 500
OverlineFEATURED VEHICLE11px / 700 / UC
Monospace (Data)
VIN1HGBH41JXMN109186JetBrains Mono
Lot Number#48291076JetBrains Mono
Currency$12,450.00JetBrains Mono
Font Weight Ramp
100 Thin — Decorative hero text only 200 Extra Light — Large display text 300 Light — Display headings 400 Regular — Body text, inputs 500 Medium — Emphasized body, labels 600 Semi Bold — Subheadings, nav 700 Bold — Section headers, buttons 800 Extra Bold — Page titles 900 Black — Hero, stat numbers
Foundations
Spacing System
8px base unit with 4px half-step. Every spacing value has a specific purpose — use the right token for the right context.
Scale & Usage
space-14px
Icon-to-text gap, pill padding, badge internal
space-28px
Icon-to-label gap, compact list padding, input padding-y
space-312px
Form field padding-x, small card padding, button padding-y (sm)
space-416px
Default component padding, gap between related elements
space-520px
List item padding-y, card padding (compact)
space-624px
Default card padding, sibling component gap, desktop gutters
space-832px
Content section gaps, sidebar padding, card group margins
space-1040px
Major section separators, dashboard widget gaps
space-1248px
Page section vertical margins, hero-to-content transition
space-1664px
Large page section breaks, footer top margin
space-2080px
Desktop outer margins, major layout offsets
space-2496px
Hero section padding-top, above-fold breathing room
space-32128px
Full-page section spacing (marketing pages only)
Live Examples
Tight: Icon + Label 4–8px

Use space-1 (4px) and space-2 (8px) for gaps between icons and text, badge internals, and inline elements.

space-1 (4px) — badge internal padding
Clean Title
space-2 (8px) — icon-to-label gap in button
The 8px gap between icon and text is the gap property on the button flex container.
Default: Component Padding 12–16px

Use space-3 (12px) for input field padding-x and space-4 (16px) for default component padding.

space-3 (12px) — input horizontal padding
space-4 (16px) — card body padding
Card content area
16px padding on all sides
Related Items 8–12px

Use space-2 (8px) between a label and its input, or space-3 (12px) between a title and its description.

space-2 (8px) — label to input
8px
space-3 (12px) — title to subtitle
2019 Toyota Camry SE
12px
Front End Damage • Runs & Drives
Sibling Components 16–24px

Use space-4 (16px) between form fields and space-6 (24px) between cards in a grid.

space-4 (16px) — between form fields
First Name
16px
Last Name
16px
Email Address
space-6 (24px) — gap between cards
Card
Card
Content Sections 32–40px

Use space-8 (32px) between form groups and space-10 (40px) between major dashboard widgets.

space-8 (32px) — between content sections
Account Details Section
32px
Payment Methods Section
40px space-10 for larger gaps
Security Settings Section
Page Sections 48–128px

Use space-12 (48px) to space-16 (64px) between major page sections. Space-24+ reserved for hero areas and marketing pages.

Hero Section
48px — space-12
Featured Vehicles
64px — space-16
How It Works
Foundations
Layout Grid
12-column responsive grid. Desktop: 1440px / 24px gutters / 80px margins. Tablet: 768px / 8 cols. Mobile: 375px / 4 cols.
12-Column Grid
1
2
3
4
5
6
7
8
9
10
11
12
Common Layouts
Full Width (12)
Half (6)
Half (6)
Third (4)
Third (4)
Third (4)
Sidebar (3)
Content (9)
3
3
3
3
Components
Buttons
6 variants, 5 sizes. One Primary per view. CTA Orange for registration & urgency. No pure red.
Variants (Medium Size)
Sizes
With Icons
Pairing Rules
DO
Use tertiary for Close/Cancel beside a primary action. The primary button should be the only visually prominent target.
DON'T
Outlined buttons compete with the primary for attention. Two equally weighted buttons create decision friction — especially in financial flows.
Components
Input Components
Text fields, dropdowns, toggles, checkboxes, radios, and sliders. All with visible focus states and ARIA support.
Text Fields
Try "2019 Toyota Camry" or lot #48291076
Minimum bid is $1,200 for this vehicle
Toggles
Email notifications
SMS alerts for bids
Auto-bid enabled
Checkboxes
Salvage title
Clean title
Rebuilt title
Dropdown
Select a make...
Toyota
Honda
Ford
Chevrolet
BMW
Radio Buttons
Newest first
Price: low to high
Ending soonest
Slider
$12,000
Range Slider
25,000 mi 120,000 mi
0 mi 200,000 mi
Components
Feedback
Alerts, toasts, modals, progress indicators, skeleton screens, and step indicators.
Alerts
Auction schedule updated
Tomorrow's auction has been moved to 10:00 AM ET.
Bid placed successfully
Your bid of $4,500 on Lot #48291076 has been recorded.
Deposit limit reached
Your deposit covers bids up to $2,000. Increase your deposit to bid higher.
Bid could not be submitted
The auction has ended. Please check other available vehicles.
Toasts
Vehicle added to Watchlist
Payment confirmed
Connection lost. Retry
Modal
Shelf / Drawer
Vehicle Quick View
Vehicle Image
2019 Toyota Camry SE
Lot #48291076 • Run Date: Mar 15, 2025
Current Bid
$4,500
Est. Value
$12,800
Odometer
47,231 mi
Primary Damage
Front End
Clean Title Runs & Drives Keys: Yes
Filters
Vehicle Type
Year Range
2015
to
2024
Damage Type
Front End Rear End Side Hail Water/Flood Mechanical
Title Type
Search
Search by lot #, VIN, make, model...
Recent Searches
2019 Toyota Camry
Honda Civic 2020-2023
Lot #48291076
Popular Categories
SUVs Trucks Electric Vehicles Sedans Luxury Clean Title Only
Select Payment
Choose a payment method for your bid deposit.
VISA
Visa ending in 4242
Expires 08/27
MC
Mastercard ending in 8371
Expires 12/26
Add new payment method
Progress Indicators
Uploading documents... 67%
24px
48px
Step Indicator
Account
Verify
3
Payment
4
Confirm
Skeleton Screens
Components
Data Display
Cards, tables, lists, stat/KPI cards. Orange accent highlights urgency, featured content, and time-sensitive actions.
Stat / KPI Cards
Active Bids
12
3 this week
Watching
47
8 new
Ending Today
8
Bid before close
Total Spent
$68K
12%
Vehicle Cards
Live
2019 Toyota Camry SE
Front End Damage • Runs & Drives
37,482 miClean TitleCA - San Diego
Current Bid
$4,500
Featured
2021 Ford F-150 XLT
Rear End Damage • Enhanced Vehicle
18,291 miSalvageTX - Dallas
Starting Bid
$8,200
Buy Now
2020 Honda Civic LX
Minor Dents • Runs & Drives
52,104 miClean TitleFL - Miami
Buy Now Price
$11,750
Data Table
Lot #VehicleStatusDamageLocationCurrent Bid
#482910762019 Toyota Camry SE Ending SoonFront EndCA - San Diego$4,500
#518372942021 Ford F-150 XLT Ending SoonRear EndTX - Dallas$8,200
#392748152020 Honda Civic LX ActiveMinor DentsFL - Miami$11,750
#629481732018 BMW 330i xDrive ActiveWater/FloodNJ - Newark$6,800
List
⏱
Auction ending — Lot #48291076
2019 Toyota Camry SE • Closes in 12 min
Ending soon
JD
Bid placed on Lot #48291076
2019 Toyota Camry SE • $4,500
2m ago
CP
Vehicle won — Lot #31726489
2020 Honda Accord EX • $7,200
1h ago
SB
Payment received
Invoice #INV-2026-0847 • $7,650.00
3h ago
Components
Media
Image containers, video player, and avatar system. Consistent border radius and aspect ratios.
Image Carousel (4:3)
Vehicle Hero Image
Video Player
1:24 / 4:02
Avatars
J
XS 24
CP
SM 32
SB
MD 40
RK
LG 56
AM
XL 80
Image Container (4:3)
Front Left
Front Right
Rear
Interior
Patterns
Patterns & Empty States
Reusable page patterns including empty states, search filters, and complete flow examples.
Empty States
No vehicles match your filters
Try adjusting your search criteria or clearing some filters to see more results.
Your watchlist is empty
Save vehicles you're interested in to keep track of upcoming auctions.
Active Filter Chips
Toyota × Clean Title × $0 - $15,000 × CA - San Diego × Clear all
Border Radius Scale
4px sm
6px md
8px lg
12px xl
16px 2xl
pill
full
Shadow Elevation Scale
XS
SM
MD
LG
XL
Focus
Patterns
Interactive Patterns
Filter chips, status tokens, tooltips, accordions, switchers, and pagination. Building blocks for search, data display, and content organization.
Filter Chips with Dropdown
Make: Toyota ×
Year
2020–2024
2015–2019
2010–2014
Older than 2010
Damage Type
Front End
Rear End
Side
Water/Flood
Hail
Clean Title ×
Location
CA - San Diego
TX - Dallas
FL - Miami
NJ - Newark
Clear all
Status Tokens
Active Pending Review Rejected In Transit Draft Live Auction
Runs & Drives Clean Title Salvage Title Non-Runner Awaiting Inspection Ending Soon
Icon variant (no dot)
Approved Needs Attention Failed Info Paused Ending Soon
Tooltips
VIN: 1HGBH41JXMN109186
Estimated value: $12,800
37,482 miles
Auction closes Mar 15 at 10:00 AM ET
Reserve Price
Minimum price the seller will accept
Buyer Premium
Additional fee charged to the winning bidder
Accordion (FAQ)
Create an account on Copart, verify your identity, and submit a refundable deposit. Once approved, you can bid on any vehicle in our inventory. The registration process takes 1–2 business days.
You'll receive a confirmation email with payment instructions. Full payment is due within 3 business days. Once payment clears, you can arrange vehicle pickup or delivery through our logistics partners.
Yes, in-person inspections are available at most Copart locations during business hours. You can also view detailed photos, damage reports, and vehicle history through the online listing.
We accept wire transfers, cashier's checks, and money orders. Credit cards are accepted for deposits and fees up to $7,500. All payments must be in U.S. dollars.
Yes, a buyer's premium is applied to all purchases. The premium varies based on your membership level and the final sale price. Premium members enjoy reduced rates. See our fee schedule for details.
Switcher
Billing cycle
Monthly
Yearly Save 20%
Premium Membership
$49/mo
View mode
Grid
List
Tile
Table Pagination
Lot #VehicleStatusLocationCurrent Bid
#482910762019 Toyota Camry SEEnding SoonCA - San Diego$4,500
#518372942021 Ford F-150 XLTActiveTX - Dallas$8,200
#392748152020 Honda Civic LXActiveFL - Miami$11,750
#629481732018 BMW 330i xDriveUpcomingNJ - Newark$6,800
#715492832022 Tesla Model 3PendingWA - Seattle$19,400
Rows per page:
1–5 of 248 vehicles
Motion
Animation System
Every animation serves a purpose: confirm actions, guide attention, or communicate state changes. Respect prefers-reduced-motion — disable non-essential animation when the member requests it.
Motion Tokens
Duration
dur-fast
100msCheckbox, radio, color change
dur-normal
200msHover, focus, button press
dur-moderate
300msToggle, dropdown, card lift
dur-slow
400msModal open, page transition
Easing Curves
ease-outElements entering — decelerates to rest
ease-inElements leaving — accelerates away
ease-springSlight overshoot — toggles, delight moments
linearSpinners, progress bars — continuous motion
Micro-Interactions
Subtle feedback on every interactive element. These run on hover, press, and state change.
Card Hover Lift
Cards rise 2px with increased shadow on hover, conveying interactivity.
Hover me
translateY(-2px)
transform 200ms ease, box-shadow 200ms ease
Button Press
Buttons scale down 2% on press for tactile feedback.
active: scale(0.98) 100ms ease
Toggle Slide
Spring-curve slide with background color fade. Haptic on mobile.
Try it
300ms cubic-bezier(0.175, 0.885, 0.32, 1.275)
Delight Animations
Celebratory moments that reinforce positive actions. These go beyond functional feedback to create emotional connection.
Watchlist Plus → Heart
Plus icon crossfades into a red filled heart with spring overshoot. Button shifts to dark solid active state. Reverts on removal.
300ms crossfade + 600ms spring pop — plus rotates out, heart scales in — fill #E53E3E
Success Checkmark Draw
SVG checkmark draws itself after a successful action — bid placed, payment confirmed.
circle 400ms + check 300ms (250ms delay)
Bid Price Pulse
When a competing bid is placed, the price pulses with brand blue to draw attention to the change.
$4,500
600ms spring — scale 1 → 1.08 → 1 → 1.04 → 1
Counter Tick
Stat numbers roll when values update — the old number slides out, new slides in.
Active Bids
12
400ms ease — translateY slide + opacity
Toast Notification
Slides up from bottom with gentle fade. Auto-dismisses after 5s or on swipe.
enter 250ms ease-out, exit 200ms ease-in
Loading Dots
Pulsing dots for inline loading states — auction connecting, bid processing.
1.4s infinite, 0.16s stagger between dots
State Transitions
Full component transitions for enter/exit, open/close, and loading states.
ComponentEnter / OpenExit / CloseSpec
ModalBackdrop fade 0→0.5, panel scale(0.95→1) + fadeReverse — panel first, then backdrop200ms ease-out / 150ms ease-in
Bottom SheetSlide up from bottom + backdrop fadeSwipe down or fade out400ms cubic-bezier(0.32,0.72,0,1)
Dropdown MenuFade + translateY(-4px→0)Fade out150ms ease-out / 100ms ease-in
Alert BannerSlide down + fade + height expandFade + height collapse200ms ease-out / 200ms ease-in
ToasttranslateY(16px→0) + fadetranslateY(0→8px) + fade250ms ease-out / 200ms ease-in
Card Grid LoadStaggered fade + translateY(12px→0)N/A (instant)300ms ease-out, 50ms stagger
Skeleton → ContentCross-fade shimmer → real contentN/A200ms ease-out
Page NavigationNew page slides in from rightCurrent page slides out left300ms ease (mobile nav stack)
Tab SwitchContent cross-fades, underline slidesCross-fade out200ms ease
When to Animate
Do Animate
Action confirmation — Heart fill, checkmark draw, success toast
State changes — Toggle slide, dropdown open, modal enter
Attention direction — Bid price pulse, badge count update, new item appear
Loading feedback — Skeleton shimmer, spinner, progress bar fill
Spatial context — Page transitions, tab switches, card grid stagger
Don't Animate
Decoration — Bouncing logos, floating elements, ambient motion
Delays — Never make users wait for animation to complete before acting
Scrolljacking — Don't override native scroll or parallax on content pages
Repetitive loops — No infinite animations except spinners and skeleton
Form interactions — Typing, selecting, tabbing between fields must be instant
Platform
Mobile Platform
A complete mobile adaptation for iOS, Android, and mobile web. Same brand, optimized for touch — 44px minimum touch targets, 17px body text, bottom sheet modals, swipe gestures. Toggle the Mobile button above to see all components adapt.
Desktop vs. Mobile Comparison
PropertyDesktopMobile
Body text16px / 40017px / 400
Button (MD)40px tall, 16px padding44px tall, 20px padding
Input height44px48px
Card radius12px16px
Toggle track48 × 28px51 × 31px (iOS)
Modal styleCentered panel, 16px radiusBottom sheet, 20px top radius
Shelf styleSide panel, right/left, no radiusBottom sheet, 4 heights (40/60/85/100vh)
Touch target40px (mouse)44px min, 48px preferred
Page margin80px16px
NavigationHeader + sidebarNav stack
Section gap48–64px24px
Mobile Type Scale
Based on iOS HIG type system with Inter. Key difference: 17px body (not 16px) — optimal for arm's-length reading.
Large TitleVehicles34px / 700
Title 1Search Results28px / 700
Title 2Current Bids22px / 700
Title 3Damage Report20px / 600
Headline2019 Toyota Camry SE17px / 600
BodyBrowse vehicles available for auction today.17px / 400
CalloutDeposit covers bids up to $2,00016px / 400
SubheadlineFront End Damage • Runs & Drives15px / 400
FootnoteLast updated 2 hours ago13px / 400
Caption 137,482 miles • Clean title12px / 400
Caption 2Ends in 2h 14m11px / 400
Mobile Gestures & Patterns
Pull-to-Refresh
64px pull threshold. Spinner appears below nav bar. Haptic feedback on trigger.
Swipe Actions
80px reveal. Left = destructive (remove). Right = positive (archive). Full swipe to execute.
Bottom Sheet
Replaces modals and shelves. Drag handle, 90vh max. Swipe down 150px to dismiss.
Mobile Shelf Sizes
On mobile, all desktop shelves (right/left) become bottom sheets. Choose the smallest height that fits your content. Click each button to see the shelf size in action.
Quick Actions
Filters
Vehicle Type
Damage Type
Front End Rear End Side Hail Water/Flood
Vehicle Detail
Vehicle Image
2019 Toyota Camry SE
Lot #48291076 • Run Date: Mar 15, 2025
Current Bid
$4,500
Est. Value
$12,800
Odometer
47,231 mi
Primary Damage
Front End
Clean Title Runs & Drives Keys: Yes
Search
Search by lot #, VIN, make, model...
Recent Searches
2019 Toyota Camry
Honda Civic 2020-2023
Lot #48291076
Popular Categories
SUVs Trucks EVs Sedans Luxury
Touch Target Requirements
40
Desktop
44
Mobile Min
48
Preferred
8px gap between adjacent touch targets. Even visually small elements (icons, close buttons) must have a 44×44px hit area via padding expansion.