Skip to content
DesignOSby h4rithd
FOUNDATIONS / TOKENS

Decisions encoded for every layer.

DesignOS tokens separate raw references from semantic intent and component behavior, keeping themes coherent without leaking palette values into product code.

TOKEN ARCHITECTURE

Reference → semantic → component.

01Reference

Raw color, dimension, duration, easing, and type values.

→
02Semantic

Intent such as canvas, primary text, border, focus, and danger.

→
03Component

Stateful aliases for buttons, fields, cards, dialogs, and patterns.

COLOR / TWO DESIGNED THEMES

Dark is the signature. Light is a companion.

Light mode is not an inverted afterthought; it preserves the same hierarchy using mineral paper, graphite text, and deeper steel accents.

DARK / DEFAULT

Obsidian alloy

8 CORE ROLES
Canvas#08090B
Chrome#0B0D10
Panel#111418
Raised#171B20
Border#272C33
Primary#F2F4F6
Steel#8FA8BC
Silver#C7D2DA
LIGHT / COMPANION

Mineral paper

8 CORE ROLES
Canvas#EDF0F2
Chrome#FAFAF8
Panel#FFFFFF
Raised#F5F6F6
Border#D7DCE0
Primary#16191D
Steel#405F74
Strong#274B61
TYPOGRAPHY

Human clarity. Technical precision.

SANS / INTERFACE

IBM Plex Sans

Design that reads with calm authority.

400 · 500 · 600
MONO / SYSTEM

JetBrains Mono

REGISTRY.STATUS = READY

400 · 500 · 600 · 700
GEOMETRY & MOTION

Small rules create the signature.

04 pxPRIMARY RHYTHM
02 pxOPTICAL STEP
44 pxTOUCH MINIMUM
15 pxLAYER RADIUS
140 msCONTROL
240 msVIEW ENTER
3000 msBREATHE
2 pxFOCUS WIDTH