Wrld Design

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;
  }
}