toss-style-design-system — Cursor rule for UI design and setup

---
description: Toss-style UI design rules for disciplined spacing, typography, grayscale hierarchy, restrained color, cards, metrics, dark mode, and accessibility
globs: ["**/*.tsx", "**/*.jsx", "**/*.vue", "**/*.svelte", "**/*.css", "**/*.scss", "tailwind.config.*"]
alwaysApply: false
---

# Toss-Style Design System Rules

## Design Direction

- Build quiet, high-trust product UI with clear hierarchy, generous spacing, and minimal ornament.
- Use one primary accent color and rely on grayscale for most structure.
- Avoid decorative gradients, unnecessary shadows, and competing accent colors.
- Prioritize readability, confidence, and fast scanning over visual novelty.

## Typography

- Use a strict type scale with clear roles for page title, section title, body, supporting text, and metadata.
- Use font weight and color before using large size changes.
- Never use pure black text; use a dark grayscale foreground.
- Keep line height comfortable for body copy and tighter for short labels or metrics.
- For metrics, make the number visually dominant and the unit smaller but still legible.

## Layout and Rhythm

- Use consistent spacing tokens.
- Keep related content close and unrelated content separated by whitespace.
- Use section rhythm: summary, details, action, and supporting context.
- Align form fields, values, and controls predictably.
- Avoid nested cards and excessive borders.

## Cards and Surfaces

- Use cards only for grouped content that needs a surface.
- Keep card radius restrained and consistent.
- Use subtle shadows or borders, not both heavily.
- Keep shadow opacity low and avoid dramatic elevation.
- Do not place important controls in low-contrast decorative surfaces.

## Color

- Use the accent color for primary actions, selected state, links, or critical brand moments.
- Use semantic colors for status only: success, warning, error, and information.
- Keep disabled and secondary states in grayscale.
- Ensure status is never communicated by color alone.

## Dark Mode

- Rebuild the grayscale scale for dark mode rather than inverting colors.
- Reduce bright accent intensity on dark backgrounds.
- Preserve contrast between surface, border, and foreground layers.
- Test charts, cards, and form controls in both modes.

## Accessibility

- Meet WCAG AA contrast for text and controls.
- Provide visible focus states.
- Keep tap targets large enough for touch.
- Use semantic HTML and labels before adding ARIA.
- Respect reduced motion preferences.

## Common Mistakes

- Do not create one-off spacing values.
- Do not mix multiple unrelated accent colors.
- Do not overuse cards to separate every piece of content.
- Do not rely on large hero typography inside dense product screens.