Trellis - Build a design system in 10 minutes

trellisdesign.io ↗
Trellis - Build a design system in 10 minutes PC表示
Trellis - Build a design system in 10 minutes タブレット表示
Trellis - Build a design system in 10 minutes スマホ表示

Tokens, components, Figma, and complete documentation—customized to your brand. Skip the 6-month setup and start building today.

How it works What you get Docs Start for free --foreground-primary --shape-radius-container --space-lg --foreground-accent Aa --font-heading-md-size --background-critical 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. Start Generating 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. Dark mode included Configure Preview Primary Secondary Heading Body Rounding Sharp Soft Rounded Pill Shadows None Subtle Dramatic Spacing Compact Comfortable Spacious 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. #2A5FC2 01 Configure your system Select your brand colors, define your typography, and set your system's style – all while previewing your tokens in real-time. 1 --color-primary-50: oklch(0.9749 0.0117 239.9027); 2 --color-border-neutral: var(--color-n 3 4 5 6 02 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. 03 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. Agentic skill files Markdown guidance for LLMs to compose your tokens into production-ready UI. Tailwind theme config Semantic color and spacing scales mapped straight from your tokens. Shadcn-compatible Generated theme translates into a shadcn-compatible

関連サイト