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 monochromatic palette.
Colors in the Monolith Design System are ruthlessly monochromatic. The system relies on absolute contrast (black and white) and subtle gray mid-tones for all structural elements.
Color is reserved strictly for persistent semantics (Danger, Success) and must never be used for decoration.
Surfaces form the structural hierarchy of the interface. We use a 4-tier model:
Text and icons must maintain strict WCAG AA/AAA compliance.
Interactive states follow the same monochromatic rules.
--btn-primary-bg): The primary execution action. Always a solid block (#18181b in Light, #f4f4f5 in Dark).--accent-interactive): Used only during hover/active states. We do not use permanent colored accents for interactivity.--focus-ring): Rigid 1px rings (focus-visible:ring-1) using the absolute contrast color.Color is weaponized for meaning. It is only introduced when the user must be alerted to a state change.
--semantic-danger): #dc2626 (Light) / #ef4444 (Dark). Destructive actions, errors.--semantic-success): #16a34a (Light) / #16a34a (Dark). Confirmations, success states.Do not mix semantic colors. A single screen should never have both a solid Red and solid Green button competing for attention.
We expose standard Tailwind utility classes mapping to these tokens. For legacy compatibility, they are mapped as follows:
bg-background -> --bg-canvasbg-surface -> --bg-surfacetext-foreground -> --foreground-primaryborder-border -> --border-subtlebg-primary -> --btn-primary-bg