wrld-design

majiayu000's avatarfrom majiayu000

WRLD Inc design system for building UI components with Tailwind CSS and ShadCN. Use when creating React components, designing interfaces, generating CSS, or implementing the WRLD brand design system. Includes color tokens, typography, component patterns, and visual guidelines.

⭐0stars🔀0forks📁View on GitHub🕐Updated Jan 5, 2026
[Brand and Creative Direction]

When & Why to Use This Skill

The WRLD Design System Claude skill is a comprehensive toolkit for developers and designers to build consistent, high-quality UI components using Tailwind CSS and ShadCN. It streamlines the implementation of the WRLD brand identity by providing ready-to-use CSS variables, OKLCH color palettes, and typography guidelines, ensuring a modern, tech-forward aesthetic across React applications.

Use Cases

  • Developing React components that strictly follow WRLD's brand identity and visual design patterns.
  • Implementing accessible and perceptually uniform color schemes using the OKLCH palette for both light and dark modes.
  • Configuring Tailwind CSS themes with specific typography, such as JetBrains Mono, and custom border-radius constraints.
  • Accelerating the UI development process by using pre-defined CSS variables and component guidelines for ShadCN.
namewrld-design
descriptionWRLD Inc design system for building UI components with Tailwind CSS and ShadCN. Use when creating React components, designing interfaces, generating CSS, or implementing the WRLD brand design system. Includes color tokens, typography, component patterns, and visual guidelines.

WRLD Design System

A comprehensive design system for WRLD Inc, built for Tailwind CSS and ShadCN component libraries. This skill helps you create consistent, branded UI components following WRLD's modern tech-forward aesthetic.

Quick Start

When building WRLD-branded components:

  1. Use the CSS variables defined in this system
  2. Follow the OKLCH color palette for perceptual uniformity
  3. Apply sharp corners by default (radius: 0), pill-shaped for primary CTAs
  4. Use JetBrains Mono for technical/code content
  5. Implement both light and dark mode support

CSS Foundation

Include this CSS at the root of your project:

@layer base {
  :root {
    --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, monospace;

    --background: oklch(1 0 0);
    --foreground: oklch(0.145 0 0);
    --card: oklch(1 0 0);
    --card-foreground: oklch(0.145 0 0);
    --popover: oklch(1 0 0);
    --popover-foreground: oklch(0.145 0 0);
    --primary: oklch(0.67 0.16 58);
    --primary-foreground: oklch(0.99 0.02 95);
    --secondary: oklch(0.967 0.001 286.375);
    --secondary-foreground: oklch(0.21 0.006 285.885);
    --muted: oklch(0.97 0 0);
    --muted-foreground: oklch(0.556 0 0);
    --accent: oklch(0.67 0.16 58);
    --accent-foreground: oklch(0.99 0.02 95);
    --destructive: oklch(0.58 0.22 27);
    --destructive-foreground: oklch(0.99 0.02 95);
    --border: oklch(0.922 0 0);
    --input: oklch(0.922 0 0);
    --ring: oklch(0.708 0 0);

    --chart-1: oklch(0.88 0.15 92);
    --chart-2: oklch(0.77 0.16 70);
    --chart-3: oklch(0.67 0.16 58);
    --chart-4: oklch(0.56 0.15 49);
    --chart-5: oklch(0.47 0.12 46);

    --radius: 0;

    --sidebar: oklch(0.985 0 0);
    --sidebar-foreground: oklch(0.145 0 0);
    --sidebar-primary: oklch(0.67 0.16 58);
    --sidebar-primary-foreground: oklch(0.99 0.02 95);
    --sidebar-accent: oklch(0.67 0.16 58);
    --sidebar-accent-foreground: oklch(0.99 0.02 95);
    --sidebar-border: oklch(0.922 0 0);
    --sidebar-ring: oklch(0.708 0 0);
  }

  .dark {
    --background: oklch(0.145 0 0);
    --foreground: oklch(0.985 0 0);
    --card: oklch(0.205 0 0);
    --card-foreground: oklch(0.985 0 0);
    --popover: oklch(0.205 0 0);
    --popover-foreground: oklch(0.985 0 0);
    --primary: oklch(0.77 0.16 70);
    --primary-foreground: oklch(0.28 0.07 46);
    --secondary: oklch(0.274 0.006 286.033);
    --secondary-foreground: oklch(0.985 0 0);
    --muted: oklch(0.269 0 0);
    --muted-foreground: oklch(0.708 0 0);
    --accent: oklch(0.77 0.16 70);
    --accent-foreground: oklch(0.28 0.07 46);
    --destructive: oklch(0.704 0.191 22.216);
    --destructive-foreground: oklch(0.99 0.02 95);
    --border: oklch(1 0 0 / 10%);
    --input: oklch(1 0 0 / 15%);
    --ring: oklch(0.556 0 0);

    --sidebar: oklch(0.205 0 0);
    --sidebar-foreground: oklch(0.985 0 0);
    --sidebar-primary: oklch(0.77 0.16 70);
    --sidebar-primary-foreground: oklch(0.28 0.07 46);
    --sidebar-accent: oklch(0.77 0.16 70);
    --sidebar-accent-foreground: oklch(0.28 0.07 46);
    --sidebar-border: oklch(1 0 0 / 10%);
    --sidebar-ring: oklch(0.556 0 0);
  }
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}

For detailed component patterns, see components.md. For the complete design reference, see reference.md.