Rules for structure, not style.
39 rules across 10 areas, from hierarchy and spacing to states, copy and accessibility. Each one says why it matters, how to check it and the generic default it guards against. Every library item lists the rules it applies.
Every rule is a draft until a maintainer reviews and signs it. None is reviewed yet. None of them is about colour palette or brand: they are meant to hold in any theme.
Give the rules to your coding agent
TESSLI.md is a compact index of every rule and its check, small enough for an agent to keep in context. This command adds it to the root of a project set up with shadcn/ui:
npx shadcn@latest add online-scope-lab/tessli/rulesHierarchy
- H-01Give each section, card or dialog at most one primary-styled action.Applied by 6 library items
- H-02One h1 per page; nest h2–h4 in order. Level follows structure, size follows style.Applied by 4 library items
- H-03Use at most one uppercase eyebrow per page, and only if it adds information.No library item applies it yet
- H-04Use numbered markers (01, 02, Step 1) only for steps people follow in order.No library item applies it yet
Typography
- T-01Cap running text at a readable measure (about 65ch), never the full container width.Applied by 2 library items
- T-02Take font sizes from the type scale; use at most four sizes in one section.No library item applies it yet
- T-03Set prices, counts and numeric columns in tabular figures.Applied by 4 library items
Spacing and density
- S-01Keep space inside a group smaller than space between groups, at every width.No library item applies it yet
- S-02Align a section's heading, text and actions on one left edge; centre only short blocks.Applied by 5 library items
- S-03Make data surfaces compact and reading surfaces roomy; don't use one density everywhere.Applied by 1 library item
Colour
- C-01Colour with semantic tokens (background, primary, muted, border…), never raw values.No library item applies it yet
- C-02Pair every colour-coded meaning (error, selected, status) with text or shape.Applied by 4 library items
- C-03Spend the primary colour on the primary action and real status, not decoration.Applied by 2 library items
- C-04Show importance with position, size, weight and borders, not gradients, glows or glass.Applied by 3 library items
Components
- K-01Use the native element (button, a, details, input, select, dialog) before a custom widget.Applied by 2 library items
- K-02Use a link to go to a URL and a button to act on the page; the style never decides.Applied by 1 library item
- K-03Give compared options the same rows in the same order, aligned, values written out.Applied by 1 library item
- K-04Shape each block by its content; don't force unlike content into identical icon cards.Applied by 2 library items
Copy
- W-01Write headings that make the product's point, not labels like "Features" or "FAQ".Applied by 4 library items
- W-02Label actions with what happens next, not "Get started", "Submit" or "Learn more".Applied by 6 library items
- W-03Show no ratings, counts, logos, quotes or metrics you can't source.Applied by 4 library items
- W-04Lead answers, errors and notices with the answer or consequence, then the detail.Applied by 3 library items
- W-05Put an arrow on a link only when it leaves the site (↗), never on every link.Applied by 2 library items
States
- ST-01Design empty, loading and error states for every region that loads or lists data.Applied by 3 library items
- ST-02Give first use, no results and failure their own message and action.Applied by 2 library items
- ST-03Reserve space so loading, toggles and validation don't shift surrounding content.Applied by 4 library items
- ST-04Say what failed, what is still safe, and one way forward (retry, edit or contact).Applied by 5 library items
- ST-05Before a destructive action, name what is lost and if it can be undone; confirm it.Applied by 1 library item
Responsive
- R-01On phones, restack content by priority and adapt components; don't shrink the desktop.Applied by 5 library items
- R-02Fit every surface into 320 CSS px with no sideways scroll; only tables and code may scroll.Applied by 1 library item
- R-03Change layout where the content stops fitting, not at device names.Applied by 3 library items
Motion
- M-01Animate only changes people cause (open, close, switch); no decorative motion.Applied by 1 library item
- M-02Under prefers-reduced-motion, remove non-essential transforms and transitions.Applied by 1 library item
Accessibility
- A-01Make every interactive target at least 44×44 CSS px; inline text links excepted.Applied by 5 library items
- A-02Show a visible :focus-visible indicator on every interactive element.No library item applies it yet
- A-03Meet 4.5:1 for text and 3:1 for large text and control edges, in every theme.No library item applies it yet
- A-04Give every control a visible label, groups a legend, and errors a link to their field.Applied by 2 library items
- A-05Announce results, saves and errors that appear in place through a polite live region.Applied by 4 library items
- A-06Make everything work by keyboard, close overlays on Escape, and hide nothing behind hover.Applied by 3 library items