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 (Inter) 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. Inter 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 (Inter) 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 · Inter 700 · 1.5rem
Browse by Vehicle or Part Number
Body · Inter 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
09

Layout

Application navigation shell and responsive grid patterns.

A. Navigation
Usage Guidelines
DO:Search bar fills available space with flex-1 between logo and auth
DON'T:Put nav links (Products, etc.) in the main nav row — they go in the sub-nav
DO:Login / Sign Up as plain text with slash separator, user icon before
DON'T:Style Login/Sign Up as buttons or use red text — keep it neutral text-foreground
DO:Sub-nav: Products + Part Types left, Quick Add + Resource Center right
DON'T:Use / as breadcrumb separator — use ›
Create a Transend account now to earn Special Pricing and Promotions. Sign Up Now
B. Grid & Spacing
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
10

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
11

Components

Search hero, stat cards, dialog, sheet, tabs, and accordion patterns.

A. Search & Stats
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%
B. Dialog & Sheet
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
C. Tabs & Accordion
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
12

Examples

UI Kit patterns (avatars, progress, toasts, pagination) and a full dashboard layout with sidebar, KPI cards, and activity feed.

A. UI Kit
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 #
B. Dashboard
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%
13

Setup

Design tokens, theme configuration, and AI integration artifacts. Everything needed to wire a real shadcn/ui project with the transend™ brand.

A. Design Tokens
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%; }
B. Theme
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: ["Inter", "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= Inter:opsz,wght@14..32,100..900& 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 → Inter (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", }, }, } )
C. AI Integration
A. System Prompt — for v0 / Cursor / Claude

Paste this block into any AI tool's system instructions or custom rules file. It provides the complete brand context needed to generate on-brand transend components.

