Generate your design system foundation in minutes
Brand-aware color ramps, DTCG-compliant semantic tokens, a ready-to-use CSS stylesheet, and shadcn/Tailwind configs, all generated from your brand.
Configure once, ship forever
Input your brand colors, identity, and expressiveness. Select pre-made settings or fine-tune to your liking – we'll handle the rest.
Brand to tokens in 5 minutes
Your tokens are generated from your brand and designed to drop into any stack — no build plugins, no config merging, no lock-in.
Configure your system
Select your brand colors, define your typography, and set your system's style – all while previewing your tokens in real-time.
Generate your theme
Generate CSS custom properties, export tokens as DTCG compliant JSON, wire up your Tailwind config, or even create a shadcn/ui theme.
Start building
Your design decisions are embedded in the tokens, so your layouts are built on a foundation that's consistent by default and fully overridable when you need it.
Why Trellis?
Not another UI kit, this is a full theming system.
DTCG token files
OKLCH-based color ramps with perceptual uniformity across every lightness step.
CSS custom-property stylesheet
Light and dark mode derived automatically from your tokens.
Figma variable collections
Variables synced 1:1 with your token files for a single source of truth.
Tailwind theme config
Semantic color and spacing scales mapped straight from your tokens.
Reference component
A production-ready component that shows how your tokens compose into real UI.
20+ hours saved
Skip the hours of hand-authoring tokens, stylesheets, and config files from scratch.
Trellis gives you an enterprise-level design system foundation tailored to your brand.