Shekel UI Design System

A complete design system for building warm, structured web applications. This skill defines the aesthetic, layout, and component patterns. Every new page, component, or modification must follow these rules.

Philosophy

• Warm editorial — cream (#FBF6F0) + white palette, Newsreader serif headings, warm dark mode
• Hermetically sealed — every section is a bordered cell. No floating cards. Borders go edge-to-edge.
• Three-font system — Newsreader Variable (headings, weight 400), Nunito Sans Variable (body), Cascadia Code (mono)
• Defined and structured — everything has clear visual boundaries, consistent padding, predictable hierarchy
• Light touch — transitions only on interactive elements, animations are subtle (6px slide, 300ms), no visual noise

Getting Started

If you're building a new app or adding to an existing one, start with the workflow: