Contemporary design skill for AI agents

Overview

Contemporary is a bold, forward-looking design system skill for AI-powered development. It embodies the defining patterns of modern UI/UX — Bento grid layouts, dark mode readiness, expressive typography, and a vibrant purple-to-pink color identity. This isn't a timeless neutral system; it's designed to look like it was built today.

When you add this skill file to your AI coding tool, every component it generates reflects current design trends while staying structurally disciplined — comfortable spacing density, clear hierarchy, and the deepest accessibility spec of any typeui.sh skill.

Design tokens

Color palette

Contemporary uses a high-energy dual-accent palette built on purple and hot pink — two colors that dominate the most visually striking interfaces shipping right now:

The purple-pink pairing is designed for gradient transitions between primary and secondary — a hallmark of contemporary UI. The AI agent can blend these tokens across hero sections, buttons, and accent borders while keeping the rest of the interface grounded in neutral tones.

Typography

Contemporary uses Jost for all body and display text, paired with Overpass Mono for code and technical content. Jost is a geometric sans-serif inspired by 1920s German typographic experiments but refined for screens — its clean, slightly futuristic letterforms capture the "designed right now" feeling that defines this system.

The type scale follows a desktop-first expressive approach, optimized for large screens and bold compositions before scaling down to mobile. Font weights span the full range from 100 (thin) to 900 (black), giving the AI agent room for dramatic typographic moments — ultra-light hero text, bold section headings, and everything in between.

Spacing

Contemporary uses a comfortable density mode rather than a fixed pixel scale. The AI agent prioritizes generous whitespace and breathing room between elements, making interfaces feel open and unhurried. This density approach is especially effective with Bento grid layouts, where cards and content blocks need consistent internal padding and gutters to read as a cohesive composition.

Component coverage

The skill file covers 40+ component families grouped by function:

• Inputs and forms — buttons, text inputs, selects, comboboxes, checkboxes, radios, switches, textareas, date/time pickers, file uploaders
• Data display — cards, tables, data lists, data grids, charts, stats/metrics, badges, chips, avatars
• Navigation — breadcrumbs, pagination, steppers, sidebars, top bars, command palette, tabs
• Overlays — modals, drawers, sheets, tooltips, popovers, menus
• Feedback — alerts, toasts, notifications center, progress indicators, skeletons, empty states
• Page-level — authentication screens, settings pages, documentation layouts, onboarding flows, pricing blocks, search

For each component, the skill defines required interaction states (default, hover, focus-visible, active, disabled, loading, error), keyboard and touch behavior, spacing and typography token usage, and responsive edge cases.

Design philosophy

Contemporary encodes the patterns that define the current generation of best-in-class interfaces:

• Bento grid layouts — the skill instructs the AI to compose pages using modular, card-based grids where content blocks of varying sizes create visual rhythm and scannable hierarchy
• Dark mode native — not an afterthought bolt-on. The color tokens and contrast rules are designed to work equally well in light and dark contexts from the start
• Expressive typography — Jost's geometric forms at the full weight range let the AI create typographic compositions that feel editorial and bold, not just functional
• Gradient-ready accents — the purple-to-pink primary/secondary pairing is specifically chosen for smooth gradient transitions across hero sections, CTAs, and decorative elements
• Comfortable density — generous spacing creates interfaces that feel modern and breathable rather than cramped, aligning with the current trend toward open, card-based layouts

This makes Contemporary a strong fit for:

• AI and machine learning product interfaces
• Creative SaaS platforms and design tools
• Social and community-driven applications
• Startup landing pages and product marketing sites
• Any product that wants to signal "built with the latest thinking"

Accessibility

Contemporary has the most comprehensive accessibility spec of any typeui.sh design skill, enforcing WCAG 2.2 AA plus additional requirements that go beyond the baseline:

• Keyboard-first interactions for all interactive elements
• Visible focus states on every focusable component
• Semantic HTML before ARIA — the skill instructs the AI to use native elements first and only reach for ARIA roles when semantics aren't available natively
• Screen-reader tested labels — every interactive element gets a label that makes sense when read aloud, not just when seen visually
• Reduced-motion support — animations and transitions respect prefers-reduced-motion, ensuring the bold visual style doesn't create barriers for users with vestibular sensitivities
• 44px+ touch targets — all interactive elements meet minimum tap size requirements for mobile and touch interfaces
• High-contrast support — the color system works with OS-level high-contrast modes, not just the skill's own contrast ratios

Every accessibility rule is written to be testable in code review.

How to use with Claude AI

In Cursor IDE

1. Pull the skill file into your project:

npx typeui.sh pull contemporary

2. The file is saved to .cursor/skills/contemporary/SKILL.md by default. Cursor automatically picks up skill files from this directory and makes them available to Claude.

3. Start prompting — Claude will apply the Contemporary design tokens, Jost typography, Bento grid patterns, and purple-pink accents when generating UI code.

In Claude Desktop or API

1. Copy the skill file content from the typeui.sh page (use the Copy button in the sidebar).

2. Paste it into your system prompt or as a reference document at the start of your conversation.

3. Ask Claude to build components or pages. It will follow the Contemporary guidelines — using the gradient-ready color pairing, comfortable spacing density, and expressive typography throughout.

In other AI tools

The skill file is standard markdown and works with any AI tool that accepts system-level instructions:

• Windsurf — place the file in your project's .windsurf/rules/ directory
• GitHub Copilot — add it to .github/copilot-instructions.md or reference it in your prompt
• OpenAI GPTs — upload it as a knowledge file in the GPT configuration
• Any LLM API — include the file content in the system message

What sets Contemporary apart

Contemporary doesn't just list tokens — it teaches the AI agent to build interfaces that look and feel like the best products shipping right now:

• Gradient-native color system — the purple + hot pink pairing is engineered for smooth gradient transitions, giving the AI a built-in tool for creating visual energy without custom assets
• Bento grid awareness — the skill encodes modular grid composition rules so the AI naturally produces card-based layouts with varied sizes and consistent rhythm
• Deepest accessibility spec — seven explicit requirements (semantic HTML, screen-reader labels, reduced motion, 44px touch targets, high-contrast mode) go well beyond the WCAG AA baseline of other skills
• Comfortable density over fixed scale — instead of a rigid pixel grid, the spacing system adapts to context, creating interfaces that feel generous and modern
• Anti-patterns built in — the skill blocks low contrast text, inconsistent spacing, and ambiguous labels so the bold visual style never comes at the cost of clarity
• Quality gates — every rule is anchored to a token or measurable threshold, keeping output consistent across any number of generated components