jsp-dsv0.1
JSP Creative's design system. Every design decision is named once, in its own tokens; shadcn/ui and Pro Blocks drop in untouched and pick them up through a thin bridge.
Get started- Install
- npx shadcn add @jsp/starter
- Theme
- jsp
- Tokens
Primitives → semantic tokens, responsive, in light and dark.
- Bridge
shadcn's variable names pointed at the tokens, references only.
- Components
shadcn as installed, plus layout and type components written in tokens.
Sections
Everything is in the side nav: pick a section from the switcher at the top.
- TypographyTypeface, text styles and type tokens
- ColourSemantic colours, modes and the shadcn bridge
- SpacingSpacing, sizing, breakpoints and containers
- ShapeRadius, borders and shadows
- IconsLucide icons and icon sizes
- TokensEvery semantic token with its live value
- Componentsshadcn and JSP tier components
- PatternsParts of a screen: app shell, header, forms
- PagesWhole screens: sign in, settings, errors
Four layers, one rule each
The only place design decisions are named. Primitives → semantic tokens with responsive steps and colour modes, built by Style Dictionary.
Points every shadcn variable (--primary, --muted-foreground, --ring …) at a semantic token. References only, never values. Checked for purity, completeness and contrast.
shadcn/ui radix-vega components, installed by the CLI and left untouched. They read the bridge, so they render in jsp-ds tokens, in both modes, with no edits.
Section, Container, SectionHeader, Eyebrow, Text, Stack and Cluster, written in token vocabulary only: bg-surface-subtle, py-layout-lg, text-heading-2.
One switch for modes
This band is data-mode=“dark”. One attribute flips every semantic token inside it, and the bridge follows – no inverse button variants, in either tier.