KAVRO design system · v2
The components that run the product, in their real states
Every specimen here is the production component, rendered from seeded demo data or a real demo state. Nothing is a mockup. The rationale is in docs/design_system.md and docs/visual_redesign_final.md.
Principles
- One paper ground
- Groups are made by tone, not boxes: a plate band for the vehicle, a band for the answer. There are no cards.
- Rules carry structure
- A 2 px ink rule starts a section. Hairlines separate rows. Hierarchy reads without a single border around content.
- Width is a role
- Archivo condensed for identity, data and display; normal width for prose. The type does the work color used to.
- One meaning per color
- Copper is KAVRO and the one action. Green is settled, amber needs attention, red blocks, blue is moving.
- Evidence is drawn
- Square marks whose fill encodes strength sit beside every fit claim. Shape, not color alone, carries the state.
- The vehicle is the subject
- Every vehicle-specific page opens on its plate: identity, then each fact that decides fit and how it is known.
- Readiness grows with the Job
- One answer first. The arrival line appears only when parts arrive at different times or a faster plan exists; one shelf is one sentence.
- Doubt gets the room
- An unknown fact expands into the decision, its consequence and the action. Once settled, it compresses to a mark and a source.
- Say it once
- A fact is stated where it's decided. Rows, badges and rails refer to it in a word instead of announcing it again.
- Same system, two densities
- Consumer screens give one decision per band. KAVRO Pro uses rows, a strategy matrix and sticky context.
Where KAVRO breaks its own patterns
Each of these departs from the default component on purpose, because the task in that place needs something else. They're listed so they read as decisions, not inconsistencies.
- Rotor sizes are drawn to scale
- Consumer Job, unresolved
- Everywhere else a part is a small pictogram. Here the decision is a physical size, and the drawing shows the two rotors are 0.8 in. apart: too close to tell by eye, which is why KAVRO asks.
- Options and consequences share one table
- Consumer Job, unresolved
- Each possible size is a row with its build date, ready time and price. The options aren't listed once to choose from and again to explain.
- No arrival line for one shelf
- Job Readiness
- The line is drawn only when there's a sequence to see. Everything on one shelf is a sentence.
- Supplies take one line
- Repair Package
- Cleaner, grease and tools fit any car and don't change the decision, so they drop the fit and in-hand columns that vehicle-specific parts need. On-the-shelf parts say only that; times are shown for parts that move.
- Settled fit goes quiet
- Part rows, fit summary, checkout
- Verified specs read as plain data beside a green mark, and the fit summary becomes one line. Color and space stay with what is still open.
- The VIN gets its own panel
- Fit resolver
- The ways to confirm aren't equals. The VIN takes a minute and is the strongest evidence, so it leads, with where to find it on the car. Measuring and codes are the fallbacks; handing the Job to a shop sits apart.
- The quote is a document
- Customer quote
- It keeps the customer's words, the technician's finding and readings, and the recommended work apart, as a repair order does. The shop's note is signed, not boxed.
- Checkout drops the drawings
- Checkout
- At this point the parts are an order: quantity, item, part number, price, aligned for checking.
- The queue leads with the promise
- KAVRO Pro queue
- The first column is the promise time and how far away it is. A customer in the lobby is marked beside it, and a finished car whose owner is still waiting sorts first, even though its state is Done.
Ground and color
Four grounds, and inks that each carry one meaning. Contrast is calculated in the page from the token values, against each ground. White on the copper action measures 6.0:1.
paper
#f4f3ef
The one ground. Every page sits on it.
field
#fbfaf7
Inside inputs, so they read as places to write
band
#eae8e2
The answer a page exists to give: readiness, order status, totals
plate
#dfddd6
The vehicle, and the shop on a quote link
| Token | Meaning | On paper | On band | On plate |
|---|---|---|---|---|
| ink#151412 | Text, section rules, selected controls | 16.58:1 | 15.03:1 | 13.55:1 |
| ink-2#4a463f | Secondary text and prose | 8.45:1 | 7.65:1 | 6.90:1 |
| ink-3#5f5a52 | Labels, captions, control borders | 6.16:1 | 5.58:1 | 5.03:1 |
| copper#a4471d | KAVRO, and the fill of the one action in view. Never body text. | — | — | — |
| copper-ink#8c3c17 | Copper as text: KAVRO app, the better-plan marker | 6.82:1 | 6.18:1 | 5.57:1 |
| confirm#1d6a44 | Settled: verified fit, approved, ready | 5.92:1 | 5.36:1 | 4.83:1 |
| attend#875300 | Needs attention: an unknown detail, a check, a risk | 5.79:1 | 5.25:1 | 4.73:1 |
| block#a3271f | Can't proceed: incompatible, unavailable, an error | 6.60:1 | 5.98:1 | 5.39:1 |
| motion#2a5677 | In transit or scheduled: parts moving | 7.02:1 | 6.36:1 | 5.73:1 |
| rule-2#a39d92 | Strong hairlines; never text | — | — | — |
KAVROKAVROProKAVROPro
The mark is a hang tag: a price tag for commerce and the repair-order tag a shop hangs on a key. Original artwork. Graphite appears only in KAVRO Pro's utility bar.
Type
One family, Archivo, used at different widths for different jobs. IBM Plex Mono only for codes.
Display
Archivo 600 · 78–82% width · 44–60 px
Today 1:50 PM
Identity
Archivo 600 · 80–85% width · 21–50 px
2021 Ford F-150 · Alternator replacement
Data and labels
Archivo 600 · semi-condensed (87.5%) · 13–19 px
Front brake rotors × 2 · Last to arrive
Prose
Archivo 400 · normal width · 15–17 px
Two front rotor sizes were used on this configuration, so price and ready time are ranges.
Wordmark
Archivo 700 · 118% width · tracked
KAVRO
Codes
IBM Plex Mono · 12.5–13 px
1HGCV1F41KA104218 · COR-RT3124 · K-24817
Marks and pictograms
Evidence marks are KAVRO's fit language. Pictograms are technical line drawings that identify a part type at a glance; they never decorate.
- Filled
- Strong evidence: VIN, measurement, part number, technician
- Half
- Moderate: chosen by hand, a typed date, customer-reported to a shop
- Dashed
- Not known yet. This is where fit is resolved
- Dot
- Fits, with something to confirm at install
- Crossed
- Made for a different configuration
- Dash
- No fitment needed
- Front brake pads
- Front brake rotors
- Brake hardware kit
- Brake parts cleaner
- Brake lubricant
- Caliper piston tool
- Brake fluid
- Alternator
- Serpentine belt
- Battery
- Terminal protector
- Engine oil
- Oil filter
Vehicle plate
Styled after a door-jamb certification label. Identity, then each fact that decides fit, with its evidence. An unknown fact is an attention cell, and the place fit is resolved.
Fit Confidence
Seven states, graded by the weakest evidence used. Only Detail needed, Not compatible and Fit unknown block ordering. Examples are real assessments of seeded parts against seeded vehicles.
| State | Meaning | Live example |
|---|---|---|
| Verified fit | Every detail that decides fit is backed by strong evidence: a VIN, a measurement, an existing part number or a technician. | Verified by VIN |
| Fits selected vehicle | Fits the configuration on record, but part of that configuration was selected or typed in by hand. | Fits based on your selected EX trim and 1.5L I4 engine |
| Detail neededBlocks ordering | More than one part is possible for this configuration. One more detail decides which. Blocks ordering. | Two front rotor sizes are possible |
| Check at install | Fits by catalog, but something about this specific part should be confirmed before installing. | Pulley type varies on this remanufactured unit. Confirm it has a decoupler pulley like the original before installing. |
| Not compatibleBlocks ordering | Made for a different configuration. Never offered as a fit. | Not made for the 2021 F-150 XLT |
| Fit unknownBlocks ordering | KAVRO has no fitment data for this vehicle. It says so instead of guessing. Blocks ordering. | No fitment data for this vehicle |
| No fitment needed | Supplies and tools that work on any vehicle. | No vehicle fitment needed |
Verified fitVerified by VIN
- Trim and engine
- EX · 1.5L I4 turboVINyou added itStrong evidence
- Front rotor diameter
- 12.3 in. (312 mm)VINyou added itStrong evidence
Fits selected vehicleCustomer-reported configuration
Confirm trim and engine at inspection before ordering.
- Trim and engine
- EX · 1.5L I4 turboSelectedby customerModerate evidenceCustomer-reported. Verify before ordering.
- Front rotor diameter
- 12.3 in. (312 mm)Measuredby customerModerate evidenceCustomer-reported. Verify before ordering.
- VINyou added itStrong evidence
- Technicianconfirmed on inspectionStrong evidence
- Measuredby youStrong evidence
- Part numberfrom your old partStrong evidence
- Production dateyou entered itModerate evidence
- Selectedby youModerate evidence
Job Readiness
The answer to “when can I have everything?” Unresolved: the decision beside what each possible size means for time and price, with the rotors drawn to scale. Resolved: one time, then the arrival line when parts arrive at different times, with a faster plan marked in copper.
Repair Package
Grouped by need, with column headings once. Parts that depend on the car get full rows; supplies that fit any car take one line. In hand is spoken only when a part moves. Product lines are chosen; the exact SKU resolves from vehicle facts. Read-only specimen.
Sourcing matrix
KAVRO Pro compares complete strategies as columns. Cells that match the applied strategy are muted; the best value in each outcome row is bold. Read-only specimen from the F-150 scenario.
Job status
The lifecycle stage is stored; planning sub-states are derived from fitment and selections. The same stage reads differently on each surface.
| Stored stage | Consumer | KAVRO Pro |
|---|---|---|
| planning (derived: unresolved) | Needs one detail | Fitment to confirm |
| planning | Ready to order | Sourcing |
| shop_review | Sent to shop | New request |
| inspection | Shop inspecting | Diagnosis |
| awaiting_approval | Quote ready for you | Awaiting approval |
| approved | Approved | Approved |
| declined | Quote declined | Quote declined |
| ordered | Ordered | Parts ordered |
| in_service | Being repaired | In service |
| completed | Completed | Completed |
Quotes and approval
Statuses shared by both surfaces, and the customer projection of a quote: a document that keeps the customer's words, the technician's finding and the recommended work apart, with a decision per line.
DraftSentViewed by customerApprovedPartly approvedDeclined
Controls
11.9 in. doesn't match either expected size.
Excludes remanufactured parts from every strategy.
Panel for “one”.
Feedback
Your details are treated as observations
A technician verifies before quoting.
Confirmed
Every dependent part resolved.
Inventory changed since you chose this plan
Ready time moved from 10:55 AM to 1:50 PM.
A required item can't be sourced
Choose a different part.
Responsive behavior
Phones are composed on their own terms, not shrunk from desktop. Pages never scroll sideways; only the Pro strategy matrix may scroll inside its frame.
| Width | Consumer | KAVRO Pro |
|---|---|---|
| < 640 | Plate as labelled lines; the arrival line becomes a source sequence; bottom tab bar and a sticky Job bar | Utility bar with a menu; queue as ruled rows; the matrix scrolls inside its frame |
| 640–1023 | Plate as a two-tier fact grid; the arrival line is drawn; one column | Queue table drops customer, bay and approval into the vehicle cell; the matrix scrolls at 768 |
| 1024–1279 | Parts list beside a sticky fit and order rail; readiness band full width | Context collapses above the work; the matrix fits |
| ≥ 1280 | Content capped at 80 rem; prose at 60–70 ch | Sticky context column beside the work, capped at 105 rem |
Source: src/components and src/app/globals.css. Documentation: docs/design_system.md.