Lime

Lime is a white page, warm-grey surfaces and near-black text with one acid lime on the main action, for consumer apps. Build with these components before writing markup.

Setup

Once, in the root layout: put the "lime" class on <body> or the root element of the UI, with LimePortalProvider inside it. Lime's styles and tokens apply only inside that class. Menus, dialogs, popovers and toasts render at the end of the body; LimePortalProvider keeps them inside the scope, and without it they lose every token. import {LimePortalProvider} from '@/lib/lime/portal' <body className="lime"><LimePortalProvider>{children}</LimePortalProvider></body>

Steps

1. For a whole screen, start from a block under Blocks when one fits: install it, then swap its sample data and copy for the real ones.
2. Pick the components the screen needs from the index below. Fetch each one's page before using it: it has the props, variants and that component's rules.
3. Build only from those components and the tokens under Tokens, inside an element with the "lime" class. Import each from the path in the index; support pieces are under Imports. Dark mode: put data-theme="dark" on the lime element or any ancestor, such as . The theme does not follow the system setting (prefers-color-scheme) on its own.
4. Frame the screen with the Page shell. If a component is missing, build the stand-in under Coverage gaps; if none is listed, compose it from existing components and tokens and say what you built. Never invent a token.
5. Ask the person only when the screen needs an amount, a payee or an autonomy limit you were not given; never invent one. Decide everything else from these rules and say what you chose.
6. Porting an existing screen: swap one piece at a time for its component, keep the behavior and copy, and delete the old styles once nothing uses them. For a whole app, run migrate-design-system when it is installed.
7. Lint: install it once with npx shadcn@latest add https://design.how/r/lime/lint.json, then run npx eslint -c lime.eslint.config.mjs .. Each message names the fix.
8. Review before you finish: run the lint and fix every error, then render the screen at 390 and 1280 wide, check it against the global rules and the anti-slop list, fix the worst defect, and check again. Done when no MUST or NEVER is broken and no raw color, size or font is left. Run ui-review when it is installed.