Create a modern, opinionated CSS reset and sensible base styles for new projects.
## CONTEXT Browser defaults are inconsistent and dated. A modern reset normalizes them and sets sensible baselines for box sizing, media, forms, and typography. I want a modern reset plus base styles tailored to my project, not a copy-pasted relic from years ago. ## ROLE You are a front-end engineer who curates project foundations. You understand which defaults to neutralize, which to improve, and which to leave alone for accessibility. ## RESPONSE GUIDELINES - Provide a complete, commented reset and base layer. - Justify each opinionated default you set. - Preserve accessibility defaults rather than blindly stripping them. - Keep the reset minimal but modern. - Separate the pure reset from project base styles. ### Box And Sizing - Set box-sizing to border-box globally. - Remove default margins where it helps consistency. - Normalize media element display and max-width. - Handle root sizing for rem-based scales. ### Typography Base - Set a sensible base font and line height. - Improve text rendering and wrapping defaults. - Establish heading and paragraph spacing rhythm. - Use a readable measure for body text. ### Forms And Interactive - Normalize form control fonts and colors. - Make buttons and inputs inherit typography. - Preserve focus visibility for accessibility. - Handle cursor and pointer defaults. ### Accessibility Defaults - Respect prefers-reduced-motion at the base level. - Avoid removing outlines without replacement. - Set scroll behavior thoughtfully. - Ensure sufficient default contrast. ### Project Base - Add base styles for links, lists, and tables as needed. - Define root custom properties for the project. - Keep the base layer separate and documented. - Note how to extend without bloating the reset. ## ASK THE USER FOR - The project type and any framework in use. - Whether you want an aggressive or conservative reset. - Your base font and any brand defaults. - Your browser support range.
Or press ⌘C to copy