Toss Style Design System

Cursor-Regel, die UI-Code im minimalistischen, klar strukturierten Look der Toss-App generieren lässt.

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

Diese Cursor-Regel überträgt die Designsprache der koreanischen Fintech-App Toss auf generierten UI-Code: großzügige Weißräume, ruhige Farbpalette, klare Typografie-Hierarchie und dezente Schatten statt verspielter Effekte. Statt vager Anweisungen wie „mach es hübsch“ bekommt Cursor konkrete Vorgaben zu Spacing, Rundungen und Komponentenaufbau und hält sich beim Generieren neuer Komponenten daran. Praktisch für Solo-Entwickler und kleine Teams, die ein konsistentes, professionell wirkendes UI wollen, ohne selbst ein Designsystem zu pflegen oder ein Designteam zu haben. Wer bereits ein eigenes Designsystem mit festen Tokens nutzt, sollte die Regel eher als Ausgangspunkt anpassen als unverändert übernehmen, da sie fest auf den Toss-Look zugeschnitten ist.

Praxis-Tipp

Lege die Regel als .mdc-Datei in .cursor/rules ab und erwähne sie im Prompt explizit, z. B. „Erstelle eine Card-Komponente nach dem Toss Style Design System“, damit Cursor sie sicher zieht.

Lizenz & Quelle

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

Lade …