You are generating UI for transend™, an intelligent auto parts ordering platform by Transtar / NexaMotion Group. Framework: Next.js + shadcn/ui + Tailwind CSS Component library: shadcn/ui (CVA variants, data-slot attributes) Color tokens (HSL, no hsl() wrapper in CSS vars): --primary: 358 71% 49% (#D7252C — brand red) --primary-foreground: 0 0% 100% --secondary: 40 4% 95% (warm neutral) --muted: 40 4% 95% --muted-foreground: 40 3% 45% --border: 40 6% 88% --destructive: 0 84.2% 60.2% Neutrals are warm charcoal tones (never blue-gray). Typography: font-display = Barlow Condensed — headings, labels, buttons (ALWAYS uppercase) font-body = Inter — body text, descriptions (sentence case) font-mono = IBM Plex Mono — part numbers, prices, data values Border radius: ALWAYS 0px. All structural surfaces have hard edges. Rounded shapes are reserved only for dots, avatars, and toggles. Component brand overrides: Buttons → font-display, font-bold, uppercase, tracking-wider Badges → font-display, font-bold, uppercase, tracking-wider, rounded-none Alerts → border-left: 4px solid (semantic color), rounded-none Tables → th: font-display, font-bold, uppercase, tracking-widest, text-[0.68rem] Cards → rounded-xl (resolves to 0px), border border-border, shadow-sm Dialog → no rounded corners, data-slot attributes on sub-elements DO: ✓ Use shadcn/ui base classes exactly, then layer brand via CSS overrides ✓ Add data-component attributes to every component root element ✓ Add data-slot attributes to sub-components (card-header, dialog-footer, etc.) ✓ Use role attributes for accessibility (alert, dialog, tab, tablist, tabpanel) ✓ Use primary red for CTAs and active states ✓ Use warm neutrals (bg-secondary, bg-muted) for surfaces DON'T: ✗ Never use blue-gray neutrals (zinc, slate, gray) — always warm tones ✗ Never use rounded corners on structural elements ✗ Never use blue for links — use text-primary or text-foreground ✗ Never put body font (Inter) on buttons, badges, or headings ✗ Never omit the display font uppercase treatment on headings
B. Component Class Manifest

Every shadcn component mapped to its exact Tailwind classes. Use this as a class lookup when generating components. Brand overrides are applied via CSS targeting data-component attributes.

/* ── Button ──────────────────────────────────────────── */ // base 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 // variants default: bg-primary text-primary-foreground shadow-xs hover:bg-primary/90 secondary: bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80 outline: border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground ghost: hover:bg-accent hover:text-accent-foreground destructive: bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90 link: text-primary underline-offset-4 hover:underline // sizes sm: h-8 px-3 default: h-9 px-4 py-2 lg: h-10 px-6 icon: size-9 /* ── Input ───────────────────────────────────────────── */ // base file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:items-center file:gap-2 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 md:text-sm // error state: add border-destructive focus-visible:border-destructive focus-visible:ring-destructive/50 /* ── Card ────────────────────────────────────────────── */ // base bg-card text-card-foreground flex flex-col rounded-xl border border-border shadow-sm overflow-hidden // data-slots card-header: flex flex-col gap-1.5 px-6 pt-6 card-title: font-semibold leading-none card-description: text-sm text-muted-foreground card-content: px-6 pb-6 card-footer: flex items-center px-6 pb-6 /* ── Badge ───────────────────────────────────────────── */ // base inline-flex items-center justify-center rounded-none border border-transparent px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 // variants default: bg-primary text-primary-foreground [a&]:hover:bg-primary/90 secondary: bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90 destructive: bg-destructive text-destructive-foreground [a&]:hover:bg-destructive/90 outline: border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground // product stock badges — semantic colors stock-in: bg-td-green-100 dark:bg-td-green/10 text-td-green-700 dark:text-td-green-300 stock-low: bg-td-amber-100 dark:bg-td-amber/10 text-td-amber-700 dark:text-td-amber-300 stock-out: bg-td-red-100 dark:bg-td-red/10 text-td-red-700 dark:text-td-red-300 /* ── Alert ───────────────────────────────────────────── */ // base relative w-full rounded-lg border px-4 py-3 text-sm grid grid-cols-[16px_1fr] gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current // semantic variants (colors + left-stripe via CSS) info: bg-td-blue-100 dark:bg-td-blue/5 text-td-blue-700 dark:text-td-blue-300 success: bg-td-green-100 dark:bg-td-green/5 text-td-green-700 dark:text-td-green-300 warning: bg-td-amber-100 dark:bg-td-amber/5 text-td-amber-700 dark:text-td-amber-300 error: bg-destructive/10 text-destructive dark:text-red-400 // data-slots alert-title: col-start-2 font-medium leading-none tracking-tight alert-description: col-start-2 text-sm [&_p]:leading-relaxed /* ── Table ───────────────────────────────────────────── */ // wrapper relative w-full overflow-x-auto border border-border bg-card // elements th: h-10 px-4 text-left align-middle font-medium text-muted-foreground td: p-4 align-middle tr: border-b border-border transition-colors hover:bg-muted/50 /* ── Dialog ──────────────────────────────────────────── */ // base relative bg-background border border-border shadow-lg w-full max-w-[420px] gap-4 p-6 // data-slots dialog-header: flex flex-col gap-2 dialog-title: text-lg leading-none font-semibold dialog-description: text-muted-foreground text-sm dialog-footer: flex flex-col-reverse gap-2 sm:flex-row sm:justify-end /* ── Tabs ────────────────────────────────────────────── */ // underline variant — tab trigger inline-flex items-center justify-center whitespace-nowrap px-3 py-1.5 text-sm font-medium border-b-2 border-transparent text-muted-foreground transition-all data-state="active": text-foreground border-primary // pill variant — tablist bg-muted rounded-lg p-[3px] inline-flex w-fit items-center justify-center text-muted-foreground h-9 gap-1 // pill variant — tab trigger inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium transition-all data-state="active": bg-background text-foreground shadow-sm /* ── Accordion ───────────────────────────────────────── */ // data-slots accordion-item: border-b border-border accordion-trigger: flex flex-1 items-center justify-between gap-4 py-4 text-left text-sm font-medium hover:underline
C. Complete globals.css

Full, unabridged CSS variables for both light and dark mode, plus brand override rules. Copy this entire block into your project's globals.css.

@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 */ --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%; --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%; /* warm black, not pure */ --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% 16%; --input: 50 4% 16%; --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%; --sidebar-background: 60 3% 9%; --sidebar-foreground: 40 6% 95%; --sidebar-primary: 358 71% 49%; --sidebar-primary-foreground: 0 0% 100%; --sidebar-accent: 50 3% 14%; --sidebar-accent-foreground: 40 6% 95%; --sidebar-border: 50 4% 24%; --sidebar-ring: 358 71% 49%; } } /* ── Brand Overrides ─────────────────────────────────── */ /* Buttons — display font, uppercase */ [data-component^="button-"] { font-family: "Barlow Condensed", Impact, "Arial Narrow", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.82rem; } /* Badges — display font, uppercase */ [data-component^="badge-"] { font-family: "Barlow Condensed", Impact, "Arial Narrow", 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; } [data-component="alert-info"] { border-left-color: hsl(var(--chart-1)); } [data-component="alert-success"] { border-left-color: #0F9D43; } [data-component="alert-warning"] { border-left-color: #D97706; } [data-component="alert-error"] { border-left-color: hsl(var(--destructive)); } /* Alert titles — display font */ [data-component^="alert-"] [data-slot="alert-title"] { font-family: "Barlow Condensed", Impact, "Arial Narrow", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } /* Table headers — display font */ [data-component^="table-"] th { font-family: "Barlow Condensed", Impact, "Arial Narrow", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.68rem; } /* Form labels — display font */ [data-component^="input-"] ~ label, label:has(+ [data-component^="input-"]) { font-family: "Barlow Condensed", Impact, "Arial Narrow", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; } /* Dialog/Sheet — display font for footer buttons */ [data-component="dialog"] [data-slot="dialog-footer"] button, [data-component="sheet-cart"] button { font-family: "Barlow Condensed", Impact, "Arial Narrow", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
D. Complete tailwind.config.ts

Full Tailwind config with all color tokens, fonts, shadows, keyframes, and animations. Copy into your project's tailwind.config.ts.

import type { Config } from "tailwindcss" export default { darkMode: "class", theme: { extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, sidebar: { DEFAULT: "hsl(var(--sidebar-background))", foreground: "hsl(var(--sidebar-foreground))", primary: "hsl(var(--sidebar-primary))", "primary-foreground": "hsl(var(--sidebar-primary-foreground))", accent: "hsl(var(--sidebar-accent))", "accent-foreground": "hsl(var(--sidebar-accent-foreground))", border: "hsl(var(--sidebar-border))", ring: "hsl(var(--sidebar-ring))", }, chart: { "1": "hsl(var(--chart-1))", "2": "hsl(var(--chart-2))", "3": "hsl(var(--chart-3))", "4": "hsl(var(--chart-4))", "5": "hsl(var(--chart-5))", }, }, fontFamily: { display: ["Barlow Condensed", "Impact", "Arial Narrow", "sans-serif"], body: ["Inter", "sans-serif"], mono: ["IBM Plex Mono", "Courier New", "monospace"], }, borderRadius: { lg: "0px", md: "0px", sm: "0px", xl: "0px", "2xl": "0px", /* HARD EDGES */ }, boxShadow: { "td-sm": "0 1px 3px rgba(20,20,19,0.06)", "td-md": "0 4px 12px rgba(20,20,19,0.08)", "td-lg": "0 12px 40px rgba(20,20,19,0.12)", "td-glow": "0 0 40px rgba(215,37,44,0.15)", }, keyframes: { "fade-up": { "0%": { opacity: "0", transform: "translateY(16px)" }, "100%": { opacity: "1", transform: "translateY(0)" }, }, "fade-in": { "0%": { opacity: "0" }, "100%": { opacity: "1" }, }, "slide-in": { "0%": { opacity: "0", transform: "translateX(-12px)" }, "100%": { opacity: "1", transform: "translateX(0)" }, }, "scale-in": { "0%": { opacity: "0", transform: "scale(0.96)" }, "100%": { opacity: "1", transform: "scale(1)" }, }, "progress-fill": { from: { width: "0" } }, "bar-grow": { from: { height: "0" } }, }, animation: { "fade-up": "fade-up 0.5s ease-out forwards", "fade-in": "fade-in 0.4s ease-out forwards", "slide-in": "slide-in 0.4s ease-out forwards", "scale-in": "scale-in 0.35s ease-out forwards", "progress-fill": "progress-fill 1.2s ease-out", "bar-grow": "bar-grow 0.8s ease-out", }, }, }, } satisfies Config