{"filename":"toss-style-design-system.mdc","content":"---\ndescription: Toss-style UI design rules for disciplined spacing, typography, grayscale hierarchy, restrained color, cards, metrics, dark mode, and accessibility\nglobs: [\"**/*.tsx\", \"**/*.jsx\", \"**/*.vue\", \"**/*.svelte\", \"**/*.css\", \"**/*.scss\", \"tailwind.config.*\"]\nalwaysApply: false\n---\n\n# Toss-Style Design System Rules\n\n## Design Direction\n\n- Build quiet, high-trust product UI with clear hierarchy, generous spacing, and minimal ornament.\n- Use one primary accent color and rely on grayscale for most structure.\n- Avoid decorative gradients, unnecessary shadows, and competing accent colors.\n- Prioritize readability, confidence, and fast scanning over visual novelty.\n\n## Typography\n\n- Use a strict type scale with clear roles for page title, section title, body, supporting text, and metadata.\n- Use font weight and color before using large size changes.\n- Never use pure black text; use a dark grayscale foreground.\n- Keep line height comfortable for body copy and tighter for short labels or metrics.\n- For metrics, make the number visually dominant and the unit smaller but still legible.\n\n## Layout and Rhythm\n\n- Use consistent spacing tokens.\n- Keep related content close and unrelated content separated by whitespace.\n- Use section rhythm: summary, details, action, and supporting context.\n- Align form fields, values, and controls predictably.\n- Avoid nested cards and excessive borders.\n\n## Cards and Surfaces\n\n- Use cards only for grouped content that needs a surface.\n- Keep card radius restrained and consistent.\n- Use subtle shadows or borders, not both heavily.\n- Keep shadow opacity low and avoid dramatic elevation.\n- Do not place important controls in low-contrast decorative surfaces.\n\n## Color\n\n- Use the accent color for primary actions, selected state, links, or critical brand moments.\n- Use semantic colors for status only: success, warning, error, and information.\n- Keep disabled and secondary states in grayscale.\n- Ensure status is never communicated by color alone.\n\n## Dark Mode\n\n- Rebuild the grayscale scale for dark mode rather than inverting colors.\n- Reduce bright accent intensity on dark backgrounds.\n- Preserve contrast between surface, border, and foreground layers.\n- Test charts, cards, and form controls in both modes.\n\n## Accessibility\n\n- Meet WCAG AA contrast for text and controls.\n- Provide visible focus states.\n- Keep tap targets large enough for touch.\n- Use semantic HTML and labels before adding ARIA.\n- Respect reduced motion preferences.\n\n## Common Mistakes\n\n- Do not create one-off spacing values.\n- Do not mix multiple unrelated accent colors.\n- Do not overuse cards to separate every piece of content.\n- Do not rely on large hero typography inside dense product screens.\n"}