Mithral Design System (Themepo)

A consistent, arcane-inspired design system used across The Mithral Archive applications.

Core Palette

• Obsidian: #08090C (Primary Background)
• Mithral: #E2E8F0 (Primary Text / Silver)
• Mithral Dim: #94A3B8 (Secondary Text)
• Mithral Dark: #334155 (Borders / Muted)
• Arcane Blue: #38BDF8 (Accent / Glow)

Typography

• Runic/Heading: 'Cinzel Decorative', serif
• Body: 'Inter', sans-serif
• Mono: 'JetBrains Mono', monospace

Usage

CSS Variables

Import variables.css into your global styles:

@import 'variables.css';

Tailwind CSS

Add the tailwind.preset.js to your tailwind.config.js:

module.exports = {
  presets: [require('./tailwind.preset.js')],
  // ... rest of config
}

Base & Components

Include base.css and components.css for standard animations, scrollbars, and UI components like the arcane-circle or ledger-row.

Key Components

• .arcane-circle: Rotating background rings.
• .ledger-row: Interactive links with the "Mithral Vein" hover effect.
• .stat-card: Glowing cards for display metrics.
• .portal-divider: Ornamental dividers with gradient lines.
• .bg-noise: Film grain overlay effect.