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.
Core philosophy, visual rules, and structural guidelines of Impeccable Components.
The design language of this project strictly adheres to an industrial, highly structured, and utilitarian approach. We completely reject arbitrary styling, intermediate corner radii (e.g., 4px - 12px), and unnecessary ornamentation. Every visual decision must serve a logical structural purpose.
All structural UI components and layouts MUST use absolute sharp edges (rounded-none). This forms the base grid and the structural foundation of the UI. Intermediate soft corners are strictly banned.
When an action button is "floating" or overlaid on top of a massive structural container (such as a code block or canvas), it must be visually decoupled. Floating utility actions MUST use 9999px (rounded-full).
This creates extreme Geometric Contrast. The structural container is 100% sharp, while the transient action is 100% curved, instantly signaling a "meta-layer" that sits above the content.
The UI is purely monochromatic in its default state (grayscale/black/white). Accent colors are allowed to appear only during transient interactions (hover, active, focus). Exceptions apply for destructive (Danger) and irreversible (Success) actions.
All single-direction animations and transitions MUST be snappy and utilitarian. No single movement may exceed 150ms.
Hover and active states must never use scale transformations (scale-*). Subtle translational animations (translate-x-1) are permitted for semantic icons strictly on hover.
To maintain maximum sharpness, focus outlines MUST default to 1px thickness (ring-1). Thick outlines contradict the minimalist aesthetic.
The following structural limitations are strictly enforced by the system for all agents and developers.
| PROHIBITION | DESCRIPTION & ENFORCEMENT |
|---|---|
| No Scaling | scale-* animations are strictly banned for button hovers. |
| No Soft Corners | Intermediate radii like rounded-md are banned. Use none or full. |
| No Slow Motion | Transitions exceeding 150ms are banned. Keep UI feeling rigid and fast. |
| No Arbitrary Colors | Raw tailwind colors like bg-blue-600 are banned. Use semantic variables. |
| No Thick Focus Rings | ring-2 and above are banned. Focus outlines must be 1px. |