Design System & Style Guide

The visual language for transend™ — the intelligent auto parts ordering platform by Transtar / NexaMotion Group. Built for professional repair shops who need precision, speed, and clarity. Hard edges. No fluff.

00

Design Principles

The 7 rules that define the transend™ visual language. Every component, page, and feature must follow these.

Hard Edges

Use border-radius: 0 on structural UI surfaces (buttons, cards, inputs, tables, dialogs, containers, badges). Rounded shapes are reserved for dots, avatars, and toggle thumbs.

Red is for Action

Primary red (#D7252C) is reserved for CTAs, active states, and primary links. Never use it decoratively or on passive elements. Never use blue for links.

Uppercase Display

Headings and labels use font-display (Barlow Condensed) in uppercase. Body text is never uppercase — use font-body (Barlow) in sentence case.

Warm, Not Cool

Neutrals are warm charcoal (hue 40–60), never blue-gray. The darkest black is #141413, not #000.

Mono for Data

Part numbers, prices, codes, dates, and tabular data always use font-mono (IBM Plex Mono). Never use proportional fonts for data.

Density Over Whitespace

Product and workflow surfaces should stay compact and information-dense. Marketing pages can open spacing when needed, but hierarchy should remain tight and purposeful.

Dark Mode is First-Class

Every component must work in both light and dark mode. Use CSS variables for colors, never hardcoded hex values in markup.

01

Color System

ShadCN semantic tokens mapped to transend™ brand. Primary extracted from logo SVG #D7252C. Warm charcoal neutrals.

Usage Guidelines
DO:Use primary for CTAs, active nav, and primary links (red + underline)
DON'T:Use red for decoration, backgrounds, or passive text
DO:Use destructive for error states and delete actions
DON'T:Use destructive and primary interchangeably — they serve different roles
DO:Use td-red-* scale for tinting (backgrounds, badges) — never for text on white
DON'T:Introduce blue-gray, cool gray, or pure black/white — always use warm charcoal tones
DO:Primary links: text-primary underline. Secondary links: text-foreground underline or text-muted-foreground underline
DON'T:Use blue for links — ever. Blue is only for info alert backgrounds and badges

ShadCN Semantic Tokens

Primary
--primary
Secondary
--secondary
Muted
--muted
Accent
--accent
Destructive
--destructive
Background
--background

Primary — transend Red

700
#9E1520
600
#B91C26
Brand ★
#D7252C
400
#E84248
300
#F06E72
200
#F9B4B6
100
#FDE8E9
50
#FFF5F5

Warm Charcoal Neutrals

#141413
#2D2D2B
#3A3A37
#4A4A47
#676866
#8A8A87
#D1D1CE
#E8E8E6
#F4F4F2

Semantic Accents

Success
In Stock · #0F9D43
Warning
Low Stock · #D97706
Error
Out of Stock · #D7252C
Info
Alerts Only · #2563EB
02

Typography

Barlow Condensed (700/600 weight) for all-caps display type. Barlow for body. IBM Plex Mono for data and part numbers.

Usage Guidelines
DO:Use Display (Condensed) for page titles, section headers, labels — always uppercase
DON'T:Use body font (Barlow) in uppercase — it looks wrong at small sizes
DO:Use Mono for part numbers (K77900AX), prices, VINs, and order IDs
DON'T:Use Display font for body paragraphs or descriptions
DO:Use the type scale: XL (3.2rem) → LG (2.4rem) → MD (1.7rem) → Heading (1.35rem) → Body (0.938rem)
DON'T:Invent new font sizes — stick to the established scale
Light Mode
Display XL · Condensed 700 · 4rem
Find Your Parts
Display LG · Condensed 700 · 3rem
Rebuild Kits
Display MD · Condensed 600 · 2rem
Torque Converters
Heading · Barlow 700 · 1.5rem
Browse by Vehicle or Part Number
Body · Barlow 400 · 0.938rem
Filter products by brand, price, and availability. Same-day or next-day delivery.
Mono · Plex Mono 500 · 0.82rem
D124420A · 6F50/55 Solenoid Body
Dark Mode
Display XL
Shop 680K+ SKUs
Display LG
Brake & Suspension
Heading
Search by VIN, Plate, or YMME
Body
Transend makes sourcing OE and aftermarket parts easier than ever.
Mono
K77900AX · 4L60E Master Kit
03

Buttons

ShadCN button variants: default, secondary, outline, ghost, destructive. All rounded-none.

Usage Guidelines
DO:Use one dominant red CTA per action group (Add to Cart, Checkout, Save, etc.)
DON'T:Place equal-priority primary buttons in the same action row — use secondary/outline for alternatives
DO:Use outline for filters and toggles, ghost for navigation-style links
DON'T:Use red for "Cancel" — use outline. Red = primary action or delete only
DO:Size sm for tables/cards, default for forms, lg for hero sections
DON'T:Use destructive variant for anything other than delete/remove actions
Light Background
variant="default"
variant="secondary"
variant="outline"
variant="ghost"
variant="destructive" / disabled
Dark Background
Primary actions
Secondary / outline
Ghost
Sizes: sm / default / lg
04

Form Elements

ShadCN Input/Select/Checkbox patterns. Square fields with brand red focus ring.

Usage Guidelines
DO:Labels in uppercase display font (font-display font-bold text-[0.7rem] uppercase)
DON'T:Use body font or sentence case for form labels
DO:Show errors with red border + tinted background + red helper text below the field
DON'T:Use toast/alert for inline validation — show errors at the field level
DO:Space fields with space-y-5 within a form group
DON'T:Mix rounded and square field styles — all inputs are rounded-none
Light Inputs

Enter OE or aftermarket part number

Quantity must be at least 1

Dark Inputs
05

Product Cards

ShadCN Card component with transend product data. Sharp edges, prominent pricing, quick-add CTA.

Usage Guidelines
DO:Use product cards for grid layouts (3-col on desktop) with consistent structure
DON'T:Mix product cards with list rows in the same view — pick one format
DO:Always show stock status with colored dot + label badge
DON'T:Show "Add to Cart" for out-of-stock items — use "Notify Me" with secondary style
DO:Part numbers in font-mono, prices in font-display font-semibold text-xl
DON'T:Add custom hover effects like lifts or glows — use standard shadcn hover:bg-muted/50 patterns
Product Image
New
Transmaxx
4L60E Transmission Rebuild Kit — Master
K77900AX
$189.95 In Stock
Product Image
Transtar
6F50/55 Solenoid Body Assembly
D124420A
$342.00 Low Stock
Product Image
Sale
ProMax
Front Brake Pad Set — Ceramic
P44821E
$47.99$62.99
Out
06

Badges & Tags

ShadCN Badge variants mapped to transend semantic colors.

Usage Guidelines
DO:Use colored dot + label for stock status badges (In Stock, Low Stock, Out)
DON'T:Use dot indicators for non-stock badges — dots mean inventory status only
DO:Use solid fill badges for product attributes (OE Match, Premium, Clearance)
DON'T:Mix badge styles within the same context — be consistent per use case
DO:Use filter tags for toggling categories — primary fill = active, outline = inactive
DON'T:Use badges as buttons — badges are informational, filter tags are interactive

Status Badges

Default Secondary Destructive Outline

Product Badges

In Stock Low Stock Out of Stock OE Match Premium Clearance

Filter Tags (Toggle)

07

Alerts

ShadCN Alert component with left-border accent and transend semantic colors.

Usage Guidelines
DO:Info (blue) for vehicle match / compatibility confirmations
DON'T:Use info alerts for errors or warnings — color carries meaning
DO:Warning (amber) for core charges, restocking fees, and non-blocking issues
DON'T:Stack more than 2 alerts — consolidate messages or use a different pattern
DO:Error (red) only for payment failures, system errors, and blocking issues
DON'T:Omit the icon — every alert must have a semantic icon for accessibility
08

Data Tables

ShadCN Table with dense part data. Mono part numbers, red hover accent.

Usage Guidelines
DO:Align text columns left, numeric columns (price, qty) right
DON'T:Center-align columns — left or right only for scannability
DO:Part numbers always in font-mono font-semibold
DON'T:Use proportional font for part numbers, order IDs, or prices
DO:Include subtle red-tinted hover on rows for interactivity
DON'T:Use zebra striping — use hover highlight instead
Part # Description Brand Status Price
D124420A 6F50/55 Solenoid Body Transtar In Stock $342.00
K77900AX 4L60E Master Rebuild Kit Transmaxx In Stock $189.95
B95721C Torque Converter — Reman RECON Low Stock $478.50
P44821E Front Ceramic Brake Pads ProMax Out $47.99
10

Grid & Layout

Content widths, spacing scale, and column patterns used throughout transend.

Usage Guidelines
DO:Use max-w-[1200px] mx-auto for all content sections
DON'T:Let content go full-bleed without a max-width constraint
DO:Use gap-4 for card grids, gap-6 for section-level layouts
DON'T:Mix gap and margin for grid spacing — use gap exclusively

Max Content Widths

Content Sections
Colors, Typography, Buttons, Forms, etc.
max-w-[1200px]
Dashboard Layouts
Full application layouts with sidebar
max-w-[1400px]
Dialogs
Modal overlays for focused tasks
max-w-[420px]
Alerts / Narrow Content
Single-column notification blocks
max-w-[640px]

Spacing Scale

gap-2
8px
gap-3
12px
gap-4
16px
gap-5
20px
gap-6
24px
gap-8
32px
gap-10
40px

Column Patterns

2-col · grid grid-cols-1 lg:grid-cols-2 gap-6
3-col · grid grid-cols-1 md:grid-cols-3 gap-4
4-col · grid grid-cols-2 md:grid-cols-4 gap-4
Sidebar + content · grid grid-cols-1 xl:grid-cols-[1fr_320px] gap-4
11

Icons

Inline SVG icon system using Lucide-style stroke icons. Consistent attributes, three size tiers, semantic color mapping.

Usage Guidelines
DO:Use inline SVG with standard Lucide attributes: stroke-width="2" stroke-linecap="round"
DON'T:Use icon fonts, image files, or filled icon styles
DO:Match icon color to surrounding text: text-muted-foreground for passive, text-primary for active
DON'T:Use colored icons in contexts where surrounding text is neutral

Standard SVG Attributes

<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">

Size Scale

Small
w-3.5 h-3.5
Badges, compact menu items
Default
w-4 h-4
Buttons, nav, sidebar, inputs
Large
w-5 h-5
Alerts, hero sections, empty states

Icons Used in This System

Search
Cart
User
File
Bell
Bolt
Star
Check
Close
Chevron
Info
Warning
Trash
Edit
Copy
Download
Share
Settings
Grid
Dollar
Moon
Sun
X-Circle
Success

Product Category Icons

Filled SVG icons from transend.us product categories. Use fill="currentColor" and size with w-5 h-5. These are not Lucide stroke icons — they use solid fills at a 20x20 viewBox.

Accessories
Air & Fuel
Air Conditioning
Belts & Cooling
Body
Brake
Complete Engines
Complete Trans.
Differential
Driveline & Axles
Electric Vehicle
Elec. Charging
Elec. Lighting
Emission Control
Engine
Entertainment
Equip. & Tools
Exhaust
Hardware
Household
HVAC
Ignition
Multifunction
Oil & Fluids
Steering
Suspension
Tire & Wheel
Transfer Case
Transmission
Wiper & Washer
12

Components

Search hero, stat cards, and application patterns.

Usage Guidelines
DO:Search hero: dark bg, noise overlay, prominent input with red CTA
DON'T:Place more than one search hero on a page
DO:Stat cards: red accent bar at top, display font for the number, mono for trend
DON'T:Use stat cards without the top accent bar — it anchors the pattern visually

Find the Right Parts, Fast

Search 680,000+ SKUs across transmission, driveline, brake, and suspension.

$12,847
Monthly Orders
↑ 12.3%
47
Open Orders
↓ 3 from yesterday
8,420
Reward Points
↑ 580 this week
98.2%
Order Accuracy
↑ 0.4%
13

Dialog & Sheet

ShadCN Dialog and Sheet (side panel). Square corners, brand-red accent, overlay backdrop blur.

Usage Guidelines
DO:Dialog for focused tasks: quick order, confirmations, settings forms (max-w 420px)
DON'T:Use a dialog for content that needs to stay visible while interacting with the page
DO:Sheet for persistent panels: cart, filters, detail sidebar (w-280px from right)
DON'T:Use a sheet for confirmations or alerts — those belong in dialogs
DO:Footer: Cancel (outline) on left, primary action (red) on right
DON'T:Put the destructive action as the primary button — use it only for explicit delete flows

Dialog

Sheet (Cart Panel)

Cart (3)

Review before checkout

4L60E Master Kit
K77900AX
$189.95×1
Solenoid Body Assy
D124420A
$342.00×1
Filter Kit
F20384D
$24.99×2
Subtotal$581.93
ShippingFREE
Total$581.93
14

Tabs & Accordion

ShadCN Tabs with underline indicator, and collapsible Accordion panels. Pure CSS, no JS.

Usage Guidelines
DO:Underline tabs for product detail views (Overview, Specs, Fitment, Reviews)
DON'T:Mix underline and pill tab styles in the same component
DO:Pill tabs for filtering/status views (All, Active, Shipped, Returned)
DON'T:Use more than 5 tab items — consider a dropdown or different navigation
DO:Accordion for FAQ sections and expandable content blocks
DON'T:Use accordion for primary navigation or critical content that must be visible

Tabs (Product Detail)

OE Quality Core Required

The 6F50/55 Solenoid Body is a complete remanufactured assembly for GM 6-speed transmissions. All solenoids, wiring, and pressure switches pre-installed.

Warranty
3 Year / Unlimited
Core Charge
$75.00

Pill Tabs (Variant)

Accordion (FAQ)

Fits the GM 6T40, 6T45, 6F50, and 6F55 transmissions found in 2007–2019 Chevrolet, Buick, GMC, and Cadillac vehicles.
Return your old solenoid body within 30 days using the prepaid label. Core charge is refunded once we receive and inspect the unit.
Orders placed before 2 PM local time qualify for same-day delivery in most metro areas.
3-year, unlimited mileage warranty. Labor reimbursement up to $50/hour for the first 12 months.

Dropdown Menu

Edit order Duplicate Add to favorites
Delete
15

UI Kit

Avatars, toggle switches, progress bars, skeletons, tooltips, toasts, pagination, and command palette.

Usage Guidelines
DO:Avatars: initials in display font, color-coded by role (primary=rep, blue=admin)
DON'T:Use square avatars — avatars are the one exception to the "no rounding" rule
DO:Progress colors: primary (default), td-amber (partial), td-green (complete)
DON'T:Show skeletons for more than 3 seconds — consider a proper loading state
DO:Toasts: success (green icon) or error (red icon + red border tint), auto-dismiss 4s
DON'T:Use toasts for critical errors — those need inline alerts or dialog confirmation
Avatar
JD
MK
TS
RW
JD
John Dawson
Dawson's Auto · Rep #4821
JD
MK
TS
+5
Toggle Switch
Progress & Skeleton
Order fulfillment78%
Reward tier42%
Upload100%
Loading skeleton

Command Palette

ESC
Parts
4L60E Master Rebuild Kit
K77900AX · $189.95
In Stock
4L60E Torque Converter — Reman
B95721C · $478.50
Low
4L60E Filter Kit
F20384D · $24.99
Orders
Order #TRN-284710
Contains 4L60E parts · Delivered

Toast

Added to cart
4L60E Master Kit × 1
Payment declined
Card ending 4242. Try again

Pagination

…

Showing 1–20 of 234 results

Tooltip

Favorite
Download PDF
Share
Copy part #
16

Dashboard

Full application layout: sidebar navigation, KPI stats, bar chart, activity feed, recent orders table, and top products.

Usage Guidelines
DO:Sidebar: 220px width, logo at top, nav with icons, user info at bottom
DON'T:Exceed 8 sidebar nav items — group additional items under a settings section
DO:KPI cards in 4-col grid, each with unique accent color from the chart palette
DON'T:Use the same accent color on adjacent KPI cards — each should be distinct
DO:Active sidebar item: sidebar-item active class (primary bg tint + red left border)
DON'T:Collapse the sidebar on desktop — it's always visible at lg breakpoint and above

Dashboard

JD
Revenue (MTD)
$12,847
↑ 12.3% from last month
Total Orders
284
↑ 8.1% from last month
Reward Points
8,420
↑ 580 this week
Fill Rate
98.2%
↑ 0.4% improvement
Monthly Revenue
Jan – Dec 2025
J
F
M
A
M
J
J
A
S
O
N
D
Activity
Recent account activity
Order #TRN-284710 delivered
2 minutes ago
Price drop on K77900AX
$189.95 → $179.95 · 1 hour ago
B95721C back in stock (low)
3 hours ago
580 reward pts earned
Gold tier — 1,580 to Platinum
Core return #CR-9812 accepted
$75.00 credited · 2 days ago
Recent Orders
Last 30 days
OrderDateStatusTotal
TRN-284710Feb 5Delivered$581.93
TRN-284698Feb 3In Transit$1,247.50
TRN-284655Jan 29Delivered$214.94
TRN-284612Jan 25Partial$892.40
TRN-284580Jan 21Delivered$367.80
Top Products
Your most-ordered parts
1
4L60E Master Kit
K77900AX
42×
$7,977
2
6F50 Solenoid Body
D124420A
28×
$9,576
3
Torque Converter — Reman
B95721C
19×
$9,091
4
Front Ceramic Brake Pads
P44821E
67×
$3,215
5
Filter Kit — 4L60E
F20384D
55×
$1,374
Revenue by Category
Trans 62%
Brake 24%
Other 14%
17

Design Tokens

ShadCN CSS variables with transend brand mapping. Use these values as your source-of-truth when defining globals.css.

Usage Guidelines
DO:Use CSS variables (--primary, --background) for all themed elements
DON'T:Hardcode hex values in component markup — they won't respond to dark mode
DO:Use td-* classes for brand elements that are theme-independent (logo red, dark topbar)
DON'T:Modify HSL values — always override via the CSS variable, not inline styles
:root (Light Mode)
:root { --background: 0 0% 100%; --foreground: 0 0% 3.9%; --card: 0 0% 100%; --card-foreground: 0 0% 3.9%; --popover: 0 0% 100%; --popover-foreground: 0 0% 3.9%; --primary: 358 71% 49%; /* #D7252C */ --primary-foreground: 0 0% 100%; --secondary: 40 4% 95%; /* warm neutral */ --secondary-foreground: 50 3% 17%; --muted: 40 4% 95%; --muted-foreground: 40 3% 45%; --accent: 40 4% 95%; --accent-foreground: 50 3% 17%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 40 6% 88%; --input: 40 6% 88%; --ring: 0 0% 3.9%; --radius: 0px; /* HARD EDGES */ --chart-1: 12 76% 61%; --chart-2: 173 58% 39%; --chart-3: 197 37% 24%; --chart-4: 43 74% 66%; --chart-5: 27 87% 67%; }
.dark (Dark Mode)
.dark { --background: 60 3% 7%; /* warm black */ --foreground: 40 6% 95%; --card: 60 3% 9%; --card-foreground: 40 6% 95%; --popover: 50 3% 10%; --popover-foreground: 40 6% 95%; --primary: 358 71% 49%; --primary-foreground: 0 0% 100%; --secondary: 50 3% 14%; --secondary-foreground: 40 6% 95%; --muted: 50 3% 14%; --muted-foreground: 40 3% 55%; --accent: 50 3% 14%; --accent-foreground: 40 6% 95%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 50 4% 24%; --input: 50 4% 24%; --ring: 40 6% 95%; --chart-1: 220 70% 50%; --chart-2: 160 60% 45%; --chart-3: 30 80% 55%; --chart-4: 280 65% 60%; --chart-5: 340 75% 55%; }
18

Theme Setup

How to configure a real shadcn/ui project with the transend™ brand. Use these as implementation reference blocks for your project files.

A. globals.css — CSS Variables
@import "tailwindcss"; @layer base { :root { --background: 0 0% 100%; --foreground: 0 0% 3.9%; --card: 0 0% 100%; --card-foreground: 0 0% 3.9%; --popover: 0 0% 100%; --popover-foreground: 0 0% 3.9%; --primary: 358 71% 49%; /* #D7252C */ --primary-foreground: 0 0% 100%; --secondary: 40 4% 95%; --secondary-foreground: 50 3% 17%; --muted: 40 4% 95%; --muted-foreground: 40 3% 45%; --accent: 40 4% 95%; --accent-foreground: 50 3% 17%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 40 6% 88%; --input: 40 6% 88%; --ring: 0 0% 3.9%; --radius: 0px; /* HARD EDGES */ --sidebar-background: 0 0% 100%; --sidebar-foreground: 0 0% 3.9%; --sidebar-primary: 358 71% 49%; --sidebar-primary-foreground: 0 0% 100%; --sidebar-accent: 40 4% 95%; --sidebar-accent-foreground: 50 3% 17%; --sidebar-border: 40 6% 88%; --sidebar-ring: 358 71% 49%; } .dark { --background: 60 3% 7%; --foreground: 40 6% 95%; /* ... dark values as shown in Tokens section */ } }
B. tailwind.config.ts — Theme Extensions
export default { theme: { extend: { fontFamily: { display: ["Barlow Condensed", "Impact", "sans-serif"], body: ["Barlow", "sans-serif"], mono: ["IBM Plex Mono", "monospace"], }, borderRadius: { lg: "0px", md: "0px", sm: "0px", xl: "0px", "2xl": "0px", }, }, }, }
C. Brand Overrides — globals.css

These CSS rules target data-component attributes to apply transend brand styling on top of standard shadcn/ui output. Add these to your globals.css or a separate brand.css file.

/* Buttons — display font, uppercase */ [data-component^="button-"] { font-family: "Barlow Condensed", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; } /* Badges — display font, uppercase */ [data-component^="badge-"] { font-family: "Barlow Condensed", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; border-radius: 0; } /* Alerts — left-stripe accent */ [data-component^="alert-"] { border-left: 4px solid; border-radius: 0; } /* Table headers — display font */ [data-component^="table-"] th { font-family: "Barlow Condensed", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.68rem; }
D. Font Setup — Google Fonts
<!-- Add to <head> --> <link rel="preconnect" href="https://fonts.googleapis.com"> <link href="https://fonts.googleapis.com/css2?family= Barlow:wght@400;500;600;700& family=Barlow+Condensed:wght@400;500;600;700;800& family=IBM+Plex+Mono:wght@400;500;600 &display=swap" rel="stylesheet"> /* Font mapping in tailwind.config.ts */ font-display → Barlow Condensed (headings, labels, buttons — always uppercase) font-body → Barlow (body text, descriptions — sentence case) font-mono → IBM Plex Mono (part numbers, prices, data)
E. Component Customization — button.tsx

Extend shadcn/ui's buttonVariants with transend brand classes using cn(). This approach keeps the shadcn base intact while layering brand styling.

import { cva } from "class-variance-authority" const buttonVariants = cva( `inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 font-display uppercase tracking-wider`, // ← brand classes { variants: { variant: { default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90", secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80", // ... other variants }, size: { sm: "h-8 px-3", default: "h-9 px-4 py-2", lg: "h-10 px-6", icon: "size-9", }, }, } )