Skip to content
DesignOSby h4rithd
THE INTERFACE SYSTEM BY H4RITHDV0.1

Design is theoperating system.

DesignOS is a source-first component system for building precise, cinematic, accessible interfaces with one unmistakable visual language.

Start building GitHub
$pnpm dlx shadcn@latest add https://designos.h4rithd.com/r/designos-base.json
Source owned Dark + light Reduced-motion safe
LIVE ASSEMBLYBLUEPRINT / REV. 01
112 W
40 H
PX 16
R 8
ASSEMBLY 01 / BUTTONAction control

Hit target, surface, border, icon, label, and focus geometry assembled in depth.

01 / 04
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.

Select any component to reveal its exact padding, geometry, baseline, and radius— then resolve the drawing into a production interface.

COMPONENT INSPECTOR / BUTTON
DESIGNOS / BUTTON
WIDTH
112
HEIGHT
40
PADDING
16 / 12
RADIUS
8
Browse all components
ARCHITECTURE / 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 architecture
01

Foundation

Semantic tokens, type, spacing, themes, and geometry

02

Primitives

Accessible controls and complete interaction states

03

Patterns

Navigation, workbenches, forms, and product shells

04

Expression

Motion choreography and atmospheric backgrounds

MOTION / HIERARCHY IN TIME

Motion, choreographed like a system.

Direct complete interface sequences, inspect their timing, and replay every handoff. Each transition has a job, a measured duration, and a reduced-motion answer.

LIVE / ASSEMBLE
Assemble / Structure arrives first; navigation, content, and actions settle in dependency order.DURATION 880 msEASING out-expo
Explore motion recipes
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.

EFFECT / 01
Signature grid48px measured field
EFFECT / 02
Circuit fieldTechnical pathways
EFFECT / 03
TopographyLayered contour depth
EFFECT / 04
OrbitalSpatial coordinates
EFFECT / 05
Scan matrixDirectional rhythm
EFFECT / 06
Mineral auroraRestrained atmosphere
Open the effect laboratory
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
designos / install

$ pnpm dlx shadcn@latest add \\

https://designos.h4rithd.com/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.

Install DesignOS Explore components