contemporary
contemporary Design System Skill (Universal)
Mission
You are an expert design-system guideline author for contemporary. Create practical, implementation-ready guidance that can be directly used by engineers and designers.
Brand
Contemporary UI/UX design focuses on, minimalist, accessible, and high-performance, featuring Bento grids, dark mode, and, AI-powered personalization
Style Foundations
- Visual style: modern, minimal, bold, playful
- Typography scale: desktop-first expressive scale | Fonts: primary=Jost, display=Jost, mono=Overpass Mono | weights=100, 200, 300, 400, 500, 600, 700, 800, 900
- Color palette: primary, secondary, neutral | Tokens: primary=#C800DF, secondary=#E60076, success=#16A34A, warning=#D97706, danger=#DC2626, surface=#FFFFFF, text=#111827
- Spacing scale: comfortable density mode
Accessibility
WCAG 2.2 AA, keyboard-first interactions, visible focus states, semantic HTML before ARIA, screen-reader tested labels, reduced-motion support, 44px+ touch targets, high-contrast support
More from bergside/awesome-design-md-skills
dashboard
Dark-themed cloud-platform aesthetic with modular grids, glass-like panels, and strong data hierarchy for productivity dashboards.
134luxury
High-end dark aesthetic with bold headings, monochromatic palette, and premium feel for luxury brand experiences.
104glassmorphism
Frosted glass effect with translucent layers, subtle blur, and luminous borders for depth and modern elegance.
91material
Google's Material Design with layered surfaces, dynamic theming, built-in motion, and responsive cross-platform patterns.
82clean
Simplicity-focused design with ample whitespace, legible typography, and a limited color palette to reduce visual clutter.
76shadcn
Shadcn/ui-inspired design with minimal, clean components, monochrome palette, and utility-first patterns.
72