Luxury design skill for AI agents

Overview

Luxury is a dark, typographically bold design system skill for AI-powered development. It strips the interface down to its most essential elements — black surfaces, near-white text, oversized headings, and nothing else competing for attention. The result is UI that feels like a high-end fashion editorial or an architect's portfolio: dramatic, confident, and deliberately spare.

When you add this skill file to your AI coding tool, every component it generates lives on a dark canvas where typography is the hero. No bright accent colors, no gradients, no decoration — just Oswald at scale, white on black, and the kind of restraint that only looks effortless when every detail is controlled.

Design tokens

Color palette

Luxury inverts the standard design system palette. The surface is black, the text is white, and the primary/secondary tokens are both near-white — creating a monochromatic system where color is almost entirely absent:

The monochromatic palette is the most radical token choice of any typeui.sh design skill. Primary and secondary are both #FAFAFA, which means the AI agent cannot rely on color to differentiate elements. Instead, it uses typography scale, weight, spacing, and subtle opacity shifts to create hierarchy. When success, warning, or danger states appear, they carry enormous visual weight precisely because color is so rare in the rest of the interface.

Typography

Luxury uses Oswald for everything — body text, display headings, UI labels, navigation. This is a bold, condensed typeface with strong vertical emphasis, and it's the single most defining choice in the entire system.

The type scale follows a desktop-first expressive approach with an emphasis on big headings. Oswald's condensed letterforms mean oversized type doesn't consume as much horizontal space as a standard sans-serif would — so the AI agent can set headings at massive sizes without breaking layouts. Font weights span 100 (thin) to 900 (black), and the interplay between ultra-thin body text and heavy display headings on a dark background is what gives Luxury its editorial quality.

JetBrains Mono is the sole exception, used for code blocks and monospaced content where Oswald's condensed proportions would hurt readability.

Spacing

Luxury uses an 8pt baseline grid — every margin, padding, and gap aligns to multiples of 8px. On dark interfaces, spacing does more visual work than on light ones. The eye perceives negative space differently on black surfaces — gaps feel larger, elements feel more isolated. The 8pt grid gives the AI agent a consistent rhythm that accounts for this perception, keeping layouts feeling intentionally sparse rather than accidentally empty.

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

Luxury operates on the principle that removing everything nonessential is the most powerful design move you can make:

• Dark-first, not dark-mode — this isn't a light interface with a dark variant. Black is the foundation. Every component, every state, every layout is designed for dark surfaces first and only
• Typography as the only decoration — with no color accents and no illustrative elements, Oswald's condensed forms and dramatic weight range carry the entire visual identity. The AI agent learns to use scale and weight the way other systems use color
• Monochromatic hierarchy — without color differentiation, the skill teaches the AI to build hierarchy through type size, weight contrast, opacity levels, and spacing. A thin 14px label next to a black 40px heading creates more contrast than any color pairing
• Color as exception — success, warning, and danger states are the only moments where color appears. This scarcity makes status indicators impossible to miss
• Condensed type at scale — Oswald's narrow letterforms let headings go bigger without overflowing containers, giving the AI permission to be typographically dramatic in ways that standard sans-serifs can't support

This makes Luxury a strong fit for:

• Fashion and lifestyle brands
• Architecture and design portfolios
• High-end product showcases and e-commerce
• Photography and visual art galleries
• Premium SaaS landing pages
• Any product where the brand identity is built on restraint and exclusivity

Accessibility

Luxury enforces accessibility with requirements tailored to its dark, high-contrast environment:

• Keyboard-first interactions for all interactive elements
• Visible focus states on every focusable component — particularly critical on dark surfaces where subtle focus indicators can disappear
• Semantic HTML before ARIA — native elements first, ARIA only when semantics aren't available natively
• 44px+ touch targets — all interactive elements meet minimum tap size requirements, especially important when the visual style is minimal and tap targets might not have obvious boundaries
• High-contrast support — the white-on-black foundation naturally provides strong contrast, but the skill ensures OS-level high-contrast modes are also respected

The pure white text (#FFFFFF) on pure black surface (#000000) provides maximum contrast ratio (21:1), far exceeding WCAG AA requirements. The skill ensures this contrast advantage is maintained across all component states, including hover and disabled variants where opacity shifts could reduce readability.

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 luxury

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

3. Start prompting — Claude will generate dark-first interfaces with Oswald typography, monochromatic hierarchy, and the 8pt grid system.

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 Luxury guidelines — black surfaces, white text, oversized Oswald headings, and hierarchy built entirely through type and space.

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 Luxury apart

Luxury is the most opinionated design skill on typeui.sh. Where every other skill uses color to differentiate, Luxury removes it entirely:

• Pure monochrome — primary and secondary are both #FAFAFA on a #000000 surface. The AI agent builds hierarchy through type scale, weight, and spacing alone
• Single typeface identity — Oswald everywhere (body, display, UI chrome) creates a unified voice that's immediately recognizable as premium and editorial
• Dark-first design — not a dark mode toggle; the entire system is built from black outward. Components never assume a light background
• 21:1 contrast ratio — white on black provides the maximum possible contrast, turning an aesthetic choice into an accessibility advantage
• Color scarcity as a feature — success, warning, and danger are the only color moments, making status indicators impossible to overlook
• Anti-patterns built in — the skill blocks low contrast text, inconsistent spacing, and ambiguous labels so the minimal style never becomes unclear
• Quality gates — every rule is anchored to a token or measurable threshold, keeping the stark aesthetic consistent whether the AI generates a single card or an entire application