# Avoid Claude's habits when you build a web page

These rules come from what 4,326 people on Reddit pointed out in work made with Claude. They cover the habits reported in the 60 days up to 2026-10-05, and each one says what to write instead. The list changes when a habit appears or fades. Fetch the current version from https://data.machinemorning.com/giveaway/rules/claude-web_ui.md.

- The AI purple. Choose the accent colour from the brand or the subject instead of defaulting to violet or indigo. Skip blue to purple gradients on hero text and buttons, and skip soft glows behind cards. Purple is fine when the brand already uses it.
- Serif headline, one italic word. Pick one or two type families that suit the brand and use them consistently. Avoid the stock recipe of a serif headline with one italic accent word, a tiny tracked caps label above it and monospace outside code. Any of these fonts on its own, chosen on purpose, is fine.
- Cards, with an accent stripe. Group content with spacing and headings instead of boxing every item, and give the most important item more size than the rest. Leave out the coloured accent stripe on one edge of cards. Cards stay allowed for items that are separate objects, like products.
- Pill above the headline. Use a pill only for a real tag or status, and drop the badge above the headline. Vary the corner radius by element instead of giving every container the same large rounding. Rounded corners and real filter chips stay allowed.
- Stock component kit. Restyle the component kit for the brief by changing radius, palette, spacing and icon set, and use the project's design tokens when it has them. Use icons only where they help someone find something, and never emoji in their place. Using shadcn or Lucide is fine once the result is styled for the project.
- The same hero, every time. Build the opening section around what this product or client needs, such as a product photo or a live demo, instead of the stock pill, headline, two buttons and three cards. Change the section order from one brief to the next. A clear headline and a main button, which most pages need, stay.
- Eyebrow over every heading. Let headings stand alone. Add a small label above a heading only when it carries real information, and number sections 01, 02 and so on only when order matters. An occasional kicker that adds information, as in editorial design, is fine.
- Cream and terracotta page. Take the background and accent colours from the brand or the subject. Without a brief, avoid the warm cream page with rust orange accents and a large serif headline, which reads as Anthropic's own palette. Warm palettes chosen to fit the brand are fine.
- Hairline borders, edge stripe. Separate areas with spacing or a background change instead of a faint 1px border on every container, and drop the coloured stripe on one edge of status cards. Use blur and glass panels only where content really sits over an image. Borders that separate items a reader must tell apart stay allowed.
- Dark by default, grey on grey. Use a light theme unless the brief or the subject calls for dark. Give labels and helper text strong contrast against their background and a size people can read. Dark themes are fine when the subject or the user calls for one.
- Dot-pill chips everywhere. Drop the decorative pill with a pulsing dot above the headline, and keep status chips on cards only when they show live data. Do not add fake terminal windows as decoration. Status indicators that show real live state are fine.
- Emoji as icons. Use an SVG icon set such as Lucide, or no icon at all, wherever the interface needs one. Keep emoji out of feature cards, navigation, buttons and headings. Emoji the user explicitly asked for are fine.
- Everything fades, slides, floats. Animate only where motion helps the user. Leave sections static as they scroll into view, drop the lift on hover, and skip moving decorative backgrounds and marquees. Motion that shows a change of state or responds to input stays.
- One spacing rhythm everywhere. Set spacing by importance. Group related items tightly, leave more space before major sections, and let the key section take more room than the rest. A consistent spacing scale is fine when it creates contrast between groups.