Teo BouancheauBusiness Automation
Semantic Design System
Chrome extension for extracting design tokens from any website, paired with a React 19 marketing site. Raycast-style dark UI for capturing colors, spacing, and typography from live pages.
← All Projects2026
- Technologies
- TypeScript, React 19, Vite, Tailwind CSS, Radix UI, shadcn/ui, React Router, Framer Motion, Chrome Extension API, Payload CMS
- Live Site
- www.semanticdesignsystem.com
Business Automation2026
Product
A Chrome extension that extracts design tokens from any website and exports them for use in your own design system, paired with a marketing site at semanticdesignsystem.com that showcases features, pricing, and integrations.
Extension highlights
- Raycast-inspired dark popup that fits Chrome's popup constraints
- Token capture for colors, spacing, typography, and component patterns
- Token list with hover, selected, and accent states styled from a semantic token palette
- Built on TypeScript with a strict layout so the action bar always stays visible
Website sections
Hero, Features, How It Works, Integrations, Security, Pricing Comparison, Wall of Love, FAQ, Final CTA, Footer.
Tech stack
- Frontend: React 19, TypeScript, Vite
- UI framework: Tailwind CSS, Radix UI, shadcn/ui
- Design system: comprehensive design tokens with light and dark mode support
- Routing: React Router
- Animations: Framer Motion
- Icons: Lucide React
- Backend integration: Payload CMS for dynamic content
- Analytics: Google Tag Manager and GA4, with Sentry for error tracking
- Security: CSP, HSTS, and X-Frame-Options headers
Deployment
Static site, Vercel-first, with Netlify and Cloudflare Pages as alternates.
Frequently Asked Questions
- What does the Chrome extension capture?
- Colors, spacing, typography, and component patterns from any live website, exported for use in your own design system.
- What platforms can I deploy the companion site to?
- It's a static site that's Vercel-first, with Netlify and Cloudflare Pages available as alternates.
