Mithral Design System (Themepo)

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

Core Palette

Obsidian: #08090C (Primary Background)
Mithral: #FFFFFF (Primary Text / Silver)
Mithral Dim: rgba(255, 255, 255, 0.74) (Secondary Text)
Mithral Soft: rgba(255, 255, 255, 0.48) (Quiet Labels)
Mithral Dark: rgba(255, 255, 255, 0.22) (Muted Lines)
Arcane Blue: #A78BFA (Purple Accent / Glow)

Surface Language

Surface Card: dark glass card surface used for panels and controls.
Surface Card Hover: slightly brighter glass surface for interactive hover states.
Surface Glass: translucent obsidian field for inputs and subtle overlays.
Border Arcane: low-opacity purple border for active/selected states.

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.
.glass-panel: Portal-style glass card panel.
.arcane-button: Purple-accent uppercase action button.
.eyebrow-rune: Small uppercase decorative label.
.portal-divider: Ornamental dividers with gradient lines.
.bg-noise: Film grain overlay effect.

Notes

The general design-system files have been aligned with the newer Portal-v2 brand language. Jellyfin/ElegantFin theme files are separate and should be updated independently.

2 KiB Raw Permalink Blame History