60 lines
2 KiB
Markdown
60 lines
2 KiB
Markdown
# 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:
|
|
```css
|
|
@import 'variables.css';
|
|
```
|
|
|
|
### Tailwind CSS
|
|
Add the `tailwind.preset.js` to your `tailwind.config.js`:
|
|
```javascript
|
|
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.
|