THE INTERFACE SYSTEM BY H4RITHDV1.0
Design is theoperating system.
DesignOS is a source-first component system for building precise, cinematic, accessible interfaces with one unmistakable visual language.
$
pnpm dlx shadcn@latest add https://designos.dev/r/designos.json Source owned Dark + light Reduced-motion safe
console.designos.local
WORKSPACE / PRODUCTIONSystem overview
ALL SYSTEMS NOMINAL
Production control
REAL-TIME TRAFFICRequest volume
DESIGNOS / PRINCIPLES
Built like a system. Felt like a signature.
A coherent product language that goes deeper than colors and rounded corners. Every layer shares one set of decisions.
01
One visual grammar
Tokens, components, motion, and effects share the same geometry and hierarchy—so products feel authored, not assembled.
02
Accessible at the source
Keyboard behavior, visible focus, motion reduction, contrast, and responsive reflow are treated as component anatomy.
03
Your code after install
Install exactly what you need through the registry. The source lands in your project, ready to inspect, extend, and own.
SOURCE REGISTRY / COMPONENTS
Everything your interface needs.
From a single button to complete product shells. Preview it, inspect the source, and install it directly into your codebase.
Mira Chen[email protected]
+4.8 points this release
$ pnpm dlx shadcn add designos Registry resolvedARCHITECTURE / FOUR LAYERS
A complete interface architecture, not a bag of parts.
DesignOS carries decisions from raw tokens to full product patterns. Change the foundation once; the whole interface stays coherent.
Read the architectureFoundation
Semantic tokens, type, spacing, themes, and geometry
Primitives
Accessible controls and complete interaction states
Patterns
Navigation, workbenches, forms, and product shells
Expression
Motion choreography and atmospheric backgrounds
MOTION / HIERARCHY IN TIME
Movement with a reason.
Smooth entrance, exit, feedback, loading, and ambient recipes—quiet by default, expressive when the moment earns it.
View initializedOpacity + 12px translation
System onlineReserved for live status
ProductionPreviewDevelopment
Compiling registryDeterministic output
ATMOSPHERE / BACKGROUND EFFECTS
Give every canvas a point of view.
Signature grids, circuit fields, dot matrices, topography, restrained auroras, and spatial spotlights—all token-driven and motion-aware.
REGISTRY / SOURCE-FIRST
Install the system. Keep the source.
Add the DesignOS base once, then pull only the components and patterns your product needs. There is no runtime lock-in and no hidden styling layer.
01 Choose a component02 Run one command03 Own and adapt the source
$ pnpm dlx shadcn@latest add \\
https://designos.dev/r/button.json
✓ Resolving registry item
✓ Installing dependencies
✓ Added components/designos/button.tsx
$
READY / BUILD SOMETHING DISTINCT
Your next interface already has a language.
Start with DesignOS, then make it unmistakably yours.