Designing RS3/OSRS Interfaces

For a web render, scaffold with the runescapecn component library (React 19 + TypeScript + Tailwind v4 + Radix UI + CVA), which already implements classic OSRS borders, beveled 3D shadows, and RuneStar fonts:

TypeScript
import { Panel, Border, InventorySlot, Tab } from "runescapecn";

<Panel variant="osrs-stone" className="w-[488px]">
  <Border bevel="outset">
    <div className="grid grid-cols-4 gap-1 p-2">
      {items.map((item, i) => (
        <InventorySlot key={i} item={item} onDragStart={handleDrag} />
      ))}
    </div>
  </Border>
</Panel>

If no code context is given (pure visual mockup/render request), describe or generate a static image-style layout using the same structural rules below — stone-textured borders, beveled insets, correct color palette, pixel-accurate spacing.

Progress:

• Step 1: Identify target game version (RS3 "modern" vs OSRS "2007 classic") — styling differs significantly
• Step 2: Identify the component/interface type (inventory, bank, chatbox, spellbook, equipment, dialog, minimap, skill panel, bank pin, grand exchange, etc.)
• Step 3: Decide layout and grid structure based on real game dimensions
• Step 4: Apply correct visual language (borders, fonts, palette) for the chosen version
• Step 5: Build/render using component library or hand-coded markup
• Step 6: Add interactivity if requested (drag-drop, tab switching, tooltips, right-click menus)
• Step 7: Validate against authenticity checklist (see Best Practices)

Step 1: Version Identification

OSRS (2007-style):

• Flat, chunky pixel art aesthetic, low-res textures
• Stone/brown parchment borders with hard bevels
• Font: RuneScape UF (pixelated bitmap-style) or RuneStar equivalent
• Color palette: browns (#3e3529, #5d4a2e), tan/parchment (#b8a06f), black backgrounds (#000000 with 80% opacity overlays)
• Fixed-size interface panels (e.g., inventory is 488x332 classic layout, 4 columns x 7 rows of items)

RS3 (modern):

• Smoother gradients, semi-transparent glass-like panels
• Rounded corners option, HD icon rendering
• Font: RuneScape Bold / Plain (cleaner, more legible)
• Color palette: darker charcoal/slate backgrounds (#1a1a1a, #2b2b2b), gold accent trim (#cba135)
• Resizable/scalable UI mode support (mention if relevant)

Step 2–3: Component & Layout Reference

Step 4: Visual Language Rules

• Borders: always beveled — light edge top/left, dark edge bottom/right (outset) for raised panels; invert for pressed/inset slots
• Corners: OSRS uses sharp pixel corners; decorative corner pieces (gold leaf) on major windows in both versions
• Backgrounds: semi-transparent black/brown behind panels so game world shows through
• Fonts: never use generic sans-serif; closest free substitutes are "RuneScape UF" (pixel) or "RuneScape Quill"/"Plain" webfonts
• Icons: items rendered with isometric 3D style, drop shadow bottom-right, stack count in yellow/white text bottom-left for stackables
• Highlighting: hover state = thin white/yellow border glow; selected tab = raised/lit appearance vs. unselected = darker/flat

Step 5: Build

Prefer in order:

1. runescapecn components if working in React/Tailwind context
2. osrs.design system docs as reference for exact color tokens, spacing, and asset guidelines when building custom CSS
3. Hand-rolled HTML/CSS with CSS custom properties for the palette if no framework is in use

Step 6: Interactivity (if requested)

• Drag-and-drop: use native HTML5 drag events or a library (dnd-kit/react-dnd); snap-back animation if dropped outside valid target
• Tab navigation: maintain active-tab state, swap panel content, persist scroll position per tab
• Right-click context menu: list actions (Examine, Use, Drop, etc.) styled as a small bordered popup near cursor
• Tooltips: on hover, show item name (colored by rarity/value) with slight delay