skills.rest
bergside
bergsideOFFICIAL
Explore all skills by this author →
WebsiteGitHub

luxury

Generate token-based luxury dark UI components with typography and accessibility rules.

2.3k|211|Updated Mar 9, 2026
Search Tags:#accessibility#design-system#dark theme#typography tokens#component rules#luxury ui
One-click install
npx skills add https://github.com/bergside/awesome-design-skills --skill luxury-bergside
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: luxury
Source: https://github.com/bergside/awesome-design-skills/tree/main/skills/luxury
Command: npx skills add https://github.com/bergside/awesome-design-skills --skill luxury-bergside

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It prevents inconsistent, low-contrast, and visually unpolished dark UI implementations by providing clear token-based guidance for a luxury design language.

Core Features & Use Cases

  • Token-first luxury foundations: Defines a monochromatic dark palette, Oswald typography, JetBrains Mono labels, and an 8pt baseline grid for spacing rhythm.
  • Implementation-ready rules: Specifies do/don’t guidance, interaction-state expectations, and quality gates suitable for agentic design-system output.
  • Accessibility constraints built in: Enforces keyboard-first behavior, visible focus, semantic HTML before ARIA, touch target sizing, and high-contrast support.

Quick Start

Ask an AI to generate component and state guidance for a new product UI using the Luxury tokens and accessibility requirements.

Frequently Asked Questions about luxury

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a luxury dark UI with consistent typography and spacing?▼

Create a luxury dark UI by applying a token-based design system with monochromatic surfaces, Oswald and JetBrains Mono typography, and an 8pt baseline grid. This enforces consistent spacing rhythm and strong typography hierarchy across components.

What are the accessibility requirements for a premium dark theme design system?▼

Premium dark theme accessibility requires keyboard-first behavior, visible focus states, semantic HTML precedence over ARIA, 44px+ touch targets, and high-contrast support. These constraints are enforced directly within the design system rules.

How do I generate component rules and interaction states for a dark UI?▼

Generate component rules and interaction states by applying explicit color-token usage and do/don't guidance to your dark UI. The system provides interaction-state expectations and testable quality gates suitable for agentic design-system output.

Can I use my own typography tokens instead of Oswald and JetBrains Mono?▼

No, the luxury UI system specifically requires Oswald for typography hierarchy and JetBrains Mono for labels. These typography tokens are mandatory foundations for maintaining the premium design language and consistent visual polish.

Why does my dark UI fail accessibility quality gates during review?▼

Dark UI accessibility quality gates fail when implementations lack keyboard-first behavior, visible focus, semantic HTML before ARIA, or 44px+ touch targets. The system enforces these testable constraints to ensure high-contrast support and compliance.

Related Skills

Explore More Design & Creative Skills→
superpollo02superpollo02

luxury

Generate luxury dark UI design rules with typography and monochromatic tokens.

Community
Intermediate
bergsidebergside
2.3k

sleek

Enforce minimalist design-system specs with WCAG 2.2 AA accessibility rules.

Official
Intermediate
guideopsguideops

modern

Apply editorial typography, minimal color palettes, and clean layouts to digital product designs.

Community
Intermediate
superpollo02superpollo02

shadcn

Generate shadcn/ui-inspired component guidance with token-first rules and WCAG 2.2 AA constraints.

Community
Intermediate