Add Toss-Style Design System Rules

[bitjaru]

Proposal: Toss-Style Design System Cursorrules

What

A .cursorrules file that teaches AI to produce professional, Toss-style (Korean fintech) UI — consistent typography hierarchy, color philosophy, card structures, and visual rhythm.

Why

Most cursorrules focus on code patterns. This one focuses on design — teaching AI to think like a UI/UX designer. It prevents common AI-generated UI problems: random spacing, inconsistent typography, no visual hierarchy.

Rules included

• Single accent color philosophy (one brand color, everything else grayscale)
• 5-level grayscale text hierarchy (never pure black)
• 2:1 number/unit size ratio for metrics
• 4 section types for page layout with visual rhythm rules
• Card shadow limits (opacity 4-8%)
• 30+ forbidden patterns
• Dark mode rules
• Accessibility requirements (WCAG AA)

Category

CSS and Styling / Frontend Frameworks

Source

Based on StyleSeed — an open-source project with 47 React components and a comprehensive design language document.

Happy to adjust format as needed.

[bitjaru]

Update: v2.0.0 — Engine + Skins Architecture

StyleSeed has been restructured into a brand-agnostic design engine:

styleseed/
├── engine/    ← Design brain (69 rules, 48 components, 11 skills)
└── skins/     ← Brand colors (toss, stripe, linear, vercel, notion + 58 via awesome-design-md)

• Engine = layout rules, composition recipes, UX patterns, forbidden mistakes (works with ANY brand)
• Skins = just a theme.css file with CSS variables (swap colors in seconds)
• 5 built-in skins + 58 more from awesome-design-md
• /ui-setup interactive wizard that lets you pick any skin

GitHub: https://github.com/bitjaru/styleseed
Release: https://github.com/bitjaru/styleseed/releases/tag/v2.0.0