The DepxTech design system
Every token, component and motion pattern used across the product, in one place. Everything you see is rendered with the real components fromsrc/components/ui— the page documents itself.
Color
Tokens that drive every surface. Click copy to grab a CSS variable.
Tokens are defined in src/app/globals.css.
Surfaces
6 tokens--backgroundPage background
--foregroundPrimary text
--cardCard surface
--card-foregroundText on cards
--popoverPopover surface
--popover-foregroundText on popovers
Brand & Actions
8 tokens--primaryBrand / CTAs
--primary-foregroundText on primary
--secondaryMuted action surface
--secondary-foregroundText on secondary
--accentAccent highlight
--accent-foregroundText on accent
--destructiveDanger / errors
--destructive-foregroundText on destructive
Neutrals & Support
5 tokens--mutedSubtle background
--muted-foregroundSecondary text
--borderBorders
--inputInput borders
--ringFocus ring
Sidebar
8 tokens--sidebar--sidebar-foreground--sidebar-primary--sidebar-primary-foreground--sidebar-accent--sidebar-accent-foreground--sidebar-border--sidebar-ringCharts
5 tokens--chart-1--chart-2--chart-3--chart-4--chart-5Typography
Plus Jakarta Sans · Lora · IBM Plex Mono — set once in globals.css.
var(--font-sans) · Plus Jakarta Sansvar(--font-serif) · Loravar(--font-mono) · IBM Plex MonoHeadings
Trade smart. Refurbish responsibly.
Trade smart. Refurbish responsibly.
Trade smart. Refurbish responsibly.
Trade smart. Refurbish responsibly.
Trade smart. Refurbish responsibly.
Trade smart. Refurbish responsibly.
Body & utility
Trade smart. Refurbish responsibly.
Trade smart. Refurbish responsibly.
Trade smart. Refurbish responsibly.
Trade smart. Refurbish responsibly.
Trade smart. Refurbish responsibly.
Weights
font-lightfont-normalfont-mediumfont-semiboldfont-boldfont-blackSpace, radius & elevation
A 4px rhythm, a single --radius token, and layered shadows.
Spacing scale
var(--spacing) = 0.27remp-14pxp-28pxp-312pxp-416pxp-624pxp-832pxp-1248pxp-1664pxp-2496pxRadius
smcalc(var(--radius) − 4px)mdcalc(var(--radius) − 2px)lgvar(--radius)xlcalc(var(--radius) + 4px)2xlcalc(var(--radius) + 8px)3xlcalc(var(--radius) + 12px)fullpill / circleShadows
2xsxssmmdlgxl2xlComponents
Live instances of every shadcn/ui + Radix primitive in the codebase.
Buttons
variant · sizeBadges
variantCard
rounded-3xl · shadow-smCards use bg-card,rounded-3xland a subtle shadow-sm.
Inputs
h-12 · rounded-fullToggles
switch · checkbox · radioSend a summary after each quote.
Alerts
variantDialog & Toasts
@radix-ui/react-dialog · sonnerAccordion
shadcn/uiSkeleton & Separator
loading statesIcons
Tap any icon to copy its JSX. Powered by lucide-react.
lucide-react
Tap any icon to copy its JSX. Use size-4,size-5, orsize-6 to control the visual scale.
Navigation & actions
Commerce
Devices
User & account
Status & feedback
Media & files
Communication
World & time
Ambience
DepxTech motifs
Editing
Motion
GSAP ScrollTrigger (home & trade) and framer-motion (inner pages).
Scroll-triggered motion
The site ships two scroll libraries that coexist:GSAP ScrollTrigger powers the Home and Trade heros (heavier choreography, scrub effects, pinning); framer-motion covers lighter fades across About, Blog and inner pages. Hit Replay to re-run any demo.
GSAP primitives
Imported from @/components/ui/scroll-animation-gsap
<GSAPStagger from="bottom" staggerChildren={0.12} /><GSAPReveal from="top | left | right | blur | scale" /><GSAPCounter value={5000} suffix="+" /><GSAPParallax speed={0.4} /> · ties to scrubUsage
GSAP primitives auto-detect the nearest scrollable ancestor (so they work inside the#scrollable-contentcustom scroller) and register ScrollTrigger for you.
import { GSAPStagger, GSAPReveal } from '@/components/ui/scroll-animation-gsap'
<GSAPStagger staggerChildren={0.11} from="bottom">
<h1>Instant quotes</h1>
<p>Refurbish responsibly.</p>
<Button>Start now</Button>
</GSAPStagger>Framer Motion primitives
Lightweight fades used on inner pages — imported from @/components/ui/scroll-animation
<ScrollStagger><ScrollReveal animation="…" /></ScrollStagger>animation="bottom | top | left | right"scales from 0.9 → 1 on enterstandalone ScrollReveal (no parent)Source of truth lives insrc/app/globals.cssandsrc/components/ui. Edit there and this page updates automatically.