skills.rest
Fandry96
Fandry96COMMUNITY
Explore all skills by this author →
GitHub

design-luxury

Implement a luxury design system blueprint for Next.js 15 apps with Tailwind v4 and Shadcn UI.

27|5|Updated Apr 3, 2026
Search Tags:#typography#design#nextjs#tailwind#design-system#dark-mode#luxury
One-click install
npx skills add https://github.com/Fandry96/k3-agentic-skills --skill design-luxury
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-luxury
Source: https://github.com/Fandry96/k3-agentic-skills/tree/main/skills/design-luxury
Command: npx skills add https://github.com/Fandry96/k3-agentic-skills --skill design-luxury

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a blueprint to implement a cohesive luxury design system for modern web apps, ensuring consistent branding across dark-mode interfaces.

Core Features & Use Cases

  • Font implantation using a precise set of Google fonts (Oswald, Inter, JetBrains Mono) for headings, body, and code.
  • Global theming with Tailwind v4 @theme overrides to enforce a premium color, typography, and spacing system.
  • UI implementation mandates that enforce sharp corners, high contrast, and generous whitespace to achieve a luxury look.

Quick Start

Apply the luxury design system by implementing its font setup, theme overrides, and UI mandates into your Next.js project.

Frequently Asked Questions about design-luxury

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

FAQPage Schema
How do I build a premium dark mode UI in Next.js with Tailwind CSS?▼

To build a premium dark mode UI in Next.js, apply a cohesive luxury design system blueprint using Tailwind v4 @theme overrides, Oswald typography, and strict UI mandates for high-contrast visuals. It enforces precise spacing and sharp corners to ensure consistent branding.

What fonts work best for a luxury design system in modern web apps?▼

Oswald, Inter, and JetBrains Mono are ideal for a luxury design system, providing precise font implantation for headings, body text, and code. This combination ensures premium typography and consistent visual hierarchy across dark-mode interfaces.

Does this luxury design system work with Next.js 15 and Shadcn UI?▼

Yes, the luxury design system is specifically applicable to Next.js 15 projects using Tailwind v4 and Shadcn UI. It enforces global theme overrides and exact font implantation to ensure consistent, premium visuals across your application.

How do I enforce consistent spacing and typography in a Tailwind v4 design system?▼

Enforce consistent spacing and typography in a Tailwind v4 design system by applying global @theme overrides. This establishes a strict color, typography, and spacing system that maintains premium visual standards across all UI components.

What are the UI implementation mandates for achieving a luxury look in dark mode?▼

UI implementation mandates for a luxury look require sharp corners, high contrast, and generous whitespace. These strict rules ensure your dark-mode interface maintains a premium, cohesive appearance across all components and pages.

Why use a design system blueprint for dark mode interfaces instead of custom styling?▼

A design system blueprint ensures consistent branding across dark-mode interfaces by enforcing exact font implantation, global theme overrides, and strict UI mandates. This prevents visual inconsistencies that often arise from ad-hoc custom styling approaches.

Related Skills

Explore More Design & Creative Skills→
agusmdevagusmdev
5

tanstack-shadcn-setup

Configure Tailwind CSS v4 and shadcn/ui for TanStack Start and Router projects.

Community
Advanced
SensLiaoSensLiao

luxury

Create dark-first monochromatic design systems with Oswald typography for luxury UIs.

Community
Advanced
tenequmtenequm
32

styling-with-tailwind

Apply Tailwind CSS utility classes and shadcn/ui patterns to style React interfaces.

Community
Intermediate
gouravsingh311gouravsingh311

tailwind-v4

Configure Tailwind v4 design tokens using CSS-first @theme directives.

Community
Advanced