Claude Code Plugins

Community-maintained marketplace

Feedback

orla-ui-guidelines

@Tan0610/Orla_DB
0
0

ORLA3 UI design system for consistent, coherent component styling. Use when building or updating UI components, sections, or pages. Triggers include requests mentioning "stay consistent with UI", "follow brand guidelines", "keep it coherent", "match our design", or any component/section creation for ORLA3 or GECS Labs projects.

Install Skill

1Download skill
2Enable skills in Claude

Open claude.ai/settings/capabilities and find the "Skills" section

3Upload to Claude

Click "Upload skill" and select the downloaded ZIP file

Note: Please verify skill by going through its instructions before using it.

SKILL.md

name orla-ui-guidelines
description ORLA3 UI design system for consistent, coherent component styling. Use when building or updating UI components, sections, or pages. Triggers include requests mentioning "stay consistent with UI", "follow brand guidelines", "keep it coherent", "match our design", or any component/section creation for ORLA3 or GECS Labs projects.

ORLA UI Guidelines

Apply these guidelines when creating or updating any UI component to maintain visual consistency.

Color System

All colors use HSL format matching CSS variables in globals.css.

Token HSL Value Usage
--background 244 44% 6% Page backgrounds
--card 240 5% 7% Card surfaces
--foreground 0 0% 98% Primary text
--accent 45 85% 37% Gold — primary CTAs, active states
--brand-deep 246 45% 25% Royal blue — secondary actions, hovers
--muted 240 3.7% 15.9% Subtle backgrounds
--muted-foreground 240 5% 64.9% Secondary text, labels
--destructive 0 62.8% 30.6% Delete, errors, urgent
--border 240 4% 12% Borders, dividers

Button Hierarchy

Use the correct button class based on action importance:

  1. btn-primary-action — Gold accent, glow effect. Use for main CTAs: "Sign Up", "Send Proposal", "Submit"
  2. btn-secondary-action — Royal blue. Use for important secondary actions: "View Details", "Edit"
  3. btn-third-action — Glass with blue hover. Use for tertiary actions: "Cancel", "Back"
  4. btn-fourth-action / btn-base-glass — Ghost/glass style. Use for subtle actions: "Message", icon buttons
  5. btn-destructive-action — Red with glow. Use for destructive actions: "Delete", "Remove"

All buttons include: backdrop-filter: blur(10px), hover translateY(-2px), active scale(0.95).

Component Patterns

Cards

  • Use card-glass for glassmorphism effect
  • Background: hsla(var(--foreground) / 0.05)
  • Border: 1px solid hsla(var(--foreground) / 0.1)
  • Always include backdrop-filter: blur(12px)

Typography

  • h1: text-4xl font-extrabold tracking-tight lg:text-5xl
  • h2: text-3xl font-semibold tracking-tight (with border-bottom for sections)
  • h3: text-2xl font-semibold tracking-tight
  • h4: text-xl font-semibold tracking-tight
  • Body: leading-7
  • Labels: Uppercase, text-xs font-medium tracking-wider text-muted-foreground

Spacing & Layout

  • Border radius: 1rem (use rounded-2xl or CSS var --radius)
  • Standard padding: p-4 for cards, p-6 for sections
  • Gap between items: gap-4 standard, gap-2 for tight groupings

Interactive States

  • Hover: translateY(-2px) + glow shadow using accent color
  • Active: scale(0.95)
  • Focus: ring-2 ring-ring ring-offset-2 ring-offset-background

Reference Files

For detailed patterns and code examples, see: