Components
For the complete documentation index, see llms.txt. Markdown variants are available by appending .md to any URL or sending an Accept: text/markdown header. An agent skill is available at /.well-known/agent-skills/site-skill.md.
A strict, utilitarian timing language for feedback and transitions.
Motion in the Monolith Design System is the shared timing language of the interface. Our philosophy dictates that all interactions must be snappy, deliberate, and free of over-engineering.
Unlike other design systems that rely on complex spring physics or heavy libraries like Framer Motion, we strictly use Native CSS Transitions and Vanilla JavaScript (like MutationObserver for sliding highlights).
scale Transformations: Hover and active states must never use scale (e.g., active:scale-95). All buttons and inputs must maintain their rigid geometry. Use opacity or background color changes instead.Because we rely exclusively on native Tailwind CSS utilities, we do not need custom JavaScript configuration files for animation. Use the following standard Tailwind duration classes:
Note: There is no
slowpreset. Any interaction requiring more than 150ms violates the Monolith philosophy and will be rejected.
Use Tailwind's duration-* utility classes combined with our strict timing rules. Ensure you are not combining motion with banned transformations like scale.
We respect user system preferences. Tailwind automatically provides the motion-reduce: modifier.
Ensure that critical information is never lost when a user has "Reduce Motion" enabled in their OS.