Toss Style Design System

Lässt UI-Code im reduzierten, klar strukturierten Look der Toss-App entstehen.

Original-Beschreibung der Autoren: Toss-style UI design rules for disciplined spacing, typography, grayscale hierarchy, restrained color, cards, metrics, dark mode, and accessibility

Die Regel

---
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.

So nutzt du sie

Die Regel kopieren (Button oben) oder als Datei herunterladen und im Projekt unter .cursor/rules/ ablegen — Cursor lädt sie beim nächsten Start automatisch. Ältere Cursor-Versionen lesen alternativ eine einzelne .cursorrules-Datei im Projektstamm; dort einfach den Regel-Text ohne den Kopfblock zwischen den ----Zeilen einfügen.

Der Regel-Text ist englisch — Cursor versteht ihn unabhängig von der Sprache, in der Sie mit dem Editor chatten.

Im Detail

Die Regel richtet von Cursor generierten UI-Code am minimalistischen, stark strukturierten Look der koreanischen Finanz-App Toss aus: viel Weißraum, klare Typografie-Hierarchie, reduzierte Farbpalette und aufgeräumte Komponenten statt verspielter UI-Muster. Sinnvoll für Teams, die ein konsistentes, ruhiges Interface ohne eigenes Designsystem von Grund auf entwickeln wollen und sich an einem bekannten Referenzstil orientieren möchten. Wer bereits ein eigenes Designsystem oder Styleguide-Vorgaben hat, sollte abwägen, ob der Toss-Look dazu passt, da die Regel einen sehr spezifischen visuellen Charakter vorgibt statt neutraler Flexibilität.

Praxis-Tipp

Nutzen Sie sie gezielt beim Bau neuer Screens oder Komponenten, z. B. mit ‘Erstelle eine Kontoübersicht im Toss-Stil’, statt sie nachträglich auf bestehenden Code anzuwenden.

Lizenz & Quelle

• Lizenz: CC0 1.0
• Quelle: PatrickJS/awesome-cursorrules (GitHub)

Lade …