Design systems

The starting design system every vly project ships with — Tailwind tokens, shadcn/ui components, theme primitives — and how to extend it.

Every vly project ships with a working design system based on Tailwind CSS + shadcn/ui. It’s not a heavy abstraction — most files are plain Tailwind classes and standard shadcn components. Edit anything you don’t like.

What’s included

Tailwind v4

Modern Tailwind with CSS-variable-based theming.

shadcn/ui

50+ accessible components, owned by your project (not imported from a library).

Light + dark themes

Auto-switching, system-preference-aware.

Typography scale

Inter by default; swap fonts with one prompt.

Lucide icons

Modern icon library; 1,000+ icons.

Responsive previews

Mobile / tablet / desktop side-by-side.

How it’s structured

Three layers:

tailwind.config.ts          # tokens (colors, spacing, fonts)
       ↓
components/ui/*.tsx         # shadcn primitives (Button, Card, Dialog, etc.)
       ↓
components/{feature}/*.tsx  # composed app components

The bottom layer (your composed components) consumes the middle layer (shadcn primitives) which uses the top layer (Tailwind tokens). Change a token and everything that consumes it updates.

Extending

1. Customize tokens

   Edit tailwind.config.ts to change brand color, spacing scale, or fonts.

2. Customize primitives

   Edit components/ui/button.tsx (etc.) to change shadcn defaults. Your changes are permanent for the project.

3. Compose new components

   Build domain-specific components in components/{feature}/. They use the primitives.

Tips

Start with tokens. A brand color change at the token level cascades to every button, link, and active state without touching individual files.

Don’t fight shadcn. It’s a sensible default; the components are accessible and well-tested. Customize within the variants pattern rather than replacing components wholesale.

Related

Themes

Light / dark / brand colors.

Tailwind config

The token file.

shadcn/ui components

The primitive library.