45 lines
1.2 KiB
Markdown
45 lines
1.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**: `#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:
|
|
```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.
|
|
- **.portal-divider**: Ornamental dividers with gradient lines.
|
|
- **.bg-noise**: Film grain overlay effect.
|