Overview

The YaVendio Design System is a shadcn-preserving component registry: every Ya* component is a shadcn baseline with YaVendio styling layered on top. DOM structure, accessibility, keyboard navigation, and Radix composition stay identical to the baseline — styling is an additive layer of tokens, classes, and CVA variants only.

Two-layer token architecture

This is the core idea that makes the system portable across any shadcn project. Components never reference a raw hex or a brand-specific variable — they style themselves through standard shadcn utilities, which resolve through two layers of tokens.

flowchart LR
    Primitives["Layer 1 — Brand Primitives<br/>--ya-plum-300<br/>--ya-stone-200"] --> Semantic["Layer 2 — Shadcn Variables<br/>--primary<br/>--border"]
    Semantic --> Components["Components<br/>bg-primary<br/>border-border"]

• Layer 1 — Brand Primitives. The closed brand palette (--ya-plum-*, --ya-indigo-*, --ya-yellow-*, --ya-stone-*), the eight theme-aware semantic families, gradients, custom shadows, and the selection ring. Single source of truth for brand color.
• Layer 2 — Shadcn Variables. --primary, --secondary, --border, --ring, ... each references a Layer-1 primitive.
• Components consume only Layer-2 utilities (bg-primary, text-foreground, border-border).

The payoff: change a primitive once and every component follows; override a shadcn variable and the same components rebrand instantly, without editing a single component file.

At a glance

• Brand voltage: Plum (--ya-plum-300, #8d3f87) — every primary action, reached via bg-primary.
• Signature touches: the 3D inset shadow (--ya-shadow-inset) on primary buttons and the yellow selection ring (--ya-ring, #f4ec7a).
• Type: Bricolage Grotesque, weights 400–700, applied via font-bricolage.
• Shape: 8px base radius (rounded-lg) on controls, rounded-xl on alerts, rounded-full on pills.
• Dark mode: ships via the .dark class with zero per-component overrides — tokens invert at the Layer-1 / Layer-2 boundary.

The portable reference: DESIGN.md

The repository ships a single consolidated DESIGN.md at its root. It captures the whole system — token architecture, colors, typography, radius, elevation, dark mode, component conventions, and a do/don't guide — in one file.

It is designed to be dropped into consuming projects and read by AI coding agents, so any project building on this registry styles its own UI with the same vocabulary. Drop it at the root of your consuming repo (or anywhere your agent reads context from) and point your tooling at it.

Where to go next

• Colors — full palette and semantic families
• Typography — Bricolage scale and usage
• Spacing — layout and spacing conventions
• Themes — install, customize, and dark mode