Design ContractsLLM-ready design systems

Hedgehog OS

warm glass, tidy windows, calm utility

GlassmorphismmacOSWindowed
Hedgehog OS is a light, macOS-inspired UI on a warm beige desktop (#EEEBE4) with subtle multi-radial background accents (top-left orange rgba(249,165,38,0.22), top-right purple rgba(206,130,255,0.18), bottom-center green rgba(137,226,25,0.16)). Use system UI fonts (-apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif). Headings are bold and tight (hero: 2.25rem, 800, letter-spacing -0.03em; h1: 2.25rem, 700, letter-spacing -0.02em), body is 14px, 400, line-height 1.5. Build windowed containers with 16px radius and 1px borders (rgba(29,27,26,0.12)). Use glass surfaces for chrome: rgba(255,255,255,0.55) with backdrop blur 14px (backdrop-filter: blur(14px)) and a faint border rgba(29,27,26,0.10). Add macOS traffic lights (red #FF5F57, yellow #FFBD2E, green #28C840) as small 10px circles in the title bar. Title bars are slightly more opaque (rgba(255,255,255,0.75)) with a centered title pill. Shadows are soft and elevated: window/card shadow 0 10px 30px rgba(29,27,26,0.12). Primary actions are friendly orange (#F9A526) with a warm glow shadow 0 10px 22px rgba(249,165,38,0.28) and subtle hover lift (translateY(-1px)). Secondary actions are glassy (rgba(255,255,255,0.65)) with 1px border rgba(29,27,26,0.12). Keep spacing tidy, micro-elevation subtle, and avoid heavy material shadows or dark-mode contrast.

Hedgehog OS borrows the calm logic of a desktop: windows, sidebars, and chrome that stays out of the way while still feeling tactile. A warm beige canvas anchors the interface, while glassy surfaces and thin borders create the sense of layered panes. The result is technical and organized, but still charming, with macOS-like affordances and micro-elevation instead of heavy depth.

Card

hedgehog-os.window
explorer
overview
logs
settings

windowed workspace

Glassy chrome, tidy borders, and small shadows for a calm technical UI.

Button

Copied to clipboard!